/* ==========================================================================
   Vector Límbico — Landing
   main.css — tokens, reset y estilos base (mobile-first)
   Los ajustes de layout por breakpoint viven en responsive.css
   ========================================================================== */

:root {
  /* Paleta oficial (Brandbook — no modificar sin aprobación de Dirección) */
  --color-black: #121417;   /* Negro Grafito */
  --color-blue: #1D3557;    /* Azul Profundo */
  --color-teal: #2A9D8F;    /* Verde Tecnológico */
  --color-gray: #E9ECEF;    /* Gris Claro */
  --color-white: #FFFFFF;

  /* Único color fuera de la paleta de marca: rojo de error, necesario por
     convención universal de formularios (decisión de Fase 6). */
  --color-error: #B3261E;

  /* CTA: fondo Verde Tecnológico + texto Negro Grafito.
     Verificado en Fase 6: contraste 5.55:1 (cumple AA). Texto blanco sobre
     este verde da 3.32:1 y NO cumple AA en tamaño normal — no usar. */
  --btn-primary-bg: var(--color-teal);
  --btn-primary-text: var(--color-black);

  /* ------------------------------------------------------------------
     Fase 7.2 — corrección #7 (auditoría): clasificación explícita de
     todo color que no es parte de la paleta oficial de 5 colores.

     (B) Derivados por opacidad de un color oficial (Negro Grafito o
     Blanco) — se prefieren sobre un hex nuevo cuando son visualmente
     equivalentes al valor que reemplazan:
       --overlay-black-72  (antes #4b5157) texto de cuerpo sobre fondo claro
       --overlay-black-14  (antes #d8dcdf) bordes/divisores sobre fondo claro
       --overlay-white-80  (antes var(--overlay-white-80)) texto secundario sobre fondo oscuro
       --overlay-white-58  (antes var(--overlay-white-58)) texto terciario (footer)
       --overlay-white-20  (antes #3a4048) líneas decorativas sobre fondo oscuro

     (A) Color funcional de interfaz, no de identidad — no es reducible a
     opacidad porque necesita ser un color sólido (estado hover de un
     fondo, no un texto sobre fondo):
       --btn-primary-hover  Verde Tecnológico con ~10% menos luminosidad,
                            únicamente para :hover del botón primario.
     ------------------------------------------------------------------ */
  --overlay-black-72: rgba(18, 20, 23, 0.72);
  --overlay-black-14: rgba(18, 20, 23, 0.14);
  --overlay-white-80: rgba(255, 255, 255, 0.8);
  --overlay-white-58: rgba(255, 255, 255, 0.58);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --btn-primary-hover: #268a7d;

  /* Foco accesible (corrección #5): doble anillo Blanco + Negro Grafito.
     Verificado matemáticamente (README.md) para que al menos uno de los
     dos anillos tenga >=3:1 de contraste sobre Negro Grafito, Azul
     Profundo, Blanco y Verde Tecnológico. No se agrega ningún color
     nuevo: son los dos colores neutros de la paleta oficial. */

  --font-heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  --max-width: 1280px;
  --radius: 6px;
  --border-color: var(--overlay-black-14); /* antes #d8dcdf, ver clasificación arriba */

  --section-padding-y: var(--space-8);
}

/* ==========================================================================
   Fase 8.7 (corrección P1): self-hosting de Montserrat e Inter.
   Antes se cargaban desde fonts.googleapis.com — Lighthouse midió esa
   hoja externa como el recurso que más bloqueaba el render en todas las
   corridas (Fase 8.4, hallazgo P1). Son los mismos dos archivos que
   Google servía (variables, cubren los pesos 400–600 de Inter y 600–700
   de Montserrat en un solo archivo cada uno — confirmado comparando los
   propios @font-face que Google devuelve para esos pesos), en el mismo
   subset "latin" que ya se usaba (suficiente para todo el copy en
   español del sitio: á é í ó ú ñ ¿ ¡ están dentro de ese rango). No se
   cambió qué tipografías son ni su identidad — mismos archivos, mismos
   pesos, servidos desde el propio dominio en vez de un tercero.
   ========================================================================== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../assets/fonts/inter-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../assets/fonts/montserrat-variable-latin.woff2') format('woff2');
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Reset básico ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Fase 8.7 (corrección H5, investigado — NO era Google Fonts):
   "scroll-behavior: smooth" puesto directamente en <html> hacía que, al
   abrir una URL con #ancla (deep-link), el navegador tardara hasta ~2.5s
   en posicionarse — confirmado quitando esta línea en una prueba
   controlada (bajó a ~120ms). La causa es que el navegador reintenta la
   animación de scroll mientras el layout todavía se está asentando en la
   carga inicial. La solución mínima: el scroll suave solo se activa
   después del evento "load" (ver main.js, clase .smooth-scroll) — así
   un clic del usuario en un enlace interno sigue siendo suave, pero el
   posicionamiento inicial por URL nunca queda atrapado en esa animación. */
html.smooth-scroll { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-2); }

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

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -60px;
  background: var(--color-white);
  color: var(--color-black);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  z-index: 1000;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-2); }

/* Foco visible consistente en todo elemento interactivo (Fase 6, Parte 8).
   Corrección #5 (Fase 7.2): Azul Profundo por sí solo no tiene suficiente
   contraste sobre Negro Grafito ni sobre Verde Tecnológico. Se usa un
   doble anillo Blanco + Negro Grafito: verificado que, sobre cada uno de
   los 4 fondos posibles (Negro Grafito, Azul Profundo, Blanco, Verde
   Tecnológico), al menos uno de los dos anillos supera 3:1 —
   ver tabla de verificación en README.md. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-black);
  border-radius: 2px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  /* Fase 8.7 (corrección H1): padding-inline en vez del shorthand "padding".
     El shorthand fijaba también el eje vertical a 0, y como este mismo
     elemento también lleva la clase .header-inner (que define su propio
     padding vertical más abajo), la regla que se declarara después en el
     archivo ganaba la cascada y podía anular al otro eje sin querer —
     exactamente lo que pasaba en desktop con la regla de responsive.css.
     Separar los ejes (inline aquí, block en .header-inner) hace que sea
     estructuralmente imposible que una vuelva a pisar a la otra. */
  padding-inline: var(--space-2);
}

.section {
  padding: var(--section-padding-y) 0;
}
.section-alt { background: var(--color-gray); }
.section-dark {
  background: var(--color-black);
  color: var(--color-white);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Nunca Verde Tecnológico en texto pequeño: falla AA (3.32:1). Se usa Azul
     Profundo, que sí cumple sobre fondo blanco y sobre fondo oscuro. */
  color: var(--color-blue);
  margin-bottom: var(--space-2);
}
.section-dark .eyebrow { color: var(--color-gray); }

h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 19px; }

.subheadline {
  font-size: 17px;
  color: var(--overlay-black-72);
  max-width: 640px;
}
.section-dark .subheadline { color: var(--overlay-white-80); }

.section-header { margin-bottom: var(--space-4); }
.section-header.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-header.center .subheadline { margin-left: auto; margin-right: auto; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
}
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-primary[disabled] { opacity: .6; cursor: default; }

.btn-secondary {
  background: transparent;
  border-color: currentColor;
  color: var(--color-black);
}
.section-dark .btn-secondary,
.btn-on-dark.btn-secondary { color: var(--color-white); }
.btn-secondary:hover { background: rgba(0,0,0,0.06); }
.section-dark .btn-secondary:hover,
.btn-on-dark.btn-secondary:hover { background: rgba(255,255,255,0.1); }

.btn-small { min-height: 36px; padding: 8px 18px; font-size: 14px; }

.cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.cta-group .btn { width: 100%; }

/* ---------- Header ----------
   Fase 7.2 (correcciones #1 y #6): el header se mantiene SIEMPRE en Negro
   Grafito en V1. Se elimina la transición a fondo blanco y el swap de
   logo claro/oscuro: los PNG actuales no tienen una variante correcta
   para fondo claro (wordmark blanco sobre blanco). El estado "scrolled"
   se conserva solo como un refuerzo visual sutil (línea divisoria), no
   como cambio de color — así se ve intencional y no como algo temporal
   a medio terminar. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-black);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--overlay-white-20); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Fase 8.7 (corrección H1): padding-block en vez de padding-top/bottom
     sueltos — mismo motivo que en .container arriba. */
  padding-block: var(--space-2);
}

.logo-link { display: flex; align-items: center; text-decoration: none; }

/* Fase 7.3 (corrección #1): ya no se recorta por CSS. isotipo-oscuro-web.png
   es un derivado técnico real (recorte de canvas por sharp, sin
   recolorear ni redibujar — ver README.md) con una relación de aspecto
   correcta (~1.9:1), así que solo hace falta darle una altura razonable
   y dejar que el ancho fluya. */
.logo-img { display: block; height: 40px; width: auto; }
.logo-img-footer { height: 32px; }

.main-nav { display: none; } /* se activa en desktop, ver responsive.css */

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-actions .btn-primary.btn-small { display: none; } /* aparece en desktop */

.menu-toggle {
  background: none;
  border: none;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  /* El header ya no cambia de color (correcciones #1/#6): el ícono se
     mantiene blanco siempre. */
  background: var(--color-white);
  position: relative;
}
.menu-icon::before { content: ''; position: absolute; top: -7px; left: 0; }
.menu-icon::after { content: ''; position: absolute; top: 7px; left: 0; }

.mobile-menu { background: var(--color-white); border-top: 1px solid var(--border-color); }
.mobile-menu ul { padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-menu a:not(.btn) {
  display: block;
  padding: 12px 8px;
  color: var(--color-black);
  text-decoration: none;
  min-height: 44px;
}
.mobile-menu .btn { width: 100%; margin-top: var(--space-1); }
.mobile-menu[hidden] { display: none; }

/* ---------- Hero ----------
   Fase 8.7 (corrección H2+H3+U11): en mobile, el padding vertical de
   --space-8 (64px) + el gráfico a max-width:420px empujaban el CTA
   secundario fuera del primer viewport (confirmado en Fase 8.2 con
   captura real a 390x844 y 360x800). Se reduce el padding y el tamaño
   del gráfico solo en la base mobile-first; tablet y desktop restauran
   los valores originales explícitamente en responsive.css, así que su
   apariencia no cambia. No se tocó el H1, el copy, los CTA ni el orden. */
.hero {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--space-6) 0;
}
.hero-inner { display: flex; flex-direction: column; gap: var(--space-4); }
.hero-text { max-width: 640px; }
.hero h1 { font-size: 34px; margin-bottom: var(--space-2); }
.hero .subheadline { color: var(--overlay-white-80); }
/* Fase 8.7.2: el Hero pasó a tener dos párrafos de subheadline (copy
   aprobado por Dirección). El segundo empujaba el CTA secundario 16px
   fuera del viewport en 360x800 (detectado al validar). Ajuste mínimo de
   espaciado, no de copy. Nota: reducir solo margin-top del segundo
   párrafo no alcanzaba por colapso de márgenes (el margin-bottom de
   17px del primero seguía dominando) — hay que reducir ambos lados. No
   afecta el espacio hacia el CTA: el margin-top de 32px del grupo de
   botones sigue siendo mayor y sigue dominando esa otra colapsión. */
.hero .subheadline { margin-bottom: 4px; }
.hero .subheadline + .subheadline { margin-top: 4px; }
.hero-visual { order: -1; }
.hero-visual svg { width: 100%; height: auto; max-width: 170px; margin: 0 auto; display: block; }

/* ---------- Solución (marco Datos→Decisión) ---------- */
.flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.flow-step {
  border-top: 3px solid var(--color-teal);
  padding-top: var(--space-2);
}
.flow-step h3 { color: var(--color-blue); }
.flow-closing {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
  font-size: 15px;
  color: var(--overlay-black-72);
}

/* ---------- Sectores ---------- */
.sectores-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.sector-card {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.sector-card.principal {
  border-color: var(--color-teal);
  border-width: 2px;
}
.sector-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-blue);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.sectores-secundarios {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* ---------- Servicios ---------- */
.servicios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.servicio-card {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.servicio-card .icon { width: 28px; height: 28px; color: var(--color-teal); margin-bottom: var(--space-2); }
.servicio-card .pregunta { font-weight: 500; margin: 0 0 4px; }
.servicio-card .nombre {
  /* Fase 8.7 (corrección A3): antes era <p>, ahora <h3> por semántica
     (navegación por encabezados). Se fija line-height explícito para que
     el cambio de etiqueta no altere el espaciado visual heredado del
     estilo global h1/h2/h3. */
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-blue);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Método VECTOR ---------- */
.metodo-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border-left: 2px solid var(--color-gray);
  padding-left: var(--space-3);
}
.metodo-step { position: relative; }
.metodo-step::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-3) - 6px);
  top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-teal);
}
.metodo-step .letra {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  color: var(--color-blue);
  margin-right: 8px;
}
.metodo-closing {
  margin-top: var(--space-4);
  font-size: 15px;
  color: var(--overlay-black-72);
}

/* ---------- Por qué Vector Límbico ---------- */
.manifiesto { text-align: center; }
.manifiesto .statement {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  margin: var(--space-2) 0 var(--space-6);
}
.principios { max-width: 680px; margin: 0 auto; }
.principio {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding: var(--space-3) 0;
}
.principio:first-child { border-top: none; }
.principio h3 { color: var(--color-white); font-size: 18px; }
.principio p { margin: 0; color: var(--overlay-white-80); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-2) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-black);
}
.faq-icon { flex-shrink: 0; margin-left: var(--space-2); transition: transform .15s ease; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
/* Fase 7.2 (corrección #4): se quitó la animación de max-height. El
   estado real de abierto/cerrado lo da el atributo "hidden" (ver faq.php
   y main.js), que oculta la respuesta también para tecnologías
   asistivas — no solo visualmente. La prioridad es accesibilidad
   correcta, no una transición sofisticada. */
.faq-answer { padding-top: var(--space-1); }
.faq-answer p { margin: 0 0 var(--space-3); color: var(--overlay-black-72); }
.faq-closing { text-align: center; margin-top: var(--space-4); }

/* ---------- CTA final + Contacto ---------- */
.cta-final { background: var(--color-blue); color: var(--color-white); }
.cta-final .subheadline { color: var(--overlay-white-80); } /* consolidado, ver corrección #7 */
.cta-final-inner { display: flex; flex-direction: column; gap: var(--space-6); }

.form-field { margin-bottom: var(--space-3); }
.form-field label {
  display: block;
  font-weight: 500;
  margin-bottom: 6px;
  font-size: 14px;
}
.form-field input,
.form-field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--color-white);
  color: var(--color-black);
}
.form-field .error-message {
  display: none;
  color: #ffb4ab;
  font-size: 13px;
  margin-top: 6px;
}
.form-field.has-error input,
.form-field.has-error select { border-color: var(--color-error); }
.form-field.has-error .error-message { display: block; }

.form-status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
  display: none;
}
.form-status.visible { display: block; }
.form-status.success { background: #1f4d3f; color: #d7f5e9; }
.form-status.error { background: #4d1f1f; color: #f5d7d7; }

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

/* Fase 8.7.2: microcopy del compromiso de respuesta (24h) bajo el botón
   del formulario. Sin esta regla el texto heredaría el color de cuerpo
   (Negro Grafito) sobre el fondo Azul Profundo de esta sección, ilegible
   por falta de contraste — se reutiliza el mismo token de opacidad que ya
   usa el resto del texto secundario sobre fondo oscuro, no un color nuevo. */
.form-microcopy {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  text-align: center;
  color: var(--overlay-white-80);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-black); color: var(--overlay-white-80); padding: var(--space-6) 0 var(--space-4); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.footer-brand img { height: 24px; margin-bottom: var(--space-2); }
.footer-brand p { margin: 0; color: var(--overlay-white-58); }
.footer-col h3 { color: var(--color-white); font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-2); }
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: var(--overlay-white-80); text-decoration: none; }
.footer-col a:hover { color: var(--color-white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: var(--space-4); padding-top: var(--space-3); color: var(--overlay-white-58); }

/* Fade-in sutil (Fase 5): se desactiva por completo con prefers-reduced-motion */
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ---------- Página legal (Fase 8.9 — Aviso de Privacidad) ----------
   Único contenido largo tipo documento del sitio; el reset global quita
   bullets/márgenes a "ul" y el resto de includes nunca usó listas de
   texto corrido, así que aquí se restauran solo dentro de .legal-content,
   sin tocar ninguna regla global existente. */
.legal-content {
  max-width: 760px;
  padding-block: var(--space-8) var(--space-12);
}
.legal-content h2 {
  margin-top: var(--space-6);
}
.legal-content p {
  margin: 0 0 var(--space-2);
  color: var(--overlay-black-72);
}
.legal-content ul {
  list-style: disc;
  padding-left: var(--space-3);
  margin: 0 0 var(--space-2);
}
.legal-content li {
  margin-bottom: 8px;
  color: var(--overlay-black-72);
}
.legal-content a { color: var(--color-blue); }
.legal-updated {
  font-size: 14px;
  color: var(--overlay-black-72);
  margin-bottom: var(--space-4);
}
.legal-status-note {
  background: var(--color-gray);
  border-left: 4px solid var(--color-error);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  font-size: 15px;
}