/* --------------------------------------------------------------------------
   0. TIPOGRAFÍAS
   Servidas desde este mismo dominio, no desde Google. Así el navegador del
   visitante no le manda su IP a un tercero, y el sitio funciona igual aunque
   Google esté bloqueado o caído.
   Licencia SIL Open Font License 1.1 — Archivo e IBM Plex.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/archivo-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fuentes/archivo-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fuentes/archivo-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fuentes/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fuentes/ibm-plex-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fuentes/ibm-plex-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   LiberLink — Hoja de estilos
   Paleta derivada del logo: azul marino profundo, azul eléctrico, cian de fibra.
   Tipografías: Archivo (títulos), IBM Plex Sans (texto), IBM Plex Mono (datos).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Superficies */
  --ink-900: #05070f;
  --ink-850: #080d1a;
  --ink-800: #0a1120;
  --ink-700: #0e1626;
  --ink-600: #121c30;

  /* Líneas */
  --line: #1b2740;
  --line-2: #2a3a5c;

  /* Marca */
  --blue: #2f6bff;
  --blue-btn: #2563eb;   /* fondo de botón: 5.2:1 con texto blanco */
  --blue-lift: #5b8cff;
  --blue-deep: #1d4ed8;
  --cyan: #22d3ee;

  /* Texto — todos verificados sobre --ink-900 */
  --text: #eef2f9;        /* 18.4:1 */
  --text-dim: #97a6c0;    /*  8.1:1 */
  --text-mut: #7789a8;    /*  5.1:1 sobre tarjetas, 5.7:1 sobre el fondo */

  /* Estado */
  --ok: #34d399;
  --err: #fb7185;

  /* Tipografía */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Ritmo */
  --shell: 1240px;
  --gutter: 24px;
  --radius: 14px;
  --radius-sm: 9px;

  /* Movimiento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 160ms;
  --t-mid: 260ms;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* deja aire bajo el header fijo al saltar por anclas */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--blue-lift);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--cyan); }

img, svg { max-width: 100%; display: block; }
img { height: auto; }

strong { font-weight: 600; color: var(--text); }

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

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

/* --------------------------------------------------------------------------
   3. UTILIDADES DE LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell-narrow {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: clamp(64px, 8vw, 104px); }
.band--tight { padding-block: clamp(48px, 5vw, 68px); }
.band--panel { background: var(--ink-850); }
.band--edge { border-block: 1px solid var(--line); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 200;
  background: var(--blue-btn);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* --------------------------------------------------------------------------
   4. ENCABEZADOS DE SECCIÓN
   Marcados como una lámina técnica: etiqueta mono + filete + título.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}

.head { max-width: 700px; margin-bottom: clamp(36px, 4vw, 56px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .eyebrow::before { display: none; }

.head h2 {
  font-size: clamp(28px, 3.6vw, 43px);
  margin-bottom: 16px;
}
.head p {
  color: var(--text-dim);
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 620px;
}
.head--center p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--blue-btn);
  color: #fff;
  box-shadow: 0 6px 24px -8px rgba(47, 107, 255, .7);
}
.btn--primary:hover { background: #2f6bff; color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-2);
}
.btn--ghost:hover {
  color: var(--text);
  border-color: var(--cyan);
  background: rgba(34, 211, 238, .06);
}

.btn--wide { width: 100%; }
.btn svg { width: 17px; height: 17px; flex: none; }

/* --------------------------------------------------------------------------
   6. BARRA DE UTILIDAD + NAVEGACIÓN
   -------------------------------------------------------------------------- */
.utility {
  background: var(--ink-800);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.utility__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 38px;
  padding-block: 4px;
}
.utility__status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6);
  animation: pulse 2.4s var(--ease) infinite;
  flex: none;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.utility__links { display: flex; align-items: center; gap: 26px; }
.utility__grupo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.utility__rotulo {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mut);
}
.utility__links a {
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 5px;   /* 24px de alto mínimo */
}
.utility__links a:hover { color: var(--text); }
.utility__links svg { width: 14px; height: 14px; opacity: .75; }

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 7, 15, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-mid) var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--line-2); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  flex: none;
}
.brand:hover { color: var(--text); }
/* El logo es un escudo vertical: se muestra como placa, no recortado */
.brand__mark {
  width: 32px;
  height: 44px;
  flex: none;
  border-radius: 5px;
  object-fit: contain;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.nav__links a {
  position: relative;
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 500;
  padding-block: 6px;
}
.nav__links a:hover { color: var(--text); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--text); }

.nav__cta { flex: none; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  flex: none;
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }

/* Panel móvil */
.nav__drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--ink-850);
  padding: 18px var(--gutter) 26px;
}
.nav__drawer.is-open { display: block; }
.nav__drawer a {
  display: block;
  padding: 14px 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}
.nav__drawer a[aria-current="page"] { color: var(--cyan); }
.nav__drawer .btn { margin-top: 20px; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--line);
}
.hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 780px;
  background:
    radial-gradient(ellipse 60% 46% at 22% 30%, rgba(47, 107, 255, .30), transparent 68%),
    radial-gradient(ellipse 42% 38% at 78% 18%, rgba(34, 211, 238, .16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(43, 58, 92, .30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 58, 92, .30) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(ellipse 76% 62% at 50% 34%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 76% 62% at 50% 34%, #000 20%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
/* hebras de fibra con un pulso de luz recorriéndolas */
.hero__fibers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero .shell { position: relative; z-index: 1; }

.hero__layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  margin-bottom: 22px;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(96deg, var(--blue-lift) 10%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  color: var(--text-dim);
  font-size: clamp(16px, 1.5vw, 18.5px);
  max-width: 560px;
  margin-bottom: 30px;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-bottom: 34px;
}

/* Fila de disciplinas bajo el hero */
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: rgba(14, 22, 38, .6);
  border-radius: 999px;
  padding: 7px 13px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
/* cuando la etiqueta es un enlace, el área tocable es toda la píldora */
.tag:has(a) { padding: 0; }
.tag a { color: inherit; display: block; padding: 9px 15px; }
.tag:has(a):hover { border-color: var(--cyan); color: var(--text); }

/* --------------------------------------------------------------------------
   8. PANEL OTDR — el elemento firma
   Reproduce la traza que deja un reflectómetro: la prueba de que el enlace
   quedó certificado. Es el artefacto propio del oficio.
   -------------------------------------------------------------------------- */
.otdr {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(47, 107, 255, .07), transparent 46%),
    var(--ink-700);
  overflow: hidden;
}
.otdr__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 15, .45);
}
.otdr__title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.otdr__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  color: var(--ok);
  border: 1px solid rgba(52, 211, 153, .35);
  background: rgba(52, 211, 153, .10);
  border-radius: 999px;
  padding: 3px 10px;
}
.otdr__plot { display: block; width: 100%; height: auto; }
.otdr__readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.otdr__cell {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
}
.otdr__cell:last-child { border-right: none; }
.otdr__val {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--cyan);
  letter-spacing: -0.01em;
}
.otdr__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-top: 3px;
}
.otdr__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--text-mut);
  background: rgba(5, 7, 15, .35);
}

/* Trazo animado del reflectómetro */
.trace-line {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: trace 2.8s var(--ease) .35s forwards;
}
@keyframes trace { to { stroke-dashoffset: 0; } }

/* Pulso de luz que recorre la fibra */
.fiber-pulse {
  stroke-dasharray: 5 260;
  stroke-dashoffset: 265;
  animation: fiber 3.6s linear infinite;
}
.fiber-pulse--b { animation-duration: 4.9s; animation-delay: .9s; }
.fiber-pulse--c { animation-duration: 4.2s; animation-delay: 2s; }
@keyframes fiber { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   9. MURO DE CLIENTES
   -------------------------------------------------------------------------- */
.clients__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mut);
  text-align: center;
  margin-bottom: 26px;
}
.clients__wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.client-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  min-height: 92px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-700);
  transition: border-color var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}
.client-plate:hover { border-color: var(--line-2); background: var(--ink-600); }
.client-plate__name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.015em;
}
.client-plate__kind {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-mut);
}

/* --------------------------------------------------------------------------
   10. TARJETAS
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-700);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease);
}
/* filete superior que se enciende: la fibra entrando en servicio */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}
.card:hover {
  border-color: var(--line-2);
  background: var(--ink-600);
  transform: translateY(-3px);
}
.card:hover::before { transform: scaleX(1); }

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: rgba(47, 107, 255, .13);
  border: 1px solid rgba(47, 107, 255, .22);
  color: var(--cyan);
  margin-bottom: 18px;
}
.card__icon svg { width: 21px; height: 21px; }

.card h3 {
  font-size: 19px;
  margin-bottom: 9px;
}
.card p {
  color: var(--text-dim);
  font-size: 15px;
}
.card__list {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.card__list li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mut);
  letter-spacing: 0.02em;
  padding-left: 15px;
  position: relative;
}
/* Tarjeta que enlaza a otra página: el título es el enlace real y su área
   se estira sobre toda la tarjeta, así se puede tocar en cualquier punto
   sin duplicar enlaces para quien navega con lector de pantalla. */
.card--enlace { cursor: pointer; }
.card--enlace h3 a { color: inherit; }
.card--enlace h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card--enlace:hover h3 a { color: var(--cyan); }
.card--enlace:focus-within {
  border-color: var(--cyan);
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}
.card--enlace:focus-within h3 a { color: var(--cyan); }
.card--enlace h3 a:focus-visible { outline: none; }

.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 1px;
  background: var(--cyan);
}

/* Tarjeta de caso: cliente + alcance */
.case h3 { font-size: 20px; margin-bottom: 4px; }
.case .btn { margin-top: 18px; }
.case__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 13px;
}

/* --------------------------------------------------------------------------
   11. SECTORES
   -------------------------------------------------------------------------- */
.sector {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.sector:last-child { border-bottom: none; }
.sector__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mut);
  padding-top: 4px;
  flex: none;
  width: 34px;
}
.sector h3 { font-size: 18px; margin-bottom: 5px; }
.sector p { color: var(--text-dim); font-size: 15px; }

/* --------------------------------------------------------------------------
   12. CIFRAS
   -------------------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-700);
}
.figure {
  padding: 30px 26px;
  border-right: 1px solid var(--line);
}
.figure:last-child { border-right: none; }
.figure__num {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(150deg, var(--text) 30%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.figure__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   13. PROCESO — trazado como una ruta de fibra
   -------------------------------------------------------------------------- */
.route { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 22px;
  position: relative;
  padding-bottom: 34px;
}
.step:last-child { padding-bottom: 0; }
/* la fibra que baja uniendo las etapas */
.step::before {
  content: "";
  position: absolute;
  left: 15px; top: 34px; bottom: -2px;
  width: 1px;
  background: linear-gradient(180deg, var(--line-2), var(--line));
}
.step:last-child::before { display: none; }

.step__node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.step__dot {
  width: 31px; height: 31px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--ink-800);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--cyan);
  flex: none;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--text-dim); font-size: 15px; max-width: 620px; }
.step__out {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mut);
}
.step__out b { color: var(--cyan); font-weight: 500; }

/* --------------------------------------------------------------------------
   14. PANEL DE ENTREGABLES
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

/* Título y bajada de un bloque partido, fuera de .head */
.split h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  margin-bottom: 14px;
}
.split h1 {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 14px;
}
.head__lead {
  color: var(--text-dim);
  font-size: clamp(15px, 1.3vw, 16.5px);
  max-width: 560px;
  margin-bottom: 26px;
}

.checklist { display: flex; flex-direction: column; gap: 14px; }
.checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-dim);
  font-size: 15.5px;
}
.checklist svg {
  width: 19px; height: 19px;
  color: var(--cyan);
  flex: none;
  margin-top: 3px;
}

.manifest {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-700);
  overflow: hidden;
}
.manifest__bar {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(5, 7, 15, .45);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.manifest__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
}
.manifest__row:last-child { border-bottom: none; }
.manifest__row svg { width: 15px; height: 15px; color: var(--ok); flex: none; }

/* --------------------------------------------------------------------------
   14b. FOTOS DE OBRA
   -------------------------------------------------------------------------- */
/* Composición de una obra: la foto principal, la ficha técnica y las dos de
   apoyo forman UNA sola grilla con el mismo aire entre piezas. Antes las fotos
   quedaban sueltas debajo del texto y chocaban con el recuadro de datos. */
.obra {
  display: grid;
  grid-template-columns: 0.95fr 1.4fr;
  grid-template-rows: auto auto;
  gap: 14px;
  align-items: stretch;
}
.obra__principal {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
}
/* La foto principal tiene que llenar todo el alto que le da la grilla, sea el
   que sea. Se posiciona absoluta dentro de su contenedor para no depender de
   que el navegador resuelva un height:100% en cadena, y así no queda hueco. */
.obra__principal picture {
  flex: 1 1 auto;
  display: block;
  position: relative;
  min-height: 260px;
}
.obra .obra__principal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.obra__ficha { grid-column: 2; grid-row: 1; }
.obra__apoyos {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.shot {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-700);
  transition: border-color var(--t-mid) var(--ease);
}
.shot:hover { border-color: var(--line-2); }
.shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
}
.shot--wide img { aspect-ratio: 16 / 9; }
.shot figcaption {
  padding: 12px 15px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--text-mut);
}

/* Ficha técnica de una obra */
.ficha {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-700);
  overflow: hidden;
}
.ficha__row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.ficha__row:last-child { border-bottom: none; }
.ficha__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mut);
  padding-top: 3px;
}
.ficha__v { font-size: 15px; color: var(--text); }

/* --------------------------------------------------------------------------
   15. PREGUNTAS FRECUENTES
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--cyan); }
.faq__q svg {
  width: 19px; height: 19px;
  flex: none;
  color: var(--text-mut);
  transition: transform var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.faq__item[open] .faq__q svg { transform: rotate(45deg); color: var(--cyan); }
.faq__a {
  padding: 0 4px 24px;
  color: var(--text-dim);
  font-size: 15.5px;
  max-width: 760px;
}

/* --------------------------------------------------------------------------
   15b. TEXTO LARGO (páginas legales)
   -------------------------------------------------------------------------- */
.prose { margin-top: 34px; }
.prose h2 {
  font-size: 21px;
  margin: 38px 0 12px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.prose p {
  color: var(--text-dim);
  font-size: 15.5px;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   16. LLAMADO A LA ACCIÓN
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: clamp(36px, 5vw, 60px);
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, rgba(47, 107, 255, .22), transparent 62%),
    radial-gradient(ellipse 50% 100% at 90% 100%, rgba(34, 211, 238, .12), transparent 60%),
    var(--ink-700);
}
.cta-band h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  margin-bottom: 14px;
  max-width: 620px;
}
.cta-band p {
  color: var(--text-dim);
  font-size: 16.5px;
  max-width: 560px;
  margin-bottom: 28px;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* --------------------------------------------------------------------------
   17. FORMULARIO
   -------------------------------------------------------------------------- */
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-700);
  padding: clamp(24px, 3vw, 36px);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}
.field label .opt {
  font-weight: 400;
  color: var(--text-mut);
  font-size: 12.5px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  background: var(--ink-900);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237789a8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
  padding-right: 40px;
  cursor: pointer;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mut); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .16);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--err); }

.field__err {
  font-size: 12.5px;
  color: var(--err);
  min-height: 0;
}
.field__err:empty { display: none; }

/* trampa antispam: fuera de vista pero no display:none */
.gotcha {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.form-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-mut);
}
.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  border: 1px solid var(--line-2);
  background: var(--ink-900);
}
.form-status:empty { display: none; }
.form-status[data-state="ok"] {
  border-color: rgba(52, 211, 153, .4);
  background: rgba(52, 211, 153, .08);
  color: var(--ok);
}
.form-status[data-state="err"] {
  border-color: rgba(251, 113, 133, .4);
  background: rgba(251, 113, 133, .08);
  color: var(--err);
}
.form-status[data-state="busy"] { color: var(--text-dim); }

/* Bloque de datos de contacto */
.contact-line {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-line:last-child { border-bottom: none; }
.contact-line__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(47, 107, 255, .13);
  border: 1px solid rgba(47, 107, 255, .22);
  color: var(--cyan);
  flex: none;
}
.contact-line__icon svg { width: 18px; height: 18px; }
.contact-line__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 3px;
}
.contact-line__val { font-size: 16px; color: var(--text); font-weight: 500; }
.contact-line__val a { color: var(--text); }
.contact-line__val a:hover { color: var(--cyan); }
.contact-line__sub { font-size: 13.5px; color: var(--text-mut); margin-top: 2px; }

/* --------------------------------------------------------------------------
   18. PIE
   -------------------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line);
  background: var(--ink-850);
  /* el margen inferior deja lugar al botón flotante de WhatsApp */
  padding-block: 56px 96px;
}
.foot__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.foot__about {
  color: var(--text-dim);
  font-size: 14.5px;
  max-width: 320px;
  margin-top: 14px;
}
.foot__col-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-bottom: 15px;
}
.foot__col li { margin-bottom: 3px; }
.foot__rotulo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-mut);
  margin-top: 14px !important;
  margin-bottom: 2px !important;
}
.foot__col li:first-child.foot__rotulo { margin-top: 0 !important; }
.foot__col a {
  color: var(--text-dim);
  font-size: 14.5px;
  display: inline-block;
  padding-block: 5px;   /* 24px de alto mínimo */
}
.foot__col a:hover { color: var(--cyan); }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 13px;
  color: var(--text-mut);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__legal a { display: inline-block; padding-block: 3px; }

/* --------------------------------------------------------------------------
   19. BOTÓN FLOTANTE DE WHATSAPP
   -------------------------------------------------------------------------- */
.wa {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px 13px 15px;
  border-radius: 999px;
  background: #075e54;
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.wa:hover { transform: translateY(-2px); background: #0a7a6d; color: #fff; }
.wa svg { width: 21px; height: 21px; flex: none; }

/* --------------------------------------------------------------------------
   20. APARICIÓN AL HACER SCROLL
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   21. ADAPTACIÓN A PANTALLAS
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  /* los dos bloques de contacto necesitan el ancho del estado de guardia */
  .utility__status { display: none; }
}

@media (max-width: 1080px) {
  .hero__layout { grid-template-columns: 1fr; }
  .otdr { max-width: 560px; }
  .clients__wall { grid-template-columns: repeat(3, 1fr); }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .galeria { grid-template-columns: 1fr 1fr; }
  /* en pantallas medianas la obra pasa a una columna */
  .obra { grid-template-columns: 1fr; }
  .obra__principal, .obra__ficha, .obra__apoyos { grid-column: 1; grid-row: auto; }
  .obra__principal picture { position: static; min-height: 0; }
  .obra .obra__principal img { position: static; aspect-ratio: 4 / 5; height: auto; }
  .nav__toggle { display: flex; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure:nth-child(2) { border-right: none; }
  .figure:nth-child(1), .figure:nth-child(2) { border-bottom: 1px solid var(--line); }
  .utility__status { display: none; }
  /* Con dos contactos, en fila no entran: cada bloque se apila
     (rótulo / teléfono / correo) y los dos quedan lado a lado. */
  .utility__links { gap: 20px; align-items: flex-start; }
  .utility__grupo { flex-direction: column; align-items: flex-start; gap: 0; }
  .utility__row { align-items: center; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .galeria { grid-template-columns: 1fr; }
  .obra__apoyos { grid-template-columns: 1fr; }
  .ficha__row { grid-template-columns: 1fr; gap: 4px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .clients__wall { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: 1fr; }
  .otdr__readout { grid-template-columns: 1fr; }
  .otdr__cell { border-right: none; border-bottom: 1px solid var(--line); }
  .otdr__cell:last-child { border-bottom: none; }
  .foot__top { grid-template-columns: 1fr; gap: 28px; }
  .hero__ctas .btn { width: 100%; }
  .utility__links { width: 100%; justify-content: space-between; gap: 10px; }
  .utility__rotulo { font-size: 9.5px; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  .step::before { display: none; }
  .wa span { display: none; }
  .wa { padding: 15px; }
}

/* --------------------------------------------------------------------------
   22. MOVIMIENTO REDUCIDO Y IMPRESIÓN
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .trace-line { stroke-dashoffset: 0; }
  .fiber-pulse { display: none; }
}

@media print {
  .utility, .masthead, .wa, .hero__glow, .hero__grid { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .otdr, .figures { border-color: #ccc; }
}