/* El primer viewport entero ES la cadena: ChainVisual ocupa todo el fondo,
   el mensaje y la acción flotan encima con un velo de profundidad que los
   deja leer sin apagar el mapa. Verde (de la referencia de composición)
   solo como acento puntual — el resto sigue siendo el sistema oro/coral/
   violeta/turquesa de siempre; el mapa no se vuelve monocromático.
   Las variables viven en body, no en .hero: .hero-nav es fixed y hermana
   del hero (no descendiente), y necesita alcanzar las mismas variables. */
body {
  --accent-soft-green: #85ab8b;
  --ivory-rgb: 250, 246, 236;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* envoltorio común de fondo+velo+overlay: en escritorio ocupa el hero
   entero; en móvil es la única regla que hace falta tocar para que el mapa
   vuelva a ser una caja con su propio alto — fondo/velo/overlay siguen
   siendo "inset:0" de ESTE contenedor, no del hero, así que heredan su
   tamaño sin que haga falta repetir la sobrescritura en cada uno. */
.hero-map-stage { position: absolute; inset: 0; }
/* mountVizControls/mountListToggle cuelgan sus botones directamente de
   .hero-map-stage (el propio viz-shell) como hermanos del velo — sin este
   z-index quedarían tapados por .hero-scrim (2); no necesitan pointer-events
   explícito porque .hero-map-stage no hereda el "none" de sus hijos. */
.hero-map-stage > .viz-controls,
.hero-map-stage > .viz-toggle-list {
  z-index: 8;
}

/* capa 1 — el mapa, de borde a borde */
.hero-map-bg { position: absolute; inset: 0; z-index: 1; }
.hero-map-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* capa 2 — velo de profundidad: oscurece arriba (bajo el titular) y abajo
   (bajo acción/leyenda), deja clara la franja central donde vive el árbol */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(5, 6, 10, 0.82) 0%,
    rgba(5, 6, 10, 0.32) 24%,
    rgba(5, 6, 10, 0.08) 42%,
    rgba(5, 6, 10, 0.08) 60%,
    rgba(5, 6, 10, 0.5) 85%,
    rgba(5, 6, 10, 0.82) 100%
  );
}

/* capa 2.5 — tooltip/lista/estado vacío: por encima del velo (si no, su
   z-index no serviría de nada, atrapados bajo un hermano del fondo), pero
   transparente a los clics salvo en la lista accesible, así el drag/pinch/
   click sigue llegando al canvas de la capa 1 */
.hero-map-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}
.hero-map-overlay .chain-list-root {
  pointer-events: auto;
}

/* navegación en píldora, flotando sobre el canvas al principio — fixed, no
   absolute, para que siga alcanzable en el resto de la página, igual que la
   barra sticky de antes (ver nota en el HTML) */
.hero-nav {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 26px;
  width: min(1120px, 92vw);
  padding: 10px 12px 10px 22px;
  border-radius: 999px;
  background: rgba(var(--ivory-rgb), 0.08);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--ivory-rgb), 0.14);
}
.hero-nav-links { display: flex; gap: 24px; align-items: center; margin-right: auto; }
.hero-nav-cta { padding: 10px 20px; font-size: 0.88rem; }

/* capa 4 — titular editorial, centrado arriba */
.hero-headline {
  position: absolute;
  top: 132px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 92vw;
  max-width: 760px;
  text-align: center;
}
.hero-headline .eyebrow { justify-content: center; }
.hero-headline h1 {
  font-size: clamp(2.5rem, 5.2vw, 4.1rem);
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.hero-headline h1 .hl { color: var(--accent-soft-green); }
.hero-headline .hero-sub {
  color: var(--ink-1);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 18px auto 0;
}

/* capa 5 — acción principal, abajo a la izquierda */
.hero-action {
  position: absolute;
  left: 40px;
  bottom: 36px;
  z-index: 10;
}
.hero-action-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* capa 6 — leyenda + estado del mapa, abajo a la derecha */
.hero-map-info {
  position: absolute;
  /* 66px, no 40px: deja hueco a la columna de zoom (.viz-controls, anclada a
     right:14px/36px de ancho) para que no se solape con esta caja al crecer
     con la pista añadida — mismo margen ya usado por .hero .viz-toggle-list */
  right: 66px;
  bottom: 36px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: 46vw;
}
.hero-map-caption {
  font-size: 0.76rem;
  color: var(--ink-1);
  background: rgba(5, 6, 10, 0.5);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
}
/* pista fija, no depende del estado dinámico de la cadena (a diferencia de
   hero-map-caption): siempre visible para que se sepa que el mapa es
   clicable, no solo decorativo */
.hero-map-hint {
  font-size: 0.72rem;
  color: var(--ink-2);
  margin: 0;
  text-align: right;
}
.hero-map-info .live-chain-legend { justify-content: flex-end; margin: 0; }
/* solo existe para dar contexto en móvil, donde el mapa ya no vive pegado a
   un título propio como en escritorio (la esquina flotante ahí ya lo dice
   con la leyenda); en escritorio no hace falta y no se muestra. */
.hero-map-kicker { display: none; }

/* la lista accesible y los controles de zoom se anclan a .viz-shell (aquí,
   .hero-map-overlay); el toggle de lista se corre junto a la columna de
   zoom para dejar la esquina inferior izquierda libre solo para la acción
   principal */
.hero .viz-toggle-list { left: auto; right: 64px; }

.section { padding: 70px 0; }
.section-title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  text-align: center;
  margin: 10px 0 12px;
}
.section-sub {
  text-align: center;
  color: var(--ink-1);
  max-width: 60ch;
  margin: 0 auto 40px;
}

/* línea vertical que enhebra los tres pasos, como un tallo — no tres
   cajas sueltas, sino un único gesto que se va encendiendo */
.steps {
  position: relative;
  max-width: 620px;
  margin: 48px auto 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 44px;
  list-style: none;
}
/* la "línea" es en realidad una raíz que serpentea por detrás de los
   números — nunca una regla recta de dashboard */
.steps::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  bottom: 6px;
  width: 40px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 600' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffc978'/><stop offset='33%25' stop-color='%23ff7a92'/><stop offset='66%25' stop-color='%23a875ff'/><stop offset='100%25' stop-color='%234fe3c8'/></linearGradient></defs><path d='M20,0 C2,110 38,190 20,300 C2,410 38,490 20,600' fill='none' stroke='url(%23g)' stroke-width='2.2' opacity='0.42'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 22px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}
.step-num {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  margin-bottom: 0;
}
.step:nth-child(1) .step-num { color: var(--gold); border-color: rgba(255,201,120,0.55); box-shadow: 0 0 20px rgba(255,201,120,0.22); }
.step:nth-child(2) .step-num { color: var(--coral); border-color: rgba(255,122,146,0.45); box-shadow: 0 0 20px rgba(255,122,146,0.18); }
.step:nth-child(3) .step-num { color: var(--violet); border-color: rgba(168,117,255,0.5); box-shadow: 0 0 20px rgba(168,117,255,0.2); }
.step:nth-child(4) .step-num { color: var(--teal); border-color: rgba(79,227,200,0.5); box-shadow: 0 0 20px rgba(79,227,200,0.22); }
.step h3 { grid-column: 2; font-size: 1.12rem; margin: 8px 0 8px; font-family: var(--font-ui); font-weight: 650; }
.step p { grid-column: 2; color: var(--ink-1); font-size: 0.95rem; max-width: 54ch; }

/* frase de cierre de "Cómo funciona" — propia de esta sección, no
   comparte regla con la pausa editorial posterior (.statement-text) */
.steps-close {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-1);
  text-align: center;
  max-width: 48ch;
  margin: 40px auto 0;
}

@media (max-width: 640px) {
  .steps { gap: 34px; }
  .step-num { width: 38px; height: 38px; font-size: 0.92rem; }
  .step { grid-template-columns: 38px 1fr; column-gap: 16px; }
  .steps::before { left: -1px; width: 38px; }
}

.node-tooltip {
  position: absolute;
  pointer-events: none;
  max-width: 280px;
  background: rgba(10, 8, 20, 0.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.85rem;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s;
  z-index: 5;
}
.node-tooltip.visible { opacity: 1; transform: none; }
.node-tooltip .nt-title { font-weight: 650; margin-bottom: 4px; }
.node-tooltip .nt-msg { color: var(--ink-1); font-size: 0.8rem; line-height: 1.45; }

/* fila normal del documento, bajo el título del mapa — nunca se superpone
   al árbol, así que no compite por espacio en pantallas pequeñas */
.live-chain-legend {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--ink-2);
}
.live-chain-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-soft);
  padding: 5px 12px;
  border-radius: 999px;
}
.lc-star {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255,201,120,0.7);
}
.lc-gradient-bar {
  display: inline-block;
  width: 34px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffc978, #ff7a92, #a875ff, #4fe3c8);
}

/* claves visuales que ya dibuja el canvas (anillo punteado, halo doble,
   anillo de puntos) — aquí solo se explican, no se inventa ningún estado */
.lc-ring {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.4px solid var(--ink-2);
  flex: none;
}
.lc-ring-dashed { border-style: dashed; border-color: var(--gold); }
.lc-ring-halo { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(168,117,255,0.22); }
.lc-ring-dotted { border-style: dotted; border-color: var(--ink-3); }

@media (max-width: 640px) {
  .live-chain-legend { font-size: 0.7rem; gap: 8px; }
  .live-chain-legend span { padding: 4px 10px; }
}

.empty-chain-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  color: var(--ink-2);
  font-size: 0.95rem;
  padding: 0 30px;
}
.empty-chain-state .ec-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3dc, var(--gold) 45%, transparent 78%);
  box-shadow: 0 0 22px rgba(255, 201, 120, 0.45);
}

.code-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(168, 117, 255, 0.07), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(255, 201, 120, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
}
.code-form { display: flex; gap: 10px; }
.code-form input {
  flex: 1 1 160px;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--ink-0);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.code-form input:focus { border-color: rgba(168,117,255,0.6); }
.code-form .btn { flex: 0 0 auto; }
#code-error { margin-top: 16px; }

/* por debajo de este ancho, columna en vez de fila: el botón nunca
   compite por espacio horizontal con el input, así que no puede
   desbordar el contenedor por mucho que crezca el texto o la fuente */
@media (max-width: 480px) {
  .code-form { flex-direction: column; }
  .code-form input,
  .code-form .btn { flex: 1 1 auto; width: 100%; }
}

.cta-final { text-align: center; padding-bottom: 110px; }
.cta-final .section-sub { margin-bottom: 30px; }
.cta-final-close {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-1);
  max-width: 46ch;
  margin: 0 auto;
}

/* ---------- pausa editorial: la idea entera, en una frase ---------- */
.statement-break {
  text-align: center;
  padding: 36px 0 56px;
  position: relative;
}
.statement-text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 480;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink-0);
  max-width: 22ch;
  margin: 0 auto;
}

/* En móvil se abandona el "todo flota sobre un fondo de pantalla completa"
   — con menos alto disponible, texto flotando sobre el mapa le quita
   legibilidad a ambos. En vez de eso: composición vertical normal, y el
   mapa vuelve a la tarjeta con su propia cabecera (título + leyenda) y
   canvas debajo, como antes — con una altura generosa y fija para que
   siga siendo útil, no una miniatura. */
@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  /* en móvil deja de ser fixed: no se queda flotando encima del contenido
     al hacer scroll — vuelve al flujo normal, como un bloque más arriba
     del todo, y se va con el resto al bajar la página */
  .hero-nav {
    position: static;
    transform: none;
    width: auto;
    margin: 14px 20px 0;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .hero-nav-links { flex-wrap: wrap; row-gap: 8px; margin-right: auto; }

  .hero-scrim { display: none; }

  .hero-headline {
    order: 1;
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    text-align: left;
    margin: 24px 20px 0;
  }
  .hero-headline .eyebrow { justify-content: flex-start; }
  .hero-headline .hero-sub { margin: 16px 0 0; }

  .hero-action { order: 2; position: static; margin: 24px 20px 0; }

  /* .hero-map-info + .hero-map-stage se funden visualmente en una sola
     tarjeta (cabecera con título/leyenda, canvas debajo) — la composición
     que ya funcionaba antes de este rediseño del hero */
  .hero-map-info {
    order: 3;
    position: static;
    max-width: none;
    align-items: stretch;
    margin: 28px 20px 0;
    padding: 20px 20px 16px;
    gap: 8px;
    background:
      radial-gradient(130% 90% at 12% 0%, rgba(255, 201, 120, 0.08), transparent 55%),
      radial-gradient(130% 90% at 100% 100%, rgba(79, 227, 200, 0.07), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid var(--line-soft);
    border-bottom: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .hero-map-kicker {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
    margin: 0 0 2px;
  }
  .hero-map-hint { align-self: flex-start; text-align: left; }
  .hero-map-caption { align-self: flex-start; }
  .hero-map-info .live-chain-legend { justify-content: flex-start; }

  .hero-map-stage {
    order: 4;
    position: relative;
    inset: auto;
    height: 56dvh;
    min-height: 340px;
    margin: 0 20px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border: 1px solid var(--line-soft);
    border-top: none;
    overflow: hidden;
  }

  .steps { max-width: none; margin-right: auto; }
  .code-panel { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .code-panel > div:first-child { text-align: center; }
  .code-panel h2 { text-align: center !important; }
  .code-panel p.section-sub { text-align: center !important; }
}