/* ============================================================
   Verzet Argentina — main.css
   Paleta: Negro/Gris oscuro + Blanco + Naranja acento
   ============================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    /* Colores de fondo */
    --bg-base:        #0d0d0d;
    --bg-surface:     #1a1a1a;
    --bg-surface-2:   #242424;
    --bg-surface-3:   #2e2e2e;

    /* Bordes */
    --border:         #333333;
    --border-light:   #444444;

    /* Texto */
    --text:           #ffffff;
    --text-muted:     #999999;
    --text-faint:     #666666;

    /* Acento */
    --accent:         #FFE000;
    --accent-hover:   #E6CA00;
    --accent-dark:    #CCB300;
    --on-accent:      #111111;
    --accent-soft:    #F0DC8C; /* variante tenue del acento, para zonas con muchos pills repetidos (megamenú) */

    /* Tipografías */
    --font-display:  'Barlow Condensed', sans-serif;
    --font-body:     'Barlow', sans-serif;

    /* Espaciado */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;
    --space-2xl: 8rem;

    /* Layout */
    --container:     1280px;
    --radius:        4px;
    --radius-md:     8px;
    --radius-lg:     12px;

    /* Transiciones */
    --transition:    0.2s ease;
    --transition-md: 0.35s ease;

    /* Header */
    --header-h: 72px;
}

@media (min-width: 1025px) {
    :root { --header-h: 112px; } /* 72px nav + 40px category bar */
}

/* ── Preloader ──────────────────────────────────────────────── */

.preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Texto superior */
.preloader__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.preloader__welcome {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 2vw, 1rem);
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(12px);
    animation: preloader-fadein 0.6s ease 0.2s forwards;
}

.preloader__brand {
    display: flex;
    align-items: flex-end;
    gap: 0.12rem;
    line-height: 1;
}

.preloader__letter {
    display: inline-block;
    clip-path: inset(0 0 100% 0);
    overflow: hidden;
}

.preloader__letter img {
    display: block;
    height: clamp(3.5rem, 10vw, 7rem);
    width: auto;
    opacity: 0.55;
    user-select: none;
    pointer-events: none;
}

/* Anillo de progreso SVG */
.preloader__spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader__progress {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg);
}

.preloader__track {
    fill: none;
    stroke: rgba(255, 107, 53, 0.12);
    stroke-width: 3;
}

.preloader__fill {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 263.89; /* 2π × 42 */
    stroke-dashoffset: 263.89;
}

/* Nav preloader: la V sola, un poco más grande */
.preloader[data-preloader="nav"] .preloader__letter img {
    height: clamp(4rem, 12vw, 8.5rem);
}

@keyframes preloader-fadein {
    to { opacity: 1; transform: translateY(0); }
}


/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    background-color: var(--bg-base);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ── Utilidades ─────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Tipografía ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.3rem; }

p { max-width: 65ch; }

.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }
.text-center  { text-align: center; }
.text-upper   { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; font-weight: 600; }

/* ── Botones ────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition), transform var(--transition);
    white-space: nowrap;
}

.btn--primary,
.btn--accent {
    background: var(--accent);
    color: var(--on-accent);
}
.btn--primary:hover,
.btn--accent:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn--outline {
    background: rgba(13,13,13,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--text);
    border: 2px solid rgba(255,255,255,0.4);
}
.btn--outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(13,13,13,0.7);
}

.btn--ghost {
    background: transparent;
    color: var(--accent);
    padding-inline: 0;
}
.btn--ghost:hover { color: var(--accent-hover); }

.btn--whatsapp {
    background: #25d366;
    color: #fff;
    font-size: 1rem;
}
.btn--whatsapp:hover { background: #1db954; }

.btn--full { width: 100%; justify-content: center; }

/* ── Check de Términos y Condiciones (gate de botones WhatsApp) ─
   Compartido entre la ficha de producto (.producto-wa-direct) y el
   carrito de consulta (.cart-drawer__footer) — ver data-terms-checkbox /
   data-terms-gated en main.js. */
.terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text-faint);
    cursor: pointer;
    user-select: none;
}
.terms-check__input {
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 0.15rem 0 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.terms-check__label {
    /* sin esto el texto no envuelve dentro de .terms-check (flex) — un item
       flex no se achica por debajo de su ancho de contenido por defecto */
    min-width: 0;
}
.terms-check__label a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.terms-check__label a:hover { color: var(--accent); }

.is-terms-disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
}

/* ── Sección genérica ───────────────────────────────────────── */
.section {
    padding-block: var(--space-xl);
}
.section--dark  { background: var(--bg-base); }
.section--gray  { background: var(--bg-surface); }
.section--gray2 { background: var(--bg-surface-2); }

.section__header {
    margin-bottom: var(--space-lg);
}
.section__label {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 0.5rem;
}
.section__title { color: var(--text); }
.section__subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-top: 1rem;
    max-width: 50ch;
}

/* ── Header ─────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--header-h);
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-md);
}

.site-header.scrolled {
    background: var(--bg-base);
}

.header-inner {
    position: relative;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* Marca de agua de bandera detrás del logo (tanda diferenciadores visuales §2.1,
   resolución final en docs/planes/2026-09-08-diferenciadores-visuales-por-pais-analisis-AR.md).
   Bandera plana (sin ondulado SVG — se descartó feDisplacementMap/feTurbulence: elimina
   riesgo de parpadeo/recorte en Safari-WebKit y mantiene la geometría vectorial nítida),
   contenida a 56px de alto con máscara radial que difumina los 4 bordes (nada de "efecto
   sticker"). z-index 0 contra el z-index:1 de .site-brand: pinta detrás del logo y del nav. */
.flag-wm {
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 230px;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
    -webkit-mask-image: radial-gradient(ellipse 62% 46% at 28% 50%, #000 22%, rgba(0,0,0,0.55) 55%, transparent 92%);
            mask-image: radial-gradient(ellipse 62% 46% at 28% 50%, #000 22%, rgba(0,0,0,0.55) 55%, transparent 92%);
}
.flag-wm__img {
    position: absolute;
    left: 8px;
    top: 50%;
    height: 56px;
    width: auto;
    max-width: none;
    transform: translateY(-50%);
    opacity: .21;
    filter: saturate(.62) contrast(.95);
    mix-blend-mode: screen;
}

/* Logo + sigla de país */
.site-brand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.site-logo img.logo--dark { filter: none; }

/* Sigla de país — divisor: barra vertical amarilla + AR/UY/BR, se lee como parte
   del logo (tanda diferenciadores visuales §2.2). */
.sigla-rule {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
}
.sigla-rule::before {
    content: '';
    width: 2px;
    height: 30px;
    background: var(--accent);
}
.sigla-rule:empty { display: none; }
.site-logo__text {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text);
}

/* Nav (desktop) — nav mobile es un <nav class="site-nav-mobile"> totalmente
   aparte, ver header.php justo después de </header> y más abajo en este
   archivo (sección "Nav mobile"). */
.site-nav { display: flex; align-items: center; }
.nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.nav-menu li a {
    display: block;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item a {
    color: var(--text);
    background: var(--bg-surface-2);
}

/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cart-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius);
    color: var(--text);
    transition: background var(--transition), color var(--transition);
}
.cart-toggle:hover { background: var(--bg-surface-2); color: var(--accent); }

.cart-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 3px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: transform var(--transition);
}
.cart-count.bump { transform: scale(1.4); }

/* Acordeón de categorías — oculto en desktop, visible en mobile */
.nav-menu__item--has-sub { display: none; }

/* ── Buscador global del header ──────────────────────────────── */
.header-search {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 280px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.header-search:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255, 224, 0, 0.15);
}
.header-search__input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem 0.55rem 1rem;
}
.header-search__input::placeholder { color: var(--text-muted); }
.header-search__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition);
}
.header-search__btn:hover { color: var(--accent); }

/* En mobile el buscador desktop se oculta; el --mobile vive dentro del nav */
.header-search--mobile { display: none; }

/* Hamburger (mobile) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    border-radius: var(--radius);
    color: var(--text);
}
.hamburger {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.is-open .hamburger:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .hamburger:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .hamburger:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Barra de categorías + Megamenu ─────────────────────────── */

/* Barra — solo desktop */
.category-bar {
    background: var(--bg-surface-3);
    border-top: 1px solid var(--border);
    display: none;
}

.category-bar__inner {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 40px;
}

.category-bar__verticals,
.category-bar__brands {
    display: flex;
    align-items: stretch;
}

.category-bar__divider {
    width: 1px;
    align-self: center;
    height: 20px;
    background: var(--border);
    margin: 0 .6rem;
}

/* Un poco más juntos entre sí que los verticales — son solo 2 items, no hace
   falta el mismo padding de 1.4rem que separa a los 5 verticales. */
.category-bar__brands .category-bar__item {
    padding: 0 .9rem;
}

.category-bar__item {
    display: flex;
    align-items: center;
    padding: 0 1.4rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}
.category-bar__item:hover,
.category-bar__item.is-current {
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 1025px) {
    .category-bar { display: block; }

    .megamenu {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        z-index: 999;
        background: var(--bg-surface);
        border-bottom: 2px solid var(--accent);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity var(--transition), transform var(--transition);
    }
    .megamenu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Panel por vertical — tres columnas: identidad / ramas / contenido desplegado */
    .megamenu__panel-inner {
        display: grid;
        grid-template-columns: 200px 210px 1fr;
        min-height: 150px;
        padding: 0;
    }

    /* Col 1: imagen + nombre */
    .megamenu__panel-identity {
        position: relative;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        flex-shrink: 0;
    }
    .megamenu__panel-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.08) 100%);
    }
    .megamenu__panel-identity-content {
        position: relative;
        z-index: 1;
        padding: 1rem 1.1rem;
        width: 100%;
    }
    .megamenu__panel-title {
        display: block;
        font-family: var(--font-display);
        font-size: 1.05rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: #fff;
        margin-bottom: 0.45rem;
        line-height: 1.1;
    }
    .megamenu__viewall {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--accent);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        transition: opacity var(--transition);
    }
    .megamenu__viewall:hover { opacity: 0.75; }

    /* Col 2: categorías */
    .megamenu__panel-cats {
        padding: 1.1rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
        border-left: 1px solid var(--border);
    }

    /* Col 2: solo los triggers de rama (nivel 2) — angosta, el contenido se despliega
       a la derecha en Col 3, no empuja nada hacia abajo. */
    .megamenu__panel-cats--accordion {
        align-items: stretch;
        gap: 0.2rem;
        overflow-y: auto;
    }
    .megamenu__branch { width: 100%; border-bottom: 1px solid var(--border); }
    .megamenu__branch:last-child { border-bottom: none; }
    .megamenu__branch-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.55rem 0.2rem;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-muted);
        text-align: left;
        transition: color var(--transition);
    }
    .megamenu__branch-toggle:hover { color: var(--text); }
    .megamenu__branch.is-open .megamenu__branch-toggle { color: var(--accent); }
    .megamenu__branch-chevron {
        color: var(--text-faint);
        flex-shrink: 0;
        transition: transform var(--transition);
    }
    .megamenu__branch.is-open .megamenu__branch-chevron { transform: rotate(-90deg); }
    .megamenu__cat-link--standalone { align-self: flex-start; }

    /* Col 3: contenido de la rama abierta — un bloque por hoja (nivel 3) con sus
       productos debajo, en grilla para aprovechar el ancho que antes quedaba vacío. */
    .megamenu__panel-leaves {
        padding: 1.1rem 1.5rem;
        border-left: 1px solid var(--border);
        display: flex;
        align-items: flex-start;
        width: 100%;
    }
    .megamenu__panel-leaves .megamenu__branch-panel { display: none; }
    .megamenu__panel-leaves .megamenu__branch-panel.is-active {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 1.1rem 1.4rem;
        width: 100%;
        align-content: start;
        animation: megamenuPanelIn var(--transition-md);
    }
    /* Respeta la preferencia del usuario si desactivó animaciones en el SO. */
    @media (prefers-reduced-motion: reduce) {
        .megamenu__panel-leaves .megamenu__branch-panel.is-active { animation: none; }
    }
    .megamenu__panel-leaves-empty { color: var(--text-faint); font-size: 0.85rem; margin: 0; }
    .megamenu__leaf-block { min-width: 0; }
    /* El pill de la hoja puede tener nombres largos (ej. "Equipamiento de
       Muebles Interior") — sin este límite se desborda sobre la columna
       vecina del grid en vez de recortarse dentro de su propia celda. */
    .megamenu__leaf-block > .megamenu__cat-link {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Categoría "grupo" en Col 3 (ej. "Heladeras" dentro de "Equipamiento de Cocina"):
       mismo look que el pill de link, pero es un <button> — expande su propio panel
       (drill-down) en vez de navegar. El chevron es la misma señal que ya usa el
       acordeón de Col 2 para "esto se expande", así el usuario distingue de un
       vistazo una categoría que agrupa otras de una que muestra productos directo. */
    .megamenu__cat-link--drill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: none;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .megamenu__cat-link--drill svg {
        color: var(--accent-soft);
        flex-shrink: 0;
        position: relative;
        top: 1px; /* el glyph del texto no ocupa toda su line-height — nudge óptico */
    }
    .megamenu__cat-link--drill:hover svg { color: var(--accent); }

    /* Hoja sin productos hoy (ej. "Aislantes"): se atenúa para leerse como "todavía
       sin stock" en vez de idéntica a una hoja con contenido real — sigue siendo
       clickeable, lleva al catálogo con su propio cartel de "sin productos". */
    .megamenu__cat-link--empty {
        color: var(--text-faint);
        border-bottom-color: transparent;
    }
    .megamenu__cat-link--empty:hover {
        color: var(--text-muted);
        border-bottom-color: var(--accent-soft);
    }

    /* "← Volver": vuelve al panel padre cuando se drilleó a un nivel más profundo. */
    .megamenu__branch-back {
        display: flex;
        align-items: center;
        gap: 4px;
        grid-column: 1 / -1;
        background: none;
        border: none;
        padding: 0 0 0.3rem;
        margin-bottom: 0.2rem;
        border-bottom: 1px solid var(--border);
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        transition: color var(--transition);
    }
    .megamenu__branch-back:hover { color: var(--accent); }

    /* Tile "ver más categorías" — mismo grid que los leaf-block, se agrega al
       final cuando la rama tiene más hojas de las que entran sin scroll
       (PHP ya cortó la lista en verzet_get_megamenu_cats()). */
    .megamenu__leaf-block--more {
        display: flex;
        align-items: center;
        gap: 4px;
        align-self: start;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--accent);
        text-decoration: none;
        white-space: nowrap;
        transition: opacity var(--transition);
    }
    .megamenu__leaf-block--more:hover { opacity: 0.75; }

    /* Productos de la hoja activa: fuente común, sin fondo, texto gris clarito */
    .megamenu__branch-products {
        list-style: none;
        margin: 0.4rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }
    .megamenu__product-link {
        display: block;
        font-family: var(--font-body);
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--text-muted);
        text-decoration: none;
        transition: color var(--transition);
    }
    .megamenu__product-link:hover { color: var(--text); }
    .megamenu__product-link--more {
        color: var(--accent);
        font-weight: 600;
    }
    .megamenu__product-link--more:hover { color: var(--accent); opacity: 0.75; }

    /* Lista pills */
    .megamenu__cats-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        list-style: none;
        padding: 0;
        margin: 0;
        align-content: flex-start;
    }
    .megamenu__cat-link {
        display: inline-block;
        padding: 0.4rem 0.15rem 0.3rem;
        background: transparent;
        border: none;
        border-bottom: 2px solid var(--accent-soft);
        border-radius: 2px;
        font-size: 0.83rem;
        font-weight: 600;
        color: var(--text);
        text-decoration: none;
        white-space: nowrap;
        transition: border-color var(--transition);
    }
    .megamenu__cat-link:hover {
        border-bottom-color: var(--accent);
    }

    /* Pie */
    .megamenu__footer {
        border-top: 1px solid var(--border);
        padding: 0.55rem 2rem;
        text-align: center;
    }
    .megamenu__footer a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        transition: color var(--transition);
    }
    .megamenu__footer a:hover { color: var(--accent); }
}

/* Mobile: ocultar megamenu */
@media (max-width: 1024px) {
    .megamenu { display: none; }
}

/* ── Carrito Drawer ─────────────────────────────────────────── */
.cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
}
.cart-drawer.is-open { pointer-events: all; }

.cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity var(--transition-md);
}
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }

.cart-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition-md);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }

.cart-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.cart-drawer__title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    text-transform: uppercase;
}
.cart-drawer__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: background var(--transition), color var(--transition);
}
.cart-drawer__close:hover { background: var(--bg-surface-2); color: var(--text); }

.cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
}

.cart-empty {
    color: var(--text-muted);
    text-align: center;
    padding-block: 3rem;
}

/* Item del carrito */
.cart-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 1rem;
    align-items: start;
    padding-block: 1rem;
    border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: none; }

.cart-item__img {
    width: 64px; height: 64px;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--bg-surface-2);
}
.cart-item__name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.4rem;
}
.cart-item__price { font-size: 0.85rem; color: var(--text-muted); }

.cart-item__qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.qty-btn {
    width: 26px; height: 26px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--text-muted);
    transition: border-color var(--transition), color var(--transition);
}
.qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.qty-value { font-size: 0.9rem; min-width: 1.5rem; text-align: center; }

.cart-item__remove {
    color: var(--text-faint);
    transition: color var(--transition);
    padding: 0.25rem;
}
.cart-item__remove:hover { color: #e74c3c; }

.cart-drawer__footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.terms-check--cart { margin-bottom: 0.75rem; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: var(--header-h);
}

.hero__bg {
    position: absolute;
    inset: 0;
    background: var(--bg-base);
    z-index: 0;
}
.hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.65;
}
.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(13,13,13,0.75) 0%,
        rgba(13,13,13,0.35) 50%,
        rgba(13,13,13,0.15) 100%
    );
}

/* Sombra de pie del hero: sólida abajo (mismo tono que .section--gray, la sección
   siguiente — se funden sin costura) y transparente arriba, mezclándose con la foto.
   Vive por encima de la foto pero por debajo de .hero__content (z-index 1): la palabra
   al pie se "arma" adentro de esta franja en vez de leer directo contra la foto, así
   el contraste no depende de qué haya en la imagen de fondo (ver §2.4 del plan). */
.hero__bottom-scrim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(220px, 34vw, 460px);
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top, var(--bg-surface) 0%, rgba(26,26,26,0) 100%);
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 750px;
    padding-block: var(--space-xl);
}

.hero__label {
    display: inline-block;
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--accent);
    border-radius: 2px;
}

.hero__title {
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 800;
    color: var(--text);
    margin-bottom: 1.5rem;
    line-height: 1;
}
.hero__title span { color: var(--accent); }

.hero__subtitle {
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: rgba(255,255,255,0.85);
    margin-bottom: 2.5rem;
    max-width: 50ch;
    line-height: 1.7;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Sello del hero — "palabra al pie" (tanda diferenciadores visuales §2.4): el nombre
   del país, pegado al borde derecho del hero, se arma adentro de .hero__bottom-scrim
   (arriba) en vez de leer directo contra la foto. clamp calibrado contra 1536px reales
   (notebook de Ale): 10.4vw reproduce ~10rem en ese ancho; techo 15rem recién a partir
   de ~2286px (no se pasa de tamaño en desktop normal), piso 5rem por debajo de ~762px.
   z-index 0, pero después de .hero__bottom-scrim en el DOM ⇒ pinta encima de la sombra
   y por debajo de .hero__content y la barra de stats (z-index 1). Sin interacción,
   decorativo. */
.sello-footword {
    position: absolute;
    right: 0;
    bottom: -0.2em;
    z-index: 0;
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    font-size: clamp(5rem, 10.4vw, 15rem);
    color: rgb(105 105 105 / 42%);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

/* Idea de Sofi (2026-09-10): la bandera del país tiñe la palabra al pie.
   Dos capas para que SIEMPRE se lea "Uruguay" y además tenga la bandera:
   - la palabra en sí lleva un gris sólido de piso — estructura para las partes
     que el ::after no ilumina, y fallback si background-clip:text no anda;
   - ::after clona la palabra (content: attr(data-word)) y le mete la bandera
     recortada a los trazos (background-clip: text), con mix-blend-mode: screen:
     sobre el fondo oscuro del hero el blanco y el celeste PRENDEN (se suman al
     fondo) en vez de quedar grises, y los tonos oscuros desaparecen solos. Se
     autolimita: opacity baja y aun así el blanco/celeste se leen.
   Bandera a background-size 100% auto (ancho completo, alto natural sin
   distorsión, position center top para conservar el canton/sol). url() por
   --footword-flag inline (front-page.php) ⇒ por país.
   El ::after se ancla contra el position:absolute que la palabra ya tiene arriba. */
.sello-footword::after {
    content: attr(data-word);
    position: absolute;
    inset: 0;
    text-transform: inherit;
    color: transparent;
    /* Por defecto: la bandera entera, recortada por arriba (sirve para banderas con
       franjas finas repetidas en toda la altura, como la de UY). Un país con franjas
       anchas y sol centrado (ej. AR) pisa esto con --footword-bg (2 capas: bandera real
       sin distorsión + degradé de refuerzo con los colores de franja) — ver paises/ar.php
       y el hallazgo de la adopción en AR, 2026-09-14. */
    background: var(--footword-bg, var(--footword-flag) center top / 100% auto no-repeat);
    filter: saturate(.9);
    -webkit-background-clip: text;
            background-clip: text;
    mix-blend-mode: screen;
    opacity: .3;
    pointer-events: none;
}

/* ── Bento Grid — Categorías ─────────────────────────────────── */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 320px 320px 220px;
    gap: 0.6rem;
}

/* Posicionamiento de cada card — 5 verticales.
   Náutica baja y ocupa la columna derecha entera de las filas 2-3
   (antes ahí iba una 6ta card, "Construcción", eliminada 2026-07-08). */
.bento-card--motorhome  { grid-column: 1 / 3; grid-row: 1 / 3; }
.bento-card--4x4        { grid-column: 3;     grid-row: 1;     }
.bento-card--nautica    { grid-column: 3;     grid-row: 2 / 4; }
.bento-card--camping    { grid-column: 1;     grid-row: 3;     }
.bento-card--iluminacion{ grid-column: 2;     grid-row: 3;     }

/* Card base */
.bento-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background-color: var(--bg-surface-2);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    transition: transform var(--transition-md);
}

/* Overlay degradado */
.bento-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.3)  45%,
        rgba(0,0,0,0.05) 100%
    );
    transition: background var(--transition-md);
}

/* Línea acento naranja al fondo — aparece en hover */
.bento-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.bento-card:hover::after {
    transform: scaleX(1);
}

/* Hover: zoom imagen + overlay más claro */
.bento-card:hover .bento-card__overlay {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.92) 0%,
        rgba(0,0,0,0.4)  45%,
        rgba(0,0,0,0.1)  100%
    );
}

/* Pseudo-elemento para zoom de bg */
.bento-card {
    background-image: none; /* base, se sobreescribe inline */
}
.bento-card::before {
    content: '';
    position: absolute;
    inset: -5%;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform var(--transition-md);
    z-index: 0;
}
.bento-card:hover::before {
    transform: scale(1.06);
}

/* Contenido textual */
.bento-card__content {
    position: relative;
    z-index: 1;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
}

.bento-card__name {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
    /* Más grande en la card principal */
}
.bento-card--motorhome .bento-card__name {
    font-size: clamp(2rem, 3.5vw, 3rem);
}
.bento-card--4x4 .bento-card__name,
.bento-card--nautica .bento-card__name {
    font-size: 1.6rem;
}
.bento-card--camping .bento-card__name,
.bento-card--iluminacion .bento-card__name {
    font-size: 1.15rem;
}

.bento-card__desc {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.4;
    max-width: 30ch;
    display: none; /* solo visible en cards grandes */
}
.bento-card--motorhome .bento-card__desc,
.bento-card--4x4 .bento-card__desc,
.bento-card--nautica .bento-card__desc {
    display: block;
}

/* CTA — aparece al hacer hover */
.bento-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition);
}
.bento-card:hover .bento-card__cta {
    opacity: 1;
    transform: translateY(0);
}

/* Sin imagen — fondo con gradiente de marca */
.bento-card:not([style*="background-image"]) {
    background: linear-gradient(135deg, var(--bg-surface-2), var(--bg-surface-3));
}
.bento-card:not([style*="background-image"])::before {
    display: none;
}

/* ── Sección Presupuesto ─────────────────────────────────────── */
.presupuesto-section { overflow: hidden; }

.presupuesto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: var(--space-lg);
}

/* Card contenedor — define perspectiva y altura fija */
.presupuesto-card {
    perspective: 1000px;
    height: 300px;
    cursor: pointer;
}

/* Inner — gira en 3D */
.presupuesto-card__inner {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.presupuesto-card:hover .presupuesto-card__inner {
    transform: rotateY(180deg);
}

/* Caras compartidas */
.presupuesto-card__front,
.presupuesto-card__back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem;
    text-align: center;
}

/* Frente — oscuro */
.presupuesto-card__front {
    background: var(--bg-surface);
    border: 1px solid var(--border);
}

/* Dorso */
.presupuesto-card__back {
    transform: rotateY(180deg);
}

/* Ícono */
.presupuesto-card__icon {
    width: 68px; height: 68px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: rgba(255, 107, 53, 0.12);
    border: 1px solid rgba(255, 107, 53, 0.25);
}

/* Título (frente) */
.presupuesto-card__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1.2;
}

/* Dorso — gris claro */
.presupuesto-card__back {
    background: #e8e8e8;
}

/* Descripción (dorso) */
.presupuesto-card__desc {
    font-size: 0.9rem;
    color: #1a1a1a;
    line-height: 1.6;
}

/* CTA link (dorso) */
.presupuesto-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-accent);
    background: var(--accent);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius);
    transition: background var(--transition);
}
.presupuesto-card__link:hover {
    background: var(--accent-hover);
}

/* Responsive */
@media (max-width: 900px) {
    .presupuesto-grid { grid-template-columns: repeat(2, 1fr); }
    .presupuesto-card { height: 280px; }
}

@media (max-width: 500px) {
    .presupuesto-grid { grid-template-columns: 1fr; }
    .presupuesto-card { height: 260px; }
}

/* ── Sección Por Qué + CTA ──────────────────────────────────── */
.porque-grid {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 5rem;
    align-items: center;
}

.porque-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.porque-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}

.porque-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.porque-feature__icon {
    width: 46px; height: 46px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.porque-feature__title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
    color: var(--text);
}

.porque-feature__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
}


/* Imagen */
.porque-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

.porque-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.porque-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        transparent 40%,
        rgba(0, 0, 0, 0.55) 100%
    );
}

@media (max-width: 900px) {
    .porque-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .porque-media {
        aspect-ratio: 16 / 9;
        order: -1;
    }
    .porque-features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .porque-features { grid-template-columns: 1fr; }
}

/* ── Sección Escribinos ─────────────────────────────────────── */
.escribinos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.escribinos-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.escribinos-pregunta {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.escribinos-title {
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 6vw, 6.5rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-top: 0.25rem;
}

.escribinos-right {
    display: flex;
    flex-direction: column;
}

.escribinos-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.75rem 0;
    color: var(--text);
    transition: color var(--transition);
}
.escribinos-contact:hover { color: var(--accent); }
.escribinos-contact:hover .escribinos-contact__arrow {
    color: var(--accent);
    transform: translateX(5px);
}

.escribinos-contact__label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 0.35rem;
}

.escribinos-contact__value {
    font-size: 1.05rem;
    font-weight: 400;
    color: inherit;
}

.escribinos-contact__arrow {
    flex-shrink: 0;
    color: var(--text-faint);
    transition: color var(--transition), transform var(--transition);
}

.escribinos-divider {
    height: 1px;
    background: var(--border);
}

@media (max-width: 768px) {
    .escribinos-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ── Card de producto ───────────────────────────────────────── */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.product-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition-md);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: var(--border-light);
    transform: translateY(-3px);
}

.product-card__img-wrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-surface-2);
    overflow: hidden;
}
.product-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--transition-md);
}
.product-card:hover .product-card__img { transform: scale(1.04); }

.verzet-img-placeholder {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
}
.verzet-img-placeholder svg { width: 48px; height: 48px; }

.product-card__badge {
    position: absolute;
    top: 0.75rem; left: 0.75rem;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.6rem;
    border-radius: 2px;
}
.product-card__badge--out {
    background: var(--bg-surface-3);
    color: var(--text-muted);
}

.product-card__body {
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.4rem;
}

.product-card__category {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}
.product-card__name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--text);
}
.product-card__description {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card__price {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-top: auto;
    padding-top: 0.5rem;
}
/* Precios duales USD + ARS en card */
.product-card__prices {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: auto;
    padding-top: 0.5rem;
}
.product-card__price-block {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
}
.product-card__price-tag {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    text-transform: uppercase;
}
.product-card__price-usd {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.product-card__price-block--ars .product-card__price-tag,
.product-card__price-ars {
    color: var(--text-muted);
}
.product-card__price-ars {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.product-card__price-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    font-family: var(--font-body);
    margin-left: 0.25rem;
}

/* Productos Destacados (home): pensada para que la card se lea más "destacada" que
   una card común de catálogo, no menos — título en amarillo de acento, precio
   centrado y más grande que en catálogo, botón con relleno de acento por default
   (no solo en hover). Sin cartel de "oferta" (sin tachado, sin badge de descuento). */
.product-card--featured .product-card__name {
    color: var(--accent);
}
.product-card__prices--featured {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.6rem;
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
}
.product-card__prices--featured .product-card__price-usd {
    color: var(--accent);
    font-size: 1.35rem;
}
.product-card__prices--featured .product-card__price-ars {
    color: var(--text-muted);
    font-size: 1.05rem;
    font-weight: 600;
}
.product-card--featured .product-card__add-btn {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}
.product-card--featured .product-card__add-btn:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.product-card__footer {
    padding: 0 1.1rem 1.1rem;
}
.product-card__add-btn {
    width: 100%;
    padding: 0.7rem;
    background: var(--bg-surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.product-card__add-btn:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.product-card__add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.product-card__add-btn.added {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

/* ── Banner Distribuidor ─────────────────────────────────────── */
.distribuidor-banner {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.distribuidor-banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.distribuidor-banner__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}
.distribuidor-banner:hover .distribuidor-banner__bg img {
    transform: scale(1.03);
}
.distribuidor-banner__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(13,13,13,0.92) 0%,
        rgba(13,13,13,0.75) 40%,
        rgba(13,13,13,0.2)  100%
    );
}

.distribuidor-banner__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-xl);
}

.distribuidor-banner__text {
    max-width: 560px;
}

.distribuidor-banner__title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    margin-block: 1rem 1.5rem;
}

.distribuidor-banner__desc {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    max-width: 45ch;
    margin-bottom: 2rem;
}

.distribuidor-banner__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .distribuidor-banner { min-height: 400px; }
    .distribuidor-banner__bg::after {
        background: rgba(13,13,13,0.82);
    }
    .distribuidor-banner__actions {
        flex-direction: column;
    }
    .distribuidor-banner__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Marcas — cinta infinita ────────────────────────────────── */
.marcas-marquee {
    overflow: hidden;
    margin-top: var(--space-lg);
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 10%,
        #000 90%,
        transparent 100%
    );
}

/* Dos cintas apiladas que corren en sentidos opuestos: en pantalla siempre
   se ven marcas distintas arriba y abajo, entrando casi todas a la vez. */
.marcas-marquee {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.marcas-track {
    display: flex;
    width: max-content;
    align-items: center;
    /* Duración proporcional a la cantidad de logos de la cinta (`--marcas-n`,
       inyectada desde PHP): así las dos cintas avanzan a la misma velocidad
       aunque una tenga 6 marcas y la otra 5. ~7s por logo = ritmo pausado. */
    animation: marcas-scroll calc(var(--marcas-n, 6) * 7s) linear infinite;
}
/* La cinta de abajo lleva marcas distintas y corre hacia el otro lado
   (misma animación, dirección invertida). */
.marcas-track--reverse {
    animation-direction: reverse;
}
.marcas-marquee:hover .marcas-track {
    animation-play-state: paused;
}

@keyframes marcas-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .marcas-track { animation: none; }
}

.marca-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 182px;
    height: 68px;
    /* Separación como margen (no flex `gap`): así el último ítem de cada
       vuelta también arrastra el espacio, y translateX(-50%) cae exacto
       sobre la costura — sin el salto de medio gap al reiniciar la cinta. */
    margin-right: 4rem;
}

.marca-item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: opacity var(--transition);
}
.marcas-marquee:hover .marca-item img {
    opacity: 0.9;
}
.brand-logo {
    opacity: 0.45;
    filter: grayscale(1) brightness(2);
    transition: opacity var(--transition), filter var(--transition);
    height: 36px;
    width: auto;
    object-fit: contain;
}
.brand-logo:hover { opacity: 1; filter: none; }

/* ── WhatsApp flotante ──────────────────────────────────────── */
.wa-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 900;
    width: 56px; height: 56px;
    background: #25d366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: transform var(--transition), box-shadow var(--transition);
}
.wa-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

/* ── Detalle de producto ─────────────────────────────────────── */
.producto-breadcrumb-bar { display: none; } /* reemplazado por el hero */

.producto-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
}

/* Galería */
.galeria-main {
    position: relative;
    aspect-ratio: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.galeria-main img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 1rem;
    transition: opacity 0.2s ease;
}
.galeria-main--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}
.galeria-zoom {
    position: absolute;
    bottom: 0.75rem; right: 0.75rem;
    background: rgba(0,0,0,0.5);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition);
}
.galeria-main:hover .galeria-zoom { opacity: 1; }

.galeria-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.galeria-thumb {
    width: 72px; height: 72px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: var(--bg-surface);
    transition: border-color var(--transition);
    flex-shrink: 0;
}
.galeria-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.galeria-thumb:hover { border-color: var(--border-light); }
.galeria-thumb.active { border-color: var(--accent); }

/* Info del producto */
.producto-info { display: flex; flex-direction: column; gap: 1.25rem; overflow-wrap: break-word; word-break: break-word; }

.producto-info__cat {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
}
.producto-info__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--text);
    margin: 0;
}

/* Título + botón de compartir */
.producto-info__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}
.producto-share { position: relative; flex-shrink: 0; }
.producto-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.producto-share__btn:hover,
.producto-share__btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}
.producto-share__feedback {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: 5;
    width: max-content;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    pointer-events: none;
}
.producto-share__feedback.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.producto-info__stock {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}
.producto-info__stock.in-stock  { background: rgba(70,180,80,0.12); color: #46b450; }
.producto-info__stock.out-stock { background: rgba(220,50,50,0.1);  color: #dc3232; }

/* Precios duales USD + ARS en detalle */
.producto-info__precios {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.producto-precio-usd {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.producto-precio-ars {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border);
}
.producto-precio__moneda {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
}
.producto-precio-usd .producto-precio__valor {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}
.producto-precio-ars .producto-precio__valor {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}

.producto-info__precio {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.producto-info__precio-label {
    font-size: 0.75rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.producto-info__precio-valor {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text);
}

.producto-info__desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}
/* El reset global "ul, ol { list-style: none; }" (pensado para menús de navegación)
   también sacaba las viñetas de listas reales tipeadas en la descripción del producto
   — se restauran acá, acotado a este contenedor. */
.producto-info__desc ul,
.producto-info__desc ol {
    padding-left: 1.25rem;
    margin: 0.75rem 0;
}
.producto-info__desc ul { list-style: disc; }
.producto-info__desc ol { list-style: decimal; }
.producto-info__desc ul ul,
.producto-info__desc ol ul { list-style: circle; }
.producto-info__desc li { margin-bottom: 0.4rem; }

.producto-info__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Hint del carrito */
.producto-cart-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-faint);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
}
.producto-cart-hint svg { flex-shrink: 0; color: var(--accent); }

/* Fila de botones */
.producto-btns {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.producto-info__add {
    flex: 1;
    justify-content: center;
}

/* WA directo */
.producto-wa-direct {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
}
/* "o consultá directo" + el check van apilados en una columna angosta al
   lado del círculo de WhatsApp — así la fila entera no se alarga tanto
   como si los tres (texto + check + botón) fueran uno al lado del otro. */
.producto-wa-direct__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}
.producto-wa-direct .terms-check {
    justify-content: flex-end;
}
.producto-wa-direct__text {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: var(--text-faint);
    white-space: nowrap;
}
.producto-wa-direct__btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #25d366;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    transition: transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 16px rgba(37,211,102,0.35);
}
.producto-wa-direct__btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(37,211,102,0.5);
}

.btn--full { width: 100%; justify-content: center; }

.producto-info__extra {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.producto-extra-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.producto-extra-item svg { color: var(--accent); flex-shrink: 0; }
.producto-extra-item__nota { color: var(--text-faint); font-size: 0.8em; }

/* Tooltip de info reutilizable (disclaimer de envío, de precio, etc.) — ícono chico
   junto a la línea, el texto formal completo solo aparece en hover/focus (desktop) o
   al tocarlo (mobile, vía .is-open que agrega main.js), sin ocupar espacio permanente
   en el layout. Requiere que el contenedor inmediato del trigger+tooltip tenga
   .info-tooltip-anchor (position: relative). */
.info-tooltip-anchor { position: relative; }
.info-tooltip__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-faint);
    background: none;
    border: none;
    padding: 0;
    margin-left: -0.1rem;
    cursor: pointer;
    transition: color var(--transition);
}
.info-tooltip__trigger:hover,
.info-tooltip__trigger:focus-visible {
    color: var(--accent);
}
.info-tooltip__tooltip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 5;
    width: max-content;
    max-width: 280px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    pointer-events: none;
}
.info-tooltip__trigger:hover + .info-tooltip__tooltip,
.info-tooltip__trigger:focus-visible + .info-tooltip__tooltip,
.info-tooltip__tooltip.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.info-tooltip__tooltip--wide { max-width: 320px; }

/* Ícono de info del disclaimer de precio — a la derecha de los precios, mismo alto
   que los montos (align-self en vez de heredar el flex-end del contenedor). */
.producto-precio-info {
    display: inline-flex;
    align-self: center;
}

/* Relacionados */
.productos-relacionados { margin-top: var(--space-xl); }

/* Lightbox */
.galeria-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.93);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.galeria-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}
.galeria-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}
.galeria-lightbox__close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
}
.galeria-lightbox__close:hover { background: rgba(255,255,255,0.2); }

/* Responsive detalle */
@media (max-width: 800px) {
    .producto-layout { grid-template-columns: 1fr; gap: 2rem; }
    .galeria-thumb   { width: 60px; height: 60px; }

    /* Ocultar texto "o consultá directo" en mobile — queda solo el círculo WA */
    .producto-wa-direct__text { display: none; }

    /* El check de Términos agregó texto que, con "Agregar a consulta" al
       lado en la misma fila (el layout de siempre para desktop), no entraba
       — angostarlo daba 5-6 líneas apiladas, muy feo. Se apilan las dos
       filas en vez de compartir una sola: "Agregar a consulta" arriba,
       check + botón de WhatsApp abajo, cada uno con todo el ancho
       disponible para el texto del check. */
    .producto-btns { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .producto-wa-direct { flex-shrink: initial; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .producto-wa-direct .terms-check { flex-basis: auto; justify-content: flex-start; }
}

/* ── Catálogo ────────────────────────────────────────────────── */
.catalogo-page,
.producto-page {
    padding-top: var(--header-h);
    padding-bottom: var(--space-xl);
}

.catalogo-header {
    position: relative;
    height: 220px;
    display: flex;
    align-items: flex-end;
    margin-bottom: var(--space-lg);
    overflow: hidden;
}
@media (max-width: 768px) {
    .catalogo-header { margin-bottom: 2rem; }
}
.catalogo-header__bg {
    position: absolute;
    inset: 0;
}
.catalogo-header__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center bottom;
}
.catalogo-header__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.5) 50%,
        rgba(0,0,0,0.3) 100%
    );
}
.catalogo-header__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 2rem;
    width: 100%;
}
.catalogo-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.5rem;
}
.catalogo-breadcrumb a {
    color: rgba(255,255,255,0.55);
    transition: color var(--transition);
}
.catalogo-breadcrumb a:hover { color: #fff; }
.catalogo-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    margin: 0;
}
.catalogo-header__total {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    white-space: nowrap;
}

/* Layout sidebar + grilla */
.catalogo-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* ── Sidebar ── */
.catalogo-sidebar {
    position: sticky;
    top: calc(var(--header-h, 68px) + 1.5rem);
    max-height: calc(100vh - var(--header-h, 68px) - 3rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.sidebar-inner {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.sidebar-inner::-webkit-scrollbar { width: 4px; }
.sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.sidebar-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar-inner::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Indicador de scroll oculto */
.sidebar-scroll-hint {
    height: 64px;
    margin-top: -64px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, transparent, var(--bg-surface) 65%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 14px;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.sidebar-scroll-hint.is-hidden { opacity: 0; }
.sidebar-scroll-hint svg {
    color: var(--accent);
    animation: hint-bounce 1.5s ease-in-out infinite;
}
@keyframes hint-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

.catalogo-sidebar__close { display: none; }

.sidebar-block {
    padding-block: 1rem;
    border-bottom: 1px solid var(--border);
}
.sidebar-block:last-of-type { border-bottom: none; }

.sidebar-block__title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    display: block;
}

/* Búsqueda */
.catalogo-search {
    position: relative;
    display: flex;
    align-items: center;
}
.catalogo-search svg {
    position: absolute;
    left: 0.75rem;
    color: var(--text-faint);
    pointer-events: none;
    flex-shrink: 0;
}
.catalogo-search__input {
    width: 100%;
    padding: 0.6rem 0.75rem 0.6rem 2.25rem;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.875rem;
    transition: border-color var(--transition);
}
.catalogo-search__input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Select ordenar */
.catalogo-select {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}
.catalogo-select:focus { outline: none; border-color: var(--accent); }

/* Checkbox stock */
.sidebar-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
    cursor: pointer;
}
.sidebar-check input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

/* Lista de categorías */
.sidebar-cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    list-style: none;
}
.sidebar-cats--collapsed li:nth-child(n+10) { display: none; }

.sidebar-cat-group__title {
    padding: 0.5rem 0.6rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-faint);
}
.sidebar-cat-group__item { padding-left: 0.6rem; }

.sidebar-cats__toggle {
    margin-top: 4px;
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    color: var(--accent);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color var(--transition);
}
.sidebar-cats__toggle:hover { color: var(--text); }
.sidebar-cat {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: left;
    transition: background var(--transition), color var(--transition);
    cursor: pointer;
    background: none;
    border: none;
}
.sidebar-cat:hover { background: var(--bg-surface-2); color: var(--text); }
.sidebar-cat.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
/* Sin productos hoy: se atenúa para leerse como "todavía sin stock" — mismo criterio
   que el megamenú. Sigue siendo clickeable, lleva al catálogo con su cartel de "sin
   productos". .active gana si de todos modos es la categoría filtrada actual. */
.sidebar-cat--empty { color: var(--text-faint); }
.sidebar-cat--empty:hover { color: var(--text-muted); }
.sidebar-cat.active .sidebar-cat__count { color: rgba(17,17,17,0.55); }
.sidebar-cat__count {
    font-size: 0.75rem;
    color: var(--text-faint);
    background: var(--bg-surface-2);
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    font-weight: 400;
    min-width: 22px;
    text-align: center;
}
.sidebar-cat.active .sidebar-cat__count { background: rgba(0,0,0,0.2); }

/* Limpiar filtros */
.catalogo-clear {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-faint);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition);
}
.catalogo-clear:hover { color: var(--accent); }

.catalogo-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--text-muted);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.catalogo-share:hover,
.catalogo-share:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Área principal ── */
.catalogo-main { min-width: 0; }

.catalogo-toolbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.catalogo-toolbar__filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color var(--transition);
}
.catalogo-toolbar__filter-btn:hover { border-color: var(--accent); }
.catalogo-toolbar__count { font-size: 0.875rem; color: var(--text-muted); }

/* Sin resultados */
.catalogo-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-xl) 0;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: fadeIn var(--transition-md);
}
@media (prefers-reduced-motion: reduce) {
    .catalogo-empty { animation: none; }
}
.catalogo-empty svg { opacity: 0.3; }
.catalogo-empty p { font-size: 1.1rem; }

/* Paginación del catálogo — main.js arma los botones, acá solo el estilo */
.catalogo-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: var(--space-md);
}
.catalogo-pagination__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.catalogo-pagination__btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}
.catalogo-pagination__btn.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.catalogo-pagination__btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.catalogo-pagination__btn--arrow { font-size: 1.1rem; }
.catalogo-pagination__ellipsis {
    color: var(--text-faint);
    padding: 0 0.2rem;
}

/* Overlay sidebar mobile */
.catalogo-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 200;
}
.catalogo-sidebar-overlay.is-open { display: block; }

/* ── Responsive catálogo ── */
@media (max-width: 900px) {
    .catalogo-layout {
        grid-template-columns: 1fr;
    }

    .catalogo-toolbar { display: flex; }

    .catalogo-sidebar {
        position: fixed;
        top: 0; left: 0;
        width: min(320px, 90vw);
        height: 100dvh;
        overflow-y: auto;
        z-index: 201;
        border-radius: 0;
        transform: translateX(-110%);
        transition: transform 0.3s ease;
        padding: 1.25rem;
        padding-top: calc(var(--header-h, 68px) + 1rem);
        max-height: none;
    }
    .sidebar-inner {
        overflow: visible;
        padding: 0;
        flex: none;
        min-height: unset;
    }
    .sidebar-scroll-hint { display: none; }
    .catalogo-sidebar.is-open { transform: translateX(0); }
    .catalogo-sidebar__close {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 0.875rem;
        cursor: pointer;
        padding: 0 0 1rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
        width: 100%;
    }
}

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
    background: var(--bg-base);
    border-top: 1px solid var(--border);
}

.footer-body { padding-block: var(--space-lg); }

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Columna marca */
.footer-col--brand { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; text-align: center; }

.footer-logo img {
    height: 72px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-tagline {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Redes sociales */
.footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.footer-social__link {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    transition: opacity var(--transition), transform var(--transition);
    opacity: 0.85;
}
.footer-social__link:hover { opacity: 1; transform: translateY(-2px); }

.footer-social__link--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff; }
.footer-social__link--tiktok    { background: #010101; color: #fff; border: 1px solid var(--border); }
.footer-social__link--youtube   { background: #FF0000; color: #fff; }
.footer-social__link--facebook  { background: #1877F2; color: #fff; }

/* Títulos de columna */
.footer-col__title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

/* Nav mapa del sitio */
.footer-nav { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-nav a { font-size: 0.9rem; color: var(--text-muted); transition: color var(--transition); }
.footer-nav a:hover { color: var(--accent); }

/* Lista de contacto */
.footer-contact-list { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; }
.footer-contact-list a {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: color var(--transition);
}
.footer-contact-list a:hover { color: var(--accent); }
.footer-contact-list__address {
    font-size: 0.85rem;
    color: var(--text-faint);
    line-height: 1.6;
    margin-top: 0.25rem;
}

/* Newsletter */
.footer-newsletter__desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.footer-newsletter__form { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-newsletter__input {
    width: 100%;
    padding: 0.7rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-faint);
    font-size: 0.9rem;
    cursor: not-allowed;
}
.footer-newsletter__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-faint);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: not-allowed;
    opacity: 0.5;
}
.footer-newsletter__coming {
    font-size: 0.75rem;
    color: var(--text-faint);
    font-style: italic;
}

/* Páginas legales (Términos, Privacidad) */
.legal-content {
    max-width: 70ch;
}
.legal-content h2 {
    font-size: 1.4rem;
    margin-top: 2.25rem;
    margin-bottom: 0.75rem;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h2,
.legal-content h3,
.legal-content h4 {
    font-weight: 500;
}
.legal-content h3 {
    font-size: 1.15rem;
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}
.legal-content h4 {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}
.legal-content p {
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 1rem;
    text-indent: 1.5em;
}
.legal-content__label {
    color: var(--accent);
    font-weight: 700;
}
.legal-content ul.legal-content__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}
.legal-content ul.legal-content__list li {
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 0.6rem;
    padding-left: 1.5rem;
    text-indent: -1.5rem;
}
.legal-content ul.legal-content__list li .legal-content__marker {
    color: var(--accent);
    font-weight: 600;
    text-indent: 0;
}

/* Datos legales */
.footer-legal {
    border-top: 1px solid var(--border);
    padding-block: 1.5rem;
}
.footer-legal__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.footer-legal__fiscal {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
}
.footer-legal__data p {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin: 0 0 0.4rem;
}
.footer-legal__data p:last-child { margin-bottom: 0; }
.footer-legal__qr {
    flex: none;
    min-width: 56px;
    min-height: 56px;
}
.footer-legal__qr img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
}
.footer-legal__meta {
    text-align: right;
}
.footer-legal__links {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin: 0 0 0.5rem;
}
.footer-legal__links a {
    color: var(--text-muted);
    transition: color var(--transition);
}
.footer-legal__links a:hover { color: var(--accent); }
.footer-legal__copyright {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .footer-col--brand { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 2rem; }
    .footer-col--brand .footer-social { margin-top: 0; align-self: flex-end; }
}

@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-col--brand { flex-direction: column; align-items: center; text-align: center; }
    .footer-col--brand .footer-social { align-self: center; }
    .footer-legal__inner { justify-content: center; }
    .footer-legal__fiscal { text-align: left; }
    .footer-legal__meta { text-align: center; }
}

/* ── Main content (pages genéricas) ────────────────────────── */
.site-main { padding-top: calc( var(--header-h) + var(--space-lg) ); }
.site-main.catalogo-page,
.site-main.producto-page { padding-top: var(--header-h); }

/* ── Separador decorativo ───────────────────────────────────── */
.divider {
    width: 60px; height: 3px;
    background: var(--accent);
    border: none;
    margin-block: 1.5rem;
}

/* ── Loading skeleton ───────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface-3) 50%, var(--bg-surface-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Animaciones de entrada ─────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes megamenuPanelIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-scroll {
    0%, 100% { transform: translateY(0);   opacity: 0.6; }
    50%       { transform: translateY(8px); opacity: 1;   }
}

/* Elementos del hero con animación secuencial */
.hero__label {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: 0.1s;
}
.hero__title {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
    animation-delay: 0.3s;
}
.hero__subtitle {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
    animation-delay: 0.55s;
}
.hero__actions {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
    animation-delay: 0.75s;
}
.hero__stats {
    opacity: 0;
    animation: fadeInUp 0.7s ease forwards;
    animation-delay: 0.95s;
}
.hero__scroll-indicator {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards, pulse-scroll 2s ease-in-out infinite;
    animation-delay: 1.4s, 1.4s;
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .hero__label,
    .hero__title,
    .hero__subtitle,
    .hero__actions,
    .hero__stats,
    .hero__scroll-indicator {
        opacity: 1;
        animation: none;
    }
}

/* ── Stats bar ───────────────────────────────────────────────── */
.hero__stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex-wrap: wrap;
}

.hero__stat {}

.hero__stat-number {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    display: block;
}

.hero__stat-label {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.3rem;
    display: block;
}

/* ── Scroll indicator ────────────────────────────────────────── */
.hero__scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.5);
    font-size: 0.65rem;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

.hero__scroll-indicator svg {
    animation: pulse-scroll 2s ease-in-out infinite;
}

/* ── Fade-in-up para secciones al hacer scroll ───────────────── */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Quiénes Somos ──────────────────────────────────────────── */

/* Intro */
.qs-intro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.qs-intro__content { display: flex; flex-direction: column; gap: 1.25rem; }
.qs-intro__content p { color: var(--text-muted); line-height: 1.8; }

.qs-intro__image {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qs-intro__image img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/* Facade de video: thumbnail propio + botón de play, el iframe de YouTube
   recién se carga al hacer click (evita mostrar su marca antes de reproducir) */
.qs-video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.qs-video-facade__thumb {
    /* 10px de más a la izquierda, recortados por el overflow:hidden del
       contenedor — el thumbnail que arma YouTube automáticamente (no elegido
       a mano) tiene un borde rojo pegado al límite izquierdo del frame. */
    width: calc(100% + 10px);
    height: 100%;
    margin-left: -10px;
    object-fit: cover;
    display: block;
    transition: transform .3s ease, filter .3s ease;
}

.qs-video-facade:hover .qs-video-facade__thumb,
.qs-video-facade:focus-visible .qs-video-facade__thumb {
    transform: scale(1.03);
    filter: brightness(.8);
}

.qs-video-facade:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.qs-video-facade__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
    transition: transform .2s ease;
    pointer-events: none;
}

.qs-video-facade__play svg { margin-left: 3px; }

.qs-video-facade:hover .qs-video-facade__play { transform: translate(-50%, -50%) scale(1.08); }

.qs-video-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.qs-intro__yt-btn { align-self: flex-start; }

/* Valores */
.qs-valores {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-xl);
}

.qs-valores__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.qs-valores__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.qs-valores__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(13, 13, 13, 0.72);
}

.qs-valores__inner {
    position: relative;
    z-index: 2;
}

.qs-valores__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.qs-valor {
    background: rgba(13, 13, 13, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    backdrop-filter: blur(6px);
    transition: border-color 0.2s, background 0.2s;
}

.qs-valor:hover {
    border-color: var(--accent);
    background: rgba(13, 13, 13, 0.7);
}

.qs-valor__icon {
    color: var(--accent);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 107, 53, 0.12);
    border-radius: 8px;
}

.qs-valor__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}

.qs-valor__text { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; line-height: 1.7; }

/* Stats bar */
.qs-statsbar {
    background: var(--bg-card);
    padding-block: 2.5rem;
}

.qs-statsbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
}

.qs-statsbar__item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    justify-content: center;
}

.qs-statsbar__sep {
    width: 1px;
    height: 66px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.qs-statsbar__icon {
    width: 57px;
    height: 57px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.qs-statsbar__icon svg {
    width: 26px;
    height: 26px;
}

.qs-statsbar__text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.qs-statsbar__label {
    font-size: 0.79rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.qs-statsbar__number {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

@media (max-width: 600px) {
    .qs-statsbar__inner { flex-direction: column; gap: 1.5rem; }
    .qs-statsbar__sep { width: 60px; height: 1px; }
}

/* Líneas */
.qs-lineas__intro {
    color: var(--text-muted);
    line-height: 1.8;
    margin-top: 1rem;
    max-width: none;
}

/* Responsive */
@media (max-width: 768px) {
    .qs-intro { padding-top: 3rem; }
    .qs-intro__inner { grid-template-columns: 1fr; gap: 2rem; }
    .qs-intro__image { order: -1; }
    .qs-valores__grid { grid-template-columns: 1fr; gap: 1rem; }

    .qs-intro__yt-btn {
        width: 100%;
        justify-content: center;
        padding-inline: 1rem;
        font-size: 0.8rem;
    }
}

/* ── Reseñas ─────────────────────────────────────────────── */
.qs-reviews__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.qs-reviews__header .section__title { margin-bottom: 0; }

.qs-reviews__cta {
    position: relative;
    overflow: hidden;
    gap: 0.6rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.qs-reviews__cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 100%
    );
    transform: translateX(-150%);
    animation: reviewShimmer 3s ease-in-out infinite;
    pointer-events: none;
}

.qs-reviews__cta:hover {
    transform: scale(1.05) translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.45);
}

.qs-reviews__cta:hover::before { animation-play-state: paused; }

@keyframes reviewShimmer {
    0%   { transform: translateX(-150%); }
    25%  { transform: translateX(230%); }
    100% { transform: translateX(230%); }
}

.qs-reviews__carousel-wrap {
    position: relative;
}

.qs-reviews__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding-bottom: 4px;
}

.qs-reviews__track::-webkit-scrollbar { display: none; }

.qs-review-card {
    flex: 0 0 calc(33.333% - 1rem);
    scroll-snap-align: start;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: border-color 0.2s;
}

.qs-review-card:hover { border-color: rgba(255, 107, 53, 0.3); }

.qs-review-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.qs-review-card__stars { display: flex; gap: 3px; }

.qs-review-card__google { flex-shrink: 0; opacity: 0.7; }

.qs-review-card__text {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.75;
    flex: 1;
    max-width: none;
    font-style: italic;
}

.qs-review-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: auto;
}

.qs-review-card__author {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text);
}

.qs-review-card__time {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.qs-reviews__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    z-index: 2;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

.qs-reviews__nav:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.qs-reviews__nav--prev { left: -20px; }
.qs-reviews__nav--next { right: -20px; }

.qs-reviews__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2rem;
}

.qs-reviews__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}

.qs-reviews__dot.is-active {
    background: var(--accent);
    transform: scale(1.35);
}

@media (max-width: 1024px) {
    .qs-review-card { flex: 0 0 calc(50% - 0.75rem); }
}

@media (max-width: 640px) {
    .qs-review-card { flex: 0 0 100%; }
    .qs-reviews__nav { display: none; }
    .qs-reviews__header { flex-direction: column; align-items: flex-start; }
}

/* ── Cierre ──────────────────────────────────────────────── */
.qs-outro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2.5rem;
}

.qs-outro__body {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.qs-outro__body p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.85;
    max-width: none;
}

.qs-outro__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 480px) {
    .qs-outro__actions { flex-direction: column; align-items: stretch; }
}

/* ── Contacto ───────────────────────────────────────────────── */

.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    align-items: start;
}

.contacto-info { display: flex; flex-direction: column; gap: 2rem; }
.contacto-info__intro { display: flex; flex-direction: column; gap: 1rem; }
.contacto-info__intro p { color: var(--text-muted); line-height: 1.8; }

.contacto-items { display: flex; flex-direction: column; gap: 0.75rem; }

.contacto-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-card);
    border-radius: 8px;
}

.contacto-item__icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 107, 53, 0.12);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    flex-shrink: 0;
}

.contacto-item__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
}

.contacto-item__value {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-top: 0.2rem;
}

.contacto-item__value a { color: inherit; text-decoration: none; transition: color 0.15s; }
.contacto-item__value a:hover { color: var(--accent); }

.contacto-wa { align-self: flex-start; }

/* Formulario */
.contacto-form-wrap {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 2.5rem;
}

.contacto-form-wrap h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2rem;
}

.contacto-form { display: flex; flex-direction: column; gap: 1.25rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.form-field { display: flex; flex-direction: column; gap: 0.4rem; }

.form-field label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.form-field__optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.75rem;
}

.form-field input,
.form-field textarea {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-muted); opacity: 0.55; }

.form-field input:focus,
.form-field textarea:focus { border-color: var(--accent); }

.form-field textarea { resize: vertical; min-height: 130px; }

.contacto-feedback {
    padding: 0.85rem 1.25rem;
    border-radius: 6px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.contacto-feedback.is-success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.contacto-feedback.is-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}

.contacto-submit { align-self: flex-start; gap: 0.6rem; }
.contacto-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Sección visitanos */
.contacto-visitanos {
    padding-block: 3rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.contacto-visitanos__label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
}

.contacto-visitanos__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text);
}

.contacto-visitanos__arrow {
    margin-top: 0.5rem;
    color: var(--accent);
    animation: bounceDown 1.4s ease-in-out infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: translateY(0);    opacity: 1;    }
    50%       { transform: translateY(10px); opacity: 0.55; }
}

/* Mapa */
.contacto-map { height: 420px; overflow: hidden; }
.contacto-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(25%); }

@media (max-width: 768px) {
    .contacto-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
    .contacto-form-wrap { padding: 1.5rem; }
    .contacto-map { height: 300px; }
    .contacto-submit { width: 100%; justify-content: center; }
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1024px) {

    /* Bento tablet — 2 columnas, 5 verticales */
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 300px 220px 220px;
    }
    .bento-card--motorhome  { grid-column: 1 / 3; grid-row: 1; }
    .bento-card--4x4        { grid-column: 1;     grid-row: 2; }
    .bento-card--nautica    { grid-column: 2;     grid-row: 2; }
    .bento-card--camping    { grid-column: 1;     grid-row: 3; }
    .bento-card--iluminacion{ grid-column: 2;     grid-row: 3; }
}

/* Mobile */
@media (max-width: 768px) {

    /* Header opaco en mobile — sin esto el nav se transparenta detrás del
       logo/hamburguesa durante la animación (blur del header a 92% de opacidad) */
    .site-header {
        background: var(--bg-base);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Nav mobile */
    .nav-toggle { display: flex; }

    /* Buscador desktop oculto; buscador mobile visible dentro del nav */
    .header-search:not(.header-search--mobile) { display: none; }
    .header-search--mobile {
        display: flex;
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius);
        margin-bottom: 0.75rem;
    }

    /* Logo y acciones sobre el nav (backdrop-filter en site-header crea stacking context local) */
    .site-brand,
    .site-logo,
    .header-actions {
        position: relative;
        z-index: 1000;
    }

    /* El nav de desktop se oculta entero — la versión mobile es
       .site-nav-mobile, un <nav> totalmente aparte (ver header.php justo
       después de </header>), no el mismo elemento reestilado. */
    .site-nav { display: none; }

    .site-nav-mobile {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        z-index: 999;
        display: block;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        /* Sin padding vertical cerrado — con box-sizing:border-box un box
           nunca se achica por debajo de la suma de su padding+border, así
           que con padding-top/bottom puestos siempre, max-height:0 no
           llegaba a 0px real (quedaban ~40px visibles siempre, el bug que
           encontró el usuario en QA). El padding vertical real solo entra
           en .is-open. */
        padding: 0 1.5rem;
        /* Ancla siempre en top:header-h y revela con max-height, no
           transform — un slide con translateY (la versión vieja de este
           nav, cuando todavía vivía adentro de .site-header) atravesaba
           visualmente el rectángulo del header en su camino. Ya no aplica:
           este <nav> está fuera de .site-header por completo, no tiene ese
           problema aunque se animara con translateY, pero max-height es
           igual de simple y ya está probado. Sin opacity — sin fundido. */
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-md), padding var(--transition-md);
        -webkit-overflow-scrolling: touch;
    }
    .site-nav-mobile.is-open {
        padding: 1rem 1.5rem 1.5rem;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }
    .nav-menu li { width: 100%; }
    .nav-menu li a {
        padding: 0.85rem 0.5rem;
        font-size: 1.1rem;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        width: 100%;
    }
    .nav-menu li:last-child a { border-bottom: none; }

    /* Acordeón de categorías */
    .nav-menu__item--has-sub { display: block; }

    .nav-submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0.85rem 0.5rem;
        font-size: 1.1rem;
        font-family: var(--font-display);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        background: none;
        border: none;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        cursor: pointer;
        transition: color var(--transition);
    }
    .nav-submenu-toggle:hover { color: var(--text); }
    .nav-submenu-toggle[aria-expanded="true"] { color: var(--accent); }
    .nav-submenu-toggle[aria-expanded="true"] .nav-submenu-chevron {
        transform: rotate(180deg);
    }
    .nav-submenu-chevron {
        flex-shrink: 0;
        transition: transform var(--transition);
    }

    .nav-submenu li { width: 100%; }

    /* Cascada de categorías por vertical (dentro del acordeón "Categorías") — a
       diferencia de .nav-submenu (lista fija de 6 verticales), acá el contenido es
       un árbol completo de altura impredecible, así que un max-height fijo lo
       recortaría. grid-template-rows 0fr→1fr anima a la altura real sin JS. */
    .nav-subcats-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s ease;
    }
    .nav-subcats-wrap.is-open { grid-template-rows: 1fr; }
    .nav-subcats-wrap__inner {
        overflow: hidden;
        min-height: 0;
        /* Chico a propósito: ahora cada nivel de profundidad tiene su propio wrap
           (toggle por nodo, no solo por vertical) — si este indent fuera grande se
           acumularía rápido en árboles de 3-4 niveles. El escalón visible por nivel
           lo da sobre todo .nav-subcats (0.75rem, compounding solo). */
        padding: 0 0.5rem 0.4rem 0.5rem;
    }
    /* El wrapper de "Categorías" (nivel raíz) no es una subcategoría de nada —
       sin indent propio, cada vertical adentro ya tiene su propio padding vía
       .nav-submenu-toggle. */
    .nav-subcats-wrap--flush > .nav-subcats-wrap__inner { padding: 0; }
    @media (prefers-reduced-motion: reduce) {
        .nav-subcats-wrap { transition: none; }
    }

    .nav-subcats__viewall {
        display: block;
        padding: 0.6rem 0.25rem;
        font-family: var(--font-display);
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--accent);
    }

    /* <ul> recursivo: cada nivel anidado suma su propio padding-left, así la
       indentación crece sola con la profundidad sin trackear el nivel en PHP. */
    .nav-subcats {
        list-style: none;
        margin: 0;
        padding: 0 0 0 0.75rem;
    }
    /* Toggle de un nodo que agrupa hijas, en cualquier nivel de profundidad — misma
       clase base .nav-submenu-toggle (JS genérico + estados de aria-expanded/chevron
       ya definidos ahí), solo más compacto que el toggle de vertical (nivel raíz). */
    .nav-subcats__toggle {
        padding: 0.55rem 0.25rem;
        font-size: 0.9rem;
        border-bottom: none;
    }
    .nav-subcats__link {
        display: block;
        padding: 0.55rem 0.25rem;
        font-size: 0.92rem;
        color: var(--text-muted);
        border-radius: var(--radius);
        transition: color var(--transition);
    }
    .nav-subcats__link:hover { color: var(--text); }
    /* Sin productos hoy: mismo criterio de atenuado que .megamenu__cat-link--empty
       / .sidebar-cat--empty — sigue siendo clickeable. */
    .nav-subcats__link--empty { color: var(--text-faint); }
    .nav-subcats__link--empty:hover { color: var(--text-muted); }
    /* Vertical sin productos reales todavía (modo demo): no clickeable. */
    .nav-subcats__link--demo { color: var(--text-faint); cursor: default; }

    /* Hero mobile */
    .hero { min-height: 90svh; }
    .hero__title { font-size: clamp(2.8rem, 10vw, 4rem); }

    /* Bento mobile — 2 columnas, 5 verticales */
    .bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 160px 160px;
    }
    .bento-card--motorhome  { grid-column: 1 / 3; grid-row: 1; }
    .bento-card--4x4        { grid-column: 1;     grid-row: 2; }
    .bento-card--nautica    { grid-column: 2;     grid-row: 2; }
    .bento-card--camping    { grid-column: 1;     grid-row: 3; }
    .bento-card--iluminacion{ grid-column: 2;     grid-row: 3; }

    .bento-card__desc { display: none !important; }
    .bento-card__cta  { display: none; }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* WA float — ajustar con el carrito */
    .wa-float {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px; height: 50px;
    }
}

@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
    .categories-grid {
        grid-template-columns: 1fr;
    }
    .hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn { width: 100%; justify-content: center; }
}

/* ── Página de marca (page-marca-dometic.php) ────────────────────────── */
.brand-intro {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-surface);
    border-radius: 12px;
}
.brand-intro__logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
    /* Mismo tratamiento que el carrusel del home (.marca-item img) — no todos los logos
       vienen originalmente en blanco como el de Dometic, esto los deja consistentes y
       visibles sobre el fondo oscuro sin depender del color de origen de cada archivo. */
    filter: brightness(0) invert(1);
}
.brand-intro__text {
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}
.brand-intro__text b { color: var(--text); }
.brand-intro__cta {
    text-align: center;
    margin: var(--space-lg) 0;
}
@media (max-width: 640px) {
    .brand-intro { flex-direction: column; align-items: flex-start; }
}

.prose-lede {
    max-width: 68ch;
    margin: var(--space-lg) 0 var(--space-md);
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 1.05rem;
}
.prose-lede a { color: var(--accent); }

.brand-section { margin-bottom: var(--space-lg); }
.brand-section__title { margin-bottom: var(--space-md); display: flex; }
.brand-section__logo {
    height: 64px;
    width: auto;
    /* Mismo tratamiento que el resto de los logos de marca — ver .brand-intro__logo. */
    filter: brightness(0) invert(1);
}
.brand-section--breves { margin-top: var(--space-lg); }

.brand-breve-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}
.brand-breve {
    display: block;
    padding: var(--space-md);
    background: var(--bg-surface);
    border-radius: 12px;
    text-decoration: none;
    transition: background .2s;
}
.brand-breve:hover { background: var(--bg-surface-2); }
.brand-breve__logo {
    height: 28px;
    width: auto;
    display: block;
    margin-bottom: .8rem;
    filter: brightness(0) invert(1);
}
.brand-breve__text {
    color: var(--text-muted);
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
}
.brand-breve__text b { color: var(--text); }


/* ── Switcher de países — desplegable (tanda diferenciadores visuales §2.3) ───
   <details>/<summary> nativo: sin JS, accesible de fábrica, mismo markup en el
   header y en el footer (el partial se monta dos veces, no usa IDs).
   Cerrado: [bandera 20×14] SIGLA ⌄  ·  Abierto: una fila por país con el nombre
   completo, la bandera anclada a la derecha a baja opacidad, sede actual marcada. */
.verzet-switcher {
    position: relative;
    display: inline-block;
    font-family: var(--font-display);
}

/* Estado cerrado */
.verzet-switcher__current {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--transition), color var(--transition);
}
.verzet-switcher__current::-webkit-details-marker { display: none; }
.verzet-switcher__current::marker { content: ''; }
.verzet-switcher__current:hover,
.verzet-switcher[open] .verzet-switcher__current {
    border-color: var(--accent);
    color: var(--accent);
}
.verzet-switcher__flag {
    display: block;
    width: 20px;
    height: 14px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.25); /* hairline: que el blanco no se funda con el fondo oscuro */
    border-radius: 1px;
}
.verzet-switcher__sigla { line-height: 1; }
.verzet-switcher__chevron {
    transition: transform var(--transition);
}
.verzet-switcher[open] .verzet-switcher__chevron { transform: rotate(180deg); }

/* Estado abierto — desplegable */
.verzet-switcher__list {
    position: absolute;
    right: 0;
    z-index: 60;
    min-width: 220px;
    margin: .45rem 0 0;
    padding: .3rem;
    list-style: none;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.verzet-switcher__item { position: relative; }
.verzet-switcher__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
    padding: .6rem .85rem;
    color: var(--text);
    text-decoration: none;
    border-radius: 3px;
    border-left: 3px solid transparent;
}
a.verzet-switcher__row:hover {
    background: var(--bg-surface-2);
    color: var(--accent);
}
.verzet-switcher__name {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.verzet-switcher__check {
    position: relative;
    z-index: 1;
    color: var(--accent);
    font-weight: 700;
}
.verzet-switcher__item.is-current .verzet-switcher__row {
    background: var(--bg-surface-2);
    border-left-color: var(--accent);
}
/* Bandera anclada a la derecha, proporción real (sin estirar), muy baja opacidad,
   borde izquierdo difuminado — pura sutileza, el nombre ya identifica el país. */
.verzet-switcher__row-flag {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    width: auto;
    height: 100%;
    opacity: .2;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 62%);
            mask-image: linear-gradient(to right, transparent, #000 62%);
}

/* Ubicación en cada contexto */
.category-bar__brands .verzet-switcher { align-self: center; margin-left: .75rem; }
.footer-legal__meta .verzet-switcher { margin-top: .5rem; }