/* ============================================================================
   HypoThesis · estilo de página
   ----------------------------------------------------------------------------
   Gramática: filmic one-shot. La página es una sola travesía: no hay índice,
   no hay chapas de sección, no hay sitio al que saltar. El suelo va derivando
   de un azul a otro y solo se rompe una vez, en el acto de papel, que es
   justo el momento en que se encienden las luces.

   El motor (scrollcraft.css / .js) no se toca. Aquí van los tokens de marca y
   el marcado propio.
   ========================================================================== */

/* ----------------------------------------------------------------- marca -- */
:root {
  --sc-canvas:      #0B1320;
  --sc-surface:     #131F33;
  --sc-ink:         #F2EEE6;
  --sc-ink-soft:    #A3B0C6;
  --sc-accent:      #D8A94A;
  --sc-accent-ink:  #0B1320;

  --oro:            #D8A94A;
  --oro-hondo:      #B98B2E;
  --oro-tenue:      #7A6229;   /* 5.2:1 sobre papel */
  --papel:          #F4F0E7;
  --papel-hondo:    #E8E1D4;
  --marino:         #16233A;
  --marino-hondo:   #0B1320;
  --tinta-papel:    #16233A;
  --tinta-papel-suave: #55617A;
  --gris-papel:     #5E6779;   /* 5.0:1, etiquetas pequenas */
  --oro-papel:      #96701F;   /* 4.1:1, oro que hace de texto */

  --sc-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Outfit", system-ui, -apple-system, sans-serif;

  --sc-measure: 56ch;
  --sc-maxw: 80rem;
  --sc-r-sm: 3px; --sc-r-md: 5px; --sc-r-lg: 8px;

  --sc-shadow-color: 216 60% 3%;
  --hilo:      1px solid rgba(242,238,230,0.14);
  --hilo-fino: 1px solid rgba(242,238,230,0.08);
}

/* Tipografía clara sobre suelo oscuro: un punto más de interlínea, algo más
   de prosa y un peso menos ligero. Sin esta compensación se lee borrosa. */
body { background: var(--marino-hondo); letter-spacing: 0.002em; }
.sc-display { font-weight: 400; }

::selection { background: var(--oro); color: var(--marino-hondo); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 2px; }

.salto {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -140%);
  z-index: 200; padding: var(--sc-3) var(--sc-5);
  background: var(--oro); color: var(--marino-hondo);
  border-radius: 0 0 var(--sc-r-md) var(--sc-r-md);
  text-decoration: none; font-size: var(--sc-t-sm); font-weight: 500;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.salto:focus-visible { transform: translate(-50%, 0); }

[data-sc-progress] {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 120;
  background: var(--oro); transform-origin: 0 50%;
}


/* =============================================================== CHAPA ==
   Marca y una sola etiqueta de acción. Nada más: la travesía no se navega. */
.chapa {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sc-4);
  padding: var(--sc-4) var(--sc-gutter);
  pointer-events: none;
}
/* Un velo bajo la chapa: sin él, el contenido pasa por debajo y la marca se
   monta sobre el texto. Se desvanece hacia abajo para que no lea como barra. */
.chapa::before {
  /* Se prolonga 3rem por debajo de la barra: si el degradado se apaga a la
     altura del logo, el contenido de detrás vuelve a verse a través de él. */
  content: ""; position: absolute; inset: 0 0 -3rem 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11,19,32,0.96) 0%, rgba(11,19,32,0.94) 46%,
    rgba(11,19,32,0.78) 66%, transparent 100%);
}
.chapa.en-claro::before {
  background: linear-gradient(180deg,
    rgba(244,240,231,0.97) 0%, rgba(244,240,231,0.95) 46%,
    rgba(244,240,231,0.80) 66%, transparent 100%);
}
.chapa > * { pointer-events: auto; }
/* Dos logos apilados: la marca en crema se pierde sobre el suelo de papel,
   así que al entrar en la sección clara se cambia por la versión en marino.
   Se cruzan en opacidad, no se ocultan, para que no haya un parpadeo. */
.chapa__marca { position: relative; display: block; width: clamp(8rem, 13vw, 11rem); }
.chapa__logo {
  width: 100%; height: auto;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
.chapa__logo--oscuro { position: absolute; inset: 0; opacity: 0; }
.chapa.en-claro .chapa__logo--claro  { opacity: 0; }
.chapa.en-claro .chapa__logo--oscuro { opacity: 1; }

.chapa__cta {
  font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none;
  padding: var(--sc-2) var(--sc-4);
  border: 1px solid rgba(216,169,74,0.5); border-radius: var(--sc-r-md);
  background: rgba(11,19,32,0.5); backdrop-filter: blur(8px);
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              border-color var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .chapa__cta:hover { background: var(--oro); color: var(--marino-hondo); border-color: var(--oro); }
}
/* El botón acompaña el cambio de suelo: sobre papel, tinta marino sobre
   papel translúcido. */
.chapa.en-claro .chapa__cta {
  color: var(--marino); border-color: rgba(150,112,31,0.55);
  background: rgba(244,240,231,0.72);
}
@media (hover: hover) and (pointer: fine) {
  .chapa.en-claro .chapa__cta:hover {
    background: var(--oro-papel); color: var(--papel); border-color: var(--oro-papel);
  }
}
@media (max-width: 560px) {
  .chapa__cta { font-size: 0.66rem; letter-spacing: 0.06em; padding: var(--sc-2) var(--sc-3); }
  .chapa__marca { width: 7rem; }
}
@media (max-width: 360px) { .chapa__cta { display: none; } }


/* ========================================================== TIPOGRAFÍA ==
   Serif para la voz, sans para la prosa y los controles. Dos familias. */
.rotulo {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 var(--sc-5);
}
.rotulo--oscuro { color: var(--oro-tenue); }

.titular {
  font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0; max-width: 20ch; text-wrap: balance;
}
.titular--xl { font-size: var(--sc-t-4xl); max-width: 14ch; line-height: 0.98; }
.titular--oscuro { color: var(--tinta-papel); }
@media (max-width: 700px) { .titular--xl { font-size: var(--sc-t-2xl); } }

.bajada {
  font-size: var(--sc-t-lg); line-height: 1.5;
  color: var(--sc-ink-soft); max-width: 42ch;
  margin: var(--sc-5) 0 var(--sc-7); text-wrap: pretty;
}
.bajada--ancha { max-width: 52ch; }
.parrafo { font-size: var(--sc-t-sm); line-height: 1.62; color: var(--sc-ink-soft); margin: 0; }


/* --------------------------------------------------------------- BOTÓN -- */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  padding: var(--sc-3) var(--sc-6);
  background: var(--oro); color: var(--marino-hondo);
  font-family: var(--sc-font-text); font-weight: 600;
  font-size: var(--sc-t-sm); letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent;
  border-radius: var(--sc-r-md); cursor: pointer;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.4),
              0 12px 30px -10px rgba(216,169,74,0.35);
  transition: background var(--sc-d-fast) var(--sc-ease-out),
              box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .boton:hover { background: #E7BC63;
    box-shadow: 0 3px 6px hsl(var(--sc-shadow-color) / 0.45),
                0 18px 46px -12px rgba(216,169,74,0.5); }
}
.boton:active { transform: translateY(1px); }
.boton--grande { padding: var(--sc-4) var(--sc-7); font-size: var(--sc-t-base); }
.boton--linea {
  background: transparent; color: var(--oro);
  border-color: rgba(216,169,74,0.5); box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  .boton--linea:hover { background: rgba(216,169,74,0.14); color: var(--sc-ink); box-shadow: none; }
}


/* ================================================================ ACTOS == */
.acto__wrap {
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
}


/* ------------------------------------------------------- 1 · EL UMBRAL -- */
.umbral { display: grid; place-items: center; }
.umbral > * { grid-area: 1 / 1; }

/* Los planos van a velocidades distintas y el texto a 1x. La profundidad
   viene del diferencial, no de una sombra. */
.umbral__sello {
  width: min(62vw, 46rem);
  justify-self: center; align-self: center;
  opacity: 0.09;
  transform-origin: center;
}
.umbral__sello img { width: 100%; height: auto; max-width: none; }

.umbral__luz {
  width: 120%; height: 120%;
  background:
    radial-gradient(48% 42% at 62% 34%, rgba(216,169,74,0.22) 0%, transparent 62%),
    radial-gradient(70% 60% at 24% 78%, rgba(30,58,102,0.5) 0%, transparent 66%);
  filter: blur(10px);
}
.umbral__velo {
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(8,14,25,0.85) 0%, transparent 58%),
    linear-gradient(90deg, rgba(8,14,25,0.75) 0%, rgba(8,14,25,0.25) 46%, transparent 74%);
}

.umbral__copia {
  align-self: center; justify-self: start;
  width: 100%; max-width: var(--sc-maxw);
  margin-inline: auto; padding-inline: var(--sc-gutter);
  padding-top: 4rem;
}
@media (max-width: 700px) { .umbral__copia { padding-top: 5rem; } }


/* -------------------------------------------------------- 2 · EL FRENO -- */
.freno { display: grid; place-items: center; }
.freno > * { grid-area: 1 / 1; }

/* Un manuscrito que se escribe con el scroll. Las líneas por debajo del
   cursor todavía no existen: es el documento parado, dibujado. */
.freno__manuscrito {
  width: min(92vw, 46rem); height: 74vh;
  justify-self: center; align-self: center;
  display: flex; flex-direction: column; justify-content: center; gap: 0.72rem;
  /* Textura de fondo, no competencia: por encima de esto el texto se lee peor
     de lo que el manuscrito aporta. */
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 78%, transparent 100%);
}
.freno__manuscrito i {
  display: block; height: 2px; flex: none;
  background: rgba(163,176,198,0.30);
  border-radius: 2px;
  transform-origin: 0 50%;
}
/* Escritas: las que ya pasó el cursor. La última en escribirse va en oro. */
.freno__manuscrito i.escrita { background: rgba(163,176,198,0.55); }
.freno__manuscrito i.cursor  { background: var(--oro); box-shadow: 0 0 8px rgba(216,169,74,0.35); }
.freno__manuscrito i.tachada {
  background: rgba(163,176,198,0.22);
  position: relative;
}

.freno__copia {
  align-self: center; justify-self: center;
  width: 100%; max-width: var(--sc-maxw);
  padding-inline: var(--sc-gutter);
  display: grid; place-items: center;
  text-align: center;
}
.freno__copia > * { grid-area: 1 / 1; }

.freno__linea {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); line-height: 1.16; letter-spacing: -0.02em;
  margin: 0; max-width: 22ch; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(8,14,25,0.9), 0 0 70px rgba(8,14,25,0.8);
}
.freno__linea--giro { color: var(--oro); max-width: 24ch; }


/* ------------------------------------------------------- 3 · EL MÉTODO -- */
/* Sin position aquí: .sc-stage es sticky y un `position: relative` propio lo
   pisa, el acto deja de anclarse y la sección se queda en 3000px de vacío.
   Un elemento sticky ya es contenedor de sus hijos absolutos. */
.metodo { display: flex; align-items: center; }
.metodo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 46% at 50% 50%, rgba(30,52,92,0.45) 0%, transparent 72%);
}
/* El carril por el que pasan las fases. Sin él, la escena entra en blanco. */
.metodo::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(216,169,74,0.10) 12%,
    rgba(216,169,74,0.38) 50%, rgba(216,169,74,0.10) 88%, transparent 100%);
}
.metodo__riel { position: relative; z-index: 1; }
.metodo__riel {
  display: flex; align-items: stretch; gap: var(--sc-6);
  padding-inline: var(--sc-gutter);
}
.metodo__riel > * { flex: none; }

.metodo__intro {
  width: clamp(17rem, 30vw, 26rem); align-self: center; padding-right: var(--sc-5);
}
.metodo__intro .titular { margin-bottom: var(--sc-5); font-size: var(--sc-t-xl); max-width: 16ch; }

.fase {
  width: clamp(15.5rem, 23vw, 20rem); align-self: center;
  min-height: min(21rem, 44vh);   /* llena la escena sin ahuecar la tarjeta */
  display: flex; flex-direction: column;
  padding: var(--sc-6) var(--sc-5);
  background: linear-gradient(180deg, rgba(30,45,72,0.62) 0%, rgba(17,27,45,0.62) 100%);
  border: var(--hilo-fino); border-top: 1px solid rgba(216,169,74,0.55);
  border-radius: var(--sc-r-md);
  box-shadow: inset 0 1px 0 rgba(242,238,230,0.07),
              0 3px 6px hsl(var(--sc-shadow-color) / 0.4),
              0 24px 50px -22px hsl(var(--sc-shadow-color) / 0.7);
  backdrop-filter: blur(2px);
}
.fase__n {
  font-family: var(--sc-font-display); font-size: var(--sc-t-xl);
  font-variant-numeric: tabular-nums; color: var(--oro);
  margin: 0 0 var(--sc-3); line-height: 1;
}
.fase__titulo {
  font-family: var(--sc-font-display); font-weight: 400;
  font-size: var(--sc-t-xl); line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 var(--sc-3);
}
.fase__texto {
  margin: 0 0 var(--sc-5); font-size: var(--sc-t-sm); line-height: 1.58;
  color: var(--sc-ink-soft); text-wrap: pretty;
}
.fase__entrega {
  margin: auto 0 0; padding-top: var(--sc-3); border-top: var(--hilo-fino);
  font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--oro);
}

.metodo__cierre {
  width: clamp(16rem, 25vw, 21rem); align-self: center;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-5);
}
.metodo__cierre-texto {
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg);
  line-height: 1.32; margin: 0; text-wrap: pretty;
}

/* Llegada escalonada: el viaje lateral se lee como un cajón que se abre, no
   como un carrusel. El primero va exento y el suelo de opacidad evita que
   una tarjeta sin asentar parezca que no cargó. */
@media (prefers-reduced-motion: no-preference) {
  .acto--metodo .fase, .acto--metodo .metodo__cierre {
    opacity: calc(0.55 + 0.45 * min(1, var(--sc-p, 0) * 2.6));
    transform: translateY(calc((1 - min(1, var(--sc-p, 0) * 2.4)) * 16px));
  }
}


/* -------------------------------------------------------- 4 · EL PAPEL --
   El único corte duro de la travesía. Redefinir un token en un subárbol no
   re-entinta lo heredado, así que aquí se reafirma color. */
.acto--papel {
  background: var(--papel);
  --sc-ink: #16233A;
  --sc-ink-soft: #55617A;
  color: #16233A;
  padding-block: clamp(4.5rem, 9vw, 9rem);
}
.anatomia__cabeza { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.acto--papel .titular { max-width: 22ch; }
.anatomia__bajada {
  font-size: var(--sc-t-lg); line-height: 1.5; color: #55617A;
  max-width: 48ch; margin: var(--sc-5) 0 0; text-wrap: pretty;
}

.anatomia__pliego { display: grid; gap: var(--sc-7); grid-template-columns: 1fr; }
@media (min-width: 940px) {
  .anatomia__pliego {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--sc-9); align-items: start;
  }
}

/* ---- el documento vivo: se arma banda a banda mientras se baja --------- */
.documento { order: -1; align-self: stretch; }
.documento__sujeta { position: sticky; top: 5.5rem; }

.documento__hoja {
  aspect-ratio: 3 / 4;
  background: linear-gradient(178deg, #FFFDF8 0%, #F1EBDE 100%);
  border: 1px solid rgba(22,35,58,0.12);
  border-radius: var(--sc-r-sm);
  box-shadow: 0 2px 4px rgba(22,35,58,0.10),
              0 26px 50px -26px rgba(22,35,58,0.42);
  padding: 9%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.documento__banda {
  display: block; height: 4px; border-radius: 3px;
  background: rgba(22,35,58,0.10);
  position: relative; overflow: hidden;
  transition: background var(--sc-d-base) var(--sc-ease-out);
}
.documento__banda::after {
  content: ""; position: absolute; inset: 0;
  background: var(--oro-hondo);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 520ms var(--sc-ease-out);
}
.documento__banda.esta-lista::after { transform: scaleX(1); }
.documento__banda.es-actual { box-shadow: 0 0 14px rgba(185,139,46,0.55); }
/* Las bandas imitan la mancha de un documento real: no todas llenan el ancho. */
.documento__banda:nth-child(1) { width: 62%; margin-inline: auto; }
.documento__banda:nth-child(2) { width: 84%; }
.documento__banda:nth-child(3) { width: 100%; }
.documento__banda:nth-child(4) { width: 96%; }
.documento__banda:nth-child(5) { width: 100%; }
.documento__banda:nth-child(6) { width: 88%; }
.documento__banda:nth-child(7) { width: 94%; }
.documento__banda:nth-child(8) { width: 70%; }

.documento__pie {
  margin: var(--sc-4) 0 0; text-align: center;
  font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gris-papel); font-variant-numeric: tabular-nums;
}
.documento__pie span { color: var(--oro-papel); font-weight: 600; }

@media (max-width: 939px) {
  /* En pantalla estrecha el documento se tumba: una franja fina de ocho
     tramos, fijada bajo la marca, que se llena igual. */
  .documento__sujeta { position: sticky; top: 4.2rem; z-index: 5;
    background: var(--papel); padding-block: var(--sc-3); }
  .documento__hoja {
    aspect-ratio: auto; flex-direction: row; align-items: center; gap: 4px;
    padding: var(--sc-2) var(--sc-3); box-shadow: none;
    background: rgba(22,35,58,0.04); border-color: rgba(22,35,58,0.08);
  }
  .documento__banda { flex: 1; width: auto !important; height: 5px; }
  .documento__pie { margin-top: var(--sc-2); text-align: left; }
}

/* ---- las ocho partes -------------------------------------------------- */
.anatomia { list-style: none; margin: 0; padding: 0; counter-reset: parte; }

.parte {
  display: grid; align-items: start;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: var(--sc-3) var(--sc-5);
  padding: var(--sc-6) 0;
  border-top: 1px solid rgba(22,35,58,0.12);
  opacity: 0.42;
  transform: translateY(12px);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
.parte:last-child { border-bottom: 1px solid rgba(22,35,58,0.12); }
.parte.se-abre { opacity: 1; transform: none; }

@media (min-width: 700px) {
  .parte { grid-template-columns: 3rem minmax(0, 1fr) 7rem; align-items: baseline; }
}

.parte__n {
  margin: 0; font-family: var(--sc-font-display);
  font-size: var(--sc-t-lg); font-variant-numeric: tabular-nums;
  color: #79808F; line-height: 1.1;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.parte.se-abre .parte__n { color: var(--oro-papel); }

.parte__cuerpo h3 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: var(--sc-t-xl); line-height: 1.14; letter-spacing: -0.015em;
  color: #16233A;
}
.parte__cuerpo p {
  margin: 0; font-size: var(--sc-t-base); line-height: 1.58;
  color: #55617A; max-width: 52ch; text-wrap: pretty;
}

.parte__marca {
  margin: 0; grid-column: 2;
  font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--oro-tenue);
}
@media (min-width: 700px) {
  .parte__marca { grid-column: 3; text-align: right; }
}

/* La parte donde se detiene la mitad de las tesis se marca, no se explica. */
.parte--clave { position: relative; }
.parte--clave::before {
  content: ""; position: absolute; left: -1rem; top: var(--sc-6); bottom: var(--sc-6);
  width: 2px; background: var(--oro-hondo); border-radius: 2px;
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 700ms var(--sc-ease-out);
}
.parte--clave.se-abre::before { transform: scaleY(1); }

.papel__campos {
  display: grid; gap: var(--sc-6); margin-top: clamp(3rem, 6vw, 6rem);
  padding-top: var(--sc-7); border-top: 1px solid rgba(22,35,58,0.14);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.papel__campos h4 {
  margin: 0 0 var(--sc-2); font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oro-tenue);
}
.papel__campos p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; color: #55617A; }

/* clip-path recorta la caja, no la tinta: el reveal necesita ese aire. */
[data-sc-reveal] { padding-block: 3px; }


/* ------------------------------------------------------- 5 · EL COTIZA -- */
.acto--cotiza { padding-block: clamp(5rem, 10vw, 11rem); position: relative; }
.acto--cotiza::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 44% at 74% 28%, rgba(216,169,74,0.13) 0%, transparent 64%);
}
.acto--cotiza > * { position: relative; }

.cotiza__cabeza { margin-bottom: var(--sc-8); }
.cotiza__cabeza .titular { max-width: 24ch; }

.cotiza__pliego { display: grid; gap: var(--sc-8); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) {
  .cotiza__pliego { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: var(--sc-8); }
}

/* ------------------------------------------------------------ encuesta -- */
.encuesta { display: flex; flex-direction: column; gap: var(--sc-7); }
.campo { border: 0; margin: 0; padding: 0; }
.campo__titulo {
  display: flex; align-items: center; gap: var(--sc-3); width: 100%;
  font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.2;
  padding: 0 0 var(--sc-4); margin: 0; color: var(--sc-ink);
}
.campo__n {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(216,169,74,0.16); color: var(--oro);
  border: 1px solid rgba(216,169,74,0.4);
  font-family: var(--sc-font-text); font-size: 0.72rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.campo__ayuda { margin: calc(var(--sc-2) * -1) 0 var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }

.opciones { display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.opciones--rejilla { display: grid; gap: var(--sc-2); grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }

.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion span {
  display: block; padding: var(--sc-3) var(--sc-4);
  border: var(--hilo); border-radius: var(--sc-r-md);
  background: rgba(19,31,51,0.6);
  font-size: var(--sc-t-sm); line-height: 1.3; color: var(--sc-ink-soft);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              background var(--sc-d-fast) var(--sc-ease-out),
              color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .opcion:hover span { border-color: rgba(216,169,74,0.55); color: var(--sc-ink); }
}
.opcion input:checked + span {
  border-color: var(--oro); background: rgba(216,169,74,0.15);
  color: var(--sc-ink); font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(216,169,74,0.7);
}
.opcion input:focus-visible + span { outline: 2px solid var(--oro); outline-offset: 2px; }
.opcion:active span { transform: translateY(1px); }

.campo__texto { margin-top: var(--sc-4); }
.campo__doble { display: grid; gap: var(--sc-4); grid-template-columns: 1fr; }
@media (min-width: 620px) { .campo__doble { grid-template-columns: 1fr 1fr; } }

.etiqueta {
  display: block; margin-bottom: var(--sc-2);
  font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.etiqueta__opt { text-transform: none; letter-spacing: 0; }

.entrada {
  width: 100%; padding: var(--sc-3) var(--sc-4);
  background: rgba(8,14,25,0.55);
  border: var(--hilo); border-radius: var(--sc-r-md);
  font-size: var(--sc-t-base); color: var(--sc-ink); caret-color: var(--oro);
  transition: border-color var(--sc-d-fast) var(--sc-ease-out),
              box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.entrada::placeholder { color: rgba(163,176,198,0.55); }
.entrada:hover { border-color: rgba(242,238,230,0.28); }
.entrada:focus { outline: none; border-color: var(--oro);
  box-shadow: 0 0 0 3px rgba(216,169,74,0.22); }
.entrada:focus-visible { outline: none; }
#campo-titulo[hidden] { display: none; }

.encuesta__envio {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-3);
  padding-top: var(--sc-5); border-top: var(--hilo-fino);
}
.encuesta__nota { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 46ch; }
.encuesta__error { margin: 0; font-size: var(--sc-t-sm); color: #F0A58C; font-weight: 500; }


/* ------------------------------------------ movimiento firma: la portada --
   En toda la travesía no hay otro objeto iluminado. La hoja flota sobre el
   campo oscuro y se inclina hacia el puntero: es lo único que responde a que
   haya alguien delante. */
.portada-viva { align-self: stretch; }
.portada-viva__sujeta { position: sticky; top: 6rem; }
@media (max-width: 999px) { .portada-viva__sujeta { position: static; } }

.portada-viva__rotulo {
  font-size: var(--sc-t-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 var(--sc-3);
}

.caratula__caja { perspective: 1100px; }

.caratula {
  background: linear-gradient(178deg, #FFFDF8 0%, #F4EFE4 100%);
  color: var(--tinta-papel);
  border-radius: var(--sc-r-sm);
  padding: clamp(1.5rem, 3.2vw, 2.6rem);
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / 0.5),
              0 40px 80px -30px rgba(0,0,0,0.85),
              0 0 90px -30px rgba(216,169,74,0.4);
  position: relative;
  display: flex; flex-direction: column; gap: var(--sc-4);
  text-align: center; min-height: 30rem;
}
.caratula::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(185,139,46,0.42); border-radius: 2px; pointer-events: none;
}

.caratula__uni {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tinta-papel-suave); margin: var(--sc-2) 0 0;
}
.caratula__filete-corto { width: 3rem; height: 1px; margin: 0 auto; background: var(--oro-hondo); }

.caratula__titulo {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem); line-height: 1.22; letter-spacing: -0.01em;
  margin: var(--sc-3) 0; color: var(--tinta-papel); text-wrap: balance;
}
.caratula__optar {
  font-family: var(--sc-font-display); font-style: italic;
  font-size: var(--sc-t-sm); line-height: 1.5; color: var(--tinta-papel-suave); margin: 0;
}

.caratula__meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-4) var(--sc-5);
  margin-top: var(--sc-5); padding-top: var(--sc-5);
  border-top: 1px solid rgba(22,35,58,0.12); text-align: left;
}
.caratula__meta span, .caratula__alcance span {
  display: block; font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gris-papel); margin-bottom: 2px;
}
.caratula__meta p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.35; color: var(--tinta-papel); }
.caratula__alcance { text-align: left; }
.caratula__alcance p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.45; color: var(--tinta-papel); }

.caratula__pie {
  margin-top: auto; padding-top: var(--sc-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--sc-2);
}
.caratula__pie img { width: 5.5rem; height: auto; opacity: 0.85; }
.caratula__pie p {
  margin: 0; font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gris-papel);
}

.esta-vacio { color: #9AA3B4 !important; font-style: italic; }

.se-escribe { animation: escribir 460ms var(--sc-ease-out) both; }
@keyframes escribir {
  from { opacity: 0.2; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.caratula__barra {
  height: 2px; margin-top: var(--sc-5);
  background: rgba(22,35,58,0.12); border-radius: 2px; overflow: hidden;
}
.caratula__barra-relleno {
  display: block; height: 100%; width: 0%;
  background: var(--oro-hondo);
  transition: width 420ms var(--sc-ease-out);
}
.caratula__completo {
  margin: 0; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gris-papel); font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------- 6 · EL CIERRE -- */
.cierre {
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(60% 50% at 50% 42%, rgba(30,52,92,0.55) 0%, transparent 70%),
    var(--marino-hondo);
}
.cierre__centro {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sc-6); text-align: center;
  padding: var(--sc-8) var(--sc-gutter) var(--sc-6);
}
.cierre__marca { width: clamp(9rem, 15vw, 13rem); height: auto; }
.cierre__frase { max-width: 22ch; font-size: var(--sc-t-xl); }

.pie {
  padding: var(--sc-6) var(--sc-gutter) max(var(--sc-5), env(safe-area-inset-bottom));
  border-top: var(--hilo-fino);
}
.pie__datos {
  display: grid; gap: var(--sc-5); margin: 0 auto; max-width: var(--sc-maxw);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.pie__datos dt {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8E9AB0; margin-bottom: var(--sc-1);
}
.pie__datos dd { margin: 0; font-size: var(--sc-t-sm); }
.pie__datos a { color: var(--oro); text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pie__datos a:hover { text-decoration: underline; } }
.pie__legal {
  margin: var(--sc-5) auto 0; max-width: var(--sc-maxw);
  font-size: var(--sc-t-xs); color: #8E9AB0;
}


/* ====================================================== movimiento menos */
@media (prefers-reduced-motion: reduce) {
  .se-escribe { animation: none; }
  .caratula__barra-relleno { transition: none; }
  .boton, .opcion span, .entrada, .chapa__cta { transition-duration: 1ms; }
}


/* ============================================================= DINÁMICA ==
   Lo que el kit no cubre se conduce desde --sc-p, que cada acto publica en
   su propio elemento. Nada de esto toca el motor. */

/* El sello del umbral gira y se acerca despacio mientras dura el acto: es el
   fondo respirando, no un elemento animándose. */
.acto--umbral .umbral__sello {
  transform: rotate(calc(var(--sc-p, 0) * 7deg)) scale(calc(1 + var(--sc-p, 0) * 0.14));
  opacity: calc(0.09 + var(--sc-p, 0) * 0.05);
}
/* La copia por encima de la luz del puntero, o el foco la tiñe. */
.umbral__copia { position: relative; z-index: 3; }

/* El velo del umbral se cierra al final del acto, de modo que la salida hacia
   el acto siguiente sea un fundido de la escena y no un corte. */
.acto--umbral .umbral__velo { opacity: calc(0.55 + var(--sc-p, 0) * 0.45); }

/* Las fases no solo viajan de lado: giran un grado y medio al entrar, que es
   lo que separa un cajón que se abre de un carrusel. */
.acto--metodo .fase {
  transform:
    translateY(calc((1 - min(1, var(--sc-p, 0) * 2.4)) * 16px))
    rotate(calc((1 - min(1, var(--sc-p, 0) * 2.4)) * -1.4deg));
}
.acto--metodo .fase:first-of-type { transform: none; opacity: 1; }

/* Las líneas del freno se acercan un punto a medida que el acto avanza. */
.acto--freno .freno__copia { transform: scale(calc(1 + var(--sc-p, 0) * 0.05)); }

/* El manuscrito se inclina apenas: el papel nunca está perfectamente recto. */
.acto--freno .freno__manuscrito { transform: rotate(-0.6deg); }

/* La chapa se retira al bajar y vuelve al subir: deja la escena limpia
   mientras se avanza y devuelve la acción en cuanto se duda. */
.chapa { transition: transform var(--sc-d-slow) var(--sc-ease-out),
                     opacity var(--sc-d-base) var(--sc-ease-out); }
.chapa.se-esconde { transform: translateY(-115%); opacity: 0; }


/* ========================================================= MULTIPANTALLA ==
   El teléfono no hereda el aire del escritorio, y los objetos que en grande
   son escena en pequeño tienen que seguir siendo legibles. */

/* Dedos, no punteros: 44px mínimo en todo lo que se toca. */
@media (pointer: coarse) {
  .opcion span { padding: var(--sc-4) var(--sc-4); min-height: 44px; display: flex; align-items: center; }
  .entrada { padding: var(--sc-4); font-size: 16px; }   /* 16px evita el zoom de iOS */
  .boton { padding: var(--sc-4) var(--sc-6); min-height: 48px; }
  .chapa__cta { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 860px) {
  .chapa { padding: var(--sc-3) var(--sc-gutter); }
  .chapa__marca img { width: 8.5rem; }

  .umbral__sello { width: 116vw; opacity: 0.11; }
  .umbral__copia { padding-top: 4.5rem; }
  .bajada { font-size: var(--sc-t-base); margin-bottom: var(--sc-6); }

  .freno__linea { font-size: var(--sc-t-xl); max-width: 17ch; }
  .freno__manuscrito { width: 84vw; height: 66vh; opacity: 0.16; }

  .metodo__intro { width: 78vw; padding-right: 0; }
  .metodo__intro .titular { font-size: var(--sc-t-lg); }
  .fase { width: 76vw; max-width: 21rem; padding: var(--sc-5) var(--sc-5); }
  .metodo__cierre { width: 76vw; max-width: 21rem; }

  .caratula { min-height: 0; padding: var(--sc-6) var(--sc-5); }
  .caratula__meta { gap: var(--sc-4); }
  .portada-viva { margin-top: var(--sc-6); }

  .cierre__centro { gap: var(--sc-5); padding-top: var(--sc-7); }
  .cierre__frase { font-size: var(--sc-t-lg); }
  .pie__datos { gap: var(--sc-4); }
}

@media (max-width: 520px) {
  .freno__linea { font-size: var(--sc-t-lg); max-width: 20ch; }
  .campo__titulo { font-size: var(--sc-t-base); }
  .opciones--rejilla { grid-template-columns: 1fr; }
  .caratula__meta { grid-template-columns: 1fr; }
  .cierre__marca { width: 8rem; }
}

/* Alturas cortas: un portátil de 13 pulgadas en horizontal es tan estrecho
   de alto como un teléfono, y el umbral no debe desbordar ahí tampoco. */
@media (max-height: 700px) and (min-width: 861px) {
  .titular--xl { font-size: var(--sc-t-2xl); }
  .bajada { margin-bottom: var(--sc-5); }
}


/* ====================================================== movimiento menos */
@media (prefers-reduced-motion: reduce) {
  .acto--umbral .umbral__sello,
  .acto--metodo .fase,
  .acto--freno .freno__copia,
  .acto--freno .freno__manuscrito { transform: none; }
  .parte { opacity: 1; transform: none; transition: none; }
  .documento__banda::after { transition: none; }
  .chapa { transition: none; }
}