/* =========================================================
   Para ti — estilos
   Mobile-first, prioridad Safari iPhone.
   Solo se animan transform, opacity y (con moderación) filter.
   ========================================================= */

:root {
  /* Color */
  /* La hora azul: el cielo ya es azul y el horizonte todavía arde */
  --night: #0C1622;      /* fondo: azul de noche */
  --surface: #132133;    /* superficies elevadas */
  --surface-2: #1A2B40;
  --deep: #22405F;       /* azul profundo */
  --fern: #8AB0D6;       /* acento principal: su azul */
  --fog: #A7B6C6;        /* texto secundario */
  --paper: #EFE8DA;      /* blanco cálido */
  --ember: #E3AC73;      /* la luz cálida: velas, carta y amanecer */
  --line: rgba(239, 232, 218, 0.12);
  --line-strong: rgba(239, 232, 218, 0.22);

  /* Tipografía: fuentes nativas de Apple (New York + SF) sin descargas */
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --scene-in: 620ms;
  --scene-out: 360ms;

  /* Zonas seguras */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--night);
  color: var(--paper);
  overscroll-behavior: none;
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.noscript { padding: 48px 24px; text-align: center; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--fern); outline-offset: 4px; border-radius: 4px; }
[tabindex="-1"]:focus-visible { outline: none; }

/* ---------------------------------------------------------
   Contenedor de la app
   position: fixed evita el rebote de Safari y los saltos
   de altura al mostrarse/ocultarse las barras del navegador.
   --------------------------------------------------------- */
.app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, #16283C 0%, transparent 60%),
    var(--night);
  isolation: isolate;
  /* Sin zoom por doble toque; el zoom con dos dedos sigue disponible */
  touch-action: manipulation;
}

/* Grano de película y viñeta: dan aire de cine y no cuestan nada
   (capa estática, sin animación ni desenfoques) */
.app::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4, 9, 16, 0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  background-size: cover, 160px 160px;
}

/* Botón de música: discreto, siempre alcanzable */
.sound {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 30;
  top: calc(var(--safe-top) + 10px);
  right: calc(var(--safe-right) + 12px);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(19, 33, 51, 0.55);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0.75;
  transition: opacity 250ms ease, transform 160ms var(--ease-out);
  animation: fade-up 500ms var(--ease-out) both;
}
.sound:active { transform: scale(0.94); }
.sound svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound svg:first-child { fill: currentColor; stroke-width: 1.2; }
.sound__off { display: none; }
.sound[aria-pressed="false"] { opacity: 0.55; }
.sound[aria-pressed="false"] .sound__on { display: none; }
.sound[aria-pressed="false"] .sound__off { display: block; }

/* ---------------------------------------------------------
   Escenas
   --------------------------------------------------------- */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding:
    calc(var(--safe-top) + 22px)
    calc(var(--safe-right) + var(--gutter))
    calc(var(--safe-bottom) + 20px)
    calc(var(--safe-left) + var(--gutter));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  transition:
    opacity var(--scene-in) var(--ease-out),
    transform var(--scene-in) var(--ease-out),
    filter var(--scene-in) var(--ease-out),
    visibility 0s linear var(--scene-in);
}
.scene.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: 0s;
}
.scene.is-leaving {
  visibility: visible;
  opacity: 0;
  transform: scale(0.985);
  filter: blur(4px);
  transition:
    opacity var(--scene-out) ease,
    transform var(--scene-out) ease,
    filter var(--scene-out) ease,
    visibility 0s linear var(--scene-out);
}
.scene > * {
  width: 100%;
  max-width: 432px;
  margin-left: auto;
  margin-right: auto;
}

/* Capas de fondo a sangre: fuera del ancho máximo del contenido */
.scene > .fog,
.scene > .landscape {
  width: auto;
  max-width: none;
  margin: 0;
}

.scene__body {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  position: relative;
  z-index: 2;
}
.scene__body--center {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-bottom: 24px;
}

/* Botón de acción: aparece cuando la escena termina de contarse.
   Pegado abajo: en pantallas bajas el contenido se desplaza por debajo
   y el botón nunca queda fuera de la vista. */
.scene__action {
  position: sticky;
  bottom: 0;
  z-index: 3;
  flex: 0 0 auto;
  padding-top: 28px;
  display: flex;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  /* La barra nunca intercepta toques: solo su botón, y solo cuando está lista.
     Si no, taparía el contenido que queda debajo al estar pegada abajo. */
  pointer-events: none;
}
.scene__action button { pointer-events: none; }
.scene__action.is-ready button { pointer-events: auto; }
.scene__action::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--gutter));
  right: calc(-1 * var(--gutter));
  top: 0;
  bottom: calc(-1 * (var(--safe-bottom) + 20px));
  background: linear-gradient(180deg, rgba(12, 22, 34, 0) 0%, var(--night) 42%);
  pointer-events: none;
}
.scene--intro .scene__action::before,
.scene--reveal .scene__action::before { display: none; }
.scene__action.is-ready {
  opacity: 1;
  transform: none;
}

/* Escenas no visibles: sus animaciones en bucle no deben consumir */
.scene:not(.is-active):not(.is-leaving) *,
.scene:not(.is-active):not(.is-leaving) *::after {
  animation-play-state: paused !important;
}
.scene__action--row { gap: 10px; }
.scene__action--stack { flex-direction: column; align-items: center; gap: 12px; }

/* Escenas con interacción: la acción no ocupa sitio hasta completarla */
.scene--gated .scene__action:not(.is-ready) { display: none; }
.scene--gated .scene__action.is-ready { animation: fade-up 450ms var(--ease-out) both; }

/* Alternativa accesible: oculta a la vista hasta que hace falta,
   pero siempre alcanzable con lector de pantalla o teclado */
.alt-link {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: none;
  min-height: 44px;
  padding: 0 12px;
  color: var(--fog);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-decoration-color: rgba(167, 182, 198, 0.45);
  text-underline-offset: 4px;
  cursor: pointer;
  touch-action: manipulation;
}
.alt-link:not(.is-shown):not(:focus-visible) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0;
  margin: -1px !important;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.alt-link.is-shown { animation: fade-up 450ms var(--ease-out) both; }
.alt-link--floating {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 20px);
  color: var(--paper);
  text-shadow: 0 1px 10px rgba(6, 12, 20, 0.6);
}

/* Anillo de progreso (mantener pulsado / sensor) */
.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  overflow: visible;
}
.ring circle { fill: none; stroke-width: 2.5; }
.ring__track { stroke: var(--line-strong); }
.ring__bar { stroke: var(--paper); stroke-linecap: round; }

/* Curvas de nivel compartidas: trazo fino aunque se escalen */
#contour { vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------
   Tipografía
   --------------------------------------------------------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 8.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.lede {
  margin-top: 18px;
  color: var(--fog);
  font-size: 17px;
  max-width: 28ch;
  text-wrap: balance;
}
.kicker {
  color: var(--fern);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

/* ---------------------------------------------------------
   Botones
   --------------------------------------------------------- */
.btn {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  min-height: 54px;
  min-width: 200px;
  padding: 0 32px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--night);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 160ms var(--ease-out), opacity 200ms ease, background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { cursor: default; }
.btn--light { background: rgba(239, 232, 218, 0.94); }
.btn--ghost {
  min-width: 0;
  flex: 1;
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  letter-spacing: 0;
  font-weight: 500;
  padding: 0 14px;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { opacity: 0.92; }
}

/* ---------------------------------------------------------
   Utilidad: aparición de palabras / líneas
   --------------------------------------------------------- */
.word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  filter: blur(4px);
  animation: word-in var(--word-time, 520ms) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * var(--word-step, 45ms));
}
@keyframes word-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}

.line-in {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  filter: blur(6px);
  animation: word-in 700ms var(--ease-out) forwards;
}

/* ---------------------------------------------------------
   1 · INICIO
   --------------------------------------------------------- */
.scene--intro { background: transparent; }
.scene--intro .display { max-width: 11ch; }
.dedicatee {
  margin-bottom: 20px;
  color: var(--fern);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.fog {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fog i {
  position: absolute;
  width: 90%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138, 176, 214, 0.16), transparent);
  will-change: transform;
}
.fog i:nth-child(1) { top: 10%; left: -10%; animation: drift 22s ease-in-out infinite alternate; }
.fog i:nth-child(2) {
  bottom: 12%; right: -20%;
  background: radial-gradient(closest-side, rgba(227, 172, 115, 0.07), transparent);
  animation: drift 28s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(-6%, 0, 0); }
  to   { transform: translate3d(8%, -4%, 0); }
}

.scene--intro .dedicatee,
.scene--intro .display,
.scene--intro .lede {
  opacity: 0;
  animation: word-in 1100ms var(--ease-out) forwards;
}
.scene--intro .dedicatee { animation-delay: 100ms; }
.scene--intro .display { animation-delay: 350ms; }
.scene--intro .lede { animation-delay: 900ms; }
.scene--intro .scene__action.is-ready {
  opacity: 0;
  animation: fade-up 800ms var(--ease-out) 1500ms forwards;
}
@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

.hold {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 84px;
  height: 84px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 200ms var(--ease-out);
}
.hold.is-pressing { transform: scale(0.95); }
/* Halo que invita a tocar; desaparece al pulsar */
.hold::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(239, 232, 218, 0.4);
  animation: halo 2.6s var(--ease-out) infinite;
  pointer-events: none;
}
.hold.is-pressing::before,
.hold.is-complete::before { animation: none; opacity: 0; }
@keyframes halo {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.4); }
}
.hold__core {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  box-shadow: 0 12px 30px -12px rgba(239, 232, 218, 0.45);
}
.hold__core svg { width: 22px; height: 22px; fill: var(--night); }
.hold.is-complete .hold__core { animation: pop 420ms var(--ease-out); }
@keyframes pop {
  0%   { transform: scale(1.14); }
  45%  { transform: scale(1.26); }
  100% { transform: scale(1.14); }
}
.hold__label {
  min-height: 1.45em;
  font-size: 14px;
  color: var(--fog);
  text-align: center;
}

/* ---------------------------------------------------------
   2 · RAKSO AI
   --------------------------------------------------------- */
.assistant {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 2;
}
.assistant__name {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.assistant__status { font-size: 13px; color: var(--fog); }

.orb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background:
    radial-gradient(circle at 32% 30%, rgba(239, 232, 218, 0.9), transparent 42%),
    radial-gradient(circle at 70% 75%, rgba(227, 172, 115, 0.55), transparent 55%),
    radial-gradient(circle at 50% 50%, var(--fern), var(--deep));
  box-shadow: 0 0 0 1px var(--line), 0 8px 24px -8px rgba(138, 176, 214, 0.6);
  animation: breathe 3.6s ease-in-out infinite;
}
.orb.is-thinking { animation-duration: 1.4s; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}

.chat {
  gap: 22px;
  padding-top: 32px;
  justify-content: flex-start;
}
.msg {
  /* Jarvis habla despacio: se lee mientras aparece */
  --word-step: 115ms;
  --word-time: 620ms;
  font-family: var(--serif);
  font-size: clamp(23px, 6.6vw, 27px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.msg--muted { color: var(--fog); }

.typing {
  display: inline-flex;
  gap: 6px;
  padding: 12px 0;
}
.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fog);
  opacity: 0.35;
  animation: dot 1s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 150ms; }
.typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes dot {
  0%, 100% { opacity: 0.25; transform: translate3d(0, 0, 0); }
  40% { opacity: 0.9; transform: translate3d(0, -3px, 0); }
}

/* ---------------------------------------------------------
   3 · ANÁLISIS
   --------------------------------------------------------- */
.meters {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.meter {
  opacity: 0.28;
  transition: opacity 400ms ease;
}
.meter.is-running, .meter.is-done { opacity: 1; }
.meter__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
}
.meter__label { color: var(--fog); }
.meter__value {
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
  white-space: nowrap;
}
.meter.is-done .meter__value { opacity: 1; transform: none; }
.meter__track {
  margin-top: 10px;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--deep), var(--fern));
  transform: scaleX(0);
  transform-origin: left;
}

.diagnosis {
  margin-top: 32px;
  padding: 22px 22px 20px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(0.98);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.diagnosis.is-visible { opacity: 1; transform: none; }
.diagnosis__label { font-size: 13px; color: var(--fern); font-weight: 600; }
.diagnosis__text {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: clamp(24px, 7vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.diagnosis__note { margin-top: 12px; font-size: 14px; color: var(--fog); }

.sensor-area {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: opacity 320ms ease, transform 320ms var(--ease-out);
}
.sensor-area.is-leaving { opacity: 0; transform: scale(0.96); }
.sensor {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 124px;
  height: 124px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #1B2E44, var(--surface));
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 200ms var(--ease-out);
}
.sensor.is-pressing { transform: scale(0.96); }
.ring--sensor {
  inset: -9px auto auto -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
}
.sensor__lines {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: var(--fern);
  stroke-width: 1.5;
  opacity: 0.45;
  transition: opacity 300ms ease;
}
.sensor.is-pressing .sensor__lines,
.sensor.is-complete .sensor__lines { opacity: 0.95; }
.sensor__ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(138, 176, 214, 0.6);
  opacity: 0;
  pointer-events: none;
}
.sensor.is-pressing .sensor__ripple { animation: ripple 1.1s var(--ease-out) infinite; }
@keyframes ripple {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.45); }
}
.sensor__hint {
  min-height: 1.45em;
  font-size: 14px;
  color: var(--fog);
  text-align: center;
}

/* ---------------------------------------------------------
   4 · EQUIPO — tocar cada tarjeta para confirmar
   --------------------------------------------------------- */
.team__hint {
  margin-top: 20px;
  min-height: 1.45em;
  font-size: 14px;
  color: var(--fog);
}
.team__hint.is-complete {
  color: var(--fern);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: fade-up 400ms var(--ease-out) both;
}

.crew {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.crew li + li .member { border-top: 1px solid var(--line); }

.member {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out), background-color 300ms ease;
}
.member.is-visible { opacity: 1; transform: none; }
.member.is-visible:active { transform: scale(0.98); transition-duration: 120ms; }
.member.is-confirmed { background-color: rgba(138, 176, 214, 0.07); cursor: default; }

.avatar {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 21px;
  color: var(--paper);
  background: linear-gradient(145deg, var(--deep), #1D3350);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--dog { background: linear-gradient(145deg, #2A3B52, #1B2B3E); }
.member--dog .avatar { width: 62px; height: 62px; }
.avatar svg { width: 22px; height: 22px; fill: var(--paper); opacity: 0.85; }

.member__info { flex: 1; min-width: 0; display: block; }
.member__name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
/* El texto del perro aparece al confirmarlo; su espacio está reservado (sin saltos) */
.member__roles {
  display: block;
  margin-top: 2px;
  opacity: 0;
  transition: opacity 450ms ease 150ms;
}
.member.is-confirmed .member__roles { opacity: 1; }
.member__role { display: block; font-size: 14px; color: var(--fog); line-height: 1.35; }

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fog);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: color 250ms ease, box-shadow 250ms ease;
}
.stamp__check {
  display: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.member.is-confirmed .stamp {
  color: var(--fern);
  box-shadow: inset 0 0 0 1px rgba(138, 176, 214, 0.5);
  animation: stamp-in 380ms var(--ease-out);
}
.member.is-confirmed .stamp__check { display: block; }
@keyframes stamp-in {
  from { opacity: 0.4; transform: scale(1.2) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   5 · PISTAS — mazo de tarjetas (toque o deslizar hacia arriba)
   --------------------------------------------------------- */
.clues__hint {
  margin-bottom: 26px;
  font-size: 14px;
  color: var(--fog);
  transition: opacity 400ms ease;
}
.clues__hint.is-faded { opacity: 0; }

.clues-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 230px;
}
.clues-stage > * { grid-area: 1 / 1; }

.deck {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 3 / 2;
}
.clue-card {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 24px;
  background: linear-gradient(160deg, #1B3048 0%, #132236 100%);
  box-shadow: inset 0 0 0 1px var(--line), 0 24px 40px -24px rgba(0, 0, 0, 0.85);
  /* Profundidad del mazo: las siguientes asoman por debajo */
  transform: translate3d(0, calc(var(--depth, 0) * 12px), 0) scale(calc(1 - var(--depth, 0) * 0.05));
  opacity: calc(1 - var(--depth, 0) * 0.3);
  transition: transform 450ms var(--ease-out), opacity 450ms ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.clue-card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: inherit;
  transition: opacity 380ms ease, transform 500ms var(--ease-out), filter 380ms ease;
}
.clue-card__index { font-size: 13px; font-weight: 600; color: var(--fern); }
.clue-card__cta { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fog); }
.clue-card__cta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clue-card:not([inert]) .clue-card__cta svg { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -3px, 0); }
}
.clue-card__face--word {
  font-family: var(--serif);
  font-size: clamp(34px, 10vw, 44px);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.98);
  filter: blur(6px);
}
.clue-card.is-flipped .clue-card__face--back { opacity: 0; transform: translate3d(0, -8px, 0); filter: blur(4px); }
.clue-card.is-flipped .clue-card__face--word { opacity: 1; transform: none; filter: none; }
.clue-card.is-gone {
  opacity: 0;
  transform: translate3d(0, -36px, 0) scale(0.94);
  transition: transform 320ms var(--ease-out), opacity 260ms ease;
  pointer-events: none;
}

.clue-trail {
  margin-top: 34px;
  min-height: 1.45em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--fog);
}
.clue-trail li { animation: fade-up 400ms var(--ease-out) both; }

.clues-final { display: flex; flex-direction: column; align-items: center; }
.clues-final__word {
  font-family: var(--sans);
  font-size: clamp(34px, 11.5vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.2em;
  margin-right: -0.2em; /* compensa el tracking para centrar */
  text-shadow: 0 0 40px rgba(138, 176, 214, 0.35);
  opacity: 0;
  transform: scale(1.1);
  filter: blur(12px);
  transition: opacity 1200ms var(--ease-out), transform 1600ms var(--ease-out), filter 1200ms var(--ease-out);
}
.clues-final__rule {
  display: block;
  margin-top: 20px;
  width: 64px;
  height: 1px;
  background: var(--fern);
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out) 600ms;
}
.clues-final.is-in .clues-final__word { opacity: 1; transform: none; filter: none; }
.clues-final.is-in .clues-final__rule { transform: scaleX(1); }

/* ---------------------------------------------------------
   6 · LOCALIZANDO — brújula
   --------------------------------------------------------- */
.compass {
  position: relative;
  width: min(70vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(138, 176, 214, 0.08), transparent);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.compass.is-found { cursor: default; }
.compass__face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.compass__rim { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.compass__contours { fill: none; stroke: rgba(138, 176, 214, 0.24); }
.compass__ticks line { stroke: rgba(239, 232, 218, 0.28); stroke-width: 1; stroke-linecap: round; }
.compass__zone {
  fill: none;
  stroke: var(--fern);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.35;
  transition: opacity 400ms ease;
}
.compass.is-found .compass__zone { opacity: 1; }

.compass__needle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: transform 700ms var(--ease-out);
}
.compass__needle > span {
  position: absolute;
  left: calc(50% - 1.5px);
  top: 25%;
  bottom: 50%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to top, rgba(239, 232, 218, 0.15), var(--paper));
  transform-origin: 50% 100%;
}
.compass__needle > span::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 16px rgba(239, 232, 218, 0.5);
}
.compass.is-hinting .compass__needle > span { animation: needle-hint 1.6s var(--ease-in-out) 2; }
@keyframes needle-hint {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(12deg); }
  60% { transform: rotate(-7deg); }
}
.compass__hub {
  position: absolute;
  left: calc(50% - 7px);
  top: calc(50% - 7px);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--night);
  box-shadow: 0 0 0 2px var(--paper);
  pointer-events: none;
}
.compass__north {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: calc(16% - 22px);
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fern);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 300ms ease;
}
.compass.is-found .compass__north { color: var(--paper); }
.compass__north::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--fern);
  opacity: 0;
}
.compass.is-found .compass__north::after { animation: ping 1.8s var(--ease-out) 200ms 3; }
@keyframes ping {
  from { opacity: 0.8; transform: scale(0.7); }
  to   { opacity: 0; transform: scale(2); }
}

.locate__status {
  margin-top: 30px;
  min-height: 1.45em;
  font-size: 15px;
  color: var(--fog);
}
.locate__status.is-signal {
  color: var(--fern);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: fade-up 400ms var(--ease-out) both;
}
.locate__result {
  margin-top: 16px;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.locate__result.is-visible { opacity: 1; transform: none; }
.locate__lat {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.locate__region {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  color: var(--fern);
}
.locate__found { margin-top: 12px; font-size: 15px; color: var(--fog); }

/* ---------------------------------------------------------
   7 · REVELACIÓN  (el momento memorable)
   --------------------------------------------------------- */
.scene--reveal {
  padding-top: calc(var(--safe-top) + 22px);
  /* Entrada propia: se abre como una rendija de luz */
  transform: none;
  filter: none;
  clip-path: inset(49.5% 0 49.5% 0);
  transition:
    opacity 300ms ease,
    clip-path 1500ms var(--ease-in-out),
    visibility 0s linear 1500ms;
}
.scene--reveal.is-active {
  clip-path: inset(0 0 0 0);
  transition:
    opacity 300ms ease,
    clip-path 1500ms var(--ease-in-out) 150ms,
    visibility 0s;
}

/* Al salir, la revelación se funde sin volver a cerrarse en rendija */
.scene--reveal.is-leaving {
  clip-path: inset(0 0 0 0);
  transition: opacity var(--scene-out) ease, visibility 0s linear var(--scene-out);
}

.landscape {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #101E30;
}
.landscape > * { position: absolute; inset: 0; }

.landscape__photo {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 600ms ease;
}
.landscape.has-photo .landscape__photo { opacity: 1; }
.landscape.has-photo .landscape__sky,
.landscape.has-photo .ridge,
.landscape.has-photo .mist { display: none; }

/* Cielo al amanecer: el único punto cálido de toda la app */
.landscape__sky {
  background:
    radial-gradient(90% 40% at 50% 62%, rgba(227, 172, 115, 0.38), transparent 70%),
    linear-gradient(180deg, #081222 0%, #122A45 34%, #2E5473 56%, #9A7F63 72%, #16253A 100%);
}

.ridge { will-change: transform; }
.ridge--far {
  top: 40%;
  background: linear-gradient(180deg, #5E7468 0%, #3E5449 60%);
  clip-path: polygon(0.0% 30.7%, 3.1% 33.3%, 6.2% 31.6%, 9.4% 27.6%, 12.5% 24.9%, 15.6% 24.9%, 18.8% 25.9%, 21.9% 25.2%, 25.0% 23.2%, 28.1% 22.2%, 31.2% 24.0%, 34.4% 27.0%, 37.5% 27.7%, 40.6% 24.2%, 43.8% 18.6%, 46.9% 14.3%, 50.0% 12.5%, 53.1% 11.5%, 56.2% 9.1%, 59.4% 6.1%, 62.5% 5.5%, 65.6% 8.8%, 68.8% 14.5%, 71.9% 18.6%, 75.0% 19.4%, 78.1% 18.4%, 81.2% 18.5%, 84.4% 20.3%, 87.5% 21.8%, 90.6% 21.0%, 93.8% 18.9%, 96.9% 18.7%, 100.0% 22.3%, 100% 100%, 0 100%);
  opacity: 0.85;
}
.ridge--mid {
  top: 56%;
  background: linear-gradient(180deg, #33493E 0%, #22342C 70%);
  clip-path: polygon(0.0% 26.1%, 3.1% 25.1%, 6.2% 23.7%, 9.4% 23.7%, 12.5% 25.5%, 15.6% 26.8%, 18.8% 25.2%, 21.9% 20.8%, 25.0% 16.3%, 28.1% 13.9%, 31.2% 13.5%, 34.4% 13.2%, 37.5% 11.9%, 40.6% 11.0%, 43.8% 12.6%, 46.9% 17.0%, 50.0% 21.5%, 53.1% 23.4%, 56.2% 22.7%, 59.4% 21.6%, 62.5% 22.1%, 65.6% 23.7%, 68.8% 24.3%, 71.9% 23.2%, 75.0% 22.2%, 78.1% 23.7%, 81.2% 27.8%, 84.4% 31.9%, 87.5% 33.3%, 90.6% 32.0%, 93.8% 30.0%, 96.9% 29.1%, 100.0% 28.4%, 100% 100%, 0 100%);
}
.ridge--near {
  top: 70%;
  background: linear-gradient(180deg, #16283C 0%, #0C1622 60%);
  clip-path: polygon(0.0% 18.3%, 3.1% 15.1%, 6.2% 13.6%, 9.4% 14.4%, 12.5% 16.1%, 15.6% 17.1%, 18.8% 17.5%, 21.9% 18.6%, 25.0% 21.1%, 28.1% 23.9%, 31.2% 25.1%, 34.4% 24.1%, 37.5% 22.4%, 40.6% 21.9%, 43.8% 23.1%, 46.9% 24.5%, 50.0% 25.0%, 53.1% 24.8%, 56.2% 25.5%, 59.4% 27.5%, 62.5% 29.7%, 65.6% 30.1%, 68.8% 28.1%, 71.9% 25.1%, 75.0% 22.9%, 78.1% 21.9%, 81.2% 20.9%, 84.4% 19.0%, 87.5% 16.8%, 90.6% 16.1%, 93.8% 17.5%, 96.9% 19.7%, 100.0% 20.7%, 100% 100%, 0 100%);
}
.mist {
  top: 48%;
  height: 34%;
  left: -25%;
  right: -25%;
  background:
    radial-gradient(60% 50% at 30% 50%, rgba(226, 234, 242, 0.26), transparent 70%),
    radial-gradient(50% 40% at 78% 60%, rgba(226, 234, 242, 0.18), transparent 70%);
  animation: mist 18s ease-in-out infinite alternate;
}
@keyframes mist {
  from { transform: translate3d(-6%, 0, 0); }
  to   { transform: translate3d(6%, -3%, 0); }
}
.fog-canvas {
  z-index: 5;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 500ms ease;
}
.fog-canvas.is-clearing {
  opacity: 0 !important;
  transform: scale(1.08);
  transition: opacity 1200ms ease, transform 1400ms var(--ease-out);
}
.fog-canvas.is-gone { display: none; }
.fog-hint {
  position: absolute;
  z-index: 6;
  top: 50%;
  left: 0;
  right: 0;
  width: max-content !important;
  max-width: calc(100% - 48px) !important;
  margin: 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(12, 22, 34, 0.55);
  text-align: center;
  font-size: 15px;
  color: var(--paper);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 500ms ease, transform 500ms var(--ease-out);
}
.fog-hint.is-visible { opacity: 1; transform: none; }
.scene--reveal .scene__body { pointer-events: none; }

.landscape__shade {
  background:
    linear-gradient(180deg, rgba(6, 12, 20, 0.55) 0%, rgba(6, 12, 20, 0) 30%, rgba(6, 12, 20, 0) 55%, rgba(6, 12, 20, 0.85) 100%);
}
.landscape.has-photo .landscape__shade {
  background:
    linear-gradient(180deg, rgba(6, 12, 20, 0.78) 0%, rgba(6, 12, 20, 0.3) 30%, rgba(6, 12, 20, 0.32) 52%, rgba(6, 12, 20, 0.92) 100%);
}

/* Movimiento de cámara al abrirse */
.scene--reveal .landscape__sky,
.scene--reveal .landscape__photo { transform: scale(1.14); transition: transform 3600ms var(--ease-out); }
.scene--reveal .ridge--far  { transform: translate3d(0, 8%, 0);  transition: transform 3200ms var(--ease-out) 200ms; }
.scene--reveal .ridge--mid  { transform: translate3d(0, 16%, 0); transition: transform 3000ms var(--ease-out) 250ms; }
.scene--reveal .ridge--near { transform: translate3d(0, 26%, 0); transition: transform 2800ms var(--ease-out) 300ms; }
.scene--reveal.is-active .landscape__sky,
.scene--reveal.is-active .landscape__photo,
.scene--reveal.is-active .ridge { transform: none; }

.sparks {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease;
}
.scene--reveal.is-lit .sparks { opacity: 1; }
.sparks i {
  position: absolute;
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 10px rgba(227, 172, 115, 0.9);
  opacity: 0;
}
.scene--reveal.is-lit .sparks i {
  animation: rise var(--dur, 9s) linear infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes rise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(var(--drift, 20px), -78vh, 0) scale(1); }
}

.scene__body--reveal {
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding-top: 11vh;
}
.reveal__place {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 18vw, 84px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 30px rgba(6, 12, 20, 0.35);
}
.reveal__place .char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.18em, 0);
  filter: blur(10px);
  animation: char-in 1400ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes char-in {
  to { opacity: 1; transform: none; filter: blur(0); }
}
.reveal__region {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: rgba(239, 232, 218, 0.86);
  opacity: 0;
  transition: opacity 1200ms ease;
}
.reveal__region.is-visible { opacity: 1; }

.reveal__lines {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--serif);
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.25;
}
.reveal__lines li:first-child { font-size: 0.8em; color: rgba(239, 232, 218, 0.8); margin-bottom: 8px; }

/* ---------------------------------------------------------
   8 · REGALO
   --------------------------------------------------------- */
.scene--gift .scene__body { padding-top: 16px; }

.envelope {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: auto 0;
  perspective: 900px;
}
.envelope__card {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
  padding: 0 0 22px;
  border-radius: 24px;
  overflow: hidden;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(227, 172, 115, 0.16), transparent 55%),
    linear-gradient(160deg, #22405F 0%, #152740 100%);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  transform-origin: 50% 100%;
  transition: transform 450ms var(--ease-out), opacity 400ms ease;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.envelope__card:active { transform: scale(0.985); }
.envelope__card { transform-style: preserve-3d; }
.envelope__flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 62%;
  transform-origin: 50% 0;
  transition: transform 750ms var(--ease-in-out);
  fill: rgba(12, 22, 34, 0.3);
  stroke: rgba(239, 232, 218, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.envelope__flap path { vector-effect: non-scaling-stroke; }
.envelope__seal {
  position: absolute;
  left: 50%;
  top: 47.5%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ember);
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.6), inset 0 0 0 3px rgba(255, 255, 255, 0.14);
}
.envelope__seal svg { width: 20px; height: 20px; fill: rgba(12, 22, 34, 0.72); }
.envelope__title {
  font-family: var(--serif);
  font-size: clamp(24px, 7vw, 28px);
  letter-spacing: -0.01em;
}
.envelope__hint { font-size: 13px; color: var(--fog); }
.envelope__open { flex: none; min-width: 160px; }
/* Primero se abre la solapa; después el sobre se aparta */
.envelope.is-opening .envelope__flap { transform: rotateX(-172deg); }
.envelope.is-opening .envelope__seal { opacity: 0; transition: opacity 260ms ease; }
.envelope.is-opening .envelope__card {
  opacity: 0;
  transform: translate3d(0, -70px, 0) scale(0.96);
  transition: transform 620ms var(--ease-in-out) 480ms, opacity 500ms ease 560ms;
}
.envelope.is-opening .envelope__open { opacity: 0; transition: opacity 200ms ease; }

.pass {
  position: relative;
  border-radius: 26px;
  color: var(--night);
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 60px -30px rgba(0, 0, 0, 0.7),
    0 12px 24px -16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate3d(0, 40px, 0) rotateX(12deg) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-drawer);
}
.pass.is-visible { opacity: 1; transform: none; }

.pass__top {
  padding: 22px 22px 20px;
  border-radius: 26px 26px 0 0;
  color: var(--paper);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(227, 172, 115, 0.22), transparent 55%),
    linear-gradient(160deg, #22405F 0%, #152740 100%);
}
.pass__brand { display: flex; align-items: center; gap: 10px; }
.pass__mark { width: 22px; height: 22px; fill: var(--fern); }
.pass__title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.pass__field--hero { margin-top: 28px; }
.pass__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(12, 22, 34, 0.52);
  letter-spacing: 0.02em;
}
.pass__top .pass__label { color: rgba(239, 232, 218, 0.6); }
.pass__value {
  margin-top: 3px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pass__value--xl {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 8.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.pass__value--ok { color: #2E6B4E; letter-spacing: 0.06em; }

/* Troquel con muescas laterales */
.pass__tear {
  position: relative;
  height: 24px;
  margin: 0 -1px;
  background:
    radial-gradient(circle at 0 50%, var(--night) 11.5px, transparent 12px),
    radial-gradient(circle at 100% 50%, var(--night) 11.5px, transparent 12px),
    var(--paper);
}
.pass__tear::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  border-top: 1.5px dashed rgba(12, 22, 34, 0.18);
}

.pass__bottom {
  padding: 8px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pass__travellers { margin-top: 4px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.pass__travellers li { overflow-wrap: anywhere; }
/* La duración es corta y la fecha larga: cada columna ocupa lo que necesita */
.pass__grid { display: grid; grid-template-columns: auto 1fr; gap: 16px 32px; }
.pass__status { padding-top: 16px; border-top: 1px solid rgba(12, 22, 34, 0.1); }

.letter {
  margin-top: 36px;
  padding: 0 4px 8px;
}
.letter__lines p {
  font-family: var(--serif);
  font-size: clamp(21px, 6vw, 24px);
  line-height: 1.38;
  letter-spacing: -0.005em;
}
.letter__lines p + p { margin-top: 6px; }
.letter__lines p span {
  display: inline-block;
  clip-path: inset(0 100% -0.2em 0);
  animation: write 1100ms var(--ease-out) forwards;
}
@keyframes write {
  to { clip-path: inset(0 0 -0.2em 0); }
}
.letter__sign {
  margin-top: 22px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 23px;
  color: var(--ember);
  opacity: 0;
  transition: opacity 900ms ease;
}
.letter__sign.is-visible { opacity: 1; }

/* ---------------------------------------------------------
   HUB
   --------------------------------------------------------- */
.hub {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tile {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  text-align: left;
  min-height: 136px;
  padding: 16px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.tile:active { transform: scale(0.97); background: var(--surface-2); }
.hub__item { display: flex; }
.hub__item > .tile { flex: 1; }
.tile__icon { font-size: 26px; line-height: 1; }
.tile__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; display: block; }
.tile__soon { font-size: 13px; color: var(--fog); display: block; margin-top: 2px; }

/* Toast */
.toast {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 96px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 30px -12px rgba(0, 0, 0, 0.6);
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(-50%, 12px, 0);
  transition: opacity 200ms ease, transform 300ms var(--ease-out);
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ---------------------------------------------------------
   Fotografías: galería, alojamiento, recuerdo y visor
   --------------------------------------------------------- */
.gallery { width: 100%; }
.gallery__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 22px;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
  aspect-ratio: var(--shot, 4 / 5);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery__nav {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gallery__arrow {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 250ms ease, transform 160ms var(--ease-out);
}
.gallery__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gallery__arrow:active { transform: scale(0.94); }
.gallery__arrow[disabled] { opacity: 0.25; cursor: default; }
.gallery__dots { display: flex; align-items: center; gap: 2px; }
.gallery__dot {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 44px;
  border: 0;
  padding: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
}
.gallery__dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color 250ms ease, transform 250ms var(--ease-out);
}
.gallery__dot[aria-current="true"]::before { background: var(--paper); transform: scale(1.3); }

/* 8 · ALOJAMIENTO */
.scene--house .scene__body { justify-content: center; padding-top: 16px; }
.house__lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--serif);
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.house__gallery {
  margin-top: 30px;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.house__gallery.is-in { opacity: 1; transform: none; }
.house__gallery .kicker { margin-bottom: 12px; }

/* Recuerdo junto a la dedicatoria */
.memory {
  margin: 0 0 26px;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 26px 50px -30px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.98);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
}
.memory.is-visible { opacity: 1; transform: none; }
.memory img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Visor de galerías del hub */
.viewer {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--safe-top) + 16px)
    calc(var(--safe-right) + 20px)
    calc(var(--safe-bottom) + 20px)
    calc(var(--safe-left) + 20px);
  background: rgba(8, 14, 12, 0.9);
  /* Si el panel no cabe (pantallas bajas), el visor se desplaza:
     el botón de cerrar siempre queda alcanzable */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 260ms ease;
}
.viewer.is-open { opacity: 1; }
.viewer__panel {
  width: 100%;
  max-width: 432px;
  margin: auto 0;
  transform: scale(0.97);
  transition: transform 320ms var(--ease-out);
}
.viewer.is-open .viewer__panel { transform: none; }
.viewer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.viewer__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 6.4vw, 26px);
  letter-spacing: -0.01em;
}
.viewer__close {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: rgba(239, 232, 218, 0.1);
  color: var(--paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.viewer__close:active { transform: scale(0.94); }
.viewer__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.viewer .gallery__slide { --shot: 3 / 4; }


/* ---------------------------------------------------------
   Velas, firma y maleta
   --------------------------------------------------------- */
.candles {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.candles__row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 26px;
  height: 92px;
  touch-action: none; /* solo aquí: alrededor se sigue desplazando */
  user-select: none;
  -webkit-user-select: none;
}
.candle {
  position: relative;
  width: 14px;
  height: 56px;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, #F3EDE1 0%, #D9D2C4 60%, #C4BCAC 100%);
  box-shadow: inset -2px 0 3px rgba(12, 22, 34, 0.18);
}
.candle::before { /* mecha */
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 2px;
  height: 7px;
  margin-left: -1px;
  border-radius: 1px;
  background: #4A423A;
}
.candle__flame {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 14px;
  height: 22px;
  margin: 0 0 4px -7px;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(60% 55% at 50% 72%, #FFF6DC 0%, var(--ember) 45%, rgba(227, 172, 115, 0) 72%);
  box-shadow: 0 0 22px rgba(227, 172, 115, 0.55);
  transform-origin: 50% 100%;
  animation: flicker 1.6s ease-in-out infinite alternate;
  transition: opacity 260ms ease, transform 320ms var(--ease-out);
}
@keyframes flicker {
  from { transform: scale(1) rotate(-2deg); opacity: 0.92; }
  to   { transform: scale(1.06) rotate(2deg); opacity: 1; }
}
.candle__smoke {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 8px;
  height: 8px;
  margin: 0 0 8px -4px;
  border-radius: 50%;
  background: rgba(226, 234, 242, 0.35);
  opacity: 0;
  pointer-events: none;
}
.candle.is-out .candle__flame {
  opacity: 0;
  transform: scale(0.4);
  animation: none;
}
.candle.is-out .candle__smoke { animation: smoke 1.4s var(--ease-out) forwards; }
@keyframes smoke {
  0%   { opacity: 0.5; transform: translate3d(0, 0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate3d(6px, -34px, 0) scale(2.2); }
}
.candles__text {
  margin-top: 16px;
  min-height: 1.6em;
  font-family: var(--serif);
  font-size: clamp(20px, 5.6vw, 24px);
  color: var(--paper);
}
.candles__text.is-wish { color: var(--ember); }
.candles [data-candles-blow] { margin-top: 6px; }

/* Cielo estrellado al pedir el deseo */
.nightfall {
  /* Fija a la pantalla: la carta se desplaza y el cielo se queda */
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(8, 16, 30, 0.9) 0%, rgba(8, 16, 30, 0.55) 55%, rgba(8, 16, 30, 0.2) 100%);
  transition: opacity 1600ms ease;
}
.scene--gift.is-night .nightfall { opacity: 1; }
.nightfall i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--paper);
  opacity: 0;
  box-shadow: 0 0 8px rgba(239, 232, 218, 0.9);
}
.scene--gift.is-night .nightfall i {
  animation: twinkle 4.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * 170ms);
}
@keyframes twinkle {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}
.nightfall__shot {
  position: absolute;
  top: 18%;
  left: -20%;
  width: 120px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(239, 232, 218, 0) 0%, rgba(239, 232, 218, 0.95) 85%, rgba(239, 232, 218, 0) 100%);
  opacity: 0;
  transform: rotate(18deg);
}
.scene--gift.is-night .nightfall__shot { animation: shooting 2.6s var(--ease-out) 900ms 2; }
@keyframes shooting {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(18deg); }
  12%  { opacity: 1; }
  55%  { opacity: 0; transform: translate3d(150vw, 46vh, 0) rotate(18deg); }
  100% { opacity: 0; transform: translate3d(150vw, 46vh, 0) rotate(18deg); }
}
/* Con la noche encima, la carta se lee igual de bien */
.scene--gift .scene__body { position: relative; z-index: 2; }

/* Firma */
.signatures { margin-top: 24px; }
.sign { margin-top: 18px; }
.sign__label {
  font-size: 14px;
  color: var(--fog);
}
.sign__pad {
  display: block;
  width: 100%;
  height: 112px;
  margin-top: 8px;
  border-radius: 16px;
  background: rgba(239, 232, 218, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: none; /* firmar no debe desplazar la pantalla */
  cursor: crosshair;
}
.sign__name {
  margin-top: 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ember);
}
.sign__actions { display: flex; gap: 12px; margin-top: 4px; }

/* Maleta de Goku */
.suitcase {
  margin-top: 16px;
  padding: 20px;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: fade-up 400ms var(--ease-out) both;
}
.suitcase__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 6vw, 26px);
  letter-spacing: -0.01em;
}
.suitcase__intro { margin-top: 6px; font-size: 14px; color: var(--fog); }
.suitcase__items {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.suitcase__item {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--paper);
  font: inherit;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 160ms var(--ease-out), background-color 220ms ease, color 220ms ease;
}
.suitcase__item:active { transform: scale(0.97); }
.suitcase__item[aria-pressed="true"] {
  background: rgba(138, 176, 214, 0.16);
  box-shadow: inset 0 0 0 1px rgba(138, 176, 214, 0.55);
  color: var(--fern);
}
.suitcase__item.is-vetoed { color: var(--fog); text-decoration: line-through; }
.suitcase__reply {
  margin-top: 14px;
  min-height: 1.5em;
  font-family: var(--serif);
  font-size: clamp(19px, 5.2vw, 22px);
  line-height: 1.3;
}
.suitcase__reply span { display: block; }
.suitcase__reply span + span { margin-top: 8px; }
.suitcase__reply.is-done span:last-child { color: var(--fern); }
.suitcase__actions { display: flex; gap: 14px; margin-top: 12px; }

/* ---------------------------------------------------------
   Pantallas pequeñas (iPhone SE / mini)
   --------------------------------------------------------- */
@media (max-height: 700px) {
  :root { --gutter: 20px; }
  .scene { padding-top: calc(var(--safe-top) + 18px); }
  .chat { padding-top: 20px; gap: 16px; }
  .meters { margin-top: 24px; gap: 20px; }
  .diagnosis { margin-top: 26px; }
  .crew { margin-top: 18px; }
  .scene__body--reveal { padding-top: 6vh; }
  .compass { width: min(58vw, 220px); }
  .sensor { width: 104px; height: 104px; }
  .sensor-area { padding-top: 18px; gap: 12px; }
  .meters { margin-top: 22px; gap: 16px; }
  .clues-stage { min-height: 200px; }
  .envelope { gap: 14px; }
  .gallery__slide { --shot: 1 / 1; }
  .memory { aspect-ratio: 1 / 1; margin-bottom: 20px; }
  .candles { margin-top: 26px; padding-top: 20px; }
  .candles__row { gap: 22px; height: 84px; }
  .sign__pad { height: 96px; }
  .house__gallery { margin-top: 20px; }
}

/* Horizontal: no es prioritario, pero nada debe romperse */
@media (orientation: landscape) and (max-height: 500px) {
  .scene__body--reveal { padding-top: 4px; }
  .reveal__place { font-size: 52px; }
  .reveal__region { margin-top: 10px; }
  .reveal__lines {
    padding-top: 14px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    font-size: 22px;
  }
  .reveal__lines li:first-child { margin-bottom: 0; font-size: 1em; }
  .compass { width: 150px; }
  .locate__status { margin-top: 16px; }
  .gallery__slide { --shot: 16 / 9; }
  .memory { aspect-ratio: 16 / 9; }
}

/* ---------------------------------------------------------
   Movimiento reducido: menos y más suave, no cero.
   Se mantienen los fundidos; se elimina desplazamiento y blur.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene.is-leaving,
  .word, .line-in, .reveal__place .char,
  .member, .diagnosis, .pass, .locate__result, .scene__action, .meter__value,
  .clue-card, .clue-card.is-gone, .clue-card__face, .clues-final__word,
  .envelope__card, .envelope.is-opening .envelope__card, .fog-canvas.is-clearing,
  .sensor-area, .fog-hint, .hold, .sensor, .memory, .house__gallery, .viewer__panel {
    transform: none !important;
    filter: none !important;
  }
  .scene--reveal, .scene--reveal.is-active { clip-path: none; }
  .scene--reveal .landscape__sky,
  .scene--reveal .landscape__photo,
  .scene--reveal .ridge { transform: none !important; transition: none; }
  .candle__flame, .candle.is-out .candle__smoke,
  .fog i, .mist, .orb, .typing span, .hold::before, .sensor__ripple,
  .clue-card__cta svg, .compass__needle > span, .compass__north::after,
  .hold__core, .member.is-confirmed .stamp { animation: none !important; }
  .compass__needle { transition-duration: 200ms; }
  .sparks, .nightfall__shot { display: none; }
  .scene--gift.is-night .nightfall i { animation: none; opacity: 0.7; }
  .letter__lines p span { animation-name: fade; clip-path: none; }
  .gallery__track { scroll-behavior: auto; }
  .word { animation-name: fade; animation-delay: 0ms; }
  .line-in, .reveal__place .char { animation-name: fade; }
  .scene--intro .dedicatee, .scene--intro .display, .scene--intro .lede { animation-name: fade; }
  .scene--intro .scene__action.is-ready,
  .scene--gated .scene__action.is-ready,
  .alt-link.is-shown, .clue-trail li, .locate__status.is-signal,
  .team__hint.is-complete, .suitcase, .sound { animation-name: fade; }
  .candle.is-out .candle__flame { transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }