/* ==========================================================================
   SEO CONSULTORING — Sistema de diseño
   Autor: SEO Consultoring · Estrategia • Datos • Resultados
   Estructura:
     1.  Tokens (color, tipografía, espaciado, sombras)
     2.  Reset y base
     3.  Utilidades y layout
     4.  Cabecera y navegación
     5.  Hero y secciones
     6.  Componentes (cards, botones, badges, tablas, acordeón, tabs…)
     7.  Formularios
     8.  Pie de página
     9.  Responsive
     10. Accesibilidad y preferencias
   ========================================================================== */

/* ----------------------------- 1. TOKENS -------------------------------- */
:root {
  /* Marca — extraídos del logotipo oficial */
  --navy-900: #0a1730;
  --navy-800: #0f203c;
  --navy-700: #16294a;
  --navy-600: #23395d;
  --navy-500: #35507a;
  --navy-400: #5a7499;

  --cyan-600: #1593ab;
  --cyan-500: #1cb2cb;
  --cyan-400: #2dcde4;
  --cyan-300: #6fe0ef;
  --cyan-100: #d6f7fb;

  --ink-900: #0b1220;
  --ink-700: #1e293b;
  --ink-500: #475569;
  --ink-400: #64748b;
  --ink-300: #94a3b8;

  --surface: #ffffff;
  --surface-2: #f6f9fc;
  --surface-3: #eef4f9;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  --success: #0f9d6e;
  --success-bg: #e6f8f2;
  --warn: #c47f0a;
  --warn-bg: #fdf4e3;
  --danger: #d1483c;
  --danger-bg: #fdecea;

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

  /* Escala tipográfica fluida. El mínimo de cada nivel está pensado para una
     pantalla de 320-360 px: por debajo de eso un titular de 2 rem ocupa casi
     toda la línea y rompe la lectura. El máximo se alcanza en escritorio. */
  --fs-display: clamp(1.9rem, 5.1vw, 4rem);
  --fs-h1: clamp(1.72rem, 4vw, 3rem);
  --fs-h2: clamp(1.42rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.14rem, 1.7vw, 1.5rem);
  --fs-h4: clamp(1.02rem, 1.1vw, 1.14rem);
  --fs-h5: clamp(0.95rem, 1vw, 1.02rem);
  --fs-h6: clamp(0.86rem, 0.9vw, 0.92rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.22rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.78rem;

  /* Espaciado y formas */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 88px; --sp-10: 120px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(11, 18, 32, .06);
  --shadow-sm: 0 2px 8px rgba(11, 18, 32, .07);
  --shadow: 0 10px 30px rgba(11, 18, 32, .08);
  --shadow-lg: 0 24px 60px rgba(11, 18, 32, .12);
  --shadow-cyan: 0 12px 34px rgba(28, 178, 203, .28);

  --container: 1180px;
  --container-narrow: 780px;

  --header-h: 74px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------- 2. RESET Y BASE ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.68;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* El menú móvil ya no es un panel flotante con scroll propio: entra en el flujo
   de la página. Por eso NO se bloquea el scroll del body al abrirlo —si se
   bloqueara, un menú más alto que la pantalla quedaría inaccesible—. */
body.nav-open { overflow-x: hidden; }

/* Los seis niveles tienen tamaño propio. Antes h5 y h6 caían al valor del
   navegador (0.83em y 0.67em, unos 13 y 10 px) y quedaban ilegibles en móvil.
   overflow-wrap evita que una palabra larga sin espacios rompa la caja, y
   hyphens reparte las palabras compuestas en pantallas estrechas. */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  color: var(--navy-900);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--fs-h1); line-height: 1.13; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); line-height: 1.2; }
h3 { font-size: var(--fs-h3); font-weight: 650; line-height: 1.28; }
h4 { font-size: var(--fs-h4); font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
h5 { font-size: var(--fs-h5); font-weight: 650; line-height: 1.4; letter-spacing: 0; }
h6 { font-size: var(--fs-h6); font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; color: var(--ink-500); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--navy-700); }

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

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

strong { color: var(--navy-800); font-weight: 650; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

code, kbd {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-3);
  color: var(--navy-700);
  padding: .18em .42em;
  border-radius: 5px;
}

blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--cyan-400);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--navy-700);
  font-size: 1.03rem;
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite { display: block; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--ink-400); font-style: normal; }

::selection { background: var(--cyan-300); color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--cyan-400);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ------------------------ 3. UTILIDADES Y LAYOUT ------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container-narrow { max-width: var(--container-narrow); }
.container-wide { max-width: 1340px; }

/* Texto solo para lectores de pantalla: sigue en el árbol de accesibilidad y en
   el índice de encabezados del documento, pero no ocupa espacio visible. Se usa
   para cerrar los saltos de nivel (h1 → h3) sin alterar el diseño de las
   tarjetas, que es lo que el cliente aprobó. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Secciones: el aire superior es menor que el inferior para que los titulares
   queden más arriba y la sección no se perciba descolgada. */
.section { padding: var(--sp-7) 0 var(--sp-8); }
.section-sm { padding: var(--sp-6) 0 var(--sp-7); }
.section-lg { padding: var(--sp-8) 0 var(--sp-9); }
/* Secciones que van justo después de una banda compacta (p. ej. métricas):
   reducen el aire superior para que el título no quede tan abajo. */
.section-follows-band { padding-top: var(--sp-5); }
/* Secciones cuyo titular debe subir aún más (van justo debajo de otra banda).
   El aire superior se reduce a 16 px y la sección previa recorta el suyo con
   `.section-tight-bottom`, así el hueco total pasa de 80-112 px a 32 px y el
   titular ya no queda descolgado. */
.section-rise { padding-top: var(--sp-4); }
/* La sección inmediatamente anterior a una `.section-rise` recorta su aire
   inferior: entre las dos suman el hueco justo, sin doble espacio. */
.section-tight-bottom { padding-bottom: var(--sp-4); }
/* Punto intermedio entre `.section-rise` (16 px) y el `.section` por defecto
   (48 px). Se usa cuando el titular que sigue a un bloque denso —la biografía
del fundador, por ejemplo— necesita respirar sin devolver el hueco de antes. */
.section-breath { padding-top: var(--sp-6); }
/* Dos bandas tintadas consecutivas se fundirían al acercar sus títulos: esta
   línea fina mantiene visible el corte entre ambas sin devolver el aire. */
.section-tint + .section-tint { border-top: 1px solid var(--line); }
.section-tint { background: var(--surface-2); }
.section-dark {
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-700) 62%, #123055 100%);
  color: #d7e3f2;
}
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark a { color: var(--cyan-300); }
.section-dark a:hover { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-600);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--cyan-400);
  border-radius: 2px;
}
.section-dark .eyebrow { color: var(--cyan-300); }

.lead { font-size: var(--fs-lead); color: var(--ink-500); line-height: 1.66; }
.section-dark .lead { color: #b9cbe0; }

.section-head { max-width: 720px; margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head p { margin-bottom: 0; }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2-1 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.gap-lg { gap: var(--sp-6); }
.gap-xl { gap: var(--sp-7); }

.stack > * + * { margin-top: var(--sp-5); }
.stack-sm > * + * { margin-top: var(--sp-3); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-0 { margin-bottom: 0; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }

.divider-dots { display: flex; gap: var(--sp-2); align-items: center; color: var(--cyan-400); }
.divider-dots::before, .divider-dots::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Animación de aparición */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* -------------------- 4. CABECERA Y NAVEGACIÓN -------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

/* Marca: monograma recortado del logotipo oficial + wordmark en texto */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
/* Logotipo oficial completo (imagotipo + wordmark + eslogan) que aporta el
   cliente en 1024x576. El arte ocupa aproximadamente el 5%-95 % del ancho y el
   33%-60 % del alto, con mucho blanco alrededor, así que se muestra recortado a
   ese lienzo mediante background-size/position (el fondo es blanco puro y se
   funde con la cabecera). */
.brand-mark {
  width: 230px;
  height: 33px;
  flex: none;
  /* Logotipo horizontal con el fondo ya recortado (PNG transparente), encuadrado
     a la zona del arte para que no quede aire alrededor. */
  background-image: url("../images/logo-seo-consultoring-transparente.png");
  background-repeat: no-repeat;
  background-size: 267px 149px;
  background-position: -18.4px -52.6px;
}
/* El logotipo ya contiene el eslogan, así que el texto de marca se oculta. */
.brand-text { display: none; }
.brand-name {
  font-size: 1.06rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--navy-900);
  white-space: nowrap;
  padding-bottom: 5px;
  /* Línea divisoria en azul oscuro de la paleta, entre el nombre y el eslogan */
  border-bottom: 2px solid var(--navy-800);
}
.brand-name em { font-style: normal; color: var(--cyan-500); }
/* El eslogan se ajusta al ancho del nombre: tracking y cuerpo reducidos para
   que nunca sobresalga por fuera de "SEO CONSULTORING". */
.brand-tag {
  font-size: .53rem;
  font-weight: 650;
  letter-spacing: .065em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: 5px;
  white-space: nowrap;
}

.primary-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list > li { margin: 0; position: relative; }
.nav-list a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: .925rem;
  font-weight: 550;
  color: var(--ink-700);
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-list a:hover { background: var(--surface-3); color: var(--navy-900); }
.nav-list a.is-active { color: var(--navy-900); }
.nav-list a.is-active::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--cyan-400);
}

/* CTA de auditoría. Vive a la derecha del todo en escritorio y, en móvil y
   tableta, se coloca ANTES del botón de menú (order) para quedar a su
   izquierda. Sin icono: el botón es solo texto en todos los tamaños. */
.header-cta { display: flex; align-items: center; gap: var(--sp-3); flex: none; order: 3; }
.header-cta .btn { display: inline-flex; }
/* En móvil el botón conserva su texto (al retirar el icono, ocultarlo habría
   dejado un botón vacío), pero se reduce y se adapta al ancho disponible.
   IMPORTANTE: las reglas de una sola fila viven al FINAL de la hoja, en el
   bloque `max-width: 600px` tras el de 1024 px. Si se declaran aquí, el
   `flex-wrap: wrap` del bloque de 1024 px las sobrescribe por orden de
   aparición y el asa vuelve a saltar a una segunda fila. */
/* El icono y el número de contacto se retiraron de la cabecera por decisión
   del cliente. El contacto sigue disponible en el pie de página. */

/* Menú desplegable de escritorio */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-3);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown li { margin: 0; }
.dropdown a {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  font-size: .89rem;
  line-height: 1.35;
  color: var(--ink-700);
}
.dropdown a:hover { background: var(--surface-2); color: var(--navy-900); }
.dropdown a span { display: block; font-size: .76rem; color: var(--ink-400); margin-top: 3px; font-weight: 450; }

/* El desplegable de Servicios tiene nueve entradas. En una sola columna
   quedaría más alto que la ventana en portátiles de 768 px de alto, así que
   se reparte en dos columnas. La regla vive en `min-width: 1025px` y por eso
   no alcanza al menú móvil, que se resuelve en el bloque `max-width: 1024px`
   con `.has-dropdown.is-open > .dropdown { display: block }`: allí el panel
   se lee en una sola columna, como el resto de submenús. */
@media (min-width: 1025px) {
  .dropdown-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
    width: 620px;
    max-width: calc(100vw - 48px);
  }
  /* Puente de hover. El panel se dibuja 10 px más abajo que el enlace
     (`top: calc(100% + 10px)`), así que entre ambos queda una franja de aire.
     Al bajar el ratón, el cursor la atraviesa, el `:hover` del `li` deja de
     cumplirse y el desplegable se cierra antes de llegar a pulsar nada.
     El puente es un `::before` del propio panel: ocupa exactamente esos 10 px
     por encima de su borde superior, de modo que el puntero nunca sale del
     submenú. Al ser hijo del panel cubre todo su ancho, no solo el del enlace,
     que es lo que hacía falta al moverse en diagonal hacia las entradas de la
     segunda columna. Es transparente y no se ve. */
  .dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 10px;
  }
}

/* Botón que despliega el submenú en móvil. js/main.js lo crea en todas las
   páginas, así que en escritorio debe quedar oculto: solo existe dentro del
   panel móvil, donde se reactiva con display:inline-flex en su media query. */
.nav-sub-toggle { display: none; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 19px; height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  position: relative;
  transition: background .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px; height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform .25s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------- 5. HERO Y SECCIONES -------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 460px at 88% -8%, rgba(45, 205, 228, .16), transparent 62%),
    radial-gradient(700px 420px at 4% 100%, rgba(53, 80, 122, .14), transparent 60%),
    linear-gradient(168deg, #ffffff 0%, var(--surface-2) 100%);
  /* Aire superior muy contenido: el titular sube y deja de verse descolgado */
  padding: 30px 0 var(--sp-6);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--sp-8);
  align-items: center;
}
.hero h1 { font-size: var(--fs-display); letter-spacing: -.03em; line-height: 1.06; }
.hero h1 .accent {
  background: linear-gradient(96deg, var(--cyan-600), var(--cyan-400) 55%, var(--cyan-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { font-size: var(--fs-lead); color: var(--ink-500); max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  list-style: none;
  padding-left: 0;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  font-weight: 550;
  color: var(--ink-500);
  margin: 0;
}
.hero-trust svg { width: 17px; height: 17px; color: var(--success); flex: none; }

.hero-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
}
.hero-panel h2 { font-size: clamp(1.15rem, 1.5vw, 1.3rem); margin-bottom: var(--sp-2); line-height: 1.3; }
.hero-panel > p { font-size: var(--fs-small); color: var(--ink-400); margin-bottom: var(--sp-5); }

.pipeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pipeline li {
  position: relative;
  counter-increment: step;
  padding: 0 0 var(--sp-5) 46px;
  margin: 0;
}
.pipeline li:last-child { padding-bottom: 0; }
.pipeline li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan-100);
  color: var(--cyan-600);
  font-size: .82rem;
  font-weight: 750;
}
.pipeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14.5px; top: 34px; bottom: 8px;
  width: 1px;
  background: linear-gradient(var(--cyan-300), var(--line));
}
.pipeline strong { display: block; color: var(--navy-800); font-size: .96rem; font-weight: 650; }
.pipeline span { font-size: var(--fs-small); color: var(--ink-400); line-height: 1.5; display: block; }

/* Banda de métricas */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric { background: #fff; padding: var(--sp-5); text-align: center; }
.metric-value {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric-value .unit { color: var(--cyan-500); font-size: .62em; margin-left: 2px; }
.metric-label { font-size: var(--fs-small); color: var(--ink-400); margin-top: 9px; line-height: 1.45; }
.metric-source { font-size: var(--fs-xs); color: var(--ink-300); margin-top: 4px; }

/* Barra CTA */
.cta-band {
  background: linear-gradient(135deg, var(--navy-900), var(--navy-700) 55%, #14406e);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  color: #cfe0f2;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: auto -12% -60% auto;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(45, 205, 228, .3), transparent 68%);
}
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); }
.cta-band p { color: #bdd0e6; max-width: 62ch; }
.cta-band-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) auto; gap: var(--sp-6); align-items: center; }

/* Pila de tarjetas (asides y columnas laterales): las tarjetas se adhieren
   unas a otras y el bloque no se estira al alto de la columna vecina, con lo
   que nunca desborda ni tapa el pie de página. */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-self: start;
}
.card-stack > .card {
  height: auto;
  border-radius: 0;
  border-bottom-width: 0;
  border-left: 3px solid var(--cyan-100);
  /* En una pila adherida se sustituye el realce al pasar el ratón por un cambio
     de borde: evita que una tarjeta parezca flotar sobre sus vecinas. */
  transform: none;
}
.card-stack > .card:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
  border-left-color: var(--cyan-400);
}
/* Solo el primer y el último bloque llevan esquinas redondeadas y borde
   inferior: los del medio quedan "cosidos" entre sí para que la columna se
   perciba como un único bloque adherido. */
.card-stack > .card:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card-stack > .card:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
  border-bottom-width: 1px;
}

/* --------------------------- 6. COMPONENTES ----------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* Necesario para que la tarjeta completa sea clicable: el enlace principal
     extiende su área de pulsación sobre todo el contenedor. */
  position: relative;
  padding: var(--sp-5);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--cyan-100); }
.card h3 { margin-bottom: var(--sp-2); font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.3; }
.card p { font-size: .93rem; color: var(--ink-500); }
.card .card-foot { margin-top: auto; padding-top: var(--sp-4); }

/* ------------------------------------------------------------------
   TARJETA COMPLETAMENTE CLICABLE (patrón «stretched link»)
   El enlace principal de la tarjeta proyecta un pseudo-elemento invisible
   que cubre todo el contenedor. Así se puede pulsar en cualquier punto de
   la tarjeta —la imagen, el titular o el texto— y no solo en «Ver servicio».
   Solo se aplica al ÚLTIMO enlace del pie para no tapar un segundo enlace
   real que pudiera existir.
   ------------------------------------------------------------------ */
.post-card { position: relative; }
.card .card-foot > a:last-child::before,
.post-card .card-foot > a:last-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Indicación de foco sobre la tarjeta completa al navegar con teclado. */
.card:focus-within,
.post-card:focus-within { border-color: var(--cyan-400); }

/* Imagen de servicio en la cabecera de la tarjeta: sustituye al icono. Los
   márgenes negativos la pegan a los bordes y se redondean solo las esquinas
   superiores para que quede encajada dentro del card. */
.card-cover {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--surface-3);
}
.card-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Imagen de portada de la tarjeta: va AL PIE, debajo de la descripción y del
   llamado a la acción. Los márgenes negativos la pegan a los bordes del card. */
.card-media {
  margin: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  background: var(--surface-3);
}
.card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ==================== ÍNDICE DEL BLOG (LISTADO EDITORIAL) ===============
   Sustituye la pila de tarjetas a ancho completo por un listado de revista:
   un artículo destacado en dos columnas y una rejilla de tarjetas compactas.
   La portada de cada artículo acompaña al texto en lugar de dominarlo, así
   la página se recorre de un vistazo sin scroll interminable.
   ====================================================================== */

/* Separador con el titular de la sección y el recuento de publicaciones. */
.blog-rule {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.blog-rule h2 {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.blog-rule span { font-size: var(--fs-xs); color: var(--ink-400); }

/* --- Artículo destacado: portada a la izquierda, texto a la derecha --- */
.blog-featured {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-7);
  transition: border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.blog-featured:hover { border-color: var(--cyan-100); box-shadow: var(--shadow); }
.blog-featured-cover {
  position: relative;
  margin: 0;
  min-height: 272px;
  background: var(--surface-3);
}
.blog-featured-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-featured-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-7);
}
.blog-featured h3 {
  margin: 0;
  font-size: clamp(1.32rem, 1.9vw, 1.7rem);
  line-height: 1.24;
  letter-spacing: -.015em;
}
.blog-featured p { margin: 0; font-size: .96rem; color: var(--ink-500); }

/* --- Fila de metadatos compartida por las tarjetas --- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-400);
}
.post-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { width: 14px; height: 14px; color: var(--cyan-500); }

/* --- Rejilla de artículos: dos columnas de tarjetas compactas --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--cyan-100); }
.post-card-cover { margin: 0; aspect-ratio: 16 / 9; background: var(--surface-3); overflow: hidden; }
.post-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.post-card h3 { margin: 0; font-size: 1.04rem; line-height: 1.35; letter-spacing: -.01em; }
.post-card p { margin: 0; font-size: .885rem; color: var(--ink-500); }
.post-card .card-foot { margin-top: auto; padding-top: var(--sp-2); }
.blog-featured h3 a,
.post-card h3 a { color: var(--navy-800); }
.blog-featured h3 a:hover,
.post-card h3 a:hover { color: var(--cyan-600); }

@media (max-width: 1024px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-cover { min-height: 0; aspect-ratio: 16 / 9; }
  .blog-featured-cover img { position: static; height: 100%; }
  .blog-featured-body { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
}

@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured-body { padding: var(--sp-5); gap: var(--sp-3); }
  .blog-featured { margin-bottom: var(--sp-6); }
}

/* ======================= ARTÍCULO EDITORIAL (BLOG) ======================
   Entrada de blog con estructura de revista profesional: barra de progreso
   de lectura, cabecera con antetítulo, entradilla y firma, banner a todo el
   ancho, e índice lateral pegajoso con sección activa.
   ====================================================================== */

/* Barra de progreso de lectura: se fija arriba y crece con el scroll. */
.reading-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cyan-600), var(--cyan-400) 60%, var(--cyan-300));
  border-radius: 0 2px 2px 0;
  transition: width .1s linear;
}

/* Cabecera del artículo */
.article-header {
  position: relative;
  background:
    radial-gradient(760px 340px at 88% -12%, rgba(45, 205, 228, .17), transparent 64%),
    linear-gradient(170deg, var(--surface-2), #fff);
  padding: var(--sp-5) 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.article-header .eyebrow { margin-bottom: var(--sp-4); }
.article-header h1 {
  font-size: clamp(1.95rem, 3.7vw, 2.95rem);
  line-height: 1.14;
  max-width: 25ch;
  margin-bottom: var(--sp-5);
}
/* Entradilla: el párrafo de apertura, con más cuerpo y aire que el texto. */
.article-standfirst {
  font-size: clamp(1.06rem, 1.42vw, 1.21rem);
  line-height: 1.62;
  color: var(--ink-500);
  max-width: 64ch;
  margin-bottom: var(--sp-6);
}
.article-standfirst strong { color: var(--navy-800); font-weight: 650; }

/* Firma del artículo: quién firma y desde cuándo está publicado. */
.article-byline {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.byline-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-600));
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.byline-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.byline-text strong { font-size: .93rem; color: var(--navy-800); }
.byline-text span { font-size: var(--fs-xs); color: var(--ink-400); }
.byline-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }

/* Banner del artículo, a todo el ancho del contenedor */
.article-hero { margin: 0; padding: var(--sp-6) 0 0; }
.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.article-hero figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  text-align: center;
}

/* Botón de volver arriba, dentro del índice */
.toc-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-400);
}
.toc-top:hover { color: var(--cyan-600); }
.toc-top svg { width: 14px; height: 14px; }

/* Bloque de cierre "seguir leyendo": se convierte en una rejilla de enlaces. */
.prose .read-next { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.prose .read-next li { margin: 0; }
.prose .read-next a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  font-size: .95rem;
  font-weight: 550;
  color: var(--navy-800);
  transition: border-color .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
}
.prose .read-next a:hover {
  border-color: var(--cyan-400);
  background: #fff;
  transform: translateX(3px);
}

/* Icono de tarjeta. Se usa en el bloque "Método" y en tarjetas sin portada.
   Diseño más contenido y profesional: cuadro de 44 px con placa degradada,
   anillo interior fino y sombra suave, para que el trazo destaque sin
   resultar tosco. */
.card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(150deg, #fff 0%, var(--cyan-100) 100%);
  color: var(--cyan-600);
  border: 1px solid rgba(28, 178, 203, .18);
  box-shadow: 0 1px 2px rgba(11, 18, 32, .05), inset 0 1px 0 #fff;
  margin-bottom: var(--sp-4);
  flex: none;
}
.card-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card-icon.is-navy {
  background: linear-gradient(150deg, #fff 0%, #e8eef7 100%);
  color: var(--navy-600);
  border-color: rgba(15, 32, 60, .14);
}

.section-dark .card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
}
.section-dark .card p { color: #b9cbe0; }
.section-dark .card-icon { background: rgba(45, 205, 228, .16); color: var(--cyan-300); }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-small);
  font-weight: 650;
  color: var(--cyan-600);
}
.card-link::after { content: "→"; transition: transform .22s var(--ease); }
.card:hover .card-link::after { transform: translateX(4px); }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: .94rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  text-align: center;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary {
  background: linear-gradient(120deg, var(--cyan-600), var(--cyan-400));
  color: #fff;
  box-shadow: var(--shadow-cyan);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 40px rgba(28, 178, 203, .36); }
.btn-dark { background: var(--navy-900); color: #fff; }
.btn-dark:hover { background: var(--navy-700); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--navy-800); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--cyan-400); color: var(--navy-900); transform: translateY(-2px); }
.btn-light { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-light:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: .86rem; }
.btn-lg { padding: 16px 30px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 650;
  font-size: .93rem;
}
.link-arrow::after { content: "→"; transition: transform .22s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Badges y pills */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--surface-3);
  color: var(--navy-600);
}
.badge-good { background: var(--success-bg); color: var(--success); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--danger-bg); color: var(--danger); }
.badge-cyan { background: var(--cyan-100); color: var(--cyan-600); }
.badge-outline { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-500); }
.section-dark .badge { background: rgba(255, 255, 255, .12); color: #dbe8f6; }

.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Listas con check */
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: var(--sp-3);
  font-size: .94rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--success-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f9d6e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px 11px no-repeat;
}
.check-list.is-navy li::before {
  background-color: #e8eef7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323395d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.check-list.is-cyan li::before { background-color: var(--cyan-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231593ab' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.section-dark .check-list li::before { background-color: rgba(255,255,255,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fe0ef' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.section-dark .check-list li { color: #c2d3e6; }

/* Listas con cruz */
.x-list { list-style: none; padding: 0; margin: 0; }
.x-list li { position: relative; padding-left: 30px; margin-bottom: var(--sp-3); font-size: .94rem; }
.x-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--danger-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1483c' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px 10px no-repeat;
}

/* Tablas */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  -webkit-overflow-scrolling: touch;
  /* Sin esto, una tabla con min-width ensancha su columna de grid (min-width
     por defecto es auto) y arrastra a toda la página: el contenido se sale
     del viewport en lugar de desplazarse dentro de su caja. */
  max-width: 100%;
  min-width: 0;
}
/* Las cajas de grid y flex no pueden encogerse por debajo de su contenido a
   menos que se les diga. Es lo que hacía que el índice lateral y las tablas
   de 6 columnas empujaran el ancho del documento por encima del viewport. */
.grid > *, .case-grid > *, .split-2 > *, .metrics > *, .container > * { min-width: 0; }
table.data-table { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 640px; }
.data-table caption {
  text-align: left;
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: var(--fs-small);
  color: var(--ink-400);
}
.data-table th, .data-table td {
  padding: 12px var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.data-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  font-size: var(--fs-xs);
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--navy-600);
  white-space: nowrap;
  z-index: 1;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #fbfdff; }
.data-table td strong { color: var(--navy-800); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table td.wrap { white-space: normal; min-width: 240px; }

.bar-cell { display: flex; align-items: center; gap: 9px; min-width: 108px; }
.bar-track { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cyan-600), var(--cyan-400)); }
.bar-fill.is-navy { background: linear-gradient(90deg, var(--navy-600), var(--navy-400)); }
.bar-fill.is-warn { background: linear-gradient(90deg, #e0a52a, #f0c14b); }
.bar-fill.is-danger { background: linear-gradient(90deg, #c0392b, #e05b4d); }

/* Acordeón */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.accordion + .accordion { margin-top: var(--sp-3); }
.accordion-item + .accordion-item { border-top: 1px solid var(--line); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 620;
  color: var(--navy-900);
  line-height: 1.45;
  transition: background .2s var(--ease);
}
.accordion-trigger:hover { background: var(--surface-2); }
.accordion-trigger::after {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231593ab' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .28s var(--ease);
}
.accordion-trigger[aria-expanded="true"]::after { transform: rotate(135deg); }
.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .34s var(--ease);
}
.accordion-panel-inner { padding: 0 var(--sp-5) var(--sp-5); font-size: .94rem; color: var(--ink-500); }
.accordion-panel-inner > *:last-child { margin-bottom: 0; }

/* Pestañas */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
  padding: 0;
  list-style: none;
}
.tab-btn {
  padding: 11px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 620;
  color: var(--ink-400);
  transition: color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--navy-700); }
.tab-btn.is-active { color: var(--navy-900); border-bottom-color: var(--cyan-400); }
.tab-panel { animation: fadeUp .4s var(--ease); }
.tab-panel[hidden] { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Medidor de auditoría */
.gauge {
  height: 10px;
  border-radius: 5px;
  background: var(--surface-3);
  overflow: hidden;
  margin: var(--sp-3) 0 var(--sp-4);
}
.gauge-fill { height: 100%; width: 0; border-radius: 5px; transition: width .5s var(--ease), background .4s var(--ease); background: var(--ink-300); }
.gauge-fill.is-good { background: linear-gradient(90deg, #0f9d6e, #34c48f); }
.gauge-fill.is-warn { background: linear-gradient(90deg, #c47f0a, #f0b93f); }
.gauge-fill.is-bad { background: linear-gradient(90deg, #d1483c, #ef8276); }

/* Fichas de datos */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); }
.stat {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.stat-value { font-size: 1.85rem; font-weight: 800; color: var(--navy-900); letter-spacing: -.03em; line-height: 1.05; }
.stat-value.is-cyan { color: var(--cyan-500); }
.stat-label { font-size: var(--fs-small); color: var(--ink-400); margin-top: 7px; line-height: 1.45; }

/* Bloques de código / prompts */
.prompt-box {
  position: relative;
  background: var(--navy-900);
  border-radius: var(--radius);
  padding: var(--sp-5);
  color: #d5e2f0;
  font-family: var(--font-mono);
  font-size: .83rem;
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-x: auto;
}
.prompt-box strong { color: var(--cyan-300); font-weight: 600; }
.copy-btn {
  position: absolute;
  top: 12px; right: 12px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #e6eff9;
  font-family: var(--font-sans);
  font-size: .74rem;
  font-weight: 650;
  cursor: pointer;
  transition: background .2s var(--ease);
}
.copy-btn:hover { background: rgba(255, 255, 255, .24); }

/* Migas de pan */
.breadcrumbs { font-size: var(--fs-xs); color: var(--ink-400); padding: var(--sp-4) 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; }
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 7px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--line-strong); }
.breadcrumbs a { color: var(--ink-400); }
.breadcrumbs a:hover { color: var(--cyan-600); }

/* Cabecera de página interna */
.page-hero {
  background:
    radial-gradient(700px 320px at 92% 0%, rgba(45, 205, 228, .15), transparent 65%),
    linear-gradient(170deg, var(--surface-2), #fff);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin-bottom: var(--sp-4); max-width: 24ch; }
.page-hero .lead { max-width: 68ch; }

/* Nota de fuente / disclaimer */
.source-note {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.section-dark .source-note { color: #93a9c2; border-top-color: rgba(255,255,255,.16); }

/* Caja de aviso */
.callout {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan-400);
}
.callout svg { width: 20px; height: 20px; color: var(--cyan-600); flex: none; margin-top: 3px; }
.callout p { font-size: .92rem; margin: 0; }
.callout strong { display: block; margin-bottom: 3px; }

/* Índice lateral (artículos) */
.toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  font-size: var(--fs-small);
  border-left: 2px solid var(--line);
  padding-left: var(--sp-4);
}
.toc h2 { font-size: 0.86rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-3); line-height: 1.4; }
.toc ol { list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li { margin-bottom: 9px; counter-increment: toc; }
.toc a { color: var(--ink-500); display: block; line-height: 1.4; }
.toc a::before { content: counter(toc) ". "; color: var(--ink-300); }
.toc a:hover, .toc a.is-active { color: var(--cyan-600); }
/* Sección que se está leyendo: el marcador se engrosa y se colorea. */
.toc a.is-active { font-weight: 650; }
.toc a.is-active::before { color: var(--cyan-600); }

/* Contenido de artículo */
.prose { font-size: 1.05rem; line-height: 1.72; }
.prose h2 {
  margin-top: var(--sp-8);
  padding-top: var(--sp-2);
  font-size: clamp(1.34rem, 2vw, 1.62rem);
  letter-spacing: -.015em;
}
.prose h3 { margin-top: var(--sp-6); font-size: clamp(1.06rem, 1.3vw, 1.18rem); line-height: 1.32; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { font-size: 1.03rem; }
.prose > *:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: var(--sp-5) 0; }
.prose th, .prose td { padding: 11px 13px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--surface-2); font-weight: 700; color: var(--navy-800); }
/* Párrafo de apertura tras un encabezado: se destaca la primera frase. */
.prose h2 + p::first-line { color: var(--ink-700); }

/* Ilustración de contenido. Da soporte visual a las páginas que no tienen
   portada propia y cumple el criterio de Rank Math «añade una imagen con tu
   palabra clave objetivo como texto alternativo». Funciona dentro y fuera de
   .prose, porque algunas páginas no usan el contenedor de texto largo. */
.page-figure { margin: var(--sp-6) 0; }
.page-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.page-figure figcaption { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-400); }

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  font-size: var(--fs-small);
  color: var(--ink-400);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.lesson-meta span { display: flex; align-items: center; gap: 7px; }
.lesson-meta svg { width: 15px; height: 15px; color: var(--cyan-500); }

.lesson-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}
.lesson-nav a {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.lesson-nav a:hover { border-color: var(--cyan-400); transform: translateY(-2px); }
.lesson-nav small { display: block; font-size: var(--fs-xs); color: var(--ink-400); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }
.lesson-nav strong { color: var(--navy-800); font-size: .95rem; font-weight: 650; line-height: 1.4; }
.lesson-nav .is-next { text-align: right; }

/* Cuadrícula de lecciones */
.lesson-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s var(--ease);
}
.lesson-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--cyan-100); }
.lesson-num {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--navy-900);
  color: #fff;
  font-weight: 750;
  font-size: .88rem;
}
.lesson-card.is-aeo .lesson-num { background: linear-gradient(135deg, var(--cyan-600), var(--cyan-400)); }
.lesson-card h3 { font-size: 1rem; margin-bottom: 5px; }
.lesson-card p { font-size: var(--fs-small); color: var(--ink-400); margin-bottom: var(--sp-2); }
.lesson-card .meta { font-size: var(--fs-xs); color: var(--ink-300); }

/* Ficha de servicio */
.service-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--line);
}
.service-block:last-of-type { border-bottom: 0; }
.service-block h2 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.service-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--cyan-500);
  margin-bottom: var(--sp-3);
}

/* Muro de entregables */
.deliverable {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: .89rem;
}
.deliverable svg { width: 18px; height: 18px; color: var(--cyan-500); flex: none; margin-top: 2px; }
.deliverable strong { display: block; color: var(--navy-800); font-size: .93rem; margin-bottom: 2px; }
.deliverable span { color: var(--ink-400); font-size: var(--fs-small); line-height: 1.45; }

/* --------------------- 6.B BLOQUE FUNDADOR (AUTORIDAD) ------------------ */
/* Autoría y credenciales del fundador. Se usa en sobre.html (versión completa,
   con línea de tiempo) y en index.html (versión compacta con `is-compact`).
   El retrato se recorta a cuadrado con `object-fit`, así que puede sustituirse
   la foto por otra sin tocar el CSS. `aspect-ratio` reserva el hueco antes de
   que llegue la imagen para que no haya CLS. */
.founder {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}
/* En la portada el retrato manda: ocupa 320 px y se alinea arriba con el
   texto. Antes iba a 190 px y centrado verticalmente, y el bloque se leía
   como una ficha secundaria en vez de como una pieza editorial. */
.founder.is-compact {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}
/* Columna izquierda. Agrupa retrato y galería de certificados para que en
   móvil se apilen juntos y la galería pueda ir a ancho completo aunque la
   foto esté limitada. */
.founder-col { min-width: 0; }
.founder-media { margin: 0; }
.founder-portrait {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-3);
  box-shadow: var(--shadow);
}
.founder-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Encuadre alto: el rostro queda en el tercio superior del cuadrado. */
  object-position: 50% 26%;
}
.founder-caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  line-height: 1.5;
}
.founder-caption strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--navy-800);
}
/* Redes del fundador, bajo el pie de foto. Son enlaces reales (no botones),
   así que llevan `aria-label` con el nombre de la red y `rel="me"`: ese valor
   declara el perfil como identidad propia de la persona y es la señal que los
   motores de respuesta usan para consolidar la entidad. */
.founder-social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--sp-3) 0 0;
  padding-left: 0;
}
.founder-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy-700);
  transition: color .2s var(--ease), border-color .2s var(--ease),
              background .2s var(--ease), transform .2s var(--ease);
}
.founder-social a:hover {
  color: #fff;
  background: var(--cyan-600);
  border-color: transparent;
  transform: translateY(-2px);
}
.founder-social a:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
.founder-social svg { width: 18px; height: 18px; }
/* En móvil los iconos crecen a 42 px: es el tamaño mínimo cómodo para el dedo. */
@media (max-width: 760px) {
  .founder-social a { width: 42px; height: 42px; }
  .founder-social svg { width: 19px; height: 19px; }
}
.founder-role {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-600);
}
.founder-body > :first-child { margin-top: 0; }
.founder-body h2 { margin-bottom: var(--sp-3); }
/* El subtítulo que abre la línea de trayectoria necesita aire por encima: con
   `--sp-6` quedaba pegado al último párrafo de la biografía y parecía parte
   del mismo bloque. */
.founder-body h3 { margin: var(--sp-7) 0 var(--sp-3); }
.founder-body p { margin: 0 0 var(--sp-4); color: var(--ink-500); line-height: 1.68; }
.founder-body p:last-child { margin-bottom: 0; }

/* Es un <ul> para que el lector de pantalla anuncie "lista de 3 elementos";
   hay que anular el `padding-left` que `ul, ol` recibe en el reset global, o
   las píldoras quedan desplazadas 18 px respecto al texto. */
.founder-creds {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding-left: 0;
}
/* Cierre del bloque. La acción principal es contactar; la biografía completa
   queda como enlace secundario para quien quiera verificar credenciales antes
   de escribir. Ese orden importa: el objetivo de la sección es que el lector
   dé el paso, no que se vaya a otra página a seguir leyendo. */
.founder-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin: 0;
}
.founder-cta-alt {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.founder-cta-alt:hover { color: var(--cyan-600); border-color: var(--cyan-400); }
.founder-cta-alt:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 3px; }

/* ------------- 6.C GALERÍA DE CERTIFICADOS (BAJO EL RETRATO) ------------ */
.cert-block { margin-top: var(--sp-5); }
.cert-block-title,
.cases-block-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy-800);
}
.cert-block-title span,
.cases-block-title span {
  flex: none;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-400);
}
.cert-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.cert-gallery > li { margin: 0; }
.cert-thumb {
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cert-thumb:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--cyan-300);
}
.cert-thumb:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
/* Proporción cercana a la de un certificado apaisado (1,41): así apenas se
   recorta nada y la miniatura sigue siendo reconocible como documento. */
.cert-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.42 / 1;
  object-fit: cover;
  object-position: 50% 40%;
  background: var(--surface-3);
}
.cert-thumb-label {
  display: block;
  padding: 5px 7px 6px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-500);
}
.cert-thumb-year {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--cyan-600);
}

/* ------------- 6.C.2 ÍNDICE DE CASOS (BAJO LOS CERTIFICADOS) ------------ */
/* Comparte la columna izquierda con el retrato y la galería: rellena el hueco
   que quedaba hasta el final de la línea de trayectoria y sitúa la prueba de
   trabajo junto a la prueba de formación, que es lo que un motor de respuesta
   cruza para decidir si la fuente es citable. */
.cases-block { margin-top: var(--sp-5); }
.cases-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.case-mini {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.case-mini:last-child { border-bottom: 0; }
.case-mini:hover { border-color: var(--cyan-300); }
.case-mini-num {
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cyan-600);
}
.case-mini-title {
  display: block;
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--navy-800);
  transition: color .2s var(--ease);
}
.case-mini:hover .case-mini-title { color: var(--cyan-600); }
.case-mini-meta {
  display: block;
  margin-top: 2px;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--ink-400);
}
.cases-block-foot {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
}

/* ---------------- 6.D CAJA DE LUZ DE CERTIFICADOS ----------------------- */
/* Se crea desde js/certificados.js. `z-index: 400` queda por encima del
   botón de volver arriba (150) y del enlace de salto (200). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: rgba(5, 12, 24, .92);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox-figure { margin: 0; max-width: min(1000px, 100%); text-align: center; }
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.lightbox-caption {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: #c9d8e8;
}
.lightbox-caption strong { display: block; color: #fff; font-size: .98rem; font-weight: 700; }
.lightbox-issuer { display: block; }
.lightbox-issuer[hidden] { display: none; }
.lightbox-count {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--cyan-300);
}
.lb-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(11, 18, 32, .74);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lb-btn:hover { background: var(--cyan-600); border-color: transparent; }
.lb-btn:focus-visible { outline: 2px solid var(--cyan-300); outline-offset: 2px; }
.lb-close { top: var(--sp-4); right: var(--sp-4); }
.lb-prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
/* Bloqueo del scroll de fondo mientras la caja de luz está abierta. */
html.is-locked, html.is-locked body { overflow: hidden; }

/* Línea de tiempo. El punto se pinta con `--tl-dot-bg` para poder tapar la
   línea vertical que pasa por detrás: en una sección blanca el color es
   `--surface`, y sobre `section-tint` se cambia a `--surface-2`. Sin ese
   cambio el punto quedaría con un halo del color equivocado. */
.timeline {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  position: relative;
  --tl-dot-bg: var(--surface);
}
.section-tint .timeline { --tl-dot-bg: var(--surface-2); }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: .6em;
  bottom: .6em;
  width: 2px;
  background: linear-gradient(180deg, var(--cyan-400), var(--line-strong));
}
.timeline > li {
  position: relative;
  padding: 0 0 var(--sp-5) var(--sp-7);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .3em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--tl-dot-bg);
  border: 3px solid var(--cyan-500);
}
.timeline-when {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan-600);
}
.timeline-title {
  margin: 0 0 2px;
  font-size: var(--fs-h5);
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-900);
}
.timeline-issuer {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-500);
}
.timeline-meta {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  font-family: var(--font-mono);
}

/* ---------------------------- 7. FORMULARIOS ---------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.is-full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-small); font-weight: 620; color: var(--navy-800); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-400); font-weight: 450; }
.field .req { color: var(--cyan-600); }

.input, .select, .textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: .94rem;
  color: var(--ink-700);
  background: #fff;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3.5px rgba(45, 205, 228, .16);
}
.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; padding-right: 40px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-300); }

.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); }
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: var(--sp-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-size: .89rem;
  line-height: 1.5;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.check-item:hover { border-color: var(--cyan-300); }
.check-item input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cyan-600); cursor: pointer; }
.check-item:has(input:checked) { border-color: var(--cyan-400); background: #f5fdff; }
.check-item span { color: var(--ink-700); }

.form-status {
  margin-top: var(--sp-4);
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: .89rem;
  font-weight: 550;
  background: var(--surface-3);
  color: var(--navy-700);
  border-left: 3px solid var(--ink-300);
}
.form-status.is-success { background: var(--success-bg); color: #0b6e4e; border-left-color: var(--success); }
.form-status.is-error { background: var(--danger-bg); color: #9c2f25; border-left-color: var(--danger); }
.form-status.is-loading { background: var(--cyan-100); color: var(--cyan-600); border-left-color: var(--cyan-400); }

.form-note { font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--sp-4); }

/* Panel de resultados del audit */
.audit-result { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); }
.audit-score { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; color: var(--navy-900); line-height: 1; font-variant-numeric: tabular-nums; }
.audit-gaps { list-style: none; padding: 0; margin: var(--sp-4) 0 0; }
.audit-gaps li {
  position: relative;
  padding-left: 26px;
  font-size: .89rem;
  margin-bottom: var(--sp-3);
  color: var(--ink-500);
}
.audit-gaps li::before {
  content: "";
  position: absolute;
  left: 0; top: .48em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--warn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c47f0a' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='16.5' r='.6' fill='%23c47f0a'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* --------------------------- 8. PIE DE PÁGINA --------------------------- */
.site-footer {
  background: var(--navy-900);
  color: #98acc4;
  padding: var(--sp-8) 0 var(--sp-5);
  font-size: .9rem;
}
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-7); }
/* Logotipo del pie: lockup apilado (vertical) aportado por el cliente sobre
   una placa blanca redondeada. El archivo original trae fondo blanco; al
   asentarlo sobre una placa del mismo blanco, ese fondo se vuelve invisible y
   solo se lee el arte, sin ningún recuadro. `multiply` (blanco × blanco =
   blanco) garantiza el fundido incluso si el JPEG trae un blanco ligeramente
   sucio; y si el navegador no aplicase la mezcla, la placa blanca seguiría
   haciendo invisible el borde. La placa es necesaria porque la tipografía del
   lockup es azul marino: sin ella sería ilegible sobre el azul marino del pie. */
.footer-brand-card {
  display: inline-block;
  width: 232px;
  padding: 14px 16px;
  background: #fff;
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-5);
  line-height: 0;
}
/* `aspect-ratio` reserva la altura del logotipo ANTES de que el JPEG llegue.
   Sin esto, el pie empujaba todo el contenido al cargar la imagen (CLS): el
   navegador no conocía la proporción hasta terminar la descarga. La proporción
   es la real del archivo (1024×572), medida sobre images/. Así el hueco queda
   reservado desde el primer fotograma, sin tener que añadir atributos a las 65
   páginas una por una. */
.footer-brand-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 572;
  mix-blend-mode: multiply;
}
.footer-about p { font-size: .88rem; line-height: 1.65; max-width: 40ch; }
.footer-col h3 {
  color: #fff;
  font-size: 0.86rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  font-weight: 700;
  line-height: 1.4;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a:not(.btn) { color: #a9bcd2; font-size: .875rem; }
.footer-col a:not(.btn):hover { color: var(--cyan-300); }
/* El botón del pie debe leerse en blanco: se declara explícitamente para que
   la regla de enlaces del pie no tiña su texto de azul grisáceo. */
.footer-col .btn-primary,
.footer-col .btn-primary:hover { color: #fff; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 11px; font-size: .875rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--cyan-400); flex: none; margin-top: 3px; }
.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
}
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.footer-legal li { margin: 0; }
.footer-legal a { color: #8ba0b8; }
.social-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social-row a {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #c3d3e5;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.social-row a:hover { background: var(--cyan-500); color: #fff; transform: translateY(-2px); }
.social-row svg { width: 17px; height: 17px; }

/* ------------- 8.f CASOS RELACIONADOS (PÁGINAS DE SERVICIO) ------------ */
/* Bloque compacto que enlaza, desde cada servicio, los casos de éxito que
   usan ese mismo método. Es más ligero que una tarjeta completa porque aquí
   el objetivo es trazar la relación tema → prueba, no repetir el hub. */
.casos-rel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--sp-4);
}
.casos-rel a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan-400);
  border-radius: var(--radius-sm);
  background: #fff;
  color: inherit;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.casos-rel a:hover {
  border-left-color: var(--cyan-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: inherit;
}
.casos-rel .caso-rel-tag {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cyan-600);
  margin-bottom: 6px;
}
.casos-rel .caso-rel-title {
  display: block;
  font-weight: 650;
  color: var(--navy-900);
  line-height: 1.32;
  margin-bottom: 4px;
}
.casos-rel .caso-rel-data {
  display: block;
  font-size: var(--fs-small);
  color: var(--ink-400);
  line-height: 1.45;
}

/* --------------------- 8.e VOLVER ARRIBA (FLOTANTE) -------------------- */
/* Botón fijo en la esquina inferior izquierda. Lo crea js/main.js para no
   tener que repetir el marcado en las 60 páginas del sitio. Permanece oculto
   hasta que el visitante ha bajado lo suficiente como para necesitarlo. */
.back-to-top {
  position: fixed;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 150;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s, background .2s var(--ease);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--cyan-600); }
.back-to-top svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .back-to-top { left: var(--sp-4); bottom: var(--sp-4); width: 42px; height: 42px; }
}

/* ---------------------------- 9. RESPONSIVE ----------------------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
  .service-block { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .cta-band-inner { grid-template-columns: 1fr; justify-items: start; }
  /* El retrato cede ancho antes de apilarse, pero sin encogerse de golpe:
     baja de 300/320 a 240/250 px, que sigue leyéndose como retrato principal
     y deja ~700 px de texto en un viewport de 1080. */
  .founder { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: var(--sp-5); }
  .founder.is-compact { grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
}

@media (max-width: 1024px) {
  /* Cabecera en dos filas. El botón de auditoría va ANTES del botón de menú
     (order 2 frente a 3), de modo que queda a su izquierda tal como se pidió.
     El menú entra en el flujo de la página: así se despliega completo y se
     recorre con el scroll natural, sin caja interior con scroll propio. */
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: var(--header-h);
    padding-block: 8px;
  }
  .brand { order: 1; }
  .header-cta { order: 2; margin-left: auto; }
  .header-cta .btn { display: inline-flex; }
  .nav-toggle { order: 3; margin-left: var(--sp-2); display: inline-flex; }

  .primary-nav {
    order: 4;
    flex: 1 1 100%;
    position: static;
    display: none;
    margin-left: 0;
    padding: var(--sp-3) 0 var(--sp-4);
    border-top: 1px solid var(--line);
    background: transparent;
    overflow: visible;
    max-height: none;
    transform: none;
    z-index: auto;
  }
  .primary-nav.is-open { display: block; }
  /* Con el menú abierto la cabecera deja de ser pegajosa: si siguiera fija,
     una cabecera más alta que la pantalla taparía el propio menú. */
  body.nav-open .site-header { position: static; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-list a { padding: 14px 14px; font-size: 1rem; border-radius: var(--radius-sm); }
  .nav-list a.is-active { background: var(--surface-3); }
  .nav-list a.is-active::after { display: none; }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 var(--sp-3) 14px;
    padding: 0 0 0 var(--sp-3);
    min-width: 0;
    display: none;
  }
  /* En pantalla táctil no existe :hover, así que el submenú se abre con un
     botón explícito. Antes dependía de :hover y era imposible de desplegar
     con el dedo: solo funcionaba en escritorio. */
  .has-dropdown.is-open > .dropdown { display: block; }
  .nav-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--navy-800);
    cursor: pointer;
    flex: none;
  }
  .nav-sub-toggle svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
  .has-dropdown.is-open .nav-sub-toggle svg { transform: rotate(180deg); }
  .has-dropdown > a { flex: 1 1 auto; }
  .nav-list > li.has-dropdown { display: flex; flex-wrap: wrap; align-items: center; }
  .nav-list > li + li { border-top: 1px solid var(--surface-3); }

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

@media (max-width: 760px) {
  /* Sin eslogan, la línea divisoria del nombre no tiene sentido */
  .brand-name { padding-bottom: 0; border-bottom: 0; }
  :root { --sp-6: 28px; --sp-7: 36px; --sp-8: 44px; --sp-9: 56px; --sp-10: 68px; }

  .container { padding-inline: var(--sp-4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  /* En móvil el retrato pasa ARRIBA y a ancho completo del contenedor pero
     limitado a 240 px, para que no se coma la pantalla ni deje el texto
     empujado. Sin esta regla las dos columnas se mantenían y el bloque
     desbordaba a la derecha en pantallas de 320-390 px. */
  .founder,
  .founder.is-compact { grid-template-columns: 1fr; gap: var(--sp-5); }
  /* El retrato se apila arriba. Se limita a 260 px para que no se coma la
     pantalla, pero la galería de certificados NO hereda ese tope: ocupa el
     ancho completo del contenedor y así las miniaturas siguen siendo
     legibles en un móvil de 320 px. */
  .founder-media { max-width: 260px; }
  .founder.is-compact .founder-media { max-width: 220px; }
  .cert-gallery { gap: 10px; }
  /* El botón de contacto ocupa el ancho disponible en móvil: es el destino
     principal del bloque y un botón estrecho se pierde. */
  .founder-cta { gap: var(--sp-3); }
  .founder-cta .btn { width: 100%; justify-content: center; }
  .founder-cta-alt { flex-basis: 100%; text-align: center; border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav .is-next { text-align: left; }
  .footer-top { grid-template-columns: 1fr; }
  .hero { padding: 22px 0 var(--sp-5); }
  .hero-panel { padding: var(--sp-5); }
  .cta-band { padding: var(--sp-6); }
  .section-head { margin-bottom: var(--sp-6); }
  .brand-tag { display: none; }
  /* Logotipo fluido. El arte se recorta de un PNG con `background-size` y
     `background-position`, así que al cambiar el ancho hay que reescalar las
     cuatro medidas en la misma proporción o el recorte se desalinea.
     Por eso se derivan todas de una sola variable `--bm` (ancho del logotipo):
     alto 14,35 %, fondo 116,09 % × 64,78 % y desplazamiento −8 % / −22,87 %,
     que son las proporciones reales del archivo (230×33, 267×149, −18,4/−52,6).
     El ancho reserva sitio para el botón de auditoría y el asa: en pantallas
     muy estrechas (320-370 px) el logotipo cede unos píxeles en lugar de
     empujar el botón a otra fila. */
  .brand-mark {
    --bm: clamp(112px, calc(100vw - 208px), 205px);
    width: var(--bm);
    height: calc(var(--bm) * 0.1435);
    background-size: calc(var(--bm) * 1.1609) calc(var(--bm) * 0.6478);
    background-position: calc(var(--bm) * -0.08) calc(var(--bm) * -0.2287);
  }
  .page-hero { padding: var(--sp-6) 0; }
  .toc { position: static; margin-bottom: var(--sp-6); }
  .metrics { grid-template-columns: 1fr; gap: 1px; }
  .stat-row { grid-template-columns: 1fr; }
  blockquote { padding: var(--sp-4); }
  .tabs-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .accordion-trigger { padding: var(--sp-4); font-size: .95rem; }
  .accordion-panel-inner { padding: 0 var(--sp-4) var(--sp-4); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
  .brand-name { font-size: .96rem; }
  /* El recorte del logotipo ya lo resuelve la fórmula fluida de --bm en el
     bloque de 760 px (que también alcanza a 420 px). Se retira el ancho fijo
     para no sobrescribirla. */
  .btn { padding: 12px 18px; font-size: .89rem; }
  .metric { padding: var(--sp-4); }
}

/* =================== CASOS DE ÉXITO (HUB Y FICHAS) ======================
   Componentes de la sección de casos: rejilla del hub, hechos del proyecto,
   banda de resultados (KPI), comparativa antes/después y maqueta de plantilla
   de tema WordPress dibujada solo con CSS. La maqueta evita depender de
   capturas ajenas y no añade peso a la página.
   ====================================================================== */

/* Hub: rejilla de casos. El mínimo del track usa min(100%, 310px) para que en
   pantallas de 320-360 px la tarjeta pueda encogerse por debajo de su ancho
   ideal en lugar de desbordar el contenedor. */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: var(--sp-5); }
.case-card { position: relative; }
.case-card .case-sector {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--cyan-600);
  margin-bottom: var(--sp-3);
  /* El número de caso va posicionado arriba a la derecha: reservamos su hueco
     para que una etiqueta de sector larga no se le meta debajo al reducirse el ancho. */
  padding-right: 2.4rem;
  max-width: 100%;
}
.case-card h3 { font-size: 1.16rem; }
.case-index {
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink-300);
}
.case-result {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line);
}
.case-result strong {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--cyan-500);
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
}
.case-result span { font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.4; }
/* Variante para los casos en vivo: en lugar de una cifra grande se declara la
   plataforma del sitio, que es el dato comprobable. El texto no debe competir
   en peso visual con un resultado numérico. */
.case-result.is-plataforma { flex-wrap: wrap; align-items: center; gap: 8px; }
.case-result.is-plataforma strong {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: normal;
  color: var(--navy-800);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px 11px;
}
.case-result.is-plataforma span { flex: 1 1 100%; }

/* --- Ficha: hechos del proyecto --- */
.case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); margin: 0; }
.case-facts > div {
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.case-facts dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 5px;
}
.case-facts dd { margin: 0; font-size: .92rem; color: var(--navy-800); font-weight: 550; }

/* --- Banda de resultados --- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--sp-4); }
.kpi {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--cyan-400);
}
.kpi-value {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi-value .unit { font-size: .55em; color: var(--cyan-500); margin-left: 2px; }
.kpi-label { font-size: var(--fs-small); color: var(--ink-400); margin-top: 9px; line-height: 1.45; }
.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--success);
}

/* --- Comparativa antes / después --- */
.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.ba-col { padding: var(--sp-5); border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.ba-col.is-before { background: var(--surface-2); }
.ba-col.is-after { border-color: rgba(28, 178, 203, .32); box-shadow: var(--shadow-sm); }
.ba-col h3 { font-size: 1.02rem; margin-bottom: var(--sp-3); }
.ba-col .ba-tag {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 6px;
}
.ba-col.is-after .ba-tag { color: var(--cyan-600); }
.ba-col ul { margin: 0; padding-left: 18px; font-size: .92rem; }
.ba-col li { margin-bottom: 7px; }

/* --- Maqueta de plantilla de tema WordPress (solo CSS) --- */
.theme-mock-figure { margin-right: 0; margin-bottom: 0; margin-left: 0; }
.theme-mock { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.theme-mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.theme-mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.theme-mock-url {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--ink-400);
}
.theme-mock-body { padding: var(--sp-4); display: grid; gap: 12px; background: linear-gradient(180deg, #fff, var(--surface-2)); }
.theme-mock-nav { display: flex; align-items: center; gap: 8px; }
.theme-mock-logo { width: 78px; height: 13px; border-radius: 3px; background: var(--navy-800); }
.theme-mock-links { margin-left: auto; display: flex; gap: 7px; }
.theme-mock-links span { width: 34px; height: 7px; border-radius: 3px; background: var(--line-strong); }
.theme-mock-cta { width: 54px; height: 18px; border-radius: var(--radius-pill); background: linear-gradient(96deg, var(--cyan-600), var(--cyan-400)); }
.theme-mock-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(28, 178, 203, .18);
  background: linear-gradient(150deg, var(--cyan-100), #fff 72%);
}
.theme-mock-line { display: block; height: 11px; border-radius: 3px; background: var(--navy-800); margin-bottom: 8px; }
.theme-mock-line.sm { height: 7px; background: var(--line-strong); }
.theme-mock-line.cy { background: var(--cyan-500); }
.theme-mock-line.w-95 { width: 95%; }
.theme-mock-line.w-85 { width: 85%; }
.theme-mock-line.w-70 { width: 70%; }
.theme-mock-line.w-55 { width: 55%; }
.theme-mock-line.w-40 { width: 40%; }
.theme-mock-btn { display: block; width: 92px; height: 22px; border-radius: var(--radius-pill); background: linear-gradient(96deg, var(--cyan-600), var(--cyan-400)); margin-top: 12px; }
.theme-mock-panel { min-height: 104px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.theme-mock-panel.is-chart { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff, var(--surface-2)); }
.theme-mock-panel.is-chart::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 14px;
  height: 46px;
  background: linear-gradient(90deg, var(--cyan-300), var(--cyan-500));
  clip-path: polygon(0 100%, 0 62%, 18% 48%, 36% 66%, 54% 30%, 72% 40%, 100% 8%, 100% 100%);
}
.theme-mock-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-mock-cards span { height: 56px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.theme-mock-cards span:first-child { background: linear-gradient(150deg, var(--cyan-100), #fff); border-color: rgba(28, 178, 203, .22); }
.theme-mock-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; align-items: center; }
.theme-mock-thumb { height: 44px; border-radius: 8px; background: linear-gradient(150deg, var(--surface-3), var(--cyan-100)); }
.theme-mock-cap { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-400); }
/* Variante oscura: temas con cabecera en azul noche. */
.theme-mock.is-dark .theme-mock-body { background: linear-gradient(180deg, var(--navy-900), var(--navy-800)); }
.theme-mock.is-dark .theme-mock-logo { background: #fff; }
.theme-mock.is-dark .theme-mock-links span { background: rgba(255, 255, 255, .34); }
.theme-mock.is-dark .theme-mock-hero { border-color: rgba(255, 255, 255, .14); background: linear-gradient(150deg, rgba(45, 205, 228, .16), rgba(255, 255, 255, .04)); }
.theme-mock.is-dark .theme-mock-line { background: #e8f1fa; }
.theme-mock.is-dark .theme-mock-line.sm { background: rgba(255, 255, 255, .4); }
.theme-mock.is-dark .theme-mock-panel { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); }
.theme-mock.is-dark .theme-mock-cards span { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }

/* --- Navegación entre casos --- */
.case-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.case-nav a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.case-nav a:hover { border-color: var(--cyan-100); transform: translateY(-2px); }
.case-nav span { display: block; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 5px; }
.case-nav strong { color: var(--navy-800); font-size: .96rem; }
.case-nav .is-next { text-align: right; }

@media (max-width: 760px) {
  .ba-grid, .case-nav { grid-template-columns: 1fr; }
  .case-nav .is-next { text-align: left; }
  .theme-mock-hero { grid-template-columns: 1fr; }
  .theme-mock-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Página de demostración de plantilla (sitio de ejemplo, noindex) --- */
.demo-bar { background: var(--navy-900); color: #fff; padding: 11px 0; font-size: var(--fs-xs); }
.demo-bar .container { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.demo-bar strong { color: var(--cyan-400); letter-spacing: .04em; text-transform: uppercase; }
.demo-bar a { color: #fff; text-decoration: underline; }
.demo-site { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.demo-chrome { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.demo-chrome .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.demo-chrome .url { margin-left: 10px; padding: 4px 14px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line); font-family: var(--font-mono); font-size: .72rem; color: var(--ink-400); }
.demo-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 16px 20px; border-bottom: 1px solid var(--line); }
.demo-logo { font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; font-size: 1.02rem; }
.demo-nav ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.demo-nav a { color: var(--ink-500); }
.demo-hero { padding: 34px 20px; background: linear-gradient(150deg, var(--cyan-100), #fff 70%); border-bottom: 1px solid var(--line); }
.demo-hero h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); margin: 0 0 10px; color: var(--navy-900); }
.demo-hero p { color: var(--ink-500); max-width: 54ch; margin: 0; }
.demo-body { padding: 22px 20px; display: grid; gap: 18px; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.demo-tile { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; }
.demo-tile strong { display: block; color: var(--navy-800); margin-bottom: 5px; font-size: .94rem; }
.demo-tile span { font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.5; }
.demo-strip { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-400); }
.demo-strip b { color: var(--navy-800); }
.demo-foot { padding: 18px 20px; background: var(--navy-900); color: #cbd5e1; font-size: var(--fs-xs); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
@media (max-width: 760px) { .demo-nav ul { display: none; } }

/* ==========================================================================
   9.b GALERÍA DE PLANTILLAS WORDPRESS (plantillas-wordpress.html)
   Barra lateral izquierda de categorías + rejilla de tarjetas.
   Las vistas previas están dibujadas solo con CSS: cero imágenes de fondo.
   ========================================================================== */

/* --- Estructura: barra lateral + resultados ------------------------------ */
.plt-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.plt-sidebar { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }

.plt-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
}
.plt-panel + .plt-panel { margin-top: var(--sp-5); }
.plt-panel h2 { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 var(--sp-3); }

/* --- Lista de categorías ------------------------------------------------- */
.plt-cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plt-cat a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--radius-sm);
  color: var(--ink-500); font-size: var(--fs-small); font-weight: 600;
  text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease);
}
.plt-cat a:hover { background: var(--surface-3); color: var(--navy-900); }
.plt-cat a.is-active { background: var(--navy-900); color: #fff; }
.plt-cat a.is-active .plt-cat-n { background: rgba(255, 255, 255, .2); color: #fff; }
.plt-cat svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.plt-cat-n {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--surface-3); color: var(--ink-400);
}

/* --- Buscador ------------------------------------------------------------ */
.plt-buscar { position: relative; }
.plt-buscar input {
  width: 100%; padding: 11px 13px 11px 38px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-small); color: var(--ink-700); background: #fff;
}
.plt-buscar input:focus { outline: 3px solid var(--cyan-100); border-color: var(--cyan-500); }
.plt-buscar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-300); pointer-events: none; }

/* --- Cabecera de resultados --------------------------------------------- */
.plt-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.plt-toolbar h2 { margin: 0; }
.plt-count { font-size: var(--fs-small); color: var(--ink-400); font-weight: 600; }

/* --- Rejilla de tarjetas ------------------------------------------------- */
.plt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(286px, 1fr)); gap: var(--sp-5); }
.plt-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden; position: relative;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.plt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--cyan-100); }
.plt-card-flag {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--navy-900); color: #fff; padding: 4px 9px; border-radius: var(--radius-pill);
}
.plt-card-head { padding: var(--sp-4) var(--sp-4) 0; background: var(--surface-2); }
.plt-card-body { padding: var(--sp-5) var(--sp-5) var(--sp-4); flex: 1; }
.plt-card-body h3 { font-size: 1.08rem; margin: var(--sp-3) 0 6px; }
.plt-card-body p { font-size: var(--fs-small); color: var(--ink-400); margin: 0 0 var(--sp-4); }
.plt-card-foot { display: flex; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-5); flex-wrap: wrap; }
.plt-card-foot .btn { flex: 1 1 auto; justify-content: center; }
.plt-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.plt-chips li { font-size: .68rem; font-weight: 600; color: var(--ink-500); background: var(--surface-3); padding: 3px 9px; border-radius: var(--radius-pill); }

/* Botón secundario de las tarjetas (alias del estilo fantasma existente) */
.btn-outline { background: #fff; color: var(--navy-800); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--cyan-400); color: var(--navy-900); transform: translateY(-2px); }

/* --- Vista previa en miniatura (100 % CSS) ------------------------------- */
.plt-mini {
  height: 206px; overflow: hidden;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: #fff; font-size: .6rem;
  display: flex; flex-direction: column;
}
.plt-mini-bar { display: flex; gap: 4px; padding: 7px 9px; background: var(--surface-3); border-bottom: 1px solid var(--line); flex: none; }
.plt-mini-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.plt-mini-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; border-bottom: 1px solid var(--line); flex: none;
  font-weight: 800; color: var(--pc-tinta); letter-spacing: -.01em;
}
.plt-mini-links { display: flex; gap: 5px; }
.plt-mini-links i { width: 17px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.plt-mini-hero {
  padding: 14px 11px; flex: none;
  background: linear-gradient(140deg, var(--pc-base), var(--pc-acento));
  display: grid; gap: 9px; align-content: start;
}
.plt-mini-hero em { font-style: normal; font-weight: 650; color: #fff; line-height: 1.35; display: block; max-height: 2.7em; overflow: hidden; }
.plt-mini-btn { width: 54px; height: 15px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .92); display: block; }
.plt-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 11px; flex: none; }
.plt-mini-card { display: grid; gap: 4px; min-width: 0; }
.plt-mini-card i { display: block; height: 26px; border-radius: 5px; background: var(--pc-suave); border: 1px solid var(--line); }
.plt-mini-card b { font-size: .47rem; font-weight: 650; color: var(--ink-400); line-height: 1.25; display: block; overflow: hidden; max-height: 2.5em; }
.plt-mini-foot {
  margin-top: auto; display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 11px; background: var(--pc-tinta); color: #cbd5e1; font-size: .47rem; flex: none;
}
/* Variante oscura: la propia maqueta cambia de piel */
.plt-mini.is-dark { background: #0f172a; border-color: #1e293b; }
.plt-mini.is-dark .plt-mini-bar { background: #1e293b; border-bottom-color: #334155; }
.plt-mini.is-dark .plt-mini-nav { background: #0f172a; border-bottom-color: #1e293b; color: #fff; }
.plt-mini.is-dark .plt-mini-card i { background: #1e293b; border-color: #334155; }
.plt-mini.is-dark .plt-mini-card b { color: #94a3b8; }

/* Los elementos ocultos por JS deben seguir ocultos: el atributo `hidden`
   del navegador lo anula una regla de autor con `display` propio. */
.plt-card[hidden], .plt-aviso[hidden], .plt-vacio[hidden] { display: none !important; }

/* --- Aviso flotante ------------------------------------------------------ */
.plt-aviso {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 200; max-width: min(92vw, 560px);
  padding: 13px 20px; border-radius: var(--radius-pill);
  background: var(--navy-900); color: #fff; font-size: var(--fs-small); font-weight: 600;
  box-shadow: var(--shadow-lg);
}
.plt-aviso.is-ok { background: var(--success); }
.plt-aviso.is-error { background: #b42318; }
.plt-aviso.is-info { background: var(--navy-700); }

/* --- Estado vacío -------------------------------------------------------- */
.plt-vacio { text-align: center; padding: var(--sp-8) var(--sp-5); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.plt-vacio svg { width: 34px; height: 34px; color: var(--ink-300); }
.plt-vacio p { color: var(--ink-400); margin: var(--sp-3) 0 0; }

/* --- Ficha lateral de la demo -------------------------------------------- */
.demo-nav-cta { font-size: .74rem; font-weight: 700; color: var(--cyan-500); }

/* --- Piezas de las maquetas por sector ---------------------------------- */
.demo-thumb { display: block; height: 74px; border-radius: var(--radius-sm); background: linear-gradient(140deg, var(--cyan-100), var(--surface-3)); border: 1px solid var(--line); margin-bottom: 10px; }
.demo-thumb.is-wide { height: 96px; }
.demo-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.demo-table-wrap .data-table { margin: 0; }
.demo-search {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px; align-items: center; padding: 14px 20px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.demo-search > span { display: grid; gap: 2px; color: var(--ink-400); }
.demo-search > span b { color: var(--navy-800); font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; }
.demo-search-go {
  background: var(--navy-900); color: #fff; padding: 10px 16px; border-radius: var(--radius-pill);
  font-weight: 700; text-align: center; font-size: var(--fs-xs);
}
.demo-booking { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.demo-booking-step {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-400); background: #fff;
}
.demo-booking-step b {
  width: 20px; height: 20px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-3); color: var(--ink-500); font-size: .68rem;
}
.demo-booking-step.is-on { border-color: var(--cyan-500); color: var(--navy-800); background: var(--cyan-100); }
.demo-booking-step.is-on b { background: var(--cyan-500); color: #fff; }

/* Panel de producto (sector software) */
.demo-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.demo-panel-top { display: flex; gap: 6px; padding: 10px 13px; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.demo-panel-top span { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.demo-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px; }
.demo-panel-kpi { display: grid; gap: 3px; }
.demo-panel-kpi b { font-size: 1.25rem; color: var(--pc-base, var(--navy-800)); letter-spacing: -.02em; }
.demo-panel-kpi span { font-size: .66rem; color: var(--ink-400); }
.demo-panel-chart { display: flex; align-items: flex-end; gap: 7px; height: 96px; padding: 0 16px 16px; }
.demo-panel-chart i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--cyan-400), var(--cyan-600)); opacity: .85; }
.demo-panel.is-dark { background: #0f172a; border-color: #1e293b; }
.demo-panel.is-dark .demo-panel-top { background: #1e293b; border-bottom-color: #334155; }
.demo-panel.is-dark .demo-panel-kpi b { color: #fff; }
.demo-panel.is-dark .demo-panel-kpi span { color: #94a3b8; }
/* La maqueta oscura hereda el tema oscuro */
.demo-site.is-dark .demo-nav, .demo-site.is-dark .demo-body { background: #0f172a; color: #cbd5e1; }
.demo-site.is-dark .demo-nav { border-bottom-color: #1e293b; }
.demo-site.is-dark .demo-logo { color: #fff; }
.demo-site.is-dark .demo-nav a { color: #94a3b8; }

/* --- Responsive de la galería -------------------------------------------- */
@media (max-width: 980px) {
  .plt-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .plt-sidebar { position: static; }
  /* La barra lateral pasa a ser una tira horizontal desplazable */
  .plt-panel { padding: var(--sp-4); }
  .plt-cat { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .plt-cat a { white-space: nowrap; border: 1px solid var(--line); }
  .plt-cat svg { display: none; }
}
@media (max-width: 760px) {
  .plt-grid { grid-template-columns: 1fr; }
  .plt-card-foot .btn { flex: 1 1 100%; }
  .plt-toolbar { align-items: flex-start; }
  .demo-search { grid-template-columns: 1fr; }
  .demo-booking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-panel-grid { grid-template-columns: 1fr; }
}

/* ------------- 9.c COMPONENTES DEL AUDITOR + RESUMEN TIPO GTMETRIX ------ */
.psi-tabs {
  display: inline-flex;
  gap: 4px;
  margin: var(--sp-6) 0 var(--sp-5);
  padding: 4px;
  background: var(--surface-3);
  border-radius: var(--radius-pill);
}
.psi-tab {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 620;
  color: var(--ink-400);
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.psi-tab:hover { color: var(--navy-900); }
.psi-tab.is-active { background: #fff; color: var(--navy-900); box-shadow: var(--shadow-sm); }
.psi-tab svg { width: 15px; height: 15px; }

.psi-scope { font-size: var(--fs-xs); color: var(--ink-400); margin: 0 0 var(--sp-5); }

/* Círculos de puntuación (estructura de PageSpeed Insights) */
.psi-scores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.psi-score { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.psi-score-dial { position: relative; width: 62px; height: 62px; display: grid; place-items: center; }
.psi-score-dial svg { width: 62px; height: 62px; display: block; }
.psi-score-num { position: absolute; font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.psi-score.is-good .psi-score-num { color: #0b7d57; }
.psi-score.is-warn .psi-score-num { color: #9a6208; }
.psi-score.is-bad .psi-score-num { color: #b03a30; }
.psi-score.is-na .psi-score-num { color: var(--ink-300); }
.psi-score-label { font-size: .8rem; line-height: 1.3; color: var(--ink-500); font-weight: 560; }

.psi-extras { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-4) 0 0; }
.psi-chip {
  font-size: .74rem;
  font-weight: 650;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-500);
  border: 1px solid var(--line);
}
.psi-chip.is-good { background: #e9f9f2; color: #0b7d57; border-color: #b9e8d5; }
.psi-chip.is-warn { background: #fdf4e3; color: #9a6208; border-color: #f2dfb4; }
.psi-chip.is-bad { background: #fdeeec; color: #b03a30; border-color: #f6cfc9; }

.psi-h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-400);
  margin: var(--sp-6) 0 var(--sp-4);
  font-weight: 700;
}

/* Métricas Core Web Vitals */
.psi-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.psi-metric {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: #fff;
}
.psi-metric-name { font-size: .72rem; color: var(--ink-400); line-height: 1.35; min-height: 2.1em; }
.psi-metric-value { font-size: 1.22rem; font-weight: 780; letter-spacing: -.02em; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.psi-metric-bar { display: block; height: 4px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.psi-metric-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink-300); transition: width .5s var(--ease); }
.psi-metric.is-good .psi-metric-value { color: #0b7d57; }
.psi-metric.is-good .psi-metric-bar i { background: #0f9d6e; }
.psi-metric.is-warn .psi-metric-value { color: #9a6208; }
.psi-metric.is-warn .psi-metric-bar i { background: #c47f0a; }
.psi-metric.is-bad .psi-metric-value { color: #b03a30; }
.psi-metric.is-bad .psi-metric-bar i { background: #d1483c; }

/* Resumen tipo GTmetrix */
.gtm-card {
  margin-top: var(--sp-6);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.gtm-card h3 { font-size: 1rem; margin: 0 0 4px; }
.gtm-note { font-size: var(--fs-xs); color: var(--ink-400); margin: 0 0 var(--sp-5); }
.gtm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.gtm-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gtm-item span { font-size: .74rem; color: var(--ink-400); line-height: 1.35; }
.gtm-item strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy-900); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .psi-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
  .psi-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .psi-metrics { grid-template-columns: 1fr; }
  .gtm-grid { grid-template-columns: 1fr; }
  .psi-tabs { width: 100%; justify-content: center; }
  .psi-tab { flex: 1 1 auto; justify-content: center; padding: 9px 12px; }
}

/* ---------- 9.d AUDITOR TÉCNICO COMPLETO (auditoria-seo.html) ------------ */
.aud-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.aud-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: end; }
.aud-form .field { margin: 0; }
.aud-form .input { font-size: 1.05rem; padding: 15px 16px; }
.aud-form .btn { white-space: nowrap; }
.aud-form .btn:disabled { opacity: .65; cursor: progress; }

/* Cabecera del informe */
.aud-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
}
.aud-meta-url { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aud-meta-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-400); font-weight: 700; }
.aud-meta-url strong {
  font-size: 1.02rem;
  color: var(--navy-900);
  font-weight: 720;
  overflow-wrap: anywhere;
}
.aud-meta-datos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.aud-meta-datos > span { font-size: .74rem; color: var(--ink-400); }
.aud-meta-datos .btn { gap: 6px; }
.aud-meta-datos .btn svg { width: 14px; height: 14px; }

/* Nota global + círculos */
.aud-top {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0 var(--sp-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.aud-grade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-3);
  border: 2px solid var(--line);
  background: var(--surface-2);
}
.aud-grade-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-400); font-weight: 700; }
.aud-grade-letter { font-size: 2.5rem; line-height: 1; font-weight: 830; letter-spacing: -.04em; }
.aud-grade-sub { font-size: .72rem; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.aud-grade.is-good { border-color: #b9e8d5; background: #eefaf5; }
.aud-grade.is-good .aud-grade-letter { color: #0b7d57; }
.aud-grade.is-warn { border-color: #f2dfb4; background: #fdf8ec; }
.aud-grade.is-warn .aud-grade-letter { color: #9a6208; }
.aud-grade.is-bad { border-color: #f6cfc9; background: #fdf1ef; }
.aud-grade.is-bad .aud-grade-letter { color: #b03a30; }
.aud-grade.is-na .aud-grade-letter { color: var(--ink-300); }
.aud-top .psi-scores { padding: 0; border: 0; }

/* Datos de campo (CrUX) */
.aud-campo { margin-top: var(--sp-5); }
.aud-campo .psi-h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: var(--sp-3); }
.aud-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-500);
  border: 1px solid var(--line);
}
.aud-badge.is-good { background: #e9f9f2; color: #0b7d57; border-color: #b9e8d5; }
.aud-badge.is-warn { background: #fdf4e3; color: #9a6208; border-color: #f2dfb4; }
.aud-badge.is-bad { background: #fdeeec; color: #b03a30; border-color: #f6cfc9; }
.aud-campo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--sp-3); }
.aud-campo-item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-300);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
}
.aud-campo-abbr { font-size: .68rem; font-weight: 750; letter-spacing: .06em; color: var(--ink-400); }
.aud-campo-item strong { font-size: 1.15rem; font-weight: 780; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.aud-campo-estado { font-size: .68rem; color: var(--ink-400); font-weight: 600; }
.aud-campo-item.is-good { border-left-color: #0f9d6e; }
.aud-campo-item.is-good .aud-campo-estado { color: #0b7d57; }
.aud-campo-item.is-warn { border-left-color: #c47f0a; }
.aud-campo-item.is-warn .aud-campo-estado { color: #9a6208; }
.aud-campo-item.is-bad { border-left-color: #d1483c; }
.aud-campo-item.is-bad .aud-campo-estado { color: #b03a30; }
.aud-campo-nota { font-size: var(--fs-xs); color: var(--ink-400); margin: var(--sp-3) 0 0; line-height: 1.55; }
.aud-campo.is-vacio { background: var(--surface-2); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); }
.aud-campo.is-vacio .psi-h3 { margin-bottom: var(--sp-2); }
.aud-vacio-msg { font-size: var(--fs-small); color: var(--ink-500); margin: 0; line-height: 1.6; }

/* Peso por tipo de recurso */
.aud-rec { display: grid; gap: 2px; }
.aud-rec-item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 88px 84px;
  gap: var(--sp-3);
  align-items: center;
  padding: 9px var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}
.aud-rec-item:nth-child(even) { background: var(--surface-2); }
.aud-rec-head {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-400);
  font-weight: 700;
  background: transparent !important;
  padding-bottom: 4px;
}
.aud-rec-tipo { color: var(--ink-700); font-weight: 600; }
.aud-rec-barra { display: block; height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.aud-rec-barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--cyan-500), var(--cyan-400)); }
.aud-rec-n, .aud-rec-size { text-align: right; color: var(--ink-500); font-variant-numeric: tabular-nums; font-size: .8rem; }
.aud-rec-head .aud-rec-n, .aud-rec-head .aud-rec-size { color: var(--ink-400); }
.aud-rec-item:nth-child(2) .aud-rec-tipo { font-weight: 750; color: var(--navy-900); }

/* Tablas del informe */
.aud-table { font-size: var(--fs-small); }
.aud-table td { vertical-align: top; }
.aud-table td strong { display: block; color: var(--navy-900); font-weight: 650; }
.aud-desc { display: block; font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.55; margin-top: 4px; }
.aud-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-700); font-weight: 600; }
.aud-cat {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--cyan-100);
  color: var(--cyan-600);
  white-space: nowrap;
}
.aud-ok {
  font-size: var(--fs-small);
  color: #0b7d57;
  background: #eefaf5;
  border: 1px solid #b9e8d5;
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin: 0;
}
.aud-superadas {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--ink-500);
  margin: var(--sp-5) 0 0;
}
.aud-superadas svg { width: 16px; height: 16px; flex: none; color: #0f9d6e; }
.aud-superadas strong { color: var(--navy-900); }

/* Veredicto interpretado */
.aud-veredicto {
  margin-top: var(--sp-5);
  background: linear-gradient(180deg, #f7fbfe, #fff);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan-400);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.aud-veredicto.is-good { border-left-color: #0f9d6e; }
.aud-veredicto .psi-h3 { margin-top: 0; margin-bottom: var(--sp-2); }
.aud-veredicto-lead { font-size: var(--fs-small); color: var(--ink-500); margin: 0 0 var(--sp-4); line-height: 1.6; }
.aud-veredicto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.aud-veredicto-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
}
.aud-veredicto-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  font-size: .8rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.aud-veredicto-txt { display: grid; gap: 4px; }
.aud-veredicto-txt strong { font-size: .96rem; color: var(--navy-900); font-weight: 680; line-height: 1.4; }
.aud-veredicto-porque { font-size: .8rem; color: var(--ink-500); line-height: 1.55; }
.aud-veredicto-accion { font-size: var(--fs-xs); color: var(--ink-400); line-height: 1.6; }

/* Comprobaciones on-page (lectura del HTML publicado) */
.aud-op {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}
.aud-op .psi-h3 { margin-top: 0; }
.aud-op-nota { font-size: var(--fs-xs); color: var(--ink-400); margin: 0 0 var(--sp-4); line-height: 1.55; }
.aud-op-lista { display: grid; gap: 2px; }
.aud-op-row {
  display: grid;
  grid-template-columns: 26px minmax(180px, 1.1fr) 132px minmax(0, 1.6fr);
  gap: var(--sp-3);
  align-items: center;
  padding: 10px var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
}
.aud-op-row:nth-child(even) { background: var(--surface-2); }
.aud-op-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.aud-op-icon svg { width: 13px; height: 13px; }
.aud-op-row.is-good .aud-op-icon { background: #e9f9f2; color: #0b7d57; }
.aud-op-row.is-warn .aud-op-icon { background: #fdf4e3; color: #9a6208; }
.aud-op-row.is-bad .aud-op-icon { background: #fdeeec; color: #b03a30; }
.aud-op-nombre { color: var(--ink-700); font-weight: 620; }
.aud-op-valor {
  font-weight: 720;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  font-size: .82rem;
}
.aud-op-row.is-good .aud-op-valor { color: #0b7d57; }
.aud-op-row.is-warn .aud-op-valor { color: #9a6208; }
.aud-op-row.is-bad .aud-op-valor { color: #b03a30; }
.aud-op-detalle { font-size: .74rem; color: var(--ink-400); line-height: 1.5; }

@media (max-width: 760px) {
  .aud-op-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .aud-op-detalle { grid-column: 2 / -1; font-size: .72rem; }
}

@media (max-width: 860px) {
  .aud-form { grid-template-columns: 1fr; }
  .aud-form .btn { width: 100%; justify-content: center; }
  .aud-top { grid-template-columns: 1fr; gap: var(--sp-4); }
  .aud-grade { flex-direction: row; gap: 10px; padding: var(--sp-3) var(--sp-4); }
  .aud-grade-letter { font-size: 1.9rem; }
  .aud-rec-item { grid-template-columns: 104px minmax(0, 1fr) 64px 72px; gap: var(--sp-2); }
  .aud-rec-head { font-size: .6rem; }
}
@media (max-width: 520px) {
  .aud-box { padding: var(--sp-5) var(--sp-4); }
  .aud-meta { flex-direction: column; align-items: flex-start; }
  .aud-meta-datos { flex-direction: column; align-items: flex-start; }
  .aud-campo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* La barra de peso estorba en pantallas muy estrechas: se oculta y quedan los números. */
  .aud-rec-item { grid-template-columns: 1fr auto auto; }
  .aud-rec-barra { display: none; }
}

/* ================= 9.e APLICACIÓN DE AUDITORÍA (4 dimensiones) ============
   Informe técnico de rendimiento, SEO, GEO y AEO sobre auditoria-seo.html.
   Piezas: nota global, anillos por dimensión, pestañas, barras gráficas de
   presupuesto con tres zonas y marcador, listas de fallos.
   ========================================================================= */

.aapp { margin-top: var(--sp-5); }

/* --------- Cabecera del informe --------- */
.aapp-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(180deg, var(--surface-2), #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
}
.aapp-meta-url { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aapp-meta-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-400);
  font-weight: 700;
}
.aapp-meta-url strong {
  font-size: 1.06rem;
  color: var(--navy-900);
  font-weight: 730;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.aapp-meta-datos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.aapp-meta-datos > span { font-size: .74rem; color: var(--ink-400); }
.aapp-meta-datos .btn { gap: 6px; }
.aapp-meta-datos .btn svg { width: 14px; height: 14px; }

/* --------- Resumen: nota global + cuatro anillos --------- */
.aapp-resumen {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
  padding: var(--sp-5);
  background: var(--navy-900);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-5);
  position: relative;
  overflow: hidden;
}
.aapp-resumen::after {
  content: "";
  position: absolute;
  inset: auto -60px -120px auto;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(45, 205, 228, .22), transparent 68%);
  pointer-events: none;
}

.aapp-global {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
}
.aapp-global-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
}
.aapp-global-letra {
  font-size: 3.1rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  margin: 4px 0 2px;
}
.aapp-global.is-good .aapp-global-letra { color: #4de0af; }
.aapp-global.is-warn .aapp-global-letra { color: #f5c260; }
.aapp-global.is-bad .aapp-global-letra { color: #ff8d80; }
.aapp-global-num {
  font-size: .82rem;
  font-weight: 650;
  color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums;
}
.aapp-global-sub {
  font-size: .72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .5);
  margin-top: 6px;
}

.aapp-dims {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}
.aapp-dim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
}
.aapp-dim-ring { position: relative; display: grid; place-items: center; width: 74px; height: 74px; }
.aapp-dim-ring svg { width: 74px; height: 74px; display: block; }
.aapp-dim-ring circle { transition: stroke-dashoffset .7s var(--ease); }
.aapp-dim-num {
  position: absolute;
  font-size: 1.35rem;
  font-weight: 780;
  letter-spacing: -.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.aapp-dim-txt { display: flex; flex-direction: column; gap: 1px; }
.aapp-dim-txt strong {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.aapp-dim-txt span { font-size: .68rem; color: rgba(255, 255, 255, .5); line-height: 1.45; }
.aapp-dim.is-good .aapp-dim-num { color: #4de0af; }
.aapp-dim.is-warn .aapp-dim-num { color: #f5c260; }
.aapp-dim.is-bad .aapp-dim-num { color: #ff8d80; }
.aapp-dim.is-na .aapp-dim-num { color: rgba(255, 255, 255, .45); }

/* --------- Índice compuesto de rendimiento --------- */
.aapp-comp {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
.aapp-comp-nota {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--line);
  text-align: center;
}
.aapp-comp-nota > span {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 740;
  color: var(--ink-400);
  line-height: 1.3;
}
.aapp-comp-nota > strong {
  font-size: 2.3rem;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
.aapp-comp-nota > em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.aapp-comp-nota.is-good > strong { color: #0b7d57; }
.aapp-comp-nota.is-warn > strong { color: #9a6208; }
.aapp-comp-nota.is-bad > strong { color: #b03a30; }

.aapp-comp-partes { display: grid; gap: var(--sp-2); align-content: center; }
.aapp-comp-parte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.aapp-comp-parte > span {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-400);
}
.aapp-comp-parte > strong {
  font-size: .95rem;
  font-weight: 760;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aapp-comp-parte > em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink-400);
}

/* --------- Pilares del rendimiento --------- */
.aapp-pilares {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.aapp-pilar {
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.aapp-pilar.is-good { border-left-color: var(--success); }
.aapp-pilar.is-warn { border-left-color: var(--warn); }
.aapp-pilar.is-bad { border-left-color: var(--danger); }
.aapp-pilar.is-na { border-left-color: var(--line-strong); opacity: .8; }

.aapp-pilar-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: 8px;
}
.aapp-pilar-hd strong {
  font-size: .875rem;
  font-weight: 680;
  color: var(--navy-900);
  line-height: 1.4;
  min-width: 0;
}
.aapp-pilar-num {
  flex: none;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
.aapp-pilar.is-good .aapp-pilar-num { color: #0b7d57; }
.aapp-pilar.is-warn .aapp-pilar-num { color: #9a6208; }
.aapp-pilar.is-bad .aapp-pilar-num { color: #b03a30; }
.aapp-pilar.is-na .aapp-pilar-num { color: var(--ink-300); }

.aapp-pilar-track {
  display: block;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
  margin-bottom: 9px;
}
.aapp-pilar-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--line-strong);
  transition: width .7s var(--ease);
}
.aapp-pilar.is-good .aapp-pilar-track i { background: linear-gradient(90deg, #16b880, var(--success)); }
.aapp-pilar.is-warn .aapp-pilar-track i { background: linear-gradient(90deg, #e0a72c, var(--warn)); }
.aapp-pilar.is-bad .aapp-pilar-track i { background: linear-gradient(90deg, #e2685c, var(--danger)); }

.aapp-pilar-que {
  margin: 0 0 6px;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--ink-400);
}
.aapp-pilar-val {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.aapp-pilar-fix {
  margin: 7px 0 0;
  padding-left: 9px;
  border-left: 2px solid var(--line);
  font-size: .71rem;
  line-height: 1.58;
  color: var(--ink-500);
}
.aapp-pilar.is-bad .aapp-pilar-fix { border-left-color: #f0b8b0; }
.aapp-pilar.is-warn .aapp-pilar-fix { border-left-color: #eddcb2; }

/* --------- Inventario del documento --------- */
.aapp-inv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-5);
  border-top: 1px solid var(--line);
  margin-bottom: var(--sp-4);
}
.aapp-inv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
}
.aapp-inv-row > span { color: var(--ink-500); min-width: 0; }
.aapp-inv-row > strong {
  flex: none;
  color: var(--navy-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --------- Pestañas de dimensión --------- */
.aapp-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 5px;
  margin-bottom: var(--sp-5);
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.aapp-tabs::-webkit-scrollbar { display: none; }
.aapp-tab {
  flex: 1;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 640;
  color: var(--ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.aapp-tab:hover { color: var(--navy-900); background: rgba(255, 255, 255, .7); }
.aapp-tab.is-active {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.aapp-tab-n {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: .68rem;
  font-weight: 760;
  line-height: 1;
}
.aapp-tab.is-active .aapp-tab-n { background: #ff7a6b; }

.aapp-panel { min-height: 80px; }

/* --------- Textos base del panel --------- */
.aapp-intro {
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-500);
  margin: 0 0 var(--sp-4);
  max-width: 74ch;
}
.aapp-h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .94rem;
  font-weight: 720;
  letter-spacing: -.005em;
  color: var(--navy-900);
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.aapp-nota {
  font-size: var(--fs-xs);
  line-height: 1.62;
  color: var(--ink-400);
  margin: -4px 0 var(--sp-4);
  max-width: 76ch;
}
.aapp-badge {
  font-size: .66rem;
  font-weight: 740;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.aapp-badge.is-good { background: var(--success-bg); color: #0b7d57; }
.aapp-badge.is-warn { background: var(--warn-bg); color: #9a6208; }
.aapp-badge.is-bad { background: var(--danger-bg); color: #b03a30; }
.aapp-badge.is-na { background: var(--surface-3); color: var(--ink-400); }

/* --------- Chips de recuento --------- */
.aapp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 var(--sp-5); }
.aapp-chip {
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.aapp-chip.is-bad { background: var(--danger-bg); color: #b03a30; border-color: #f6cfc9; }
.aapp-chip.is-warn { background: var(--warn-bg); color: #9a6208; border-color: #f0dfba; }
.aapp-chip.is-good { background: var(--success-bg); color: #0b7d57; border-color: #c3ecdd; }
.aapp-chip.is-na { background: var(--surface-3); color: var(--ink-400); border-color: var(--line); }

/* --------- Barras gráficas de presupuesto de rendimiento --------- */
.aapp-vitals { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.aapp-vital {
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.aapp-vital.is-good { border-left-color: var(--success); }
.aapp-vital.is-warn { border-left-color: var(--warn); }
.aapp-vital.is-bad { border-left-color: var(--danger); }
.aapp-vital.is-na { border-left-color: var(--line-strong); opacity: .72; }

.aapp-vital-hd {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 9px;
}
.aapp-vital-abbr {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--navy-900);
  font-family: var(--font-mono);
}
.aapp-vital-nom {
  font-size: .74rem;
  color: var(--ink-400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aapp-vital-val {
  font-size: .92rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  color: var(--navy-900);
  white-space: nowrap;
}
.aapp-vital.is-good .aapp-vital-val { color: #0b7d57; }
.aapp-vital.is-warn .aapp-vital-val { color: #9a6208; }
.aapp-vital.is-bad .aapp-vital-val { color: #b03a30; }
.aapp-vital.is-na .aapp-vital-val { color: var(--ink-400); font-weight: 640; }

/* Pista con las tres zonas de umbral y el marcador del valor medido. */
.aapp-scale {
  position: relative;
  display: flex;
  height: 9px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-3);
}
.aapp-zone { display: block; height: 100%; }
.aapp-zone.is-good { background: #0f9d6e; opacity: .82; }
.aapp-zone.is-warn { background: #e0a72c; opacity: .82; }
.aapp-zone.is-bad { background: #d1483c; opacity: .82; }
.aapp-zone.is-na { flex: 1; background: var(--line-strong); opacity: .6; }

.aapp-marker {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 19px;
  margin-left: -1.5px;
  background: var(--navy-900);
  border-radius: 2px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(11, 18, 32, .34);
}

/* Etiquetas de umbral: se sitúan en la posición real de cada frontera. */
.aapp-scale-lbl {
  position: relative;
  height: 13px;
  margin-top: 5px;
  font-size: .63rem;
  font-weight: 640;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}
.aapp-scale-lbl > span {
  position: absolute;
  top: 0;
  white-space: nowrap;
  color: var(--ink-400);
}
.aapp-scale-lbl > span.aapp-lbl-0 { left: 0; }
.aapp-scale-lbl > span.aapp-lbl-b,
.aapp-scale-lbl > span.aapp-lbl-m { transform: translateX(-50%); }
.aapp-scale-lbl > span.aapp-lbl-b { color: #0b7d57; }
.aapp-scale-lbl > span.aapp-lbl-m { color: #9a6208; }

/* --------- Peso por tipo de recurso --------- */
.aapp-rec {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.aapp-rec-row {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 60px 78px;
  gap: var(--sp-3);
  align-items: center;
  padding: 8px var(--sp-4);
  font-size: var(--fs-xs);
  border-top: 1px solid var(--line);
}
.aapp-rec-row:first-child { border-top: 0; background: var(--surface-2); }
.aapp-rec-lbl { color: var(--ink-700); font-weight: 620; }
.aapp-rec-bar {
  display: block;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.aapp-rec-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan-500), var(--cyan-600));
}
.aapp-rec-n { text-align: right; color: var(--ink-400); font-variant-numeric: tabular-nums; }
.aapp-rec-sz {
  text-align: right;
  font-weight: 700;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

/* --------- Oportunidades --------- */
.aapp-opps { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); counter-reset: opp; }
.aapp-opp {
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  counter-increment: opp;
}
.aapp-opp-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; justify-content: space-between; }
.aapp-opp-hd strong {
  font-size: .875rem;
  font-weight: 660;
  color: var(--navy-900);
  line-height: 1.45;
}
.aapp-opp-hd strong::before {
  content: counter(opp) ".";
  margin-right: 7px;
  color: var(--cyan-600);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.aapp-opp-save {
  flex: none;
  font-size: .7rem;
  font-weight: 740;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--danger-bg);
  color: #b03a30;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.aapp-opp p {
  margin: 5px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink-400);
}

/* --------- Lista de comprobaciones --------- */
.aapp-checks { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: var(--sp-2); }
.aapp-check {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.aapp-check-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  margin-top: 1px;
}
.aapp-check-ic svg { width: 14px; height: 14px; }
.aapp-check.is-bad { border-color: #f4d2cd; background: #fffbfa; }
.aapp-check.is-bad .aapp-check-ic { background: var(--danger-bg); color: #b03a30; }
.aapp-check.is-warn .aapp-check-ic { background: var(--warn-bg); color: #9a6208; }
.aapp-check.is-good .aapp-check-ic { background: var(--success-bg); color: #0b7d57; }
.aapp-check.is-na .aapp-check-ic { background: var(--surface-3); color: var(--ink-300); }
.aapp-check.is-na { opacity: .8; }

.aapp-check-tx { min-width: 0; }
.aapp-check-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 10px; }
.aapp-check-hd strong {
  font-size: .875rem;
  font-weight: 660;
  color: var(--navy-900);
  line-height: 1.45;
}
.aapp-check.is-good .aapp-check-hd strong { color: var(--ink-700); font-weight: 600; }
.aapp-check-val {
  font-size: .72rem;
  font-weight: 720;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aapp-check.is-bad .aapp-check-val { background: var(--danger-bg); color: #b03a30; }
.aapp-check.is-warn .aapp-check-val { background: var(--warn-bg); color: #9a6208; }
.aapp-check.is-good .aapp-check-val { background: var(--success-bg); color: #0b7d57; }

.aapp-check-dim {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--navy-900);
  color: #fff;
}
.aapp-check-dim.is-seo { background: var(--navy-700); }
.aapp-check-dim.is-geo { background: var(--cyan-600); }
.aapp-check-dim.is-aeo { background: #6d5bd0; }
.aapp-check-dim.is-velocidad { background: #0b7d57; }

.aapp-check-fix {
  margin: 5px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.62;
  color: var(--ink-500);
  padding-left: 10px;
  border-left: 2px solid var(--line);
}
.aapp-check.is-bad .aapp-check-fix { border-left-color: #f0b8b0; }
.aapp-check.is-warn .aapp-check-fix { border-left-color: #eddcb2; }
.aapp-check-det {
  margin: 5px 0 0;
  font-size: .71rem;
  line-height: 1.55;
  color: var(--ink-400);
  font-style: italic;
}

/* Comprobaciones superadas: compactas y en segundo plano. */
.aapp-details { margin: 0 0 var(--sp-4); }
.aapp-details > summary {
  cursor: pointer;
  font-size: var(--fs-xs);
  font-weight: 660;
  color: var(--cyan-600);
  padding: var(--sp-2) 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.aapp-details > summary::-webkit-details-marker { display: none; }
.aapp-details > summary::before {
  content: "";
  width: 13px; height: 13px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/13px no-repeat;
  transition: transform .2s var(--ease);
}
.aapp-details[open] > summary::before { transform: rotate(90deg); }
.aapp-details > summary:hover { color: var(--navy-900); }
.aapp-checks.is-compacta { margin-top: var(--sp-2); gap: 5px; }
.aapp-checks.is-compacta .aapp-check { padding: 8px var(--sp-3); grid-template-columns: 22px minmax(0, 1fr); }
.aapp-checks.is-compacta .aapp-check-ic { width: 22px; height: 22px; }
.aapp-checks.is-compacta .aapp-check-ic svg { width: 12px; height: 12px; }
.aapp-checks.is-compacta .aapp-check-hd strong { font-size: var(--fs-xs); }

/* --------- Hallazgos y errores --------- */
.aapp-hallazgo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  line-height: 1.6;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-500);
}
.aapp-hallazgo svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }
.aapp-hallazgo.is-good { background: var(--success-bg); border-color: #c3ecdd; color: #0b6b4c; }
.aapp-hallazgo.is-na { background: var(--surface-2); border-style: dashed; color: var(--ink-400); }

/* --------- Ajustes responsive --------- */
@media (max-width: 980px) {
  .aapp-resumen { grid-template-columns: 1fr; }
  .aapp-global { flex-direction: row; align-items: baseline; justify-content: center; gap: 10px; text-align: left; flex-wrap: wrap; }
  .aapp-global-letra { font-size: 2.4rem; margin: 0; }
  .aapp-global-sub { flex-basis: 100%; text-align: center; margin-top: 0; }
  .aapp-global-label { flex-basis: 100%; text-align: center; }
}

@media (max-width: 860px) {
  .aapp-rec-row { grid-template-columns: 118px minmax(0, 1fr) 50px 70px; }
  .aapp-tab { padding: 9px 14px; }
  /* El índice compuesto pasa a una columna: la nota arriba, sus dos partes debajo. */
  .aapp-comp { grid-template-columns: 1fr; }
  .aapp-comp-nota { flex-direction: row; align-items: baseline; justify-content: center; gap: 10px; }
  .aapp-comp-nota > strong { font-size: 1.8rem; }
  .aapp-pilares { grid-template-columns: 1fr; }
  .aapp-inv { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .aapp-dims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aapp-resumen { padding: var(--sp-4); }
  .aapp-meta { flex-direction: column; align-items: flex-start; padding: var(--sp-4); }
  .aapp-meta-datos { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .aapp-tabs { border-radius: var(--radius); }
  .aapp-tab { flex: none; }
  .aapp-vital-hd { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .aapp-vital-val { grid-column: 1 / -1; font-size: 1.05rem; }
  .aapp-vital { padding: var(--sp-3) var(--sp-3) 6px; }
  .aapp-vital-nom { font-size: .7rem; }
  .aapp-rec-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  .aapp-rec-bar { grid-column: 1 / -1; }
  .aapp-rec-n { text-align: left; grid-row: 1; grid-column: 2; }
  .aapp-rec-sz { grid-row: 1; grid-column: 2; }
  .aapp-opp-hd { flex-direction: column; gap: 5px; }
  .aapp-check { padding: var(--sp-3); gap: 10px; }
  .aapp-check-hd strong { font-size: .84rem; }
  /* En pantallas estrechas la etiqueta y el valor dejan de compartir fila. */
  .aapp-comp-parte { grid-template-columns: 1fr; gap: 3px; }
  .aapp-comp-parte > strong { white-space: normal; }
  .aapp-inv-row { flex-wrap: wrap; }
  .aapp-inv-row > strong { text-align: left; }
}

@media (max-width: 420px) {
  .aapp-global-letra { font-size: 2rem; }
  .aapp-dim-ring, .aapp-dim-ring svg { width: 62px; height: 62px; }
  .aapp-dim-num { font-size: 1.12rem; }
}

/* ---------------- CABECERA MÓVIL: BOTÓN DE AUDITORÍA COMPACTO --------------
   Va aquí, al final, a propósito. El bloque de 1024 px declara más arriba
   `flex-wrap: wrap` y `gap: var(--sp-5)` (24 px) en `.header-inner`; si estas
   reglas se declarasen antes, esa cascada las anularía y a 320 px el asa de
   menú saltaría a una segunda fila, dejando el botón huérfano arriba.
   Objetivo: una sola fila con logotipo · botón · asa, sin que el botón añada
   altura ni robe espacio al logotipo ni al menú.
   El tamaño es fluido (clamp sobre el ancho del viewport) y el texto nunca se
   parte, así que el botón se encoge solo en pantallas estrechas. El ancho del
   logotipo se calcula restando el hueco del botón y del asa (`--bm`, en el
   bloque de 760 px), de modo que ambos conviven sin solaparse. */
@media (max-width: 600px) {
  .header-inner { gap: 8px; }
  .header-cta { gap: 0; }
  .header-cta .btn {
    padding: 6px 9px;
    font-size: clamp(0.66rem, 2.6vw, 0.8rem);
    line-height: 1.1;
    white-space: nowrap;
  }
  .nav-toggle { margin-left: 0; }
}

/* ------------------- 10. ACCESIBILIDAD Y PREFERENCIAS ------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
  .section { padding: 14px 0; }
}