/* ==========================================================================
   kwadrant.es — hoja de estilos única
   --------------------------------------------------------------------------
   Reglas de la casa:

   1. Esta hoja es el ÚNICO sitio donde hay CSS. No se usan bloques <style>
      ni atributos style= en el HTML. Gracias a eso la CSP puede ir con
      style-src 'self', sin 'unsafe-inline'. Si alguien añade un style= en
      línea, la página se rompe en producción: es intencionado.
   2. Dos tipografías, servidas desde este dominio (ver FONTS.md):
      DM Sans para texto, IBM Plex Mono para datos, etiquetas y tablas.
      Esto no se toca.
   3. La regla «sin sombras, sin color y sin animaciones» se levantó el 6 de
      octubre de 2026: la web quedó plana y se leía como un documento, no como
      la página de una empresa. Lo que entra es acento azul, profundidad suave,
      bandas oscuras de contraste y movimiento ligero. Lo que NO entra:
      degradados, tipografías nuevas, dominios externos e iconos de colores.
      Los iconos son de línea, de un solo trazo y dibujados aquí.
   4. Todo el movimiento se apaga con prefers-reduced-motion. Sin excepciones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   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. Variables
   -------------------------------------------------------------------------- */

:root {
  /* Papel y tinta. El fondo no es blanco puro: cansa menos en textos largos. */
  --paper:      #fbfaf7;
  --paper-2:    #f4f2ec;
  --ink:        #15171a;
  --ink-2:      #4a4f57;
  --ink-3:      #63686f;
  --rule:       #e2e0d9;
  --rule-2:     #cbc8be;
  /* Los filetes de --rule-2 son decorativos y pueden ser suaves, pero el borde
     de un campo de formulario es un componente de interfaz: la WCAG 1.4.11 le
     exige 3:1. Con #cbc8be se quedaba en 1.6 sobre el papel. */
  --field-rule: #86837b;

  /* Azul institucional, desaturado a propósito: el azul brillante de
     plantilla es justamente lo que hace que una web parezca de nadie. */
  --accent:     #1f4e79;
  --accent-ink: #163a5a;
  /* Variantes del mismo azul para la capa visual. --accent-2 es el de los
     iconos y los trazos del diagrama: 5,1:1 sobre el papel, de sobra para un
     gráfico (la WCAG pide 3:1) y suficiente si alguna vez lleva texto. */
  --accent-2:    #2f6fa8;
  --accent-soft: #eaf1f7;
  --accent-line: #c3d6e6;

  /* Banda oscura de contraste: el proceso y la llamada final. Es el mismo
     azul de marca llevado a un gris muy oscuro, no un negro neutro.
     Contraste medido sobre --night: ink 15,0:1 · ink-2 8,2:1 · accent 8,0:1. */
  --night:       #12171d;
  --night-2:     #1a212a;
  --night-ink:   #e9eaec;
  --night-ink-2: #a9b0b8;
  --night-rule:  #2b333d;
  --night-accent:#7fb2e0;

  /* Profundidad, no decoración: dos pasos y se acabó. */
  --shadow:    0 1px 2px rgba(21, 23, 26, .04), 0 6px 18px rgba(21, 23, 26, .05);
  --shadow-up: 0 2px 4px rgba(21, 23, 26, .05), 0 14px 30px rgba(21, 23, 26, .10);
  --radius:    6px;

  /* Semáforo de la matriz de evidencia. Apagados, no de semáforo real. */
  --st-ok:      #2f5d3a;
  --st-part:    #7e6419;
  --st-pend:    #8c3a1d;
  --st-out:     #63686f;

  /* Contraste comprobado sobre --paper y --paper-2, el peor de los dos:
     ink 17.2 · ink-2 7.9 · ink-3 5.0 · accent 8.3 · st-ok 6.8 · st-part 5.0 ·
     st-pend 6.9 · st-out 5.0. Todos por encima del 4.5:1 que pide la WCAG AA
     para texto normal, que es lo que aplica a las etiquetas de 11 px. */
  --measure:    68ch;
  --wrap:       1060px;
}

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

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Titulares grandes: una idea por bloque y que se vea desde la otra punta de
   la mesa. Los mínimos del clamp son los del móvil a 375 px. */
h1 { font-size: clamp(29px, 4.3vw, 46px); letter-spacing: -0.03em; line-height: 1.12; }
h2 { font-size: clamp(22px, 2.7vw, 30px); }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: 15px; font-weight: 600; }

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

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

a:hover { text-decoration-color: var(--accent); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

strong { font-weight: 600; color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 40px 0;
}

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

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

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

.band {
  padding: 72px 0;
  border-top: 1px solid var(--rule);
}

.band-first { border-top: 0; padding-top: 48px; }
.band-tight { padding: 40px 0; }

.band-fill { background: var(--paper-2); }

/* Una banda sin filete arriba: para encadenar dos secciones del mismo color
   sin que parezca que hay una costura entre ellas. */
.band-join { border-top: 0; padding-top: 0; }

.col { max-width: var(--measure); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 100;
  text-decoration: none;
}

.skip:focus { left: 0; }

/* Etiqueta monoespaciada: lo que en otras webs sería un icono de colores. */
.label {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.label-flag { color: var(--st-pend); }

.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

h1 + .lede,
h2 + .lede { margin-top: 18px; }

h1 + .note,
h2 + .note { margin-top: 14px; }

.note {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
}

.fine {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
}

.head-gap { margin-bottom: 28px; }
.head-gap p { margin-top: 12px; }

/* --------------------------------------------------------------------------
   5. Cabecera y pie
   -------------------------------------------------------------------------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.site-head-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.brand svg { width: 22px; height: 22px; display: block; }

.brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-sub {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* Menú sin JavaScript: una lista que se envuelve. No hay hamburguesa, no hay
   estado, no hay nada que se pueda quedar colgado. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  align-items: baseline;
}

.site-nav a {
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-2); }

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

/* Selector de idioma. Va en la misma fila que la navegación pero se lee como
   otra cosa: monoespaciada y en versalitas, como las etiquetas del sitio. Sin
   icono de bandera, que confunde idioma con país. */
.site-nav a.lang {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

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

/* La nota de idioma de la portada catalana va justo debajo de los botones y
   necesita respirar: pegada parece el pie de un botón. */
.actions + .fine { margin-top: 18px; }

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 36px 0 44px 0;
  font-size: 13px;
  color: var(--ink-3);
}

.site-foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 620px) {
  .site-foot-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
}

@media (min-width: 980px) {
  .site-foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: 40px; }
}

.site-foot h2 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px 0;
}

.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 5px; }
.site-foot a { color: var(--ink-2); text-decoration-color: var(--rule); }
.site-foot a:hover { color: var(--ink); }
.site-foot p { max-width: 42ch; margin-bottom: 0; }

.foot-mark {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   6. Enlaces de acción
   -------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  margin-top: 28px;
}

.btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  font-family: inherit;
}

.btn:hover { background: #000; border-color: #000; }

.btn-plain {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}

.btn-plain:hover { background: transparent; border-color: var(--ink); }

/* --------------------------------------------------------------------------
   7. Ficha técnica: etiqueta a la izquierda, dato a la derecha
   -------------------------------------------------------------------------- */

.spec {
  border-top: 1px solid var(--rule);
  margin: 0;
}

.spec > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 32px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 760px) {
  .spec > div { grid-template-columns: 190px 1fr; gap: 0 32px; }
}

.spec dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}

.spec dd {
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 62ch;
}

.spec dd strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   8. Tablas
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin-bottom: 30px; }
.table-scroll:last-child { margin-bottom: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

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

th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--rule-2);
  white-space: nowrap;
}

td { color: var(--ink-2); }
td strong { color: var(--ink); }

.t-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; }
.t-num  { white-space: nowrap; }

/* En pantalla estrecha la tabla deja de ser tabla: cada fila pasa a bloque y
   cada celda lleva su encabezado delante, tomado de data-th. Una matriz de
   cuatro columnas con desplazamiento lateral no se lee en un teléfono. */
@media (max-width: 719px) {
  .table-scroll { overflow-x: visible; }

  /* Columna flexible para que el caption siga yendo DESPUÉS de las filas:
     con display:block perdería caption-side y subiría al principio. */
  table { display: flex; flex-direction: column; }
  tbody, tr, td { display: block; width: 100%; }
  tbody { order: 1; }
  caption { display: block; width: 100%; order: 2; padding-top: 14px; }
  thead { display: none; }

  tr {
    padding: 16px 0;
    border-bottom: 1px solid var(--rule-2);
  }

  tbody tr:first-child { padding-top: 0; }

  td {
    border: 0;
    padding: 0 0 10px 0;
  }

  td:last-child { padding-bottom: 0; }

  td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 3px;
  }

  .t-mono, .t-num { white-space: normal; }
}

caption {
  caption-side: bottom;
  text-align: left;
  font-size: 13px;
  color: var(--ink-3);
  padding-top: 12px;
  line-height: 1.6;
}

/* Marca de estado de la matriz de evidencia. */
.st {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  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); }

/* --------------------------------------------------------------------------
   9. Listas
   -------------------------------------------------------------------------- */

ul, ol { max-width: var(--measure); padding-left: 1.1em; margin: 0 0 1em 0; }
li { margin-bottom: 7px; }
li:last-child { margin-bottom: 0; }
ul.plain { list-style: none; padding-left: 0; }

/* Lista de puntos con guion largo: menos ruido que un icono de check. */
.dashed { list-style: none; padding-left: 0; }

.dashed li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--ink-2);
  max-width: var(--measure);
}

.dashed li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--rule-2);
}

/* --------------------------------------------------------------------------
   10. Bloques de contenido
   -------------------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 28px; }

@media (min-width: 860px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); gap: 44px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}

/* Dos columnas asimétricas: título a la izquierda, contenido a la derecha. */
.split { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 900px) {
  .split { grid-template-columns: 300px 1fr; gap: 56px; }
}

.split > :first-child h2 { margin-bottom: 10px; }

.item { max-width: var(--measure); }
.item h3 { margin-bottom: 6px; }
.item h4 { margin-bottom: 12px; }
.item p { font-size: 15px; color: var(--ink-2); }

/* Dentro de un nivel, las dos columnas van después de un párrafo o una tabla:
   sin este aire se pegan a lo anterior y parecen parte de ello. */
.level .grid-2 { margin-top: 28px; }
.level .grid-2 .table-scroll { margin-bottom: 14px; }

/* Nivel de servicio: un bloque de especificación, no una tarjeta. */
.level {
  border-top: 1px solid var(--rule-2);
  padding: 26px 0 28px 0;
}

.level:last-child { border-bottom: 1px solid var(--rule-2); }

.level-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 14px;
}

.level-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.level-head h3 { font-size: 19px; font-weight: 600; }

.level-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--paper-2);
}

/* Aviso enmarcado: límites, advertencias, lo que no se promete. */
.callout {
  border-left: 2px solid var(--rule-2);
  padding: 2px 0 2px 20px;
  margin: 0 0 1em 0;
  max-width: var(--measure);
}

.callout-flag { border-left-color: var(--st-pend); }

.quote {
  border-left: 2px solid var(--ink);
  padding: 4px 0 4px 22px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
}

.quote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 13px;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   11. Preguntas: <details> nativo, sin adornos
   -------------------------------------------------------------------------- */

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

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

.qa summary {
  cursor: pointer;
  padding: 16px 32px 16px 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  list-style: none;
}

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

.qa summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 15px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink-3);
  font-size: 15px;
}

.qa details[open] summary::after { content: "–"; }

.qa details > :not(summary) {
  font-size: 15px;
  color: var(--ink-2);
  padding-bottom: 18px;
  max-width: var(--measure);
}

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

.form { max-width: 520px; }

.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--field-rule);
  border-radius: 2px;
  padding: 10px 12px;
  line-height: 1.5;
}

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

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--accent); }

.field-row { display: grid; grid-template-columns: 1fr; gap: 18px; }

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

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.turnstile-contenedor { margin-bottom: 18px; min-height: 65px; }

.form button { width: 100%; }

.form-aviso {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-top: 18px;
  max-width: none;
}

.form-aviso strong { color: var(--ink-2); font-weight: 600; }

.form-estado {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 2px solid var(--rule-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.form-estado:empty { display: none; padding: 0; border: 0; }
.form-estado.ok    { border-left-color: var(--st-ok); }
.form-estado.error { border-left-color: var(--st-pend); }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   13. Documentos descargables
   -------------------------------------------------------------------------- */

.docs { border-top: 1px solid var(--rule); }

.doc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 760px) {
  .doc { grid-template-columns: 1fr 150px; align-items: start; }
}

.doc h3 { font-size: 16px; margin-bottom: 4px; }
.doc p  { font-size: 14px; color: var(--ink-2); margin: 0; }

.doc-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  color: var(--ink-3);
}

.doc-meta a { display: inline-block; margin-top: 4px; }

/* --------------------------------------------------------------------------
   14. Textos legales
   -------------------------------------------------------------------------- */

.legal-body { max-width: 72ch; }

.legal-body h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 34px 0 10px 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: 15px; margin: 20px 0 6px 0; }
.legal-body p, .legal-body li { font-size: 15px; color: var(--ink-2); }
.legal-body a { color: var(--accent); }

.legal-info {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 18px 22px;
  margin: 0 0 14px 0;
  max-width: 72ch;
}

.legal-info ul { list-style: none; padding-left: 0; margin: 0; }
.legal-info li { font-size: 14.5px; margin-bottom: 5px; }

.legal-table { width: 100%; margin: 10px 0 18px 0; }

.cookie-type {
  border-left: 2px solid var(--rule-2);
  padding: 2px 0 2px 20px;
  margin: 12px 0;
  max-width: 72ch;
}

.cookie-type h3 { margin: 0 0 4px 0; }
.cookie-type p { margin: 0; }

/* ==========================================================================
   15. Capa visual
   --------------------------------------------------------------------------
   Todo lo que entró el 6 de octubre de 2026: iconos, tarjetas, línea de
   tiempo, bandas oscuras y el diagrama animado del hero. Sin una sola
   dependencia externa y sin un solo fichero de imagen: los iconos son un
   sprite SVG en línea y el diagrama es SVG escrito a mano.
   ========================================================================== */

/* -- 15.1 Sprite de iconos ------------------------------------------------
   El sprite va al principio del <body> y no se ve. No se usa display:none:
   en algunos navegadores eso deja a <use> sin nada que copiar. La forma
   segura es sacarlo del flujo con tamaño cero. */

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

/* Un icono es un trazo, nunca un relleno de color. El grosor y los remates se
   fijan aquí y no en cada símbolo, así todos se ven de la misma familia. */
.icon {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  color: var(--accent-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm { width: 20px; height: 20px; }

/* Para los puntos y las cabezas de flecha, que sí van macizos. */
.icon .solid { fill: currentColor; stroke: none; }

/* -- 15.2 Tarjetas --------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

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

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 22px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card .icon { margin-bottom: 14px; }

.card h3 { font-size: 16.5px; margin-bottom: 7px; }

.card p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 0;
  max-width: none;
}

.card p + p { margin-top: 8px; }

.card-link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13.5px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.02em;
}

/* El hover levanta la tarjeta un par de píxeles. En un sitio sin ninguna otra
   respuesta al ratón, es lo que dice que la tarjeta es un bloque y no un
   párrafo con borde. */
.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-up);
}

/* Tarjeta destacada: la migración, que es el producto. */
.card-mark {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.card-mark:hover { background: var(--accent-soft); }

/* -- 15.3 Línea de tiempo de pasos ----------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  counter-reset: paso;
  display: grid;
  grid-template-columns: 1fr;
}

.step {
  position: relative;
  counter-increment: paso;
  padding: 0 0 28px 56px;
  margin: 0;
  max-width: 58ch;
}

.step::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -2px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
}

/* El filete que une un paso con el siguiente. Es lo que convierte cuatro
   párrafos numerados en un proceso. */
.step::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 38px;
  bottom: 4px;
  width: 1px;
  background: var(--rule-2);
}

.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }

.step h3 { font-size: 16.5px; margin-bottom: 6px; }

.step p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 0;
}

/* En pantalla ancha los cuatro pasos se ponen en fila y la línea pasa a ser
   horizontal: se lee como una secuencia de izquierda a derecha. */
@media (min-width: 900px) {
  .steps-row { grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
  .steps-row .step { padding: 52px 0 0 0; max-width: none; }
  .steps-row .step::before { top: 0; }
  .steps-row .step::after {
    left: 44px;
    right: -28px;
    top: 18px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

/* -- 15.4 Franja de confianza (chips) -------------------------------------- */

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

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  align-items: center;
}

.chips li { margin: 0; }

.chip {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.chips-label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}

/* -- 15.5 Banda oscura ----------------------------------------------------- */

.band-night {
  background: var(--night);
  color: var(--night-ink);
  border-top-color: var(--night);
}

.band-night h1,
.band-night h2,
.band-night h3,
.band-night h4,
.band-night strong,
.band-night .lede,
.band-night summary { color: var(--night-ink); }

.band-night p,
.band-night li,
.band-night .note,
.band-night .fine,
.band-night .label,
.band-night dd,
.band-night caption { color: var(--night-ink-2); }

.band-night a { color: var(--night-accent); text-decoration-color: var(--night-rule); }
.band-night a:hover { text-decoration-color: var(--night-accent); }

.band-night a:focus-visible,
.band-night summary:focus-visible { outline-color: var(--night-accent); }

.band-night .btn {
  background: var(--night-ink);
  border-color: var(--night-ink);
  color: var(--night);
}

.band-night .btn:hover { background: #fff; border-color: #fff; }

.band-night .btn-plain {
  background: transparent;
  color: var(--night-ink);
  border-color: var(--night-rule);
}

.band-night .btn-plain:hover { background: transparent; border-color: var(--night-ink); }

.band-night .card {
  background: var(--night-2);
  border-color: var(--night-rule);
  box-shadow: none;
}

.band-night .card:hover { border-color: var(--night-accent); transform: translateY(-2px); }
.band-night .card .icon { color: var(--night-accent); }

.band-night .step::before {
  background: var(--night-2);
  border-color: var(--night-rule);
  color: var(--night-accent);
}

.band-night .step::after { background: var(--night-rule); }

.band-night .chip {
  background: var(--night-2);
  border-color: var(--night-rule);
  color: var(--night-ink-2);
}

.band-night .dashed li::before { color: var(--night-rule); }

.band-night .qa,
.band-night .qa details,
.band-night .spec,
.band-night .spec > div { border-color: var(--night-rule); }

.band-night .qa summary::after { color: var(--night-ink-2); }
.band-night .icon { color: var(--night-accent); }

/* -- 15.6 Hero con diagrama ------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
}

/* El tope de anchura no es estético: el texto del diagrama se mide en unidades
   del viewBox, así que crece con la figura. Sin tope, en una pantalla de 800 px
   las etiquetas salían el doble de grandes que en el escritorio. */
.hero-fig {
  width: 100%;
  max-width: 470px;
  height: auto;
  display: block;
  margin: 0 auto;
  overflow: visible;
}

/* Los nombres de los sistemas van en la tipografía de texto, no en la
   monoespaciada: con la mono, «Google Workspace» ocupa 125 unidades del viewBox
   y se salía de la caja. El tamaño es el del viewBox, no píxeles de pantalla:
   a 470 px de ancho, estos 13 salen a 13,9 px reales. */
.hero-fig text {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
  fill: var(--ink-2);
}

/* «HOY» sí es una etiqueta, y las etiquetas de este sitio van en la mono. */
.hero-fig .fig-tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.09em;
  fill: var(--ink-3);
}

.hero-fig .fig-dest {
  font-size: 15px;
  font-weight: 500;
  fill: var(--accent);
}

/* Las marcas de lo que llega a Microsoft 365, en el azul del acento: son el
   remate del diagrama y no una etiqueta más. */
.hero-fig .fig-ok { stroke: var(--accent-2); }

/* Por debajo de 520 px la figura se encoge y con ella la letra. Se sube el
   cuerpo para compensar: a 375 px estos 15 salen a 11,6 px reales. El tope son
   15: a 16 ya no cabría «Google Workspace» en su caja. */
@media (max-width: 519px) {
  .hero-fig text { font-size: 15px; }
  .hero-fig .fig-tag { font-size: 12px; }
  .hero-fig .fig-dest { font-size: 17px; }
}

.hero-fig .fig-box {
  fill: var(--paper);
  stroke: var(--rule-2);
  stroke-width: 1;
}

.hero-fig .fig-cloud {
  fill: var(--accent-soft);
  stroke: var(--accent-2);
  stroke-width: 1.25;
}

.hero-fig .fig-ico {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Las tres líneas que van de los sistemas de hoy a la nube. Se dibujan solas
   una vez, de arriba abajo, y se quedan quietas. */
.hero-fig .flow {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: trazo 1.1s ease-out forwards;
}

.hero-fig .flow-2 { animation-delay: .18s; }
.hero-fig .flow-3 { animation-delay: .36s; }

@keyframes trazo {
  to { stroke-dashoffset: 0; }
}

/* El punto que recorre cada línea: un guion corto de 5 unidades sobre una
   línea de 300 que se desplaza. Dice «esto se está moviendo» sin repintar
   nada más que un trazo. */
.hero-fig .pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 5 295;
  stroke-dashoffset: 300;
  animation: pulso 3.2s linear 1.2s infinite;
}

.hero-fig .pulse-2 { animation-delay: 1.6s; }
.hero-fig .pulse-3 { animation-delay: 2s; }

@keyframes pulso {
  to { stroke-dashoffset: -5; }
}

/* -- 15.7 Nada de esto se mueve si el visitante ha pedido que no se mueva --- */

@media (prefers-reduced-motion: reduce) {
  .hero-fig .flow {
    animation: none;
    stroke-dashoffset: 0;
  }

  .hero-fig .pulse { display: none; }

  .card,
  .card:hover,
  .band-night .card:hover {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   16. Ajustes de pantalla estrecha
   --------------------------------------------------------------------------
   Referencia: 375 px, que es el ancho más estrecho que se comprueba. A ese
   ancho nada se desplaza en horizontal.
   -------------------------------------------------------------------------- */

@media (max-width: 719px) {
  .wrap { padding: 0 18px; }

  .band { padding: 46px 0; }
  .band-first { padding-top: 32px; }
  .band-tight { padding: 28px 0; }
  .band-join { padding-top: 0; }

  h1 { font-size: 29px; }
  h2 { font-size: 22px; }

  .lede { font-size: 16.5px; }
  h1 + .lede, h2 + .lede { margin-top: 14px; }

  .site-head-inner { padding-top: 14px; padding-bottom: 14px; gap: 8px 18px; }
  .site-nav { gap: 2px 14px; }
  .site-nav a { font-size: 13.5px; }

  .actions { gap: 10px; }
  .actions .btn { flex: 1 1 100%; text-align: center; }

  .level { padding: 22px 0 24px 0; }
  .spec > div { padding: 14px 0; }

  .quote { font-size: 16.5px; padding-left: 16px; }
  .callout { padding-left: 16px; }

  .hero { gap: 28px; }
  .card { padding: 18px 16px; }

  .step { padding-left: 48px; padding-bottom: 24px; }
  .step::before { width: 32px; height: 32px; font-size: 12px; }
  .step::after { left: 16px; top: 34px; }

  /* Los chips no se recortan ni se desplazan: se envuelven y punto. */
  .chip { white-space: normal; }
  .band-strip { padding: 14px 0; }
}

/* --------------------------------------------------------------------------
   17. Impresión: una propuesta se imprime y se lleva a una reunión
   -------------------------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .actions, form, .hero-fig, .svg-sprite { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { border-top: 0; padding: 0 0 18pt 0; }
  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
  .qa details { display: block; }
  .qa details > :not(summary) { display: block; }

  /* En papel no hay banda oscura: se imprime en negro sobre blanco como todo
     lo demás, y las tarjetas pierden la sombra y se quedan con el filete. */
  .band-night, .band-night .card, .band-strip { background: #fff; }
  .band-night, .band-night *, .band-night a { color: #000; }
  .card { box-shadow: none; border-color: #999; break-inside: avoid; }
  .step { break-inside: avoid; }
  .hero { display: block; }
  .chip { border-color: #999; }
}