/* Landings de producto: superficies blandas y volumen, con la marca de cada tienda.
   Scope propio: no modifica catálogo, backoffice ni el formulario de checkout. */
@font-face {
    font-family: "Zappy Nunito";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../../../assets/fonts/nunito/nunito-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.zappy-landing-clay,
.zappy-product-clay {
    --landing-accent: #763ebd;
    --landing-on-accent: #fff;
    --landing-surface: #fff;
    --landing-surface-soft: #f7f2fc;
    --landing-ink: #30243f;
    --landing-muted: #6c5f7c;
    --landing-border: #e5dbee;
    --landing-shadow-card: inset 0 3px 1px rgb(255 255 255 / 95%),
        inset 0 -6px 3px rgb(129 91 166 / 10%), 0 14px 30px rgb(55 32 80 / 9%);
    --landing-shadow-control: inset 0 3px 2px rgb(255 255 255 / 35%),
        inset 0 -4px 2px rgb(0 0 0 / 16%), 0 6px 12px rgb(55 32 80 / 15%);
    --landing-shadow-soft: inset 0 2px 1px rgb(255 255 255 / 85%),
        inset 0 -3px 2px rgb(129 91 166 / 10%), 0 4px 12px rgb(55 32 80 / 7%);
    --landing-shadow-field: inset 0 2px 5px rgb(55 32 80 / 7%),
        inset 0 -2px 1px rgb(255 255 255 / 90%);
    --landing-radius: 30px;
    font-family: "Zappy Nunito", "Manrope", system-ui, sans-serif;
}

.zappy-landing-clay .page-section[data-landing-tone="dark"],
.zappy-product-clay[data-landing-tone="dark"] {
    --landing-surface: #292332;
    --landing-surface-soft: #342c3f;
    --landing-ink: #faf6ff;
    --landing-muted: #c7bdd2;
    --landing-border: #51445f;
    --landing-shadow-card: inset 0 3px 1px rgb(255 255 255 / 7%),
        inset 0 -6px 3px rgb(0 0 0 / 16%), 0 14px 30px rgb(0 0 0 / 22%);
    --landing-shadow-control: inset 0 3px 2px rgb(255 255 255 / 25%),
        inset 0 -4px 2px rgb(0 0 0 / 20%), 0 6px 12px rgb(0 0 0 / 25%);
    --landing-shadow-soft: inset 0 2px 1px rgb(255 255 255 / 6%),
        inset 0 -3px 2px rgb(0 0 0 / 14%), 0 4px 12px rgb(0 0 0 / 18%);
    --landing-shadow-field: inset 0 2px 5px rgb(0 0 0 / 22%),
        inset 0 -2px 1px rgb(255 255 255 / 5%);
}
.zappy-product-clay[data-landing-tone="dark"] {
    color-scheme: dark;
}
.zappy-landing-clay .page-zone-body :is(h1, h2, h3, h4, h5, h6, button, input, select, textarea) {
    font-family: inherit;
}

.zappy-landing-clay .page-zone-body > .page-section {
    color: var(--landing-ink);
}
.zappy-landing-clay .page-section .flat-title .title {
    color: var(--landing-ink);
    font-weight: 800;
    letter-spacing: -.025em;
    text-wrap: balance;
}
.zappy-landing-clay .page-section .flat-title .sub-title {
    color: var(--landing-muted);
    line-height: 1.7;
}
.zappy-landing-clay .page-section-surface > .container {
    padding-block: 14px;
}

/* La galería es el objeto protagonista; las decoraciones no crean capas sobre los modales. */
.zappy-product-clay[data-zappy-product-landing] .tf-product-media-main {
    /* Swiper measures its content width: use a border so the next slide cannot peek through. */
    padding: 0;
    background: var(--landing-surface);
    border: 10px solid var(--landing-surface) !important;
    outline: 1px solid var(--landing-border);
    outline-offset: -1px;
    border-radius: 38px 38px 30px 30px !important;
    box-shadow: var(--landing-shadow-card);
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-media-main :is(.swiper-slide, img) {
    border-radius: 28px !important;
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-media-wrap.thumbs-bottom {
    margin-inline: 0 !important;
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-media-thumbs img {
    border-radius: 18px !important;
    border: 2px solid var(--landing-border);
    box-shadow: var(--landing-shadow-soft);
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-media-thumbs .swiper-slide-thumb-active img {
    border-color: var(--landing-accent);
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-info-wrap {
    padding: clamp(20px, 2.4vw, 32px);
    background: var(--landing-surface);
    border: 1px solid var(--landing-border);
    border-radius: 30px 38px 38px 30px;
    box-shadow: var(--landing-shadow-card);
    color: var(--landing-ink);
    min-width: 0;
    background-image: radial-gradient(ellipse at top right, rgb(166 121 213 / 7%), transparent 65%);
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-info-wrap .heading {
    font-size: clamp(28px, 2.5vw, 38px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.17;
    text-wrap: balance;
    color: var(--landing-ink) !important;
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-info-price .price {
    color: var(--landing-ink) !important;
    font-weight: 900;
    letter-spacing: -.035em;
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-info-wrap :is(.text-muted, .product-trust) {
    color: var(--landing-muted) !important;
    line-height: 1.65;
}
.zappy-product-clay[data-zappy-product-landing] .tf-main-product {
    color: var(--landing-ink);
}
.zappy-product-clay[data-zappy-product-landing] .tf-main-product :is(.quantity-title, .variant-label, .fw-6, label) {
    color: var(--landing-ink);
}

/* El CTA mantiene el color de marca; fondo y texto se resuelven con contraste WCAG. */
.zappy-product-clay[data-zappy-product-landing] .tf-product-info-buy-button .btn-buy-now {
    background: var(--landing-accent) !important;
    border: 1px solid rgb(0 0 0 / 12%) !important;
    color: var(--landing-on-accent) !important;
    min-height: 66px;
    border-radius: 22px !important;
    box-shadow: var(--landing-shadow-control) !important;
    font-weight: 800;
    animation: none !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.zappy-product-clay[data-zappy-product-landing] .btn-buy-now :is(span, i, strong, small) {
    color: var(--landing-on-accent) !important;
}
.zappy-product-clay[data-zappy-product-landing] .btn-buy-now:hover {
    transform: translateY(-2px);
}
.zappy-product-clay[data-zappy-product-landing] .btn-buy-now:active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 15%), 0 2px 5px rgb(0 0 0 / 10%) !important;
}
.zappy-product-clay[data-zappy-product-landing] .tf-product-info-buy-button .btn-buy-now:is(.disabled, [disabled], [aria-disabled="true"]) {
    background: var(--landing-surface-soft) !important;
    border-color: var(--landing-border) !important;
    color: var(--landing-muted) !important;
    box-shadow: var(--landing-shadow-field) !important;
    transform: none;
    cursor: not-allowed;
}
.zappy-product-clay[data-zappy-product-landing] .btn-buy-now:is(.disabled, [disabled], [aria-disabled="true"]) :is(span, i, strong, small) {
    color: var(--landing-muted) !important;
}
.zappy-product-clay[data-zappy-product-landing] .btn-whatsapp-producto {
    border-radius: 22px !important;
    box-shadow: var(--landing-shadow-control);
    animation: none !important;
}
.zappy-product-clay[data-zappy-product-landing] :is(.btn-buy-now, .btn-whatsapp-producto, .variant-swatch-btn, .btn-quantity, input, #btnToggleDescription):focus-visible {
    outline: 3px solid var(--landing-ink);
    outline-offset: 4px;
}
.zappy-product-clay[data-zappy-product-landing] .sticky-cta-row {
    border-radius: 24px;
}

/* Elegir variante tiene relieve, texto completo y un indicador que no depende del color. */
.zappy-product-clay[data-zappy-product-landing] .variant-swatch-btn {
    border: 1px solid var(--landing-border) !important;
    border-radius: 20px;
    padding: 16px;
    background: var(--landing-surface-soft) !important;
    color: var(--landing-ink) !important;
    box-shadow: var(--landing-shadow-soft);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.zappy-product-clay[data-zappy-product-landing] .variant-swatch-btn.active {
    border: 2px solid var(--landing-ink) !important;
    padding: 15px;
    box-shadow: var(--landing-shadow-control);
}
.zappy-product-clay[data-zappy-product-landing] .variant-swatch-btn.variant-swatch-pack {
    padding-top: 25px;
}
.zappy-product-clay[data-zappy-product-landing] .variant-swatch-btn.active.variant-swatch-pack {
    padding-top: 24px;
}
.zappy-product-clay[data-zappy-product-landing] :is(.variant-row-title, .variant-row-price) {
    color: var(--landing-ink) !important;
}
.zappy-product-clay[data-zappy-product-landing] .variant-row-title {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.zappy-product-clay[data-zappy-product-landing] .variant-row-subtitle {
    color: var(--landing-muted) !important;
}
.zappy-product-clay[data-zappy-product-landing][data-landing-tone="dark"] .variant-row-subtitle .text-success {
    color: #a8efd1 !important;
}
.zappy-product-clay[data-zappy-product-landing][data-landing-tone="dark"] .variant-row-subtitle .text-danger {
    color: #ffb1c7 !important;
}
.zappy-product-clay[data-zappy-product-landing] .variant-row-savings {
    color: #18593f;
    background: #dff7eb;
    border-color: #afdcc7;
    border-radius: 9px;
}
.zappy-product-clay[data-zappy-product-landing] .variant-row-radio {
    border-color: var(--landing-muted);
}
.zappy-product-clay[data-zappy-product-landing] .variant-swatch-btn.active .variant-row-radio {
    border-color: var(--landing-ink);
}
.zappy-product-clay[data-zappy-product-landing] .variant-swatch-btn.active .variant-row-radio::after {
    background: var(--landing-ink);
}
.zappy-product-clay[data-zappy-product-landing] .variant-thumb {
    border-radius: 12px;
}
.zappy-product-clay[data-zappy-product-landing] .wg-quantity {
    border: 1px solid var(--landing-border);
    border-radius: 17px;
    background: var(--landing-surface-soft);
    box-shadow: var(--landing-shadow-field);
    overflow: hidden;
}
.zappy-product-clay[data-zappy-product-landing] .wg-quantity :is(input, .btn-quantity) {
    background: transparent;
    color: var(--landing-ink);
    min-height: 44px;
    min-width: 44px;
}
.zappy-product-clay[data-zappy-product-landing] .tf-main-product :is(.card, .urgency-timer-wrapper) {
    border: 1px solid var(--landing-border) !important;
    border-radius: 25px;
    background: var(--landing-surface-soft) !important;
    box-shadow: var(--landing-shadow-soft);
    color: var(--landing-ink);
}
.zappy-product-clay[data-zappy-product-landing] :is(.urgency-timer-title, .timer-value, .spec-key, .spec-val, .clasif-key) {
    color: var(--landing-ink) !important;
}
.zappy-product-clay[data-zappy-product-landing] :is(.timer-label, .product-old-price) {
    color: var(--landing-muted) !important;
}
.zappy-product-clay[data-zappy-product-landing] .timer-unit {
    border-radius: 14px;
    background: var(--landing-surface);
    box-shadow: var(--landing-shadow-field);
}
.zappy-product-clay[data-zappy-product-landing] .timer-value {
    background: var(--landing-surface);
    border: 1px solid var(--landing-border);
    border-radius: 12px;
    box-shadow: var(--landing-shadow-field);
}
.zappy-product-clay[data-zappy-product-landing] .specs-table {
    border: 1px solid var(--landing-border) !important;
    border-radius: 16px;
    overflow: hidden;
}
.zappy-product-clay[data-zappy-product-landing] .spec-row {
    border-color: var(--landing-border);
    background: var(--landing-surface-soft) !important;
}
.zappy-product-clay[data-zappy-product-landing] .spec-row:nth-child(even) {
    background: var(--landing-surface) !important;
}
.zappy-product-clay[data-zappy-product-landing] #inputCoberturaCiudad {
    border: 1px solid var(--landing-border) !important;
    border-radius: 16px;
    background: var(--landing-surface);
    color: var(--landing-ink);
    box-shadow: var(--landing-shadow-field);
}
.zappy-product-clay[data-zappy-product-landing] #inputCoberturaCiudad::placeholder {
    color: var(--landing-muted);
}
.zappy-product-clay[data-zappy-product-landing] #coberturaSuggestions {
    border-color: var(--landing-border) !important;
    background: var(--landing-surface) !important;
    color: var(--landing-ink);
    box-shadow: var(--landing-shadow-card);
}
.zappy-product-clay[data-zappy-product-landing] #coberturaResult {
    background: var(--landing-surface) !important;
    border-color: var(--landing-border) !important;
    color: var(--landing-ink);
}
.zappy-product-clay[data-zappy-product-landing][data-landing-tone="dark"] #coberturaResult .text-success {
    color: #a8efd1 !important;
}
.zappy-product-clay[data-zappy-product-landing] .color-primario:not(.price) {
    color: var(--landing-ink) !important;
}
.zappy-product-clay[data-zappy-product-landing] .clasif-badge {
    background: var(--landing-surface);
    color: var(--landing-ink) !important;
    border-color: var(--landing-border);
    border-radius: 12px;
}

@media (max-width: 767px) {
    .zappy-product-clay[data-zappy-product-landing] .tf-product-info-wrap {
        padding: 23px 18px;
        border-radius: 28px;
    }
    .zappy-product-clay[data-zappy-product-landing] .tf-product-media-main {
        border-radius: 30px !important;
        border-width: 8px !important;
    }
    .zappy-product-clay[data-zappy-product-landing] .tf-product-media-main :is(.swiper-slide, img) {
        border-radius: 23px !important;
    }
    .zappy-product-clay[data-zappy-product-landing] .tf-product-media-thumbs img {
        border-radius: 14px !important;
    }
    .zappy-product-clay[data-zappy-product-landing] .variant-swatch-btn {
        gap: 9px;
    }
    .zappy-product-clay[data-zappy-product-landing] .sticky-cta-row {
        border-radius: 22px 22px 0 0;
        background: var(--landing-surface) !important;
        border: 1px solid var(--landing-border);
        box-shadow: var(--landing-shadow-card);
    }
    .zappy-product-clay[data-zappy-product-landing] .tf-main-product :is(.card, .urgency-timer-wrapper) {
        border-radius: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .zappy-product-clay[data-zappy-product-landing] :is(.btn-buy-now, .btn-whatsapp-producto, .pulse-urgent, .variant-swatch-btn) {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}