/* ==========================================================================
   kwadrant.es — hoja de estilos única
   --------------------------------------------------------------------------
   Sistema visual documentado en docs/diseno-web.md. Paleta y tipografías de
   la identidad (Kwadrant-Systems, docs/diseno/identidad.md).

   Reglas de la casa:

   1. Esta hoja es el ÚNICO sitio donde hay CSS. Ni bloques <style> ni
      atributos style= en el HTML: la CSP va con style-src 'self' y
      style-src-attr 'none'. Un style= en línea se rompe en producción, y es
      intencionado.
   2. Dos tipografías, servidas desde este dominio (FONTS.md): DM Sans para el
      texto, IBM Plex Mono para etiquetas, cifras y datos técnicos.
   3. Registro de documento técnico: papel, tinta, filetes de un píxel y un
      solo azul. Sin degradados, sin sombras, sin animaciones y sin iconos de
      colores. La profundidad la dan los filetes y los fondos, no las sombras.
   4. Una sola banda oscura por página como mucho.
   5. Ningún texto en mayúsculas sostenidas (guía de voz, 3.2): las etiquetas
      van en minúscula con mayúscula inicial, en la mono.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografías locales
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/dm-sans-var.woff2') format('woff2-variations');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400-latin1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400-latin2.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500-latin1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500-latin2.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Color: los valores de identidad.md. Contraste medido (WCAG 2.1):
     ink sobre paper 17,2 · ink-2 sobre paper-2 7,4 · ink-3 sobre paper-2 5,0 ·
     accent sobre paper 8,3 · blanco sobre accent 8,7 · night-ink-2 sobre
     night 8,2 · night-accent sobre night 8,0 · field-rule sobre paper 3,6. */
  --paper:        #fbfaf7;
  --paper-2:      #f4f2ec;
  --ink:          #15171a;
  --ink-2:        #4a4f57;
  --ink-3:        #63686f;
  --rule:         #e2e0d9;
  --rule-2:       #cbc8be;
  --field-rule:   #86837b;
  --accent:       #1f4e79;
  --accent-ink:   #163a5a;
  --accent-2:     #2f6fa8;
  --accent-soft:  #eaf1f7;
  --accent-line:  #c3d6e6;
  --night:        #12171d;
  --night-2:      #1a212a;
  --night-ink:    #e9eaec;
  --night-ink-2:  #a9b0b8;
  --night-rule:   #2b333d;
  --night-accent: #7fb2e0;
  /* La marca sobre --night: los colores de la variante oscura del favicon.
     Tinta 15,7:1 y acento 4,7:1; con los colores claros la tinta daba 1,0:1
     y tres cuartas partes de la marca desaparecían. */
  --night-mark:        #f1efe9;
  --night-mark-accent: #4a86c5;
  --st-ok:        #2f5d3a;
  --st-part:      #7e6419;
  --st-pend:      #8c3a1d;
  --st-out:       #63686f;

  /* Tipografía: cinco tamaños y no más. */
  --f-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --t-s:    14px;                        /* notas, pie, etiquetas */
  --t-m:    17px;                        /* cuerpo */
  --t-l:    19px;                        /* entradillas y h3 */
  --t-xl:   clamp(24px, 2.6vw, 32px);    /* h2 */
  --t-xxl:  clamp(32px, 4.6vw, 52px);    /* h1 */

  /* Espaciado: escala de 4 px. */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 72px;  --s-9: 104px;

  --radius:  4px;
  --wrap:    1120px;
  --measure: 66ch;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--t-xxl); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: var(--t-xl); letter-spacing: -0.02em; }
h3 { font-size: var(--t-l); font-weight: 600; }
h4 { font-size: var(--t-m); font-weight: 600; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

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

a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
}

strong { font-weight: 600; }

code, .t-mono { font-family: var(--f-mono); font-size: 0.9em; }

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

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon .solid { fill: currentColor; stroke: none; }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s-2);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--paper);
}

.skip:focus { left: var(--s-2); }

/* --------------------------------------------------------------------------
   4. Estructura
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.sec { padding: var(--s-8) 0; border-top: 1px solid var(--rule); }
.sec-first { border-top: 0; padding: var(--s-7) 0 var(--s-8); }
.sec-tight { padding: var(--s-6) 0 var(--s-8); }
.sec-alt { background: var(--paper-2); }
.sec-join { border-top: 0; padding-top: 0; }

/* La banda oscura: una por página como mucho. */
.sec-night {
  background: var(--night);
  color: var(--night-ink);
  border-top: 0;
}

.sec-night h2, .sec-night h3, .sec-night strong { color: #fff; }
.sec-night a { color: var(--night-accent); text-decoration-color: var(--night-rule); }
.sec-night .eyebrow, .sec-night .note, .sec-night .fine { color: var(--night-ink-2); }
.sec-night .eyebrow::before { background: var(--night-accent); }
.sec-night :focus-visible { outline-color: var(--night-accent); }

/* Cabecera de bloque: etiqueta, titular y, si hace falta, una entradilla. */
.sec-head { margin-bottom: var(--s-6); max-width: 760px; }
.sec-head > p { margin-top: var(--s-3); color: var(--ink-2); }
.sec-night .sec-head > p { color: var(--night-ink-2); }

/* Dos columnas asimétricas: el titular a la izquierda, el contenido a la
   derecha. La columna izquierda es ancha para que el titular no se parta en
   cuatro líneas. */
.split {
  display: grid;
  gap: var(--s-5) var(--s-7);
}

@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; }
  .split > :first-child { position: sticky; top: 96px; align-self: start; }
}

.cols-2, .cols-3 { display: grid; gap: var(--s-6); }

@media (min-width: 760px) {
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--s-5); }

/* --------------------------------------------------------------------------
   5. Texto
   -------------------------------------------------------------------------- */

/* Etiqueta: la mono, en minúscula con inicial, con el cuadrante azul de la
   marca delante. Sustituye a las mayúsculas sostenidas de la versión anterior. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-s);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-3);
}

.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--accent);
}

.eyebrow-flag { color: var(--st-pend); }
.eyebrow-flag::before { background: var(--st-pend); }

.lede {
  margin-top: var(--s-5);
  font-size: var(--t-l);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}

.note { font-size: var(--t-s); color: var(--ink-2); }
h1 + .note, h2 + .note { margin-top: var(--s-3); }
.fine { font-size: var(--t-s); color: var(--ink-3); line-height: 1.5; }

/* El número de la línea de negocio: «01», «02». */
.num {
  display: block;
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-s);
  color: var(--accent);
}

.sec-night .num { color: var(--night-accent); }

.lang-note { margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   6. Cabecera y pie
   -------------------------------------------------------------------------- */

/* La cabecera y el pie van en --night, como las bandas oscuras (decisión de
   Albert del 11 de octubre de 2026, rehecha sobre el rediseño el 26). El foco
   cambia de color con ellos: --accent-2 da 3,4:1 sobre --night, justo en el
   mínimo de 3:1; --night-accent da 8,0:1. */
.site-head {
  background: var(--night);
  border-bottom: 1px solid var(--night);
}

.site-head :focus-visible,
.site-foot :focus-visible { outline-color: var(--night-accent); }

@media (min-width: 900px) {
  .site-head { position: sticky; top: 0; z-index: 40; }
}

.site-head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--night-ink);
  text-decoration: none;
}

.brand svg { width: 26px; height: 26px; }
.brand .marca-tinta  { fill: var(--night-mark); }
.brand .marca-acento { fill: var(--night-mark-accent); }

.brand-name {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.06em;
  /* El logotipo, no un texto: la marca se escribe en mayúsculas. */
  text-transform: uppercase;
}

.brand-sub {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--night-ink-2);
}

/* Menú sin JavaScript. En pantalla ancha, una fila; en el móvil, una sola
   línea que se desplaza en horizontal en lugar de ocupar dos. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1) var(--s-5);
  font-size: 15px;
}

.site-nav a {
  padding: var(--s-2) 0;
  color: var(--night-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--night-ink); }

.site-nav a[aria-current="page"] {
  color: var(--night-ink);
  border-bottom-color: var(--night-accent);
}

/* El filete va en --night-ink-2 (8,2:1): con --night-rule, a 1,4:1, el
   recuadro no se veía y el selector perdía la forma de caja. */
.site-nav .lang {
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--night-ink-2);
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 13px;
}

@media (max-width: 899px) {
  .site-head-inner { padding-bottom: 0; }
  .site-nav {
    width: calc(100% + 2 * var(--s-5));
    margin: 0 calc(-1 * var(--s-5));
    padding: 0 var(--s-5) var(--s-1);
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--s-5);
    border-top: 1px solid var(--night-rule);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: var(--s-3) 0; }
}

/* El filete de arriba separa el pie de las páginas que acaban en una banda
   oscura: sin él harían costura. */
.site-foot {
  padding: var(--s-8) 0 var(--s-9);
  border-top: 1px solid var(--night-rule);
  background: var(--night);
  font-size: var(--t-s);
  color: var(--night-ink-2);
}

.site-foot-grid {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}

@media (min-width: 760px) {
  .site-foot-grid { grid-template-columns: 2fr 1fr 1fr; }
}

.foot-mark {
  display: block;
  margin-bottom: var(--s-3);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--night-ink);
}

.site-foot h2 {
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-s);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--night-ink-2);
}

.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: var(--s-2); }
.site-foot a { color: var(--night-ink-2); text-decoration-color: var(--night-rule); }
.site-foot a:hover { color: var(--night-ink); text-decoration-color: var(--night-ink-2); }
.site-foot p { margin-bottom: var(--s-2); }

/* --------------------------------------------------------------------------
   7. Acciones
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}

.actions + .fine { margin-top: var(--s-3); }

/* El botón principal: uno por pantalla. Azul de la marca, texto blanco
   (8,7:1). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: 500 16px/1.2 var(--f-sans);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn[disabled] { opacity: 0.7; cursor: progress; }

.sec-night .btn { background: #fff; border-color: #fff; color: var(--night); }
.sec-night .btn:hover { background: var(--night-ink); }

/* Enlace secundario: dice adónde lleva y no compite con el botón. La flecha
   la pone la hoja de estilos, así no cuenta como palabra ni la lee dos veces
   un lector de pantalla. */
.more {
  font-weight: 500;
  text-decoration: none;
}

.more::after { content: '\00a0\2192'; }
.more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Hero, diagrama de la migración y franja de orígenes
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 960px) {
  .hero { grid-template-columns: 7fr 5fr; }
}

.hero-fig-wrap {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
}

.hero-fig { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }

.hero-fig text {
  font-family: var(--f-sans);
  font-size: 15px;
  fill: var(--ink);
}

.hero-fig .fig-tag {
  font-family: var(--f-mono);
  font-size: 12px;
  fill: var(--ink-3);
}

.hero-fig .fig-box { fill: var(--paper); stroke: var(--rule-2); }
.hero-fig .fig-cloud { fill: var(--accent-soft); stroke: var(--accent); }
.hero-fig .fig-dest { font-weight: 600; fill: var(--accent); }
.hero-fig .fig-ico { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-fig .fig-ok { stroke: var(--accent); stroke-width: 1.8; }
.hero-fig .fig-line { fill: none; stroke: var(--accent-2); stroke-width: 1.5; }

@media (max-width: 959px) {
  .hero-fig-wrap { max-width: 520px; }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
}

.chips-label {
  margin-right: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-s);
  color: var(--ink-3);
}

.chip {
  display: inline-block;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--t-s);
  color: var(--ink-2);
}

.strip {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}

/* --------------------------------------------------------------------------
   9. Componentes
   -------------------------------------------------------------------------- */

/* Panel: un bloque con filete, sin sombra. */
.panel {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}

.sec-alt .panel { background: #fff; }

.panel h3 { margin-bottom: var(--s-3); }
.panel > p { color: var(--ink-2); }
.panel .more { display: inline-block; margin-top: var(--s-4); }

.panel-accent { border-top: 3px solid var(--accent); }

/* Pasos numerados. El número lo pone el contador, en la mono. */
.steps {
  list-style: none;
  counter-reset: paso;
  display: grid;
  gap: var(--s-5);
}

.steps > li {
  counter-increment: paso;
  position: relative;
  padding-left: 44px;
}

.steps > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--f-mono);
  font-size: var(--t-s);
  color: var(--accent);
}

.sec-night .steps > li::before { color: var(--night-accent); }

.steps h3 { font-size: var(--t-m); margin-bottom: var(--s-1); }
.steps p { color: var(--ink-2); }
.sec-night .steps p { color: var(--night-ink-2); }

@media (min-width: 900px) {
  /* Tantas columnas como pasos: tres en /demo, cuatro en el resto. */
  .steps-row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-6); }
  .steps-row > li { padding: var(--s-7) 0 0; border-top: 1px solid var(--rule-2); }
  .steps-row > li::before { top: var(--s-4); }
  .sec-night .steps-row > li { border-top-color: var(--night-rule); }
}

/* Ficha: etiqueta a la izquierda, dato a la derecha. */
.spec { margin: 0; border-top: 1px solid var(--rule); }

.spec > div {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 640px) {
  .spec > div { grid-template-columns: 180px 1fr; }
}

.spec dt {
  font-family: var(--f-mono);
  font-size: var(--t-s);
  color: var(--ink-3);
  padding-top: 2px;
}

.spec dd { margin: 0; }

.sec-night .spec, .sec-night .spec > div { border-color: var(--night-rule); }
.sec-night .spec dt { color: var(--night-ink-2); }

/* Lista con marca de comprobado: lo que se incluye o se entrega. */
.ticks { list-style: none; display: grid; gap: var(--s-3); }

.ticks > li { position: relative; padding-left: 28px; }

.ticks > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.45em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.sec-night .ticks > li::before { border-color: var(--night-accent); }

/* Lista con guion: enumeraciones neutras. */
.dashed { list-style: none; display: grid; gap: var(--s-2); }
.dashed > li { position: relative; padding-left: 22px; }
.dashed > li::before { content: '\2014'; position: absolute; left: 0; color: var(--ink-3); }

/* Datos clave en fila: plazo, garantía, acceso. */
.facts {
  list-style: none;
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0;
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
}

@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
}

.facts strong { display: block; margin-bottom: var(--s-1); }
.facts span { display: block; font-size: var(--t-s); color: var(--ink-2); }

/* Aviso enmarcado: límites y lo que no se promete. */
.callout {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--st-pend);
  background: var(--paper-2);
}

/* Estado de una medida: texto y color, nunca solo color. */
.st {
  display: inline-block;
  padding: 1px var(--s-2);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}

.st-ok { color: var(--st-ok); }
.st-part { color: var(--st-part); }
.st-pend { color: var(--st-pend); }
.st-out { color: var(--st-out); }

/* --------------------------------------------------------------------------
   10. Tablas
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

caption {
  caption-side: bottom;
  padding-top: var(--s-3);
  text-align: left;
  font-size: var(--t-s);
  color: var(--ink-3);
}

th, td {
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

th {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  border-bottom-color: var(--rule-2);
}

/* En el móvil, cada fila es un bloque y cada celda lleva el nombre de su
   columna (data-th). */
@media (max-width: 699px) {
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; left: -9999px; }
  tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule-2); }
  td { padding: var(--s-1) 0; border: 0; }
  td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--ink-3);
  }
}

/* --------------------------------------------------------------------------
   11. Preguntas: <details> nativo
   -------------------------------------------------------------------------- */

.qa { border-top: 1px solid var(--rule-2); max-width: 820px; }

.qa details { border-bottom: 1px solid var(--rule-2); }

.qa summary {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }

.qa summary::after {
  content: '+';
  flex: none;
  font-family: var(--f-mono);
  color: var(--accent);
}

.qa details[open] summary::after { content: '\2212'; }

.qa details > p { padding: 0 0 var(--s-4); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   12. Formulario
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-4); }

#form-campos { display: grid; gap: var(--s-4); }
#form-campos[hidden] { display: none; }

.field { display: grid; gap: var(--s-1); }

.field-row { display: grid; gap: var(--s-4); }

@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.field label {
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--ink-2);
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--field-rule);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: 16px/1.4 var(--f-sans);
}

.field textarea { min-height: 96px; resize: vertical; }

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 0;
  border-color: var(--accent);
}

/* Honeypot: fuera de la pantalla y fuera del recorrido del teclado. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* El widget de Turnstile no ocupa sitio hasta que se carga. */
.turnstile-contenedor:empty { display: none; }

.form .actions { margin-top: var(--s-2); }
.form .actions + .fine { margin-top: 0; }

.form-aviso {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: none;
}

.form-estado:empty { display: none; }

.form-estado {
  padding: var(--s-4);
  border-left: 3px solid var(--ink-3);
  background: var(--paper-2);
}

.form-estado.ok { border-left-color: var(--st-ok); }
.form-estado.error { border-left-color: var(--st-pend); }

.contact-panel {
  padding: var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: #fff;
}

@media (max-width: 639px) {
  .contact-panel { padding: var(--s-5) var(--s-4); }
}

/* --------------------------------------------------------------------------
   13. Textos legales
   -------------------------------------------------------------------------- */

.legal-body { max-width: 760px; }

.legal-body h2 {
  margin: var(--s-7) 0 var(--s-3);
  font-size: 22px;
}

.legal-body h2:first-child { margin-top: 0; }
.legal-body ul { margin: 0 0 var(--s-4) var(--s-5); }
.legal-body li { margin-bottom: var(--s-2); }

.legal-info {
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.legal-info ul { list-style: none; margin: 0; }

.legal-table { margin: var(--s-4) 0 var(--s-5); font-size: 15px; }

.muted-2 { font-size: var(--t-s); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   14. WhatsApp
   Decisión de Albert del 18 de octubre de 2026: enlace fijo abajo a la
   derecha. En la tinta de la marca, no en el verde de WhatsApp, para que no
   compita con el botón principal. El pie deja sitio debajo para que no tape
   el último texto de la página.
   -------------------------------------------------------------------------- */

.wa-flotante {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px var(--s-4) 10px var(--s-3);
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.wa-flotante:hover { background: var(--ink); color: var(--paper); }
.wa-flotante:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.wa-icon { display: block; flex: none; }

@media (max-width: 519px) {
  .wa-flotante { padding: 11px; }
  .wa-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   15. Pantalla estrecha
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  :root { --t-m: 16px; --t-l: 18px; }
  .wrap { padding: 0 var(--s-4); }
  .sec { padding: var(--s-7) 0; }
  .sec-first { padding: var(--s-6) 0 var(--s-7); }
  .btn { width: 100%; }
  .site-nav {
    width: calc(100% + 2 * var(--s-4));
    margin: 0 calc(-1 * var(--s-4));
    padding: 0 var(--s-4) var(--s-1);
  }
}

/* --------------------------------------------------------------------------
   16. Impresión: una página se imprime y se lleva a una reunión
   -------------------------------------------------------------------------- */

@media print {
  .site-nav, .wa-flotante, .skip, .actions, .form { display: none; }
  .site-head { position: static; }
  body { background: #fff; font-size: 11pt; }
  .sec-night { background: #fff; color: var(--ink); }
  .sec-night h2, .sec-night h3, .sec-night strong { color: var(--ink); }
  .sec { padding: 18pt 0; }
  a { color: var(--ink); text-decoration: none; }
}