/* ============================================================
   Stablecoin Global Solution — base.css
   Reset, tipografía, primitivas de layout, foco y controles.
   Consume solo tokens. Cero valores de color en crudo.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-book);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Foco visible, siempre ----------
   CONTACTO es uno de los tres papeles del coral: el anillo dice dónde
   está tu mano. Pero solo sobre negro: ahí el coral da 6,72:1 y pasa
   de sobra el 3:1 que AA exige a un indicador de foco; sobre papel da
   2,49:1 y NO pasa, así que el anillo vuelve a tinta. El token hace
   el cambio solo —--focus vale coral en .on-violeta y marca en claro—:
   ningún componente tiene que saber sobre qué superficie está. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* El atajo del teclado es una ACCIÓN, y la acción va en coral. */
.skip {
  position: absolute;
  left: var(--pad);
  top: -100px;
  z-index: 100;
  background: var(--senal);
  color: var(--senal-sobre);
  padding: 0.75rem 1.25rem;
  font-weight: var(--w-semi);
  border-radius: var(--r-node);
  transition: top var(--dur-ui) var(--ease-out);
}
.skip:focus { top: 1rem; }

/* ============================================================
   LAYOUT
   ============================================================ */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.band {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-py);
  position: relative;
}
.band--tight { padding-block: calc(var(--section-py) * 0.62); }

/* Un solo eje: el titular y su bajada se apilan al centro.
   La jerarquía la lleva la escala tipográfica —titular contra bajada—,
   no el reparto en columnas. Las medidas son estrechas a propósito:
   centrado, un párrafo largo pierde el punto de retorno del ojo. */
.head {
  display: grid;
  justify-items: center;
  gap: var(--stack-2);
  margin-bottom: var(--stack-4);
  text-align: center;
}
.head__title { max-width: 24ch; }
.head__lead  { max-width: 46ch; }
/* Centrada, una última línea de dos palabras deja la bajada coja:
   los renglones se reparten solos. */
.head__lead > * { text-wrap: balance; }
/* Todas las bajadas miden lo mismo, en cualquier sección: el titular
   manda y la bajada acompaña. Ni un escalón de más. */
.head__lead .t-lead { font-size: var(--t-body); line-height: 1.55; }

/* Los anclajes no quedan bajo la cabecera pegada */
section[id] { scroll-margin-top: calc(var(--barra) + 12px); }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */
.t-hero {
  font-size: var(--t-hero);
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
.t-1 {
  font-size: var(--t-1);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
.t-2 {
  font-size: var(--t-2);
  font-weight: var(--w-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.t-3 {
  font-size: var(--t-3);
  font-weight: var(--w-medium);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}
.t-lead {
  font-size: var(--t-body);
  font-weight: var(--w-light);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--fg-soft);
}
.t-body { font-size: var(--t-body); line-height: var(--lh-body); }
.t-soft { color: var(--fg-soft); }
.t-small { font-size: var(--t-small); line-height: 1.5; }
.t-acento { color: var(--acento); }

/* La medida de lectura se centra por su propia caja. Nunca con
   márgenes a mano: el eje de la página es uno y sale de aquí. */
.measure { max-width: 54ch; margin-inline: auto; }

/* ============================================================
   CABECERA — el tablero más pequeño de la página

   La barra no es cromo pegado encima: es la primera configuración
   del sistema, con la misma gramática que los diagramas.

     · El sitio tiene tres páginas → tres piezas de una misma serie.
     · Comparten ancho y alto (§3.4 del manual): NO se dimensionan
       por el largo de su texto. Eso es lo que hace un enlace
       cualquiera; una pieza del sistema, no.
     · Donde NO estás  → CASILLA (--slot): el sustrato disponible.
     · Donde SÍ estás  → pieza COLOCADA (rellena): el punto de llegada.
     · La junta entre piezas es --gap, la misma del campo.

   Así la cabecera dice lo único que una cabecera tiene que decir
   —dónde estás y a dónde puedes ir— con el idioma de la marca, y
   deja de ser el logo-a-la-izquierda-enlaces-a-la-derecha de
   cualquier sitio. El coral sale de aquí: un bloque coral relleno
   significa «Stablecoin Global Solution» (§3.2), no «botón».
   ============================================================ */
/* Los sensores de la cabecera necesitan caja propia: un span vacío mide
   0 × 0 y el IntersectionObserver no emite nada para él. */
[data-hero-sentinel] { display: block; height: 1px; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Misma superficie que el hero: la barra es marca, no papel. Sin filo
     inferior: sobre el hero cortaba el fondo en dos. */
  background: var(--bg);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-2);
  min-height: var(--barra);
}

/* ---------- La marca ----------
   El lockup completo mientras quepa; por debajo de 560 px pasa al
   isotipo oficial. No se recompone la marca —eso sería isotipo +
   texto suelto—: se cambia de entregable, que para eso existen. */
.brandmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  border-radius: var(--r-unit);
}
.brandmark__logo {
  height: clamp(28px, 2.9vw, 38px);
  width: auto;
  display: block;
}
.brandmark__iso { display: none; }

/* En la portada la marca de la barra cede: el hero ya presenta el logo.
   Entra cuando el hero sale de pantalla. Guarda su sitio para que la
   navegación no se mueva. Y entra COLOCÁNDOSE —desde su costado, con la
   curva y la duración del ensamblado— porque es una pieza más que llega
   a completar el tablero de la barra. */
.topbar--auto .brandmark {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-12px);
  transition: opacity var(--dur-ui) var(--ease-out),
              transform var(--dur-assemble) var(--ease-out),
              visibility 0s linear var(--dur-ui);
}
.topbar--auto.is-marca .brandmark {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* ---------- Las tres piezas ----------
   grid-auto-columns: 1fr es lo que hace cumplir la regla de serie: las
   tres columnas miden exactamente lo mismo, midan lo que midan sus
   etiquetas. Si una etiqueta no cabe en una línea, parte; la pieza no
   crece. */
.topbar__nav {
  /* Las tres casillas dicen tres cosas: vacía (el sustrato), bajo el
     cursor (tu mano se acerca) y ocupada (tu mano llegó). Las dos
     últimas son CONTACTO, así que son coral: el velo bajo el cursor y
     el relleno en la página donde estás. La barra vive siempre sobre
     negro, que es donde el coral es legible. */
  --casilla:      color-mix(in srgb, var(--fg)  7%, transparent);
  --casilla-mano: var(--senal-velo);
  --casilla-aqui: var(--senal);

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--gap);
  flex: 0 1 auto;
  width: min(29rem, 100%);
}
.topbar__pieza {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem clamp(0.4rem, 1.1vw, 0.9rem);
  border-radius: var(--r-unit);   /* 2 px: el radio de la casilla */
  background: var(--casilla);
  color: var(--fg);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  transition: background-color var(--dur-ui) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
/* La casilla se aviva bajo el cursor: el sustrato respondiendo, no un
   color nuevo. Sale de --fg, así que sigue al tema y a la paleta. */
.topbar__pieza:hover { background: var(--casilla-mano); }
.topbar__pieza:active { transform: scale(0.97); }

/* La página en la que estás: esa casilla está ocupada, y ocupada por
   ti. Relleno coral con tinta encima — 7,04:1, AAA. Es la aparición
   de coral que se repite en las tres páginas y la que hace que la
   señal se lea como un sistema y no como un adorno suelto. */
.topbar__pieza[aria-current="page"] {
  background: var(--casilla-aqui);
  color: var(--senal-sobre);
  font-weight: var(--w-semi);
  cursor: default;
}
.topbar__pieza[aria-current="page"]:hover { background: var(--casilla-aqui); }
.topbar__pieza[aria-current="page"]:active { transform: none; }

@media (max-width: 559px) {
  /* El tablero no se esconde detrás de un botón: se recompone, igual
     que el campo pasa de 12 a 6 columnas. Los tres destinos siguen a
     la vista y a un solo toque. */
  .brandmark__logo { display: none; }
  .brandmark__iso {
    display: block;
    height: 30px;
    width: auto;
  }
  .topbar__in { gap: clamp(0.6rem, 3vw, 1rem); }
  .topbar__nav { flex: 1 1 auto; min-width: 0; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  --btn-bg: var(--violeta);
  --btn-fg: var(--blanco);
  --btn-ln: var(--violeta);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: inset 0 0 0 2px var(--btn-ln);
  border: 0;
  border-radius: var(--r-node);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-ui) var(--ease-out),
              color var(--dur-ui) var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--violeta);
  --btn-ln: var(--node-ghost-ln);
}
.btn--ghost:hover { --btn-bg: var(--lavado); }

.on-violeta .btn--ghost { --btn-fg: var(--blanco); --btn-ln: var(--node-ghost-ln); }
.on-violeta .btn--ghost:hover { --btn-bg: var(--lavado); }

/* La acción es LLEGADA: el punto al que va todo el argumento. Sigue
   siendo el único botón coral de la página —de los tres papeles, este
   es el que no se reparte— y el conector del formulario entra en él. */
.btn--mint {
  --btn-bg: var(--senal);
  --btn-fg: var(--senal-sobre);
  --btn-ln: var(--senal);
  font-size: var(--t-3);
  min-height: 64px;
  padding: 1.1rem 2rem;
}
.btn--mint:hover { --btn-bg: var(--senal-press); --btn-ln: var(--senal-press); }

/* ============================================================
   PIE
   ============================================================ */
.foot {
  background: var(--violeta);
  color: var(--blanco);
  padding-block: var(--stack-4);
}
.foot__logos { display: flex; align-items: center; justify-content: center; gap: 1.75rem; }
.foot__logos img { height: 26px; width: auto; opacity: 0.9; }
.foot__logos img.es-flou { height: 28px; }

/* ============================================================
   MOVIMIENTO REDUCIDO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================
   PRIMITIVA COMPARTIDA · EL CAMPO DE CIEN
   Cien casillas, una llena. No es ornamento: es la cifra dibujada
   a escala (de cada US$100, uno es un pago real). La usan la
   landing y el manifiesto, con distinta escala vía --u.
   ============================================================ */
.hundred {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(3px, 1.1%, 9px);
  width: 100%;
  max-width: var(--u, 22rem);
}
.hundred i {
  aspect-ratio: 1;
  border-radius: var(--r-unit);
  background: var(--slot);
}
.hundred i.on { background: var(--acento); }


/* ============================================================
   El campo: la infraestructura con tráfico. Se usa en la portada
   de espera y en el hero de la landing; por eso vive aquí y no en
   la página. Exige un contenedor con position:relative.
   ============================================================ */
/* ── el campo: la infraestructura con tráfico ──────────────────
   Una retícula de la unidad de marca que sangra por el borde
   derecho. Unos pocos módulos se encienden en coral: es actividad
   pasando por la infraestructura, no decoración. Va en código y no
   como imagen: pesa cero, se anima y sigue a los tokens. */
.campo {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(64vw, 1000px);
  overflow: hidden;
  pointer-events: none;
}
/* El desvanecido va como velo del color del fondo, no como mask: el mask
   sobre un contenedor con hijos absolutos no se aplicaba de forma fiable
   y dejaba un corte recto donde empezaba la retícula. */
.campo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--c-brand) 4%, transparent 58%);
}
.campo__rejilla {
  position: absolute;
  inset: -1px -1px auto auto;
  display: grid;
  grid-template-columns: repeat(var(--col), var(--u));
  grid-auto-rows: var(--u);
  gap: calc(var(--u) * 0.16);
  --u: clamp(22px, 3.2vw, 44px);
  --col: 17;
}
.campo__u {
  border-radius: var(--r-unit);
  background: color-mix(in srgb, var(--c-over) 6%, transparent);
  opacity: var(--o, 1);
}
/* AVANCE en su forma más literal: el módulo encendido es tráfico
   pasando por la infraestructura. Ni la proporción ni el pulso se
   tocan —el campo lo comparte con la portada de espera, aprobada—:
   aquí el coral ya trabaja. */
.campo__u.on {
  background: var(--senal);
  animation: pulso 2600ms var(--ease-out) infinite;
  animation-delay: calc(var(--d) * 1ms);
}
@keyframes pulso {
  0%, 12%  { opacity: 1; }
  46%, 100% { opacity: 0.14; }
}
@media (prefers-reduced-motion: reduce) {
  .campo__u.on { animation: none; opacity: 1; }
}
@media (max-width: 859px) {
  .campo { width: 100%; opacity: 0.42; }
  .campo::after {
    background: linear-gradient(to bottom, var(--c-brand) 42%, transparent 88%);
  }
}