/* Hallmark · genre: playful (suave) · macrostructure: Mundo continuo con mapa · theme: My Little Town (marca) · nav: mapa del pueblo · footer: vuelta al logo
 * Todos los colores, tipos, espacios y radios salen de tokens.css (sistema de diseño publicado).
 * pre-emit critique: P5 H4 E4 S4 R4 V4 */

/* ───────── Base ───────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--surface);
  overflow-x: clip;
  overscroll-behavior-y: none;
}
html[data-ground="lit"] { background-color: var(--sunflower-tint); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100lvh;
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html[data-ground="lit"] body { background-color: var(--sunflower-tint); }

img { max-width: 100%; }

h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--sunflower); color: var(--ink); }

.skip {
  position: fixed;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--sunflower);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.probe { position: fixed; left: 0; top: 0; width: 1px; visibility: hidden; pointer-events: none; }
.probe--svh { height: 100vh; height: 100svh; }
.probe--lvh { height: 100vh; height: 100lvh; }
.probe--top { height: env(safe-area-inset-top, 0px); }
.probe--bottom { height: env(safe-area-inset-bottom, 0px); }

/* ───────── Piezas de marca ───────── */

.arch {
  display: inline-block;
  width: 12px;
  height: 18px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--brand);
  flex: none;
}
.arch--brand { background: var(--brand); }
.arch--sunflower { background: var(--sunflower); }
.arch--bougainvillea { background: var(--bougainvillea); }
.arch--garden { background: var(--garden); }

.arches { display: flex; justify-content: center; gap: 10px; }
.arches i {
  display: block;
  width: 22px;
  height: 32px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}
.arches i:nth-child(1) { background: var(--brand); }
.arches i:nth-child(2) { background: var(--garden); }
.arches i:nth-child(3) { background: var(--sunflower); }
.arches i:nth-child(4) { background: var(--bougainvillea); }
.arches i:nth-child(5) { background: var(--turquoise-tint); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 2px solid var(--brand);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--accent { background: var(--sunflower); border-color: var(--sunflower); color: var(--on-sunflower); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover, .btn--accent:hover { box-shadow: var(--shadow-lift); }
}

/* ───────── El mundo ───────── */

.stage {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--surface);
}

.world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1000px;
  height: 914px;
  transform-origin: 0 0;
  will-change: transform;
}
/* El fondo de world-2x.jpg es exactamente el crema de la página (#F5E8D5): sin rectángulo visible */
.world__img { display: block; width: 1000px; height: 914px; max-width: none; }

.fx { position: absolute; pointer-events: none; }

/* Luz cálida que barre la escena (solo dentro del óvalo) */
.fx-light {
  inset: 0;
  mix-blend-mode: soft-light;
  opacity: var(--light, 0);
  background: linear-gradient(115deg, transparent 18%, var(--sunflower) 46%, transparent 74%);
  background-size: 260% 100%;
  background-position: calc(var(--sweep, 0) * 100%) 0;
  -webkit-mask-image: radial-gradient(ellipse 48% 36% at 50% 36%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 36% at 50% 36%, #000 55%, transparent 100%);
}

/* Vela: borra el rótulo del logo cuando la cámara ya está dentro del pueblo */
.fx-veil {
  left: -2px;
  top: 592px;
  width: 1004px;
  height: 324px;
  opacity: 0;
  background: linear-gradient(180deg, var(--surface-clear) 0, var(--surface) 50px);
}

/* Agua de la fuente */
.fx-ripple {
  left: 352px;
  top: 462px;
  width: 184px;
  height: 28px;
  border: 2px solid var(--shimmer);
  border-radius: 50%;
  opacity: 0;
  animation: ripple 3.8s ease-out var(--d, 0s) infinite;
}
@keyframes ripple {
  0% { transform: scale(0.35); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 0; }
}

/* El duendecillo amarillo de la casa de la derecha */
.fx-glint {
  left: 738px;
  top: 353px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sunflower-glow) 0%, var(--sunflower-clear) 68%);
  animation: glint 3.2s ease-in-out infinite;
}
@keyframes glint {
  0%, 100% { transform: scale(0.7); opacity: 0.35; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* Pétalos de bugambilia */
.petal {
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: calc(var(--s) * 0.7);
  border-radius: 70% 30% 70% 30%;
  background: var(--bougainvillea);
  opacity: 0;
  animation: petal var(--dur) linear var(--del) infinite;
}
.petal--sun { background: var(--sunflower); }
@keyframes petal {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: 0.9; }
  70% { opacity: 0.8; }
  100% { transform: translate(var(--dx), 250px) rotate(var(--rot)); opacity: 0; }
}

/* La puerta turquesa se llena de luz y la luz crece en arco: el pico */
.iris {
  left: 414px;
  top: 304px;
  width: 65px;
  height: 98px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  transform-origin: 50% 55%;
  transform: scale(var(--k, 1));
  opacity: var(--o, 0);
  background: radial-gradient(ellipse at 50% 62%, var(--sunflower-tint) 0%, var(--sunflower-tint) 42%, var(--sunflower) 100%);
  box-shadow: 0 0 18px 6px var(--sunflower-glow);
  will-change: transform, opacity;
}

/* Pétalos de primer plano */
.fg { position: fixed; left: 0; top: 0; z-index: 1; width: 100%; height: 100vh; height: 100lvh; overflow: hidden; pointer-events: none; }
.fgp {
  position: absolute;
  left: var(--bx);
  top: 0;
  width: var(--w);
  height: calc(var(--w) * 0.7);
  border-radius: 70% 30% 70% 30%;
  background: var(--bougainvillea);
  filter: blur(var(--b));
  opacity: 0.8;
  will-change: transform;
}
.fgp--sun { background: var(--sunflower); }

/* ───────── Barra y mapa ───────── */

.bar {
  position: fixed;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: calc(var(--space-2) + env(safe-area-inset-top, 0px)) max(var(--space-3), env(safe-area-inset-right, 0px)) var(--space-2) max(var(--space-3), env(safe-area-inset-left, 0px));
  pointer-events: none;
  transform: translateY(-130%);
  transition: transform 420ms var(--ease-out);
}
.bar.is-on { transform: none; }

.chip {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}
.chip--brand {
  gap: 10px;
  padding: 4px var(--space-4) 4px 4px;
  color: var(--brand);
  text-decoration: none;
}
.chip--brand img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 42% 40%;
}
.chip__name {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
}
.chip--lang { padding: 2px; }
.chip--lang button {
  min-width: 44px;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.chip--lang button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }

.map {
  position: fixed;
  z-index: 20;
  right: max(var(--space-3), env(safe-area-inset-right, 0px));
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.map.is-on { opacity: 1; pointer-events: auto; transform: none; }

.map__btn {
  display: block;
  width: 96px;
  padding: 6px 6px 4px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1000 / 914;
  background: var(--surface);
}
.map__thumb img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.map__eye {
  position: absolute;
  left: var(--ex, 0%);
  top: var(--ey, 0%);
  width: var(--ew, 100%);
  height: var(--eh, 100%);
  border: 2px solid var(--brand);
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px var(--surface-raised), 0 0 0 999px var(--surface-veil);
}
.map__label { display: block; padding-top: 4px; text-align: center; }

.map__list {
  display: none;
  min-width: 176px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}
.map.is-open .map__list { display: grid; gap: 2px; }
.map__list button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.map__list button[aria-current="true"] { background: var(--turquoise-tint); }
@media (hover: hover) and (pointer: fine) {
  .map__list button:hover { background: var(--sunflower-tint); }
}

/* ───────── Recorrido ───────── */

main { position: relative; z-index: 2; }

.leg {
  height: calc(var(--span, 1) * 100vh);
  height: calc(var(--span, 1) * 100svh);
}

.leg--hero {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0px)) var(--space-4) calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
}

.hero {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 640px;
  text-align: center;
}
/* Reserva el lugar del logo: la cámara lo encuadra aquí en reposo */
.hero__world {
  width: min(100%, 640px, calc(54vh * 1.094));
  width: min(100%, 640px, calc(54svh * 1.094));
  aspect-ratio: 1000 / 914;
  margin-bottom: var(--space-2);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 8.6vw, 56px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.hero__lead {
  font-size: clamp(17px, 4.6vw, 20px);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.hero .btn { margin-top: var(--space-2); }
.hero .arches { margin-top: var(--space-3); }

/* Texto de cada tramo: fijo sobre el mundo, uno a la vez */
.deck {
  position: fixed;
  z-index: 5;
  inset: 0;
  pointer-events: none;
}

.panel {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  visibility: hidden;
  opacity: 0;
  transition: opacity 280ms var(--ease-out), visibility 0s linear 280ms;
}
.panel.is-on {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}
.panel h2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 38px;
  font-weight: 700;
  color: var(--brand);
  text-wrap: balance;
}
.panel p:not(.eyebrow) { font-size: 16px; line-height: 24px; color: var(--ink); text-wrap: pretty; }

.panel > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-rise) var(--ease-out), transform var(--dur-rise) var(--ease-out);
}
.panel.is-on > * { opacity: 1; transform: none; }
.panel.is-on > *:nth-child(2) { transition-delay: 70ms; }
.panel.is-on > *:nth-child(3) { transition-delay: 140ms; }
.panel.is-on > *:nth-child(4) { transition-delay: 210ms; }
.panel.is-on > *:nth-child(5) { transition-delay: 280ms; }

.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.pair p {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--turquoise-tint);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.panel--door .btn { justify-self: start; margin-top: var(--space-1); }

.welcome {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(48px, 13vw, 96px);
  line-height: 1;
  font-weight: 700;
  color: var(--brand);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.welcome.is-on { opacity: 1; transform: none; }

/* ───────── Interior ───────── */

.interior {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-9) max(var(--space-4), env(safe-area-inset-right, 0px)) calc(var(--space-9) + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px));
  background-color: var(--sunflower-tint);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.interior__inner {
  display: grid;
  gap: var(--space-7);
  max-width: 1040px;
  margin-inline: auto;
}
.interior__head { display: grid; gap: var(--space-3); align-content: start; max-width: 640px; }
.interior__head h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1.07;
  font-weight: 700;
  color: var(--brand);
  text-wrap: balance;
}
.lead { font-size: 20px; line-height: 30px; color: var(--ink); text-wrap: pretty; }

.visit {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}
.field { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { padding: 0; font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink); }
.field input[type="text"] {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-4);
  border: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
}
.field input[type="text"]::placeholder { color: var(--ink-muted); }
.field--choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field--choice legend { grid-column: 1 / -1; margin-bottom: var(--space-2); }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 2px solid var(--brand);
  border-radius: var(--radius-pill);
  font-weight: 700;
  color: var(--ink);
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.choice input:checked + span { background: var(--brand); color: var(--on-brand); }
.choice input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.visit .btn { justify-self: stretch; }
.visit__status { min-height: 24px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink-muted); }

.facts { display: grid; gap: var(--space-3); }
.facts div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
}
.facts dt { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.facts dd { font-size: 17px; line-height: 26px; color: var(--ink-muted); font-weight: 600; }


/* ───────── Un vistazo por dentro ───────── */

.peek {
  position: relative;
  padding: var(--space-9) 0 var(--space-7);
  background-color: var(--sunflower-tint);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.peek__inner { max-width: 1160px; margin-inline: auto; display: grid; gap: var(--space-6); }
.peek__head {
  display: grid;
  gap: var(--space-3);
  max-width: 640px;
  padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px));
}
.peek__head h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1.07;
  font-weight: 700;
  color: var(--brand);
  text-wrap: balance;
}
.peek__rail {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-2) max(var(--space-4), env(safe-area-inset-left, 0px)) var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.peek__rail::-webkit-scrollbar { display: none; }
.shot {
  flex: none;
  width: min(82vw, 440px);
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.shot img { display: block; width: 100%; height: auto; max-width: none; }
.shot__cap { display: grid; gap: var(--space-1); padding: 0 var(--space-5) var(--space-5); }
.shot__cap h3 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--brand); }
.shot__cap p { font-size: 15px; line-height: 22px; color: var(--ink); }
.peek__note {
  padding-inline: max(var(--space-4), env(safe-area-inset-left, 0px));
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--ink-muted);
}

/* Entrada: sube 14 px y aparece, una sola vez */
.rise { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-rise) var(--ease-out), transform var(--dur-rise) var(--ease-out); }
.rise.is-in { opacity: 1; transform: none; }
html:not(.js) .rise { opacity: 1; transform: none; }

/* El interior sigue al vistazo sin costura */


/* ───────── Bandas: cada sección nueva se apila con esquinas redondeadas ───────── */

.band {
  position: relative;
  margin-top: calc(var(--space-6) * -1);
  padding: calc(var(--space-9) + var(--space-5)) max(var(--space-4), env(safe-area-inset-right, 0px)) var(--space-8) max(var(--space-4), env(safe-area-inset-left, 0px));
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background-color: var(--surface);
}
.band--surface { background-color: var(--surface); }
.band--turquoise { background-color: var(--turquoise-tint); }
.band--garden { background-color: var(--garden-tint); }
.band--bougainvillea { background-color: var(--bougainvillea-tint); }
.band--sunflower { background-color: var(--sunflower-tint); }
.interior.band { padding-top: calc(var(--space-9) + var(--space-5)); }
.band__inner { max-width: 1040px; margin-inline: auto; display: grid; gap: var(--space-7); }
.band__head { display: grid; gap: var(--space-3); max-width: 640px; justify-items: start; }
.band__head h2 {
  font-family: var(--font-display);
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1.07;
  font-weight: 700;
  color: var(--brand);
  text-wrap: balance;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--sunflower);
  color: var(--on-sunflower);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
}

.arch--lg { width: 22px; height: 32px; }

/* Un día en el pueblo */
.day {
  --prog: 0;
  position: relative;
  display: grid;
  gap: var(--space-6);
  padding-left: 56px;
  max-width: 640px;
}
.day::before, .day::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: var(--radius-pill);
}
.day::before { background: var(--line); }
.day::after { background: var(--brand); transform-origin: top; transform: scaleY(var(--prog)); }
.day__item { position: relative; display: grid; gap: var(--space-1); }
.day__mark {
  position: absolute;
  left: -48px;
  top: 4px;
  width: 20px;
  height: 28px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--surface);
  border: 3px solid var(--line);
  border-bottom-width: 0;
  transition: background-color var(--dur-rise) var(--ease-out), border-color var(--dur-rise) var(--ease-out);
}
.day__item.is-on .day__mark { background: var(--sunflower); border-color: var(--brand); }
.day__when { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); }
.day__item h3 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--ink); transition: color var(--dur-rise) var(--ease-out); }
.day__item.is-on h3 { color: var(--brand); }
.day__item p:not(.day__when) { font-size: 17px; line-height: 26px; color: var(--ink-muted); }

/* Cómo aprendemos */
.way { display: grid; gap: var(--space-5); }
.way__item {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}
.way__item h3 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--brand); }
.way__item p { font-size: 17px; line-height: 26px; color: var(--ink); }
.way__item--main h3 { font-size: 34px; line-height: 40px; }

/* Programas */
.prog { display: grid; gap: var(--space-5); max-width: 760px; }
.prog__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.prog__tabs [role="tab"] {
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 2px solid var(--brand);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.prog__tabs [role="tab"]:active { transform: scale(0.97); }
.prog__tabs [role="tab"][aria-selected="true"] { background: var(--brand); color: var(--on-brand); }
.prog__pane {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--sunflower-tint);
}
.prog__pane[hidden] { display: none; }
.prog__lead { font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips li {
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  color: var(--ink);
}
.prog__age { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink-muted); }

/* Palabras del pueblo */
.words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.flip {
  position: relative;
  display: block;
  width: 100%;
  min-height: 132px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 700px;
  -webkit-tap-highlight-color: transparent;
}
.flip__face {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 520ms var(--ease-out);
}
.flip__face--front { background: var(--surface-raised); color: var(--ink); }
.flip__face--back { background: var(--brand); color: var(--on-brand); transform: rotateY(180deg); }
.flip[aria-pressed="true"] .flip__face--front { transform: rotateY(-180deg); }
.flip[aria-pressed="true"] .flip__face--back { transform: rotateY(0deg); }
.flip__lang { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.flip__word { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; }

/* Cómo empezar */
.steps { display: grid; gap: var(--space-5); max-width: 640px; counter-reset: s; }
.steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.steps__arch {
  display: grid;
  place-items: center;
  width: 48px;
  height: 64px;
  padding-top: 14px;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--brand);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}
.steps__item:nth-child(2) .steps__arch { background: var(--garden); color: var(--ink); }
.steps__item:nth-child(3) .steps__arch { background: var(--sunflower); color: var(--ink); }
.steps__item:nth-child(4) .steps__arch { background: var(--surface-raised); color: var(--ink); }
.steps__item h3 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; color: var(--ink); }
.steps__item p { font-size: 17px; line-height: 26px; color: var(--ink); }

/* Fechas y voces */
.events { display: grid; gap: var(--space-3); max-width: 640px; }
.events li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 2px dashed var(--line);
  border-radius: var(--radius-md);
}
.events__date { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-muted); }
.events h3 { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); }
.voices { display: grid; gap: var(--space-4); max-width: 640px; }
.voice {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-soft);
}
.voice blockquote { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--ink); }
.voice figcaption { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--ink-muted); }

/* Preguntas */
.faq { display: grid; gap: var(--space-3); max-width: 720px; }
.faq__item { border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-soft); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-3) var(--space-5);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__plus { position: relative; flex: none; width: 24px; height: 24px; }
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transition: transform var(--dur-ui) var(--ease-out);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: rotate(0deg); }
.faq__item p { padding: 0 var(--space-5) var(--space-5); font-size: 17px; line-height: 26px; color: var(--ink-muted); }

/* Botón flotante y progreso */
.fab {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out), visibility 0s linear 280ms;
}
.fab.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.fab:active { transform: translate(-50%, 0) scale(0.97); }
.progress {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  top: env(safe-area-inset-top, 0px);
  height: 3px;
  background: var(--brand);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
html:not(.js) .fab, html:not(.js) .progress { display: none; }

@media (min-width: 900px) {
  .band { padding-inline: var(--space-6); }
  .band__inner--day { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--space-8); }
  .band__inner--day .band__head { position: sticky; top: var(--space-9); }
  .band__inner--events { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .band__inner--events .band__head { grid-column: 1 / -1; }
  .band__inner--faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: start; gap: var(--space-8); }
  .band__inner--faq .band__head { position: sticky; top: var(--space-9); }
  .way { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .way__item--main { grid-column: span 4; padding: var(--space-6); }
  .way__item { grid-column: span 2; }
  .way__item--wide { grid-column: span 4; }
  .words { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .flip { min-height: 168px; }
  .steps { max-width: 760px; }
}

/* ───────── Cierre ───────── */

.finale {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  padding: var(--space-9) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  background-color: var(--surface);
  text-align: center;
}
.finale__logo {
  display: block;
  width: min(560px, 88vw);
  height: auto;
  margin-block: var(--space-6) 0;
  /* el fondo del archivo es #F4E6D5, casi igual a la crema: se difumina para que no se vea el rectángulo */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 97%, transparent 100%), linear-gradient(180deg, transparent 0, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
.finale__note { max-width: 40ch; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }

/* Solo para lectores de pantalla: el relato completo, en orden, mientras los paneles visibles van y vienen */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* La mezcla de luz cuesta en teléfonos: solo en pantallas anchas */
@media (max-width: 899px) {
  .fx-light { display: none; }
}

/* Teléfonos bajos (iPhone SE): el panel de idiomas cede espacio al mundo */
@media (max-height: 640px) {
  .pair { display: none; }
  .panel { padding: var(--space-4) var(--space-5); }
}

/* ───────── Pantalla ancha ───────── */

@media (min-width: 900px) {
  .bar { padding-inline: max(var(--space-5), env(safe-area-inset-left, 0px)) max(var(--space-5), env(safe-area-inset-right, 0px)); }

  .map { top: auto; bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px)); right: max(var(--space-5), env(safe-area-inset-right, 0px)); flex-direction: column-reverse; }
  .map__btn { width: 148px; }

  .panel {
    left: max(var(--space-5), 5vw);
    right: auto;
    bottom: auto;
    top: 50%;
    width: min(440px, 36vw);
    max-width: none;
    margin-inline: 0;
    padding: var(--space-6);
    transform: translateY(-50%);
  }
  .panel h2 { font-size: 40px; line-height: 46px; }
  .panel p:not(.eyebrow) { font-size: 17px; line-height: 26px; }

  .peek__rail { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); overflow: visible; gap: var(--space-6); padding-inline: var(--space-5); align-items: start; }
  .peek__rail .shot { width: auto; }
  .peek__rail .shot:nth-child(2) { margin-top: var(--space-7); }
  .peek__head, .peek__note { padding-inline: var(--space-5); }
  .interior__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; }
  .interior__head { grid-column: 1; }
  .visit { grid-column: 2; grid-row: 1 / span 2; padding: var(--space-6); }
  .facts { grid-column: 1; }
}

/* ───────── Sin JavaScript: se lee en orden, sin mundo animado ───────── */

html:not(.js) .stage { position: static; height: auto; padding: var(--space-5) var(--space-4) 0; }
html:not(.js) .world { position: relative; width: min(92vw, 640px); height: auto; margin-inline: auto; }
html:not(.js) .world__img { width: 100%; height: auto; }
html:not(.js) .fx, html:not(.js) .fg, html:not(.js) .bar, html:not(.js) .map, html:not(.js) .welcome { display: none; }
html:not(.js) .deck { position: static; display: grid; gap: var(--space-4); padding: var(--space-5) var(--space-4); pointer-events: auto; }
html:not(.js) .panel { position: static; visibility: visible; opacity: 1; transform: none; width: auto; max-width: 520px; }
html:not(.js) .panel > * { opacity: 1; transform: none; }
html:not(.js) .leg:not(.leg--hero) { display: none; }
html:not(.js) .leg--hero { min-height: 0; padding-block: var(--space-6); }

/* ───────── Movimiento reducido: menos y más suave, nunca nada inalcanzable ───────── */

@media (prefers-reduced-motion: reduce) {
  .fx-ripple, .fx-glint, .petal { animation: none; opacity: 0; }
  .fg { display: none; }
  .panel > * { transform: none; }
  .welcome { transform: none; }
  .rise { transform: none; }
  .flip__face { transition-duration: 1ms; }
  .fab { transition-duration: 1ms; }
  .bar, .map { transition-duration: 1ms; }
}