section { padding-block: var(--espacio-6); }

/* Hero */
.menu {
  background: none; backdrop-filter: none; border-bottom: 0;
  position: sticky; margin-bottom: calc(-1 * var(--alto-menu));
  color: var(--crema); text-shadow: 0 1px 2px rgb(0 0 0 / 52%);
  transition: color 0.35s ease;
}
.menu a { color: inherit; }
.menu .icono { background: var(--crema); color: var(--oliva); border-color: transparent; transition: border-color 0.35s ease, background-color 0.2s, color 0.2s; }
/* Bloque crema que baja desde arriba y cubre todo el alto del menú */
.menu::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgb(244 238 227 / 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  clip-path: inset(0 0 100% 0); /* recorte en vez de overflow: el logo del hero sale del menú */
  transition: clip-path 0.35s ease;
}
.menu:hover, .menu:focus-within, .menu--solido, .menu--abierto { color: var(--oliva); text-shadow: none; }
.menu:hover .icono, .menu:focus-within .icono, .menu--solido .icono, .menu--abierto .icono { border-color: var(--oliva); background: transparent; }
.menu .icono:hover { background: var(--oliva); color: var(--crema); }
.menu:hover::before, .menu:focus-within::before, .menu--solido::before, .menu--abierto::before { clip-path: inset(0); }
.menu--abierto::before { background: rgb(244 238 227 / 0.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.menu__logo img { display: block; transform-origin: center; }
.menu--abierto .menu__logo img { transform: none !important; }
/* Móvil: el panel abierto va fijo a los cuatro bordes (aquí el .menu es sticky y le gana a base.css); cubre la pantalla entera aunque haya cinta arriba */
@media (max-width: 767px) { .menu--abierto { position: fixed; inset: 0; margin: 0; } } /* sin el margin-bottom negativo, que lo estiraría más que la pantalla */
@media (prefers-reduced-motion: reduce) { .menu, .menu::before, .menu .icono { transition: none; } }
.hero { position: relative; padding: 0; color: var(--crema); background: #1e220e; }
.hero__escena { position: relative; height: calc(100vh - var(--alto-cinta, 0px)); height: calc(100svh - var(--alto-cinta, 0px)); min-height: 30rem; overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.hero__texto {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--espacio-2); padding: var(--alto-menu) var(--espacio-2) 0; text-align: center;
}
.hero h1 { font-size: clamp(2.5rem, 10vw, 9rem); color: var(--crema); margin: 0; white-space: nowrap; }
.hero h1 span { display: inline-block; }
@media (max-width: 767px) { .hero h1 { display: flex; flex-direction: column; align-items: center; font-size: 20vw; line-height: 0.95; } } /* dos líneas, más grande */
.hero__sub { font-family: var(--font-display); font-size: clamp(1.125rem, 2vw, 1.5rem); max-width: 34ch; margin: 0; }
.hero__lugar { font-family: var(--font-texto); }
.hero__botones { position: absolute; left: 0; right: 0; bottom: calc(var(--espacio-4) + var(--cinta-visible, 0px)); justify-content: center; padding-inline: var(--espacio-2); }
/* Siempre en una fila, uno al lado del otro: en pantallas angostas se achican letra y relleno en vez de saltar de línea */
.hero__botones { flex-wrap: nowrap; gap: clamp(0.5rem, 2.5vw, var(--espacio-2)); }
.hero__botones .btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; padding-inline: clamp(0.75rem, 3.5vw, 1.5rem); font-size: clamp(0.8125rem, 3.9vw, var(--texto-base)); }
/* Con JS y movimiento permitido: escena fija mientras el scroll recorre la animación */
.hero--animado { height: 220vh; }
.hero--animado .hero__escena { position: sticky; top: 0; height: 100vh; height: 100svh; }
.hero--animado :is(.hero__video, .hero__ponle, .hero__corazon, .hero__sub, h1) { will-change: transform, opacity; }
.btn--claro { border-color: var(--crema); color: var(--crema); }
.btn--claro:hover { background: rgb(244 238 227 / 0.15); }

/* Frase */
.frase { padding-block: var(--espacio-6) var(--espacio-4); text-align: center; }
.frase__texto { font-size: clamp(2.5rem, 6.5vw, 5.5rem); max-width: 16ch; margin-inline: auto; }
.frase__sub { display: block; margin-top: var(--espacio-2); font: 400 clamp(1.125rem, 2vw, 1.5rem)/1.4 var(--font-texto); }
/* Barra del color del fondo al 35 % con oleaje que cubre 3/4 de la frase (aclara el texto que tapa). Al verse sube desde abajo al 90 % y, ya en su sitio, baja al 35 % (js/main.js
   la deja vacía hasta entonces); sin JS o con "reducir movimiento" queda directamente en su lugar. */
.frase__titular { position: relative; display: inline-block; }
.frase__titular::after {
  content: ""; position: absolute; left: -0.1em; right: -0.1em; bottom: 0; height: 75%;
  background: var(--crema); opacity: 0.35; pointer-events: none;
  --ola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10Q25 0 50 10T100 10V20H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--ola) 0 0 / 1.6em 0.22em repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 0.21em) no-repeat;
  mask: var(--ola) 0 0 / 1.6em 0.22em repeat-x, linear-gradient(#000 0 0) 0 100% / 100% calc(100% - 0.21em) no-repeat;
  animation: frase-ola 2.4s linear infinite;
}
.frase__titular--vacia::after { height: 0; opacity: 0.9; }
.frase__titular:not(.frase__titular--vacia)::after { transition: height 1.8s cubic-bezier(0.3, 0.6, 0.3, 1), opacity 0.8s ease 1.8s; }
@keyframes frase-ola { to { -webkit-mask-position: 1.6em 0, 0 100%; mask-position: 1.6em 0, 0 100%; } }
@media (prefers-reduced-motion: reduce) { .frase__titular::after { animation: none; transition: none; } }

/* Copas */
.copas { padding-top: var(--espacio-3); overflow-x: clip; } /* las copas (160 % de ancho) no deben dar scroll lateral en celular */
.copas__grilla { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .copas__grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .copas__grilla { grid-template-columns: repeat(4, 1fr); } }
/* Tarjeta de dos caras: al pasar el cursor (o enfocarla / tocarla) gira 180° y muestra el reverso. */
.copa { --perspectiva: 1400; --giro: 1.4s; --ancho: 100%; width: var(--ancho); margin-top: calc(var(--ancho) * 0.47); perspective: calc(var(--perspectiva) * 1px); perspective-origin: 50% 0; border-radius: var(--radio); }
/* Celular en vertical: todo se dimensiona con el ancho de la tarjeta y la composición (copa que
   sobresale + tarjeta) mide 1,67 × ancho + ~10rem de textos; el ancho se limita para que quepa
   entera bajo el menú. Se usa lvh (barras recogidas, como se ve casi siempre en iOS 26): svh
   subestima el alto visible y dvh cambiaría el tamaño de las tarjetas al hacer scroll. */
/* Celular: carrusel horizontal a todo el ancho de la pantalla, una tarjeta por vez con snap al centro.
   --ancho no usa % (el 100 % del carrusel incluye su relleno): así la grilla también lo conoce y centra
   la primera y la última con su relleno lateral. Se restan ~1,5rem más para los puntos de debajo. */
@media (max-width: 639px) {
  .copas__grilla, .copa { --ancho: min(100vw - 4rem, max(15rem, (100lvh - var(--alto-menu) - 12.5rem) / 1.67)); }
  .copas__grilla {
    display: flex; gap: var(--espacio-2);
    margin-inline: calc(50% - 50vw); padding: 0 calc((100vw - var(--ancho)) / 2) var(--espacio-2);
    /* overflow-y: hidden y no auto: al girar, la esquina en 3D sobresale por abajo y el carrusel se volvía
       desplazable en vertical; atrapaba el gesto del dedo (la página se frenaba) y el snap saltaba de tarjeta. */
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .copas__grilla::-webkit-scrollbar { display: none; }
  .copa { flex: none; scroll-snap-align: center; scroll-snap-stop: always; }
}
/* Indicador del carrusel (lo crea js/main.js): una barrita por tarjeta; la actual se alarga en naranja. */
.copas__puntos { display: none; }
@media (max-width: 639px) {
  .copas__puntos { display: flex; justify-content: center; gap: 0.4rem; margin-top: var(--espacio-1); }
  .copas__puntos button {
    width: 0.5rem; height: 0.5rem; padding: 0; border: 0; border-radius: 1rem; cursor: pointer;
    background: var(--oliva); opacity: 0.3; transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  }
  .copas__puntos button[aria-current="true"] { width: 1.75rem; opacity: 1; background: var(--naranja); }
  /* Área táctil cómoda sin agrandar la barrita. */
  .copas__puntos button { position: relative; }
  .copas__puntos button::after { content: ""; position: absolute; inset: -0.75rem -0.2rem; }
}
@media (prefers-reduced-motion: reduce) { .copas__puntos button { transition: none; } }
.copa__giro { position: relative; height: 100%; transform-style: preserve-3d; transition: transform var(--giro) cubic-bezier(0.2, 0.7, 0.2, 1); }
/* --g: 0 muestra el frente y 1 el reverso. Con cursor gira al pasar por encima; en pantallas táctiles
   cada toque alterna .copa--girada (js/main.js); con teclado, al enfocarla. */
/* --g es un número registrado: así js/main.js puede animarlo (vaivén de la primera tarjeta al entrar) y todo lo
   que depende de él (giro, desenfoque, orden de las copas, líquido) lo sigue de forma continua. */
@property --g { syntax: '<number>'; inherits: true; initial-value: 0; }
/* Durante ese vaivén las transiciones sobran: seguirían a --g con retraso en vez de moverse con él. */
.copa--vaiven, .copa--vaiven *, .copa--vaiven .copa__giro::before { transition: none !important; }
.copa { --g: 0; }
/* Zona activa: además de la tarjeta, la parte de la copa que sobresale por arriba (las imágenes de las
   copas no reciben el cursor). Es un óvalo invisible del tamaño de esa parte, apoyado sobre la tarjeta
   y dentro del margen superior; se queda quieto mientras la tarjeta gira. */
.copa { position: relative; }
.copa::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; translate: -50% 0;
  width: 75%; aspect-ratio: 1.83; border-radius: 48% 48% 0 0 / 70% 70% 0 0;
}
.copa--flauta::before { width: 38%; aspect-ratio: 0.84; border-radius: 45% 45% 0 0 / 14% 14% 0 0; } /* la flauta es más angosta y más alta */
@media (hover: hover) { .copa:hover { --g: 1; } }
.copa:focus-visible, .copa--girada { --g: 1; }
.copa__giro { transform: rotateY(calc(var(--g) * 180deg)); }
.copa__cara { border-radius: var(--radio); }
/* Cada capa es hija directa del giro y tiene su propia transformación 3D: así Safari (iPhone)
   respeta backface-visibility. El orden del HTML (placa, frente, copa, reverso, copa) es además
   el orden de pintado correcto si Safari no ordena las capas por profundidad durante el giro. */
.copa__giro > * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* Placa opaca entre las dos caras (cada cara se separa 1px de ella). */
.copa__giro::before { content: ""; position: absolute; inset: 0; border-radius: var(--radio); background: var(--oliva); transform: translateZ(0); }
/* Las copas (recorte y dibujo) flotan --z px delante de su cara y se separan al girar. La escala
   compensa el agrandado de la perspectiva desde su punto de fuga (arriba al centro de la tarjeta),
   así en reposo siguen calzando con la foto. Son más grandes que la tarjeta y casi todo es
   transparente: no deben activar el giro. */
.copa__flota {
  --z: 81;
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 5 / 6; pointer-events: none;
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / var(--perspectiva)));
}
/* Ninguna copa desaparece al girar: la de la cara que queda atrás sigue visible detrás de la tarjeta,
   más tenue, desenfocada y más chica. El z-index replica el orden por profundidad (cara activa y su
   copa adelante) para Safari, y cambia cuando la tarjeta queda de perfil: al 14,4 % del giro con esta curva.
   El desenfoque termina a los 100° de giro, que con esta curva es el 16,5 % del tiempo. */
.copa__frente, .copa__dorso { z-index: 1; }
.copa__giro > .copa__flota {
  -webkit-backface-visibility: visible; backface-visibility: visible;
  transition: opacity var(--giro) ease, filter calc(var(--giro) * 0.165) ease, scale var(--giro) cubic-bezier(0.2, 0.7, 0.2, 1),
              z-index 0s linear calc(var(--giro) * 0.144);
}
.copa__flota--frente { z-index: calc(2 - 2 * var(--g)); opacity: calc(1 - 0.65 * var(--g)); filter: blur(calc(4px * var(--g))); scale: calc(1 - 0.18 * var(--g)); }
/* el dibujo no se atenúa, solo se desenfoca y achica */
.copa__flota--dorso { z-index: calc(2 * var(--g)); filter: blur(calc(4px - 4px * var(--g))); scale: calc(0.82 + 0.18 * var(--g)); }
.copa__flota--dorso { aspect-ratio: 5 / 4; transform: rotateY(180deg) translateZ(calc(var(--z) * 1px)) scale(calc(1 - var(--z) / var(--perspectiva))); }
.copa__flota img, .copa__media img { position: absolute; top: -75%; left: 50%; width: 160%; max-width: none; translate: -50% 0; }
.copa__flota--dorso img { top: -86%; width: 120%; }
/* El líquido sube desde la base del cuerpo: encima de la copa vacía va la llena, dentro de una capa
   cuyo borde superior es una ola (máscara que se desplaza sin fin). La capa baja hasta el nivel del
   líquido y la copa de adentro sube lo mismo, así solo se mueve la superficie. --vacio y --lleno son
   el nivel en % del lienzo (--vacio un poco bajo la base para que las crestas no asomen). Llena al
   girar y termina 1 s después del giro; al volver se vacía durante el giro. */
.copa__liquido {
  --vacio: 60.9%; --lleno: 28%;
  --nivel: calc(var(--vacio) - (var(--vacio) - var(--lleno)) * var(--g));
  --llenado: translate calc(var(--giro) + 1s * var(--g)) cubic-bezier(0.4, 0, 0.3, 1);
  position: absolute; top: -86%; left: 50%; width: 120%; aspect-ratio: 1200 / 1607;
  translate: -50% var(--nivel);
  transition: var(--llenado);
  --ola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0.9Q12.5 0 25 0.9T50 0.9T75 0.9T100 0.9V100H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--ola) 0 0 / 30% 100% repeat-x; mask: var(--ola) 0 0 / 30% 100% repeat-x;
  animation: oleaje 1.44s linear infinite;
}
.copa__flota--dorso .copa__liquido img { top: 0; left: 0; width: 100%; translate: 0 calc(-1 * var(--nivel)); transition: var(--llenado); }
/* Avanza exactamente una baldosa (30 % de ancho = 3/7 del recorrido posible) para que el ciclo empalme. */
@keyframes oleaje { to { -webkit-mask-position: 42.857% 0; mask-position: 42.857% 0; } }

/* Frente: la foto se corta en el borde superior; encima (en .copa__flota) va la misma copa sin fondo,
   alineada píxel a píxel, que sí sobresale. El margen superior deja lugar a lo que sobresale. */
.copa__frente { position: relative; transform: translateZ(1px); height: 100%; background: var(--blanco); display: flex; flex-direction: column; }
.copa__media { position: relative; aspect-ratio: 5 / 6; }
.copa__fondo { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radio) var(--radio) 0 0; }
.copa__texto { flex: 1; padding: var(--espacio-2) var(--espacio-3) var(--espacio-3); }
.copa h3 { margin-bottom: 0.25rem; }
.copa p { margin-bottom: 0.25rem; }
/* Precio grande en Gloock que sobresale de la franja verde (la franja es ::before, detrás del texto).
   Contorno verde detrás del relleno: 4px de trazo dejan 2px visibles por fuera. El rótulo "Precio"
   comparte la línea base con el número; el margen inferior lo deja centrado en la franja. */
.copa .copa__precio {
  position: relative; isolation: isolate; margin: 0; padding: 0 var(--espacio-3) 0.7rem;
  display: flex; align-items: baseline; justify-content: space-between;
  font: 400 2.5rem/1 var(--font-display); color: var(--crema);
  -webkit-text-stroke: 4px var(--oliva); paint-order: stroke fill;
}
.copa .copa__precio::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(0.55em + var(--espacio-2));
  background: var(--oliva); border-radius: 0 0 var(--radio) var(--radio);
}
/* Rótulo "Precio" a la derecha (sin lectura en voz alta: es decorativo, el número ya lo dice). */
.copa .copa__precio::after {
  content: "Precio"; content: "Precio" / "";
  font: 600 0.5rem/1 var(--font-texto); letter-spacing: 0.08em; text-transform: uppercase;
  -webkit-text-stroke: 0; color: #fff;
}

/* Reverso: la copa dibujada (una franja por ingrediente) va en .copa__flota--dorso; aquí deja su lugar. */
.copa__dorso {
  position: absolute; inset: 0; transform: rotateY(180deg) translateZ(1px);
  display: flex; flex-direction: column;
  background: var(--oliva); color: var(--crema); line-height: 1.4; container-type: inline-size;
}
.copa__media--dorso { aspect-ratio: 5 / 4; flex: none; }
/* El texto del reverso escala con el ancho de la tarjeta (cqw) para caber también en tarjetas angostas. */
.copa__info { flex: 1; display: flex; flex-direction: column; gap: clamp(0.5rem, 4cqw, var(--espacio-2)); padding: var(--espacio-2) clamp(1rem, 7cqw, var(--espacio-3)) 2rem; font-size: clamp(0.75rem, 5.2cqw, 0.9375rem); }
.copa .copa__nombre { margin: 0; font: 400 clamp(1.125rem, 8.5cqw, 1.5rem)/1.1 var(--font-display); color: var(--naranja); }
.copa__medidas { list-style: none; margin: 0; padding: 0 0 var(--espacio-2); border-bottom: 1px solid rgb(244 238 227 / 0.35); }
.copa__medidas li { display: flex; align-items: center; gap: 0.6rem; padding: 0.15rem 0; }
.copa__medidas li[style]::before { content: ""; flex: none; width: 1.6rem; height: 0.7rem; border-radius: 2px; background: var(--c); }
@media (prefers-reduced-motion: reduce) { .copa__giro, .copa__giro > .copa__flota, .copa__liquido, .copa__liquido img { transition: none; animation: none; } }
.copas__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-2); margin-top: var(--espacio-4); }
.copas__promo {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0;
  padding: 0.5rem 1.25rem 0.5rem 0.5rem; border-radius: 2rem;
  background: var(--oliva); color: var(--crema); font-size: 1.125rem;
}
.copas__promo > img { width: 2.25rem; height: 2.25rem; flex: none; }
.copas__promo strong { white-space: nowrap; }
.copas__sep { display: inline-block; width: 0.35em; height: 0.35em; margin-inline: 0.4em; border-radius: 50%; background: var(--naranja); vertical-align: 0.15em; }
.copas__ico { display: inline-block; width: auto; height: 1.15em; margin-right: 0.3em; vertical-align: -0.2em; }
/* Celular: la franja de promos ocupa todo el ancho de la pantalla, sin esquinas redondeadas, con
   "Promos:" y cada combo en su propia línea; el botón queda centrado debajo. */
@media (max-width: 639px) {
  .copas__pie { flex-direction: column; align-items: center; }
  .copas__promo { align-self: stretch; margin-inline: calc(50% - 50vw); border-radius: 0; justify-content: center; padding: var(--espacio-2) 1rem; }
  .copas__titulo, .copas__sep + strong { display: block; }
  /* Mismo ancho para los dos íconos (el de copas es más angosto): el "2" de cada línea empieza igual. */
  .copas__promo .copas__ico { width: 1.5em; object-fit: contain; }
}

/* Día y tarde */
.dia { background: var(--crema-oscura); }
/* Titular: cada letra nace pegada a las vecinas (cada una con su propio apriete al azar) y se separa
   despacio hasta su lugar (js/main.js). Solo se mueven con transform: las líneas no se reacomodan. */
.dia__palabra { display: inline-block; white-space: nowrap; }
.dia__letra { display: inline-block; transition: translate 2.2s var(--dur, 0s) cubic-bezier(0.22, 0.61, 0.36, 1); }
.dia__titulo--junto .dia__letra { translate: var(--dx, 0) 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .dia__letra { transition: none; } }
/* Oferta: acordeón horizontal. Las cerradas son pestañas verticales con su foto agrandada y desenfocada
   bajo un velo oliva; al abrirse, la foto se enfoca y baja a su tamaño, el velo se desvanece y el nombre
   rotado se achica hasta desaparecer. La foto y el velo son capas del propio details (::before y ::after),
   que se dibujan abierto o cerrado, así todo transiciona. En celular
   las pestañas son franjas horizontales y el degradé sube desde abajo. */
.dia h2 { margin-bottom: var(--espacio-4); }
.dia__oferta { --alto: clamp(26rem, 42vw, 34rem); --pestana: 4.5rem; --curva: cubic-bezier(0.65, 0, 0.25, 1); --tiempo: 0.9s;
  display: flex; gap: var(--espacio-2); height: var(--alto); }
.dia details {
  position: relative; flex: 0 0 var(--pestana); border-radius: var(--radio); overflow: hidden; isolation: isolate;
  background-color: var(--oliva); background-size: 0 0; color: var(--crema-oscura);
  transition: flex-grow var(--tiempo) var(--curva);
}
.dia details[open] { flex-grow: 1; }
.dia details:has(summary:focus-visible) { outline: 3px solid var(--oliva); outline-offset: 3px; }
/* Fotos de cada sección (en celular, verticales salvo Para acompañar, que no tiene). */
.dia__item--picar { background-image: url(../img/dia-tabla-picar-960.webp); background-image: image-set(url(../img/dia-tabla-picar-960.webp) 1x, url(../img/dia-tabla-picar-1920.webp) 2x); }
.dia__item--combos { background-image: url(../img/dia-cafe-frio-960.webp); background-image: image-set(url(../img/dia-cafe-frio-960.webp) 1x, url(../img/dia-cafe-frio-1920.webp) 2x); }
.dia__item--acompanar { background-image: url(../img/dia-pasteleria-960.webp); background-image: image-set(url(../img/dia-pasteleria-960.webp) 1x, url(../img/dia-pasteleria-1920.webp) 2x); }
.dia__item--cafe { background-image: url(../img/dia-capuchino-960.webp); background-image: image-set(url(../img/dia-capuchino-960.webp) 1x, url(../img/dia-capuchino-1920.webp) 2x); }
/* Foto: mide lo que la sección abierta (alto fijo), así no cambia de escala mientras la caja se ensancha. */
.dia details::before, .dia details::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dia details::before {
  background: inherit; background-size: max(100%, var(--alto) * 16 / 9) auto; background-position: center;
  filter: blur(10px); scale: 1.5;
  transition: filter var(--tiempo) var(--curva), scale var(--tiempo) var(--curva);
}
/* Velo oliva (color de fondo) y degradé hacia oliva donde va el texto (imagen de fondo). El degradé se
   funde con --degradado (0 cerrado, 1 abierto), registrada con @property para que transicione al abrir y al cerrar. */
@property --degradado { syntax: '<number>'; inherits: false; initial-value: 0; }
.dia details::after {
  --degradado: 0;
  background: rgb(48 55 23 / 0.6) linear-gradient(var(--hacia, to right), transparent 40%, rgb(48 55 23 / calc(0.85 * var(--degradado))) 72%, rgb(48 55 23 / var(--degradado)));
  transition: background-color var(--tiempo) var(--curva), --degradado var(--tiempo) var(--curva);
}
.dia details[open]::before { filter: blur(0); scale: 1; }
.dia details[open]::after { background-color: rgb(48 55 23 / 0); --degradado: 1; }
@media (hover: hover) { .dia details:not([open]):hover::after { background-color: rgb(48 55 23 / 0.4); } }
/* Nombre rotado: ocupa toda la pestaña (toda es zona de clic), centrado y abajo. Al abrir se achica y
   se vuelve transparente; sigue ahí para lectores de pantalla y el título visible pasa al panel. */
.dia summary {
  position: absolute; inset: 0 auto 0 0; z-index: 1; width: var(--pestana);
  display: flex; align-items: center; justify-content: flex-start; /* girado 180°: el inicio queda abajo */
  padding: var(--espacio-3) 0; list-style: none; cursor: pointer; outline: none;
  font: 400 clamp(1.5rem, 2.4vw, 2rem)/1 var(--font-display); white-space: nowrap;
  writing-mode: vertical-rl; rotate: 180deg;
}
.dia summary::-webkit-details-marker { display: none; }
.dia summary span { transform-origin: 50% 0; transition: scale calc(var(--tiempo) * 0.6) var(--curva), color calc(var(--tiempo) * 0.5) ease-out; }
.dia details[open] summary { cursor: default; }
.dia details[open] summary span { scale: 0.6; color: transparent; }
/* Panel abierto: la foto de verdad queda solo para lectores de pantalla (la visible es el ::before). */
.dia__panel { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-end; }
.dia__panel img { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Ancho fijo (no relativo al panel, que crece al abrirse) y entra cuando el panel ya terminó de abrirse. */
/* Al cerrar, el contenido del details se oculta recién cuando termina el fundido (allow-discrete; sin
   soporte se oculta al instante). */
.dia details::details-content { transition: content-visibility calc(var(--tiempo) * 0.5) allow-discrete; }
.dia__texto { position: relative; z-index: 1; flex: none; width: min(24rem, 32vw); padding: var(--espacio-4) var(--espacio-4) var(--espacio-4) 0; transition: opacity calc(var(--tiempo) * 0.5) ease-out; }
/* Entra con retraso, cuando el panel casi terminó de abrirse; al cerrar se va sin retraso. Con transición
   (no animación): quitar una animación al cerrar haría saltar la opacidad. */
.dia details[open] .dia__texto { transition-duration: 0.5s; transition-delay: calc(var(--tiempo) * 0.75); }
.dia details:not([open]) .dia__texto { opacity: 0; }
.dia__texto p { margin: 0; font-size: 1.125rem; line-height: 1.45; }
/* Línea vertical a la izquierda del texto: arranca a la altura del título y baja hasta el borde de la caja. */
.dia__texto::before { content: ''; position: absolute; top: var(--espacio-4); bottom: 0; left: calc(-1 * var(--espacio-3)); width: 1.5px; background: var(--crema-oscura); }
.dia__texto .dia__nombre { margin-bottom: var(--espacio-2); font: 400 clamp(2.25rem, 4vw, 3.25rem)/1 var(--font-display); }
@media (max-width: 767px) {
  .dia__oferta { --alto: 30rem; --pestana: 3.75rem; --hacia: to bottom; flex-direction: column; height: auto; gap: var(--espacio-1); }
  /* La abierta toma la altura de la foto vertical (9:16) para mostrarla entera, con tope. */
  .dia__oferta { --alto: min((100vw - 2rem) * 16 / 9, 40rem); }
  .dia details::before { background-position: left center; } /* foto horizontal: se ve desde su extremo izquierdo */
  .dia .dia__item--vertical::before, .dia .dia__item--acompanar::before { background-size: max(100%, var(--alto) * 9 / 16) auto; background-position: center 60%; }
  .dia__item--picar { background-image: url(../img/dia-tabla-picar-v-1280.webp); background-image: image-set(url(../img/dia-tabla-picar-v-1280.webp) 2x, url(../img/dia-tabla-picar-v-1920.webp) 3x); }
  .dia__item--combos { background-image: url(../img/dia-cafe-frio-v-1280.webp); background-image: image-set(url(../img/dia-cafe-frio-v-1280.webp) 2x, url(../img/dia-cafe-frio-v-1920.webp) 3x); }
  .dia__item--acompanar { background-image: url(../img/dia-pasteleria-v-1280.webp); background-image: image-set(url(../img/dia-pasteleria-v-1280.webp) 2x, url(../img/dia-pasteleria-v-1920.webp) 3x); }
  .dia__item--cafe { background-image: url(../img/dia-capuchino-v-1280.webp); background-image: image-set(url(../img/dia-capuchino-v-1280.webp) 2x, url(../img/dia-capuchino-v-1920.webp) 3x); }
  .dia details { flex: none; height: var(--pestana); border-radius: var(--radio); transition: height var(--tiempo) var(--curva); }
  .dia details[open] { height: var(--alto); }
  .dia summary { inset: 0 0 auto 0; width: auto; height: var(--pestana); padding: 0 var(--espacio-3); writing-mode: horizontal-tb; rotate: none; font-size: 1.5rem; }
  .dia summary span { transform-origin: 0 50%; }
  .dia__texto { width: 100%; padding: var(--espacio-3) var(--espacio-3) var(--espacio-3) var(--espacio-4); }
  .dia__texto::before { top: var(--espacio-3); left: var(--espacio-3); }
}
@media (prefers-reduced-motion: reduce) { .dia details, .dia details::before, .dia details::after, .dia summary span, .dia__texto, .dia details::details-content { transition: none; animation: none !important; } }

/* Momento firma */
.firma { background: var(--oliva); color: var(--crema); position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
/* Velo de olas (SVG) que cubre la sección hasta que se ve; el JS lo retira hacia arriba. */
.firma__velo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .firma__velo { display: none; } }
.firma__grilla { display: grid; gap: var(--espacio-3); container-type: inline-size; }
.firma__palabra { color: var(--naranja); font-size: 17.2cqi; /* "CORAGGIO:" mide ≈ 5,96 em en Gloock (sin kerning): 100cqi / 5,96 ≈ 16,8; algo más porque el kerning la acorta */ white-space: nowrap; justify-self: end; width: max-content; line-height: 0.9; margin: 0; letter-spacing: -0.01em; }
.firma__texto { max-width: 40rem; font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
.firma__fonetica { font-family: var(--font-fonetica); font-weight: 300; font-size: 3rem; color: var(--naranja); text-align: right; margin: calc(-1 * var(--espacio-3)) 0 0; line-height: 1; }
.firma__texto strong { color: var(--blanco); }
.firma__remate { font: 400 clamp(1.75rem, 3.4vw, 2.75rem)/1.2 var(--font-display); margin-top: var(--espacio-5); }
.firma__remate strong { color: var(--naranja); font-weight: 400; }
@media (min-width: 1000px) {
  .firma__texto { columns: 2; column-gap: calc(var(--espacio-4) * 2.3); max-width: none; }
  .firma__texto p { break-inside: avoid; }
  .firma__remate { column-span: all; }
}
/* Acentos (img/acento.svg) a ambos lados del texto, en los márgenes que deja el contenedor: el izquierdo
   reflejado. Su tamaño y separación son proporcionales al margen; solo donde hay sitio para verlos. */
@media (min-width: 1500px) {
  .firma__grilla { position: relative; }
  .firma__grilla::before, .firma__grilla::after {
    content: ""; position: absolute; grid-row: 3; top: 1.1rem; pointer-events: none;
    width: min(calc((100vw - 100%) / 2 * 0.69), 20rem); aspect-ratio: 185.51 / 48.35;
    background: url("../img/acento.svg") center / contain no-repeat;
  }
  .firma__grilla::before { right: calc(100% + (100vw - 100%) / 2 * 0.14); scale: -1 1; }
  .firma__grilla::after { left: calc(100% + (100vw - 100%) / 2 * 0.14); }
}

/* Reseñas */
.resenas__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--espacio-2); margin-bottom: var(--espacio-4); }
.resenas__cabecera h2 { margin: 0; }
.resenas__dato { display: flex; flex-direction: column; align-items: flex-end; gap: var(--espacio-1); text-align: right; }
/* Sello centrado sobre el borde superior de la sección: su mitad cae sobre .firma. Alineado con el borde
   derecho del contenedor. */
.resenas { position: relative; }
/* El sello rotado sobresale unos px por la derecha en celular: la sección lo recorta para que no haya scroll lateral */
.resenas { overflow-x: clip; }
.resenas__sello { position: absolute; z-index: 2; top: 36px; right: max(1rem, calc((100% - var(--ancho-max)) / 2)); transform: translateY(-50%) rotate(16deg); width: 10.5rem; height: auto; }
.resenas__nota { margin: 0; font-size: 1.125rem; }
.resenas__nota .estrellas { color: var(--oliva); } /* sobre crema el naranja da 2,65:1 */
.estrellas { color: var(--naranja); letter-spacing: 0.1em; margin: 0 0 var(--espacio-1); }
/* La lista ocupa todo el ancho del navegador (sale del .contenedor); el margen izquierdo que deja
   el contenedor se conserva como relleno, así la primera tarjeta queda donde estaba. */
.resenas__lista {
  --ancho: min(100vw - 2rem, var(--ancho-max));
  --margen: max(1rem, calc((100vw - var(--ancho-max)) / 2));
  box-sizing: border-box; width: 100vw; margin-inline: calc(50% - 50vw);
  list-style: none; margin-block: 0; padding: 0 var(--margen) var(--espacio-2);
  scroll-padding-inline: var(--margen);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(calc(var(--ancho) * 0.85), 26rem); gap: var(--espacio-3);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.resena { scroll-snap-align: start; background: var(--blanco); border-radius: var(--radio); padding: var(--espacio-3); display: flex; flex-direction: column; }
.resena blockquote { margin: 0 0 var(--espacio-2); flex: 1; font-size: 1.125rem; }
.resena__autor { margin: 0; font-weight: 600; }
.resenas__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--espacio-2); margin-top: var(--espacio-3); }
.resenas__flechas { display: flex; gap: var(--espacio-1); }
.resenas__flechas[hidden] { display: none; }
/* Flechas en SVG con tamaño fijo: no dependen de la tipografía ni del dispositivo. */
.resenas__flechas .icono { width: 44px; height: 44px; background: transparent; cursor: pointer; }
.resenas__flechas .icono svg { width: 22px; height: 22px; }
/* Al pasar el cursor, el fondo verde del .icono general no aplica aquí (el fondo es transparente):
   el icono crema quedaba invisible sobre crema. Se invierte junto con el fondo. */
.resenas__flechas .icono:hover, .resenas__flechas .icono:focus-visible { background: var(--oliva); color: var(--crema); }

/* Marca gigante con la copa */
/* La escena (alto de la ventana) queda fija mientras se recorre la sección: 100 % visible + 150 % extra
   de scroll, que es lo que dura la órbita de la copa. svh evita saltos en móvil con la barra del navegador.
   overflow: clip (no hidden) para no romper el sticky. */
.marca { height: 250vh; height: 250svh; padding-block: 0; overflow: clip; }
.marca__escena { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; }
@media (prefers-reduced-motion: reduce) { .marca { height: auto; } .marca__escena { position: relative; } }
.marca__fondo { position: relative; z-index: 1; display: block; width: 100%; height: auto; } /* rótulo CORAGGIO en tres líneas, sangra por los bordes */
/* Copa en órbita (fotogramas sin fondo en img/orbita/): js/main.js cambia la <img> por un <canvas>
   que dibuja el fotograma según el scroll. */
.marca__copa {
  position: absolute; z-index: 2; height: 80vh; height: 80svh; width: auto; aspect-ratio: 390 / 834; /* la copa llena el fotograma: 80 % del alto de la ventana */
  object-fit: contain;
  translate: 0 calc(var(--alto-menu) / 2); /* baja media altura del header: queda centrada en el espacio libre bajo el menú fijo */
}

/* Momentos: la foto con el título encima; el título se va (opacidad y desenfoque) y los stickers
   entran desde todos lados hasta su taza o copa. js/main.js pone .momentos--espera hasta que la escena
   se ve. Sin JS queda la escena final: stickers en su lugar y el título a la vista. */
.momentos { background: var(--crema); overflow: clip; } /* los stickers llegan desde fuera sin scroll lateral */
.momentos__marco { padding-inline: var(--espacio-3); } /* foto al ancho de la pantalla, con el mismo margen que el gap de las tarjetas */
.momentos__escena {
  position: relative; container-type: inline-size;
  --alto: max(22rem, calc(100svh - var(--alto-menu) - 3rem)); /* la ventana menos el header y 3 rem */
  --ancho-foto: max(100cqi, var(--alto) * 16 / 9); /* ancho de la foto con object-fit: cover */
}
.momentos__foto { display: block; border-radius: var(--radio); overflow: hidden; background-color: var(--crema); } /* crema detrás de la foto tenue, no el oliva de picture */
.momentos__foto img { display: block; width: 100%; height: var(--alto); object-fit: cover; }
/* Mientras se lee el título la foto queda más grande, desenfocada y tenue; vuelve al entrar los stickers. */
.momentos--espera .momentos__foto img { scale: 1.12; filter: blur(8px); opacity: 0.55; }
.momentos__escena:not(.momentos--espera) .momentos__foto img {
  transition: scale 1.2s cubic-bezier(0.25, 1, 0.5, 1) 2.3s, filter 1s ease 2.3s, opacity 1s ease 2.3s;
}

.momentos__titulo {
  position: absolute; inset: 0 0 auto; height: var(--alto); margin: 0;
  display: grid; place-items: center; padding: var(--espacio-2); text-align: center;
  font-size: clamp(2rem, 6.5cqi, 5.5rem); color: var(--oliva);
  background: radial-gradient(ellipse 42% 48% at center, rgb(244 238 227 / 0.92), rgb(244 238 227 / 0));
  pointer-events: none;
}
/* El título se ve por defecto (también sin JS); se va solo cuando js/main.js animó la escena. */
.momentos--animada:not(.momentos--espera) .momentos__titulo {
  opacity: 0; filter: blur(14px); transform: scale(1.06);
  transition: opacity 1s ease 1.6s, filter 1s ease 1.6s, transform 1s ease 1.6s;
}

.momentos__lista { list-style: none; position: absolute; inset: 0 0 auto; height: var(--alto); margin: 0; padding: 0; pointer-events: none; }
.sticker {
  --centro: translate(-50%, -50%);
  position: absolute; pointer-events: auto;
  /* Móvil: la foto es un recorte angosto del centro y casi todas las tazas quedan fuera; los stickers
     van en zigzag sobre lo visible (--xm, --ym: fracción del marco). */
  left: clamp(4.5em, var(--xm) * 100cqi, 100cqi - 4.5em);
  top: clamp(3em, var(--ym) * var(--alto), var(--alto) - 3em);
  --ancho-sticker: clamp(5.5rem, 26cqi, 8rem);
  transform: var(--centro) rotate(var(--r));
}
.sticker img { display: block; width: var(--ancho-sticker); height: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 0.35em 0.45em rgb(48 55 23 / 0.32)); } /* sombra paralela */
@media (min-width: 760px) {
  .sticker {
    /* el recipiente en la foto recortada por cover (centrada); si el recorte lo deja fuera, el sticker queda en el borde */
    left: clamp(6.5em, 50cqi + (var(--x) - 0.5) * var(--ancho-foto), 100cqi - 6.5em);
    top: clamp(4em, var(--alto) / 2 + (var(--y) - 0.5) * var(--ancho-foto) * 9 / 16, var(--alto) - 4em);
    --ancho-sticker: clamp(6.5rem, 9.5cqi, 11rem);
  }
}

.momentos--espera .sticker {
  opacity: 0; transform: var(--centro) translate(var(--dx), var(--dy)) rotate(calc(var(--r) + 50deg)) scale(0.7);
}
/* Entran cuando el título ya se fue (sale de 1,6 s a 2,6 s). */
.momentos__escena:not(.momentos--espera) .sticker {
  transition: transform 0.9s cubic-bezier(0.3, 1.35, 0.5, 1) calc(2.6s + var(--i) * 0.12s), opacity 0.2s linear calc(2.6s + var(--i) * 0.12s);
}

/* Arrastre (js/main.js): el desplazamiento va en translate, aparte del transform de la entrada. */
.sticker { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sticker--arrastrando { cursor: grabbing; }
.sticker--arrastrando img { filter: drop-shadow(0 0.6em 0.7em rgb(48 55 23 / 0.4)); }
.sticker--arrastrando img { scale: 1.1; }
.sticker img { transition: scale 0.2s ease; }
@media (hover: hover) {
  .sticker:hover img { scale: 1.08; animation: tambaleo 0.55s ease-in-out; }
}
@keyframes tambaleo {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -7deg; }
  45% { rotate: 6deg; }
  70% { rotate: -3deg; }
}


/* Movimiento reducido: solo opacidad, sin desenfoque ni viajes. */
@media (prefers-reduced-motion: reduce) {
  .momentos__titulo { filter: none; transform: none; }
  .momentos--espera .momentos__foto img { scale: 1; }
  .momentos--espera .sticker { transform: var(--centro) rotate(var(--r)); }
  .sticker:hover img { animation: none; }
}

/* Historia */
.historia { position: relative; background: var(--oliva); color: var(--crema); }
.historia h2 { color: var(--crema); margin: 0; }
/* Sello de menú sobre el borde superior: su mitad cae sobre .momentos, como el de reseñas. */
.historia__sello { position: absolute; z-index: 2; top: 42px; left: max(1rem, calc((100% - var(--ancho-max)) / 2)); transform: translateY(-50%) rotate(-12deg); width: 13.5rem; height: auto; }
@media (max-width: 767px) { .historia__sello { width: 8.91rem; top: 12px; } } /* más chico y más arriba en celular */
.historia__grilla { display: grid; gap: var(--espacio-4); align-items: center; }
@media (min-width: 900px) { .historia__grilla { grid-template-columns: 1.3fr 1fr; } }
.historia p { font-size: 1.125rem; max-width: 40ch; }
.btn--grande { min-height: 56px; padding: 1rem 2.25rem; font-size: 1.25rem; margin-top: var(--espacio-2); }

/* Instagram */
.instagram__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--espacio-2); margin-bottom: var(--espacio-4); }
.instagram__cabecera .btn__ico { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.instagram__cabecera h2 { margin: 0; max-width: 18ch; }
.instagram__grilla { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espacio-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .instagram__grilla { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .instagram__grilla { grid-template-columns: repeat(6, 1fr); } }
.instagram__grilla a { display: block; border-radius: var(--radio); overflow: hidden; background: var(--oliva); }
.instagram__grilla img { aspect-ratio: 639 / 1148; object-fit: cover; width: 100%; transition: transform 0.3s ease; }
.instagram__grilla a:hover img { transform: scale(1.04); }

/* Visítanos */
.visitanos { position: relative; background: var(--crema); padding-bottom: 0; overflow: clip; }
@media (min-width: 900px) {
  /* El mapa cubre toda la sección; mide 150 % de ancho para que el pin (centro del mapa) quede al 75 %, a la derecha */
  .visitanos { padding-bottom: var(--espacio-6); }
  .visitanos::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, #f4eee3d9 34%, transparent 57%); }
  .visitanos__info { position: relative; z-index: 2; pointer-events: none; } /* deja arrastrar el mapa por debajo */
  .visitanos__info > div { max-width: 30rem; pointer-events: auto; }
}
.visitanos__dato { font-size: 1.25rem; }
/* «Cómo llegar» ocupa todo el ancho; WhatsApp y Pedir a domicilio se reparten la fila de abajo. */
.visitanos .botones { margin-block: var(--espacio-3); display: grid; grid-template-columns: 1fr 1fr; }
.visitanos .botones .btn { padding-inline: 0.5rem; } /* «Pedir a domicilio» cabe en una línea desde 360px */
.visitanos .botones .btn--primario { grid-column: 1 / -1; }
.visitanos__contacto a { font-weight: 600; }
.visitanos__encargos { margin-top: var(--espacio-3); padding: var(--espacio-3); border-radius: var(--radio); border: 2px solid var(--oliva); }
.visitanos__mapa { display: block; width: 100%; height: 22rem; margin-top: var(--espacio-4); border: 0; background: var(--oliva); }
/* Celular: el mapa sube hasta el borde superior de «Por encargo» (--encargo-alto, js/main.js) y pasa por
   debajo de la caja; crece lo mismo para que bajo ella sigan viéndose 22rem. Encima, un degradado del
   crema del fondo a transparente funde el mapa con la sección. */
@media (max-width: 899px) {
  .visitanos__info { position: relative; z-index: 2; }
  .visitanos__mapa { --alto-mapa: calc(22rem + var(--encargo-alto, 0px)); height: var(--alto-mapa); margin-top: calc(-1 * var(--encargo-alto, 0px)); }
  .visitanos::after { content: ''; position: absolute; inset: auto 0 0; z-index: 1; height: calc(22rem + var(--encargo-alto, 0px)); pointer-events: none;
    background: linear-gradient(var(--crema) 20%, transparent calc(var(--encargo-alto, 0px) + 4rem)); }
}
@media (min-width: 900px) { .visitanos__mapa { position: absolute; top: 0; left: 0; width: 150%; height: 100%; margin: 0; } }
.estado { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; margin: 0; }
.estado::before { content: ''; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: currentColor; }
.estado--abierto::before { background: #2f7d32; }
.estado--cerrado::before { background: #9a3412; }


@media (prefers-reduced-motion: reduce) {
  .instagram__grilla img { transition: none; }
  .instagram__grilla a:hover img { transform: none; }
}