/* ═══════════════════════════════════════════════════════════════════════
   COCA LIQUOR — Tienda pública
   -----------------------------------------------------------------------
   "El ingrediente que faltaba."

   La referencia de EXPERIENCIA sigue siendo la de las apps de delivery
   (PedidosYa, Uber Eats, Rappi): la foto manda, el precio se lee de lejos y
   agregar al carrito nunca está a más de un toque.

   Lo que cambia por completo es la PIEL. Coca Liquor no es un colmado: es
   una licorería nocturna. El local es negro con letras rojas de neón, y la
   compra ocurre de noche. Por eso la tienda es oscura de origen, no un tema
   claro apagado: el negro profundo hace que la botella y la etiqueta del
   producto sean lo único que brilla en pantalla.

   PALETA
   · Negro profundo (#08080A) de fondo, gris carbón (#141418) en tarjetas.
   · Rojo Coca Liquor (#D81E2C) en TODO lo que se toca: botones, chips
     activos, badges, barra de carrito, línea de tiempo del pedido.
   · Blanco y grises fríos para el texto.
   · Un dorado discreto reservado a avisos (cerrado, stock) — nunca compite
     con el rojo, que es la marca.

   LO QUE HACE QUE NO PAREZCA UNA PLANTILLA:
   · Radios grandes y consistentes (22px tarjetas, 999px píldoras).
   · Sombras negras en dos capas + halo rojo SOLO en los elementos de acción.
   · Tipografía apretada en títulos (letter-spacing negativo).
   · Ritmo vertical de 22–28px, no de 8px.
   · Animaciones cortas (140–220 ms) y sólo donde comunican algo.

   Los tokens de marca se pueden sobrescribir en caliente desde el panel
   (Configuración → color principal). Ver includes/tema.php: emite un
   <style> que redefine --t-marca* a partir de la configuración del negocio,
   para que esta misma hoja sirva a cualquier cliente de Zervio5.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Superficies ───────────────────────────────────────────────────── */
    --t-fondo:        #08080A;
    --t-panel:        #141418;
    --t-panel-alto:   #1C1C23;
    --t-tinta:        #F4F4F6;
    --t-tinta-suave:  #9C9CA8;
    --t-linea:        #26262E;
    --t-linea-tenue:  #1A1A20;

    /* ── Marca ─────────────────────────────────────────────────────────── */
    /* #C8202D es el rojo exacto del rótulo. Como TEXTO sobre negro se queda
       corto de contraste, así que el token interactivo sube un punto de
       luminosidad y el original se reserva para rellenos sólidos. */
    --t-marca:        #D81E2C;
    --t-marca-solida: #C8202D;
    --t-marca-oscura: #A3141F;
    --t-marca-viva:   #F0303F;
    --t-marca-tenue:  #2B0C11;
    /* Este valor NO se elige a ojo: es exactamente lo que devuelve
       tema_paleta('#D81E2C')['marca_texto']. Si el CSS y el PHP dieran
       rojos distintos, la tienda cambiaría de tono al guardar la
       configuración sin que nadie hubiera tocado el color. */
    --t-marca-texto:  #EC7981;
    --t-marca-borde:  rgba(216,30,44,.32);

    /* ── Dorado: avisos, nunca acciones ────────────────────────────────── */
    --t-ambar:        #E8B54B;
    --t-ambar-tenue:  #241B08;
    --t-ambar-tinta:  #F0C874;

    --t-alerta:       #E23744;
    --t-alerta-tenue: #2C1013;

    /* ── Neutro apagado: negocio cerrado, agotado ──────────────────────── */
    --t-apagado:      #1E1E24;
    --t-apagado-tinta:#B9B9C4;

    --t-r-xl: 22px;
    --t-r-lg: 18px;
    --t-r-md: 13px;
    --t-r-sm: 9px;

    /* Sombras en dos capas: una de contacto muy corta y otra de ambiente
       muy difusa. Sobre negro la sombra no "oscurece": separa por densidad,
       por eso son más opacas que en un tema claro. */
    --t-sombra:      0 1px 2px rgba(0,0,0,.55), 0 10px 26px rgba(0,0,0,.45);
    --t-sombra-alta: 0 2px 6px rgba(0,0,0,.60), 0 20px 46px rgba(0,0,0,.62);
    /* Halo rojo: exclusivo de los elementos que se tocan. */
    --t-halo:        0 6px 22px rgba(216,30,44,.38);

    --t-tope: 1180px;
    --t-ritmo: 22px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--t-fondo);
    color: var(--t-tinta);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

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

:focus-visible { outline: 3px solid var(--t-marca); outline-offset: 2px; border-radius: 4px; }

/* ═══════ Cabecera ══════════════════════════════════════════════════════ */
.store-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(8,8,10,.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    padding-top: env(safe-area-inset-top);
    transition: border-color .2s, box-shadow .2s;
}
/* El borde aparece sólo al desplazar: arriba del todo, una línea gratuita
   ensucia; en cuanto hay contenido debajo, hace falta para separar. */
.store-header:not(:only-child) { border-bottom-color: var(--t-linea); }

.store-header__inner {
    max-width: var(--t-tope);
    margin: 0 auto;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.store-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -.035em;
    white-space: nowrap;
    flex-shrink: 0;
}
.store-header__logo {
    width: 34px; height: 34px;
    border-radius: 10px;
    object-fit: cover;
}
.store-header__volver {
    font-size: 1.2rem;
    color: var(--t-marca-texto);
    line-height: 1;
}

.store-header__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.store-header__datos {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .76rem;
    font-weight: 700;
}
.store-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--t-marca-tenue);
    color: var(--t-marca-texto);
}
.store-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.store-status--cerrado { background: var(--t-apagado); color: var(--t-apagado-tinta); }
.store-eta { color: var(--t-tinta-suave); white-space: nowrap; }

.header-cart {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    font-size: 1.16rem;
    transition: transform .14s, border-color .14s, box-shadow .14s;
}
.header-cart:hover { border-color: var(--t-marca); box-shadow: var(--t-sombra); }
.header-cart:active { transform: scale(.94); }
.header-cart__conteo {
    position: absolute;
    top: -5px; right: -5px;
    min-width: 21px; height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--t-alerta);
    color: #fff;
    font-size: .69rem;
    font-weight: 800;
    display: grid;
    place-items: center;
    border: 2px solid var(--t-fondo);
    animation: t-pop .24s cubic-bezier(.2,1.4,.4,1);
}
@keyframes t-pop { from { transform: scale(.3); } to { transform: scale(1); } }

/* ═══════ Buscador ══════════════════════════════════════════════════════ */
.search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    border-radius: 999px;
    transition: border-color .16s, box-shadow .16s;
}
.search-bar:focus-within {
    border-color: var(--t-marca);
    box-shadow: 0 0 0 4px var(--t-marca-tenue);
}
.search-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 13px 0;
    font-size: .95rem;
    color: var(--t-tinta);
}
.search-bar input:focus { outline: none; }
.search-bar input::placeholder { color: var(--t-tinta-suave); opacity: .8; }
.search-bar--header { flex: 1 1 300px; max-width: 460px; }

@media (max-width: 720px) {
    .store-header__inner {
        flex-wrap: wrap;
        row-gap: 10px;
        padding: 11px 16px;
        align-items: center;
    }

    /* `display: contents` disuelve el contenedor y sube sus hijos al flex
       de la cabecera. Así se puede ordenar el carrito y la fila de datos
       por separado, sin tocar el HTML: sin esto, el carrito quedaba
       arrastrado a la segunda línea junto a los horarios. */
    .store-header__meta { display: contents; }

    .store-header__brand { order: 1; }
    .header-cart        { order: 2; margin-left: auto; }
    .search-bar--header { order: 3; flex-basis: 100%; max-width: none; }

    /* Esta fila antes se ocultaba entera en móvil. Con ella desaparecían
       los tres datos que deciden si el cliente pide o no: si estamos
       abiertos, cuánto tarda y cuál es el mínimo. Ahora baja a su propia
       línea, en pequeño, en vez de esconderse. */
    .store-header__datos {
        order: 4;
        flex-basis: 100%;
        justify-content: flex-start;
        gap: 9px;
        font-size: .73rem;
    }
}

@media (max-width: 380px) {
    .store-header__brand { font-size: .98rem; }
    .store-header__datos .store-eta:last-child { display: none; } /* el mínimo cede primero */
}

/* ═══════ Página ════════════════════════════════════════════════════════ */
/* El hueco inferior sólo se reserva cuando hay algo en el carrito. Antes
   se reservaban 120 px siempre y la página terminaba con un vacío enorme
   para una barra que no existía. */
.store-page {
    max-width: var(--t-tope);
    margin: 0 auto;
    padding: 14px 18px calc(30px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: var(--t-ritmo);
}
.store-secciones { display: flex; flex-direction: column; gap: var(--t-ritmo); }
.store-page > .hero { margin-bottom: 4px; }

/* Título y subtítulo APILADOS.
   Antes el subtítulo iba en un `justify-content: space-between`, así que en
   escritorio se despegaba al extremo derecho de la pantalla y quedaba
   flotando solo, sin relación visual con el título al que pertenece. */
.section-head { margin-bottom: 12px; }
.section-head .section-title { margin-bottom: 0; }

.section-title {
    /* Margen propio para los títulos que van sueltos (checkout, seguimiento,
       resultados de búsqueda). Dentro de .section-head se anula, porque ahí
       el espacio lo pone el contenedor. */
    margin: 0 0 14px;
    font-size: clamp(1.22rem, 3.4vw, 1.42rem);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.15;
}
.section-title__sub {
    display: block;
    margin: 3px 0 0;
    font-size: .87rem;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--t-tinta-suave);
    line-height: 1.4;
}

.closed-banner {
    padding: 15px 18px;
    border-radius: var(--t-r-lg);
    background: var(--t-ambar-tenue);
    color: var(--t-ambar-tinta);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid rgba(255,179,0,.28);
}

/* ═══════ Portada ═══════════════════════════════════════════════════════ */
/* En escritorio la foto ocupa la mitad derecha y el texto la izquierda, con
   un degradado que los une: así la foto se ve de verdad, no como un fondo
   apagado detrás de un bloque de texto. En móvil la foto pasa a ser el
   fondo completo, porque no hay ancho para dos columnas. */
.hero {
    position: relative;
    border-radius: var(--t-r-xl);
    overflow: hidden;
    min-height: 210px;
    display: flex;
    align-items: center;
    box-shadow: var(--t-sombra);
    isolation: isolate;

    /* Sin foto de portada: dos luces fuera de eje dan profundidad. No es un
       verde plano de relleno esperando a que alguien suba una imagen. */
    background:
        radial-gradient(120% 90% at 82% 8%,  rgba(216,30,44,.55) 0%, transparent 58%),
        radial-gradient(90% 70% at 8% 100%,  rgba(232,181,75,.10) 0%, transparent 55%),
        linear-gradient(145deg, #1A0509 0%, #08080A 100%);
}

.hero__foto {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
/* El degradado protege la legibilidad sobre CUALQUIER foto que suba el
   dueño, clara u oscura. Sin él, una foto de fondo blanco deja el título
   invisible. */
.hero.tiene-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(4,4,6,.34)  0%,
            rgba(4,4,6,.52) 38%,
            rgba(4,4,6,.88) 78%,
            rgba(4,4,6,.96) 100%),
        linear-gradient(90deg,
            rgba(4,4,6,.72) 0%,
            rgba(4,4,6,.18) 62%,
            rgba(4,4,6,.00) 100%);
}

.hero__texto {
    position: relative;
    z-index: 1;
    padding: 24px 22px 22px;
    color: #fff;
    max-width: 32rem;
}


/* El acento verde claro sobre el blanco marca dónde termina la marca y
   empieza la promesa. */




.hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border-radius: 999px;
    background: var(--t-marca-viva);
    color: #fff;
    font-weight: 800;
    font-size: .98rem;
    letter-spacing: -.015em;
    box-shadow: var(--t-halo);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.hero__cta::after { content: '→'; transition: transform .2s; }
.hero__cta:hover {
    background: var(--t-marca-viva);
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(216,30,44,.55);
}
.hero__cta:hover::after { transform: translateX(4px); }
.hero__cta:active { transform: translateY(0); }

/* Beneficios DENTRO de la portada: son parte de la promesa. En una franja
   aparte obligan a leer dos veces lo mismo. */
.hero__beneficios {
    list-style: none;
    margin: 18px 0 0;
    padding: 15px 0 0;
    border-top: 1px solid rgba(255,255,255,.16);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
}
.hero__beneficio {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .84rem;
    line-height: 1.3;
}
.hero__beneficio-icono {
    font-size: 1.24rem;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
.hero__beneficio strong { display: block; font-weight: 800; letter-spacing: -.015em; }
.hero__beneficio em { display: block; font-style: normal; opacity: .72; font-size: .78rem; }

/* Sello de envío gratis: apoyado sobre la foto porque es el argumento que
   más mueve la primera compra. */





@media (max-width: 640px) {
    .hero { min-height: 0; }
    .hero__texto { padding: 22px 20px 20px; }
    .hero { flex-direction: column; align-items: stretch; }
    .hero__beneficios { gap: 12px 20px; }
    .hero__beneficio { flex: 1 1 calc(50% - 10px); min-width: 130px; }
}

@media (min-width: 900px) {
    .hero { min-height: 260px; }
    .hero__texto { padding: 34px 40px 32px; }
    .hero__beneficios { gap: 16px 34px; flex-wrap: nowrap; }
}

/* ═══════ Promociones ═══════════════════════════════════════════════════ */
.promo-banda {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    margin: 0 -18px;
    padding-inline: 18px;
    scrollbar-width: none;
}
.promo-banda::-webkit-scrollbar { display: none; }

.promo-card {
    position: relative;
    flex: 0 0 min(78vw, 330px);
    scroll-snap-align: start;
    border-radius: var(--t-r-lg);
    overflow: hidden;
    min-height: 152px;
    background: linear-gradient(135deg, #2B0C11 0%, var(--t-marca-oscura) 100%);
    display: flex;
    align-items: flex-end;
    box-shadow: var(--t-sombra);
    isolation: isolate;
}
.promo-card__foto {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
}
.promo-card::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.72) 100%);
}
.promo-card__texto { padding: 18px; color: #fff; }
.promo-card__titulo {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.03em;
}
.promo-card__sub { margin: 0; font-size: .84rem; opacity: .92; }

/* ═══════ Categorías ═══════════════════════════════════════════════════
   Las fichas grandes con foto (.category-tile) se retiraron de la portada:
   ocupaban media pantalla y repetían los nombres que el catálogo de abajo
   ya muestra. Se conservan sus estilos porque categoria.php sigue
   usándolos; la portada ahora navega con la tira compacta .catnav.
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════ Categorías ════════════════════════════════════════════════════ */
.category-grid-pub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 13px;
}
.category-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--t-r-lg);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-shadow: var(--t-sombra);
    transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s;
    isolation: isolate;
}
.category-tile:hover { transform: translateY(-3px); box-shadow: var(--t-sombra-alta); }
.category-tile:active { transform: translateY(0) scale(.985); }

.category-tile img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.category-tile:hover img { transform: scale(1.05); }

/* Color de respaldo cuando la categoría no tiene foto: no queda un hueco
   gris, queda un bloque con la identidad de esa categoría. */
/* Categoría sin foto: el color que eligió el dueño, pero oscurecido con un
   degradado. Sin esto, media rejilla eran bloques planos de naranja, azul y
   rosa saturados junto a fotos reales: parecían de dos sitios distintos.
   Con el degradado leen como una familia y el texto blanco siempre contrasta. */
.category-tile__color {
    position: absolute; inset: 0; z-index: -3;
    display: grid; place-items: center;
    font-size: 2.6rem;
}
.category-tile__color::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.55) 100%);
}
.category-tile__color span {
    position: relative;
    z-index: 1;
    opacity: .9;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* El degradado ES el contenedor del texto y lo empuja al fondo.
   Antes el overlay era sólo un `inset: 0` decorativo y el nombre acababa
   pegado ARRIBA a la izquierda, justo donde el degradado es transparente:
   sobre una foto clara (la de Carne) el texto blanco no se leía. */
.category-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    padding: 14px 15px 13px;
    background: linear-gradient(180deg,
        rgba(6,26,18,0) 30%,
        rgba(6,26,18,.42) 62%,
        rgba(6,26,18,.86) 100%);
}
.category-tile__nombre {
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.028em;
    line-height: 1.2;
    text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.category-tile__conteo {
    font-size: .76rem;
    font-weight: 700;
    color: rgba(255,255,255,.78);
    text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

/* ═══════ Tarjeta de producto ═══════════════════════════════════════════ */
.product-grid-pub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 13px;
}
@media (max-width: 400px) {
    .product-grid-pub { grid-template-columns: repeat(2, 1fr); gap: 11px; }
}

.pp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-lg);
    overflow: hidden;
    transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, border-color .16s;
}
.pp-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--t-sombra-alta);
}

.pp-card__photo-wrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--t-linea-tenue);
    overflow: hidden;
}
.pp-card__photo-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .38s cubic-bezier(.2,.8,.3,1);
}
.pp-card:hover .pp-card__photo-wrap img { transform: scale(1.06); }

/* Producto sin foto: en vez de un icono roto, una trama discreta con la
   inicial. Se ve intencional, no incompleto. */
.pp-card__photo-wrap--vacia {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(45deg,
            var(--t-linea-tenue) 0 10px,
            #202027 10px 20px);
    color: var(--t-tinta-suave);
    font-size: 1.9rem;
    font-weight: 800;
    opacity: .55;
}

.pp-card__badge {
    position: absolute;
    top: 9px; left: 9px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(8,8,10,.80);
    color: var(--t-tinta);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
}
.pp-card__badge--oferta   { background: var(--t-marca); color: #fff; border-color: transparent; }
.pp-card__badge--nuevo    { background: var(--t-ambar); color: #1A1206; border-color: transparent; }
.pp-card__badge--agotado  {
    inset: 0; top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 0;
    display: grid;
    place-items: center;
    background: rgba(8,8,10,.82);
    backdrop-filter: blur(2px);
    color: var(--t-tinta-suave);
    font-size: .82rem;
}

.pp-card__body {
    padding: 10px 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}
.pp-card__marca {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--t-tinta-suave);
}
.pp-card__nombre {
    margin: 0;
    font-size: .87rem;
    font-weight: 700;
    letter-spacing: -.018em;
    line-height: 1.32;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
/* El precio manda y la unidad de venta va debajo, en su propia línea con
   alto reservado. Antes iban en la misma fila con flex-wrap: en móvil el
   "/ lb" caía a una segunda línea sólo en algunas tarjetas y el precio
   quedaba a distinta altura en cada una de la fila. */
.pp-card__precio-fila {
    margin-top: auto;
    padding-top: 8px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 7px;
    min-width: 0;
}
.pp-card__precio {
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.pp-card__precio-old {
    font-size: .8rem;
    color: var(--t-tinta-suave);
    text-decoration: line-through;
}
.pp-card__unidad {
    flex-basis: 100%;
    font-size: .72rem;
    font-weight: 600;
    color: var(--t-tinta-suave);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variante del carrusel: misma tarjeta, más compacta. No cambia el
   lenguaje visual, sólo la escala. */
.pp-card--mini .pp-card__body { padding: 10px 11px 12px; gap: 2px; }
.pp-card--mini .pp-card__nombre { font-size: .86rem; min-height: 2.3em; }
.pp-card--mini .pp-card__precio { font-size: 1.02rem; }
.pp-card--mini .pp-card__precio-fila { padding-top: 6px; }
.pp-card--mini .pp-add-btn { width: 36px; height: 36px; font-size: 1.08rem; }
.pp-card--mini .qty-control button { width: 30px; height: 30px; font-size: 1.02rem; }

/* Pulso al agregar: confirma el toque sin bloquear nada */
.pp-card.acaba-de-cambiar { animation: t-pulso-card .42s cubic-bezier(.2,1.2,.4,1); }
@keyframes t-pulso-card {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.035); box-shadow: 0 0 0 3px var(--t-marca-tenue), var(--t-sombra-alta); }
    100% { transform: scale(1); }
}

/* Agotado: la tarjeta se apaga, no se esconde. El cliente ve que existe. */
.pp-card.esta-agotado .pp-card__photo-wrap img { filter: grayscale(1); opacity: .55; }
.pp-card.esta-agotado .pp-card__precio { color: var(--t-tinta-suave); }

/* Botón agregar: círculo flotante sobre la foto. Un toque, siempre en el
   mismo sitio, alcanzable con el pulgar en cualquier tamaño de pantalla. */
/* El control de compra vive SOBRE la foto, anclado abajo a la derecha.
   Siempre en el mismo sitio, sin depender del largo del nombre ni del
   precio, y al alcance del pulgar en cualquier tamaño de pantalla. */
.controles-cantidad {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
}

.pp-add-btn {
    width: 37px; height: 37px;
    border: 0;
    border-radius: 50%;
    background: var(--t-marca);
    color: #fff;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(216,30,44,.45), 0 0 0 3px rgba(8,8,10,.88);
    transition: transform .15s cubic-bezier(.2,1.5,.4,1), background .15s;
}
/* Cuando lleva cantidad habitual ("+2") el texto es más corto de fuente */
.pp-add-btn:not(:disabled) { font-variant-numeric: tabular-nums; }
.pp-add-btn:hover:not(:disabled)  { background: var(--t-marca-viva); transform: scale(1.09); }
.pp-add-btn:active:not(:disabled) { transform: scale(.9); }
.pp-add-btn.esta-hecho { background: var(--t-marca-viva); transform: scale(1.12); }
.pp-add-btn:disabled {
    background: rgba(30,30,36,.94);
    color: var(--t-tinta-suave);
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    cursor: default;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 1px;
    background: var(--t-marca);
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 4px 14px rgba(216,30,44,.45), 0 0 0 3px rgba(8,8,10,.88);
}
.qty-control button {
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.16rem;
    font-weight: 700;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .13s;
}
.qty-control button:hover { background: rgba(255,255,255,.22); }
.qty-control button:active { background: rgba(255,255,255,.34); }
.qty-control span {
    min-width: 22px;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
}

/* ═══════ Carrusel horizontal ═══════════════════════════════════════════ */
/* Las tarjetas del carrusel son las MISMAS del grid, sólo más estrechas.
   Antes había un componente aparte (.mini-card) con foto de 46 px y el
   nombre cortado: en la misma pantalla convivían dos formas distintas de
   mostrar un producto y la del carrusel se veía claramente más pobre.
   Ese componente se eliminó por completo. */
.hscroll {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 18px;
    padding-bottom: 10px;
    margin: 0 -18px;
    padding-inline: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { flex: 0 0 146px; scroll-snap-align: start; }

@media (min-width: 900px) {
    .hscroll > * { flex-basis: 166px; }
}

/* ═══════ Banner de repetir pedido ══════════════════════════════════════ */
/* Es el atajo más valioso de la tienda: un cliente que vuelve no debería
   tener que rearmar su compra producto por producto. Por eso tiene peso
   visual propio, pero en verde suave — no compite con la portada. */
.repetir-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--t-r-lg);
    background: linear-gradient(115deg, var(--t-marca-tenue) 0%, #17171C 100%);
    border: 1px solid var(--t-marca-borde);
}
.repetir-banner__icono {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--t-panel);
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.repetir-banner__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.repetir-banner__text strong {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.028em;
}
.repetir-banner__sub {
    font-size: .85rem;
    color: var(--t-tinta-suave);
    line-height: 1.35;
}

@media (max-width: 480px) {
    .repetir-banner { flex-wrap: wrap; }
    .repetir-banner__text { flex-basis: calc(100% - 56px); }
    .repetir-banner .btn-secundario { flex: 1 1 100%; }
}

/* ═══════ Botones ═══════════════════════════════════════════════════════ */
.btn-primary {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: var(--t-r-md);
    background: var(--t-marca);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.015em;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-shadow: 0 3px 14px rgba(216,30,44,.30);
}
.btn-primary:hover:not(:disabled)  { background: var(--t-marca-oscura); box-shadow: 0 8px 24px rgba(216,30,44,.42); }
.btn-primary:active:not(:disabled) { transform: scale(.99); }
.btn-primary:disabled {
    background: var(--t-linea);
    color: var(--t-tinta-suave);
    box-shadow: none;
    cursor: not-allowed;
}

.btn-secundario {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-md);
    background: var(--t-panel);
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.btn-secundario:hover { border-color: var(--t-marca); background: var(--t-marca-tenue); }

.btn-secundario--acento {
    background: var(--t-marca);
    border-color: var(--t-marca);
    color: #fff;
    box-shadow: 0 3px 12px rgba(216,30,44,.30);
}
.btn-secundario--acento:hover { background: var(--t-marca-oscura); border-color: var(--t-marca-oscura); color: #fff; }

/* ═══════ Barra de carrito flotante ═════════════════════════════════════ */
.cart-bar {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 90;
    width: min(calc(100vw - 28px), 620px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 15px 13px 21px;
    border-radius: 999px;
    background: var(--t-marca);
    color: #fff;
    box-shadow: 0 10px 34px rgba(216,30,44,.45);
    animation: t-subir-barra .26s cubic-bezier(.2,1.2,.4,1);
}
@keyframes t-subir-barra {
    from { transform: translate(-50%, 22px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}
.cart-bar__izq  { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cart-bar__info { font-size: .76rem; opacity: .88; font-weight: 600; }
/* El total va en una pastilla blanca a la derecha: se lee como el botón de
   "pagar" de cualquier app de delivery, aunque toda la barra sea el enlace.
   Antes era texto blanco sobre verde y no invitaba a tocarlo. */
.cart-bar__total {
    margin-left: auto;
    padding: 11px 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--t-marca-oscura);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background .15s;
}
.cart-bar:hover .cart-bar__total { background: #F2E3E4; }
.cart-bar:active { transform: translate(-50%, 1px); }

.cart-bar__sub {
    font-size: .78rem;
    opacity: .9;
    font-weight: 700;
}
.cart-bar__sub::after { content: ' →'; }

/* ═══════ Checkout ══════════════════════════════════════════════════════ */
.envio-progreso {
    padding: 15px 18px;
    border-radius: var(--t-r-lg);
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
}
.envio-progreso__texto {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    font-size: .86rem;
    font-weight: 700;
}
.envio-progreso__falta { color: var(--t-marca-texto); white-space: nowrap; }
.envio-progreso__riel {
    height: 8px;
    border-radius: 999px;
    background: var(--t-linea-tenue);
    overflow: hidden;
}
.envio-progreso__barra {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--t-marca), var(--t-marca-viva));
    transition: width .5s cubic-bezier(.2,.8,.3,1);
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--t-linea-tenue);
    font-size: .92rem;
}
.checkout-item:last-of-type { border-bottom: 0; }

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: .93rem;
    color: var(--t-tinta-suave);
}
.checkout-totales { margin-top: 4px; }

.checkout-total-row.grand {
    margin-top: 9px;
    padding-top: 14px;
    border-top: 2px solid var(--t-marca);
    font-size: 1.24rem;
    font-weight: 800;
    color: var(--t-tinta);
    letter-spacing: -.035em;
}

/* Campos con etiqueta flotante discreta: se lee como formulario de app,
   no como formulario de plantilla. */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label {
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t-tinta-suave);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-md);
    background: var(--t-panel);
    font-size: .97rem;
    color: var(--t-tinta);
    transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--t-marca);
    box-shadow: 0 0 0 4px var(--t-marca-tenue);
}
.field input[aria-invalid="true"] { border-color: var(--t-alerta); }

/* ═══════ Seguimiento del pedido ════════════════════════════════════════ */
.seguimiento {
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-xl);
    padding: 26px 22px;
    box-shadow: var(--t-sombra);
}
.seguimiento__cabecera { text-align: center; margin-bottom: 30px; }
.seguimiento__titulo {
    margin: 0 0 6px;
    font-size: clamp(1.4rem, 4.6vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.15;
}
.seguimiento__numero {
    margin: 0 0 12px;
    font-size: .84rem;
    color: var(--t-tinta-suave);
    font-weight: 700;
}
.seguimiento__eta {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    background: var(--t-marca-tenue);
    color: var(--t-marca-texto);
    font-size: .86rem;
    font-weight: 800;
}

/* La línea de tiempo es lo que convierte "tu pedido está preparando" en
   algo que se siente vivo. El relleno crece con el estado real. */
.linea-tiempo {
    position: relative;
    padding-left: 34px;
}
.linea-tiempo::before {
    content: '';
    position: absolute;
    left: 11px; top: 9px; bottom: 22px;
    width: 3px;
    border-radius: 999px;
    background: var(--t-linea);
}
.linea-tiempo__relleno {
    position: absolute;
    left: 11px; top: 9px;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--t-marca), var(--t-marca-viva));
    transition: height .7s cubic-bezier(.3,.9,.4,1);
    z-index: 1;
}

.paso { position: relative; padding-bottom: 26px; }
.paso:last-child { padding-bottom: 0; }
.paso__punto {
    position: absolute;
    left: -34px; top: 0;
    width: 25px; height: 25px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--t-fondo);
    border: 3px solid var(--t-linea);
    color: transparent;
    font-size: .72rem;
    font-weight: 800;
    z-index: 2;
    transition: background .3s, border-color .3s, color .3s;
}
.paso__titulo {
    margin: 1px 0 3px;
    font-size: .99rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--t-tinta-suave);
    transition: color .3s;
}
.paso__detalle { margin: 0; font-size: .85rem; color: var(--t-tinta-suave); opacity: .85; }

.paso.esta-hecho .paso__punto {
    background: var(--t-marca);
    border-color: var(--t-marca);
    color: #fff;
}
.paso.esta-hecho .paso__titulo { color: var(--t-tinta); }

.paso.esta-activo .paso__punto {
    background: var(--t-marca);
    border-color: var(--t-marca);
    color: #fff;
    box-shadow: 0 0 0 6px var(--t-marca-tenue);
    animation: t-pulso 2s ease-in-out infinite;
}
.paso.esta-activo .paso__titulo {
    color: var(--t-tinta);
    font-weight: 800;
    font-size: 1.06rem;
}
@keyframes t-pulso {
    0%, 100% { box-shadow: 0 0 0 6px var(--t-marca-tenue); }
    50%      { box-shadow: 0 0 0 11px rgba(216,30,44,.16); }
}

.paso.esta-cancelado .paso__punto {
    background: var(--t-alerta);
    border-color: var(--t-alerta);
    color: #fff;
}
.paso.esta-cancelado .paso__titulo { color: var(--t-marca-texto); }

/* ═══════ Estados vacíos y esqueletos ═══════════════════════════════════ */
.empty-store {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 46px 24px;
    text-align: center;
    color: var(--t-tinta-suave);
    font-size: .93rem;
    line-height: 1.6;
    background: var(--t-panel);
    border: 1px dashed var(--t-linea);
    border-radius: var(--t-r-lg);
}
.empty-store p { margin: 0; }
.empty-store strong {
    display: block;
    font-size: 1.04rem;
    color: var(--t-tinta);
    letter-spacing: -.025em;
}
.empty-store .btn-secundario,
.empty-store a { margin-top: 12px; text-decoration: none; display: inline-flex; align-items: center; }

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 13px;
}
.skeleton-card {
    border-radius: var(--t-r-lg);
    background: linear-gradient(90deg, var(--t-linea-tenue) 25%, #23232B 50%, var(--t-linea-tenue) 75%);
    background-size: 200% 100%;
    animation: t-brillo 1.4s linear infinite;
    aspect-ratio: 3 / 4;
}
.skeleton-card--cat { aspect-ratio: 5 / 4; }
@keyframes t-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ═══════ Accesibilidad de movimiento ═══════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════ Escritorio ════════════════════════════════════════════════════ */
body.tiene-carrito .store-page { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
    .hero { min-height: 280px; }
    .hero__texto { padding: 40px 42px 38px; max-width: 32rem; }
    .product-grid-pub { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 16px; }
    .category-grid-pub { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   CARRITO EDITABLE
   -----------------------------------------------------------------------
   Antes el carrito era una lista de sólo lectura: "2 × Cerveza  RD$300".
   Una vez agregado un producto no había forma de quitarlo ni de cambiar la
   cantidad. Ahora cada línea es una tarjeta con controles del tamaño de un
   dedo, editable hasta el último segundo antes de enviar.
   ═══════════════════════════════════════════════════════════════════════ */

.ck-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.ck-cabecera .section-title { margin-bottom: 2px; }
.ck-conteo { margin: 0; font-size: .85rem; color: var(--t-tinta-suave); font-weight: 600; }

.ck-vaciar {
    flex-shrink: 0;
    border: 0;
    background: none;
    padding: 6px 2px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--t-tinta-suave);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}
.ck-vaciar:hover { color: var(--t-alerta); }

/* ── Línea del carrito ─────────────────────────────────────────────────
   Tarjeta horizontal: foto · nombre · controles · total · papelera.
   El mismo orden en móvil y escritorio, para que el gesto sea idéntico. */
/* En móvil el nombre necesita TODO el ancho: con la cantidad y el total al
   lado, "Brugal extra viejo" se partía en tres líneas y la tarjeta crecía
   más que la foto. Los controles bajan a su propia fila, que además es
   donde el pulgar llega mejor. */
.ck-linea {
    position: relative;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    grid-template-areas:
        "foto info"
        "acciones acciones";
    align-items: center;
    gap: 12px 14px;
    padding: 14px;
    margin-bottom: 11px;
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-lg);
    box-shadow: var(--t-sombra);
    transform-origin: center top;
    animation: ck-entra .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes ck-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* Salida: se encoge y desvanece antes de desaparecer del estado. Sin esto
   la lista da un salto seco y el cliente duda de cuál borró. */
.ck-linea.se-va {
    animation: ck-sale .22s cubic-bezier(.4,0,.7,.2) forwards;
}
@keyframes ck-sale {
    to {
        opacity: 0;
        transform: scale(.92);
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        max-height: 0;
        border-width: 0;
    }
}

.ck-linea__foto {
    grid-area: foto;
    width: 68px; height: 68px;
    border-radius: var(--t-r-md);
    overflow: hidden;
    background: var(--t-linea-tenue);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.ck-linea__foto img { width: 100%; height: 100%; object-fit: cover; }
.ck-linea__sinfoto {
    font-size: 1.5rem; font-weight: 800; color: var(--t-tinta-suave); opacity: .5;
}

.ck-linea__info { grid-area: info; min-width: 0; padding-right: 34px; }
.ck-linea__nombre {
    margin: 0 0 3px;
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}
.ck-linea__unitario { margin: 0; font-size: .8rem; color: var(--t-tinta-suave); }

.ck-linea__acciones {
    grid-area: acciones;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 2px;
    border-top: 1px solid var(--t-linea-tenue);
    margin-top: 2px;
}
.ck-linea__total {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Control de cantidad ───────────────────────────────────────────────
   40 px de lado: por debajo de eso, en un teléfono se falla el toque y el
   cliente acaba sumando cuando quería restar. */
.ck-cantidad {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--t-fondo);
    border: 1px solid var(--t-linea);
    border-radius: 999px;
    padding: 3px;
}
.ck-cantidad__btn {
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: var(--t-panel);
    color: var(--t-marca-texto);
    font-size: 1.24rem;
    font-weight: 800;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .14s, transform .1s, color .14s;
}
.ck-cantidad__btn:hover  { background: var(--t-marca-tenue); }
.ck-cantidad__btn:active { transform: scale(.88); }
.ck-cantidad__valor {
    min-width: 52px;
    text-align: center;
    font-weight: 800;
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

/* La papelera va en la esquina, discreta: quitar es una acción secundaria
   frente a ajustar la cantidad, que es lo que se hace más a menudo. */
.ck-linea__quitar {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: .92rem;
    line-height: 1;
    cursor: pointer;
    opacity: .38;
    display: grid;
    place-items: center;
    transition: opacity .15s, background .15s, transform .12s;
}
.ck-linea__quitar:hover  { opacity: 1; background: var(--t-alerta-tenue); }
.ck-linea__quitar:active { transform: scale(.86); }

@media (min-width: 720px) {
    /* En escritorio sí hay ancho para todo en una fila: la tarjeta baja de
       alto y se leen más productos de un vistazo. */
    .ck-linea {
        grid-template-columns: 78px minmax(0, 1fr) auto auto;
        grid-template-areas: "foto info acciones quitar";
        gap: 18px;
        padding: 16px;
    }
    .ck-linea__foto { width: 78px; height: 78px; }
    .ck-linea__info { padding-right: 0; }
    /* Columnas de ancho FIJO para cantidad y total. Con `justify-content:
       flex-end` cada fila se alineaba según lo largo que fuera su precio:
       "RD$1,200.00" empujaba su control de cantidad más a la izquierda que
       el de "RD$300.00", y la columna quedaba en zigzag. */
    .ck-linea__acciones {
        display: grid;
        grid-template-columns: 132px 128px;
        align-items: center;
        gap: 24px;
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
    .ck-linea__total { text-align: right; }
    .ck-linea__quitar {
        grid-area: quitar;
        position: static;
        width: 38px; height: 38px;
        font-size: 1rem;
        opacity: .45;
    }
}

/* ── Carrito vacío ─────────────────────────────────────────────────────
   Con salida clara. Antes era un párrafo suelto: quien llegaba aquí por
   error se quedaba mirando una pantalla muerta. */
.ck-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 52px 26px;
    background: var(--t-panel);
    border: 1px dashed var(--t-linea);
    border-radius: var(--t-r-xl);
}
.ck-vacio__icono {
    font-size: 3.1rem;
    margin-bottom: 14px;
    opacity: .85;
    animation: ck-flota 3.2s ease-in-out infinite;
}
@keyframes ck-flota {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
.ck-vacio__titulo {
    margin: 0 0 6px;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.032em;
}
.ck-vacio__texto {
    margin: 0 0 22px;
    font-size: .92rem;
    color: var(--t-tinta-suave);
    line-height: 1.55;
    max-width: 32ch;
}
.ck-vacio__btn { width: auto; min-width: 210px; padding: 0 30px; }

/* ── Confirmación de vaciado ───────────────────────────────────────────
   Quitar UN producto no pregunta (se deshace volviéndolo a agregar).
   Vaciar todo sí: es irreversible y de un solo toque. */
.ck-confirm {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(0,0,0,.74);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .18s;
}
.ck-confirm.esta-visible { opacity: 1; }

.ck-confirm__caja {
    width: min(100%, 380px);
    padding: 26px 24px 20px;
    background: var(--t-panel);
    border-radius: var(--t-r-xl);
    box-shadow: var(--t-sombra-alta);
    text-align: center;
    transform: scale(.94);
    transition: transform .2s cubic-bezier(.2,1.2,.4,1);
}
.ck-confirm.esta-visible .ck-confirm__caja { transform: scale(1); }

.ck-confirm__titulo {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.03em;
}
.ck-confirm__texto {
    margin: 0 0 20px;
    font-size: .89rem;
    color: var(--t-tinta-suave);
    line-height: 1.5;
}
.ck-confirm__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-confirm__acciones .btn-secundario { width: 100%; justify-content: center; }

.btn-peligro {
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--t-r-md);
    background: var(--t-alerta);
    color: #fff;
    font-weight: 800;
    font-size: .93rem;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.btn-peligro:hover  { background: var(--t-marca-oscura); }
.btn-peligro:active { transform: scale(.98); }

/* ── Botón de enviar en estado de carga ────────────────────────────────── */
.btn-primary.esta-cargando {
    position: relative;
    color: rgba(255,255,255,.85);
    cursor: wait;
}
.btn-primary.esta-cargando::after {
    content: '';
    position: absolute;
    right: 20px; top: 50%;
    width: 17px; height: 17px;
    margin-top: -9px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ck-gira .7s linear infinite;
}
@keyframes ck-gira { to { transform: rotate(360deg); } }

/* La barra de envío gratis celebra al completarse */
.envio-progreso.esta-completo {
    border-color: rgba(216,30,44,.42);
    background: linear-gradient(115deg, var(--t-marca-tenue) 0%, #17171C 100%);
}
.envio-progreso.esta-completo .envio-progreso__texto { color: var(--t-marca-texto); }

@media (prefers-reduced-motion: reduce) {
    .ck-linea, .ck-vacio__icono, .ck-confirm__caja { animation: none; transition: none; }
    .ck-linea.se-va { animation-duration: .01ms; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CATÁLOGO COMPLETO POR CATEGORÍAS
   -----------------------------------------------------------------------
   Antes la portada terminaba en las fichas de categoría, y para ver un solo
   producto había que entrar en una. Eso es una pantalla de más entre el
   cliente y su compra. Ahora la licorería entera baja aquí, una sección por
   categoría, y las fichas de arriba quedan como atajo.

   MÓVIL: scroll horizontal por sección. Vertical, ocho categorías × ocho
   productos serían sesenta y cuatro tarjetas apiladas y el dedo no llega
   nunca al final.
   ESCRITORIO: rejilla. Hay ancho de sobra y ver la sección completa de un
   vistazo es más rápido que arrastrar de lado.
   ═══════════════════════════════════════════════════════════════════════ */

.catalogo-seccion { margin-top: 24px; }
.catalogo-seccion:first-child { margin-top: 0; }

.catalogo-seccion__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.catalogo-seccion__head .section-title { margin-bottom: 0; }

.catalogo-seccion__ver {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--t-marca-tenue);
    color: var(--t-marca-texto);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition: background .15s, transform .12s;
}
.catalogo-seccion__ver::after { content: '→'; transition: transform .18s; }
.catalogo-seccion__ver:hover { background: var(--t-marca); color: #fff; }
.catalogo-seccion__ver:hover::after { transform: translateX(3px); }
.catalogo-seccion__ver:active { transform: scale(.97); }

/* Móvil: carrusel con desbordamiento a sangre */
.catalogo-seccion__productos {
    display: flex;
    gap: 13px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 18px;
    padding-bottom: 10px;
    margin: 0 -18px;
    padding-inline: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.catalogo-seccion__productos::-webkit-scrollbar { display: none; }
.catalogo-seccion__productos > * { flex: 0 0 149px; scroll-snap-align: start; }

/* Tarjeta final del carrusel que lleva a la categoría completa: cierra el
   recorrido en vez de dejar al dedo chocando contra el último producto. */
.catalogo-mas {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 100%;
    border: 1px dashed var(--t-linea);
    border-radius: var(--t-r-lg);
    background: var(--t-panel);
    color: var(--t-marca-texto);
    font-size: .86rem;
    font-weight: 800;
    text-align: center;
    padding: 20px 12px;
    transition: border-color .15s, background .15s;
}
.catalogo-mas:hover { border-color: var(--t-marca); background: var(--t-marca-tenue); }
.catalogo-mas__flecha {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--t-marca-tenue);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    transition: transform .2s;
}
.catalogo-mas:hover .catalogo-mas__flecha { transform: translateX(3px); }

@media (min-width: 760px) {
    /* Escritorio: rejilla. Hay ancho de sobra y ver la sección entera de un
       vistazo es más rápido que arrastrar de lado. */
    .catalogo-seccion__productos {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
        gap: 16px;
        overflow: visible;
        margin: 0;
        padding: 0;
    }
    .catalogo-seccion__productos > * { flex: none; }
    .catalogo-mas { min-height: 240px; }
}

.skeleton-line-title {
    height: 26px;
    width: 180px;
    border-radius: var(--t-r-sm);
    margin-bottom: 16px;
    background: linear-gradient(90deg, var(--t-linea-tenue) 25%, #23232B 50%, var(--t-linea-tenue) 75%);
    background-size: 200% 100%;
    animation: t-brillo 1.4s linear infinite;
}

/* ═══════ Franja de confianza ═══════════════════════════════════════════
   Cierra la página respondiendo las dudas de quien nunca ha pedido aquí:
   qué hay, quién atiende, cómo se paga, qué garantía tiene. */
.confianza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-top: var(--t-ritmo);
    padding: 20px 20px;
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-xl);
    box-shadow: var(--t-sombra);
}
.confianza__item { display: flex; align-items: center; gap: 13px; }
.confianza__icono {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: var(--t-marca-tenue);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}
.confianza__item strong {
    display: block;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: -.024em;
    line-height: 1.25;
}
.confianza__item span:not(.confianza__icono) {
    display: block;
    font-size: .8rem;
    color: var(--t-tinta-suave);
    line-height: 1.35;
}

@media (max-width: 520px) {
    .confianza { grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 20px 16px; }
    .confianza__item { flex-direction: column; align-items: flex-start; gap: 9px; }
    .confianza__icono { width: 38px; height: 38px; font-size: 1.05rem; }
    .confianza__item strong { font-size: .86rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TIRA DE CATEGORÍAS — navegación de pasillo
   -----------------------------------------------------------------------
   Sustituye a la rejilla de fichas grandes. Se queda pegada bajo la
   cabecera al desplazar, así que el cliente puede saltar de Carne a
   Limpieza sin volver arriba. La píldora activa se marca sola.
   ═══════════════════════════════════════════════════════════════════════ */
.catnav {
    position: sticky;
    /* Se pega justo bajo la cabecera. Al subir a la primera posición de la
       página, el cliente puede saltar de pasillo desde el primer segundo
       sin tener que desplazar por debajo del banner. */
    top: calc(env(safe-area-inset-top) + 56px);
    z-index: 50;
    margin: 0 -18px;
    padding: 8px 0;
    background: rgba(8,8,10,.90);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--t-linea);
}

.catnav__pista {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-inline: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.catnav__pista::-webkit-scrollbar { display: none; }

.catnav__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--t-linea);
    border-radius: 999px;
    background: var(--t-panel);
    font: inherit;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--t-tinta);
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s, border-color .16s, color .16s, transform .1s;
}
.catnav__chip:hover { border-color: var(--t-marca); }
.catnav__chip:active { transform: scale(.96); }

.catnav__chip.esta-activo {
    background: var(--t-marca);
    border-color: var(--t-marca);
    color: #fff;
}

.catnav__chip-foto,
.catnav__chip-color {
    width: 28px; height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.02em;
}

.catnav__cargando { display: flex; gap: 8px; }
.catnav__cargando span {
    width: 104px; height: 40px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--t-linea-tenue) 25%, #23232B 50%, var(--t-linea-tenue) 75%);
    background-size: 200% 100%;
    animation: t-brillo 1.4s linear infinite;
}

/* El título de cada sección tiene que quedar por debajo de la cabecera y de
   la tira al saltar; sin esto el nombre queda tapado justo al llegar. */
.catalogo-seccion[id] { scroll-margin-top: 132px; }

/* El conteo va PEGADO al título; el enlace "Ver todo" se va al extremo
   derecho. El `margin-left: auto` en el enlace es lo que los separa: con
   `space-between` en el contenedor, el conteo quedaba a 1200 px del nombre
   de la sección en escritorio y no se leía como parte de ella. */
.catalogo-seccion__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 11px;
}
/* El enlace nunca se comprime; el título sí puede envolver en dos líneas
   ("Lácteos y embutidos") sin empujarlo fuera de la tarjeta. */
.catalogo-seccion__ver { margin-left: auto; flex-shrink: 0; }
.catalogo-seccion__head .section-title { min-width: 0; }
.catalogo-seccion__conteo { flex-shrink: 0; }

@media (max-width: 420px) {
    .catalogo-seccion__ver { padding: 7px 12px; font-size: .78rem; }
}

.catalogo-seccion__conteo {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--t-linea-tenue);
    color: var(--t-tinta-suave);
    font-size: .74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   REPETIR PEDIDO — se presenta y se aparta
   ═══════════════════════════════════════════════════════════════════════ */
.repetir__abierto {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: var(--t-r-lg);
    background: linear-gradient(115deg, var(--t-marca-tenue) 0%, #17171C 100%);
    border: 1px solid var(--t-marca-borde);
}
.repetir.se-pliega { animation: rp-plegar .26s ease-in forwards; }
@keyframes rp-plegar {
    to { opacity: 0; transform: scale(.96) translateY(-8px); max-height: 0; margin: 0; }
}
.repetir__icono {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--t-panel);
    font-size: 1.14rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.repetir__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.repetir__text strong { font-size: .96rem; font-weight: 800; letter-spacing: -.026em; }
.repetir__sub { font-size: .82rem; color: var(--t-tinta-suave); line-height: 1.35; }
.repetir__cerrar {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border: 0; border-radius: 50%;
    background: none;
    color: var(--t-tinta-suave);
    font-size: .84rem;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s, background .15s;
}
.repetir__cerrar:hover { opacity: 1; background: rgba(255,255,255,.08); }

/* Plegado: píldora flotante. No desaparece, sólo deja de robar espacio. */
.repetir-pill {
    position: fixed;
    left: 14px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 80;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    border: 1px solid var(--t-marca-borde);
    border-radius: 999px;
    background: var(--t-panel);
    color: var(--t-marca-texto);
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--t-sombra-alta);
    animation: rp-entra .3s cubic-bezier(.2,1.2,.4,1) both;
    transition: transform .14s;
}
@keyframes rp-entra { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.repetir-pill:hover  { transform: translateY(-2px); }
.repetir-pill:active { transform: scale(.96); }

@media (max-width: 420px) {
    .repetir-pill__texto { display: none; }
    .repetir-pill { padding: 13px 15px; font-size: 1.05rem; }
}
@media (min-width: 900px) { .repetir-pill { bottom: 26px; } }

@media (max-width: 480px) {
    .repetir__abierto { flex-wrap: wrap; }
    .repetir__text { flex-basis: calc(100% - 100px); }
    .repetir__abierto .btn-secundario { flex: 1 1 100%; order: 3; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOJA INFERIOR — selector de peso
   Se abre desde abajo, no centrada: en un teléfono la parte baja de la
   pantalla es la que alcanza el pulgar.
   ═══════════════════════════════════════════════════════════════════════ */
.hoja {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,.74);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .22s;
}
.hoja.esta-visible { opacity: 1; }
body.hoja-abierta { overflow: hidden; }

.hoja__panel {
    width: min(100%, 480px);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--t-panel);
    border-radius: var(--t-r-xl) var(--t-r-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2,.9,.3,1);
}
.hoja.esta-visible .hoja__panel { transform: none; }

@media (min-width: 700px) {
    .hoja { align-items: center; }
    .hoja__panel { border-radius: var(--t-r-xl); max-height: 84vh; }
    .hoja.esta-visible .hoja__panel { transform: scale(1); }
    .hoja__panel { transform: scale(.94); }
    .hoja__asa { display: none; }
}

.hoja__asa {
    width: 42px; height: 4px;
    margin: 10px auto 4px;
    border-radius: 999px;
    background: var(--t-linea);
}

.hoja__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--t-linea-tenue);
}
.hoja__foto { width: 58px; height: 58px; border-radius: var(--t-r-md); object-fit: cover; flex-shrink: 0; }
.hoja__titulo { margin: 0 0 2px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.032em; line-height: 1.2; }
.hoja__precio { margin: 0; font-size: .87rem; color: var(--t-tinta-suave); font-weight: 600; }

.hoja__cuerpo { padding: 18px 20px 6px; }
.hoja__etiqueta {
    margin: 0 0 11px;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t-tinta-suave);
}

.peso-rapidos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.peso-chip {
    flex: 1 1 auto;
    min-width: 72px;
    min-height: 46px;
    border: 1.5px solid var(--t-linea);
    border-radius: var(--t-r-md);
    background: var(--t-panel);
    font: inherit;
    font-size: .92rem;
    font-weight: 800;
    color: var(--t-tinta);
    cursor: pointer;
    transition: border-color .14s, background .14s, color .14s, transform .1s;
}
.peso-chip:hover  { border-color: var(--t-marca); }
.peso-chip:active { transform: scale(.96); }
.peso-chip.esta-activo {
    background: var(--t-marca);
    border-color: var(--t-marca);
    color: #fff;
}

.peso-manual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid var(--t-linea);
    border-radius: 999px;
    background: var(--t-fondo);
    margin-bottom: 16px;
}
.peso-manual__btn {
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: var(--t-panel);
    color: var(--t-marca-texto);
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    transition: background .14s, transform .1s;
}
.peso-manual__btn:hover  { background: var(--t-marca-tenue); }
.peso-manual__btn:active { transform: scale(.9); }
.peso-manual__valor {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}
.peso-manual__valor em { font-style: normal; font-size: .92rem; color: var(--t-tinta-suave); font-weight: 700; }

.peso-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 8px;
    font-size: .9rem;
    color: var(--t-tinta-suave);
    font-weight: 600;
}
.peso-total strong {
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--t-tinta);
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
.peso-aviso {
    margin: 0;
    font-size: .78rem;
    color: var(--t-tinta-suave);
    line-height: 1.45;
    opacity: .85;
}

.hoja__pie { padding: 16px 20px 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   TOQUES PREMIUM
   ═══════════════════════════════════════════════════════════════════════ */

/* Toda la tarjeta agrega: el cursor lo anuncia */
.pp-card.es-tocable { cursor: pointer; }
.pp-card.es-tocable:active { transform: scale(.985); }

/* Pulso al agregar desde la tarjeta */
.pp-card.acaba-de-cambiar { animation: pp-pulso .45s cubic-bezier(.2,1.2,.4,1); }
@keyframes pp-pulso {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.035); box-shadow: 0 0 0 3px var(--t-marca-tenue), var(--t-sombra-alta); }
    100% { transform: scale(1); }
}

/* Contador de la cabecera y total del carrito */
.header-cart__conteo.acaba-de-cambiar { animation: t-pop .34s cubic-bezier(.2,1.5,.4,1); }
.cart-bar__total.acaba-de-cambiar { animation: cb-total .38s cubic-bezier(.2,1.3,.4,1); }
@keyframes cb-total {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.09); }
    100% { transform: scale(1); }
}

/* Celebración al alcanzar el envío gratis: un destello, no confeti */
.envio-progreso.celebra { animation: env-celebra .8s cubic-bezier(.2,.9,.3,1); }
@keyframes env-celebra {
    0%   { box-shadow: 0 0 0 0 rgba(216,30,44,.50); }
    55%  { box-shadow: 0 0 0 12px rgba(216,30,44,0); }
    100% { box-shadow: none; }
}

/* Aviso de datos recordados en el checkout */
.ck-recordado {
    margin: -6px 0 16px;
    padding: 10px 14px;
    border-radius: var(--t-r-md);
    background: var(--t-marca-tenue);
    color: var(--t-marca-texto);
    font-size: .83rem;
    font-weight: 700;
}

/* Aparición al desplazar. Corta y sutil: si se nota, molesta. */
/* Sin la clase `js-listo` en <html> el contenido se ve tal cual. Si el
   JavaScript falla al cargar, la portada sigue siendo usable en vez de
   quedar en blanco. */
.aparece { opacity: 1; }

html.js-listo .aparece {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s cubic-bezier(.2,.8,.3,1), transform .45s cubic-bezier(.2,.8,.3,1);
    will-change: opacity, transform;
}
html.js-listo .aparece.ya-aparecio { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    .aparece { opacity: 1; transform: none; transition: none; }
    .hoja__panel, .repetir-pill, .pp-card.acaba-de-cambiar,
    .cart-bar__total.acaba-de-cambiar, .envio-progreso.celebra { animation: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SELECTOR DE VARIANTES
   -----------------------------------------------------------------------
   Filas grandes tipo radio, no un <select>. Un desplegable nativo esconde
   las opciones hasta que se toca y no deja ver los precios de un vistazo,
   que es justo lo que el cliente necesita para decidir.
   ═══════════════════════════════════════════════════════════════════════ */
.variantes { display: flex; flex-direction: column; gap: 9px; }

.variante {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 58px;
    padding: 12px 16px;
    border: 1.5px solid var(--t-linea);
    border-radius: var(--t-r-md);
    background: var(--t-panel);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
}
.variante:hover:not([disabled]) { border-color: var(--t-marca); }
.variante:active:not([disabled]) { transform: scale(.99); }

.variante__marca {
    flex-shrink: 0;
    width: 21px; height: 21px;
    border: 2px solid var(--t-linea);
    border-radius: 50%;
    position: relative;
    transition: border-color .15s;
}
.variante__marca::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--t-marca);
    transform: scale(0);
    transition: transform .18s cubic-bezier(.2,1.4,.4,1);
}

.variante__nombre {
    flex: 1;
    min-width: 0;
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.variante__precio {
    flex-shrink: 0;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

.variante.esta-activa {
    border-color: var(--t-marca);
    background: var(--t-marca-tenue);
}
.variante.esta-activa .variante__marca { border-color: var(--t-marca); }
.variante.esta-activa .variante__marca::after { transform: scale(1); }
.variante.esta-activa .variante__precio { color: var(--t-marca-texto); }

/* Agotada: se ve, pero no se elige. Esconderla haría pensar que la licorería
   no la vende nunca. */
.variante.esta-agotada {
    opacity: .5;
    cursor: not-allowed;
    background: var(--t-linea-tenue);
}
.variante.esta-agotada .variante__precio {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--t-tinta-suave);
}

/* "desde RD$125" cuando las variantes tienen precios distintos. Mostrar el
   más caro espantaría; mostrar uno cualquiera sería mentir. */
.pp-card__desde {
    font-size: .68rem;
    font-weight: 700;
    color: var(--t-tinta-suave);
    text-transform: lowercase;
}

.peso-manual__valor span { min-width: 42px; text-align: center; display: inline-block; }

/* ═══════════════════════════════════════════════════════════════════════
   TIRA DE ESTADO DEL NEGOCIO
   -----------------------------------------------------------------------
   Antes iba apretada dentro de la cabecera, compitiendo con el logo y el
   buscador, y en móvil se ocultaba entera por falta de sitio. Ahora tiene
   su propia línea bajo las categorías: se lee de un vistazo y no le quita
   espacio a nada.
   ═══════════════════════════════════════════════════════════════════════ */
/* Una sola línea, con desplazamiento lateral si no cabe. Con flex-wrap,
   "Mínimo RD$100.00" saltaba solo a una segunda línea y quedaba suelto. */
.estado-tira {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 2px;
    margin: 0 -18px;
    font-size: .8rem;
    font-weight: 700;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.estado-tira::-webkit-scrollbar { display: none; }
.estado-tira > * { flex-shrink: 0; }
.estado-tira__dato { color: var(--t-tinta-suave); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   HERO SIN TITULAR
   -----------------------------------------------------------------------
   El bloque quedó reducido a lo que decide la compra: la oferta de envío,
   el tiempo de entrega y el botón. Se lee como un banner comercial, no
   como un cartel lleno de texto.
   ═══════════════════════════════════════════════════════════════════════ */





/* Con menos texto, el bloque puede ser más bajo todavía */
.hero { min-height: 190px; }
@media (min-width: 900px) {
    .hero { min-height: 240px; }
    .hero__texto { padding: 30px 40px 28px; }
}
@media (max-width: 640px) {
    .hero__texto { padding: 20px 20px 18px; }
    .hero__beneficios { margin-top: 14px; padding-top: 13px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   HERO MÍNIMO
   -----------------------------------------------------------------------
   Sin titular, sin bloque de texto y sin botón: sólo los dos beneficios.
   Todo lo que se quitó ya estaba dicho en la tira de estado que va justo
   encima (abierto · tiempo · mínimo) o en estos mismos beneficios. El hero
   pasa a ser lo que debe ser: una imagen con dos datos, no un cartel.
   ═══════════════════════════════════════════════════════════════════════ */
.hero__beneficios--solos {
    margin: 0;
    padding: 0;
    border-top: 0;
    gap: 16px 30px;
}
.hero__beneficios--solos .hero__beneficio { font-size: .9rem; }
.hero__beneficios--solos .hero__beneficio strong { font-size: 1.02rem; }
.hero__beneficios--solos .hero__beneficio em { font-size: .82rem; opacity: .8; }
.hero__beneficios--solos .hero__beneficio-icono { font-size: 1.5rem; }

/* Mucho más bajo: ya no hay texto que sostener */
.hero { min-height: 132px; }
.hero__texto { padding: 20px 22px; }

@media (min-width: 900px) {
    .hero { min-height: 150px; }
    .hero__texto { padding: 26px 40px; }
    .hero__beneficios--solos { gap: 16px 46px; }
}
@media (max-width: 640px) {
    .hero__texto { padding: 18px 20px; }
    .hero__beneficios--solos { gap: 14px 22px; }
    .hero__beneficios--solos .hero__beneficio { flex: 1 1 calc(50% - 11px); min-width: 128px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   TIRA DE ESTADO QUE SE APARTA
   -----------------------------------------------------------------------
   Se pliega con la altura, no sólo con la opacidad: si sólo se
   desvaneciera, quedaría un hueco vacío del mismo tamaño y el contenido no
   subiría, que es justo el problema que esto viene a resolver.
   ═══════════════════════════════════════════════════════════════════════ */
.estado-tira {
    transition: opacity .22s ease, max-height .3s cubic-bezier(.4,0,.2,1),
                padding .3s cubic-bezier(.4,0,.2,1), margin .3s cubic-bezier(.4,0,.2,1);
    max-height: 60px;
    overflow-y: hidden;
}
.estado-tira.se-va {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .estado-tira { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   COCA LIQUOR — Capa de identidad
   -----------------------------------------------------------------------
   Todo lo que va debajo de esta línea es propio de la licorería y no
   existía en el núcleo: la marca de la cabecera, la portada nocturna, la
   franja de "Ofertas del día" y el pie legal.

   Va al final del archivo a propósito. Así se lee de un vistazo qué es
   núcleo reutilizable (arriba) y qué es piel de este cliente (aquí), que
   es exactamente lo que hará falta saber al montar el siguiente negocio
   sobre la misma base.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fondo global: el negro no es plano ───────────────────────────────────
   Dos luces rojas muy difusas, fijas, detrás de todo. No se "ven": lo que
   se nota es que la pantalla tiene profundidad en vez de parecer un PDF
   sobre fondo negro. Coste cero: es un gradiente pintado una sola vez. */
body {
    background:
        radial-gradient(90% 55% at 50% -8%,  rgba(216,30,44,.16) 0%, transparent 60%),
        radial-gradient(70% 45% at 105% 22%, rgba(216,30,44,.07) 0%, transparent 55%),
        var(--t-fondo);
    background-attachment: fixed;
}

::selection { background: var(--t-marca); color: #fff; }

/* La barra de scroll clara sobre un fondo negro es lo primero que delata
   una web "a la que le pusieron modo oscuro encima". */
* { scrollbar-color: #2E2E38 transparent; }

/* Chrome pinta los campos autocompletados de amarillo claro con texto
   negro, ignorando el CSS. El truco de la sombra interior es la única
   forma de forzar el fondo; sin esto, el checkout enseña tres campos
   blancos en medio de una página negra en cuanto el navegador rellena. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
    -webkit-text-fill-color: var(--t-tinta);
    -webkit-box-shadow: 0 0 0 1000px var(--t-panel) inset;
    caret-color: var(--t-tinta);
    transition: background-color 9999s ease-out;
}
.field select { appearance: none; -webkit-appearance: none; }
.field select option { background: var(--t-panel); color: var(--t-tinta); }

/* ═══════ La marca en la cabecera ═══════════════════════════════════════
   El rótulo de Coca Liquor es un logotipo horizontal, no un icono
   cuadrado. Recortarlo a 34×34 con object-fit:cover —que es lo que hacía
   la cabecera del núcleo— dejaba visible una sola letra. Aquí el logo se
   muestra entero, con la altura como única restricción. */
.store-header__brand--marca { gap: 0; }

.marca-logo {
    width: auto;
    height: 34px;
    max-width: 190px;
    object-fit: contain;
    border-radius: 0;
    display: block;
}
@media (min-width: 900px) { .marca-logo { height: 40px; max-width: 230px; } }
@media (max-width: 380px) { .marca-logo { height: 30px; max-width: 150px; } }

/* Respaldo tipográfico si algún día no hay imagen de logo cargada. */
.marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.marca-texto strong {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--t-marca-texto);
    text-transform: uppercase;
}
.marca-texto span {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .42em;
    color: var(--t-tinta-suave);
    text-transform: uppercase;
}

/* Un hilo rojo bajo la cabecera: es el detalle que ata la pantalla al
   letrero de neón del local. */
.store-header {
    border-bottom: 1px solid var(--t-linea) !important;
    box-shadow: 0 1px 0 rgba(216,30,44,.22);
}

/* ═══════ Portada nocturna ══════════════════════════════════════════════
   Una fotografía del local de noche, un velo oscuro encima y tres datos.
   Nada más. El hero de un colmado vende variedad; el de una licorería
   vende una promesa muy concreta: que llega rápido y que sigue abierto
   cuando todo lo demás cerró. */
.hero {
    min-height: 300px;
    border: 1px solid var(--t-linea);
    box-shadow: var(--t-sombra-alta);
    align-items: flex-end;
}
.hero__texto {
    padding: 26px 24px 24px;
    max-width: 38rem;
    width: 100%;
}
@media (min-width: 900px) {
    .hero { min-height: 380px; }
    .hero__texto { padding: 40px 44px 38px; }
}
@media (max-width: 640px) {
    .hero { min-height: 260px; }
    .hero__texto { padding: 22px 20px 20px; }
}

/* La foto se ancla arriba: el rótulo del local está en la parte alta de la
   fachada y con `center` desaparecía por el recorte en móvil. */
.hero__foto { object-position: 50% 34%; }

/* Datos en fila, tamaño de píldora. No es una lista de beneficios larga:
   son tres hechos, y el ojo los lee de un vistazo antes del botón. */
.hero__datos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
}
.hero__dato {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 999px;
    background: rgba(10,10,13,.62);
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: -.012em;
    white-space: nowrap;
}
.hero__dato--marca {
    background: rgba(216,30,44,.20);
    border-color: rgba(216,30,44,.55);
}
.hero__dato-icono { font-size: 1rem; line-height: 1; }

@media (max-width: 380px) {
    .hero__dato { padding: 7px 12px; font-size: .78rem; }
}

.hero__cta {
    background: var(--t-marca);
    padding: 14px 30px;
    font-size: 1rem;
}

/* ═══════ Ofertas del día ═══════════════════════════════════════════════
   Va por encima del catálogo y con cabecera propia. En una licorería la
   oferta ES el motivo de la visita: la mitad de las publicaciones del
   negocio son precios especiales, así que esconderlas entre las secciones
   sería enterrar el argumento de venta. */
.ofertas { scroll-margin-top: 132px; }

.ofertas__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}
.ofertas__titulo {
    margin: 0;
    font-size: clamp(1.22rem, 3.4vw, 1.42rem);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.15;
}
.ofertas__llama {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(216,30,44,.75));
}
.ofertas__pulso {
    margin-left: auto;
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--t-marca-tenue);
    border: 1px solid var(--t-marca-borde);
    color: var(--t-marca-texto);
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* La tarjeta de promoción es más alta y con más presencia que en el
   núcleo: aquí es contenido principal, no un adorno lateral. */
.promo-card {
    min-height: 178px;
    border: 1px solid var(--t-linea);
    flex-basis: min(82vw, 360px);
    transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.promo-card:hover {
    transform: translateY(-3px);
    border-color: var(--t-marca-borde);
    box-shadow: var(--t-sombra-alta);
}
.promo-card::after {
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 20%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.90) 100%);
}
.promo-card__titulo { letter-spacing: -.035em; line-height: 1.18; }
.promo-card__sub { opacity: .82; line-height: 1.4; }

/* ═══════ Pie: contacto y aviso legal ═══════════════════════════════════
   Ley 42-01 exige el aviso en la publicidad de bebidas alcohólicas, y el
   negocio ya lo incluye en todas sus piezas de Instagram. Aquí cierra la
   página junto a la dirección y el WhatsApp: quien duda antes de pedir
   busca exactamente eso. */
.pie {
    margin-top: var(--t-ritmo);
    padding: 26px 22px 24px;
    border-radius: var(--t-r-xl);
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
}
.pie__marca {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--t-linea-tenue);
}
.pie__logo { height: 42px; width: auto; object-fit: contain; }
.pie__lema {
    margin: 0;
    font-size: .86rem;
    font-weight: 700;
    color: var(--t-tinta-suave);
    letter-spacing: -.015em;
}

.pie__datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px 22px;
}
.pie__dato { display: flex; align-items: flex-start; gap: 12px; }
.pie__dato-icono {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--t-marca-tenue);
    border: 1px solid var(--t-marca-borde);
    font-size: 1.02rem;
}
.pie__dato strong {
    display: block;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.022em;
    line-height: 1.3;
}
.pie__dato span:not(.pie__dato-icono) {
    display: block;
    font-size: .8rem;
    color: var(--t-tinta-suave);
    line-height: 1.4;
}
.pie__dato a { color: var(--t-marca-texto); font-weight: 700; }

.pie__legal {
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--t-linea-tenue);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    font-size: .74rem;
    line-height: 1.5;
    color: var(--t-tinta-suave);
}
.pie__edad {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 2px solid var(--t-marca);
    color: var(--t-marca-texto);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: -.03em;
}
.pie__legal p { margin: 0; flex: 1 1 220px; min-width: 0; }

@media (max-width: 520px) {
    .pie { padding: 22px 18px 20px; }
    .pie__datos { grid-template-columns: 1fr; }
}

/* ═══════ Ajustes finos del catálogo sobre negro ════════════════════════ */

/* Las fotos de licor casi siempre vienen con fondo blanco de estudio.
   Sobre una tarjeta negra, ese blanco es un bloque que rebota. Un velo
   muy suave en la base de la foto la asienta en la tarjeta sin llegar a
   ensuciar el producto. */
.pp-card__photo-wrap::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 34%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.28) 100%);
}
.pp-card__photo-wrap--vacia::after { display: none; }

.pp-card {
    background: linear-gradient(180deg, var(--t-panel) 0%, #0F0F13 100%);
}
.pp-card:hover { border-color: var(--t-marca-borde); }

/* El precio es lo que decide la compra en una licorería: se lee antes que
   el nombre. */
.pp-card__precio { color: #fff; }
.pp-card__marca  { color: var(--t-marca-texto); opacity: .85; }

/* Sección del catálogo: un filete rojo corto delante del título. Ordena la
   página sin necesidad de más texto ni de líneas divisorias. */
.catalogo-seccion__head .section-title {
    display: flex;
    align-items: center;
    gap: 11px;
}
.catalogo-seccion__head .section-title::before {
    content: '';
    flex-shrink: 0;
    width: 4px;
    height: 1.05em;
    border-radius: 999px;
    background: var(--t-marca);
    box-shadow: 0 0 12px rgba(216,30,44,.6);
}

.catnav__chip.esta-activo { box-shadow: 0 3px 14px rgba(216,30,44,.35); }

/* ═══════ Accesibilidad ═════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body { background-attachment: scroll; }
}

/* Destino alternativo del botón de la portada cuando no hay ofertas
   activas. La cabecera y la tira de categorías suman ~132px de altura
   fija: sin este margen, el salto deja el primer título debajo de ellas. */
#catalogo { scroll-margin-top: 132px; }


/* ═══════════════════════════════════════════════════════════════════════
   FASE 2 — CAPA DE EXPERIENCIA
   -----------------------------------------------------------------------
   Sólo se anima `transform` y `opacity`. Son las dos propiedades que el
   navegador resuelve en la GPU sin rehacer la maquetación; cualquier otra
   (width, height, top, margin) obliga a recalcular el layout en cada
   fotograma y en un teléfono de gama media eso se ve como tirones.

   Duraciones entre 140 y 320 ms. Por encima de 350 ms una interfaz deja de
   sentirse rápida y empieza a sentirse lenta, por bonita que sea la curva.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Aparición al bajar ───────────────────────────────────────────────────
   El escalonado (--paso-entrada, 45 ms por posición) es lo que separa
   "esto se animó" de "esto está vivo". experiencia.js pone el índice y
   corta a 8 pasos: en una sección de 20 productos, el vigésimo tardaría
   casi un segundo y el cliente ya habría pasado de largo. */
.entrada-lista {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
}
.entrada-lista.ya-entro {
    opacity: 1;
    transform: none;
    transition:
        opacity   .42s cubic-bezier(.22,.9,.32,1) calc(var(--paso-entrada, 0) * 45ms),
        transform .42s cubic-bezier(.22,.9,.32,1) calc(var(--paso-entrada, 0) * 45ms);
}

/* ── Respuesta al toque ───────────────────────────────────────────────────
   En un teléfono no existe :hover. Si al tocar una tarjeta no pasa nada
   hasta que carga la siguiente pantalla, el dedo duda y mucha gente toca
   dos veces. */
.pp-card, .promo-flyer, .catnav__chip, .category-tile, .hero__cta {
    transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
    will-change: transform;
}
.esta-pulsado { transform: scale(.968) !important; }

/* Latido al agregar: confirmación física de que el toque entró. */
@keyframes coca-late {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.035); }
    100% { transform: scale(1); }
}
.esta-latiendo { animation: coca-late .38s cubic-bezier(.3,1.4,.5,1); }

/* ── Tarjeta de producto: acabado de aplicación ───────────────────────── */
.pp-card {
    position: relative;
    isolation: isolate;
    backdrop-filter: blur(2px);
}
/* Brillo diagonal muy tenue en el borde superior. Es lo que hace que una
   tarjeta oscura parezca un objeto con volumen y no un rectángulo pintado. */
.pp-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(147deg,
        rgba(255,255,255,.075) 0%,
        rgba(255,255,255,.015) 26%,
        transparent 52%);
}
.pp-card:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: var(--t-sombra-alta), 0 0 0 1px var(--t-marca-borde);
}
/* Zoom muy leve de la foto al pasar por encima: el producto se acerca, la
   tarjeta no se mueve. */
.pp-card__photo-wrap { overflow: hidden; }
.pp-card__foto {
    transition: transform .5s cubic-bezier(.2,.8,.3,1);
    will-change: transform;
}
.pp-card:hover .pp-card__foto { transform: scale(1.055); }

/* ── OFERTAS: flyers ──────────────────────────────────────────────────────
   La referencia es el propio Instagram del negocio: sus publicaciones son
   carteles con precio tachado, precio nuevo y porcentaje enorme. Una lista
   de títulos no compite con eso. */
.promo-flyer {
    position: relative;
    isolation: isolate;
    flex: 0 0 auto;
    flex-basis: min(80vw, 320px);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--t-r-xl);
    overflow: hidden;
    border: 1px solid var(--t-linea);
    background: linear-gradient(158deg, #2B0C11 0%, #0C0C10 62%, #08080A 100%);
    box-shadow: var(--t-sombra);
    scroll-snap-align: start;
}
.promo-flyer:hover {
    transform: translate3d(0, -4px, 0);
    border-color: var(--t-marca-borde);
    box-shadow: var(--t-sombra-alta), 0 0 34px rgba(216,30,44,.20);
}

.promo-flyer__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.promo-flyer:hover .promo-flyer__foto { transform: scale(1.06); }

/* Velo vertical. Sin él, el precio blanco sobre una etiqueta clara de
   whisky es ilegible justo en el dato que decide la compra. */
.promo-flyer.tiene-foto::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(4,4,6,.22) 0%,
        rgba(4,4,6,.55) 44%,
        rgba(4,4,6,.93) 82%,
        rgba(4,4,6,.98) 100%);
}

.promo-flyer__cinta {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 14px 0;
    margin-bottom: auto;
}

/* El porcentaje es el número que más mueve la compra: va grande, rojo y
   ligeramente inclinado, como en los flyers impresos. */
.promo-flyer__descuento {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 11px;
    background: var(--t-marca);
    color: #fff;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: 1;
    transform: rotate(-4deg);
    box-shadow: 0 6px 18px rgba(216,30,44,.5);
}

.promo-flyer__reloj {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(8,8,10,.72);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Última hora: el reloj late. No cambia de tamaño (eso movería la
   maquetación); sólo de opacidad. */
.promo-flyer__reloj .es-urgente { color: #FF8E97; }
@keyframes coca-urge { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.promo-flyer__reloj:has(.es-urgente) { animation: coca-urge 1.1s ease-in-out infinite; }

.promo-flyer__cuerpo {
    position: relative;
    z-index: 2;
    padding: 14px 16px 16px;
}
.promo-flyer__titulo {
    margin: 0 0 5px;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.16;
    color: #fff;
}
.promo-flyer__sub {
    margin: 0;
    font-size: .81rem;
    line-height: 1.42;
    color: rgba(255,255,255,.72);
}

.promo-flyer__pie {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}
.promo-flyer__precios { display: flex; flex-direction: column; line-height: 1.1; }
.promo-flyer__antes {
    font-size: .78rem;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    text-decoration: line-through;
    text-decoration-color: var(--t-marca);
    text-decoration-thickness: 2px;
}
.promo-flyer__ahora {
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -.045em;
    color: #fff;
}

.promo-flyer__comprar {
    flex-shrink: 0;
    padding: 11px 19px;
    border: 0;
    border-radius: 999px;
    background: var(--t-marca);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: -.02em;
    cursor: pointer;
    box-shadow: var(--t-halo);
    transition: background .16s, transform .16s;
}
.promo-flyer__comprar:hover  { background: var(--t-marca-viva); }
.promo-flyer__comprar:active { transform: scale(.94); }

.promo-flyer__agotado {
    flex-shrink: 0;
    padding: 11px 17px;
    border-radius: 999px;
    background: var(--t-apagado);
    color: var(--t-apagado-tinta);
    font-size: .82rem;
    font-weight: 800;
}

/* Aviso sin producto: sigue siendo un cartel, sin precio ni botón fingidos. */
.promo-flyer.es-cartel { min-height: 210px; flex-basis: min(72vw, 290px); }

@media (max-width: 380px) {
    .promo-flyer { min-height: 268px; flex-basis: 84vw; }
}

/* ── Envío gratis desbloqueado ───────────────────────────────────────────
   El momento con más valor comercial de la tienda. */
.aviso-envio {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(92vw, 400px);
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--t-marca) 0%, var(--t-marca-oscura) 100%);
    border: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 14px 42px rgba(216,30,44,.5), 0 2px 10px rgba(0,0,0,.6);
    color: #fff;
    font-size: .86rem;
    line-height: 1.36;
    /* translate3d y no `bottom`: mover `bottom` recalcula la maquetación en
       cada fotograma; `transform` no toca nada. */
    transform: translate3d(-50%, 26px, 0);
    opacity: 0;
    transition: transform .3s cubic-bezier(.2,.9,.3,1), opacity .3s;
    pointer-events: none;
}
.aviso-envio.esta-visible { transform: translate3d(-50%, 0, 0); opacity: 1; }
.aviso-envio__icono { font-size: 1.5rem; line-height: 1; }
.aviso-envio strong { font-weight: 800; letter-spacing: -.02em; }

/* ── Confeti ──────────────────────────────────────────────────────────────
   22 elementos con transform y opacity. Sin canvas, sin librería, ~0 KB. */
.confeti {
    position: fixed;
    inset: 0;
    z-index: 299;
    pointer-events: none;
    overflow: hidden;
}
.confeti i {
    position: absolute;
    top: var(--origen-y, 82%);
    left: var(--x, 50%);
    width: 8px;
    height: 12px;
    border-radius: 2px;
    opacity: 0;
    animation: coca-confeti var(--dur, 1100ms) cubic-bezier(.15,.65,.4,1) var(--retraso, 0ms) forwards;
}
@keyframes coca-confeti {
    0%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate3d(var(--dx, 0), -190px, 0) rotate(var(--giro, 180deg)) scale(.6); }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODO FIESTA
   -----------------------------------------------------------------------
   Viernes desde las 6, fin de semana completo y las fechas que configure el
   dueño. La clase la pone PHP en el <body> (includes/fiesta.php), no
   JavaScript: así el HTML ya sale encendido y no hay un parpadeo del modo
   normal al modo fiesta justo en la primera impresión.

   El efecto es luz, no ruido. Nada parpadea rápido, nada cambia de color de
   golpe: son brillos rojos que respiran a 6-9 segundos por ciclo. Se tiene
   que notar que la tienda está distinta sin que moleste para comprar.
   ═══════════════════════════════════════════════════════════════════════ */
.modo-fiesta {
    background:
        radial-gradient(85% 50% at 50% -6%,  rgba(216,30,44,.34) 0%, transparent 62%),
        radial-gradient(65% 42% at 104% 20%, rgba(216,30,44,.18) 0%, transparent 58%),
        radial-gradient(70% 40% at -8% 62%,  rgba(216,30,44,.14) 0%, transparent 58%),
        var(--t-fondo);
}

/* Dos focos rojos que respiran, detrás de todo el contenido. `position:
   fixed` + `z-index: 0` los deja pegados a la ventana sin repintarse al
   desplazar. */
.modo-fiesta::before {
    content: '';
    position: fixed;
    inset: -20% -20% auto -20%;
    height: 70vh;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 42% at 22% 30%, rgba(216,30,44,.30) 0%, transparent 68%),
        radial-gradient(42% 40% at 80% 12%, rgba(240,48,63,.24) 0%, transparent 66%);
    animation: coca-luces 9s ease-in-out infinite alternate;
}
@keyframes coca-luces {
    0%   { opacity: .55; transform: translate3d(-2%, 0, 0) scale(1); }
    100% { opacity: 1;   transform: translate3d(3%, 2%, 0) scale(1.09); }
}
.modo-fiesta .store-page,
.modo-fiesta .store-header { position: relative; z-index: 1; }

/* La marca del rótulo se enciende, igual que el neón del local. */
.modo-fiesta .marca-logo {
    filter: drop-shadow(0 0 14px rgba(216,30,44,.62));
    animation: coca-neon 6s ease-in-out infinite alternate;
}
@keyframes coca-neon {
    0%   { filter: drop-shadow(0 0 9px  rgba(216,30,44,.42)); }
    100% { filter: drop-shadow(0 0 20px rgba(216,30,44,.78)); }
}

/* La franja de ofertas manda en modo fiesta: marco encendido y título más
   grande. Es literalmente lo que la gente viene a buscar un viernes. */
.modo-fiesta .ofertas {
    padding: 16px 14px 18px;
    margin-inline: -14px;
    border-radius: var(--t-r-xl);
    background: linear-gradient(168deg, rgba(216,30,44,.14) 0%, transparent 72%);
    border: 1px solid var(--t-marca-borde);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.modo-fiesta .ofertas__titulo { font-size: clamp(1.34rem, 4vw, 1.62rem); }
.modo-fiesta .ofertas__llama {
    font-size: 1.34rem;
    animation: coca-llama 2.4s ease-in-out infinite;
}
@keyframes coca-llama {
    0%,100% { transform: scale(1)    rotate(-3deg); }
    50%     { transform: scale(1.13) rotate(3deg); }
}
.modo-fiesta .ofertas__pulso {
    background: var(--t-marca);
    border-color: transparent;
    color: #fff;
}

.modo-fiesta .promo-flyer { border-color: var(--t-marca-borde); }
.modo-fiesta .promo-flyer__descuento { box-shadow: 0 6px 26px rgba(216,30,44,.75); }

/* La barra del carrito con halo: en modo fiesta el carrito se llena y tiene
   que verse desde cualquier punto de la pantalla. */
.modo-fiesta .cart-bar { box-shadow: 0 10px 40px rgba(216,30,44,.62); }

/* Chip de la portada anunciando el momento. */
.hero__dato--fiesta {
    background: var(--t-marca);
    border-color: rgba(255,255,255,.28);
    color: #fff;
}

/* ── Rendimiento y accesibilidad ─────────────────────────────────────────
   Con `prefers-reduced-motion` se apaga TODO el movimiento, incluidas las
   luces del modo fiesta. La identidad se mantiene (los rojos siguen ahí),
   pero nada se mueve. No es un detalle de manual: hay gente a la que el
   movimiento continuo le provoca mareo de verdad. */
@media (prefers-reduced-motion: reduce) {
    .entrada-lista { opacity: 1; transform: none; }
    .modo-fiesta::before,
    .modo-fiesta .marca-logo,
    .modo-fiesta .ofertas__llama,
    .promo-flyer__reloj:has(.es-urgente) { animation: none; }
    .confeti { display: none; }
    .pp-card:hover .pp-card__foto,
    .promo-flyer:hover .promo-flyer__foto { transform: none; }
}

/* En pantallas táctiles no hay puntero: los efectos de hover no deben
   quedarse "pegados" después de un toque. */
@media (hover: none) {
    .pp-card:hover,
    .promo-flyer:hover { transform: none; box-shadow: var(--t-sombra); }
    .pp-card:hover .pp-card__foto,
    .promo-flyer:hover .promo-flyer__foto { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   FASE 2.5 — VENTA CRUZADA Y ACABADO DE APLICACIÓN
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Señales de la tarjeta ────────────────────────────────────────────────
   Debajo del nombre, no en la esquina: el badge de la esquina ya está
   ocupado por lo más importante (agotado, descuento, nuevo) y amontonar
   ahí una segunda etiqueta no deja leer ninguna. */
.pp-senales {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 5px 0 2px;
}
.pp-senal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--t-panel-alto);
    border: 1px solid var(--t-linea);
    color: var(--t-tinta-suave);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
    white-space: nowrap;
}
.pp-senal--caliente {
    background: var(--t-marca-tenue);
    border-color: var(--t-marca-borde);
    color: var(--t-marca-texto);
}
.pp-senal--top {
    background: rgba(232,181,75,.12);
    border-color: rgba(232,181,75,.34);
    color: var(--t-ambar-tinta);
}
/* "Quedan pocas" sale del inventario real, nunca inventado. Por eso puede
   permitirse el rojo de marca: cuando lo dice, es verdad. */
.pp-senal--pocas {
    background: var(--t-marca-tenue);
    border-color: var(--t-marca-borde);
    color: var(--t-marca-texto);
}

/* ── Ya está en el carrito ────────────────────────────────────────────────
   Bajando por 200 productos no hay forma de saber qué se echó ya sin abrir
   el carrito. Con una lista larga eso significa duplicados, o peor: el
   cliente duda, no agrega y sigue de largo. */
.pp-card.esta-en-carrito {
    border-color: var(--t-marca-borde);
    box-shadow: inset 0 0 0 1px var(--t-marca-borde), var(--t-sombra);
}
.pp-card.esta-en-carrito .pp-card__photo-wrap::before {
    content: '✓ En tu pedido';
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--t-marca);
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 3px 10px rgba(216,30,44,.5);
}

/* ── Hoja "Combina perfectamente con…" ───────────────────────────────────
   Sube desde abajo, igual que el selector de presentaciones. Reutiliza
   `.hoja` del núcleo: misma capa oscura, misma curva, mismo gesto. Que dos
   hojas de la misma tienda se abran distinto es de las cosas que hacen que
   algo "parezca hecho a pedazos" sin que nadie sepa decir por qué. */
.combina__head { padding: 2px 4px 14px; }
.combina__titulo {
    margin: 0 0 3px;
    font-size: 1.16rem;
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: 1.18;
}
.combina__sub {
    margin: 0;
    font-size: .82rem;
    color: var(--t-tinta-suave);
}
.combina__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.combina__seguir {
    width: 100%;
    margin-top: 14px;
    padding: 13px;
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-md);
    background: transparent;
    color: var(--t-tinta-suave);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s, color .16s;
}
.combina__seguir:hover { background: var(--t-panel-alto); color: var(--t-tinta); }

/* ── Fila de sugerencia ───────────────────────────────────────────────────
   A propósito NO es la tarjeta grande del catálogo: aquí caben seis en una
   pantalla de teléfono y el objetivo es un toque, no explorar. */
.sugerencia {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    border-radius: var(--t-r-lg);
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    transition: border-color .16s, transform .16s, opacity .2s;
}
.sugerencia:hover { border-color: var(--t-marca-borde); }
.sugerencia.esta-agregada { opacity: .62; }

.sugerencia__foto {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--t-r-md);
    overflow: hidden;
    background: var(--t-linea-tenue);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}
.sugerencia__foto img { width: 100%; height: 100%; object-fit: cover; }

.sugerencia__texto { flex: 1; min-width: 0; }
.sugerencia__nombre {
    margin: 0;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.26;
    /* Dos líneas y corta. Un nombre largo empujando el precio fuera de la
       pantalla convierte la fila en inservible justo en el dato que decide. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sugerencia__motivo {
    display: block;
    margin-top: 2px;
    font-size: .68rem;
    font-weight: 700;
    color: var(--t-marca-texto);
    opacity: .8;
}

.sugerencia__accion {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
.sugerencia__precio {
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: -.03em;
}
.sugerencia__btn {
    padding: 7px 15px;
    border: 0;
    border-radius: 999px;
    background: var(--t-marca);
    color: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
    transition: background .16s, transform .14s;
}
.sugerencia__btn:hover  { background: var(--t-marca-viva); }
.sugerencia__btn:active { transform: scale(.93); }
.sugerencia__btn.esta-hecho {
    background: var(--t-marca-tenue);
    border: 1px solid var(--t-marca-borde);
    color: var(--t-marca-texto);
    cursor: default;
}

/* Bloques en línea (portada y checkout): la misma fila, en horizontal en
   pantallas anchas y apilada en el teléfono. */
.sugerencias-fila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@media (min-width: 760px) {
    .sugerencias-fila { grid-template-columns: repeat(2, 1fr); }
}

/* ── Portada más viva ─────────────────────────────────────────────────────
   Un reflejo de cristal que cruza la portada muy despacio (7 s) y se
   detiene 12 s antes de repetir. Es lo que da la sensación de que la
   fotografía tiene profundidad. Si girara sin parar sería un anuncio de
   neón barato; espaciado, se nota sin molestar. */
.hero.tiene-foto .hero__texto::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255,255,255,.045) 47%,
        rgba(255,255,255,.09) 50%,
        rgba(255,255,255,.045) 53%,
        transparent 62%);
    transform: translate3d(-120%, 0, 0);
    animation: coca-reflejo 19s ease-in-out infinite;
}
@keyframes coca-reflejo {
    0%, 63%  { transform: translate3d(-120%, 0, 0); }
    100%     { transform: translate3d(120%, 0, 0); }
}
.modo-fiesta .hero.tiene-foto .hero__texto::before { animation-duration: 11s; }

/* Efecto vidrio en los chips de la portada: ya tenían blur; se les añade el
   borde superior claro que es lo que de verdad lee el ojo como "cristal". */
.hero__dato {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.16),
        0 4px 16px rgba(0,0,0,.4);
}

/* ── Esqueletos de carga con más vida ────────────────────────────────────
   El brillo que recorre el esqueleto se acelera un poco: a la velocidad
   original parecía que la página estaba trabada en vez de cargando. */
.skeleton-card, .skeleton-line-title { animation-duration: 1.15s; }

@media (prefers-reduced-motion: reduce) {
    .hero.tiene-foto .hero__texto::before { animation: none; opacity: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v3.0 — EDICIÓN COMERCIAL
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Happy Hour ───────────────────────────────────────────────────────── */
.hh {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-radius: var(--t-r-xl);
    background: linear-gradient(120deg, var(--t-marca) 0%, var(--t-marca-oscura) 72%, #4A0A11 100%);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: var(--t-halo);
    color: #fff;
    /* Latido muy lento: recuerda que corre el tiempo sin llegar a parpadear,
       que es lo que convierte un aviso útil en un anuncio molesto. */
    animation: hh-respira 3.4s ease-in-out infinite;
}
@keyframes hh-respira {
    0%,100% { box-shadow: 0 6px 22px rgba(216,30,44,.38); }
    50%     { box-shadow: 0 8px 34px rgba(216,30,44,.62); }
}
.hh__icono { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.hh__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hh__titulo { font-size: .96rem; font-weight: 800; letter-spacing: -.03em; }
.hh__producto { font-size: .82rem; opacity: .95; }
.hh__producto b { font-weight: 800; }
.hh__producto s { opacity: .6; margin-left: 5px; }
.hh__otras { font-size: .72rem; opacity: .75; }

.hh__reloj {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 7px 12px;
    border-radius: var(--t-r-md);
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.2);
}
.hh__reloj-num {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.04em;
    /* Cifras de ancho fijo: sin esto el contador da saltitos laterales cada
       vez que cambia un dígito, y el ojo lo persigue. */
    font-variant-numeric: tabular-nums;
}
.hh__reloj-txt { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; opacity: .8; }

.pp-senal--happy {
    background: var(--t-marca);
    border-color: transparent;
    color: #fff;
}
.pp-senal--ok {
    background: rgba(46,160,100,.12);
    border-color: rgba(46,160,100,.32);
    color: #7FD9A8;
}

/* ── Combos ───────────────────────────────────────────────────────────── */
.combos-fila {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 720px) { .combos-fila { grid-template-columns: repeat(2, 1fr); } }

.combo-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--t-r-xl);
    overflow: hidden;
    background: linear-gradient(168deg, #1A0509 0%, var(--t-panel) 55%);
    border: 1px solid var(--t-marca-borde);
    box-shadow: var(--t-sombra);
}
.combo-card__cabeza { position: relative; height: 132px; background: var(--t-linea-tenue); }
.combo-card__foto { width: 100%; height: 100%; object-fit: cover; display: block; }
.combo-card__foto--vacia { display: grid; place-items: center; font-size: 2.6rem; }
.combo-card__ahorro {
    position: absolute;
    top: 10px; right: 10px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--t-marca);
    color: #fff;
    font-size: .74rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(216,30,44,.5);
}
.combo-card__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 9px; }
.combo-card__nombre { margin: 0; font-size: 1.06rem; font-weight: 800; letter-spacing: -.04em; }
.combo-card__items {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 3px;
    font-size: .81rem;
    color: var(--t-tinta-suave);
}
.combo-card__items li::before { content: '• '; color: var(--t-marca-texto); }
.combo-card__items b { color: var(--t-tinta); }

.combo-card__pie {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; margin-top: 3px;
}
.combo-card__precios { display: flex; flex-direction: column; line-height: 1.1; }
.combo-card__suelto { font-size: .76rem; color: var(--t-tinta-suave); opacity: .7; }
.combo-card__precio { font-size: 1.3rem; font-weight: 800; letter-spacing: -.045em; }
.combo-card__btn {
    flex-shrink: 0;
    padding: 11px 18px;
    border: 0; border-radius: 999px;
    background: var(--t-marca);
    color: #fff;
    font: inherit; font-size: .86rem; font-weight: 800;
    cursor: pointer;
    box-shadow: var(--t-halo);
    transition: background .16s, transform .14s;
}
.combo-card__btn:hover  { background: var(--t-marca-viva); }
.combo-card__btn:active { transform: scale(.94); }
.combo-card__btn.esta-hecho { background: var(--t-marca-oscura); }
.combo-card__agotado {
    padding: 11px 17px; border-radius: 999px;
    background: var(--t-apagado); color: var(--t-apagado-tinta);
    font-size: .82rem; font-weight: 800;
}

/* ── Pulso: lo que está pidiendo la gente ─────────────────────────────── */
.pulso__punto {
    display: inline-block;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #2FBF71;
    margin-right: 2px;
    /* Verde y no rojo: aquí el punto significa "en vivo", como el de una
       transmisión. En rojo se confundiría con las ofertas. */
    animation: pulso-vivo 1.9s ease-in-out infinite;
}
@keyframes pulso-vivo {
    0%,100% { box-shadow: 0 0 0 0 rgba(47,191,113,.6); }
    60%     { box-shadow: 0 0 0 8px rgba(47,191,113,0); }
}
.pulso-fila { display: flex; flex-direction: column; gap: 7px; }
.pulso-item {
    display: flex; align-items: center; gap: 11px;
    padding: 8px 11px;
    border-radius: var(--t-r-lg);
    background: var(--t-panel);
    border: 1px solid var(--t-linea);
    text-decoration: none;
    color: inherit;
    transition: border-color .16s, transform .16s;
}
.pulso-item:hover { border-color: var(--t-marca-borde); transform: translate3d(0,-2px,0); }
.pulso-item__num {
    flex-shrink: 0;
    width: 22px;
    font-size: 1.02rem; font-weight: 800;
    color: var(--t-marca-texto);
    letter-spacing: -.05em;
}
.pulso-item__foto {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: var(--t-r-md);
    overflow: hidden;
    background: var(--t-linea-tenue);
    display: grid; place-items: center;
}
.pulso-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.pulso-item__texto { display: flex; flex-direction: column; min-width: 0; }
.pulso-item__texto b { font-size: .87rem; font-weight: 700; letter-spacing: -.025em; }
.pulso-item__texto small { font-size: .72rem; color: var(--t-tinta-suave); }

/* ── Tu compra favorita ───────────────────────────────────────────────── */
.favorita {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 15px 17px;
    border-radius: var(--t-r-xl);
    background: linear-gradient(115deg, var(--t-marca-tenue) 0%, #17171C 100%);
    border: 1px solid var(--t-marca-borde);
}
.favorita__texto { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.favorita__titulo { font-size: .96rem; font-weight: 800; letter-spacing: -.03em; }
.favorita__items { font-size: .8rem; color: var(--t-tinta-suave); line-height: 1.4; }
.favorita__aviso { font-size: .72rem; color: var(--t-ambar-tinta); }
.favorita__btn {
    flex-shrink: 0;
    padding: 12px 20px;
    border: 0; border-radius: 999px;
    background: var(--t-marca); color: #fff;
    font: inherit; font-size: .87rem; font-weight: 800;
    cursor: pointer; box-shadow: var(--t-halo);
    transition: background .16s, transform .14s;
}
.favorita__btn:hover  { background: var(--t-marca-viva); }
.favorita__btn:active { transform: scale(.95); }
.favorita__btn:disabled { background: var(--t-marca-oscura); cursor: default; }

/* ── Compartir carrito ────────────────────────────────────────────────── */
.compartir-btn {
    display: inline-flex; align-items: center; gap: 8px;
    width: 100%;
    justify-content: center;
    padding: 12px;
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-md);
    background: transparent;
    color: var(--t-tinta-suave);
    font: inherit; font-size: .86rem; font-weight: 700;
    cursor: pointer;
    transition: background .16s, color .16s, border-color .16s;
}
.compartir-btn:hover {
    background: var(--t-panel-alto);
    color: var(--t-marca-texto);
    border-color: var(--t-marca-borde);
}

/* ── La botella vuela al carrito ──────────────────────────────────────── */
.vuela {
    position: fixed;
    z-index: 400;
    pointer-events: none;
    border-radius: 12px;
    overflow: hidden;
    display: grid; place-items: center;
    font-size: 1.8rem;
    background: var(--t-panel);
    box-shadow: var(--t-sombra-alta);
    /* Curva con salida rápida y llegada suave: imita un objeto lanzado.
       Sólo transform y opacity, así que va entera en la GPU. */
    transition: transform .6s cubic-bezier(.4,-0.2,.6,1), opacity .6s ease-in;
    will-change: transform, opacity;
}
.vuela img { width: 100%; height: 100%; object-fit: cover; }

.esta-recibiendo { animation: recibe .3s cubic-bezier(.3,1.5,.5,1); }
@keyframes recibe {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

/* ── Carrusel de ofertas ──────────────────────────────────────────────── */
#banda-promos .promo-banda {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    .hh, .pulso__punto { animation: none; }
    .vuela { display: none; }
}