/* ==========================================================================
   I.D.J S.A.S — sitio público
   Azul del logotipo (#2E3473) sobre un fondo casi negro de cielo nocturno,
   solo en azul, blanco y gris (pedido de Johany, 19/09/2026: nada de naranja).
   --acento es el azul del logo sobre fondo claro y un gris azulado claro sobre
   fondo oscuro, para que se lea en ambos (
   franjas de las torres). Tipografía Archivo: industrial y legible.
   Movimiento: el video y las fotos se mueven solos (lento, en bucle); lo que
   depende del scroll usa animation-timeline con @supports y SOLO transform,
   así el contenido nunca queda oculto si el navegador no lo soporta.
   Las variables --navy-*, --blue-600 y --font-* las leen también las vistas
   de noticias (noticias/_estilos).
   ========================================================================== */

/* Tipografía servida desde el propio sitio (licencia OFL en ../fuentes/OFL.txt): solo el
   subconjunto latino, que cubre tildes y eñes. Antes venía de Google Fonts con «swap» y la
   portada saltaba al llegar la fuente (CLS 0,32 en 1440 px). Las caras «respaldo» son Arial
   con las medidas de Archivo, para que el texto ocupe lo mismo mientras la fuente carga. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fuentes/archivo-latin.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 Narrow'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('../fuentes/archivo-narrow-latin.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 respaldo'; src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 99%; ascent-override: 88.9%; descent-override: 21.2%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo Narrow respaldo'; src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 82%; ascent-override: 126.8%; descent-override: 37.8%; line-gap-override: 0%;
}

:root {
  --noche: #0b0f24;
  --noche-2: #11163a;
  --azul: #2e3473;
  --azul-claro: #4a52a8;
  --acento: #2e3473;
  --acento-hover: #262b60;
  --gris-azul: #c7cbe6;
  --acero-50: #f4f5f8;
  --acero-100: #e9ebf1;
  --acero-200: #d8dce6;
  --acero-400: #98a0b3;
  --acero-600: #586074;
  --tinta: #141829;

  /* Alias para las vistas heredadas (noticias). */
  --navy-950: var(--noche);
  --navy-900: #161a3a;
  --navy-800: #1e224d;
  --navy-700: #262b60;
  --blue-700: var(--azul);
  --blue-600: var(--azul-claro);
  --cyan-400: #c7cbe6;
  --zinc-50: var(--acero-50);
  --zinc-100: var(--acero-100);
  --zinc-200: var(--acero-200);
  --zinc-400: var(--acero-400);
  --zinc-600: var(--acero-600);
  --ink: var(--tinta);
  --gray-200: var(--acero-200);
  --text-primary: var(--tinta);
  --text-secondary: var(--acero-600);

  --font-sans: 'Archivo', 'Archivo respaldo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Archivo Narrow', 'Archivo Narrow respaldo', 'Archivo', system-ui, sans-serif;
  --nav-h: 78px;
  --max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --radio: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--acero-50);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul-claro); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.saltar { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; padding: .6rem 1rem; }
.saltar:focus { left: 1rem; top: 1rem; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1 var(--font-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--acento-hover); }
.btn-claro { border-color: rgba(255,255,255,.5); color: #fff; }
.btn-claro:hover { background: #fff; color: var(--noche); border-color: #fff; }
.btn-linea { border-color: var(--azul); color: var(--azul); }
.btn-linea:hover { background: var(--azul); color: #fff; }

/* ── Encabezado ──────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--acero-200);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.cabecera .wrap { height: var(--nav-h); display: flex; align-items: center; gap: 1.5rem; }
.logo { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 52px; width: auto; transition: opacity .3s var(--ease); }
.logo .logo-blanco { position: absolute; inset: 0; opacity: 0; }
.menu { display: flex; align-items: center; gap: .1rem; margin: 0 0 0 auto; list-style: none; padding: 0; }
.menu a {
  display: block; padding: .55rem .8rem; border-radius: 999px;
  color: var(--tinta); font-weight: 500; font-size: .98rem; text-decoration: none; white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.menu a:hover { background: var(--acero-100); }
.menu a:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }
.con-portada .cabecera .menu a:focus-visible { outline-color: var(--gris-azul); }
.menu a[aria-current="page"] { color: var(--azul); font-weight: 700; }
.menu .btn { display: inline-flex; margin-left: .6rem; min-height: 2.6rem; padding: 0 1.2rem; color: #fff; }
.menu .btn:hover { background: var(--acento-hover); }

/* En la portada el menú flota transparente sobre el video hasta que se baja. */
.con-portada .cabecera { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.con-portada .cabecera .logo-color { opacity: 0; }
.con-portada .cabecera .logo-blanco { opacity: 1; }
.con-portada .cabecera .menu > li > a:not(.btn) { color: #fff; }
.con-portada .cabecera .menu > li > a:not(.btn):hover { background: rgba(255,255,255,.12); }
.con-portada .cabecera .hamburguesa span { background: #fff; }
.con-portada.bajo .cabecera { background: rgba(11,15,36,.86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-color: rgba(255,255,255,.08); }

.hamburguesa { display: none; margin-left: auto; width: 2.75rem; height: 2.75rem; border: 0; background: none; border-radius: 4px; cursor: pointer; }
.hamburguesa span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--tinta); transition: transform .2s var(--ease), opacity .2s; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .hamburguesa { display: block; }
  .menu {
    position: fixed; inset: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--acero-200); padding: .5rem 1.25rem 1.25rem;
    max-height: calc(100dvh - var(--nav-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
    box-shadow: 0 16px 30px -18px rgba(11,15,36,.4);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
  }
  .menu.abierto { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .menu a { padding: .9rem .25rem; border-bottom: 1px solid var(--acero-100); border-radius: 0; }
  .menu .btn { display: flex; margin: 1rem 0 0; min-height: 3rem; border-bottom: 0; border-radius: 999px; }
  .con-portada .cabecera .menu > li > a:not(.btn) { color: var(--tinta); }
  .con-portada .cabecera:has(.menu.abierto) { background: var(--noche); }
  /* Telón: oscurece la página detrás del menú y lo cierra al tocarlo. */
  .telon {
    position: fixed; inset: 0; z-index: 40; background: rgba(11,15,36,.55);
    opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s .2s;
  }
  .menu-abierto .telon { opacity: 1; visibility: visible; transition-delay: 0s; }
  /* La página no se desplaza detrás del menú abierto. */
  html:has(body.menu-abierto), body.menu-abierto { overflow: hidden; }
  .telon { touch-action: none; }
}
@media (min-width: 961px) { .telon { display: none; } }

/* ── Portada con carrusel de video ───────────────────────────────────────── */
.portada {
  position: relative; min-height: 100svh; color: #fff; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: 1fr auto;
  background: var(--noche) url('../video/dron-torre.webp') center / cover no-repeat;
}
.portada-medios { position: absolute; inset: 0; z-index: -2; }
.portada-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.2s var(--ease), transform 9s linear;
}
.portada-video.activo { opacity: 1; transform: scale(1); }
.portada::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,15,36,.55) 0%, rgba(11,15,36,0) 22%),
    linear-gradient(90deg, rgba(11,15,36,.88) 0%, rgba(11,15,36,.55) 45%, rgba(11,15,36,.05) 80%),
    linear-gradient(0deg, rgba(11,15,36,.9) 0%, rgba(11,15,36,0) 35%);
}
.portada-contenido { align-self: center; padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 2rem; width: 100%; }
.etiqueta {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .78rem/1 var(--font-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--acento);
}
.etiqueta::before { content: ""; width: 1.75rem; height: 2px; background: currentColor; }
/* en celular la etiqueta se parte en dos renglones: con interlineado 1 quedaban pegados (auditoría 11/11/2026) */
@media (max-width: 640px) { .etiqueta { line-height: 1.45; } }
.portada h1 {
  font-size: clamp(2.6rem, 7vw, 5.6rem); font-weight: 700; max-width: 14ch; margin: 1.1rem 0 1.2rem;
  text-transform: uppercase; letter-spacing: -.015em; line-height: .95; text-wrap: balance;
}
.portada h1 em { font-style: normal; color: var(--acento); }
.portada p { max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.85); }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.portada-pie { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)); width: 100%; }
.reel-pasos { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.reel-pasos li { display: grid; gap: .45rem; min-width: 8.5rem; transition: color .3s; }
.reel-pasos li.activo { color: #fff; }
.reel-barra { display: block; height: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.reel-barra i { display: block; height: 100%; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; }
.reel-pasos li.hecho .reel-barra i { transform: scaleX(1); }
.aviso-foto { font-size: .78rem; color: var(--acero-600); }
/* Va sobre foto o video: a .5 de blanco quedaba en 2,4:1. Ahora casi blanco y con sombra
   para que se lea también sobre un cielo claro (≥ 4,5:1). */
.aviso-foto.claro { color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(11,15,36,.9), 0 0 10px rgba(11,15,36,.6); }
.aviso-foto.esquina { position: absolute; right: 5.5rem; bottom: .8rem; z-index: 2; } /* a la izquierda del botón de WhatsApp */
@media (max-width: 640px) {
  .reel-pasos li { min-width: 0; flex: 1 1 40%; }
  .portada::before { background: linear-gradient(0deg, rgba(11,15,36,.95) 0%, rgba(11,15,36,.55) 55%, rgba(11,15,36,.45) 100%); }
}

/* ── Clientes: marquesina ────────────────────────────────────────────────── */
.clientes { background: #fff; padding-block: 2.25rem 2.5rem; border-bottom: 1px solid var(--acero-200); }
.clientes-cab { margin-bottom: 1.25rem; }
.clientes .etiqueta { color: var(--acero-600); }
.marquesina { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquesina-pista { display: flex; gap: 2.5rem; width: max-content; list-style: none; margin: 0; padding: 0; animation: desfile 45s linear infinite; }
.marquesina:hover .marquesina-pista { animation-play-state: paused; }
.marquesina-pista li { flex: none; }
.marquesina-pista img { height: 64px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .7; transition: filter .3s, opacity .3s; mix-blend-mode: multiply; }
.marquesina-pista img:hover { filter: none; opacity: 1; }
@keyframes desfile { to { transform: translateX(calc(-50% - 1.25rem)); } }

/* ── Secciones ───────────────────────────────────────────────────────────── */
.seccion { padding-block: clamp(3.5rem, 9vw, 7rem); }
.seccion-blanca { background: #fff; }
.seccion-oscura { background: var(--noche); color: #fff; }
.cabeza { max-width: 46rem; margin-bottom: 2.5rem; }
.cabeza h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 700; margin: .8rem 0 .75rem; color: var(--noche); }
.cabeza p { color: var(--acero-600); font-size: 1.1rem; }
.seccion-oscura .cabeza h2 { color: #fff; }
.seccion-oscura .cabeza p { color: rgba(255,255,255,.7); }
.cabeza-fila { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.cabeza-fila > div { max-width: 46rem; }
.h2 { font-size: clamp(2rem, 4vw, 3rem); margin: .8rem 0 1rem; color: var(--noche); }
.gris { color: var(--acero-600); }
.intro-linea { max-width: 46rem; font-size: 1.2rem; color: var(--acero-600); margin-bottom: 1.5rem; }
.dividida { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (max-width: 860px) { .dividida { grid-template-columns: 1fr; } }

/* ── Tarjetas de servicio con video al pasar ─────────────────────────────── */
.servicios-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.servicios-grid.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .servicios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .servicios-grid, .servicios-grid.tres { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .servicios-grid.tres { grid-template-columns: 1fr; } }
/* Sin tarjetas huérfanas: con 7 servicios en 3 columnas la última quedaba sola. Si sobra
   una, la primera y la última ocupan dos columnas (7 → 3 filas llenas); si sobran dos,
   solo la última. En 2 columnas, con un número impar la primera va a lo ancho. */
@media (min-width: 961px) {
  .servicios-grid:not(.tres) > .servicio:first-child:nth-last-child(3n+1),
  .servicios-grid:not(.tres) > .servicio:last-child:nth-child(3n+1),
  .servicios-grid:not(.tres) > .servicio:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 561px) and (max-width: 960px) {
  .servicios-grid:not(.tres) > .servicio:first-child:nth-last-child(2n+1) { grid-column: span 2; }
}
.servicio {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 24rem; border-radius: var(--radio); overflow: hidden; color: #fff; text-decoration: none; isolation: isolate;
  background: var(--noche);
}
.servicio-medio { position: absolute; inset: 0; z-index: -1; }
.servicio-medio img, .servicio-medio video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.servicio-medio img { animation: respira 16s ease-in-out infinite alternate; }
.servicio-medio video { opacity: 0; transition: opacity .5s var(--ease); }
.servicio.en-video .servicio-medio video { opacity: 1; }
.servicio:nth-child(2) .servicio-medio img { animation-delay: -4s; }
.servicio:nth-child(3) .servicio-medio img { animation-delay: -8s; }
.servicio:nth-child(4) .servicio-medio img { animation-delay: -12s; }
.servicio:nth-child(5) .servicio-medio img { animation-delay: -6s; }
.servicio:nth-child(6) .servicio-medio img { animation-delay: -10s; }
.servicio::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(11,15,36,.95) 0%, rgba(11,15,36,.55) 45%, rgba(11,15,36,.05) 75%);
  transition: background-color .3s;
}
.servicio-cuerpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.4rem 1.5rem; }
.servicio-num { font: 700 .82rem/1 var(--font-sans); letter-spacing: .14em; color: var(--acento); }
.servicio strong { font: 700 clamp(1.3rem, 2vw, 1.75rem)/1.02 var(--font-display); text-transform: uppercase; hyphens: auto; -webkit-hyphens: auto; }
.servicio-resumen { color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s var(--ease), opacity .3s var(--ease); }
.servicio:hover .servicio-resumen, .servicio:focus-visible .servicio-resumen { max-height: 8rem; opacity: 1; }
@media (hover: none) { .servicio-resumen { max-height: none; opacity: 1; } }
.servicio:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.mas { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; color: var(--acento); }
.mas::after { content: "→"; transition: transform .2s var(--ease); }
.servicio:hover .mas::after { transform: translateX(5px); }

@keyframes respira { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); } }

/* ── Paso a paso: secuencia de fotos que avanza con el scroll ────────────── */
.render { position: relative; height: 420vh; background: var(--noche); color: #fff; }
.render-pegado { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: center; }
.render-etapas { position: absolute; inset: 0; }
/*
 * La torre tiene que QUEDARSE QUIETA mientras la sección avanza.
 *
 * Johany, 17/09/2026: «al scrollear la torre se mueve de derecha a izquierda y
 * da una mala sensación». Eran dos cosas distintas, las dos medidas:
 *
 *  1. Cada render tiene la torre en otra X (medido sobre las imágenes: etapa 3
 *     al 65% del ancho, etapa 4 al 51%, etapa 5 al 63%, etapa 6 al 66%). Al
 *     fundir una sobre otra, la torre salta de lado. Lo corrige `idj.js`, que
 *     conoce el ancla de cada foto (`--ancla`) y desplaza cada etapa para que
 *     todas caigan en el mismo punto de la pantalla (`--dx`).
 *  2. El acercamiento (1.08 → 1.00) se hacía desde el CENTRO de la foto, y como
 *     la torre está a un lado, cada zoom la arrastraba hacia el centro. Ahora el
 *     origen del zoom es la propia torre: el acercamiento ya no la mueve.
 *
 * El orden importa: `translate` va ANTES que `scale` para que el
 * desplazamiento se mida en píxeles de pantalla y no quede multiplicado.
 */
.etapa {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: var(--o, 0);
  object-position: var(--pos, 50%) center;
  transform: translateX(var(--dx, 0px)) scale(var(--s, 1.08));
  /* Ya alineada, la torre cae SIEMPRE en el mismo punto (64% del ancho), así
     que el zoom pivota ahí y deja de arrastrarla. */
  transform-origin: 64% center;
  will-change: opacity, transform;
}
.etapa:first-child { --o: 1; }
.render-pegado::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,15,36,.85) 0%, rgba(11,15,36,.45) 38%, rgba(11,15,36,0) 62%),
              linear-gradient(180deg, rgba(11,15,36,.5) 0%, rgba(11,15,36,0) 25%);
}
.render-texto { position: relative; z-index: 2; width: 100%; pointer-events: none; padding-top: var(--nav-h); }
.render-texto > * { max-width: 26rem; }
.render-texto h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); text-transform: uppercase; margin: .8rem 0 1.2rem; text-shadow: 0 2px 24px rgba(11,15,36,.6); }
.render-pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.render-pasos li {
  display: grid; gap: .1rem; padding: .55rem .95rem; border-radius: var(--radio);
  background: rgba(11,15,36,.55); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: .5; transition: opacity .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.render-pasos li.activo { opacity: 1; border-color: var(--acento); transform: translateX(6px); }
.render-pasos b { font-size: 1rem; }
/* El número va en el HTML: con un contador CSS, en celular (donde solo se ve el paso
   activo) todos decían «01» porque los ocultos no cuentan. */
.render-num { font-style: normal; color: var(--acento); font-size: .8rem; letter-spacing: .1em; margin-right: .55em; }
.render-paso-foto { display: none; }
.render-pasos span { font-size: .88rem; color: rgba(255,255,255,.8); line-height: 1.4; display: none; }
.render-pasos li.activo span { display: block; }
.render-nota { margin-top: 1rem; font-size: .8rem; color: rgba(255,255,255,.55); }
.render-avance { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: rgba(255,255,255,.15); }
.render-avance i { display: block; height: 100%; background: var(--acento); transform: scaleX(var(--avance, 0)); transform-origin: left; }
@media (max-width: 760px) {
  .render { height: 360vh; }
  .render-pegado { align-items: end; }
  .render-pegado::before { background: linear-gradient(0deg, rgba(11,15,36,.95) 0%, rgba(11,15,36,.6) 40%, rgba(11,15,36,0) 65%); }
  .render-texto { padding-bottom: 2rem; }
  .render-texto > * { max-width: none; }
  .render-pasos li:not(.activo) { display: none; }
  .render-nota { display: none; }
  .aviso-foto.esquina { top: calc(var(--nav-h) + .5rem); bottom: auto; }
}
/* Movimiento reducido: sin pista de desplazamiento; los seis pasos como lista, cada uno con su imagen fija. */
@media (prefers-reduced-motion: reduce) {
  .render { height: auto; }
  .render-pegado { position: relative; height: auto; overflow: visible; display: block; padding-block: clamp(3.5rem, 9vw, 6rem); }
  .render-pegado::before, .render-etapas, .render-avance, .render-nota { display: none; }
  .render-texto { padding-top: 0; }
  .render-texto > * { max-width: none; }
  .render .render-pasos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; }
  .render .render-pasos li, .render .render-pasos li:not(.activo) { display: grid; align-content: start; opacity: 1; transform: none; padding: 0 0 1rem; border-color: rgba(255,255,255,.12); overflow: hidden; }
  .render .render-pasos li > * { margin-inline: 1rem; }
  .render .render-pasos li .render-paso-foto { display: block; margin: 0 0 .9rem; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
  .render .render-pasos span { display: block; }
  .render .aviso-foto.esquina { position: static; display: block; max-width: var(--max); margin: 1rem auto 0; padding-inline: clamp(1rem, 4vw, 2rem); }
}

/* ── Fotos vivas (efecto Ken Burns) ──────────────────────────────────────── */
.foto-viva { margin: 0; position: relative; }
.foto-viva img { border-radius: var(--radio); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-viva::before { content: ""; position: absolute; inset: 0; border-radius: var(--radio); overflow: hidden; }
.foto-viva { overflow: hidden; border-radius: var(--radio); }
.foto-viva img { animation: respira 18s ease-in-out infinite alternate; }
.foto-viva figcaption { position: absolute; left: .75rem; bottom: .6rem; font-size: .75rem; color: #fff; background: rgba(11,15,36,.6); padding: .2rem .55rem; border-radius: 999px; }
.kb { animation: respira 20s ease-in-out infinite alternate; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.collage .foto-viva:nth-child(2) { margin-top: 3rem; }
.collage .foto-viva:nth-child(2) img { animation-delay: -9s; }

/* Aparición con el scroll: solo desplazamiento, nunca opacidad (el contenido siempre se ve). */
@supports (animation-timeline: view()) {
  .servicio, .proyecto, .foto-viva, .metodo li, .noticia, .logos li {
    animation: sube linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
  @keyframes sube { from { transform: translateY(40px); } to { transform: none; } }
}

.sellos-claros { list-style: none; padding: 0; margin: 1.75rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sellos-claros li { border-top: 2px solid var(--acento); padding-top: .7rem; }
.sellos-claros strong { display: block; font: 700 1.7rem/1 var(--font-display); color: var(--noche); text-transform: uppercase; }
.sellos-claros span { font-size: .88rem; color: var(--acero-600); }
@media (max-width: 480px) { .sellos-claros { grid-template-columns: 1fr; } }

/* ── Proyectos ───────────────────────────────────────────────────────────── */
.proyectos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.25rem; }
.proyecto { display: flex; flex-direction: column; border-radius: var(--radio); overflow: hidden; background: var(--noche-2); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.08); transition: border-color .2s var(--ease), transform .25s var(--ease); }
.seccion:not(.seccion-oscura) .proyecto { background: var(--noche); }
.proyecto:hover { border-color: var(--acento); transform: translateY(-4px); }
.proyecto:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.proyecto-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #1a1f45; }
.proyecto-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.proyecto:hover .proyecto-img img { transform: scale(1.08); }
.insignia-video { position: absolute; top: .75rem; left: .75rem; background: var(--acento); color: var(--azul); font: 700 .72rem/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 999px; }
.proyecto-cuerpo { display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem 1.3rem; }
.proyecto-meta { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.proyecto strong { font: 700 1.45rem/1.1 var(--font-display); }
.proyecto-cliente { font-size: .9rem; color: rgba(255,255,255,.65); }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtros a { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--acero-200); background: #fff; color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .95rem; }
.filtros a[aria-current="page"] { background: var(--noche); border-color: var(--noche); color: #fff; }
/* Filtros con foto: cada línea de servicio se reconoce por su imagen, no por
   leer siete etiquetas. En celular se deslizan de lado en vez de apilarse en
   tres renglones que empujan la rejilla fuera de la pantalla. */
.filtros-foto {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(148px, 1fr);
  gap: .7rem; margin-bottom: 2rem; overflow-x: auto; padding-bottom: .35rem;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.filtros-foto a {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radio); text-decoration: none; color: #fff;
  border: 2px solid transparent; background: var(--noche); scroll-snap-align: start;
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.filtros-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .18s, transform .3s var(--ease); }
.filtros-foto a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,15,36,0) 35%, rgba(11,15,36,.88)); }
/* La etiqueta se ajusta al ancho de la tarjeta: «Telecomunicaciones» es la
   palabra más larga y se salía por el borde derecho. */
.filtros-foto span {
  position: absolute; left: .6rem; right: .6rem; bottom: .55rem; z-index: 1;
  font-weight: 700; font-size: .86rem; line-height: 1.15; text-shadow: 0 1px 6px rgba(11,15,36,.7);
  overflow-wrap: anywhere; hyphens: auto;
}
.filtros-foto a:hover img { opacity: .92; transform: scale(1.05); }
.filtros-foto a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,15,36,.18); }
.filtros-foto a:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
/* La línea elegida se ve elegida: borde azul y foto a plena luz. */
.filtros-foto a[aria-current="page"] { border-color: var(--acento); }
.filtros-foto a[aria-current="page"] img { opacity: 1; }
@media (max-width: 720px) { .filtros-foto { grid-auto-columns: minmax(132px, 60%); } }
/* Indicio de que la fila se desliza: el borde con más fichas se difumina (idj.js marca los extremos). */
.filtros-foto.desliza:not(.al-final) { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.filtros-foto.desliza.al-final:not(.al-inicio) { -webkit-mask-image: linear-gradient(270deg, #000 82%, transparent); mask-image: linear-gradient(270deg, #000 82%, transparent); }
.filtros-foto.desliza:not(.al-inicio):not(.al-final) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 82%, transparent); }

.vacio { color: var(--acero-600); padding: 2rem 0; }
.paginas { margin-top: 2rem; }
.paginas nav { display: flex; justify-content: center; }

.proyecto-portada { position: relative; overflow: hidden; background: var(--noche); color: #fff; isolation: isolate; }
.proyecto-portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.proyecto-portada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,15,36,.95), rgba(11,15,36,.7) 60%, rgba(11,15,36,.4)); }
.proyecto-portada .wrap { padding-block: clamp(3.5rem, 10vw, 7rem) clamp(2.5rem, 6vw, 4rem); }
.proyecto-portada h1 { font-size: clamp(2.2rem, 5.5vw, 4rem); max-width: 20ch; margin: .8rem 0; text-transform: uppercase; }
.proyecto-portada p { max-width: 42rem; color: rgba(255,255,255,.82); font-size: 1.15rem; }
.ficha { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); }
.ficha dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ficha dd { margin: .2rem 0 0; font: 700 1.25rem/1.1 var(--font-display); }
.contenido-proyecto { margin: 2.5rem 0; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .75rem; }
.galeria-foto { display: block; overflow: hidden; border-radius: var(--radio); aspect-ratio: 4 / 3; background: var(--acero-100); }
.galeria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.galeria-foto:hover img { transform: scale(1.06); }
.visor { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.visor::backdrop { background: rgba(11,15,36,.92); }
.visor[open] { display: grid; place-items: center; }
.visor img { max-width: 92vw; max-height: 86vh; border-radius: var(--radio); }
.visor button { position: fixed; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.visor button:hover { background: var(--acento); color: var(--azul); }
.visor-cerrar { top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; }
.visor-ant { left: 1rem; top: 50%; }
.visor-sig { right: 1rem; top: 50%; }

/* ── Videos narrados ────────────────────────────────────────────────────── */
.cine { position: relative; overflow: hidden; }
.cine::before { content: ""; position: absolute; inset: -30% -10% auto; height: 80%; background: radial-gradient(closest-side, rgba(74,82,168,.45), transparent); pointer-events: none; }
.cine .wrap { position: relative; }
.narrado { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.narrado video { width: 100%; height: 100%; display: block; }
.narrado-play {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 1.1rem;
  padding: clamp(1rem, 4vw, 2.5rem); border: 0; cursor: pointer; color: #fff; text-align: left;
  background: linear-gradient(0deg, rgba(11,15,36,.85), rgba(11,15,36,.1) 55%);
}
.narrado-icono { flex: none; width: clamp(4rem, 9vw, 6rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--azul); box-shadow: 0 0 0 0 rgba(199,203,230,.6); animation: latido 2.4s ease-out infinite; transition: transform .2s var(--ease); }
.narrado-icono svg { width: 45%; margin-left: 8%; }
.narrado-play:hover .narrado-icono { transform: scale(1.08); }
.narrado-play:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }
.narrado-texto b { display: block; font: 700 clamp(1.4rem, 3vw, 2.2rem)/1.05 var(--font-display); text-transform: uppercase; }
.narrado-texto small { font-size: .95rem; color: rgba(255,255,255,.75); }
.narrado.en-marcha .narrado-play { display: none; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(199,203,230,.55); } 70% { box-shadow: 0 0 0 1.4rem rgba(199,203,230,0); } 100% { box-shadow: 0 0 0 0 rgba(199,203,230,0); } }
.narrado noscript { display: none; }
@media (max-width: 640px) {
  .narrado-play { align-items: center; justify-content: center; background: rgba(11,15,36,.25); }
  .narrado-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.servicio-portada + .cine { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ── Franja de video ─────────────────────────────────────────────────────── */
.franja-video { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: var(--noche) url('../video/dron-ascenso.webp') center / cover; }
.franja-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.franja-video::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,15,36,.9), rgba(11,15,36,.35)); }
.franja-video .wrap { padding-block: clamp(5rem, 14vw, 10rem); }
.franja-video h2 { font-size: clamp(2.4rem, 6vw, 4.8rem); text-transform: uppercase; line-height: .95; }
.franja-video p { max-width: 30rem; margin: 1.2rem 0 2rem; color: rgba(255,255,255,.8); font-size: 1.12rem; }

.tensiones { background: linear-gradient(100deg, var(--noche), #1b1f4f); color: #fff; }
.tensiones .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem 4rem; align-items: center; padding-block: clamp(3rem, 7vw, 5rem); }
.tensiones h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); text-transform: uppercase; margin-top: .8rem; }
.tensiones-lista { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; align-items: end; }
.tensiones-lista li { display: grid; gap: .3rem; }
.tension-barra { display: block; height: calc(var(--nivel) * 2.2rem); border-radius: 4px 4px 0 0; background: linear-gradient(0deg, #4a52a8, var(--gris-azul)); transform-origin: bottom; }
@supports (animation-timeline: view()) {
  .tension-barra { animation: crece linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  @keyframes crece { from { transform: scaleY(.15); } to { transform: none; } }
}
.tensiones-lista b { font: 700 1.05rem/1.1 var(--font-display); text-transform: uppercase; }
.tensiones-lista span:last-child { font-size: .88rem; color: rgba(255,255,255,.7); }
@media (max-width: 860px) { .tensiones .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .tensiones-lista { grid-template-columns: repeat(2, 1fr); } .tension-barra { height: calc(var(--nivel) * 1.2rem); } }
.metodo.valores li::before { content: none; }

/* ── Método y alcance ────────────────────────────────────────────────────── */
.metodo { list-style: none; padding: 0; margin: 0; counter-reset: m; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.metodo li { counter-increment: m; background: var(--acero-50); border-radius: var(--radio); padding: 1.3rem 1.4rem; display: grid; gap: .35rem; border-left: 3px solid var(--acento); }
.metodo li::before { content: "0" counter(m); font: 700 .8rem/1 var(--font-sans); letter-spacing: .14em; color: var(--acento); }
.metodo b { font: 700 1.3rem/1.1 var(--font-display); color: var(--noche); }
.metodo span { color: var(--acero-600); font-size: .95rem; }
.metodo.claro li { background: rgba(255,255,255,.05); }
.metodo.claro b { color: #fff; }
.metodo.claro span { color: rgba(255,255,255,.7); }
.alcance { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.alcance li { position: relative; padding: .7rem 1rem .7rem 2.6rem; background: #fff; border: 1px solid var(--acero-200); border-radius: var(--radio); font-weight: 500; }
.alcance li::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: .85rem; height: .45rem; border: solid var(--acento); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

.servicio-portada { position: relative; overflow: hidden; color: #fff; isolation: isolate; min-height: min(78svh, 46rem); display: grid; align-items: end; background: var(--noche); }
.fondo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.servicio-portada::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(11,15,36,.95) 5%, rgba(11,15,36,.35) 60%, rgba(11,15,36,.5) 100%); }
.servicio-portada .wrap { padding-block: 6rem 3.5rem; width: 100%; }
.servicio-portada h1 { font-size: clamp(2.3rem, 5.5vw, 4.4rem); text-transform: uppercase; max-width: 18ch; margin: .8rem 0 1rem; }
.servicio-portada p { max-width: 38rem; color: rgba(255,255,255,.85); font-size: 1.15rem; margin-bottom: 1.75rem; }

.logos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 1rem; }
.logos li { background: #fff; border: 1px solid var(--acero-200); border-radius: var(--radio); padding: .75rem; display: grid; place-items: center; }
.logos img { max-height: 70px; width: auto; }

/* Noticias en el inicio */
.noticias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; }
.noticia { display: flex; flex-direction: column; gap: .45rem; color: inherit; text-decoration: none; }
.noticia-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radio); background: var(--acero-100); margin-bottom: .5rem; }
.noticia-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.noticia:hover .noticia-img img { transform: scale(1.06); }
.noticia-meta { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.noticia strong { font: 700 1.4rem/1.15 var(--font-display); color: var(--noche); }
.noticia-resumen { color: var(--acero-600); font-size: .95rem; }

/* Llamado final */
.llamado { background: linear-gradient(100deg, var(--azul), #1b1f4f); color: #fff; }
.llamado .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 3.25rem; }
.llamado h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); text-transform: uppercase; }
.llamado p { color: rgba(255,255,255,.78); margin-top: .4rem; }

/* ── Páginas internas ────────────────────────────────────────────────────── */
.banda { position: relative; overflow: hidden; background: var(--noche); color: #fff; isolation: isolate; }
.banda > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.banda-foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11,15,36,.94), rgba(11,15,36,.65) 60%, rgba(11,15,36,.35)); }
.banda .wrap { padding-block: clamp(3rem, 9vw, 6rem); }
.banda h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); font-weight: 700; margin-top: .8rem; max-width: 20ch; text-transform: uppercase; }
.banda p { color: rgba(255,255,255,.8); margin-top: .8rem; max-width: 42rem; font-size: 1.15rem; }
.migas { font-size: .85rem; color: rgba(255,255,255,.6); }
.migas a { color: rgba(255,255,255,.88); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* Páginas de error (404, 403, 419, 429, 500, 503): la misma banda oscura de las páginas internas. */
.error-pagina .wrap { min-height: min(68svh, 40rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.error-pagina .acciones { margin-top: 1.75rem; }
.banda .error-directo { margin-top: 1.75rem; font-size: .95rem; color: rgba(255,255,255,.72); }
.error-directo a { color: #fff; }

.texto { max-width: 46rem; }
.texto p + p { margin-top: 1rem; }
.texto h2 { font-size: 1.8rem; color: var(--noche); margin: 2.25rem 0 .9rem; }
.texto ul { padding-left: 1.2rem; }
.texto li + li { margin-top: .35rem; }
.texto img { border-radius: var(--radio); margin-block: 1rem; }
.con-lado { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.lado { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1rem; }
.caja { background: #fff; border: 1px solid var(--acero-200); border-radius: var(--radio); padding: 1.3rem 1.4rem; }
.caja h3 { font-size: 1.3rem; color: var(--noche); margin-bottom: .6rem; }
.caja p { color: var(--acero-600); font-size: .95rem; }
.caja .btn { width: 100%; margin-top: 1rem; }
.caja ul { list-style: none; padding: 0; margin: 0; }
.caja-azul { background: var(--noche); border-color: var(--noche); color: #fff; }
.caja-azul h3 { color: #fff; }
.caja-azul p { color: rgba(255,255,255,.75); }
@media (max-width: 900px) { .con-lado { grid-template-columns: 1fr; } .lado { position: static; } }

/* Formulario */
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo.ancho { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: .92rem; }
.campo label small { font-weight: 400; color: var(--acero-600); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 1rem; padding: .75rem .9rem; border: 1px solid #c5cad6; border-radius: var(--radio); background: #fff; color: var(--tinta); width: 100%;
}
.campo textarea { min-height: 7rem; resize: vertical; }
/* En iPhone el select nativo medía 22 px de alto frente a 52 px de los demás campos:
   sin apariencia nativa, el mismo alto y una flecha propia. */
.campo select {
  -webkit-appearance: none; appearance: none; min-height: 3.25rem; line-height: 1.6; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23141829' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 1rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--azul-claro); outline-offset: 0; border-color: var(--azul-claro); }
.campo .error { color: #b3261e; font-size: .85rem; }
.campo [aria-invalid="true"] { border-color: #b3261e; }
.tipo input[aria-invalid="true"] + span { border-color: #b3261e; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso { padding: 1rem 1.2rem; border-radius: var(--radio); margin-bottom: 1.25rem; font-weight: 500; }
.aviso-ok { background: #e7f5ec; color: #145c32; border: 1px solid #b6e0c4; }
.aviso-error { background: #fdecea; color: #8a1c14; border: 1px solid #f5c2bd; }
.formulario .btn { justify-self: start; }
.formulario .nota { grid-column: 1 / -1; font-size: .85rem; color: var(--acero-600); }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; } .formulario .btn { justify-self: stretch; } }

.datos { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.datos li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem; }
.datos svg { width: 1.3rem; height: 1.3rem; color: var(--acento); margin-top: .15rem; }
.datos b { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acero-600); }
.datos a { text-decoration: none; font-weight: 500; }
.datos a:hover { text-decoration: underline; }

.video-marco { border-radius: var(--radio); overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -30px rgba(11,15,36,.6); }
.video-marco video, .video-marco iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { background: var(--noche); color: rgba(255,255,255,.75); padding-bottom: env(safe-area-inset-bottom, 0px); }
.pie-arriba { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2rem; padding-block: 3.5rem 2.5rem; }
.pie-arriba img { height: 66px; width: auto; margin-bottom: 1.1rem; }
.pie p { font-size: .95rem; max-width: 22rem; }
.pie h4 { font: 700 .8rem/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: 1rem; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pie ul a { color: #fff; text-decoration: none; font-size: .96rem; }
.pie ul a:hover { color: var(--acento); }
.pie-abajo { border-top: 1px solid rgba(255,255,255,.1); padding-block: 1.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; font-size: .85rem; }
.pie-abajo a { color: rgba(255,255,255,.75); }
@media (max-width: 900px) { .pie-arriba { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pie-arriba { grid-template-columns: 1fr; } }

/* Noticias y páginas (noticias/_estilos): su portada asumía un menú fijo encima; aquí el menú ocupa su propio espacio. */
.blog .blog-hero { padding-top: clamp(2.5rem, 6vw, 4rem); background: var(--noche); }
.blog { background: transparent; }
/* Noticias con los tokens del sitio (antes: degradados, esquinas de 16 px y cian de otra plantilla). */
.blog .blog-hero { background: var(--noche); }
.blog .blog-kicker { color: var(--gris-azul); }
.blog .blog-card { border-radius: var(--radio); border-color: var(--acero-200); }
.blog .blog-card:hover { box-shadow: none; border-color: var(--azul-claro); }
.blog .blog-card-img { background: var(--noche-2); }
.blog .blog-cat { color: var(--azul); }
.blog .blog-cover { border-radius: var(--radio); }
.blog .blog-chip.is-active { background: var(--noche); border-color: var(--noche); }
.blog .blog-search input, .blog .blog-search button { height: 2.75rem; border-radius: var(--radio); }
.blog .blog-search button { background: var(--azul); }
.blog .blog-cta { border-radius: var(--radio); background: var(--noche); }
.blog .blog-cta a { min-height: 2.75rem; border-radius: 999px; background: #fff; color: var(--azul); }
.blog .blog-prose blockquote { border-left-color: var(--azul-claro); }

/* Objetivos táctiles de 44 px sin cambiar el tamaño visual. Enlaces de texto: relleno que
   se compensa con margen negativo. Fichas con borde: un área invisible por encima. */
.migas a, .pie-abajo a, .blog-back, .blog-rss { display: inline-block; padding-block: .75rem; margin-block: -.75rem; }
.migas { position: relative; z-index: 1; } /* el área de toque de las migas queda por encima del título */
.franja-sellos-texto .mas { padding-block: .75rem; margin-block: -.75rem; }
.blog-chip, .blog-share a { position: relative; }
.blog-chip::before, .blog-share a::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }

/* ── PQRS ────────────────────────────────────────────────────────────────── */
.radicado { background: #e7f5ec; border: 1px solid #b6e0c4; border-radius: var(--radio); padding: 1.1rem 1.3rem; margin-bottom: 1.5rem; color: #145c32; }
.radicado strong { display: block; font: 700 clamp(1.5rem, 4vw, 2rem)/1.1 var(--font-display); color: #0e3f22; margin: .3rem 0 .5rem; letter-spacing: .02em; }
.radicado p { color: #1d4d31; }
.campo.tipos { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: .5rem; }
.tipos legend { font-weight: 600; font-size: .92rem; margin-bottom: .5rem; padding: 0; }
.tipo { position: relative; cursor: pointer; }
.tipo input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tipo span { display: inline-block; padding: .55rem 1rem; border: 1px solid #c5cad6; border-radius: 999px; background: #fff; font-weight: 500; transition: background-color .15s, border-color .15s, color .15s; }
.tipo input:checked + span { background: var(--noche); border-color: var(--noche); color: #fff; }
.tipo input:focus-visible + span { outline: 3px solid var(--acento); outline-offset: 2px; }
.tipos .error { flex-basis: 100%; }
.autorizo { font-size: .92rem; }
.autorizo input { width: auto; margin-right: .45rem; vertical-align: -2px; }
.datos-pqrs { display: grid; gap: .5rem; font-size: .95rem; color: var(--acero-600); }
.caja .datos-pqrs li { padding: 0; border: 0; }
.resultado-cab { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .75rem; }
.estado { font-weight: 600; font-size: .85rem; padding: .3rem .75rem; border-radius: 999px; white-space: nowrap; background: var(--acero-100); }
.estado-radicada { background: #fff1d6; color: #7a4b00; }
.estado-en_tramite { background: #e4e6f5; color: var(--azul); }
.estado-respondida { background: #e7f5ec; color: #145c32; }
.respuesta { background: var(--acero-50); border-left: 4px solid var(--acento); padding: .9rem 1rem; white-space: pre-line; }

/* ── WhatsApp flotante: acompaña todo el recorrido ───────────────────────── */
/*
 * Abajo a la derecha, que es donde la gente lo busca, y separado del borde con
 * `env(safe-area-inset-*)` para que en un iPhone no quede bajo la barra de
 * gestos. En escritorio muestra la palabra; en celular, solo el ícono, porque
 * ahí el ancho es del contenido.
 */
.wa-flotante {
  position: fixed; z-index: 60;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  /* Solo el ícono, también en computador: el logo de WhatsApp se reconoce sin
     ayuda y la palabra escrita solo ocupaba sitio. El nombre sigue ahí para
     quien navega con lector de pantalla — `.wa-texto` no se borra, se oculta. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  border-radius: 999px; background: #25d366; color: #0b2f18;
  text-decoration: none; line-height: 1;
  box-shadow: 0 10px 28px rgba(11, 15, 36, .28), 0 2px 6px rgba(11, 15, 36, .18);
  transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), background-color .18s;
}
.wa-flotante svg { width: 28px; height: 28px; flex: none; }
.wa-flotante:hover { background: #1fbe5b; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(11, 15, 36, .34); }
.wa-flotante:active { transform: translateY(0) scale(.97); }
.wa-flotante:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.wa-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) { .wa-flotante { width: 54px; height: 54px; } }
.wa-flotante { transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), background-color .18s, opacity .2s, visibility 0s; }
.wa-flotante.oculto { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
/* En celular el botón flotante tapaba los rótulos del carrusel y la tarjeta del paso activo:
   esas zonas le dejan su esquina libre (54 px + 16 px de margen). En los formularios se
   aparta mientras el formulario está en pantalla (idj.js). */
@media (max-width: 760px) {
  .portada-pie { padding-right: calc(4.5rem + env(safe-area-inset-right, 0px)); }
  .render-texto { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media print { .wa-flotante { display: none; } }

/* ── Movimiento reducido: todo quieto ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .portada-video { transition: none; transform: none; }
  .servicio-medio video { display: none; }
}

/* ── Fondos oscuros: el acento pasa a gris azulado claro y el botón principal se invierte ── */
.portada, .seccion-oscura, .franja-video, .llamado, .servicio-portada, .render, .tensiones, .pie,
.banda, .proyecto-portada, .proyecto, .servicio, .narrado, .visor, .caja-azul, .con-portada .cabecera {
  --acento: var(--gris-azul);
  --acento-hover: #ffffff;
}
.portada .btn-primario, .seccion-oscura .btn-primario, .franja-video .btn-primario, .llamado .btn-primario,
.servicio-portada .btn-primario, .banda .btn-primario, .proyecto-portada .btn-primario, .caja-azul .btn-primario,
.con-portada:not(.bajo) .cabecera .btn-primario {
  background: #fff; color: var(--azul);
}
.portada .btn-primario:hover, .seccion-oscura .btn-primario:hover, .franja-video .btn-primario:hover, .llamado .btn-primario:hover,
.servicio-portada .btn-primario:hover, .banda .btn-primario:hover, .proyecto-portada .btn-primario:hover, .caja-azul .btn-primario:hover,
.con-portada:not(.bajo) .cabecera .btn-primario:hover { background: var(--gris-azul); color: var(--azul); }
.con-portada.bajo .cabecera .btn-primario { background: #fff; color: var(--azul); }
.narrado-icono { background: #fff; color: var(--azul); }
.insignia-video { background: #fff; color: var(--azul); }
.tension-barra { background: linear-gradient(0deg, #4a52a8, var(--gris-azul)); }
.visor button:hover { background: #fff; color: var(--azul); }
/* WhatsApp conserva su verde: es el color con el que la gente reconoce el botón
   (Johany, 21/09/2026). El resto del sitio sigue en azul, blanco y gris. */
/* «Cotizar» activo (en /contacto): la regla de enlace activo no puede dejarlo azul sobre azul. */
.menu .btn[aria-current="page"] { color: #fff; }
.con-portada .cabecera .menu .btn[aria-current="page"] { color: var(--azul); }
/* En el menú del celular (fondo blanco) «Cotizar» conserva el relleno del botón primario. */
@media (max-width: 960px) {
  .cabecera .menu a.btn.btn-primario,
  .con-portada .cabecera .menu a.btn.btn-primario { background: var(--azul); color: #fff; padding: 0 1.5rem; }
  .cabecera .menu a.btn.btn-primario:hover,
  .con-portada .cabecera .menu a.btn.btn-primario:hover { background: #262b60; color: #fff; }
}

/* ── Certificaciones ─────────────────────────────────────────────────────── */
.certis { display: grid; gap: 1.25rem; }
.certi {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; background: #fff; border: 1px solid var(--acero-200); border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 2.25rem); scroll-margin-top: calc(var(--nav-h) + 1.5rem);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.certi:hover { border-color: var(--azul); box-shadow: 0 24px 50px -34px rgba(11,15,36,.5); }
.certi-sello { display: grid; justify-items: center; gap: .7rem; text-align: center; }
.certi-sello img { width: 150px; height: auto; }
.certi-codigo { font-size: .8rem; color: var(--acero-600); line-height: 1.35; }
.certi-codigo b { color: var(--azul); }
.certi-cuerpo h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--noche); margin: .5rem 0 .8rem; text-transform: uppercase; }
.certi-usted { margin-top: .9rem; padding-left: .9rem; border-left: 3px solid var(--azul); }
.certi-usted b { color: var(--noche); }
.certi .btn { margin-top: 1.2rem; }
.certi-pendiente { margin-top: 1.1rem; font-size: .88rem; color: var(--acero-600); }
@media (max-width: 720px) { .certi { grid-template-columns: 1fr; justify-items: start; } .certi-sello { justify-items: start; text-align: left; } }

/* Franja de sellos al pie de todas las páginas */
.franja-sellos { background: #fff; border-top: 1px solid var(--acero-200); }
.franja-sellos .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding-block: 2.25rem; }
.franja-sellos-texto p { color: var(--acero-600); margin: .5rem 0 .4rem; max-width: 34rem; }
.franja-sellos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.franja-sellos li a { display: grid; justify-items: center; gap: .35rem; text-decoration: none; }
.franja-sellos img { height: 78px; width: auto; transition: transform .2s var(--ease); }
.franja-sellos li a:hover img { transform: translateY(-3px); }
.franja-sellos span { font-size: .72rem; color: var(--acero-600); }
@media (max-width: 640px) { .franja-sellos img { height: 62px; } }
.certi-fechas { margin-top: 1rem; font-size: .85rem; color: var(--acero-600); }
.alcance-certificado {
  margin: 0; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.5rem);
  border-left: 4px solid var(--gris-azul); background: rgba(255,255,255,.06); border-radius: var(--radio);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.6; color: rgba(255,255,255,.9);
}
.politica { display: grid; justify-items: center; gap: 1.25rem; }
.politica-foto { aspect-ratio: auto; max-width: 700px; border: 1px solid var(--acero-200); }
.politica-foto img { width: 100%; height: auto; }
.politica-lema { font: 600 clamp(1.1rem, 2.4vw, 1.5rem)/1.3 var(--font-display); color: var(--azul); text-align: center; }
/* Certificado del producto en la página de su servicio */
.certi-linea { display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--acero-200); border-left: 3px solid var(--azul); border-radius: var(--radio); padding: 1rem 1.2rem; margin-bottom: 1.75rem; }
.certi-linea img { width: 70px; height: auto; flex: none; }
.certi-linea b { display: block; color: var(--noche); }
.certi-linea span { font-size: .92rem; color: var(--acero-600); }