/* ==========================================================================
   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. Concepto «ingeniería tranquila» (rama feat/mejoras-visuales): editorial,
      técnica y limpia. Todo sale de los tokens de :root: paleta, espaciado,
      radios y dos niveles de sombra. Bordes de 1 px.
   4. Ritmo de página: se alternan fondos (crema, blanco, rejilla, una banda
      navy). Una sola banda navy en el cuerpo de la página como mucho.
   5. Movimiento solo como mejora: el contenido se ve completo sin JS y con
      prefers-reduced-motion: reduce (sección 17).
   6. Las etiquetas técnicas van en la mono, pequeñas y en mayúsculas por CSS
      (text-transform): el texto del HTML sigue en minúscula con inicial.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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. 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 · teal sobre blanco 5,5 · night-ink-2 sobre night 8,4 ·
     night-accent sobre night 8,2 · field-rule sobre paper 3,6. */
  --paper:        #fbfaf7;   /* crema */
  --paper-2:      #f4f2ec;
  --white:        #ffffff;
  --ink:          #15171a;
  --ink-2:        #4a4f57;
  --ink-3:        #63686f;
  --rule:         #e2e0d9;
  --rule-2:       #cbc8be;
  --field-rule:   #86837b;
  --accent:       #1f4e79;   /* azul de la marca */
  --accent-ink:   #163a5a;
  --accent-2:     #2f6fa8;
  --accent-soft:  #eaf1f7;
  --accent-line:  #c3d6e6;
  --teal:         #0f766e;   /* segundo acento frío: estados «ok» */
  --teal-soft:    #e3f3f1;
  --teal-line:    #b3dcd6;
  --amber:        #8a5a00;   /* aviso: texto 5,3:1 sobre blanco */
  --amber-soft:   #fbf1da;
  --night:        #0e1826;   /* navy profundo */
  --night-2:      #16222f;
  --night-3:      #1d2b3b;
  --night-ink:    #e9eaec;
  --night-ink-2:  #a9b3bf;
  --night-rule:   #27344a;
  --night-accent: #7fb2e0;
  --night-teal:   #5fd0c3;
  /* La marca sobre --night: los colores de la variante oscura del favicon. */
  --night-mark:        #f1efe9;
  --night-mark-accent: #4a86c5;
  --st-ok:        #2f5d3a;
  --st-part:      #7e6419;
  --st-pend:      #8c3a1d;
  --st-out:       #63686f;
  --grid-line:    rgba(21, 23, 26, 0.055);
  --night-grid:   rgba(255, 255, 255, 0.05);

  /* Tipografía. */
  --f-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --t-xs:   12px;                        /* etiquetas técnicas en mayúsculas */
  --t-s:    14px;                        /* notas, pie */
  --t-m:    17px;                        /* cuerpo */
  --t-l:    19px;                        /* entradillas y h3 */
  --t-xl:   clamp(28px, 3.5vw, 42px);    /* h2 */
  --t-xxl:  clamp(36px, 5.6vw, 64px);    /* h1 */
  --track-label: 0.08em;

  /* Espaciado: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96. */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* Radios y sombras (dos niveles). */
  --r-1: 8px;  --r-2: 12px;  --r-3: 20px;
  --radius: var(--r-1);
  --shadow-1: 0 1px 2px rgba(14, 24, 38, 0.06), 0 1px 1px rgba(14, 24, 38, 0.04);
  --shadow-2: 0 18px 40px -12px rgba(14, 24, 38, 0.18), 0 2px 6px rgba(14, 24, 38, 0.06);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --head-h: 68px;
  --wrap:    1160px;
  --measure: 66ch;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  /* La cabecera es fija: sin esto, #contacto quedaría tapado por ella. */
  scroll-padding-top: calc(var(--head-h) + var(--s-4));
}

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.04; letter-spacing: -0.032em; font-weight: 500; }
h2 { font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.024em; }
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-9) 0; border-top: 1px solid var(--rule); }
.sec-first { border-top: 0; padding: var(--s-8) 0 var(--s-9); }
.sec-tight { padding: var(--s-6) 0 var(--s-8); }
.sec-alt { background: var(--paper-2); }
.sec-join { border-top: 0; padding-top: 0; }

/* Ritmo de fondos: crema (por defecto), crema 2, blanco y crema con rejilla. */
.sec-white { background: var(--white); }

.sec-grid {
  background-color: var(--paper);
  background-image:
    linear-gradient(to bottom, var(--paper), rgba(251, 250, 247, 0) 18%,
                    rgba(251, 250, 247, 0) 82%, var(--paper)),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
}

/* Malla de puntos: el fondo del hero. Sin imágenes, solo un gradiente. */
.sec-dots {
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse 60% 70% at 85% 30%, rgba(47, 111, 168, 0.12), rgba(47, 111, 168, 0) 70%),
    radial-gradient(var(--rule-2) 1px, transparent 1.4px);
  background-size: 100% 100%, 24px 24px;
}

/* La banda oscura: una por página como mucho. */
.sec-night {
  background-color: var(--night);
  background-image:
    linear-gradient(var(--night-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--night-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  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-7); 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: calc(var(--head-h) + var(--s-5)); 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-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

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

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

.lede {
  margin-top: var(--s-5);
  font-size: clamp(18px, 1.6vw, 21px);
  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-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

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

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

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

/* La cabecera es fija, translúcida y desenfoca lo que pasa por debajo. Sigue
   siendo --night (decisión de Albert del 11 de octubre de 2026: negra, como el
   pie), con algo de transparencia. Donde no hay backdrop-filter, el fondo es
   casi opaco (94 %) para que el texto se lea igual. El foco cambia de color con
   ella: --accent-2 da 3,4:1 sobre --night; --night-accent da 8,2:1. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 24, 38, 0.97);
  border-bottom: 1px solid var(--night-rule);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-head {
    background: rgba(14, 24, 38, 0.9);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
  }
}

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

.site-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5) var(--s-6);
  min-height: var(--head-h);
}

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

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

.brand-text { display: inline-flex; align-items: baseline; gap: var(--s-2); }

.brand-name {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.1em;
  /* 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);
}

/* Escritorio: enlaces aireados al centro, y a la derecha el idioma y el botón. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-1) var(--s-6);
  margin-left: auto;
  font-size: 15px;
}

.site-nav a {
  position: relative;
  padding: var(--s-2) 0;
  color: var(--night-ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--night-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}

.site-nav a:hover { color: var(--night-ink); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--night-ink); }

.head-actions { display: flex; align-items: center; gap: var(--s-4); }

/* El selector de idioma, discreto: texto pequeño en la mono, sin caja. */
.lang {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--night-ink-2);
  text-decoration: none;
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--night-rule);
}

.lang:hover { color: var(--night-ink); border-bottom-color: var(--night-ink-2); }

/* Menú del móvil: un <details>, sin JavaScript. Abre un panel bajo la barra.
   Funciona con teclado: Tab llega al resumen, Intro o Espacio lo abren, y
   Escape lo cierra si ui.js está cargado. */
.menu-m { display: none; position: relative; }

.menu-m summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0 var(--s-1);
  color: var(--night-ink);
  font-size: 15px;
  cursor: pointer;
  list-style: none;
}

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

.menu-ico, .menu-ico::before, .menu-ico::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), background 0.25s;
}

.menu-ico { position: relative; }
.menu-ico::before, .menu-ico::after { content: ''; position: absolute; left: 0; }
.menu-ico::before { top: -6px; }
.menu-ico::after  { top: 6px; }

.menu-m[open] .menu-ico { background: transparent; }
.menu-m[open] .menu-ico::before { transform: translateY(6px) rotate(45deg); }
.menu-m[open] .menu-ico::after  { transform: translateY(-6px) rotate(-45deg); }

.menu-panel {
  position: absolute;
  right: calc(-1 * var(--s-4));
  top: calc(100% + var(--s-2));
  width: min(86vw, 340px);
  padding: var(--s-4);
  border: 1px solid var(--night-rule);
  border-radius: var(--r-2);
  background: var(--night-2);
  box-shadow: var(--shadow-2);
  display: grid;
  gap: var(--s-4);
}

.menu-panel nav { display: grid; }

.menu-panel nav a {
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--night-rule);
  color: var(--night-ink);
  font-size: 17px;
  text-decoration: none;
}

.menu-panel nav a[aria-current="page"] { color: var(--night-accent); }
.menu-panel .btn { width: 100%; }
.menu-panel .lang { justify-self: start; }

/* Con seis enlaces y el botón, el menú de escritorio necesita 1.100 px. Por
   debajo, el menú es el del móvil. */
@media (max-width: 1099px) {
  .site-nav, .head-actions { display: none; }
  .menu-m { display: block; }
}

/* 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-6);
  border-top: 1px solid var(--night-rule);
  background: var(--night);
  font-size: var(--t-s);
  color: var(--night-ink-2);
}

/* .fine usa --ink-3, que sobre --night da 3,2:1; el pie la lleva en --night-ink-2. */
.site-foot .fine { color: var(--night-ink-2); }

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

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

.foot-brand .brand { margin-bottom: var(--s-4); }
.foot-brand p { max-width: 38ch; }

.foot-loc {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--night-rule);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--night-ink);
}

.site-foot h2 {
  margin-bottom: var(--s-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--night-ink-2);
}

.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: var(--s-3); }
.site-foot a { color: var(--night-ink); text-decoration: none; }
.site-foot li a { color: var(--night-ink-2); transition: color 0.2s; }
.site-foot li a:hover { color: var(--night-ink); text-decoration: underline; text-underline-offset: 4px; }
.site-foot p { margin-bottom: var(--s-2); }

.foot-bottom {
  padding-top: var(--s-5);
  border-top: 1px solid var(--night-rule);
}

.foot-bottom .fine { color: var(--night-ink-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;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--accent);
  border-radius: var(--r-1);
  background: var(--accent);
  box-shadow: var(--shadow-1);
  color: #fff;
  font: 500 16px/1.2 var(--f-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s;
}

.btn:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

.btn:active { transform: none; box-shadow: var(--shadow-1); }
.btn[disabled] { opacity: 0.75; cursor: progress; transform: none; }

/* Estado de carga: el JS del formulario deja el botón en disabled y cambia su
   texto a «Enviando…»; la rueda la dibuja la hoja de estilos. */
.btn[disabled]::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: giro 0.8s linear infinite;
}

@keyframes giro { to { transform: rotate(360deg); } }

.sec-night .btn { background: #fff; border-color: #fff; color: var(--night); }
.sec-night .btn:hover { background: var(--night-ink); }
.sec-night .btn[disabled]::before { border-color: rgba(14, 24, 38, 0.3); border-top-color: var(--night); }

.site-head .btn { white-space: nowrap; background: #fff; border-color: #fff; color: var(--night); box-shadow: none; }
.site-head .btn:hover { background: var(--night-ink); border-color: var(--night-ink); }
.btn-sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: 15px; }

.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: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s-8); }
}

.hero-copy h1 { max-width: 13em; }

/* Chips de confianza: lo que el texto ya promete, a la vista. */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-5);
  list-style: none;
}

.trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border: 1px solid var(--teal-line);
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: var(--t-s);
  font-weight: 500;
}

.icon-sm { width: 18px; height: 18px; }
.icon-teal { stroke: var(--teal); }

.hero-fig-wrap {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  background: var(--white);
  box-shadow: var(--shadow-2);
}

@media (max-width: 959px) {
  .hero-fig-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
}

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

.hero-fig text { font-family: var(--f-sans); fill: var(--ink); }
.hero-fig .fig-t  { font-size: 14px; font-weight: 600; }
.hero-fig .fig-s  { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-3); }
.hero-fig .fig-s2 { font-size: 11.5px; font-weight: 600; fill: var(--teal); }
.hero-fig .fig-tag {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  fill: var(--ink-3);
}
.hero-fig .fig-dest { font-size: 15px; font-weight: 600; fill: var(--accent-ink); }

.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-row   { fill: var(--white); stroke: var(--accent-line); }
.hero-fig .fig-badge { fill: var(--teal-soft); stroke: var(--teal-line); }
.hero-fig .fig-ico   { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero-fig .fig-big   { stroke: var(--accent); }
.hero-fig .fig-ok    { stroke: var(--teal); stroke-width: 1.8; }
.hero-fig .fig-line  { fill: none; stroke: var(--accent-line); stroke-width: 1.5; }
.hero-fig .fig-port  { fill: var(--accent); }

/* Los guiones avanzan muy despacio, de izquierda a derecha: el correo, los
   archivos y las cuentas camino de Microsoft 365. Con prefers-reduced-motion:
   reduce (sección 17) se quedan quietos y la línea sigue siendo legible. */
.hero-fig .fig-flow {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 2 10;
  animation: fluir 4s linear infinite;
}

@keyframes fluir { to { stroke-dashoffset: -48; } }

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

.chips-label {
  margin-right: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}

.chip .icon { stroke: var(--accent); }
.chip:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }

/* Un flujo en chips: una flecha entre paso y paso. */
.chips-flujo { margin: var(--s-5) 0; }
.chips-flujo li:not(:last-child)::after {
  content: '→';
  margin-left: var(--s-3);
  color: var(--ink-3);
}

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

/* --------------------------------------------------------------------------
   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); }
}

/* Línea de tiempo de los cuatro pasos: horizontal en escritorio, vertical en el
   móvil. El número lo pone el contador, grande y en la mono. */
.timeline {
  list-style: none;
  counter-reset: tl;
  display: grid;
  margin: 0 0 var(--s-7);
}

.timeline > li {
  counter-increment: tl;
  position: relative;
  padding: 0 var(--s-6) var(--s-6) 64px;
  border-left: 2px solid var(--accent-line);
  margin-left: var(--s-3);
}

.timeline > li:last-child { padding-bottom: 0; border-left-color: transparent; }

.timeline > li::before {
  content: counter(tl, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--accent);
}

.timeline > li::after {
  content: '';
  position: absolute;
  left: -8px;
  top: 2px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--white);
}

.tl-ico {
  position: absolute;
  left: 14px;
  top: 26px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-1);
  background: var(--accent-soft);
}

.tl-ico .icon { width: 20px; height: 20px; }

.timeline h3 { margin-bottom: var(--s-2); }
.timeline p { color: var(--ink-2); }

@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-left: 0; }

  .timeline > li {
    margin-left: 0;
    padding: var(--s-6) var(--s-6) 0 0;
    border-left: 0;
    border-top: 2px solid var(--accent-line);
  }

  .timeline > li:last-child { border-top-color: var(--accent-line); padding-right: 0; }

  .timeline > li::before {
    margin-bottom: var(--s-3);
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .timeline > li::after { left: 0; top: -8px; }
  .tl-ico { left: auto; right: var(--s-6); top: var(--s-6); width: 40px; height: 40px; }
  .timeline > li:last-child .tl-ico { right: 0; }
}

/* «Incluido en cada migración»: una tarjeta con tres garantías, cada una con su
   icono. */
.incluido {
  padding: var(--s-5) var(--s-6);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  background: var(--paper);
  box-shadow: var(--shadow-1);
}

.incluido h3 {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.inc-list { list-style: none; display: grid; gap: var(--s-4); }

.inc-list li { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--ink-2); }

.inc-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal-soft);
}

.inc-ico .icon { width: 18px; height: 18px; stroke: var(--teal); }

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

/* Aplicaciones a medida: la maqueta, el esquema y las marcas, sobre navy. */
.apps-top { display: grid; gap: var(--s-7); align-items: center; margin-bottom: var(--s-8); }

@media (min-width: 960px) {
  .apps-top { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); }
}

.apps-copy .lede { margin-top: var(--s-4); color: var(--night-ink-2); }

.apps-flow {
  margin-bottom: var(--s-8);
  padding: var(--s-6);
  border: 1px solid var(--night-rule);
  border-radius: var(--r-3);
  background: var(--night-2);
}

.flujo { display: block; width: 100%; height: auto; margin: 0 auto; }
.flujo-v { display: none; max-width: 300px; }

@media (max-width: 899px) {
  .flujo-h { display: none; }
  .flujo-v { display: block; }
}

@media (max-width: 699px) {
  .apps-flow { padding: var(--s-5) var(--s-4); }
}

.flujo .fl-box { fill: var(--night); stroke: #3a4b63; stroke-width: 1; }
.flujo .fl-app .fl-box { fill: var(--accent); stroke: var(--accent-2); }
.flujo text { font-family: var(--f-sans); }
.flujo .fl-t { font-size: 16px; font-weight: 600; fill: var(--night-ink); }
.flujo .fl-s { font-family: var(--f-mono); font-size: 10.5px; fill: var(--night-ink-2); }
.flujo .fl-app .fl-t { fill: #fff; }
.flujo .fl-app .fl-s { fill: #dbe7f3; }
.flujo .fl-line { fill: none; stroke: var(--night-teal); stroke-width: 1.5; }
.flujo .fl-head { fill: var(--night-teal); }
.flujo .fl-tag { font-family: var(--f-mono); font-size: 10.5px; fill: var(--night-teal); }

/* Maquetas ilustrativas, en HTML y CSS. Van con aria-hidden: la figura lleva su
   propia descripción. */
.mock-wrap { margin: 0; }

.mock {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--white);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  font-size: var(--t-s);
  line-height: 1.4;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
}

.mock-dots { display: inline-flex; gap: 6px; }
.mock-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }
.mock-name { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-3); }

.mock-body { padding: var(--s-5); }

.mock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.mock .mock-head strong { font-size: var(--t-l); color: var(--ink); }
.mock-head span { font-size: var(--t-s); color: var(--ink-3); }

.mock-rows { list-style: none; }

.mock-rows li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
}

.mock-rows .mock-cols {
  padding: 0 0 var(--s-2);
  border-top: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.mock-id { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink-2); }

.mock-st {
  display: inline-block;
  padding: 2px var(--s-3);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.mock-ok    { background: var(--teal-soft); color: var(--teal); }
.mock-aviso { background: var(--amber-soft); color: var(--amber); }
.mock-pend  { background: #f7e4dc; color: var(--st-pend); }

.mock-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.mock-btn {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-1);
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

.mock-fine { font-size: var(--t-xs); color: var(--ink-3); }

.mock-wrap figcaption { margin-top: var(--s-3); }

.tag-ej {
  display: inline-block;
  padding: 2px var(--s-3);
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.sec-night .tag-ej { color: var(--night-ink-2); }

/* El semáforo del informe: un punto de color con su palabra al lado. */
.sem { width: 10px; height: 10px; border-radius: 50%; }
.sem-ok { background: var(--teal); }
.sem-aviso { background: #c98a12; }
.sem-pend { background: var(--st-pend); }

.mock-rows-2 li { grid-template-columns: 14px minmax(0, 1fr) auto; }
.mock-rows-2 li:first-child { border-top: 0; padding-top: 0; }

.mock-informe { margin-top: var(--s-6); }

/* «Integramos con»: una rejilla de marcas con el mismo tratamiento. Hoy todas
   son wordmarks de texto (docs/assets-marcas.md); con un logo propio se pintaría
   en gris y a color al pasar el ratón, a la misma altura. */
.integra-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
}

.integra-head h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.integra-head p { margin: 0; color: var(--night-ink-2); }

.integra-g { margin-top: var(--s-6); }

.integra-gt {
  margin-bottom: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--night-ink-2);
}

.marcas {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--s-3);
}

.marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--night-rule);
  border-radius: var(--r-1);
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease);
}

.marca:hover {
  border-color: var(--night-accent);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.marca-nom {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--night-ink-2);
  transition: color 0.2s;
}

.marca:hover .marca-nom { color: #fff; }

.marca-pre {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--night-ink-2);
}

.marca img { display: block; height: 28px; width: auto; filter: grayscale(1) brightness(1.6); opacity: 0.75; transition: filter 0.2s, opacity 0.2s; }
.marca:hover img { filter: none; opacity: 1; }

.integra-mas { margin: var(--s-5) 0 0; }

.aviso-marcas { margin: var(--s-6) 0 0; max-width: none; font-size: 13px; color: var(--night-ink-2); }

/* 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-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}

.spec dd { margin: 0; }

.sec h3 { margin-bottom: var(--s-3); }
.spec + h3 { margin-top: var(--s-7); }

.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: tres tarjetas con su icono (plazo, acceso, garantía). */
.facts {
  list-style: none;
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0 var(--s-6);
}

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

.facts li {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  background: var(--white);
  box-shadow: var(--shadow-1);
  transition: transform 0.2s var(--ease), box-shadow 0.2s, border-color 0.2s;
}

.facts li:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-line); }
.facts .icon { display: block; margin-bottom: var(--s-3); stroke: var(--accent); }
.facts strong { display: block; margin-bottom: var(--s-1); }
.facts span { display: block; font-size: var(--t-s); color: var(--ink-2); }

.rev-more { margin-top: var(--s-6); }

/* 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: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  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: var(--t-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  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 { display: grid; gap: var(--s-3); max-width: 820px; }

.qa details {
  border: 1px solid var(--rule-2);
  border-radius: var(--r-2);
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.qa details:hover { border-color: var(--accent-line); }
.qa details[open] { border-color: var(--accent-line); box-shadow: var(--shadow-1); }

.qa summary {
  position: relative;
  padding: var(--s-4) var(--s-7) var(--s-4) var(--s-5);
  border-radius: var(--r-2);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

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

/* El icono +/−: dos barras; la vertical gira y desaparece al abrir. */
.qa summary::before,
.qa summary::after {
  content: '';
  position: absolute;
  right: var(--s-5);
  top: 50%;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--accent);
  transition: transform 0.25s var(--ease), opacity 0.25s;
}

.qa summary::after { transform: rotate(90deg); }
.qa details[open] summary::after { transform: rotate(0); opacity: 0; }

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

@keyframes aparece { from { opacity: 0; transform: translateY(-4px); } }

/* Donde el navegador lo admite (::details-content), la respuesta también se
   despliega en altura en lugar de aparecer de golpe. */
@supports selector(::details-content) {
  .qa details { interpolate-size: allow-keywords; }

  .qa details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s var(--ease), content-visibility 0.3s allow-discrete;
  }

  .qa details[open]::details-content { block-size: auto; }
}

/* --------------------------------------------------------------------------
   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: 48px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--field-rule);
  border-radius: var(--r-1);
  background: var(--white);
  color: var(--ink);
  font: 16px/1.4 var(--f-sans);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }

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

/* Los selects conservan el control nativo (teclado, lectores de pantalla y
   móvil funcionan solos); solo cambian su flecha, con un SVG en data: (la CSP
   admite img-src data:). */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2363686f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  cursor: pointer;
}

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

/* Error: solo después de que el visitante haya tocado el campo (:user-invalid).
   El mensaje lo da el formulario; aquí, el borde, el fondo y la etiqueta. */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid {
  border-color: var(--st-pend);
  background-color: #fdf6f3;
}

.field:has(:user-invalid) label { color: var(--st-pend); }

/* 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; }

/* Primera capa de protección de datos: el texto no cambia; solo la forma. Cada
   epígrafe en negrita pasa a subtítulo, en la mono y pequeño. */
.form-aviso {
  margin-top: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-1);
  background: var(--paper-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: none;
}

.form-aviso strong {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-2);
}

.form-aviso strong:first-child { margin-top: 0; }

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

.form-estado {
  padding: var(--s-4);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r-1);
  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(--r-3);
  background: var(--white);
  box-shadow: var(--shadow-2);
}

@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: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-1);
  color: var(--ink-2);
  font-size: var(--t-s);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.25s,
              transform 0.25s var(--ease), visibility 0s;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .wa-flotante { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}

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

/* ui.js lo aparta mientras el botón de enviar del formulario o el pie están a
   la vista: así no tapa el CTA. Sin JS, simplemente se queda donde está. */
.wa-flotante.wa-aparte {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0s 0.25s;
}

@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; }
  .hero-fig-wrap { padding: var(--s-3); }
  .marcas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marca { min-height: 60px; padding: var(--s-2) var(--s-3); }
  .marca-nom { font-size: 15px; }
  .chips { gap: var(--s-2); }
  .wrap { padding: 0 var(--s-4); }
  .sec { padding: var(--s-8) 0; }
  .sec-first { padding: var(--s-7) 0 var(--s-8); }
  .btn { width: 100%; }
}

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

@media print {
  .site-nav, .head-actions, .menu-m, .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; }
}

/* --------------------------------------------------------------------------
   17. Movimiento
   Solo como mejora. Lo que se anima nunca está oculto de entrada: ui.js añade
   .rv-wait a lo que queda debajo de la primera pantalla y .rv-in cuando
   entra. Sin JS no hay .rv-wait y todo se ve. Con prefers-reduced-motion:
   reduce, ui.js no hace nada y las reglas de abajo apagan las animaciones.
   -------------------------------------------------------------------------- */

.rv-wait { opacity: 0; transform: translateY(14px); }

.rv-wait.rv-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.rv-stagger > .rv-wait.rv-in:nth-child(2) { transition-delay: 0.07s; }
.rv-stagger > .rv-wait.rv-in:nth-child(3) { transition-delay: 0.14s; }
.rv-stagger > .rv-wait.rv-in:nth-child(4) { transition-delay: 0.21s; }
.rv-stagger > .rv-wait.rv-in:nth-child(5) { transition-delay: 0.28s; }
.rv-stagger > .rv-wait.rv-in:nth-child(6) { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .rv-wait { opacity: 1 !important; transform: none !important; }
}