/**
 * ============================================================================
 *  GRUPO GPS — Hoja de estilos unica
 * ============================================================================
 *  Arquitectura heredada de DOCUMENTO-TECNICO-DISENO.md (sitio estatico, sin
 *  framework y sin build: un solo CSS, modulos ES, cero dependencias en
 *  runtime). Se corrigen los 30 defectos del Anexo G de ese documento y se
 *  aplica la paleta de Grupo GPS en lugar del rojo del sitio de referencia.
 *
 *  INDICE
 *    01. Tokens (design system)
 *    02. Reset
 *    03. Estilos base y tipografia
 *    04. Utilidades
 *    05. Layout: contenedores, secciones y retículas
 *    06. Botones
 *    07. Tarjetas
 *    08. Cabecera, navegacion y drawer movil
 *    09. Hero
 *    10. Banda de metricas
 *    11. Servicios y pilares (tabs)
 *    12. Metodologia, capacidades y evidencia
 *    13. Cobertura y mapa
 *    14. Preguntas frecuentes
 *    15. Banda de CTA
 *    16. Formularios
 *    17. Footer
 *    18. Paginas internas (page-hero, breadcrumb, texto largo)
 *    19. Elementos flotantes
 *    20. Animaciones
 *    21. Accesibilidad
 *    22. Adaptacion (mobile-first, 4 puntos de ruptura)
 * ============================================================================
 */

/* ==========================================================================
   01. TOKENS
   El sitio de referencia declaraba 6 tokens sin usar y ninguno de espaciado,
   tamano, peso ni z-index. Aqui toda la escala esta tokenizada y en uso.
   ========================================================================== */
:root {
  /* --- Marca: oro y grafito de Grupo GPS -------------------------------- */
  --primary-deep: #0b0b0a;
  --primary: #151515;
  --primary-light: #242422;
  --brand: #f2ca20;              /* oro del logo: relleno y acento sobre oscuro */
  --brand-light: #f7dc63;
  --brand-bright: #fce9a0;
  --brand-dark: #c9a41a;
  --brand-ink: #7a5f00;          /* oro oscuro legible como texto (6,0:1 sobre blanco) */
  --brand-glow: rgba(242, 202, 32, .16);
  --brand-glow-strong: rgba(242, 202, 32, .3);

  /* Reservado exclusivamente al canal de emergencia 24/7 */
  --accent-alert: #d93a2b;
  --accent-alert-glow: rgba(217, 58, 43, .14);

  /* --- Superficies ------------------------------------------------------ */
  --bg-page: #faf9f5;
  --bg-surface: #ffffff;
  --bg-surface-subtle: #f4f2ea;
  --bg-dark: #151515;
  --bg-dark-alt: #1e1e1c;
  --bg-glass: rgba(255, 255, 255, .85);
  --border-subtle: #e7e3d7;
  --border-strong: #d8d3c3;
  --border-dark: rgba(255, 255, 255, .14);

  /* --- Texto ------------------------------------------------------------ */
  --text-main: #1c1c1a;
  --text-secondary: #4a4741;
  --text-muted: #6b6660;         /* 4,96:1 sobre bg-surface-subtle (AA) */
  --text-inverse: #ffffff;
  --text-inverse-muted: rgba(255, 255, 255, .74);

  /* --- Espaciado (el original no tenia ninguno) ------------------------- */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  /* --- Tipografia ------------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .88rem;
  --fs-base: 1rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.18rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: clamp(1.85rem, 3.4vw, 2.6rem);
  --fs-4xl: clamp(2.15rem, 4.2vw, 3.1rem);
  --fs-5xl: clamp(2.4rem, 5vw, 3.85rem);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.85;
  --tracking-tighter: -.04em;
  --tracking-tight: -.03em;
  --tracking-snug: -.01em;
  --tracking-wide: .08em;
  --tracking-wider: .12em;

  /* --- Forma ------------------------------------------------------------ */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(28, 28, 26, .05);
  --shadow-md: 0 4px 16px -2px rgba(28, 28, 26, .07), 0 2px 6px -1px rgba(28, 28, 26, .04);
  --shadow-lg: 0 16px 36px -4px rgba(28, 28, 26, .09), 0 6px 14px -2px rgba(28, 28, 26, .04);
  --shadow-glow: 0 0 40px -10px var(--brand-glow);

  /* --- Movimiento ------------------------------------------------------- */
  --transition-fast: .2s cubic-bezier(.16, 1, .3, 1);
  --transition-normal: .35s cubic-bezier(.16, 1, .3, 1);
  --transition-slow: .6s cubic-bezier(.16, 1, .3, 1);

  /* --- Capas (el original usaba 8 numeros magicos) ---------------------- */
  --z-base: 1;
  --z-raised: 10;
  --z-float: 990;
  --z-header: 1000;
  --z-dropdown: 1001;
  --z-drawer-backdrop: 1050;
  --z-drawer: 1100;
  --z-skip: 1200;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1240px;
  --container-narrow: 880px;
  --header-height: 76px;
}

/* ==========================================================================
   02. RESET
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

body { min-height: 100vh; }

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

img,
video { height: auto; }

input,
button,
textarea,
select { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol { list-style: none; padding: 0; }

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

/* ==========================================================================
   03. ESTILOS BASE Y TIPOGRAFIA
   El sitio de referencia no definia h1-h6 ni p: la jerarquia se resolvia
   caso por caso y producia microinconsistencias. Aqui hay escala global.
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-main);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-main);
  text-wrap: balance;
}

h1 { font-size: var(--fs-4xl); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-bold); }
h5 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
h6 { font-size: var(--fs-sm); font-weight: var(--fw-bold); }

p {
  color: var(--text-secondary);
  text-wrap: pretty;
}

p + p { margin-top: var(--space-sm); }

strong,
b { font-weight: var(--fw-bold); color: var(--text-main); }

small { font-size: var(--fs-sm); }

a { color: var(--brand-ink); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--primary); }

address { font-style: normal; }

/* ==========================================================================
   04. UTILIDADES
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-md);
  background: var(--brand);
  color: var(--primary);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible { transform: translateY(0); }

.text-gradient {
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-bright) 55%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.text-brand { color: var(--brand-ink); }
.text-inverse { color: var(--text-inverse); }

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.small { font-size: var(--fs-sm); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.stack { display: flex; flex-direction: column; gap: var(--space-md); }
.stack--sm { gap: var(--space-sm); }
.stack--lg { gap: var(--space-xl); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-lg);
}

.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

/* ==========================================================================
   05. LAYOUT: contenedores, secciones y reticulas
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-4xl);
}

.section--alt { background: var(--bg-surface-subtle); }
.section--tight { padding-block: var(--space-3xl); }
.section--dark { background: var(--bg-dark); }
.section--dark h2,
.section--dark h3,
.section--dark p { color: var(--text-inverse); }
.section--dark p { color: var(--text-inverse-muted); }

.section-header {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.section-badge {
  display: inline-block;
  padding: var(--space-3xs) var(--space-xs);
  margin-bottom: var(--space-sm);
  background: var(--brand-glow);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.section-title {
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.section-subtitle {
  margin-top: var(--space-sm);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* Encabezado de un subgrupo dentro de una seccion. Separa un bloque de
   tarjetas del siguiente sin competir con el h2 de la seccion: se usa, por
   ejemplo, para distinguir los servicios principales de los especiales. */
.subsection-title {
  margin-top: var(--space-2xl);
  font-size: var(--fs-xl);
  text-align: center;
  text-wrap: balance;
}

.subsection-note {
  max-width: 62ch;
  margin: var(--space-xs) auto var(--space-lg);
  text-align: center;
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-wrap: pretty;
}

.section--dark .section-badge {
  background: var(--brand-glow-strong);
  color: var(--brand);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.cards-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cards-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Grupos de CUATRO tarjetas que tienen que caer siempre en filas completas. Con
   `auto-fit` y un minimo de 280 px caian 3 arriba y 1 sola abajo, que es justo
   el descuadre que hay que evitar: el numero de columnas tiene que dividir 4,
   asi que solo se permiten 4, 2 o 1. Se fija a proposito en vez de dejarlo al
   `auto-fit`, que decide por el ancho disponible y no por el numero de piezas.
   Se usa en las regiones de /cobertura/ y en los problemas de la landing de
   guardias OS-10. */
.cards-grid--cuatro { grid-template-columns: 1fr; }

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

@media (min-width: 1024px) {
  .cards-grid--cuatro { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   06. BOTONES
   Regla 7 del documento: pildoras, icono a la izquierda, un solo boton
   primario por bloque.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn svg { flex: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-light), var(--brand));
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover { color: var(--primary); box-shadow: 0 8px 22px -8px var(--brand-glow-strong), var(--shadow-md); }

.btn-secondary {
  background: var(--brand-glow);
  color: var(--brand-ink);
}

.btn-secondary:hover { background: var(--brand-glow-strong); color: var(--brand-ink); }

.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-main);
}

.btn-outline:hover { border-color: var(--brand); color: var(--text-main); }

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

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

.btn-ghost-inverse {
  background: rgba(255, 255, 255, .1);
  border-color: var(--border-dark);
  color: var(--text-inverse);
}

.btn-ghost-inverse:hover { background: rgba(255, 255, 255, .18); color: var(--text-inverse); }

.btn-sm { min-height: 44px; padding: var(--space-2xs) var(--space-md); font-size: var(--fs-sm); }
.btn-lg { min-height: 56px; padding: var(--space-sm) var(--space-xl); font-size: var(--fs-md); }
.btn-block { width: 100%; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-icon:hover { background: var(--brand-glow); border-color: var(--brand); color: var(--text-main); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ==========================================================================
   07. TARJETAS
   Clase base que el sitio de referencia no tenia y duplicaba en 12 bloques.
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
              border-color var(--transition-normal);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-md);
  background: var(--brand-glow);
  color: var(--brand-ink);
  border-radius: var(--radius-md);
  flex: none;
}

.card-icon--dark {
  background: var(--brand-glow-strong);
  color: var(--brand);
}

.card-title {
  margin-bottom: var(--space-2xs);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
}

.card-subtitle {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.card-desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.card-actions { margin-top: auto; padding-top: var(--space-md); }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.card--featured {
  background: linear-gradient(160deg, var(--primary-light), var(--primary));
  border-color: transparent;
}

.card--featured .card-title,
.card--featured .card-desc { color: var(--text-inverse); }
.card--featured .card-desc { color: var(--text-inverse-muted); }
.card--featured .card-icon { background: var(--brand-glow-strong); color: var(--brand); }

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

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

/* Lista con marca de verificacion (reutilizable en servicios y FAQ) */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

/* El item NO es flex a proposito. Cuando el texto lleva un elemento en medio
   (un <strong>, un enlace), un contenedor flex parte el texto en varios
   elementos flexibles y el gap los separa como si fueran bloques: el punto se
   ve desalineado y descolocado. Con el icono en posicion absoluta, el texto
   fluye como texto normal y cualquier elemento dentro se comporta como parte
   de la frase. El relleno reserva el mismo hueco que antes (18 px del icono +
   el espacio del gap), asi que el resultado visual no cambia. */
.check-list li {
  position: relative;
  padding-left: calc(18px + var(--space-xs));
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.check-list svg {
  position: absolute;
  left: 0;
  top: .18em;
  color: var(--brand-ink);
}

/* ==========================================================================
   08. CABECERA, NAVEGACION Y DRAWER MOVIL
   El estado "scrolled" es una clase, no un estilo en linea aplicado por JS
   (defecto 16 del documento de referencia).
   ========================================================================== */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: box-shadow var(--transition-normal), background var(--transition-normal);
}

.navbar.is-scrolled { box-shadow: var(--shadow-md); }

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-height);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--text-main);
}

.brand:hover { text-decoration: none; color: var(--text-main); }
.brand-mark { width: 44px; height: 44px; flex: none; }

.brand-text { display: flex; flex-direction: column; line-height: 1.05; }

.brand-text-top {
  font-size: .7rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.brand-text-bottom {
  font-size: 1.02rem;
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
  color: var(--text-main);
}

.brand-text-bottom em { font-style: normal; color: var(--brand-ink); }

.nav-links { display: none; align-items: center; gap: var(--space-3xs); }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: var(--space-xs);
  right: var(--space-xs);
  bottom: .55rem;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.nav-link:hover,
.nav-link[aria-current='page'] { color: var(--text-main); text-decoration: none; }
.nav-link:hover::after,
.nav-link[aria-current='page']::after { transform: scaleX(1); }

.nav-dropdown { position: relative; }

.nav-dropdown-toggle { gap: var(--space-3xs); }
.nav-dropdown-toggle .caret { transition: transform var(--transition-fast); }
.nav-dropdown-toggle[aria-expanded='true'] .caret { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 268px;
  padding: var(--space-2xs);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
}

.nav-dropdown-menu.is-open { display: block; }

.nav-dropdown-menu a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-main);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.nav-dropdown-menu a:hover { background: var(--brand-glow); color: var(--text-main); text-decoration: none; }


.nav-actions { display: flex; align-items: center; gap: var(--space-2xs); margin-left: auto; }
.nav-actions .btn { display: none; }

.mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
}

.mobile-menu-btn:hover { background: var(--brand-glow); }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer-backdrop);
  background: rgba(12, 12, 11, .48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-drawer);
  width: min(360px, 88vw);
  height: 100%;
  padding: var(--space-md);
  background: var(--bg-surface);
  border-left: 1px solid var(--border-subtle);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-normal), visibility var(--transition-normal);
}

.mobile-drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.drawer-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }

.drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-main);
}

.drawer-nav { display: flex; flex-direction: column; }

.drawer-nav a {
  display: block;
  padding: var(--space-xs) var(--space-2xs);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-main);
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none;
}

.drawer-nav a:hover { color: var(--brand-ink); text-decoration: none; }

.drawer-nav .drawer-sub {
  padding-left: var(--space-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
  border-left: 2px solid var(--brand-glow-strong);
  border-bottom: 0;
}

.drawer-nav .drawer-group-title {
  padding: var(--space-sm) var(--space-2xs) var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.drawer-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-2xs); }

/* ==========================================================================
   09. FONDO DE HERO — capa comun de la portada y de cobertura
   La imagen se pinta como fondo de una capa con `background-attachment: fixed`:
   queda anclada a la ventana y la seccion se desliza por encima. No es una
   animacion autonoma —la imagen no se mueve sola, solo deja de acompanar al
   scroll—, asi que no necesita JavaScript ni depende de un tercero.
   `background-size: cover` es el equivalente a `object-fit: cover`: cubre la
   caja sea cual sea el tamano real del archivo, que no tiene por que coincidir
   con el tamano que se ve en pantalla. `background-position: center` mantiene el
   encuadre centrado y el `overflow: hidden` de la seccion recorta lo que
   sobresale.
   La mecanica es la misma en los tres sitios y por eso vive aqui una sola vez:
   **el archivo lo declara cada hero con un modificador de imagen**, mas abajo
   (`hero-media--ciudad`, `--satelital`, `--guardias`). Anadir un cuarto hero con
   imagen es anadir su modificador y la clase en el HTML.
   En iOS Safari `background-attachment: fixed` se ignora y la imagen acompana
   al scroll: se degrada sin romperse a lo que se veia antes. Con movimiento
   reducido se desactiva a proposito (ver mas abajo).
   IMPORTANTE: al ser un fondo CSS el navegador no lo descubre hasta que llega
   esta hoja, asi que cada pagina que lo use lo precarga con un `rel="preload"`
   en su cabecera. Y al no imprimirse por defecto, la hoja de impresion lo
   fuerza.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 760px);
  padding-top: calc(var(--header-height) + var(--space-3xl));
  padding-bottom: var(--space-3xl);
  background: var(--primary-deep);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* El archivo lo declara cada hero con su propio modificador. Se hace asi, y no
   por contexto (.hero / .page-hero), porque hay dos heroes distintos sobre
   `.page-hero` y una regla por contexto le daria la misma imagen a los dos. */
.hero-media--ciudad    { background-image: url('/assets/img/stgo.webp'); }
.hero-media--satelital { background-image: url('/assets/img/operacion/chile-satelital.webp'); }
.hero-media--guardias  { background-image: url('/assets/img/operacion/guardias-os10-acceso-corporativo.webp'); }
.hero-media--equipo    { background-image: url('/assets/img/operacion/equipo-turno-amanecer.webp'); }

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 11, 10, .94) 0%, rgba(11, 11, 10, .58) 22%, rgba(11, 11, 10, .46) 55%, rgba(11, 11, 10, .95) 100%),
    linear-gradient(95deg, rgba(11, 11, 10, .82) 0%, rgba(11, 11, 10, .26) 62%, rgba(11, 11, 10, .08) 100%);
}

.hero > .container { position: relative; z-index: 2; width: 100%; }

.hero-content { max-width: 62rem; }

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  background: rgba(255, 255, 255, .12);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-inverse);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.pulse-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--accent-alert);
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-alert);
  animation: pulse 2.4s cubic-bezier(.16, 1, .3, 1) infinite;
}

.hero-title {
  margin-top: var(--space-md);
  font-size: var(--fs-5xl);
  letter-spacing: var(--tracking-tighter);
  color: var(--text-inverse);
  text-wrap: balance;
}

.hero-description {
  max-width: 56ch;
  margin-top: var(--space-md);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text-inverse-muted);
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-dark);
}

.hero-fact { font-size: var(--fs-sm); color: var(--text-inverse-muted); }
.hero-fact strong { display: block; font-size: var(--fs-lg); font-weight: var(--fw-black); color: var(--brand); }

/* ==========================================================================
   10. BANDA DE METRICAS
   ========================================================================== */
.metrics-section { padding-block: var(--space-2xl); background: var(--bg-surface-subtle); }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.metric-card {
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: center;
}

.metric-number {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--text-main);
}

.metric-number .metric-suffix { color: var(--brand-ink); }

.metric-title {
  margin-top: var(--space-2xs);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.metric-desc {
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* ==========================================================================
   11. SERVICIOS Y PILARES (tabs)
   Las pestanas del sitio de referencia eran tarjetas clickeables sin
   semantica. Aqui usan role=tablist y aria-selected.
   ========================================================================== */
.service-card { position: relative; overflow: hidden; }

.service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.service-card:hover::before { transform: scaleX(1); }

.service-card .card-actions a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  text-decoration: none;
}

.service-card .card-actions a:hover { gap: var(--space-2xs); }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.pillar-card {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: left;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  transition: border-color var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast);
}

.pillar-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }

.pillar-card[aria-selected='true'] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-inverse);
}

.pillar-card[aria-selected='true'] .pillar-card-icon { background: var(--brand-glow-strong); color: var(--brand); }

.pillar-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--brand-glow);
  color: var(--brand-ink);
  border-radius: var(--radius-md);
}

.pillar-panel {
  padding: var(--space-xl);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.pillar-panel[hidden] { display: none; }
.pillar-panel-tagline { margin-top: var(--space-2xs); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand-ink); }

/* --- Servicio principal y complementos -----------------------------------
   La tarjeta del servicio principal ocupa la fila completa y se divide en dos
   columnas a partir de 900 px. Los complementos tecnologicos van en una banda
   discreta, para que acompanen sin competir con el servicio principal. */
.service-featured { grid-column: 1 / -1; }

.service-featured .card-title { font-size: var(--fs-2xl); }
.service-featured .card-desc { font-size: var(--fs-md); }

/* Sobre la tarjeta oscura del servicio principal, la lista de comprobacion
   necesita colores claros: por defecto usa el gris de texto sobre fondo claro. */
.card--featured .check-list li { color: var(--text-inverse-muted); }
.card--featured .check-list svg { color: var(--brand); }

.service-featured-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.service-badge {
  display: inline-block;
  /* Dentro de una .card (flex en columna) la insignia se estiraria a todo el
     ancho: align-self la deja como la pildora que es. Fuera de un flex no
     tiene efecto, asi que la instancia de la portada no cambia. */
  align-self: flex-start;
  margin-bottom: var(--space-xs);
  padding: var(--space-3xs) var(--space-xs);
  background: var(--brand);
  color: var(--primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.complementos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.complementos strong { color: var(--text-secondary); }
.complementos a { font-weight: var(--fw-semibold); }

/* ==========================================================================
   12. METODOLOGIA, CAPACIDADES Y EVIDENCIA
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-md);
  counter-reset: step;
}

.step {
  position: relative;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-sm);
  background: var(--primary);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  border-radius: var(--radius-md);
}

.step h3 { font-size: var(--fs-lg); }
.step p { margin-top: var(--space-2xs); font-size: var(--fs-sm); }

/* --- Variante de linea de tiempo ------------------------------------------
   Presenta los pasos en vertical: marcador circular numerado, conector
   discontinuo y tarjeta con borde superior de acento. Se inspira en una
   referencia visual de linea de tiempo por etapas, adaptada a los tokens de la
   marca: el acento dorado de marca en el borde y el anillo, y `--brand-ink`
   para el numero, que es el unico tono de la marca con contraste suficiente
   sobre fondo claro (6:1; el dorado puro no llega).
   NO necesita marcado nuevo: el marcador se saca fuera de la tarjeta con
   posicionamiento absoluto, asi que basta con anadir `steps--timeline` a un
   bloque `.steps` ya existente. */
.steps--timeline {
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 880px;
  margin-inline: auto;
}

.steps--timeline .step {
  margin-left: 5.5rem;                      /* hueco para el marcador */
  padding: var(--space-md) var(--space-lg);
  border-top: 3px solid var(--brand);       /* acento de marca */
}

.steps--timeline .step-number {
  position: absolute;
  top: 50%;
  left: -5.5rem;
  transform: translateY(-50%);
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 0;
  border: 2px solid var(--brand);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--brand-ink);
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-sm);
}

/* Conector discontinuo entre el marcador y la tarjeta */
.steps--timeline .step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -1.25rem;
  width: 1.25rem;
  border-top: 2px dashed var(--border-strong);
}

@media (max-width: 639px) {
  .steps--timeline .step { margin-left: 3.5rem; padding: var(--space-sm) var(--space-md); }
  .steps--timeline .step-number {
    left: -3.5rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--fs-md);
  }
  .steps--timeline .step::before { left: -0.75rem; width: 0.75rem; }
}

.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--space-md);
}

.capability {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.capability .card-icon { margin-bottom: 0; }
.capability h3 { font-size: var(--fs-base); }
.capability p { margin-top: var(--space-3xs); font-size: var(--fs-sm); }

/* --- Marquesina de logos de clientes -------------------------------------
   Los logos se desplazan de derecha a izquierda en bucle continuo. La pista
   lleva DOS copias identicas de la lista: cuando se ha desplazado justo la
   mitad de su ancho, la segunda copia esta donde empezo la primera y el salto
   no se percibe. Por eso el espaciado va como relleno DENTRO de cada grupo y no
   como separacion entre grupos: asi los dos miden exactamente lo mismo y el
   -50 % cuadra al pixel.
   Se detiene al pasar el raton. Con movimiento reducido se desactiva y los
   logos quedan en una reticula estatica centrada. */
.marquesina {
  --marquesina-duracion: 40s;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquesina-pista {
  display: flex;
  width: max-content;
  animation: marquesina var(--marquesina-duracion) linear infinite;
}

.marquesina:hover .marquesina-pista { animation-play-state: paused; }

.marquesina-grupo {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin: 0;
  padding-right: var(--space-xl);
}

.marquesina-grupo img {
  width: auto;
  height: 46px;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .8;
  transition: filter var(--transition-normal), opacity var(--transition-normal);
}

.marquesina-grupo img:hover { filter: grayscale(0); opacity: 1; }

@keyframes marquesina {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquesina { -webkit-mask-image: none; mask-image: none; }
  .marquesina-pista { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquesina-grupo { flex-wrap: wrap; justify-content: center; padding-right: 0; row-gap: var(--space-md); }
  .marquesina-grupo[aria-hidden='true'] { display: none; }
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--space-md);
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
}

.testimonial blockquote { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
.testimonial figcaption { display: flex; align-items: center; gap: var(--space-xs); margin-top: auto; }
.testimonial img { width: 44px; height: 44px; border-radius: var(--radius-full); object-fit: cover; }
.testimonial strong { display: block; font-size: var(--fs-sm); }
.testimonial span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   13. COBERTURA Y MAPA
   ========================================================================== */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
}

.coverage-card { border-left: 4px solid var(--brand); border-radius: var(--radius-lg); }
.coverage-card h3 { font-size: var(--fs-lg); }
.coverage-card p { margin-top: var(--space-2xs); font-size: var(--fs-sm); }
.coverage-card .coverage-region {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.map-wrapper {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  background: var(--bg-surface-subtle);
}

.map-wrapper iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.contact-card { display: flex; gap: var(--space-sm); align-items: flex-start; }
.contact-card .card-icon { margin-bottom: 0; }
.contact-card h3 { font-size: var(--fs-base); }
.contact-card a { font-size: var(--fs-sm); }

/* ==========================================================================
   14. PREGUNTAS FRECUENTES
   El sitio de referencia no tenia ningun acordeon. Se usa <details> nativo:
   funciona sin JavaScript y es accesible por teclado.
   ========================================================================== */
.faq { display: flex; flex-direction: column; gap: var(--space-xs); }

.faq-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item[open] { border-color: var(--brand); box-shadow: var(--shadow-sm); }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-main);
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
  content: '';
  width: 12px;
  height: 12px;
  flex: none;
  border-right: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.faq-item[open] .faq-question::after { transform: rotate(-135deg); }

.faq-answer { padding: 0 var(--space-md) var(--space-md); }
.faq-answer p { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.faq-answer p + p { margin-top: var(--space-xs); }

/* ==========================================================================
   15. BANDA DE CTA
   Regla 5 del documento: el oscuro marca el momento culminante.
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-3xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
}

.cta-band::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 460px;
  height: 460px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--brand-glow-strong) 0%, transparent 68%);
  pointer-events: none;
}

.cta-band .container { position: relative; z-index: var(--z-base); }
.cta-band h2 { color: var(--text-inverse); }
.cta-band p { max-width: 62ch; margin-top: var(--space-sm); color: var(--text-inverse-muted); font-size: var(--fs-lg); }
.cta-band .btn-row { margin-top: var(--space-lg); }
.cta-band--center { text-align: center; }
.cta-band--center p { margin-inline: auto; }
.cta-band--center .btn-row { justify-content: center; }

/* ==========================================================================
   16. FORMULARIOS
   Formulario propio que envia a n8n. Campos con etiqueta visible (no solo
   placeholder) y estado de error anunciado con aria-live.
   ========================================================================== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

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

.form-group { display: flex; flex-direction: column; gap: var(--space-3xs); }

.form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-main);
}

.form-label .req { color: var(--accent-alert); }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  color: var(--text-main);
  transition: border-color var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast);
}

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

.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--brand-dark); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  background: var(--bg-surface);
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }

.form-input[aria-invalid='true'],
.form-select[aria-invalid='true'],
.form-textarea[aria-invalid='true'] { border-color: var(--accent-alert); }

.form-hint { font-size: var(--fs-xs); color: var(--text-muted); }
.form-error { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent-alert); }
.form-error[hidden] { display: none; }

.form-check {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.form-check input {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: .1em;
  accent-color: var(--brand-dark);
}

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }

.form-status {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.form-status[hidden] { display: none; }
.form-status--ok { background: rgba(21, 128, 61, .1); color: #14603a; }
.form-status--error { background: var(--accent-alert-glow); color: #8f2318; }

/* Trampa anti-spam: invisible para personas, no con display:none */
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.site-footer { background: var(--primary); color: var(--text-inverse-muted); }

.footer-top { padding-block: var(--space-3xl) var(--space-xl); }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.footer-brand { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-brand img { width: 132px; height: auto; }
.footer-brand p { font-size: var(--fs-sm); color: var(--text-inverse-muted); }

.footer-col-title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand);
}

.footer-links { display: flex; flex-direction: column; gap: var(--space-2xs); }

.footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-sm);
  color: var(--text-inverse-muted);
  text-decoration: none;
}

.footer-link:hover { color: var(--brand); text-decoration: none; }

.footer-contact { display: flex; flex-direction: column; gap: var(--space-2xs); font-size: var(--fs-sm); }
.footer-contact a { color: var(--text-inverse-muted); text-decoration: none; }
.footer-contact a:hover { color: var(--brand); }

.footer-social { display: flex; gap: var(--space-2xs); margin-top: var(--space-xs); }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.footer-social a:hover { background: var(--brand-glow-strong); border-color: var(--brand); color: var(--brand); }

.footer-cert { display: flex; align-items: center; gap: var(--space-sm); }
.footer-cert img { width: 74px; height: auto; }
.footer-cert p { font-size: var(--fs-xs); color: var(--text-inverse-muted); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-md);
  border-top: 1px solid var(--border-dark);
  font-size: var(--fs-xs);
  color: var(--text-inverse-muted);
}

.footer-bottom a { color: var(--text-inverse-muted); }
.footer-bottom a:hover { color: var(--brand); }

/* ==========================================================================
   18. PAGINAS INTERNAS
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
}

/* --------------------------------------------------------------------------
   Variante con imagen de fondo, usada hoy solo en /cobertura/.
   Reutiliza la mecánica de `.hero-media` (ver seccion 09) y el oscurecedor de
   la portada, y **iguala la altura del hero de la portada** para que las dos
   cabeceras se vean iguales. El contenido es el propio de una pagina interna
   (badge, h1, entradilla y breadcrumb), que es lo unico que la distingue del
   hero de la portada.
   -------------------------------------------------------------------------- */
.page-hero--imagen {
  display: flex;
  align-items: center;
}

.page-hero--imagen > .container { width: 100%; z-index: 2; }

@media (min-width: 900px) {
  .page-hero--imagen { min-height: min(88vh, 760px); }
}

@media (min-width: 1280px) {
  .page-hero--imagen { min-height: min(90vh, 820px); }
}

.page-hero::after {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -40%;
  width: 520px;
  height: 520px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--brand-glow-strong) 0%, transparent 66%);
  pointer-events: none;
}

.page-hero .container { position: relative; z-index: var(--z-base); }

.page-hero-title { margin-top: var(--space-sm); color: var(--text-inverse); font-size: var(--fs-4xl); }
.page-hero-text { max-width: 66ch; margin-top: var(--space-sm); font-size: var(--fs-lg); color: var(--text-inverse-muted); }

.page-hero .section-badge { background: var(--brand-glow-strong); color: var(--brand); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--text-inverse-muted);
}

.breadcrumb a { color: var(--text-inverse-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb [aria-current='page'] { color: var(--brand); font-weight: var(--fw-semibold); }
.breadcrumb .sep { opacity: .6; }

.prose { max-width: 72ch; }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--fs-2xl); }
.prose h3 { font-size: var(--fs-xl); }
.prose h2 + *,
.prose h3 + * { margin-top: var(--space-xs); }
.prose p,
.prose li { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.prose ul,
.prose ol { display: flex; flex-direction: column; gap: var(--space-2xs); padding-left: var(--space-md); }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a { text-decoration: underline; }
.prose blockquote {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface-subtle);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-md);
}
.prose blockquote p { font-size: var(--fs-md); }
.prose code {
  padding: .1em .4em;
  background: var(--bg-surface-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .92em;
}
.prose table { font-size: var(--fs-sm); }
.prose th,
.prose td { padding: var(--space-xs); border-bottom: 1px solid var(--border-subtle); text-align: left; }
.prose th { font-weight: var(--fw-bold); color: var(--text-main); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--space-md);
}

.info-card {
  padding: var(--space-md);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.info-card h3 { font-size: var(--fs-base); }
.info-card p { margin-top: var(--space-2xs); font-size: var(--fs-sm); }

.note {
  padding: var(--space-md);
  background: var(--bg-surface-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.split img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

.timeline { display: flex; flex-direction: column; gap: var(--space-md); border-left: 2px solid var(--border-subtle); padding-left: var(--space-md); }
.timeline-item { position: relative; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-md) - 7px);
  top: .45rem;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--brand);
  border: 2px solid var(--bg-surface);
}
.timeline-year { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); color: var(--brand-ink); text-transform: uppercase; }
.timeline-item h3 { font-size: var(--fs-lg); margin-top: var(--space-3xs); }
.timeline-item p { font-size: var(--fs-sm); margin-top: var(--space-3xs); }

/* --- Blog ----------------------------------------------------------------
   El listado usa .blog-grid y las entradas .post-card. El cuerpo de una
   entrada reutiliza .prose, que ya existe para texto largo. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.post-card { padding: 0; overflow: hidden; }

.post-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-surface-subtle);
}

.post-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.post-card:hover .post-card-media img { transform: scale(1.04); }

.post-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
  padding: var(--space-md);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.post-card-title { font-size: var(--fs-xl); letter-spacing: var(--tracking-snug); }
.post-card-title a { color: inherit; text-decoration: none; }
.post-card-title a:hover { color: var(--brand-ink); }

.post-card-excerpt { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-secondary); }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-top: auto;
  padding-top: var(--space-sm);
}

.tag-pill {
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--brand-glow);
  color: var(--brand-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-full);
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
}

.post-nav a {
  display: block;
  padding: var(--space-sm);
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
}

.post-nav a:hover { border-color: var(--brand); color: inherit; text-decoration: none; }
.post-nav span { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.post-nav strong { display: block; margin-top: var(--space-3xs); font-size: var(--fs-sm); color: var(--text-main); }
.post-nav .is-next { text-align: right; }

.blog-empty {
  padding: var(--space-xl);
  text-align: center;
  background: var(--bg-surface-subtle);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
}

.blog-empty p { max-width: 52ch; margin-inline: auto; }

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

@media (min-width: 900px) {
  .service-featured-inner { grid-template-columns: 1.15fr .85fr; gap: var(--space-xl); align-items: start; }
}

/* ==========================================================================
   19. ELEMENTOS FLOTANTES
   ========================================================================== */
.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--primary);
  color: var(--brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal),
              background var(--transition-fast);
}

.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--primary-light); color: var(--brand); }

.whatsapp-float {
  position: fixed;
  left: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 52px;
  padding-inline: var(--space-sm);
  background: var(--primary);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.whatsapp-float:hover { transform: translateY(-2px); background: var(--primary-light); color: var(--brand); text-decoration: none; }

/* ==========================================================================
   20. ANIMACIONES
   Solo de entrada, nunca en bucle, y solo si hay JavaScript (patron anti
   pagina en blanco: sin JS todo se ve).
   ========================================================================== */
@keyframes pulse {
  0% { transform: scale(1); opacity: .7; }
  70% { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}

.js .fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.js .fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   21. ACCESIBILIDAD
   El sitio de referencia tenia una sola regla :focus-visible en 2873 lineas
   y con un color al 16 % de opacidad (practicamente invisible).
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.section--dark :focus-visible,
.page-hero :focus-visible,
.cta-band :focus-visible,
.site-footer :focus-visible,
.navbar :focus-visible { outline-color: var(--brand); }

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

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .fade-in-up { opacity: 1; transform: none; }

  /* El fondo anclado del hero es un efecto ligado al scroll: si se pide menos
     movimiento, la imagen vuelve a acompanar a la pagina como una foto normal. */
  .hero-media { background-attachment: scroll; }
}

@media (forced-colors: active) {
  .btn,
  .card,
  .faq-item,
  .form-input { border: 1px solid CanvasText; }
}

/* ==========================================================================
   22. ADAPTACION — mobile-first, 4 puntos de ruptura
   El sitio de referencia usaba 12 breakpoints (1200/1024/968/900/868/768/
   760/640/580/540/520/480) declarados en orden no monotono. Aqui: base movil
   y cuatro ampliaciones: 640, 900, 1024 y 1280. El blueprint proponia cinco
   valores fijos e invitaba a migrar a mobile-first; se eligio lo segundo y la
   base ya cubre el tramo de 480 px, que no necesita regla propia.
   ========================================================================== */

/* --- Ajustes para la base movil (menos de 640 px) --------------------- */
.section { padding-block: var(--space-3xl); }
.section-title { font-size: clamp(1.65rem, 6vw, 2.2rem); }
.hero-title { font-size: clamp(2.1rem, 9vw, 2.9rem); }
.page-hero-title { font-size: clamp(1.85rem, 7vw, 2.5rem); }
.hero { min-height: auto; padding-bottom: var(--space-2xl); }
.cta-band { padding-block: var(--space-2xl); }

@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .form-group--full { grid-column: 1 / -1; }
  .cards-grid { gap: var(--space-md); }
  .nav-actions .btn { display: inline-flex; }
}

@media (min-width: 900px) {
  .section { padding-block: var(--space-4xl); }
  .hero { min-height: min(88vh, 760px); padding-bottom: var(--space-3xl); }
  .split { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: .9fr 1.1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-lg); }
  .metrics-grid { grid-template-columns: repeat(4, 1fr); }
  .cards-grid--2 { gap: var(--space-lg); }
}

@media (min-width: 1024px) {
  .section-header { margin-bottom: var(--space-2xl); }
}

/* El menu de arriba necesita 1200 px: con siete entradas mas los botones de
   accion no cabe entre 1024 y 1200, y se desbordaria. Por debajo de ese ancho
   se usa el drawer, que lleva exactamente las mismas entradas, asi que no se
   pierde ninguna. Si se anade otra entrada al menu, hay que volver a medir. */
@media (min-width: 1200px) {
  .nav-links { display: flex; }
  .mobile-menu-btn { display: none; }
}

@media (min-width: 1280px) {
  .hero { min-height: min(90vh, 820px); }
  .container { padding-inline: var(--space-lg); }
}

/* La impresion tambien es un caso de uso: dossier de servicios en papel */
@media print {
  .navbar,
  .mobile-drawer,
  .drawer-backdrop,
  .whatsapp-float,
  .back-to-top,
  .cta-band { display: none !important; }

  body { background: #fff; color: #000; }
  .section { padding-block: 1rem; }
  .card,
  .page-hero { box-shadow: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; }

  /* Los fondos de hero son imagenes de fondo CSS y los navegadores no imprimen
     fondos por defecto. Sin forzarlo, el titular blanco quedaria invisible sobre
     papel blanco. Hay que incluirlo todo: el fondo, la seccion y, sobre todo, el
     oscurecedor, que es lo que da el contraste al texto. */
  .hero,
  .page-hero--imagen,
  .hero-media,
  .hero-overlay {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* En papel la imagen debe llenar la seccion, no la ventana: anclarla a la
     ventana no tiene sentido cuando no hay scroll. */
  .hero-media { background-attachment: scroll; }

  /* Con la imagen de fondo, la altura de ventana no aporta nada en papel */
  .page-hero--imagen { min-height: auto; }
}