/* ==========================================================================
   HOME · composición continua
   ========================================================================== */

/* Estados de entrada: solo se ocultan con JS y GSAP disponibles.
   El titular, el sol y la torta (elemento LCP) NO se ocultan: se ven en el primer pintado
   y su entrada es solo movimiento, en CSS (ver "Entrada del hero" más abajo). */
.js:not(.no-gsap) [data-enter="slice"],
.js:not(.no-gsap) [data-enter="fade"],
.js:not(.no-gsap) [data-enter="cta"] { visibility: hidden; }
.js:not(.no-gsap) .celebra-word { visibility: hidden; }

/* Entrada del hero sin JavaScript: propiedades individuales (translate/scale) sobre envolturas
   que GSAP no anima (.hero__sunwrap, .hero__rise). fill-mode backwards: al terminar no queda
   ningún valor fijado encima de GSAP. home.js agrega .hero-skip si alguien baja antes de que termine. */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy .line { overflow: visible; }
  [data-enter="line"] { animation: hero-line 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards; }
  .line + .line [data-enter="line"] { animation-delay: 0.19s; }
  [data-enter="sun"] { animation: hero-sun 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards; }
  [data-enter="cake"] .hero__rise { animation: hero-cake 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards; }
  .hero-skip [data-enter="line"],
  .hero-skip [data-enter="sun"],
  .hero-skip [data-enter="cake"] .hero__rise { animation: none; }
}
/* Envolturas que GSAP nunca toca: así GSAP no hereda los valores a mitad de la entrada */
.hero__sunwrap { position: absolute; inset: 0; pointer-events: none; }
.hero__rise { position: relative; transform-style: preserve-3d; }
@keyframes hero-line { from { translate: 0 0.32em; } }
@keyframes hero-sun { from { scale: 0.8; opacity: 0.35; } }
@keyframes hero-cake { from { translate: 0 80px; scale: 0.88; } }

/* --------------------------------------------------------------------------
   1 · Hero + CELEBRA
   -------------------------------------------------------------------------- */
.opening { position: relative; }
.opening__pin {
  position: relative;
  height: var(--screen);
  min-height: 640px;
  overflow: hidden;
  color: var(--choco-950);
  isolation: isolate;
}
.opening__bg { position: absolute; inset: 0; background: var(--teal); z-index: -1; }
.opening__bg-layer { position: absolute; inset: 0; opacity: 0; }
.opening__bg-layer--choco { background: var(--choco-900); }

.hero {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 30px) var(--gutter) 40px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 24px;
}
.hero__copy { display: grid; gap: 26px; justify-items: start; }
.hero__copy h1 { color: var(--choco-950); }
.hero__copy .lead { color: var(--choco-900); font-weight: 500; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__stage { position: relative; height: min(76vh, 720px); }
.hero__sun {
  position: absolute; left: 50%; top: 50%;
  width: min(44vw, 66vh); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #ffe9c7 0 38%, transparent 62%),
    var(--yellow);
  transform: translate(-50%, -50%);
}
.hero__cake {
  position: absolute; left: 50%; top: 54%;
  width: min(46vw, 70vh);
  translate: -50% -50%;
  z-index: 2;
  will-change: transform;
}
.hero__tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.hero__img { position: relative; width: 100%; }
.hero__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -2%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 31, 22, 0.42), rgba(61, 31, 22, 0));
  transform: translateZ(-1px);
}

/* Elementos de fiesta */
/* Piezas de confeti decorativas: siempre detrás del texto, los botones y las imágenes (z-index bajo el .hero). */
.fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fx__p { position: absolute; display: block; rotate: var(--r, 0deg); will-change: transform; }
.sprk { width: 14px; height: 46px; border-radius: 99px; background: var(--c); }
.dot { width: 22px; height: 22px; border-radius: 50%; background: var(--c); }
.ring { width: 38px; height: 38px; border-radius: 50%; border: 7px solid var(--c); }
.serp { width: 120px; height: 40px; overflow: visible; }
.serp path { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; }
.fx__p--front.sprk { width: 20px; height: 64px; }
.fx__p--front.dot { width: 30px; height: 30px; }
.fx__p--front.ring { width: 52px; height: 52px; border-width: 9px; }
.fx__p--front.serp { width: 170px; height: 56px; }

/* CELEBRA: copia trasera rellena y copia delantera en contorno.
   La torta pasa entre ambas. */
.celebra-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24vw;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--cream);
  white-space: nowrap;
  padding-top: 4vh;
}
.celebra-word .ch { display: inline-block; will-change: transform; }
.celebra-word--back { z-index: 1; }
/* Copia delantera solo en contorno: donde la torta tapa la palabra, se sigue leyendo en línea */
.celebra-word--front { z-index: 4; color: transparent; -webkit-text-stroke: 3px var(--cream); paint-order: stroke; }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: end;
    gap: 6px;
    padding: calc(var(--nav-h) + 20px) 20px calc(28px + env(safe-area-inset-bottom));
  }
  .hero__stage { order: -1; height: 100%; min-height: 240px; }
  .hero__sun { width: min(78vw, 40vh); }
  .hero__cake { width: min(88vw, 46vh); top: 52%; }
  .hero__copy { gap: 16px; }
  .hero__copy h1 { font-size: clamp(2.7rem, 12.4vw, 4.2rem); }
  .hero__copy .lead { font-size: 1.05rem; }
  .hero__ctas { width: 100%; }
  .hero__ctas .magnetic { flex: 1 1 auto; }
  .hero__ctas .btn { width: 100%; }
  .hero__ctas > .btn--ghost { flex: 1 1 auto; }
  .celebra-word { font-size: 30vw; flex-wrap: wrap; align-content: center; }
  .fx { inset: 0 0 46% 0; }
  .fx__p--front.serp { width: 120px; }
  .serp { width: 84px; }
}

/* --------------------------------------------------------------------------
   2 · Favoritas
   -------------------------------------------------------------------------- */
.favs {
  --favs-bg: #ffca6c;
  position: relative;
  background: var(--favs-bg);
  color: var(--choco-950);
}
.favs__pin {
  position: relative;
  height: var(--screen);
  min-height: 660px;
  max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 28px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.favs__title { max-width: 12ch; position: relative; z-index: 2; }

.favs__stage { position: relative; }
.favs__discwrap {
  position: absolute; inset: 0 0 0 42%;
  display: grid; place-items: center;
}
.favs__disc {
  width: min(38vw, 58vh); aspect-ratio: 1;
  border-radius: 50%;
  background: #f78b16;
}
.favs__slide {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
  align-items: center;
  gap: 24px;
  pointer-events: none;
}
.favs__slide.is-active { pointer-events: auto; }
.favs__fig {
  grid-column: 2; grid-row: 1;
  margin: 0;
  display: grid; place-items: center;
}
.favs__fig img { width: min(44vw, 66vh); will-change: transform; }
.favs__info {
  grid-column: 1; grid-row: 1;
  display: grid; gap: 12px; justify-items: start;
  max-width: 440px;
}
.favs__info h3 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); line-height: 0.92; }
.favs__price { font-size: 1.5rem; }
.favs__meta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.favs__meta i { font-size: 1.3rem; }
.favs__desc { max-width: 36ch; color: var(--choco-900); }
.favs__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

.favs__foot {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.favs__nav { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.favs__nav button {
  position: relative;
  height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--r-pill);
  background: transparent;
  color: var(--choco-900);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-ui) ease, color var(--dur-ui) ease;
}
.favs__nav button[aria-current="true"] { background: var(--choco-950); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .favs__nav button:not([aria-current="true"]):hover { background: color-mix(in srgb, var(--choco) 12%, transparent); }
}
.favs__all { font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }

/* --------------------------------------------------------------------------
   3 · Sabores
   -------------------------------------------------------------------------- */
.sabores { position: relative; overflow: hidden; background: var(--cream); }
.sabores__pin { height: var(--screen); min-height: 620px; overflow: hidden; }
.sabores__track { display: flex; height: 100%; width: max-content; }
.sabor {
  position: relative;
  flex: 0 0 100vw;
  height: 100%;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-ink);
}
.sabor--intro {
  flex-basis: 64vw;
  background: var(--cream);
  color: var(--choco-950);
  display: grid; align-content: center; gap: 24px;
  padding: calc(var(--nav-h) + 40px) 6vw 40px;
}
.sabor--intro h2 { font-size: clamp(3rem, 6vw, 6rem); max-width: 10ch; }
.sabor__word {
  position: absolute;
  left: 3.5vw; bottom: 8vh;
  font-size: clamp(6rem, 17vw, 21rem);
  line-height: 0.78;
  letter-spacing: -0.02em;
  color: var(--c-word);
  white-space: nowrap;
  will-change: transform;
}
.sabor__img {
  position: absolute;
  right: 7vw; top: 46%;
  width: min(42vw, 62vh);
  translate: 0 -50%;
  will-change: transform;
}
.sabor--photo .sabor__img { width: min(30vw, 50vh); border-radius: var(--r-surface); }
.sabor__copy {
  position: absolute;
  left: 4vw; top: calc(var(--nav-h) + 56px);
  max-width: 32ch;
  display: grid; gap: 14px; justify-items: start;
  font-size: 1.15rem;
  font-weight: 500;
}
.sabor__copy a { font-weight: 650; display: inline-flex; align-items: center; gap: 8px; }
.sabor__bit {
  position: absolute;
  width: 18px; height: 64px; border-radius: 99px;
  background: var(--c);
  rotate: var(--r, 0deg);
  will-change: transform;
}
.sabor__bit--dot { width: 34px; height: 34px; border-radius: 50%; }

/* --------------------------------------------------------------------------
   4 · Personalizadas
   -------------------------------------------------------------------------- */
.custom {
  position: relative;
  min-height: 230vh;
  background: var(--pink);
  color: var(--choco-950);
  overflow: clip; /* clip, no hidden: hidden rompería el sticky del plato */
}
.custom__items { position: absolute; inset: 0; }
.ci { position: absolute; margin: 0; will-change: transform; }
.ci img { width: 100%; }
.ci--photo img { border-radius: var(--r-surface); }
.ci--a { left: 3%;  top: 4%;  width: 28vw; }
.ci--b { left: 70%; top: 2%;  width: 26vw; z-index: 3; }
.ci--c { left: 34%; top: 9%;  width: 20vw; }
.ci--d { left: 80%; top: 24%; width: 23vw; }
.ci--e { left: 6%;  top: 33%; width: 24vw; }
.ci--f { left: 56%; top: 46%; width: 19vw; }
.ci--g { left: 84%; top: 58%; width: 20vw; z-index: 3; }
.ci--h { left: 2%;  top: 64%; width: 27vw; z-index: 3; }
.ci--i { left: 30%; top: 70%; width: 22vw; }
.ci--j { left: 68%; top: 78%; width: 24vw; }
.ci--k { left: 14%; top: 86%; width: 20vw; }

.custom__copy {
  position: sticky; top: 0;
  height: var(--screen);
  display: grid; place-items: center;
  z-index: 2;
  pointer-events: none;
}
.custom__plate {
  pointer-events: auto;
  width: min(600px, 88vw); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 40px 80px -40px rgba(61, 31, 22, 0.45);
  display: grid; align-content: center; justify-items: center;
  gap: 18px;
  padding: 0 9%;
  text-align: center;
}
.custom__plate h2 { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.custom__plate h2 span { display: block; color: var(--fucsia-800); }
.custom__plate p { max-width: 28ch; font-size: 1.15rem; }
.custom__plate small { font-size: 0.92rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  .custom { min-height: 0; padding: 72px 20px 56px; display: grid; gap: 28px; }
  .custom__copy { position: relative; height: auto; order: -1; }
  .custom__plate { width: 100%; aspect-ratio: auto; border-radius: var(--r-surface); padding: 40px 24px; }
  .custom__items {
    position: relative; inset: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .ci { position: relative; left: auto; top: auto; width: auto; }
  .ci:nth-child(even) { margin-top: 36px; }
  .ci--k, .ci--j, .ci--i { display: none; }
}

/* --------------------------------------------------------------------------
   6 · Frase de marca
   -------------------------------------------------------------------------- */
.frase { position: relative; background: var(--yellow); color: var(--choco-950); }
.frase__pin {
  position: relative;
  height: var(--screen); min-height: 600px;
  overflow: hidden;
  display: grid; place-items: center;
  padding: 0 var(--gutter);
  isolation: isolate;
}
.frase__line {
  position: relative; z-index: 3;
  font-size: clamp(2.6rem, 6.4vw, 6rem);
  line-height: 1;
  text-align: center;
  max-width: 13ch;
}
.frase__line .w { display: inline-block; will-change: transform; }
.frase__line .w--torta { color: var(--fucsia-800); }
.frase__sign {
  position: absolute; bottom: 32px; left: 0; right: 0;
  text-align: center; font-weight: 600;
  z-index: 3;
}
.frase__big {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.frase__big > * { grid-area: 1 / 1; }
.frase__torta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34vw;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--fucsia);
  opacity: 0;
  will-change: transform;
}
.frase__torta--back { z-index: 1; }
.frase__torta--front { z-index: 3; color: transparent; -webkit-text-stroke: 3px var(--fucsia); paint-order: stroke; }
.frase__cake { z-index: 2; width: min(44vw, 62vh); opacity: 0; will-change: transform; }

@media (max-width: 900px) {
  .frase__torta { font-size: 40vw; }
  .frase__cake { width: 78vw; }
}

/* --------------------------------------------------------------------------
   7 · Locales
   -------------------------------------------------------------------------- */
.locales { background: var(--cream); color: var(--choco-950); }
.locales__inner {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 44px);
}
.locales__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; justify-items: start; }
.locales__head h2 { max-width: 14ch; }
.locales__cities { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.locales__cities button {
  min-height: 44px; padding: 0 18px;
  border: 0; border-radius: var(--r-pill);
  background: var(--cream-200); color: var(--choco-950);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform var(--dur-press) var(--ease-out);
}
.locales__cities button:active { transform: scale(0.97); }
.locales__cities button[aria-pressed="true"] { background: var(--teal-800); color: var(--cream); }
@media (hover: hover) and (pointer: fine) {
  .locales__cities button:not([aria-pressed="true"]):hover { background: #ffe9c7; }
}

/* Tarjetas pequeñas: una por local, toda la tarjeta abre Google Maps */
.locales__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.locales__grid[hidden] { display: none; }
.loc-card {
  height: 100%;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: #fff5e4;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--choco-950) 8%, transparent), 0 16px 30px -26px rgba(61, 31, 22, 0.55);
  color: inherit; text-decoration: none;
  transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease;
}
.loc-card:active { transform: scale(0.98); }
.loc-card:focus-visible { outline: 3px solid var(--teal-800); outline-offset: 3px; }
.loc-card__pin {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--fucsia) 14%, #fff5e4); color: var(--fucsia);
  font-size: 22px;
}
.loc-card__body { display: grid; gap: 4px; min-width: 0; }
.loc-card__name { font-weight: 700; font-size: 1.08rem; line-height: 1.25; }
.loc-card__name small { margin-left: 4px; font-size: 0.8rem; font-weight: 600; color: var(--teal-800); text-transform: uppercase; letter-spacing: 0.04em; }
.loc-card__addr {
  color: var(--ink-soft); font-size: 0.95rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.loc-card__go { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-weight: 650; font-size: 0.92rem; color: var(--teal-800); }
.loc-card--more {
  grid-template-columns: auto minmax(0, 1fr); align-items: center;
  background: var(--teal-800); color: var(--cream); box-shadow: none;
}
.loc-card--more strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.loc-card--more span { font-weight: 650; }
@media (hover: hover) and (pointer: fine) {
  .loc-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--choco-950) 10%, transparent), 0 22px 36px -24px rgba(61, 31, 22, 0.6); }
  .loc-card:hover .loc-card__go { text-decoration: underline; text-underline-offset: 3px; }
}
.locales__cta { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .locales__inner { padding: 72px 20px; }
  .locales__cities { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; width: calc(100% + 40px); scrollbar-width: none; }
  .locales__cities::-webkit-scrollbar { display: none; }
  .locales__cities button { white-space: nowrap; }
  .loc-card { position: relative; padding: 14px 44px 14px 14px; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; border-radius: 18px; }
  .loc-card__pin { width: 36px; height: 36px; font-size: 20px; }
  .loc-card__name { font-size: 1rem; }
  .loc-card__addr { font-size: 0.9rem; }
  /* En móvil, "Cómo llegar" queda como flecha en la esquina: la tarjeta entera es el enlace */
  .loc-card__go { position: absolute; top: 14px; right: 14px; margin: 0; font-size: 0; color: var(--teal-800); }
  .loc-card__go .tm-icon { font-size: 20px; }
  .locales__grid { gap: 10px; }
  .locales__cta .btn { width: 100%; }
  .locales__cta .magnetic { width: 100%; }
}

/* --------------------------------------------------------------------------
   8 · Redes
   -------------------------------------------------------------------------- */
.redes {
  background: var(--choco-950);
  color: var(--cream);
  padding: clamp(80px, 10vw, 130px) 0 0;
  overflow: hidden;
}
.redes__head {
  max-width: 1340px; margin: 0 auto 48px;
  padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px;
}
.redes__head h2 { max-width: 11ch; }
.redes__links { display: flex; flex-wrap: wrap; gap: 10px; }

.redes__wall {
  height: min(120vh, 980px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  padding: 0 16px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.rcol { overflow: hidden; }
.rcol__track { display: grid; gap: 16px; animation: rcol-up var(--dur) linear infinite; animation-play-state: paused; }
.rcol--down .rcol__track { animation-name: rcol-down; }
.redes.is-playing .rcol__track { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) {
  .redes.is-playing .rcol:hover .rcol__track { animation-play-state: paused; }
}
.rcol__set { display: grid; gap: 16px; }
.rt { margin: 0; aspect-ratio: var(--ar); border-radius: var(--r-surface); overflow: hidden; background: var(--choco-900); }
.rt img { width: 100%; height: 100%; object-fit: cover; }
.rt--tint { background: var(--t); display: grid; place-items: center; }
.rt--tint img { object-fit: contain; width: 88%; height: 88%; }

@keyframes rcol-up { to { transform: translateY(calc(-50% - 8px)); } }
@keyframes rcol-down { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }

@media (max-width: 760px) {
  .redes__wall { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 110vh; gap: 10px; padding: 0 10px; }
  .rcol:nth-child(n + 3) { display: none; }
  .rcol__track, .rcol__set { gap: 10px; }
}

/* --------------------------------------------------------------------------
   9 · Cierre
   -------------------------------------------------------------------------- */
.cierre {
  position: relative;
  min-height: var(--screen);
  background: var(--teal);
  color: var(--choco-950);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 28px;
  padding: calc(var(--nav-h) + 56px) 20px 72px;
  text-align: center;
  overflow: hidden;
}
.cierre__cake { position: relative; width: min(520px, 82vw); }
.cierre__cake img { position: relative; z-index: 1; width: 100%; }
.candles { position: absolute; inset: 0; z-index: 2; }
.candle {
  position: absolute;
  left: var(--x);
  bottom: 74%;
  width: clamp(10px, 1.6vw, 14px);
  height: calc(clamp(48px, 7vw, 70px) * var(--h));
  margin-left: calc(clamp(10px, 1.6vw, 14px) / -2);
  border-radius: 6px 6px 3px 3px;
  background: repeating-linear-gradient(135deg, var(--fucsia) 0 7px, var(--cream) 7px 14px);
  box-shadow: inset -3px 0 0 rgba(61, 31, 22, 0.14);
  transform-origin: 50% 100%;
}
.flame {
  position: absolute;
  left: 50%; bottom: 100%;
  width: 18px; height: 28px;
  margin: 0 0 4px -9px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff5e4 0 22%, #ffca6c 40%, #f78b16 78%);
  transform-origin: 50% 90%;
  opacity: 0;
  scale: 0.3;
  transition: scale 420ms var(--ease-out), opacity 160ms ease;
}
.flame::after {
  content: ""; position: absolute; left: 50%; top: 60%;
  width: 70px; height: 70px; border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, 0.55), rgba(255, 214, 120, 0));
  z-index: -1;
}
.flame.is-lit { opacity: 1; scale: 1; animation: flicker 1.6s ease-in-out infinite alternate; }
.candle:nth-child(2) .flame.is-lit { animation-duration: 1.3s; }
.candle:nth-child(3) .flame.is-lit { animation-duration: 1.9s; }
.candle:nth-child(4) .flame.is-lit { animation-duration: 1.45s; }
@keyframes flicker {
  0%   { transform: scale(1, 1) rotate(-2deg); }
  35%  { transform: scale(0.94, 1.08) rotate(2deg); }
  70%  { transform: scale(1.04, 0.95) rotate(-1deg); }
  100% { transform: scale(0.97, 1.04) rotate(1.5deg); }
}
.cierre__title { font-size: clamp(3rem, 8vw, 7rem); }
.cierre__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 520px) {
  .cierre__ctas { width: 100%; }
  .cierre__ctas .magnetic, .cierre__ctas .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .celebra-word { display: none; }
  .frase__big { display: none; }
  .cel, .cel__disc { transition-duration: 200ms; }
  .cel__imgs img { transform: none; filter: none; }
  .rcol__track { animation: none; }
  .flame { opacity: 1; scale: 1; animation: none; }
}


/* ==========================================================================
   v2 · scrollytelling con fotos nuevas
   ========================================================================== */

/* Hero con la torta Ferrero y dos porciones a distinta profundidad */
.hero__cake { width: min(38vw, 62vh); top: 52%; }
.hero__sun { width: min(42vw, 66vh); }
.hero__slice { position: absolute; will-change: transform; pointer-events: none; }
.hero__slice--back { width: 24%; right: 0; top: 4%; rotate: -16deg; filter: blur(1.5px); z-index: 1; }
.hero__slice--front { width: 36%; left: -8%; bottom: 0; rotate: 12deg; filter: blur(2.5px); z-index: 3; }
@media (max-width: 900px) {
  .hero__cake { width: min(74vw, 40vh); }
  .hero__sun { width: min(78vw, 42vh); }
  .hero__slice--back { width: 22%; right: 2%; top: 2%; }
  .hero__slice--front { width: 30%; left: 0; bottom: 2%; filter: blur(1.5px); }
}

/* 1b · Por dentro */
.inside { position: absolute; inset: 0; z-index: 5; color: var(--cream); pointer-events: none; }
.js:not(.no-gsap) .inside { visibility: hidden; }
/* Las piezas de fiesta entran con GSAP: ocultas solo hasta que arrancan las escenas */
.js:not(.no-gsap):not(.gsap-ready) .fx { visibility: hidden; }
.inside__link { pointer-events: auto; }
.inside__pin {
  position: relative;
  height: 100%;
  max-width: 1500px; margin: 0 auto;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 48px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}
.inside__title { font-size: clamp(2.4rem, 4.2vw, 4.4rem); max-width: 9ch; will-change: transform; }
.inside__stage { position: relative; aspect-ratio: 900 / 719; will-change: transform; }
.inside__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.inside__glow {
  position: absolute; inset: -12%;
  background: radial-gradient(closest-side, #623427 0%, rgba(122, 69, 52, 0) 72%);
}
.inside__slice { position: absolute; left: 36%; top: 36%; width: 27%; will-change: transform; }
.inside__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.inside__note h3 { font-size: 1.9rem; color: var(--yellow); margin-bottom: 6px; }
.inside__note p { max-width: 24ch; color: var(--cream-200); font-size: 1.1rem; }
.inside__link {
  position: absolute; left: var(--gutter); bottom: 44px;
  font-weight: 650; display: inline-flex; align-items: center; gap: 8px; color: var(--yellow);
}
@media (max-width: 900px) {
  .inside__pin {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: calc(var(--nav-h) + 28px) 20px calc(84px + env(safe-area-inset-bottom));
    gap: 8px;
  }
  .inside__title { font-size: 2.6rem; max-width: 12ch; }
  .inside__stage { width: min(100%, 52vh); justify-self: center; align-self: center; }
  .inside__notes { min-height: 6.5em; }
  .inside__note { grid-area: 1 / 1; }
  .inside__note h3 { font-size: 1.6rem; }
  .inside__link { left: 20px; bottom: calc(32px + env(safe-area-inset-bottom)); }
}

/* 2b · Muro de sabores */
.wall { background: var(--cream); color: var(--choco-950); }
.wall__pin { position: relative; height: var(--screen); min-height: 600px; overflow: hidden; display: grid; place-items: center; }
.wall__grid {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 1.5vw; width: 114vw;
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  will-change: transform;
}
.wall__cell { position: relative; aspect-ratio: 1; display: grid; place-items: center; will-change: transform, opacity; }
.wall__cell::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--t); }
.wall__cell img { position: relative; width: 96%; }
.wall__copy {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  text-align: center; padding: 0 20px;
}
.wall__copy h2 { font-size: clamp(3.2rem, 9.5vw, 6rem); }
.wall__copy p { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 500; max-width: 30ch; }
@media (max-width: 900px) {
  .wall__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); width: 132vw; gap: 3vw; }
}

/* Sabores: la torta puede ser más ancha con las fotos nuevas */
.sabor__img { width: min(46vw, 70vh); }
@media (max-width: 900px) { .sabor__img { width: 84%; } }

/* 5b · Manifiesto */
.manifesto {
  position: relative; overflow: clip;
  background: var(--yellow); color: var(--choco-950);
  padding: clamp(120px, 20vw, 280px) var(--gutter);
}
.manifesto__text {
  position: relative; z-index: 1;
  max-width: 1080px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 4.5rem);
  line-height: 1.06; letter-spacing: -0.01em;
  text-wrap: balance;
}
.gsap-ready .mw { opacity: 0.16; }
.manifesto__slice { position: absolute; will-change: transform; pointer-events: none; }
.manifesto__slice--a { right: 3%; top: 6%; width: min(17vw, 230px); }
.manifesto__slice--b { left: 2%; bottom: 4%; width: min(19vw, 260px); }
@media (max-width: 900px) {
  .manifesto { padding: 150px 22px; }
  .manifesto__slice--a { width: 30vw; top: 2%; }
  .manifesto__slice--b { width: 34vw; bottom: 1%; }
}

/* Frase: la torta sube en vertical, sin giro */
.frase__cake { width: min(40vw, 58vh); }
@media (max-width: 900px) { .frase__cake { width: 70vw; } }

/* Animaciones nativas ligadas al scroll (CSS scroll-driven animations) */
.progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px;
  z-index: calc(var(--z-nav) + 1);
  background: var(--fucsia);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}
@keyframes sd-progress { to { transform: scaleX(1); } }
@keyframes sd-rise {
  from { opacity: 0; transform: translateY(56px) scale(0.96); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: sd-progress linear both; animation-timeline: scroll(root block); }
    .sd { animation: sd-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 32%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .inside__img--cut { opacity: 0; }
  .inside__slice { display: none; }
  .progress { display: none; }
}

/* Sin GSAP o con movimiento reducido, "Por dentro" es un bloque normal bajo el hero */
.no-gsap .opening__pin { height: auto; overflow: visible; }
.no-gsap .hero { min-height: 100dvh; }
.no-gsap .inside { position: relative; inset: auto; min-height: 100dvh; background: var(--choco-900); visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .opening__pin { height: auto; overflow: visible; }
  .hero { min-height: 100dvh; height: auto; }
  .inside, .js:not(.no-gsap) .inside { position: relative; inset: auto; min-height: 100dvh; background: var(--choco-900); visibility: visible; }
  .inside__pin { min-height: 100dvh; }
}


/* ==========================================================================
   v3 · secciones apiladas y pases de diapositivas
   ========================================================================== */

/* Solo las escenas de scroll largo se apilan: quedan fijas al terminar y la siguiente
   las cubre. --sh es la altura real de la sección (la pone home.js).
   Del manifiesto a Redes el scroll es normal; el cierre sí cubre a Redes
   porque el cambio de color entre ambas es fuerte. */
.home main > section { position: relative; min-height: var(--screen); }
.home main > .opening,
.home main > .favs,
.home main > .wall,
.home main > .sabores,
.home main > .custom,
.home main > .redes {
  position: sticky;
  top: min(0px, calc(var(--screen) - var(--sh, var(--screen))));
}
.home main > .favs,
.home main > .wall,
.home main > .sabores,
.home main > .custom,
.home main > .cel,
.home main > .cierre {
  border-radius: 44px 44px 0 0;
  overflow: clip;
  box-shadow: 0 -24px 60px -30px rgba(61, 31, 22, 0.35);
}
.st-refreshing .home main > section { position: relative; top: auto; }
@media (max-width: 900px) {
  .home main > .favs, .home main > .wall, .home main > .sabores, .home main > .custom, .home main > .cel, .home main > .cierre { border-radius: 32px 32px 0 0; }
}

/* ---------- Favoritas en móvil: mismas diapositivas, todo en una pantalla ---------- */
@media (max-width: 900px) {
  .favs__pin {
    min-height: 0;
    padding: calc(var(--nav-h) + 22px) 20px calc(16px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .favs__title { font-size: clamp(1.9rem, 8.4vw, 2.5rem); max-width: none; padding-right: 72px; }
  .favs__discwrap { display: none; }
  .favs__slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
  }
  .favs__fig { grid-column: 1; grid-row: 1; position: relative; min-height: 0; }
  .favs__fig::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    height: 82%; aspect-ratio: 1; max-width: 78vw; border-radius: 50%;
    translate: -50% -50%;
    background: var(--tint);
    opacity: 0; scale: 0.8;
    transition: opacity 320ms ease, scale 520ms var(--ease-out);
  }
  .favs__slide.is-active .favs__fig::before { opacity: 1; scale: 1; }
  .favs__fig img { position: relative; width: auto; max-width: 84vw; max-height: 100%; height: auto; object-fit: contain; }
  .favs__info { grid-column: 1; grid-row: 2; max-width: none; gap: 6px; }
  .favs__info h3 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .favs__price { font-size: 1.25rem; }
  .favs__desc { font-size: 0.98rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .favs__actions { width: 100%; flex-wrap: nowrap; margin-top: 6px; }
  .favs__actions .btn { flex: 1 1 0; min-height: 48px; padding: 0 12px; font-size: 0.95rem; }
  .favs__foot { justify-content: space-between; padding-right: 64px; min-height: 40px; }
  .favs__nav { display: flex; gap: 6px; align-items: center; }
  .favs__nav button {
    width: 28px; height: 28px; padding: 0; font-size: 0; background: transparent;
    display: grid; place-items: center;
  }
  .favs__nav button::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--choco-950) 30%, transparent); transition: transform 240ms var(--ease-out), background-color 240ms ease; }
  .favs__nav button[aria-current="true"] { background: transparent; }
  .favs__nav button[aria-current="true"]::after { background: var(--choco-950); transform: scale(1.5); }
  .favs__all { display: none; }
}

/* ---------- Sabores en móvil: el scroll vertical pasa las tarjetas ---------- */
.sabor__hint {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 650; margin-top: 6px;
}
.sabor__hint i { font-size: 1.5rem; animation: nudge 1.4s var(--ease-in-out) infinite alternate; }
@keyframes nudge { from { transform: translateX(0); } to { transform: translateX(10px); } }
@media (max-width: 900px) {
  .sabores__pin { min-height: 0; padding: calc(var(--nav-h) + 26px) 0 calc(20px + env(safe-area-inset-bottom)); }
  .sabores__track { gap: 12px; padding: 0 20px; }
  .sabor { flex: 0 0 84vw; border-radius: var(--r-surface); }
  .sabor--intro { flex-basis: 78vw; padding: 0 4px; background: transparent; align-content: center; gap: 16px; }
  .sabor--intro h2 { font-size: clamp(2.5rem, 11vw, 3.4rem); }
  .sabor__word { font-size: 22vw; left: 18px; bottom: 20px; }
  .sabor__img { width: 78%; right: 50%; translate: 50% -50%; top: 52%; }
  .sabor__copy { left: 20px; right: 20px; top: 22px; font-size: 1rem; }
}

/* ---------- ¿Qué celebramos? como pase de diapositivas ---------- */
.cel {
  --cel-bg: var(--teal);
  --cel-ink: var(--choco-950);
  --cel-disc: var(--yellow);
  position: relative;
  background: var(--cel-bg);
  color: var(--cel-ink);
  transition: background-color 600ms var(--ease-in-out), color 400ms ease;
}
/* El contenedor que queda fijo (pin) lleva el fondo a todo el ancho (ver "Fondos de los pins").
   El ancho de contenido (1340 px) va en el relleno. */
.cel__inner {
  width: 100%;
  height: var(--screen); min-height: 640px;
  padding: calc(var(--nav-h) + 40px) max(var(--gutter), calc((100% - 1340px) / 2 + var(--gutter))) 40px;
  background: var(--cel-bg);
  transition: background-color 600ms var(--ease-in-out);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-areas: ". stage" "title stage" "opts stage" "foot stage" ". stage";
  column-gap: clamp(24px, 4vw, 64px);
}
.cel__title { grid-area: title; margin-bottom: 22px; }
.cel__options { grid-area: opts; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; justify-items: start; }
.cel__options button {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 46px;
  padding: 0 0 0 48px;
  border: 0; background: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.7vw, 2.4rem);
  line-height: 1.1;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 220ms ease, transform 300ms var(--ease-out);
}
.cel__options button::before {
  content: "";
  position: absolute; left: 0; top: 50%; margin-top: -3px;
  width: 34px; height: 6px; border-radius: 6px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}
.cel__options button[aria-pressed="true"] { opacity: 1; font-weight: 700; }
.cel__options button[aria-pressed="true"]::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .cel__options button:hover { opacity: 1; transform: translateX(6px); }
}
.cel__foot { grid-area: foot; display: grid; gap: 18px; justify-items: start; margin-top: 26px; padding-left: 48px; }
.cel__line { font-size: 1.25rem; font-weight: 500; max-width: 28ch; min-height: 2.9em; }

.cel__stage { grid-area: stage; position: relative; display: grid; place-items: center; min-height: 0; }
.cel__disc {
  position: absolute; left: 50%; top: 50%;
  height: min(78%, 46vw); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cel-disc);
  translate: -50% -50%;
  transition: background-color 600ms var(--ease-in-out);
}
.cel__imgs { position: relative; width: min(100%, 760px); height: min(74%, 560px); }
.cel__imgs img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.86) translateY(8%);
  filter: blur(8px);
  transition: opacity 340ms ease, transform 620ms var(--ease-out), filter 340ms ease;
}
.cel__imgs img.is-active { opacity: 1; transform: none; filter: none; z-index: 2; transition-delay: 60ms, 0ms, 60ms; }
.cel__imgs img.is-past { transform: scale(1.12) translateY(-6%); }
/* La que sale se va más rápido y queda debajo de la que entra */
.cel__imgs img.is-leaving { z-index: 1; transition: opacity 220ms ease, transform 520ms var(--ease-out), filter 220ms ease; }
/* Las demás, al instante (pase rápido por varias celebraciones) */
.cel__imgs img.is-instant { transition: none; }

@media (max-width: 900px) {
  .cel__inner {
    min-height: 0;
    padding: calc(var(--nav-h) + 26px) 0 calc(22px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "title" "opts" "stage" "foot";
  }
  .cel__title { padding: 0 20px; margin-bottom: 14px; font-size: clamp(2.2rem, 9.6vw, 2.8rem); }
  .cel__options {
    display: flex; gap: 8px;
    overflow-x: auto; padding: 0 20px 6px;
    scrollbar-width: none;
  }
  .cel__options::-webkit-scrollbar { display: none; }
  .cel__options button {
    font-family: var(--font-body);
    font-size: 0.98rem; font-weight: 600;
    min-height: 44px; padding: 0 16px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, currentColor 10%, transparent);
    opacity: 1; white-space: nowrap;
  }
  .cel__options button::before { display: none; }
  .cel__options button[aria-pressed="true"] { background: var(--cel-ink); color: var(--cel-bg); }
  .cel__stage { margin: 8px 20px 0; }
  .cel__disc { height: min(86%, 78vw); }
  .cel__imgs { width: 100%; height: 78%; }
  .cel__foot { padding: 0 20px; margin-top: 8px; justify-items: center; text-align: center; gap: 12px; padding-right: 20px; }
  .cel__line { font-size: 1.05rem; min-height: 2.9em; }
}

/* Móvil: el resto de secciones también llena la pantalla */
@media (max-width: 900px) {
  .custom, .locales, .redes { align-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .home main > section { position: relative; top: auto; }
  .sabor__hint i { animation: none; }
  .cel__inner, .favs__pin, .sabores__pin { height: auto; min-height: 100dvh; }
  .sabores__pin { overflow-x: auto; }
}

@media (max-width: 900px) {
  .celebra-word--front, .frase__torta--front { -webkit-text-stroke-width: 2px; }
}

/* ==========================================================================
   WordPress · ajustes del tema
   ========================================================================== */

/* Locales: todas las ciudades vienen escritas desde el servidor; se muestra una */

/* Favoritas sin GSAP o con movimiento reducido: solo la diapositiva activa (los botones la cambian) */
.no-gsap .favs__slide:not(.is-active) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .favs__slide:not(.is-active) { visibility: hidden; }
}

/* Personalizadas en móvil: el plato no es una tarjeta dentro de la hoja rosada.
   El texto se apoya directo sobre el fondo, con aire y jerarquía tipográfica. */
@media (max-width: 900px) {
  .custom__plate {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 8px 4px 4px;
    gap: 16px;
  }
  .custom__plate h2 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .custom__plate small { color: var(--choco-900); }
}

/* ---------- Fondos de los pins ----------
   GSAP fija el contenedor interior un instante antes de que la sección llegue arriba (anticipatePin).
   Si ese contenedor fuera transparente, con scroll rápido se vería por un cuadro la sección anterior
   debajo. Por eso cada contenedor fijo lleva el mismo fondo que su sección. Las esquinas redondeadas
   las sigue recortando la sección (overflow: clip). */
.favs__pin {
  background: var(--favs-bg);
  /* el pin mide 1440 px como máximo: el color se extiende a los lados sin cambiar su caja */
  box-shadow: 0 0 0 100vmax var(--favs-bg);
  clip-path: inset(0 -100vmax);
}
.wall__pin, .sabores__pin { background: var(--cream); }
.frase__pin { background: var(--yellow); }

/* ---------- Barra del navegador en móvil ----------
   Las escenas miden var(--screen) (pantalla con la barra escondida). Lo que va pegado abajo sube lo que
   ocupa la barra cuando está visible, para que no quede tapado. */
@media (max-width: 900px) {
  /* --orderbar: alto de la barra fija "Pedir mi torta" del Inicio (en el hero no hace falta: ahí la barra no se muestra) */
  .home { --orderbar: 76px; }
  .hero { padding-bottom: calc(28px + env(safe-area-inset-bottom) + var(--toolbar)); }
  .favs__pin { padding-bottom: calc(16px + env(safe-area-inset-bottom) + var(--toolbar) + var(--orderbar, 0px)); }
  .cel__inner { padding-bottom: calc(22px + env(safe-area-inset-bottom) + var(--toolbar) + var(--orderbar, 0px)); }
  .inside__link { bottom: calc(32px + env(safe-area-inset-bottom) + var(--toolbar) + var(--orderbar, 0px)); }
  .frase__sign { bottom: calc(32px + var(--toolbar) + var(--orderbar, 0px)); }
  .sabor__word { bottom: calc(20px + var(--toolbar) + var(--orderbar, 0px)); }
  .sabores__pin { padding-bottom: calc(var(--toolbar) + var(--orderbar, 0px)); }
  .home .footer { padding-bottom: calc(28px + var(--orderbar, 0px)); }
}

/* ---------- Pedido directo: accesos rápidos del hero ---------- */
.hero__quick { display: grid; gap: 10px; justify-items: start; }
.hero__quick-label { font-size: 0.95rem; font-weight: 600; color: color-mix(in srgb, var(--choco-950) 75%, transparent); }
.hero__quick ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__quick a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 16px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream) 72%, transparent);
  color: var(--choco-950); font-weight: 600; font-size: 0.95rem; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms ease, transform var(--dur-press) var(--ease-out);
}
.hero__quick a .tm-icon { font-size: 1.1em; color: #41bbbe; }
.hero__quick a:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hero__quick a:hover { background: var(--cream); } }
@media (max-width: 900px) {
  .hero__quick { width: 100%; gap: 8px; }
  .hero__quick-label { display: none; }
  /* una sola fila deslizable: no empuja la torta hacia arriba */
  .hero__quick ul { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 2px; width: calc(100% + 40px); scrollbar-width: none; }
  .hero__quick ul::-webkit-scrollbar { display: none; }
  .hero__quick a { min-height: 38px; padding: 0 14px; font-size: 0.9rem; }
}

/* ---------- Barra fija "Pedir mi torta" (solo celular, solo Inicio) ---------- */
.orderbar { display: none; }
@media (max-width: 900px) {
  .orderbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: calc(var(--z-nav) - 1);
    display: flex; align-items: center; gap: 10px;
    padding: 8px;
    border-radius: var(--r-pill);
    background: var(--choco-950);
    box-shadow: 0 18px 40px -16px rgba(61, 31, 22, 0.7);
    transform: translateY(calc(100% + 30px));
    transition: transform 260ms var(--ease-out);
  }
  .orderbar.is-visible { transform: none; transition: transform 380ms var(--ease-drawer); }
  .orderbar__main { flex: 1; min-height: 48px; }
  .orderbar__wa {
    flex: none; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: #41bbbe; color: #fff; font-size: 26px; text-decoration: none;
  }
  .orderbar__wa:active { transform: scale(0.94); }
  body.cart-open .orderbar, body.menu-open .orderbar { transform: translateY(calc(100% + 30px)); }
  /* En el Inicio la barra reemplaza al botón flotante de WhatsApp; "volver arriba" sube sobre ella */
  .home .wa-float { display: none; }
  .home .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Celular: Favoritas, Sabores y ¿Qué celebramos? como carruseles que se deslizan
   (sin tramos fijos: el scroll vertical pasa de largo). En escritorio siguen las escenas.
   ========================================================================== */
.sabor__hint-mob { display: none; }
@media (max-width: 900px) {
  .sabor__hint-desk { display: none; }
  .sabor__hint-mob { display: inline; }

  /* Base común de los carruseles */
  .favs__stage, .sabores__pin, .cel__imgs {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .favs__stage::-webkit-scrollbar, .sabores__pin::-webkit-scrollbar, .cel__imgs::-webkit-scrollbar { display: none; }

  /* ---- Favoritas ---- */
  .favs__pin { height: auto; min-height: 0; grid-template-rows: auto auto auto; gap: 14px; padding-bottom: calc(28px + var(--orderbar, 0px)); }
  .favs__stage { display: flex; gap: 12px; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; }
  .favs__slide {
    position: relative; inset: auto;
    flex: 0 0 100%;
    scroll-snap-align: center; scroll-snap-stop: always;
    pointer-events: auto;
    visibility: visible !important;
    grid-template-rows: auto auto;
  }
  .favs__fig { height: min(40svh, 330px); }
  .favs__fig::before { opacity: 1; scale: 1; }
  .favs__fig img, .favs__info { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* ---- Sabores ---- */
  .sabores__pin { height: auto; min-height: 0; padding: calc(var(--nav-h) + 26px) 0 calc(28px + var(--orderbar, 0px)); scroll-padding: 0 20px; }
  .sabores__track { height: auto; transform: none !important; }
  .sabor { height: min(62svh, 520px); scroll-snap-align: start; }
  .sabor--intro { height: auto; align-self: center; scroll-snap-align: start; }
  .sabor__word, .sabor__img, .sabor__bit { transform: none !important; }
  .sabor__img { translate: 50% -50%; }

  /* ---- ¿Qué celebramos? ---- */
  .cel__inner { height: auto; min-height: 0; padding-bottom: calc(28px + var(--orderbar, 0px)); grid-template-rows: auto auto auto auto; }
  .cel__stage { height: min(48svh, 400px); }
  .cel__imgs { display: flex; height: 100%; width: calc(100% + 40px); margin: 0 -20px; }
  .cel__imgs img {
    position: relative; inset: auto;
    flex: 0 0 100%; height: 100%;
    scroll-snap-align: center; scroll-snap-stop: always;
    opacity: 1; transform: none; filter: none; transition: none;
  }
}
@media (max-width: 900px) {
  /* Siguen ocupando al menos una pantalla (apilado); el contenido queda centrado */
  .home main > .favs, .home main > .sabores, .home main > .cel { display: grid; align-content: center; }
}

/* Inicio sin confeti: fuera también las piezas de colores de las tarjetas de Sabores */
.sabor__bit { display: none; }

@media (max-width: 900px) {
  /* Favoritas: la siguiente torta asoma a la derecha para invitar a deslizar */
  .favs__slide { flex-basis: 86%; }
  /* ¿Qué celebramos?: la foto dentro del círculo de color, con aire alrededor */
  .cel__imgs img { padding: 6% 32px; box-sizing: border-box; object-fit: contain; }
}

/* ==========================================================================
   Celular: navegación simple. Sin "hojas apiladas" (ninguna sección se queda fija
   mientras la siguiente la cubre): las secciones se suceden con scroll normal.
   En escritorio se mantiene el apilado.
   ========================================================================== */
@media (max-width: 900px) {
  .home main > section { position: relative !important; top: auto !important; }
  .home main > .favs, .home main > .wall, .home main > .sabores,
  .home main > .custom, .home main > .cel, .home main > .cierre {
    border-radius: 0 !important; box-shadow: none;
  }
  /* Los carruseles miden lo que su contenido, sin relleno hasta la pantalla completa */
  .home main > .favs, .home main > .sabores, .home main > .cel { min-height: 0; }
  .favs__pin { padding-top: 56px; }
  .cel__inner { padding-top: 56px; }
  .sabores__pin { padding-top: 56px; padding-bottom: 40px; }
  .favs__pin, .cel__inner { padding-bottom: 40px; }

  /* Tarjetas de Sabores en vertical: texto, torta y palabra, sin superponerse */
  .sabor:not(.sabor--intro) {
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    height: min(68svh, 540px);
    padding: 22px 20px 18px;
  }
  .sabor__copy { position: static; max-width: none; font-size: 1rem; }
  .sabor__img { position: static; translate: none !important; width: auto; max-width: 100%; max-height: 100%; justify-self: center; align-self: center; object-fit: contain; min-height: 0; }
  .sabor--photo .sabor__img { max-height: 92%; }
  .sabor__word { position: static; font-size: clamp(3.4rem, 17vw, 5rem); line-height: 0.85; white-space: nowrap; overflow: hidden; text-overflow: clip; }
  /* Tarjeta centrada: asoman las dos vecinas por igual */
  .sabor { scroll-snap-align: center; }
  .sabores__pin { scroll-padding: 0; }
}

/* ==========================================================================
   Celular: sin escenas fijas. Hero estático (sin CELEBRA ni "Por dentro"),
   muro y frase como secciones normales. En escritorio siguen las escenas.
   ========================================================================== */
@media (max-width: 900px) {
  /* Hero */
  .opening__pin { height: auto; min-height: 0; overflow: visible; }
  .hero { min-height: var(--screen); height: auto; }
  .celebra-word, .inside { display: none !important; }

  /* Muro "Más de 40 sabores": una pantalla, el muro de fondo y el texto encima */
  .wall__pin { height: auto; min-height: 88svh; }
  .wall__grid { opacity: 0.22; }

  /* Frase: solo la frase y la firma */
  .frase__pin { height: auto; min-height: 0; padding: 96px 20px 88px; gap: 28px; align-content: center; }
  .frase__big { display: none; }
  .frase__sign { position: static; }

  /* Favoritas: pantalla completa, contenido centrado */
  .home main > .favs { min-height: var(--screen); }
  .favs__pin { padding-top: calc(var(--nav-h) + 24px); padding-bottom: calc(40px + var(--orderbar, 0px)); gap: 20px; }
  .favs__fig { height: min(44svh, 380px); }
}
@media (max-width: 900px) {
  .home main > .frase, .home main > .wall { display: grid; align-content: center; }
}

/* ==========================================================================
   Celular: carruseles de a una (Favoritas y Sabores) con botones ‹ ›
   ========================================================================== */
.car-arrow, .sabores__arrows { display: none; }
@media (max-width: 900px) {
  .car-arrow {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: var(--choco-950); color: var(--cream); font-size: 20px; cursor: pointer;
    transition: opacity 200ms ease, transform var(--dur-press) var(--ease-out);
  }
  .car-arrow--prev .tm-icon { transform: rotate(180deg); }
  .car-arrow:active { transform: scale(0.94); }
  .car-arrow:disabled { opacity: 0.25; cursor: default; }

  /* Favoritas: una torta a la vez, foto contenida e información centrada */
  .favs__stage { gap: 40px; }
  .favs__slide { flex-basis: 100%; }
  .favs__fig { height: min(30svh, 260px); }
  .favs__fig::before { height: 92%; }
  .favs__info { justify-items: center; text-align: center; }
  .favs__actions { justify-content: center; }
  .favs__title { text-align: center; padding-right: 0; max-width: none; justify-self: center; }
  .favs__foot { justify-content: center; gap: 14px; padding-right: 0; }

  /* Sabores: una tarjeta a la vez, ‹ contador › debajo */
  .sabores__track { gap: 40px; }
  .sabor, .sabor--intro { flex: 0 0 calc(100vw - 40px); }
  .sabor--intro { text-align: center; justify-items: center; }
  .sabores__pin { padding-bottom: 16px; }
  .sabores__arrows { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px 40px; }
  .sabores__count { min-width: 64px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }

  /* Muro "Más de 40 sabores": el muro cubre toda la sección (sin franjas lisas) */
  .home main > .wall { min-height: 0; }
  .wall__pin { height: 88svh; min-height: 560px; }

  /* Manifiesto y frase (las dos amarillas, seguidas): menos separación */
  .home main > .manifesto, .home main > .frase { min-height: 0; }
  .manifesto { padding: 88px 22px 72px; }
  .frase__pin { padding: 24px 20px 72px; }
}

@media (max-width: 900px) {
  /* Sabores: fondo con el acento complementario de la tarjeta visible, aclarado para que la tarjeta resalte */
  .sabores {
    background-color: color-mix(in srgb, var(--sab-accent, var(--yellow)) 42%, var(--cream));
    transition: background-color 500ms var(--ease-in-out);
  }
  .sabor--intro { color: var(--choco-950); }
}
@media (max-width: 900px) {
  .sabores__pin { background: transparent; } /* en el celular no se fija: el color lo pone la sección */
}
@media (max-width: 900px) {
  /* Límite de alto directo en la foto: Safari no resuelve max-height: 100% dentro de la grilla y la foto tapaba el nombre */
  .favs__fig { height: auto; overflow: hidden; }
  .favs__fig img {
    width: auto; height: auto;
    max-width: min(84vw, 340px);
    max-height: min(30svh, 260px);
    object-fit: contain;
  }
  .favs__fig::before { height: min(30svh, 260px); max-width: min(30svh, 260px); }
}
@media (max-width: 900px) {
  .sabor__img { max-height: min(30svh, 250px); width: auto; height: auto; }
}

/* ==========================================================================
   Hero · diseño de oct 2026
   Fondo blanco con tortas dibujadas; a la izquierda el titular turquesa, el botón café y
   las opciones en cápsulas amarillas; a la derecha la foto de familia con la Ferrero arriba
   a la derecha (la que viaja al centro en CELEBRA) y la Franui abajo a la izquierda.
   ========================================================================== */
.opening__bg { background: #fff url("../img/home/hero-fondo.webp") center / cover no-repeat; }
@media (min-width: 901px) { .hero { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); } }
.hero__copy { gap: 18px; }
.hero__copy h1 { color: #119393; font-size: clamp(2.8rem, 4.9vw, 5.4rem); line-height: 0.98; letter-spacing: -0.005em; }
.hero__copy .lead { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.25; color: var(--choco-900); max-width: 24ch; }
.hero__ctas { margin-top: 8px; }
.hero__ctas .btn { --btn-bg: var(--choco); --btn-ink: var(--cream); font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; padding: 0 30px; }
@media (hover: hover) and (pointer: fine) { .hero__ctas .btn:hover { --btn-bg: var(--choco-900); } }
.hero__quick { gap: 10px; margin-top: 14px; }
.hero__quick-label { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; color: #119393; }
.hero__quick a { background: var(--yellow); color: var(--choco-900); font-family: var(--font-display); font-weight: 450; font-size: 1.02rem; min-height: 36px; padding: 0 18px; }
@media (hover: hover) and (pointer: fine) { .hero__quick a:hover { background: #ffe9c7; } }

/* Composición: medidas relativas a la foto (--ph) */
.hero__stage { --ph: min(34vw, 58vh); height: min(78vh, 720px); }
.hero__sunwrap { display: none; }
.hero__photo {
  position: absolute; left: 50%; top: 50%;
  width: var(--ph); translate: -50% -50%;
  z-index: 1; will-change: transform;
}
.hero__photo img { display: block; width: 100%; height: auto; }
.opening .hero__cake {
  left: calc(50% + var(--ph) * 0.56); top: calc(50% - var(--ph) * 0.13);
  width: calc(var(--ph) * 0.4); translate: -50% -50%;
  z-index: 3;
}
.hero__img--top { position: absolute; left: 50%; top: 50%; width: 100%; translate: -50% -50%; opacity: 0; }
.hero__shadow { bottom: 2%; height: 16%; }
.hero__franui {
  position: absolute; left: calc(50% - var(--ph) * 0.34); top: calc(50% + var(--ph) * 0.38);
  width: calc(var(--ph) * 0.42); translate: -50% -50%;
  z-index: 3; pointer-events: none; will-change: transform;
}

@media (max-width: 900px) {
  .hero { grid-template-rows: auto auto; align-content: center; gap: 4px; }
  .hero__stage { --ph: min(70vw, 38svh); height: calc(var(--ph) * 1.22); min-height: 0; }
  .hero__img--top { display: none; }
  .hero__copy h1 { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .hero__copy .lead { font-size: 1.15rem; }
  .hero__quick { margin-top: 6px; }
  .hero__quick-label { display: block; }
}
@media (min-width: 901px) {
  /* Ancho del diseño: el texto empieza más adentro y la composición llega casi al borde derecho */
  .hero { max-width: 1240px; padding-inline: 40px; }
}
@media (max-width: 900px) {
  .opening .hero__cake { left: calc(50% + var(--ph) * 0.5); }
}

/* ==========================================================================
   Favoritas · diseño de oct 2026
   Temas en ciclo según la torta activa (data-favs-theme): amarillo, turquesa, chocolate.
   Todo en Bevellier; precio "Desde"; pestañas con el nombre de cada torta.
   ========================================================================== */
.favs {
  --favs-title: var(--choco);
  --favs-name: #119393;
  --favs-ink: var(--choco-900);
  --favs-btn-bg: var(--choco);
  --favs-btn-ink: var(--cream);
  --favs-line: var(--choco);
  --favs-line-ink: var(--choco-900);
  color: var(--favs-ink);
}
.favs[data-favs-theme="turquesa"] {
  --favs-title: #fff;
  --favs-name: var(--choco);
  --favs-ink: #fff;
  --favs-btn-bg: var(--choco);
  --favs-btn-ink: var(--cream);
  --favs-line: var(--choco);
  --favs-line-ink: var(--choco-900);
}
.favs[data-favs-theme="chocolate"] {
  --favs-title: var(--cream);
  --favs-name: var(--yellow);
  --favs-ink: var(--cream);
  --favs-btn-bg: var(--yellow);
  --favs-btn-ink: var(--choco-950);
  --favs-line: var(--yellow);
  --favs-line-ink: var(--cream);
}
.favs__title, .favs__info h3, .favs__info p, .favs__nav button, .favs__all, .favs__info .btn {
  transition: color 420ms var(--ease-out), background-color 420ms var(--ease-out), border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.favs__title { color: var(--favs-title); font-size: clamp(2.6rem, 4.2vw, 4.6rem); line-height: 1; max-width: 11ch; }
.favs__info h3 { color: var(--favs-name); font-size: clamp(2.2rem, 3.2vw, 3.4rem); line-height: 0.95; }
.favs__price { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 1.8vw, 1.8rem); color: var(--favs-ink); }
.favs__meta { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--favs-ink); }
.favs__desc { font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; line-height: 1.35; color: var(--favs-ink); max-width: 34ch; }
.favs__info .btn { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; min-height: 44px; padding: 0 24px; }
.favs__info .btn:not(.btn--ghost) { --btn-bg: var(--favs-btn-bg); --btn-ink: var(--favs-btn-ink); }
.favs__info .btn--ghost { color: var(--favs-line-ink); box-shadow: inset 0 0 0 1.5px var(--favs-line); }
@media (hover: hover) and (pointer: fine) {
  .favs__info .btn:not(.btn--ghost):hover { --btn-bg: var(--favs-btn-bg); filter: brightness(1.08); }
  .favs__info .btn--ghost:hover { --btn-bg: color-mix(in srgb, var(--favs-line) 14%, transparent); }
}
/* Círculo con degradado y brillo suave (como los recursos del diseño) */
.favs__disc, .favs__fig::before {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.12));
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.35);
}
/* Pestañas con el nombre de cada torta y "Más de 40 sabores ↓" */
.favs__nav button {
  font-family: var(--font-display); font-weight: 400; font-size: 1.02rem;
  height: 38px; padding: 0 16px;
  color: var(--favs-line-ink); background: transparent;
}
.favs__nav button[aria-current="true"] { background: transparent; color: var(--favs-line-ink); box-shadow: inset 0 0 0 1.5px var(--favs-line); }
@media (hover: hover) and (pointer: fine) {
  .favs__nav button:not([aria-current="true"]):hover { background: color-mix(in srgb, var(--favs-line) 12%, transparent); }
}
.favs__all { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; color: var(--favs-line-ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }

@media (max-width: 900px) {
  /* En el celular las pestañas son puntos y flechas: del color del tema */
  .favs__nav button::after { background: color-mix(in srgb, var(--favs-line-ink) 35%, transparent); }
  .favs__nav button[aria-current="true"] { box-shadow: none; }
  .favs__nav button[aria-current="true"]::after { background: var(--favs-line-ink); }
  .favs .car-arrow { background: var(--favs-btn-bg); color: var(--favs-btn-ink); }
  .favs__title { max-width: none; font-size: clamp(2rem, 8.6vw, 2.6rem); }
}
@media (max-width: 900px) {
  /* Las pestañas vuelven a ser puntos en el celular (los nombres no caben) */
  .favs__nav button { width: 28px; height: 28px; padding: 0; font-size: 0; }
}
@media (max-width: 900px) {
  /* Círculos completos: el contenedor ya no recorta y mide el círculo más su brillo */
  .favs__fig { --disc: min(30svh, 260px); overflow: visible; height: calc(var(--disc) + 36px); }
  .favs__fig::before { height: var(--disc); max-width: none; width: auto; aspect-ratio: 1; }
  .favs__fig img { max-height: calc(var(--disc) * 0.92); }
  .favs__stage { padding-top: 16px; padding-bottom: 16px; }
}

/* Composición del hero sin `translate` en lo que anima GSAP (el ratón y la escena reescriben su
   transformación y borraban el -50 %). Cada pieza se ubica por su esquina, calculada con su tamaño.
   Proporciones: foto 960×998, Ferrero 720×569, Franui 700×585. */
.hero__photo { translate: none; left: calc(50% - var(--ph) * 0.5); top: calc(50% - var(--ph) * 0.52); }
.opening .hero__cake { translate: none; left: calc(50% + var(--ph) * 0.36); top: calc(50% - var(--ph) * 0.288); }
.hero__franui { translate: none; left: calc(50% - var(--ph) * 0.55); top: calc(50% + var(--ph) * 0.204); }
@media (max-width: 900px) {
  .opening .hero__cake { left: calc(50% + var(--ph) * 0.3); }
}
@media (min-width: 901px) {
  /* Ventanas bajas (laptops con la ventana reducida): la escena se ajusta al alto disponible */
  .opening__pin { min-height: 520px; }
  .hero__stage { --ph: min(34vw, 58vh, 520px); }
}

/* Tortas del hero inclinadas y algo desenfocadas, como en primer plano (diseño): al empezar el
   scroll se enfocan y se enderezan. Se controlan con variables (GSAP no toca estos elementos). */
.hero__lean {
  --lean-r: 12deg; --lean-b: 1.2px;
  display: block;
  rotate: var(--lean-r);
  filter: blur(var(--lean-b));
}
.hero__lean--franui { --lean-r: 8deg; --lean-b: 2px; width: 100%; height: auto; }
.hero__franui img { display: block; }
@media (max-width: 900px) {
  /* Sin escena de scroll en el celular: inclinadas pero nítidas */
  .hero__lean { --lean-b: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__lean { --lean-b: 0px; }
}

/* ==========================================================================
   Círculos de diseño detrás de las tortas de Favoritas (amarillo, turquesa, café)
   Cada imagen trae el círculo (69 % del ancho) y su sombra suave; se agranda 1,44×
   para que el círculo mida lo mismo que antes y la sombra quede por fuera.
   ========================================================================== */
.favs { --disc-img: url("../img/home/disco-cafe.webp"); }
.favs[data-favs-theme="turquesa"], .favs[data-favs-theme="chocolate"] { --disc-img: url("../img/home/disco-amarillo.webp"); }
.favs__disc {
  position: relative;
  background-color: transparent !important; background-image: none; box-shadow: none; border-radius: 0;
}
.favs__disc::before {
  content: ""; position: absolute; inset: -22%;
  background: var(--disc-img) center / contain no-repeat;
}
@media (max-width: 900px) {
  .favs__slide { --disc-img: url("../img/home/disco-amarillo.webp"); }
  .favs__slide[data-theme="amarillo"] { --disc-img: url("../img/home/disco-cafe.webp"); }
  .favs__fig::before {
    height: calc(var(--disc) * 1.44);
    background: var(--disc-img) center / contain no-repeat;
    box-shadow: none; border-radius: 0;
  }
}

/* "Más de 40 sabores" con el café del diseño (#623427), no el casi negro del prototipo */
.wall { color: var(--choco); }
.wall__copy .btn--dark { --btn-bg: var(--choco); --btn-ink: var(--cream); }
@media (hover: hover) and (pointer: fine) { .wall__copy .btn--dark:hover { --btn-bg: var(--choco-900); } }
@media (max-width: 900px) {
  /* El espacio de la foto mide la imagen del círculo completa (círculo + sombra), sin recorte */
  .favs__fig { --disc: min(26svh, 230px); height: calc(var(--disc) * 1.44); }
  .favs__stage { padding-top: 0; padding-bottom: 0; }
}

/* ==========================================================================
   "Cada antojo tiene su Manía" · diseño del 13 de octubre de 2026
   Intro en blanco con tortas dibujadas + un panel por categoría con su color,
   la torta, el nombre en letras grandes y la lista de sabores.
   ========================================================================== */
.antojo--chocolate { --c-bg: #3d1f16; --c-ink: var(--cream); --c-word: var(--cream); --c-btn-bg: var(--yellow); --c-btn-ink: #3d1f16; --c-a: #ffca6c; }
.antojo--turquesa  { --c-bg: #41bbbe; --c-ink: #3d1f16; --c-word: #fff; --c-btn-bg: var(--choco); --c-btn-ink: var(--cream); --c-a: #ffca6c; }
.antojo--amarillo  { --c-bg: #ffca6c; --c-ink: #3d1f16; --c-word: #fff; --c-btn-bg: var(--choco); --c-btn-ink: var(--cream); --c-a: #41bbbe; }

/* Intro */
.antojos .sabor--intro { background: #fff url("../img/home/hero-fondo.webp") center / cover no-repeat; color: var(--choco); justify-items: start; }
.antojos__title { font-size: clamp(2.8rem, 4.4vw, 4.8rem); line-height: 1.02; color: var(--choco); }
.antojos__title .line { display: block; }
.antojos__mania { display: inline-block; height: 0.86em; vertical-align: -0.04em; color: #0d9292; }
.antojos__mania svg { height: 100%; width: auto; display: block; }
.antojos__q { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 1.8vw, 1.8rem); color: var(--choco); }
.antojos__text { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; max-width: 30ch; color: var(--choco-900); }

/* Paneles */
.antojo { font-family: var(--font-display); }
.antojo__copy { display: grid; gap: 10px; justify-items: start; max-width: 36ch; }
.antojo__lead { font-weight: 600; font-size: clamp(1.15rem, 1.5vw, 1.45rem); line-height: 1.25; }
.antojo__desc { font-weight: 400; font-size: 1rem; line-height: 1.35; opacity: 0.92; }
.antojo__btn { margin-top: 18px; --btn-bg: var(--c-btn-bg); --btn-ink: var(--c-btn-ink); font-family: var(--font-display); font-weight: 500; min-height: 40px; padding: 0 18px; font-size: 1rem; }
.antojo__word { color: var(--c-word); font-size: clamp(4.2rem, 8.2vw, 9.4rem); line-height: 0.86; letter-spacing: -0.01em; }
.antojo__list { color: var(--c-ink); }
.antojo__toggle { display: none; }
.antojo__count { font-weight: 600; font-size: 1.02rem; margin-bottom: 4px; }
.antojo__flavors { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 22px; counter-reset: sabor; font-size: 0.98rem; line-height: 1.3; }
.antojo__flavors li { counter-increment: sabor; }
.antojo__flavors li::before { content: counter(sabor) ". "; opacity: 0.75; }
.antojo__flavors a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .antojo__flavors a:hover { background-size: 100% 1px; } }
.antojo__flavors--2col { grid-template-columns: repeat(2, auto); }

@media (min-width: 901px) {
  .antojos .sabor--intro { flex-basis: 60vw; padding-left: 8vw; }
  .antojo .sabor__copy { left: 7vw; top: calc(var(--nav-h) + 9vh); }
  .antojo .sabor__word { left: 7vw; bottom: 9vh; }
  .antojo .sabor__img { right: 22vw; top: 50%; width: min(34vw, 54vh); }
  .antojo__list { position: absolute; right: 4vw; top: 50%; translate: 0 -40%; z-index: 3; max-width: 30vw; }
}

/* Celular: carrusel de a una; el nombre arriba, la torta, el texto y la lista desplegable */
@media (max-width: 900px) {
  .antojos .sabor--intro { background: transparent; text-align: center; justify-items: center; }
  .antojos__title { font-size: clamp(2.4rem, 10.5vw, 3.2rem); }
  .antojo.sabor:not(.sabor--intro) {
    display: flex; flex-direction: column; gap: 14px;
    height: auto; padding: 24px 20px 22px;
    background: var(--c-bg); color: var(--c-ink);
  }
  .antojo .sabor__word { order: 1; position: static; font-size: clamp(2.6rem, 12vw, 3.6rem); line-height: 0.9; white-space: normal; }
  .antojo .sabor__img { order: 2; position: static; align-self: center; width: auto; max-width: 92%; max-height: min(28svh, 230px); translate: none !important; }
  .antojo .sabor__copy { order: 3; position: static; }
  .antojo__btn { margin-top: 6px; }
  .antojo__list { order: 4; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); padding-top: 10px; }
  .antojo__count { display: none; }
  .antojo__toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: 6px 0; border: 0; background: none; color: inherit; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 1.05rem;
  }
  .antojo__toggle span::before { content: "Ver los "; }
  .antojo__toggle .tm-icon { transition: transform 260ms var(--ease-out); }
  .antojo__list.is-open .antojo__toggle .tm-icon { transform: rotate(90deg); }
  .antojo__flavors { display: none; padding-top: 6px; font-size: 0.98rem; }
  .antojo__list.is-open .antojo__flavors { display: grid; }
  .antojo__flavors--2col { grid-template-columns: 1fr 1fr; }
  .antojos .sabores__track { align-items: flex-start; }
}

@media (min-width: 901px) {
  /* Listas largas: más angostas y la torta se corre a la izquierda para dejarles lugar */
  .antojo__list { max-width: 26vw; font-size: 0.95rem; }
  .antojo__flavors { font-size: 0.92rem; }
  .antojo__flavors--2col { gap: 1px 18px; }
  .antojo:has(.antojo__flavors--2col) .sabor__img { right: 31vw; }
  .antojo:has(.antojo__list) .sabor__img { right: 24vw; }
}
@media (min-width: 901px) {
  .antojo__list:has(.antojo__flavors--2col) { right: 3vw; max-width: 31vw; }
  .antojo__flavors--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 0.88rem; }
  .antojo:has(.antojo__flavors--2col) .sabor__img { right: 35vw; width: min(30vw, 50vh); }
}

/* --------------------------------------------------------------------------
   Sabores de cada categoría: "Ver los N sabores" bajo el botón y, al abrir,
   cápsulas que enlazan a cada torta. Igual en computadora y celular.
   -------------------------------------------------------------------------- */
.antojo__list,
.antojo__list:has(.antojo__flavors--2col) {
  position: static; translate: none; max-width: none;
  order: initial; border-top: 0; padding-top: 0; margin-top: 4px;
  color: var(--c-ink);
}
.antojo__count { display: none; }
.antojo__toggle {
  display: inline-flex; align-items: center; gap: 8px; width: auto;
  padding: 6px 0; border: 0; background: none; color: inherit; cursor: pointer;
  font: inherit; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px;
}
.antojo__toggle span::before { content: "Ver los "; }
.antojo__toggle .tm-icon { transition: transform 260ms var(--ease-out); transform: rotate(90deg); }
.antojo__list.is-open .antojo__toggle .tm-icon { transform: rotate(-90deg); }
.antojo__flavors,
.antojo__flavors--2col {
  display: none; grid-template-columns: none;
  flex-wrap: wrap; gap: 6px; padding-top: 8px;
  max-width: min(46ch, 40vw);
  font-size: 0.92rem; counter-reset: none;
}
.antojo__list.is-open .antojo__flavors { display: flex; animation: antojo-in 320ms var(--ease-out); }
.antojo__flavors li { counter-increment: none; }
.antojo__flavors li::before { content: none; }
.antojo__flavors li > a, .antojo__flavors li:not(:has(a)) {
  display: inline-block; padding: 5px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 13%, transparent);
  line-height: 1.2; white-space: nowrap;
}
.antojo__flavors a { background-image: none; text-decoration: none; transition: background-color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .antojo__flavors a:hover { background-color: color-mix(in srgb, currentColor 26%, transparent); }
}
@keyframes antojo-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .antojo__list.is-open .antojo__flavors { animation: none; } }
@media (max-width: 900px) {
  .antojo__flavors, .antojo__flavors--2col { max-width: none; }
  .antojo__flavors li > a, .antojo__flavors li:not(:has(a)) { white-space: normal; }
}
@media (min-width: 901px) {
  /* La torta vuelve a su lugar: la lista ya no ocupa la derecha */
  .antojo .sabor__img, .antojo:has(.antojo__list) .sabor__img, .antojo:has(.antojo__flavors--2col) .sabor__img { right: 12vw; width: min(36vw, 58vh); }
  .antojo .sabor__copy { max-width: min(46ch, 40vw); }
}
@media (min-width: 901px) {
  /* Listas largas (más de 16): más anchas, menos filas, para no tocar el nombre grande */
  .antojo .sabor__copy:has(.antojo__flavors--wide) { max-width: min(64ch, 50vw); }
  .antojo__flavors--wide { max-width: min(64ch, 50vw); gap: 5px; font-size: 0.86rem; }
  .antojo__flavors--wide li > a, .antojo__flavors--wide li:not(:has(a)) { padding: 4px 10px; }
  .antojo:has(.antojo__flavors--wide) .sabor__img { right: 6vw; width: min(30vw, 50vh); }
}
@media (min-width: 901px) and (max-height: 820px) {
  .antojo .sabor__copy { top: calc(var(--nav-h) + 4vh); max-width: min(64ch, 50vw); }
  .antojo__flavors { max-width: min(64ch, 50vw); font-size: 0.86rem; gap: 5px; }
  .antojo__flavors li > a, .antojo__flavors li:not(:has(a)) { padding: 4px 10px; }
  .antojo .sabor__word { font-size: clamp(3.6rem, 7vw, 7.4rem); bottom: 6vh; }
  .antojo .sabor__img { right: 6vw; width: min(30vw, 50vh); }
}

/* ==========================================================================
   Personalizadas · como "Más de 40 sabores"
   La cámara se aleja desde una torta hasta el muro de círculos; el muro se
   atenúa y aparece el círculo blanco. Celdas cuadradas: círculos, nunca óvalos.
   ========================================================================== */
.custom { min-height: 0; background: var(--cream); color: var(--choco); overflow: clip; }
.custom__pin {
  position: relative; height: var(--screen); min-height: 600px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--cream);
}
.custom__pin > * { grid-area: 1 / 1; }
/* 9 × 5 celdas de 11.4vw (114vw de ancho, 63vw de alto), centradas con left/top calculados:
   sin translate, porque GSAP anima la escala de la rejilla */
.custom__grid {
  --cell: 11.333vw; --gap: 1.5vw;
  position: absolute; left: calc(50% - 57vw); top: calc(50% - (5 * var(--cell) + 4 * var(--gap)) / 2);
  display: grid; grid-template-columns: repeat(9, var(--cell)); gap: var(--gap);
  will-change: transform;
}
.custom__cell { position: relative; width: var(--cell); height: var(--cell); display: grid; place-items: center; will-change: transform, opacity; }
.custom__cell::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: var(--t); }
.custom__cell img { position: relative; width: 92%; height: 92%; object-fit: contain; }

/* Círculo blanco: el contenido manda; medidas del diseño (círculo de 664 px) */
.custom__circle {
  position: relative; z-index: 2;
  container-type: inline-size;
  width: clamp(340px, min(35.6vw, 72svh), 760px); aspect-ratio: 1; border-radius: 50%;
  background: #fff;
  display: grid; place-content: center; justify-items: center;
  padding: 0; text-align: center;
  box-shadow: 0 40px 90px -50px rgba(61, 31, 22, 0.45);
}
.custom__title { color: #119393; font-size: 10.35cqi; line-height: 1.09; letter-spacing: 0; text-wrap: nowrap; }
.custom__title span { display: block; }
.custom__title span + span { font-weight: 500; }
.custom__text { margin-top: 3.9cqi; font-family: var(--font-display); font-weight: 400; font-size: max(1rem, 4.36cqi); line-height: 1.2; color: var(--choco); max-width: 17em; }
.custom__btn {
  margin-top: 8cqi; min-height: max(44px, 8.2cqi); padding: 0 6cqi; gap: 1.6cqi;
  --btn-bg: var(--yellow); --btn-ink: var(--choco);
  font-family: var(--font-display); font-weight: 400; font-size: max(1rem, 3.56cqi);
}
.custom__btn .tm-icon { color: var(--choco); font-size: 1.25em; }
.custom__note { margin-top: 3.6cqi; font-family: var(--font-display); font-weight: 400; font-size: max(0.9rem, 3.4cqi); line-height: 1.2; color: var(--choco); max-width: 11em; }
@media (max-width: 900px) {
  .home main > .custom { min-height: 0; }
  .custom__pin { height: auto; min-height: 0; padding: 72px 0; }
  .custom__grid { --cell: 24vw; --gap: 3vw; left: calc(50% - 66vw); top: calc(50% - (6 * var(--cell) + 5 * var(--gap)) / 2); grid-template-columns: repeat(5, var(--cell)); opacity: 0.35; }
  .custom__cell:nth-child(n + 31) { display: none; } /* 6 filas bastan en el celular */
  .custom__circle { width: min(360px, 90vw); }
}
@media (prefers-reduced-motion: reduce) {
  .custom__grid { opacity: 0.3; filter: blur(3px); }
}

/* ==========================================================================
   Escala tipográfica del diseño (Home.ai y Home2.ai, mesa de 1864.8 px)
   --u es un píxel de la mesa de trabajo; en pantallas bajas manda la altura
   para que nada se encime. Cada texto declara su tamaño del diseño en --fs.
   ========================================================================== */
@media (min-width: 901px) {
  :root { --u: min(calc(100vw / 1864.8), calc(var(--screen) / 900)); }
  .hero__copy h1, .hero__copy .lead, .hero__ctas .btn, .hero__quick-label, .hero__quick a,
  .favs__title, .favs__info h3, .favs__price, .favs__meta, .favs__desc, .favs__info .btn, .favs__nav button, .favs__all,
  .antojos .antojos__title, .antojos__q, .antojos__text,
  .antojo__lead, .antojo__desc, .antojo .antojo__btn, .antojo .antojo__word, .antojo__count, .antojo__flavors {
    font-size: clamp(var(--fs-min, 1rem), calc(var(--fs) * var(--u)), calc(var(--fs) * var(--fs-cap, 1.2px)));
  }

  /* Hero */
  .hero__copy h1 { --fs: 80.2; --fs-min: 2.6rem; --fs-cap: 1px; font-weight: 900; line-height: 1.07; letter-spacing: 0; }
  .hero__copy h1 .line { white-space: nowrap; } /* cada renglón del diseño en una sola línea */
  .hero__copy .lead { --fs: 26.9; font-weight: 400; line-height: 1.2; max-width: 12em; }
  .hero__ctas .btn { --fs: 26.9; --fs-min: 1.05rem; font-weight: 400; min-height: calc(max(48px, 52 * var(--u))); padding: 0 1.2em; }
  .hero__quick-label { --fs: 21; --fs-min: 0.95rem; font-weight: 400; }
  .hero__quick a { --fs: 21; --fs-min: 0.95rem; font-weight: 400; }

  /* Las favoritas */
  .favs__title { --fs: 80.2; --fs-min: 2.6rem; font-weight: 600; line-height: 1.08; letter-spacing: 0; max-width: 6em; text-wrap: wrap; } /* "Las favoritas de / las fiestas" */
  .favs__info h3 { --fs: 60; --fs-min: 2.1rem; font-weight: 600; line-height: 1.05; letter-spacing: 0; }
  .favs__price { --fs: 36.3; --fs-min: 1.35rem; font-weight: 500; }
  .favs__meta { --fs: 21; --fs-min: 0.95rem; font-weight: 400; }
  .favs__desc { --fs: 21; --fs-min: 0.95rem; font-weight: 400; line-height: 1.19; max-width: 22em; }
  .favs__info .btn { --fs: 21; --fs-min: 0.95rem; font-weight: 400; }
  .favs__nav button { --fs: 21; --fs-min: 0.95rem; font-weight: 400; }
  .favs__all { --fs: 21; --fs-min: 0.95rem; font-weight: 400; }

  /* Cada antojo tiene su Manía · introducción */
  .antojos .antojos__title { --fs: 80.2; --fs-min: 2.6rem; font-weight: 700; line-height: 1.08; letter-spacing: 0; }
  .antojos__q { --fs: 36.3; --fs-min: 1.3rem; font-weight: 500; margin-top: 0.4em; }
  .antojos__text { --fs: 26.9; --fs-min: 1.05rem; font-weight: 400; line-height: 1.22; max-width: 15em; }

  /* Paneles: misma columna a la izquierda (7 % del ancho, como el diseño) */
  .antojos { --u: min(calc(100vw / 1864.8), calc(var(--screen) / 1000)); }
  /* Muchos sabores (4 columnas): la torta se achica y se corre a la derecha para no tocar la lista */
  .antojo:has(.antojo__flavors--many) .sabor__img { right: 4vw; width: min(28vw, 48vh); }
  .antojo .sabor__copy { top: calc(var(--nav-h) + 36 * var(--u)); max-width: none; width: max-content; gap: 0; }
  .antojo__lead { --fs: 32.8; --fs-min: 1.2rem; font-weight: 500; line-height: 1.2; max-width: 18em; }
  .antojo__desc { --fs: 23.4; --fs-min: 1rem; font-weight: 400; line-height: 1.2; max-width: 21em; margin-top: 0.55em; opacity: 1; }
  .antojo .antojo__btn { --fs: 21; --fs-min: 0.95rem; font-weight: 400; margin-top: calc(48 * var(--u)); min-height: calc(max(38px, 44 * var(--u))); padding: 0 calc(18 * var(--u) + 4px); }
  .antojo .antojo__word { --fs: 165.5; --fs-min: 4rem; font-weight: 700; line-height: 0.86; letter-spacing: -0.005em; bottom: calc(150 * var(--u)); }

  /* Sabores de la categoría: siempre abiertos, en cápsulas alineadas a la columna del texto */
  .antojo__list { margin-top: calc(36 * var(--u)); }
  .antojo__toggle { display: none; }
  .antojo__count { display: block; --fs: 21; --fs-min: 0.95rem; font-weight: 600; margin: 0 0 0.5em; }
  .antojo__flavors, .antojo__flavors--many {
    --fs: 21; --fs-min: 0.95rem;
    display: flex !important; flex-wrap: wrap; gap: calc(8 * var(--u) + 2px);
    max-width: calc(940 * var(--u)); padding: 0; margin: 0;
    font-weight: 400; animation: none !important;
  }
  .antojo__flavors--many { max-width: calc(1120 * var(--u)); }
  .antojo .antojo__flavors li > a, .antojo .antojo__flavors li:not(:has(a)) {
    display: inline-block; padding: 0.32em 0.8em; border-radius: var(--r-pill);
    background-color: color-mix(in srgb, currentColor 13%, transparent);
    font-weight: 400; line-height: 1.2; white-space: nowrap;
  }
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .antojo .antojo__flavors a:hover { background-color: color-mix(in srgb, currentColor 26%, transparent); }
}
@media (min-width: 901px) and (max-height: 760px) {
  /* Pantallas bajas: el nombre grande baja un poco para dejar aire a las cápsulas */
  .antojo .antojo__word { bottom: calc(80 * var(--u)); }
}

/* ==========================================================================
   Final de la portada · diseño Home3 (14 de octubre de 2026)
   Redes en turquesa → Locales sobre blanco con la textura de tortas → footer.
   ========================================================================== */
.redes { background: #41bbbe; color: #fff; }
.redes .rt { background: color-mix(in srgb, #fff 18%, #41bbbe); }
.redes__links .btn { --btn-bg: var(--yellow); --btn-ink: var(--choco); font-family: var(--font-display); font-weight: 500; }
.redes__links .btn--ghost { --btn-bg: transparent; --btn-ink: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
@media (hover: hover) and (pointer: fine) {
  .redes__links .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.16); }
}

/* Locales: fondo blanco con la textura y el contenido en un panel crema */
.locales { background: #fff url("../img/home/hero-fondo.webp") center / cover no-repeat; color: var(--choco); }
.locales__inner {
  max-width: 1200px; margin: clamp(56px, 8vw, 96px) auto;
  padding: clamp(36px, 4.4vw, 56px) clamp(20px, 2.6vw, 40px);
  background: var(--cream);
}
/* Locales cubre a Redes como una hoja, igual que las demás escenas */
.home main > .locales {
  border-radius: 44px 44px 0 0; overflow: clip;
  box-shadow: 0 -24px 60px -30px rgba(61, 31, 22, 0.35);
}
@media (max-width: 900px) {
  .locales__inner { margin: 40px 12px; padding: 32px 18px; }
}
@media (min-width: 901px) {
  .redes__head h2, .locales__head h2 {
    font-size: clamp(2.6rem, calc(80.2 * var(--u)), 96px);
    font-weight: 700; line-height: 1.08; letter-spacing: 0;
  }
  .redes__head h2 { max-width: 7em; }
  .locales__head h2 { max-width: 10em; font-size: clamp(2.4rem, calc(73.7 * var(--u)), 88px); line-height: 0.98; }
}

/* Locales en escritorio: medidas del diseño en px de la mesa (panel de 1200 de 1864.8),
   todo escala junto con la pantalla como en el Illustrator */
@media (min-width: 901px) {
  .locales { --lu: max(var(--u), 0.62px); }
  .locales__inner {
    width: calc(1200 * var(--lu)); max-width: calc(100% - 48px);
    margin: calc(86 * var(--lu)) auto calc(122 * var(--lu));
    padding: calc(26 * var(--lu)) calc(26 * var(--lu)) calc(22 * var(--lu));
    gap: calc(44 * var(--lu));
  }
  .locales__head { gap: calc(24 * var(--lu)); }
  .locales__cities { gap: calc(9 * var(--lu)); }
  .locales__cities button { min-height: calc(43 * var(--lu)); padding: 0 calc(18 * var(--lu)); font-size: calc(18.5 * var(--lu)); font-weight: 600; }
  .locales__grid { gap: calc(13 * var(--lu)); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loc-card { padding: calc(18 * var(--lu)); gap: calc(14 * var(--lu)); grid-template-columns: calc(40 * var(--lu)) minmax(0, 1fr); border-radius: calc(20 * var(--lu)); min-height: calc(136 * var(--lu)); }
  .loc-card__pin { width: calc(40 * var(--lu)); height: calc(40 * var(--lu)); font-size: calc(22 * var(--lu)); }
  .loc-card__body { gap: calc(4 * var(--lu)); }
  .loc-card__name { font-size: calc(20 * var(--lu)); }
  .loc-card__name small { font-size: calc(14.5 * var(--lu)); }
  .loc-card__addr { font-size: calc(17 * var(--lu)); line-height: 1.3; }
  .loc-card__go { font-size: calc(16.5 * var(--lu)); margin-top: calc(6 * var(--lu)); }
  .loc-card--more { min-height: calc(70 * var(--lu)); padding-block: 0; }
  .loc-card--more strong { font-size: calc(38 * var(--lu)); }
  .loc-card--more span { font-size: calc(18.5 * var(--lu)); }
  .locales__cta .btn { min-height: calc(52 * var(--lu)); padding: 0 calc(28 * var(--lu)); font-size: calc(18.5 * var(--lu)); }
}
.locales__head h2, .loc-card__name { color: #3d1f16; }
/* Aire alrededor del panel crema: relleno de la sección (un margen del panel colapsaba hacia afuera) */
.locales { padding: 56px 0 72px; }
.locales__inner { margin: 0 auto; }
@media (min-width: 901px) {
  .locales { padding: calc(96 * var(--lu)) 0 calc(122 * var(--lu)); }
  .locales__inner { margin: 0 auto; }
}
@media (max-width: 900px) {
  .locales { padding: 40px 12px 56px; }
  .locales__inner { margin: 0; }
}
.home main > .locales { min-height: 0; }

/* Favoritas: el cambio de color es un círculo que se abre desde la torta (sin mezclar colores) */
.favs__wipes { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; pointer-events: none; z-index: 0; }
.favs__wipe { position: absolute; inset: 0; --r: 0%; clip-path: circle(var(--r) at var(--wx, 70%) var(--wy, 55%)); }
.favs__pin > :not(.favs__wipes) { position: relative; z-index: 1; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) { .favs__wipes { display: none; } }
@media (min-width: 901px) {
  /* Las tortas de Favoritas más arriba: el disco y la foto suben juntos (top, no translate:
     GSAP anima su escala y desplazamiento) */
  .favs { --lift: 10vh; }
  .favs__discwrap { top: calc(-1 * var(--lift)); bottom: var(--lift); }
  .favs__fig { position: relative; top: calc(-1 * var(--lift)); }
}

/* Categorías sin lista de sabores: la torta es la protagonista */
@media (min-width: 901px) {
  .antojo .sabor__img, .antojo:has(.antojo__list) .sabor__img, .antojo:has(.antojo__flavors--many) .sabor__img {
    right: 5vw; top: 42%; width: min(48vw, 70vh);
  }
}
@media (max-width: 900px) {
  .antojo .sabor__img { max-height: min(40svh, 340px); max-width: 100%; }
}
.hero__bob { display: block; will-change: transform; }

/* Locales sin panel crema: el contenido va directo sobre el blanco con textura */
.locales__inner { background: transparent; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* Pausa antes de Personalizadas: la última categoría queda completa en pantalla (Sabores es sticky)
     antes de que la hoja siguiente la cubra; así nunca se ve a medio pasar. */
  .home main > .custom { margin-top: 35vh; }
}

/* Celular (16 oct): la intro de "Cada antojo" va en blanco con la textura de tortas, como en escritorio;
   cada categoría lleva su propio color de fondo de lado a lado (sin el tono mezclado del carrusel). */
@media (max-width: 900px) {
  .home main > .sabores.antojos { background: #fff url("../img/home/hero-fondo.webp") center top / auto 100% repeat-x; }
  .antojos .sabor--intro { background: transparent; }
}
/* Celular (16 oct): Personalizadas de borde a borde; el muro de tortas cubre toda la sección
   (antes un relleno viejo de la sección lo dejaba recortado en una caja con franjas vacías). */
@media (max-width: 900px) {
  .home main > .custom { padding: 0; }
  .custom__pin { padding: 56px 16px; }
  .custom__cell:nth-child(n + 31) { display: grid; }
}