/* ==========================================================================
   Kerzou — kerzou.com
   Concepto: «El golpe y el brote». El escenario es una mesa blanca; cada app
   trae su mundo (color, textura, tipografía y ritmo) y entra con su verbo.

   Interruptor general: <html data-motion="off"> apaga todo el movimiento.
   ========================================================================== */

/* ---------- Fuentes (OFL, servidas desde aquí) ---------- */
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost-3.71-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Young Serif";
  src: url("/assets/fonts/young-serif-3.003-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-3.602-latin-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
/* Respaldos con las métricas ajustadas: cuando llega la fuente, el texto no se mueve. */
@font-face { font-family: "Jost Respaldo"; src: local("Arial"); size-adjust: 96%; ascent-override: 111.4%; descent-override: 39.1%; line-gap-override: 0%; }
@font-face { font-family: "Young Serif Respaldo"; src: local("Georgia"); size-adjust: 113.5%; ascent-override: 92.2%; descent-override: 32.3%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Respaldo"; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.6%; ascent-override: 102.5%; descent-override: 35.8%; line-gap-override: 0%; }

/* ---------- Sistema ---------- */
:root {
  color-scheme: only light;            /* un solo ambiente: los mundos traen su propia luz */

  /* Escenario Kerzou: no tiene color propio, el color lo ponen las apps */
  --k-fondo: #F4F3EE;                  /* cal */
  --k-tinta: #121211;
  --k-suave: #5C5B56;
  --k-linea: #D5D3CA;
  --k-punto: #121211;
  --k-acento: #121211;

  /* Ambiente: el mundo que está activo. Sin JS vale el escenario y cada .mundo usa lo suyo. */
  --fondo: var(--k-fondo);
  --tinta: var(--k-tinta);
  --suave: var(--k-suave);
  --linea: var(--k-linea);
  --punto: var(--k-punto);
  --acento: var(--k-acento);

  /* Voces */
  --f-kerzou: "Jost", "Jost Respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-redonda: ui-rounded, "SF Pro Rounded", "Nunito", "Nunito Respaldo", system-ui, sans-serif;
  --f-serif: "Young Serif", "Young Serif Respaldo", Georgia, serif;

  /* Curvas: cada una es un gesto */
  --caida: cubic-bezier(.55, 0, 1, .45);     /* gravedad: acelera hasta el golpe */
  --seco: cubic-bezier(.2, .8, .3, 1);       /* después del golpe: frena en seco */
  --calma: cubic-bezier(.25, .6, .2, 1);     /* volver al escenario */
  --brote: cubic-bezier(.3, 0, .1, 1);       /* crecer: lento al salir, largo al llegar */
  --t-toque: 100ms;
  --t-golpe: 240ms;
  --t-calma: 520ms;
  --t-brote: 1150ms;

  --margen: clamp(20px, 5vw, 72px);
  --aire: 34vh;                              /* el aire entre escenas: ahí ocurre el corte */
}
@supports (height: 1svh) { :root { --aire: 34svh; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--suelo, var(--fondo)); }
body {
  margin: 0;
  background: var(--fondo); color: var(--tinta);
  font-family: var(--f-kerzou); font-size: 1.0625rem; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
main { display: block; overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--tinta); color: var(--fondo); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--margen); top: -80px; z-index: 30; padding: 12px 18px; background: var(--tinta); color: var(--fondo); border-radius: 999px; text-decoration: none; font-weight: 500; }
.saltar:focus { top: 12px; }

/* ---------- Barra: el punto de la «o» te dice dónde estás ---------- */
.barra {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--margen) 10px;
  color: var(--tinta);
}
/* El color propio de la barra no se ve (lo tapa el velo): es el que Safari toma para la franja de la hora.
   --techo y --suelo los pone el JS cuando el mundo nuevo llega a cada borde de la pantalla. */
.vivo .barra { position: fixed; background-color: var(--techo, var(--fondo)); }
/* Velo (lo crea el JS): una copia exacta del telón detrás de la barra, con el borde de abajo desvanecido.
   Lo que sube por debajo se pierde en el fondo antes de tocar las letras, sea papel, madera o noche. */
.velo {
  position: absolute; inset: 0 0 -34px; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent); mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
}
.velo .telon { display: block; inset: auto; top: 0; left: 0; width: 100vw; height: 100vh; }
@supports (height: 1lvh) { .velo .telon { height: 100lvh; } }
.marca { position: relative; display: block; flex: none; height: 19px; aspect-ratio: 4.335; margin: 12.5px 0; color: inherit; }
.marca::after { content: ""; position: absolute; inset: -13px -10px; }      /* zona de toque de 44 px */
.marca svg { height: 100%; width: 100%; fill: currentColor; overflow: visible; }
.marca .punto {
  position: absolute; left: 66.457%; top: 30.556%; width: 16.345%; aspect-ratio: 1;
  border-radius: 50%; background: var(--punto); pointer-events: none;
}
/* Si algún día hay más enlaces de los que caben en un teléfono angosto, la barra se desliza de lado. */
.barra nav {
  display: flex; gap: clamp(12px, 4.4vw, 34px); min-width: 0; padding: 0 6px; margin: 0 -6px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.barra nav::-webkit-scrollbar { display: none; }
.barra nav a {
  display: block; flex: none; padding: 12px 0; min-height: 44px; white-space: nowrap;
  font-size: .875rem; font-weight: 500; letter-spacing: .01em; line-height: 1.43;
  text-decoration: none; color: inherit;
}
.barra nav a:focus-visible { outline-offset: -3px; }
.barra nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.vivo .barra nav a[aria-current] { text-decoration: none; }                 /* con JS lo marca el punto */

/* ---------- Portada ---------- */
.portada {
  min-height: 100vh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(96px, 1fr) auto auto minmax(32px, 1.25fr) auto;
  padding: 0 var(--margen);
  margin-bottom: var(--aire);
}
@supports (height: 1svh) { .portada { min-height: 100svh; } }

.logo { grid-row: 2; position: relative; width: min(100%, 150vh); aspect-ratio: 4.152; }
.logo .l { position: absolute; top: 0; height: 100%; fill: var(--tinta); overflow: visible; transform-origin: 50% 100%; }
.logo .l:nth-of-type(1) { left: 0%;      width: 17.938%; --d: 90ms; --a: .05;  --g: -1deg; }
.logo .l:nth-of-type(2) { left: 18.199%; width: 15.915%; --d: 66ms; --a: .075; --g: 1.5deg; }
.logo .l:nth-of-type(3) { left: 37.726%; width: 9.863%;  --d: 42ms; --a: .11;  --g: -2.2deg; }
.logo .l:nth-of-type(4) { left: 49.301%; width: 15.398%; --d: 16ms; --a: .16;  --g: 2.8deg; }
.logo .l:nth-of-type(5) { left: 65.857%; width: 16.861%; }                                     /* la «o»: el asiento del punto */
.logo .l:nth-of-type(6) { left: 86.313%; width: 13.687%; --d: 16ms; --a: .16;  --g: -3deg; }
.logo .punto, .logo .sombra {
  position: absolute; left: 65.613%; top: 31.117%; width: 17.349%; aspect-ratio: 1; border-radius: 50%;
}
.logo .punto { background: var(--punto); }
.logo .sombra { background: #0b0b0a; opacity: .26; filter: blur(clamp(3px, .9vw, 12px)); }

.manifiesto {
  grid-row: 3; margin-top: clamp(22px, 4.5vh, 44px); max-width: 20.5em;
  font-size: clamp(1.4375rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.18; letter-spacing: -.014em;
  text-wrap: balance;
}
.indice { grid-row: 5; border-top: 1px solid var(--linea); padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
.fila {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 76px; padding: 14px 0; border-bottom: 1px solid var(--linea);
  text-decoration: none;
}
.fila img {
  width: 46px; height: 46px; border-radius: 22.5%;
  box-shadow: 2px 3px 5px -1px rgba(18, 18, 17, .34);
  transition: transform var(--t-toque) ease-out, box-shadow var(--t-toque) ease-out;
}
.fila:active img { transform: scale(.94); box-shadow: 0 1px 1px 0 rgba(18, 18, 17, .34); }   /* se hunde bajo el dedo */
.fila .nombre { display: block; font-size: 1.3125rem; font-weight: 500; line-height: 1.2; letter-spacing: -.012em; }
.fila .que { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.35; color: var(--suave); }
.flecha { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fila .flecha { transition: transform 220ms var(--seco); }

/* ---------- Mundos ---------- */
.mundo {
  position: relative;
  padding: 0 var(--margen) var(--aire);
  --m-titular: var(--f-kerzou); --m-peso: 500;
}
/* Sin JS cada mundo se pinta a sí mismo; con JS lo hace el ambiente y aquí solo queda el contenido. */
html:not(.vivo) .mundo {
  --fondo: var(--m-fondo); --tinta: var(--m-tinta); --suave: var(--m-suave);
  --linea: var(--m-linea); --punto: var(--m-punto); --acento: var(--m-acento);
  color: var(--tinta); padding-top: 9vh;
}
.objeto { display: grid; place-items: center; padding-top: 78px; }                 /* 78 px: la barra queda libre */
.pieza { position: relative; height: clamp(250px, 41vh, 350px); }
@supports (height: 1svh) { .pieza { height: clamp(250px, 41svh, 350px); } }
.cuerpo { container-type: inline-size; margin-top: clamp(28px, 5vh, 56px); }

.rotulo { font-size: .75rem; font-weight: 500; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); }
.titular {
  margin-top: 14px;
  font-family: var(--m-titular); font-weight: var(--m-peso);
  font-size: clamp(3.5rem, 17vw, 9.5rem); line-height: .94; letter-spacing: -.03em;
}
@supports (width: 1cqi) { .titular { font-size: clamp(3.5rem, 20cqi, 9.5rem); } }
.titular:focus { outline: none; }
[tabindex="-1"]:focus { outline: none; }                                      /* foco que pone el JS al viajar */
.frase { display: inline-block; }
.lema { margin-top: 20px; max-width: 15em; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.14; letter-spacing: -.016em; text-wrap: balance; }
.texto { margin-top: 20px; max-width: 33em; line-height: 1.55; }
.planes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.planes li { padding: 6px 12px; border-radius: 999px; background: var(--m-chip); font-size: .875rem; font-weight: 500; line-height: 1.3; }
.planes li:first-child { color: var(--m-chip-a); }
.planes li:last-child { color: var(--m-chip-b); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 30px; }
.icono { width: 64px; height: 64px; border-radius: 22.5%; box-shadow: 3px 4px 8px -2px rgba(0, 0, 0, .45); }
/* Badge oficial: 50 px de alto, sin deformar ni animar; el margen guarda su espacio libre (1/4 de la altura). */
.insignia { display: block; margin: 13px 0; line-height: 0; border-radius: 9px; }
.insignia img { height: 50px; width: auto; }
.boton {
  display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px;
  border: 1.5px solid var(--tinta); border-radius: 999px;
  font-weight: 500; text-decoration: none; transition: transform var(--t-toque) ease-out;
}
.boton:active { transform: scale(.97); }
.enlaces { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 18px; }
.enlaces a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.enlaces .flecha { width: 14px; height: 14px; }

/* ---------- Texturas: las comparten el ambiente (con JS) y cada mundo (sin JS) ---------- */
html:not(.vivo) .mundo { background: var(--m-fondo); }
.telon[data-mundo="kerzou"] { --m-fondo: var(--k-fondo); --m-acento: var(--k-acento); }   /* el escenario no declara paleta: usa la suya */
.telon[data-textura="papel"] .tex { background: var(--m-fondo); }
.telon[data-textura="madera"] .tex,
html:not(.vivo) .mundo[data-textura="madera"] {
  background:
    radial-gradient(120% 70% at 10% 0%, rgba(255, 220, 178, .15), transparent 58%),
    linear-gradient(rgba(22, 13, 7, .05), rgba(22, 13, 7, .3)),
    url("/assets/img/madera.webp") center / cover,
    var(--m-fondo);
}
.telon[data-textura="noche"] .tex,
html:not(.vivo) .mundo[data-textura="noche"] {
  background: var(--m-fondo);
  background:
    radial-gradient(130% 60% at 50% 112%, color-mix(in srgb, var(--m-acento) 20%, transparent), color-mix(in srgb, var(--m-acento) 6%, transparent) 46%, transparent 72%),
    linear-gradient(var(--m-fondo) 30%, color-mix(in srgb, var(--m-fondo) 93%, var(--m-acento)));
}
/* Grano: quita el aspecto de pantalla y evita el escalonado de los degradados */
.telon .tex::after { content: ""; position: absolute; inset: 0; background: url("/assets/img/grano.svg"); opacity: .2; mix-blend-mode: multiply; }
.telon[data-textura="noche"] .tex::after { opacity: .5; mix-blend-mode: soft-light; }
.telon[data-textura="madera"] .tex::after { opacity: .3; mix-blend-mode: overlay; }

/* ---------- Ambiente (lo crea el JS): un telón fijo por mundo ---------- */
.vivo body { background: none; }
/* El color de fondo del ambiente no se ve (lo tapa el telón): es el que Safari toma para teñir sus barras. */
.ambiente { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; background-color: var(--suelo, var(--fondo)); }
@supports (height: 1lvh) { .ambiente { height: 100lvh; } }
.telon { position: absolute; inset: 0; display: none; overflow: hidden; }
.telon.visible { display: block; }
.tex { position: absolute; inset: -4%; }
.marea {                                 /* la noche que sube: borde suave con brillo, cuerpo liso */
  position: absolute; left: 0; width: 100%; top: -46vh; height: calc(100% + 92vh); visibility: hidden;
  --orilla: color-mix(in srgb, var(--marea) 78%, var(--brillo));
  background: var(--marea);
  background: linear-gradient(to bottom,
    transparent 0, color-mix(in srgb, var(--orilla) 38%, transparent) 9%, color-mix(in srgb, var(--orilla) 82%, transparent) 15%, var(--marea) 23%,
    var(--marea) 77%, color-mix(in srgb, var(--orilla) 82%, transparent) 85%, color-mix(in srgb, var(--orilla) 38%, transparent) 91%, transparent 100%);
}

/* ---------- La ficha (objeto de Fichando) ---------- */
.objeto { --giro: -9deg; --t-entrada: 0ms; }
.ficha-pieza { aspect-ratio: 1 / 2; }
.ficha-pieza .ficha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(var(--giro)); }
.ficha-pieza .obj-sombra {
  position: absolute; inset: 0; border-radius: 13% / 6.5%; background: #0d0704; opacity: .5; filter: blur(9px);
  transform: translate(7px, 11px) rotate(var(--giro));
}
[data-toque="golpe"] { cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
[data-toque="golpe"] .ficha, [data-toque="golpe"] .obj-sombra { transition: transform 130ms var(--caida), opacity 130ms var(--caida); }
.alzado[data-toque="golpe"] .ficha { transform: rotate(calc(var(--giro) - 1.5deg)) scale(1.1); transition: transform 120ms var(--seco); }
.alzado[data-toque="golpe"] .obj-sombra { transform: translate(22px, 34px) rotate(var(--giro)) scale(1.06); opacity: .3; transition: transform 120ms var(--seco), opacity 120ms var(--seco); }

/* ---------- La planta (objeto de Dorix) ---------- */
.planta-pieza { aspect-ratio: 4 / 5; }
.planta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.planta .hoja, .planta .capullo { transform-box: fill-box; transform-origin: var(--o, 0% 100%); }
.planta .capullo { transform-origin: center; }
.planta .tallo { stroke-dasharray: 210; }
[data-toque="mecer"] { cursor: pointer; touch-action: manipulation; }

/* ---------- Escenas del escenario ---------- */
.escena { padding: 12vh var(--margen) 0; }
.camino .rotulo, .contacto .rotulo { margin-bottom: 22px; }
.proyectos { border-top: 1px solid var(--linea); max-width: 46em; }
.proyecto { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.proyecto .nombre { font-size: 1.3125rem; font-weight: 500; letter-spacing: -.012em; }
.proyecto .que { grid-column: 2; color: var(--suave); font-size: .9375rem; }
.proyecto .estado { grid-row: 1; grid-column: 3; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.aro { display: inline-block; width: .62em; height: .62em; border: 1.5px solid currentColor; border-radius: 50%; }   /* punto vacío: todavía no existe */
.vacio { display: flex; align-items: baseline; gap: 14px; max-width: 30em; padding: 18px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); color: var(--suave); }
.vacio .aro { flex: none; color: var(--tinta); transform: translateY(-.04em); }
.proyectos:not(:has(li)) { display: none; }
.proyectos:has(li) + .vacio { display: none; }
.contacto { padding-bottom: 16vh; container-type: inline-size; }
.contacto .lema { max-width: 17em; }
.correo {
  display: inline-block; margin-top: 26px; padding: 6px 0;
  font-size: clamp(1.125rem, 6.2vw, 3.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .18em; overflow-wrap: anywhere;
}
@supports (width: 1cqi) { .correo { font-size: clamp(1.125rem, 7.9cqi, 3.75rem); } }   /* el correo entero en una línea */
.pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px;
  padding: 22px var(--margen) calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea); color: var(--suave); font-size: .875rem;
}
.pie ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linea); text-underline-offset: 5px; }
.pie p { display: flex; align-items: center; min-height: 44px; }

/* ---------- Escritorio ---------- */
@media (min-width: 900px) {
  .portada { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; grid-template-rows: minmax(110px, 1fr) auto minmax(48px, .8fr) auto; }
  .logo { grid-column: 1 / -1; }
  .manifiesto { grid-row: 4; grid-column: 1 / span 6; align-self: end; margin: 0 0 30px; }
  .indice { grid-row: 4; grid-column: 8 / -1; align-self: end; padding-bottom: 30px; }
  .marca { height: 21px; }
  .barra nav a { font-size: .9375rem; }
  .mundo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 112px); align-items: start; }
  .objeto { padding-top: 104px; }
  .pieza { height: clamp(300px, 46vh, 430px); }
  .cuerpo { margin-top: 15vh; }
  .cierre { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 112px); padding: 0 var(--margen); }
  .cierre .escena { padding-left: 0; padding-right: 0; }
  .texto { font-size: 1.1875rem; }
  .escena { padding-top: 16vh; }
  @media (hover: hover) {
    .fila:hover .flecha { transform: translateY(4px); }
    .fila:hover img { transform: scale(1.05); box-shadow: 4px 6px 10px -2px rgba(18, 18, 17, .3); }
  }
}

/* ==========================================================================
   Movimiento. Solo con data-motion="on" y si la persona no pidió menos movimiento.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Apertura: el punto cae en la «o» y la mesa lo siente. El contenido ya está ahí desde el primer cuadro. */
  [data-motion="on"] .logo .punto  { animation: punto-cae 360ms var(--caida) 240ms backwards; }
  [data-motion="on"] .logo .sombra { animation: sombra-cae 360ms var(--caida) 240ms backwards; }
  [data-motion="on"] .logo .l      { animation: brinco-letra 460ms linear calc(600ms + var(--d, 0ms)) backwards; }
  [data-motion="on"] .logo .l:nth-of-type(5) { animation: none; }
  [data-motion="on"] .portada .tiembla { animation: temblor 400ms linear calc(600ms + var(--d, 130ms)) backwards; }

  /* 404: el punto está en su «o» un instante y se sale */
  [data-motion="on"] .perdida .logo .punto, [data-motion="on"] .perdida .logo .sombra { animation: punto-se-va 640ms var(--caida) 520ms backwards; }
  [data-motion="on"] .perdida .logo .l { animation: none; }
  [data-motion="on"] .perdida .tiembla { animation: none; }

  /* Ritmo de Dorix: lo que hay en la noche sube un poco mientras asoma, una línea detrás de otra */
  .vivo .mundo[data-entrada="brote"] .cuerpo > * { transition: transform 1100ms var(--brote) calc(380ms + var(--i, 0) * 70ms); }
  .vivo .mundo[data-entrada="brote"]:not(.activo) .cuerpo > * { transform: translateY(18px); transition: transform 0s linear 200ms; }
  .cuerpo > :nth-child(2) { --i: 1; } .cuerpo > :nth-child(3) { --i: 2; } .cuerpo > :nth-child(4) { --i: 3; }
  .cuerpo > :nth-child(5) { --i: 4; } .cuerpo > :nth-child(6) { --i: 5; } .cuerpo > :nth-child(7) { --i: 6; }

  /* Objetos en espera (los pone el JS): todavía no han entrado a la mesa */
  .en-espera .ficha, .en-espera .obj-sombra { opacity: 0; }
  .entra .ficha      { animation: ficha-cae var(--t-entrada) var(--caida) backwards; }
  .entra .obj-sombra { animation: ficha-sombra var(--t-entrada) var(--caida) backwards; }
  .ficha-objeto { --t-entrada: 240ms; }

  .en-espera .planta { opacity: 0; }
  .entra .tallo { stroke-dashoffset: 0; }
  /* --espera la pone el JS: lo que tarda la noche en llegar hasta la planta */
  .entra .planta  { animation: aparece 420ms linear var(--espera, 0ms) backwards; }
  .entra .tallo   { animation: tallo-crece 1500ms var(--brote) calc(var(--espera, 0ms) + 200ms) backwards; }
  .entra .hoja    { animation: hoja-brota 620ms cubic-bezier(.3, 1.35, .5, 1) calc(var(--espera, 0ms) + 470ms + var(--n) * 210ms) backwards; }
  .entra .capullo { animation: hoja-brota 760ms cubic-bezier(.3, 1.35, .5, 1) calc(var(--espera, 0ms) + 1900ms) backwards; }
  .entra .dia     { animation: dia-prende 320ms ease calc(var(--espera, 0ms) + 470ms + var(--n) * 210ms) backwards; }
  .entra .tallo, .entra .hoja, .entra .capullo, .entra .dia { animation-fill-mode: backwards; }
}
@keyframes punto-se-va  { from { transform: none; } to { transform: translate(var(--rx), var(--ry)); } }
@keyframes punto-cae    { 0% { transform: scale(3.3); opacity: 0; } 12% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes sombra-cae   { 0% { transform: translate(105%, 150%) scale(2.1); opacity: 0; } 100% { transform: none; opacity: .26; } }
@keyframes brinco-letra {
  0%   { transform: none; animation-timing-function: var(--seco); }
  26%  { transform: translateY(calc(var(--a, .05) * -100%)) rotate(var(--g, 0deg)); animation-timing-function: var(--caida); }
  58%  { transform: none; animation-timing-function: var(--seco); }
  76%  { transform: translateY(calc(var(--a, .05) * -22%)) rotate(calc(var(--g, 0deg) * -.3)); animation-timing-function: var(--caida); }
  100% { transform: none; }
}
@keyframes temblor {
  0%   { transform: none; animation-timing-function: var(--seco); }
  28%  { transform: translateY(-4px); animation-timing-function: var(--caida); }
  62%  { transform: none; animation-timing-function: var(--seco); }
  80%  { transform: translateY(-1px); animation-timing-function: var(--caida); }
  100% { transform: none; }
}
@keyframes ficha-cae    { 0% { transform: rotate(calc(var(--giro) - 7deg)) scale(1.9); opacity: 0; } 14% { opacity: 1; } 100% { transform: rotate(var(--giro)) scale(1); opacity: 1; } }
@keyframes ficha-sombra { 0% { transform: translate(64px, 96px) rotate(var(--giro)) scale(1.5); opacity: 0; } 100% { transform: translate(7px, 11px) rotate(var(--giro)); opacity: .5; } }
@keyframes tallo-crece  { from { stroke-dashoffset: 210; } to { stroke-dashoffset: 0; } }
@keyframes hoja-brota   { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes dia-prende   { from { opacity: .22; } to { opacity: 1; } }

/* Menos movimiento: nada se desplaza. El punto llega con un fundido y los mundos cambian con otro (lo hace el JS). */
@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] .logo .punto, [data-motion="on"] .logo .sombra { animation: aparece 700ms linear 200ms backwards; }
  .fila img, .fila .flecha, .boton { transition: none; }
}
@keyframes aparece { from { opacity: 0; } }

/* Interruptor general */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation: none !important; transition: none !important; }

/* ---------- 404 ---------- */
.perdida { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(96px, 1fr) auto auto minmax(40px, 1.2fr) auto; padding: 0 var(--margen); }
@supports (height: 1svh) { .perdida { min-height: 100svh; } }
.perdida .logo { grid-row: 2; --rx: 62%; --ry: 395%; }
.perdida h1.manifiesto { margin-top: 0; font-weight: 400; }
@media (min-width: 900px) { .perdida .logo { --rx: 96%; --ry: 150%; } }
.perdida .logo .punto, .perdida .logo .sombra { transform: translate(var(--rx), var(--ry)); }
.perdida .logo .sombra { opacity: .3; margin: 1.2% 0 0 1%; }
.perdida .mensaje { grid-row: 3; margin-top: clamp(22px, 4.5vh, 44px); }
.perdida .mensaje p { margin-top: 12px; max-width: 24em; color: var(--suave); }
.perdida .salidas { grid-row: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding: 20px 0 max(20px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--linea); }
.perdida .salidas a:not(.boton) { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---------- Solo con JS ---------- */
/* En cada momento se ve el contenido de un solo mundo: el del ambiente. Lo demás sale de escena. */
.vivo .portada > *, .vivo .escena > * { transition: opacity 300ms linear 180ms; }
.vivo .cuerpo { transition: opacity 300ms linear 120ms; }
.vivo .mundo[data-entrada="golpe"] .cuerpo { transition: none; }                                  /* aparece en el golpe */
.vivo .mundo[data-entrada="brote"] .cuerpo { transition: opacity 900ms var(--brote) 420ms; }      /* asoma cuando la noche ya subió */
.vivo .mundo:not(.activo) .cuerpo,
.vivo[data-mundo]:not([data-mundo="kerzou"]) .portada > *,
.vivo[data-mundo]:not([data-mundo="kerzou"]) .escena > * { opacity: 0; transition: opacity 160ms linear; }

.con-punto .logo .punto { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.con-punto .logo .punto.agarrado { cursor: grabbing; }
.con-punto .logo .punto::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }   /* zona de agarre */

/* Escritorio: el puntero es el punto. Sobre algo que se puede tocar, se abre en aro. */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 40; width: 0; height: 0; pointer-events: none; display: none;
}
.con-cursor .cursor { display: block; }
.cursor::before {
  content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--punto); box-shadow: 0 0 0 0 var(--punto);
  transition: transform 160ms var(--seco), background-color 160ms linear, box-shadow 160ms linear;
}
.cursor.sobre::before { transform: scale(3); background: transparent; box-shadow: inset 0 0 0 .5px var(--punto), 0 0 0 .5px var(--punto); }
.cursor.pulsa::before { transform: scale(.7); }
.cursor.sobre.pulsa::before { transform: scale(2.4); }
.cursor.en-punto::before { box-shadow: inset 0 0 0 .5px var(--fondo), 0 0 0 .5px var(--fondo); }   /* sobre el punto grande, el aro va en claro */
.cursor.en-insignia::before { opacity: 0; }                                  /* nada encima del badge */
@media (hover: hover) and (pointer: fine) {
  .con-cursor, .con-cursor a, .con-cursor button, .con-cursor [data-toque], .con-cursor .logo .punto { cursor: none; }
  .con-cursor .insignia, .con-cursor .insignia * { cursor: pointer; }
}