/* =========================================================================
   Bajo Cero — Tienda de Congelados — Editor V4
   -------------------------------------------------------------------------
   El motor esconde con el atributo `hidden` todo lo que depende de un dato
   que el comercio puede no tener cargado (teléfono, WhatsApp, logo, envío
   gratis, categorías, contadores). Cualquier `display` explícito en una
   regla posterior le gana a `hidden` y el bloque vacío queda a la vista:
   esta regla lo impide de una vez y por eso abre la hoja.
   ========================================================================= */
[hidden] { display: none !important; }

/* =========================================================================
   Plantilla Ecommerce — Variante "bajo cero" — Editor V4
   -------------------------------------------------------------------------
   Un único archivo de estilos para toda la tienda. Las secciones son HTML
   puro (requisito del editor visual), así que TODO el estilo vive acá y todo
   el comportamiento en assets/js/main.js (el motor, que no se toca).

   Identidad: 70 % blanco y celeste lavanda (frescura y luminosidad),
   20 % violeta principal (titulares, destacados, hero), 10 % violeta
   oscuro (textos y contraste). `--marca` es el acento y lo sobreescribe
   el motor con el `color_principal` del comercio.
   ========================================================================= */

:root {
    /* Neutros fríos: blanco + celeste lavanda */
    --papel: #ffffff;
    --hueso: #f5f6fc;
    --arena: #e9ecf8;
    --linea: #e3e6f3;
    --linea-fuerte: #ccd2e9;
    --tinta: #2a1f42;      /* violeta oscuro: textos */
    --tinta-2: #4d4468;
    --gris: #6e6689;
    --oscuro: #23123f;     /* violeta profundo: pie y paneles */

    /* Marca (la sobreescribe el motor con datos_basicos.color_principal) */
    --marca: #50287c;
    --marca-texto: #ffffff;
    --marca-suave: color-mix(in srgb, var(--marca) 9%, var(--papel));
    --marca-borde: color-mix(in srgb, var(--marca) 28%, var(--linea));
    --marca-oscuro: color-mix(in srgb, var(--marca) 78%, var(--oscuro));
    --marca-claro: color-mix(in srgb, var(--marca) 42%, #ffffff);
    --celeste: #b9c8f0;    /* celeste lavanda: destacados sobre violeta */
    --violeta-profundo: color-mix(in srgb, var(--marca) 55%, #1b0836);
    --violeta-neblina: color-mix(in srgb, var(--marca) 42%, #cfc0ea);

    /* Estados */
    --exito: #1e7a4f;
    --exito-suave: #e8f4ee;
    --peligro: #b3261e;
    --peligro-suave: #fbeae9;

    /* Tipografía — sólo fuentes del sistema */
    --texto: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Métrica */
    --lateral: clamp(1.25rem, 5vw, 5rem);
    --bloque: clamp(4rem, 9vw, 8rem);
    --r: 12px;
    --r-lg: 20px;
    --r-hero: 28px;
    --sombra: 0 1px 2px rgba(42, 31, 66, .05), 0 14px 34px -18px rgba(42, 31, 66, .22);
    --sombra-alta: 0 2px 6px rgba(42, 31, 66, .06), 0 30px 66px -30px rgba(42, 31, 66, .34);
    --cabecera: 168px;
    --transicion: .25s cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================== Cimientos */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Enlace de salto del template: invisible hasta recibir foco de teclado */
.saltar-contenido {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 200;
    padding: .7rem 1.3rem;
    border-radius: 0 0 var(--r) 0;
    background: var(--marca);
    color: var(--marca-texto);
    font-weight: 800;
}
.saltar-contenido:focus { left: 0; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, video { max-width: 100%; }
img { display: block; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 3px;
    border-radius: 2px;
}

/* El contenedor que envuelve las secciones lo pinta el runtime del editor */
main { display: block; }

::selection { background: color-mix(in srgb, var(--marca) 22%, var(--papel)); }

/* =========================================================== Tipografía */

.display {
    margin: 0;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}
.display em { font-style: normal; color: var(--marca); }

.display--lg { font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; }
.display--xl { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: .98; letter-spacing: -.03em; }

.overline {
    display: block;
    margin: 0 0 .9rem;
    color: var(--marca);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.4;
}

.enlace-flecha {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: none;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--marca);
    border-bottom: 1px solid transparent;
    padding-bottom: .2rem;
    transition: color var(--transicion), border-color var(--transicion), gap var(--transicion);
}
.enlace-flecha:hover { color: var(--marca-oscuro); border-color: currentColor; gap: .85rem; }

/* ================================================================ Botones */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .95rem 1.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: background var(--transicion), color var(--transicion),
                border-color var(--transicion), transform var(--transicion);
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--marca { background: var(--marca); color: var(--marca-texto); }
.boton--marca:hover { background: var(--marca-oscuro); }

/* Acción principal sobre paneles violetas (hero, llamadas) */
.boton--claro { background: var(--papel); color: var(--marca); }
.boton--claro:hover { background: var(--arena); }

.boton--fantasma {
    border-color: var(--linea-fuerte);
    background: var(--papel);
}
.boton--fantasma:hover { border-color: var(--tinta); }

.boton--texto { color: var(--gris); padding-inline: 1rem; }
.boton--texto:hover { color: var(--tinta); }

.boton--sm { padding: .6rem 1.15rem; font-size: .78rem; }
.boton--bloque { width: 100%; }

.boton:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ============================================================ Encabezado */

.cabecera { position: sticky; top: 0; z-index: 50; background: var(--papel); }

/* Franja superior violeta oscuro: lema + envío gratis + canales */
.cabecera__franja {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .5rem var(--lateral);
    background: var(--oscuro);
    font-size: .76rem;
    color: #cfc6e6;
}

.cabecera__lema { margin: 0; font-weight: 600; color: #ddd4f0; }
.cabecera__aviso { margin: 0; font-weight: 700; color: #fff; }
.cabecera__aviso b { color: var(--celeste); font-weight: 800; }

.cabecera__contacto {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: none;
}
.cabecera__contacto a { font-weight: 700; color: #fff; transition: color var(--transicion); }
.cabecera__contacto a:hover { color: var(--celeste); }

.cabecera__barra {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2.5vw, 2rem);
    padding: .7rem var(--lateral);
    border-bottom: 1px solid var(--linea);
    transition: box-shadow var(--transicion);
}
.cabecera.esta-fija .cabecera__barra { box-shadow: var(--sombra); }

.marca { display: inline-flex; align-items: center; gap: .75rem; flex: none; }

/* Insignia circular: el logo es una medalla, se recorta al propio círculo */
.marca__insignia {
    position: relative;
    display: block;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: #2b1a72;
    box-shadow: 0 0 0 1px var(--linea), 0 6px 14px -8px rgba(42, 31, 66, .4);
}
.marca__insignia img,
.marca__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 164%;
    height: auto;
    max-width: none;
}
.marca__texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca__nombre {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tinta);
}
.marca__bajada {
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gris);
}

/* Buscador tipo píldora con botón violeta adentro */
.cabecera__busqueda {
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 540px;
    margin-inline: auto;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--hueso);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.cabecera__busqueda:focus-within {
    border-color: var(--marca);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 14%, transparent);
    background: var(--papel);
}

.cabecera__busqueda-entrada {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: .72rem 1.25rem;
    background: none;
    outline: none;
    font-size: .9rem;
}
.cabecera__busqueda-entrada::placeholder { color: var(--gris); }

.cabecera__busqueda-boton {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .28rem;
    padding: .55rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--marca);
    color: var(--marca-texto);
    font-size: .84rem;
    font-weight: 800;
    transition: background var(--transicion);
}
.cabecera__busqueda-boton:hover { background: var(--marca-oscuro); }

/* Cuenta y carrito: ícono + etiqueta chica/negra, como la referencia */
.cabecera__acciones {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: none;
    margin-left: auto;
}

.cabecera__cuenta,
.cabecera__carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex: none;
    padding: .5rem .9rem;
    border-radius: 999px;
    color: var(--tinta);
    transition: background var(--transicion);
}
.cabecera__cuenta:hover,
.cabecera__carrito:hover { background: var(--hueso); }

.cabecera__etq { display: grid; line-height: 1.15; text-align: left; }
.cabecera__etq small { font-size: .68rem; font-weight: 600; color: var(--gris); }
.cabecera__etq b { font-size: .86rem; font-weight: 800; color: var(--tinta); }

.cabecera__carrito-badge {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 99px;
    background: var(--marca);
    color: var(--marca-texto);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1;
}

/* Fila de navegación: ítems del menú como píldoras */
.navegacion { background: var(--papel); }

.navegacion__lista {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    margin: 0;
    padding: .55rem var(--lateral);
    list-style: none;
    font-size: .9rem;
    font-weight: 700;
}
.navegacion__lista > li > a,
[data-sed-menu] > li > a {
    display: inline-block;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    color: var(--tinta-2);
    transition: background var(--transicion), color var(--transicion);
}
.navegacion__lista > li > a:hover,
[data-sed-menu] > li > a:hover { background: var(--hueso); color: var(--marca); }
.navegacion__lista > li > a[aria-current="page"],
[data-sed-menu] > li > a[aria-current="page"] { background: var(--marca); color: var(--marca-texto); }

/* Botón hamburguesa (pastilla oscura, sólo móvil) */
.navegacion__boton {
    display: none;
    align-items: center;
    gap: .55rem;
    height: 44px;
    padding: 0 1.15rem;
    border: 0;
    border-radius: 999px;
    background: var(--oscuro);
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
}
.navegacion__boton-icono {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 18px;
}
.navegacion__boton-icono span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--transicion), opacity var(--transicion);
}
.cabecera:has(.navegacion[data-abierto]) .navegacion__boton-icono span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cabecera:has(.navegacion[data-abierto]) .navegacion__boton-icono span:nth-child(2) { opacity: 0; }
.cabecera:has(.navegacion[data-abierto]) .navegacion__boton-icono span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ================================================================== Pie */

.pie { background: var(--oscuro); color: #cfc6e6; }

.pie__grilla {
    display: grid;
    grid-template-columns: 1.5fr .8fr .8fr 1.1fr;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(3rem, 6vw, 4.5rem) var(--lateral);
}

.pie .marca__nombre { color: #fff; }
.pie .marca__bajada { color: #a79bc4; }
.pie .marca__insignia { box-shadow: 0 0 0 1px rgba(207, 198, 230, .28); }

.pie__nombre {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
}
.pie__marca p { margin: .8rem 0 1.4rem; max-width: 36ch; font-size: .92rem; }

.pie__redes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    font-weight: 700;
}
.pie__redes a, .pie__contacto a { color: #fff; transition: color var(--transicion); }
.pie__redes a:hover, .pie__contacto a:hover { color: var(--celeste); }

.pie__titulo {
    margin: 0 0 1rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pie__columna ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .55rem;
    font-size: .9rem;
}
.pie__columna ul[hidden] { display: none; }

.pie__contacto li { display: block; }
.pie__contacto li a { font-weight: 600; }

.pie__legal {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem var(--lateral);
    border-top: 1px solid rgba(207, 198, 230, .16);
    font-size: .78rem;
    color: #a79bc4;
}

/* ============================================================== Portada */

.portada {
    padding: clamp(1.25rem, 3vw, 2.5rem) var(--lateral) clamp(2.5rem, 6vw, 4.5rem);
    background: var(--papel);
}

/* Panel violeta gigante y redondeado: la zona de máximo impacto */
.portada__panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    max-width: 1280px;
    margin-inline: auto;
    padding: clamp(2.25rem, 5.5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem);
    border-radius: var(--r-hero);
    background:
        radial-gradient(52% 70% at 84% 16%, rgba(185, 200, 240, .16) 0%, transparent 62%),
        radial-gradient(70% 90% at 12% 96%, color-mix(in srgb, var(--marca) 60%, transparent) 0%, transparent 60%),
        linear-gradient(118deg, var(--violeta-profundo) 0%, var(--marca) 52%, var(--violeta-neblina) 130%);
    color: #fff;
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}

.portada__contenido { max-width: 640px; }

/* Sello tipo píldora sobre violeta (kicker) */
.portada__sello {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.4rem;
    padding: .45rem 1rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #efeafd;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.portada__titulo { color: #fff; }
.portada__titulo .resalte { color: var(--celeste); }

.portada__bajada {
    margin: 1.4rem 0 0;
    max-width: 52ch;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #d9d0ef;
}

.portada__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;
    margin: 1.1rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .84rem;
    font-weight: 700;
    color: #e6def7;
}
.portada__meta li { display: inline-flex; align-items: center; gap: .6rem; }
.portada__meta li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--celeste);
}
.portada__meta li:first-child::before { display: none; }

.portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem;
}

/* Cifras reales del catálogo (data-conteo) */
.portada__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 4vw, 3rem);
    margin-top: clamp(1.8rem, 4vw, 2.75rem);
    padding-top: clamp(1.4rem, 3vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.portada__cifras > div { display: flex; align-items: baseline; gap: .5rem; }
.portada__cifras b {
    font-size: clamp(1.5rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.portada__cifras span { font-size: .84rem; color: #c9bde4; font-weight: 600; }

/* Columna derecha: medalla de la marca + copos de nieve */
.portada__marca {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
}
.insignia {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background: #2b1a72;
    box-shadow:
        0 30px 60px -22px rgba(10, 4, 24, .65),
        0 0 0 8px rgba(255, 255, 255, .10),
        0 0 0 20px rgba(255, 255, 255, .05);
}
.insignia img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 164%;
    height: auto;
    max-width: none;
}
.insignia--xl { width: clamp(210px, 24vw, 320px); aspect-ratio: 1; }

.copo {
    position: absolute;
    color: rgba(185, 200, 240, .55);
    animation: copo-flota 7s ease-in-out infinite;
}
.copo--1 { top: 6%; left: 10%; width: 34px; }
.copo--2 { bottom: 10%; left: 2%; width: 22px; animation-delay: 1.4s; }
.copo--3 { top: 14%; right: 4%; width: 26px; animation-delay: .7s; }
.copo--4 { bottom: 4%; right: 16%; width: 16px; animation-delay: 2.1s; }
@keyframes copo-flota {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(12px) rotate(12deg); }
}

/* =============================================================== Campos */

.campo { display: grid; gap: .4rem; min-width: 0; }

.campo__etiqueta {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
}

.campo__control {
    width: 100%;
    padding: .8rem 1rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r);
    background: var(--papel);
    font-size: .92rem;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo__control:hover { border-color: var(--gris); }
.campo__control:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 16%, transparent);
}

select.campo__control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%), linear-gradient(135deg, var(--gris) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem; }

textarea.campo__control { resize: vertical; min-height: 90px; }

/* ============================================================= Buscador */

/* Tarjeta blanca sobre el panel violeta del hero */
.buscador {
    max-width: 640px;
    margin-top: clamp(1.6rem, 3.5vw, 2.25rem);
    padding: .9rem;
    border: 0;
    border-radius: 24px;
    background: var(--papel);
    box-shadow: var(--sombra-alta);
    color: var(--tinta);
}

.buscador__campos {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: .75rem;
    margin-bottom: .75rem;
}

.buscador__boton { border-radius: 999px; }

/* ============================================================= Secciones */

.seccion, .pagina {
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--lateral);
}

.seccion__encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.pagina__encabezado { max-width: 720px; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.pagina__bajada { margin: 1rem 0 0; font-size: 1.05rem; color: var(--tinta-2); max-width: 58ch; }

/* ========================================================== Categorías */

.categorias {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.categoria-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.3rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: 99px;
    background: var(--papel);
    font-size: .9rem;
    font-weight: 700;
    transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}
.categoria-chip:hover {
    border-color: var(--marca);
    background: var(--marca-suave);
    transform: translateY(-2px);
}
.categoria-chip__count {
    padding: .1rem .55rem;
    border-radius: 99px;
    background: var(--arena);
    color: var(--tinta-2);
    font-size: .72rem;
    font-weight: 800;
}
.categoria-chip:hover .categoria-chip__count { background: color-mix(in srgb, var(--marca) 14%, var(--papel)); color: var(--marca); }

/* ============================================================ Productos */

.riel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

.grilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

.tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--papel);
    overflow: hidden;
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta:hover {
    border-color: var(--linea-fuerte);
    box-shadow: var(--sombra);
    transform: translateY(-3px);
}

.tarjeta__enlace { display: flex; flex-direction: column; flex: 1; }
.tarjeta__enlace::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.tarjeta__media {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(90% 70% at 80% 12%, color-mix(in srgb, var(--marca) 12%, transparent) 0%, transparent 55%),
        linear-gradient(160deg, #f3f1fb 0%, var(--arena) 100%);
    overflow: hidden;
}
.tarjeta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.tarjeta:hover .tarjeta__media img { transform: scale(1.04); }

.tarjeta__sinfoto {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--gris);
    font-size: .82rem;
    font-weight: 600;
}

.tarjeta__media .etiquetas {
    position: absolute;
    top: .7rem;
    left: .7rem;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.etiquetas { display: flex; gap: .4rem; flex-wrap: wrap; }

.etiqueta {
    display: inline-block;
    padding: .28rem .65rem;
    border-radius: 99px;
    background: var(--papel);
    border: 1px solid var(--linea);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.3;
    color: var(--tinta-2);
}
.etiqueta--marca {
    background: var(--marca);
    border-color: var(--marca);
    color: var(--marca-texto);
}
.etiqueta--tenue { background: var(--hueso); border-color: var(--linea); }

.tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: 1rem 1.1rem .9rem;
    flex: 1;
}

.tarjeta__categoria {
    margin: 0;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--marca);
}

.tarjeta__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--tinta);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tarjeta__marca { margin: 0; font-size: .8rem; color: var(--gris); font-weight: 600; }

.tarjeta__precio {
    margin: .45rem 0 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--marca);
    font-variant-numeric: tabular-nums;
}
.tarjeta__precio--consultar { color: var(--gris); font-weight: 700; font-size: 1rem; }

.tarjeta__pie {
    position: relative;
    z-index: 2;
    padding: 0 1.1rem 1.1rem;
    display: flex;
    gap: .5rem;
}

.tarjeta__agotado {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1rem;
    border-radius: var(--r);
    background: var(--arena);
    color: var(--gris);
    font-size: .78rem;
    font-weight: 800;
}

.tarjeta__pie .boton { flex: 1; }

/* Esqueletos de carga */
.esqueleto { pointer-events: none; }
.esqueleto__bloque {
    position: relative;
    overflow: hidden;
    background: var(--arena);
}
.esqueleto__bloque::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--papel) 60%, transparent), transparent);
    animation: esqueleto-brillo 1.4s infinite;
}
.esqueleto__linea { height: 14px; border-radius: 4px; margin-top: .6rem; }
.esqueleto__linea--corta { width: 55%; }
@keyframes esqueleto-brillo { to { transform: translateX(100%); } }

/* Avisos de estado (grilla vacía, errores) */
.aviso {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--r-lg);
    background: var(--hueso);
    text-align: center;
}
.aviso__titulo { margin: 0; font-size: 1.15rem; font-weight: 800; }
.aviso p { margin: 0; color: var(--gris); max-width: 46ch; }
.aviso .boton { margin-top: 1rem; }

/* Toast de confirmación */
.toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 90;
    transform: translateX(-50%);
    padding: .85rem 1.4rem;
    border-radius: 99px;
    background: var(--tinta);
    color: #fff;
    font-size: .86rem;
    font-weight: 600;
    box-shadow: var(--sombra-alta);
    animation: toast-entra .3s cubic-bezier(.22, .61, .36, 1);
    max-width: min(92vw, 480px);
    text-align: center;
}
@keyframes toast-entra {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* =============================================================== Franja */

/* Banda celeste lavanda con tarjetas blancas */
.franja {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--linea);
    border-block: 1px solid var(--linea);
}

.franja__item {
    padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.2rem, 3vw, 2rem);
    background: var(--papel);
}

.franja__icono {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--marca-suave);
    color: var(--marca);
    border: 1px solid var(--marca-borde);
}

.franja__item h3 { margin: 0 0 .4rem; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.franja__item p { margin: 0; font-size: .88rem; color: var(--gris); }

/* ================================================= Pasos (cómo llega) */

.pasos {
    background: var(--hueso);
    border-block: 1px solid var(--linea);
    padding: clamp(2.5rem, 6vw, 4rem) var(--lateral);
}

.pasos__cabecera { max-width: 640px; margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.pasos__cabecera p:last-child { margin: .8rem 0 0; color: var(--tinta-2); }

.pasos__lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.2rem, 3vw, 2.25rem);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 1280px;
}

.pasos__paso {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.2rem);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--papel);
    box-shadow: var(--sombra);
}
/* Desfase intencional: el paso del medio respira un poco más arriba
   (con margen, no transform, para no pisar la animación de aparición) */
@media (min-width: 901px) {
    .pasos__paso:nth-child(2) { margin-top: -14px; }
}

.pasos__numero {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 1.1rem;
    border-radius: 50%;
    background: var(--marca);
    color: var(--marca-texto);
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pasos__paso h3 { margin: 0 0 .45rem; font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; }
.pasos__paso p { margin: 0; font-size: .9rem; line-height: 1.65; color: var(--tinta-2); }

/* ====================================================== Venta por mayor */

.mayor {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--lateral);
    max-width: 1280px;
    margin-inline: auto;
}

.mayor__texto p:not(.overline) { margin: .9rem 0 1.6rem; color: var(--tinta-2); max-width: 52ch; }

.mayor__panel {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: center;
    gap: .6rem;
    padding: clamp(1.8rem, 4vw, 3rem);
    border-radius: var(--r-hero);
    background:
        radial-gradient(60% 80% at 85% 15%, rgba(185, 200, 240, .2) 0%, transparent 60%),
        linear-gradient(125deg, var(--violeta-profundo), var(--marca) 90%);
    color: #fff;
    box-shadow: var(--sombra);
}
.mayor__panel .copo { color: rgba(255, 255, 255, .18); animation: none; }
.mayor__panel .copo--g { top: -18px; right: -18px; width: 130px; }
.mayor__panel .copo--p { bottom: 12px; right: 90px; width: 26px; }
.mayor__panel b { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.mayor__panel span { color: #d9d0ef; font-size: .92rem; max-width: 34ch; }

/* ============================================================== Llamada */

/* CTA final: panel violeta redondeado, espejo del hero */
.llamada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: min(1280px, calc(100% - (var(--lateral) * 2)));
    margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
    padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.6rem, 4vw, 3.5rem);
    border-radius: var(--r-hero);
    background:
        radial-gradient(55% 90% at 88% 10%, rgba(185, 200, 240, .14) 0%, transparent 60%),
        linear-gradient(118deg, var(--violeta-profundo) 0%, var(--marca) 70%, var(--violeta-neblina) 135%);
    color: #fff;
    box-shadow: var(--sombra-alta);
}

.llamada .overline { color: var(--celeste); }
.llamada .display { color: #fff; }
.llamada p { color: #d9d0ef; max-width: 52ch; margin: .8rem 0 0; }
.llamada__acciones { display: flex; flex-wrap: wrap; gap: .8rem; flex: none; }
.llamada .boton--fantasma { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.llamada .boton--fantasma:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.llamada .boton--texto { color: #c9bde4; }
.llamada .boton--texto:hover { color: #fff; }
.llamada .enlace-flecha { color: #fff; border-color: rgba(255, 255, 255, .4); }
.llamada .enlace-flecha:hover { color: var(--celeste); border-color: currentColor; }

.llamada--suave {
    background: var(--hueso);
    box-shadow: none;
    color: var(--tinta);
}
.llamada--suave .overline { color: var(--marca); }
.llamada--suave .display { color: var(--tinta); }
.llamada--suave p { color: var(--tinta-2); }
.llamada--suave .boton--fantasma { border-color: var(--linea-fuerte); color: var(--tinta); background: var(--papel); }
.llamada--suave .boton--fantasma:hover { border-color: var(--tinta); }

/* ============================================================== Catálogo */

.catalogo { padding: 0 var(--lateral) clamp(3rem, 7vw, 5rem); }

.filtros {
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--hueso);
}

.filtros__fila {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: .8rem;
}

.filtros__pie {
    display: flex;
    gap: .6rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--linea);
}

.catalogo__estado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.6rem 0 1.2rem;
    min-height: 1.6rem;
}

.catalogo__resumen { margin: 0; font-size: .88rem; font-weight: 700; color: var(--tinta-2); }

.catalogo__chips { display: flex; gap: .5rem; flex-wrap: wrap; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .5rem .35rem .85rem;
    border-radius: 99px;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
    font-size: .78rem;
    font-weight: 700;
    color: var(--marca);
}
.chip button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: .9rem;
    line-height: 1;
    color: inherit;
    transition: background var(--transicion);
}
.chip button:hover { background: color-mix(in srgb, var(--marca) 18%, var(--papel)); }

.paginacion {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-top: 2.5rem;
}
.paginacion button {
    min-width: 42px;
    height: 42px;
    padding: 0 .8rem;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r);
    background: var(--papel);
    font-size: .88rem;
    font-weight: 700;
    transition: border-color var(--transicion), background var(--transicion);
}
.paginacion button:hover:not(:disabled):not([aria-current]) { border-color: var(--tinta); }
.paginacion button[aria-current="page"] { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }
.paginacion button:disabled { opacity: .4; cursor: default; }
.paginacion__salto { align-self: center; color: var(--gris); padding: 0 .2rem; }

/* ================================================================= Ficha */

.ficha { padding: clamp(2rem, 5vw, 3.5rem) var(--lateral) clamp(3rem, 7vw, 5rem); }

.ficha__estado { margin: 0; padding: 1.2rem 1.4rem; border-radius: var(--r-lg); background: var(--hueso); color: var(--tinta-2); }

.ficha__volver {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--gris);
    transition: color var(--transicion);
}
.ficha__volver:hover { color: var(--marca); }

.ficha__superior {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
}

.galeria__item {
    position: relative;
    border: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--hueso);
    aspect-ratio: 1 / 1;
    cursor: zoom-in;
    padding: 0;
}
.galeria__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.galeria__item:hover img { transform: scale(1.03); }

.galeria__sinfoto {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    background: var(--hueso);
    color: var(--gris);
    font-weight: 600;
}

.galeria__mas { position: relative; }
.galeria__mas::after {
    content: attr(data-mas);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(35, 18, 63, .55);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
}

.ficha__resumen { position: sticky; top: calc(var(--cabecera) + 1.5rem); display: grid; gap: .6rem; }

.ficha__marca {
    margin: 0;
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--marca);
}

.ficha__resumen .display { font-size: clamp(1.6rem, 3vw, 2.3rem); }

.ficha__precio { margin: .5rem 0 0; }
.ficha__precio dt {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gris);
}
.ficha__precio dd {
    margin: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.ficha__stock { margin: 0; font-size: .88rem; font-weight: 700; color: var(--exito); }
.ficha__stock--agotado { color: var(--peligro); }

.ficha__compra {
    display: grid;
    gap: .8rem;
    margin-top: 1.2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--linea);
}

.campo--cantidad { max-width: 160px; }

.ficha__referencia {
    margin: 1rem 0 0;
    font-size: .78rem;
    color: var(--gris);
}
.ficha__referencia span { font-weight: 700; color: var(--tinta-2); }

.ficha__cuerpo {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--linea);
}

.ficha__texto {
    margin: 0;
    white-space: pre-line;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--tinta-2);
}

.lista-datos {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem 1.25rem;
    margin: 0;
    font-size: .9rem;
}
.lista-datos dt { color: var(--gris); font-weight: 600; }
.lista-datos dd { margin: 0; font-weight: 700; }

.ficha__extras { margin-top: clamp(2rem, 5vw, 3rem); }
.ficha__extras[hidden] { display: none; }

.pastillas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pastillas li {
    padding: .5rem .95rem;
    border: 1px solid var(--linea);
    border-radius: 99px;
    background: var(--hueso);
    font-size: .82rem;
    font-weight: 700;
}
.pastillas a { color: var(--marca); }
.pastillas a:hover { text-decoration: underline; }

.ficha__relacionadas { margin-top: clamp(2.5rem, 6vw, 4rem); }
.ficha__relacionadas .riel { margin-top: 1.5rem; }
.ficha__relacionadas .seccion__encabezado { margin-bottom: 0; }

/* ================================================================ Visor */

.visor {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgba(24, 12, 44, .93);
    animation: visor-entra .25s ease-out;
}
@keyframes visor-entra { from { opacity: 0; } }

.visor img {
    max-width: min(92vw, 1000px);
    max-height: 82vh;
    border-radius: var(--r-lg);
    object-fit: contain;
}

.visor__pie {
    position: absolute;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    color: rgba(255, 255, 255, .75);
    font-size: .85rem;
    font-weight: 600;
}

.visor__boton {
    position: absolute;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    transition: background var(--transicion);
}
.visor__boton:hover { background: rgba(255, 255, 255, .26); }
.visor__boton[data-dir="cerrar"] { top: 1.2rem; right: 1.2rem; }
.visor__boton[data-dir="anterior"] { left: 1.2rem; top: 50%; transform: translateY(-50%); }
.visor__boton[data-dir="siguiente"] { right: 1.2rem; top: 50%; transform: translateY(-50%); }

/* ============================================================== Carrito */

.carrito__estado, .checkout__estado {
    margin: 0;
    padding: 1.2rem 1.4rem;
    border-radius: var(--r-lg);
    background: var(--hueso);
    color: var(--tinta-2);
}

.carrito__vacio {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: clamp(3rem, 7vw, 5rem) 1.5rem;
    border: 1px dashed var(--linea-fuerte);
    border-radius: var(--r-lg);
    background: var(--hueso);
    text-align: center;
}
.carrito__vacio p { margin: 0; color: var(--gris); max-width: 44ch; }
.carrito__vacio .boton { margin-top: 1.2rem; }

.carrito {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.carrito__lista-caja {
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.carrito__lista { display: grid; margin: 0; padding: 0; list-style: none; }

.carrito-linea {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 1.1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--linea);
}
.carrito-linea:last-child { border-bottom: 0; }

.carrito-linea__media {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--hueso);
}
.carrito-linea__media img { width: 100%; height: 100%; object-fit: cover; }
.carrito-linea__sinfoto {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: .62rem;
    font-weight: 700;
    color: var(--gris);
    text-align: center;
    padding: .3rem;
}

.carrito-linea__cuerpo { min-width: 0; }

.carrito-linea__titulo {
    display: inline-block;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
    transition: color var(--transicion);
}
.carrito-linea__titulo:hover { color: var(--marca); }

.carrito-linea__detalle { margin: .15rem 0 0; font-size: .8rem; color: var(--gris); }

.carrito-linea__precio { margin: .35rem 0 .7rem; font-size: .86rem; color: var(--tinta-2); font-weight: 600; }

.carrito-linea__controles { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.carrito-linea__boton {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r);
    font-size: 1.05rem;
    font-weight: 700;
    transition: border-color var(--transicion), background var(--transicion);
}
.carrito-linea__boton:hover { border-color: var(--tinta); background: var(--hueso); }

.carrito-linea__cantidad {
    width: 58px;
    height: 34px;
    text-align: center;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r);
    font-size: .9rem;
    font-weight: 700;
}
.carrito-linea__cantidad:focus { outline: none; border-color: var(--marca); }

.carrito-linea__quitar {
    margin-left: .4rem;
    padding: .4rem .7rem;
    border-radius: var(--r);
    color: var(--gris);
    font-size: .76rem;
    font-weight: 700;
    transition: color var(--transicion), background var(--transicion);
}
.carrito-linea__quitar:hover { color: var(--peligro); background: var(--peligro-suave); }

.carrito-linea__aviso {
    margin: .6rem 0 0;
    font-size: .78rem;
    color: #8a5a00;
    background: #fdf3df;
    border-radius: var(--r);
    padding: .45rem .7rem;
}

.carrito-linea__subtotal {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.carrito__resumen {
    position: sticky;
    top: calc(var(--cabecera) + 1.5rem);
    display: grid;
    gap: .9rem;
    padding: 1.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--hueso);
}

.carrito__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .95rem;
    color: var(--tinta-2);
}
.carrito__fila b { font-size: 1.25rem; font-weight: 800; color: var(--tinta); letter-spacing: -.02em; }

.carrito__envio {
    margin: 0;
    padding: .7rem .9rem;
    border-radius: var(--r);
    background: var(--exito-suave);
    color: var(--exito);
    font-size: .82rem;
    font-weight: 700;
}
.carrito__envio b { font-weight: 800; }

.carrito__nota { margin: 0; font-size: .8rem; color: var(--gris); }

/* ============================================================ Checkout */

.acceso { display: grid; justify-items: center; }

.acceso__caja {
    width: min(480px, 100%);
    display: grid;
    gap: 1.1rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--hueso);
}
.acceso__caja > p:not(.overline) { margin: 0; color: var(--tinta-2); font-size: .92rem; }

.acceso__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    padding: .35rem;
    border-radius: var(--r);
    background: var(--arena);
}

.acceso__tab {
    padding: .65rem 1rem;
    border-radius: calc(var(--r) - 2px);
    font-size: .84rem;
    font-weight: 700;
    color: var(--gris);
    transition: background var(--transicion), color var(--transicion);
}
.acceso__tab[aria-selected="true"] { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }

.acceso__panel { display: grid; gap: .85rem; }
.acceso__estado { margin: 0; min-height: 1.2rem; font-size: .84rem; font-weight: 600; color: var(--peligro); }

/* =========================================================================
   Panel de usuario (/cuenta)
   ========================================================================= */

.panel { padding: 1.25rem; border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--papel); }
.panel__titulo { margin: 0 0 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--linea); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); }

.cuenta-panel { max-width: 960px; margin: 0 auto; display: grid; gap: 1.5rem; }
.cuenta-panel__cabeza { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--papel); }
.cuenta-panel__avatar { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--marca); color: var(--marca-texto); font-size: 1.4rem; font-weight: 800; }
.cuenta-panel__quien { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cuenta-panel__nombre { font-size: 1.15rem; font-weight: 800; color: var(--tinta); }
.cuenta-panel__email { font-size: .84rem; color: var(--gris); overflow-wrap: anywhere; }
.cuenta-panel__cabeza .boton { margin-left: auto; flex: 0 0 auto; }

/* Navegación por secciones */
.cuenta-panel__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; padding: 1.1rem 1.5rem; border: 1px solid var(--linea); border-radius: var(--r-lg); background: var(--papel); }
.cuenta-panel__grupo { min-width: 0; }
.cuenta-panel__grupo-titulo { margin: 0 0 .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.cuenta-panel__tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.cuenta-panel__tab { padding: .55rem 1rem; border: 1px solid var(--linea-fuerte); border-radius: 99px; background: var(--papel); font-size: .82rem; font-weight: 700; color: var(--gris); cursor: pointer; transition: border-color var(--transicion), color var(--transicion), background var(--transicion); }
.cuenta-panel__tab:hover { border-color: var(--marca); color: var(--marca); }
.cuenta-panel__tab.is-activo { border-color: var(--marca); background: var(--marca); color: var(--marca-texto); }

.cuenta-panel__vistas { display: grid; gap: 1.5rem; }
.cuenta-panel__vista { min-width: 0; }
.cuenta-panel__col { min-width: 0; }
.cuenta-panel__datos form { display: flex; flex-direction: column; gap: .9rem; }
.cuenta-panel__datos form .boton--bloque { margin-top: .25rem; }

.cuenta-ordenes { display: grid; gap: .75rem; }
.cuenta-orden { padding: .9rem 1rem; border: 1px solid var(--linea); border-radius: var(--r); background: var(--hueso); }
.cuenta-orden__cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; }
.cuenta-orden__cabeza > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cuenta-orden__cabeza strong { font-size: .9rem; color: var(--tinta); }
.cuenta-orden__fecha { font-size: .78rem; color: var(--gris); }
.cuenta-orden__estado { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: 99px; font-size: .74rem; font-weight: 700; background: var(--arena); color: var(--gris); }
.cuenta-orden__estado--exito { background: var(--exito-suave); color: var(--exito); }
.cuenta-orden__estado--alerta { background: var(--peligro-suave); color: var(--peligro); }
.cuenta-orden__items { display: grid; gap: 2px; }
.cuenta-orden__item { display: flex; justify-content: space-between; gap: .75rem; font-size: .82rem; color: var(--gris); }
.cuenta-orden__item b { color: var(--tinta); font-weight: 700; white-space: nowrap; }
.cuenta-orden__total { display: flex; justify-content: space-between; gap: .75rem; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--linea); font-size: .9rem; font-weight: 700; color: var(--tinta); }
.cuenta-orden__total b { color: var(--marca); }

.cuenta-publicaciones { display: grid; gap: .75rem; }
.cuenta-publicacion { display: flex; align-items: center; gap: .9rem; padding: .7rem .85rem; border: 1px solid var(--linea); border-radius: var(--r); background: var(--hueso); }
.cuenta-publicacion__media { flex: 0 0 56px; width: 56px; height: 56px; border-radius: var(--r); overflow: hidden; background: var(--arena); display: flex; align-items: center; justify-content: center; }
.cuenta-publicacion__media img { width: 100%; height: 100%; object-fit: cover; }
.cuenta-publicacion__sinfoto { color: var(--gris); font-size: 1.1rem; }
.cuenta-publicacion__cuerpo { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cuenta-publicacion__nombre { font-size: .9rem; font-weight: 700; color: var(--tinta); line-height: 1.35; }
.cuenta-publicacion__categoria { font-size: .78rem; color: var(--gris); }
.cuenta-publicacion__precio { font-size: .92rem; font-weight: 800; color: var(--marca); }
.cuenta-publicacion__ver { margin-left: auto; white-space: nowrap; }

@media (max-width: 760px) {
    .cuenta-panel__nav { flex-direction: column; gap: 1rem; }
    .cuenta-panel__cabeza { flex-wrap: wrap; }
}

.checkout { display: grid; justify-items: center; }

.checkout__caja {
    width: min(640px, 100%);
    display: grid;
    gap: 1.4rem;
}

.checkout__campos { display: grid; gap: .9rem; }

.checkout__leyenda { margin: 0; font-size: .82rem; color: var(--gris); }

.checkout__resumen-caja {
    display: grid;
    gap: .7rem;
    padding: 1.4rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--hueso);
}

.resumen { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }

.resumen-linea {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .88rem;
    color: var(--tinta-2);
}
.resumen-linea__nombre { min-width: 0; }
.resumen-linea__monto { font-weight: 700; white-space: nowrap; }

.checkout__fila {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .92rem;
    color: var(--tinta-2);
}
.checkout__fila b { font-weight: 800; }
.checkout__fila--total {
    padding-top: .7rem;
    border-top: 1px solid var(--linea);
    font-size: 1rem;
    color: var(--tinta);
}
.checkout__fila--total b { font-size: 1.45rem; letter-spacing: -.02em; }

.checkout__pago { margin: 0; font-size: .8rem; color: var(--gris); text-align: center; }

/* ============================================================= Contacto */

.contacto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0 var(--lateral);
}

.contacto__canal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icono cuerpo" "icono enlace";
    align-items: center;
    gap: .3rem 1rem;
    padding: 1.4rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--papel);
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.contacto__canal:hover {
    border-color: var(--marca-borde);
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}
.contacto__canal:hover .enlace-flecha { color: var(--marca); border-color: var(--marca); gap: .85rem; }

.contacto__canal--principal {
    grid-column: 1 / -1;
    background: var(--marca-suave);
    border-color: var(--marca-borde);
}

.contacto__icono {
    grid-area: icono;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--papel);
    color: var(--marca);
    border: 1px solid var(--marca-borde);
}

.contacto__cuerpo { grid-area: cuerpo; min-width: 0; }
.contacto__cuerpo b { display: block; font-size: 1.05rem; font-weight: 800; }
.contacto__cuerpo span { font-size: .88rem; color: var(--tinta-2); }

.contacto__canal .enlace-flecha { grid-area: enlace; }

.contacto__datos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: clamp(2rem, 5vw, 3rem) var(--lateral) clamp(3rem, 7vw, 5rem);
}

.contacto__dato p { margin: 0; }
.contacto__dato > p:not(.overline) { font-size: .95rem; font-weight: 600; }
.contacto__dato a:hover { color: var(--marca); }

.contacto__redes {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 700;
    font-size: .92rem;
}
.contacto__redes a:hover { color: var(--marca); }
.contacto__redes[hidden] { display: none; }

/* ============================================================= Aparición */

.aparece { opacity: 0; transform: translateY(14px); }
.aparece.es-visible {
    opacity: 1;
    transform: none;
    transition: opacity .6s ease-out, transform .6s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .aparece { opacity: 1; transform: none; transition: none; }
    .tarjeta:hover .tarjeta__media img,
    .galeria__item:hover img { transform: none; }
    .esqueleto__bloque::after { animation: none; }
    .copo { animation: none; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================= Responsive */

@media (max-width: 1080px) {
    .riel { grid-template-columns: repeat(3, 1fr); }
    .franja { grid-template-columns: repeat(2, 1fr); }
    .filtros__fila { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    /* En móvil la barra es lo único fijo: el panel del menú cuelga de ella */
    .cabecera { --cabecera: 64px; }
    .cabecera__franja { display: none; }

    .cabecera__busqueda { display: none; }
    .cabecera__barra { padding: .6rem var(--lateral); }

    .marca__insignia { width: 44px; height: 44px; }
    .marca__nombre { font-size: 1.12rem; }
    .marca__bajada { display: none; }
    .cabecera__etq { display: none; }

    .navegacion {
        position: fixed;
        inset: var(--cabecera) 0 auto 0;
        z-index: 49;
        display: none;
        background: var(--papel);
        border-bottom: 1px solid var(--linea);
        box-shadow: var(--sombra-alta);
    }
    .navegacion[data-abierto] { display: block; }

    .navegacion__lista {
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
        padding: .75rem var(--lateral) 1.25rem;
    }
    .navegacion__lista > li > a,
    [data-sed-menu] > li > a {
        display: block;
        padding: .8rem 1rem;
        border-radius: var(--r);
        font-size: 1rem;
    }
    .navegacion__lista > li > a[aria-current="page"],
    [data-sed-menu] > li > a[aria-current="page"] { background: var(--marca); }

    .navegacion__boton { display: inline-flex; }

    /* Hero a una columna: la medalla pasa arriba del titular */
    .portada__panel { grid-template-columns: 1fr; }
    .portada__marca { order: -1; min-height: 210px; }
    .insignia--xl { width: clamp(150px, 40vw, 210px); }

    .mayor { grid-template-columns: 1fr; }
    .pasos__lista { grid-template-columns: 1fr; }

    .ficha__superior { grid-template-columns: 1fr; }
    .ficha__resumen { position: static; }

    .ficha__cuerpo { grid-template-columns: 1fr; }

    .carrito { grid-template-columns: 1fr; }
    .carrito__resumen { position: static; }

    .contacto { grid-template-columns: 1fr; }
    .contacto__datos { grid-template-columns: 1fr; gap: 1.8rem; }

    .pie__grilla { grid-template-columns: 1fr 1fr; }

    .llamada { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .riel, .grilla { grid-template-columns: repeat(2, 1fr); gap: .9rem; }

    .franja { grid-template-columns: 1fr; }

    .filtros__fila { grid-template-columns: 1fr; }

    .seccion__encabezado { flex-direction: column; align-items: flex-start; gap: .8rem; }

    .buscador__campos { grid-template-columns: 1fr; }

    .portada { padding-top: .75rem; }
    .portada__panel { padding: clamp(1.75rem, 6vw, 2.5rem) clamp(1.15rem, 5vw, 1.75rem); border-radius: 22px; }
    .portada__cifras { gap: 1.2rem; }

    .llamada { border-radius: 22px; }

    .carrito-linea { grid-template-columns: 72px minmax(0, 1fr); }
    .carrito-linea__media { width: 72px; height: 72px; }
    .carrito-linea__subtotal { grid-column: 2; justify-self: start; }

    .galeria { grid-template-columns: repeat(2, 1fr); }
    .galeria__item:first-child { grid-column: 1 / -1; aspect-ratio: 1 / 1; }

    .pie__grilla { grid-template-columns: 1fr; }

    .checkout__caja { width: 100%; }
}

/* ==== Página: preguntas-frecuentes ==== */
/* =========================================================================
   Página: Preguntas frecuentes — Bajo Cero
   -------------------------------------------------------------------------
   Estilos propios de /preguntas-frecuentes (prefijo .faq). Se agregan al
   final de style.css: no pisan a las demás páginas y reutilizan las
   variables de identidad de la base (--marca, --tinta, --r-lg, --sombra…).
   El acordeón es <details>/<summary> puro: no necesita JavaScript.
   ========================================================================= */

/* Índice de temas: pastillas del sistema, con aire bajo el encabezado */
.faq__indice {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* Cuerpo: grupos de preguntas + columna lateral de ayuda */
.faq__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr);
    gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: start;
    max-width: 1280px;
    margin-inline: auto;
}

.faq__grupos {
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.75rem);
    min-width: 0;
}

/* Anclas del índice: que la cabecera fija no tape el título del grupo */
.faq__grupo { scroll-margin-top: calc(var(--cabecera) + 1.5rem); }

.faq__grupo-cabecera {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1rem;
}

.faq__grupo-icono {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
    color: var(--marca);
}

.faq__grupo-titulo {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--tinta);
}

.faq__lista {
    display: grid;
    gap: .7rem;
}

/* ----------------------------------------------------- Pregunta ( acordeón ) */

.faq__item {
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--papel);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.faq__item:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
.faq__item[open] {
    border-color: var(--marca-borde);
    box-shadow: var(--sombra);
}

.faq__item summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.4;
    color: var(--tinta);
    transition: color var(--transicion);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }
.faq__item summary:hover { color: var(--marca); }
.faq__item[open] summary { color: var(--marca); }
.faq__item summary:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: -2px;
    border-radius: var(--r-lg);
}

.faq__interro {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
    color: var(--marca);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
}

.faq__pregunta { min-width: 0; }

.faq__chevron {
    flex: none;
    margin-left: auto;
    color: var(--gris);
    transition: transform var(--transicion), color var(--transicion);
}
.faq__item[open] .faq__chevron { transform: rotate(180deg); color: var(--marca); }

.faq__respuesta {
    /* Sangría alineada bajo la pregunta (ícono + gap) */
    padding: 0 1.25rem 1.2rem calc(1.25rem + 30px + 1rem);
}
.faq__respuesta p {
    margin: 0;
    max-width: 68ch;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--tinta-2);
}
.faq__respuesta a {
    color: var(--marca);
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: color var(--transicion), border-color var(--transicion);
}
.faq__respuesta a:hover { color: var(--marca-oscuro); border-color: currentColor; }

/* ------------------------------------------------------------- Lateral */

.faq__lateral {
    position: sticky;
    top: calc(var(--cabecera) + 1.5rem);
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

/* Espejo miniatura de los paneles violetas del sitio */
.faq__ayuda {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: .7rem;
    align-content: start;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-hero);
    background:
        radial-gradient(60% 80% at 85% 12%, rgba(185, 200, 240, .2) 0%, transparent 60%),
        linear-gradient(125deg, var(--violeta-profundo), var(--marca) 90%);
    color: #fff;
    box-shadow: var(--sombra);
}
.faq__ayuda .copo { color: rgba(255, 255, 255, .16); animation: none; }
.faq__ayuda .copo--g { top: -22px; right: -22px; width: 120px; }

.faq__ayuda .overline { color: var(--celeste); margin-bottom: 0; }
.faq__ayuda-titulo {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
}
.faq__ayuda p { margin: 0; font-size: .9rem; line-height: 1.65; color: #d9d0ef; }

.faq__ayuda .boton--claro { margin-top: .5rem; justify-self: start; }
.faq__ayuda .boton--fantasma {
    justify-self: start;
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
}
.faq__ayuda .boton--fantasma:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Ficha de datos del local (todo opcional vía data-emp-item) */
.faq__datos {
    display: grid;
    gap: .9rem;
    padding: 1.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--hueso);
}
.faq__datos .panel__titulo { margin-bottom: 0; }

.faq__dato { display: grid; gap: .15rem; }
.faq__dato b { font-size: .92rem; font-weight: 800; color: var(--tinta); }
.faq__dato p { margin: 0; font-size: .88rem; color: var(--tinta-2); }
.faq__dato a { font-weight: 600; transition: color var(--transicion); }
.faq__dato a:hover { color: var(--marca); }

.faq__datos-subtitulo {
    margin: .4rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--linea);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
}

.faq__enlaces {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    font-weight: 700;
}
.faq__enlaces a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--marca);
    transition: color var(--transicion), gap var(--transicion);
}
.faq__enlaces a:hover { color: var(--marca-oscuro); gap: .8rem; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
    .faq__cuerpo { grid-template-columns: 1fr; }
    .faq__lateral { position: static; }
}

@media (max-width: 640px) {
    .faq__item summary {
        gap: .75rem;
        padding: .95rem 1rem;
        font-size: .95rem;
    }
    .faq__interro { width: 26px; height: 26px; font-size: .74rem; }
    .faq__respuesta { padding: 0 1rem 1rem; }
    .faq__grupo-icono { width: 38px; height: 38px; }
}

/* ==== Página: productos ==== */
/* =========================================================================
   Página «Productos» (/productos) — estilos propios
   -------------------------------------------------------------------------
   Este bloque se agrega al final de style.css. Todas las reglas están
   enfocadas en clases de esta página (.pagina--productos, .productos__*,
   .catalogo--productos, .franja--productos, .filtros__nota) para no
   alterar el resto del sitio. Reutiliza las variables y el lenguaje
   visual de la base: panel violeta, celeste lavanda y acento --marca.
   ========================================================================= */

.pagina--productos { padding-bottom: clamp(1rem, 2.5vw, 1.75rem); }

/* Panel violeta compacto: espejo en miniatura del hero de inicio */
.productos__panel {
    position: relative;
    overflow: hidden;
    max-width: 1280px;
    margin-inline: auto;
    padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 4vw, 4rem);
    border-radius: var(--r-hero);
    background:
        radial-gradient(52% 70% at 84% 16%, rgba(185, 200, 240, .16) 0%, transparent 62%),
        radial-gradient(70% 90% at 12% 96%, color-mix(in srgb, var(--marca) 60%, transparent) 0%, transparent 60%),
        linear-gradient(118deg, var(--violeta-profundo) 0%, var(--marca) 52%, var(--violeta-neblina) 130%);
    color: #fff;
    box-shadow: var(--sombra-alta);
}

.productos__contenido { position: relative; z-index: 1; max-width: 780px; }

/* Sello píldora sobre violeta (mismo gesto que .portada__sello) */
.productos__sello {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.2rem;
    padding: .45rem 1rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #efeafd;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.productos__titulo { color: #fff; }

.productos__bajada {
    margin: 1.2rem 0 0;
    max-width: 58ch;
    font-size: 1.02rem;
    line-height: 1.7;
    color: #d9d0ef;
}

/* Cifras reales del catálogo (data-conteo): píldoras translúcidas */
.productos__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: clamp(1.5rem, 3.5vw, 2.1rem);
}
.productos__cifras > div {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .6rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
}
.productos__cifras b {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.productos__cifras span { font-size: .78rem; font-weight: 600; color: #cfc6e6; }

/* Copos decorativos del panel (reaprovechan el keyframe copo-flota de la base) */
.productos__copo { position: absolute; pointer-events: none; }
.productos__copo--g { top: -34px; right: -30px; width: 190px; color: rgba(255, 255, 255, .12); }
.productos__copo--p { bottom: 22px; right: 130px; width: 26px; color: rgba(185, 200, 240, .4); animation: copo-flota 7s ease-in-out infinite; }

/* Nota al pie de los filtros: se apila a la derecha en escritorio */
.catalogo--productos .filtros__pie { flex-wrap: wrap; }
.filtros__nota {
    margin: 0 0 0 auto;
    align-self: center;
    font-size: .78rem;
    color: var(--gris);
}

/* Título del tramo de beneficios, sólo para lectores de pantalla */
.productos__oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Respiración entre la franja de beneficios y la llamada final */
.franja--productos { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

@media (max-width: 900px) {
    .productos__copo--p { right: 90px; }
}

@media (max-width: 640px) {
    .pagina--productos { padding-bottom: .75rem; }
    .productos__panel {
        padding: clamp(1.6rem, 6vw, 2.4rem) clamp(1.15rem, 5vw, 1.75rem);
        border-radius: 22px;
    }
    .productos__copo--g { top: -22px; right: -20px; width: 130px; }
    .productos__copo--p { display: none; }
    .filtros__nota { margin-left: 0; width: 100%; }
}

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

/* ==== Página: contacto ==== */
/* =========================================================================
    Página Contacto — estilos propios
    -------------------------------------------------------------------------
    Todo va aislado bajo `.pagina--contacto` o con clases nuevas de la página,
    para no tocar el diseño de las demás. Reutiliza las variables y los
    componentes de style.css (--marca, --hueso, .portada__panel, .contacto,
    .franja, .llamada, .seccion__encabezado).
    ========================================================================= */

/* La sección ya no aporta padding: cada bloque lo administra por su cuenta
   (evita el doble --lateral que producía `.pagina` + `.contacto`). */
.pagina--contacto { padding: 0; }

/* ------------------------------------------------------- Bloques de página */

.contacto-bloque {
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--lateral);
}
.contacto-bloque__caja { max-width: 1280px; margin-inline: auto; }
.contacto-bloque--tinta {
    background: var(--hueso);
    border-block: 1px solid var(--linea);
}
.contacto-bloque--apretada { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.contacto-bloque--sinpie {
    padding-top: clamp(1.25rem, 3vw, 2.25rem);
    padding-bottom: 0;
}

/* El grid de canales ya trae su propio padding lateral en style.css:
   acá lo anula porque el bloque lo pone. */
.contacto-bloque .contacto {
    padding: 0;
    max-width: 1280px;
}

/* --------------------------------------------------------- Tarjeta del hero */

.contacto-tarjeta {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: .75rem;
    padding: clamp(1.5rem, 3.2vw, 2.25rem);
    border-radius: var(--r-lg);
    background: var(--papel);
    color: var(--tinta);
    box-shadow: var(--sombra-alta);
}
/* Marca de agua tenue en la esquina superior derecha de la tarjeta */
.contacto-tarjeta::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -60px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--marca) 12%, var(--papel)) 0%, transparent 68%);
    pointer-events: none;
}

.contacto-tarjeta__etq {
    margin: 0;
    position: relative;
    color: var(--marca);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.contacto-tarjeta__whatsapp {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--tinta);
    transition: color var(--transicion);
}
.contacto-tarjeta__whatsapp svg { flex: none; color: var(--marca); }
.contacto-tarjeta__whatsapp:hover { color: var(--marca); }

.contacto-tarjeta__nota {
    position: relative;
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--gris);
    max-width: 34ch;
}

.contacto-tarjeta__sep {
    position: relative;
    margin: .35rem 0;
    border-top: 1px dashed var(--linea-fuerte);
}

.contacto-tarjeta__local {
    position: relative;
    display: grid;
    gap: .2rem;
}
.contacto-tarjeta__local b {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
}
.contacto-tarjeta__local a {
    display: grid;
    gap: .15rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--tinta);
    transition: color var(--transicion);
}
.contacto-tarjeta__local a:hover { color: var(--marca); }
.contacto-tarjeta__ver {
    font-size: .8rem;
    font-weight: 800;
    color: var(--marca);
}

/* Enlace claro sobre el panel violeta del hero */
.pagina--contacto .portada__acciones { align-items: center; }
.pagina--contacto .portada__panel .enlace-flecha--claro { color: #fff; border-color: rgba(255, 255, 255, .4); }
.pagina--contacto .portada__panel .enlace-flecha--claro:hover { color: var(--celeste); border-color: currentColor; }

/* --------------------------------------------------------------- Mapa local */

.contacto-visita {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: stretch;
}

.contacto-mapa {
    position: relative;
    display: block;
    min-height: 380px;
    border: 1px solid var(--linea);
    border-radius: var(--r-hero);
    background: var(--papel);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.contacto-mapa svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.contacto-mapa__pin { fill: var(--marca); }
.contacto-mapa__pulso {
    fill: none;
    stroke: var(--marca);
    transform-box: fill-box;
    transform-origin: center;
    animation: contacto-pulso 2.8s ease-out infinite;
}
@keyframes contacto-pulso {
    0% { opacity: .55; transform: scale(.55); }
    70%, 100% { opacity: 0; transform: scale(1.55); }
}

.contacto-mapa__chip {
    position: absolute;
    left: clamp(.85rem, 2.5vw, 1.4rem);
    bottom: clamp(.85rem, 2.5vw, 1.4rem);
    right: clamp(.85rem, 2.5vw, 1.4rem);
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .8rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--papel);
    box-shadow: var(--sombra);
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--tinta);
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.contacto-mapa__chip svg { flex: none; color: var(--marca); }
.contacto-mapa__chip span {
    margin-left: auto;
    font-size: .78rem;
    font-weight: 800;
    color: var(--marca);
}
.contacto-mapa__chip:hover {
    border-color: var(--marca-borde);
    box-shadow: var(--sombra-alta);
    transform: translateY(-2px);
}

/* Columna de información del local */
.contacto-visita__info { display: grid; align-content: start; }
.contacto-visita__info .display { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.contacto-visita__bajada {
    margin: .9rem 0 0;
    font-size: .98rem;
    line-height: 1.7;
    color: var(--tinta-2);
    max-width: 52ch;
}

.contacto-visita__lista {
    display: grid;
    gap: .7rem;
    margin: clamp(1.25rem, 3vw, 1.8rem) 0 0;
    padding: 0;
    list-style: none;
}
.contacto-visita__fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .95rem;
    align-items: start;
    padding: 1rem 1.15rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--papel);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.contacto-visita__fila:hover { border-color: var(--marca-borde); box-shadow: var(--sombra); }

.contacto-visita__icono {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
    color: var(--marca);
}

.contacto-visita__texto { display: grid; gap: .15rem; min-width: 0; }
.contacto-visita__texto b { font-size: .95rem; font-weight: 800; }
.contacto-visita__texto a,
.contacto-visita__texto > span {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--tinta-2);
}
.contacto-visita__texto a { font-weight: 700; transition: color var(--transicion); }
.contacto-visita__texto a:hover { color: var(--marca); }

.contacto-visita__redes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.contacto-visita__redes .overline { margin: 0; }

/* Franja "para qué escribirnos": enlace al pie de cada ítem (sólo en Contacto) */
.pagina--contacto .franja__item .enlace-flecha { margin-top: .9rem; font-size: .8rem; }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
    .contacto-visita { grid-template-columns: 1fr; }
    .contacto-mapa { min-height: 300px; order: 2; }
    .contacto-visita__info { order: 1; }
}

@media (max-width: 640px) {
    .contacto-bloque { padding: clamp(2rem, 7vw, 3rem) var(--lateral); }
    .contacto-bloque--sinpie { padding-top: clamp(1rem, 4vw, 1.75rem); }
    .contacto-mapa { min-height: 250px; border-radius: 22px; }
    .contacto-mapa__chip { border-radius: 18px; }
    .contacto-mapa__chip span { margin-left: 0; flex: 1 0 100%; }
    .contacto-visita__fila { padding: .9rem; gap: .8rem; }
    .contacto-tarjeta { border-radius: var(--r-lg); }
}

@media (prefers-reduced-motion: reduce) {
    .contacto-mapa__pulso { animation: none; opacity: .35; }
    .contacto-mapa__chip:hover { transform: none; }
}

/* ==== Página: venta-por-mayor ==== */
/* =========================================================================
   Página: Venta por mayor — Bajo Cero
   -------------------------------------------------------------------------
   Estilos propios de /venta-por-mayor (prefijo .vmayor). Se agregan al
   final de style.css: no pisan a las demás páginas y reutilizan las
   variables de identidad de la base (--marca, --tinta, --r-lg, --sombra…)
   y los componentes globales (.pasos, .franja, .llamada, .boton, .copo).
   El acordeón de condiciones es <details>/<summary> puro: no necesita
   JavaScript.
   ========================================================================= */

/* Acciones bajo el encabezado de la página */
.vmayor__intro-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem 1.5rem;
    margin-top: clamp(1.5rem, 3.5vw, 2.1rem);
}

/* ----------------------------------------------------------- Perfiles */

/* Grilla de rubros atendidos: tarjetas blancas con medalla de ícono */
.vmayor__perfiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 1rem;
    max-width: 1280px;
    margin-inline: auto;
}

.vmayor__perfil {
    padding: clamp(1.3rem, 2.6vw, 1.7rem);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--papel);
    transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
}
.vmayor__perfil:hover {
    border-color: var(--marca-borde);
    box-shadow: var(--sombra);
    transform: translateY(-3px);
}

.vmayor__perfil-icono {
    display: inline-grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
    color: var(--marca);
}

.vmayor__perfil h3 {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--tinta);
}
.vmayor__perfil p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--gris);
}

/* ------------------------------------------------- Cuerpo: dudas + lateral */

.vmayor__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr);
    gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: start;
    max-width: 1280px;
    margin-inline: auto;
}

.vmayor__lista {
    display: grid;
    gap: .7rem;
    min-width: 0;
}

/* ------------------------------------------------------- Acordeón (details) */

.vmayor__item {
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--papel);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.vmayor__item:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra); }
.vmayor__item[open] { border-color: var(--marca-borde); box-shadow: var(--sombra); }

.vmayor__item summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.4;
    color: var(--tinta);
    transition: color var(--transicion);
}
.vmayor__item summary::-webkit-details-marker { display: none; }
.vmayor__item summary::marker { content: ''; }
.vmayor__item summary:hover { color: var(--marca); }
.vmayor__item[open] summary { color: var(--marca); }
.vmayor__item summary:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: -2px;
    border-radius: var(--r-lg);
}

.vmayor__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--marca-suave);
    border: 1px solid var(--marca-borde);
    color: var(--marca);
    font-size: .76rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.vmayor__pregunta { min-width: 0; }

.vmayor__chevron {
    flex: none;
    margin-left: auto;
    color: var(--gris);
    transition: transform var(--transicion), color var(--transicion);
}
.vmayor__item[open] .vmayor__chevron { transform: rotate(180deg); color: var(--marca); }

.vmayor__respuesta {
    /* Sangría alineada bajo la pregunta (número + gap) */
    padding: 0 1.25rem 1.2rem calc(1.25rem + 30px + 1rem);
}
.vmayor__respuesta p {
    margin: 0;
    max-width: 68ch;
    font-size: .93rem;
    line-height: 1.7;
    color: var(--tinta-2);
}
.vmayor__respuesta a {
    color: var(--marca);
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: color var(--transicion), border-color var(--transicion);
}
.vmayor__respuesta a:hover { color: var(--marca-oscuro); border-color: currentColor; }

/* ------------------------------------------------------------- Lateral */

.vmayor__lateral {
    position: sticky;
    top: calc(var(--cabecera) + 1.5rem);
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}

/* Espejo de los paneles violetas del sitio (hero / ayuda de FAQ) */
.vmayor__ayuda {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: .7rem;
    align-content: start;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--r-hero);
    background:
        radial-gradient(60% 80% at 85% 12%, rgba(185, 200, 240, .2) 0%, transparent 60%),
        linear-gradient(125deg, var(--violeta-profundo), var(--marca) 90%);
    color: #fff;
    box-shadow: var(--sombra);
}
.vmayor__ayuda .copo { color: rgba(255, 255, 255, .16); animation: none; }
.vmayor__ayuda .copo--g { top: -22px; right: -22px; width: 120px; }

.vmayor__ayuda .overline { color: var(--celeste); margin-bottom: 0; }
.vmayor__ayuda-titulo {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: #fff;
}
.vmayor__ayuda p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.65;
    color: #d9d0ef;
}

.vmayor__ayuda .boton--claro { margin-top: .5rem; justify-self: start; }
.vmayor__ayuda .boton--fantasma {
    justify-self: start;
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    color: #fff;
}
.vmayor__ayuda .boton--fantasma:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Ficha de datos del local (bloques opcionales vía data-emp-item) */
.vmayor__datos {
    display: grid;
    gap: .9rem;
    padding: 1.5rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    background: var(--hueso);
}
.vmayor__datos .panel__titulo { margin-bottom: 0; }

.vmayor__dato { display: grid; gap: .15rem; }
.vmayor__dato b { font-size: .92rem; font-weight: 800; color: var(--tinta); }
.vmayor__dato p { margin: 0; font-size: .88rem; color: var(--tinta-2); }
.vmayor__dato a { font-weight: 600; transition: color var(--transicion); }
.vmayor__dato a:hover { color: var(--marca); }

.vmayor__datos-subtitulo {
    margin: .4rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--linea);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gris);
}

.vmayor__enlaces {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    font-weight: 700;
}
.vmayor__enlaces a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--marca);
    transition: color var(--transicion), gap var(--transicion);
}
.vmayor__enlaces a:hover { color: var(--marca-oscuro); gap: .8rem; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 900px) {
    .vmayor__cuerpo { grid-template-columns: 1fr; }
    .vmayor__lateral { position: static; }
}

@media (max-width: 640px) {
    .vmayor__intro-acciones { gap: .8rem 1.1rem; }
    .vmayor__intro-acciones .boton { width: 100%; }

    .vmayor__perfil-icono { width: 44px; height: 44px; }

    .vmayor__item summary {
        gap: .75rem;
        padding: .95rem 1rem;
        font-size: .95rem;
    }
    .vmayor__num { width: 26px; height: 26px; font-size: .7rem; }
    .vmayor__respuesta { padding: 0 1rem 1rem; }
}