/* ══════════════════════════════════════════════════════════════════════════
   GEOTEL · /telecom — enlaces, torres y redes.
   Misma estructura que /web y /cctv; cambia el acento, que aquí es violeta.
   Autónoma a propósito: base.css define un tema oscuro y aquí el fondo es
   claro. Si el proyecto se unifica, estos tokens suben a base.css.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color ────────────────────────────────────────────────────────────
     Contraste medido sobre blanco:
       tinta 18.6:1 · texto 10.1:1 · suave 6.5:1 · violeta 8.0:1 · oro 5.4:1
     Sobre la banda violeta oscura #1A0E33:
       blanco 18.2:1 · texto 10.4:1 · tenue 5.9:1 · oro claro 9.6:1 */
  --papel:    #FFFFFF;
  --papel-2:  #F6F5FB;
  --papel-3:  #EBE8F7;
  --tinta:    #16101F;
  --texto:    #453E56;
  --suave:    #635A73;
  --accion:   #5B34B8;   /* acción y estructura */
  --accion-osc: #1A0E33;   /* bandas oscuras */
  --accion-suave: #EFEBFB;
  --oro:      #8A6414;   /* el oro de GEOTEL, oscurecido para fondo claro */
  --oro-claro:#E8B44A;   /* solo sobre fondo oscuro */
  /* Los cuatro acentos de GEOTEL, para identificar cada servicio. */
  --l-oro: #E8B44A;  --l-cian: #4FC3D9;  --l-violeta: #9B7BF0;  --l-verde: #5FD08A;
  --linea:    #E7E4F2;
  --linea-2:  #D0CBE3;
  --borde:    #847E9C;   /* 3.9:1 — bordes de controles */

  /* Colores que antes estaban fijos dentro de las reglas. Al vivir aquí, el
     tema oscuro solo tiene que redefinirlos. */
  --accion-txt:    #FFFFFF;   /* texto sobre el violeta sólido */
  --accion-hover:  #4A2A97;
  --head-bg:       rgb(255 255 255 / .92);
  --incluye-linea: #D9D2F0;
  --banda-bg:      #1A0E33;   /* barra de utilidad y bloque de contacto */
  --banda-txt:     #CBBEE4;
  --banda-titulo:  #FFFFFF;
  --banda-tenue:   #9B8CB8;
  --banda-borde:   #33215C;
  --banda-borde-2: #46307A;
  --banda-hover:   #241348;
  --pie-bg:        #120826;
  --pie-txt:       #B4A6CE;
  --pie-tenue:     #8D80A8;
  --pie-linea:     #271847;

  /* ── Tipografía ──────────────────────────────────────────────────────
     Jakarta para titulares (comercial y sólida, no editorial ni futurista)
     e Inter para el texto corrido, que es lo que mejor se lee en pantalla. */
  --titulo:   'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --cuerpo:   'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;

  /* ── Espacio y movimiento ────────────────────────────────────────── */
  --gutter:   clamp(20px, 5vw, 64px);
  --ancho:    1240px;
  --ease:     cubic-bezier(.22, 1, .36, 1);
  --t-fast:   .18s;
  --t-mid:    .38s;
  --sombra:   0 1px 2px rgb(13 21 38 / .04), 0 8px 24px -12px rgb(13 21 38 / .16);
}

/* ── Reinicio ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accion); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accion); color: var(--accion-txt); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; top: 8px; left: 8px; z-index: 200;
  padding: 12px 18px; background: var(--accion); color: var(--accion-txt);
  font-size: 13px; font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: none; }

/* ── Tipos ────────────────────────────────────────────────────────────── */
.t1, .t2, .t3 {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 800;
  color: var(--tinta);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.t1 { font-size: clamp(2.05rem, 3.6vw, 3.15rem); line-height: 1.12; }
.t2 { font-size: clamp(1.6rem, 2.7vw, 2.35rem); line-height: 1.18; }
.t3 { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.25; font-weight: 700; }

.eyebrow {
  display: flex; align-items: center; gap: 11px;
  margin: 0 0 16px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--suave);
}
.eyebrow .num {
  padding-right: 11px;
  border-right: 1px solid var(--linea-2);
  color: var(--oro);
  font-weight: 700;
}
.eyebrow--claro { color: var(--banda-tenue); }

.badge {
  display: inline-block;
  margin: 0 0 18px;
  padding: 7px 14px;
  background: var(--accion-suave);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--accion);
}

.lede, .sec__lede {
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: clamp(15.5px, 1.05vw, 17.5px);
  line-height: 1.72;
  color: var(--texto);
}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-family: var(--titulo);
  font-size: 14.5px; font-weight: 700;
  color: var(--tinta);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-fast) var(--ease);
}
.btn:hover { background: var(--papel-2); border-color: var(--tinta); }
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--accion); border-color: var(--accion); color: var(--accion-txt); }
.btn--solid:hover { background: var(--accion-hover); border-color: var(--accion-hover); color: var(--accion-txt); }
.btn--solid:hover svg { transform: translateX(3px); }
.btn--sm { min-height: 40px; padding: 0 17px; font-size: 13.5px; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 15.5px; }

/* ── Aparición ────────────────────────────────────────────────────────── */
/* Sobria a propósito: 16px y opacidad, nada más. El movimiento acompaña la
   lectura; no es el espectáculo. */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ── Barra de servicios ───────────────────────────────────────────────
   Ocupa todo el ancho, sin contenedor centrado: las cuatro líneas de
   negocio reparten la pantalla en partes iguales. Es el único sitio, además
   del pie, desde donde se salta de un servicio a otro. */
.lineas {
  display: grid;
  /* `minmax(0, …)`: sin esto la etiqueta más larga ensancharía su columna. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--banda-bg);
  border-bottom: 1px solid var(--banda-borde);
}
.lineas__a {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 12.5px; font-weight: 500;
  line-height: 1.25; text-align: center;
  color: var(--banda-txt);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lineas__a + .lineas__a { border-left: 1px solid var(--banda-borde); }
.lineas__a:hover { background: var(--banda-hover); color: var(--banda-titulo); }

/* Un punto del color del servicio: el mismo código cromático del portal. */
.lineas__punto {
  flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--l-oro);
}
.lineas__a[data-color="cian"]    .lineas__punto { background: var(--l-cian); }
.lineas__a[data-color="violeta"] .lineas__punto { background: var(--l-violeta); }
.lineas__a[data-color="verde"]   .lineas__punto { background: var(--l-verde); }

/* El servicio en el que estás: texto claro y un filete de su color abajo. */
.lineas__a[aria-current="page"] { color: var(--banda-titulo); font-weight: 600; }
.lineas__a[aria-current="page"]::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--l-oro);
}
/* El filete toma el color del servicio en el que estás, igual que el punto. */
.lineas__a[data-color="verde"][aria-current="page"]::after   { background: var(--l-verde); }
.lineas__a[data-color="violeta"][aria-current="page"]::after { background: var(--l-violeta); }
.lineas__a[data-color="cian"][aria-current="page"]::after    { background: var(--l-cian); }

.lineas__corto { display: none; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.head {
  position: sticky; top: 0; z-index: 60;
  background: var(--head-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow var(--t-mid) var(--ease);
}
.head.is-stuck { box-shadow: 0 1px 14px rgb(13 21 38 / .07); }
.head__in {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 40px);
  max-width: var(--ancho); margin: 0 auto;
  padding: 13px var(--gutter);
}

.logo {
  font-family: var(--titulo);
  font-weight: 800;
  font-size: clamp(17px, 1.3vw, 20px);
  letter-spacing: .13em;
  color: var(--tinta);
  white-space: nowrap;
}
.logo__p { color: var(--oro); }
/* El sufijo (WEB, CCTV, TELECOM…) va sin negrita: la marca es GEOTEL
   y el sufijo solo dice en qué sitio estás. */
.logo__s { font-weight: 500; }
/* Un latido por segundo, con bordes suaves en vez de un destello duro: a 1 Hz
   no hay riesgo fotosensible y molesta mucho menos en la periferia. */
@keyframes latido {
  0%, 44%  { opacity: 1; }
  50%, 94% { opacity: .18; }
  100%     { opacity: 1; }
}
.logo__p { animation: latido 1s ease-in-out infinite; }
.logo--claro { color: var(--banda-titulo); }
.logo--claro .logo__p { color: var(--oro-claro); }

.nav { display: flex; gap: clamp(14px, 1.9vw, 28px); margin-inline: auto; }
.nav a {
  position: relative;
  padding: 8px 0;
  font-size: 14.5px; font-weight: 500;
  color: var(--texto);
  transition: color var(--t-fast) var(--ease);
}
.nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--accion);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.nav a:hover, .nav a.is-here { color: var(--accion); }
.nav a.is-here::after { opacity: 1; }

.head__end { display: flex; align-items: center; gap: clamp(8px, 1.3vw, 18px); }
.lang { display: flex; align-items: center; gap: 4px; }
.lang__btn {
  min-width: 32px; min-height: 34px;
  font-size: 12.5px; font-weight: 600;
  color: var(--suave);
  transition: color var(--t-fast) var(--ease);
}
.lang__btn:hover, .lang__btn.is-on { color: var(--tinta); }
.lang__sep { color: var(--linea-2); font-size: 12px; }

.burger { display: none; width: 44px; height: 44px; place-items: center; }
.burger i { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--tinta); }
.burger i + i { margin-top: 5px; }

/* ── Portada ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(48px, 7vh, 88px) var(--gutter) clamp(56px, 8vh, 96px);
  background: linear-gradient(180deg, var(--accion-suave) 0%, rgb(232 240 250 / 0) 62%);
  overflow: clip;
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  max-width: var(--ancho); margin: 0 auto;
}
.hero__txt { max-width: 620px; }

.hero__conf {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: clamp(26px, 3.5vh, 38px) 0 0; padding: 0;
  list-style: none;
}
.hero__conf li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px; font-weight: 500;
  color: var(--texto);
}
/* Marca de verificación dibujada en CSS: sin iconos extra que descargar. */
.hero__conf li::before {
  content: '';
  position: absolute; left: 2px; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accion);
  border-bottom: 2px solid var(--accion);
  transform: rotate(-45deg);
}

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.5vh, 36px); }

/* Maqueta: dos capturas reales en marco de navegador */
/* La captura de atrás asoma arriba y a la derecha lo suficiente para
   leerse como un segundo sitio, no como un borde de color. */
.mock { position: relative; }
.mock figure { margin: 0; border-radius: 10px; overflow: hidden; background: var(--papel); box-shadow: var(--sombra); }
.mock figure::before {
  content: '';
  display: block; height: 24px;
  background: var(--papel-3);
  border-bottom: 1px solid var(--linea);
}
.mock img { width: 100%; height: auto; transition: opacity .26s var(--ease); }
.mock__a { position: relative; z-index: 2; border: 1px solid var(--linea-2); }

/* ── Ritmo de sección ─────────────────────────────────────────────────── */
.sec { padding: clamp(60px, 8.5vh, 108px) var(--gutter); }
.sec--gris { background: var(--papel-2); border-block: 1px solid var(--linea); }
.sec__head { max-width: var(--ancho); margin: 0 auto clamp(32px, 4.5vh, 56px); }

/* ── ¿Le suena alguna de estas? ───────────────────────────────────────── */
.dolor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  max-width: var(--ancho); margin: 0 auto; padding: 0;
  list-style: none;
}
.dolor__i {
  padding: clamp(22px, 2.2vw, 30px);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--oro);
  border-radius: 10px;
}
.dolor__q {
  margin: 0 0 12px;
  font-family: var(--titulo);
  font-size: 16px; font-weight: 700;
  line-height: 1.35;
  color: var(--tinta);
}
.dolor__a { margin: 0; font-size: 14.5px; line-height: 1.7; }

/* ── Servicios ────────────────────────────────────────────────────────── */
.serv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  max-width: var(--ancho); margin: 0 auto;
}
/* Seis tarjetas: tres y tres. Se fija a tres columnas en vez de dejarlo en
   `auto-fit` porque, según el ancho, este repartía cuatro y dos. */
@media (min-width: 1000px) {
  .serv { grid-template-columns: repeat(3, 1fr); }
}

.serv__i {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 10px;
  transition: border-color var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              transform var(--t-mid) var(--ease);
}
.serv__i:hover { border-color: var(--linea-2); box-shadow: var(--sombra); transform: translateY(-3px); }
.serv__ico {
  width: 28px; height: 28px;
  margin-bottom: 18px;
  fill: none; stroke: var(--accion); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.serv__t { margin: 0 0 9px; font-family: var(--titulo); font-size: 1.2rem; font-weight: 700; color: var(--tinta); }
.serv__d { margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; }

.lista { margin: auto 0 0; padding: 0; list-style: none; }
.lista li {
  position: relative;
  padding: 7px 0 7px 24px;
  border-top: 1px solid var(--linea);
  font-size: 13.5px;
  color: var(--suave);
}
.lista li::before {
  content: '';
  position: absolute; left: 3px; top: 13px;
  width: 10px; height: 5px;
  border-left: 2px solid var(--accion);
  border-bottom: 2px solid var(--accion);
  transform: rotate(-45deg);
}

/* ── Qué incluye ──────────────────────────────────────────────────────── */
.incluye {
  padding: clamp(48px, 7vh, 84px) var(--gutter);
  background: var(--accion-suave);
  border-block: 1px solid var(--incluye-linea);
}
.incluye__in { max-width: var(--ancho); margin: 0 auto; }
.incluye__l {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px clamp(20px, 2.6vw, 40px);
  margin: clamp(24px, 3vh, 34px) 0 0; padding: 0;
  list-style: none;
}
.incluye__l li {
  position: relative;
  padding-left: 28px;
  font-size: 14.5px; font-weight: 500;
  color: var(--tinta);
}
.incluye__l li::before {
  content: '';
  position: absolute; left: 4px; top: 7px;
  width: 12px; height: 6px;
  border-left: 2.5px solid var(--accion);
  border-bottom: 2.5px solid var(--accion);
  transform: rotate(-45deg);
}

/* ── Preguntas ────────────────────────────────────────────────────────── */
.faq__wrap { max-width: 880px; margin: 0 auto; }
.faq { border-top: 1px solid var(--linea-2); }
.qa { border-bottom: 1px solid var(--linea-2); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 19px 0;
  cursor: pointer; list-style: none;
  font-family: var(--titulo);
  font-size: 15.5px; font-weight: 700;
  color: var(--tinta);
  transition: color var(--t-fast) var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accion); }
.qa summary i { position: relative; flex: none; width: 14px; height: 14px; }
.qa summary i::before, .qa summary i::after {
  content: '';
  position: absolute; left: 0; top: 6px;
  width: 14px; height: 2px; border-radius: 2px;
  background: var(--accion);
  transition: transform var(--t-mid) var(--ease);
}
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i::after { transform: rotate(0); }
.qa p { max-width: 72ch; margin: 0 0 22px; font-size: 14.5px; line-height: 1.8; }

/* ── Contacto ─────────────────────────────────────────────────────────── */
.cierre {
  padding: clamp(60px, 8.5vh, 108px) var(--gutter);
  background: var(--banda-bg);
  color: var(--banda-txt);
}
.cierre__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: center;
  max-width: var(--ancho); margin: 0 auto;
}
.cierre .t2 { color: var(--banda-titulo); }
.cierre__d { max-width: 48ch; margin: 16px 0 0; font-size: 15.5px; line-height: 1.75; }
.cierre__resp {
  margin: 18px 0 0;
  font-size: 13.5px; font-weight: 600;
  color: var(--oro-claro);
}

.vias { display: grid; gap: 10px; }
.via {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 1px 15px;
  align-items: center;
  padding: 15px 19px;
  border: 1px solid var(--banda-borde);
  border-radius: 9px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.via:hover { background: var(--banda-hover); border-color: var(--oro-claro); }
.via--dest { background: var(--banda-hover); border-color: var(--banda-borde-2); }
.via svg {
  grid-row: span 2;
  width: 21px; height: 21px;
  fill: none; stroke: var(--oro-claro); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.via__k { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--banda-tenue); }
.via__v { font-family: var(--titulo); font-size: 15px; font-weight: 700; color: var(--banda-titulo); }

/* ── Pie ──────────────────────────────────────────────────────────────── */
.pie { padding: clamp(42px, 6vh, 68px) var(--gutter) 0; background: var(--pie-bg); color: var(--pie-txt); }
.pie__in {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(26px, 3.4vw, 52px);
  max-width: var(--ancho); margin: 0 auto;
}
.pie__d { max-width: 32ch; margin: 13px 0 0; font-size: 13.5px; line-height: 1.7; }
.pie__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pie__t { margin: 0 0 4px; font-family: var(--titulo); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pie-tenue); }
.pie__nav a { font-size: 13.5px; transition: color var(--t-fast) var(--ease); }
.pie__nav a:hover, .pie__nav a[aria-current="page"] { color: var(--banda-titulo); }
.pie__nav a[aria-current="page"] { border-bottom: 2px solid var(--oro-claro); }
.pie__addr { margin: 0; font-size: 13.5px; }

.pie__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  max-width: var(--ancho); margin: clamp(32px, 4.5vh, 52px) auto 0;
  padding: 17px 0;
  padding-bottom: max(17px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--pie-linea);
  font-size: 12.5px; color: var(--pie-tenue);
}
.pie__base p { margin: 0; }
.pie__base a:hover { color: var(--banda-titulo); }

/* ── Botón flotante de WhatsApp ───────────────────────────────────────── */
.wa {
  position: fixed; right: 18px; bottom: 18px;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  /* Verde de WhatsApp: es color de marca ajena, no del tema. */
  background: #128C4A;
  border-radius: 50%;
  box-shadow: 0 6px 20px -6px rgb(13 21 38 / .45);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.wa svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa:hover { background: #0E7A3F; transform: scale(1.05); }

/* ── Menú móvil ───────────────────────────────────────────────────────── */
/* Se anima con `animation`, no con una clase diferida: en cuanto deja de
   estar `hidden` es visible, así no puede quedar operativo pero invisible. */
.movil {
  position: fixed; inset: 0; z-index: 90;
  display: grid; align-content: center;
  padding: var(--gutter);
  background: var(--papel);
  animation: menuEntra var(--t-mid) var(--ease);
}
.movil[hidden] { display: none; }
.movil.is-closing { animation: menuSale var(--t-mid) var(--ease) forwards; }
@keyframes menuEntra { from { opacity: 0; } to { opacity: 1; } }
@keyframes menuSale  { from { opacity: 1; } to { opacity: 0; } }

.movil__nav { display: grid; }
.movil__nav a {
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
  font-family: var(--titulo);
  font-size: clamp(1.4rem, 5.5vw, 1.85rem); font-weight: 700;
  color: var(--tinta);
}
.movil__nav a:hover { color: var(--accion); }
.movil__pie { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 32px; font-size: 13.5px; color: var(--suave); }
.movil__x {
  position: absolute; top: 14px; right: var(--gutter);
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--linea-2); border-radius: 8px;
}
.movil__x svg { width: 18px; height: 18px; fill: none; stroke: var(--tinta); stroke-width: 2; stroke-linecap: round; }
.movil__x:hover { background: var(--papel-2); }
body.movil-open { overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════════
   TEMA OSCURO · tres estados
   1. `:root` de arriba define la paleta clara completa.
   2. Si el sistema pide oscuro y el visitante no eligió claro, se aplica.
   3. Si el visitante eligió oscuro explícitamente, gana siempre.
   Contraste medido sobre #100B1A: tinta 17.3:1 · texto 11.3:1 · suave 6.7:1
   violeta 8.7:1 · oro 10.2:1 · borde de control 3.6:1
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
  --papel:    #100B1A;
  --papel-2:  #171025;
  --papel-3:  #1F1730;
  --tinta:    #F4F1FA;
  --texto:    #C9C2DC;
  --suave:    #9C93B4;
  --accion:   #B9A0F5;
  --accion-osc: #0A0417;
  --accion-suave: #2A1D46;
  --oro:      #E8B44A;
  --linea:    #241C33;
  --linea-2:  #342A47;
  --borde:    #6E6685;
  --accion-txt:    #150B29;
  --accion-hover:  #CDBAFA;
  --head-bg:       rgb(16 11 26 / .92);
  --incluye-linea: #2E2350;
  --banda-bg:      #0A0417;
  --banda-txt:     #C3B6DE;
  --banda-titulo:  #F4F1FA;
  --banda-tenue:   #948AAE;
  --banda-borde:   #251A40;
  --banda-borde-2: #3A2C5E;
  --banda-hover:   #150C28;
  --pie-bg:        #070312;
  --pie-txt:       #A99CC4;
  --pie-tenue:     #837798;
  --pie-linea:     #1C1233;
  --sombra:   0 1px 2px rgb(0 0 0 / .35), 0 8px 26px -12px rgb(0 0 0 / .7);
  }
}

:root[data-tema="oscuro"] {
  --papel:    #100B1A;
  --papel-2:  #171025;
  --papel-3:  #1F1730;
  --tinta:    #F4F1FA;
  --texto:    #C9C2DC;
  --suave:    #9C93B4;
  --accion:   #B9A0F5;
  --accion-osc: #0A0417;
  --accion-suave: #2A1D46;
  --oro:      #E8B44A;
  --linea:    #241C33;
  --linea-2:  #342A47;
  --borde:    #6E6685;
  --accion-txt:    #150B29;
  --accion-hover:  #CDBAFA;
  --head-bg:       rgb(16 11 26 / .92);
  --incluye-linea: #2E2350;
  --banda-bg:      #0A0417;
  --banda-txt:     #C3B6DE;
  --banda-titulo:  #F4F1FA;
  --banda-tenue:   #948AAE;
  --banda-borde:   #251A40;
  --banda-borde-2: #3A2C5E;
  --banda-hover:   #150C28;
  --pie-bg:        #070312;
  --pie-txt:       #A99CC4;
  --pie-tenue:     #837798;
  --pie-linea:     #1C1233;
  --sombra:   0 1px 2px rgb(0 0 0 / .35), 0 8px 26px -12px rgb(0 0 0 / .7);
}

/* En tema oscuro las capturas del portafolio son láminas muy claras sobre
   fondo negro: se bajan un punto para que no deslumbren. */
:root[data-tema="oscuro"] @media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) }

/* ── Botón de tema ────────────────────────────────────────────────────── */
.tema {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--linea-2);
  border-radius: 8px;
  color: var(--texto);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tema:hover { background: var(--papel-2); border-color: var(--borde); color: var(--tinta); }
.tema svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Se muestra el icono de lo que se va a activar, no el del estado actual. */
.tema .i-luna { display: block; }
.tema .i-sol  { display: none; }
:root[data-tema="oscuro"] .tema .i-luna { display: none; }
:root[data-tema="oscuro"] .tema .i-sol  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .i-luna { display: none; }
  :root:not([data-tema="claro"]) .tema .i-sol  { display: block; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO AL DESPLAZAR
   Todo lo de aquí se anula bajo `prefers-reduced-motion` (final del archivo).
   ══════════════════════════════════════════════════════════════════════════ */

/* Barra de progreso de lectura, pegada al borde inferior de la cabecera. */
.progreso {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accion);
  transform: scaleX(0); transform-origin: left;
  will-change: transform;
}

/* Variantes de entrada. La dirección refuerza la lectura: en una sección de
   dos columnas cada mitad entra desde su lado. */
.reveal--l { transform: translate3d(-26px, 0, 0); }
.reveal--r { transform: translate3d(26px, 0, 0); }
.reveal--zoom { transform: translate3d(0, 18px, 0) scale(.975); }
.reveal--l.is-in, .reveal--r.is-in, .reveal--zoom.is-in { transform: none; }

/* Las dos capturas de la portada se mueven a distinta velocidad: el JS les
   escribe el `transform`, aquí solo se avisa al compositor. */
.mock figure { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal--l, .reveal--r, .reveal--zoom { transform: none; }
  .progreso { display: none; }
  .mock figure { transform: none !important; will-change: auto; }
  .logo__p { animation: none; opacity: 1; }
  .mock img { transition: none; }
}


/* ── Galería de terreno ───────────────────────────────────────────────
   Las fotos van en 4:3 y se recortan con object-fit para que la rejilla
   quede pareja aunque la toma original no lo esté. */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  max-width: var(--ancho); margin: 0 auto; padding: 0;
  list-style: none;
}
.foto img {
  display: block; width: 100%;
  /* `height: auto` es imprescindible: los atributos width/height del HTML
     fijan una altura y `aspect-ratio` solo actúa si una dimensión es auto. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--linea-2);
  border-radius: 10px;
  transition: transform .6s var(--ease);
}
/* La foto se acerca un punto al pasar por encima, igual que el portafolio
   de /web: indica que hay algo que mirar sin recortar nada. */
.foto { overflow: hidden; border-radius: 10px; }
.foto:hover img { transform: scale(1.03); }

.foto__pie {
  margin: 10px 0 0;
  font-size: 13px; line-height: 1.5;
  color: var(--suave);
}

/* ── Tiras: marcas y clientes ─────────────────────────────────────────
   Dos pistas idénticas una tras otra: cuando la primera se ha desplazado
   su propio ancho, la segunda ocupa su lugar y el ciclo no se nota. */
.tira-sec { padding: clamp(40px, 5.5vh, 66px) var(--gutter); }
.tira-sec--gris { background: var(--papel-2); border-block: 1px solid var(--linea); }
.tira-sec__in { max-width: var(--ancho); margin: 0 auto; }
.tira-sec__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: clamp(20px, 3vh, 30px);
}

.tira {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tira__pista {
  flex: 0 0 auto;
  display: flex; align-items: center;
  /* La separación se calcula para que una pista sea SIEMPRE más ancha que
     el contenedor (máx. 1240px): si no, al dar la vuelta se ve un hueco. */
  gap: clamp(38px, 4.6vw, 72px);
  margin: 0; padding: 0 clamp(38px, 4.6vw, 72px) 0 0;
  list-style: none;
  animation: desfile 38s linear infinite;
}
@keyframes desfile { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* Se detiene al pasar el puntero, al entrar el foco y con el botón. */
.tira:hover .tira__pista,
.tira:focus-within .tira__pista,
.tira.is-pausada .tira__pista,
/* `is-espera` la pone el JS al cargar y la quita cuando la banda entra en
   pantalla, para que los logotipos diferidos lleguen a pedirse. */
.tira.is-espera .tira__pista { animation-play-state: paused; }

.tira__pista > li {
  white-space: nowrap;
  font-family: var(--titulo);
  font-size: clamp(15px, 1.5vw, 19px); font-weight: 700;
  letter-spacing: -.01em;
  color: var(--suave);
}
/* Tarjeta común a clientes y a marcas. Los logotipos llegan con fondos
   dispares: unos opacos sobre blanco, otros con su propio fondo, otros
   blancos sobre transparencia. Por eso la tarjeta lleva fondo blanco FIJO en
   ambos temas —si siguiera al tema, los blancos desaparecerían— y el que sea
   claro se marca con data-fondo="oscuro" para ir sobre tarjeta oscura. */
.tira .cli {
  display: grid; place-items: center;
  width: 180px; height: 92px;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid var(--linea-2);
  border-radius: 8px;
}
.tira .cli img {
  max-width: 100%; max-height: 100%;
  /* `min-*: auto` es el valor por defecto de un ítem de rejilla e impide que
     la imagen baje de su tamaño intrínseco: sin esto, se desborda. */
  min-width: 0; min-height: 0;
  width: auto; height: auto;
  object-fit: contain;
}
.tira .cli[data-fondo="oscuro"] { background: #171026; border-color: #2E2447; }

.tira__pausa {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--linea-2); border-radius: 8px;
  color: var(--texto);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tira__pausa:hover { background: var(--papel-3); border-color: var(--borde); }
.tira__pausa svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.tira__pausa .i-play { display: none; }
.tira__pausa[aria-pressed="false"] .i-pausa { display: none; }
.tira__pausa[aria-pressed="false"] .i-play  { display: block; }

@media (prefers-reduced-motion: reduce) {
  /* Sin animación la tira se recorre a mano, para no esconder contenido. */
  .tira__pista { animation: none; }
  .tira { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .tira__pista + .tira__pista { display: none; }
  .tira__pausa { display: none; }
}

/* Cuatro por fila es la rejilla del sistema; `--tres` existe porque hoy solo
   hay tres fotos y una fila de 3+1 hueco se ve rota. Al llegar más fotos, se
   quita la clase del HTML y vuelve la rejilla de cuatro. */
@media (min-width: 900px) {
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .galeria--tres { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .galeria { gap: 12px; }
  .foto__pie { font-size: 12px; }
}

/* ══ Responsive ═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .pie__in { grid-template-columns: repeat(2, 1fr); }
  .pie__in > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 940px) {
  .reveal--l, .reveal--r { transform: translate3d(0, 16px, 0); }
  .hero__in { grid-template-columns: 1fr; }
  .mock { padding: 0; max-width: 560px; }
  .mock__a { width: 100%; }
    .cierre__in { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .nav { display: none; }
  .burger { display: grid; }
  .head__end { margin-left: auto; }
}

@media (max-width: 620px) {
  /* A 375px, «Telecomunicaciones» no cabe en un cuarto de pantalla: se pasa
     a las siglas, que además son el nombre de cada sitio (GEOTEL.CCTV…). */
  .lineas__largo { display: none; }
  .lineas__corto { display: block; }
  .lineas__a { gap: 6px; padding: 8px 4px; font-size: 10.5px; letter-spacing: .04em; }
  .lineas__punto { width: 6px; height: 6px; }
  .btn--sm { display: none; }
  /* «GEOTEL.TELECOM» es tres letras más largo que «GEOTEL.CCTV» y a 375 px
     empujaba el tema, el idioma y la hamburguesa fuera de la pantalla: el
     documento se iba a 398 px y aparecía barra horizontal. El logotipo no
     puede partirse en dos líneas, así que encoge. */
  .logo { font-size: clamp(13px, 3.6vw, 17px); letter-spacing: .07em; }
  .acciones .btn { flex: 1 1 100%; }
  .pie__in { grid-template-columns: 1fr; }
  /* El botón flotante no debe tapar el pie en pantallas chicas. */
  .pie__base { padding-bottom: max(78px, env(safe-area-inset-bottom)); }
}

/* A 320 px, con el logotipo ya encogido, «GEOTEL.TELECOM» seguía sacando la
   hamburguesa 24 px fuera de la pantalla. Aquí se aprieta la cabecera: es el
   único sitio con un nombre de siete letras. `/asesoria` va a necesitar lo
   mismo o más, porque «ASESORÍAS» es todavía más largo. */
@media (max-width: 400px) {
  .head__in { gap: 8px; padding-inline: 14px; }
  .head__end { gap: 5px; }
  .lang__btn { min-width: 27px; }
}

/* ══ Impresión ═══════════════════════════════════════════════════════ */
@media print {
  .lineas, .head, .movil, .wa, .burger, .lang { display: none !important; }
  .hero, .incluye { background: none; }
  .reveal { opacity: 1; transform: none; }
  .cierre, .pie { background: none; color: #000; }
  .cierre .t2, .via__v, .logo--claro { color: #000; }
  .sec { padding-block: 18px; }
  .qa { break-inside: avoid; }
}