/* ============================================================
   NATIONAL INSPECTION COLOMBIA (NIC) — Sistema de diseño
   Derivado del branding de Halliburton (halliburton.com):
   espina neutra en gris pizarra, ángulos rectos, encabezados
   de peso ligero y un único acento saturado usado con mesura.
   El acento es el verde real del logo de NIC — no el rojo de
   Halliburton, que es marca ajena.
   ============================================================ */

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

:root {
  /* Espina neutra — tokens tomados de Halliburton */
  --gray-1: #2d3a4d;
  --gray-2: #525e70;
  --gray-3: #979fad;
  --gray-4: #e5e9ed;
  --gray-5: #f4f7f9;
  --white: #ffffff;
  --black: #000000;

  /* Acento de marca NIC (muestreado del logo real) */
  --green-deep: #003321;
  --green: #00722e;
  --green-light: #00a83c;
  --green-mint: #dff6e6;
  /* Verde para TEXTO pequeño sobre fondo oscuro. El verde de marca
     (#00722e) da 1,9:1 sobre --gray-1 y --green-light 3,6:1: ambos
     por debajo del 4,5:1 que necesita el texto pequeño. Este llega
     a 4,97:1 manteniendo el tono de la familia. */
  --green-on-dark: #22c55e;
  --amber: #d98f2b;

  --ink: var(--gray-1);
  --ink-2: #35435a;
  --ink-text: var(--gray-1);
  --muted: var(--gray-2);
  --line: var(--gray-4);
  --line-on-light: var(--gray-4);
  --muted-on-dark: rgba(255, 255, 255, 0.72);
  --line-on-dark: rgba(255, 255, 255, 0.16);

  --font-body: Inter, Univers, Arial, Helvetica, sans-serif;
  --font-display: var(--font-body);
  --font-hook: 'Archivo Black', var(--font-body);

  --container: 1240px;
  --gutter: 24px;
  --header-h: 92px;   /* la cabecera es fija: los heroes reservan esta altura */
  --radius: 0px;   /* Halliburton no redondea superficies */

  --shadow-sm: 0 1px 2px rgba(45, 58, 77, 0.08);
  --shadow-md: 0 6px 24px rgba(45, 58, 77, 0.10);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-text);
  background: var(--white);
  /* --banner-h lo mide site.js: en móvil la franja de vista previa
     ocupa varias líneas y tapaba el final del pie con un valor fijo. */
  padding-bottom: var(--banner-h, 40px);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

:focus-visible { outline: 2px solid var(--green-light); outline-offset: 3px; }

/* ── Tipografía — escala real de Halliburton ──
   h1 42/53 w400 ls -.3px · h2 29/36 w400 · h3 24/36 w300 · h4 21 ls .91px
   El peso ligero en encabezados es la firma del sistema.        */
h1, h2, h3, h4 { font-weight: 400; color: var(--ink); margin-bottom: 16px; }
h1 { font-size: clamp(32px, 4.2vw, 42px); line-height: 1.26; letter-spacing: -0.3px; }
h2 { font-size: clamp(24px, 3vw, 29px); line-height: 1.24; letter-spacing: -0.24px; }
h3 { font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; font-weight: 300; letter-spacing: -0.17px; }
h4 { font-size: 21px; line-height: 1.4; font-weight: 300; letter-spacing: 0.91px; }
p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block; margin-bottom: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--green);
}
.lead { font-size: clamp(18px, 2vw, 21px); font-weight: 300; line-height: 1.55; color: var(--muted); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section-pad { padding: clamp(56px, 8vw, 96px) 0; }
/* Cuando dos secciones section-light quedan seguidas (sin cambio de fondo
   que ya separe visualmente los bloques), el padding-top se recorta para
   no dejar un vacío doble. */
.section-pad.pad-top-tight { padding-top: 0; }
.section-light { background: var(--gray-5); }
.section-dark { background: var(--gray-1); color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-dark p { color: var(--muted-on-dark); }
.section-dark .lead { color: var(--muted-on-dark); }
.section-dark .eyebrow { color: var(--green-on-dark); }
.section-head { max-width: 760px; margin-bottom: 40px; }

/* ── Botones — firma de Halliburton: rectángulo plano,
      sin radio, con borde inferior de 1px más oscuro ── */
.btn {
  display: inline-block; font-family: inherit;
  font-size: 18px; font-weight: 400; letter-spacing: 0.2px; line-height: 1.4;
  padding: 12px 20px; border: 0; border-bottom: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn-primary { background: var(--green); border-bottom-color: var(--green-deep); color: var(--white); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--green-deep); border-bottom-color: var(--green); }
.btn-secondary { background: var(--gray-4); border-bottom-color: var(--gray-3); color: var(--black); }
.btn-secondary:hover { background: rgba(67, 73, 78, 0.149); }
.btn-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: var(--white); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--white); border-color: var(--white); color: var(--gray-1); }

/* ── Cabecera ── */
/* La cabecera arranca oculta sobre la sección de apertura de cada página
   (hero, banner o vídeo) para no competir con esa pieza a pantalla
   completa, y se despliega al bajar el scroll más allá de ella o al
   acercar el cursor a la franja superior — ver site.js. */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 90;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.site-header.is-hidden { transform: translateY(calc(-1 * var(--header-h) - 4px)); opacity: 0; pointer-events: none; }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); width: 100%; padding: 0 clamp(20px, 3vw, 40px); }
.logo { display: flex; align-items: center; }
.logo-mark { height: 60px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav-links a {
  font-size: 16px; color: var(--gray-1); padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.nav-links a:hover { color: var(--green); }
.nav-links a:hover, .nav-links a[aria-current="page"] { border-bottom-color: var(--green); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-drawer-cta { display: none; }
.nav-cta .btn { font-size: 16px; padding: 10px 18px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 10px;
  flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 2px; background: var(--gray-1); transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ============================================================
   HERO — loop de fotografías reales de campo. Se eligen las de
   mayor calidad y color (nada oscuro ni apagado), con degradado
   lateral para que el texto se lea sobre cualquiera de ellas.
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh;
  padding: calc(var(--header-h) + 40px) 0 clamp(40px, 5vw, 64px);
  background: var(--gray-1); color: var(--white);
}
.hero-loop { position: absolute; inset: 0; }
.hero-loop-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 9, 8, 0.92) 0%, rgba(6, 9, 8, 0.68) 30%, rgba(6, 9, 8, 0.22) 52%, rgba(6, 9, 8, 0) 75%);
}
.hero-inner { position: relative; padding: 0 clamp(20px, 3vw, 40px); }
.hero h1 { color: var(--white); max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--green-light); }
.hero .lead { color: var(--muted-on-dark); max-width: 52ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Lockup de marca: sustituye al rótulo genérico anterior */
.hero-brand {
  display: inline-flex; flex-direction: column; gap: 3px;
  margin-bottom: 22px; padding-left: 16px;
  border-left: 3px solid var(--green-light);
}
.hero-brand-name {
  font-size: clamp(17px, 2vw, 21px); font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase; line-height: 1.2;
  color: var(--white);
}
.hero-brand-region {
  font-size: clamp(13px, 1.5vw, 15px); font-weight: 300;
  letter-spacing: 6px; text-transform: uppercase; line-height: 1.2;
  color: var(--green-on-dark);
}
/* ── Sección del vídeo institucional ──
   Columna fija para el vídeo: con fracciones quedaba flotando en un
   hueco desproporcionado. Sobre fondo oscuro el espacio libre se lee
   como aire deliberado y no como un vacío. ── */
.video-split {
  display: grid; grid-template-columns: 340px 1fr;
  gap: clamp(32px, 6vw, 80px); align-items: center;
}
.video-copy { max-width: 60ch; }
.video-copy .lead { margin-bottom: 26px; }
.video-extra { display: flex; flex-direction: column; gap: 10px; }
.video-extra p { font-size: 15px; line-height: 1.5; color: var(--muted-on-dark); }
.video-facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--line-on-dark);
}
.video-facts span {
  font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted-on-dark);
}
.section-dark .hero-video-frame { border-color: var(--line-on-dark); box-shadow: none; }

/* ── Vídeo de cierre (home) ──
   Mismo tratamiento full-bleed que el hero del inicio — misma altura,
   mismo componente de scrim — para que se lea como el cierre de la
   misma pieza cinematográfica que abre la página. ── */
.closing-video {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh;
  padding: clamp(56px, 8vw, 96px) 0;
}
/* Variante "apertura de página": el texto va arriba a la izquierda en vez
   de abajo, para no chocar con los rótulos que el propio vídeo ya trae
   quemados en la franja inferior. */
.video-intro-top { justify-content: flex-start; padding-top: clamp(40px, 8vw, 96px); }
/* El degradado normal (.closing-scrim) es horizontal y oscurece toda la
   columna izquierda de arriba a abajo — aquí el texto propio solo vive
   arriba, así que se reemplaza por un degradado concentrado en la esquina
   superior izquierda que se aclara antes de llegar abajo, para no opacar
   el rótulo que el propio vídeo trae quemado en la franja inferior. */
.video-intro-top .closing-scrim {
  background: radial-gradient(ellipse 70% 75% at 0% 0%,
    rgba(6, 9, 8, 0.90) 0%,
    rgba(6, 9, 8, 0.55) 40%,
    rgba(6, 9, 8, 0.18) 65%,
    rgba(6, 9, 8, 0) 85%);
}
.closing-video-loop { position: absolute; inset: 0; }
.closing-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing-scrim { background: linear-gradient(90deg, rgba(6, 9, 8, 0.90) 0%, rgba(6, 9, 8, 0.64) 34%, rgba(6, 9, 8, 0.20) 58%, rgba(6, 9, 8, 0) 78%); }
.closing-inner { position: relative; max-width: 620px; padding: 0 clamp(20px, 3vw, 40px); }
.closing-inner h2 { max-width: 16ch; margin-bottom: 22px; }
.closing-benefits { display: flex; flex-direction: column; gap: 14px; margin: 22px 0 30px; }
.closing-benefit { display: flex; align-items: flex-start; gap: 10px; font-size: 17px; }
.closing-benefit svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--green-light); }

/* ── Tira de fotografías UV (página de Servicios) ──
   Son oscuras y muy contrastadas: solo funcionan sobre fondo oscuro. */
.uv-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.uv-shot { border: 1px solid var(--line-on-dark); background: var(--black); }
.uv-shot img { width: 100%; height: 300px; object-fit: cover; display: block; }
.uv-shot figcaption {
  padding: 16px 18px; font-size: 14px; line-height: 1.5;
  color: var(--muted-on-dark); background: var(--gray-1);
  border-top: 1px solid var(--line-on-dark);
}
.uv-shot figcaption strong {
  display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--green-on-dark);
}

.hero-video-frame {
  position: relative; width: 100%; max-width: 340px; max-height: 600px;
  aspect-ratio: 478 / 850; margin-inline: auto;
  background: var(--black); border: 1px solid var(--line); overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-video-frame video { width: 100%; height: 100%; object-fit: cover; }
.hero-video-play {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: rgba(45, 58, 77, .35);
  transition: background .18s var(--ease);
}
.hero-video-play[hidden] { display: none; }
.hero-video-play::before {
  content: ""; position: absolute; width: 68px; height: 68px;
  background: var(--green); border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: background .18s var(--ease);
}
.hero-video-play svg { position: relative; width: 30px; height: 30px; fill: var(--white); margin-left: 4px; }
.hero-video-play:hover { background: rgba(45, 58, 77, .18); }
.hero-video-play:hover::before { background: var(--green-deep); }

.hero-video-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--green); color: var(--white);
  font-size: 12px; font-weight: 500; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 8px 14px;
}
/* Hook arriba, de esquina a esquina — para que la marca sobreimpresa en
   el vídeo original no quede sola/repetitiva, sino acompañada de una
   frase con gancho. Sin placa de fondo: solo texto con sombra para que
   se lea sobre cualquier parte del vídeo sin tapar la imagen. */
.hero-video-stat {
  position: absolute; top: 20px; left: 16px; right: 16px; z-index: 2;
  color: var(--white); text-align: left;
  font-family: var(--font-hook); font-size: 21px; font-weight: 400;
  letter-spacing: 0.2px; line-height: 1.28; text-transform: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 5px 18px rgba(0, 0, 0, 0.7);
}

.hero-strip {
  position: relative; display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 32px; margin-top: clamp(40px, 5vw, 64px);
  padding-top: 28px; border-top: 1px solid var(--line-on-dark);
}
.hero-strip span { font-size: 14px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted-on-dark); }

/* ── Hero de páginas interiores ── */
.page-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + 62px) 0 clamp(48px, 6vw, 72px);
  background: var(--gray-1); color: var(--white);
}
.page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.38; filter: grayscale(0.35); }
.page-hero .hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(45, 58, 77, 0.94) 0%, rgba(45, 58, 77, 0.72) 55%, rgba(45, 58, 77, 0.55) 100%);
}
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--white); max-width: 20ch; }
.page-hero .lead { color: var(--muted-on-dark); max-width: 62ch; }

.page-hero .eyebrow { color: var(--green-on-dark); }
.breadcrumb { margin-top: 24px; font-size: 14px; color: var(--muted-on-dark); }
.breadcrumb a { color: var(--white); border-bottom: 1px solid var(--line-on-dark); }
.breadcrumb a:hover { border-bottom-color: var(--green-light); }
.breadcrumb .sep { margin: 0 8px; color: var(--gray-3); }
.breadcrumb .current { color: var(--white); }

/* ── Tarjetas con imagen ── */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.explore-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border: 1px solid var(--line); color: inherit;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
a.explore-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.explore-card > img { width: 100%; height: 320px; object-fit: cover; }
.explore-card-body { padding: 24px; }
.explore-card-body h3 { margin-bottom: 8px; }
.explore-card-body p { font-size: 16px; color: var(--muted); }
.tag {
  display: inline-block; margin-bottom: 12px; padding-left: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--green); border-left: 3px solid var(--green);
}
.arrow { display: inline-block; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--green); }

/* ── Casos de proyecto (Proyectos) ── */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 32px; }
.case-card { background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.case-card-media { height: 220px; overflow: hidden; }
.case-card-media img { width: 100%; height: 100%; object-fit: cover; }
.case-card-body { padding: 28px; }
.case-card-body h3 { font-size: 21px; font-weight: 500; margin: 4px 0 12px; }
.case-card-body > p { font-size: 15px; color: var(--muted); margin-bottom: 22px; }
.case-stats { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.case-stats li { display: flex; flex-direction: column; }
.case-stats strong { font-size: 22px; font-weight: 600; color: var(--green); }
.case-stats span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Tablero de informes de cierre (Proyectos) ──
   Se llena en tiempo de ejecución desde site.js leyendo un CSV publicado
   de Google Sheets — ver data-csv-url en build-pages.js. */
.reports-empty { color: var(--muted); font-size: 16px; }
.reports-company + .reports-company { margin-top: 24px; }
/* Cada empresa se pliega por defecto: con muchos informes acumulados,
   la lista completa desplegada haría la página interminable. */
.reports-company-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; background: none; border: 0; padding: 0 0 14px; margin: 0;
  border-bottom: 1px solid var(--line); cursor: pointer; font-family: inherit; text-align: left;
}
.reports-company-toggle:hover .reports-company-name { color: var(--green-deep); }
.reports-company-name { font-size: 19px; font-weight: 500; transition: color 0.18s var(--ease); }
.reports-count { font-weight: 400; font-size: 15px; color: var(--muted); }
.reports-company-toggle .chevron-icon { flex-shrink: 0; color: var(--gray-3); transition: transform 0.22s var(--ease); }
.reports-company-toggle[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }
.reports-company-body { padding-top: 24px; }
.reports-pozo + .reports-pozo { margin-top: 28px; }
.reports-pozo-name {
  display: inline-block; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--green);
}
.reports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.report-card {
  display: flex; align-items: center; gap: 16px; padding: 16px;
  background: var(--white); border: 1px solid var(--line); color: inherit;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.report-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.report-qr { flex: none; width: 72px; height: 72px; border: 1px solid var(--line); }
.report-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.report-name { font-size: 15px; font-weight: 500; }
.report-date { font-size: 13px; color: var(--muted); }
.report-link { margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--green); }
a.explore-card:hover .arrow { color: var(--green-deep); }
.section-dark .explore-card { background: var(--ink-2); border-color: var(--line-on-dark); color: var(--white); }
.section-dark .explore-card-body p { color: var(--muted-on-dark); }
.section-dark .tag { color: var(--green-on-dark); border-left-color: var(--green-on-dark); }
.section-dark .arrow { color: var(--green-on-dark); }

/* ── Tarjetas de valor ── */
/* El número de columnas se fija por sección en vez de con auto-fit:
   así ninguna rejilla deja huecos sueltos en la última fila, que era
   lo que generaba ruido visual. */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.value-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.value-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.value-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.value-card { position: relative; background: var(--white); padding: 28px; }
.value-card::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--green); }
.value-card.amber-dot::before { background: var(--amber); }
/* Iconos de tarjeta: un único tamaño y un único estilo de contorno
   en toda la web, para que la rejilla mantenga el ritmo visual. */
.card-icon { width: 30px; height: 30px; margin-bottom: 16px; color: var(--green); }
.section-dark .card-icon { color: var(--green-on-dark); }

.value-card h3 { font-size: 21px; margin-bottom: 10px; }
/* Los títulos ocupan 1 o 2 líneas según la pregunta; reservando la
   altura de dos, los párrafos arrancan a la misma altura en toda la
   fila y la rejilla deja de verse irregular. */
.value-grid.cols-3 .value-card h3, .value-grid.cols-4 .value-card h3 { min-height: 3em; }
.value-card p { font-size: 16px; color: var(--muted); }
.section-dark .value-grid { background: var(--line-on-dark); border-color: var(--line-on-dark); }
.section-dark .value-card { background: var(--gray-1); }
.section-dark .value-card h3 { color: var(--white); }
.section-dark .value-card p { color: var(--muted-on-dark); }

/* ── Spotlight ── */
.spotlight { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: stretch; }
.spotlight-media { position: relative; min-height: 420px; overflow: hidden; border: 1px solid var(--line); }
.spotlight-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spotlight-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(45, 58, 77, 0.97) 0%, rgba(45, 58, 77, 0.90) 42%, rgba(45, 58, 77, 0.55) 72%, rgba(45, 58, 77, 0.22) 100%); }
.spotlight-caption { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; color: var(--white); }
.spotlight-caption .eyebrow { color: var(--green-on-dark); }
.spotlight-caption h3 { color: var(--white); font-size: clamp(19px, 2.1vw, 23px); font-weight: 300; }
.spotlight-caption p { color: var(--muted-on-dark); font-size: 16px; }
.spotlight-list { background: var(--white); border: 1px solid var(--line); padding: 28px; }
.spotlight-list ul { margin-bottom: 20px; }
.spotlight-list li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.spotlight-list li:last-child { border-bottom: 0; }
.spotlight-list a:hover { color: var(--green); }
.spotlight-see-all { display: inline-block; font-size: 16px; font-weight: 500; color: var(--green); }

/* Marcador de enlace que lleva a otra página del sitio: sin él, los
   textos de la lista no se distinguían de un párrafo cualquiera. */
.link-more {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 8px; white-space: nowrap;
  font-size: 13px; font-weight: 500; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--green);
}
.link-more svg { width: 14px; height: 14px; transition: transform 0.18s var(--ease); }
a:hover .link-more svg { transform: translateX(3px); }
.section-dark .link-more { color: var(--green-on-dark); }

/* ── Valores ──
   Antes eran cuatro etiquetas sueltas que se perdían al final de una
   sección; ahora tienen espacio propio, número, icono y una frase que
   aterriza cada principio. Sin contenido oculto tras hover: el ratón
   solo añade énfasis. */
.values-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  counter-reset: valor;
}
.value-tile {
  position: relative; background: var(--white); padding: 32px 26px 28px;
  transition: background 0.22s var(--ease), transform 0.22s var(--ease);
}
.value-tile::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.value-tile:hover { background: var(--gray-5); transform: translateY(-3px); }
.value-tile:hover::after { transform: scaleX(1); }
.value-tile-num {
  display: block; margin-bottom: 18px;
  font-size: 13px; font-weight: 500; letter-spacing: 2px; color: var(--gray-3);
}
.value-tile .card-icon { width: 34px; height: 34px; margin-bottom: 18px; }
.value-tile h3 { font-size: 20px; font-weight: 400; margin-bottom: 10px; }
.value-tile p { font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ── Nube de etiquetas ── */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--green); padding: 10px 16px; font-size: 15px; color: var(--ink); }
.section-dark .tag-chip { background: rgba(255, 255, 255, 0.06); border-color: var(--line-on-dark); border-left-color: var(--green-light); color: var(--white); }

/* ── Rejilla API ── */
.api-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-on-dark); border: 1px solid var(--line-on-dark); }
/* Son 7 categorías: la última ocupa la fila entera para no dejar
   dos celdas vacías al final. */
.api-card--wide { grid-column: 1 / -1; }
.api-card { background: var(--gray-1); padding: 28px; }
.api-card-num { margin-bottom: 12px; font-size: 13px; font-weight: 500; letter-spacing: 2px; color: var(--green-on-dark); }
.api-card h3 { font-size: 19px; color: var(--white); margin-bottom: 14px; }
.api-badge { display: inline-block; padding: 5px 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.6px; }
.api-badge.tier-full { background: var(--green); color: var(--white); }
.api-badge.tier-wide { background: rgba(0, 168, 60, 0.18); color: var(--green-light); border: 1px solid rgba(0, 168, 60, 0.45); }
.api-badge.tier-narrow { background: rgba(217, 143, 43, 0.16); color: var(--amber); border: 1px solid rgba(217, 143, 43, 0.45); }
.norm-text { margin-top: 12px; font-size: 14px; color: var(--muted-on-dark); }

/* ── Franja de aviso ── */
.notice-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; padding: 32px; background: var(--white); border-left: 4px solid var(--green);
}
/* ── Lista compacta dentro de una tarjeta (inventario de equipos, etc.) ── */
.spec-list { margin-top: 4px; }
.spec-list li { position: relative; padding-left: 15px; margin-bottom: 9px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.spec-list li:last-child { margin-bottom: 0; }
.spec-list li::before { content: "–"; position: absolute; left: 0; color: var(--green); }
.section-dark .spec-list li { color: var(--muted-on-dark); }
.section-dark .spec-list li::before { color: var(--green-on-dark); }

.notice-strip-text { flex: 1 1 420px; }
.notice-strip-text p { margin-bottom: 0; font-size: 16px; color: var(--muted); }

/* ── Portafolio descargable — banner de recurso, no una caja discreta ── */
.portfolio-download {
  background: var(--green-mint); border-left: 4px solid var(--green);
  padding: clamp(28px, 3.5vw, 40px);
}
.portfolio-download-main { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.portfolio-download-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 56px; height: 56px; background: var(--green); color: var(--white);
}
.portfolio-download-icon .card-icon { width: 26px; height: 26px; margin-bottom: 0; color: inherit; }
.portfolio-download-copy { flex: 1 1 360px; }
.portfolio-download-copy .eyebrow { margin-bottom: 6px; }
.portfolio-download-copy h3 { font-size: clamp(20px, 2.2vw, 25px); font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.portfolio-download-sub { font-size: 16px; color: var(--muted); max-width: 60ch; }
.portfolio-download-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; }
.portfolio-download-actions .btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.portfolio-download-actions .btn .card-icon { width: 18px; height: 18px; margin-bottom: 0; }
.portfolio-download-toggle {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 14px; color: var(--green-deep); cursor: pointer;
}
.portfolio-download-toggle:hover { color: var(--green); }
.portfolio-download-toggle .card-icon { width: 16px; height: 16px; margin-bottom: 0; transition: transform 0.22s var(--ease); }
.portfolio-download-toggle[aria-expanded="true"] .card-icon { transform: rotate(180deg); }
.portfolio-download-body { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(0, 114, 46, 0.18); }
.spec-list-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 32px; }
.spec-list-inline li { position: relative; padding-left: 15px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.spec-list-inline li::before { content: "–"; position: absolute; left: 0; color: var(--green); }

/* ── Banda CTA ── */
.cta-band { background: var(--green-deep); color: var(--white); padding: clamp(56px, 7vw, 84px) 0; text-align: center; }
.cta-band h2 { color: var(--white); max-width: 24ch; margin-inline: auto; }
.cta-band p { color: rgba(255, 255, 255, 0.82); max-width: 60ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; margin-top: 24px; }

/* ── Contacto ── */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items: start; }
.contact-info-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--green); padding: 28px; }
.contact-info-row { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.contact-info-row .label { font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--gray-3); }
.contact-info-row a:hover { color: var(--green); }

.contact-form { display: grid; gap: 18px; background: var(--white); border: 1px solid var(--line); padding: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--gray-2); }
.contact-form input, .contact-form textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 12px 14px; background: var(--gray-5);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.contact-form input:focus, .contact-form textarea:focus { background: var(--white); border-color: var(--green); }
.contact-form textarea { resize: vertical; }
.form-note { font-size: 14px; color: var(--muted); }
.form-status { display: none; padding: 12px 14px; font-size: 15px; }
.form-status.is-ok { display: block; background: var(--green-mint); border-left: 3px solid var(--green); color: var(--green-deep); }
.form-status.is-error { display: block; background: #fdeceb; border-left: 3px solid #b92031; color: #961b24; }

/* ── Pie ── */
.site-footer { background: var(--gray-1); color: var(--white); padding: clamp(48px, 6vw, 72px) 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; padding-bottom: 40px; }
/* El logo real es detallado y a color; la variante blanca lo aplanaba
   a una silueta hueca ilegible. Sobre el pie oscuro va el original
   sobre placa blanca, que conserva la marca tal cual es. */
.footer-brand .logo {
  display: inline-flex; margin-bottom: 20px;
  padding: 14px 20px; background: var(--white);
}
.footer-brand .logo-mark { height: 78px; margin-bottom: 0; }
.footer-brand p { font-size: 15px; color: var(--muted-on-dark); }
/* Rótulos de columna: no son encabezados de documento (romperían el
   esquema tras los h2 de contenido), solo etiquetas de los nav del pie. */
.footer-col-title { margin-bottom: 16px; font-size: 14px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--white); }
.footer-col li { margin-bottom: 10px; font-size: 15px; }
.footer-col a, .footer-col address { font-style: normal; color: var(--muted-on-dark); transition: color 0.18s var(--ease); }
.footer-col a:hover { color: var(--green-on-dark); }
.footer-bottom { border-top: 1px solid var(--line-on-dark); padding: 20px 0; font-size: 14px; color: var(--gray-3); }

/* ── Franja de vista previa ── */
.preview-banner {
  position: fixed; inset: auto 0 0; z-index: 95;
  background: var(--amber); color: #2a1a05;
  font-size: 13px; font-weight: 500; letter-spacing: 0.4px;
  text-align: center; padding: 8px 16px;
}

/* ── Contacto flotante (WhatsApp) ── */
.float-contact {
  position: fixed; right: 20px; bottom: calc(var(--banner-h, 40px) + 16px); z-index: 94;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; background: var(--green); color: var(--white);
  font-size: 15px; font-weight: 500; box-shadow: var(--shadow-md);
  transition: background 0.18s var(--ease);
}
.float-contact:hover { background: var(--green-deep); }
.float-contact svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* Botón de llamada: solo en móvil (ver renderFloatContact) */
.float-call { display: none; }

/* ── Mapa de la sede ── */
.map-embed {
  position: relative; aspect-ratio: 16 / 7;
  border: 1px solid var(--line-on-dark); background: var(--ink-2);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-note { margin-top: 16px; font-size: 15px; color: var(--muted-on-dark); }
.map-note a { color: var(--white); border-bottom: 1px solid var(--line-on-dark); }
.map-note a:hover { border-bottom-color: var(--green-on-dark); }

/* ── Página de error ── */
.error-hero .page-hero-bg { opacity: 0.22; }
a.value-card { color: inherit; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
a.value-card:hover { background: var(--gray-5); transform: translateY(-3px); }

/* ── Reveals ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .api-grid { grid-template-columns: repeat(2, 1fr); }
  .api-card--wide { grid-column: 1 / -1; }
  .video-split { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  .uv-strip { grid-template-columns: repeat(2, 1fr); }
  .value-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .hero-video-frame { max-width: 300px; }
  .hero-scrim { background: linear-gradient(90deg, rgba(6, 9, 8, 0.92) 0%, rgba(6, 9, 8, 0.75) 55%, rgba(6, 9, 8, 0.35) 100%); }
  .closing-scrim { background: linear-gradient(90deg, rgba(6, 9, 8, 0.92) 0%, rgba(6, 9, 8, 0.78) 55%, rgba(6, 9, 8, 0.40) 100%); }
  .spotlight { grid-template-columns: 1fr; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* El cajón se oculta con opacidad, NO desplazándolo fuera de la
     pantalla: un elemento fijo trasladado a la derecha ensancha el
     área desplazable del documento y el navegador móvil encoge la
     página entera para que quepa. Era la causa de que el contenido
     ocupase solo dos tercios del ancho en el móvil real. */
  .nav-links {
    position: fixed; inset: var(--header-h) 0 0; z-index: 89;
    flex-direction: column; justify-content: flex-start; align-items: stretch;
    gap: 0; margin-left: 0; overflow-y: auto;
    background: var(--gray-1); padding: 8px var(--gutter) 32px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.22s var(--ease), visibility 0.22s var(--ease);
  }
  .nav-links.is-open { opacity: 1; visibility: visible; }
  .nav-links a {
    color: var(--white); font-size: 19px; font-weight: 400;
    padding: 20px 0 20px 14px;
    border-bottom: 1px solid var(--line-on-dark);
    border-left: 3px solid transparent;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-links a[aria-current="page"] {
    color: var(--green-on-dark);
    border-left-color: var(--green-on-dark);
    border-bottom-color: var(--line-on-dark);
  }
  /* La cotización es la acción principal y en móvil se perdía al
     ocultarse el botón de la cabecera. */
  .nav-links .nav-drawer-cta {
    display: block; margin-top: 28px; text-align: center;
    color: var(--white); font-size: 17px;
    padding: 15px 20px; border-left: 0;
    border-bottom: 1px solid var(--green-deep);
  }
  /* En móvil .nav-links pasa a fixed y deja de empujar: sin esto el
     botón de menú quedaba pegado al logo en vez de en la esquina. */
  .nav-cta { margin-left: auto; }
  .nav-cta .btn-primary { display: none; }
  .explore-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .uv-strip { grid-template-columns: 1fr; }
  .api-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .value-grid, .value-grid.cols-2, .value-grid.cols-3, .value-grid.cols-4 { grid-template-columns: 1fr; }
  .hero { padding-top: calc(var(--header-h) + 24px); min-height: 0; }
  .closing-video { min-height: 0; }
  .float-contact { padding: 14px; border-radius: 50%; }
  .float-contact span { display: none; }
  /* En móvil sí tiene sentido llamar: se apila sobre WhatsApp. */
  .float-call {
    position: fixed; right: 20px; z-index: 94;
    bottom: calc(var(--banner-h, 40px) + 84px);
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; padding: 14px; border-radius: 50%;
    background: var(--gray-1); color: var(--white); box-shadow: var(--shadow-md);
  }
  .float-call svg { width: 22px; height: 22px; }
  .float-call:hover { background: var(--black); }
  .map-embed { aspect-ratio: 4 / 5; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .footer-grid { grid-template-columns: 1fr; }
  .notice-strip { padding: 24px; }
  .preview-banner { font-size: 12px; }
  .preview-banner-long { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}