/* ============================================================================
   ScriptorIA — sitio público (/, /taller, /plantillas, /trazabilidad,
   /casos, /precios, /api)
   ============================================================================

   ÁMBITO. Todo cuelga de `.sc-site`, la clase que pone el shell
   `templates/web/_shell.html`. Las páginas del sitio NO extienden
   `templates/base.html`: no cargan `collab.css`, `biblioteca.css` ni el
   `i18n.js` de 212 KB de la app. Por eso aquí se pueden usar reglas de
   elemento desnudo sin romper nada del taller.

   TOKENS. Los valores de marca son los canónicos de `pibico.css`, copiados
   literalmente. Se redeclaran en ámbito de sitio —y no se importa
   `pibico.css` entero— por la misma razón que lo hace la landing de
   Talk2Doc: `pibico.css` es byte-idéntico en api_auth, api_talk2doc y
   api_script, y arrastrar sus 34 KB de shell de aplicación a una portada
   pública sería pagar el shell dos veces. Si cambia un token de marca,
   cambia aquí con el mismo valor.

   AÑADIDOS PROPIOS DE ScriptorIA (no existen en la marca base):
   · `--vellum` / `--vellum-deep`  — el papel cálido del producto. ScriptorIA
     escribe documentos; su banda de descanso es papel, no gris.
   · `--filament`                  — es `--sky-400`, sin inventar color: es el
     hilo de luz que va del dato a su fuente, y sólo se usa para eso.
   · `--anchored` / `--partial` / `--unbacked` — son `--mint-600`,
     `--marigold-600` y `--rose-600`. Son los tres estados de anclaje reales
     del producto y NUNCA se usan para decorar.
   ========================================================================= */

.sc-site {
  /* — Marca pibiCo (valores canónicos) — */
  --primary-color:   #4682b4;
  --secondary-color: #6a9bc3;
  --accent-color:    #2c5171;
  --text-color:      #333;
  --text-light:      #666;

  --bg-gradient: linear-gradient(135deg, #2c5171 0%, #4682b4 50%, #6a9bc3 100%);

  --glass-bg:     rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.3);

  --ok:   #10b981;
  --warn: #fbbf24;
  --err:  #ef4444;
  --idle: #94a3b8;

  --mint-50:#ECFDF5;     --mint-200:#B8F0D8;     --mint-400:#5CCEA0;     --mint-600:#28946A;
  --marigold-50:#FFF8E6; --marigold-200:#FCE8A8; --marigold-400:#F2C84E; --marigold-600:#C49A18;
  --rose-50:#FFF0F0;     --rose-200:#FCCDD0;     --rose-400:#F28B93;     --rose-600:#D4505E;
  --sky-50:#EEF6FF;      --sky-200:#C0DFFA;      --sky-400:#6AB4F0;      --sky-600:#2E82C8;
  --slate-50:#F0F2F5;    --slate-200:#CDD2DA;    --slate-400:#8E96A8;    --slate-600:#5A6478; --slate-800:#3A4050;
  --lavender-200:#D8CCFA; --lavender-600:#7456C8;

  /* Rampa de TEXTO. Las variantes -600 son para gráfica —bordes, iconos,
     rellenos—, donde basta 3:1. Puestas como color de texto sobre su propio
     pastel-50 dan entre 2,48:1 y 3,75:1, y la batería de la ronda 3 midió 28
     fallos de contraste en 101 combinaciones. Estos valores se calcularon
     escalando cada color hacia negro hasta el primer punto que cumple 4,5:1
     sobre su pastel-50 Y sobre blanco, `--paper` y `--vellum`; el peor ratio
     de cada uno va anotado. Se comprueban en `tests/web/test_site_contrast.py`,
     que los recalcula: si alguien toca un token, la prueba lo dice. */
  --mint-700:#227c59;      /* peor 4,51:1 */
  --marigold-700:#876a11;  /* peor 4,50:1 */
  --rose-700:#b84652;      /* peor 4,57:1 */
  --sky-700:#2871ae;       /* peor 4,54:1 */
  --lavender-700:#6349aa;  /* peor 4,55:1 */
  --slate-700:#576f86;     /* texto sobre claro  · peor 4,59:1 */
  --slate-300:#748da4;     /* texto sobre oscuro · peor 4,51:1 */
  --link:#3c709b;          /* enlaces y acentos de texto sobre claro · peor 4,53:1 */
  --on-brand:#e3eaef;      /* texto sobre `.band--brand` · peor 4,52:1 en el tramo claro */

  /* RITMO VERTICAL. Medido en la portada antes de existir esto: la misma
     relación —una pieza y la nota que la explica— recibía 22, 26, 30, 34 o
     52 px según la sección, y había diez valores distintos de hueco en una
     sola página. Eso no se ve como «espaciado variado»: se ve como que unas
     cosas están pegadas y otras sueltas. Tres medidas y ninguna más:

       --sp-sec  cabecera de sección → su contenido
       --sp-blk  bloque → bloque (una pieza y la nota que la sigue)
       --sp-cap  leyenda o marca → la pieza que describe */
  --sp-sec: 48px;
  --sp-blk: 34px;
  --sp-cap: 26px;
  --sp-tight: 14px;   /* pares que van juntos a propósito: un pie y su metadato */
  --sp-pair: 9px;     /* titular → su texto de apoyo, dentro de una pieza */
  --sp-hair: 4px;     /* cifra → su etiqueta */

  --font-brand:   'Raleway', 'Montserrat', Arial, sans-serif;
  --font-heading: 'Montserrat', Arial, 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --radius-card: 24px;
  --radius: 12px;
  --radius-sm: 8px;

  /* — Propios de ScriptorIA — */
  --ink:         #0d1a26;
  --ink-deep:    #081018;
  --ink-soft:    #16283a;
  --vellum:      #f4f0e6;
  --vellum-deep: #e8e1cf;
  --paper:       #f8f9fa;

  --filament:  var(--sky-400);
  --anchored:  var(--mint-600);
  --partial:   var(--marigold-600);
  --unbacked:  var(--rose-600);

  --shadow-card: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lift: 0 14px 40px rgba(13,26,38,0.16);
  --nav-h: 58px;

  color: var(--text-color);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;

  /* `clip` y NO `hidden`. `overflow-x: hidden` convierte este elemento en un
     contenedor de desplazamiento, y eso rompe el `position: sticky` de la barra
     de navegación: medido con el navegador, tras bajar 2.000 px la barra estaba
     en `top: -2000`, es decir, se había ido con la página. En un sitio de siete
     páginas donde la barra es la única forma de moverse, eso no es un detalle.
     `overflow: clip` recorta igual sin crear contenedor de desplazamiento, así
     que el `sticky` sobrevive. */
  overflow-x: clip;
}

/* El cuerpo de una página de sitio no lleva el gradiente de la app: cada
   banda pinta su propio fondo y el gradiente se reserva para `.band--brand`. */
body.sc-body { margin: 0; background: var(--paper); }

.sc-site *, .sc-site *::before, .sc-site *::after { box-sizing: border-box; }
/* EL RESET VA CON `:where()`, Y ESO ES LO IMPORTANTE DE ESTAS DOS REGLAS.
   `.sc-site p` puntúa (0,1,1) y le gana a cualquier clase suelta (0,1,0), así
   que `p.u-btn-pair { margin-top: 12px }` no se aplicaba: el par Swagger/ReDoc
   salía pegado al párrafo de encima, y lo mismo les pasaba a las llamadas a la
   acción del final de cada sección y al epígrafe del mosaico de familias. Se
   arreglaron una a una y el fallo volvió a aparecer en la siguiente regla que
   se escribió, que es la señal de que el problema no era la regla sino el
   reset. `:where()` no aporta especificidad: esto puntúa (0,0,1) y cualquier
   clase le gana, que es lo que se espera de un reset. */
:where(.sc-site) h1, :where(.sc-site) h2, :where(.sc-site) h3, :where(.sc-site) h4 {
  font-family: var(--font-heading); margin: 0; text-wrap: pretty; line-height: 1.08;
  letter-spacing: -0.02em;
}
:where(.sc-site) p { margin: 0; text-wrap: pretty; }
/* El `:not(.btn)` NO es cosmética: `.sc-site a` puntúa (0,1,1) y `.btn-primary`
   (0,1,0), así que sin él el color de enlace GANA al del botón y todo <a> con
   clase de botón sale con el texto azul sobre fondo azul —invisible—. Se vio en
   la primera captura: el botón «Entrar» de la barra y la llamada principal del
   hero eran dos rectángulos vacíos. */
.sc-site a:not(.btn) { color: var(--link); text-decoration: none; transition: color .15s; }
.sc-site a:not(.btn):hover { color: var(--accent-color); }
.sc-site a.btn { text-decoration: none; }
.sc-site button { font-family: var(--font-body); }
.sc-site ::selection { background: rgba(70,130,180,.25); }
/* ANILLO DE DOS TONOS, y no es capricho. La versión anterior era un halo azul
   translúcido más un filo `--primary-color`: sobre papel daba 3,90:1, pero
   sobre el tramo claro de `.band--brand` (#3d6d95) bajaba a 1,34:1 — y en esa
   banda hay un control enfocable, el botón «Recorrer la API real». Al tabular
   hasta él no se veía absolutamente nada. Un anillo claro pegado al elemento
   más otro oscuro por fuera siempre deja uno de los dos en contraste contra lo
   que haya debajo, sea papel o sea gradiente:
     #ffffff sobre #3d6d95 → 5,50:1   ·   #2c5171 sobre #ffffff → 8,33:1
     #ffffff sobre #0d1a26 → 17,60:1  ·   #2c5171 sobre #f8f9fa → 7,90:1 */
.sc-site :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent-color);
  border-radius: var(--radius-sm);
}
.sc-site img { max-width: 100%; display: block; }
.sc-site .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sc-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 3000;
  background: #fff; color: var(--accent-color); padding: 8px 14px;
  border-radius: var(--radius-sm); font-weight: 600; font-size: .875rem;
}
.sc-skip:focus { left: 8px; }

/* ── Rejilla ───────────────────────────────────────────────────────────── */
.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - 48px); margin-inline: auto; }
@media (max-width: 640px) {
  .wrap, .wrap-narrow { width: calc(100% - 32px); }
}

/* ── Bandas ────────────────────────────────────────────────────────────── */
.band { position: relative; padding: 104px 0; }
.band--tight { padding: 72px 0; }
.band--paper  { background: var(--paper); }
.band--vellum { background: var(--vellum); }
.band--vellum::before {
  /* Textura de papel: una malla diagonal de 1 px al 3 %. No es decoración
     gratuita — separa la banda de descanso de la banda blanca sin meter otro
     color, que es lo que rompería la paleta. */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(45deg,
    rgba(13,26,38,.03) 0 1px, transparent 1px 7px);
}
.band--ink { background: var(--ink); color: #dbe6ef; }
.band--ink h1, .band--ink h2, .band--ink h3 { color: #fff; }
/* `--ink` y `--ink-deep` se diferencian en 1,087:1: dos bandas oscuras seguidas
   se leen como una sola de 2.709 px. `--vellum` se salva de lo mismo con una
   trama diagonal al 3 %; aquí se hace lo propio, en negativo y aún más tenue,
   para que la costura entre bandas exista sin que se note el motivo. */
.band--ink-deep {
  background: var(--ink-deep); color: #c7d6e2;
  background-image: repeating-linear-gradient(135deg,
    rgba(255,255,255,.022) 0 1px, transparent 1px 9px);
}
/* NO usa `--bg-gradient` tal cual. Medido: blanco puro sobre su tramo más
   claro (#6a9bc3) da 2,96:1 — por debajo del mínimo incluso para texto grande—,
   y las etiquetas que había encima (#64809a) daban 1,00:1: invisibles. El
   gradiente de aquí conserva el recorrido de la marca con los tres tramos
   bajados, y así el peor caso sube a 5,50:1 con blanco. Los valores están
   calculados, no estimados: ese fue exactamente el fallo de la primera
   corrección de este bloque. */
.band--brand {
  background: linear-gradient(135deg, #1d3a52 0%, #2c5171 55%, #3d6d95 100%);
  color: #e8f1f8;
}
.band--brand h2 { color: #fff; }
.band > .wrap, .band > .wrap-narrow { position: relative; z-index: 1; }

/* Filo de filamento: hilo de 1 px que cose dos bandas contiguas. */
.band--seam::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106,180,240,.5) 30%,
                              rgba(106,180,240,.5) 70%, transparent);
}

/* ── Cabeceras de sección ──────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--link); margin-bottom: 14px; line-height: 1;
}
.band--ink .eyebrow, .band--ink-deep .eyebrow, .band--brand .eyebrow { color: var(--sky-400); }
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: .6;
}
.sec-title { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; max-width: 20ch; }
.sec-title--wide { max-width: 28ch; }
.sec-lede {
  font-size: 1.0625rem; line-height: 1.62; color: var(--text-light); max-width: 56ch;
}
.band--ink .sec-lede, .band--ink-deep .sec-lede { color: #9db3c6; }
.band--brand .sec-lede { color: rgba(255,255,255,.85); }
.sec-head { margin-bottom: var(--sp-sec); }
/* Un titular suelto y su entradilla: valían 20 px en tres páginas y 16 en
   /casos. La misma relación no puede medir dos cosas según dónde caiga. */
.sc-site .sec-title + .sec-lede,
.sc-site .sec-title--case + .sc-case-p { margin-top: 20px; }
/* `align-items: end` alineaba las dos columnas por su BASE, y como el titular
   tiene una, dos o tres líneas según la sección, la entradilla saltaba: medida
   en las diez cabeceras partidas del sitio, caía entre −11,9 px y +63,1 px
   respecto a la primera línea del titular —un recorrido de 75 px—. En la forja
   de la portada arrancaba 42 px POR ENCIMA del epígrafe, y eso no se lee como
   una decisión: se lee como un fallo. Alineadas por arriba, la entradilla
   empieza siempre donde empieza el titular. */
.sec-head--split {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start;
}
/* La entradilla arranca donde arranca el TITULAR, no donde arranca la columna.
   Cuando hay epígrafe encima, hay que salvar su alto: medido, 27 px de epígrafe
   más 10 de ajuste óptico entre dos cuerpos distintos. Sin epígrafe basta el
   ajuste. Medido después: las cinco cabeceras partidas de la portada quedan en
   0 px de desfase, frente al recorrido de 75 px que había antes. */
.sec-head--split > .sec-lede { margin-top: 10px; }
.sec-head--split:has(.eyebrow) > .sec-lede { margin-top: 37px; }
@media (max-width: 900px) {
  .sec-head--split { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .sec-title { max-width: none; }
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: .9375rem; font-weight: 600; line-height: 1.2; cursor: pointer;
  transition: transform .16s, box-shadow .16s, background .16s, color .16s, border-color .16s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
           stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn-primary { background: var(--primary-color); color: #fff; }
.btn-primary:hover { background: var(--accent-color); color: #fff;
                     transform: translateY(-1px); box-shadow: 0 6px 18px rgba(70,130,180,.34); }
.btn-outline { background: transparent; color: var(--accent-color);
               border-color: rgba(44,81,113,.35); }
.btn-outline:hover { background: rgba(44,81,113,.08); color: var(--accent-color);
                     transform: translateY(-1px); }
.band--ink .btn-outline, .band--ink-deep .btn-outline, .band--brand .btn-outline,
.sc-hero .btn-outline, .final .btn-outline {
  color: #fff; border-color: rgba(255,255,255,.4);
}
.band--ink .btn-outline:hover, .band--ink-deep .btn-outline:hover,
.band--brand .btn-outline:hover, .sc-hero .btn-outline:hover,
.final .btn-outline:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-light); padding: 8px 12px; }
.btn-ghost:hover { color: var(--accent-color); background: rgba(44,81,113,.07); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Botón de acción sólo-icono: cuadrado perfecto, sin etiqueta. */
.icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: var(--radius-sm); border: none;
  background: rgba(44,81,113,.08); color: var(--accent-color); cursor: pointer;
  transition: background .15s, transform .15s; padding: 0;
}
.icon-btn:hover { background: rgba(44,81,113,.16); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
                stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.band--ink .icon-btn { background: rgba(255,255,255,.1); color: #dbe6ef; }
.band--ink .icon-btn:hover { background: rgba(255,255,255,.2); }

/* ── Navbar ────────────────────────────────────────────────────────────── */
.sc-nav {
  position: sticky; top: 0; z-index: 1400; height: var(--nav-h);
  background: rgba(248,249,250,.82);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(13,26,38,.08);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.sc-nav.is-scrolled { background: rgba(248,249,250,.95); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sc-nav .wrap { display: flex; align-items: center; gap: 20px; height: 100%; }
.sc-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.sc-brand img { width: 25px; height: 25px; }
.sc-wordmark {
  font-family: var(--font-brand); font-size: 1.0625rem; letter-spacing: -.01em; line-height: 1;
}
.sc-wordmark b { font-weight: 700; color: var(--accent-color); }
.sc-wordmark i { font-style: normal; font-weight: 700; color: var(--link); }
.sc-nav-links { display: flex; align-items: center; gap: 3px; margin-left: 10px; flex: 1; }
.sc-nav-links a {
  padding: 7px 11px; border-radius: var(--radius-sm); font-size: .875rem;
  font-weight: 500; color: var(--slate-600); line-height: 1;
}
.sc-nav-links a:hover { background: rgba(44,81,113,.08); color: var(--accent-color); }
.sc-nav-links a.is-current { color: var(--accent-color); font-weight: 600;
                             background: rgba(70,130,180,.11); }
.sc-nav-cta { display: flex; align-items: center; gap: 8px; flex: none; }
.sc-burger { display: none; }

@media (max-width: 980px) {
  .sc-burger {
    display: inline-flex; margin-left: auto; order: 3;
    width: 36px; height: 36px; align-items: center; justify-content: center;
    background: none; border: none; color: var(--accent-color); cursor: pointer;
    border-radius: var(--radius-sm);
  }
  .sc-burger svg { width: 21px; height: 21px; fill: none; stroke: currentColor;
                   stroke-width: 2; stroke-linecap: round; }
  .sc-nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column;
    align-items: stretch; gap: 2px; padding: 12px 20px 18px;
    background: rgba(248,249,250,.98);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(13,26,38,.1); margin: 0;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    display: none;
  }
  .sc-nav-links.is-open { display: flex; }
  .sc-nav-links a { padding: 11px 12px; font-size: .9375rem; }
  .sc-nav-cta .btn { padding: 9px 15px; font-size: .875rem; }
}
@media (max-width: 520px) { .sc-nav-cta .sc-lang { display: none; } }

/* Selector de idioma (patrón api_memo: bandera + etiqueta) */
.sc-lang { position: relative; }
.sc-lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  background: rgba(44,81,113,.08); border: none; border-radius: var(--radius-sm);
  color: var(--accent-color); font-size: .8125rem; font-weight: 600; cursor: pointer;
  line-height: 1;
}
.sc-lang-btn:hover { background: rgba(44,81,113,.16); }
.sc-lang-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.sc-lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 132px; padding: 4px;
  background: #fff; border: 1px solid rgba(13,26,38,.1); border-radius: var(--radius);
  box-shadow: var(--shadow-card); display: none; z-index: 20;
}
.sc-lang-menu.is-open { display: block; }
.sc-lang-menu button {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 9px;
  background: none; border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-size: .8125rem; color: var(--text-color); text-align: left; line-height: 1.2;
}
.sc-lang-menu button:hover { background: rgba(70,130,180,.1); }
.sc-lang-menu button[aria-current="true"] { font-weight: 600; color: var(--accent-color); }
.sc-flag { width: 17px; height: 12px; border-radius: 2px; flex: none; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.sc-hero { position: relative; min-height: min(88vh, 780px); display: flex;
           align-items: center; overflow: hidden; background: var(--ink-deep); }
.sc-hero-media { position: absolute; inset: 0; }
.sc-hero-media video, .sc-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sc-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(8,16,24,.94) 0%, rgba(8,16,24,.80) 42%,
                    rgba(8,16,24,.30) 72%, rgba(8,16,24,.55) 100%),
    linear-gradient(180deg, rgba(8,16,24,.55) 0%, transparent 30%, rgba(8,16,24,.75) 100%);
}
.sc-hero-inner { position: relative; z-index: 2; width: 100%; padding: 108px 0 76px; }
.sc-hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px;
  border: 1px solid rgba(106,180,240,.4); border-radius: 999px;
  background: rgba(106,180,240,.1); color: var(--sky-200);
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1; margin-bottom: 22px;
}
.sc-hero-kicker .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--sky-400);
  box-shadow: 0 0 0 3px rgba(106,180,240,.25);
}
.sc-hero h1 {
  font-size: clamp(2.25rem, 5.6vw, 4.25rem); font-weight: 700; color: #fff;
  max-width: 17ch; letter-spacing: -.03em; line-height: 1.02;
}
.sc-hero h1 em {
  display: block; font-style: normal; color: var(--sky-400);
}
.sc-hero-sub {
  margin-top: 22px; max-width: 60ch; font-size: 1.0625rem; line-height: 1.62;
  color: #a9c0d3;
}
.sc-hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.sc-hero-meta {
  margin-top: 52px; display: flex; flex-wrap: wrap; gap: 40px;
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,.13);
}
.sc-hero-meta > div { display: flex; flex-direction: column; gap: 5px; }
.sc-hero-meta .m-num {
  font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: #fff;
  line-height: 1;
}
.sc-hero-meta .m-lab {
  font-size: .75rem; color: #8fa8bd; line-height: 1.25; max-width: 15ch;
}
@media (max-width: 640px) {
  .sc-hero-meta { gap: 22px 30px; }
  .sc-hero-inner { padding: 74px 0 56px; }
}

/* ── Tarjetas ──────────────────────────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid rgba(13,26,38,.08);
  border-radius: var(--radius-card); padding: 26px 26px 24px;
  box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.band--ink .card, .band--ink-deep .card {
  background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.1);
  box-shadow: none;
}
.band--ink .card:hover { background: rgba(255,255,255,.075); box-shadow: none; }
/* Peso 700 y no 600: sólo hay una cara real por familia y el trazo sintético
   es el mismo, así que ambos se pintaban EXACTAMENTE igual —214,11 px de ancho
   medido en los dos—. Declarar una distinción que la pantalla no puede mostrar
   sólo sirve para creer que existe. */
.card h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--sp-pair); }
.card p { font-size: .9375rem; line-height: 1.6; color: var(--text-light); }
.band--ink .card p { color: #9db3c6; }

.card-ico {
  width: 40px; height: 40px; border-radius: var(--radius); display: flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
  background: rgba(70,130,180,.12); color: var(--link);
}
.card-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
                stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.band--ink .card-ico { background: rgba(106,180,240,.15); color: var(--sky-400); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Pastillas y estados ───────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 999px; font-size: .6875rem; font-weight: 600; line-height: 1.5;
  background: rgba(70,130,180,.12); color: var(--accent-color);
}
.pill-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pill--anchored { background: var(--mint-50);     color: var(--mint-700); }
.pill--partial  { background: var(--marigold-50); color: var(--marigold-700); }
.pill--unbacked { background: var(--rose-50);     color: var(--rose-700); }
.pill--anchored .pill-dot { background: var(--anchored); }
.pill--partial  .pill-dot { background: var(--partial); }
.pill--unbacked .pill-dot { background: var(--unbacked); }

/* ── Revelado en scroll ────────────────────────────────────────────────── */
/* El revelado sólo se arma si hay JavaScript. La clase `no-js` del <html> se
   quita en el primer script del <head>; si ese script no llega a correr,
   `.rv` nunca se pone a `opacity: 0` y la página se lee entera. Antes de esto,
   sin JavaScript el sitio salía EN BLANCO —justo lo contrario de lo que
   promete el documento de stack. */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .sc-site * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.sc-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 14px);
  z-index: 2200; max-width: min(460px, calc(100vw - 32px));
  padding: 11px 18px; border-radius: var(--radius); background: var(--ink);
  color: #fff; font-size: .875rem; line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s;
}
.sc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sc-toast.is-err { background: var(--rose-600); }

/* ── Panel deslizante (patrón plano api_collab) ────────────────────────── */
.sc-backdrop {
  position: fixed; inset: 0; z-index: 1490; background: rgba(8,16,24,.42);
  opacity: 0; pointer-events: none; transition: opacity .25s;
  backdrop-filter: blur(2px);
}
.sc-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sc-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: 45%;
  min-width: 360px; max-width: 560px; z-index: 1500;
  background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,.2);
  border-radius: 16px 0 0 16px;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; pointer-events: none;
}
.sc-panel.is-open { transform: translateX(0); pointer-events: auto; }
.sc-panel[inert] { pointer-events: none; }
.sc-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid rgba(13,26,38,.08); flex: none;
}
.sc-panel-head h3 { font-size: 1rem; font-weight: 600; line-height: 1.1; }
.sc-panel-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.sc-panel-foot {
  flex: none; display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px; border-top: 1px solid rgba(13,26,38,.08); background: #fbfcfd;
}
@media (max-width: 560px) { .sc-panel { width: 100%; min-width: 0; border-radius: 0; } }

.field { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.field > span { font-size: .7rem; font-weight: 500; color: var(--text-light);
                letter-spacing: .02em; line-height: 1; }
.field input, .field textarea, .field select {
  padding: 9px 11px; border: 1px solid rgba(13,26,38,.14); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: .875rem; color: var(--text-color);
  background: #fff; width: 100%; line-height: 1.3;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(70,130,180,.1);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-check { display: flex; align-items: flex-start; gap: 8px; font-size: .8125rem;
               line-height: 1.45; color: var(--text-light); }
.field-check input { margin-top: 2px; flex: none; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.sc-foot { background: var(--ink-deep); color: #8fa8bd; padding: 62px 0 26px; }
.sc-foot-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sc-foot .sc-wordmark b { color: #fff; }
.sc-foot .sc-wordmark i { color: var(--sky-400); }
.sc-foot-brand p { margin-top: 14px; font-size: .8125rem; line-height: 1.6; max-width: 34ch; }
.sc-foot h3 {
  font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin-bottom: 14px; font-family: var(--font-mono);
}
.sc-foot ul { list-style: none; margin: 0; padding: 0; display: flex;
              flex-direction: column; gap: 8px; }
/* El `:not(.btn)` de `.sc-site a` puntúa (0,2,1) y ganaba a `.sc-foot a`
   (0,1,1): los enlaces del pie se pintaban con el azul de enlace y, al pasar
   el ratón, con `--accent-color` sobre fondo casi negro —2,30:1—. Peor aún,
   en la columna «Contacto» conviven dos <a> y un <button>, y el botón sí
   conservaba su color: tres elementos de la misma lista en dos colores.
   Prefijar con `.sc-site` iguala la especificidad y el orden decide. */
.sc-site .sc-foot a, .sc-foot-link {
  color: #8fa8bd; font-size: .8125rem; background: none; border: none; padding: 0;
  cursor: pointer; font-family: var(--font-body); text-align: left; line-height: 1.3;
}
.sc-site .sc-foot a:hover, .sc-foot-link:hover { color: var(--sky-400); }
.sc-foot-bar {
  padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: center; font-size: .75rem; color: #64809a;
}
.sc-foot-bar .sc-pulse { margin-left: auto; }
@media (max-width: 900px) {
  .sc-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .sc-foot-bar .sc-pulse { margin-left: 0; }
}
@media (max-width: 520px) { .sc-foot-grid { grid-template-columns: 1fr; } }

/* Pulso real del servicio (lee /live y /ready) */
.sc-pulse { display: inline-flex; align-items: center; gap: 7px; font-size: .75rem;
            font-family: var(--font-mono); color: #64809a; }
.sc-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle);
                flex: none; transition: background .3s, box-shadow .3s; }
.sc-pulse[data-state="up"]   .sc-pulse-dot { background: var(--mint-400);
  box-shadow: 0 0 0 3px rgba(92,206,160,.2); animation: sc-beat 2.4s ease-in-out infinite; }
.sc-pulse[data-state="degraded"] .sc-pulse-dot { background: var(--marigold-400); }
.sc-pulse[data-state="down"] .sc-pulse-dot { background: var(--rose-400); }
@keyframes sc-beat { 0%,100% { opacity: 1; } 50% { opacity: .45; } }


/* ── Foco: el anillo gana siempre ──────────────────────────────────────────
   `.sc-site :focus-visible` puntúa (0,2,0) y `.btn-primary:hover` también,
   pero el segundo está DESPUÉS en el fichero: un botón enfocado con el ratón
   encima perdía el anillo entero, porque el `box-shadow` del `:hover` no lo
   suma, lo sustituye. Se redeclara al final, que es donde nada lo pisa. */
.sc-site a:focus-visible,
.sc-site button:focus-visible,
.sc-site .btn:focus-visible,
.sc-site input:focus-visible,
.sc-site textarea:focus-visible,
.sc-site summary:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent-color);
}

/* Texto que sólo existe para el lector de pantalla. Se recorta a 1 px en vez de
   `display:none` porque lo oculto de verdad tampoco lo anuncian los lectores. */
.u-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}