/* ==========================================================
   Yogo Heladería · yogurt helado + tu topping fav
   Microinteracciones con propósito: cada movimiento responde
   a algo que hace la persona o le cuenta algo del helado.
   ========================================================== */

:root {
  /* paleta tomada del lugar: pared de rayas rosa, mesas redondas crema, copas naranjas y amarillas,
     y el verde olivo de la etiqueta de sus vasos */
  --leche: #f3dfda;         /* portada: la pared rosa */
  --raya: #ead0ca;          /* las rayas de la pared */
  --espresso: #3a2320;      /* texto fuerte y logotipo (el café del uniforme) */
  --cafe: #bd4709;          /* cinta y tapas: la copa naranja */
  --tostado: #9c3a09;       /* acentos: naranja tostado, legible sobre el rosa */
  --caramelo: #f4c21b;      /* la copa amarilla */
  --tarjeta: #5f6420;       /* tarjetas: el verde olivo de la etiqueta */
  --espuma: #f6eee4;        /* secciones claras: la mesa crema */
  --panel: #fbf7f1;
  --crema: #fffaf3;         /* texto claro y líneas */
  --oscuro: #24150f;
  --tinta: #3a2320;
  --gris: #6c5651;          /* texto secundario */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-rebote: cubic-bezier(0.34, 1.4, 0.64, 1);

  --f-texto: "Jost", "Century Gothic", system-ui, sans-serif; /* geométrica, como las letras del logotipo */
  --f-serif: "Jost", "Century Gothic", system-ui, sans-serif;
  --f-mano: "Caveat", "Segoe Print", cursive;
  --gutter: clamp(16px, 2.2vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--espuma);
  color: var(--tinta);
  font-family: var(--f-texto);
  line-height: 1.45;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, dl, dd { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }
svg { overflow: visible; }
::selection { background: var(--cafe); color: var(--crema); }
:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; border-radius: 999px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.crema { color: var(--crema); }
.acento { color: var(--tostado); }

/* Notas escritas a mano */
.nota {
  font-family: var(--f-mano);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 27px);
  line-height: .9;
  color: var(--espresso);
  position: absolute;
  pointer-events: none;
}
.nota__flecha { width: 34px; height: 40px; display: block; margin: 6px 0 0 14px; }
.nota__garabato { width: 46px; height: 24px; display: block; margin: 6px 0 0 18px; }

/* ==========================================================
   BOTÓN: la flecha cambia de lado y la etiqueta se inclina.
   ========================================================== */
.boton {
  --d: 30px;
  --g: 4px;
  --fondo: #fff;
  --color: var(--espresso);
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--d);
  padding-left: calc(var(--d) + var(--g));
  color: var(--color);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  transition: transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.boton--oscuro { --fondo: var(--espresso); --color: var(--crema); --d: 36px; font-size: 15px; }
.boton__texto {
  display: inline-flex; align-items: center;
  height: 100%;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--fondo);
  white-space: nowrap;
  transition: transform 280ms var(--ease-out);
}
.boton__flecha {
  position: absolute; top: 0;
  width: var(--d); height: var(--d);
  border-radius: 50%;
  background: var(--fondo);
  display: grid; place-items: center;
  transition: transform 280ms var(--ease-out), opacity 200ms ease, filter 200ms ease;
}
.boton__flecha svg { width: 13px; height: 13px; }
.boton__flecha--a { left: 0; }
.boton__flecha--b { right: 0; opacity: 0; transform: scale(.6) rotate(-90deg); filter: blur(2px); }
.boton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover .boton__texto { transform: translateX(calc(-1 * (var(--d) + var(--g)))) rotate(-4deg); }
  .boton:hover .boton__flecha--a { opacity: 0; transform: scale(.6); filter: blur(2px); }
  .boton:hover .boton__flecha--b { opacity: 1; transform: none; filter: none; transition-delay: 50ms; }
}
.boton:focus-visible { outline: none; }
.boton:focus-visible .boton__texto { outline: 2px solid var(--espresso); outline-offset: 2px; }

/* Pastillas del menú: se levantan y se ladean, cada una hacia su lado */
.pastilla {
  display: inline-block;
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: rgba(38, 37, 34, .08);
  color: var(--espresso);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 260ms var(--ease-rebote), background-color 200ms ease, color 200ms ease;
}
.pastilla:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .pastilla:hover { transform: translateY(-4px) rotate(-5deg); background: var(--espresso); color: var(--crema); }
  li:nth-child(2) > .pastilla:hover { transform: translateY(-4px) rotate(4deg); }
}

/* Redes */
.red {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--espresso);
  transition: transform 220ms var(--ease-rebote), background-color 180ms ease, color 180ms ease;
}
.red svg { width: 16px; height: 16px; }
.red:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) {
  .red:hover { transform: translateY(-2px) scale(1.08); background: var(--espresso); color: var(--crema); }
}

/* Abierto / cerrado: el punto late solo cuando está abierto */
.estado {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 8px 12px 8px 10px;
  border-radius: 999px;
  background: #fff;
  line-height: 1;
  color: var(--espresso);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.estado i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #b3a29d; }
.estado.abierto i { background: #2f9a5b; }
/* el pulso es un elemento real (no ::after) y solo late mientras está en pantalla: así corre en la tarjeta gráfica */
.estado__pulso { position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
.estado.abierto.late .estado__pulso { animation: latido 2.4s var(--ease-out) infinite; will-change: transform, opacity; }
@keyframes latido { from { transform: scale(1); opacity: .55; } to { transform: scale(2.8); opacity: 0; } }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: max(calc(100svh + 150px), 900px);
  /* la pared de yogo: rayas verticales en dos rosas */
  background: repeating-linear-gradient(90deg, var(--leche) 0 52px, var(--raya) 52px 104px);
  padding: 18px var(--gutter) 0;
  display: flex; flex-direction: column; align-items: center;
  overflow-x: clip; /* el anillo gira y su caja crece; en vertical la taza sí puede salir */
}
.nav {
  position: relative; z-index: 5;
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.nav__izq { display: flex; gap: 6px; align-items: center; }
.nav__centro { display: flex; gap: 8px; }
.nav > .boton { justify-self: end; }

.marca {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 1.3vw, 20px);
  margin-top: clamp(30px, 4.6vw, 70px);
  color: var(--espresso);
  line-height: 1;
}
.marca__icono { height: clamp(70px, 9.6vw, 146px); width: auto; flex: none; transform-origin: 50% 100%; }
.marca__trazo { fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.marca__palabra {
  display: flex; gap: .6em;
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: clamp(14px, 1.35vw, 21px);
  line-height: 1;
}
.marca__palabra > span { display: inline-block; }
.marca__palabra .hueco { width: .6em; }
.marca__cafe {
  position: absolute; left: 70%; bottom: -1.15em;
  font-family: var(--f-mano); font-weight: 600;
  font-size: clamp(22px, 2.2vw, 34px);
  color: var(--tostado);
  white-space: nowrap;
  transform: rotate(-6deg);
}

.hero__cta { margin-top: clamp(26px, 3vw, 44px); position: relative; z-index: 3; }

.hero__abajo {
  --taza-top: clamp(0px, 1vw, 20px);
  --taza: clamp(210px, min(23vw, 36svh), 360px); /* el vaso es ancho y bajo (1 : 1.36); en pantallas bajas cabe completo */
  --mostrador: calc(var(--taza-top) + var(--taza) * 1.3); /* donde se apoya la base del vaso */
  position: relative; width: 100%; flex: 1; min-height: 420px;
}
/* la mesa redonda color crema de yogo: la copa se apoya en su cubierta */
.hero__barra {
  position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: var(--mostrador); bottom: 0;
  border-top: clamp(10px, 1vw, 15px) solid #e7d9c4;
  background:
    radial-gradient(70% 120% at 30% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(58, 35, 32, .14), rgba(58, 35, 32, 0) 30%),
    #f2e8d8;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .7);
}
.orbita {
  position: absolute;
  left: clamp(-80px, 6vw, 140px);
  top: clamp(-90px, -4.6vw, -40px); /* el vaso queda al centro de la "o" */
  width: clamp(380px, 44vw, 660px);
  aspect-ratio: 1;
}
/* el anillo es la "o" del logotipo: un solo trazo */
.orbita__anillo { position: absolute; inset: 0; border-radius: 50%; border: clamp(5px, .62vw, 9px) solid var(--espresso); }
.nota--hero { left: -6%; top: 6%; transform: rotate(-6deg); }

.hero__taza {
  position: absolute; z-index: 2;
  left: calc(clamp(-80px, 6vw, 140px) + clamp(380px, 44vw, 660px) / 2 - var(--taza) / 2);
  top: var(--taza-top);
  width: var(--taza);
  transform: rotate(5deg);
  will-change: transform;
}
.taza { display: block; width: 100%; height: auto; }
.hero__taza .taza { filter: drop-shadow(0 22px 18px rgba(58, 35, 32, .3)); }


.hero__texto {
  position: absolute;
  right: clamp(0px, 4vw, 90px);
  bottom: calc(100% - var(--mostrador) + 26px); /* el texto siempre termina arriba de la barra */
  width: min(400px, 34vw);
  text-align: center;
}
.titular-bloque {
  font-weight: 500;
  font-size: clamp(44px, 5vw, 80px);
  line-height: .93;
  letter-spacing: -0.045em;
  color: var(--espresso);
}
.hero .titular-bloque .crema { color: var(--tostado); }
.linea { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.linea > span { display: inline-block; }
.hero__parrafo { margin: 16px auto 0; max-width: 330px; font-size: 15px; font-weight: 400; line-height: 1.45; }

/* ==========================================================
   HISTORIA, CINTA Y COLLAGE
   ========================================================== */
.mision {
  position: relative; z-index: 3;
  margin-top: clamp(-260px, -16vw, -140px);
  padding: clamp(170px, 15vw, 250px) var(--gutter) clamp(70px, 6vw, 100px);
}
.mision > .titular { position: relative; }
.cinta { position: absolute; left: 0; top: 0; width: 100%; height: clamp(220px, 21vw, 340px); pointer-events: none; }
.cinta__fondo { display: block; width: 100%; height: 100%; }
/* capa propia: girarla no repinta nada, la mueve la tarjeta gráfica */
.cinta__giro { position: absolute; left: 0; top: 0; will-change: transform; }
.cinta__letras { display: block; width: 100%; height: 100%; }
.cinta--giro .cinta__fondo .cinta__texto { display: none; }
.cinta:not(.cinta--giro) .cinta__giro { display: none; }
.mision::before { content: ""; position: absolute; inset: calc(clamp(220px, 21vw, 340px) - 2px) 0 0; background: var(--espuma); z-index: -1; }
.cinta__domo { fill: var(--espuma); }
.cinta__banda { fill: none; stroke: var(--cafe); stroke-width: 82; }
.cinta__texto {
  fill: var(--crema);
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: 50px;
  letter-spacing: .01em;
  dominant-baseline: central;
}

.titular {
  text-align: center;
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 82px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--espresso);
}
.titular--izq { text-align: left; }

.collage {
  position: relative;
  max-width: 1120px;
  margin: clamp(48px, 6vw, 90px) auto 0;
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
}
.polaroids { position: relative; aspect-ratio: 1 / .95; }
.polaroid {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 44%;
  padding: 8px 8px 0;
  background: #fff;
  box-shadow: 0 2px 4px rgba(36, 21, 15, .08), 0 18px 40px -12px rgba(36, 21, 15, .35);
  transform: rotate(var(--r));
  transition: transform 380ms var(--ease-out), box-shadow 380ms var(--ease-out);
  cursor: pointer;
}
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid figcaption { font-family: var(--f-mano); font-size: 20px; color: var(--espresso); padding: 4px 4px 8px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  /* la foto se endereza y sube, como si la levantaras de la mesa */
  .polaroid:hover { transform: rotate(0deg) translateY(-10px) scale(1.04); z-index: 4; box-shadow: 0 2px 4px rgba(36, 21, 15, .08), 0 34px 60px -14px rgba(36, 21, 15, .45); }
}

.collage__texto { max-width: 390px; }
.collage__lead { font-family: var(--f-serif); font-weight: 400; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.32; letter-spacing: -0.015em; color: var(--espresso); }
.collage__cuerpo { margin-top: 14px; font-size: 15px; line-height: 1.5; }
.collage__accion { margin-top: 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.estrellas { display: inline-flex; align-items: center; gap: 2px; color: var(--espresso); }
.estrellas svg { width: 16px; height: 16px; }
.estrellas small { margin-left: 6px; font-size: 14px; font-weight: 500; }
.nota--porque { right: 4%; bottom: -70px; transform: rotate(4deg); }

/* ==========================================================
   NUESTRO CAFÉ
   ========================================================== */
.beneficios { position: relative; background: var(--espuma); }
.beneficios__escena { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.espiral { position: absolute; inset: 0; width: 100%; height: 100%; }
.espiral path, .carta__linea path, .pie__linea path {
  fill: none; stroke: var(--crema); stroke-width: 26; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 0;
}
.beneficios__taza {
  position: absolute; left: 50%; top: 50%;
  width: clamp(150px, 14vw, 220px);
  margin: calc(clamp(150px, 14vw, 220px) * -0.87) 0 0 calc(clamp(150px, 14vw, 220px) * -0.5); /* sin transform: GSAP lo usa */
  z-index: 2;
}
.beneficios__taza .taza { filter: drop-shadow(0 30px 34px rgba(36, 21, 15, .24)); }
.nota--cafe { left: 34%; top: 14%; transform: rotate(-6deg); z-index: 3; }

.tarjeta {
  position: absolute; top: 50%;
  width: min(400px, 36vw);
  padding: 42px 34px 30px;
  background: var(--tarjeta);
  color: var(--crema);
  text-align: center;
  border-radius: 6px;
  box-shadow: 0 24px 50px -24px rgba(36, 21, 15, .45);
  z-index: 3;
}
.tarjeta[data-lado="izq"] { right: calc(50% + clamp(90px, 10vw, 150px)); }
.tarjeta[data-lado="der"] { left: calc(50% + clamp(90px, 10vw, 150px)); }
.tarjeta h3 { font-weight: 500; font-size: clamp(32px, 3.1vw, 48px); line-height: .95; letter-spacing: -0.04em; color: var(--crema); }
.tarjeta p { margin: 16px auto 0; max-width: 290px; font-size: 15px; font-weight: 400; line-height: 1.45; }
.tarjeta__icono { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }
.tarjeta__icono-top {
  position: absolute; left: 50%; top: 0;
  width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: var(--tarjeta);
  color: var(--crema);
  display: grid; place-items: center;
}
.tarjeta__icono-top svg { width: 30px; height: 30px; }
/* sombra de las tarjetas que quedan abajo del mazo (celular): capa aparte, solo cambia su opacidad */
.tarjeta__sombra { position: absolute; inset: 0; border-radius: inherit; background: var(--espresso); opacity: 0; pointer-events: none; will-change: opacity; }

/* ==========================================================
   SABORES
   ========================================================== */
.sabores { position: relative; background: var(--espuma); padding: clamp(80px, 9vw, 140px) var(--gutter) clamp(60px, 6vw, 90px); overflow: hidden; }
.ola .letra { display: inline-block; white-space: pre; }
.sabores__escena { position: relative; max-width: 1200px; margin: 0 auto; height: clamp(360px, 34vw, 520px); }
.tazas {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  display: flex; align-items: flex-end;
  width: clamp(300px, 40vw, 560px);
}
.tazas__lado { flex: 1; margin: 0 -3%; }
.tazas__lado:first-child { transform: rotate(-4deg); }
.tazas__lado:last-child { transform: rotate(4deg); }
.tazas__centro { position: relative; flex: 1.35; z-index: 2; will-change: transform; }
.tazas .taza { filter: drop-shadow(0 22px 26px rgba(36, 21, 15, .24)); }
/* los 4 vasos están apilados en el centro; se funde el que corresponde al sabor */
.tazas .taza--otro { position: absolute; left: 0; top: 0; }
.tazas__centro.sin-transicion .taza { transition: none; }
/* con el dedo se desliza el vaso: el scroll vertical sigue siendo del navegador */
.sabores__escena { touch-action: pan-y; }
.sabores__escena img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.sabores__gesto { display: none; }
.tactil .sabores__gesto {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px auto 0;
  font-family: var(--f-mano); font-weight: 500; font-size: 21px; line-height: 1;
  color: var(--tostado);
}
.sabores__gesto svg { width: 26px; height: 12px; }
.tazas__centro .taza { transition: opacity 450ms ease; }
.tazas__centro [data-vaso] { opacity: 0; }
.tazas__centro[data-sabor-actual="blueberry"] [data-vaso="blueberry"],
.tazas__centro[data-sabor-actual="manzana"] [data-vaso="manzana"],
.tazas__centro[data-sabor-actual="taro"] [data-vaso="taro"],
.tazas__centro[data-sabor-actual="fresa"] [data-vaso="fresa"] { opacity: 1; }

.adorno { position: absolute; will-change: transform; filter: drop-shadow(0 14px 16px rgba(36, 21, 15, .2)); }
.adorno--grano { width: clamp(46px, 4vw, 66px); left: 20%; top: 52%; transform: rotate(30deg); }
.adorno--canela { width: clamp(54px, 5vw, 80px); left: 6%; top: 12%; transform: rotate(-24deg); }
.adorno--grano2 { width: clamp(40px, 3.6vw, 58px); left: -1%; top: 62%; transform: rotate(-20deg); }
.adorno--choco { width: clamp(52px, 4.6vw, 74px); right: 20%; top: 24%; transform: rotate(12deg); }
.adorno--grano3 { width: clamp(44px, 4vw, 64px); right: 1%; top: 58%; transform: rotate(50deg); }
.nota--izq { left: 12%; top: 30%; transform: rotate(-4deg); }
.nota--der { right: 9%; top: 6%; transform: rotate(4deg); }
.nota--der .nota__flecha { transform: scaleX(-1); margin-left: 0; }

.selector { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: clamp(26px, 3vw, 40px) auto 0; max-width: 760px; }
.chip {
  padding: 8px 15px 9px;
  border-radius: 999px;
  background: #f0dcd6;
  color: var(--espresso);
  font-size: 14.5px; font-weight: 500;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.chip:active { transform: scale(.96); }
.chip[aria-checked="true"] { background: var(--espresso); color: var(--crema); }
@media (hover: hover) and (pointer: fine) {
  .chip[aria-checked="false"]:hover { background: #e8ccc5; }
}
.sabores__elegido { margin-top: 18px; text-align: center; font-family: var(--f-serif); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); color: var(--espresso); }
.sabores__elegido span { display: inline-block; transition: filter 220ms ease, opacity 220ms ease, transform 220ms var(--ease-out); }
.sabores__elegido span.cambiando { filter: blur(3px); opacity: 0; transform: translateY(4px); }

/* ==========================================================
   LA CARTA: un librito que se hojea sobre la pared rosa
   ========================================================== */
.carta {
  position: relative; overflow: hidden;
  padding: clamp(80px, 9vw, 130px) var(--gutter) clamp(70px, 7vw, 110px);
  background: radial-gradient(110% 70% at 50% 46%, #f6e2dc 0%, #efd3cc 62%, #e8c7bf 100%);
  text-align: center;
}
.carta__linea { position: absolute; inset: 0; width: 100%; height: 100%; }
.carta > .titular { position: relative; }
.carta__guia { position: relative; margin-top: 10px; font-family: var(--f-mano); font-weight: 500; font-size: 21px; line-height: 1.1; color: var(--tostado); }
.carta__guia--tactil, .tactil .carta__guia--fino { display: none; }
.tactil .carta__guia--tactil { display: inline; }

.libro {
  --pagina: min(500px, 44vw);
  --alto: calc(var(--pagina) * 1.3);
  position: relative;
  width: calc(var(--pagina) * 2); height: var(--alto);
  margin: clamp(26px, 3.4vw, 46px) auto 0;
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.libro:focus-visible { outline: 2px solid var(--espresso); outline-offset: 12px; border-radius: 8px; }
/* cada hoja lleva su propia perspectiva (desde el lomo) y las hojas se apilan con z-index:
   en una escena 3D compartida el navegador ignoraría el z-index y la última hoja quedaría encima */
.libro__mover { position: absolute; inset: 0; }
.libro__hojas { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; } /* su borde izquierdo es el lomo */
.hoja { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; cursor: grab; }
.hoja.girando { will-change: transform; } /* capa propia solo mientras gira: moverla no repinta ni reacomoda nada */
.hoja.girando .hoja__sombra { will-change: opacity; }
.libro.arrastrando, .libro.arrastrando .hoja { cursor: grabbing; }
.hoja__cara {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(90deg, rgba(58, 35, 32, .12), rgba(58, 35, 32, 0) 7%), #fffbf5; /* el pliegue junto al lomo */
  border-radius: 0 7px 7px 0;
  box-shadow: 0 1px 0 rgba(38, 37, 34, .05), 0 26px 44px -24px rgba(36, 21, 15, .6);
}
.hoja__cara--vuelta {
  transform: rotateY(180deg);
  border-radius: 7px 0 0 7px;
  background: linear-gradient(270deg, rgba(58, 35, 32, .12), rgba(58, 35, 32, 0) 7%), #fffbf5;
}
/* la hoja se oscurece mientras gira: se lee como una sola pieza de papel que da la vuelta */
.hoja__sombra { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(36, 21, 15, .5), rgba(36, 21, 15, .12)); }
.hoja__cara--vuelta .hoja__sombra { background: linear-gradient(270deg, rgba(36, 21, 15, .5), rgba(36, 21, 15, .12)); }

/* las páginas, como su carta impresa: papel blanco, minúsculas finas y el vasito con estrías */
.pagina {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 44px) clamp(22px, 3vw, 42px) clamp(16px, 2vw, 26px);
  text-align: left; color: var(--tinta);
}
.pagina h3 { font-weight: 300; font-size: clamp(30px, 2.8vw, 42px); line-height: 1; letter-spacing: -0.035em; }
.pagina h3 small { display: block; margin-top: 5px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--gris); }
.pagina .pagina__seccion { margin-top: clamp(20px, 2.6vw, 34px); }
.pagina__lista { margin-top: clamp(12px, 1.6vw, 20px); }
.pagina__lista li {
  display: grid; grid-template-columns: 14px 1fr auto; column-gap: 11px; align-items: baseline;
  padding: clamp(6px, .66vw, 9px) 0;
  border-bottom: 1px dashed #ecdcd4;
}
.pagina__lista svg { width: 12px; height: 16px; align-self: center; color: var(--cafe); }
.pagina__lista svg.chico { width: 9px; height: 12px; justify-self: center; }
.pagina__lista b { font-weight: 400; font-size: clamp(15.5px, 1.3vw, 18px); letter-spacing: -0.01em; }
.pagina__lista span { font-family: var(--f-mano); font-size: clamp(18px, 1.5vw, 21px); line-height: 1; color: var(--tostado); }
.pagina__lista small { grid-column: 2 / 4; margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--gris); }
.pagina--platos .pagina__lista li { grid-template-columns: 1fr auto; padding: clamp(8px, .9vw, 12px) 0; }
.pagina--platos .pagina__lista small { grid-column: 1 / 3; }
.pagina__pie { margin-top: auto; padding-top: 12px; display: flex; gap: 12px; font-size: 13px; color: var(--gris); }
.pagina__pie i { margin-left: auto; font-style: normal; }
.pagina__vaso { width: 26%; margin: auto 8% 0 auto; transform: rotate(6deg); filter: drop-shadow(0 18px 16px rgba(36, 21, 15, .26)); pointer-events: none; }
.pagina__vaso--soda { width: 32%; }
.pagina__foto { width: 58%; margin: clamp(16px, 2vw, 24px) 0 0 6%; padding: 7px 7px 26px; background: #fff; box-shadow: 0 2px 4px rgba(36, 21, 15, .08), 0 16px 30px -14px rgba(36, 21, 15, .4); transform: rotate(-3deg); }
.pagina__foto--chica { width: 46%; margin: auto 0 0 auto; transform: rotate(3deg); }
.pagina__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; pointer-events: none; }
.pagina__texto { margin-top: clamp(16px, 2vw, 24px); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.45; }
/* tapas: la copa naranja, con las rayas de la pared apenas marcadas */
.pagina--tapa {
  align-items: center; justify-content: center; text-align: center;
  color: var(--crema);
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 34px, rgba(0, 0, 0, .05) 34px 68px),
    var(--cafe);
}
.tapa__logo { width: 70%; height: auto; color: var(--crema); }
.tapa__oaxaca { margin-top: 14px; font-size: 13px; letter-spacing: .08em; }
.tapa__titulo { margin-top: clamp(40px, 5vw, 70px); font-size: clamp(30px, 3vw, 44px); font-weight: 300; letter-spacing: -0.02em; }
.pagina .tapa__titulo { color: var(--crema); }
.tapa__mano { margin-top: 10px; font-family: var(--f-mano); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1; color: #ffe6b8; transform: rotate(-4deg); }
.tapa__mano--grande { font-size: clamp(36px, 3.6vw, 52px); }
.tapa__datos { margin-top: 24px; font-size: 14.5px; line-height: 1.5; }
.tapa__logo--chico { width: 30%; margin-top: 34px; }

.libro__controles { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: clamp(22px, 2.6vw, 32px); }
.libro__folio { min-width: 14em; font-size: 15px; color: var(--espresso); }
.carta .redondo { background: #fff; }

/* sin JS o con movimiento reducido: las páginas se leen en cuadrícula, sin girar */
.libro:not(.libro--armado) {
  width: auto; height: auto; max-width: 1100px; perspective: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px;
}
.libro:not(.libro--armado) .pagina { position: relative; inset: auto; min-height: 440px; border-radius: 7px; background-color: #fffbf5; box-shadow: 0 22px 40px -24px rgba(36, 21, 15, .5); }
.libro:not(.libro--armado) .pagina--tapa { background-color: var(--cafe); }
.libro:not(.libro--armado) ~ .libro__controles { display: none; }

/* ==========================================================
   EL PLAN + LO NUEVO EN YOGO
   ========================================================== */
.bondad { position: relative; overflow: hidden; background: var(--oscuro); color: #fff; padding-bottom: clamp(60px, 6vw, 100px); }
.bondad__fondo { position: absolute; inset: 16% 0 0 0; overflow: hidden; }
.bondad__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 50% 60%; will-change: transform; }
.bondad__fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--oscuro) 0%, rgba(36, 21, 15, .55) 22%, rgba(36, 21, 15, .08) 48%, rgba(36, 21, 15, .25) 70%, rgba(36, 21, 15, .92) 100%); }
.bondad__cabeza { position: relative; text-align: center; padding: clamp(80px, 9vw, 150px) var(--gutter) 0; min-height: clamp(460px, 48vw, 760px); }
.nota--clara { position: static; color: rgba(255, 250, 242, .85); margin-bottom: 12px; }
.bondad__titulo { font-family: var(--f-serif); font-weight: 300; font-size: clamp(54px, 8.4vw, 140px); line-height: .95; letter-spacing: -0.05em; color: var(--crema); }

.resenas { position: relative; }
.resenas__barra { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; }
.resenas__barra h3 { font-weight: 500; font-size: clamp(26px, 2.3vw, 34px); line-height: .95; letter-spacing: -0.03em; text-align: center; }
.resenas__flechas { display: flex; gap: 6px; }
.redondo {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--crema); color: var(--espresso);
  transition: transform 160ms var(--ease-out), opacity 200ms ease, background-color 160ms ease;
}
.redondo svg { width: 16px; height: 16px; }
.redondo:active { transform: scale(.92); }
.redondo[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .redondo:not([disabled]):hover { background: #fff; transform: scale(1.08); }
}
.resenas__pista {
  display: flex; gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  padding: 6px var(--gutter) 10px;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: -4px;
}
.resenas__pista::-webkit-scrollbar { display: none; }
.resenas__pista.arrastrando { cursor: grabbing; scroll-snap-type: none; }
.resenas__pista.arrastrando .resena { pointer-events: none; }
.resena {
  flex: 0 0 clamp(250px, 24vw, 320px);
  scroll-snap-align: start;
  min-height: 200px;
  display: flex; flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(255, 250, 242, .2);
  border-radius: 4px;
  background: rgba(36, 21, 15, .74); /* los brillos de las vitrinas no bajan el contraste del texto */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  transition: background-color 220ms ease, color 220ms ease, transform 300ms var(--ease-out), border-color 220ms ease;
}
.resena__estrellas { display: flex; gap: 2px; color: var(--caramelo); }
.resena__estrellas svg { width: 20px; height: 20px; }
.resena h4 { margin-top: 16px; font-family: var(--f-serif); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; }
.resena p { margin-top: 6px; font-size: 15px; line-height: 1.42; opacity: .95; }
.resena footer { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 500; }
.resena small { font-size: 12px; font-weight: 400; opacity: .9; }
@media (hover: hover) and (pointer: fine) {
  .resena:hover { background: var(--crema); color: var(--espresso); border-color: var(--crema); transform: translateY(-6px); }
  .resena:hover .resena__estrellas { color: var(--cafe); }
}
/* en el celular se ilumina la que estás leyendo */
.resena.leida { background: var(--crema); color: var(--espresso); border-color: var(--crema); transform: translateY(-6px); }
.resena.leida .resena__estrellas { color: var(--cafe); }

/* ==========================================================
   VISÍTANOS
   ========================================================== */
.pie {
  position: relative; overflow: hidden;
  background: var(--espuma);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(60px, 7vw, 110px) var(--gutter);
}
.pie__linea { position: absolute; inset: 0; width: 100%; height: 100%; }
.pie__tarjeta {
  position: relative;
  min-height: clamp(380px, 34vw, 520px);
  border-radius: 6px; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(36, 21, 15, .32) 0%, rgba(36, 21, 15, 0) 55%, rgba(36, 21, 15, .16) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 52px, rgba(0, 0, 0, .05) 52px 104px),
    var(--cafe);
  padding: clamp(28px, 3vw, 48px);
}
.titular-bloque--pie { font-size: clamp(50px, 5.8vw, 92px); color: var(--crema); max-width: 5em; position: relative; z-index: 2; }
.titular-bloque--pie .crema { color: #fff; }
.pie__taza { position: absolute; transition: transform 500ms var(--ease-out); }
.pie__taza .taza { filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .45)); }
.pie__taza--a { width: 19%; left: 10%; bottom: -6%; transform: rotate(-4deg); }
.pie__taza--b { width: 22%; left: 34%; bottom: -8%; transform: rotate(5deg); }
@media (hover: hover) and (pointer: fine) {
  .pie__tarjeta:hover .pie__taza--a { transform: translateY(-14px) rotate(-7deg); }
  .pie__tarjeta:hover .pie__taza--b { transform: translateY(-8px) rotate(8deg); }
}
.pie__info { position: relative; display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.pie__mosaicos { display: flex; gap: 10px; }
.mosaico {
  width: 96px; height: 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: #fff; border-radius: 4px;
  color: var(--espresso);
  font-weight: 500; font-size: 12px; line-height: 1.1; letter-spacing: .04em;
  text-transform: uppercase; text-align: center;
  box-shadow: 0 1px 2px rgba(36, 21, 15, .08);
  transition: transform 260ms var(--ease-rebote), box-shadow 260ms var(--ease-out);
}
.mosaico svg { width: 30px; height: 30px; transition: transform 360ms var(--ease-rebote); }
.mosaico:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .mosaico:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -12px rgba(36, 21, 15, .35); }
  .mosaico:hover svg { transform: translateY(-3px) scale(1.1); }
}
.pie__marca { font-family: var(--f-serif); font-weight: 300; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.02; letter-spacing: -0.04em; color: var(--espresso); }
.pie__dir { margin-top: -10px; font-size: 14.5px; color: var(--gris); }
.horario { max-width: 340px; font-size: 15px; }
.horario div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #e2cfc6; }
.horario dt { font-weight: 500; }
.horario dd { font-family: var(--f-serif); color: var(--espresso); }
.horario .hoy dt { font-weight: 700; }
.horario .hoy dt::after { content: " · hoy"; font-weight: 500; color: var(--cafe); }
.estado--pie { align-self: flex-start; background: #fff; }
.pie__enlaces { display: flex; gap: 18px; font-size: 14.5px; font-weight: 500; color: var(--espresso); }

/* Subrayado que entra por la izquierda y sale por la derecha */
.subrayado { position: relative; display: inline-block; padding-bottom: 2px; }
.subrayado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 300ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .subrayado:hover::after { transform: scaleX(1); transform-origin: left; }
}
.subrayado:focus-visible { outline: none; }
.subrayado:focus-visible::after { transform: scaleX(1); }
.pie__legal { margin-top: auto; font-size: 13px; color: var(--gris); }

/* ==========================================================
   FLUIDEZ EN CELULAR
   Lo que se mueve con el scroll vive en su propia capa: moverlo no repinta
   lo que tiene alrededor (sombras de los vasos, fotos, texto).
   ========================================================== */
.hero__taza .taza, .tazas__centro .taza { will-change: transform; } /* las líneas decorativas (espiral, carta, pie) ya no son capas propias: cada una pesaba ~50 MB de textura en un celular 3× */
.tactil .orbita__anillo, .tactil .hero__texto, .tactil .bondad__cabeza, .tactil .pie__taza .taza { will-change: transform; }
/* el desenfoque en vivo detrás de las reseñas se recalcula en cada cuadro mientras la foto se mueve; en celular, fondo sólido */
.tactil .resena { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(36, 21, 15, .8); }
.tactil .resena.leida { background: var(--crema); }

/* ==========================================================
   ESTADOS INICIALES (solo con JS; sin JS todo se ve)
   ========================================================== */
.con-js [data-revelar] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.con-js [data-revelar].visto { opacity: 1; transform: none; }
.con-js [data-revelar="polaroids"] { opacity: 1; transform: none; }
.con-js [data-revelar="polaroids"] .polaroid { opacity: 0; transform: translateY(60px) rotate(calc(var(--r) * -2)) scale(.92); transition: transform 900ms var(--ease-out), opacity 500ms ease, box-shadow 380ms var(--ease-out); }
.con-js [data-revelar="polaroids"].visto .polaroid { opacity: 1; transform: rotate(var(--r)); }
.con-js [data-revelar="polaroids"].visto .polaroid:nth-child(2) { transition-delay: 90ms; }
.con-js [data-revelar="polaroids"].visto .polaroid:nth-child(3) { transition-delay: 180ms; }
.con-js [data-revelar="polaroids"].visto.listo .polaroid { transition-delay: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .con-js [data-revelar="polaroids"].visto .polaroid:hover { transform: rotate(0deg) translateY(-10px) scale(1.04); }
  .con-js [data-revelar="polaroids"].visto:has(.polaroid:hover) .polaroid:not(:hover) { transform: rotate(calc(var(--r) * 1.4)) scale(.97); }
}
/* celular: la foto que tocas se levanta de la mesa y las demás se apartan */
.con-js [data-revelar="polaroids"].visto .polaroid.alzada { transform: rotate(0deg) translateY(-12px) scale(1.08); z-index: 4; box-shadow: 0 2px 4px rgba(36, 21, 15, .08), 0 34px 60px -14px rgba(36, 21, 15, .45); }
.con-js [data-revelar="polaroids"].visto.con-alzada .polaroid:not(.alzada) { transform: rotate(calc(var(--r) * 1.4)) scale(.97); }
.tactil .polaroid { -webkit-tap-highlight-color: transparent; }

.con-js .revelar-lineas .linea > span { transform: translateY(105%); transition: transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.con-js .revelar-lineas.visto .linea > span { transform: none; }

.con-js .ola .letra { transform: translateY(.5em) rotate(8deg); opacity: 0; transition: transform 700ms var(--ease-rebote), opacity 400ms ease; transition-delay: calc(400ms + var(--i) * 28ms); }
.con-js .visto .ola .letra { transform: none; opacity: 1; }

/* Intro: mientras se dibuja el logotipo, lo demás espera */
.intro [data-intro] { visibility: hidden; }
.intro { overflow: hidden; }
.intro .marca__trazo { stroke-dasharray: 400; stroke-dashoffset: 400; }
.intro .marca__palabra > span, .intro .marca__cafe { opacity: 0; }
.intro .cinta { visibility: hidden; }

/* ==========================================================
   RESPONSIVO
   ========================================================== */
@media (max-width: 960px) {
  .nav .estado { display: none; }
}
@media (max-width: 860px) {
  .nav { grid-template-columns: auto 1fr; }
  .nav__centro { display: none; }
  .hero { min-height: auto; }
  .marca { margin-top: 40px; gap: 10px; }
  .marca__icono { height: 15vw; }
  .marca__palabra { font-size: 3.6vw; }
  .marca__cafe { position: relative; left: auto; bottom: auto; margin-top: 2px; font-size: 6.4vw; }
  .hero__cta { margin-top: 34px; }
  .hero__abajo { display: flex; flex-direction: column-reverse; min-height: 0; }
  .hero__texto { position: relative; right: auto; top: auto; bottom: auto; width: 100%; margin: 44px auto 0; }
  .titular-bloque { font-size: clamp(48px, 14.5vw, 78px); }
  .orbita { position: relative; left: -2vw; top: 0; width: 92vw; margin-top: 26px; margin-bottom: -22vw; }
  .nota--hero { display: none; }
  /* la copa es alta: se sube junto con la mesa para que la cinta no la tape */
  .hero__abajo { padding-bottom: 120px; }
  .hero__taza { left: calc(50% - 23vw); top: auto; bottom: calc(8vw + 120px); width: 46vw; }
  .hero__barra { top: auto; height: calc(8vw + 210px); }

  .mision { margin-top: -90px; padding-top: 150px; }
  .cinta { height: 200px; }
  .mision::before { top: 198px; }
  .cinta__texto { font-size: 58px; }
  .cinta__banda { stroke-width: 96; }

  .collage { grid-template-columns: 1fr; }
  .collage__texto { max-width: none; }
  .nota--porque { position: relative; right: auto; bottom: auto; margin: 24px 0 0 auto; width: max-content; }

  .beneficios__escena { height: auto; min-height: 0; padding: 40px var(--gutter) 80px; display: flex; flex-direction: column; gap: 44px; align-items: center; }
  .beneficios__taza { position: relative; left: auto; top: auto; margin: 0; width: 34vw; }
  .tarjeta { position: relative; top: auto; left: auto !important; right: auto !important; width: 100%; max-width: 420px; }
  .tarjeta[data-lado="izq"] { transform: rotate(-1.5deg); }
  .tarjeta[data-lado="der"] { transform: rotate(1.5deg); }
  .nota--cafe { position: relative; left: auto; top: auto; }
  /* con JS: la escena se fija y las tarjetas se apilan en la misma celda, como un mazo */
  .beneficios.mazo { height: 360svh; }
  .beneficios.mazo .beneficios__escena {
    position: sticky; top: 0;
    height: 100svh; min-height: 0;
    padding: 0 var(--gutter);
    display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center;
    gap: 44px 0;
  }
  .beneficios.mazo .beneficios__taza { grid-area: 1 / 1; width: min(26vw, 17svh); }
  .beneficios.mazo .nota--cafe { grid-area: 1 / 1; justify-self: start; align-self: center; }
  .beneficios.mazo .tarjeta { grid-area: 2 / 1; will-change: transform; }
  .beneficios.mazo .beneficios__taza { will-change: transform; }

  .sabores__escena { height: 70vw; }
  .tazas { width: 86vw; }
  .nota--izq { left: 2%; top: 0; }
  .nota--der { right: 2%; top: 0; }
  .adorno--canela { top: 34%; left: 0; width: 48px; }
  .adorno--grano { top: 30%; left: 26%; }
  .adorno--choco { right: 6%; top: 30%; width: 50px; }

  /* una página a la vez: la hoja gira sobre su borde izquierdo y se va */
  .libro { --pagina: min(400px, 86vw); --alto: calc(var(--pagina) * 1.52); width: var(--pagina); }
  .libro__hojas { left: 0; width: 100%; }
  .hoja__cara--vuelta { background: #f7efe6; }
  /* una sola sombra para el libro (no una por cara y por hoja): cada sombra de 44 px se pintaba aparte en cada capa 3D */
  .hoja__cara { box-shadow: none; }
  .libro__hojas { border-radius: 0 7px 7px 0; box-shadow: 0 1px 0 rgba(38, 37, 34, .05), 0 26px 44px -24px rgba(36, 21, 15, .6); }

  .resena { flex-basis: 78vw; }
  .pie { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; transition-delay: 0ms !important; }
  .con-js [data-revelar], .con-js [data-revelar] .polaroid { transition: opacity 300ms ease !important; }
}

/* el libro se prepara antes de llegar: sus hojas ya son capas cuando entra en pantalla (en el celular se pintaban a pedazos al llegar) */
.libro--cerca .hoja { will-change: transform; }