/* ─── Scroll progress bar ─── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--accent-gradient);
  z-index: calc(var(--z-navbar) + 1);
  pointer-events: none;
  /* width driven by JS — no CSS transition, updated via rAF */
}

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  /* min-height, NO height: con `height` fijo + `overflow:hidden` el hero recortaba
     los sellos ISO cuando el texto crece (pasaba en inglés a 1366x768: sobraban 7px).
     Con min-height la sección crece en vez de cortar; en pantallas altas no cambia nada. */
  min-height: 100vh;
  padding-bottom: var(--space-md);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* ─── Background image + overlay ─── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.90) 0%,
    rgba(10, 10, 10, 0.40) 100%
  );
}

/* ─── Content column ─── */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding-top: 72px; /* navbar offset — 80px at 768+ */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

/* ─── Label ─── */
.hero-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-label::before {
  content: '';
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--accent-primary);
  flex-shrink: 0;
}

/* ─── Title ─── */
.hero-title {
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero-title-accent {
  color: var(--accent-primary);
  display: inline-block;
}

/* ─── Subtitle ─── */
.hero-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.7;
  margin: 0;
}

/* ─── CTAs — column on mobile, row at 768+ ─── */
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: stretch;
  width: 100%;
}

.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border: 2px solid var(--accent-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: transparent;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background var(--transition-base), color var(--transition-base);
  white-space: nowrap;
}

.btn-hero-outline:hover {
  background: var(--accent-primary);
  color: #000;
}

.btn-hero-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  white-space: nowrap;
}

.btn-hero-filled:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 28px rgba(122, 184, 48, 0.35);
}

/* ─── ISO Badges ─── */
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  align-items: center;
}

.badge-iso {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  border: 1px solid rgba(122, 184, 48, 0.6);
  color: var(--accent-secondary);
  background: rgba(122, 184, 48, 0.14);
}

/* ─── Decorative vertical line — hidden on mobile, shown at 768+ ─── */
.hero-deco {
  display: none; /* responsive.css restores at min-width 768px */
  position: absolute;
  right: clamp(3rem, 8vw, 9rem);
  top: 50%;
  transform: translateY(-40%);
  flex-direction: column;
  align-items: center;
  height: clamp(140px, 18vh, 220px);
  z-index: 1;
  pointer-events: none;
}

.hero-deco-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--accent-primary) 30%,
    var(--accent-primary) 100%
  );
  transform-origin: top center;
  /* GSAP will animate scaleY 0→1, no opacity:0 in CSS */
}

.hero-deco-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 10px rgba(122, 184, 48, 0.6);
  flex-shrink: 0;
  /* GSAP will animate opacity/scale */
}

/* ─── Scroll indicator ─── */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 1;
  pointer-events: none;
}

.hero-scroll-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* --text-muted daba <4.5:1 aquí (texto de contenido). Ver mesa 2026-09-02. */
  color: var(--text-secondary);
}

.hero-scroll-chevron {
  color: var(--text-secondary);
  animation: bounce-down 1.8s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   SERVICIOS
══════════════════════════════════════════════════════════════ */
#servicios {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(122, 184, 48, 0.07) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 40%, var(--bg-secondary) 100%);
  position: relative;
}

/* #lineas-negocio va PLANO, no degradado. El degradado de #servicios reparte
   7 unidades por canal en 1100px y el ojo no lo ve: la página se leía negra.
   Un panel liso de --bg-secondary es lo que ya usan #certificaciones, #nosotros
   y #proyectos, y ahí sí se lee como superficie desde el primer píxel.
   DOS resplandores, arriba y abajo: con uno solo, la mitad inferior de una
   sección de 1900px se queda sin nada y vuelve a leerse plana. */
#lineas-negocio {
  background:
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(122, 184, 48, 0.09) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 0%,   rgba(122, 184, 48, 0.12) 0%, transparent 70%),
    var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  position: relative;
}

#servicios::before,
#lineas-negocio::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(122,184,48,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,184,48,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* Retícula propia de #lineas-negocio, más marcada que la de #servicios: aquélla
   vive sobre un degradado y ésta sobre un panel liso, donde 0.04 es literalmente
   invisible (medido: 0.0034 de luminancia; 1 unidad de delta). A 0.14 mide 12
   unidades y la superficie se lee como superficie.
   ORDEN OBLIGATORIO: esta regla va DESPUÉS de la compartida de arriba. Tienen la
   misma especificidad y ambas declaran background-image, así que gana la última.
   Estuvo antes y la corrección salió INERTE: se publicaba a 0.04. */
#lineas-negocio::before {
  background-image:
    linear-gradient(rgba(122,184,48,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,184,48,0.14) 1px, transparent 1px);
}

/* La rejilla de arriba es un pseudo-elemento posicionado; sin esto se pinta por
   ENCIMA de las tarjetas y sus líneas cruzan el texto (medido: 8.4% de los píxeles
   del interior de una tarjeta). Elevar el contenedor la manda detrás. */
#servicios .container,
#lineas-negocio .container {
  position: relative;
}

/* Section header shared pattern */
.section-header {
  margin-bottom: var(--space-lg);
  max-width: 680px;
}

.section-label--lg {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.section-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-top: 0.75rem;
}

/* Services grid — 1 col mobile, expanded in responsive.css */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* ══════════════════════════════════════════════════════════════
   CERTIFICACIONES
══════════════════════════════════════════════════════════════ */
#certificaciones {
  background: var(--bg-secondary);
}

/* Tagline / pull quote */
.cert-tagline {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.75;
  max-width: 820px;
  margin-bottom: var(--space-lg);
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent-primary);
  quotes: none;
}

/* Cert grid — 1 col mobile, expanded in responsive.css */
.cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* Cert card — left-border accent style */
.cert-card {
  background: var(--bg-card);
  border-top:    1px solid var(--border-subtle);
  border-right:  1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  border-left:   4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: var(--transition-base);
}

.cert-card:hover {
  background: var(--bg-card-hover);
  box-shadow: 0 6px 28px rgba(122, 184, 48, 0.08);
  transform: translateY(-3px);
}

.cert-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(122, 184, 48, 0.08);
  border: 1px solid rgba(122, 184, 48, 0.15);
  color: var(--accent-primary);
  flex-shrink: 0;
}

.cert-icon-wrap svg {
  width: 22px;
  height: 22px;
}

.cert-iso {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
  text-transform: uppercase;
}

.cert-title {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cert-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

.cert-detail {
  list-style: none;
  padding: 0;
  /* `margin-top:auto` empuja el bloque de viñetas al pie: ISO 9001 tiene 3 y las
     otras 4, así que el aire sobrante se reparte arriba en vez de acumularse
     como un hueco muerto al final de esa tarjeta. */
  margin: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.75rem;
}

.cert-detail li {
  /* Subido de .82rem por pedido del director. .9rem reutiliza el escalón que ya
     usa .cert-desc; la mesa de imagen proponía .88 para quedar por debajo, pero
     0.02rem son 0.32px: una jerarquía imperceptible no es jerarquía. La distinción
     la sostienen el separador y las viñetas «—», no el tamaño. */
  font-size: 0.9rem;
  /* NO usar --text-muted aquí: da 2.74:1 sobre --bg-card y es texto de contenido
     (el detalle de cada certificación ISO). Con --text-secondary sube a 5.41:1.
     Mismo fallo que ya se corrigió en las etiquetas del formulario de contacto. */
  color: var(--text-secondary);
  padding-left: 1rem;
  position: relative;
  line-height: 1.5;
}

.cert-detail li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-size: 0.72rem;
}

/* ══════════════════════════════════════════════════════════════
   COBERTURA
══════════════════════════════════════════════════════════════ */
#cobertura {
  background: var(--bg-primary);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}

/* Column layout */
.cobertura-layout {
  /* Faltaba `display:grid`: sin él, `gap` y `grid-template-columns` del responsive
     eran reglas muertas, los bloques se apilaban y el mapa caía a todo lo ancho
     dejando las líneas de negocio solas arriba. */
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

/* Mapa real */
.cobertura-map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 12px 40px rgba(122,184,48,0.35));
  transition: transform var(--transition-slow);
}

.cobertura-map-img:hover {
  transform: scale(1.02);
}

/* Mapa grande en desktop — desborda ligeramente para mayor presencia */
@media (min-width: 1024px) {
  .cobertura-map {
    margin-right: calc(-1 * var(--container-padding));
  }
  .cobertura-map-img {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    /* `cover` con alto mínimo recortaba el mapa por los lados entre 1024 y 1199:
       se perdía Yucatán —que es uno de los estados pintados— y el rótulo
       quedaba cortado a media palabra. El mapa no se recorta. */
    object-fit: contain;
    object-position: center;
  }
}

.cobertura-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

/* Bullet list */
.cobertura-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.cobertura-list li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Las líneas de negocio pasaron de viñeta '●' a icono, para que el bloque acompañe
   al mapa en vez de quedar como una lista suelta. El texto vive en `.cob-text`
   porque js/i18n.js escribe ahí (escribir en el <li> borraría el SVG). */
.cobertura-list li {
  padding: 0.7rem 0.9rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 12px);
  transition: border-color .25s ease, transform .25s ease;
}
.cobertura-list li:hover {
  border-color: rgba(122, 184, 48, 0.45);
  transform: translateX(3px);
}
.cob-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--accent-primary);
  background: rgba(122, 184, 48, 0.10);
  border: 1px solid rgba(122, 184, 48, 0.28);
}
.cob-ico svg { width: 20px; height: 20px; }
.cob-text { font-size: 1rem; }

/* Map placeholder (fallback) */
.map-placeholder {
  background: var(--bg-card);
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--border-accent);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-transform: uppercase;
  padding: var(--space-md);
}

/* Stats bar — 1 col mobile, 3-in-row at 768+ (eran 4 hasta que se retiró
   la cifra «24/7»: con 3 en una rejilla de 2 quedaba una celda huérfana) */
.stats-bar {
  margin-top: var(--space-lg);
  padding: 2rem var(--container-padding);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.stat-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 500;
  color: var(--accent-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  max-width: 20ch;
  line-height: 1.4;
}

/* ─── Nosotros ─── */
#nosotros {
  background: var(--bg-secondary);
}

/* ══════════════════════════════════════════════════════════════
   PROYECTOS / PORTAFOLIO
══════════════════════════════════════════════════════════════ */
#proyectos {
  background: var(--bg-secondary);
}

/* Projects grid — 1 col mobile; bento at 1024+ in responsive.css */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Default card height for mobile/tablet — bento sizes set in responsive.css */
.proj-card { min-height: 260px; }

/* ── Card structure ─── */
.proj-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

/* Background image layer — oversized so parallax has room to move */
.proj-bg {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* GSAP parallax will override transform; CSS transition is fallback */
.proj-card:hover .proj-bg {
  transform: scale(1.04);
}

/* Dark overlay */
.proj-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.72);
  transition: background var(--transition-base);
}

.proj-card:hover .proj-overlay {
  background: rgba(10, 10, 10, 0.45);
}

/* Content layer */
.proj-content {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
}

/* Category badge — always visible */
.proj-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.28rem 0.75rem;
  background: var(--accent-primary);
  color: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 100px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Info panel — hidden, slides up on hover */
.proj-info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity  var(--transition-base),
    transform var(--transition-base);
}

/* En táctil no hay hover: sin esto, en el teléfono sólo se ve la etiqueta de
   categoría y el proyecto se queda sin nombre, sin ubicación y sin enlace.
   Se añade el foco de teclado por el mismo motivo. */
@media (hover: none) {
  .proj-info { opacity: 1; }
}

.proj-card:focus-within .proj-info,
.proj-card:hover .proj-info {
  opacity: 1;
  transform: translateY(0);
}

.proj-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.2rem);
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0;
}

.proj-location {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: block;
}

.proj-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-primary);
  transition: gap var(--transition-fast);
}

.proj-card:hover .proj-link {
  gap: 0.625rem;
}

/* ══════════════════════════════════════════════════════════════
   CLIENTES — Marquee carousel (CSS-only, no JS)
══════════════════════════════════════════════════════════════ */
#clientes {
  background: #ffffff;
  padding-bottom: 0;
}

#clientes .section-header {
  margin-bottom: var(--space-lg);
}

#clientes .section-label,
#clientes h2,
#clientes .section-subtitle {
  color: #1a1b1e;
}

#clientes .section-label {
  /* #5a8a1a daba 4.13:1 sobre blanco; #547f18 da 4.74:1. Mesa 2026-09-02. */
  color: #547f18;
}

/* ── Outer marquee wrapper ────────────────────────────────── */
.clients-marquee {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: var(--space-xl);
  overflow: hidden;
  /* Fade edges with mask */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

/* ── Each row ────────────────────────────────────────────── */
.marquee-row {
  overflow: hidden;
}

/* Pause animation when hovering the entire row */
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

/* ── Scrolling track (flex strip, width = 2× content) ────── */
.marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  /* will-change for GPU compositing */
  will-change: transform;
}

/* Direction variants */
.marquee-row--rtl .marquee-track {
  animation: marquee-rtl 30s linear infinite;
}

.marquee-row--ltr .marquee-track {
  animation: marquee-ltr 30s linear infinite;
}

/* ── Logo items — contenedor con imagen real ───────────── */
.logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 190px;
  height: 100px;
  padding: 0.5rem 0.875rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-fast);
}

.logo-item img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.logo-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}

/* Logos con espacio en blanco excesivo en el archivo — zoom para normalizar */
.logo-item img[alt="RIC Energy"] { transform: scale(1.35); }
.logo-item img[alt="Enel"]       { transform: scale(1.25); }
.logo-item img[alt="Engie"]      { transform: scale(1.2);  }
.logo-item img[alt="Soriana"]    { transform: scale(1.15); }

/* ══════════════════════════════════════════════════════════════
   CONTACTO — instrumental dark precision
══════════════════════════════════════════════════════════════ */
#contacto {
  background: var(--bg-primary);
}

/* Contact layout — 1 col mobile; info | form 40/60 at 768+ (responsive.css) */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* ─── Info card (left column) ─── */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
  color: var(--text-primary);
}

.contact-card-subtitle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 0.25rem;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.contact-detail-text {
  flex: 1;
  min-width: 0;
}

.contact-detail strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --text-muted daba <4.5:1 aquí (texto de contenido). Ver mesa 2026-09-02. */
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.contact-detail a {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}
.contact-detail a:hover { color: var(--accent-primary); }

.contact-detail--person strong {
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
}

.contact-detail--person a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  color: var(--accent-primary);
  text-decoration: none;
}
.contact-detail--person a:hover { color: var(--accent-secondary); }

/* Icon — 40×40 square with accent border */
.contact-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  color: var(--accent-primary);
  background: rgba(122, 184, 48, 0.04);
}

.contact-icon--initials {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Card divider — thin neutral line, NOT the global gradient .divider */
.divider--card {
  width: 100%;
  height: 1px;
  border: none;
  background: var(--border-subtle);
  margin: 0.5rem 0;
}

/* WhatsApp button — official brand green for instant recognition */
.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.95rem 1.5rem;
  background: #25D366;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: filter var(--transition-base), transform var(--transition-base);
}

.btn-whatsapp:hover {
  filter: brightness(1.08);
  transform: scale(1.01);
}

/* Map embed */
.contact-map {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

.contact-map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  filter: grayscale(0.2) contrast(1.05);
}

.map-open-link {
  display: block;
  margin-top: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--accent-primary);
  text-decoration: none;
  text-align: right;
  transition: opacity var(--transition-fast);
}
.map-open-link:hover { opacity: 0.75; }

/* ─── Form card (right column) ─── */
.contact-form-wrap .contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* Mono uppercase labels — instrumental signature */
.contact-form .form-group label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.contact-form .form-optional {
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  color: var(--text-input-placeholder);
}

/* Inputs already styled in components.css; only autofill bg adjustment for the new wrapper */
.contact-form .form-group input:-webkit-autofill,
.contact-form .form-group input:-webkit-autofill:hover,
.contact-form .form-group input:-webkit-autofill:focus,
.contact-form .form-group textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
          box-shadow: 0 0 0 1000px var(--bg-card) inset !important;
}

/* Submit button — full width inside the card */
.contact-form .btn-submit {
  width: 100%;
  align-self: stretch;
}

.form-disclaimer {
  font-size: 0.75rem;
  color: var(--text-input-placeholder);
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 0;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   NOSOTROS
══════════════════════════════════════════════════════════════ */

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

.nosotros-text .section-label {
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.nosotros-text h2 {
  margin-bottom: var(--space-md);
}

.nosotros-text p {
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: var(--space-sm);
}

.nosotros-valores {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nosotros-valores li {
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding-left: 1.25rem;
  position: relative;
}

.nosotros-valores li::before {
  content: '●';
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-size: 0.55rem;
  top: 0.35em;
}

.nosotros-img-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.nosotros-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* ══════════════════════════════════════════════════════════════
   PAGE HERO — inner pages header banner
══════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  padding-top: calc(var(--navbar-h, 72px) + var(--space-xl));
  padding-bottom: var(--space-xl);
}

.page-hero .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0;
}

.page-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.7;
  margin: 0;
}

/* ── Page hero with photo background — shared structure ─── */
.page-hero--photo,
.page-hero--photo-bright {
  background: none;
  border-bottom: none;
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.page-hero--photo::before,
.page-hero--photo-bright::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.page-hero--photo::after,
.page-hero--photo-bright::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-hero--photo .container,
.page-hero--photo-bright .container {
  position: relative;
  z-index: 2;
}

.page-hero--photo .page-hero-subtitle,
.page-hero--photo-bright .page-hero-subtitle {
  color: rgba(240, 241, 243, 0.85);
}

/* Empresa — EquipoSiem, overlay oscuro */
.page-hero--photo::before {
  background-image: url('../assets/images/EquipoSiem.png');
  background-position: center top;
}
.page-hero--photo::after {
  background: linear-gradient(160deg, rgba(10,10,10,0.80) 0%, rgba(10,10,10,0.55) 100%);
}

/* Servicios — subirapuato, overlay luminoso */
.page-hero--photo-bright::before {
  background-image: url('../assets/images/subirapuato.png');
}
.page-hero--photo-bright::after {
  background: linear-gradient(160deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.28) 100%);
}

/* ── Section CTA block — bottom of inner pages ─── */
.section-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-xl) 0 var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-xl);
}

.section-cta-text {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Service card link — "Ver detalle →" on home preview ─── */
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: var(--space-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-primary);
  text-decoration: none;
  transition: gap var(--transition-fast), color var(--transition-fast);
  pointer-events: auto;
}

.service-card-link:hover {
  gap: 0.625rem;
  color: var(--accent-secondary);
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer {
  background: #111216;
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-xl);
}

/* Footer grid — 1 col mobile, expanded in responsive.css */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  margin-bottom: 0.75rem;
  text-decoration: none;
}

.footer-tagline {
  font-size: 0.78rem;
  font-weight: 500;
  /* --text-muted daba <4.5:1 aquí (texto de contenido). Ver mesa 2026-09-02. */
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem;
}

.footer-about {
  font-size: 0.84rem;
  /* --text-muted daba <4.5:1 aquí (texto de contenido). Ver mesa 2026-09-02. */
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: 0.625rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  /* --text-muted daba 2.74:1; como gráfico exige 3:1. Ver mesa 2026-09-02. */
  color: var(--text-secondary);
  transition:
    color            var(--transition-base),
    border-color     var(--transition-base),
    background       var(--transition-base);
}

.social-link:hover {
  color: var(--accent-primary);
  border-color: var(--border-accent);
  background: rgba(122, 184, 48, 0.08);
}

/* Link columns */
.footer-heading {
  font-family: 'Sora', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-links a {
  font-size: 0.875rem;
  /* --text-muted daba 3.63:1 sobre el pie (texto de contenido). Mesa 2026-09-02. */
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--accent-primary); }

/* Contact column */
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1.25rem;
}

.footer-contact-list li {
  font-size: 0.8rem;
  /* --text-muted daba 3.63:1 sobre el pie (texto de contenido). Mesa 2026-09-02. */
  color: var(--text-secondary);
  line-height: 1.55;
}

.footer-contact-list a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-contact-list a:hover { color: var(--accent-primary); }

.footer-slogan {
  font-family: 'Sora', sans-serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--accent-primary);
  line-height: 1.6;
}

/* Divider + copyright */
.footer-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin-block: var(--space-md);
}

.footer-copyright {
  text-align: center;
  font-size: 0.82rem;
  /* --text-muted daba 3.63:1 sobre el pie (texto de contenido). Mesa 2026-09-02. */
  color: var(--text-secondary);
}


/* ══ MISIÓN Y VISIÓN + POLÍTICA DE GESTIÓN INTEGRAL ══════════════════════════
   Clases propias a propósito: js/i18n.js mapea .cert-card y .cert-tagline por
   POSICIÓN. Reusar esas clases correría los índices de las 3 tarjetas ISO y
   rompería el sitio en inglés en silencio. */

.mv-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.mv-block {
  /* En móvil el icono va ARRIBA: al costado dejaba la columna de texto en 126px
     (≈11 caracteres por línea). Y el relleno baja de 4rem a 2rem por lo mismo. */
  display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-lg);
}
.mv-icon-wrap {
  flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--accent-primary); border-radius: 50%;
  color: var(--accent-primary);
}
.mv-icon-wrap svg { width: 28px; height: 28px; }
.mv-title {
  font-family: 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent-primary); margin: 0 0 .5rem; font-size: 1.5rem;
}
.mv-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.7;
  /* Subido de 1rem: el director lo veía pequeño. */
  font-size: 1.15rem;
  /* Tope de medida: a una sola columna llegaba a 84 caracteres por línea. */
  max-width: 620px;
}

.pgi-declaracion {
  /* 680px = el mismo margen derecho al que llegan las tarjetas de abajo cuando
     hay dos columnas. A ese ancho, 1.3rem es la fuente más grande que cabe sin
     pasar de 75 caracteres por línea (medido: 72). El tope hace falta también
     por debajo de 1280px, donde no hay grid y el párrafo se iba a 121. */
  max-width: 680px; margin: 0 0 var(--space-lg);
  font-size: 1.3rem;
  padding-left: 1.5rem; border-left: 3px solid var(--accent-primary);
  color: var(--text-secondary); line-height: 1.8; font-style: italic;
}
.pgi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  /* `start`, no el estiramiento por defecto: con 6 compromisos de 1 a 4 líneas,
     cada fila tomaba el alto del más largo y dejaba hasta 62px muertos bajo el
     más corto. Ahora cada tarjeta mide lo que su texto pide. */
  align-items: start;
}
.pgi-card {
  /* En móvil el icono va arriba, igual que en .mv-block: al costado dejaba la
     columna de texto en ~218px (≈20 caracteres por línea). */
  display: flex; flex-direction: column; gap: var(--space-sm); align-items: flex-start;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.pgi-icon-wrap {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; color: var(--accent-primary);
  background: rgba(122,184,48,.10); border: 1px solid rgba(122,184,48,.30);
}
.pgi-icon-wrap svg { width: 24px; height: 24px; }
.pgi-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.65;
  /* Segunda subida por pedido del director. Para que el texto no se estrangule,
     la rejilla pasa de 3 a 2 columnas (abajo): la tarjeta gana de 413 a ~628px. */
  font-size: 1.1rem;
  /* Tope de medida: a una sola columna la línea llegaba a 98 caracteres. */
  max-width: 620px;
}

/* Control documental: metadato discreto, nunca titular. */
.doc-control {
  margin-top: var(--space-md); padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  font-size: .82rem; color: var(--text-secondary); letter-spacing: .02em;
}
.doc-control strong { color: var(--text-secondary); font-weight: 600; }

@media (min-width: 640px) {
  .mv-block  { flex-direction: row; gap: var(--space-md); align-items: flex-start; }
  .pgi-card  { flex-direction: row; }
}

/* Dos columnas sólo desde 1100px: entre 768 y 1100 cada bloque quedaba con
   ~166px de texto, demasiado angosto para la fuente nueva. */
@media (min-width: 1280px) {
  .mv-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* Los compromisos: 2 columnas —nunca 3— y sólo desde 1000px. Con 3 columnas la
   tarjeta daba ~33 caracteres por línea y a 768px con 2 daba ~20; ambas son
   columna de periódico. 6 compromisos en 2 columnas = 3 filas exactas. */
@media (min-width: 1280px) {
  .pgi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Ritmo de fondo de las secciones del Sistema de Gestión ═══════════════════
   Dictamen de la mesa de UI/UX (2026-09-02). El problema NO era el color: las
   dos secciones no declaraban fondo, heredaban el del <body> y formaban 1805 px
   continuos sin una sola costura — el tramo monocromo más largo del sitio.

   Se descartó la alternancia automática por posición: habría dado --bg-secondary
   a #politica-integral, que queda pegado a #certificaciones (ya --bg-secondary),
   creando una losa NUEVA de 2008 px. Peor que el problema original.

   Solución: fondo explícito + costura de 1px entre ambas + un halo radial BLANCO
   muy tenue (3–3.5%) que da relieve sin tocar el verde institucional (ese lenguaje
   es de #servicios en la portada y repetirlo lo abarata). El halo se coloca arriba
   en la primera y abajo en la segunda, de modo que el punto más oscuro coincide
   con la costura y refuerza el límite en vez de competir con él.
   Límite de accesibilidad respetado: un velo blanco rompe AA a partir de ~12%
   de opacidad; aquí va al 3.5%. */
#mision-vision {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.035) 0%, transparent 70%),
    var(--bg-primary);
}

#politica-integral {
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 255, 255, 0.030) 0%, transparent 70%),
    var(--bg-primary);
  border-top: 1px solid var(--border-subtle);
}

/* ── Portada: Cobertura con el rótulo en VERTICAL entre el mapa y el listado ──
   Al haber tanto ancho disponible, el rótulo hace de eje entre la imagen y la
   lista: así el listado queda centrado y a la par del mapa, en vez de desfasado
   arriba como cuando el rótulo iba encima. Por debajo de 900px vuelve a leerse
   en horizontal y todo se apila, que es lo correcto en teléfono. */
/* El rótulo vertical entra a partir de 1200px: por debajo, el mapa (que escala
   con el ancho) queda muy corto frente a la lista, cuyo alto lo fijan sus 6
   renglones. Entre 768 y 1200 se usa la maqueta normal de dos columnas. */
@media (min-width: 1200px) {
  /* Doble clase a propósito: `responsive.css` se carga DESPUÉS y define
     `.cobertura-layout { grid-template-columns: 55fr 45fr }`. Con una sola clase
     ganaba esa regla por orden de cascada y la rejilla quedaba en 2 columnas. */
  .cobertura-layout.cobertura-layout--vtitle {
    /* 2.17:1 — proporción calculada para que el alto del mapa (relación 1.735)
       iguale al del bloque de líneas de negocio. De paso, estrechar la lista de
       535px a ~355px elimina el exceso de espacio vacío dentro de cada renglón. */
    grid-template-columns: minmax(0, 2.17fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md);
  }
  .cobertura-layout.cobertura-layout--vtitle .cobertura-map   { order: 1; }
  .cobertura-layout.cobertura-layout--vtitle .cobertura-intro { order: 2; }
  .cobertura-layout.cobertura-layout--vtitle .cobertura-list  { order: 3; }

  .cobertura-layout.cobertura-layout--vtitle .cobertura-intro {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0;
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: var(--space-sm) 0.9rem;
    border-left: 1px solid var(--border-subtle);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-primary);
    white-space: nowrap;
  }

  /* El mapa de la portada NO se recorta: la regla general de ≥1024px lo fuerza a
     `object-fit: cover` con alto mínimo y aquí cortaba el rótulo de Xalapa. */
  .cobertura-layout.cobertura-layout--vtitle .cobertura-map { margin-right: 0; }
  .cobertura-layout.cobertura-layout--vtitle .cobertura-map-img {
    min-height: 0;
    object-fit: contain;
    border-radius: var(--radius-lg);
  }
}

/* ── Páginas legales: prosa larga y legible ─────────────────────────────────── */
.legal { max-width: 74ch; }
.legal h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  color: var(--accent-primary);
  margin: var(--space-md) 0 0.6rem;
}
.legal h2:first-child { margin-top: 0; }
/* La nota de idioma va oculta en español y, aun oculta, sigue siendo :first-child:
   sin esto el primer h2 recupera sus 32px y el visitante ve un hueco sin motivo. */
.legal-lang-note[hidden] + h2 { margin-top: 0; }
.legal p { color: var(--text-secondary); line-height: 1.75; margin-bottom: 0.9rem; }
.legal strong { color: var(--text-primary); }
.legal a { color: var(--accent-primary); }
.legal-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.legal-list li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.legal-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent-primary);
}
.legal-fecha {
  margin-top: var(--space-md);
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
}

.footer-legal { text-align: center; margin-top: 0.5rem; font-size: 0.82rem; }
.footer-legal a { color: var(--text-secondary); text-decoration: underline; }
.footer-legal a:hover { color: var(--accent-primary); }

/* Sin barra de estadísticas debajo (portada), la sección necesita su margen
   inferior: `#cobertura { padding-bottom: 0 }` existe para que esa barra toque
   el borde en Nosotros, y aquí dejaba «Comunicaciones» pegado al pie. */
#cobertura.cobertura--suelta { padding-bottom: var(--space-xl); }

/* ── Cabecera de la Política a dos columnas ──────────────────────────────────
   Dictamen del diseñador (2026-09-02), verificado: el <h2> «Política de Gestión
   Integral» ocupa EXACTAMENTE las mismas líneas con 680px que con 320px, así que
   los 680px de `.section-header` no compran ni un renglón — sólo dejaban 672px de
   blanco. Título a 400px y declaración a su derecha: el vacío baja de 792px a ~260.
   La 3ª columna `1fr` es imprescindible para que la rejilla de tarjetas, que hace
   `grid-column: 1 / -1`, siga llegando al ancho completo.
   Mismo punto de quiebre (1280px) que las rejillas de abajo: un solo umbral. */
@media (min-width: 1280px) {
  #politica-integral .container {
    display: grid;
    /* 560px para el título: medido, «Política de Gestión» ocupa 530px a 56px/Sora
       700, y por debajo de eso caía a TRES líneas. La 2ª columna es `1fr` (sin
       tope) para que la declaración termine EXACTAMENTE en el mismo margen
       derecho que las tarjetas de abajo, en vez de cortarse antes. */
    grid-template-columns: 560px 1fr;
    column-gap: var(--space-lg);
  }
  #politica-integral .section-header  { grid-row: 1; grid-column: 1; }
  #politica-integral .pgi-declaracion { grid-row: 1; grid-column: 2; }
  #politica-integral .pgi-grid,
  #politica-integral .doc-control     { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════
   LÍNEAS DE NEGOCIO
   Clases propias (linea-*) para que el traductor de .service-card
   nunca las alcance: ese handler mapea por atributo, pero cualquier
   tarjeta ajena que cayera en ese selector heredaría su texto.
   Los cortes de rejilla viven en responsive.css, como el resto.
══════════════════════════════════════════════════════════════ */
.lineas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* Sin `padding` propio: hereda los 32px de .card, que es lo que de
   verdad se aplica en todo el sitio. .service-card declara 1.75rem
   y esa línea está muerta — .card gana por orden en la cascada. */
.linea-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Estas tarjetas NO se expanden ni llevan a ningún lado. Se anula el
   realce de .card:hover para no prometer una interacción que no existe. */
.linea-card:hover {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  box-shadow: none;
  transform: none;
}

.linea-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(122, 184, 48, 0.08);
  border: 1px solid rgba(122, 184, 48, 0.15);
  color: var(--accent-primary);
  flex-shrink: 0;
}

.linea-icon {
  width: 28px;
  height: 28px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

/* Mismo escalón tipográfico que .service-card-title: son vecinas. */
.linea-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: var(--text-primary);
  line-height: 1.3;
  margin: 0;
}

/* Única diferencia deliberada con .service-card-desc (0.92rem): aquí el
   párrafo ES el contenido, no un gancho de una línea. Se deja a 1rem. */
.linea-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}