/* Landing y página de privacidad de Pinguy. Misma marca que la app: Nunito, hielo, tinta fiordo y naranja pico. */
@font-face {
  font-family: Nunito;
  src: url(/fonts/nunito-latin.woff2) format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --sky: #bde4f5;
  --sky-2: #e6f5fc;
  --snow: #f7fcff;
  --ice: #bfe0f0;
  --ice-2: #86bcdc;
  --ink: #1e3a5f;
  --ink-soft: #35557c;
  /* Más oscuro que el naranja de la app: texto blanco sobre él llega a 4,8:1 (AA). */
  --orange: #c94620;
  --orange-deep: #9f3516;
  --teal: #2fa79a;
  --head: 64px;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); }
body {
  margin: 0;
  font-family: Nunito, ui-rounded, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky) 0, var(--sky-2) 120vh, var(--ice) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2 { margin: 0; }
p { margin: 0 0 1em; max-width: 34rem; }

:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--snow); padding: 8px 14px; border-radius: 10px; }
.skip:focus { left: 8px; }

/* Nieve cayendo detrás de todo (solo transform: no repinta). */
body::before {
  content: "";
  position: fixed;
  inset: -100% 0 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.8;
  background-image: radial-gradient(circle, #fff 0 2.5px, transparent 3.5px), radial-gradient(circle, #fff 0 1.8px, transparent 2.8px);
  background-size: 150px 190px, 95px 120px;
  background-position: 0 0, 45px 70px;
  animation: snowfall 30s linear infinite;
}
@keyframes snowfall { to { transform: translateY(50%); } }

/* --- Cabecera --- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--head);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  /* Alineada con el contenido del viaje (misma anchura máxima y mismo margen). */
  padding: 0 max(clamp(16px, 4vw, 48px), calc((100vw - 1360px) / 2 + clamp(16px, 4vw, 48px)));
  background: rgb(189 228 245 / 0.88);
  backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 1.5rem; }
.top-nav { display: flex; gap: 1.6rem; margin-left: auto; }
.top-nav a { text-decoration: none; font-weight: 800; font-size: 1rem; }
.top-nav a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.25em; text-decoration-color: var(--orange); }

/* --- Botones y enlaces --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 2.1rem;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.2rem;
  box-shadow: 0 6px 0 var(--orange-deep);
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--orange-deep); }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--orange-deep); }
.top .btn-small { margin-left: 0; min-height: 44px; padding: 0 1.2rem; font-size: 1rem; box-shadow: 0 4px 0 var(--orange-deep); }
.text-link { font-weight: 900; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.25em; text-decoration-color: var(--orange); }

/* --- Titulares "pegatina" (como en la app) --- */
.sticker {
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.06;
  -webkit-text-stroke: 0.1em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.07em 0 rgb(30 58 95 / 0.25);
}
h1.sticker { font-size: clamp(2.5rem, min(5.4vw, 8.2vh), 4.4rem); margin-bottom: 0.45em; max-width: 14em; }
h2.sticker { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 0.55em; max-width: 14em; }

/* --- El viaje: capítulos a la izquierda, Pinguy creciendo a la derecha --- */
.journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: clamp(24px, 4vw, 56px);
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}
.chapter {
  min-height: 92vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 2rem;
  padding: 9vh 0;
}
.chapter.hero { min-height: calc(100vh - var(--head)); padding: 4vh 0 7vh; gap: 1.2rem; }
.chapter.side { grid-template-columns: minmax(0, 26rem) 230px; align-items: center; column-gap: 2.5rem; }
.chapter-text > :last-child { margin-bottom: 0; }

.lead { font-size: 1.4rem; font-weight: 800; line-height: 1.45; }
.fine { font-size: 1rem; color: var(--ink-soft); }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.badges li {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.4rem; padding: 0 0.95rem; border-radius: 999px;
  background: var(--snow); color: var(--ink); font-weight: 900; font-size: 0.98rem;
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.12);
}
.badges li::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--teal);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin: 0.6rem 0 1.2rem; }

.pull { font-weight: 900; font-size: 1.3rem; line-height: 1.55; }
/* Subrayado marcador en vez de un filete lateral. */
.pull span { background: linear-gradient(transparent 58%, rgb(255 200 61 / 0.7) 58%); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.15em; }

.questions { list-style: none; counter-reset: q; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.6rem; max-width: 30rem; }
.questions li { counter-increment: q; display: flex; align-items: center; gap: 0.9rem; font-weight: 900; font-size: 1.2rem; }
.questions li::before {
  content: counter(q);
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 1.05rem;
}

/* --- Móviles con capturas reales --- */
.phone { margin: 0; width: 230px; }
.phone > img { display: block; width: 100%; border: 9px solid var(--ink); border-radius: 36px; background: var(--ink); box-shadow: 0 26px 40px -20px rgb(0 0 0 / 0.4); }
.phone figcaption { margin-top: 0.7rem; text-align: center; font-weight: 900; font-size: 1rem; }
.phones-pair { display: flex; gap: 1.4rem; align-items: flex-start; }
.phones-pair .phone { width: 220px; }
.phones-pair .phone:nth-child(2) { margin-top: 2.6rem; }

/* --- Panel fijo de Pinguy --- */
.stage {
  position: sticky;
  top: calc(var(--head) + 6vh);
  align-self: start;
  display: grid;
  justify-items: center;
  gap: 1rem;
  height: max-content;
}
.floe { position: relative; width: 100%; aspect-ratio: 1; }
.floe::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 8%;
  height: 24%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 0 var(--ice-2);
}
.pet { position: absolute; inset: 0; animation: bob 4.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.pet img { position: absolute; left: 0; bottom: 10%; width: 100%; height: auto; }

.grown { opacity: 0; transform: scale(0.82); transform-origin: 50% 90%; transition: opacity 0.3s var(--ease), transform 0.5s var(--ease); }
.stage[data-stage="1"] .s1,
.stage[data-stage="2"] .s2,
.stage[data-stage="3"] .s3,
.stage[data-stage="4"] .s4 { opacity: 1; transform: none; }
.egg-loop { position: absolute; inset: 0; transition: opacity 0.3s var(--ease); }
.stage:not([data-stage="0"]) .egg-loop { opacity: 0; }

/* El huevo que eclosiona, en bucle: el único movimiento de la página que no depende del scroll. */
.egg-loop img { opacity: 0; animation: 9s infinite steps(1, end); }
.egg-loop img:nth-child(1) { animation-name: f-idle; }
.egg-loop img:nth-child(2) { animation-name: f-rock; }
.egg-loop img:nth-child(3) { animation-name: f-crack1; }
.egg-loop img:nth-child(4) { animation-name: f-crack2; }
.egg-loop img:nth-child(5) { animation-name: f-hatch; }
@keyframes f-idle   { 0% { opacity: 1; } 30% { opacity: 0; } 95% { opacity: 1; } }
@keyframes f-rock { 0% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0; } }
@keyframes f-crack1 { 0% { opacity: 0; } 45% { opacity: 1; } 60% { opacity: 0; } }
@keyframes f-crack2 { 0% { opacity: 0; } 60% { opacity: 1; } 75% { opacity: 0; } }
@keyframes f-hatch  { 0% { opacity: 0; } 75% { opacity: 1; } 95% { opacity: 0; } }

.meter { width: 100%; max-width: 300px; }
.meter-text { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; font-weight: 800; font-size: 1rem; }
.meter-day { font-size: 2.4rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.meter-name { margin-left: auto; font-weight: 900; font-size: 1.2rem; }
/* Progreso animado con una propiedad registrada: solo repinta, no recalcula el layout. */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.bar {
  height: 12px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--teal) calc(var(--p) * 100%), rgb(30 58 95 / 0.14) 0);
  transition: --p 0.7s var(--ease);
}

/* --- Valores que se practican --- */
.values { padding: 10vh 0 12vh; }
.values-inner { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.values .lead { max-width: 36rem; margin-bottom: 2.2rem; }
.values-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 2.5rem; margin: 0; }
.values-list dt { display: flex; align-items: center; gap: 0.85rem; font-weight: 900; font-size: 1.3rem; line-height: 1.2; }
.values-list dd { margin: 0.5rem 0 0; max-width: 24rem; }
.v-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--teal); box-shadow: 0 4px 0 rgb(0 0 0 / 0.12); }

/* --- Familias --- */
.trust, .faq { padding: 12vh 5vw; }
.trust { background: var(--snow); border-radius: 50% 50% 0 0 / 60px 60px 0 0; }
.trust > *, .faq > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.trust h2, .faq h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.6rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4rem; margin-top: 0; margin-bottom: 1.6rem; }
.facts > div { padding: 1.1rem 0; border-top: 2px solid var(--ice); }
.facts dt { font-weight: 900; font-size: 1.2rem; }
.facts dd { margin: 0.15rem 0 0; color: var(--ink-soft); font-weight: 700; }

.faq { background: var(--snow); padding-top: 4vh; }
.faq details { border-top: 2px solid var(--ice); }
.faq details:last-of-type { border-bottom: 2px solid var(--ice); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; font-weight: 900; font-size: 1.2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.6rem; line-height: 1; color: var(--orange); transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.2rem; color: var(--ink-soft); max-width: 40rem; }

/* --- Cierre y pie --- */
.finale { display: grid; justify-items: center; gap: 1.6rem; padding: 12vh 5vw 14vh; text-align: center; background: var(--ink); }
.finale img { width: min(220px, 52vw); height: auto; }
.finale h2 { margin: 0; max-width: none; -webkit-text-stroke-color: var(--ink); }
.foot { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; justify-content: space-between; padding: 1.6rem clamp(16px, 4vw, 48px); background: #162d4a; color: #cfe3f1; font-size: 1rem; }
.foot p { margin: 0; }
.foot nav { display: flex; gap: 1.6rem; }

/* --- Privacidad (artículo legible) --- */
.legal { max-width: 46rem; margin: 0 auto; padding: 6vh clamp(16px, 4vw, 24px) 12vh; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; line-height: 1.1; margin-bottom: 0.4em; }
.legal h2 { font-size: 1.5rem; font-weight: 900; margin: 2.2rem 0 0.4rem; }
.legal p, .legal li { max-width: none; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.5rem; }
.legal .todo { background: var(--gold, #ffc83d); padding: 0 0.3em; border-radius: 6px; }
.legal .updated { color: var(--ink-soft); font-size: 1rem; }
.legal .sheet { background: var(--snow); border-radius: 28px; padding: 1.2rem 1.6rem 1.6rem; margin-top: 1.4rem; }
.legal .sheet h2:first-child { margin-top: 0.4rem; }

/* --- Pinguy con vida: parpadea, mira, salta al crecer, habla y reacciona al toque --- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.floe { cursor: pointer; }
.pet span.grown { position: absolute; left: 0; bottom: 10%; width: 100%; display: block; }
.pet span.grown svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 92%; animation: waddle 8s ease-in-out infinite; }
.grown .pg-eye { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
.grown .pg-pupil { transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px)); transition: transform 0.14s ease-out; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes waddle { 0%, 78%, 100% { transform: none; } 82% { transform: translateX(-8px) rotate(-4deg); } 88% { transform: translateX(8px) rotate(4deg); } 94% { transform: translateX(-3px) rotate(-1.5deg); } }

.pet.cheer { animation: hop 0.9s var(--ease); transform-origin: 50% 90%; }
@keyframes hop { 0% { transform: scale(1.08, 0.92); } 30% { transform: translateY(-46px) scale(0.95, 1.06); } 58% { transform: scale(1.08, 0.9); } 78% { transform: translateY(-12px); } 100% { transform: none; } }
.spark { position: absolute; left: 50%; top: 46%; z-index: 2; width: 18px; height: 18px; pointer-events: none; background: var(--gold, #ffc83d); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spark 0.9s var(--ease) forwards; }
@keyframes spark { from { opacity: 1; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(90deg); } }

.bubble { position: absolute; z-index: 3; right: -2%; top: 2%; max-width: 12.5rem; margin: 0; padding: 0.7rem 1rem; border-radius: 1.2rem; background: #fff; color: var(--ink); font-weight: 900; font-size: 1.05rem; line-height: 1.25; box-shadow: 0 5px 0 rgb(0 0 0 / 0.12); }
.bubble::after { content: ""; position: absolute; left: 20%; bottom: -9px; width: 18px; height: 18px; border-radius: 3px; background: #fff; transform: rotate(45deg); }
.bubble.pop { animation: bubble-in 0.35s var(--ease); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } }

.zzz { position: absolute; left: 58%; top: 20%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease); }
.stage[data-stage="0"] .zzz { opacity: 1; }
.zzz i { position: absolute; font-style: normal; font-weight: 900; font-size: 1.6rem; color: #fff; -webkit-text-stroke: 0.12em var(--ink); paint-order: stroke fill; opacity: 0; animation: zzz 3.6s infinite; }
.zzz i:nth-child(2) { font-size: 2rem; animation-delay: 1.2s; }
.zzz i:nth-child(3) { font-size: 2.5rem; animation-delay: 2.4s; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(36px, -56px) rotate(10deg); } }

/* --- Hero: ejemplos reales que rotan (niños y adultos) --- */
.today { margin: 0 0 1.3rem; font-weight: 900; font-size: 1.2rem; }
.today-label { margin-right: 0.35em; color: var(--ink-soft); font-weight: 800; }
.rot { display: inline-grid; vertical-align: top; }
.rot > span { grid-area: 1 / 1; opacity: 0; padding: 0 0.15em; background: linear-gradient(transparent 58%, rgb(255 200 61 / 0.7) 58%); animation: rot 15s infinite; animation-delay: calc(var(--i) * 3s); }
@keyframes rot { 0% { opacity: 0; transform: translateY(0.45em); } 3% { opacity: 1; transform: none; } 17% { opacity: 1; transform: none; } 20% { opacity: 0; transform: translateY(-0.45em); } 100% { opacity: 0; } }

/* --- Demo viva del problema: el móvil escribe, recibe una pista y termina en la historieta --- */
.demo-phone { width: 250px; }
.demo { padding: 9px; border-radius: 36px; background: var(--ink); box-shadow: 0 26px 40px -20px rgb(0 0 0 / 0.4); }
.demo-view { position: relative; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; border-radius: 27px; background: var(--sky); }
.demo-screen {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; transform: scale(var(--s, 0.55));
  display: flex; flex-direction: column; gap: 12px; padding: 16px 20px; color: var(--ink); font-size: 18px; line-height: 1.3; text-align: left;
  background: radial-gradient(130% 46% at 50% 100%, #f7fcff 0 62%, transparent 63%), linear-gradient(180deg, #bde4f5 0, #e6f5fc 34%, #d6ecf7 40%, #86bcdc 41%, #a8d2e8 50%, #bfe0f0 51%, #e1f0f9 100%);
}
.d-top { display: flex; align-items: center; justify-content: space-between; }
.d-back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / 0.85); }
.d-badge { padding: 8px 16px; border-radius: 999px; background: rgb(255 255 255 / 0.85); font-size: 14px; font-weight: 900; }
.d-dots { display: flex; gap: 6px; }
.d-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgb(255 255 255 / 0.7); transition: background 0.3s; }
.d-dots i.done { background: var(--teal); }
.d-dots i.cur { background: var(--orange); }
.d-row { display: flex; align-items: center; gap: 12px; }
.d-pet { flex: none; width: 96px; height: auto; }
.d-card { padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 5px 0 rgb(0 0 0 / 0.12); }
.d-card b { display: block; font-size: 16px; font-weight: 900; }
.d-card span { font-size: 14px; color: var(--ink-soft); }
.d-q { margin: 6px 4px 0; font-size: 26px; font-weight: 900; line-height: 1.15; }
.d-n { margin: -6px 4px 0; font-size: 14px; color: var(--ink-soft); }
.d-input { min-height: 112px; padding: 14px 16px; border: 3px solid var(--ice); border-radius: 24px; background: #fff; font-size: 20px; font-weight: 800; transition: border-color 0.2s; }
.d-input.focus { border-color: var(--orange); }
.d-input .caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: var(--ink); vertical-align: -0.15em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.d-fb { min-height: 104px; padding: 14px 16px; border-radius: 24px; font-size: 17px; opacity: 0; transform: translateY(8px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.d-fb.show { opacity: 1; transform: none; }
.d-fb.sense { background: rgb(47 167 154 / 0.22); }
.d-fb.improve { background: rgb(255 255 255 / 0.92); }
.d-fb b { display: block; font-size: 19px; font-weight: 900; }
.d-fb.improve b { font-size: 14px; color: var(--orange-deep); }
.d-fb small { display: block; margin-top: 6px; font-size: 12px; font-weight: 900; text-transform: none; color: var(--ink-soft); }
.d-btn { display: grid; place-items: center; height: 64px; margin-top: auto; border-radius: 999px; background: var(--orange); color: #fff; font-size: 22px; font-weight: 900; box-shadow: 0 6px 0 var(--orange-deep); transition: transform 0.1s, box-shadow 0.1s; }
.d-btn.press { transform: translateY(4px); box-shadow: 0 2px 0 var(--orange-deep); }
.d-main[hidden], .d-story[hidden] { display: none; }
.d-main { display: flex; flex: 1; flex-direction: column; gap: 12px; }
.d-story { display: flex; flex: 1; flex-direction: column; gap: 10px; }
.d-story h3 { margin: 4px 0 2px; font-size: 32px; text-align: center; }
.d-story .d-pet { align-self: center; }
.d-beat { display: flex; gap: 12px; padding: 12px 14px; border-radius: 22px; background: #fff; font-size: 16px; box-shadow: 0 5px 0 rgb(0 0 0 / 0.12); animation: beat 0.4s var(--ease) both; animation-delay: calc(var(--i) * 0.35s); }
.d-beat i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--teal); color: #fff; font-style: normal; font-size: 15px; font-weight: 900; }
@keyframes beat { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* La pregunta que se está respondiendo se ilumina en la lista. */
.questions li { transition: opacity 0.3s var(--ease); }
.demo-on .questions li { opacity: 0.45; }
.demo-on .questions li.on { opacity: 1; }
.demo-on .questions li.on::before { background: var(--orange); }

/* --- Pantallas medianas y móviles --- */
@media (max-width: 1100px) {
  .chapter.side { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .values-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .top-nav { display: none; }
  .top .btn-small { margin-left: auto; }
  .journey { display: flex; flex-direction: column; padding: 0; }
  .chapters { padding: 0 20px; }
  .chapter { min-height: 0; padding: 7vh 0; }
  .chapter.hero { min-height: calc(100svh - var(--head) - 72px); }
  /* El panel pasa a ser una barra fija: Pinguy pequeño + días + progreso. */
  .stage {
    order: -1;
    align-self: stretch;
    top: var(--head);
    z-index: 20;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 0 14px;
    padding: 6px 20px 8px;
    background: rgb(247 252 255 / 0.95);
    border-bottom: 2px solid rgb(30 58 95 / 0.1);
  }
  .floe { width: 76px; }
  .meter { max-width: none; }
  .phones-pair .phone { width: min(40vw, 200px); }
  .phones-pair { gap: 0.9rem; }
  .phone { width: min(58vw, 240px); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .values { padding: 6vh 20px 9vh; }
  .values-inner { padding: 0; }
  .values-list { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .trust { border-radius: 50% 50% 0 0 / 28px 28px 0 0; }
  .bubble, .zzz { display: none; }
  .floe { cursor: default; }
  .demo-phone { width: min(62vw, 250px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::before { animation: none; }
  .pet { animation: none; }
  .egg-loop img { animation: none; }
  .egg-loop img:nth-child(1) { opacity: 1; }
  .grown .pg-eye, .pet span.grown svg, .zzz i, .rot > span { animation: none; }
  .rot > span:first-child { opacity: 1; }
  .pet.cheer { animation: none; }
  .spark { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}