/*  ==========================================================================
    L A S   D O S   T I P O G R A F I A S ,   E N   C A S A .

    El mockup del 25-09-2026 pide «Bricolage Grotesque» para los titulares y
    «Figtree» para el texto. Las dos vienen EN EL PAQUETE, en assets/fonts/, y
    no de la CDN de Google.

    >>> POR QUE NO SE ENLAZA GOOGLE FONTS.

    Esta hoja se sirve del hosting de cada cliente. Enlazando la CDN, cada
    visita a la tienda de cada comerciante le manda a Google la IP y la pagina
    que esta mirando, y eso en la UE no se puede hacer sin consentimiento: hay
    sentencias por exactamente esto. Ademas el paquete no dependia de nadie, y
    una tienda que deja de verse bien porque un tercero cambia algo no es una
    tienda que se pueda vender.

    Las dos son OFL 1.1, o sea que se pueden redistribuir. Las licencias van al
    lado de los ficheros -OFL-Bricolage-Grotesque.txt y OFL-Figtree.txt-, que
    es lo que la OFL pide.

    >>> SON VARIABLES, Y POR ESO SON DOS FICHEROS Y NO OCHO.

    Cada familia es UN fichero que lleva todos los pesos dentro (`font-weight`
    con rango). Pidiendo 500, 700 y 800 por separado, Google devolvia la misma
    url tres veces: es el mismo fichero.

    Se bajan los subconjuntos `latin` y `latin-ext` y NO el vietnamita: los
    siete idiomas del panel caben en esos dos, y el vietnamita son 30 KB que no
    descargaria nadie... salvo que el navegador los pide solo si hace falta,
    por el `unicode-range`. Se dejan fuera para no llevar peso muerto en el
    zip.

    `font-display:swap`: el texto se ve DESDE EL PRIMER MOMENTO con la pila del
    sistema y cambia cuando llega la fuente. La alternativa -`block`- deja la
    tienda en blanco tres segundos en una conexion mala.
    ========================================================================== */

/*  Bricolage Grotesque - titulares  */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('../fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*  Figtree - texto  */
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*  Las otras siete familias del mockup de perfiles, por el mismo motivo y
    con las mismas reglas: empaquetadas, subconjuntos latin y latin-ext, y
    `font-display:swap`. Cada perfil usa dos, asi que el navegador se baja solo
    las del perfil que este puesto -el `unicode-range` y la cascada se encargan
    de que no pida las demas-.

    Las nueve licencias OFL estan al lado de los ficheros.  */

@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/barlow-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/barlow-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/barlow-normal-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/barlow-normal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-normal-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlow-normal-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlow-normal-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlow-normal-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlowcondensed-normal-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/barlowcondensed-normal-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlowcondensed-normal-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/barlowcondensed-normal-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-italic-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-italic-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-italic-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-italic-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-normal-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-normal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-normal-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/cormorantgaramond-normal-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/hankengrotesk-normal-400-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('../fonts/hankengrotesk-normal-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/jost-normal-400-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Jost';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../fonts/jost-normal-400-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/marcellus-normal-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/marcellus-normal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('../fonts/outfit-normal-300-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('../fonts/outfit-normal-300-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


    *{margin:0;padding:0;box-sizing:border-box;}
    html{scroll-behavior:smooth;}
    body{font-family:var(--body,'Inter',sans-serif);background:var(--bg);color:var(--ink);overflow-x:hidden;}

    /* NAV */

    /* ====================================================================
       LA BARRA DE ANUNCIO
       --------------------------------------------------------------------
       La pieza del mockup que la tienda no tenia. Sale solo si el comerciante
       ha escrito algo en Disenyo; si no, ni la barra ni el hueco existen.

       VA EN EL FLUJO, como en el mockup: se va con el scroll y la cabecera se
       queda. Antes era `position:fixed` y la cabecera, la portada y el cuerpo
       de cada pagina tenian que descontar su altura a mano; ver la nota de
       `nav[data-header]` mas abajo.
       ==================================================================== */
    .announce{position:relative;z-index:310;height:var(--anuncio-h,36px);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;text-align:center;}
    .announce span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    html[data-profile="editorial"] .announce,
    html[data-profile="noche"] .announce{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;}
    html[data-profile="noche"] .announce{background:var(--surface);color:var(--accent);border-bottom:1px solid var(--line);}
    html[data-profile="vibrante"] .announce{background:var(--accent);color:var(--accent-ink);}
    html[data-profile="mercado"] .announce{background:var(--accent);color:var(--accent-ink);}
    /* ====================================================================
       LA CABECERA, EN CUATRO MAQUETAS
       --------------------------------------------------------------------
       `tema_variante('header')` pone `data-header` en el propio <nav>, que
       vive en `tienda_lib.php` y lo usan TODAS las paginas: la cabecera es lo
       unico que se ve igual en la portada, en una categoria y en el carrito,
       asi que si cambiara solo en la portada el perfil se notaria a medias.

       `split` es la de siempre -logo, enlaces, acciones-, y la comparten
       esencial y vibrante. Las otras tres cambian el reparto:

         center   el logo centrado y los enlaces debajo, en versalitas
         grid     tres columnas: enlaces, logo en medio, acciones
         market   el buscador ocupa el centro y manda sobre todo lo demas
       ==================================================================== */
    /*  `nav[data-header]` Y NO `nav` A PELO. La regla de la cabecera colgaba de la
        etiqueta, y la etiqueta la llevan tambien las migas (`tl-migas`,
        `pr-migas`) y la paginacion (`pg`): en seis paginas las migas se
        volvian una SEGUNDA cabecera fija, con su fondo y su `opacity:.75`,
        encima de la de verdad. Se veia el logo dos veces, el menu lavado, el
        nombre de la categoria pegado al carrito y el titulo tapado.  */
    /*  `position:sticky` Y NO `fixed`, que es lo que hace el mockup.

        Con `fixed` la cabecera no ocupa sitio, y cada pagina tenia que dejarle
        el hueco a mano: 68px en la portada, 104px en las demas, 88px en el
        movil, mas la barra de anuncio. Cada uno de esos numeros era una
        apuesta sobre la altura de la cabecera, y la perdian: `center` y `grid`
        son mas altas que `split`, y en cuanto una pagina pisaba el padding
        -el `<style>` de `tienda_cabecera()` lo ponia a 24px- el titulo nacia
        DEBAJO de la barra. Con `sticky` la cabecera ocupa su sitio en el flujo
        y se pega arriba al bajar: no hay nada que descontar en ningun sitio.

        El fondo, translucido con desenfoque, tambien es el del mockup. Va
        primero el `--surface` liso para el navegador que no sepa `color-mix`.  */
    nav[data-header]{position:sticky;top:0;z-index:300;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:70px;padding:14px max(24px, calc((100% - 1232px) / 2));background:var(--surface);background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
    .nav-logo-text{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--dcase,none);letter-spacing:var(--dtrack,0);font-size:calc(21px * var(--ds,1));line-height:1;white-space:nowrap;color:var(--ink);}
    .nav-links a{border-radius:var(--rb,8px);padding:9px 12px;font-weight:500;font-size:14.5px;color:var(--ink2);white-space:nowrap;text-decoration:none;}
    .nav-links a:hover,.nav-links a.on{color:var(--ink);}
    .nav-links a.on{box-shadow:inset 0 -2px 0 var(--ink);}

    /* center - editorial: el logo arriba del todo y los enlaces debajo */
    nav[data-header="center"]{flex-direction:column;align-items:stretch;gap:0;padding-bottom:0;}
    nav[data-header="center"] .nav-logo{justify-content:center;padding-bottom:10px;}
    nav[data-header="center"] .nav-links{justify-content:center;border-top:1px solid var(--line);padding-block:4px;order:3;}
    nav[data-header="center"] .nav-right{position:absolute;right:24px;top:12px;}
    nav[data-header="center"] .nav-links a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;}

    /* grid - noche: enlaces, logo en el centro, acciones */
    /*  Cada pieza en SU columna. En el HTML el logo va antes que el menu, y sin
        colocarlas la rejilla ponia el logo a la izquierda y el menu en medio:
        salia la cabecera `split` con otra letra.  */
    nav[data-header="grid"]{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;}
    nav[data-header="grid"] .nav-hamburger{grid-column:1;grid-row:1;justify-self:start;}
    nav[data-header="grid"] .nav-links{grid-column:1;grid-row:1;justify-self:start;margin:0;min-width:0;}
    nav[data-header="grid"] .nav-logo{grid-column:2;grid-row:1;justify-self:center;}
    nav[data-header="grid"] .nav-right{grid-column:3;grid-row:1;justify-self:end;}
    nav[data-header="grid"] .nav-links a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 10px;}
    /*  A la izquierda del logo caben cuatro: «Todo» y tres categorias, como el
        mockup (`nav.main.left`). Las demas estan en «Todo» y en el menu.  */
    nav[data-header="grid"] .nav-links li:nth-child(n+5){display:none;}
    @media (max-width:1240px){
      nav[data-header="grid"] .nav-links{display:none;}
      nav[data-header="grid"] .nav-hamburger{display:inline-grid;}
    }

    /*  market - mercado: tira de servicio, buscador abierto, cuenta y
        favoritos con texto, el carrito con su importe y la barra oscura de
        categorias debajo (`.util`, `.msearch`, `.mact`, `.mcart`, `.catbar`).  */
    .util{background:var(--surface);border-bottom:1px solid var(--line);font-size:13px;color:var(--ink2);}
    .util-in{display:flex;gap:18px;align-items:center;height:36px;padding-inline:max(24px, calc((100% - 1232px) / 2));overflow-x:auto;white-space:nowrap;scrollbar-width:none;}
    .util-in .sp{flex:1;}
    .util-in a{color:var(--ink2);text-decoration:none;}
    .util-in a:hover{color:var(--accent);}
    .util-in b{color:var(--ink);font-weight:600;}
    .util-in .ic{width:14px;height:14px;vertical-align:-2px;}
    nav[data-header="market"]{background:var(--surface);flex-wrap:wrap;row-gap:12px;padding-bottom:0;}
    nav[data-header="market"] .nav-msearch{flex:1;display:flex;align-items:center;gap:10px;height:46px;max-width:680px;margin-inline:18px;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--ri,8px);padding:0 6px 0 14px;color:var(--ink3);}
    nav[data-header="market"] .nav-msearch:focus-within{border-color:var(--accent);}
    .nav-msearch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:0;padding:0;}
    .nav-msearch input::-webkit-search-cancel-button{display:none;}
    .nav-msearch button{border:0;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:600;font-size:14px;padding:7px 14px;border-radius:calc(var(--ri,8px) - 2px);cursor:pointer;}
    .nav-msearch button:hover{background:var(--accent-h);}
    nav[data-header="market"] .nav-right{flex:none;gap:4px;}
    nav[data-header="market"] .nav-cuenta,
    nav[data-header="market"] .nav-favs{width:auto;padding:8px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;}
    nav[data-header="market"] .cart-btn{width:auto;height:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--rb,8px);background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;}
    nav[data-header="market"] .cart-btn:hover{background:var(--accent-h);}
    nav[data-header="market"] .cart-btn .cart-badge{background:var(--badge);color:var(--badge-ink);top:-6px;right:-6px;}
    nav[data-header="market"] .nav-favs .cart-badge{top:0;right:auto;left:22px;}
    /*  La barra de categorias: una fila entera, del color `--nav` de lado a
        lado de la pantalla aunque la cabecera tenga margenes (la sombra
        recortada pinta el fondo fuera de la caja sin ensanchar la pagina).  */
    nav[data-header="market"] .nav-links{display:flex;order:5;flex-basis:100%;margin:0;gap:2px;background:var(--nav);box-shadow:0 0 0 100vmax var(--nav);clip-path:inset(0 -100vmax);overflow-x:auto;scrollbar-width:none;}
    nav[data-header="market"] .nav-links a{display:flex;align-items:center;gap:8px;padding:11px 14px;border-radius:0;font-weight:600;font-size:14px;color:var(--nav-ink,#fff);opacity:.88;}
    nav[data-header="market"] .nav-links a:hover,
    nav[data-header="market"] .nav-links a.on{opacity:1;color:var(--nav-ink,#fff);background:rgba(255,255,255,.1);box-shadow:none;}
    nav[data-header="market"] .nav-links a.nav-todas{background:var(--accent);color:var(--accent-ink);opacity:1;}

    /*  Y los dos retoques por perfil que el mockup hace sobre el nombre de la
        tienda: son del PERFIL y no de la maqueta -editorial y noche no
        comparten cabecera-, asi que van contra `html[data-profile]`.  */
    html[data-profile="editorial"] .nav-logo-text{font-style:italic;font-size:30px;}
    html[data-profile="noche"] .nav-logo-text{letter-spacing:.32em;font-size:18px;}
    html[data-profile="mercado"] .nav-logo-text{font-size:24px;}
    html[data-profile="vibrante"] .nav-links a{font-weight:600;}
    html[data-profile="vibrante"] .nav-links a.on{box-shadow:none;background:var(--soft);}
    /*  Logo, menu y botones, con las medidas del mockup (`.logo`, `nav.main`,
        `.hacts`, `.icon-btn`, `.dot`). El enlace del logo iba con el azul y el
        subrayado de un enlace del navegador: no tenia ni color ni decoracion.  */
    .nav-logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none;}
    .nav-logo img{height:40px;width:auto;max-width:150px;object-fit:contain;object-position:left center;}
    .nav-links{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0;}
    .nav-right{display:flex;align-items:center;gap:2px;flex:none;}
    .nav-cta{background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:13px;padding:9px 20px;border-radius:var(--rb,10px);transition:background 0.2s,transform 0.15s;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;}
    .nav-cta:hover{background:var(--accent-h);}
    .icon-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:99px;border:0;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;padding:0;}
    .icon-btn:hover{background:var(--soft);}
    .cart-badge{position:absolute;top:3px;right:1px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;}
    .nav-hamburger{display:none;}

    /*  EL BUSCADOR EN PANEL, como el `.search` del mockup: baja desde arriba,
        ocupa el ancho y se cierra con la equis o con Escape.  */
    .tl-buscador{position:fixed;left:0;right:0;top:0;z-index:600;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow,0 10px 30px -12px rgba(0,0,0,.25));}
    .tl-buscador[hidden]{display:none;}
    .tl-buscador-in{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:10px;}
    .mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:400;background:rgba(0,0,0,0.5);}
    .mobile-menu.open{display:block;}
    .mobile-panel{position:absolute;top:0;right:0;width:75%;max-width:320px;height:100%;background:var(--surface);box-shadow:-8px 0 32px rgba(0,0,0,0.15);padding:24px;display:flex;flex-direction:column;gap:0;}
    .mobile-close{align-self:flex-end;background:none;border:1px solid var(--line);border-radius:var(--rb,8px);width:36px;height:36px;font-size:18px;cursor:pointer;margin-bottom:24px;display:flex;align-items:center;justify-content:center;}
    .mobile-nav-item{padding:18px 0;border-bottom:1px solid var(--line);font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;}
    .mobile-nav-item:hover{color:var(--accent);}
    .mobile-wa{margin-top:auto;padding-top:24px;display:flex;align-items:center;gap:10px;background:#25D366;color:#fff;font-weight:700;font-size:15px;padding:14px 20px;border-radius:var(--r,12px);text-decoration:none;justify-content:center;}

    /* ====================================================================
       PORTADA - CUATRO MAQUETAS, UNA POR `data-hero`
       --------------------------------------------------------------------
       El atributo lo pone `tema_variante` en la propia seccion, y las reglas
       NO se escriben contra `html[data-profile]`: editorial y noche comparten
       la maqueta `full`, asi que por perfil habria que escribir la misma regla
       dos veces -y tres el dia que se anyada un perfil-.

       >>> AQUI HABIA 29 BLANCOS EN DURO.

       La portada era un degradado azul oscuro con `h1{color:#fff}`, el texto en
       `rgba(255,255,255,.55)`, dos glows amarillos, un shimmer y dos anillos
       girando. Daba igual el perfil elegido: con «Esencial» -que es blanco y
       neutro- la tienda seguia abriendo en azul oscuro. Ahora todo sale de los
       tokens, que es lo que hace que el perfil se note en lo PRIMERO que se ve.

       Y el `h1` estaba suelto -`h1{...;color:#fff}`-, o sea que cualquier h1 de
       cualquier pagina heredaba el blanco. Ahora va acotado a `.hero`.
       ==================================================================== */
    /*  Sin `padding-top`: la cabecera es `sticky` y ocupa su sitio, asi que
        la portada empieza justo debajo y no tiene nada que descontar. Antes
        eran 68px mas la barra de anuncio, a mano.  */
    .hero{position:relative;overflow:hidden;background:var(--bg);color:var(--ink);padding:0;}
    .hero-in{max-width:1280px;margin:0 auto;padding-inline:24px;width:100%;}
    .hero h1{font-size:calc(clamp(38px,5.4vw,70px) * var(--ds,1));color:var(--ink);line-height:1.04;margin:0;}
    .hero h1 .accent{color:var(--accent);display:block;}
    .hero-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin:0 0 14px;}
    .hero-lead{font-size:18px;color:var(--ink2);max-width:44ch;margin-top:18px;line-height:1.55;}
    .hero-lead strong{color:var(--ink);font-weight:600;}
    .hero-sub{font-size:15px;color:var(--ink3);margin-top:10px;line-height:1.6;}
    .hero-ctas{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
    .hero-stats{display:flex;margin-top:32px;flex-wrap:wrap;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r);overflow:hidden;}
    .hero-stat{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;padding:16px 14px;box-shadow:inset -1px 0 0 var(--line);}
    .hero-stat:last-child{box-shadow:none;}
    .hero-stat-num{font-family:var(--disp);font-size:26px;font-weight:var(--dw);color:var(--accent);line-height:1;}
    .hero-stat-label{font-size:11px;font-weight:600;color:var(--ink3);margin-top:5px;text-transform:uppercase;letter-spacing:.08em;text-align:center;}
    .hero-media{border-radius:var(--r);overflow:hidden;background:var(--soft);display:grid;place-items:center;}
    .hero-media img{width:100%;height:100%;object-fit:cover;display:block;}
    /*  Sin banner propio lo que hay es el LOGO, y un logo recortado a `cover`
        sale partido por la mitad. Se contiene y se le deja aire.  */
    .hero-media.es-logo{padding:12%;}
    /*  EL LOGO NO ES UNA FOTO DE PRODUCTO.

        Puesto a `contain` sobre una caja de 5/4 el logo salia ocupando tres
        cuartos de la portada: una marca de 150 px estirada a 500. Se acota a
        poco menos de la mitad, que es lo que lo deja como una marca y no como
        un cartel.  */
    .hero-media.es-logo img{object-fit:contain;max-width:46%;max-height:46%;width:auto;height:auto;}

    /* split - texto a un lado, imagen al otro */
    .hero[data-hero="split"] .hero-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:64px 40px;}
    .hero[data-hero="split"] .hero-media{aspect-ratio:5/4;}

    /* full - imagen a todo lo ancho con la caja del texto encima */
    .hero[data-hero="full"] .hero-img{aspect-ratio:16/7;min-height:420px;max-height:620px;width:100%;overflow:hidden;background:var(--soft);display:grid;place-items:center;}
    .hero[data-hero="full"] .hero-img img{width:100%;height:100%;object-fit:cover;display:block;}
    .hero[data-hero="full"] .hero-img.es-logo img{width:auto;height:52%;object-fit:contain;}
    .hero[data-hero="full"] .hero-over{position:absolute;inset:0;display:flex;align-items:flex-end;padding-bottom:48px;pointer-events:none;}
    .hero[data-hero="full"] .hero-box{pointer-events:auto;background:var(--surface);padding:36px 40px;max-width:540px;border-radius:var(--r);}
    /*  En «noche» la caja no es una caja: el texto va centrado sobre la imagen,
        que es como lo hace el mockup para la gama alta.  */
    html[data-profile="noche"] .hero[data-hero="full"] .hero-over{align-items:center;padding-bottom:0;}
    html[data-profile="noche"] .hero[data-hero="full"] .hero-box{background:none;max-width:720px;margin:0 auto;text-align:center;}
    html[data-profile="noche"] .hero[data-hero="full"] .hero-lead{margin-inline:auto;color:var(--ink);}
    html[data-profile="noche"] .hero[data-hero="full"] .hero-ctas{justify-content:center;}

    /* type - titular grande y collage de tres productos */
    .hero[data-hero="type"] .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:56px 36px;}
    .hero[data-hero="type"] h1 em{font-style:normal;color:var(--accent);}
    .hero-collage{position:relative;aspect-ratio:1/1;max-width:100%;}
    .hero-collage .ct{position:absolute;padding:0;border:0;background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s;}
    .hero-collage .ct img{width:100%;height:100%;object-fit:cover;display:block;}
    .hero-collage .ct0{left:2%;top:12%;width:54%;aspect-ratio:1;transform:rotate(-8deg);}
    .hero-collage .ct1{right:0;top:0;width:44%;aspect-ratio:1;transform:rotate(7deg);}
    .hero-collage .ct2{right:10%;bottom:0;width:44%;aspect-ratio:1;transform:rotate(-3deg);}
    .hero-collage .ct:hover{transform:rotate(0) scale(1.03);}
    .hero-sticker{position:absolute;left:4%;bottom:4%;width:112px;height:112px;border-radius:50%;background:var(--badge);color:var(--badge-ink);display:grid;place-items:center;text-align:center;font-family:var(--disp);font-weight:var(--dw);font-size:17px;line-height:1.05;transform:rotate(-12deg);box-shadow:var(--shadow);}
    .hero-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px;}
    .hero-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:7px 14px;}

    /* mosaic - un banner grande y dos accesos, para catalogo denso */
    .hero[data-hero="mosaic"] .hero-in{display:grid;grid-template-columns:2fr 1fr;gap:14px;padding-block:24px 10px;}
    .hero-mz{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;background:var(--accent);color:var(--accent-ink);border-radius:var(--r);overflow:hidden;min-height:320px;}
    .hero-mz-t{padding:32px 36px;}
    .hero-mz .hero-eyebrow{color:var(--badge);}
    .hero-mz h1{font-size:calc(clamp(32px,3.8vw,52px) * var(--ds,1));color:var(--accent-ink);}
    .hero-mz .hero-lead{color:var(--accent-ink);opacity:.85;margin-top:10px;max-width:40ch;}
    .hero-mz .hero-media{background:none;border-radius:0;height:100%;min-height:260px;}
    .hero-mz .btn-yellow{background:var(--surface);color:var(--ink);}
    .hero-mz .btn-white-outline{color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);}
    .hero-mz-side{display:grid;grid-template-rows:1fr 1fr;gap:14px;}
    .hero-mz-s{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;text-decoration:none;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r);padding:18px 18px 18px 22px;}
    .hero-mz-s.alt{background:var(--badge);color:var(--badge-ink);box-shadow:none;}
    .hero-mz-s.alt .hero-eyebrow{color:var(--badge-ink);}
    .hero-mz-s b{display:block;font-family:var(--disp);font-size:19px;margin-top:2px;}
    .hero-mz-s .pr{display:block;font-size:13px;opacity:.75;margin-top:2px;}
    .hero-mz-si{width:76px;height:76px;border-radius:var(--ri,10px);overflow:hidden;flex-shrink:0;background:var(--soft);}
    .hero-mz-si img{width:100%;height:100%;object-fit:cover;display:block;}
    /*  Sin categorias no hay accesos, y el banner grande ocupa el ancho
        entero en vez de dejar un tercio de la portada en blanco.  */
    .hero[data-hero="mosaic"] .hero-in.sin-accesos{grid-template-columns:1fr;}

    /*  Los dos botones de la portada, en tokens. Eran amarillo fijo con una
        sombra amarilla y un borde blanco translucido: sobre un fondo claro el
        segundo era literalmente invisible.  */
    .btn-yellow{background:var(--accent);color:var(--accent-ink);font-family:var(--body);font-weight:var(--bw,700);font-size:var(--bfs,15px);letter-spacing:var(--btrack,0);text-transform:var(--bcase,none);padding:14px 28px;border-radius:var(--rb,12px);text-decoration:none;transition:background .2s,transform .2s;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;}
    .btn-yellow:hover{background:var(--accent-h);transform:translateY(-1px);}
    .btn-white-outline{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);font-family:var(--body);font-weight:var(--bw,700);font-size:var(--bfs,15px);letter-spacing:var(--btrack,0);text-transform:var(--bcase,none);padding:14px 26px;border-radius:var(--rb,12px);text-decoration:none;transition:box-shadow .2s,color .2s;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;}
    .btn-white-outline:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);}
    html[data-profile="noche"] .btn-white-outline{box-shadow:inset 0 0 0 1px var(--ink3);}

    /*  Los anillos del logo siguen vivos porque los usa el PIE, no la portada:
        alli envuelven la marca y ahi si tienen sentido.  */
    .hero-img-ring{position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--line);}
    .hero-img-ring2{position:absolute;inset:-24px;border-radius:50%;border:1px solid var(--line);opacity:.5;}

    /* FEATURES STRIP */
    /*  La tira de ventajas del mockup (`.trust`): una caja con su borde y las
        celdas separadas por una linea de 1px -el fondo de la rejilla asoma por
        el `gap`-, dentro del ancho del contenido. Antes ocupaba la pantalla
        entera, con sombra, y cada ventaja llevaba su emoji en un cuadro gris.  */
    .features-strip{padding:32px 24px 0;}
    /*  CUATRO COLUMNAS FIJAS NO: LAS QUE HAYA.

        Las ventajas son opcionales una a una -cada una sale solo si el
        comerciante le ha puesto titulo-, asi que lo normal es tener una, dos o
        tres. Con `repeat(4,1fr)` la unica que habia se quedaba en el primer
        cuarto y las otras tres cuartas partes de la tira salian en blanco:
        parecia que faltaba algo roto, no que hubiera una sola ventaja.

        Visto el 01-10-2026 en la tienda de pruebas, que solo tiene la de
        "Formas de pago".  */
    .features-inner{max-width:1232px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
    .feature-item{background:var(--surface);padding:18px;display:flex;gap:12px;align-items:flex-start;}
    .feature-item .ic{color:var(--accent);margin-top:2px;}
    .feature-title{display:block;font-weight:600;font-size:14.5px;color:var(--ink);margin:0;}
    .feature-desc{font-size:13px;color:var(--ink2);margin:0;}

    /* SECTIONS */
    /*  Las secciones de la PORTADA, por su clase y no por la etiqueta: con
        `section{...}` a pelo, las `<section>` de la ficha de producto (las
        opiniones y los relacionados) cogian tambien 80px de relleno.  */
    section[class*="-section"]{padding:36px 24px;}
    .section-inner{max-width:1232px;margin:0 auto;}
    /*  La cabecera de seccion del mockup (`.sec-h`): el titular con la letra y
        el peso del PERFIL -no un 900 fijo, que en «editorial» o «noche» es
        justo lo contrario de lo que son- y una frase debajo. Sin la etiqueta en
        versalitas de encima, que el mockup no lleva.  */
    .section-label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px;}
    .section-title{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--dcase,none);letter-spacing:var(--dtrack,0);font-size:calc(clamp(26px,3.2vw,38px) * var(--ds,1));line-height:1.1;color:var(--ink);margin:0;}
    .section-desc{color:var(--ink2);margin-top:6px;font-size:15px;}
    .section-header{margin-bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}

    /* SEARCH BAR */
    .search-wrap{position:relative;width:260px;flex-shrink:0;}
    .search-input{width:100%;background:var(--surface);border:2px solid var(--line);border-radius:var(--r,12px);padding:10px 16px 10px 40px;font-family:var(--body,'Inter',sans-serif);font-size:14px;color:var(--ink);outline:none;transition:border-color 0.2s;}
    .search-input:focus{border-color:var(--accent);}
    .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;}


    /* ====================================================================
       LAS CATEGORIAS EN LA PORTADA
       --------------------------------------------------------------------
       Dos bloques del mockup que faltaban: la fila de accesos directos y las
       tarjetas destacadas. Son los que hacen que de la portada se pueda ENTRAR
       al catalogo sin pasar por el menu.
       ==================================================================== */
    /*  Los circulos de la portada `mosaic` (`.catrow` del mockup).  */
    .cats-row-section{padding-block:0;}
    .catrow{display:flex;gap:22px;overflow-x:auto;padding-block:26px 6px;scrollbar-width:thin;}
    .catrow a{display:grid;justify-items:center;gap:8px;font-weight:600;font-size:14px;min-width:86px;color:var(--ink);text-decoration:none;text-align:center;}
    .catrow .cr{width:78px;height:78px;border-radius:99px;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);}
    .catrow .cr img{width:100%;height:100%;object-fit:cover;display:block;}

    .cats-section{background:var(--bg);}
    /*  Las cuatro tarjetas del mockup (`.cats`, `.cat`, `.ca`, `.cl`).  */
    .cats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
    .cat-card{position:relative;display:block;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:transform .2s;}
    .cat-card:hover{transform:translateY(-3px);}
    .cat-card-img{display:block;aspect-ratio:var(--ratio,1/1);}
    .cat-card-img img{width:100%;height:100%;object-fit:cover;display:block;}
    .cat-card-l{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px;}
    .cat-card-nom{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--dcase,none);letter-spacing:var(--dtrack,0);font-size:calc(18px * var(--ds,1));display:block;}
    .cat-card-n{font-size:13px;color:var(--ink2);}
    @media(max-width:900px){.cats-grid{grid-template-columns:repeat(2,1fr);}}

    /*  Editorial y noche las dejan SIN caja: la imagen y debajo el rotulo,
        sin fondo ni borde (`.cat` y `.cat .cl` del mockup).  */
    html[data-profile="editorial"] .cat-card,
    html[data-profile="noche"] .cat-card{box-shadow:none;background:none;}
    html[data-profile="editorial"] .cat-card-l,
    html[data-profile="noche"] .cat-card-l{padding:12px 0;}
    /* PRODUCTS */
    .products-section{background:var(--bg);}
    /*  Las pestañas de coleccion del mockup (`.tabs`): a la derecha del
        titular, con su recuento; la activa en tinta.  */
    .category-tabs{display:flex;gap:6px;flex-wrap:wrap;}
    .tab{border:0;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--rb);padding:8px 16px;font:inherit;font-weight:600;font-size:14px;color:var(--ink2);cursor:pointer;white-space:nowrap;}
    .tab:hover{color:var(--ink);}
    .tab.active{background:var(--ink);color:var(--bg);box-shadow:none;}
    .tab .c{font-size:12px;margin-left:4px;}   /* sin opacity (04-11-2026): bajaba el contraste del numero por debajo del minimo */
    .productos-mas{text-align:center;margin-top:28px;}
    /* ====================================================================
       LA FICHA DE PRODUCTO, EN CINCO VARIANTES
       --------------------------------------------------------------------
       `tema_variante('card')` pone `data-card` en la REJILLA, no en cada
       ficha: las fichas las pinta el javascript (`html += '<div
       class="product-card">'`), asi que para marcarlas una a una habria que
       pasarle el perfil al JS y tocar el unico sitio que no hace falta tocar.
       Con el atributo en el contenedor, las cinco variantes son descendientes
       y el JS no se entera de que existen los perfiles.

       >>> Y LOS TOKENS DE LA FICHA YA ESTABAN EMITIDOS.

       `tema_css()` publica desde el primer dia `--card-bg`, `--card-bd`,
       `--card-pad`, `--ratio`, `--pr` y `--cols` por perfil, y no los usaba
       nadie: la ficha tenia `background:#fff`, un borde fijo y una foto de
       130 px de alto para los cinco. De ahi que las cinco tiendas se
       parecieran tanto aunque la paleta cambiara.
       ==================================================================== */
    .products-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:30px 18px;}
    .product-card{background:var(--card-bg,var(--surface));box-shadow:var(--card-bd,inset 0 0 0 1px var(--line));border:0;border-radius:var(--r,20px);padding:var(--card-pad,12px);overflow:hidden;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;gap:10px;min-width:0;}
    /*  SIN LEVANTARSE al pasar por encima. En el mockup solo crece la foto y
        asoma el boton de anyadir; aqui la tarjeta subia 4px y ganaba sombra, y
        en «esencial» -tarjeta sin fondo ni borde- eso era un recuadro blanco
        que aparecia de golpe y descolocaba la fila.  */
    .product-card{display:flex;flex-direction:column;gap:10px;}
    .product-img-wrap{display:flex;text-decoration:none;color:inherit;}
    .product-card .quick{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;opacity:0;translate:0 6px;transition:opacity .2s,translate .2s;}
    .product-card:hover .quick,.product-card:focus-within .quick{opacity:1;translate:0 0;}
    .product-card .quick .add-btn{width:100%;height:auto;padding:9px 14px;font-size:14px;font-weight:600;border-radius:var(--rb);}
    a.product-name{text-decoration:none;}
    a.product-name:hover{color:var(--accent);}
    @media (hover:none){.product-card .quick{opacity:1;translate:0 0;position:static;margin-top:8px;}}
    .product-card-top{position:relative;padding:0;}
    .product-badges{position:absolute;left:8px;top:8px;z-index:2;display:flex;gap:6px;flex-wrap:wrap;margin:0;min-height:0;}
    .badge-destacado{background:var(--badge);color:var(--badge-ink,var(--ink));font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--rb,100px);letter-spacing:.02em;text-transform:none;}
    .badge-cat{background:var(--surface);color:var(--ink);font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--rb,100px);text-transform:capitalize;}
    .product-img-wrap{background:var(--soft,var(--bg));border-radius:var(--pr,14px);aspect-ratio:var(--ratio,1/1);height:auto;display:flex;align-items:center;justify-content:center;font-size:54px;overflow:hidden;}
    .product-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s;}
    .product-card:hover .product-img-wrap img{transform:scale(1.04);}
    .product-info{padding:0;flex:1;display:flex;flex-direction:column;gap:6px;min-width:0;}
    .product-brand{font-size:10px;font-weight:800;color:var(--accent);letter-spacing:2px;text-transform:uppercase;margin:0;}
    .product-name{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;margin:0;}
    .product-detail{font-size:12px;color:var(--ink3);margin:0;}
    .product-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
    .product-price{font-family:var(--body);font-size:16px;font-weight:700;color:var(--ink);}
    .add-btn{width:38px;height:38px;border-radius:var(--rb,12px);background:var(--accent);color:var(--accent-ink);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;line-height:1;transition:background .15s,transform .15s;flex-shrink:0;}
    .add-btn:hover{background:var(--accent-h);transform:scale(1.06);}

    /* editorial - el nombre con la tipografia de titulares y todo centrado */
    [data-card="editorial"] .product-name{font-family:var(--disp);font-size:calc(19px * var(--ds,1));font-weight:var(--dw);line-height:1.12;letter-spacing:var(--dtrack,0);text-align:center;}
    [data-card="editorial"] .product-price{font-weight:500;font-size:15px;}
    [data-card="editorial"] .product-info{align-items:center;text-align:center;}
    [data-card="editorial"] .product-footer{flex-direction:column;gap:6px;}

    /* dark - nombre en versales y el precio con el color de marca */
    [data-card="dark"] .product-name{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:500;text-align:center;}
    [data-card="dark"] .product-price{color:var(--accent);font-weight:400;}
    [data-card="dark"] .product-info{align-items:center;text-align:center;}
    [data-card="dark"] .product-footer{flex-direction:column;gap:6px;}

    /*  EL BOTON DE ANYADIR va dos veces en la tarjeta, como en el mockup:
        `.quick` sobre la foto y `.act` bajo el precio (ver tienda_tarjeta()).
        Por defecto sale el de la foto; «boxed» y «market» usan el de abajo.  */
    .product-card .act{display:none;}
    .add-btn{gap:6px;}
    .add-btn .lbl{white-space:nowrap;}

    /* boxed - un boton redondo en la esquina de la ficha, sin texto */
    [data-card="boxed"] .product-card .quick{display:none;}
    [data-card="boxed"] .product-info{position:relative;padding:4px 4px 6px;}
    [data-card="boxed"] .product-footer{padding-right:50px;}
    [data-card="boxed"] .product-card .act{display:block;position:absolute;right:2px;bottom:2px;}
    [data-card="boxed"] .product-card .act .add-btn{width:42px;height:42px;padding:0;}
    [data-card="boxed"] .product-card .act .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

    /* market - denso, con el boton a todo lo ancho y el nombre a dos lineas */
    [data-card="market"] .product-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;font-size:14.5px;min-height:2.6em;}
    [data-card="market"] .product-footer{flex-direction:column;align-items:stretch;gap:8px;}
    [data-card="market"] .product-price{font-family:var(--disp);font-size:22px;}
    [data-card="market"] .product-card .quick{display:none;}
    [data-card="market"] .product-card .act{display:block;margin-top:auto;}
    [data-card="market"] .product-card .act .add-btn{width:100%;height:auto;min-height:40px;padding:9px 14px;font-size:14px;font-weight:600;}

    /*  El de los productos con tallas no anyade: lleva a la ficha. Es el
        boton claro del mockup (`btn-g`), con la flecha y «Elegir opciones».  */
    .add-btn-var{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;text-decoration:none;letter-spacing:.2px;}
    .add-btn-var:hover{background:var(--soft);color:var(--ink);}
    .no-results{grid-column:1/-1;text-align:center;padding:48px 20px;color:var(--ink3);font-size:15px;font-weight:600;}


    /* ====================================================================
       OPINIONES EN LA PORTADA
       ==================================================================== */
    .opiniones-section{background:var(--soft,var(--bg));}
    .opiniones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
    .opinion{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);}
    .opinion-est{line-height:1;}
    .opinion-txt{font-size:15px;line-height:1.55;color:var(--ink);margin:0;}
    .opinion-pie{display:flex;flex-direction:column;gap:2px;margin:0;margin-top:auto;padding-top:6px;}
    .opinion-quien{font-size:13px;font-weight:700;color:var(--ink);}
    .opinion-prod{font-size:12.5px;color:var(--ink3);text-decoration:none;}
    .opinion-prod:hover{color:var(--accent);}
    .section-desc .tl-est{vertical-align:-2px;margin-right:4px;}

    /*  Editorial y noche centran las opiniones, igual que centran las cabeceras
        de seccion y las fichas: es el mismo gesto de esos dos perfiles.  */
    html[data-profile="editorial"] .opinion,
    html[data-profile="noche"] .opinion{align-items:center;text-align:center;}

    /* ====================================================================
       EL BOLETIN
       --------------------------------------------------------------------
       Solo sale si la cuenta tiene el modulo Newsletter contratado: lo dice
       SWPanel al crear la tienda, con la clave `newsletter_activo`.
       ==================================================================== */
    .news-section{background:var(--accent);color:var(--accent-ink);}
    .news-in{max-width:760px;margin:0 auto;text-align:center;}
    .news-in h2{font-family:var(--disp);font-weight:var(--dw);font-size:calc(clamp(24px,3vw,34px) * var(--ds,1));color:var(--accent-ink);letter-spacing:var(--dtrack,0);text-transform:var(--dcase,none);}
    .news-in p{color:var(--accent-ink);opacity:.85;margin-top:10px;font-size:15px;}
    .news-form{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;justify-content:center;}
    .news-form input{flex:1 1 280px;max-width:380px;padding:14px 16px;border-radius:var(--rb,10px);border:0;font-family:var(--body);font-size:15px;color:var(--ink);background:var(--surface);outline:none;}
    .news-form button{padding:14px 28px;border-radius:var(--rb,10px);border:0;cursor:pointer;background:var(--badge);color:var(--badge-ink,var(--ink));font-family:var(--body);font-weight:700;font-size:15px;}
    .news-form button:hover{filter:brightness(.95);}
    .news-ok,.news-ko{margin-top:14px;font-size:14px;font-weight:600;}
    .news-ko{color:var(--badge);}
    .news-legal{margin-top:14px;font-size:12px;opacity:.7;}
    .news-legal a{color:inherit;}
    /* EVENTS */
    /*  Las promociones, como tarjetas del mockup (`.rv`).  */
    .events-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}
    .event-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:8px;}
    .event-row-date{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0;}
    .event-row-title{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--dcase,none);letter-spacing:var(--dtrack,0);font-size:calc(20px * var(--ds,1));line-height:1.15;color:var(--ink);margin:0;}
    .event-row-desc{font-size:14.5px;color:var(--ink2);margin:0;}

    /* CONTACT */
    .contact-section{background:var(--bg);}
    .contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:start;}
    .contact-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;}
    .contact-icon-wrap{width:44px;height:44px;border-radius:var(--r,12px);background:var(--accent-soft);border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
    .contact-label{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:3px;}
    .contact-val{font-weight:600;font-size:15px;color:var(--ink);}
    .contact-val a{color:var(--accent);text-decoration:none;}
    .contact-val a:hover{color:var(--accent-h);text-decoration:underline;}
    .contact-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r,20px);padding:32px;}
    .form-group{margin-bottom:16px;}
    .form-group label{display:block;font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:1px;text-transform:uppercase;margin-bottom:7px;}
    .form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r,12px);color:var(--ink);font-family:var(--body,'Inter',sans-serif);font-size:14px;padding:11px 14px;transition:border-color 0.2s;outline:none;}
    .form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--accent);background:var(--surface);}
    .form-group textarea{resize:vertical;min-height:110px;}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

    /* CTA */
    /*  El banner de campaña del mockup (`.band`).  */
    .band{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden;background:var(--band-bg);color:var(--band-ink);}
    .band-t{padding:52px;display:flex;flex-direction:column;gap:16px;justify-content:center;}
    .band-eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--band-mut);margin:0;}
    .band-h{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--dcase,none);letter-spacing:var(--dtrack,0);font-size:calc(clamp(30px,4vw,50px) * var(--ds,1));line-height:1.05;color:var(--band-ink);margin:0;}
    .band-p{color:var(--band-mut);max-width:44ch;margin:0;}
    .band .band-btn{background:var(--band-ink);color:var(--band-bg);}
    .band-a{min-height:340px;}
    .band-a img{width:100%;height:100%;object-fit:cover;display:block;}
    html[data-profile="noche"] .band{border:1px solid var(--line);}
    html[data-profile="noche"] .band .band-btn{background:var(--accent);color:var(--accent-ink);}
    @media(max-width:900px){.band{grid-template-columns:1fr;}.band-t{padding:32px 24px;}.band-a{min-height:220px;}}
    .btn-blue{background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:15px;padding:14px 32px;border-radius:var(--rb,12px);text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;}
    .btn-blue:hover{background:var(--accent-h);}

    /* ====================================================================
       EL PIE, COPIADO DEL MOCKUP (`footer.foot`, `.fgrid`, `.fbot`, `.pays`)
       --------------------------------------------------------------------
       Claro y con un borde arriba, no negro. Y colgado de la CLASE: la regla
       vieja era `footer{background:var(--ink)}`, y pintaba de negro cualquier
       <footer> de cualquier pagina con el texto oscuro encima.
       ==================================================================== */
    footer.foot{border-top:1px solid var(--line);background:var(--surface);padding-block:52px 28px;margin-top:40px;color:var(--ink);}
    .foot-in{max-width:1280px;margin:0 auto;padding-inline:24px;}
    .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;}
    .fgrid h4,.fgrid h3{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:0 0 12px;}
    .fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
    .fgrid ul a{color:var(--ink2);font-size:14px;text-decoration:none;}
    .fgrid ul a:hover{color:var(--accent);}
    .foot-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
    .foot-logo img{max-height:36px;width:auto;}
    .foot-txt{margin:14px 0 0;max-width:36ch;font-size:14px;color:var(--ink2);}
    .foot-facts{display:grid;gap:6px;margin-top:14px;font-size:14px;}
    .foot-facts a{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);text-decoration:none;}
    .foot-facts a:hover{color:var(--accent);}
    .social{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
    .social a{border:1px solid var(--line);border-radius:var(--rb);padding:6px 12px;font-size:13px;color:var(--ink2);text-decoration:none;}
    .social a:hover{border-color:var(--ink3);color:var(--ink);}
    .fbot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--ink3);}
    .fbot a{color:inherit;}
    .pays{display:flex;gap:6px;flex-wrap:wrap;}
    .pays span{border:1px solid var(--line);border-radius:6px;padding:4px 9px;font-size:12px;font-weight:600;color:var(--ink2);}
    @media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;}.fgrid>div:first-child{grid-column:1/-1;}.foot-in{padding-inline:20px;}}
    @media(max-width:520px){.fgrid{grid-template-columns:1fr;}}

    /*  Los iconos de trazo del mockup (`tienda_icono()`): toman el color del
        texto, asi que siguen al perfil sin tocar nada.  */
    .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .ic.sm{width:16px;height:16px;}
    .ic.lg{width:28px;height:28px;}

    /* CART PANEL */
    .cart-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.55);opacity:0;pointer-events:none;transition:opacity 0.3s;}
    .cart-overlay.open{opacity:1;pointer-events:all;}
    .cart-panel{position:fixed;top:0;right:-520px;z-index:501;width:100%;max-width:520px;height:100vh;background:var(--surface);box-shadow:-8px 0 40px rgba(0,0,0,0.15);display:flex;flex-direction:column;transition:right 0.35s cubic-bezier(0.4,0,0.2,1);overflow:hidden;}
    .cart-panel.open{right:0;}
    .cart-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--bg);flex-shrink:0;}
    .cart-title{font-size:17px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;}
    .cart-close-btn{background:none;border:1px solid var(--line);border-radius:var(--rb,8px);width:34px;height:34px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
    .cart-close-btn:hover{background:var(--line);}
    /* Scrollable body */
    .cart-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
    /* Empty state */
    .cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:48px 32px;text-align:center;color:var(--ink3);}
    .cart-empty-icon{font-size:60px;}
    .cart-empty-text{font-size:15px;font-weight:600;}
    /* Items list */
    .cart-items{padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
    .cart-item{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:var(--r,12px);padding:10px 12px;}
    .cart-item-emoji{font-size:32px;flex-shrink:0;width:42px;text-align:center;line-height:1;}
    .cart-item-info{flex:1;min-width:0;}
    .cart-item-name{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
    .cart-item-price{font-size:12px;font-weight:700;color:var(--accent);}
    .cart-item-qty{display:flex;align-items:center;gap:6px;flex-shrink:0;}
    .qty-btn{width:26px;height:26px;border-radius:7px;border:1.5px solid var(--line);background:var(--surface);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:800;transition:all 0.15s;line-height:1;}
    .qty-btn:hover{border-color:var(--accent);color:var(--accent);}
    .qty-num{font-size:13px;font-weight:800;color:var(--ink);min-width:18px;text-align:center;}
    .cart-del-btn{background:none;border:none;cursor:pointer;font-size:15px;color:var(--line);transition:color 0.2s;flex-shrink:0;padding:4px;}
    .cart-del-btn:hover{color:#EF4444;}
    /* Order form inside cart */
    .cart-form{padding:0 20px 20px;display:flex;flex-direction:column;gap:14px;}
    .cart-section-title{font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:1.5px;text-transform:uppercase;margin-top:4px;padding-bottom:8px;border-bottom:1px solid var(--line);}
    .delivery-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .delivery-opt{position:relative;border:2px solid var(--line);border-radius:var(--r,12px);padding:14px 12px;cursor:pointer;transition:all 0.2s;background:var(--surface);}
    .delivery-opt.active{border-color:var(--accent);background:var(--accent-soft);}
    .delivery-opt input[type=radio]{position:absolute;opacity:0;pointer-events:none;}
    .delivery-opt-icon{font-size:22px;margin-bottom:6px;display:block;}
    .delivery-opt-name{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:2px;}
    .delivery-opt-price{font-size:12px;font-weight:700;color:var(--accent);}
    .delivery-opt.active .delivery-opt-name{color:var(--accent);}
    .form-field{display:flex;flex-direction:column;gap:5px;}
    .form-field label{font-size:11px;font-weight:700;color:var(--ink2);letter-spacing:0.8px;text-transform:uppercase;}
    .form-field label span.required{color:#EF4444;margin-left:2px;}
    .form-field input,.form-field select,.form-field textarea{background:var(--bg);border:1.5px solid var(--line);border-radius:var(--rb,10px);padding:10px 12px;font-family:var(--body,'Inter',sans-serif);font-size:14px;color:var(--ink);outline:none;transition:border-color 0.2s;width:100%;}
    .form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--accent);background:var(--surface);}
    .form-field textarea{resize:vertical;min-height:64px;}
    .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .payment-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
    .pay-opt{position:relative;border:2px solid var(--line);border-radius:var(--rb,10px);padding:12px 10px;cursor:pointer;transition:all 0.2s;background:var(--surface);text-align:left;}
    .pay-opt.active{border-color:var(--accent);background:var(--accent-soft);}
    .pay-opt input[type=radio]{position:absolute;opacity:0;pointer-events:none;}
    .pay-opt-name{font-size:12px;font-weight:800;color:var(--ink);display:block;margin-bottom:2px;}
    .pay-opt-desc{font-size:11px;color:var(--ink3);display:block;}
    .pay-opt.active .pay-opt-name{color:var(--accent);}
    /* Summary */
    .cart-summary{background:var(--bg);border-radius:var(--r,12px);padding:14px 16px;margin:0 20px;}
    .summary-title{font-size:12px;font-weight:800;color:var(--ink2);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;}
    .summary-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink2);margin-bottom:6px;}
    .summary-line strong{color:var(--ink);font-weight:700;}
    .summary-divider{border:none;border-top:1px solid var(--line);margin:8px 0;}
    .summary-total{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:900;color:var(--ink);}
    .summary-total-price{color:var(--accent);font-size:20px;}
    /* Footer button */
    .cart-footer{padding:16px 20px 20px;flex-shrink:0;border-top:1px solid var(--line);background:var(--surface);}
    .cart-order-btn{width:100%;padding:16px;background:#25D366;color:#fff;font-weight:800;font-size:15px;border:none;border-radius:var(--r,14px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.2s;box-shadow:0 8px 24px rgba(37,211,102,0.35);}
    .cart-order-btn:hover{background:#1ebe5d;transform:translateY(-1px);}
    .cart-order-btn:disabled{background:var(--line);box-shadow:none;cursor:not-allowed;transform:none;}
    .cart-note{font-size:11px;color:var(--ink3);text-align:center;margin-top:8px;}

    /* WHATSAPP FLOAT */
    .wa-float-wrap{position:fixed;bottom:28px;right:28px;z-index:1000;display:flex;align-items:center;gap:10px;}
    .wa-float-msg{background:white;color:var(--ink);font-weight:800;font-size:13.5px;padding:10px 16px;border-radius:var(--r,20px);box-shadow:0 8px 24px rgba(0,0,0,0.18);white-space:nowrap;animation:waMsgPop 0.4s ease;}
    .wa-float{position:relative;z-index:1000;width:60px;height:60px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(37,211,102,0.5);text-decoration:none;flex-shrink:0;animation:waPulse 2.5s infinite;-webkit-tap-highlight-color:transparent;}
    .wa-float:hover{background:#1ebe5d;transform:scale(1.08);}
    .wa-float svg{width:32px;height:32px;fill:#fff;pointer-events:none;}
    @keyframes waMsgPop{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}}
    @keyframes waPulse{0%,100%{box-shadow:0 8px 28px rgba(37,211,102,0.5),0 0 0 0 rgba(37,211,102,0.35);}60%{box-shadow:0 8px 28px rgba(37,211,102,0.5),0 0 0 14px rgba(37,211,102,0);}}

    /* TOAST */
    .cart-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(40px);z-index:999;background:var(--ink);color:var(--bg);border-radius:var(--r,14px);padding:12px 20px;display:flex;align-items:center;gap:10px;box-shadow:0 16px 48px rgba(0,0,0,0.2);opacity:0;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);pointer-events:none;font-weight:700;font-size:13px;white-space:nowrap;}
    .cart-toast.show{transform:translateX(-50%) translateY(0);opacity:1;}

    /* RESPONSIVE */
    @media(max-width:900px){
      nav[data-header]{padding:12px 20px;}
      .nav-links,.nav-cta{display:none;}
      .nav-hamburger{display:inline-grid;}
      /*  LAS CUATRO CABECERAS SON LA MISMA EN EL MOVIL.

          Aqui los enlaces ya no se ven -se van al menu de la hamburguesa-, asi
          que lo que distinguia a `center`, `grid` y `market` era justamente lo
          que ya no esta. Dejar sus reglas puestas no las hacia distintas: las
          rompia -`center` apilaba en columna con las acciones en absoluto sobre
          un hueco vacio, y `grid` repartia tres columnas con una sola cosa que
          colocar-.  */
      nav[data-header="center"],
      nav[data-header="grid"],
      nav[data-header="market"]{display:flex;flex-direction:row;align-items:center;justify-content:space-between;grid-template-columns:none;padding-bottom:12px;}
      nav[data-header="center"] .nav-logo,
      nav[data-header="grid"] .nav-logo{justify-content:flex-start;padding-bottom:0;}
      nav[data-header="center"] .nav-right,
      nav[data-header="grid"] .nav-right,
      nav[data-header="market"] .nav-right{position:static;flex:0 1 auto;}
      /*  Salvo «mercado», que en el movil SIGUE siendo distinta, como en el
          mockup: el buscador baja a su propia fila a todo lo ancho y la barra
          de categorias se queda, deslizable. La tira de servicio se va.  */
      .util{display:none;}
      nav[data-header="market"]{flex-wrap:wrap;row-gap:10px;padding-bottom:0;}
      nav[data-header="market"] .nav-right{margin-left:auto;}
      nav[data-header="market"] .nav-msearch{order:4;flex-basis:100%;margin:0;max-width:none;}
      nav[data-header="market"] .cart-btn{padding:9px 12px;}
      nav[data-header="market"] .nav-links{display:flex;}
      section[class*="-section"]{padding:48px 20px;}
      /*  LA PORTADA EN EL MOVIL: una columna y lo imprescindible.

          Las cuatro maquetas son rejillas de dos columnas -o una imagen de
          fondo con una caja encima-, y a 390 px eso no cabe de ninguna forma.
          Las tres de rejilla pasan a una columna; la de imagen completa deja
          de superponer la caja y la pone DEBAJO, que es la unica manera de que
          el texto se lea sobre cualquier foto.

          El collage de `type` se quita: son tres fotos giradas que se pisan, y
          en una columna estrecha no se entiende lo que son.  */
      .hero-in{padding-inline:20px;}
      .hero[data-hero="split"] .hero-in,
      .hero[data-hero="type"] .hero-in,
      .hero[data-hero="mosaic"] .hero-in{grid-template-columns:1fr;gap:26px;padding-block:36px 24px;}
      .hero[data-hero="split"] .hero-media{aspect-ratio:16/10;}
      .hero[data-hero="full"] .hero-img{min-height:240px;aspect-ratio:4/3;}
      .hero[data-hero="full"] .hero-over{position:static;padding:0;}
      .hero[data-hero="full"] .hero-box{max-width:none;}
      html[data-profile="noche"] .hero[data-hero="full"] .hero-box{padding-inline:0;}
      .hero-collage,.hero-chips{display:none;}
      .hero-mz{grid-template-columns:1fr;}
      .hero-mz-t{padding:24px 22px;}
      .hero-mz .hero-media{min-height:170px;}
      .hero-stats{margin-top:24px;}
      .hero-stat{padding:12px 10px;}
      .hero-stat-num{font-size:20px;}
      .hero-ctas{margin-top:22px;}
      .features-strip{padding:24px 20px 0;}
      .features-inner{grid-template-columns:1fr 1fr;}
      .products-grid{grid-template-columns:1fr 1fr;gap:12px;}
      .product-img-wrap{font-size:44px;}

      .contact-grid{grid-template-columns:1fr;gap:28px;}
      .form-row{grid-template-columns:1fr;}

      .wa-float-wrap{bottom:20px;right:20px;}
      .wa-float{width:56px;height:56px;}
      .wa-float svg{width:28px;height:28px;}
      .wa-float-msg{font-size:12px;padding:8px 12px;}
      .cart-panel{max-width:100%;}
      .search-wrap{width:100%;}
      .section-header{flex-direction:column;align-items:flex-start;}
    }
    @media(max-width:480px){
      .products-grid{grid-template-columns:1fr 1fr;gap:10px;}
      .product-name{font-size:13px;}
      .product-price{font-size:18px;}
    }

    /* SUCCESS OVERLAY */
    .success-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.7);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);}
    .success-overlay.show{display:flex;}
    .success-box{background:white;border-radius:var(--r,24px);padding:2.5rem 2rem;max-width:440px;width:100%;text-align:center;box-shadow:0 32px 80px rgba(0,0,0,0.3);animation:pop-in 0.4s cubic-bezier(0.34,1.56,0.64,1);}
    @keyframes pop-in{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}
    .success-icon{font-size:60px;margin-bottom:1rem;display:block;}
    .success-title{font-size:1.5rem;font-weight:900;color:var(--ink);margin-bottom:0.5rem;}
    .success-sub{font-size:0.9rem;color:var(--ink2);line-height:1.6;margin-bottom:1.5rem;}
    .success-pedido-num{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:0.78rem;font-weight:800;padding:5px 14px;border-radius:var(--r,20px);margin-bottom:1.2rem;}
    .success-wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;background:#25D366;color:white;font-weight:800;font-size:15px;border-radius:var(--r,14px);text-decoration:none;margin-bottom:0.75rem;transition:all 0.2s;}
    .success-wa-btn:hover{background:#1ebe5d;transform:translateY(-2px);}
    .success-close-btn{background:none;border:1.5px solid var(--line);color:var(--ink2);font-size:0.82rem;padding:10px 24px;border-radius:var(--rb,10px);cursor:pointer;width:100%;font-weight:600;transition:all 0.2s;}
    .error-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(40px);z-index:1500;background:#EF4444;color:white;padding:12px 24px;border-radius:var(--r,14px);font-weight:700;font-size:13px;opacity:0;transition:all 0.35s;pointer-events:none;white-space:nowrap;}
    .error-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

    /* AGE GATE (verificación de edad) */
    .age-gate-overlay{position:fixed;inset:0;z-index:3000;background:rgba(15,23,42,0.94);display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px);}
    .age-gate-overlay.show{display:flex;}
    .age-gate-box{background:white;border-radius:var(--r,24px);padding:2.5rem 2rem;max-width:420px;width:100%;text-align:center;box-shadow:0 32px 80px rgba(0,0,0,0.4);animation:pop-in 0.4s cubic-bezier(0.34,1.56,0.64,1);}
    .age-gate-icon{font-size:56px;margin-bottom:0.8rem;display:block;}
    .age-gate-title{font-size:1.4rem;font-weight:900;color:var(--ink);margin-bottom:0.6rem;}
    .age-gate-sub{font-size:0.88rem;color:var(--ink2);line-height:1.6;margin-bottom:1.6rem;}
    .age-gate-buttons{display:flex;flex-direction:column;gap:10px;}
    .age-gate-buttons .btn-blue{width:100%;}
    .age-gate-no{background:none;border:1.5px solid var(--line);color:var(--ink2);font-size:0.82rem;padding:12px 20px;border-radius:var(--r,12px);cursor:pointer;width:100%;font-weight:600;transition:all 0.2s;}
    .age-gate-no:hover{background:var(--bg);color:var(--ink2);}

    /* POLÍTICAS LEGALES: el modal */
    .policy-modal-overlay{position:fixed;inset:0;z-index:2500;background:rgba(0,0,0,0.6);display:none;backdrop-filter:blur(3px);}
    .policy-modal-overlay.show{display:block;}
    .policy-modal{position:fixed;z-index:2501;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:620px;max-height:82vh;background:var(--surface);border-radius:var(--r,20px);box-shadow:0 32px 80px rgba(0,0,0,0.35);display:none;flex-direction:column;overflow:hidden;}
    .policy-modal.show{display:flex;}
    .policy-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);flex-shrink:0;}
    .policy-modal-header h3{font-size:1.05rem;font-weight:800;color:var(--ink);}
    .policy-modal-close{background:none;border:none;font-size:18px;color:var(--ink2);cursor:pointer;line-height:1;padding:4px 8px;border-radius:var(--rb,8px);}
    .policy-modal-close:hover{background:var(--line);color:var(--ink);}
    .policy-modal-body{padding:20px 22px 28px;overflow-y:auto;font-size:0.86rem;line-height:1.7;color:var(--ink2);white-space:normal;}

    /* Aviso de venta a menores dentro del carrito */
    .cart-menor-warning{margin:14px 20px 0;padding:12px 14px;background:#FEF3C7;border:1px solid #FCD34D;border-radius:var(--r,12px);color:#92400E;font-size:12px;font-weight:600;line-height:1.5;}

    /* Check de confirmación de mayoría de edad en el carrito */
    .age-confirm-check{display:flex;align-items:flex-start;gap:8px;text-transform:none;font-weight:600;font-size:12.5px;line-height:1.5;color:var(--ink2);}
    .age-confirm-check a{color:var(--accent);text-decoration:underline;}

/* ===========================================================================
   LA NAVEGACION COMPARTIDA Y EL LIENZO DE LAS PAGINAS INTERIORES
   ---------------------------------------------------------------------------
   Vivia dentro de un <style> en `tienda_lib.php`, o sea que viajaba en el HTML
   de cada pagina y no se cacheaba nunca. Aqui se descarga una vez.
   =========================================================================== */

/*  El lienzo de las paginas interiores. Ya no descuenta la cabecera -es
    `sticky` y ocupa su sitio-, asi que el `padding-top` es solo aire.  */
.tl-wrap{max-width:1280px;margin:0 auto;padding:32px 24px 72px;}
@media(max-width:760px){.tl-wrap{padding:22px 20px 56px;}}

.tl-migas{font-size:13px;opacity:.75;margin-bottom:16px;}
.tl-migas a{text-decoration:none;color:var(--accent);}
.tl-h1{font-size:27px;margin:0 0 6px;}
.tl-sub{opacity:.72;font-size:14px;margin:0 0 26px;}
.tl-vacio{padding:48px 0;text-align:center;opacity:.7;}

/*  La rejilla de producto, la misma en la portada, en las categorias y en el
    buscador.  */
.tl-rej{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;}
.tl-card{border:1px solid var(--line);border-radius:var(--r,13px);
         overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;
         background:var(--surface,#fff);transition:box-shadow .15s ease,transform .15s ease;}
.tl-card:hover{box-shadow:var(--shadow,0 8px 26px rgba(0,0,0,.10));transform:translateY(-2px);}
.tl-foto{aspect-ratio:1/1;background:rgba(0,0,0,.04);display:flex;align-items:center;
         justify-content:center;overflow:hidden;}
.tl-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.tl-foto span{font-size:52px;}
.tl-body{padding:13px 14px 16px;display:flex;flex-direction:column;gap:4px;flex:1;}
.tl-marca-p{font-size:11px;text-transform:uppercase;letter-spacing:.05em;opacity:.6;}
.tl-nom{font-weight:600;font-size:15px;line-height:1.3;}
.tl-precio{font-weight:800;font-size:17px;margin-top:auto;padding-top:8px;}
.tl-agotado{font-size:12px;color:#b91c1c;font-weight:600;}
/*  ========================================================================
    LA FICHA DEL CATALOGO, EN LAS MISMAS CINCO VARIANTES QUE LA DE LA PORTADA
    ------------------------------------------------------------------------
    `categoria.php`, `buscar.php` y los relacionados de `producto.php` pintan
    con OTRO vocabulario -`.tl-rej`, `.tl-card`, `.tl-foto`, `.tl-nom`...-, que
    nacio aparte del de la portada. Son la misma cosa con otros nombres, asi
    que las cinco variantes son las mismas decisiones escritas aqui.

    >>> Y A Q U I   S I   H A Y   E S T R E L L A S .

    La ficha del catalogo pinta la valoracion -`.tl-val`- y la de la portada no.
    Por eso la regla del mockup que las quita en `editorial` y en `dark` solo se
    puede cumplir aqui; en la portada no habia nada que quitar.

    La tarjeta ENTERA es un enlace, asi que no hay boton de anyadir: `boxed`, que
    en la portada mueve el boton a la esquina de la foto, aqui se resuelve con lo
    otro que hace en el mockup -la foto metida en una caja con aire alrededor-.
    ======================================================================== */
.tl-rej{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.tl-card{background:var(--card-bg,var(--surface));box-shadow:var(--card-bd,inset 0 0 0 1px var(--line));border:0;border-radius:var(--r,13px);padding:var(--card-pad,0px);gap:10px;}
.tl-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);}
.tl-foto{aspect-ratio:var(--ratio,1/1);border-radius:var(--pr,0px);background:var(--soft,rgba(0,0,0,.04));}
.tl-foto img{transition:transform .45s;}
.tl-card:hover .tl-foto img{transform:scale(1.04);}
.tl-nom{font-weight:600;font-size:15px;line-height:1.3;color:var(--ink);}
.tl-precio{font-family:var(--body);font-weight:700;font-size:16px;color:var(--ink);}
.tl-marca-p{color:var(--accent);opacity:1;font-weight:700;letter-spacing:.12em;}
/*  El aire de dentro lo pone AHORA la tarjeta con `--card-pad`, asi que el
    cuerpo no pone el suyo: con los dos, los perfiles que acolchan la tarjeta
    -esencial y mercado- dejaban el texto a 25 px del borde. Lo que separa el
    texto de la foto es el `gap` de la tarjeta, que es como lo hace el mockup.  */
.tl-body{padding:0;gap:4px;}

/* editorial - el nombre con la tipografia de titulares, centrado y sin estrellas */
[data-card="editorial"] .tl-body{align-items:center;text-align:center;}
[data-card="editorial"] .tl-nom{font-family:var(--disp);font-size:calc(19px * var(--ds,1));font-weight:var(--dw);line-height:1.12;letter-spacing:var(--dtrack,0);}
[data-card="editorial"] .tl-precio{font-weight:500;font-size:15px;}
[data-card="editorial"] .tl-val{display:none;}

/* dark - versales, el precio con el color de marca y sin estrellas */
[data-card="dark"] .tl-body{align-items:center;text-align:center;}
[data-card="dark"] .tl-nom{text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;font-weight:500;}
[data-card="dark"] .tl-precio{color:var(--accent);font-weight:400;}
[data-card="dark"] .tl-val{display:none;}

/* boxed - la foto en su caja, con aire alrededor */
[data-card="boxed"] .tl-foto{margin:4px 4px 0;}
[data-card="boxed"] .tl-body{padding-top:10px;}

/* market - denso: el nombre a dos lineas y el precio por delante */
[data-card="market"] .tl-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:500;font-size:14.5px;min-height:2.6em;}
[data-card="market"] .tl-precio{font-size:18px;font-weight:700;}
[data-card="market"] .tl-marca-p{display:none;}
.tl-rej[data-card="market"]{gap:12px;}

/*  E L   S E L E C T O R   D E   I D I O M A .

    Dos o tres letras y nada mas. Sin banderas: una bandera no es un idioma
    -el castellano no es Espanya, y el ingles no es el Reino Unido-, y elegir
    cual poner ofende a alguien siempre.  */
.tl-idiomas{display:flex;gap:2px;align-items:center;}
.tl-idiomas a,.tl-idiomas span{font-size:12px;font-weight:700;letter-spacing:.4px;
                               padding:5px 7px;border-radius:6px;text-decoration:none;
                               color:var(--ink2);}
.tl-idiomas a:hover{background:rgba(127,127,127,.14);color:var(--ink);}
.tl-idiomas .on{background:var(--accent);color:var(--accent-ink);}

/*  L A S   E S T R E L L A S .

    Se pintan con el caracter y no con una imagen: no descargan nada, se ven
    igual en cualquier navegador y no se rompen si falla un fichero.

    Las vacias son el MISMO caracter en gris, no un contorno: asi las cinco
    ocupan exactamente lo mismo y la fila no baila entre un producto de 5 y
    uno de 2.

    El ambar es fijo y no el color de la tienda a proposito. Unas estrellas
    del color de la marca dejan de parecer estrellas -y con una marca palida
    directamente no se ven-; el dorado se reconoce sin leer nada.  */
.tl-est{display:inline-flex;gap:1px;line-height:1;letter-spacing:1px;}
.tl-est b{color:#f59e0b;font-weight:400;}
.tl-est i{color:var(--line,#e5e7eb);font-style:normal;}
/*  En «noche» las estrellas van en el dorado del perfil (`.rate .st` del
    mockup): el amarillo de siempre sobre negro era lo unico que chillaba.  */
html[data-profile="noche"] .tl-est b{color:var(--accent);}
.tl-val{display:flex;align-items:center;gap:5px;margin-top:4px;
        font-size:12px;color:var(--ink2);}

/*  Los dos botones de la tienda. Se definen UNA vez: antes cada pagina
    repetia su propia version y no habia dos iguales.  */
.tl-btn-p{display:inline-block;padding:13px 26px;border:0;cursor:pointer;font:inherit;
          font-size:15px;font-weight:700;text-decoration:none;
          border-radius:var(--rb,10px);
          background:var(--accent,#0F172A);color:var(--accent-ink,#fff);
          transition:background .15s ease;}
.tl-btn-p:hover{background:var(--accent-h,#0C1322);}
.tl-btn-s{display:inline-block;padding:12px 22px;cursor:pointer;font:inherit;font-size:14px;
          text-decoration:none;border-radius:var(--rb,10px);
          border:1px solid var(--line,#e5e7eb);background:transparent;color:inherit;
          transition:border-color .15s ease;}
.tl-btn-s:hover{border-color:var(--accent,#0F172A);}

/*  El buscador: la caja del panel de arriba, con la lupa dentro.  */
.tl-busca{display:flex;align-items:center;gap:10px;position:relative;flex:1;height:50px;padding:0 6px 0 16px;
          background:var(--surface);border:1.5px solid var(--line);border-radius:var(--rb,10px);color:var(--ink3);}
.tl-busca:focus-within{border-color:var(--ink3);}
.tl-busca input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none;padding:0;}
.tl-busca button{padding:9px 16px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
                 border-radius:calc(var(--rb,10px) - 3px);border:0;
                 background:var(--accent);color:var(--accent-ink);}
.tl-sug{position:absolute;top:100%;left:0;right:0;z-index:900;margin-top:4px;
        background:var(--surface,#fff);border:1px solid var(--line,#e5e7eb);
        border-radius:var(--r,10px);box-shadow:0 12px 32px rgba(0,0,0,.16);overflow:hidden;}
.tl-sug a{display:flex;gap:10px;align-items:center;padding:9px 12px;text-decoration:none;
          color:inherit;border-bottom:1px solid var(--line,#f3f4f6);}
.tl-sug a:last-child{border-bottom:0;}
.tl-sug a:hover,.tl-sug a.on{background:var(--accent-soft,#eef);}
.tl-sug-f{width:34px;height:34px;flex:0 0 auto;border-radius:8px;overflow:hidden;
          background:rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;font-size:18px;}
.tl-sug-f img{width:100%;height:100%;object-fit:cover;}
.tl-sug-n{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tl-sug-m{display:block;font-size:12px;opacity:.65;}
.tl-sug-p{font-size:13px;font-weight:700;white-space:nowrap;}


/*  EL MENU DE MOVIL.

    Ocupa la pantalla entera a proposito: un desplegable pequenyo en un movil
    obliga a apuntar con el dedo a enlaces de catorce pixeles.  */
/*  Y EL ESTADO CERRADO, QUE ES EL DE POR DEFECTO.

    El panel se abre y se cierra con el atributo `hidden` (tnAbrirMenu y
    tnCerrarMenu, en tienda_lib.php), y `hidden` esconde a traves de la regla
    `[hidden]{display:none}` de la hoja del NAVEGADOR, que es la de menor
    prioridad que existe. El `display:flex` de aqui abajo la gana siempre.

    Resultado, visto el 25-09-2026 en swpruebas.com: el menu de movil salia
    ABIERTO en todas las pantallas, tapando la tienda entera -es
    `position:fixed; inset:0; z-index:1000`- y dejando a la vista el buscador,
    los enlaces y la equis. La tienda parecia rota y lo que estaba mal era una
    linea que faltaba.

    No se arregla quitando el `display:flex` -el panel lo necesita para apilar
    los enlaces-: se arregla diciendo que cerrado es cerrado, con la misma
    especificidad.  */
.tn-movil[hidden]{display:none;}

.tn-movil{position:fixed;inset:0;z-index:1000;background:var(--surface,#fff);
          display:flex;flex-direction:column;gap:4px;padding:76px 24px 24px;overflow-y:auto;}
.tn-movil a{padding:15px 4px;font-size:17px;font-weight:600;text-decoration:none;color:inherit;
            border-bottom:1px solid var(--line,#f3f4f6);}
.tn-movil-x{position:absolute;top:18px;right:18px;width:44px;height:44px;font-size:30px;
            line-height:1;border:0;background:transparent;cursor:pointer;color:inherit;}

/*  LOS CHIPS DE CATEGORIA de las paginas interiores (`tienda_categorias()`).

    Solo estaban en el <style> en linea de `tienda_cabecera()`, que se ha
    quitado. Aqui con la forma del `.chip` del mockup: pastilla, fondo suave y
    sin borde; la activa, en tinta.  */
.tl-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.tl-cats a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:99px;background:var(--soft);color:var(--ink);font-size:13.5px;font-weight:600;text-decoration:none;border:0;}
.tl-cats a:hover{background:var(--line);}
.tl-cats a.on{background:var(--ink);color:var(--bg);}

/* ===========================================================================
   PAGINACION
   ---------------------------------------------------------------------------
   Los numeros son enlaces de verdad, asi que reciben el foco y el aro de
   `:focus-visible` sale solo. El area de pulsacion es de 40px: por debajo de
   eso, en un movil se falla y se acaba en la pagina de al lado.
   =========================================================================== */
.pg{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin:34px 0 8px;}
.pg-n,.pg-b{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;
            justify-content:center;text-decoration:none;color:inherit;font-size:14px;
            border:1px solid var(--line,#e5e7eb);border-radius:var(--rb,8px);
            background:var(--surface,#fff);}
.pg-n:hover,.pg-b:hover{border-color:var(--accent,#0F172A);}
.pg-aqui{background:var(--accent,#0F172A);color:var(--accent-ink,#fff);
         border-color:var(--accent,#0F172A);font-weight:700;}
.pg-off{opacity:.4;cursor:default;}
.pg-p{padding:0 4px;opacity:.5;}
@media(max-width:520px){.pg-b{font-size:0;padding:0 10px;}
                        .pg-b::after{font-size:18px;content:'\2039';}
                        .pg-b[rel=next]::after{content:'\203A';}}

/* ===========================================================================
   LA FICHA: GALERIA Y RELACIONADOS
   =========================================================================== */
.pr-galeria{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.pr-mini{width:70px;height:70px;padding:0;cursor:pointer;overflow:hidden;background:none;
         border:2px solid var(--line,#e5e7eb);border-radius:var(--rb,8px);}
.pr-mini img{width:100%;height:100%;object-fit:cover;display:block;}
.pr-mini:hover{border-color:var(--accent,#0F172A);}
.pr-mini.on{border-color:var(--accent,#0F172A);box-shadow:0 0 0 2px var(--accent-soft,#eef);}
.pr-rel{max-width:1100px;margin:56px auto 0;padding:0 20px 40px;}

/* ===========================================================================
   LA BARRA EN MOVIL
   ---------------------------------------------------------------------------
   El buscador ya no ocupa la barra -es la lupa, como en el mockup-, asi que
   en el movil caben la hamburguesa, el logo y los botones redondos.
   =========================================================================== */
@media(max-width:420px){
  /*  En pantallas muy estrechas el nombre cede sitio al logo, pero SOLO si hay
      logo: la regla escondia el nombre siempre, y una tienda sin imagen se
      quedaba con la cabecera sin nada que dijera de quien es.  */
  .nav-logo img + .nav-logo-text{display:none;}
}
/*  El buscador dentro del menu de movil, a tamanyo de dedo. */
.tn-movil .tl-busca{display:flex;margin-bottom:14px;flex:1 1 auto;}
.tn-movil .tl-busca input{padding:13px 14px;font-size:16px;}

    /* ====================================================================
       LOS RETOQUES POR PERFIL DE CADA COMPONENTE
       --------------------------------------------------------------------
       El mockup tiene 46 bloques `html[data-profile="..."]`: cuatro son los
       juegos de tokens y los otros 42 son esto, los retoques de componente.
       Sin ellos los cinco perfiles cambian de color y de letra pero colocan
       las cosas igual, que es lo que hacia que se parecieran tanto.

       >>> N O   S E   P U E D E N   P E G A R :   H A Y   Q U E
           T R A D U C I R L O S .

       Los vocabularios no se tocan en ningun punto. El mockup nombra `.sec-h`,
       `.trust`, `.tabs`, `.bdg`, `.band`, `.toast`, `.grid`...; la tienda tiene
       `.section-header`, `.features-strip`, `.category-tabs .tab`,
       `.badge-destacado`, `.cta-section`, `.cart-toast`, `.products-grid`.
       Son los mismos componentes con otros nombres, asi que lo que se copia es
       la DECISION, no la regla.

       Lo que va por `data-hero` / `data-card` / `data-header` esta en sus
       bloques; aqui queda lo que es del perfil y no de una maqueta.
       ==================================================================== */

    /*  Editorial y noche centran las cabeceras de seccion: las dos ponen el
        titulo en el eje de la pagina y no pegado a la izquierda con el enlace
        al otro lado.  */
    html[data-profile="editorial"] .section-header,
    html[data-profile="noche"] .section-header{flex-direction:column;align-items:center;text-align:center;}
    html[data-profile="mercado"] section{padding-block:44px;}
    html[data-profile="mercado"] .section-header{margin-bottom:16px;}

    /*  La tira de ventajas, sin caja: dos lineas y el contenido centrado. En
        esencial y vibrante es una barra con sus separadores; en editorial y
        noche es un renglon de texto entre dos filetes.  */
    html[data-profile="editorial"] .features-inner,
    html[data-profile="noche"] .features-inner{background:none;border:0;border-block:1px solid var(--line);border-radius:0;}
    html[data-profile="editorial"] .feature-item,
    html[data-profile="noche"] .feature-item{background:none;justify-content:center;}

    /*  Las pestanyas de categoria: en editorial y noche no son pastillas, son
        palabras subrayadas -versalitas, sin fondo y sin borde-.  */
    html[data-profile="editorial"] .tab,
    html[data-profile="noche"] .tab{background:none;border:0;box-shadow:none;border-radius:0;text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:500;padding:8px 4px;margin-inline:8px;}
    html[data-profile="editorial"] .tab.active,
    html[data-profile="noche"] .tab.active{color:var(--ink);background:none;box-shadow:inset 0 -1.5px 0 var(--ink);}

    /*  Y las etiquetas de la ficha, en versalitas finas en vez de en negrita.  */
    html[data-profile="editorial"] .badge-destacado,
    html[data-profile="noche"] .badge-destacado,
    html[data-profile="editorial"] .badge-cat,
    html[data-profile="noche"] .badge-cat{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:500;}

    /*  La llamada final: en noche no es un bloque de color, es una caja con un
        filete -sobre fondo oscuro un bloque de acento es un faro-.  */


    /*  El aviso de "anyadido al carrito" sigue la forma del perfil: sin esquina
        redondeada donde el perfil no las tiene.  */
    html[data-profile="editorial"] .cart-toast,
    html[data-profile="noche"] .cart-toast,
    html[data-profile="editorial"] .error-toast,
    html[data-profile="noche"] .error-toast{border-radius:0;}

    /*  Mercado aprieta la rejilla: su gracia es ver mucho de una vez.  */
    html[data-profile="mercado"] .products-grid{gap:12px;}

    /*  Y en esencial la etiqueta de seccion no lleva el color de marca: el
        perfil neutro no pinta de color lo que es una etiqueta.  */
    html[data-profile="esencial"] .section-label{color:var(--ink2);}


/* ===========================================================================
   EL CATALOGO DEL MOCKUP (`V.catalog`): «todos», una categoria y la busqueda
   ---------------------------------------------------------------------------
   `catalogo_lib.php`. Migas, cabecera de coleccion y dos columnas: los
   filtros a la izquierda -pegados al bajar- y a la derecha la barra, los
   filtros puestos y la rejilla. En el movil los filtros son un panel que sube
   desde abajo, como en el mockup.
   =========================================================================== */
.muted{color:var(--ink2);}
.tiny{font-size:12.5px;color:var(--ink2);}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.link{background:none;border:0;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:inherit;cursor:pointer;}
html[data-profile="esencial"] .link{color:var(--ink);}
.btn-sm{padding:9px 14px!important;font-size:calc(var(--bfs,15px) - 1.5px)!important;}

.crumbs{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--ink2);margin-bottom:18px;flex-wrap:wrap;}
.crumbs a{color:var(--ink2);text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs .ic{width:14px;height:14px;}

.cat-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.cat-h h1{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--dcase,none);letter-spacing:var(--dtrack,0);font-size:calc(clamp(32px,4vw,48px) * var(--ds,1));line-height:1.05;margin:0;color:var(--ink);}
.cat-h p{margin:8px 0 0;}

.shop{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start;}
.filters{position:sticky;top:96px;display:grid;gap:22px;}
html[data-profile="mercado"] .filters{background:var(--surface);border-radius:var(--r);padding:18px;box-shadow:inset 0 0 0 1px var(--line);}
.filters-h{display:flex;justify-content:space-between;align-items:center;}
.filters-h h3{font-family:var(--disp);font-weight:var(--dw);font-size:calc(20px * var(--ds,1));margin:0;color:var(--ink);}
.fgroup{display:grid;}
.fgroup h4,.fgroup h3,.fgroup h2{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;color:var(--ink2);}
.check{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14.5px;cursor:pointer;color:var(--ink);text-decoration:none;}
.check input{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0;}
.check .n{margin-left:auto;font-size:12.5px;color:var(--ink3);}
/*  La categoria es un ENLACE, no una casilla: se dibuja la casilla con un <i>
    para que la lista se lea igual que la de marcas.  */
.check i{width:18px;height:18px;flex:none;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--ink3);}
.check.on i{box-shadow:inset 0 0 0 5px var(--accent);}
.check.on{font-weight:600;}
.filters input[type=range]{width:100%;accent-color:var(--accent);}
.frange{display:flex;justify-content:space-between;margin-top:4px;}
.frange b{color:var(--ink);}
.fapl{display:none;width:100%;justify-content:center;}

.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.toolbar .count{font-size:14px;color:var(--ink2);margin-right:auto;}
.vt{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--rb);overflow:hidden;}
.vt button{border:0;background:none;padding:7px 10px;color:var(--ink3);display:grid;place-items:center;cursor:pointer;}
.vt button.on{background:var(--ink);color:var(--bg);}
.sel{appearance:none;-webkit-appearance:none;background:var(--surface) 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='%23888888' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;border:1.5px solid var(--line);border-radius:var(--rb);padding:9px 34px 9px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;}
.fbtn{display:none!important;}
.afil{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.afil a{display:inline-flex;align-items:center;gap:4px;border-radius:var(--rb);background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:13px;padding:5px 10px;text-decoration:none;}
html[data-profile="esencial"] .afil a{color:var(--ink);}
.empty{text-align:center;padding:60px 20px;border:1.5px dashed var(--line);border-radius:var(--r);}
.empty h3{font-family:var(--disp);font-weight:var(--dw);font-size:calc(22px * var(--ds,1));margin:0 0 8px;color:var(--ink);}
.empty p{margin:0 0 16px;}

/*  La rejilla del catalogo usa las mismas columnas que la portada (`--cols`),
    pero en el hueco que dejan los filtros caben tres.  */
.shop .tl-rej{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 18px;}
@media(min-width:1280px){.shop .tl-rej{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));}}

/*  LA VISTA EN LISTA (`.grid.list` del mockup): la foto pequeña a la
    izquierda, el boton de anyadir a la vista y no al pasar por encima.  */
.tl-rej.list{grid-template-columns:1fr!important;gap:14px;}
.tl-rej.list .product-card{flex-direction:row;align-items:center;gap:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:12px;border-radius:var(--r);}
.tl-rej.list .product-card-top{width:128px;flex:none;}
.tl-rej.list .product-badges{display:none;}
/*  En lista el boton va SIEMPRE abajo, con su texto, en todos los perfiles.  */
.tl-rej.list .product-card .quick{display:none;}
.tl-rej.list .product-card .act{display:block;position:static;margin-top:6px;}
.tl-rej.list .product-card .act .add-btn{width:auto;height:auto;min-height:38px;padding:8px 14px;font-size:14px;font-weight:600;}
.tl-rej.list .product-card .act .lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto;}
.tl-rej.list .product-footer{padding-right:0;}
.tl-rej.list .product-info{align-items:flex-start;text-align:left;}

/*  Paginacion: los numeros con los colores del perfil.  */
.pg-n,.pg-b{border-radius:var(--rb)!important;}
.pg-aqui{background:var(--ink)!important;color:var(--bg)!important;}

@media(max-width:880px){
  .shop{grid-template-columns:1fr;}
  .filters{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:620;background:var(--bg);border-radius:16px 16px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));max-height:82vh;overflow:auto;transform:translateY(105%);transition:transform .3s;box-shadow:0 -10px 40px rgba(0,0,0,.18);}
  .filters.on{transform:none;}
  .fbtn{display:inline-flex!important;}
  .fapl{display:inline-flex;}
  .shop .tl-rej{grid-template-columns:1fr 1fr;gap:20px 12px;}
  body.filtros-on::after{content:"";position:fixed;inset:0;z-index:610;background:rgba(0,0,0,.35);}
}
.filters-x{display:none;}
@media(max-width:880px){.filters-x{display:inline-grid;}}


/* ===========================================================================
   LA FICHA DEL MOCKUP (`.pdp`, `.gal`, `.pinfo`, `.deliv`, `details.acc`,
   `.rsum`). Antes vivia en un <style> de `producto.php` con otras medidas.
   =========================================================================== */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0;}
html[data-profile="esencial"] .eyebrow{color:var(--ink2);}
.eyebrow a{color:inherit;text-decoration:none;}
.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--rb);padding:13px 22px;font-family:var(--body);font-weight:var(--bw,600);font-size:var(--bfs,15px);text-transform:var(--bcase,none);letter-spacing:var(--btrack,0);background:var(--ink);color:var(--bg);cursor:pointer;text-decoration:none;white-space:nowrap;line-height:1.2;}
.btn-yellow:disabled,.btn-dark:disabled{opacity:.45;cursor:not-allowed;}
.inp{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--ri,var(--rb));padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);}
.inp:focus{outline:none;border-color:var(--accent);}
.badge-agotado{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--rb);background:var(--ink);color:var(--bg);letter-spacing:.02em;}
.rate{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink2);text-decoration:none;margin-top:10px;}
.rate:hover{color:var(--ink);}

.pr-wrap{max-width:1280px;margin:0 auto;padding:28px 24px 64px;}
.pr-migas{margin-bottom:18px;}
.pr-migas a{color:var(--ink2);text-decoration:none;}

.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:start;}
.gal{position:sticky;top:96px;display:grid;grid-template-columns:76px 1fr;gap:12px;}
.gal.sola{grid-template-columns:1fr;}
.thumbs{display:grid;gap:10px;align-content:start;}
.thumbs .pr-mini{border:0;padding:0;border-radius:calc(var(--pr,6px) * .6);overflow:hidden;aspect-ratio:var(--ratio,1/1);opacity:.65;background:none;cursor:pointer;}
.thumbs .pr-mini.on{opacity:1;outline:2px solid var(--ink);outline-offset:2px;}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block;}
.gmain{border-radius:var(--r);overflow:hidden;aspect-ratio:var(--ratio,1/1);position:relative;background:var(--soft);}
.gmain img{width:100%;height:100%;object-fit:cover;display:block;}
.gmain .product-badges{position:absolute;left:12px;top:12px;z-index:2;}

.pinfo{display:grid;gap:18px;min-width:0;}
.pinfo .pr-tit{font-family:var(--disp);font-weight:var(--dw);text-transform:var(--dcase,none);letter-spacing:var(--dtrack,0);font-size:calc(clamp(28px,3.4vw,42px) * var(--ds,1));line-height:1.08;margin:8px 0 0;color:var(--ink);}
.pprice{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.pprice b{font-size:28px;font-weight:700;font-family:var(--disp);color:var(--ink);}
.pprice b small{font-size:15px;font-weight:500;color:var(--ink2);font-family:var(--body);}
html[data-profile="noche"] .pprice b{color:var(--accent);font-weight:400;}
.pr-marca{margin:6px 0 0;}
.pr-marca b{color:var(--ink);}
.pr-frase{margin:0;font-size:15.5px;}

.pr-ejes{display:grid;gap:16px;}
.opt-l{font-size:14px;font-weight:600;margin:0 0 10px;color:var(--ink);}
.opt-l span span{font-weight:400;color:var(--ink2);}
.pills{display:flex;gap:8px;flex-wrap:wrap;}
.pills button{border:1.5px solid var(--line);background:var(--surface);border-radius:var(--rb);padding:10px 16px;font:inherit;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;}
.pills button.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);}
.pr-eje select{padding:11px 12px;border-radius:var(--rb);border:1.5px solid var(--line);font:inherit;font-size:15px;min-width:180px;background:var(--surface);color:var(--ink);}

.stock{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink);}
.stock i{width:9px;height:9px;border-radius:99px;background:#1f9a68;box-shadow:0 0 0 4px rgba(31,154,104,.15);flex:none;}
.stock.low{color:#b86e00;}
.stock.low i{background:#b86e00;box-shadow:0 0 0 4px rgba(184,110,0,.15);}
.stock.out{color:var(--ink2);}
.stock.out i{background:var(--ink3);box-shadow:0 0 0 4px var(--soft);}

.pr-compra{display:grid;gap:12px;}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--rb);height:52px;background:var(--surface);justify-self:start;}
.qty button{width:44px;height:100%;border:0;background:none;display:grid;place-items:center;color:var(--ink2);cursor:pointer;}
.qty span{min-width:30px;text-align:center;font-weight:700;color:var(--ink);}
.buyrow{display:flex;gap:10px;}
.buyrow > *{flex:1;height:52px;justify-content:center;}

.notify{background:var(--soft);border-radius:var(--r);padding:18px;display:grid;gap:8px;}
.pr-aviso-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.pr-aviso-f .inp{flex:1;min-width:180px;}

.deliv{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden;}
.deliv > div{display:flex;gap:12px;padding:14px 16px;align-items:flex-start;}
.deliv > div + div{border-top:1px solid var(--line);}
.deliv .ic{color:var(--accent);margin-top:1px;}
.deliv p{margin:0;}
.deliv b{font-size:14px;display:block;color:var(--ink);}
.deliv span{font-size:13.5px;color:var(--ink2);}

details.acc{border-top:1px solid var(--line);}
details.acc:last-of-type{border-bottom:1px solid var(--line);}
details.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 0;font-weight:600;cursor:pointer;color:var(--ink);}
details.acc summary::-webkit-details-marker{display:none;}
details.acc summary .ic{transition:transform .2s;}
details.acc[open] summary .ic{transform:rotate(180deg);}
details.acc .ab{padding-bottom:18px;color:var(--ink2);font-size:14.5px;display:grid;gap:8px;}
details.acc .ab p{margin:0;}
.pr-attrs{width:100%;border-collapse:collapse;font-size:14px;}
.pr-attrs th,.pr-attrs td{text-align:left;padding:8px 0;border-bottom:1px solid var(--line);}
.pr-attrs th{font-weight:600;width:40%;color:var(--ink);}

/*  Las opiniones, como el `.rsum` del mockup.  */
.pr-res,.pr-rel{max-width:1280px;margin:72px auto 0;padding:0 24px;}
.pr-rel{padding-bottom:40px;}
.rsum{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start;}
.rbig{font-family:var(--disp);font-size:58px;font-weight:var(--dw);line-height:1;color:var(--ink);margin-bottom:6px;}
.bars{display:grid;gap:6px;margin-top:14px;}
.bars div{display:grid;grid-template-columns:22px 1fr 24px;gap:8px;align-items:center;font-size:12.5px;color:var(--ink2);}
.bars i{height:7px;border-radius:99px;background:var(--soft);position:relative;overflow:hidden;}
.bars i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:#f0a800;border-radius:99px;}
html[data-profile="noche"] .bars i::after{background:var(--accent);}
.rlist{display:grid;gap:0;}
.pr-res-u{padding:16px 0;border-top:1px solid var(--line);}
.pr-res-u:first-child{border-top:0;padding-top:0;}
.pr-res-u-c{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink);}
.pr-res-ok{color:#1f9a68;font-weight:600;font-size:12px;}
.pr-res-f{color:var(--ink3);margin-left:auto;}
.pr-res-t{margin:8px 0 0;line-height:1.6;color:var(--ink);font-size:15px;}
.pr-res-r{margin:12px 0 0 16px;padding:10px 14px;border-left:3px solid var(--line);font-size:14px;}
.pr-res-r b{display:block;font-size:12px;color:var(--ink2);margin-bottom:4px;}
.pr-res-r p{margin:0;line-height:1.55;color:var(--ink);}
.pr-rel .tl-rej{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:30px 18px;}

@media(max-width:880px){
  .pdp{grid-template-columns:1fr;gap:24px;}
  .gal{position:static;grid-template-columns:1fr;}
  .thumbs{grid-template-columns:repeat(4,1fr);order:2;}
  .rsum{grid-template-columns:1fr;gap:20px;}
  .pr-rel .tl-rej{grid-template-columns:1fr 1fr;}
  .pr-wrap{padding:20px 20px 48px;}
  .pr-res,.pr-rel{padding:0 20px;margin-top:48px;}
}

/* ===========================================================================
   EL CAJON DEL CARRITO (`.scrim`, `.drawer`, `.freebar`, `.citem` del mockup)
   Lo monta `carrito.js`; aqui solo su aspecto.
   =========================================================================== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:700;opacity:0;pointer-events:none;transition:opacity .25s;}
.scrim.on{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--bg);z-index:701;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-10px 0 40px rgba(0,0,0,.12);}
.drawer.on{transform:none;}
.dh{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);}
.dh h3{font-family:var(--disp);font-weight:var(--dw);font-size:calc(22px * var(--ds,1));margin:0;color:var(--ink);}
.db{flex:1;overflow:auto;padding:18px 20px;display:grid;gap:16px;align-content:start;}
.df{padding:18px 20px;border-top:1px solid var(--line);display:grid;gap:12px;background:var(--surface);}
.freebar{background:var(--surface);border:1px solid var(--line);border-radius:var(--ri,var(--rb));padding:12px 14px;font-size:13.5px;display:grid;gap:8px;color:var(--ink);}
.freebar .tr{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;}
.freebar .tr i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .4s;}
.citem{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:start;}
.citem .th{width:76px;aspect-ratio:var(--ratio,1/1);border-radius:var(--pr,6px);overflow:hidden;background:var(--soft);}
.citem .th img{width:100%;height:100%;object-fit:cover;display:block;}
.citem b{font-size:14.5px;line-height:1.3;display:block;color:var(--ink);}
.citem small{display:block;color:var(--ink2);font-size:12.5px;margin:2px 0 8px;}
.citem .cfin{display:grid;justify-items:end;gap:10px;}
.citem .rm{border:0;background:none;color:var(--ink3);padding:4px;cursor:pointer;}
.citem .rm:hover{color:#c2362b;}
.qty.sm{height:36px;}
.qty.sm button{width:34px;}
.tot{display:grid;gap:6px;font-size:14.5px;color:var(--ink);}
.tot > div{display:flex;justify-content:space-between;}
.tot > div:first-child{font-weight:700;font-size:16px;}
.btn-block{width:100%;justify-content:center;height:54px;}
.df .link{justify-self:center;color:var(--ink2);}

/* ===========================================================================
   EL CHECKOUT DEL MOCKUP (`.co`, `.box`, `.rcard`, `.summary`, `.sline`).
   Antes vivia en un <style> de `checkout.php` con otras medidas.
   =========================================================================== */
.co-steps{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ink3);margin-bottom:22px;flex-wrap:wrap;}
.co-steps a{color:var(--ink3);text-decoration:none;}
.co-steps b{color:var(--ink);}
.co-steps .ic{width:14px;height:14px;}
.co{display:grid;grid-template-columns:1fr 410px;gap:40px;align-items:start;}
.co-form{display:grid;gap:18px;}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:grid;gap:16px;}
.box h2{font-family:var(--disp);font-weight:var(--dw);font-size:calc(22px * var(--ds,1));display:flex;align-items:center;gap:10px;margin:0;color:var(--ink);}
.box h2 .n{width:26px;height:26px;border-radius:99px;background:var(--ink);color:var(--bg);font-family:var(--body);font-size:13px;font-weight:700;display:grid;place-items:center;letter-spacing:0;}
.box p{margin:0;}
.fld{display:grid;gap:6px;}
.fld label{font-size:13.5px;font-weight:600;color:var(--ink);}
.fld .opt{font-weight:400;color:var(--ink3);}
.fld input,.fld select,.fld textarea{width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--ri,var(--rb));padding:12px 14px;font:inherit;font-size:15px;color:var(--ink);box-sizing:border-box;}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.radios{display:grid;gap:10px;}
.rcard{display:flex;gap:14px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--ri,var(--rb));padding:14px 16px;cursor:pointer;background:var(--surface);color:var(--ink);}
.rcard:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.rcard input{margin-top:3px;accent-color:var(--accent);width:18px;height:18px;flex:none;}
.rcard .rt{flex:1;}
.rcard b{display:block;font-size:15px;}
.rcard span{font-size:13.5px;color:var(--ink2);}
.rcard .rp{font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap;}
.rcard .ic{color:var(--ink2);margin-top:1px;}
.subbox{display:grid;gap:12px;padding:16px;border-radius:var(--ri,var(--rb));background:var(--soft);}
.subbox[hidden]{display:none;}
.summary{position:sticky;top:96px;background:var(--soft);border-radius:var(--r);padding:24px;display:grid;gap:16px;}
.summary h3{font-family:var(--disp);font-weight:var(--dw);font-size:calc(20px * var(--ds,1));margin:0;color:var(--ink);}
.slines{display:grid;gap:12px;}
.sline{display:flex;gap:12px;align-items:center;color:var(--ink);}
.sline .th{position:relative;width:60px;height:60px;border-radius:var(--pr,6px);flex:none;box-shadow:0 0 0 1px var(--line);background:var(--surface);}
.sline .th img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--pr,6px);}
.sline .th em{position:absolute;right:-6px;top:-6px;background:var(--ink);color:var(--bg);font-style:normal;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:99px;display:grid;place-items:center;padding:0 5px;}
.sline .sn{flex:1;font-size:14px;font-weight:600;line-height:1.3;min-width:0;}
.sline .sn small{display:block;font-weight:400;color:var(--ink2);font-size:12.5px;}
.summary .tot .big{font-size:21px;font-weight:700;font-family:var(--disp);padding-top:10px;border-top:1px solid var(--line);}
.summary .tot > div:first-child{font-weight:400;font-size:14.5px;}
.ch-acepta{font-size:13px;line-height:1.5;align-items:flex-start;}
.ch-acepta a{color:var(--ink);}
.secure{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:var(--ink3);margin:0;text-align:center;}
.ch-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.ch-error{padding:13px 16px;border-radius:var(--r);background:#fee2e2;color:#991b1b;margin-bottom:20px;font-size:14px;}
@media(max-width:900px){
  .co{grid-template-columns:1fr;}
  .summary{position:static;order:-1;}
  .row2{grid-template-columns:1fr;}
}

/* ===========================================================================
   LOS FAVORITOS (`.fav` del mockup): el corazon blanco sobre la foto.
   =========================================================================== */
.product-card-top{position:relative;}
.fav{position:absolute;right:10px;top:10px;z-index:3;width:38px;height:38px;border-radius:99px;border:0;background:var(--surface);display:grid;place-items:center;color:var(--ink2);box-shadow:0 2px 8px rgba(0,0,0,.08);cursor:pointer;padding:0;}
.fav:hover{color:var(--ink);}
.fav.on{color:#c2362b;}
.fav.on .ic{fill:currentColor;}
.pr-acciones{display:flex;gap:8px;flex-wrap:wrap;}
[data-fav].on .ic{fill:currentColor;}
.tl-rej.list .fav{width:32px;height:32px;right:6px;top:6px;}

/*  La casilla del boletin (checkout y cuenta): la frase pequenya debajo.  */
.boletin-ok{align-items:flex-start;font-size:14px;}
.boletin-ok small{display:block;margin-top:2px;}

/* ===========================================================================
   CERRAR ESENCIAL (03-10-2026): gracias, seguimiento, cuenta, la barra de
   abajo del movil y el aviso de cookies. Piezas del mockup con su nombre
   (`.narrow`, `.okhead`, `.timeline .tl`, `.pill`, `.acct`, `.anav`, `.ord`,
   `.bnav`), y SOLO con los tokens del perfil: estas paginas tenian rosa, verde
   y rojo en duro -#fee2e2, #dcfce7, #b91c1c- que en «Noche» eran cajas claras
   sobre negro.
   =========================================================================== */

/*  Los dos botones viejos de las paginas interiores, ahora con los mismos
    tokens que los del mockup (`btn-yellow` / `btn-white-outline`): seguian
    con su propia letra y su propio radio, y en «Noche» el secundario
    heredaba el color y no se veia.  */
.tl-btn-p,.tl-btn-s{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--body);font-weight:var(--bw,700);font-size:var(--bfs,15px);
    letter-spacing:var(--btrack,0);text-transform:var(--bcase,none);line-height:1.2;
    padding:13px 24px;border-radius:var(--rb,10px);text-decoration:none;cursor:pointer;}
.tl-btn-p{background:var(--accent);color:var(--accent-ink);border:0;}
.tl-btn-p:hover{background:var(--accent-h);}
.tl-btn-s{background:none;color:var(--ink);border:0;box-shadow:inset 0 0 0 1.5px var(--line);}
.tl-btn-s:hover{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent);}

.narrow{max-width:780px;margin:0 auto;}
.bloque{display:grid;gap:16px;}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}

/*  Lo que falta por hacer -la transferencia, el Bizum-: en el tono de aviso
    del perfil, no en un amarillo fijo.  */
.box.aviso{border-color:var(--warn);background:var(--warn-soft);}
.box.aviso h2{font-size:18px;}
.box.suave{background:var(--soft);border-color:transparent;}
.box h2 .ic{width:22px;height:22px;}

/*  LA CABECERA DE GRACIAS: la marca de hecho y el titular.  */
.okhead{display:flex;gap:16px;align-items:center;margin-bottom:24px;}
.okmark{width:56px;height:56px;border-radius:99px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex:none;}
.okmark .ic{width:28px;height:28px;stroke-width:2.4;}
.okhead h1{font-family:var(--disp);font-weight:var(--dw);font-size:calc(clamp(28px,3.4vw,40px) * var(--ds,1));margin:4px 0 0;color:var(--ink);line-height:1.15;}

/*  LA LINEA DE TIEMPO del pedido, en vertical como el mockup: lo hecho en el
    color de "hecho", el paso de ahora en el acento y lo que falta en gris.  */
.timeline{display:grid;margin-top:6px;}
.timeline .tl{display:grid;grid-template-columns:28px 1fr;gap:14px;position:relative;padding-bottom:22px;}
.timeline .tl:last-child{padding-bottom:0;}
.timeline .tl::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--line);}
.timeline .tl:last-child::before{display:none;}
.timeline .tl.done::before{background:var(--ok);}
.timeline .tl i{width:28px;height:28px;border-radius:99px;display:grid;place-items:center;background:var(--soft);color:var(--ink3);position:relative;z-index:1;font-style:normal;font-size:12px;font-weight:700;}
.timeline .tl i .ic{width:15px;height:15px;stroke-width:2.6;}
.timeline .tl.done i{background:var(--ok);color:#fff;}
.timeline .tl.now i{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 5px var(--accent-soft);}
.timeline .tl b{display:block;font-size:15px;color:var(--ink);}
.timeline .tl span{font-size:13.5px;color:var(--ink2);}

.pill{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--ok-soft);color:var(--ok);white-space:nowrap;vertical-align:middle;}
.pill.w{background:var(--warn-soft);color:var(--warn);}
.pill.ko{background:var(--soft);color:var(--ink3);text-decoration:line-through;}

/*  El codigo del pedido: entero, monoespaciado y con su boton de copiar.  */
.codigo{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;padding:12px;border-radius:var(--ri,8px);background:var(--soft);color:var(--ink);}

/*  Las lineas de un pedido y sus totales.  */
.plineas{display:grid;}
.pline{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);}
.pline small{color:var(--ink3);}
.pline .valorar{display:block;font-size:13px;color:var(--ink2);margin-top:4px;}
.ptot{display:grid;gap:6px;max-width:380px;margin-left:auto;width:100%;font-size:14px;color:var(--ink2);}
.ptot div{display:flex;justify-content:space-between;gap:16px;}
.ptot .g{font-size:19px;font-weight:800;color:var(--ink);padding-top:10px;border-top:1px solid var(--line);}

.msg-err{padding:13px 15px;border-radius:var(--ri,8px);background:var(--soft);border-left:3px solid var(--sale);color:var(--ink);font-size:14px;}
.msg-ok{padding:13px 15px;border-radius:var(--ri,8px);background:var(--soft);border-left:3px solid var(--accent);color:var(--ink);font-size:14px;margin-bottom:14px;}

/*  LA CUENTA: menu a la izquierda y lo de cada apartado a la derecha.  */
.acct{display:grid;grid-template-columns:230px 1fr;gap:34px;align-items:start;}
.anav{display:grid;gap:4px;position:sticky;top:96px;}
.anav .quien{padding:0 14px 10px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;}
.anav .quien b{font-size:17px;display:block;}
.anav a,.anav button{border:0;background:none;text-align:left;padding:10px 14px;border-radius:var(--ri,8px);font:inherit;font-weight:600;color:var(--ink2);display:flex;gap:10px;align-items:center;text-decoration:none;cursor:pointer;width:100%;}
.anav a.on,.anav a:hover,.anav button:hover{background:var(--soft);color:var(--ink);}
.anav .ic{width:18px;height:18px;}
.acct h2{font-family:var(--disp);font-weight:var(--dw);font-size:calc(26px * var(--ds,1));margin:0 0 14px;color:var(--ink);}
.ord{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);}
.ord:first-of-type{padding-top:0;}
.ord .num{font-variant-numeric:tabular-nums;color:var(--ink);}
.ord .ths{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.ord .ths span{width:46px;height:46px;border-radius:var(--pr,6px);overflow:hidden;background:var(--soft);display:grid;place-items:center;font-size:22px;}
.ord .ths img{width:100%;height:100%;object-fit:cover;display:block;}
.ord .oa{display:grid;gap:8px;}
.datos{display:grid;}
.datos div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);}
.datos div span{color:var(--ink2);}

/*  ENTRAR Y CREAR CUENTA: una caja centrada, como el mockup.  */
.acceso{max-width:480px;margin:0 auto;}
.acceso .box{padding:32px;}
.acceso h1{font-family:var(--disp);font-weight:var(--dw);font-size:calc(32px * var(--ds,1));margin:0;color:var(--ink);}
.acceso form{display:grid;gap:14px;}
.acceso .pie{text-align:center;}

/*  EL AVISO DE COOKIES, en todas las paginas y con la forma del mockup: una
    tarjeta abajo a la izquierda, no una franja a todo lo ancho.  */
.ck-aviso{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;max-width:400px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow,0 12px 40px rgba(0,0,0,.18));padding:18px;display:grid;gap:12px;font-size:13.5px;line-height:1.5;}
.ck-aviso[hidden]{display:none;}
.ck-aviso b{font-size:15px;}
.ck-aviso p{margin:0;color:var(--ink2);}
.ck-aviso a{color:var(--ink);}
/*  Rechazar y aceptar, del MISMO tamanyo: un «Aceptar» grande con un
    «Rechazar» pequenyo es justo el consentimiento que no vale.  */
.ck-aviso .ca{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ck-aviso .ca button{padding:10px 14px;font-size:14px;justify-content:center;}

/*  LA BARRA DE ABAJO DEL MOVIL: inicio, buscar, favoritos, carrito y cuenta,
    al alcance del pulgar. En escritorio no existe.  */
.bnav{display:none;}

@media (max-width:900px){
  .acct{grid-template-columns:1fr;gap:20px;}
  .anav{position:static;display:flex;overflow-x:auto;gap:4px;}
  .anav .quien{display:none;}
  .anav a,.anav button{white-space:nowrap;width:auto;}
}
@media (max-width:640px){
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);}
  .bnav a,.bnav button{position:relative;border:0;background:none;padding:9px 0 8px;display:grid;justify-items:center;gap:2px;font:inherit;font-size:11px;font-weight:600;color:var(--ink3);text-decoration:none;cursor:pointer;}
  .bnav .ic{width:22px;height:22px;}
  .bnav .on{color:var(--accent);}
  html[data-profile="esencial"] .bnav .on{color:var(--ink);}
  .bnav .cart-badge{top:3px;right:calc(50% - 22px);}
  body{padding-bottom:64px;}
  /*  La cuenta y los favoritos ya estan en la barra de abajo: en la cabecera
      sobran, y con ellos el carrito se salia por la derecha. Como el mockup
      (`.hacts .hide-m`).  */
  nav[data-header] .nav-cuenta,nav[data-header] .nav-favs{display:none;}
  .ck-aviso{left:12px;right:12px;max-width:none;bottom:calc(76px + env(safe-area-inset-bottom,0px));}
  .ord{grid-template-columns:1fr;}
  .ord .oa{display:flex;flex-wrap:wrap;}
  .okhead{align-items:flex-start;}
  .okmark{width:46px;height:46px;}
  .acceso .box{padding:22px;}
}

/*  `hidden` es `hidden` aunque la clase diga `display:flex`: el boton
    «Anadir todo al carrito» de favoritos salia siempre, con o sin nada que
    anadir.  */
[hidden]{display:none!important;}

/*  LA BARRA DE COMPRA FIJA de la ficha (`.stickybuy` del mockup): sale cuando
    los botones de compra se van por arriba.  */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:44;background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--shadow);padding-bottom:env(safe-area-inset-bottom,0px);}
.stickybuy .sb{display:flex;align-items:center;gap:14px;max-width:1280px;margin:0 auto;padding:10px 24px;box-sizing:border-box;}
.stickybuy .th{width:48px;height:48px;border-radius:var(--pr,6px);overflow:hidden;flex:none;background:var(--soft);}
.stickybuy .th img{width:100%;height:100%;object-fit:cover;display:block;}
.stickybuy .tx{flex:1;min-width:0;}
.stickybuy .tx b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:var(--ink);}
.stickybuy .tx span{font-size:13.5px;color:var(--ink2);}
@media (max-width:640px){
  /*  Los dos botones de compra, uno debajo del otro: lado a lado, «Anadir al
      carrito» se partia en dos renglones.  */
  .buyrow{flex-direction:column;}
  .stickybuy{bottom:64px;}
  .stickybuy .sb{padding:10px 16px;}
}

/*  EL BOTON DE ANADIR DE LA TARJETA EN EL MOVIL, como el `.quick` del mockup:
    un boton redondo con el «+» sobre la esquina de la foto. Debajo de la foto
    y a todo el ancho eran doce barras negras en una pantalla de catalogo, y
    tapaban lo que importa, que es el producto.  */
.product-card .quick .add-btn .ic{width:16px;height:16px;}
@media (max-width:640px){
  .product-card .quick{position:absolute;opacity:1;translate:0 0;left:8px;right:auto;bottom:8px;margin:0;}
  .product-card .quick .add-btn{width:38px;height:38px;padding:0;border-radius:99px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
  .product-card .quick .add-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}

/*  EL CHECKOUT EN EL MOVIL: el resumen arriba, el formulario en medio y la
    casilla legal con «Pedir y pagar» al final, como el mockup. El resumen va en
    dos trozos (`.sum-top` y `.sum-fin`, ver checkout.php); en el escritorio
    siguen juntos en la columna de la derecha.  */
.summary .sum-top,.summary .sum-fin{display:grid;gap:16px;}
@media (max-width:900px){
  #ch-form.co{gap:24px;}
  #ch-form .summary{display:contents;}
  #ch-form .sum-top{order:-1;background:var(--soft);border-radius:var(--r);padding:20px;}
  #ch-form .co-form{order:0;}
  #ch-form .sum-fin{order:1;}
}