/* The Chosen Future
   Mundo: el cuarto oscuro. El asesorado trabaja en penumbra, bajo luz de seguridad;
   el asesor revisa en la mesa de luz. Revelar = descubrir. */

:root {
  --revelador: #100e0c;      /* fondo: la charola de revelado */
  --bano: #191613;           /* superficie elevada */
  --bano-2: #231f1b;
  --linea: #3a332c;
  --plata: #ece6da;          /* texto: papel de plata */
  --plata-2: #b8ae9f;
  --plata-3: #918778;
  --seguridad: #c8321f;      /* luz de seguridad */
  --seguridad-hondo: #8e1d12;
  --sobre-rojo: #ffeee6;
  --foco: #f0b49a;

  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Archivo", system-ui, sans-serif;

  --r: 3px;
  --ritmo: 1.5rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--revelador);
  color: var(--plata);
  font: 400 1.0625rem/1.6 var(--sans);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--seguridad); text-underline-offset: .2em; }
::selection { background: var(--seguridad); color: var(--sobre-rojo); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

/* --- tipografía -------------------------------------------------------- */
.titular {
  font: 300 clamp(2.4rem, 6vw, 4.6rem)/1.02 var(--serif);
  font-optical-sizing: auto;
  letter-spacing: -.025em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.titular em { font-style: italic; font-weight: 300; }
.pregunta {
  font: 300 clamp(1.6rem, 3.6vw, 2.5rem)/1.2 var(--serif);
  letter-spacing: -.015em;
  text-wrap: balance;
  margin: 0;
}
.entrada {
  font: 400 1.25rem/1.55 var(--serif);
  color: var(--plata-2);
  max-width: 36em;
  margin: 0 0 2rem;
}
.rotulo {
  font: 600 .78rem/1.2 var(--sans);
  font-variation-settings: "wdth" 72;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plata-3);
}
p { max-width: 38em; }
.apagado { color: var(--plata-2); }

/* --- tira de película (navegación del recorrido) --------------------------- */
.tira {
  position: sticky; top: 0; z-index: 5;
  background: #0a0908;
  border-bottom: 1px solid #000;
  padding: 0 clamp(1rem, 3vw, 2rem);
}
.tira__fila {
  display: flex; align-items: stretch; gap: 0;
  max-width: 72rem; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
.tira__fila::-webkit-scrollbar { display: none; }
.tira__marca {
  font: 700 .82rem/1 var(--sans); font-variation-settings: "wdth" 62;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--plata-2); text-decoration: none;
  display: flex; align-items: center; padding: 0 1.25rem 0 0; white-space: nowrap;
}
.cuadro {
  position: relative; flex: 1 0 auto; min-width: 6.5rem;
  padding: .95rem .9rem .9rem;
  color: var(--plata-3); text-decoration: none;
  border-left: 1px solid #1d1a17;
  font: 500 .8rem/1.2 var(--sans); font-variation-settings: "wdth" 80;
  white-space: nowrap;
}
/* perforaciones de la película */
.cuadro::before, .cuadro::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; height: 4px;
  background: repeating-linear-gradient(90deg, #26221e 0 7px, transparent 7px 13px);
}
.cuadro::before { top: 3px; }
.cuadro::after { bottom: 3px; }
.cuadro__num { display: block; font: 700 .7rem/1 var(--sans); font-variation-settings: "wdth" 62; letter-spacing: .1em; margin-bottom: .35rem; color: #6c6358; }
.cuadro[aria-disabled="true"] { pointer-events: none; opacity: .45; }
.cuadro.hecho { color: var(--plata-2); }
.cuadro.hecho .cuadro__num { color: var(--plata-3); }
.cuadro.hecho .cuadro__num::after { content: ""; display: inline-block; width: .38rem; height: .38rem; margin-left: .4rem; vertical-align: .05rem; background: currentColor; }
.cuadro[aria-current="step"] { color: var(--sobre-rojo); background: var(--seguridad-hondo); }
.cuadro[aria-current="step"] .cuadro__num { color: var(--foco); }
.cuadro:hover:not([aria-current]) { color: var(--plata); }

/* --- escena ---------------------------------------------------------------- */
.escena {
  max-width: 72rem; margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 4vw, 3rem) 6rem;
}
.escena--estrecha { max-width: 50rem; }
.revelar { animation: revelado 1.5s var(--ease) both; }
@keyframes revelado {
  from { filter: brightness(.6) contrast(.6) blur(2.5px); }
  to { filter: none; }
}
@media (prefers-reduced-motion: reduce) { .revelar { animation: none; } }

.pie-paso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--linea);
}
.pie-paso .estado { color: var(--plata-3); font-size: .95rem; margin-right: auto; }

/* --- controles ------------------------------------------------------------- */
.boton {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3rem; padding: .8rem 1.5rem;
  border: 1px solid var(--seguridad); border-radius: var(--r);
  background: var(--seguridad); color: var(--sobre-rojo);
  font: 600 1rem/1 var(--sans); font-variation-settings: "wdth" 85; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.boton .ic, .boton svg { width: 1.15rem; height: 1.15rem; flex: none; }
.boton:hover { background: #d93d29; border-color: #d93d29; }
.boton:active { transform: translateY(1px); }
.boton:disabled, .boton[aria-disabled="true"] { background: transparent; border-color: var(--linea); color: var(--plata-3); cursor: not-allowed; }
.boton--quieto { background: transparent; color: var(--plata); border-color: var(--linea); }
.boton--quieto:hover { background: var(--bano-2); border-color: var(--plata-3); }
.boton--chico { min-height: 2.25rem; padding: .45rem .9rem; font-size: .9rem; }

.campo { display: grid; gap: .45rem; margin-bottom: 1.25rem; }
.campo label, .etiqueta { font: 600 .9rem/1.3 var(--sans); color: var(--plata-2); }
.campo small { color: var(--plata-3); font-size: .85rem; }
input[type=text], input[type=number], input[type=email], input[type=password], textarea, select {
  width: 100%; padding: .8rem .9rem;
  background: var(--bano); color: var(--plata);
  border: 1px solid var(--linea); border-radius: var(--r);
  font: 400 1.0625rem/1.5 var(--sans);
  transition: border-color .2s;
}
textarea { font-family: var(--serif); font-size: 1.125rem; min-height: 7.5rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: #8a8073; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--foco); }

.casilla { display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; }
.casilla input { width: 1.3rem; height: 1.3rem; margin-top: .2rem; accent-color: var(--seguridad); flex: none; }

.aviso { padding: 1rem 1.25rem; background: var(--bano); border-radius: var(--r); color: var(--plata-2); }
.aviso--error { background: #2a1210; color: #f3c3b6; }
[hidden] { display: none !important; }

/* --- acuerdo --------------------------------------------------------------- */
.acuerdo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.acuerdo__lista { list-style: none; padding: 0; margin: 0 0 2.5rem; display: grid; gap: 1.5rem; }
.acuerdo__lista li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .5rem; }
.acuerdo__lista b { display: block; font: 600 1.05rem/1.4 var(--sans); }
.acuerdo__lista span { color: var(--plata-2); }
.acuerdo__lista .ic { width: 1.4rem; height: 1.4rem; color: var(--seguridad); margin-top: .1rem; }
.recorrido { border-left: 1px solid var(--linea); padding-left: 1.5rem; }
.recorrido ol { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; counter-reset: p; }
.recorrido li { counter-increment: p; }
.recorrido li::before { content: counter(p); font: 700 .75rem/1 var(--sans); font-variation-settings: "wdth" 62; color: var(--plata-3); display: block; margin-bottom: .25rem; }
.recorrido li b { font: 400 1.15rem/1.3 var(--serif); display: block; }
.recorrido li span { font-size: .92rem; color: var(--plata-3); }

/* --- valores: cuña de densidades ------------------------------------------- */
.retrato { min-height: 52vh; display: grid; align-content: center; gap: 2.5rem; }
.retrato__cuenta { color: var(--plata-3); font: 600 .9rem/1 var(--sans); font-variation-settings: "wdth" 72; letter-spacing: .06em; }
.retrato .pregunta { max-width: 26em; }
.retrato__giro { font: italic 300 1.25rem/1.4 var(--serif); color: var(--plata-2); margin: 0; }
.cuna { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; max-width: 46rem; border: 1px solid #000; }
.cuna button {
  -webkit-appearance: none; appearance: none; border: 0; border-radius: 0; cursor: pointer;
  min-height: 6.5rem; padding: .7rem .6rem; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  font: 500 .82rem/1.2 var(--sans); font-variation-settings: "wdth" 80; text-align: left;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cuna button b { font: 700 1.35rem/1 var(--sans); font-variation-settings: "wdth" 62; }
.cuna button:nth-child(1) { background: #0b0a09; color: #8d847a; }
.cuna button:nth-child(2) { background: #2b2723; color: #b2a99d; }
.cuna button:nth-child(3) { background: #4f4943; color: #ddd5ca; }
.cuna button:nth-child(4) { background: #7d766e; color: #0e0c0a; }
.cuna button:nth-child(5) { background: #b4ada3; color: #0e0c0a; }
.cuna button:nth-child(6) { background: #e9e3d8; color: #0e0c0a; }
.cuna button:hover { box-shadow: inset 0 0 0 2px var(--foco); }
.cuna button[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--seguridad); transform: translateY(-4px); }
.retrato__nav { display: flex; gap: .75rem; align-items: center; }

/* --- voces ----------------------------------------------------------------- */
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4.5rem); }
.prueba h2 { font: 400 1.75rem/1.2 var(--serif); margin: 0 0 .5rem; }
.prueba p { color: var(--plata-2); margin: 0 0 1.25rem; }
.fichas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.ficha {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  border: 1px solid var(--linea); border-radius: var(--r); background: transparent; color: var(--plata-2);
  padding: .55rem .85rem; font: 500 .95rem/1.2 var(--sans);
}
.ficha:hover { border-color: var(--plata-3); color: var(--plata); }
.ficha[aria-pressed="true"] { background: var(--plata); color: var(--revelador); border-color: var(--plata); }
.ficha[aria-pressed="true"] .orden { color: var(--seguridad); font-weight: 700; margin-right: .3rem; }

/* --- línea de vida: curva de exposición ------------------------------------ */
.curva { position: relative; margin: 1rem 0 2.5rem; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: #0c0b0a; }
.curva svg { display: block; width: 100%; height: auto; }
.curva .eje { stroke: #2d2823; stroke-width: 1; }
.curva .cero { stroke: #4a433c; stroke-dasharray: 3 5; }
.curva .traza { fill: none; stroke: var(--plata); stroke-width: 1.6; }
.curva .area-luz { fill: rgba(236, 230, 218, .07); }
.curva .punto { fill: var(--revelador); stroke: var(--plata); stroke-width: 1.5; }
.curva .punto.alto { fill: var(--seguridad); stroke: var(--seguridad); }
.curva text { fill: var(--plata-3); font: 500 11px var(--sans); }
.curva .rot { fill: var(--plata-2); font: 400 12px var(--serif); }
.curva__vacio { padding: 3.5rem 1rem; text-align: center; color: var(--plata-3); font: italic 300 1.2rem var(--serif); }

.momentos { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.momento { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.momento__edad { font: 700 1.1rem/1 var(--sans); font-variation-settings: "wdth" 62; color: var(--plata-2); }
.momento__titulo { font: 400 1.2rem/1.35 var(--serif); }
.momento__relato { color: var(--plata-2); font-size: .95rem; margin: .25rem 0 0; }
.momento__energia { font: 700 1rem/1 var(--sans); font-variation-settings: "wdth" 62; }
.momento__energia.pos { color: var(--foco); }
.momento__energia.neg { color: var(--plata-3); }
.momento__acciones { display: flex; gap: .25rem; }
.mini {
  -webkit-appearance: none; appearance: none; border: 0; background: none; color: var(--plata-3);
  padding: .35rem .5rem; border-radius: var(--r); cursor: pointer; font: 500 .85rem var(--sans);
}
.mini:hover { color: var(--plata); background: var(--bano-2); }

.nuevo-momento { margin-top: 2rem; padding: 1.5rem; background: var(--bano); border-radius: var(--r); }
.nuevo-momento__fila { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; }
.deslizador { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; }
.deslizador output { font: 700 1.4rem/1 var(--sans); font-variation-settings: "wdth" 62; min-width: 2.5rem; text-align: right; }
input[type=range] { width: 100%; accent-color: var(--seguridad); }

/* --- testigos -------------------------------------------------------------- */
.mensaje {
  font: 400 1.15rem/1.6 var(--serif); color: var(--plata);
  background: var(--bano); padding: 1.5rem 1.75rem; border-radius: var(--r); white-space: pre-wrap; max-width: 40em;
}
.contador { font: 300 4.5rem/1 var(--serif); }

/* --- imágenes: hoja de contactos -------------------------------------------- */
.contactos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.75rem 1.25rem;
  background: #050505; padding: 1.25rem; border-radius: var(--r);
}
.toma { display: grid; gap: .6rem; }
.toma__marco { position: relative; aspect-ratio: 4 / 3; background: #000; border: 6px solid #000; outline: 1px solid #1e1b18; overflow: hidden; }
.toma__marco img { width: 100%; height: 100%; object-fit: cover; }
.toma__num { position: absolute; top: .35rem; left: .45rem; font: 700 .72rem/1 var(--sans); font-variation-settings: "wdth" 62; color: #e8a33d; letter-spacing: .08em; text-shadow: 0 1px 2px #000; }
.toma__quitar { position: absolute; top: .3rem; right: .3rem; background: rgba(0, 0, 0, .7); color: var(--plata); }
.toma textarea { min-height: 5.5rem; font-size: 1rem; background: #0e0c0b; }
.toma--subir {
  aspect-ratio: 4 / 3; display: grid; place-content: center; text-align: center; gap: .5rem;
  border: 1px dashed #3d362f; border-radius: var(--r); color: var(--plata-3); cursor: pointer; padding: 1rem;
}
.toma--subir:hover, .toma--subir.sobre { border-color: var(--foco); color: var(--plata); }
.toma--subir svg { width: 2rem; height: 2rem; margin: 0 auto; }

.triada { margin-top: 3.5rem; }
.triada__fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.triada__toma {
  -webkit-appearance: none; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; position: relative;
}
.triada__toma img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; border: 6px solid #000; }
.triada__toma .lapiz { position: absolute; inset: -6% -5%; width: 110%; height: 112%; pointer-events: none; opacity: 0; transition: opacity .3s; }
.triada__toma .lapiz ellipse { fill: none; stroke: var(--seguridad); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset .7s var(--ease); }
.triada__toma[aria-pressed="true"] .lapiz { opacity: 1; }
.triada__toma[aria-pressed="true"] .lapiz ellipse { stroke-dashoffset: 0; }
.triada__toma span { display: block; margin-top: .4rem; font: 600 .78rem/1 var(--sans); font-variation-settings: "wdth" 72; color: var(--plata-3); letter-spacing: .06em; text-align: left; }

/* --- la conversación: luz de seguridad ---------------------------------------- */
body.cuarto-rojo { background: var(--seguridad-hondo); color: var(--sobre-rojo); }
body.cuarto-rojo .tira { background: #5c120a; border-color: #4a0e08; }
body.cuarto-rojo .cuadro { border-color: #6d170d; color: #e3a594; }
body.cuarto-rojo .cuadro::before, body.cuarto-rojo .cuadro::after { background: repeating-linear-gradient(90deg, #7a1d12 0 7px, transparent 7px 13px); }
body.cuarto-rojo .cuadro__num { color: #c56a55; }
body.cuarto-rojo .cuadro[aria-current="step"] { background: var(--sobre-rojo); color: var(--seguridad-hondo); }
body.cuarto-rojo .cuadro[aria-current="step"] .cuadro__num { color: var(--seguridad); }
body.cuarto-rojo .apagado, body.cuarto-rojo .entrada { color: #f2c1b1; }
body.cuarto-rojo .rotulo { color: #e9a593; }
.sala { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; min-height: 70vh; }
.foco-voz { position: relative; aspect-ratio: 1; width: min(100%, 26rem); margin: 0 auto; display: grid; place-items: center; }
.foco-voz canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.foco-voz__estado { position: relative; text-align: center; font: italic 300 1.35rem/1.3 var(--serif); max-width: 12em; }
.preparacion { list-style: none; padding: 0; margin: 0 0 2.25rem; display: grid; gap: .9rem; }
.preparacion li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .75rem; color: #fbd8cc; }
.preparacion svg { width: 1.2rem; height: 1.2rem; margin-top: .2rem; }
.cuarto-rojo .boton { background: var(--sobre-rojo); color: var(--seguridad-hondo); border-color: var(--sobre-rojo); }
.cuarto-rojo .boton:hover { background: #fff; border-color: #fff; }
.cuarto-rojo .boton--quieto { background: transparent; color: var(--sobre-rojo); border-color: #c45a45; }
.cuarto-rojo .boton--quieto:hover { background: #a3271a; }
.cuarto-rojo .aviso { background: #6d170d; color: var(--sobre-rojo); }

/* --- testigo y fin ------------------------------------------------------------ */
.carta { max-width: 44rem; margin: 0 auto; padding: clamp(2.5rem, 8vw, 6rem) clamp(1rem, 4vw, 2rem); }
.fin { min-height: 80vh; display: grid; align-content: center; }
.fin .titular { font-size: clamp(2.8rem, 8vw, 6rem); }

/* --- responsivo ---------------------------------------------------------------- */
@media (max-width: 820px) {
  .acuerdo, .dos, .sala { grid-template-columns: 1fr; }
  .recorrido { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea); padding-top: 1.5rem; }
  .cuna { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cuna button { min-height: 5rem; }
  .momento { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .momento__acciones { grid-column: 2; }
  .nuevo-momento__fila { grid-template-columns: 1fr; }
  .triada__fila { gap: .5rem; }
  .sala { min-height: auto; }
  .foco-voz { width: min(100%, 20rem); }
}