/* ==========================================================================
   METROL — Sistema de diseño
   Paleta derivada del logo: azul institucional + gris metálico (peso patrón)
   ========================================================================== */

:root{
  /* ---- Paleta (desde el logo: azul + blanco, con gris solo como apoyo) ---- */
  --color-primary:      #1B3B8C;   /* azul del anillo/cinta del logo */
  --color-primary-dark: #0F2864;
  --color-primary-light:#2F5BC7;
  --color-secondary:    #43494F;   /* gris metálico de la pesa patrón, uso mínimo */
  --color-secondary-dark:#1A2233;
  --color-accent:        #2F5BC7;   /* azul claro del logo como acento, no bronce */
  --color-accent-dark:   #1B3B8C;
  --color-accent-rgb:    47,91,199;
  --color-primary-rgb:   27,59,140;

  --color-background:   #FBFCFE;   /* blanco ligeramente frío, no blanco puro */
  --color-surface:      #F1F4FB;   /* azul-blanco sutil para alternar secciones */
  --color-surface-strong:#E7ECF7;

  /* ---- Tonos oscuros premium (derivados del azul del logo) para secciones de contraste ---- */
  --color-ink:          #0A1530;   /* base navy profunda */
  --color-ink-2:        #0F1E42;   /* navy media, para gradientes */
  --color-ink-surface:  #13224A;   /* superficie de tarjeta sobre ink */
  --color-ink-border:   rgba(255,255,255,.10);
  --color-ink-text:     #EAEFFB;
  --color-ink-muted:    #A7B2CC;

  --color-dark:         var(--color-ink);
  --color-dark-surface: var(--color-ink-2);

  --color-text:         #1A1F2B;
  --color-muted:        #495264;   /* más oscuro que el gris original (#5B6472): ese no siempre alcanzaba 4.5:1 sobre blanco/superficie */
  --color-border:       #E1E4EA;
  --color-border-strong:#CBD2E0;
  --color-scrim-strong: rgba(6,12,28,.86);
  --color-scrim-soft:   rgba(6,12,28,.42);

  --color-success:      #1F8A4C;
  --color-warning:      #B9791C;
  --color-error:         #C23B32;

  /* ---- Acentos técnicos por línea de certificación (hero system) ---- */
  --hero-accent: var(--color-primary);
  --hero-accent-soft: rgba(27,59,140,.08);

  /* ---- Tipografía ---- */
  --font-display: 'Sora', 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'DM Sans', sans-serif;

  --fs-h1: clamp(2.6rem, 5.4vw, 4.7rem);
  --fs-h2: clamp(1.95rem, 3.4vw, 2.9rem);
  --fs-h3: clamp(1.35rem, 2vw, 1.7rem);
  --fs-h4: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.78rem;

  /* ---- Espaciado fluido ---- */
  --space-1: clamp(.5rem, .4rem + .3vw, .75rem);
  --space-2: clamp(.9rem, .7rem + .6vw, 1.3rem);
  --space-3: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  --space-4: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  --space-5: clamp(3rem, 2.2rem + 2.6vw, 4.6rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 860px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --shadow-xs: 0 1px 3px rgba(14,21,38,.05);
  --shadow-sm: 0 3px 14px rgba(14, 21, 38, 0.07);
  --shadow-md: 0 14px 36px rgba(14, 21, 38, 0.11);
  --shadow-lg: 0 28px 70px rgba(14, 21, 38, 0.16);
  --shadow-glow: 0 0 0 1px rgba(var(--color-accent-rgb),.14), 0 20px 48px rgba(var(--color-accent-rgb),.16);
  --header-h: 96px;
  --header-h-scrolled: 72px;
  --transition: 220ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 460ms cubic-bezier(.16,1,.3,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

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

body{
  margin:0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-background);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  position: relative;
}
/* Luz ambiental fija y muy sutil: rompe la monotonía del blanco sin oscurecer el sitio */
body::before{
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 88% -6%, rgba(var(--color-accent-rgb),.07), transparent 60%),
    radial-gradient(900px 560px at -8% 30%, rgba(var(--color-primary-rgb),.05), transparent 60%);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-secondary-dark);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
}
h1{ font-size: var(--fs-h1); font-weight: 800; }
h2{ font-size: var(--fs-h2); font-weight: 700; }
h3{ font-size: var(--fs-h3); font-weight: 600; }
h4{ font-size: var(--fs-h4); font-weight: 600; }
p{ margin: 0 0 1em; color: var(--color-muted); max-width: 62ch; }

.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; position:relative; }
.container-narrow{ max-width: var(--container-narrow); margin:0 auto; padding: 0 24px; }
.section{ padding: var(--space-5) 0; position:relative; scroll-margin-top: 110px; }

/* ---- Sección de contraste: navy profundo derivado del logo, uso puntual ---- */
.section-dark{
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(47,91,199,.20), transparent 60%),
    radial-gradient(700px 420px at 5% 100%, rgba(47,91,199,.12), transparent 55%),
    linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-2) 100%);
  color: var(--color-ink-text);
  position:relative; overflow:hidden;
}
.section-dark::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse at 70% 20%, #000 0%, transparent 65%);
}
.section-dark > *{ position:relative; z-index:1; }
.section-dark p{ color: var(--color-ink-muted); }
.section-dark h2, .section-dark h3, .section-dark h4{ color: var(--color-ink-text); }
.section-dark .eyebrow{ color: #8FB0FF; }
.section-dark .eyebrow::before{ background: #8FB0FF; }
.section-dark .service-card{
  background: var(--color-ink-surface); border-color: var(--color-ink-border);
}
.section-dark .service-card-body h3{ color: var(--color-ink-text); }
.section-dark .service-card-body p{ color: var(--color-ink-muted); }
.section-dark .service-card-link{ color: #8FB0FF; }
.section-dark .service-card:hover{ border-color: transparent; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.section-dark .split-media{ box-shadow: 0 30px 70px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1); }
.section-dark .section-head p{ color: var(--color-ink-muted); }

.section-surface{ background: var(--color-surface); position:relative; }

/* Textura técnica sutil: papel cuadriculado de laboratorio, sin peso de imagen */
.section-surface::before,
.page-hero::before,
.hero::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(27,59,140,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,59,140,.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  z-index:0;
}
.section-surface > *{ position:relative; z-index:1; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.eyebrow::before{
  content:""; width: 26px; height: 2px; background: var(--color-accent);
  display:inline-block; border-radius:2px;
}
.section-dark .eyebrow{ color: var(--color-accent); }

.section-head{ max-width: 640px; margin-bottom: var(--space-4); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ max-width: 56ch; }
.section-head.center p{ margin-inline:auto; }

/* ---- Palabra destacada con gradiente sutil dentro de títulos ---- */
.text-gradient{
  background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-accent) 55%, var(--color-primary-light) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Título con revelado por líneas (JS envuelve en <span data-line>) ----
   El estado oculto solo se aplica bajo .title-lines-ready (ver components.js:
   initTitleLines + animations.css). Si initTitleLines() nunca llega a
   ejecutar, o falla a mitad (de camino o dentro del observer), esa clase
   nunca se agrega o se retira de inmediato, y el título se queda/vuelve a su
   texto normal, nunca oculto permanentemente. Clase independiente de
   .reveal-ready para que un fallo aquí no oculte [data-reveal] y viceversa. */
.title-lines{ overflow:hidden; }
.title-lines-ready .title-lines span[data-line]{
  display:block; transform: translateY(110%); opacity:0;
  transition: transform 800ms var(--ease-out-expo), opacity 800ms var(--ease-out-expo);
}
.title-lines.in-view span[data-line]{ transform:none; opacity:1; }
.title-lines span[data-line]:nth-child(2){ transition-delay: 70ms; }
.title-lines span[data-line]:nth-child(3){ transition-delay: 140ms; }

/* ---- Botones ---- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height: 52px; padding: 0 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  isolation:isolate;
}
.btn:focus-visible{ outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* Foco visible genérico para cualquier elemento interactivo que no tenga
   ya una regla de foco más específica (nav, cards con lightbox, resultados
   de búsqueda, etc.) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible{
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:active{ transform: translateY(0) scale(.98); }
.btn-primary{
  background: linear-gradient(155deg, var(--color-primary-light) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
  color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 24px rgba(var(--color-primary-rgb),.22);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-md), 0 0 0 1px rgba(var(--color-primary-rgb),.15); }
.btn-accent{
  background: linear-gradient(155deg, var(--color-accent) 0%, var(--color-primary) 100%);
  color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 10px 24px rgba(var(--color-accent-rgb),.2);
}
.btn-accent:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, var(--shadow-md); }
.btn-ghost{ background: transparent; border-color: var(--color-border); color: var(--color-secondary-dark); }
.btn-ghost:hover{ background: var(--color-surface); border-color: var(--color-border-strong); }
.btn-outline{ background: transparent; border-color: var(--color-border); color: var(--color-secondary-dark); }
.btn-outline:hover{ border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-text{ height:auto; padding:0; background:none; color:var(--color-primary); gap:6px; }
.btn-text::after{ content:"→"; transition: transform var(--transition); }
.btn-text:hover::after{ transform: translateX(5px); }
.btn-sm{ height:42px; padding: 0 18px; font-size: .85rem; }
.btn-lg{ height:58px; padding: 0 34px; font-size: 1rem; }
.btn-wa{
  background: linear-gradient(155deg, #26C468 0%, #1F8A4C 60%, #166638 100%);
  color:#fff; box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 10px 26px rgba(31,138,76,.28);
}
.btn-wa:hover{ transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 16px 34px rgba(31,138,76,.34); filter: brightness(1.04); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none !important; }
@media (max-width: 420px){
  .btn{ white-space: normal; text-align:center; height:auto; min-height:52px; padding: 12px 22px; }
}

.tag{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius: 999px;
  background: var(--hero-accent-soft); color: var(--hero-accent);
  font-size: var(--fs-label); font-weight: 700; letter-spacing:.05em; text-transform:uppercase;
  border: 1px solid rgba(var(--color-accent-rgb),.16);
}
.tag::before{ content:""; width:6px; height:6px; border-radius:50%; background: currentColor; }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--color-primary); color:#fff;
  padding:12px 20px; z-index:200; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* Visualmente oculto pero disponible para lectores de pantalla (labels, etc.) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

::selection{ background: var(--color-accent); color:#fff; }

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

/* ==========================================================================
   Rediseño radical (Fase 7) — recursos editoriales compartidos
   Motivo: dar a Metrol una identidad propia ("precisión industrial
   contemporánea") en vez de reutilizar el mismo patrón de "título centrado +
   tarjetas" en cada sección. Estas clases son deliberadamente pocas y se
   combinan entre secciones para variar la composición sin introducir
   colores o efectos ajenos a la paleta azul/marino ya establecida.
   ========================================================================== */

/* Numeración editorial grande (para procesos, valores, pasos de servicio).
   Nunca es el único portador de información — siempre acompaña un texto real
   — así que puede usarse en su variante "fantasma" (baja opacidad) sin
   afectar accesibilidad: es decorativa (aria-hidden en el HTML). */
.editorial-num{
  font-family: var(--font-display); font-weight:800; line-height:.9;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  color: var(--color-primary); opacity:.16;
  letter-spacing:-.02em;
}
.section-dark .editorial-num{ color:#8FB0FF; opacity:.22; }

/* Divisor "regla de medición": una línea con marcas cortas a intervalos,
   como una escala graduada — motivo gráfico pedido para reforzar la
   identidad de metrología sin usar iconografía inventada ni certificaciones
   falsas. Puramente decorativo (aria-hidden). */
.measure-rule{
  --tick: rgba(27,59,140,.35);
  height:9px; width:100%; position:relative;
  background-image:
    repeating-linear-gradient(90deg, var(--tick) 0 1.5px, transparent 1.5px 14px),
    linear-gradient(90deg, var(--tick), transparent 92%);
  background-position: 0 0, 0 100%;
  background-size: 100% 9px, 100% 1.5px;
  background-repeat: no-repeat;
}
.measure-rule.short{ width:64px; }
.section-dark .measure-rule{ --tick: rgba(143,176,255,.4); }

/* Cabecera de sección asimétrica: número + eyebrow a la izquierda, título
   más grande a la derecha — reemplaza el patrón "eyebrow + h2 centrados"
   repetido en casi toda la Fase 5/6. */
.section-kicker{
  display:grid; grid-template-columns: auto 1fr; gap: clamp(20px,4vw,56px);
  align-items:end; margin-bottom: var(--space-4);
}
.section-kicker-num{ grid-row: 1 / 3; }
.section-kicker .eyebrow{ margin-bottom:10px; }
.section-kicker h2{ margin:0; }
.section-kicker p{ grid-column: 2; margin-top:14px; }
@media (max-width: 720px){
  .section-kicker{ grid-template-columns:1fr; }
  .section-kicker-num{ display:none; }
  .section-kicker p{ grid-column:1; }
}

/* Superficie de apoyo para texto sobre fotografía: un degradado localizado,
   no una sombra de texto. Se usa detrás de titulares/leads que se apoyan
   sobre una imagen (hero, heroes interiores) para garantizar contraste sin
   diluir la fotografía completa. Cada punto de anclaje (top/bottom/left) se
   activa con un modificador. */
.text-scrim{ position:relative; isolation:isolate; }
.text-scrim::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-24px -28px;
  background: radial-gradient(ellipse at center, var(--color-scrim-strong) 0%, rgba(6,12,28,.55) 62%, transparent 85%);
  border-radius: 28px;
}
.text-scrim.on-light::before{
  background: radial-gradient(ellipse at center, var(--color-background) 0%, rgba(251,252,254,.88) 60%, transparent 85%);
}

/* ---- Panel técnico flotante (usado en heroes) ---- */
.tech-panel{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 18px 20px;
}

/* ---- Página de transición (overlay multipágina, ver main.js) ---- */
.page-transition{
  position:fixed; inset:0; z-index:999; pointer-events:none;
  background: var(--color-primary);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 420ms var(--ease-out-expo);
}
.page-transition.is-leaving{ transform: scaleY(1); transform-origin: bottom; }
.page-transition.is-entering{ transform: scaleY(0); transform-origin: top; }
@media (prefers-reduced-motion: reduce){
  .page-transition{ display:none; }
}