/* Chaplin · boutique de bebidas y tabaco.
   La tienda es el programa de una función de cine mudo: la cartelera (categorías), los intertítulos
   (cabeceras de sección con doble marco, como el cartel de la intro), la función estelar (exclusivas)
   y la entrada con su talón (envíos y retiro). Negro cálido, dorado como único color de acción y bordó.
   Las superficies se separan por tono, no por líneas; los únicos marcos son los del cine (cartel e intertítulos). */
:root {
  --paso: .42; /* cuánto avanza Chaplin por segundo cuando se va, en alturas de la figura (medido siguiendo el pie apoyado en el video) */
  --negro: #0d0b0a; --carbon: #15120f; --carbon-2: #1d1915; --carbon-3: #26211b;
  --crema: #efe6d6; --suave: #c2b9ab; --linea: rgba(239, 230, 214, .16);
  --oro: #c9a45c; --oro-claro: #e2c487; --bordo: #6e1f2a; --bordo-noche: #1c0d10;
  --papel: #ece2cf; --tinta: #1b1612;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Manrope", system-ui, sans-serif;
  /* Escala de letra: chica, texto, destacado, título, portada */
  --t-chica: 15px; --t-texto: 16px; --t-dest: 20px; --t-titulo: clamp(36px, 5.4vw, 60px); --t-portada: clamp(46px, 6.6vw, 92px);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 140px;
  --curva: cubic-bezier(.16, 1, .3, 1);
  --radio: 4px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 150px; }
body { margin: 0; background: var(--negro); color: var(--crema); font: var(--t-texto)/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.trabado { overflow: hidden; }
::selection { background: var(--oro); color: var(--negro); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.contenedor { width: min(1240px, 100% - 2 * var(--e4)); margin-inline: auto; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; line-height: 1.05; text-wrap: balance; }
em { font-style: italic; color: var(--oro-claro); }
p { margin: 0; }
p, li, blockquote { text-wrap: pretty; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bajada { color: var(--suave); margin-top: var(--e3); max-width: 52ch; }
.marca-texto { font-family: var(--serif); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.legal { font-size: var(--t-chica); color: var(--suave); }
.solo-compu { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--carbon-3); border-radius: 5px; }
::-webkit-scrollbar-track { background: var(--negro); }

/* Botones: uno solo de acción (dorado), uno secundario y el link con flecha */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e6); background: var(--oro); color: var(--negro); font-size: 15px; font-weight: 600; white-space: nowrap; border-radius: var(--radio); transition: background .25s, transform .25s var(--curva); }
.boton:hover { background: var(--oro-claro); }
.boton:active { transform: scale(.98); }
.boton-linea { background: var(--carbon-2); color: var(--crema); }
.boton-linea:hover { background: var(--carbon-3); }
.boton-chico { min-height: 44px; padding: 0 var(--e4); }
.boton[disabled] { opacity: .45; cursor: not-allowed; }
.link-flecha { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; font-weight: 600; font-size: 15px; }
.link-flecha span { color: var(--oro); transition: transform .3s var(--curva); }
a:hover > .link-flecha span, .link-flecha:hover span { transform: translateX(6px); }
.link { min-height: 32px; text-align: left; color: inherit; transition: color .2s; }
.link:hover { color: var(--crema); }
.icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: background .2s; flex: none; }
.icono:hover { background: var(--carbon-2); }
.icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Fotos o, mientras no haya, el dibujo */
.media { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--carbon-2); width: 100%; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--curva); }
.media .botella { height: 80%; filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .5)); transition: transform .8s var(--curva); }

/* ---------- Intro de cine mudo ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: #0a0807; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--e4); overflow: hidden; clip-path: circle(150% at 50% 38%); }
.intro[hidden] { display: none; }
.intro::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75)); }
.escenario { position: relative; width: 100%; height: 210px; flex: none; }
.haz { position: absolute; left: 50%; bottom: 0; width: 460px; height: 100vh; transform: translateX(-50%); background: linear-gradient(rgba(239, 230, 214, .02), rgba(239, 230, 214, .13)); clip-path: polygon(44% 0, 56% 0, 78% 100%, 22% 100%); }
.piso { position: absolute; left: 50%; bottom: -10px; width: 380px; height: 54px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(239, 230, 214, .32), rgba(239, 230, 214, .08) 55%, transparent 72%); }
/* --alto: la altura de la figura. El avance se mide en alturas para que coincida con su paso (los pies no patinan). */
.chaplin { --alto: 230px; position: absolute; left: 50%; bottom: -10px; width: calc(var(--alto) * .66); margin-left: calc(var(--alto) * -.33); z-index: 1; }
.ch-img { display: block; width: 100%; height: auto; aspect-ratio: 264 / 400; }
/* La llegada trae el avance adentro (personaje/estabilizar.py): es más ancha y la pose final cae a 1,05 alturas del borde izquierdo. Se corre para que esa pose quede en el centro. */
.ch-img.llegada { width: calc(var(--alto) * 490 / 400); max-width: none; aspect-ratio: 490 / 400; margin-left: calc(var(--alto) * (.33 - 1.0493)); }
.grano { position: absolute; inset: -50%; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cartel { position: relative; z-index: 2; width: min(460px, 100%); margin-top: var(--e5); }
.cartel-marco, .intertitulo-marco { text-align: center; padding: var(--e6) var(--e5); border: 1px solid var(--oro); outline: 1px solid rgba(201, 164, 92, .35); outline-offset: 5px; background: rgba(10, 8, 7, .88); }
.cartel-letra { display: block; width: min(280px, 64vw); height: auto; margin-inline: auto; }
.cartel-sub { font-size: var(--t-chica); color: var(--suave); margin-top: var(--e2); }
.cartel-pregunta { font-family: var(--serif); font-style: italic; font-size: 26px; margin: var(--e5) 0 var(--e4); }
.cartel-botones { display: flex; gap: var(--e3); justify-content: center; flex-wrap: wrap; }
.cartel .legal { margin-top: var(--e5); }
.despedida { position: absolute; left: 0; right: 0; top: auto; bottom: 16%; z-index: 2; display: grid; justify-items: center; gap: var(--e3); padding: 0 var(--e4); text-align: center; opacity: 0; visibility: hidden; transition: opacity .8s ease .6s, visibility 0s .6s; }
.despedida p { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--oro-claro); }
.despedida .link-flecha { color: var(--suave); }
.rechazado .despedida { opacity: 1; visibility: visible; }
.rechazado .cartel { display: none; }
.intro.cerrando { clip-path: circle(0% at 50% 38%); transition: clip-path .7s cubic-bezier(.6, 0, .4, 1); }

/* ---------- Cabecera ---------- */
.cinta { background: var(--bordo); font-size: var(--t-chica); }
.cinta-dentro { display: flex; justify-content: center; gap: var(--e6); padding-block: var(--e2); }
.cinta b { color: var(--oro-claro); font-weight: 600; }
.cabecera { position: sticky; top: 0; z-index: 20; background: var(--negro); }
.barra { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "menu logo acciones" "buscar buscar buscar"; align-items: center; column-gap: var(--e2); padding-block: var(--e2) var(--e3); }
#abrir-menu { grid-area: menu; }
.logo { grid-area: logo; display: flex; align-items: center; gap: var(--e3); justify-self: start; min-height: 44px; }
.logo-emblema { display: block; width: 55px; height: auto; }
.logo-letra { display: block; width: 113px; height: auto; }
.logo small { display: block; white-space: nowrap; font-size: 14px; color: var(--suave); margin-top: 3px; }
@media (max-width: 400px) { .logo small { font-size: 12.5px; letter-spacing: 0; } }
@media (max-width: 340px) { .logo small { display: none; } } /* celus angostos (360 px): que entre en la cabecera */
.acciones { grid-area: acciones; display: flex; }
.buscador { display: flex; align-items: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e4); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--carbon); transition: border-color .2s; cursor: text; }
.buscador:focus-within { border-color: var(--oro); }
.buscador svg { width: 18px; flex: none; fill: none; stroke: var(--suave); stroke-width: 1.8; stroke-linecap: round; }
.buscador input { flex: 1; min-width: 0; min-height: 46px; background: none; border: 0; outline: 0; font-size: 15px; }
.buscador input::placeholder { color: var(--suave); }
.buscador input::-webkit-search-cancel-button { -webkit-appearance: none; width: 16px; height: 16px; cursor: pointer; background: var(--suave); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat; }
.buscador-cabecera { grid-area: buscar; margin-top: var(--e2); }
.carrito-boton { position: relative; }
.contador { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; border-radius: 10px; background: var(--oro); color: var(--negro); font-size: 12px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; }
.carrito-boton.salta { animation: salta .5s var(--curva); }
@keyframes salta { 40% { transform: scale(1.25) rotate(-8deg); } }
.menu-categorias { display: none; background: var(--carbon); }
.menu-dentro { display: flex; gap: var(--e5); overflow-x: auto; scrollbar-width: none; }
.menu-dentro a { position: relative; flex: none; padding-block: var(--e3); font-size: 14px; color: var(--suave); transition: color .2s; }
.menu-dentro a:hover, .menu-dentro a[aria-current="true"] { color: var(--crema); }
.menu-dentro a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--curva); }
.menu-dentro a:hover::after, .menu-dentro a[aria-current="true"]::after { transform: scaleX(1); }
.menu-dentro .oferta { color: var(--oro-claro); font-weight: 600; }

/* ---------- Portada ---------- */
.portada { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); margin-top: var(--e4); }
.banner-principal { grid-column: 1 / -1; position: relative; border-radius: var(--radio); overflow: hidden; background: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(226, 196, 135, .16), transparent 70%), var(--carbon); }
/* Los carteles: una pista que se desliza de a uno (con el dedo o sola, desde tienda.js) */
.carteles-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carteles-pista::-webkit-scrollbar { display: none; }
.diapo { flex: 0 0 100%; min-width: 0; overflow: hidden; scroll-snap-align: start; display: grid; align-content: start; }
.cartel-rotulo { font-size: var(--t-chica); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-bottom: var(--e3); }
.cartel-precio .precios { margin: 0; padding: 0; }
.cartel-precio .precio { font-size: 28px; }
.banner-media.cartel-pagos { flex-direction: column; justify-content: center; align-items: center; gap: var(--e2); font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--crema); }
.cartel-pagos span:nth-child(even) { color: var(--oro-claro); }
.banner-media.cartel-pagos { padding-top: var(--e5); }
.carteles-control { position: absolute; right: var(--e2); top: var(--e2); display: flex; align-items: center; gap: var(--e1); z-index: 2; }
.carteles-puntos { display: none; } /* en el celu alcanza con el circulito: se pasa con el dedo */
.carteles-puntos button { width: 30px; height: 44px; display: grid; place-items: center; }
.carteles-puntos button::after { content: ""; width: 18px; height: 3px; border-radius: 2px; background: rgba(239, 230, 214, .3); transition: background .3s, width .3s; }
.carteles-puntos button[aria-current="true"]::after { background: var(--oro); width: 26px; }
.carteles-pausa { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--crema); }
.carteles-pausa > svg { grid-area: 1 / 1; }
.carteles-pausa .anillo { width: 32px; height: 32px; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
.carteles-pausa .anillo circle { stroke: rgba(239, 230, 214, .22); }
.carteles-pausa .anillo .lleno { stroke: var(--oro); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--avance, 0)); }
.carteles-pausa .icono-pausa, .carteles-pausa .icono-play { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.carteles-pausa .icono-pausa { fill: none; }
.carteles-pausa .icono-play, .carteles-pausa.pausado .icono-pausa { display: none; }
.carteles-pausa.pausado .icono-play { display: block; }
.banner-media { height: 240px; display: flex; align-items: end; justify-content: center; position: relative; }
.banner-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-media .botella { height: 92%; }
.banner-media .botella:nth-child(2) { height: 100%; margin-inline: -5%; z-index: 1; }
.banner-media .botella:nth-child(3) { height: 84%; }
.banner-texto { position: relative; padding: var(--e5) var(--e4) var(--e6); }
.titulo-portada { font-size: var(--t-portada); line-height: .98; letter-spacing: -.01em; }
.titulo-portada span, .titulo-portada em { display: block; }
.banner-texto .bajada { margin-top: var(--e5); }
.botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5); margin-top: var(--e6); }

.promo { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--carbon); min-height: 200px; display: flex; flex-direction: column; justify-content: end; transition: background .3s; }
.promo:hover { background: var(--carbon-2); }
.promo-media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: end; padding-right: 4%; }
.promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); }
/* Con foto, una sombra desde abajo para que el texto se lea sobre cualquier imagen */
.promo-media:has(img)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 8, 7, .92), rgba(10, 8, 7, .35) 60%, transparent); }
.promo-media .botella { height: 64%; opacity: .9; transition: transform .8s var(--curva); }
.promo:hover .promo-media img, .promo:hover .promo-media .botella { transform: scale(1.05); }
.promo-texto { position: relative; padding: var(--e4); max-width: 70%; }
.promo-texto b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.1; }
.promo-exclusivas { background: var(--bordo-noche); }

.beneficios { list-style: none; padding: var(--e5) 0 0; margin-block: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4) var(--e5); font-size: 14px; color: var(--suave); line-height: 1.45; }
.beneficios b { color: var(--crema); font-weight: 600; }

/* ---------- Secciones ---------- */
.seccion { padding-top: var(--e7); }
.titulo-seccion { display: flex; align-items: end; gap: var(--e5); margin-bottom: var(--e5); }
.titulo-seccion h2, .cartelera h2, .estelar h2, .regalos h2, .entrada h2 { font-size: var(--t-titulo); }
.flechas { display: none; gap: var(--e2); }
.flecha { background: var(--carbon-2); }
.flecha:hover { background: var(--carbon-3); }

/* Intertítulo: la cabecera de sección con el doble marco del cine mudo */
.intertitulo { display: grid; justify-items: center; margin-bottom: var(--e7); }
.intertitulo-marco { width: min(680px, 100%); padding: var(--e6) var(--e5); }
.intertitulo h2 { font-size: var(--t-titulo); }
.intertitulo p { color: var(--suave); margin: var(--e3) auto 0; max-width: 46ch; }

/* La selección de Marcelo */
.seleccion { background: var(--carbon); padding-bottom: var(--e7); margin-top: var(--e7); }
.seleccion-lista { display: grid; gap: var(--e3); grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--e2); }
.seleccion-lista::-webkit-scrollbar { display: none; }
.seleccion-lista .recomendado { scroll-snap-align: start; }
.recomendado { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--e4); align-items: center; padding: var(--e3); border-radius: var(--radio); background: var(--negro); }
.recomendado .media { aspect-ratio: 3 / 4; border-radius: 2px; }
@media (max-width: 380px) { .recomendado { grid-template-columns: 80px minmax(0, 1fr); gap: var(--e3); } .recomendado h3 { font-size: 22px; } }
.recomendado h3 { font-size: 24px; }
.recomendado h3 button { text-align: left; line-height: 1.1; }
.recomendado h3 button:hover { color: var(--oro-claro); }
.recomendado .origen { font-size: var(--t-chica); color: var(--suave); }
.recomendado blockquote { margin: var(--e2) 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.35; text-wrap: pretty; }
.escuchar { display: inline-flex; align-items: center; gap: var(--e3); max-width: 100%; min-height: 44px; padding-right: var(--e3); border-radius: 22px; }
.escuchar .play { width: 44px; height: 44px; border-radius: 50%; background: var(--oro); color: var(--negro); display: grid; place-items: center; flex: none; transition: transform .2s; }
.escuchar:hover .play { transform: scale(1.06); }
.escuchar .play svg { width: 14px; fill: currentColor; }
.onda { display: flex; align-items: center; gap: 3px; height: 24px; min-width: 0; overflow: hidden; } /* en tarjetas angostas la onda se acorta */
.onda i { width: 3px; height: 100%; background: var(--oro); opacity: .5; border-radius: 2px; transform: scaleY(var(--alto)); }
.escuchar.sonando .onda i { opacity: 1; animation: onda 1s ease-in-out infinite; animation-delay: calc(var(--n) * -110ms); }
@keyframes onda { 50% { transform: scaleY(1); } }
.escuchar small { color: var(--suave); font-size: var(--t-chica); font-variant-numeric: tabular-nums; }

/* La cartelera: categorías como marquesina, con la lámina de cada rubro */
.cartelera { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
.cartelera-lista { list-style: none; margin: var(--e5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e3); }
.cartelera-lista a { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0 var(--e3); padding: var(--e2) 0; transition: color .2s; }
.cartelera-lista .mini { grid-row: 1 / 3; width: 44px; height: 55px; border-radius: 2px; overflow: hidden; background: var(--papel); display: grid; place-items: center; }
.cartelera-lista .mini img { width: 100%; height: 100%; object-fit: cover; }
.cartelera-lista .mini .botella { height: 80%; filter: none; }
.cartelera-lista .mini:has(.botella) { background: var(--carbon-2); }
.cartelera-lista b { font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.1; transition: color .2s, transform .4s var(--curva); }
.cartelera-lista b { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.cartelera-lista small { grid-column: 2; align-self: start; font-size: var(--t-chica); color: var(--suave); }
.cartelera-lista small, .cartelera-lista .cuantos { display: none; }
.cartelera-lista .cuantos { grid-row: 1 / 3; grid-column: 3; align-self: center; font-size: var(--t-chica); color: var(--suave); font-variant-numeric: tabular-nums; }
.cartelera-lista a:hover b, .cartelera-lista a:focus-visible b, .cartelera-lista a.activa b { color: var(--oro-claro); transform: translateX(8px); }
.cartelera-lamina { margin: 0; display: none; }
.lamina-marco { aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: var(--carbon-2); display: grid; place-items: center; }
.lamina-marco img { width: 100%; height: 100%; object-fit: cover; }
.lamina-marco .botella { height: 70%; }
.lamina-marco.dibujo { background: var(--carbon-2); }
.cartelera-lamina figcaption { margin-top: var(--e3); font-size: var(--t-chica); color: var(--suave); }

/* Tarjeta de producto */
.producto { position: relative; display: flex; flex-direction: column; background: var(--carbon); border-radius: var(--radio); overflow: hidden; transition: background .3s, transform .4s var(--curva); }
.producto:hover { background: var(--carbon-2); transform: translateY(-3px); }
.producto .media { aspect-ratio: 1; cursor: pointer; background: var(--carbon-2); }
.producto:hover .media .botella, .producto:hover .media img { transform: scale(1.05); }
.sello { position: absolute; top: var(--e2); left: var(--e2); z-index: 1; pointer-events: none; font-size: var(--t-chica); font-weight: 600; padding: 3px 9px; border-radius: 2px; background: var(--crema); color: var(--negro); }
.sello.oro { background: var(--oro); }
.sello.rojo { background: var(--bordo); color: var(--crema); }
.producto .datos { padding: var(--e3) var(--e3) var(--e2); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.producto .cat { font-size: var(--t-chica); color: var(--suave); }
.producto h3 { font: 600 15px/1.35 var(--sans); }
.producto h3 button, .recomendado h3 button { text-align: left; padding-block: 12px; margin-block: -12px; }
.producto h3 button:hover { color: var(--oro-claro); }
.precios { display: flex; align-items: baseline; gap: var(--e2); flex-wrap: wrap; margin-top: auto; padding-top: var(--e2); }
.precio { font-family: var(--serif); font-size: 24px; font-weight: 600; white-space: nowrap; }
.antes { font-size: var(--t-chica); color: var(--suave); text-decoration: line-through; white-space: nowrap; }
.producto .agregar { margin: 0 var(--e3) var(--e3); min-height: 44px; background: var(--carbon-3); color: var(--oro-claro); border-radius: var(--radio); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.producto .agregar:hover { background: var(--oro); color: var(--negro); }

.fila { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--e3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--e2); scroll-behavior: smooth; }
.fila::-webkit-scrollbar { display: none; }
.fila .producto { scroll-snap-align: start; }

/* Función estelar: una exclusiva protagonista, en el campo bordó de la noche de estreno */
.estelar { margin-top: var(--e9); padding-block: var(--e9); background: var(--bordo-noche); }
.estelar-dentro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
.estelar-foto { aspect-ratio: 1; border-radius: var(--radio); background: #12080a; }
.estelar-foto .botella { height: 78%; }
.estelar-texto { display: flex; flex-direction: column; }
.pestanas { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e5); }
.pestanas button { min-height: 44px; padding: 0 var(--e4); border-radius: var(--radio); background: rgba(239, 230, 214, .06); color: var(--suave); font-size: 14px; font-weight: 600; transition: background .2s, color .2s; }
.pestanas button:hover { color: var(--crema); }
.pestanas button[aria-selected="true"] { background: var(--crema); color: var(--negro); }
.estelar-detalle { margin-top: var(--e5); display: grid; gap: var(--e2); }
.estelar-detalle h3 { font-size: clamp(30px, 3.4vw, 40px); }
.estelar-detalle .origen { color: var(--suave); font-size: 14px; }
.estelar-detalle .nota { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; max-width: 40ch; }
.estelar-detalle .precio { font-size: 32px; }
.quedan { font-size: 14px; color: var(--oro-claro); }
.acciones-estelar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); margin-top: var(--e4); }
.acciones-estelar .boton { min-height: 56px; padding-inline: var(--e3); white-space: normal; text-align: center; }
.estelar .boton-linea { background: rgba(239, 230, 214, .12); }
.estelar .boton-linea:hover { background: rgba(239, 230, 214, .2); }

/* Catálogo con filtros */
.catalogo { display: grid; gap: var(--e5); }
.filtros { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: var(--carbon-2); border-radius: 12px 12px 0 0; padding: var(--e4) var(--e5) var(--e5); transform: translateY(105%); visibility: hidden; transition: transform .45s var(--curva), visibility 0s .45s; display: grid; gap: var(--e5); }
.filtros.abierto { transform: none; visibility: visible; transition: transform .45s var(--curva); }
.filtros-cabeza { display: flex !important; justify-content: space-between; align-items: center; }
.grupo h3 { font: 600 14px var(--sans); color: var(--oro-claro); margin-bottom: var(--e1); }
.opcion-filtro { display: flex; justify-content: space-between; width: 100%; min-height: 44px; align-items: center; font-size: 15px; color: var(--suave); text-align: left; transition: color .2s; }
.opcion-filtro:hover { color: var(--crema); }
.opcion-filtro[aria-pressed="true"] { color: var(--crema); font-weight: 600; }
.opcion-filtro[aria-pressed="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); margin-right: var(--e2); }
.opcion-filtro span:first-child { flex: 1; }
.opcion-filtro small { color: var(--suave); font-weight: 400; font-variant-numeric: tabular-nums; }
.check { display: flex; align-items: center; gap: var(--e2); min-height: 44px; font-size: 15px; color: var(--suave); cursor: pointer; }
.check input { accent-color: var(--oro); width: 18px; height: 18px; }
.barra-catalogo { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-bottom: var(--e4); font-size: 14px; color: var(--suave); }
.barra-izquierda { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: var(--e2); min-height: 36px; padding: 0 var(--e3); border-radius: 18px; background: var(--carbon-2); color: var(--crema); font-size: 14px; }
.chip:hover { background: var(--carbon-3); }
.chip span { color: var(--oro); }
.barra-derecha { display: flex; gap: var(--e2); align-items: center; }
.ordenar { display: flex; align-items: center; gap: var(--e2); }
.ordenar select, .campo select, .campo input { min-height: 44px; background: var(--carbon); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0 var(--e3); font-size: 15px; }
.campo input:focus, .campo select:focus, .ordenar select:focus { border-color: var(--oro); outline: 0; }
.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
.mas { display: flex; justify-content: center; margin-top: var(--e6); }
.vacio { color: var(--suave); text-align: center; padding: var(--e7) 0; }
.vacio a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 4px; }

/* Regalos: la pregunta y sus dos respuestas, con un grabado de bodega */
.regalos { display: grid; gap: var(--e6); align-items: center; }
.regalos-foto { margin: 0; }
.regalos-foto img { display: block; width: 100%; height: auto; aspect-ratio: 900 / 744; object-fit: cover; border-radius: var(--radio); background: var(--papel); }
.regalos-foto figcaption { margin-top: var(--e2); font-size: var(--t-chica); color: var(--suave); }
.regalos-botones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-top: var(--e6); }
.regalos-botones .o { display: none; color: var(--suave); font-family: var(--serif); font-style: italic; font-size: 20px; }

/* Envíos y retiro: la entrada de cine, en papel, con su talón perforado */
.entrada { position: relative; display: grid; background: var(--papel); color: var(--tinta); border-radius: var(--radio); }
.entrada .bajada { color: #5b5146; }
.entrada h2 em { color: var(--bordo); }
.entrada-cuerpo { padding: var(--e6) var(--e5); }
.entrada-talon { position: relative; padding: var(--e7) var(--e5) var(--e6); display: grid; gap: var(--e1); align-content: start; border-top: 4px dotted var(--negro); color: #3d352d; }
.entrada-talon::before, .entrada-talon::after { content: ""; position: absolute; top: -16px; width: 28px; height: 28px; border-radius: 50%; background: var(--negro); }
.entrada-talon::before { left: -14px; }
.entrada-talon::after { right: -14px; }
.entrada-talon h3 { font-size: 30px; color: var(--tinta); }
.entrada-talon .gratis { margin-top: var(--e2); color: var(--bordo); font-weight: 600; }
.zonas { width: 100%; margin-top: var(--e5); border-collapse: collapse; font-size: 15px; }
.zonas th { text-align: left; font-size: var(--t-chica); font-weight: 600; color: #5b5146; padding-bottom: var(--e2); }
.zonas td { padding: var(--e3) 0; border-top: 1px solid rgba(27, 22, 18, .14); }
.zonas td:first-child { font-family: var(--serif); font-size: 20px; padding-right: var(--e3); }
.zonas th:last-child, .zonas td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pie: la marca en grande cierra la función */
.pie { margin-top: var(--e10); padding-block: var(--e7) var(--e6); background: var(--carbon); }
.pie-logo { display: block; width: clamp(200px, 30vw, 280px); height: auto; margin: 0 auto var(--e7); }
.pie-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e6) var(--e4); }
.pie-grilla > div { display: grid; gap: var(--e2); align-content: start; justify-items: start; font-size: 14px; color: var(--suave); }
.pie-grilla h3 { font: 600 14px var(--sans); color: var(--crema); }
.pie-grilla a, .pie-grilla .link { min-height: 44px; display: inline-flex; align-items: center; }
.pie-grilla a:hover { color: var(--crema); }
.pie .legal { margin-top: var(--e6); }
.pie .legal, .creditos, .firma { max-width: 62ch; }
.creditos, .firma { font-size: var(--t-chica); color: var(--suave); margin-top: var(--e3); }
.creditos summary { cursor: pointer; width: fit-content; min-height: 44px; display: flex; align-items: center; }
.creditos summary:hover { color: var(--crema); }
.creditos p { margin-top: var(--e1); }

.whatsapp { position: fixed; right: var(--e4); bottom: var(--e4); z-index: 15; width: 52px; height: 52px; border-radius: 50%; background: #1f9d55; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transition: transform .3s var(--curva); }
.whatsapp:hover { transform: scale(1.08); }
.whatsapp svg { width: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- Paneles: menú, ficha, info, carrito ---------- */
.velo { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .7); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.velo.visible { opacity: 1; visibility: visible; }
.ficha, .carrito, .cajon-menu, .info { position: fixed; z-index: 50; background: var(--carbon); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); transition: transform .45s var(--curva); }
.ficha[hidden], .carrito[hidden], .cajon-menu[hidden], .info[hidden] { display: none; }
.ficha { left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; border-radius: 12px 12px 0 0; transform: translateY(100%); }
.carrito, .info { top: 0; right: 0; bottom: 0; width: min(440px, 100%); transform: translateX(100%); }
.cajon-menu { top: 0; left: 0; bottom: 0; width: min(320px, 86%); transform: translateX(-100%); }
.ficha.abierta, .carrito.abierto, .cajon-menu.abierto, .info.abierto { transform: none; visibility: visible; }
.cajon-menu nav { display: grid; padding: var(--e3) var(--e5); overflow-y: auto; }
.cajon-menu nav a { padding: var(--e3) 0; font-family: var(--serif); font-size: 24px; }
.cajon-menu .marca-texto { font-size: 22px; }
.ficha-cerrar { position: absolute; top: var(--e3); right: var(--e3); z-index: 2; background: rgba(13, 11, 10, .7); }
.ficha-foto.media { height: 300px; flex: none; background: radial-gradient(ellipse 60% 60% at 50% 60%, rgba(226, 196, 135, .16), transparent 70%), var(--negro); }
.ficha-foto .botella { height: 74%; max-height: 420px; }
.ficha-datos { padding: var(--e5) var(--e4) var(--e6); }
.ficha h2 { font-size: 36px; }
.ficha .origen { display: block; margin-top: var(--e2); color: var(--suave); font-size: 14px; }
.ficha .nota { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; margin: var(--e4) 0; }
.ficha .precio { font-size: 34px; }
.ficha .aviso-edad { font-size: var(--t-chica); color: var(--oro-claro); background: rgba(201, 164, 92, .08); padding: var(--e2) var(--e3); border-radius: var(--radio); margin-top: var(--e4); }
.ficha-compra { display: flex; gap: var(--e3); margin-top: var(--e5); }
.ficha-compra .boton { flex: 1; }
.cantidad { display: flex; align-items: center; background: var(--carbon-2); border-radius: var(--radio); }
.cantidad button { width: 44px; height: 48px; font-size: 18px; }
.cantidad span { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.ficha .escuchar { margin-top: var(--e3); }

.carrito-cabeza { display: flex; justify-content: space-between; align-items: center; padding: var(--e3) var(--e3) var(--e3) var(--e5); background: var(--carbon-2); }
.carrito-cabeza h2 { font-size: 30px; }
.cajon-letra { display: block; width: 100px; height: auto; }
.carrito-cuerpo { flex: 1; overflow-y: auto; padding: var(--e5); display: flex; flex-direction: column; gap: var(--e4); }
.linea-carrito { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--e3); align-items: center; padding-bottom: var(--e4); border-bottom: 1px solid var(--linea); }
.linea-carrito .media { width: 56px; height: 56px; border-radius: 2px; }
.linea-carrito b { font-size: 14px; display: block; }
.linea-carrito small { color: var(--suave); font-size: var(--t-chica); }
.linea-carrito .derecha { text-align: right; display: grid; gap: var(--e1); justify-items: end; font-variant-numeric: tabular-nums; }
.linea-carrito .cantidad button { height: 44px; }
.barra-envio { font-size: 14px; color: var(--suave); }
.barra-envio .pista { height: 4px; background: var(--carbon-3); border-radius: 2px; margin-top: var(--e2); overflow: hidden; }
.barra-envio .pista i { display: block; height: 100%; background: var(--oro); transform-origin: left; transition: transform .5s var(--curva); }
.opciones { display: grid; gap: var(--e2); }
.opcion { display: flex; align-items: center; gap: var(--e3); min-height: 52px; padding: 0 var(--e4); background: var(--carbon-2); border: 1px solid transparent; border-radius: var(--radio); cursor: pointer; font-size: 15px; }
.opcion:has(input:checked) { border-color: var(--oro); }
.opcion input { accent-color: var(--oro); width: 18px; height: 18px; color-scheme: dark; }
.opcion small { margin-left: auto; color: var(--suave); font-size: var(--t-chica); }
.datos-cliente { display: grid; gap: var(--e3); }
.datos-cliente h3 { font: 600 15px var(--sans); }
.campo { display: grid; gap: var(--e1); font-size: 14px; color: var(--crema); }
.campo small { color: var(--suave); font-size: var(--t-chica); }
.campo select { min-height: 48px; }
.campo input { min-height: 48px; }
.campo input[aria-invalid="true"] { border-color: #e07a6a; }
.error-campo { color: #f0a090; font-size: var(--t-chica); }
.totales { display: grid; gap: var(--e1); font-size: 15px; font-variant-numeric: tabular-nums; }
.totales div { display: flex; justify-content: space-between; }
.totales .total { align-items: baseline; font-size: 16px; font-weight: 600; padding-top: var(--e2); margin-top: var(--e1); border-top: 1px solid var(--linea); }
.totales .total span:last-child { font-family: var(--serif); font-size: 28px; }
.confirmo { display: flex; gap: var(--e3); align-items: start; font-size: 14px; color: var(--suave); cursor: pointer; }
.confirmo input { accent-color: var(--oro); width: 20px; height: 20px; margin-top: 1px; flex: none; }
.pagar { display: grid; gap: var(--e2); }
.pagar .nota-pago, .aviso-demo { font-size: var(--t-chica); color: var(--suave); text-align: center; }
.boton-mp { background: #0a6eb4; color: #fff; }
.boton-mp:hover { background: #0b7ccb; }
.carrito-vacio { text-align: center; color: var(--suave); margin: auto 0; }
.carrito-vacio p { font-family: var(--serif); font-size: 26px; color: var(--crema); margin-bottom: var(--e2); }
.listo { text-align: center; margin: auto 0; }
.listo .sello-ok { width: 72px; height: 72px; margin: 0 auto var(--e5); border-radius: 50%; background: rgba(201, 164, 92, .12); display: grid; place-items: center; color: var(--oro); }
.listo .sello-ok svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 30; stroke-dashoffset: 30; animation: trazar .6s ease .2s forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }
.listo h3 { font-size: 36px; }
.listo p { color: var(--suave); margin-top: var(--e2); }
.pasos { text-align: left; display: grid; gap: var(--e3); margin: var(--e5) 0; padding: var(--e4); background: var(--carbon-2); border-radius: var(--radio); font-size: 14px; }
.pasos div { display: flex; gap: var(--e3); }
.pasos i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--oro); margin-top: 6px; flex: none; }
.pasos .hecho i { background: var(--oro); }
.info-cuerpo { padding: var(--e5); overflow-y: auto; display: grid; gap: var(--e4); align-content: start; }
.info-cuerpo ol { margin: 0; padding-left: var(--e5); display: grid; gap: var(--e3); }
.info-cuerpo p, .info-cuerpo li { color: var(--suave); }
.info-cuerpo b { color: var(--crema); }

/* ---------- Tienda real: precio a consultar, tabaquería, seguimiento ---------- */
.precio.consultar { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--suave); }
.producto .agregar { display: inline-flex; align-items: center; justify-content: center; }
.producto .agregar:disabled { background: var(--carbon-2); color: var(--suave); cursor: default; }
.recomendado .boton-chico { margin-top: var(--e3); }
.frase-ficha { margin: 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--oro-claro); }
.frase-ficha cite { display: block; font: 600 var(--t-chica) var(--sans); font-style: normal; color: var(--suave); margin-top: var(--e1); }
.tabaqueria { padding: var(--e6) var(--e5); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--carbon); }
.tabaqueria-puerta { display: grid; gap: var(--e3); max-width: 62ch; justify-items: start; }
.tabaqueria-puerta p:first-child { color: var(--suave); }
.tabaqueria-puerta b { color: var(--crema); font-weight: 600; }
#tabaqueria-nota { margin-bottom: var(--e5); }
.formulario { display: grid; gap: var(--e3); }
.formulario textarea { background: var(--carbon); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3); font: inherit; color: inherit; resize: vertical; }
.formulario textarea:focus { border-color: var(--oro); outline: 0; }
.resumen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e1); font-size: 15px; text-align: left; font-variant-numeric: tabular-nums; }
.resumen li { display: flex; justify-content: space-between; gap: var(--e4); }
.resumen .total { font-weight: 600; padding-top: var(--e2); border-top: 1px solid var(--linea); }
.alerta { padding: var(--e3) var(--e4); border-radius: var(--radio); background: rgba(110, 31, 42, .35); color: var(--crema) !important; }
.total-prueba { font-family: var(--serif); font-size: 40px; color: var(--crema) !important; margin: var(--e4) 0 !important; }
.listo .boton { margin-top: var(--e3); width: 100%; }
#info .listo { margin: 0; }

/* La botella que vuela al carrito */
.volando { position: fixed; z-index: 70; pointer-events: none; border-radius: 50%; overflow: hidden; }

.toast { position: fixed; left: 50%; bottom: var(--e5); z-index: 60; max-width: calc(100% - 2 * var(--e4)); display: flex; align-items: center; gap: var(--e4); background: var(--crema); color: var(--negro); padding: var(--e3) var(--e5); border-radius: var(--radio); font-size: 14px; font-weight: 600; transform: translate(-50%, 20px); opacity: 0; visibility: hidden; transition: transform .45s var(--curva), opacity .35s, visibility 0s .35s; }
.toast.visible { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s var(--curva), opacity .35s; }
.toast.arriba { bottom: auto; top: var(--e5); }
.toast button { min-height: 32px; color: var(--bordo); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Movimiento (todo lo escondido al empezar vive acá; sin movimiento, la página ya está terminada) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .titulo-portada span, .titulo-portada em { animation: proyecta .9s var(--curva) both; }
  .titulo-portada em { animation-delay: .12s; }
  .banner-texto .bajada { animation: proyecta .9s var(--curva) .2s both; }
  .banner-media .botella { animation: entra 1.1s var(--curva) both; animation-delay: calc(var(--n) * 120ms); }
  .js .aparece { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .9s var(--curva); transition-delay: calc(var(--orden, 0) * 80ms); }
  .js .aparece.visto { opacity: 1; transform: none; }
  .grano { animation: grano .5s steps(4) infinite; }
  .intro .escenario { animation: parpadeo 4s steps(1) infinite; }
  .chaplin.caminando { animation: llega 1.4s ease-out both; }
  .chaplin.se-va { animation: se-va 6s linear forwards; }
  .cartel { animation: proyecta .7s var(--curva) .15s both; }
  .estelar-foto .botella { transition: transform .6s var(--curva), opacity .4s; }
  .estelar-foto.cambiando .botella { transform: translateY(12px); opacity: .25; }
}
@keyframes proyecta { from { opacity: .35; transform: translateY(14px); } }
@keyframes entra { from { opacity: 0; transform: translateY(40px); } }
@keyframes llega { from { opacity: 0; } }
@keyframes se-va { from { transform: scaleX(-1); } 70% { opacity: 1; } to { transform: translateX(calc(var(--alto) * var(--paso) * -6)) scaleX(-1); opacity: 0; } }
@keyframes grano { 25% { transform: translate(-4%, 3%); } 50% { transform: translate(3%, -2%); } 75% { transform: translate(-2%, -4%); } }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 42% { opacity: .9; } 44% { opacity: 1; } 71% { opacity: .94; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro.cerrando { transition: none; }
  .ficha, .carrito, .cajon-menu, .info, .filtros, .toast, .producto, .boton, .whatsapp, .link-flecha span, .cartelera-lista b, .icono { transition-property: opacity, visibility, background, color !important; }
  .producto:hover, .whatsapp:hover, .escuchar:hover .play { transform: none; }
  .carrito-boton.salta, .escuchar.sonando .onda i { animation: none; }
}

/* ---------- Tablet y compu ---------- */
@media (min-width: 720px) {
  .contenedor { width: min(1240px, 100% - 2 * var(--e6)); }
  .solo-compu { display: inline !important; }
  .cinta-dentro { justify-content: space-between; }
  .grilla { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
  .fila { grid-auto-columns: calc((100% - 3 * var(--e3)) / 4); }
  .flechas { display: flex; }
  .beneficios { grid-template-columns: repeat(4, 1fr); padding-top: var(--e6); }
  .seccion { padding-top: var(--e9); }
  .seleccion { padding-bottom: var(--e9); margin-top: var(--e8); }
  .seleccion-lista { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; overflow: visible; padding-bottom: 0; }
  .cartelera-lista small, .cartelera-lista .cuantos { display: block; }
  .cartelera-lista b { font-size: clamp(28px, 3.4vw, 40px); grid-row: auto; align-self: end; }
  .cartelera { grid-template-columns: 1.3fr 1fr; gap: var(--e8); align-items: start; }
  .cartelera-lista { grid-template-columns: 1fr 1fr; column-gap: var(--e6); }
  .cartelera-lista a { grid-template-columns: 80px 1fr auto; gap: 0 var(--e4); padding: var(--e3) 0; }
  .cartelera-lista .mini { width: 80px; height: 100px; }
  .cartelera-lamina { display: block; position: sticky; top: 170px; }
  .estelar-dentro { grid-template-columns: 1fr 1fr; gap: var(--e8); align-items: center; }
  .regalos { grid-template-columns: 1fr 1.2fr; gap: var(--e8); }
  .regalos-botones .o { display: inline; }
  .entrada { grid-template-columns: 1fr 300px; }
  .entrada-cuerpo { padding: var(--e7) var(--e6); }
  .entrada-talon { border-top: 0; border-left: 4px dotted var(--negro); padding: var(--e7) var(--e6); }
  .entrada-talon::before, .entrada-talon::after { top: auto; left: -16px; right: auto; }
  .entrada-talon::before { top: -14px; }
  .entrada-talon::after { bottom: -14px; }
  .pie-grilla { grid-template-columns: repeat(4, 1fr); }
  .ficha { left: 50%; right: auto; top: 50%; bottom: auto; width: min(900px, 92vw); max-height: 88vh; border-radius: var(--radio); display: grid; grid-template-columns: 1fr 1fr; transform: translate(-50%, -46%) scale(.97); opacity: 0; transition: transform .45s var(--curva), opacity .3s; }
  .ficha.abierta { transform: translate(-50%, -50%); opacity: 1; }
  .ficha-foto.media { height: 100%; min-height: 480px; }
  .ficha-datos { padding: var(--e7) var(--e6); }
  .escenario { height: 250px; }
  .chaplin { --alto: 270px; bottom: -12px; }
}
/* El telón: la página sube y deja ver el pie que espera abajo. Solo si el pie entra entero en la pantalla. */
@media (min-width: 720px) and (min-height: 860px) {
  main { position: relative; z-index: 1; background: var(--negro); padding-bottom: var(--e10); }
  .pie { position: sticky; bottom: 0; z-index: 0; margin-top: 0; }
}
@media (min-width: 1000px) {
  .solo-celu { display: none !important; }
  .barra { grid-template-columns: auto 1fr auto; grid-template-areas: "logo buscar acciones"; column-gap: var(--e7); padding-block: var(--e3); }
  .buscador-cabecera { margin-top: 0; max-width: 560px; width: 100%; justify-self: center; }
  .logo .marca-texto { font-size: 26px; }
  .menu-categorias { display: block; }
  .portada { grid-template-columns: 1fr 1fr; gap: var(--e4); margin-top: var(--e5); }
  .diapo { grid-template-columns: 1.25fr 1fr; height: 550px; align-content: stretch; }
  .diapo .banner-media { min-height: 0; overflow: hidden; }
  .banner-media.cartel-pagos { font-size: 44px; }
  .carteles-puntos { display: flex; }
  .banner-texto { order: -1; padding: var(--e7) var(--e6); align-self: center; }
  .banner-media { height: auto; padding-bottom: var(--e5); }
  .banner-media .botella { height: 70%; }
  .banner-media .botella:nth-child(2) { height: 80%; }
  .banner-media .botella:nth-child(3) { height: 62%; }
  .promo { min-height: 220px; }
  .catalogo { grid-template-columns: 230px 1fr; gap: var(--e6); align-items: start; }
  .filtros { position: sticky; top: 150px; transform: none; visibility: visible; max-height: none; overflow: visible; background: none; border-radius: 0; padding: 0; z-index: auto; transition: none; }
  .filtros-cabeza { display: none !important; }
  .grilla { grid-template-columns: repeat(3, 1fr); }
  .seleccion-lista { grid-template-columns: repeat(4, 1fr); }
  .recomendado { grid-template-columns: 1fr; padding: var(--e4); align-content: start; }
  .recomendado .media { aspect-ratio: 1; }
}
@media (min-width: 1200px) {
  .grilla { grid-template-columns: repeat(4, 1fr); }
}