/* The Golden Syndicate · estilos
   Paleta y tipografía según ../../marca/identidad.md
   Móvil primero: se diseña a 390 px y se crece desde ahí.

   El movimiento tiene una sola regla: nada se mueve por decorar. Cada revelado
   sigue el orden en que se lee, y el trazo del oro dibuja el camino del club. */

:root {
  --negro:        #0A0A0B;
  --azul-noche:   #04141D;
  --oro:          #D2A64B;
  --oro-claro:    #E7C67F;
  --oro-profundo: #8C6A22;
  --hueso:        #F2EDE3;
  --gris:         #8A8578;
  --gris-claro:   #6F6B60;

  --superficie:   #121214;
  --borde:        rgba(210, 166, 75, 0.22);
  --borde-tenue:  rgba(242, 237, 227, 0.08);

  /* Bodoni Moda da la gravedad sin el disfraz heráldico de las capitales
     romanas, que es el uniforme de la página de lujo generada.
     IBM Plex Mono es la voz del terminal: rótulos, cifras y estados. */
  /* Una sola familia para leer, con dos pesos de trabajo. Manrope tiene el flow
     que pediste sin ser Inter ni Poppins, que son literalmente la tipografía por
     defecto de las páginas generadas. */
  --titular: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --texto:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --ancho: 64rem;
  --gutter: 1.5rem;

  --salida: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 780ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html { background: var(--negro); overflow-x: clip; }

body {
  margin: 0;
  background: transparent;
  color: var(--hueso);
  font-family: var(--texto);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Grano: rompe el plano digital. Es lo único puramente atmosférico de la página
   y por eso va casi invisible. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--oro-claro); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:where(a, button, input, summary):focus-visible {
  outline: 2px solid var(--oro-claro);
  outline-offset: 3px;
}

main, .pie, .barra, .saltar { position: relative; z-index: 1; }

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: 4.5rem; }

/* La barra flota encima: sin esto, cualquier ancla aterriza con el titular
   tapado. 66px de barra + 12px de aire + respiro. */
:target, section[id], h2[id], main { scroll-margin-top: 6.5rem; }
@media (min-width: 48rem) { .seccion { padding-block: 7rem; } }

/* ---------- tipografía ---------- */

h1, h2, h3 {
  font-family: var(--titular);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Grande y ligero, como lo hace Topstep con su h1 de 80 px a peso 500.
   El peso alto a tamaño grande se lee como grito, no como autoridad. */
h1 {
  font-size: clamp(2.6rem, 10vw, 4.75rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

h2 { font-size: clamp(1.9rem, 6.5vw, 3rem); letter-spacing: -0.03em; }
h3 { font-size: 1.0625rem; letter-spacing: 0.16em; text-transform: uppercase; }

p { margin: 0 0 1.15rem; max-width: 40rem; }

/* Los rótulos encima de cada titular se quitaron: un eyebrow por sección es el
   tic que más delata a una página generada. La página queda sin nada que la
   "anuncie" y las secciones se separan por espacio y ritmo. */

.entradilla { font-size: 1.15rem; color: var(--hueso); }
.apunte { font-size: 0.9375rem; color: var(--gris); }

/* ---------- marca ---------- */

.marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-block: 1.75rem;
}

.marca .marca__leon { width: 30px; height: 49px; color: var(--oro); stroke-width: 1.5; }

.marca__nombre {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--hueso);
}

/* ---------- botón: uno solo, repetido ---------- */

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.9rem 1.9rem;
  border: 0;
  border-radius: 2px;
  background: var(--oro);
  color: var(--negro);
  font-family: var(--texto);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.25s var(--salida);
}

/* Barrido de oro claro: el botón se ilumina desde donde entra el cursor. */
.boton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--oro-claro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--salida);
}

.boton:hover::before, .boton:focus-visible::before { transform: scaleX(1); }
.boton:disabled { opacity: 0.55; cursor: progress; }
.boton:disabled::before { transform: scaleX(0); }
.boton--ancho { width: 100%; }

/* ---------- el flujo ----------
   Nada "aparece". Todo interpola en continuo contra --p, que el reloj de
   movimiento.js recalcula cada fotograma para cada pieza. El scroll mueve un
   campo entero, no enciende elementos de a uno.

   Cuatro modos de entrada, no uno. El mismo fade-in en cada elemento es uno de
   los tics que delatan a una página generada; pero los cuatro corren contra el
   mismo reloj, así que se sigue sintiendo un solo movimiento. */

[data-flujo] {
  --p: 0;
  --y: 30px;
  --x: 0px;
  --escala: 1;
  opacity: calc(var(--p) * 1.4);
  transform:
    translate3d(calc((1 - var(--p)) * var(--x)), calc((1 - var(--p)) * var(--y)), 0)
    scale(calc(1 - (1 - var(--p)) * (1 - var(--escala))));
}

[data-flujo="rotulo"] { --y: 14px; }                      /* los rótulos casi no viajan */
[data-flujo="lento"]  { --y: 44px; }                      /* el texto de lectura sube más */
[data-flujo="lateral"] { --y: 12px; --x: -26px; }          /* las tiras entran de costado */
[data-flujo="hondo"]  { --y: 52px; --escala: 0.965; }      /* los bloques grandes vienen de atrás */
[data-flujo="traza"]  { --y: 0px; transform: scaleX(var(--p)); transform-origin: left; }

/* El titular del héroe entra desenfocado y se afila. Es lo único que no
   depende del scroll: pasa una vez, al cargar. */
.linea { display: block; }

.linea > span {
  display: block;
  opacity: 0;
  filter: blur(16px);
  transform: translateY(0.32em);
  transition: opacity 1.1s var(--salida), filter 1.1s var(--salida), transform 1.1s var(--salida);
  transition-delay: var(--retraso, 0ms);
}

.cargado .linea > span { opacity: 1; filter: blur(0); transform: none; }
.linea--acento > span { color: var(--oro); }

.filete {
  width: 2.5rem;
  height: 2px;
  border-radius: 2px;
  background: var(--oro);
  border: 0;
  margin: 0 0 2rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-flujo] { --p: 1 !important; opacity: 1; transform: none; }
  [data-flujo="traza"] { transform: scaleX(1); }
  .linea > span { opacity: 1; filter: none; transform: none; transition: none; }
  .boton::before { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- héroe ---------- */

.heroe { position: relative; isolation: isolate; padding-block: 1.5rem 4.5rem; }
.heroe h1 { margin-bottom: 1.5rem; }
.heroe .entradilla { margin-bottom: 2.25rem; }
.heroe__micro { margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--gris); }

/* ---------- video ---------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 3px;
  overflow: hidden;
}

.video video { width: 100%; height: 100%; object-fit: cover; }

.video__pendiente {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  margin: 0;
  max-width: none;
  text-align: center;
  color: var(--gris);
  font-size: 0.9375rem;
}

/* ---------- la consola: el camino en un solo bloque ---------- */

.consola {
  margin-top: 2.5rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--superficie);
  overflow: hidden;
}

.consola__cabeza {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.5rem 0;
}

@media (min-width: 40rem) { .consola__cabeza { padding: 2rem 2.5rem 0; gap: 1.75rem; } }

/* El arco de progreso lleva el número del paso dentro. */
.dial { position: relative; flex: none; width: 4rem; height: 4rem; }
@media (min-width: 40rem) { .dial { width: 5rem; height: 5rem; } }

.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 2; }
.dial__pista { stroke: rgba(210, 166, 75, 0.18); }

.dial__avance {
  stroke: var(--oro);
  stroke-linecap: round;
  stroke-dasharray: 182.2;   /* 2·π·29, el radio del círculo del dial */
  transition: stroke-dashoffset 0.55s var(--salida);
}

.dial__numero {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--oro);
}

@media (min-width: 40rem) { .dial__numero { font-size: 1.375rem; } }

.consola__etiqueta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
  margin: 0 0 0.35rem;
}

.consola__titulo {
  font-family: var(--titular);
  font-size: clamp(1.2rem, 4.2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--hueso);
  margin: 0;
}

.consola__cuerpo { padding: 1.5rem; }
@media (min-width: 40rem) { .consola__cuerpo { padding: 1.75rem 2.5rem 2rem; } }

.consola__cuerpo p { color: var(--gris); margin: 0 0 1rem; max-width: 38rem; }
.consola__cuerpo p:last-child { margin-bottom: 0; }
.consola__cuerpo strong { color: var(--hueso); font-weight: 400; }

.consola__lista { margin: 0; padding-left: 1.1rem; color: var(--gris); }
.consola__lista li { margin-bottom: 0.4rem; }

/* Con JS: se ve un paso a la vez y entra deslizando. */
.consola--viva .paso { display: none; }
.consola--viva .paso[data-visible] { display: block; animation: entra-paso 0.45s var(--salida) both; }

@keyframes entra-paso {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.consola--viva .paso[data-atras] { animation-name: entra-paso-atras; }

@keyframes entra-paso-atras {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* Sin JS los cuatro pasos quedan uno debajo de otro, con su número. */
.consola:not(.consola--viva) .consola__cabeza,
.consola:not(.consola--viva) .consola__pie { display: none; }
.consola:not(.consola--viva) .paso { padding-bottom: 1.5rem; }
.consola:not(.consola--viva) .paso__rotulo { display: block; }
.paso__rotulo {
  display: none;
  font-family: var(--titular);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--oro);
  margin: 0 0 0.5rem;
}

.consola__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--borde-tenue);
}

@media (min-width: 40rem) { .consola__pie { padding: 1.25rem 2.5rem; } }

.puntos { display: flex; gap: 1.5rem; margin-left: 0.625rem; }

.puntos button {
  appearance: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.625rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.puntos button::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: rgba(210, 166, 75, 0.28);
  transition: background-color 0.35s ease, transform 0.35s var(--salida);
}

.puntos button[aria-current="true"]::before { background: var(--oro); transform: scale(1.35); }

.mandos { display: flex; gap: 0.5rem; }

.mando {
  appearance: none;
  min-height: 2.75rem;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: 100px;
  background: none;
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 0.9375rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, transform 0.15s ease;
}

.mando:hover:not(:disabled) { border-color: var(--oro); color: var(--oro-claro); }
.mando:active:not(:disabled) { transform: scale(0.97); }
.mando:disabled { opacity: 0.3; cursor: default; }

.mando--siguiente { background: var(--oro); border-color: var(--oro); color: var(--negro); font-weight: 500; }
.mando--siguiente:hover:not(:disabled) { background: var(--oro-claro); border-color: var(--oro-claro); color: var(--negro); }

.nota-riesgo {
  margin: 1.75rem 0 0;
  padding: 1.15rem 1.35rem;
  border-left: 1px solid var(--oro-profundo);
  font-size: 0.875rem;
  color: var(--gris);
  max-width: none;
}

/* ---------- quién está detrás ---------- */

.cristian { display: grid; gap: 2rem; }

@media (min-width: 48rem) {
  .cristian { grid-template-columns: 1fr 1.4fr; align-items: start; gap: 3.5rem; }
}

.cristian__retrato {
  aspect-ratio: 4 / 5;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 3px;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  color: var(--gris);
  font-size: 0.875rem;
}

/* ---------- preguntas ---------- */

.preguntas { margin-top: 2.5rem; }

.pregunta { border-bottom: 1px solid var(--borde-tenue); }

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  color: var(--hueso);
  transition: color 0.3s ease;
}

.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--oro-claro); }

.pregunta summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  background:
    linear-gradient(var(--oro), var(--oro)) center/100% 1px no-repeat,
    linear-gradient(var(--oro), var(--oro)) center/1px 100% no-repeat;
  transition: transform 0.4s var(--salida);
}

.pregunta[open] summary::after { transform: rotate(135deg); }

.pregunta__cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--salida); }
.pregunta[open] .pregunta__cuerpo { grid-template-rows: 1fr; }
.pregunta__cuerpo > div { overflow: hidden; }
.pregunta__cuerpo p { margin: 0 0 1.35rem; color: var(--gris); font-size: 0.9375rem; }

/* ---------- formulario ---------- */

.captura { position: relative; }

.formulario { margin-top: 2rem; max-width: 30rem; }

.campo { margin-bottom: 1.25rem; }

.campo label {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: 0.45rem;
}

.campo input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: 2px;
  color: var(--hueso);
  font-family: var(--texto);
  font-size: 1rem;              /* 16px o iOS hace zoom al enfocar */
  transition: border-color 0.3s ease;
}

.campo input::placeholder { color: var(--gris-claro); }
.campo input:focus { border-color: var(--oro); outline: none; }
.campo input[aria-invalid="true"] { border-color: #C46A5A; }

.campo__error { display: block; min-height: 1.2rem; margin-top: 0.35rem; font-size: 0.8125rem; color: #E09A8B; }

.formulario__aviso { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--gris); }

.formulario__fallo {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border: 1px solid #C46A5A;
  border-radius: 2px;
  font-size: 0.9375rem;
  color: #E09A8B;
}

.trampa { position: absolute; left: -9999px; opacity: 0; }

/* ---------- pie ---------- */

.pie { padding-block: 4rem 3rem; }
.pie p { font-size: 0.875rem; color: var(--gris); max-width: 44rem; }
.pie a { color: var(--gris); }
.pie a:hover { color: var(--oro-claro); }

.pie__descargo { border-left: 1px solid var(--oro-profundo); padding-left: 1.25rem; margin-bottom: 1.75rem; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; font-size: 0.8125rem; }

/* ---------- utilidades ---------- */

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 1rem; top: -3.5rem;
  padding: 0.6rem 1rem; background: var(--oro); color: var(--negro);
  border-radius: 2px; z-index: 20; transition: top 0.2s var(--salida);
}
.saltar:focus { top: 1rem; }

/* ==========================================================================
   Capa tomada de iagination.co
   Mismo vocabulario de movimiento y misma barra flotante de vidrio.
   Lo que NO se trae: el campo aurora de degradados de color. En turquesa es
   atmósfera; en oro es exactamente el degradado metálico que marca/identidad.md
   prohíbe — la firma visual del gurú de humo. Aquí el ambiente es una deriva
   cálida casi negra, y el brillo lo pone el grano.
   ========================================================================== */

/* ---------- el ambiente ----------
   Tres capas que nunca paran: un aliento de color, un campo de velas que corre
   detrás de todo a dos velocidades, y un velo que hunde los bordes.
   El aliento late con --respiro, la misma onda que mueve los acentos de oro:
   por eso la página se siente respirando en una sola sincronía. */

.ambiente {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.ambiente__aliento {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(38% 44% at 24% 22%, rgba(140, 106, 34, 0.16), transparent 70%),
    radial-gradient(32% 40% at 76% 68%, rgba(210, 166, 75, 0.08), transparent 70%);
  filter: blur(70px);          /* estático: animarlo obliga a re-rasterizar */
  opacity: 0.62;
  animation:
    deriva 34s ease-in-out infinite alternate,
    respira-aliento 5.5s ease-in-out infinite alternate;
}

@keyframes deriva {
  from { translate: -3% -2%; }
  to   { translate: 4% 3%; }
}

/* Los campos viven dentro del héroe, no a página completa. */
.mareas {
  position: absolute;
  top: -2rem;
  bottom: 0;
  left: 50%;
  width: 100vw;
  translate: -50% 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Se disuelve hacia abajo y hacia los lados: nunca llega al texto. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 26%, #000 62%, transparent 96%),
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent, #000 26%, #000 62%, transparent 96%),
    linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}

.marea {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}

.marea__svg { width: 50%; height: 100%; flex: none; }
.marea__svg line { stroke: var(--oro); stroke-width: 1; }
.marea__svg rect { fill: var(--oro); }

/* Dos velocidades: la de atrás casi no se mueve, la de delante corre.
   Eso da profundidad sin usar una sola imagen de fondo. */
.marea--lejos {
  opacity: 0.1;
  animation: corre 150s linear infinite, respira-lejos 5.5s ease-in-out infinite alternate;
}

.marea--cerca {
  opacity: 0.07;
  height: 62%;
  top: 20%;
  animation: corre 74s linear infinite, respira-cerca 5.5s ease-in-out infinite alternate;
}

@keyframes corre {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hunde bordes y centro para que el campo no compita con el texto. */
.ambiente__velo {
  position: absolute;
  inset: 0;
  /* Se hunde detrás del texto pero se deja ver en los huecos. Vertical, no
     radial: en móvil no hay márgenes laterales donde asomar. */
  background: linear-gradient(to bottom, rgba(10, 10, 11, 0.55), transparent 30%, transparent 70%, rgba(10, 10, 11, 0.55));
}

/* ---------- barra flotante ---------- */

.barra {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: calc(100% - 1.5rem);
  max-width: var(--ancho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid rgba(242, 237, 227, 0.09);
  border-radius: 100px;
  background: rgba(12, 12, 14, 0.55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(242, 237, 227, 0.08), 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  translate: 0 -0.75rem;
  transition: opacity 0.6s var(--salida), translate 0.6s var(--salida), border-color 0.45s ease;
}

.cargado .barra { opacity: 1; translate: 0 0; }
.barra:hover { border-color: rgba(242, 237, 227, 0.16); }

/* A 320 px el nombre se esconde y solo queda el símbolo: sin esto el enlace
   mide 26x26 y no se puede tocar con el pulgar. */
.barra__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding-right: 0.5rem;
  text-decoration: none;
}
.barra__marca .marca__leon { width: 22px; height: 36px; flex: none; color: var(--oro); }

/* El trazo no escala con el símbolo: así el mismo archivo lee a 22 px y a
   200 px. Sin esto, a tamaño de barra el trazo mediría 0,2 px. */
.marca__leon { stroke-width: 1.3; }
.marca__leon:hover { color: var(--oro-claro); }

.barra__nombre {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hueso);
  white-space: nowrap;
}

@media (max-width: 21rem) { .barra__nombre { display: none; } }

.barra .boton { min-height: 2.5rem; padding: 0.5rem 1.25rem; border-radius: 100px; font-size: 0.875rem; }

/* Retroalimentación al pulsar, como en iagination.co */
.boton:active { transform: scale(0.975); }
.boton { transition: color 0.25s var(--salida), transform 0.15s ease; }

/* Enlaces del pie con subrayado que barre */
.pie__legal a {
  position: relative;
  text-decoration: none;
}

.pie__legal a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--salida);
}

.pie__legal a:hover::after { transform: scaleX(1); transform-origin: left; }

/* El héroe deja aire para la barra flotante */
.heroe { padding-top: 5.5rem; }
@media (min-width: 48rem) { .heroe { padding-top: 7rem; } }

/* Móvil: menos coste de composición, igual que hacen ellos */
@media (max-width: 48rem) {
  .barra { backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
  .ambiente { animation-duration: 60s; filter: blur(48px); }
}

/* ==========================================================================
   Lo que se dice, mostrado
   La página hablaba de "cada idea con su razonamiento" sin enseñar jamás un
   mensaje. Estas dos piezas lo enseñan.
   ========================================================================== */

/* ---------- el gráfico del héroe ---------- */

.heroe__grafico { margin: 3rem 0 0; }
.heroe__grafico .grafico { width: 100%; height: auto; overflow: visible; }

.heroe__grafico figcaption {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--gris);
}

.vela line { stroke: var(--gris); stroke-width: 1; }
.vela rect { fill: var(--gris); stroke: none; }
.vela rect.hueca { fill: var(--negro); stroke: var(--gris); stroke-width: 1; }

/* Las velas posteriores a la pérdida del nivel se apagan: el ojo entiende
   solo con el valor, sin depender del color. */
.vela--fuera line, .vela--fuera rect { opacity: 0.4; }

.vela--idea line { stroke: var(--oro); stroke-width: 1.5; }
.vela--idea rect { fill: var(--oro); }
.vela--idea rect.hueca { fill: var(--negro); stroke: var(--oro); stroke-width: 1.5; }

.nivel__linea {
  stroke: var(--oro);
  stroke-width: 1;
  stroke-dasharray: 5 4;      /* punteada: la distingue la forma, no solo el color */
}

.marca__punto { fill: var(--oro); }

/* Los rótulos son HTML, no <text> del SVG: dentro del SVG escalarían con el
   viewBox y a 390 px quedarían en 6,6 px reales. Con ancho se cuelgan del punto
   exacto usando --y-nivel, --y-idea y --x-idea, que dejó el generador. */
/* En pantalla estrecha los rótulos van debajo, como leyenda: encima se montan
   sobre las velas. Solo cuando hay ancho se cuelgan del punto exacto. */
.rotulo {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--gris);
}

.rotulo::before {
  content: "";
  flex: none;
  width: 1.25rem;
  margin-top: 0.45rem;
  align-self: flex-start;
}

.rotulo--nivel::before {
  height: 0;
  border-top: 1px dashed var(--oro);
}

.rotulo--idea::before {
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--oro);
}

.rotulo span {
  flex: none;
  font-family: var(--mono);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--oro-profundo);
  border-radius: 2px;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
}

@media (min-width: 46rem) {
  .grafico__caja { position: relative; }

  .rotulo {
    position: absolute;
    margin: 0;
    font-size: 0.75rem;
    pointer-events: none;
  }

  .rotulo::before { display: none; }

  .rotulo--nivel {
    top: var(--y-nivel);
    right: 0;
    transform: translateY(0.4rem);
    max-width: 20rem;
    justify-content: flex-end;
  }

  .rotulo--idea {
    top: var(--y-idea);
    left: var(--x-idea);
    transform: translate(-50%, -150%);
    width: 9rem;
    justify-content: center;
    text-align: center;
    color: var(--oro-claro);
  }
}

/* ---------- el cotejo de mensajes ---------- */

.cotejo { display: grid; gap: 1.25rem; margin-top: 2.5rem; }

@media (min-width: 46rem) {
  .cotejo { grid-template-columns: 0.85fr 1.15fr; gap: 1.75rem; align-items: start; }
}

.tarjeta {
  border: 1px solid var(--borde-tenue);
  border-radius: 6px;
  background: var(--superficie);
  overflow: hidden;
}

.tarjeta--nuestra { border-color: var(--borde); }

.tarjeta__cabeza {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--borde-tenue);
  background: rgba(255, 255, 255, 0.015);
}

.tarjeta__sello {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

.tarjeta__sello--oro { color: var(--oro); }

.tarjeta__cuerpo { padding: 1.25rem; }

.mensaje__par {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--hueso);
  margin: 0 0 1rem;
}

.mensaje__dir { color: var(--oro); }

.mensaje { margin: 0; display: grid; gap: 0.4rem; }
.mensaje > div { display: flex; align-items: baseline; gap: 0.75rem; }

.mensaje dt {
  flex: none;
  min-width: 5.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris);
}

.mensaje dd { margin: 0; flex: 1; color: var(--gris); }

/* El valor va tapado, no con una raya: el argumento no está en el nivel
   sino en lo que va alrededor, y así no se publica ninguna cifra. */
.tachado {
  display: inline-block;
  width: var(--largo, 4rem);
  height: 0.6875rem;
  border-radius: 2px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(242, 237, 227, 0.22) 0 3px,
    transparent 3px 6px
  );
  vertical-align: -0.05em;
}

.tarjeta__nota {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--borde-tenue);
  font-size: 0.875rem;
  color: var(--gris);
  font-style: italic;
}

.mensaje__porques { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }

.mensaje__porques li {
  padding-left: 0.9rem;
  border-left: 1px solid var(--oro-profundo);
}

.porque__rotulo {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 0.2rem;
}

.mensaje__porques span:last-child { color: var(--hueso); font-size: 0.9375rem; }

/* El sello va dentro de la tarjeta, no al pie de la sección: estas tarjetas se
   van a capturar para anuncios y el descargo tiene que viajar con la captura. */
.tarjeta__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.tarjeta__ejemplo {
  flex: none;
  font-family: var(--mono);
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--borde-tenue);
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ---------- el interior de las tarjetas ----------
   Hereda --p de la tarjeta y se escalona con --umbral. No es una animación
   aparte: es el mismo reloj, desplazado unas centésimas por fila. */

.mensaje > div,
.mensaje__porques li,
.tarjeta__nota {
  --umbral: 0;
  opacity: calc((var(--p, 1) - var(--umbral)) * 4);
  transform: translateY(calc((1 - var(--p, 1)) * 10px));
}

.mensaje > div:nth-child(2) { --umbral: 0.06; }
.mensaje > div:nth-child(3) { --umbral: 0.12; }
.mensaje__porques li:nth-child(1) { --umbral: 0.14; }
.mensaje__porques li:nth-child(2) { --umbral: 0.2; }
.mensaje__porques li:nth-child(3) { --umbral: 0.26; }
.tarjeta__nota { --umbral: 0.16; }

/* La barra que tapa el valor se abre con el mismo avance. */
.tachado {
  transform-origin: left;
  transform: scaleX(calc(min(1, max(0, (var(--p, 1) - var(--umbral)) * 3))));
}

@media (prefers-reduced-motion: reduce) {
  .mensaje > div,
  .mensaje__porques li,
  .tarjeta__nota { opacity: 1; transform: none; }
  .tachado { transform: none; }
}

/* ---------- qué pasa al enviar ----------
   Dos marcas y dos palabras en el punto de más ansiedad de la página. */

.pasos-envio {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
}

.pasos-envio li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gris);
}

.pasos-envio li + li::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  margin-right: 0.5rem;
  background: var(--oro-profundo);
}

.pasos-envio svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- vidrio líquido ----------
   Una sola receta, tres intensidades. El brillo especular se desplaza con
   --respiro, así que el vidrio late con el resto de la página en vez de ser
   una textura muerta. */

.vidrio {
  position: relative;
  background: rgba(20, 20, 23, 0.55);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  border: 1px solid rgba(242, 237, 227, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(242, 237, 227, 0.09),
    inset 0 0 40px rgba(210, 166, 75, 0.025),
    0 18px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* El reflejo: una banda diagonal que se desliza con la respiración. */
.vidrio::before {
  content: "";
  position: absolute;
  inset: -60% -20%;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 42%,
    rgba(242, 237, 227, 0.045) 50%,
    transparent 58%
  );
  animation: respira-reflejo 5.5s ease-in-out infinite alternate;
}

.vidrio--sutil {
  background: rgba(16, 16, 19, 0.42);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(242, 237, 227, 0.05), 0 10px 30px rgba(0, 0, 0, 0.3);
}

.vidrio--fuerte {
  background: rgba(22, 22, 26, 0.62);
  border-color: rgba(210, 166, 75, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(242, 237, 227, 0.12),
    inset 0 0 60px rgba(210, 166, 75, 0.045),
    0 24px 64px rgba(0, 0, 0, 0.5);
}

/* En móvil el desenfoque cuesta caro: se baja, no se quita. */
@media (max-width: 48rem) {
  .vidrio { backdrop-filter: blur(12px) saturate(135%); -webkit-backdrop-filter: blur(12px) saturate(135%); }
}

/* Los acentos de oro laten con la misma onda que el ambiente. */
.filete { opacity: 0.72; animation: respira-filete 5.5s ease-in-out infinite alternate; }


/* ---------- el gráfico del héroe ----------
   Se dibuja con el mismo reloj que el resto: --p lo hereda de la figura y las
   velas van apareciendo de izquierda a derecha según se lee. Encima, dos
   movimientos continuos que no dependen del scroll: el nivel de invalidación
   avanza como hormigas y la marca late. */

.heroe__grafico .vela {
  /* 24 velas: con --p en 1 están todas; el barrido va de la primera a la última. */
  opacity: calc((var(--p, 1) * 30 - var(--i)) * 0.5);
}

.heroe__grafico .nivel__linea {
  stroke-dasharray: 5 4;
  animation: hormigas 3.2s linear infinite;
  opacity: calc(min(1, max(0, (var(--p, 1) - 0.55) * 4)));
}

@keyframes hormigas {
  to { stroke-dashoffset: -18; }
}

.heroe__grafico .marca__punto {
  opacity: calc(min(1, max(0, (var(--p, 1) - 0.7) * 5)));
  transform-box: fill-box;
  transform-origin: center;
  animation: late 2.6s ease-in-out infinite;
}

@keyframes late {
  0%, 100% { r: 4; }
  50%      { r: 5.4; }
}

.heroe__grafico .rotulo {
  opacity: calc(min(1, max(0, (var(--p, 1) - 0.72) * 5)));
}

/* La vela comentada respira con el resto de la página. */
.heroe__grafico .vela--idea rect { fill: var(--oro); }
/* El radio del drop-shadow ya no se anima: cambiarlo obliga a re-rasterizar el
   grupo entero en cada fotograma. Queda fijo, y late la opacidad, que sí es
   barata porque la resuelve el compositor. */
.heroe__grafico .vela--idea {
  filter: drop-shadow(0 0 4px rgba(210, 166, 75, 0.45));
  animation: respira-vela 5.5s ease-in-out infinite alternate;
}

/* ---------- más movimiento donde hacía falta ---------- */

/* El dial de la consola lleva un anillo exterior que gira despacio: la consola
   deja de verse congelada entre paso y paso. */
.dial::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(210, 166, 75, 0.22);
  animation: gira 46s linear infinite;
}

@keyframes gira {
  to { transform: rotate(1turn); }
}

/* Un pulso recorre el enlace entre los dos pasos del envío. */
.pasos-envio li + li::before {
  background: linear-gradient(90deg, var(--oro-profundo) 0 40%, var(--oro) 50%, var(--oro-profundo) 60% 100%);
  background-size: 300% 100%;
  animation: recorre 3.4s linear infinite;
}

@keyframes recorre {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

/* El subrayado de la llave elegida se desliza en vez de aparecer. */
.llaves button::after { transition: transform 0.45s var(--salida), opacity 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .heroe__grafico .nivel__linea,
  .heroe__grafico .marca__punto,
  .heroe__grafico .vela--idea,
  .dial::after,
  .pasos-envio li + li::before { animation: none; }
  .heroe__grafico .vela,
  .heroe__grafico .nivel__linea,
  .heroe__grafico .marca__punto,
  .heroe__grafico .rotulo { opacity: 1; }
}


/* ---------- el león que se dibuja ----------
   Ocupa el fondo de la sección de registro y traza su contorno según avanza
   --p. No es un adorno suelto: es el único momento de la página donde el
   símbolo aparece a tamaño grande, y llega justo cuando toca decidir. */

.captura { overflow: hidden; }

.leon-agua {
  position: absolute;
  top: 50%;
  right: -2rem;
  height: 118%;
  width: auto;
  translate: 0 -50%;
  z-index: 0;
  pointer-events: none;
  color: var(--oro);
  opacity: 0.1;
  animation: respira-leon 5.5s ease-in-out infinite alternate;
}

@media (min-width: 46rem) {
  .leon-agua { right: 4%; height: 128%; opacity: 0.13; }
}

/* El trazo avanza con el reloj. La longitud se fija por encima de la real de
   cada trazado; sobrar no se ve, faltar dejaría el dibujo cortado. */
.leon-agua path {
  stroke-width: 2.5;
  stroke-dasharray: 2600;
  stroke-dashoffset: calc(2600 * (1 - var(--p, 1)));
}

.captura .contenedor { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .leon-agua path { stroke-dashoffset: 0; }
}


/* ---------- la respiración ----------
   Un ciclo de 11 s (5,5 s de ida y 5,5 de vuelta), el mismo para todos y
   arrancando todos con la página: siguen en sincronía sin que nadie tenga que
   escribir una variable en cada fotograma. */

@keyframes respira-aliento { to { opacity: 1; } }
@keyframes respira-lejos   { to { opacity: 0.14; } }
@keyframes respira-cerca   { to { opacity: 0.1; } }
@keyframes respira-filete  { to { opacity: 1; } }
@keyframes respira-leon    { to { opacity: 0.15; } }
@keyframes respira-vela    { to { opacity: 0.75; } }

@keyframes respira-reflejo {
  from { translate: -13% 0; }
  to   { translate: 13% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ambiente__aliento, .marea, .vidrio::before, .filete,
  .heroe__grafico .vela--idea, .leon-agua { animation: none !important; }
}

/* ---------- seguro para móvil ----------
   Dos capas de velas animándose a la vez, sobre un fondo con desenfoque y
   máscara, es mucha rasterización sostenida para un teléfono. En pantalla
   pequeña se queda una sola capa y más lenta: la textura sigue leyéndose y el
   navegador deja de tener motivo para matar la pestaña. */

@media (max-width: 48rem) {
  .marea--cerca { display: none; }
  .marea--lejos { animation-duration: 240s, 5.5s; }

  /* El aliento no necesita 70px de desenfoque en una pantalla de 390px. */
  .ambiente__aliento { filter: blur(48px); }
}

/* Y si el equipo avisa de que va justo de recursos, se apaga el ambiente. */
@media (update: slow), (prefers-reduced-motion: reduce) {
  .mareas { display: none; }
  .ambiente__aliento { animation: none; }
}

/* ---------- el mazo ----------
   Los seis pasos y las capturas de los miembros se recorren de lado, una a la
   vez, como quien pasa cartas. Es lo que hace el pulgar sin que se lo pidan y
   deja de exigir seis lecturas simultáneas para entender un método que en
   realidad es secuencial.

   El desplazamiento es nativo: scroll-snap con `overflow-x`. Nada de arrastre
   simulado, así que hay inercia del sistema, rueda del ratón, teclado y foco
   sin escribir una línea de física. El JS solo publica --d (cuánto se ha ido
   del centro, con signo) y --e (lo mismo en valor absoluto) para inclinar y
   apagar las que no están al frente. Eso es lo que da el aire de baraja.

   Esas escrituras son a la propiedad del elemento, no a <html>: invalidan su
   subárbol y nada más. Es la diferencia con la respiración que tumbaba la
   pestaña, y por eso aquí sí puede ir por fotograma.

   Sin JS sigue siendo una fila desplazable con todo el contenido en el DOM. */

.baraja { position: relative; margin-top: 2.5rem; }

.baraja__pista {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.75rem var(--gutter) 1.25rem;
  scroll-padding-inline: var(--gutter);
  list-style: none;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.baraja__pista::-webkit-scrollbar { display: none; }
.baraja__pista:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; border-radius: 8px; }

.carta {
  --d: 0;
  --e: 0;
  flex: 0 0 min(84vw, 18.5rem);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--borde-tenue);
  border-radius: 10px;
  background: var(--superficie);
  overflow: hidden;
  transform: rotate(calc(var(--d) * 2.4deg)) scale(calc(1 - var(--e) * 0.07));
  opacity: calc(1 - var(--e) * 0.55);
}

@media (min-width: 46rem) { .carta { flex-basis: 21rem; } }

/* Al frente: el borde se enciende. Es la única señal de "esta es la que estás
   leyendo" que no depende de que se perciba la inclinación. */
.carta[data-frente] { border-color: var(--borde); }

.carta__cuerpo { padding: 1.35rem 1.35rem 1.5rem; }

.carta__n {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--oro);
  margin-bottom: 0.7rem;
}

.carta--paso h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--hueso);
  margin: 0 0 0.4rem;
}

.carta--paso p { margin: 0; font-size: 0.9375rem; color: var(--gris); }

/* ---------- las escenas ----------
   Cada paso lleva su propio dibujo, no una plantilla con capas encendidas: seis
   veces la misma figura sería la rejilla de iconos otra vez.

   Ninguna sube. Las dos que dibujan precio bajan hacia la zona, que es lo que
   hace el mercado cuando llega un set-up de venta. */

.escena {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--borde-tenue);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(210, 166, 75, 0.07), transparent 70%),
    var(--negro);
}

/* :where() no suma especificidad: sin el, `.escena rect` (0,1,1) le gana a
   `.e-banda` (0,1,0) y la zona y los puntos salen huecos. */
.escena :where(path, circle, rect, g) { fill: none; vector-effect: non-scaling-stroke; }

.e-oro    { stroke: var(--oro); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.e-linea  { stroke: rgba(242, 237, 227, 0.22); stroke-width: 1.3; stroke-linecap: round; }
.e-linea--gruesa { stroke-width: 2.5; }
.e-marco  { stroke: rgba(242, 237, 227, 0.28); stroke-width: 1.3; }
.e-punteada { stroke: rgba(210, 166, 75, 0.55); stroke-width: 1.3; stroke-dasharray: 3 4; stroke-linecap: round; }
.e-punto  { fill: var(--oro); stroke: none; }
.e-banda  { fill: rgba(210, 166, 75, 0.12); stroke: rgba(210, 166, 75, 0.4); stroke-width: 1; }
.e-banda--tenue { fill: rgba(210, 166, 75, 0.06); stroke: rgba(210, 166, 75, 0.22); }
.e-pulso  { stroke: var(--oro); stroke-width: 1.4; opacity: 0.45; }
.e-aspa   { stroke-width: 2; }

/* El movimiento solo corre en la carta que está al frente: una sola animación
   viva en toda la sección, y siempre sobre transform u opacidad. */
.carta[data-frente] .e-pulso   { animation: pulso 2.6s var(--salida) infinite; transform-origin: center; transform-box: fill-box; }
.carta[data-frente] .e-cae     { animation: cae 2.8s ease-in-out infinite; }
.carta[data-frente] .e-cae--tarde { animation-delay: 0.35s; }
.carta[data-frente] .e-desliza { animation: desliza 4.5s ease-in-out infinite; }

@keyframes pulso {
  0%, 100% { opacity: 0.15; transform: scale(0.82); }
  45%      { opacity: 0.55; transform: scale(1.12); }
}

@keyframes cae {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(3px); opacity: 1; }
}

/* El lotaje se ajusta: el mando se mueve por el carril y se queda donde tú lo
   dejes. Nunca llega al tope — el dibujo no puede sugerir "más es mejor". */
@keyframes desliza {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(24px); }
}

/* ---------- el mando del mazo ----------
   Contador, carril y flechas. La consola del camino usa puntos y un anillo; si
   las tres secciones navegaran igual, volveríamos a la plantilla. */

.baraja__mando {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.baraja__cuenta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--gris);
  white-space: nowrap;
}

.baraja__cuenta b { color: var(--oro); font-weight: 500; }

.baraja__carril {
  flex: 1;
  height: 1px;
  background: var(--borde-tenue);
  position: relative;
  overflow: hidden;
}

.baraja__carril::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--avance, 0) * 100%);
  background: var(--oro);
  transition: width 0.25s var(--salida);
}

.baraja__flecha {
  flex: none;
  /* 44px: el mínimo táctil. A 40 el arnés lo marcaba. */
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde-tenue);
  border-radius: 50%;
  background: transparent;
  color: var(--hueso);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}

.baraja__flecha:hover:not(:disabled) { border-color: var(--oro); color: var(--oro); }
.baraja__flecha:disabled { opacity: 0.25; cursor: default; }
.baraja__flecha svg { width: 16px; height: 16px; }

/* Se pinta solo con JS: sin él el mando no navegaría nada. */
.baraja__mando { display: none; }
.baraja--viva .baraja__mando { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .carta { transform: none; opacity: 1; }
  .baraja__pista { scroll-behavior: auto; }
  .carta[data-frente] .e-pulso,
  .carta[data-frente] .e-cae,
  .carta[data-frente] .e-desliza { animation: none; }
}

/* La regla va aparte y con otro peso: es la que de verdad importa. */
.regla {
  margin-top: 1.75rem;
  padding: 1.75rem;
  border-left: 2px solid var(--oro);
  background: var(--superficie);
  border-radius: 0 4px 4px 0;
}

@media (min-width: 48rem) { .regla { padding: 2rem 2.25rem; } }

.regla__titulo {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
  margin: 0 0 0.75rem;
}

.regla__texto { font-size: 1.15rem; color: var(--hueso); margin: 0 0 0.75rem; max-width: 42rem; }
.regla__pie { margin: 0; font-size: 0.9375rem; color: var(--gris); max-width: 42rem; }

/* ---------- las cinco llaves ----------
   Antes estaban detrás de una interacción: había que tocar cada palabra para
   leer su línea, y por eso pasaban desapercibidas. Ahora se ven las cinco.

   Sin iconos: una fila de emojis o pictogramas es la rejilla de features que
   delata a una página generada, y el de dinero además está prohibido por
   marca/identidad.md. Lo que ordena aquí es la tipografía. */

.banda { position: relative; }

.llaves {
  list-style: none;
  counter-reset: llave;
  margin: 3rem 0 0;
  padding: 0;
}

.llaves > li {
  display: grid;
  gap: 0.25rem 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--borde-tenue);
}

.llaves > li:last-child { border-bottom: 1px solid var(--borde-tenue); }

/* Con ancho, el número y el nombre a la izquierda y la frase alineada aparte:
   una columna editorial, no tres tarjetas iguales. */
@media (min-width: 44rem) {
  .llaves > li {
    grid-template-columns: 3.5rem minmax(0, 11rem) minmax(0, 1fr);
    align-items: baseline;
    padding: 1.75rem 0;
  }
}

.llave__orden {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--gris);   /* el oro profundo daba 3,96:1 y no pasa AA */
}

.llaves h3 {
  font-size: clamp(1.35rem, 5vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--oro);
  margin: 0;
}

.llaves p {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--hueso);
  max-width: 30rem;
}

/* El aire crece con el ancho: la sección tiene que sentirse protagonista. */
@media (min-width: 60rem) {
  .banda .seccion { padding-block: 8rem; }
  .llaves p { font-size: 1.15rem; }
}

/* ---------- testimonios ----------
   Van en el mismo mazo que los pasos: son capturas de teléfono, todas en 3:4,
   y puestas en rejilla obligaban a decidir cuál era la importante. Deslizadas
   se leen de una en una, que es como se leen los mensajes de los que salieron. */

.carta--captura img {
  display: block;
  width: 100%;
  height: auto;
  /* 3:4: es la forma de una captura de móvil compartida en un chat, y las
     capturas se recortan con su marco —fondo de Telegram, esquinas, hora— para
     que se vea de dónde salieron. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  background: var(--negro);
  border-bottom: 1px solid var(--borde-tenue);
}

.carta--captura blockquote {
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  color: var(--hueso);
}

.carta--captura blockquote strong { color: var(--oro); font-weight: 500; }

/* Lo que escribe el club sobre una captura no es una cita: no lo dijo nadie.
   Va en otro tono para que no se confunda con el testimonio de al lado. */
.carta--captura .carta__nota {
  margin: 0 0 0.9rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--gris);
}

.carta--captura .carta__nota strong { color: var(--oro); font-weight: 500; }

/* Todas las cartas miden lo que la más alta —la de la cita larga— así que el
   pie se ancla abajo en lugar de dejar el hueco entero al final. */
.carta--captura figcaption { display: flex; flex-direction: column; flex: 1; }
.carta--captura cite { margin-top: auto; }

.carta--captura cite {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}