@font-face { font-family: "Shrikhand"; src: url(fuentes/shrikhand.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; src: url(fuentes/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --fondo: #D9A93A;
  --tinta: #2B1704;
  --blanco: #FFFDF8;
  --salida: cubic-bezier(.16, 1, .3, 1);
  --barra-alto: 60px;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 8px; overflow-x: clip; }
body {
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  background: var(--fondo);
  color: var(--tinta);
  transition: background-color .7s var(--salida), color .5s var(--salida);
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--barra-alto) + 28px + env(safe-area-inset-bottom));
  scrollbar-color: var(--tinta) var(--fondo);
}
::selection { background: var(--tinta); color: var(--fondo); }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 6px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
ul { list-style: none; padding: 0; }
h1, h2, .sabor-nombre {
  font-family: "Shrikhand", Georgia, serif;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.dibujos { position: absolute; }
#migajas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

.ico { width: 1.35em; height: 1.35em; fill: currentColor; flex: none; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 54px; padding: .7em 1.5em;
  font-weight: 800; font-size: 1.05rem; text-decoration: none;
  border-radius: 999px;
  transition: transform .35s var(--salida), box-shadow .35s var(--salida);
  box-shadow: 0 8px 18px -8px rgba(30, 12, 2, .55);
}
.boton:active { transform: scale(.96); }
@media (hover: hover) { .boton:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 14px 24px -10px rgba(30, 12, 2, .6); } }
.boton-tinta { background: var(--tinta); color: var(--fondo); transition: transform .35s var(--salida), box-shadow .35s var(--salida), background-color .7s, color .7s; }

/* ── Portada: la galleta se parte al bajar ─────────────────── */
.portada { height: 165vh; height: 165svh; position: relative; z-index: 1; }
.portada-fija {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow-x: clip; overflow-y: visible;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(20px, env(safe-area-inset-top)) 20px 0;
}
.logo {
  width: clamp(92px, 13vh, 128px); width: clamp(92px, 13svh, 128px); height: auto; border-radius: 50%; flex: none;
  box-shadow: 0 10px 22px -10px rgba(40, 20, 0, .55);
}
.portada h1 { font-size: clamp(2.9rem, min(14.2vw, 8.6vh), 5.4rem); font-size: clamp(2.9rem, min(14.2vw, 8.6svh), 5.4rem); margin-top: clamp(10px, 2.2vh, 22px); max-width: 11ch; }
.portada-sub { margin-top: clamp(8px, 1.6svh, 14px); max-width: 30ch; font-weight: 600; }
.portada .boton { margin-top: clamp(12px, 2.2svh, 20px); flex: none; }
.galleta-grande {
  position: relative; flex: 1 1 0; min-height: 0; width: 100%;
  margin: clamp(12px, 2svh, 20px) 0 calc(var(--barra-alto) + 26px + env(safe-area-inset-bottom));
}
.galleta-grande svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; filter: drop-shadow(0 10px 8px rgba(40, 20, 0, .28)); }

/* ── Inicio de cada capítulo ───────────────────────────────── */
.capitulo { min-height: 62vh; min-height: 62svh; display: flex; flex-direction: column; justify-content: center; padding: 72px 24px; text-align: center; }
.capitulo h2 { font-size: clamp(4.2rem, 23vw, 9rem); }
.capitulo p { margin: 16px auto 0; max-width: 28ch; font-weight: 600; font-size: 1.15rem; }

/* ── Un sabor, una pantalla ────────────────────────────────── */
.sabor {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; overflow: clip;
  display: grid; align-content: center; gap: 28px;
  padding: 44px 22px 56px;
}
.sabor-nombre { font-size: clamp(3rem, 15.5vw, 6rem); position: relative; z-index: 2; }
.sabor-nombre.largo { font-size: clamp(2.35rem, 11vw, 4.6rem); }
.sabor-foto {
  position: relative; z-index: 1; width: 100%; max-width: 560px;
  transform: rotate(var(--giro, -2deg));
}
.sabor-foto img {
  width: 100%; height: auto; max-height: 46vh; max-height: 46svh; object-fit: cover;
  border-radius: 16px; border: 7px solid var(--blanco);
  box-shadow: 0 22px 34px -18px rgba(20, 8, 0, .6);
  background: rgba(255, 255, 255, .2);
}
.sabor:nth-of-type(even) .sabor-foto { justify-self: end; --giro: 2deg; }
.sabor:nth-of-type(even) .sabor-nombre { text-align: right; }

.sabor-pie { display: grid; gap: 16px; position: relative; z-index: 2; }
.sabor-texto { max-width: 42ch; }
.sabor:nth-of-type(even) .sabor-pie { justify-items: end; text-align: right; }
.sabor-accion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sabor:nth-of-type(even) .sabor-accion { justify-content: flex-end; }

/* Sello redondo: igual a la etiqueta de cada producto */
.sello {
  position: absolute; z-index: 3; width: 108px; height: 108px;
  right: -12px; bottom: -22px;
  color: #6E4F12; background: var(--blanco); border-radius: 50%;
  display: grid; place-items: center; text-align: center; text-decoration: none;
  box-shadow: 0 10px 18px -8px rgba(20, 8, 0, .55);
  transform: rotate(calc(var(--giro, -2deg) * -3));
}
.sabor:nth-of-type(even) .sello { right: auto; left: -12px; }
.sello svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: girar 22s linear infinite; }
.sello text { font: 700 10.4px "Figtree", sans-serif; letter-spacing: .13em; fill: #8A6A1F; text-transform: uppercase; }
.sello b { font-family: "Shrikhand", serif; font-weight: 400; color: #3A2410; line-height: 1; }
.sello .monto { font-size: 1.32rem; }
.sello .moneda { display: block; font: 800 .66rem "Figtree", sans-serif; letter-spacing: .08em; margin-bottom: 1px; color: #3A2410; }
.sello .pregunta { font: 800 .72rem/1.1 "Figtree", sans-serif; color: #3A2410; max-width: 7ch; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Figuritas: los textos dejan pasar el toque, los enlaces no */
.sabor-nombre, .sabor-pie { pointer-events: none; }
.sabor-pie a { pointer-events: auto; }
.figura {
  position: absolute; z-index: 2; width: var(--t, 84px); height: var(--t, 84px);
  padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation;
  will-change: transform;
}
.figura svg { display: block; width: 100%; height: 100%; overflow: visible; animation: flotar var(--d, 6s) ease-in-out infinite alternate; animation-delay: var(--r, 0s); filter: drop-shadow(0 7px 5px rgba(20, 8, 0, .24)); }
.figura .contorno { stroke: #fff; stroke-width: 9; stroke-linejoin: round; }
.figura.rota svg { animation: none; transform: scale(0); opacity: 0; transition: transform .16s ease-in, opacity .16s; }
.figura.vuelve svg { animation: renace .9s var(--salida) both; }
@keyframes flotar { from { transform: translateY(-9px) rotate(-7deg); } to { transform: translateY(9px) rotate(7deg); } }
@keyframes renace { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

/* Entrada de la foto: solo con JS y siempre desde algo visible */
.js .sabor .sabor-foto img { clip-path: inset(10% 10% 10% 10% round 16px); opacity: .55; transition: clip-path 1s var(--salida), opacity .5s; }
.js .sabor.visto .sabor-foto img { clip-path: inset(0 0 0 0 round 16px); opacity: 1; }
.js .sabor .sello { scale: .5; transition: scale .9s var(--salida) .2s; }
.js .sabor.visto .sello { scale: 1; }

/* ── Carta completa ────────────────────────────────────────── */
.carta { padding: 88px 22px 72px; }
.carta h2, .encargos h2 { font-size: clamp(3rem, 15vw, 6.4rem); max-width: 10ch; }
.carta-columnas { display: grid; gap: 44px; margin-top: 44px; }
.carta h3 { font-size: 1.05rem; font-weight: 800; padding-bottom: 8px; border-bottom: 2px solid currentColor; }
.carta li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0; text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(252, 235, 211, .26);
  font-variant-numeric: tabular-nums;
}
.carta li b { flex: none; font-weight: 800; }
.carta li b.consulta { font-weight: 600; opacity: .8; font-size: .92rem; }
@media (hover: hover) { .carta li a:hover { padding-left: 6px; transition: padding .3s var(--salida); } }

/* ── Encargos y cierre ─────────────────────────────────────── */
.encargos { padding: 88px 22px 40px; }
.encargos-lista { margin: 36px 0 32px; display: grid; }
.encargos-lista li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 14px 0; border-bottom: 2px solid currentColor; align-items: baseline; }
.encargos-lista strong { font-size: 1.2rem; font-weight: 800; }
.encargos-lista span { grid-column: 1; grid-row: 2; max-width: 34ch; font-size: .97rem; }
.encargos-lista b { font-weight: 800; font-variant-numeric: tabular-nums; }
.encargos-lista b.consulta { font-weight: 600; }
footer { margin-top: 72px; text-align: center; display: grid; justify-items: center; gap: 10px; font-weight: 600; }
footer img { border-radius: 50%; }
.redes { display: flex; gap: 8px; }
.redes a { padding: 10px 12px; min-height: 44px; }

/* ── Barra inferior ────────────────────────────────────────── */
.barra {
  position: fixed; z-index: 40; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100vw - 24px), 440px); height: var(--barra-alto);
  display: flex; align-items: center; gap: 2px; padding: 6px;
  background: var(--blanco); color: #2B1406; border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(20, 8, 0, .6);
}
.barra a {
  flex: 1; height: 100%; display: grid; place-items: center;
  font-weight: 800; font-size: .98rem; text-decoration: none; border-radius: 999px;
  transition: background-color .3s, color .3s;
}
.barra a.activo { background: #F1E4C6; }
.barra .barra-wa { flex: 0 0 62px; background: #157A3C; color: #fff; }
@media (hover: hover) { .barra a:not(.barra-wa):hover { background: #F7EEDB; } .barra .barra-wa:hover { background: #0F6530; } }

.sin-js { padding: 24px; text-align: center; }

/* ── Pantallas grandes: mismo mundo, dos columnas ──────────── */
@media (min-width: 860px) {
  .sabor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 64px; padding: 72px max(56px, calc((100vw - 1180px) / 2)); }
  .sabor-foto { grid-column: 1; grid-row: 1 / span 2; justify-self: end; max-width: 500px; }
  .sabor-nombre, .sabor-nombre.largo { grid-column: 2; align-self: end; font-size: clamp(3rem, 6.6vw, 6rem); }
  .sabor-nombre.largo { font-size: clamp(2.4rem, 4.8vw, 4.6rem); }
  .sabor-pie { grid-column: 2; align-self: start; }
  .sabor:nth-of-type(even) .sabor-foto { grid-column: 2; justify-self: start; }
  .sabor:nth-of-type(even) .sabor-nombre, .sabor:nth-of-type(even) .sabor-pie { grid-column: 1; }
  .sello { width: 132px; height: 132px; right: -40px; }
  .sabor:nth-of-type(even) .sello { left: -40px; }
  .sabor-foto img { max-height: 76vh; max-height: 76svh; }
  .carta, .encargos { padding-inline: max(56px, calc((100vw - 1040px) / 2)); }
  .carta-columnas { grid-template-columns: 1fr 1fr; gap: 72px; }
}

@media (max-height: 640px) {
  .portada-sub { display: none; }
  .portada h1 { font-size: clamp(2.3rem, 7.6svh, 3rem); }
  .logo { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .figura svg, .sello svg { animation: none; }
  .js .sabor .sabor-foto img, .js .sabor .sello { clip-path: none; opacity: 1; scale: 1; transition: none; }
}