/* =========================================================
   4GP | Grupo Promotor — style.css
   Mobile-first. Variables de marca, tipografía Montserrat,
   grid responsive, carrusel infinito en CSS puro.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta oficial 4GP (tomada del logotipo) */
  --blue-900: #171A4A;
  --blue-800: #1E2266;
  --blue-700: #2B2E86;
  --blue-600: #34378F;
  --blue-100: #EAEBF6;

  --orange-600: #E85F1C;
  --orange-500: #F2701D;
  --orange-100: #FEEEE2;
  /* Mismo hue que la marca, oscurecido para texto pequeño: #E85F1C sobre
     blanco da 3.45:1 (falla WCAG AA de 4.5:1 en texto). Esta variante
     es exclusiva de texto; los fondos/iconos siguen usando orange-500/600. */
  --orange-ink: #B8420A;

  --gray-050: #F6F7F9;
  --gray-100: #F0F2F5;
  --gray-200: #E3E6EB;
  /* Reservado para uso no textual (ilustración, placeholders de imagen).
     #9CA3AF como texto da <2.6:1 sobre blanco o gray-050 — usa gray-600. */
  --gray-400: #9CA3AF;
  --gray-600: #5B6472;

  --white: #FFFFFF;
  --text: #1C2130;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(23, 26, 74, 0.04), 0 12px 28px -12px rgba(23, 26, 74, 0.12);
  /* Curvas fuertes, no las de CSS por defecto (demasiado débiles para
     sentirse intencionales). --ease ya funcionaba como ease-out fuerte;
     --ease-out queda como alias explícito y --ease-in-out es nuevo,
     para movimiento que ocurre en pantalla (crossfade del carrusel). */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .container { padding-inline: 32px; }
}

section { padding-block: 64px; }
@media (min-width: 1024px) { section { padding-block: 100px; } }

.section--alt { background: var(--gray-050); }
.section--dark { background: var(--blue-900); color: var(--white); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
  margin-bottom: 14px;
}

.section-kicker {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.01em;
  color: var(--blue-700);
  margin-bottom: 8px;
}

h1, .h1 {
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--blue-900);
  text-wrap: balance;
}

h2, .h2 {
  font-weight: 800;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--blue-900);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  text-wrap: balance;
  color: var(--blue-900);
}

.lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--gray-600);
  max-width: 58ch;
  text-wrap: pretty;
}

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

.section-head {
  max-width: 640px;
  margin-bottom: 44px;
}
.section-head.center { margin-inline: auto; text-align: center; }

/* Encabezado de intro del inicio: contenedor más ancho para que el título
   quepa en dos renglones (con 640px se partía en cuatro) y párrafo
   justificado con la última línea centrada para no dejar huecos. */
.section-head--intro { max-width: 960px; }
.section-head--intro h2 { text-wrap: balance; }
.section-head--intro .lead {
  max-width: 62ch;
  text-align: justify;
  text-align-last: center;
}
@media (max-width: 620px) {
  /* En móvil el justificado abre huecos feos en columna angosta. */
  .section-head--intro .lead { text-align: center; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  /* 150ms para el press (feedback debe sentirse instantáneo, 100-160ms);
     200ms ease para color/fondo/borde (hover), no los 350ms de antes
     que hacían sentir el botón perezoso. */
  transition: transform 150ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 18px; height: 18px; }

.btn-primary {
  /* Texto índigo, no blanco: blanco sobre orange-500 da 2.95:1
     (falla WCAG AA incluso como texto grande). blue-900 sobre
     orange-500/600 da 5.5:1 / 4.7:1 — pasa, y ata los dos colores
     de marca en el mismo botón en vez de introducir negro. */
  background: var(--orange-500);
  color: var(--blue-900);
}

.btn-outline {
  background: transparent;
  border-color: rgba(23, 26, 74, 0.16);
  color: var(--blue-900);
}

.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--orange-600); transform: translateY(-2px); }
  .btn-outline:hover { border-color: var(--blue-700); background: var(--blue-100); }
  .btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }
}

.btn-block { width: 100%; justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-200);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__brand img { height: 38px; width: auto; }

.nav__links {
  display: none;
  align-items: center;
  gap: 6px;
}

.nav__links a {
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--text);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__links a:hover { background: var(--gray-100); }
.nav__links a.is-active { color: var(--blue-700); font-weight: 700; background: var(--blue-100); }

.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__actions .btn { padding: 12px 22px; }

.nav__toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: 8px;
  color: var(--blue-900);
}
.nav__toggle .icon { width: 26px; height: 26px; }
.nav__toggle[data-open="true"] .icon--menu { display: none; }
.nav__toggle:not([data-open="true"]) .icon--close { display: none; }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 24px;
  border-top: 1px solid var(--gray-200);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  padding: 14px 4px;
  font-weight: 600;
  border-bottom: 1px solid var(--gray-100);
}
.nav__mobile a.is-active { color: var(--blue-700); }
.nav__mobile .btn { margin-top: 14px; }

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__toggle, .nav__mobile { display: none !important; }
}

/* ---------- Hero banner (carrusel de ancho completo) ----------
   Seguridad primero (misma lección que .reveal): la primera slide es
   `.is-active` en el HTML servido por PHP, sin depender de JS ni de
   ninguna espera. Si el script no carga, el banner es simplemente una
   foto fija con el texto ya legible encima — nunca una sección en
   blanco ni a medio transicionar. */
.hero-banner {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-900);
  display: flex;
  align-items: center;
  padding-block: 64px;
}
@media (min-width: 768px) { .hero-banner { min-height: 560px; } }

.hero-carousel__track { position: absolute; inset: 0; z-index: -2; }
.hero-carousel__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-in-out);
}
.hero-carousel__slide.is-active { opacity: 1; }
.hero-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }

.hero-banner__scrim {
  /* Concentrado en el tercio izquierdo, donde vive el texto — antes se
     extendía hasta el 78% del ancho y tapaba media foto. Se desvanece
     rápido después del 45% para dejar ver la fotografía completa. */
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(23,26,74,0.96) 0%, rgba(23,26,74,0.88) 20%, rgba(23,26,74,0.55) 38%, rgba(23,26,74,0.2) 50%, rgba(23,26,74,0.05) 62%),
    linear-gradient(0deg, rgba(23,26,74,0.5) 0%, rgba(23,26,74,0) 35%);
}
@media (max-width: 767px) {
  .hero-banner__scrim {
    background:
      linear-gradient(0deg, rgba(23,26,74,0.95) 15%, rgba(23,26,74,0.55) 60%, rgba(23,26,74,0.35) 100%);
  }
}

.hero-banner__content {
  /* Sin .container: el texto arranca cerca del borde real del
     viewport (no del contenedor de 1220px centrado), para no dejar
     una franja vacía en pantallas anchas. */
  max-width: 640px;
  width: 100%;
  padding-inline: clamp(20px, 6vw, 88px);
  color: var(--white);
}
.hero-banner__content h1 {
  color: var(--white);
  /* Más grande que el H1 compartido: este hero es de ancho completo
     y con foto, puede sostener más peso tipográfico (tope 6rem). */
  font-size: clamp(2.4rem, 6vw, 4.4rem);
}
.hero-banner__content .lead {
  color: rgba(255,255,255,0.88);
  margin-top: 22px;
  max-width: 52ch;
}
.hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ---------- Cifras destacadas ---------- */
.hero-stats {
  background: var(--gray-050);
  border-bottom: 1px solid var(--gray-200);
  padding-block: 40px;
}
.hero-stats__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 20px 64px;
  text-align: center;
}
.hero-stats__grid strong {
  display: block;
  font-size: clamp(2.2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--blue-900);
}
.hero-stats__grid span { font-size: 0.9rem; color: var(--gray-600); }

.hero-carousel__toggle {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  /* 44px mínimo táctil (WCAG 2.5.5); el ícono visual sigue en 15px. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(23,26,74,0.4);
  backdrop-filter: blur(6px);
  color: var(--white);
  display: grid;
  place-items: center;
  transition: background-color 200ms ease, transform 150ms var(--ease-out);
}
.hero-carousel__toggle .icon { width: 15px; height: 15px; }
.hero-carousel__toggle .icon--play { display: none; }
.hero-carousel__toggle[data-paused="true"] .icon--pause { display: none; }
.hero-carousel__toggle[data-paused="true"] .icon--play { display: block; }
.hero-carousel__toggle:active { transform: scale(0.92); }

.hero-carousel__nav {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-carousel__dot {
  /* Caja fija de 20x8 para que activar un punto nunca mueva el layout;
     el pill visual (::after) crece con transform: scaleX, no con
     `width` — animar width/height causa layout thrash. */
  position: relative;
  width: 20px;
  height: 8px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hero-carousel__dot::before {
  /* Zona táctil invisible de 44x44 (WCAG 2.5.5) centrada en el pill,
     que visualmente sigue siendo un punto pequeño. */
  content: '';
  position: absolute;
  inset: -18px -12px;
}
.hero-carousel__dot::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.45);
  transform: translateY(-50%) scaleX(1);
  transform-origin: left center;
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.hero-carousel__dot.is-active::after { background: var(--white); transform: translateY(-50%) scaleX(2.5); }

@media (hover: hover) and (pointer: fine) {
  .hero-carousel__toggle:hover { background: rgba(23,26,74,0.6); }
  .hero-carousel__dot:hover { background: rgba(255,255,255,0.75); }
}

/* ---------- Marquee de clientes ---------- */
.trust {
  padding-block: 48px;
  border-block: 1px solid var(--gray-200);
}
.trust__label {
  text-align: center;
  font-size: 0.85rem;
  color: var(--gray-600);
  margin-bottom: 28px;
}
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 56px;
  align-items: center;
}

/* Arranca solo cuando la sección entra en pantalla (ver script.js), con
   un delay antes del primer scroll para que el logo inicial (Gayosso)
   se alcance a ver quieto un momento en vez de aparecer ya a medio recorrido. */
.marquee__track.is-playing {
  animation: marquee-scroll 38s linear infinite;
  animation-delay: 1s;
}
.marquee__set {
  display: flex;
  gap: 56px;
  align-items: center;
  flex-shrink: 0;
}
.marquee__track img {
  /* 44px (antes 34px): a la altura anterior los logotipos de tipo texto
     (Educación, Función Pública) se leían más chicos que los de ícono
     sólido (CFE, SEP) aunque ambos ya midieran lo mismo de alto — el
     trazo delgado da menos peso visual. Subir el alto base ayuda a
     ambos tipos sin romper la proporción entre ellos. */
  height: 44px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

/* Farmacias Similares y Grupo Estrella Blanca: el cliente pidió
   explícitamente que estos dos logos se vean más grandes que el resto. */
.marquee__track img.marquee__logo--large {
  height: 68px;
  max-width: 220px;
}

@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__track { animation-play-state: paused; }
}

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

/* Con animaciones reducidas, la regla genérica de arriba ("1 iteración
   casi instantánea") dejaría el carrusel congelado mostrando solo la
   copia decorativa a medio recorrido. En su lugar: sin animación,
   oculta la copia duplicada y despliega el set real completo en una
   cuadrícula estática que envuelve línea, para que ningún logo quede
   recortado. Va después de las reglas base para ganar el empate de
   especificidad por orden de aparición. */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .marquee__track { animation: none !important; width: 100%; }
  .marquee__track .marquee__set[aria-hidden] { display: none; }
  .marquee__track .marquee__set:not([aria-hidden]) {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

/* ---------- Grid Enfoque (6 tarjetas) ---------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Recuadros en azul marino con línea naranja: el cliente pidió acercar
   el estilo a sus fotos de referencia (fondo azul marino, líneas
   naranja, letras blancas) en vez del recuadro blanco/negro anterior. */
.pillar-card {
  background: var(--blue-900);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    background: var(--blue-800);
  }
}
.pillar-card__icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  margin-bottom: 18px;
}
.pillar-card__icon .icon { width: 24px; height: 24px; }
/* h3 hereda color: var(--blue-900) por defecto (ver regla global h3 en
   la línea ~133) — hay que sobrescribirlo aquí o el título quedaría
   azul marino sobre fondo azul marino, invisible. */
.pillar-card h3 {
  color: var(--white);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--orange-500);
}
.pillar-card p { font-size: 0.92rem; color: var(--blue-100); }

/* ---------- Líneas de negocio ---------- */
.lines {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) { .lines { grid-template-columns: 1fr 1fr; } }

.line-card {
  /* Formato portrait: las fotos reales de 4GP (técnicos, sucursal) son
     verticales; forzarlas a una caja panorámica las recortaba casi a
     la mitad. 3:4 deja ver la foto casi completa. */
  position: relative;
  /* min-width:0 evita que aspect-ratio infle el tamaño mínimo de la
     columna del grid (lo que empujaba la página hacia la derecha). */
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  padding: 36px;
  color: var(--white);
  isolation: isolate;
}
/* En escritorio ambas tarjetas (Cómputo y Terminales) deben verse como
   un mismo bloque visual: mismo ancho (1fr del grid) y mismo alto fijo
   de 710px, sin aspect-ratio de por medio, para que sean simétricas. */
@media (min-width: 900px) { .line-card { aspect-ratio: auto; height: 710px; } }

/* Variante ancha: en móvil la foto de "Terminales Portátiles" es
   panorámica (técnico + terminal en el mismo plano) — forzarla a la
   caja portrait de arriba habría mostrado solo la mitad del ancho. 4:3
   deja ver el encuadre completo ahí. En escritorio esta regla no debe
   aplicar: las dos tarjetas comparten el mismo alto fijo de arriba. */
@media (max-width: 899px) { .line-card--wide { aspect-ratio: 4 / 3; } }
.line-card__media {
  /* Contenedor propio para la foto: permite un zoom de encuadre fijo
     (acercar al sujeto real) sin pelear con el scale(1.05) del hover,
     que vive en el <img> hijo. overflow:hidden recorta el exceso del
     zoom sin salirse de las esquinas redondeadas de .line-card. */
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.line-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-in-out);
}
/* Fotos reales de 4GP en formato portrait: con la tarjeta ahora en
   3:4/4:5 (ver .line-card arriba), el recorte automático ya deja ver
   80-90% de la foto — solo hace falta un encuadre vertical fino, sin
   el zoom agresivo que necesitaban las fotos panorámicas anteriores. */
.line-card__media--computo img { object-position: 50% 28%; }
/* La foto de terminales ya viene precortada en 4:3 (incluye al técnico
   y las terminales en el encuadre), así que usa el centro por defecto. */

@media (hover: hover) and (pointer: fine) {
  .line-card:hover .line-card__media img { transform: scale(1.05); }
}
.line-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23,26,74,0.92) 10%, rgba(23,26,74,0.35) 60%, rgba(23,26,74,0.15));
  z-index: -1;
}
/* La tarjeta ancha lleva un texto mucho más corto (una sola línea), así
   que el degradado solo necesita cubrir la franja baja donde vive ese
   texto; dejar el resto más claro evita tapar las terminales portátiles
   que aparecen en la mitad inferior de la foto. */
.line-card--wide::after {
  background: linear-gradient(0deg, rgba(23,26,74,0.88) 6%, rgba(23,26,74,0.4) 34%, rgba(23,26,74,0.1) 55%);
}
/* El degradado más claro deja partes de la foto (pantallas de las
   terminales) directamente detrás del texto; una sombra da contraste
   garantizado sin necesidad de oscurecer más la imagen. */
.line-card--wide h3,
.line-card--wide p {
  text-shadow: 0 2px 10px rgba(9,11,38,0.85);
}
.line-card__body { max-width: 420px; }
.line-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.25);
  margin-bottom: 16px;
}
.line-card__icon .icon { width: 22px; height: 22px; }
.line-card h3 { color: var(--white); font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
.line-card p { color: rgba(255,255,255,0.82); font-size: 0.95rem; margin-bottom: 20px; }

/* ---------- Cómo trabajamos ---------- */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 900px) { .process { grid-template-columns: repeat(5, 1fr); gap: 20px; } }

/* Mismo lenguaje que las tarjetas de "Por qué 4GP" (.pillar-card): fondo
   azul marino, título blanco con línea naranja y texto en azul claro.
   El cliente pidió unificar estas secciones con ese estilo. */
.process-step {
  background: var(--blue-900);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  position: relative;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    background: var(--blue-800);
  }
}
.process-step__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--orange-500);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  display: block;
}
/* h3 hereda color azul marino por la regla global; sobre fondo navy
   quedaría invisible, hay que forzar blanco + línea naranja. */
.process-step h3 {
  color: var(--white);
  margin-bottom: 12px;
  padding-bottom: 12px;
  font-size: 1.05rem;
  border-bottom: 2px solid var(--orange-500);
}
.process-step p { font-size: 0.9rem; color: var(--blue-100); }

/* ---------- Industrias ---------- */
.industries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .industries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .industries { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* Mismo estilo de tarjeta azul marino que "Por qué 4GP" y "Cómo
   trabajamos": fondo navy, chip de ícono naranja, título blanco y
   texto en azul claro. El chip conserva el naranja como acento. */
.industry {
  display: flex;
  gap: 16px;
  padding: 26px 24px;
  background: var(--blue-900);
  border-radius: var(--radius-md);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), background 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .industry:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
    background: var(--blue-800);
  }
}
.industry__icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--orange-100);
  color: var(--orange-600);
}
.industry__icon .icon { width: 22px; height: 22px; }
.industry h3 { color: var(--white); font-size: 1rem; margin-bottom: 6px; }
.industry p { font-size: 0.88rem; color: var(--blue-100); }

/* ---------- Video institucional ---------- */
.video-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--blue-900);
  isolation: isolate;
}
.video-frame video {
  width: 100%; height: 100%; object-fit: cover;
  position: relative; z-index: 0;
}
.video-frame__overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(23,26,74,0.28);
  cursor: pointer;
  transition: background 200ms ease;
  z-index: 1;
}
.video-frame__play {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-800);
  display: grid; place-items: center;
  transition: transform 200ms var(--ease-out);
}
.video-frame__overlay:active .video-frame__play { transform: scale(0.94); }
.video-frame__play .icon { width: 30px; height: 30px; }

@media (hover: hover) and (pointer: fine) {
  .video-frame__overlay:hover { background: rgba(23,26,74,0.4); }
  .video-frame__overlay:hover .video-frame__play { transform: scale(1.08); }
}
.video-frame.is-playing .video-frame__overlay { display: none; }

/* ---------- CTA banda ---------- */
.cta-band {
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--blue-800), var(--blue-900));
  color: var(--white);
  padding: 56px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.78); max-width: 52ch; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Servicios (listado con icono) ---------- */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }

/* Recuadros azul marino con acento naranja y letras blancas: mismo
   tratamiento que .pillar-card en el inicio, para unificar el estilo de
   marca en las páginas interiores (ver referencia del cliente). */
.service-item {
  display: flex;
  gap: 18px;
  padding: 26px;
  background: var(--blue-900);
  border-radius: var(--radius-md);
  transition: background 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .service-item:hover { background: var(--blue-800); box-shadow: var(--shadow-card); transform: translateY(-3px); }
}
.service-item__icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  display: grid; place-items: center;
}
.service-item__icon .icon { width: 23px; height: 23px; }
/* h3 hereda blue-900 (regla global) — invisible sobre fondo azul marino;
   se fuerza blanco con línea naranja debajo, como en .pillar-card. */
.service-item h3 {
  color: var(--white);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--orange-500);
}
.service-item p { font-size: 0.9rem; color: var(--blue-100); }

/* ---------- Página interior hero simple ---------- */
.page-hero {
  padding-block: 56px 60px;
  background: var(--blue-900);
  color: var(--white);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 10%, rgba(242,112,29,0.28), transparent 45%),
    radial-gradient(circle at 8% 90%, rgba(255,255,255,0.10), transparent 40%);
  z-index: -1;
}
.page-hero h1 { color: var(--white); max-width: 18ch; }
.page-hero .lead { color: rgba(255,255,255,0.8); margin-top: 18px; }
.page-hero__crumb { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 18px; }
.page-hero__crumb a:hover { color: var(--white); }
.page-hero__media {
  margin-top: 36px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-height: 380px;
}
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Variante de dos columnas (computo.php, terminales.php, nosotros.php):
   foto real en formato portrait al lado del texto en escritorio,
   apilada en móvil. */
.page-hero__split { display: grid; gap: 32px; }
.page-hero__split .page-hero__media { margin-top: 24px; max-height: 420px; }
@media (min-width: 900px) {
  .page-hero__split {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 56px;
  }
  .page-hero__split > .reveal { max-width: 46ch; }
  .page-hero__split .page-hero__media {
    margin-top: 0;
    max-height: none;
    aspect-ratio: 3 / 4;
  }
}
/* La foto ya viene precortada en 3:4 centrada en la persona (ver
   terminales-almacen-4gp.jpg), así que no hace falta object-position. */

/* ---------- Simple feature list (terminales) ---------- */
.check-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .check-list { grid-template-columns: repeat(2, 1fr); } }
.check-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  /* Azul marino con ícono naranja y texto blanco; el check naranja es
     el acento de marca, sin borde lateral (evita el look genérico). */
  background: var(--blue-900);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--white);
  transition: background 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .check-list li:hover { background: var(--blue-800); }
}
.check-list .icon { width: 20px; height: 20px; color: var(--orange-500); flex-shrink: 0; }

/* ---------- Nosotros: valores / historia ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 1024px) { .split { grid-template-columns: 1.1fr 0.9fr; gap: 60px; } }

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--gray-050);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--blue-900);
}
.value-chip .icon { width: 18px; height: 18px; color: var(--orange-600); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.stat-row div strong { display: block; font-size: 2rem; font-weight: 800; color: var(--blue-900); }
.stat-row div span { font-size: 0.82rem; color: var(--gray-600); }

/* ---------- Formulario de contacto ---------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 32px;
}
@media (min-width: 640px) { .form-card { padding: 44px; } }

.form-row { display: grid; gap: 18px; margin-bottom: 18px; }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue-900);
  margin-bottom: 7px;
}
.field input, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--gray-050);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue-700);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 120px; }
.field small { display: block; margin-top: 6px; font-size: 0.78rem; color: var(--gray-600); }
.field.has-error input, .field.has-error textarea { border-color: #D9432B; }
/* #B23A24, no #D9432B: el borde solo necesita 3:1, pero este es texto
   pequeño (0.8rem) y #D9432B da 4.39:1 (bajo el 4.5:1 de WCAG AA).
   Reutiliza el mismo rojo que ya usa .form-status.error. */
.field__error { color: #B23A24; font-size: 0.8rem; margin-top: 6px; display: none; }
.field.has-error .field__error { display: block; }

.form-status {
  display: none;
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.form-status.is-visible { display: block; }
.form-status.success { background: #E8F6EC; color: #1E7A3C; }
.form-status.error { background: #FBE9E7; color: #B23A24; }

.contact-info { display: flex; flex-direction: column; gap: 28px; }
/* Tarjetas de oficina en azul marino con acento naranja, a juego con las
   demás páginas; contrastan con el formulario blanco al lado. */
.office-card {
  padding: 26px;
  border-radius: var(--radius-md);
  background: var(--blue-900);
}
.office-card h3 {
  color: var(--white);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--orange-500);
}
.office-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.92rem;
  color: var(--blue-100);
}
.office-line a { color: var(--blue-100); transition: color 0.25s var(--ease); }
.office-line .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--orange-500); flex-shrink: 0; }
.office-line a:hover { color: var(--white); }

.office-maps {
  margin-top: 60px;
  display: grid;
  gap: 28px;
}
@media (min-width: 768px) { .office-maps { grid-template-columns: 1fr 1fr; } }
.office-map h3 { margin-bottom: 14px; }
.office-map iframe {
  width: 100%;
  height: 320px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--blue-900);
  color: rgba(255,255,255,0.72);
  padding-block: 64px 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr; gap: 32px; } }

.footer-brand img { height: 40px; margin-bottom: 16px; }
.footer-brand p { color: rgba(255,255,255,0.62); font-size: 0.9rem; max-width: 32ch; }
.footer-tagline { color: var(--white) !important; font-weight: 600; margin-bottom: 10px !important; }

.footer-col h4 {
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 0.92rem; transition: color 0.25s var(--ease); }
.footer-col a:hover { color: var(--white); }

.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  /* 44x44 mínimo táctil (WCAG 2.5.5); el ícono visual sigue en 17px. */
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: grid; place-items: center;
  transition: background 0.25s var(--ease), border-color .25s var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
.footer-social .icon { width: 17px; height: 17px; }

.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}

/* ---------- Utilidades de icono ---------- */
.icon { width: 20px; height: 20px; color: currentColor; }

/* ---------- Foco visible ----------
   Ningún elemento interactivo dependía más que del outline azul por
   defecto del navegador (o de `outline: none` sin reemplazo en los
   campos del formulario). --focus-ring cambia de índigo a blanco
   dentro de los bloques con fondo oscuro para que el anillo siga
   siendo visible ahí. */
:root { --focus-ring: var(--blue-900); }
.site-footer, .cta-band, .page-hero, .hero-banner, .line-card, .section--dark {
  --focus-ring: var(--white);
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav__toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: inherit;
}

.field input:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px rgba(43, 46, 134, 0.15);
}

/* ---------- .reveal ----------
   Three approaches were tried here (JS IntersectionObserver hiding
   content until scrolled into view, CSS animation-timeline: view(),
   and a load-triggered keyframe fade) and every one of them could be
   caught mid-transition or stuck fully hidden by tools that don't
   perform a real, gradual scroll or don't wait for the animation to
   finish: full-page screenshot tools, crawlers, PDF export, slow
   devices. For a site whose content must always be readable, that
   risk isn't worth a subtle entrance effect. Content is simply always
   visible; motion lives in the marquee and in hover/press states,
   which are never a precondition for reading the page. */
.reveal { opacity: 1; transform: none; }