/**
 * RuleCenter - Global Styles
 * Un solo archivo CSS para toda la web.
 * Sistema visual «Acta» (2026-09-23). Contrato de tokens y componentes:
 * web/STYLE_GUIDE.md — leerlo antes de tocar esta hoja.
 */

/* ==========================================================================
   1. TOKENS
   Los colores literales viven SOLO aquí. Los componentes usan tokens.
   Los nombres antiguos (--color-gray-*, --gradient-*, --bg-dark…) se
   mantienen como alias para no reescribir las 56 páginas.
   ========================================================================== */

:root {
  /* Paleta base */
  --color-paper: #f2f5f8;
  --color-sheet: #ffffff;
  --color-ink: #14233f;
  --color-ink-raised: #1f3355;
  --color-muted: #566377;
  --color-rule: #cdd5df;
  --color-rule-soft: #edf0f4;
  --color-seal: #0a7054;
  --color-seal-soft: #e3f2ec;
  --color-brand: #0052cc;
  --color-brand-dark: #003d99;
  --color-brand-light: #e6eefa;

  /* Semánticos */
  --color-bg: var(--color-paper);
  --color-surface: var(--color-sheet);
  --color-text-primary: var(--color-ink);
  --color-text-secondary: var(--color-muted);
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #b9c3d3;
  --color-on-ink-rule: #34476a;
  --color-border: var(--color-rule);
  --color-link: var(--color-brand);
  --focus-halo: rgb(0 0 0 / 0.45);

  --color-primary: var(--color-brand);
  --color-primary-dark: var(--color-brand-dark);
  --color-primary-light: var(--color-brand-light);
  --color-success: var(--color-seal);
  --color-warning: #b54708;
  --color-error: #b42318;
  --color-info: var(--color-brand);

  /* Estados en trío, derivados de la superficie */
  --status-ok: var(--color-seal);
  --status-warn: var(--color-warning);
  --status-danger: var(--color-error);
  --status-ok-bg: color-mix(in srgb, var(--status-ok) 12%, var(--color-surface));
  --status-ok-border: color-mix(in srgb, var(--status-ok) 45%, var(--color-surface));
  --status-warn-bg: color-mix(in srgb, var(--status-warn) 12%, var(--color-surface));
  --status-warn-border: color-mix(in srgb, var(--status-warn) 45%, var(--color-surface));
  --status-danger-bg: color-mix(in srgb, var(--status-danger) 10%, var(--color-surface));
  --status-danger-border: color-mix(in srgb, var(--status-danger) 45%, var(--color-surface));

  /* Alias de la hoja anterior (no usar en código nuevo) */
  --color-white: var(--color-sheet);
  --color-gray-50: var(--color-paper);
  --color-gray-100: #e9edf2;
  --color-gray-200: var(--color-rule);
  --color-gray-400: #8a96a8;
  --color-gray-500: #6b778a;
  --color-gray-600: var(--color-muted);
  --color-gray-700: #37445c;
  --color-gray-800: var(--color-ink);
  --color-dark: var(--color-ink);
  --gradient-hero: var(--color-ink);
  --gradient-problems: var(--color-ink);
  --bg-dark: var(--color-ink);
  --text-light: #e5e9f0;
  --muted: var(--color-text-inverse-muted);

  /* Tipografía */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 5.5rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Shadows: línea de papel + sombra larga y suave */
  --shadow-sm: 0 1px 0 var(--color-rule);
  --shadow-md: 0 1px 0 var(--color-rule), 0 18px 36px -28px rgb(20 35 63 / 0.35);
  --shadow-lg: 0 1px 0 var(--color-rule), 0 24px 48px -28px rgb(20 35 63 / 0.4);
  --shadow-xl: 0 30px 60px -30px rgb(20 35 63 / 0.45);

  /* Capas y tacto */
  --z-sticky: 1000;
  --z-banner: 1500; /* aviso de cookies: sobre la cabecera y su menú móvil, bajo los avisos */
  --z-toast: 2000;
  --touch-target: 44px;
  /* Alto del aviso de cookies mientras está abierto (lo fija js/consent.js; 0 sin aviso).
     La página y el menú móvil lo reservan abajo para que el aviso no tape su final. */
  --cookie-banner-space: 0px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.5s ease;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Un ancla o el foco con teclado no deben quedar bajo la cabecera fija (.header, sticky: unos
     77 px a 390 px, medidos el 2026-10-12; 100 px le deja aire) ni bajo el aviso de cookies.
     El margen vive solo aquí: un scroll-margin-top en una sección se sumaría (item 2cf3). */
  scroll-padding-top: 100px;
  scroll-padding-bottom: var(--cookie-banner-space);
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--cookie-banner-space);
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--color-primary-dark);
}

ul,
ol {
  list-style: none;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

/* Instrument Sans (todo el texto) y JetBrains Mono (solo horas y huellas) se sirven
   desde la propia web, /fonts/, desde el 2026-10-12 (item 96bd). Antes las pedía cada
   página a Google Fonts, también antes de elegir en el aviso de cookies, y Google
   recibía la IP de cada visitante. Son los mismos ficheros woff2 que servía Google
   (Instrument Sans v4, JetBrains Mono v24), fuentes variables con licencia SIL OFL 1.1
   (/fonts/OFL-*.txt): un fichero por subconjunto cubre todos los pesos. Solo latin y
   latin-ext; el navegador descarga cada uno solo si la página usa algún carácter de su
   unicode-range, y JetBrains Mono solo donde se usa. Cada página precarga
   instrument-sans-v4-latin.woff2, el único que necesita todo texto en español. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-v4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-v4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-v24-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-v24-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin-bottom: var(--spacing-md);
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

p {
  margin-bottom: var(--spacing-md);
}

.text-muted {
  color: var(--color-gray-600);
}

.text-center {
  text-align: center;
}

.text-white {
  color: var(--color-white);
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.container-sm {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

section {
  padding: var(--spacing-4xl) 0;
}

.section-light {
  background-color: var(--color-gray-50);
}

.section-white {
  background-color: var(--color-surface);
}

/* Las secciones claras se separan con una línea de papel, no con color. */
.section-light + .section-white,
.section-white + .section-light,
.section-light + .section-light,
.section-white + .section-white,
.section + .section {
  border-top: 1px solid var(--color-border);
}

.section-dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

.section-gradient {
  background: var(--color-ink);
  color: var(--color-white);
}

.section-gradient-alt {
  background: var(--color-ink);
  color: var(--color-white);
}

/* Los títulos heredan color-gray-800 de la sección 3 (Typography), que sobre
   los degradados daba 4,01:1 y 2,30:1. Sobre fondo oscuro van en blanco. */
.section-gradient h1,
.section-gradient h2,
.section-gradient h3,
.section-gradient-alt h1,
.section-gradient-alt h2,
.section-gradient-alt h3,
.section-dark h1,
.section-dark h2,
.section-dark h3 {
  color: var(--color-white);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--spacing-xl);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

/* Al retirar los placeholders de imagen, muchas rejillas de dos columnas se
   quedaron con una sola. Sin esto el contenido ocuparía media rejilla y al
   lado quedaría un hueco vacío del mismo tamaño. */
.grid-2 > :only-child,
.hero-content > :only-child {
  grid-column: 1 / -1;
}

/* Flex */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

.header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  width: auto;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.nav-links a:not(.btn) {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  padding: var(--spacing-sm) 0;
  position: relative;
}

.nav-links a:not(.btn):hover,
.nav-links > li > a.active {
  color: var(--color-primary);
}

.nav-links > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-normal);
}

.nav-links > li > a:hover::after,
.nav-links > li > a.active::after {
  width: 100%;
}

/* Submenús: se abren al pasar el ratón, al tabular dentro (focus-within) o
   con el botón de flecha (.open, lo pone main.js — imprescindible en táctil). */
.has-sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.has-sub::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}

.sub-toggle {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.sub-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast);
}

.has-sub.open > .sub-toggle::before {
  transform: translateY(2px) rotate(-135deg);
}

.sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  z-index: calc(var(--z-sticky) + 1);
  min-width: 270px;
  padding: var(--spacing-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.sub-menu-wide {
  min-width: 540px;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-sm);
}

.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu,
.has-sub.open > .sub-menu {
  display: block;
}

.has-sub:hover > .sub-menu-wide,
.has-sub:focus-within > .sub-menu-wide,
.has-sub.open > .sub-menu-wide {
  display: grid;
}

.sub-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 0.93rem;
  white-space: nowrap;
}

.sub-menu a:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

.sub-menu a[aria-current="page"] {
  font-weight: 600;
  color: var(--color-primary);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.nav-cta .btn {
  white-space: nowrap;
}

/* Duplicados del CTA que sólo se muestran dentro del menú desplegable móvil. */
.nav-mobile-only {
  display: none;
}



/* Mobile menu toggle */
.nav-toggle {
  display: none;
  min-width: var(--touch-target);
  min-height: var(--touch-target);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-dark);
  margin: 5px 0;
  transition: var(--transition-normal);
}

/* Menú en pantallas estrechas (≤1100 px): hamburguesa + acordeón.
   Con 5 secciones y 3 botones la barra no cabe por debajo de ese ancho. */
@media (max-width: 1100px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - 72px - var(--cookie-banner-space));
    overflow-y: auto;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-lg);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links > li {
    border-top: 1px solid var(--color-rule-soft);
  }

  .nav-links > li:first-child,
  .nav-links > li.nav-mobile-cta {
    border-top: 0;
  }

  .nav-links > li > a:not(.btn) {
    display: block;
    padding: 0.85rem 0;
  }

  .nav-links > li > a::after {
    display: none;
  }

  .has-sub {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .has-sub::after {
    display: none;
  }

  .has-sub > a {
    flex: 1;
  }

  .sub-toggle {
    width: var(--touch-target);
    height: var(--touch-target);
  }

  .has-sub:hover > .sub-menu,
  .has-sub:focus-within > .sub-menu {
    display: none;
  }

  .sub-menu,
  .sub-menu-wide {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 0 var(--spacing-sm) var(--spacing-md);
    border: 0;
    box-shadow: none;
  }

  .has-sub.open > .sub-menu,
  .has-sub.open > .sub-menu-wide {
    display: block;
  }

  .sub-menu a {
    white-space: normal;
    padding: 0.6rem 0.75rem;
  }

  .nav-toggle {
    display: block;
  }

  /* En la barra quedan logo + CTA primario + hamburguesa. «Acceder» y
     «Autoevaluación» se recuperan como botones dentro del desplegable. */
  .nav-cta .btn {
    display: none;
  }

  .nav-cta .nav-cta-primary {
    display: inline-flex;
    white-space: nowrap;
  }

  .nav-mobile-only {
    display: list-item;
  }

  .nav-mobile-cta .btn {
    display: flex;
    width: 100%;
    margin: var(--spacing-sm) 0;
  }
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* justify-content centres the text's box, not its lines: a label that wraps came out left-aligned
     (/ecm/ and /seguridad/ at 320 px, visual QA 2026-10-12). */
  text-align: center;
  min-height: var(--touch-target);
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.btn-secondary:hover {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}

.btn-white {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

.btn-white:hover {
  background-color: var(--color-gray-100);
  color: var(--color-text-primary);
}

.btn-outline-white,
.btn-outline-light {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.btn-outline-white:hover,
.btn-outline-light:hover {
  background-color: var(--color-ink-raised);
  color: var(--color-text-inverse);
}

/* «Acceder» (clientes que ya tienen cuenta): botón relleno en tinta, con
   icono, para que no se confunda con una opción del menú. */
.btn-access {
  gap: 0.45rem;
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
}

.btn-access:hover {
  background-color: var(--color-ink-raised);
  color: var(--color-text-inverse);
}

/* Contorno de tinta: alias de .btn-secondary (se usaba sin definir). */
.btn-outline {
  background-color: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.btn-outline:hover {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}

/* Botón a todo el ancho de su contenedor (envío de formularios). */
.btn-block {
  display: flex;
  width: 100%;
}

.btn-lg {
  padding: 0.85rem 1.6rem;
  font-size: 1.02rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

.btn-icon {
  gap: var(--spacing-sm);
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
  background: var(--color-surface);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast);
}

.card-link:hover {
  border-color: var(--color-text-primary);
}

.card-icon {
  width: 48px;
  height: 48px;
  background: var(--color-seal-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: var(--spacing-md);
  /* Seal on its soft tint (5.3:1). A later rule left from the gradient era painted the icon
     white, 1.1:1 on this tint: invisible on 8 pages until 2026-10-12 (visual QA). */
  color: var(--color-seal);
}

.card h3 {
  color: var(--color-text-primary);
  font-size: 1.3rem;
}

.card p {
  color: var(--color-gray-600);
  margin-bottom: 0;
}

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.card-link:hover {
  color: inherit;
}

.card-link:hover h3 {
  color: var(--color-link);
}

/* A card that is a link says so without hover (a phone has none): an arrow after its title, in
   link colour. Cards with their own «Ver…» line (.card-link-text, .link-arrow, .card-cta) keep it.
   Until 2026-10-12 a link card looked like the information cards beside it (blind test: the
   «Riesgos psicosociales» card of /cumplimiento-laboral/ did not look like a link). The second
   `content` gives the arrow an empty alternative text where the browser supports it. */
.card-link:not(:has(.card-link-text, .link-arrow, .card-cta)) > :is(h2, h3, h4, strong):first-of-type::after {
  content: "\00a0\2192";
  content: "\00a0\2192" / "";
  color: var(--color-link);
}

/* ==========================================================================
   8. HOME — hero con acta de evidencia (propuesta A, 2026-09-23)
   La animación la mueve js/ecm-animation.js (núcleo) + js/home-acta.js.
   ========================================================================== */

.home-hero {
  padding: var(--spacing-3xl) 0 var(--spacing-4xl);
  background: var(--color-bg);
}

.home-hero .container {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: var(--spacing-3xl);
  align-items: start;
}

.home-hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  max-width: 14ch;
}

.home-lede {
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  max-width: 44ch;
}

.home-lede strong {
  color: var(--color-text-primary);
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.home-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-lg);
  margin-top: var(--spacing-lg);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.home-facts li::before {
  content: "\2713";
  color: var(--color-seal);
  font-weight: 700;
  margin-right: 6px;
}

/* El acta */
.acta {
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.acta-head {
  padding: 22px 26px 18px;
  border-bottom: 1px solid var(--color-border);
}

.acta-kind {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.acta-title {
  margin: 6px 0 0;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.acta-title #wordBox {
  color: var(--color-primary);
  white-space: nowrap;
}

.acta .cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background: var(--color-primary);
  vertical-align: -0.08em;
  margin-left: 2px;
  animation: acta-heartbeat 1.6s ease-in-out infinite;
}

/* Cursor con latido lento (dos pulsos y pausa) para que se lea como cursor.
   Es solo opacidad, no desplazamiento: se mantiene con «Reducir movimiento». */
@keyframes acta-heartbeat {
  0%,
  100% {
    opacity: 1;
  }
  14% {
    opacity: 0.15;
  }
  28% {
    opacity: 1;
  }
  42% {
    opacity: 0.15;
  }
  60% {
    opacity: 1;
  }
}

.acta-log {
  min-height: 292px;
}

.acta-log li {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 12px 26px;
  border-bottom: 1px solid var(--color-rule-soft);
  font-size: 0.9rem;
}

.acta-log li:last-child {
  border-bottom: 0;
}

.acta-log time,
.acta-log .hash {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.acta-log .hash {
  color: var(--color-seal);
}

.acta-log strong {
  font-weight: 600;
}

.acta-log li.fresh {
  animation: acta-land 0.5s ease-out;
}

@keyframes acta-land {
  from {
    background: var(--color-seal-soft);
  }
  to {
    background: transparent;
  }
}

.acta-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 26px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.acta-foot b {
  color: var(--color-seal);
}

/* Secciones de la home: alineadas a la izquierda, separadas por línea */
.home-block {
  border-top: 1px solid var(--color-border);
}

.home-block h2 {
  max-width: 24ch;
}

.home-intro {
  color: var(--color-text-secondary);
  max-width: 60ch;
}

/* Qué tienes que cumplir: rejilla con reglas, sin tarjetas */
.home-needs {
  margin-top: var(--spacing-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--color-text-primary);
}

.home-needs a {
  display: block;
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  text-decoration: none;
}

.home-needs a:not(:nth-child(3n)) {
  border-right: 1px solid var(--color-border);
  margin-right: var(--spacing-lg);
}

/* The last entry never carries a divider: with 7 entries it sits alone in the row. */
.home-needs a:last-child {
  border-right: 0;
  margin-right: 0;
}

.home-needs h3 {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-xs);
}

.home-needs .who {
  font-size: 0.85rem;
  color: var(--color-seal);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.home-needs p:not(.who) {
  color: var(--color-text-secondary);
  font-size: 0.97rem;
  margin-bottom: var(--spacing-sm);
}

.home-needs .go {
  color: var(--color-link);
  font-weight: 600;
  font-size: 0.93rem;
}

.home-needs a:hover h3 {
  color: var(--color-link);
}

/* Hoy / con RuleCenter */
.home-contrast {
  margin-top: var(--spacing-2xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.home-contrast > div {
  padding: 28px 32px;
}

.home-contrast > div + div {
  border-left: 1px solid var(--color-border);
  background: var(--color-seal-soft);
}

.home-contrast h3 {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.home-contrast li {
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.home-contrast li:first-child {
  border-top: 0;
}

.home-contrast li strong {
  display: block;
}

/* Cómo funciona: tres pasos en secuencia */
.home-flow {
  margin-top: var(--spacing-2xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: flow;
}

.home-flow li {
  padding-right: var(--spacing-xl);
  position: relative;
}

.home-flow li::before {
  counter-increment: flow;
  content: counter(flow);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-text-primary);
  background: var(--color-bg);
  font-weight: 700;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.home-flow li::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 40px;
  right: 0;
  height: 1.5px;
  background: var(--color-border);
}

.home-flow li:last-child::after {
  display: none;
}

.home-flow h3 {
  font-size: 1.35rem;
  margin-bottom: var(--spacing-xs);
}

.home-flow p {
  color: var(--color-text-secondary);
  max-width: 32ch;
}

.home-more {
  margin-top: var(--spacing-xl);
}

/* Qué guarda cada aceptación */
.home-evidence .container {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--spacing-2xl);
  align-items: center;
}

.home-fields {
  margin: var(--spacing-xl) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.home-fields div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.home-fields div:first-child {
  border-top: 0;
}

.home-fields dt {
  color: var(--color-text-secondary);
}

.home-fields dd {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: right;
}

/* Confianza */
.home-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  margin: var(--spacing-2xl) 0 var(--spacing-xl);
}

.home-trust li {
  border-top: 2px solid var(--color-seal);
  padding-top: 14px;
  font-weight: 600;
}

@media (max-width: 992px) {
  .home-hero .container,
  .home-evidence .container {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .home-needs {
    grid-template-columns: 1fr 1fr;
  }

  .home-needs a:not(:nth-child(3n)) {
    border-right: 0;
    margin-right: 0;
  }

  .home-needs a:nth-child(odd) {
    border-right: 1px solid var(--color-border);
    margin-right: var(--spacing-lg);
  }

  .home-trust {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .home-contrast {
    grid-template-columns: 1fr;
  }

  .home-contrast > div + div {
    border-left: 0;
    border-top: 1px solid var(--color-border);
  }

  .home-flow {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .home-flow li::after {
    display: none;
  }

  .home-needs {
    grid-template-columns: 1fr;
  }

  .home-needs a:nth-child(odd) {
    border-right: 0;
    margin-right: 0;
  }
}

@media (max-width: 520px) {
  .home-hero {
    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
  }

  .acta-head,
  .acta-foot {
    padding-left: 16px;
    padding-right: 16px;
  }

  .acta-log li {
    grid-template-columns: 1fr auto;
    padding: 12px 16px;
  }

  .acta-log time {
    grid-column: 1 / -1;
  }

  .home-contrast > div {
    padding: 22px 18px;
  }

  .home-fields div {
    flex-direction: column;
    gap: 2px;
  }

  .home-fields dd {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acta-log li.fresh {
    animation: none;
  }
}

/* ==========================================================================
   9. HERO SECTION (Standard)
   ========================================================================== */

.hero {
  padding: var(--spacing-3xl) 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}

.hero .hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: center;
}

.hero h1 {
  color: var(--color-text-primary);
  max-width: 22ch;
  margin-bottom: var(--spacing-lg);
}

.hero p {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  max-width: 62ch;
  margin-bottom: var(--spacing-xl);
}

/* Los héroes interiores se escribieron para fondo oscuro (btn-white /
   btn-outline-white). Sobre el papel claro se leen como primario y contorno. */
.hero .btn-white {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.hero .btn-white:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.hero .btn-outline-white,
.hero .btn-outline-light {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

.hero .btn-outline-white:hover,
.hero .btn-outline-light:hover {
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
}

.hero-buttons {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.hero-badges {
  display: flex;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  flex-wrap: wrap;
}

.hero-badges .badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.hero-image {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   10. SECTION TITLES
   ========================================================================== */

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.section-header h2 {
  margin-bottom: var(--spacing-md);
}

.section-header p {
  font-size: 1.15rem;
  color: var(--color-gray-600);
  max-width: 800px;
  margin: 0 auto;
}

.section-gradient .section-header p,
.section-dark .section-header p {
  color: var(--color-text-inverse-muted);
}

/* ==========================================================================
   11. PROBLEMS SECTION
   ========================================================================== */

.problems-list {
  margin-bottom: var(--spacing-xl);
}

.problems-list li {
  padding: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
  position: relative;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--color-on-ink-rule);
}

.problems-list li:last-child {
  border-bottom: none;
}

.problems-list li::before {
  content: "\2717";
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--color-text-inverse-muted);
}

.solution-box {
  background-color: var(--color-ink-raised);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-xl);
}

.solution-box h3 {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-white);
}

/* ==========================================================================
   12. STEPS / PROCESS
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  counter-reset: step;
}

.step {
  text-align: center;
  position: relative;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-text-primary);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 auto var(--spacing-md);
  position: relative;
  z-index: 1;
}

.step h4 {
  margin-bottom: var(--spacing-sm);
}

.step p {
  color: var(--color-gray-600);
  margin-bottom: 0;
}

/* Connector lines between steps (never from the last step of a row of 3) */
.steps .step:nth-child(3n)::after {
  display: none;
}

.steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(50% + 34px);
  width: calc(100% - 68px + var(--spacing-xl));
  height: 1.5px;
  background: var(--color-border);
}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */

.testimonial-card {
  background: var(--color-surface);
  padding: var(--spacing-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.testimonial-text {
  font-style: italic;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
  line-height: 1.7;
}

.testimonial-text::before {
  content: "\201C";
  font-size: 3rem;
  color: var(--color-primary);
  line-height: 0;
  vertical-align: -0.5em;
  margin-right: var(--spacing-xs);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.author-avatar {
  width: 50px;
  height: 50px;
  background: var(--color-ink);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.1rem;
}

.author-info h4 {
  margin-bottom: 0;
  font-size: 1rem;
}

.author-info p {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

/* ==========================================================================
   14. CTA SECTION
   ========================================================================== */

.cta-section {
  padding: var(--spacing-4xl) 0;
  background: var(--color-ink);
  color: var(--color-white);
  text-align: center;
}

.cta-section h2 {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-inverse);
}

.cta-section p {
  font-size: 1.15rem;
  margin-bottom: var(--spacing-xl);
  color: var(--color-text-inverse-muted);
}

.cta-buttons {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.cta-features {
  display: flex;
  gap: var(--spacing-2xl);
  justify-content: center;
  margin-top: var(--spacing-xl);
  flex-wrap: wrap;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.95rem;
  color: var(--color-text-inverse-muted);
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.footer {
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
  padding: var(--spacing-3xl) 0 var(--spacing-lg);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
}

.footer-section h3 {
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
  font-size: 1.1rem;
}

.footer-section p {
  color: var(--color-text-inverse-muted);
  font-size: 0.9rem;
}

.footer-section ul li {
  margin-bottom: var(--spacing-sm);
}

.footer-section a {
  color: var(--color-text-inverse-muted);
  font-size: 0.9rem;
  transition: color var(--transition-normal);
}

.footer-section a:hover {
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid var(--color-on-ink-rule);
  padding-top: var(--spacing-xl);
  text-align: center;
}

.footer-bottom p {
  color: var(--color-text-inverse-muted);
  font-size: 0.875rem;
  margin-bottom: var(--spacing-md);
}

/* Línea legal del pie: enlaces separados por un punto medio. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  justify-content: center;
}

.footer-legal a {
  color: var(--color-text-inverse-muted);
  font-size: 0.875rem;
  transition: color var(--transition-normal);
}

.footer-legal a:not(:last-child)::after {
  content: "·";
  margin-left: var(--spacing-md);
  color: var(--color-on-ink-rule);
}

.footer-legal a:hover {
  color: var(--color-white);
}

/* Por debajo de 600 px los cinco enlaces legales pasan a dos líneas y el «·» del último de
   la primera quedaba colgando al final de la línea (QA visual, 2026-10-12). En el móvil el
   hueco entre enlaces, de al menos --touch-target de alto, ya los separa. */
@media (max-width: 600px) {
  .footer-legal a:not(:last-child)::after {
    content: none;
  }
}

.footer-badges {
  display: flex;
  gap: var(--spacing-lg);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.footer-badges img {
  height: 40px;
  width: auto;
  opacity: 0.8;
  transition: opacity var(--transition-normal);
}

.footer-badges img:hover {
  opacity: 1;
}

/* Área táctil (item ff27, 2026-10-12): en una pantalla táctil o estrecha, cada enlace del
   pie (también el logo) y cada enlace suelto de las preguntas frecuentes (.faq-more, un
   párrafo que solo lleva enlaces) mide al menos --touch-target de alto (WCAG 2.5.5); medían
   18-20 px, y el logo 40. Los enlaces en mitad de una frase no crecen: WCAG 2.5.8 los exime
   y descuadrarían la línea. Con ratón y pantalla ancha el pie no cambia. Lo mide
   site-layout-public.spec.js. */
@media (max-width: 768px), (pointer: coarse) {
  .footer-section ul li {
    margin-bottom: 0;
  }

  .footer-section ul a,
  .footer-legal a,
  .faq-more a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
  }

  .footer-section > .logo {
    min-height: var(--touch-target);
  }
}

/* ==========================================================================
   16. FORMS
   ========================================================================== */

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
  color: var(--color-gray-800);
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: var(--touch-target);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

/* Las casillas de consentimiento son obligatorias para completar el alta:
   con el tamaño por defecto (13x13 px) fallan el mínimo táctil recomendado
   de 44x44. Se agranda la casilla y la etiqueta amplía el área pulsable. */
.form-checkbox input[type="checkbox"] {
  margin-top: 2px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.form-checkbox label {
  font-size: 0.9rem;
  color: var(--color-gray-600);
  cursor: pointer;
  padding: 0.6rem 0;
}

.form-checkbox a {
  color: var(--color-primary);
}

.form-error {
  color: var(--color-error);
  font-size: 0.875rem;
  margin-top: var(--spacing-xs);
}

/* What stays at the top of a lead form once it is sent: its confirmation and reference, in a box with
   the «registered» trio. The confirmation itself is the dialog of §16b; this note is where the focus
   lands when the dialog closes. Until 2026-10-12 it was the only confirmation, a 14-px green sentence
   nobody saw (item eaa7). */
.form-success {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--status-ok-border);
  border-radius: var(--radius-md);
  background-color: var(--status-ok-bg);
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

/* Trap for bots: out of sight and out of the tab order; people never fill it
   in, and the API drops a submission that comes with it filled. Every lead
   form of the site and the self-assessment use it. */
.form-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   16b. CONFIRMATION OF A FORM (a dialog opened by js/form-dialog.js, item eaa7)
   ==========================================================================
   A native <dialog> opened with showModal(): it sits above everything (the
   browser's top layer, no z-index), the rest of the page is inert and Escape
   closes it. Its content is the success panel the partners page had designed
   and never showed (item cc34): icon, title and text, plus the reference the
   API answers with. Every form of the site uses it, the self-assessment too. */
.form-dialog {
  width: min(30rem, calc(100% - 2 * var(--spacing-md)));
  max-height: calc(100% - 2 * var(--spacing-md));
  margin: auto;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xl);
  text-align: center;
  /* A long address (the self-assessment names where its report went) breaks inside the box instead of running
     out of it: at 320 px one of 80 characters overflowed by 145 px (review of 2026-10-12). */
  overflow-wrap: anywhere;
}

.form-dialog::backdrop {
  background-color: color-mix(in srgb, var(--color-ink) 60%, transparent);
}

.form-dialog-title {
  margin-bottom: var(--spacing-sm);
  font-size: 1.5rem;
}

.form-dialog-text {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-secondary);
}

.form-dialog-ref {
  margin-bottom: var(--spacing-lg);
  font-size: 0.95rem;
}

.form-dialog-ref[hidden] {
  display: none;
}

.form-dialog-ref strong {
  white-space: nowrap;
}

/* A page with a form beside its text (/demo/): on a desktop, the lead-in and the
   rest of the text on the left and the form on the right; on a phone, the form
   right after the lead-in instead of a screen and a half further down (blind
   test of 2026-10-12, item f513). The HTML follows the phone order: lead-in,
   form, rest. */
.lead-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "intro form"
    "more form";
  column-gap: var(--spacing-3xl);
  align-items: start;
}

.lead-layout-intro {
  grid-area: intro;
}

.lead-layout-form {
  grid-area: form;
}

.lead-layout-more {
  grid-area: more;
}

@media (max-width: 768px) {
  .lead-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "intro"
      "form"
      "more";
    row-gap: var(--spacing-xl);
  }
}

/* Fieldset */
fieldset {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

fieldset legend {
  font-weight: 600;
  padding: 0 var(--spacing-sm);
  color: var(--color-gray-800);
}

/* Radio buttons */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

/* ==========================================================================
   17. TABLES
   ========================================================================== */

/* position:relative es necesario, no decorativo: sin él este contenedor no es
   el bloque contenedor de sus descendientes absolutos (los .sr-only de las
   tablas de planes), que entonces escapan del recorte y empujan el scroll
   horizontal de toda la página en móvil. */
.table-container,
.table-responsive {
  overflow-x: auto;
  position: relative;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

th {
  background-color: var(--color-gray-50);
  font-weight: 600;
  color: var(--color-gray-800);
}

tbody tr:hover {
  background-color: var(--color-gray-50);
}

/* Comparison table */
.comparison-table th:first-child,
.comparison-table td:first-child {
  font-weight: 500;
}

.comparison-table .check {
  color: var(--color-success);
  font-size: 1.25rem;
}

.comparison-table .cross {
  color: var(--color-error);
  font-size: 1.25rem;
}

/* ==========================================================================
   18. PRICING
   ========================================================================== */

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spacing-xl);
  container-type: inline-size;
}

.pricing-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* El botón va al pie: las tarjetas tienen distinto número de líneas (Corporate,
   siete; las otras, cinco) y sin esto los botones quedan a alturas distintas.
   Ningún hijo de la tarjeta tiene margen superior, así que el flex no cambia
   ningún espacio. */
.pricing-card > .btn {
  margin-top: auto;
}

/* Con tres tarjetas, la rejilla tiene dos columnas entre 632 px (2 × 300 + 32 de
   hueco) y 964 px (3 × 300 + 2 × 32) de ancho, y la tercera quedaba sola a la
   izquierda: se centra, con el ancho de una columna. 300 es el mínimo del minmax
   de .pricing-cards y 32 el --spacing-xl con la letra de 16 px; si cambia
   cualquiera de los dos, se recalculan. Sin container queries, queda como antes. */
@container (min-width: 632px) and (max-width: 963.98px) {
  .pricing-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--spacing-xl)) / 2);
  }
}

.pricing-card.featured {
  border: 2px solid var(--color-primary);
}

.pricing-card.featured::before {
  content: "Recomendado";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: var(--color-white);
  padding: 4px 16px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 600;
}

.pricing-card .price {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.pricing-card .price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-gray-600);
}

.pricing-features {
  text-align: left;
  margin-bottom: var(--spacing-xl);
}

.pricing-features li {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  position: relative;
}

.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

/* ==========================================================================
   19. BREADCRUMBS
   ========================================================================== */

.breadcrumbs {
  padding: var(--spacing-md) 0;
  background-color: var(--color-gray-50);
}

.breadcrumbs ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.875rem;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  color: var(--color-gray-400);
}

.breadcrumbs a {
  color: var(--color-gray-600);
}

.breadcrumbs a:hover {
  color: var(--color-primary);
}

.breadcrumbs li:last-child {
  color: var(--color-gray-800);
  font-weight: 500;
}

/* ==========================================================================
   20. FAQ / ACCORDION
   ========================================================================== */

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-gray-200);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  /* A <button> does not inherit the page font: without this the questions came out in Arial
     (visual QA, 2026-10-12). */
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-gray-800);
  transition: color var(--transition-normal);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question::after {
  content: "+";
  /* Empty alternative text: the «+» is decoration, not part of the question's accessible name
     (blind test of 2026-09-27, item 25db). Browsers without the syntax keep the line above. */
  content: "+" / "";
  font-size: 1.5rem;
  font-weight: 400;
  transition: transform var(--transition-normal);
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.faq-item.active .faq-answer {
  max-height: 500px;
}

.faq-answer p {
  padding-bottom: var(--spacing-lg);
  color: var(--color-gray-600);
}

/* FAQ Sections */
.faq-section {
  margin-bottom: var(--spacing-3xl);
}

.faq-section h2 {
  font-size: 1.5rem;
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
}

/* Accordion Styles */
.accordion {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--color-gray-200);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit; /* a <button>: same reason as .faq-question */
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-800);
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal);
}

.accordion-header:hover {
  background-color: var(--color-gray-50);
  color: var(--color-primary);
}

.accordion-header span {
  flex: 1;
  padding-right: var(--spacing-md);
}

.accordion-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform var(--transition-normal);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background-color: var(--color-gray-50);
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
}

.accordion-content p,
.accordion-content ul {
  padding: 0 var(--spacing-lg);
  color: var(--color-gray-600);
  line-height: 1.7;
}

.accordion-content p:first-child {
  padding-top: var(--spacing-md);
}

.accordion-content p:last-child,
.accordion-content ul:last-child {
  padding-bottom: var(--spacing-lg);
}

.accordion-content ul {
  padding-left: calc(var(--spacing-lg) + var(--spacing-lg));
  margin-bottom: var(--spacing-md);
}

.accordion-content ul li {
  margin-bottom: var(--spacing-sm);
}

.accordion-content a {
  color: var(--color-primary);
  font-weight: 500;
}

.accordion-content a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   20.5 COMPARISON COMPONENTS
   ========================================================================== */

/* Comparison Visual */
.comparison-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--spacing-lg);
  align-items: start;
  margin: var(--spacing-xl) 0;
}

.comparison-col {
  background: var(--color-gray-50);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
}

.comparison-col h4 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

.comparison-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-gray-400);
  padding-top: var(--spacing-3xl);
}

.comparison-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.flow-step {
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  text-align: center;
  width: 100%;
}

.flow-step-muted {
  background: var(--color-gray-200);
  color: var(--color-gray-600);
}

.flow-step-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.flow-step-success {
  background: var(--status-ok-bg);
  color: var(--status-ok);
  font-weight: 600;
}

.flow-step-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  font-weight: 600;
}

.flow-arrow {
  color: var(--color-text-secondary);
  font-size: 1.25rem;
}

/* Highlight Boxes */
.highlight-box {
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  margin: var(--spacing-lg) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-text-primary);
}

.highlight-box h4 {
  margin-bottom: var(--spacing-md);
}

.highlight-box ul {
  margin-bottom: 0;
  padding-left: var(--spacing-lg);
}

.highlight-box li {
  margin-bottom: var(--spacing-sm);
}

.highlight-warning {
  background: var(--status-warn-bg);
  border-left: 4px solid var(--status-warn);
}

.highlight-success {
  background: var(--status-ok-bg);
  border-left: 4px solid var(--status-ok);
}

.highlight-info {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
}

/* Stats Row — definición única. Se usa con 3 y con 4 estadísticas, así que
   auto-fit reparte el ancho real en vez de dejar un hueco en las filas de 3. */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
}

.stat-item {
  text-align: center;
  padding: var(--spacing-lg);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-gray-600);
  margin-top: var(--spacing-sm);
}

/* Use Case List */
.use-case-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

.use-case-item {
  padding: var(--spacing-lg);
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--color-primary);
}

.use-case-item h4 {
  margin-bottom: var(--spacing-sm);
}

.use-case-item p {
  margin-bottom: 0;
  color: var(--color-gray-600);
}

.card-cta {
  display: inline-block;
  margin-top: var(--spacing-md);
  color: var(--color-primary);
  font-weight: 500;
}

/* Card Primary Variant */
.card-primary {
  border: 2px solid var(--color-primary);
  background: var(--color-primary-light);
}

/* Benefits List */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}

.benefit-item {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
}

.benefit-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.benefit-content h4 {
  margin-bottom: var(--spacing-xs);
}

.benefit-content p {
  margin-bottom: 0;
  color: var(--color-gray-600);
  font-size: 0.95rem;
}

/* Compliance Cycle */
.compliance-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: var(--spacing-xl) 0;
}

.cycle-step {
  padding: var(--spacing-md);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 120px;
}

.cycle-step-highlight {
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary);
}

.cycle-number {
  width: 30px;
  height: 30px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin: 0 auto var(--spacing-sm);
}

.cycle-step h4 {
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

.cycle-step p {
  font-size: 0.8rem;
  color: var(--color-gray-600);
  margin-bottom: 0;
}

.cycle-arrow {
  color: var(--color-gray-400);
  font-size: 1.5rem;
}

/* Responsive adjustments for comparison components */
@media (max-width: 768px) {
  .comparison-visual {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .comparison-vs {
    padding: var(--spacing-sm) 0;
  }

  .stats-row {
    grid-template-columns: 1fr;
  }

  .compliance-cycle {
    flex-direction: column;
  }

  .cycle-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   20.6 COMPANY PAGE COMPONENTS
   ========================================================================== */

/* Mission Statement */
.mission-statement {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-xl);
  background: var(--color-ink);
  border-radius: var(--radius-lg);
}

.mission-statement blockquote {
  font-size: 1.5rem;
  color: var(--color-white);
  text-align: center;
  margin: 0;
  font-style: italic;
  line-height: 1.6;
}

.mission-statement blockquote strong {
  color: var(--color-white);
}

/* Value Cards */
.value-card {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.value-icon {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.value-card h4 {
  margin-bottom: var(--spacing-sm);
}

.value-card p {
  color: var(--color-gray-600);
  margin-bottom: 0;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: var(--spacing-xl);
  margin: var(--spacing-xl) 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary);
}

.timeline-item {
  position: relative;
  padding-bottom: var(--spacing-xl);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: calc(-1 * var(--spacing-xl) + 1px);
  top: 4px;
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 3px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}

/* A marker with a number (the steps of a sequence: modelo-evidencia, partners) holds the digit in
   a larger circle on the same axis as the line; an empty one stays the 16 px dot. Until 2026-10-12
   the digit spilled out of the dot onto the line (visual QA). */
.timeline-marker:not(:empty) {
  display: grid;
  place-items: center;
  left: calc(-1 * var(--spacing-xl) - 3px);
  top: 0;
  width: 24px;
  height: 24px;
  border-width: 2px;
  color: var(--color-text-inverse);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.timeline-content h4 {
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.timeline-content p {
  color: var(--color-gray-600);
  margin-bottom: 0;
}

/* Commitment Cards */
.commitment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.commitment-card img {
  margin-bottom: var(--spacing-md);
  opacity: 0.9;
}

.commitment-icon {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
}

.commitment-card h4 {
  margin-bottom: var(--spacing-sm);
}

.commitment-card p {
  color: var(--color-gray-600);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Careers Box */
.careers-box {
  background: var(--color-gray-50);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
  margin-top: var(--spacing-xl);
}

.careers-box h4 {
  margin-bottom: var(--spacing-md);
}

.careers-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md);
  display: inline-block;
  text-align: left;
}

.careers-list li {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  position: relative;
}

.careers-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: bold;
}

/* Text alignment utility */
.text-center {
  text-align: center;
}

/* Responsive adjustments for company page */
@media (max-width: 992px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: 1fr;
  }

  .mission-statement blockquote {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   21. BADGES & TAGS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
}

.badge-primary {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.badge-success {
  background-color: var(--status-ok-bg);
  color: var(--status-ok);
}

.badge-warning {
  background-color: var(--status-warn-bg);
  color: var(--status-warn);
}

.badge-error {
  background-color: var(--status-danger-bg);
  color: var(--status-danger);
}

/* ==========================================================================
   22. BLOG / ARTICLES
   ========================================================================== */

.article-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal);
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.article-card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.article-card-content {
  padding: var(--spacing-lg);
}

.article-card-meta {
  display: flex;
  gap: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--color-gray-600);
  margin-bottom: var(--spacing-sm);
}

.article-card h3 {
  margin-bottom: var(--spacing-sm);
}

.article-card h3 a {
  color: var(--color-gray-800);
}

.article-card h3 a:hover {
  color: var(--color-primary);
}

.article-card p {
  color: var(--color-gray-600);
  margin-bottom: 0;
}

/* ==========================================================================
   23. UTILITIES
   ========================================================================== */

/* Spacing */
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: var(--spacing-sm);
}
.mt-2 {
  margin-top: var(--spacing-md);
}
.mt-3 {
  margin-top: var(--spacing-lg);
}
.mt-4 {
  margin-top: var(--spacing-xl);
}
.mt-5 {
  margin-top: var(--spacing-2xl);
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: var(--spacing-sm);
}
.mb-2 {
  margin-bottom: var(--spacing-md);
}
.mb-3 {
  margin-bottom: var(--spacing-lg);
}
.mb-4 {
  margin-bottom: var(--spacing-xl);
}
.mb-5 {
  margin-bottom: var(--spacing-2xl);
}

/* Visibility */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 992px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .steps .step:not(:last-child)::after {
    display: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  section {
    padding: var(--spacing-3xl) 0;
  }

  /* Hero Standard */
  .hero .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .hero-badges {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  /* Grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Section headers */
  .section-header h2 {
    font-size: 1.75rem;
  }

  /* CTA */
  .cta-buttons {
    flex-direction: column;
  }

  .cta-features {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  /* Footer */
  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-badges {
    flex-direction: column;
    gap: var(--spacing-md);
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }

  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
}

/* ==========================================================================
   25. LEGAL PAGES
   ========================================================================== */

/* Table of Contents */
.toc-box {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
}

.toc-box h3 {
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-800);
}

.toc-list {
  list-style: decimal;
  padding-left: var(--spacing-lg);
  margin: 0;
}

.toc-list li {
  padding: var(--spacing-xs) 0;
}

.toc-list a {
  color: var(--color-gray-600);
  transition: color var(--transition-normal);
}

.toc-list a:hover {
  color: var(--color-primary);
}

/* TOC Columns for long documents */
.toc-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

.toc-column h4 {
  font-size: 0.95rem;
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary-light);
}

@media (max-width: 992px) {
  .toc-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .toc-columns {
    grid-template-columns: 1fr;
  }
}

/* Legal Content */
.legal-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-gray-700);
}

.legal-content h2 {
  font-size: 1.5rem;
  color: var(--color-gray-800);
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
}

.legal-content h3 {
  font-size: 1.25rem;
  color: var(--color-gray-800);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.legal-content h4 {
  font-size: 1.1rem;
  color: var(--color-gray-800);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.legal-content p {
  margin-bottom: var(--spacing-md);
}

.legal-content ul,
.legal-content ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-xl);
}

.legal-content li {
  margin-bottom: var(--spacing-sm);
}

.legal-content a {
  color: var(--color-primary);
  font-weight: 500;
}

.legal-content a:hover {
  text-decoration: underline;
}

/* Legal Sections */
.legal-section {
  margin-bottom: var(--spacing-2xl);
}

.legal-section:first-child h2 {
  margin-top: 0;
}

/* Legal Part Header */
.legal-part-header {
  background: var(--color-ink);
  color: var(--color-white);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

.legal-part-header h2 {
  margin: 0;
  padding: 0;
  border: none;
  color: var(--color-white);
  font-size: 1.5rem;
}

/* Info Card for legal data */
.info-card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-md) 0;
}

.info-card h4 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--color-gray-800);
}

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

.info-list li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-gray-200);
}

.info-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.info-list strong {
  color: var(--color-gray-800);
}

/* Comparison Table for legal */
.comparison-table {
  overflow-x: auto;
  position: relative;
  margin: var(--spacing-lg) 0;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.comparison-table th,
.comparison-table td {
  padding: var(--spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.comparison-table th {
  background: var(--color-gray-100);
  font-weight: 600;
  color: var(--color-gray-800);
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table tr:hover td {
  background: var(--color-gray-50);
}

/* Text utilities for legal */
.text-small {
  font-size: 0.875rem;
}

/* Accordion content for legal (ol) */
.accordion-content ol {
  padding: 0 var(--spacing-lg);
  padding-left: calc(var(--spacing-lg) + var(--spacing-lg));
  margin-bottom: var(--spacing-md);
}

.accordion-content ol li {
  margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   FOCO VISIBLE
   ==========================================================================
   La hoja no definía ningún estilo de foco propio, así que navegar con
   teclado dependía del anillo por defecto del navegador, que sobre los
   fondos oscuros y degradados casi no se ve. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Sobre fondos oscuros o degradados el azul corporativo no destaca:
   se usa el anillo blanco con una sombra que lo despega del fondo. */
.section-gradient a:focus-visible,
.section-gradient button:focus-visible,
.section-gradient-alt a:focus-visible,
.section-gradient-alt button:focus-visible,
.section-dark a:focus-visible,
.section-dark button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.cta-section a:focus-visible,
.cta-section button:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.cookie-banner a:focus-visible,
.cookie-banner button:focus-visible,
.cookie-banner input:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
}

/* ==========================================================================
   MARCAS DE INCLUIDO / NO INCLUIDO
   ==========================================================================
   Las tablas de planes usaban ✓ y ✗ como único contenido de la celda: la
   información iba sólo por símbolo y color (el verde daba 2,24:1). El texto
   accesible viaja ahora en un .sr-only junto a cada marca, y los colores
   suben a un contraste legible. */

.check {
  color: var(--status-ok);
  font-size: 1.25rem;
}

.cross {
  color: var(--status-danger);
  font-size: 1.25rem;
}

.comparison-table .check {
  color: var(--status-ok);
}

.comparison-table .cross {
  color: var(--status-danger);
}

/* Tablas en el móvil y en la tableta vertical (item d1eb, 2026-10-12). Hasta 768 px cada
   fila se apila como una tarjeta: la primera celda es su título y cada valor lleva delante
   la etiqueta de su columna, que el HTML pone en cada celda (data-label; gate en
   APP/tests/unit/web/seo-technical.test.js). Antes, con 3 a 5 columnas, la tabla no
   cabía a 390 px y su caja se desplazaba sin indicarlo: en las comparativas quedaba
   fuera la columna de RuleCenter. El corte es 768 y no 640: entre 641 y 680 px la tabla
   de 5 columnas de la política de cookies seguía sin caber (medido en Chromium; la mide
   site-layout-public.spec.js de 320 a 1440 px). Va después de las reglas
   .comparison-table de arriba, que con la misma especificidad la pisarían. */
@media (max-width: 768px) {
  .table-container table,
  .table-responsive table,
  .comparison-table table {
    display: block;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  /* Los encabezados se ocultan a la vista: cada valor repite el suyo. */
  .table-container thead,
  .table-responsive thead,
  .comparison-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table-container tbody,
  .table-responsive tbody,
  .comparison-table tbody {
    display: block;
  }

  .table-container tr,
  .table-responsive tr,
  .comparison-table tr {
    display: block;
    margin-bottom: var(--spacing-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .table-container td,
  .table-responsive td,
  .comparison-table td {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    overflow-wrap: anywhere;
  }

  .table-container td:first-child,
  .table-responsive td:first-child,
  .comparison-table td:first-child {
    border-top: none;
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .table-container td:not(:first-child)[data-label]:not([data-label=""])::before,
  .table-responsive td:not(:first-child)[data-label]:not([data-label=""])::before,
  .comparison-table td:not(:first-child)[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
  }
}

/* ==========================================================================
   28. JERARQUÍA DE ENCABEZADOS (.as-h3 / .as-h4)
   ==========================================================================
   Muchas cajas y tarjetas titulaban con <h4> dentro de secciones <h2>, de modo
   que el esquema del documento saltaba de h2 a h4 sin h3 (mala accesibilidad y
   peor comprensión por buscadores y motores de IA). El marcado pasa a usar el
   nivel que le corresponde y estas clases conservan EXACTAMENTE el tamaño y el
   espaciado que tenían antes, para no alterar el diseño aprobado.
   - .as-h4 → nivel real h3 (o h2), aspecto de h4
   - .as-h3 → nivel real h2, aspecto de h3
   ========================================================================== */

.as-h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.as-h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--spacing-md);
}

/* Reglas de componente que antes se aplicaban vía `.componente h4` y que ahora
   deben seguir alcanzando al encabezado promovido. */

.highlight-box .as-h4 {
  margin-bottom: var(--spacing-md);
}

.comparison-col .as-h4 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

.benefit-content .as-h4 {
  margin-bottom: var(--spacing-xs);
}

.cycle-step .as-h4 {
  font-size: 0.9rem;
  margin-bottom: var(--spacing-xs);
}

.timeline-content .as-h4 {
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.careers-box .as-h4 {
  margin-bottom: var(--spacing-md);
}

.info-card .as-h4 {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--color-gray-800);
}

.legal-content .as-h4 {
  font-size: 1.1rem;
  color: var(--color-gray-800);
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.card .as-h4,
.card .as-h3 {
  color: var(--color-gray-800);
}

.toc-box .as-h3 {
  margin-bottom: var(--spacing-lg);
  color: var(--color-gray-800);
}

.pricing-card .as-h3 {
  margin-bottom: var(--spacing-sm);
}


/* ── 29. Capturas reales de producto ──────────────────────────────────────
   Las imágenes son capturas del producto en funcionamiento con datos de
   ejemplo (las hace APP/src/frontend/tests/e2e/admin/web-screenshots.spec.js).
   Se muestran a ancho completo con sombra suave para que se lean como una
   ventana de aplicación, y con `height:auto` para que nunca deformen en
   móvil. El pie dice qué se ve y que los datos son de ejemplo. */
.captura-producto {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.captura-producto img {
  display: block;
  width: 100%;
  height: auto;
}
.captura-producto figcaption {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  text-align: left;
}

/* Una pantalla de teléfono, a tamaño de teléfono: estirada al ancho de la
   página, una captura de 390 px saldría más alta que la pantalla. */
.captura-producto--movil {
  max-width: 300px;
  margin-inline: auto;
  border-radius: var(--radius-xl);
}

/* Una captura bajo la lista de pasos de la portada. */
.home-flow + .captura-producto {
  margin-top: var(--spacing-2xl);
}
/* Una captura al final de una sección con otro contenido delante. */
.captura-producto--tras-contenido {
  margin-top: var(--spacing-2xl);
}

/* Escritorio y teléfono de la misma función, juntos: la de escritorio ocupa
   lo que deja el teléfono. Hasta 768 px, una debajo de otra. */
.capturas-producto {
  display: flex;
  gap: var(--spacing-xl);
  align-items: flex-start;
  justify-content: center;
  margin-top: var(--spacing-2xl);
}
.capturas-producto > .captura-producto {
  flex: 1 1 0;
  min-width: 0;
}
.capturas-producto > .captura-producto--movil {
  flex: 0 1 300px;
}
@media (max-width: 768px) {
  .capturas-producto {
    flex-direction: column;
    align-items: center;
  }
  .capturas-producto > .captura-producto {
    flex: none;
    width: 100%;
  }
  .capturas-producto > .captura-producto--movil {
    width: min(100%, 300px);
  }
}


/* Firma visible de los artículos. Los posts los firma el equipo, no una
   persona concreta, así que el JSON-LD mantiene @type Organization: poner
   ahí una Person inventada sería peor para E-E-A-T que no ponerla. */
.article-author {
  font-weight: 600;
  color: var(--color-gray-700);
}
.article-author::after {
  content: "·";
  margin: 0 .5rem;
  color: var(--color-gray-400);
  font-weight: 400;
}

/* ==========================================================================
   30. COMPONENTES DE CONTENIDO (2026-09-23)
   110 clases del HTML no tenían ninguna regla y se pintaban como texto
   plano: es la razón de que las páginas interiores se vieran pobres. Aquí
   reciben forma con los tokens del sistema «Acta». Contrato: web/STYLE_GUIDE.md.
   ========================================================================== */

/* ── Hero interior ─────────────────────────────────────────────────────── */
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  max-width: 62ch;
}

.hero-badge,
.card-badge {
  display: inline-block;
  margin-bottom: var(--spacing-md);
  padding: 3px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
}

.hero-compact {
  padding: var(--spacing-2xl) 0;
}

.hero-content-centered,
.hero-content-center,
.hero-centered {
  text-align: center;
}

.hero-content-centered h1,
.hero-content-center h1,
.hero-centered h1,
.hero-content-centered .hero-subtitle,
.hero-content-center .hero-subtitle,
.hero-centered .hero-subtitle,
.hero-content-centered p,
.hero-content-center p,
.hero-centered p {
  margin-left: auto;
  margin-right: auto;
}

.hero-content-centered .hero-buttons,
.hero-content-center .hero-buttons,
.hero-centered .hero-buttons {
  justify-content: center;
}

.lead {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
}

/* ── Contenedores y utilidades ────────────────────────────────────────── */
.container-narrow {
  max-width: 820px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.align-center {
  align-items: center;
}

.text-lg {
  font-size: 1.15rem;
}

.content-block + .content-block {
  margin-top: var(--spacing-2xl);
}

/* ── Cajas de contenido y avisos ──────────────────────────────────────── */
.content-box,
.warning-box {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  padding: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

.content-box p:last-child,
.warning-box p:last-child,
.warning-box ul:last-child {
  margin-bottom: 0;
}

.content-box-warning,
.warning-box {
  background: var(--status-warn-bg);
  border-color: var(--status-warn-border);
  border-left-color: var(--status-warn);
}

.content-box-success {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-border);
  border-left-color: var(--status-ok);
}

.content-box-info,
.content-box-highlight {
  background: var(--color-primary-light);
  border-left-color: var(--color-primary);
}

.warning-box ul {
  padding-left: var(--spacing-lg);
  list-style: disc;
}

.warning-box + *,
.content-box + .content-box {
  margin-top: var(--spacing-lg);
}

.highlight {
  font-weight: 500;
  color: var(--color-text-primary);
}

.highlight-box-important {
  background: var(--status-danger-bg);
  border-left: 4px solid var(--status-danger);
}

/* ── Variantes de tarjeta ─────────────────────────────────────────────── */
.card-icon-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.card-icon-success {
  background: var(--status-ok-bg);
  color: var(--status-ok);
}

.card-icon-danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

.card-icon-secondary {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.card-elevated,
.card-hover {
  box-shadow: var(--shadow-md);
}

.card-featured,
.card-highlighted {
  border: 1.5px solid var(--color-text-primary);
}

.card-benefit h3,
.card-feature h3 {
  font-size: 1.2rem;
}

.card-link-text,
.link-arrow {
  display: inline-block;
  margin-top: var(--spacing-md);
  color: var(--color-link);
  font-weight: 600;
  font-size: 0.95rem;
}

.list-card {
  padding: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── Listas ───────────────────────────────────────────────────────────── */
.check-list li,
.simple-list li,
.problem-list li,
.resource-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.6rem;
}

.check-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--status-ok);
  font-weight: 700;
}

.simple-list li::before,
.resource-list li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 1rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
}

.problem-list li::before {
  content: "\2717";
  position: absolute;
  left: 0;
  color: var(--status-danger);
  font-weight: 700;
}

.numbered-list {
  list-style: decimal;
  padding-left: var(--spacing-lg);
}

.numbered-list li {
  padding: 0.3rem 0;
}

.numbered-list li::marker {
  color: var(--color-text-secondary);
  font-weight: 700;
}

.checklist {
  margin: var(--spacing-lg) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.checklist-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.checklist-item:first-child {
  border-top: 0;
}

.checklist-item svg {
  flex: none;
  margin-top: 3px;
  color: var(--status-ok);
}

/* ── Pasos numerados (secuencias reales) ──────────────────────────────── */
.step-number,
.method-letter,
.feature-number,
.benefit-number {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-text-primary);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: 700;
}

.step-number-success {
  border-color: var(--status-ok);
  color: var(--status-ok);
}

.steps-vertical {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.step-item,
.method-step {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--color-border);
}

.step-item:first-child,
.method-step:first-child {
  border-top: 0;
}

.step-content h3,
.method-content h3,
.method-content .as-h4 {
  margin-bottom: var(--spacing-xs);
}

.step-content p,
.method-content p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

.steps-horizontal {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  justify-content: center;
}

.step-item-h {
  flex: 1;
  max-width: 260px;
  text-align: center;
}

.step-item-h .step-number {
  margin: 0 auto var(--spacing-md);
}

.step-item-h p {
  color: var(--color-text-secondary);
}

.step-arrow {
  align-self: center;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
  padding-top: 0;
}

/* ── Lista de características con icono ───────────────────────────────── */
.feature-list {
  display: grid;
  gap: var(--spacing-lg);
}

.feature-item {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.feature-icon,
.template-icon,
.partner-type-icon,
.category-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-seal-soft);
  color: var(--color-seal);
}

.feature-content h3 {
  font-size: 1.15rem;
  margin-bottom: var(--spacing-xs);
}

.feature-content p {
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

/* ── Llamada a la acción dentro de contenido ──────────────────────────── */
.cta-box,
.cta-inline {
  margin: var(--spacing-2xl) 0;
  padding: var(--spacing-2xl);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-text-inverse);
  text-align: center;
}

.cta-box h2,
.cta-box h3,
.cta-inline h2,
.cta-inline h3 {
  color: var(--color-text-inverse);
}

.cta-box p,
.cta-inline p {
  color: var(--color-text-inverse-muted);
}

.cta-box .btn-secondary,
.cta-inline .btn-secondary {
  color: var(--color-text-inverse);
  border-color: var(--color-text-inverse);
}

.cta-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm) var(--spacing-lg);
  margin-top: var(--spacing-lg);
}

/* ── Blog ─────────────────────────────────────────────────────────────── */
.article-meta-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.article-date,
.article-read-time {
  color: var(--color-text-secondary);
}

.article-content {
  max-width: 72ch;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
}

.article-content h2 {
  margin-top: var(--spacing-2xl);
}

.article-content h3 {
  margin-top: var(--spacing-xl);
}

.article-content ul,
.article-content ol {
  padding-left: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.article-content ul {
  list-style: disc;
}

.article-content ol {
  list-style: decimal;
}

.article-content li {
  margin-bottom: var(--spacing-xs);
}

.article-content .feature-list,
.article-content .checklist,
.article-content .method-steps,
.article-content .crimes-list {
  list-style: none;
}

.badge-secondary {
  background: var(--color-gray-100);
  color: var(--color-text-secondary);
}

.badge-info {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.related-articles {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border);
}

.related-article-card,
.category-card,
.guide-card,
.template-card {
  display: block;
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  text-decoration: none;
}

a.related-article-card:hover,
a.category-card:hover {
  border-color: var(--color-text-primary);
}

.related-article-card h4 {
  margin: var(--spacing-sm) 0 var(--spacing-xs);
}

.related-article-card p,
.category-card p,
.guide-card p,
.template-card p {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

.category-icon {
  margin-bottom: var(--spacing-md);
}

.category-count,
.template-format,
.guide-meta {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm) var(--spacing-md);
  margin: var(--spacing-sm) 0;
}

.guide-list {
  display: grid;
  gap: var(--spacing-lg);
}

.guide-badge,
.template-icon {
  margin-bottom: var(--spacing-md);
}

.guide-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.topic-tag {
  padding: 2px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.category-title {
  margin-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-text-primary);
}

.crimes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.crimes-category {
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* ── Glosario ─────────────────────────────────────────────────────────── */
.glossary-section {
  margin-bottom: var(--spacing-2xl);
}

.glossary-letter {
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-text-primary);
}

.glossary-term {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.glossary-term h3 {
  font-size: 1.15rem;
  margin-bottom: var(--spacing-xs);
}

.glossary-term p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

/* ── Formularios de partners ──────────────────────────────────────────── */
.grid-2-form {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
}

.form-card {
  padding: var(--spacing-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.btn[disabled],
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.article-link {
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.form-legal {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.success-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  background: var(--status-ok-bg);
  color: var(--status-ok);
}

.partner-types {
  display: grid;
  gap: var(--spacing-sm);
}

.partner-type-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: 600;
}

.partner-type-link:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.partner-type-icon {
  width: 36px;
  height: 36px;
}

/* ── Valoración positiva / negativa en tablas y comparativas ──────────── */
.positive {
  color: var(--status-ok);
}

.negative {
  color: var(--status-danger);
}

@media (max-width: 768px) {
  .grid-2-form,
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Apilados, cada .form-group ya trae su margen inferior: sin esto, el hueco entre
     «Provincia» y «País» del formulario de partners era el doble que el del resto. */
  .form-row {
    row-gap: 0;
  }

  .steps-horizontal {
    flex-direction: column;
    align-items: center;
  }

  .step-arrow {
    transform: rotate(90deg);
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }
}

/* Precio con prefijo «Desde» (página de planes) y nota bajo las tarjetas */
.pricing-card .price small {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.pricing-note {
  margin-top: var(--spacing-xl);
  text-align: center;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   AVISO DE COOKIES (lo pinta js/consent.js)
   ==========================================================================
   Sale en todas las páginas hasta que el visitante elige. «Aceptar» y
   «Rechazar» llevan las mismas clases a propósito: la AEPD exige que
   rechazar sea tan visible como aceptar. Hasta el 2026-09-28 sus estilos los
   inyectaba main.js, con un color literal; ahora viven aquí, con tokens. */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-banner);
  /* Con letra grande o el móvil apaisado el aviso puede ser más alto que la pantalla:
     que se desplace dentro en vez de dejar el texto fuera. */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  padding: var(--spacing-md) 0;
  padding-bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
  border-top: 1px solid var(--color-on-ink-rule);
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.cookie-banner-text {
  flex: 1 1 28rem;
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-inverse);
}

.cookie-banner-text a,
.cookie-banner-settings {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Mismo ancho para las dos opciones, también cuando se reparten la fila en el móvil. */
.cookie-banner-actions .btn {
  flex: 1 1 7.5rem;
}

/* «Configurar» despliega las casillas dentro del propio aviso (desde el 2026-10-12; antes llevaba a
   la política): es un botón con aspecto de enlace, para no competir con las dos opciones. */
.cookie-banner-settings {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0 var(--spacing-sm);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* La elección actual, cuando el aviso vuelve: desde el pie, o porque la lista de herramientas
   cambió y hay que volver a elegir. */
.cookie-banner-current {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-inverse);
}

/* Las casillas por finalidad, dentro del aviso: toda la fila, bajo los botones. */
.cookie-banner-panel {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-sm) var(--spacing-md);
}

.cookie-banner-panel[hidden] {
  display: none;
}

.cookie-banner .cookie-purposes {
  flex: 1 1 28rem;
  margin: 0;
  border-color: var(--color-on-ink-rule);
}

.cookie-banner .cookie-purposes legend,
.cookie-banner .form-checkbox label {
  color: var(--color-text-inverse);
}

.cookie-banner .form-checkbox input[type="checkbox"] {
  accent-color: var(--color-white);
}

@media (max-width: 600px) {
  .cookie-banner-actions {
    width: 100%;
  }
}

/* Lo elegido, dicho en pantalla tras elegir: es la región role="status" del aviso, la que oyen los
   lectores de pantalla. Se va sola a los 10 s (NOTICE_MS de js/consent.js) y no tapa los clics de
   debajo. Quien rechaza recibe la misma confirmación que quien acepta. */
.cookie-notice {
  position: fixed;
  left: var(--spacing-md);
  right: var(--spacing-md);
  bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-ink);
  color: var(--color-text-inverse);
  border: 1px solid var(--color-on-ink-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
  pointer-events: none;
}

/* With the mobile menu open, the notice sat on top of its last entries (at 320 px it covered 96 px of
   the menu: blind test of 2026-10-12). Its text was already read out by the role="status" region; it
   comes back when the menu closes, if its 10 s are not over. */
body:has(.nav-links.active) .cookie-notice {
  display: none;
}