/* ============================================================================
   micapi.com — estilos de la página pública
   ----------------------------------------------------------------------------
   Depende de tokens.css (sincronizado del design system con tool/sync-ds.sh).
   REGLA: acá NO se inventan colores. Todo sale de var(--color-*). Si un valor
   no existe como token, se compone con color-mix() sobre uno que sí exista,
   nunca se escribe un hex nuevo.

   Las únicas dos excepciones declaradas están en el bloque EXTENSIÓN WEB de
   abajo, y ambas son de escala, no de color.
   ========================================================================== */

/* ============================================================================
   EXTENSIÓN WEB — lo que el DS no cubre y por qué
   ----------------------------------------------------------------------------
   1. ESCALA TIPOGRÁFICA. El DS topa en --font-size-3xl: 36px porque es una
      escala de APP MÓVIL. Un titular de héroe en un monitor de 27" a 36px se
      ve tímido y barato. Extiendo con clamp() fluido, sin tocar los tokens del
      DS: la app sigue con su escala, la web tiene la suya.
   2. RITMO DE SECCIÓN. El DS llega hasta --space-11: 80px. Las secciones web
      necesitan respiración mayor y fluida.
   ========================================================================== */
:root {
  --paso-display: clamp(2.75rem, 1.6rem + 5.2vw, 5.5rem);   /*  44 → 88 px */
  --paso-titulo:  clamp(1.9rem, 1.35rem + 2.4vw, 3.1rem);   /*  30 → 50 px */
  --paso-sub:     clamp(1.05rem, 0.97rem + 0.42vw, 1.3rem); /*  17 → 21 px */

  --ritmo-seccion: clamp(4.5rem, 3rem + 7vw, 9rem);
  --ritmo-gutter:  clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);

  /* Superficies compuestas — derivadas de tokens, no hex nuevos. */
  --velo-acento:   color-mix(in srgb, var(--color-primary-300) 13%, transparent);
  --velo-profundo: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
  --hairline:      color-mix(in srgb, var(--color-fg) 9%, transparent);

  /* ------------------------------------------------------------------
     ACENTO LEGIBLE — corrección de contraste sobre el DS
     ------------------------------------------------------------------
     --color-primary-300 (#27A89C) sobre el lienzo claro (#F2F7F6) da
     2.71:1. Eso NO pasa WCAG AA para texto (4.5:1) ni siquiera el 3:1 de
     indicadores de foco y gráficos. Sobre el lienzo oscuro el mismo color
     da 6.06:1 y está perfecto — el problema es sólo en tema claro.

     Así que el acento de TEXTO no es un color fijo: es primary-500 en
     claro (5.88:1) y primary-300 en oscuro (6.06:1). El primary-300 se
     sigue usando en claro sólo donde es decoración pura (velos, hairlines
     del degradado), nunca para texto ni para el anillo de foco.

     Esto se corrige acá y no en tokens.css a propósito: ese archivo es
     GENERADO por tool/sync-ds.sh y cualquier edición se pierde en la
     próxima sincronización. Queda anotado en el README para arreglarlo
     aguas arriba, en el design system, donde también le afecta a la app.
     ------------------------------------------------------------------ */
  --acento-texto: var(--color-primary-500);
  --anillo-foco:  var(--color-primary-500);

  /* La losa oscura de Cumplimiento: mismo color en ambos temas a propósito.
     Es un documento, no una superficie de la interfaz — ver §Cumplimiento. */
  --losa-bg:     #0F1A19;   /* = --color-bg-inverse del DS, fijado */
  --losa-fg:     #E4ECEB;   /* = --color-fg-inverse */
  --losa-muted:  #B9C2BF;   /* = neutral-300 */
  --losa-linea:  color-mix(in srgb, #E4ECEB 14%, transparent);
  --losa-acento: #27A89C;   /* = --color-primary-300 */
}

/* En oscuro el acento SÍ tiene contraste de sobra, así que vuelve al 300,
   que es el que le da el brillo característico a la marca sobre el lienzo
   oscuro. */
[data-theme="dark"] {
  --acento-texto: var(--color-primary-300);
  --anillo-foco:  var(--color-primary-300);
}

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

/* El anillo de foco del DS usa primary-300, que en tema claro no alcanza el
   3:1 que WCAG 2.1 (criterio 2.4.11) exige para un indicador de foco. Se
   redefine con el token corregido, para teclado en toda la página. */
:focus-visible {
  outline: 2px solid var(--anillo-foco);
  outline-offset: 2px;
}
/* Dentro de la losa oscura el foco vuelve al acento claro: sobre #0F1A19 el
   primary-500 se apagaría. */
.seccion--losa :focus-visible { outline-color: var(--losa-acento); }

html {
  scroll-behavior: smooth;
  /* Compensa el header fijo cuando se salta a un ancla. */
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  overflow-x: hidden;
  /* La transición de tema se aplica sólo cuando el usuario la dispara, no en
     la carga inicial — si no, el primer pintado hace un fundido raro.
     La clase la pone site.js. */
}
body.tema-en-transicion,
body.tema-en-transicion * {
  transition: background-color 240ms var(--motion-ease),
              border-color 240ms var(--motion-ease),
              color 240ms var(--motion-ease) !important;
}

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

/* primary-500 y no 300: con el 300 de fondo, el texto blanco seleccionado
   quedaba en 2.76:1 — el usuario perdía legibilidad justo al seleccionar. */
::selection {
  background: var(--color-primary-500);
  color: #FFFFFF;
}

/* Salto de accesibilidad: primer tabulable de la página. */
.saltar {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--color-action);
  color: var(--color-action-fg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
}
.saltar:focus { left: var(--space-4); }

/* ============================================================================
   PRIMITIVAS DE LAYOUT
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--ritmo-gutter);
}
.contenedor--angosto { max-width: 760px; }

.seccion { padding-block: var(--ritmo-seccion); }

/* El DS manda "canvas-first": las secciones se separan con espacio y
   hairlines, NO con cards (colors_and_type.css §SURFACE PHILOSOPHY). */
.seccion + .seccion:not(.seccion--losa) { border-top: 1px solid var(--hairline); }

.seccion__etiqueta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--space-4);
}

.seccion__titulo {
  font-size: var(--paso-titulo);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
  max-width: 20ch;
}

.seccion__entrada {
  margin-top: var(--space-5);
  font-size: var(--paso-sub);
  line-height: var(--line-height-relaxed);
  color: var(--color-fg-muted);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ============================================================================
   HEADER
   ========================================================================== */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  padding-block: var(--space-4);
  transition: background-color 260ms var(--motion-ease),
              border-color 260ms var(--motion-ease),
              padding 260ms var(--motion-ease);
  border-bottom: 1px solid transparent;
}
/* Al hacer scroll el header se condensa y gana fondo translúcido. */
.header.esta-pegado {
  padding-block: var(--space-3);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--hairline);
}
.header__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.header__marca { display: flex; align-items: center; gap: var(--space-3); }
.header__marca:hover { border-bottom-color: transparent; }
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.header__nav a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg-muted);
}
.header__nav a:hover { color: var(--color-fg); border-bottom-color: transparent; }
.header__acciones { display: flex; align-items: center; gap: var(--space-3); }

@media (max-width: 860px) {
  .header__nav { display: none; }
}

/* Logo inline — hereda currentColor, así sigue el tema sin dos archivos.
   (micapi-wordmark.svg del DS trae class="mi-mono"/"mi-accent"/"mi-text" con
   un <defs> VACÍO: como <img> se renderiza en negro. Ver README §Design system.) */
.logo { height: 34px; width: auto; }
.logo .mi-mono   { fill: var(--color-primary-700); }
.logo .mi-glifo  { fill: var(--color-bg-elevated); }
.logo .mi-accent { fill: var(--color-primary-300); }
.logo .mi-text {
  fill: var(--color-fg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -0.02em;
}
/* En oscuro se invierte el monograma: cuadro claro, glifo oscuro.
   NO se usa --color-fg-inverse acá: en tema oscuro ese token vale #1A1F1E
   (es el "inverso del tema", o sea casi negro), y daba cuadro oscuro sobre
   fondo oscuro. --color-fg es el que vale claro en oscuro. */
[data-theme="dark"] .logo .mi-mono  { fill: var(--color-fg); }
[data-theme="dark"] .logo .mi-glifo { fill: var(--color-primary-700); }

/* ============================================================================
   BOTONES
   ========================================================================== */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: transform var(--motion-duration-fast) var(--motion-ease),
              background-color var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-default) var(--motion-ease);
}
.boton:hover { border-bottom-color: transparent; }
.boton:active { transform: translateY(1px); }

.boton--primario {
  background: var(--color-action);
  color: var(--color-action-fg);
  box-shadow: var(--elev-1);
}
.boton--primario:hover {
  background: var(--color-action-hover);
  color: var(--color-action-fg);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
.boton--primario:active { background: var(--color-action-press); }

.boton--fantasma {
  background: transparent;
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.boton--fantasma:hover {
  color: var(--color-fg);
  border-color: var(--color-primary-300);
  background: var(--velo-acento);
}

.boton--grande { padding: var(--space-4) var(--space-8); font-size: var(--font-size-lg); }

/* Botón de tema: icónico, 44px de área táctil. */
.tema-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: color var(--motion-duration-fast) var(--motion-ease),
              border-color var(--motion-duration-fast) var(--motion-ease),
              background-color var(--motion-duration-fast) var(--motion-ease);
}
.tema-toggle:hover {
  color: var(--acento-texto);
  border-color: var(--color-primary-300);
  background: var(--velo-acento);
}
.tema-toggle svg { width: 19px; height: 19px; }
/* Sólo se muestra el icono del tema al que se puede CAMBIAR. */
.tema-toggle .icono-luna { display: none; }
[data-theme="dark"] .tema-toggle .icono-sol  { display: none; }
[data-theme="dark"] .tema-toggle .icono-luna { display: block; }

/* ============================================================================
   HÉROE
   ----------------------------------------------------------------------------
   Composición: campo de luz radial (dos velos derivados de la primaria) +
   grano, titular sobredimensionado con tracking cerrado, UNA acción primaria,
   y el lockup regulatorio inmediatamente debajo del CTA.

   Ese lockup no es decorativo: es el patrón "trust architecture above the
   fold". El analista de riesgo que llega googleando ve NIT y código de entidad
   UIAF sin hacer scroll.
   ========================================================================== */
.heroe {
  position: relative;
  padding-block: clamp(8rem, 6rem + 12vw, 13rem) var(--ritmo-seccion);
  overflow: hidden;
  isolation: isolate;
}

/* Campo de luz. Dos radiales suaves, sin ningún hex nuevo. */
.heroe::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 145%;
  z-index: -2;
  background:
    radial-gradient(58% 46% at 18% 8%,  var(--velo-acento) 0%, transparent 68%),
    radial-gradient(48% 52% at 88% 26%, var(--velo-profundo) 0%, transparent 66%);
  pointer-events: none;
}

/* Grano: textura fina que evita el aspecto plano del degradado puro.
   feTurbulence en un data-URI de ~300 bytes — sin peticiones extra. */
.heroe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .heroe::after { opacity: 0.055; }

/* OJO con las unidades ch acá: se calculan contra el font-size del elemento
   que las declara. En este contenedor el font-size es el base (16px), así que
   un max-width en ch daría una columna ridículamente angosta. La medida en ch
   va sobre el TÍTULO, que sí está a tamaño display, y así se auto-ajusta en
   cada breakpoint del clamp(). */
.heroe__caja { max-width: 64rem; }

.heroe__titulo {
  max-width: 18ch;
  font-size: var(--paso-display);
  font-weight: var(--font-weight-bold);
  /* Tracking negativo agresivo: a 88px el espaciado por defecto de Inter se
     ve suelto. Es ajuste óptico, no capricho. */
  letter-spacing: -0.038em;
  line-height: 0.98;
  text-wrap: balance;
  margin-bottom: var(--space-6);
}
.heroe__titulo .acento {
  /* El degradado del acento sobre el titular es el único momento "de marca"
     de la página. Se usa una vez. */
  background: linear-gradient(96deg, var(--color-primary-500), var(--color-primary-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="dark"] .heroe__titulo .acento {
  background: linear-gradient(96deg, var(--color-primary-300), var(--color-primary-100));
  -webkit-background-clip: text;
  background-clip: text;
}

.heroe__sub {
  font-size: var(--paso-sub);
  line-height: var(--line-height-relaxed);
  color: var(--color-fg-muted);
  max-width: 54ch;
  text-wrap: pretty;
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Píldora de estado. Honestidad de etapa, sin letra chica y sin disculpas. */
.pildora-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-primary-300) 34%, transparent);
  border-radius: var(--radius-pill);
  background: var(--velo-acento);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-fg);
}
.pildora-estado__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary-300);
  flex: none;
  /* Latido lento: señal de "vivo, en construcción". */
  animation: latido 2.6s var(--motion-ease) infinite;
}
@keyframes latido {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.82); }
}

/* --- Lockup regulatorio ------------------------------------------------- */
.lockup {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-7);
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  max-width: 46rem;
}
.lockup__dato { display: flex; flex-direction: column; gap: 3px; }
.lockup__k {
  font-size: 10.5px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}
.lockup__v {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-fg);
}

/* ============================================================================
   CÓMO FUNCIONA — visualización de flujo
   ----------------------------------------------------------------------------
   Patrón "flow visualization": hace concreto un proceso abstracto. Se eligió
   sobre el patrón "product dashboard preview" porque la app NO está publicada
   y fabricar un screenshot de una UI que nadie puede descargar sería
   exactamente la deshonestidad que esta página existe para desmentir.
   ========================================================================== */
.pasos {
  /* Es un <ol> por semántica (los pasos tienen orden), pero la numeración
     visible la pone .paso__numero con un counter. Sin este reset el navegador
     dibuja TAMBIÉN sus marcadores y se ven dos numeraciones. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: var(--space-8) var(--space-7);
  margin-top: var(--space-10);
  counter-reset: paso;
}
.paso { position: relative; counter-increment: paso; }

/* Hilo que conecta los pasos: la "línea de flujo". Se corta en el último y en
   layout de una sola columna. */
.paso::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(2.75rem + var(--space-4));
  right: calc(-1 * var(--space-7));
  height: 1px;
  background: linear-gradient(90deg,
              var(--color-border) 0%,
              var(--color-border) 62%,
              transparent 100%);
}
.paso:last-child::after { display: none; }

.paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-chip-bg);
  color: var(--color-chip-fg);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-5);
}
.paso__numero::before { content: counter(paso, decimal-leading-zero); }

.paso__titulo {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
}
.paso__texto {
  color: var(--color-fg-muted);
  line-height: var(--line-height-relaxed);
  font-size: var(--font-size-md);
  text-wrap: pretty;
}
/* La nota normativa de cada paso: convierte la fricción en confianza, que es
   literalmente lo que pide la guía de voz del DS (brand-voice: "cita la
   norma"). */
.paso__norma {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
  border-left: 2px solid var(--acento-texto);
  padding-left: var(--space-3);
  line-height: var(--line-height-snug);
}

@media (max-width: 720px) {
  .paso::after { display: none; }
}

/* ============================================================================
   CUMPLIMIENTO — la losa
   ----------------------------------------------------------------------------
   Es la sección que le sirve al analista de riesgo, y está diseñada como un
   DOCUMENTO, no como una sección de marketing: fondo oscuro en AMBOS temas,
   retícula de credenciales, identificadores en monoespaciada con cifras
   tabulares. Se lee como un certificado porque funcionalmente lo es.

   Que sea oscura en modo claro es deliberado (patrón de Brex/Moov para
   secciones de seguridad): corta el ritmo de la página y señala "acá cambia
   el registro".
   ========================================================================== */
.seccion--losa {
  background: var(--losa-bg);
  color: var(--losa-fg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.seccion--losa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(46% 58% at 82% 0%,
              color-mix(in srgb, var(--losa-acento) 15%, transparent) 0%,
              transparent 70%);
}
.seccion--losa .seccion__titulo { color: var(--losa-fg); }
.seccion--losa .seccion__etiqueta { color: var(--losa-acento); }
.seccion--losa .seccion__entrada { color: var(--losa-muted); }

.credenciales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 0;
  margin-top: var(--space-10);
  border-top: 1px solid var(--losa-linea);
}
.credencial {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
  border-bottom: 1px solid var(--losa-linea);
}
.credencial__k {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--losa-acento);
}
.credencial__v {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--losa-fg);
  line-height: var(--line-height-snug);
}
/* Los identificadores verificables van en mono con cifras tabulares: es la
   misma convención que el DS usa para dinero (.money) y por la misma razón —
   son datos que alguien va a cotejar carácter por carácter contra el RUES. */
.credencial__v--id {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.credencial__nota {
  font-size: var(--font-size-sm);
  color: var(--losa-muted);
  line-height: var(--line-height-snug);
}

/* Descargo: bloque aparte, borde de acento, sin dramatismo pero imposible de
   pasar por alto. Cumple las líneas rojas del vault (CLAUDE.md §7). */
.descargo {
  margin-top: var(--space-10);
  padding: var(--space-7);
  border: 1px solid var(--losa-linea);
  border-left: 3px solid var(--losa-acento);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--losa-fg) 4%, transparent);
}
.descargo__titulo {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--losa-acento);
  margin-bottom: var(--space-4);
}
.descargo p {
  color: var(--losa-muted);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
}
.descargo strong { color: var(--losa-fg); font-weight: var(--font-weight-semibold); }

/* ============================================================================
   TECNOLOGÍA
   ----------------------------------------------------------------------------
   Encuadre: confianza, no alarde. Cada punto técnico se enuncia por su
   CONSECUENCIA para el usuario, no por su nombre de librería.
   ========================================================================== */
.tecno {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}
.tecno__item { display: flex; flex-direction: column; gap: var(--space-4); }
.tecno__icono {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--acento-texto);
}
.tecno__icono svg { width: 100%; height: 100%; }
.tecno__titulo {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
}
.tecno__texto {
  color: var(--color-fg-muted);
  line-height: var(--line-height-relaxed);
  text-wrap: pretty;
}

/* Visualización del ledger de partida doble. Concepto abstracto → figura. */
.ledger {
  margin-top: var(--space-10);
  padding: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-elevated);
  overflow-x: auto;
}
.ledger__fila {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ledger__fila:last-child { border-bottom: 0; }
.ledger__fila--cabecera {
  font-size: var(--font-size-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
}
.ledger__cuenta { color: var(--color-fg); }
.ledger__debe   { color: var(--color-fg); min-width: 8rem; text-align: right; }
/* Es una CIFRA, o sea texto que hay que poder leer: acento corregido, no el
   300 crudo, que sobre el lienzo claro daba 2.71:1. */
.ledger__haber  { color: var(--acento-texto); min-width: 8rem; text-align: right; }
.ledger__pie {
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
  font-family: var(--font-sans);
  line-height: var(--line-height-snug);
}

/* ============================================================================
   DESCARGA
   ========================================================================== */
.descarga { text-align: center; }
.descarga .seccion__titulo,
.descarga .seccion__entrada { margin-inline: auto; }
.descarga .seccion__titulo { max-width: 24ch; }
.descarga__acciones {
  margin-top: var(--space-8);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.descarga__nota {
  margin-top: var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
}

/* Botón propio de tienda. NO es el badge oficial de Google Play: no hay ficha
   publicada y su uso está sujeto a las guías de marca de Google. */
.boton-tienda {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-7);
  min-height: 3.6rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--color-action);
  color: var(--color-action-fg);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  box-shadow: var(--elev-1);
  transition: transform var(--motion-duration-fast) var(--motion-ease),
              box-shadow var(--motion-duration-default) var(--motion-ease),
              background-color var(--motion-duration-fast) var(--motion-ease);
}
.boton-tienda:hover {
  background: var(--color-action-hover);
  transform: translateY(-2px);
  box-shadow: var(--elev-2);
}
.boton-tienda:active { transform: translateY(0); }
.boton-tienda svg { width: 1.55rem; height: 1.55rem; flex: none; }
.boton-tienda__k {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.86;
  line-height: 1.4;
}
.boton-tienda__v {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
}

/* ============================================================================
   MODAL
   ----------------------------------------------------------------------------
   <dialog> nativo: foco atrapado, Esc, y capa superior sin z-index, gratis.
   ========================================================================== */
.modal {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated);
  color: var(--color-fg);
  padding: 0;
  max-width: 34rem;
  width: calc(100% - 2rem);
  box-shadow: var(--elev-3);
}
.modal::backdrop {
  background: color-mix(in srgb, #0F1A19 62%, transparent);
  backdrop-filter: blur(3px);
}
.modal[open] { animation: modal-entra var(--motion-duration-modal) var(--motion-ease-drawer); }
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.modal__cuerpo { padding: var(--space-8); }
.modal__titulo {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  padding-right: var(--space-8);
}
.modal__texto {
  color: var(--color-fg-muted);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-5);
  text-wrap: pretty;
}
.modal__cerrar {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: var(--touch-target);
  height: var(--touch-target);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fg-subtle);
  cursor: pointer;
}
.modal__cerrar:hover { background: var(--color-bg-muted); color: var(--color-fg); }
.modal__acciones { margin-top: var(--space-7); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ============================================================================
   PIE
   ========================================================================== */
.pie {
  border-top: 1px solid var(--hairline);
  padding-block: var(--ritmo-seccion) var(--space-8);
  background: var(--color-bg-muted);
}
.pie__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-9) var(--space-7);
}
.pie__marca { max-width: 30ch; }
.pie__desc {
  margin-top: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
  line-height: var(--line-height-relaxed);
}
.pie__titulo {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
  margin-bottom: var(--space-5);
}
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.pie__lista a, .pie__lista span {
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}
.pie__lista a:hover { color: var(--color-link-hover); }
.pie__id {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--font-size-sm);
  color: var(--color-fg-muted);
}
.pie__base {
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-7);
  justify-content: space-between;
  align-items: baseline;
}
.pie__legal {
  font-size: var(--font-size-xs);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-relaxed);
  max-width: 78ch;
  text-wrap: pretty;
}

/* ============================================================================
   DOCUMENTO LEGAL (/terminos, /privacidad)
   ----------------------------------------------------------------------------
   Texto largo pensado para LEERSE, no para hojearse: medida de ~68ch, interlínea
   holgada, jerarquía marcada con peso y espacio antes que con color. Es
   probable que alguien lo imprima para un expediente, así que también se cuida
   en @media print.
   ========================================================================== */
.documento { padding-block: 9rem var(--ritmo-seccion); }

.documento__volver {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-7);
}
.documento__volver a { color: var(--color-fg-muted); }
.documento__volver a:hover { color: var(--color-link-hover); }

.documento__titulo {
  font-size: var(--paso-titulo);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.documento__meta {
  margin-top: var(--space-4);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-fg-subtle);
}
.documento__version {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.documento__cuerpo {
  margin-top: var(--space-8);
  font-size: 1.02rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-fg-muted);
}
.documento__cuerpo > * + * { margin-top: var(--space-5); }

.documento__cuerpo h2 {
  margin-top: var(--space-10);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-fg);
  scroll-margin-top: 6rem;
}
.documento__cuerpo h3 {
  margin-top: var(--space-9);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
  scroll-margin-top: 6rem;
}
.documento__cuerpo h4 {
  margin-top: var(--space-7);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-fg);
}
.documento__cuerpo strong { color: var(--color-fg); font-weight: var(--font-weight-semibold); }
.documento__cuerpo ul,
.documento__cuerpo ol { padding-left: var(--space-6); }
.documento__cuerpo li + li { margin-top: var(--space-3); }
.documento__cuerpo li::marker { color: var(--acento-texto); }

.documento__cuerpo hr {
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin-block: var(--space-9);
}

.documento__cuerpo blockquote {
  border-left: 3px solid var(--acento-texto);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  background: var(--color-bg-muted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.documento__cuerpo blockquote p { color: var(--color-fg-muted); }

.documento__cuerpo code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.14em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-fg);
}

/* Las tablas del texto legal son anchas (finalidad + base legal). Se les da su
   propio scroll horizontal para que NUNCA hagan scrollear el body entero. */
.tabla-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  -webkit-overflow-scrolling: touch;
}
.documento__cuerpo table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  min-width: 34rem;
}
.documento__cuerpo th,
.documento__cuerpo td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.documento__cuerpo th {
  background: var(--color-bg-muted);
  color: var(--color-fg);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.documento__cuerpo tbody tr:last-child td { border-bottom: 0; }

@media print {
  .documento { padding-top: var(--space-6); }
  .documento__volver { display: none; }
  .documento__cuerpo { color: #000000; font-size: 10.5pt; }
  .documento__cuerpo h2, .documento__cuerpo h3 { break-after: avoid; }
  .tabla-scroll { break-inside: avoid; }
}

/* ============================================================================
   REVELADO AL SCROLL
   ----------------------------------------------------------------------------
   Sólo se activa si el navegador soporta IntersectionObserver Y el usuario no
   pidió menos movimiento. La clase .js-revela la agrega site.js, así que sin
   JS todo queda visible por defecto — el contenido nunca depende del script.
   ========================================================================== */
.js-revela .revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--motion-ease), transform 620ms var(--motion-ease);
  will-change: opacity, transform;
}
.js-revela .revela.es-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-revela .revela { opacity: 1; transform: none; transition: none; }
  .pildora-estado__punto { animation: none; }
  .modal[open] { animation: none; }
}

/* ============================================================================
   IMPRESIÓN
   ----------------------------------------------------------------------------
   El analista de riesgo imprime o exporta a PDF para adjuntar al expediente.
   Vale la pena que salga legible.
   ========================================================================== */
@media print {
  .header, .tema-toggle, .descarga__acciones, .modal { display: none !important; }
  .heroe { padding-block: var(--space-8); }
  .heroe::before, .heroe::after, .seccion--losa::before { display: none; }
  .seccion--losa { background: #FFFFFF; color: #000000; }
  .seccion--losa .seccion__titulo,
  .credencial__v { color: #000000; }
  .credencial__k, .descargo__titulo { color: #333333; }
  .descargo p, .credencial__nota, .seccion--losa .seccion__entrada { color: #222222; }
  .revela { opacity: 1 !important; transform: none !important; }
  a { color: #000000; }
}

/* ============================================================================
   ÍCONO DE MARCA — variante por tema
   ----------------------------------------------------------------------------
   El design system publica DOS versiones del ícono definitivo y dice para qué
   es cada una: crema para "app stores, marketing, fondos claros" y teal para
   "modo oscuro, splash, superficies profundas" (preview/brand-app-icon.html).
   Acá se respeta esa indicación en vez de forzar la crema en ambos temas.

   Los hex van literales y no por token a propósito: crema (#F8EFE2) y los
   ámbar del brote NO existen en colors_and_type.css. Es la única excepción a
   la regla de "no se inventan colores" en esta hoja, y existe porque el asset
   definitivo los trae. Anotado en el README para tokenizarlos aguas arriba.
   ========================================================================== */
.logo .icono-fondo { fill: #F8EFE2; }
[data-theme="dark"] .logo .icono-fondo { fill: #0A3D3A; }