@import url("fuentes.css");

/* ============================================================================
   PROTECCION CAN - Hoja de estilos unica para las 5 paginas
   ----------------------------------------------------------------------------
   Indice:
     1. Variables de marca        7. Bloques destacados (familia / mascotas)
     2. Base y utilidades         8. Plataforma y Torre de Control
     3. Cabecera y navegacion     9. Sectores y activos
     4. Botones                  10. Franja de llamada a la accion
     5. Portadas                 11. Contacto y formulario
     6. Tarjetas y rejillas      12. Pie, flotantes, responsive, animaciones

   LOS COLORES SALEN DEL LOGO REAL DEL CLIENTE (bloque 1).
   Para recolorear todo el sitio, tocar solamente ese bloque.
   ========================================================================== */

/* == 1. VARIABLES DE MARCA ================================================= */
:root{
  /* Azules tomados pixel a pixel del logo entregado por el cliente */
  --azul:        #0058B0;   /* azul principal del escudo */
  --azul-hondo:  #00427F;   /* el mismo azul, mas oscuro, para degradados */
  --azul-vivo:   #0880E0;   /* azul electrico del logo */
  --celeste:     #4FC3FF;   /* celeste de detalle */

  /* Fondos: azul oscuro predominante combinado con negro */
  --negro:     #05070C;
  --azul-900:  #071120;   /* fondo general */
  --azul-850:  #091729;
  --azul-800:  #0B1D33;   /* superficies */
  --azul-700:  #122A47;   /* superficies elevadas */
  --borde:     rgba(120,170,225,.16);
  --borde-2:   rgba(120,170,225,.30);

  /* Claros */
  --blanco:      #FFFFFF;
  --claro:       #F4F7FC;
  --borde-claro: #DFE6F1;

  /* Texto */
  --texto:         #E9EFF8;
  --texto-suave:   #9BAEC9;
  --texto-oscuro:  #08172B;
  --texto-oscuro-suave:#48607F;

  --ancho: 1220px;
  --radio: 16px;
  --radio-s: 10px;
  --alto-cabecera: 98px;

  --transicion: .35s cubic-bezier(.22,.61,.36,1);
  --sombra:       0 22px 55px -24px rgba(0,0,0,.75);
  --sombra-clara: 0 20px 45px -24px rgba(10,30,60,.30);
  --brillo-azul:  0 14px 34px -12px rgba(8,128,224,.55);

  --fuente: "Manrope","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

/* == 2. BASE =============================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + 12px);-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fuente);
  background:var(--azul-900);color:var(--texto);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--celeste);outline-offset:3px;border-radius:4px}

.contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:24px}

.salto-contenido{
  position:absolute;left:-999px;top:8px;z-index:200;
  background:var(--azul-vivo);color:#fff;padding:10px 18px;border-radius:8px;font-weight:600;
}
.salto-contenido:focus{left:16px}

.ico{
  width:24px;height:24px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}

.etiqueta{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--celeste);margin-bottom:18px;
}
.seccion--clara .etiqueta{color:var(--azul)}
/* Icono dentro de una etiqueta (el escudo con la torre de Torre de Control).
   La etiqueta ya es inline-flex con gap, asi que solo hace falta el tamano. */
.etiqueta .ico{width:17px;height:17px;flex:none}

.punto-vivo{
  width:8px;height:8px;border-radius:50%;background:var(--celeste);
  box-shadow:0 0 0 0 rgba(79,195,255,.6);animation:latido 2.2s infinite;
}
@keyframes latido{
  0%{box-shadow:0 0 0 0 rgba(79,195,255,.55)}
  70%{box-shadow:0 0 0 12px rgba(79,195,255,0)}
  100%{box-shadow:0 0 0 0 rgba(79,195,255,0)}
}

.titulo{font-size:clamp(1.85rem,3.8vw,2.9rem);letter-spacing:-.03em}
.subtitulo{margin-top:18px;font-size:clamp(1rem,1.5vw,1.12rem);color:var(--texto-suave);max-width:64ch}
.seccion--clara .subtitulo{color:var(--texto-oscuro-suave)}
.degradado{
  background:linear-gradient(100deg,var(--azul-vivo),var(--celeste));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.seccion{padding:clamp(66px,8vw,110px) 0;position:relative;background:var(--azul-900)}
.seccion--alterna{background:var(--azul-850)}
.seccion--negra{background:var(--negro)}
.seccion--clara{background:var(--claro);color:var(--texto-oscuro)}
.seccion__cabecera{margin-bottom:clamp(38px,5vw,60px);max-width:780px}
.seccion__cabecera--centro{margin-inline:auto;text-align:center}
.seccion__cabecera--centro .subtitulo{margin-inline:auto}

/* == 3. CABECERA =========================================================== */
.cabecera{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--alto-cabecera);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background var(--transicion),border-color var(--transicion);
}
.cabecera--fija{
  background:rgba(7,17,32,.90);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--borde);
}
.cabecera__int{display:flex;align-items:center;justify-content:space-between;gap:20px}

/* La marca de la cabecera = monograma + nombre al lado.
   El lockup COMPLETO del cliente (monograma + nombre + lema + la franja de 4)
   NO cabe aqui y no es cuestion de achicarlo: la barra mide 66px de alto y la
   imagen del cliente es 1,5 veces mas ancha que alta, asi que entera daria
   99px de ancho y las frases de abajo quedarian de 2px. El lema y la franja
   van en la portada (.senal__lema y .franja-marca), que es donde hay sitio.

   EL NOMBRE SE VE EN TODOS LOS ANCHOS. Primero lo escondi por debajo de 1120px
   creyendo que no cabia, pero esa medida era del LOCKUP COMO IMAGEN, que pedia
   200px mas; el nombre en TEXTO ocupa 158 y entra de sobra. Medido de 1160 a
   320px: nunca baja de 20px de aire contra el menu (o la hamburguesa), y con la
   letra reducida de abajo queda en 45px. El error tenia un efecto real: quien
   navega con Windows al 125-150% de escala cae justo en esa franja y veia la
   cabecera EXACTAMENTE IGUAL que antes del cambio. */
.marca{display:flex;align-items:center;gap:11px;flex:none}
.marca img{height:66px;width:auto}
.marca__nombre{
  font-size:1.02rem;font-weight:800;letter-spacing:.055em;line-height:1;
  text-transform:uppercase;white-space:nowrap;color:#E3E9F0;
}
.marca__nombre b{color:var(--celeste);font-weight:800}
/* Telefonos: se achica para no quedar a 20px de la hamburguesa */
@media (max-width:480px){.marca__nombre{font-size:.85rem;letter-spacing:.04em}}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  font-size:.93rem;font-weight:500;color:var(--texto-suave);
  position:relative;transition:color .25s;padding:6px 0;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--azul-vivo),var(--celeste));transition:width var(--transicion);
}
.nav a:hover{color:var(--texto)}
.nav a:hover::after{width:100%}
/* Pagina actual marcada en el menu */
.nav a[aria-current="page"]{color:var(--blanco);font-weight:600}
.nav a[aria-current="page"]::after{width:100%}
.nav .solo-movil{display:none}

.cabecera__acciones{display:flex;align-items:center;gap:10px}

.hamburguesa{
  display:none;background:transparent;border:1px solid var(--borde-2);border-radius:var(--radio-s);
  width:46px;height:46px;align-items:center;justify-content:center;cursor:pointer;color:var(--texto);
}
.hamburguesa .ico--cerrar{display:none}
body.menu-abierto .hamburguesa .ico--menu{display:none}
body.menu-abierto .hamburguesa .ico--cerrar{display:block}

/* == 4. BOTONES ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:var(--radio-s);
  font-size:.94rem;font-weight:600;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .2s,background .25s,box-shadow .25s,border-color .25s,color .25s;
}
.btn .ico{width:19px;height:19px;stroke-width:2}
.btn--grande{padding:16px 30px;font-size:1rem}
.btn--bloque{width:100%}

.btn--primario{
  background:linear-gradient(100deg,var(--azul-vivo),var(--azul));
  color:#fff;box-shadow:var(--brillo-azul);
}
.btn--primario:hover{transform:translateY(-2px);box-shadow:0 20px 42px -12px rgba(8,128,224,.75)}
.btn--primario:active{transform:translateY(0)}

.btn--fantasma{border-color:var(--borde-2);color:var(--texto);background:rgba(120,170,225,.07)}
.btn--fantasma:hover{border-color:var(--celeste);color:var(--celeste);background:rgba(79,195,255,.12)}

.btn--wa{background:#25D366;color:#fff;box-shadow:0 12px 30px -12px rgba(37,211,102,.6)}
.btn--wa:hover{transform:translateY(-2px);background:#20BD5C}

.btn--acceso{
  background:rgba(120,170,225,.10);border-color:var(--borde-2);color:var(--texto);
  padding:11px 18px;font-size:.87rem;
}
.btn--acceso:hover{border-color:var(--celeste);color:var(--celeste)}

.seccion--clara .btn--fantasma{border-color:#C6D3E6;color:var(--texto-oscuro);background:#fff}
.seccion--clara .btn--fantasma:hover{border-color:var(--azul);color:var(--azul)}

/* Cuando falta un dato del cliente, el boton se ve apagado y no navega */
.btn.sin-configurar,.flotante.sin-configurar{opacity:.62;cursor:not-allowed;filter:grayscale(.25) saturate(.7)}
.btn.sin-configurar:hover,.flotante.sin-configurar:hover{transform:none;box-shadow:none}

/* == 5. PORTADAS =========================================================== */
.portada{
  position:relative;overflow:hidden;
  /* Profundidad: del negro de abajo al azul profundo de arriba */
  background:linear-gradient(175deg,#08172E 0%,#060D1B 45%,var(--negro) 100%);
  padding:calc(var(--alto-cabecera) + 70px) 0 84px;
}
/* PEDIDO DEL CLIENTE: "en la version de PC queda demasiado espacio vacio
   arriba". Tenia razon y se midio en el navegador: la portada era
   min-height:100svh con el contenido CENTRADO en vertical, asi que en una
   pantalla de 1080 px el bloque de texto (505 px de alto) arrancaba a 333 px
   del borde -> 235 px de vacio justo debajo de la cabecera, y cuanto mas
   grande la pantalla, peor (a 900 px de alto eran 145 px).
   Arreglo: la portada mide lo que mide su contenido en vez de forzar toda la
   pantalla. El texto queda pegado bajo la cabecera y, en pantallas altas,
   asoma la seccion siguiente, que ademas invita a bajar.
   NO se toca el centrado (align-items) porque sigue alineando las dos
   columnas -texto y radar- entre si. */
.portada--inicio{display:flex;align-items:center;
  padding-top:calc(var(--alto-cabecera) + 40px);padding-bottom:64px}
.portada__fondo{position:absolute;inset:0;pointer-events:none}

/* PEDIDO DEL CLIENTE: "la grilla azul esta bien, pero quisiera darle un poco
   mas de profundidad con un mapa, rutas, conexiones o algun recurso
   tecnologico suave, sin recargarlo".
   Se usa el mapa REAL de Comodoro Rivadavia que ya usaba el sitio (geometria
   de OpenStreetMap descargada y alojada aqui: cero llamadas a servicios de
   mapas). mapa-fondo.svg es ese mismo archivo sin su rectangulo de fondo, para
   que el degradado de la portada siga viendose por detras.
   La mascara es la clave de "sin recargarlo": el mapa se desvanece del todo
   sobre la mitad izquierda, que es donde va el titulo, y solo tiene cuerpo
   detras del radar. Asi da profundidad sin restarle legibilidad a nada. */
.portada__mapa{
  position:absolute;inset:0;
  /* El encuadre NO es decorativo: se midio la densidad de calles del mapa y
     de x=700 a x=900 (de 900) solo hay MAR. Con "cover" esa franja vacia caia
     justo en la mitad derecha, que es la unica que la mascara deja ver, y el
     fondo se veia como cuatro cables gruesos en vez de como un mapa.
     Con 145% y el anclaje en 18% la ventana visible cae sobre las unidades
     50-670 del mapa, que es donde esta la trama densa de la ciudad. */
  background:url('../img/mapa-fondo.svg') no-repeat 18% center;
  background-size:145% auto;
  opacity:.8;
  mask-image:
    linear-gradient(95deg,transparent 0%,transparent 30%,#000 74%,#000 100%),
    linear-gradient(#000 0%,#000 62%,transparent 96%);
  -webkit-mask-image:
    linear-gradient(95deg,transparent 0%,transparent 30%,#000 74%,#000 100%),
    linear-gradient(#000 0%,#000 62%,transparent 96%);
  mask-composite:intersect;
  -webkit-mask-composite:source-in;
}
.portada__rejilla{
  position:absolute;inset:-10% -10% 0;
  animation:deriva 42s linear infinite;
  background-image:
    linear-gradient(rgba(120,170,225,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,225,.07) 1px,transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(ellipse 92% 68% at 58% 38%,#000 22%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 92% 68% at 58% 38%,#000 22%,transparent 78%);
}
.portada__brillo{
  animation:respirar 9s ease-in-out infinite;
  position:absolute;top:-30%;right:-14%;width:78vw;height:78vw;max-width:1000px;max-height:1000px;
  background:radial-gradient(circle,rgba(8,128,224,.26) 0%,rgba(79,195,255,.11) 40%,transparent 68%);
  filter:blur(12px);
}
/* Segundo foco, abajo a la izquierda, para que el negro no quede plano */
.portada__brillo2{
  position:absolute;left:-16%;bottom:-32%;width:60vw;height:60vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(0,88,176,.20) 0%,transparent 66%);
  filter:blur(18px);
}
/* Vineta: oscurece los bordes y concentra la mirada en el centro */
.portada__vineta{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 78% 68% at 45% 45%,transparent 40%,rgba(2,5,12,.55) 100%);
}

.portada__int{position:relative;z-index:2;max-width:1060px}
/* El minimo (1.95rem) esta calculado para que "Protegemos vehiculos," entre
   en una sola linea en un celular de 390px de ancho. */
.portada__titulo{font-size:clamp(1.95rem,4.2vw,3.2rem);letter-spacing:-.04em;font-weight:800}
.portada__bajada{margin-top:22px;font-size:clamp(1.02rem,1.8vw,1.16rem);color:var(--texto-suave);max-width:52ch}
.portada__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.portada__acciones .btn--grande{padding:15px 20px;font-size:.95rem}
.portada__acciones .btn--grande .ico{width:18px;height:18px}

/* Portada compacta de las paginas interiores */
.portada--interior{padding:calc(var(--alto-cabecera) + 72px) 0 80px}
.portada--interior .portada__int{max-width:820px}
.portada--interior .portada__titulo{font-size:clamp(2rem,4.4vw,3.1rem)}

/* Linea de contexto de las paginas interiores.
   Reemplaza a las migas de pan: en un sitio de 5 paginas con el menu siempre
   visible, repetir "Inicio / Contacto" aporta poco. Este lugar rinde mas
   diciendo donde esta la empresa y hasta donde llega su servicio.
   Los dos datos estan confirmados por el cliente. */
.contexto{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin-bottom:26px;font-size:.88rem;color:var(--texto-suave);
}
.contexto span{display:inline-flex;align-items:center;gap:8px}

/* Boton para volver al Inicio. Reemplaza la funcion de navegacion que hacian
   las migas de pan, pero se lee como un boton y no como una ruta. La flecha
   se gira 180 grados para reutilizar el mismo icono. */
.contexto__volver{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px 8px 12px;border-radius:99px;
  border:1px solid var(--borde-2);background:rgba(120,170,225,.07);
  color:var(--texto);font-weight:600;font-size:.84rem;white-space:nowrap;
  transition:border-color .25s,background .25s,color .25s;
}
.contexto__volver .ico{width:16px;height:16px;color:var(--celeste);transform:rotate(180deg);transition:transform .25s}
.contexto__volver:hover{border-color:var(--celeste);background:rgba(79,195,255,.12);color:var(--celeste)}
.contexto__volver:hover .ico{transform:rotate(180deg) translateX(3px);color:inherit}
.contexto .ico{width:17px;height:17px;color:var(--celeste)}
.contexto__sep{opacity:.4}


/* Portada del Inicio en dos columnas: texto a la izquierda, escudo a la derecha.
   La columna de texto necesita 800px para que los tres botones que pidio el
   cliente entren en una sola fila. */
.portada__grilla{
  position:relative;z-index:2;max-width:1340px;
  display:grid;grid-template-columns:1.28fr .72fr;gap:clamp(28px,3.4vw,48px);align-items:center;
}
.portada__texto{max-width:800px}

/* La lista .portada__pruebas se retiro el 30-jul: sus 4 frases pasaron a la
   franja de marca del final de la portada (.franja-marca), que reproduce la
   tira del logo del cliente. Se borran tambien sus reglas para no dejar CSS
   muerto que confunda a quien retome esto. */

/* Contenedor del escudo: lo centra dentro de su columna */
.portada__visual{display:flex;align-items:center;justify-content:center}

/* ---- Composicion del escudo con radar (portada del Inicio) --------------
   El SVG del radar esta QUIETO. Lo que gira son elementos HTML normales, que
   es la forma mas compatible que hay. No convertir esto en rotaciones dentro
   del SVG: transform-origin sobre SVG no lo resuelven igual todos los
   navegadores. */
.senal{
  position:relative;width:min(100%,470px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
}
.senal__radar{
  position:absolute;inset:0;width:100%;height:100%;
  color:rgba(79,195,255,.55);
}
.senal__base{
  position:absolute;inset:0;margin:auto;width:80%;height:80%;border-radius:50%;
  background:radial-gradient(circle,rgba(8,128,224,.26) 0%,transparent 62%);
  animation:respirar 8s ease-in-out infinite;
}
.senal__anillo{
  position:absolute;inset:0;margin:auto;border-radius:50%;
  border:1px solid rgba(79,195,255,.30);
  animation:onda 4.6s cubic-bezier(.2,.6,.35,1) infinite;
}
/* OJO: antes esto era :nth-of-type(3/4/5) y NO hacia nada. nth-of-type cuenta
   TODOS los <span> hermanos, y antes de los anillos van el barrido, 3 aros y 2
   orbitas, asi que los anillos son el 8 al 11: esos selectores caian sobre los
   aros y los 4 anillos latian juntos en vez de escalonados. Con clases
   propias no depende del orden de los hermanos. */
.senal__anillo--2{animation-delay:1.15s}
.senal__anillo--3{animation-delay:2.3s}
.senal__anillo--4{animation-delay:3.45s}
@keyframes onda{
  0%{width:26%;height:26%;opacity:0}
  12%{opacity:.85}
  100%{width:100%;height:100%;opacity:0}
}
/* El logo del cliente dentro del radar: monograma + nombre + lema, en su mismo
   orden. El monograma bajo de 62% a 74% de esta caja (= 55% del radar) para
   dejarle sitio al nombre y al lema, que es lo que se pidio. */
.senal__centro{
  position:relative;z-index:2;width:76%;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.senal__marca{
  width:74%;height:auto;
  filter:drop-shadow(0 18px 42px rgba(8,128,224,.62));
}
.senal__nombre{
  margin:0;font-size:clamp(1rem,2.2vw,1.5rem);font-weight:800;line-height:1;
  letter-spacing:.06em;text-transform:uppercase;color:#E3E9F0;white-space:nowrap;
}
.senal__nombre b{color:var(--celeste);font-weight:800}
/* El lema con sus dos rayas, como en el logo. Las rayas son ::before/::after
   con flex:1, asi que se encogen solas y NUNCA empujan al texto fuera de la
   caja por estrecha que sea la pantalla. */
.senal__lema{
  margin:0;width:100%;display:flex;align-items:center;gap:10px;
  font-size:clamp(.5rem,1.15vw,.72rem);letter-spacing:.14em;line-height:1;
  text-transform:uppercase;color:rgba(227,233,240,.85);white-space:nowrap;
}
.senal__lema::before,.senal__lema::after{
  content:"";flex:1 1 0;min-width:0;height:1px;background:var(--azul-vivo);opacity:.85;
}

/* ---- Franja de marca: la tira que el logo del cliente lleva abajo -------- */
.franja-marca{
  grid-column:1 / -1;   /* ocupa las dos columnas de .portada__grilla */
  position:relative;z-index:2;
  margin-top:clamp(26px,3.4vw,44px);padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(79,195,255,.20);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px clamp(14px,2.2vw,26px);
}
.franja-marca li{
  display:flex;align-items:center;gap:9px;
  font-size:clamp(.78rem,1.1vw,.92rem);font-weight:500;color:var(--texto);
  white-space:nowrap;
}
/* Las lineas separadoras del logo. Van como borde del <li>, no como un
   elemento aparte, para que al pasar a varias filas no queden rayas sueltas
   colgando al final de una fila. */
.franja-marca li + li{
  border-left:1px solid rgba(79,195,255,.28);
  padding-left:clamp(14px,2.2vw,26px);
}
.franja-marca .ico{width:19px;height:19px;stroke-width:2.4;color:var(--celeste);flex:none}
/* Medido: la franja entra en UNA sola fila hasta 1040px y se parte en 1024. En
   cuanto se parte, el primer item de cada fila nueva arrastra su raya izquierda
   y quedan rayitas sueltas colgando al principio de la fila. Por debajo de ese
   punto se quitan: la tira sigue leyendose igual sin ellas. */
@media (max-width:1035px){
  .franja-marca li + li{border-left:0;padding-left:0}
}

/* Todo lo que gira usa esta misma vuelta. Al ser elementos HTML, el centro de
   giro es su propio centro y funciona igual en todos los navegadores. */
@keyframes vuelta{to{transform:rotate(360deg)}}

.barrido{
  position:absolute;inset:0;display:block;
  animation:vuelta 6.5s linear infinite;
}
.barrido svg{width:100%;height:100%;display:block}

.aro{
  position:absolute;inset:0;margin:auto;border-radius:50%;
  border-style:solid;border-color:transparent;pointer-events:none;display:block;
}
.aro--1{
  width:41%;height:41%;border-width:3px;
  border-top-color:rgba(79,195,255,.95);border-right-color:rgba(79,195,255,.40);
  animation:vuelta 8s linear infinite;
}
.aro--2{
  width:68%;height:68%;border-width:2.5px;
  border-top-color:rgba(8,128,224,.85);border-left-color:rgba(79,195,255,.45);
  animation:vuelta 13s linear infinite reverse;
}
.aro--3{
  width:97%;height:97%;border-width:2px;
  border-top-color:rgba(79,195,255,.60);border-right-color:rgba(79,195,255,.22);
  animation:vuelta 20s linear infinite;
}

.orbita{position:absolute;inset:0;display:block;pointer-events:none}
.orbita i{
  position:absolute;left:50%;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--celeste);
  box-shadow:0 0 12px rgba(79,195,255,.9);
}
.orbita--a{animation:vuelta 6s linear infinite}
.orbita--a i{top:28%}
.orbita--b{animation:vuelta 10s linear infinite reverse}
.orbita--b i{top:2%;width:8px;height:8px;margin-left:-4px;background:var(--azul-vivo)}

/* ---- Sello de socio de CERSAT ------------------------------------------- */
/* La medalla es el archivo oficial de la camara: un circulo azul (#052A3E) con
   el logotipo en blanco y el resto transparente. Sobre el fondo del sitio se
   recorta solo, por eso NO lleva ni caja ni borde propio.
   La cinta va encima del PNG, no dentro de el: asi el logo de la camara queda
   intacto y el texto se lee nitido a cualquier tamano. */
.seccion-sello{
  background:var(--azul-900);padding:clamp(24px,3.4vw,38px) 0;
}
.sello{
  display:flex;align-items:center;gap:clamp(16px,3vw,34px);
  padding:clamp(16px,2.4vw,26px) clamp(18px,3vw,32px);
  border:1px solid var(--borde);border-radius:var(--radio);
  background:linear-gradient(135deg,rgba(18,42,71,.55),rgba(11,29,51,.35));
}
.sello__medalla{
  position:relative;flex:none;display:block;text-decoration:none;
  width:clamp(122px,13vw,164px);
  padding-bottom:14px;   /* sitio para la cinta, que sobresale por abajo */
}
.sello__medalla img{width:100%;height:auto;display:block}
.sello__cinta{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  /* El ancho lo manda la MEDALLA, no el texto: una cinta sobresale siempre lo
     mismo por los dos lados. Dejandolo al texto salia 143px sobre una medalla
     de 122 en pantallas medianas y 160 sobre 164 en grandes (medido): unas
     veces asomaba y otras se metia para adentro. */
  width:calc(100% + 22px);text-align:center;
  background:var(--azul);color:var(--blanco);
  font-size:clamp(.56rem,.85vw,.68rem);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;
  padding:6px 8px;
  /* Las puntas mordidas de una cinta. Sin esto seria una pastilla cualquiera. */
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.9);
}
.sello__titulo{
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.25;margin:0;
  color:var(--texto);font-weight:700;
}
.sello__titulo b{color:var(--celeste);font-weight:700}
.sello__bajada{
  margin:10px 0 0;color:var(--texto-suave);
  font-size:clamp(.9rem,1.15vw,1rem);line-height:1.6;max-width:62ch;
}
/* Medido: por debajo de 700px la medalla y el texto ya no conviven en una fila
   sin dejar el parrafo en columnas de 3 palabras. Ahi se apilan centrados. */
@media (max-width:700px){
  .sello{flex-direction:column;text-align:center;gap:16px}
  .sello__bajada{margin-left:auto;margin-right:auto}
}

/* Publico al que apunta (chips) */
.publicos{display:flex;flex-wrap:wrap;gap:11px}
.franja-publicos{
  background:var(--azul-900);border-bottom:1px solid var(--borde);
  padding:26px 0;
}
.franja-publicos .contenedor{
  display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;
}
.franja-publicos__texto{
  font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texto-suave);
}
.publico{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:99px;font-size:.87rem;font-weight:500;
  background:rgba(120,170,225,.08);border:1px solid var(--borde);color:var(--texto);
}
.publico .ico{width:18px;height:18px;color:var(--celeste)}

/* == 6. TARJETAS Y REJILLAS ================================================ */
.rejilla{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* --- Aplicaciones incluidas en la plataforma (Soluciones) ------------------
   Son 17 tarjetas pequeñas: el icono real de cada herramienta a la izquierda y
   el texto a la derecha. Se reusa .tarjeta a proposito, para heredar el trato
   que ya tiene dentro de una seccion clara (fondo blanco y texto oscuro); si se
   inventara una tarjeta nueva habria que repetir ese arreglo y es justo donde
   antes quedo texto invisible. */
.rejilla--apps{grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.tarjeta--app{padding:19px 18px}
/* El icono y el nombre van en una linea, y la descripcion DEBAJO a todo el
   ancho de la tarjeta. Con el texto al lado del icono la columna quedaba muy
   estrecha, se partia en muchas lineas y las tarjetas salian altisimas. */
.app__cab{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.tarjeta--app h3{font-size:1.02rem;margin:0}
.tarjeta--app p{font-size:.875rem;line-height:1.5}
/* El borde fino NO es decorativo: hay iconos casi blancos (PilotOS, WorkOrders)
   y uno sin fondo propio (InspectPro) que sobre la tarjeta blanca se perderian
   sin nada que les marque el contorno. Comprobado midiendo el brillo de cada
   icono antes de montarlos. */
.app__ico{
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;object-fit:contain;
  border:1px solid var(--borde-claro);background:#fff;
}

.tarjeta{
  position:relative;overflow:hidden;padding:30px 26px;border-radius:var(--radio);
  background:var(--azul-800);border:1px solid var(--borde);
  transition:transform var(--transicion),border-color var(--transicion),background var(--transicion);
}
.tarjeta::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--azul-vivo),var(--celeste));transition:width var(--transicion);
}
.tarjeta:hover{transform:translateY(-5px);border-color:var(--borde-2);background:var(--azul-700)}
.tarjeta:hover::before{width:100%}
/* ---- Iconos con aspecto de app (estilo iOS) ----------------------------
   Pastilla con degradado azul, brillo de cristal arriba, sombra de contacto
   abajo y el simbolo en blanco. El 23% de radio es la proporcion que usa
   Apple en los iconos de app. Se usa igual en tarjetas, activos y destacados. */
.tarjeta__ico,.activo__ico,.destacado__ico{
  position:relative;overflow:hidden;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;color:#fff;border-radius:23%;
  background:linear-gradient(155deg,#4FB4F8 0%,var(--azul-vivo) 40%,var(--azul) 76%,var(--azul-hondo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 20px rgba(2,18,42,.28),
    0 10px 20px -8px rgba(8,128,224,.55),
    0 2px 5px rgba(3,12,28,.38);
}
/* Brillo superior tipo cristal */
.tarjeta__ico::after,.activo__ico::after,.destacado__ico::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.36) 0%,rgba(255,255,255,.08) 40%,rgba(255,255,255,0) 58%);
}
.tarjeta__ico .ico,.activo__ico .ico,.destacado__ico .ico{
  position:relative;z-index:1;color:#fff;stroke-width:1.9;
  /* Sombra sutil bajo el simbolo, como en los iconos de iOS: le da relieve y
     lo despega de la parte mas clara del degradado. */
  filter:drop-shadow(0 1px 1.5px rgba(2,18,42,.42));
}
.tarjeta__ico{width:56px;height:56px;margin-bottom:20px}
.tarjeta__ico .ico{width:27px;height:27px}
.activo__ico{width:52px;height:52px;margin-bottom:18px}
.activo__ico .ico{width:25px;height:25px}
.tarjeta h3{font-size:1.12rem;margin-bottom:9px}
.tarjeta p{font-size:.94rem;color:var(--texto-suave)}

.seccion--clara .tarjeta{background:#fff;border-color:var(--borde-claro)}
.seccion--clara .tarjeta:hover{background:#fff;border-color:#C6D3E6;box-shadow:var(--sombra-clara)}
.seccion--clara .tarjeta h3{color:var(--texto-oscuro)}
.seccion--clara .tarjeta p{color:var(--texto-oscuro-suave)}
/* En seccion clara el icono de app mantiene el mismo aspecto, solo se afina
   la sombra para que apoye sobre blanco. */
.seccion--clara .tarjeta__ico,.seccion--clara .activo__ico{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 20px rgba(2,18,42,.24),
    0 10px 20px -8px rgba(0,88,176,.42),
    0 2px 5px rgba(10,30,60,.22);
}

/* Tarjeta que ademas es un enlace */
a.tarjeta{display:block}
a.tarjeta .mas{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:.87rem;font-weight:600;color:var(--celeste);
}
a.tarjeta .mas .ico{width:16px;height:16px;transition:transform .25s}
a.tarjeta:hover .mas .ico{transform:translateX(4px)}
.seccion--clara a.tarjeta .mas{color:var(--azul)}

/* Lista con tildes */
.lista-check{display:grid;gap:13px}
.lista-check li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;color:var(--texto-suave)}
.lista-check .ico{width:20px;height:20px;color:var(--celeste);margin-top:4px;stroke-width:2.4;flex:none}
.seccion--clara .lista-check li{color:var(--texto-oscuro-suave)}
.seccion--clara .lista-check .ico{color:var(--azul)}

/* == 7. BLOQUES DESTACADOS (familia / mascotas) ============================ */
.destacado{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;
  padding:clamp(30px,4vw,52px);border-radius:calc(var(--radio) + 6px);
  background:linear-gradient(140deg,var(--azul-800),var(--azul-900));
  border:1px solid var(--borde);position:relative;overflow:hidden;
}
.destacado::after{
  content:"";position:absolute;width:420px;height:420px;right:-140px;top:-160px;pointer-events:none;
  background:radial-gradient(circle,rgba(8,128,224,.18),transparent 68%);
}
.destacado + .destacado{margin-top:24px}
.destacado__ico{width:64px;height:64px;margin-bottom:20px}
.destacado__ico .ico{width:31px;height:31px}
.destacado h3{font-size:clamp(1.35rem,2.4vw,1.8rem);margin-bottom:14px}
.destacado p{color:var(--texto-suave)}
.destacado__visual{position:relative;z-index:1}

/* == 8. PLATAFORMA Y TORRE DE CONTROL ====================================== */
.dos-columnas{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(38px,5.5vw,76px);align-items:center}

.panel{
  background:linear-gradient(170deg,var(--azul-700),var(--azul-900));
  border:1px solid var(--borde-2);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;
}
.panel__barra{
  display:flex;align-items:center;gap:7px;padding:14px 18px;
  border-bottom:1px solid var(--borde);background:rgba(120,170,225,.06);
}
.panel__luz{width:9px;height:9px;border-radius:50%;background:rgba(155,174,201,.28)}
.panel__luz:first-child{background:var(--celeste)}
.panel__titulo{margin-left:10px;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--texto-suave)}
.panel__cuerpo{padding:18px}
.panel__mapa{
  position:relative;height:196px;border-radius:var(--radio-s);overflow:hidden;
  background:linear-gradient(160deg,#0C2340,#061020);border:1px solid var(--borde);
  color:rgba(79,195,255,.6);
}
.panel__mapa svg{width:100%;height:100%}
.pulso{
  position:absolute;width:11px;height:11px;border-radius:50%;background:var(--celeste);
  transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(79,195,255,.55);animation:latido 2.4s infinite;
}
.pulso--b{background:var(--azul-vivo);animation-delay:.8s}
.pulso--c{background:#FFB020;animation-delay:1.6s}

.panel__filas{display:grid;gap:9px;margin-top:16px}
.panel__fila{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:9px;background:rgba(120,170,225,.06);border:1px solid var(--borde);
}
.panel__fila i{flex:1;height:6px;border-radius:3px;background:rgba(155,174,201,.16);max-width:120px}
.chip{font-size:.75rem;font-weight:600;padding:4px 11px;border-radius:99px}
.chip--ok{background:rgba(79,195,255,.15);color:var(--celeste)}
.chip--alerta{background:rgba(255,105,105,.15);color:#FF8A8A}
.chip--info{background:rgba(8,128,224,.20);color:#7FC0FF}

/* Maqueta de la plataforma. SLOT: reemplazar por capturas reales del cliente. */
.maqueta{
  background:linear-gradient(170deg,#12304F,#071322);
  border:1px solid var(--borde-2);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra);
}
.maqueta__barra{display:flex;gap:7px;padding:13px 16px;background:rgba(120,170,225,.07)}
.maqueta__barra span{width:9px;height:9px;border-radius:50%;background:rgba(155,174,201,.3)}
.maqueta__barra span:first-child{background:var(--celeste)}
.maqueta__cuerpo{display:flex;height:clamp(240px,30vw,310px)}
.maqueta__lateral{
  width:64px;flex:none;padding:16px 12px;display:grid;gap:11px;align-content:start;
  border-right:1px solid var(--borde);background:rgba(120,170,225,.04);
}
.maqueta__lateral .l{height:8px;border-radius:4px;background:rgba(155,174,201,.2);display:block}
.maqueta__lateral .l--activa{background:var(--celeste)}
.maqueta__mapa{flex:1;position:relative;color:rgba(79,195,255,.55)}
.maqueta__mapa svg{width:100%;height:100%}

/* == 9. SECTORES Y ACTIVOS ================================================= */
.rejilla-activos{
  display:grid;gap:1px;background:var(--borde);
  border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(262px,1fr));
}
.activo{background:var(--azul-850);padding:32px 26px;transition:background var(--transicion)}
.activo:hover{background:var(--azul-700)}
.activo h3{font-size:1.06rem;margin-bottom:8px}
.activo p{font-size:.91rem;color:var(--texto-suave)}

/* Pasos numerados */
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:22px}
.paso{
  padding:28px 24px;border-radius:var(--radio);
  background:var(--azul-800);border:1px solid var(--borde);
  transition:border-color var(--transicion),transform var(--transicion);
}
.paso:hover{border-color:var(--borde-2);transform:translateY(-4px)}
.paso__n{
  display:block;font-size:1.9rem;font-weight:800;letter-spacing:-.04em;margin-bottom:12px;
  color:transparent;-webkit-text-stroke:1.4px rgba(79,195,255,.6);
}
.paso h3{font-size:1.04rem;margin-bottom:8px}
.paso p{font-size:.91rem;color:var(--texto-suave)}

/* Los pasos dentro de una seccion clara: si no se invierten, quedan con texto
   oscuro sobre tarjeta oscura y no se leen. */
.seccion--clara .paso{background:#fff;border-color:var(--borde-claro)}
.seccion--clara .paso:hover{border-color:#C6D3E6;box-shadow:var(--sombra-clara)}
.seccion--clara .paso h3{color:var(--texto-oscuro)}
.seccion--clara .paso p{color:var(--texto-oscuro-suave)}
.seccion--clara .paso__n{-webkit-text-stroke-color:rgba(0,88,176,.65)}

/* == 10. FRANJA DE LLAMADA A LA ACCION ===================================== */
.franja{
  position:relative;overflow:hidden;padding:clamp(52px,7vw,84px) 0;
  background:linear-gradient(115deg,var(--azul-hondo),var(--azul) 55%,var(--azul-vivo));
  text-align:center;
}
.franja::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 300px at 50% 120%,rgba(255,255,255,.16),transparent 70%);
}
.franja__int{position:relative;z-index:1;max-width:760px;margin-inline:auto}
.franja h2{font-size:clamp(1.6rem,3.2vw,2.35rem);color:#fff;letter-spacing:-.03em}
.franja p{margin-top:14px;color:rgba(255,255,255,.86);font-size:1.05rem}
.franja__acciones{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:30px}
.franja .btn--primario{background:#fff;color:var(--azul-hondo);box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.franja .btn--primario:hover{background:#EAF3FF}
.franja .btn--fantasma{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.10)}
.franja .btn--fantasma:hover{background:rgba(255,255,255,.20);border-color:#fff;color:#fff}

/* == 11. CONTACTO ========================================================== */
.contacto{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,64px);align-items:start}

.datos-contacto{margin-top:32px;display:grid;gap:15px}
.datos-contacto li a,.datos-contacto li>span{
  display:flex;align-items:center;gap:14px;font-size:1rem;color:var(--texto);font-weight:500;
}
.datos-contacto .ico{
  width:44px;height:44px;padding:11px;border-radius:12px;flex:none;
  background:rgba(8,128,224,.16);color:var(--celeste);stroke-width:1.9;
  border:1px solid rgba(79,195,255,.16);
}
.datos-contacto li a:hover{color:var(--celeste)}
.datos-contacto small{display:block;font-size:.79rem;color:var(--texto-suave);font-weight:400}

.cobertura{
  margin-top:30px;padding:22px 24px;border-radius:var(--radio);
  background:var(--azul-800);border:1px solid var(--borde);
}
.cobertura h3{font-size:1rem;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.cobertura h3 .ico{width:20px;height:20px;color:var(--celeste)}
.cobertura p{font-size:.93rem;color:var(--texto-suave)}

.contacto__form{
  background:var(--blanco);border:1px solid var(--borde-claro);
  border-radius:var(--radio);padding:clamp(26px,3.2vw,40px);box-shadow:var(--sombra);
}
.contacto__form h3{color:var(--texto-oscuro);font-size:1.25rem;margin-bottom:6px}
.contacto__form>p{color:var(--texto-oscuro-suave);font-size:.93rem;margin-bottom:24px}
.campo{margin-bottom:17px}
.campo-doble{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.campo label{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px;color:var(--texto-oscuro)}
.campo label span{color:#D93A3A}
.campo input,.campo select,.campo textarea{
  width:100%;padding:13px 15px;border-radius:var(--radio-s);
  border:1px solid var(--borde-claro);background:#FBFCFE;color:var(--texto-oscuro);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.campo textarea{resize:vertical;min-height:96px}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--azul);background:#fff;box-shadow:0 0 0 4px rgba(0,88,176,.13);
}
.campo input.invalido,.campo select.invalido{border-color:#D93A3A;box-shadow:0 0 0 4px rgba(217,58,58,.1)}
.campo .error{display:block;font-size:.8rem;color:#D93A3A;margin-top:5px}
.campo .error:not(:empty){min-height:18px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-nota{margin-top:15px;font-size:.9rem;text-align:center;min-height:22px;color:var(--texto-oscuro-suave)}
.form-nota.ok{color:#0A7C46;font-weight:600}
.form-nota.mal{color:#D93A3A;font-weight:600}

/* == 12. PIE, FLOTANTES, RESPONSIVE ======================================== */
.pie{background:var(--negro);border-top:1px solid var(--borde);padding-top:clamp(52px,6vw,76px)}
.pie__int{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:38px;padding-bottom:48px}
/* En el pie va el logo COMPLETO (monograma + nombre + lema), que es la firma
   de marca. Se dimensiona por ANCHO y no por alto: con la altura de 52 px que
   habia antes el lockup quedaba en 111 px de ancho y el lema no se leia.
   La columna del pie mide 349 px, asi que 230 px entran con aire. */
.pie__marca img{width:230px;max-width:100%;height:auto;margin-bottom:16px}
.pie__marca p{font-size:.9rem;color:var(--texto-suave);max-width:34ch}
.pie h3{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--texto);margin-bottom:17px}
.pie__nav a,.pie__contacto li{display:block;font-size:.9rem;color:var(--texto-suave);margin-bottom:11px;transition:color .2s}
.pie__nav a:hover,.pie__contacto a:hover{color:var(--celeste)}
.pie__contacto li a,.pie__contacto li>span{display:flex;align-items:center;gap:9px;color:inherit}
.pie__contacto .ico{width:17px;height:17px;color:var(--celeste);flex:none}
.pie__redes{display:flex;gap:10px;margin-top:16px}
.pie__redes a{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--borde-2);
  display:flex;align-items:center;justify-content:center;color:var(--texto-suave);transition:all .25s;
}
.pie__redes a:hover{border-color:var(--celeste);color:var(--celeste)}
.pie__legal{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:20px 24px;border-top:1px solid var(--borde);font-size:.82rem;color:var(--texto-suave);
}

.flotante{
  position:fixed;z-index:90;display:flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;border:none;
  transition:transform .25s,opacity .3s,visibility .3s,box-shadow .25s;
}
/* Boton flotante de WhatsApp. Va en la esquina, y el de "volver arriba" queda
   justo encima alineado con el (ver .flotante--arriba). El verde y el logo son
   los de la marca WhatsApp: se dibuja relleno a proposito, porque es un logo,
   no uno de los iconos de linea del resto del sitio. */
.flotante--wa{
  right:22px;bottom:22px;width:58px;height:58px;background:#25D366;color:#fff;
  /* El aro claro lo despega del fondo oscuro; sin el, el verde se funde con la
     seccion negra del final y el boton parecia una mancha. */
  border:2px solid rgba(255,255,255,.22);
  box-shadow:0 12px 28px -8px rgba(37,211,102,.65),0 0 0 6px rgba(37,211,102,.13);
}
.flotante--wa svg{width:32px;height:32px}
.flotante--wa:hover{
  transform:scale(1.07);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 16px 34px -8px rgba(37,211,102,.75),0 0 0 9px rgba(37,211,102,.18);
}

/* Etiqueta que sale al pasar el raton, para que se entienda que hace el boton
   sin tener que pulsarlo. Crece hacia la IZQUIERDA (el boton esta anclado a la
   derecha), asi que nunca puede sacar barra de desplazamiento horizontal.
   En movil no hay raton: no aparece nunca, y por eso no estorba. */
.flotante--wa::after{
  content:"Escribir por WhatsApp";
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:rgba(11,29,51,.96);color:#fff;border:1px solid var(--borde-2);
  padding:8px 13px;border-radius:999px;font-size:.86rem;font-weight:600;
  white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .22s,visibility .22s;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.7);
}
.flotante--wa:hover::after,.flotante--wa:focus-visible::after{opacity:1;visibility:visible}
.flotante--arriba{
  right:28px;bottom:94px;width:44px;height:44px;
  background:rgba(11,29,51,.92);color:var(--texto);border:1px solid var(--borde-2);
  opacity:0;visibility:hidden;backdrop-filter:blur(8px);
}
.flotante--arriba.visible{opacity:1;visibility:visible}
.flotante--arriba:hover{border-color:var(--celeste);color:var(--celeste)}

/* Pantallas bajas (portatiles de 720px de alto): se comprime la portada para
   que los botones de accion no queden tapados por el pliegue. */
@media (max-height:780px) and (min-width:920px){
  .portada--inicio{padding-top:calc(var(--alto-cabecera) + 26px);padding-bottom:38px}
  .portada__bajada{margin-top:16px}
  .franja-marca{margin-top:22px;padding-top:16px}
  .portada__acciones{margin-top:24px}
  .portada__titulo{font-size:clamp(2rem,3.4vw,2.75rem)}
}

@media (max-width:1080px){
  .nav{gap:22px}
  .nav a{font-size:.87rem}
  .pie__int{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:920px){
  .dos-columnas,.destacado,.contacto{grid-template-columns:1fr}
  /* En pantallas angostas la senal pasa debajo del texto y se achica */
  .portada__grilla{grid-template-columns:1fr;gap:36px}
  .portada__texto{max-width:none}
  /* Sube de 300 a 340: el radar ya no lleva solo el monograma, tambien el
     nombre y el lema, y a 300px el lema quedaba por debajo de lo legible. */
  .senal{width:min(86%,340px)}
  /* Por debajo de 920px el ancho del radar ya casi no cambia (la caja del lema
     va de 258 a 231px), asi que el clamp por vw solo servia para achicar la
     letra hasta 8px. Se fija en 9,6px y se afloja el espaciado para que la
     frase entera siga entrando con sus dos rayas. */
  .senal__lema{font-size:.6rem;letter-spacing:.07em}
}
/* Telefonos muy angostos (320-400px): la caja del lema bajaba a 186px y la
   frase pedia 198 con sus dos separaciones, asi que se salia. Se ensancha la
   caja en vez de achicar mas la letra: a 9,6px ya estaba en el limite de lo
   legible y bajarla mas era peor solucion. */
@media (max-width:400px){
  .senal__centro{width:90%}
  /* La capa de mapa se enmascara para vivir en la COLUMNA DERECHA, detras del
     radar. En movil no hay columna derecha: el texto ocupa todo el ancho, y con
     la mascara de escritorio las avenidas del mapa le cruzaban por encima y se
     volvian a ver como cables (comprobado en un iPhone de 390 px).
     Aqui se invierte: el mapa se desvanece ARRIBA, donde esta el texto, y solo
     tiene cuerpo ABAJO, que es donde el radar pasa a colocarse. Y mas suave. */
  .portada__mapa{
    opacity:.4;
    background-position:30% bottom;
    background-size:190% auto;
    mask-image:linear-gradient(transparent 0%,transparent 34%,#000 76%,#000 100%);
    -webkit-mask-image:linear-gradient(transparent 0%,transparent 34%,#000 76%,#000 100%);
    mask-composite:add;
    -webkit-mask-composite:source-over;
  }
  .destacado__visual,.panel,.maqueta{max-width:560px;margin-inline:auto;width:100%}
}
@media (max-width:900px){
  .hamburguesa{display:flex}
  .cabecera__acciones .btn{display:none}
  .nav{
    position:fixed;inset:var(--alto-cabecera) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(5,9,18,.985);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--borde);padding:10px 24px 26px;
    max-height:calc(100svh - var(--alto-cabecera));overflow-y:auto;
    transform:translateY(-14px);opacity:0;visibility:hidden;
    transition:opacity .28s,transform .28s,visibility .28s;
  }
  body.menu-abierto .nav{transform:translateY(0);opacity:1;visibility:visible}
  body.menu-abierto{overflow:hidden}
  .nav a{padding:16px 4px;font-size:1.02rem;color:var(--texto);border-bottom:1px solid var(--borde)}
  .nav a::after{display:none}
  .nav .solo-movil{display:flex;margin-top:18px;border-bottom:none;justify-content:center}
  .nav .solo-movil + .solo-movil{margin-top:10px}
}
@media (max-width:720px){
  :root{--alto-cabecera:70px}
  .marca img{height:48px}
  .portada--inicio{min-height:auto}
  .portada__acciones .btn{width:100%}
  .campo-doble{grid-template-columns:1fr;gap:0}
  .pie__int{grid-template-columns:1fr;gap:32px}
  .pie__legal{justify-content:center;text-align:center}
  .flotante--wa{right:16px;bottom:16px;width:54px;height:54px}
  .flotante--arriba{right:21px;bottom:82px}
}
@media (max-width:520px){
  .contenedor{padding-inline:18px}
  .tarjeta{padding:26px 22px}
  .activo{padding:28px 22px}
  .destacado{padding:26px 22px}
}

/* Animaciones de entrada.
   IMPORTANTE: el estado oculto depende de la clase .js-activo que pone un
   script en el <head>. Si el JS falla, el contenido se ve igual en vez de
   quedar en blanco. No quitar esa dependencia. */
.js-activo .anim{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.js-activo .anim.visible{opacity:1;transform:none}
.anim[data-anim-retraso="1"]{transition-delay:.08s}
.anim[data-anim-retraso="2"]{transition-delay:.16s}
.anim[data-anim-retraso="3"]{transition-delay:.24s}
.anim[data-anim-retraso="4"]{transition-delay:.32s}

/* Si el sistema pide reducir el movimiento, se apaga todo: hay personas que se
   marean con las animaciones. UNICA excepcion: agregar ?movimiento=1 a la
   direccion fuerza las animaciones, para poder mostrarlas en una computadora
   que las tiene desactivadas (por ejemplo, en una demostracion al cliente). */
@media (prefers-reduced-motion:reduce){
  html:not(.movimiento-forzado) *,
  html:not(.movimiento-forzado) *::before,
  html:not(.movimiento-forzado) *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html:not(.movimiento-forzado){scroll-behavior:auto !important}
  html:not(.movimiento-forzado).js-activo .anim{opacity:1;transform:none}

  /* EXCEPCION: el radar del escudo gira SIEMPRE, aunque el sistema pida
     reducir el movimiento. Es un elemento chico, lento y que no se mueve de
     lugar. Todo lo demas (aparicion al hacer scroll, cuadricula del fondo,
     resplandor que respira, ondas) si se apaga, que es lo que de verdad
     molesta a quien tiene sensibilidad al movimiento.
     El selector lleva "html body" para pesar mas que la regla general de
     arriba, que tambien usa !important. */
  html body .barrido  {animation:vuelta 6.5s linear infinite !important}
  html body .aro--1   {animation:vuelta 8s  linear infinite !important}
  html body .aro--2   {animation:vuelta 13s linear infinite reverse !important}
  html body .aro--3   {animation:vuelta 20s linear infinite !important}
  html body .orbita--a{animation:vuelta 6s  linear infinite !important}
  html body .orbita--b{animation:vuelta 10s linear infinite reverse !important}
}
@media print{
  .cabecera,.flotante,.portada__fondo{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================================
   13. INICIO CON LA PLATAFORMA COMO PROTAGONISTA
   ----------------------------------------------------------------------------
   El cliente no vende dispositivos: vende la plataforma. Por eso el Inicio
   muestra primero el producto y despues la lista de servicios.
   ========================================================================== */

/* --- Selector de modulos + visor ---------------------------------------- */
.plataforma-viva{
  display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;
  gap:clamp(24px,3vw,42px);align-items:start;
}
/* La regla del visor "pegajoso" NO va aqui: esta mas abajo, justo despues de
   .visor{position:relative}. Si se sube aqui, vuelve el fallo. Explicado alli. */
.modulos{display:grid;gap:8px}
.modulo{
  display:flex;align-items:flex-start;gap:14px;text-align:left;width:100%;
  padding:14px 16px;border-radius:var(--radio-s);cursor:pointer;
  background:transparent;border:1px solid transparent;
  transition:background .25s,border-color .25s,transform .2s;
}
.modulo:hover{background:rgba(120,170,225,.07);border-color:var(--borde)}
.modulo--activo{
  background:linear-gradient(100deg,rgba(8,128,224,.18),rgba(79,195,255,.07));
  border-color:rgba(79,195,255,.35);
}
.modulo__ico{
  width:42px;height:42px;flex:none;border-radius:23%;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(155deg,#4FB4F8,var(--azul-vivo) 45%,var(--azul));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -6px rgba(8,128,224,.55);
}
.modulo__ico .ico{width:21px;height:21px;stroke-width:1.9}
.modulo__txt b{display:block;font-size:1rem;font-weight:700;line-height:1.3}
.modulo__txt small{display:block;font-size:.87rem;color:var(--texto-suave);margin-top:3px}
.modulo--activo .modulo__txt b{color:#fff}

.visor{position:relative}

/* La pantalla de ejemplo acompaña al visitante mientras recorre la lista. Sin
   esto, al elegir una de las ultimas opciones el ejemplo quedaba arriba, fuera
   de la vista, y habia que subir a mirarlo.

   OJO — ESTE BLOQUE TIENE QUE IR DESPUES DE .visor{position:relative}. NO SUBIRLO.
   Antes estaba escrito ANTES, y como las dos reglas pesan igual ganaba la de
   abajo: el visor se quedaba en 'relative' y el 'sticky' no se aplicaba nunca.
   Pero el 'top' de esta regla SI seguia valiendo, y sobre un elemento 'relative'
   un 'top' no lo pega arriba: lo EMPUJA hacia abajo. Resultado: el ejemplo
   bajaba 118px (98 de cabecera + 20) y se montaba encima de la franja final,
   tapando los botones "Ver la plataforma completa" y "Acceder a la plataforma".
   Lo reporto el usuario; se confirmo midiendo que el desfase eran exactamente
   esos 118px. Prueba que lo vigila: pruebas/visor.js */
@media (min-width:921px){
  .visor{position:sticky;top:calc(var(--alto-cabecera) + 20px)}
}

.vista{
  background:linear-gradient(170deg,var(--azul-700),var(--azul-900));
  border:1px solid var(--borde-2);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;
}
.vista[hidden]{display:none}
.vista .panel__mapa{height:236px}
.vista .panel__mapa--bajo{height:150px}

/* Medidores de telemetria */
.medidores{display:grid;gap:14px;padding:8px 2px 4px}
.medidor{display:grid;gap:7px}
.medidor__eti{font-size:.84rem;color:var(--texto-suave)}
.barra{display:block;height:9px;border-radius:5px;background:rgba(155,174,201,.16);overflow:hidden}
.barra i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--azul-vivo),var(--celeste))}

/* Mosaico de camaras */
.camaras{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.camara{
  position:relative;aspect-ratio:16/10;border-radius:9px;border:1px solid var(--borde);
  background:linear-gradient(150deg,#0C2340,#06101E);
}
.camara--b{background:linear-gradient(150deg,#0A1E38,#050D18)}
.camara--c{background:linear-gradient(120deg,#0C2340,#071426)}
.camara--d{background:linear-gradient(200deg,#0A1B31,#060F1C)}
.camara__vivo{
  position:absolute;left:9px;top:9px;font-size:.62rem;font-weight:700;letter-spacing:.1em;
  padding:3px 7px;border-radius:4px;background:rgba(255,90,90,.9);color:#fff;
}

/* Tanques de combustible */
.tanques{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end}
.tanque{
  position:relative;height:150px;border-radius:9px;border:1px solid var(--borde);
  background:rgba(120,170,225,.05);overflow:hidden;display:flex;align-items:flex-end;
}
.tanque__nivel{
  display:block;width:100%;
  background:linear-gradient(180deg,var(--celeste),var(--azul));opacity:.85;
}
.tanque small{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-size:.68rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);
}

/* Grafico de barras de reportes */
.grafico-barras{
  display:grid;grid-template-columns:repeat(8,1fr);gap:10px;align-items:end;height:190px;
  padding:0 2px;
}
.grafico-barras span{
  display:block;border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--celeste),rgba(0,88,176,.5));
}

.plataforma-viva__pie{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
  margin-top:30px;padding-top:26px;border-top:1px solid var(--borde);
}
.plataforma-viva__pie p{color:var(--texto-suave);font-size:.95rem;max-width:52ch}
.plataforma-viva__pie div{display:flex;flex-wrap:wrap;gap:11px}

/* --- Torre de Control, seccion grande ----------------------------------- */
.torre-cine{position:relative;overflow:hidden;background:var(--negro);padding:clamp(78px,10vw,140px) 0}
.torre-cine__fondo{position:absolute;inset:0;pointer-events:none}
.torre-cine__rejilla{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,170,225,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,225,.06) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 20%,transparent 80%);
}
.torre-cine__luz{
  position:absolute;left:50%;top:-30%;transform:translateX(-50%);
  width:min(120vw,1300px);height:min(120vw,1300px);
  background:radial-gradient(circle,rgba(8,128,224,.22) 0%,rgba(79,195,255,.07) 38%,transparent 66%);
}
.torre-cine__int{position:relative;z-index:2;text-align:center;max-width:900px}
.torre-cine__titulo{font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.04em;font-weight:800}
.torre-cine__bajada{
  margin:22px auto 0;max-width:62ch;color:var(--texto-suave);
  font-size:clamp(1rem,1.6vw,1.14rem);
}
.torre-cine__datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;margin:44px 0 38px;
}
.torre-cine__datos div{background:rgba(11,29,51,.72);padding:26px 20px}
.torre-cine__datos b{
  display:block;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(100deg,var(--azul-vivo),var(--celeste));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.torre-cine__datos span{display:block;font-size:.88rem;color:var(--texto-suave);margin-top:6px}

/* --- Servicios agrupados ------------------------------------------------ */
.grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.grupo{
  background:#fff;border:1px solid var(--borde-claro);border-radius:var(--radio);
  padding:32px 28px;transition:transform var(--transicion),box-shadow var(--transicion);
}
.grupo:hover{transform:translateY(-5px);box-shadow:var(--sombra-clara)}
.grupo h3{font-size:1.3rem;color:var(--texto-oscuro);margin:20px 0 8px}
.grupo__frase{
  font-size:1rem;font-weight:600;color:var(--azul);margin-bottom:20px;line-height:1.4;
}
.grupo .lista-check li{font-size:.93rem;color:var(--texto-oscuro-suave)}
.grupo .lista-check .ico{color:var(--azul)}

/* == PAGINA NOSOTROS ======================================================
   El cliente mando un texto largo de "Quienes somos" (30-jul). Estos 3 bloques
   son todo el CSS que hizo falta: el resto de la pagina reusa .seccion,
   .seccion__cabecera, .grupos/.grupo y .franja, que ya existian. */

/* Parrafos largos. Se limita a 820px porque una linea de mas de ~90
   caracteres se lee mal, por mucho que sobre ancho en pantalla. */
.prosa{display:grid;gap:18px;max-width:820px}
.prosa p{font-size:1.03rem;line-height:1.75;color:var(--texto-suave)}
.seccion--clara .prosa p{color:var(--texto-oscuro-suave)}
.prosa--centrada{margin-inline:auto;text-align:center}

/* "Estamos atentos a los avances en": 9 lineas cortas. En una sola columna
   quedaba una lista larguisima; en rejilla de hasta 3 se lee de un vistazo. */
.avances{
  display:grid;gap:15px 28px;margin-top:clamp(26px,3.4vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}
.avances li{display:flex;align-items:flex-start;gap:12px;font-size:.97rem;line-height:1.5;color:var(--texto-suave)}
.avances .ico{width:21px;height:21px;color:var(--celeste);stroke-width:2.2;flex:none;margin-top:2px}
.seccion--clara .avances li{color:var(--texto-oscuro-suave)}
.seccion--clara .avances .ico{color:var(--azul)}

/* La frase con la que el cliente remata el texto. */
.cierre-frase{
  margin-top:clamp(30px,4vw,44px);
  padding:clamp(24px,3.4vw,34px) clamp(22px,3vw,38px);
  border:1px solid var(--borde-2);border-radius:var(--radio);
  background:linear-gradient(150deg,rgba(8,128,224,.16),rgba(8,128,224,.03));
  font-size:clamp(1.05rem,1.9vw,1.3rem);font-weight:700;line-height:1.5;
  color:var(--texto);text-align:center;max-width:900px;margin-inline:auto;
}
.cierre-frase b{color:var(--celeste);font-weight:700}

/* --- Por que Proteccion CAN --------------------------------------------- */
.razones{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--borde);
  border:1px solid var(--borde);border-radius:var(--radio);overflow:hidden}
.razon{background:var(--azul-800);padding:22px 20px;display:grid;gap:5px}
.razon .ico{width:20px;height:20px;color:var(--celeste);stroke-width:2.6}
.razon b{font-size:.98rem}
.razon span{font-size:.86rem;color:var(--texto-suave)}

@media (max-width:920px){
  .plataforma-viva{grid-template-columns:1fr}
  .modulos{grid-template-columns:1fr 1fr;gap:8px}
  .plataforma-viva__pie{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .modulos{grid-template-columns:1fr}
  .razones{grid-template-columns:1fr}
  .tanques{grid-template-columns:repeat(4,1fr);gap:8px}
  .grafico-barras{gap:6px;height:150px}
}

/* En el Inicio son 6 sectores: a 4 columnas quedaban dos huecos. Se fuerzan 3
   columnas para que sean dos filas parejas. */
.rejilla-activos--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.rejilla-activos--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rejilla-activos--3{grid-template-columns:1fr}}

/* --- Datos de ejemplo dentro de las pantallas de la plataforma ------------
   Son datos ILUSTRATIVOS del producto, como en cualquier captura de software.
   No son datos reales de clientes ni afirmaciones sobre la empresa. */
.panel__unidad{
  font-size:.78rem;color:var(--texto-suave);margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px solid var(--borde);
}
.panel__fila{gap:10px}
.fila__dato{
  flex:1;min-width:0;font-size:.84rem;color:var(--texto-suave);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fila__valor{
  flex:none;font-size:.84rem;font-weight:700;color:var(--texto);
  font-variant-numeric:tabular-nums;
}
.medidor__eti{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.medidor__eti b{
  color:var(--celeste);font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.camara{overflow:hidden}
.camara__eti{
  position:absolute;left:8px;bottom:7px;font-size:.66rem;color:rgba(233,239,248,.9);
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.tanque b{
  position:absolute;left:0;right:0;top:9px;text-align:center;
  font-size:.82rem;font-weight:700;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.75);font-variant-numeric:tabular-nums;
}
.grafico-barras{align-items:end;height:210px}
.grafico-barras span{position:relative;display:block}
.grafico-barras b{
  position:absolute;left:0;right:0;top:-19px;text-align:center;
  font-size:.72rem;font-weight:700;color:var(--celeste);font-variant-numeric:tabular-nums;
}
.grafico-barras small{
  position:absolute;left:0;right:0;bottom:-20px;text-align:center;
  font-size:.7rem;color:var(--texto-suave);
}
.vista .grafico-barras{margin-bottom:26px}
@media (max-width:600px){
  /* En celular el texto baja de linea en vez de cortarse con puntos suspensivos */
  .fila__dato{font-size:.78rem;white-space:normal;overflow:visible;text-overflow:clip}
  .panel__fila{flex-wrap:wrap;align-items:flex-start}
  /* Cuatro tanques en 390px dejaban 78px por tanque y se cortaba "Utilitario 07" */
  .tanques{grid-template-columns:repeat(2,1fr);gap:10px}
  .tanque{height:120px}
  .grafico-barras b{font-size:.62rem;top:-16px}
  .grafico-barras small{font-size:.62rem}
}

/* --- Mapa real dentro de las pantallas de la plataforma -------------------
   El mapa es un SVG generado por nosotros con la geometria real de
   Comodoro Rivadavia (datos de OpenStreetMap, ODbL). Esta alojado en el
   servidor: la web NO llama a ningun servicio de mapas al cargar.
   La atribucion es obligatoria y va visible en la esquina. */
.mapa__base{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.mapa__capa{position:absolute;inset:0;width:100%;height:100%}

.mapa__ruta{
  fill:none;stroke:var(--celeste);stroke-width:4;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(79,195,255,.65));
}
.mapa__previsto{
  fill:none;stroke:rgba(155,190,230,.55);stroke-width:2.4;
  stroke-dasharray:9 9;stroke-linecap:round;
}
.mapa__geocerca{
  fill:rgba(79,195,255,.07);stroke:rgba(79,195,255,.55);
  stroke-width:2.4;stroke-dasharray:10 8;
}

.mapa__punto{fill:var(--celeste);stroke:#04121F;stroke-width:2}
.mapa__punto--b{fill:var(--azul-vivo)}
.mapa__punto--c{fill:#FFB020}
.mapa__halo{fill:rgba(79,195,255,.30);animation:respira-halo 2.4s ease-in-out infinite}
.mapa__unidad--b .mapa__halo{fill:rgba(8,128,224,.32);animation-delay:.8s}
.mapa__unidad--c .mapa__halo{fill:rgba(255,176,32,.30);animation-delay:1.6s}
/* Solo se anima la opacidad: es lo mas compatible que hay dentro de un SVG. */
@keyframes respira-halo{0%,100%{opacity:.25}50%{opacity:1}}

/* La atribucion es OBLIGATORIA por la licencia ODbL de OpenStreetMap: no se
   puede quitar. Si se puede hacer discreta, mientras siga siendo legible.
   Sin recuadro, mas chica y pegada al borde. */
.mapa__credito{
  position:absolute;right:7px;bottom:5px;z-index:2;
  font-size:9px;letter-spacing:.01em;line-height:1;
  color:rgba(210,226,245,.62);
  text-shadow:0 1px 3px rgba(2,10,20,.95);
  pointer-events:none;
}

/* --- Panel de camaras -----------------------------------------------------
   Las escenas son DIBUJOS, no fotos ni video real: muestran lo que ve un
   sistema de video para flota (ruta, cabina, carga) con los recuadros de
   deteccion. Se reemplazan por las capturas reales cuando el cliente
   entregue el material. */
.camara__escena{position:absolute;inset:0;width:100%;height:100%;display:block}
.camara__vivo{
  display:inline-flex;align-items:center;gap:5px;z-index:2;
}
.camara__vivo i{
  width:6px;height:6px;border-radius:50%;background:#fff;
  animation:parpadeo 1.6s ease-in-out infinite;
}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:.25}}
.camara__hora{
  position:absolute;right:7px;top:7px;z-index:2;
  font-size:.6rem;font-variant-numeric:tabular-nums;
  color:rgba(233,239,248,.9);text-shadow:0 1px 4px rgba(0,0,0,.95);
}
.camara__eti{z-index:2}

/* Linea de tiempo con los eventos grabados del dia */
.linea-tiempo{
  display:flex;align-items:center;gap:10px;margin-top:14px;
}
.linea-tiempo__eti{
  font-size:.66rem;color:var(--texto-suave);flex:none;font-variant-numeric:tabular-nums;
}
.linea-tiempo__barra{
  position:relative;flex:1;height:8px;border-radius:4px;
  background:rgba(120,170,225,.14);border:1px solid var(--borde);
}
.linea-tiempo .evento{
  position:absolute;top:50%;width:4px;height:12px;margin:-6px 0 0 -2px;
  border-radius:2px;background:var(--celeste);
}
.linea-tiempo .evento--alerta{background:#FF7A7A;height:15px;margin-top:-7.5px}
.linea-tiempo .cabezal{
  position:absolute;top:50%;width:2px;height:20px;margin:-10px 0 0 -1px;
  background:#fff;box-shadow:0 0 8px rgba(255,255,255,.75);
}

/* Zona segura del grupo familiar: circulo punteado sobre el mapa */
.mapa__zona{
  fill:rgba(63,212,139,.08);stroke:rgba(63,212,139,.6);
  stroke-width:2.4;stroke-dasharray:10 8;
}
/* En la maqueta de la pagina Plataforma el mapa ocupa toda la zona derecha */
.maqueta__mapa{position:relative;overflow:hidden}

/* --- Costado de la maqueta de la plataforma -------------------------------
   Antes eran barritas grises sin significado. Ahora es el menu que tendria
   una plataforma de verdad, con datos de ejemplo. */
.maqueta__lateral{
  width:152px;padding:13px 12px;gap:2px;align-content:start;
  grid-template-columns:minmax(0,1fr);
}
/* Marca de la maqueta: el escudo del logo del cliente mas el nombre.
   El logo completo (2,8:1) no entra: a 108px de ancho su texto quedaria de
   8px y no se leeria. Por eso va el escudo solo, con el nombre en tipografia
   del sitio, que si se lee. */
.maqueta__marca{
  display:flex;align-items:center;gap:7px;
  font-size:.6rem;font-weight:800;letter-spacing:.04em;line-height:1.15;
  text-transform:uppercase;color:#fff;margin-bottom:10px;
  padding-bottom:9px;border-bottom:1px solid var(--borde);
}
.maqueta__marca img{width:24px;height:24px;flex:none}
.maqueta__marca b{font-weight:800;min-width:0}
.mnu{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:6px 8px;border-radius:7px;
  font-size:.68rem;color:var(--texto-suave);white-space:nowrap;
}
.mnu .ico{width:14px;height:14px;flex:none;stroke-width:2}
.mnu--activo{
  background:linear-gradient(100deg,rgba(8,128,224,.30),rgba(79,195,255,.10));
  color:#fff;font-weight:600;
}
.mnu--activo .ico{color:var(--celeste)}
.maqueta__pie{
  display:block;margin-top:10px;padding-top:8px;border-top:1px solid var(--borde);
  font-size:.62rem;color:var(--texto-suave);
}

/* Ficha de la unidad seleccionada, encima del mapa */
.ficha{
  position:absolute;left:10px;top:10px;z-index:3;
  background:rgba(6,16,30,.9);border:1px solid var(--borde-2);
  border-radius:9px;padding:9px 11px;min-width:116px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.ficha b{display:block;font-size:.72rem;margin-bottom:5px;color:#fff}
.ficha span{
  display:flex;justify-content:space-between;gap:12px;
  font-size:.62rem;color:var(--texto);font-variant-numeric:tabular-nums;
  padding:1px 0;
}
.ficha i{font-style:normal;color:var(--texto-suave)}

/* En pantallas angostas la maqueta se achicaba tanto que el menu lateral no
   entraba: se le fija un alto que si lo contiene. */
@media (max-width:920px){
  .maqueta__cuerpo{height:302px}
}
@media (max-width:520px){
  .maqueta__lateral{width:126px;padding:12px 9px}
  .mnu{font-size:.62rem;padding:6px}
  .maqueta__marca img{width:20px;height:20px}
  .ficha{left:7px;top:7px;padding:7px 9px;min-width:100px}
}

/* --- Listas de datos dentro de las pantallas (conductores, mantenimiento) -- */
.lista-datos{display:grid;gap:8px;padding:4px 0 2px}
.fila-dato{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:9px;
  background:rgba(120,170,225,.06);border:1px solid var(--borde);
}
.fila-dato .ini{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:800;color:#fff;
  background:linear-gradient(150deg,var(--azul-vivo),var(--azul));
}
.fila-dato .nom{font-size:.8rem;font-weight:600;flex:none;min-width:86px}
.fila-dato .det{font-size:.78rem;color:var(--texto-suave);flex:1;min-width:0}
.fila-dato .barra{flex:1;min-width:40px}
.fila-dato b{
  font-size:.78rem;font-variant-numeric:tabular-nums;flex:none;
}
.fila-dato b.ok{color:var(--celeste)}
.fila-dato b.aviso{color:#FFB020}
.fila-dato b.alerta{color:#FF7A7A}
.fila-dato--serv .nom{min-width:96px}

@media (max-width:600px){
  .fila-dato{flex-wrap:wrap;gap:6px 9px}
  .fila-dato .det{flex:1 0 100%}
  .fila-dato .barra{flex:1 0 60%}
}

/* ============================================================================
   14. PAGINA SECTORES: se rompe la repeticion de tarjetas
   ========================================================================== */

/* --- Franja de datos ------------------------------------------------------
   Los cuatro valores son verificables. Aca NO van cifras inventadas. */
.cifras{
  background:linear-gradient(115deg,var(--azul-hondo),var(--azul) 55%,var(--azul-vivo));
  padding:clamp(34px,4vw,52px) 0;position:relative;overflow:hidden;
}
.cifras::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 260px at 50% 120%,rgba(255,255,255,.14),transparent 70%);
}
.cifras__int{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:1px;background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radio);overflow:hidden;
}
.cifra{
  background:rgba(0,50,105,.30);padding:26px 20px;text-align:center;
  backdrop-filter:blur(2px);
}
.cifra b{
  display:block;color:#fff;font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;
}
.cifra span{display:block;margin-top:7px;font-size:.86rem;color:rgba(255,255,255,.85)}

/* --- Que recibe un cliente: lista con separadores, no mas tarjetas -------- */
.recibe{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;
}
.recibe__item{
  background:var(--azul-800);padding:26px 24px;display:grid;gap:6px;
  transition:background var(--transicion);
}
.recibe__item:hover{background:var(--azul-700)}
.recibe__item .ico{width:26px;height:26px;color:var(--celeste);margin-bottom:6px}
.recibe__item b{font-size:1rem}
.recibe__item span{font-size:.9rem;color:var(--texto-suave)}

/* --- Linea de tiempo del proceso ------------------------------------------
   Cuatro hitos unidos por una linea. En pantallas angostas se vuelve
   vertical, con la linea a la izquierda. */
.linea-proceso{position:relative}
.hitos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative;
}
/* La linea que une los nodos */
.hitos::before{
  content:"";position:absolute;left:12.5%;right:12.5%;top:31px;height:2px;
  background:linear-gradient(90deg,var(--azul-vivo),var(--celeste));
  opacity:.45;
}
.hito{position:relative;text-align:center;padding-top:0}
.hito__nodo{
  position:relative;z-index:1;
  width:62px;height:62px;margin:0 auto 16px;border-radius:23%;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:linear-gradient(155deg,#4FB4F8,var(--azul-vivo) 42%,var(--azul) 78%,var(--azul-hondo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px -8px rgba(0,88,176,.55),
             0 0 0 6px var(--claro);
}
.hito__nodo .ico{width:28px;height:28px;stroke-width:1.9}
.hito__n{
  display:block;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  color:var(--azul);margin-bottom:7px;
}
.hito h3{font-size:1.05rem;color:var(--texto-oscuro);margin-bottom:8px}
.hito p{font-size:.91rem;color:var(--texto-oscuro-suave);max-width:30ch;margin-inline:auto}

@media (max-width:860px){
  .hitos{grid-template-columns:1fr;gap:0}
  .hitos::before{
    left:31px;right:auto;top:20px;bottom:40px;height:auto;width:2px;
    background:linear-gradient(180deg,var(--azul-vivo),var(--celeste));
  }
  .hito{
    text-align:left;display:grid;grid-template-columns:62px 1fr;
    gap:0 20px;padding-bottom:30px;
  }
  .hito__nodo{margin:0;grid-row:span 3}
  .hito__n{margin-bottom:2px;align-self:end}
  .hito h3,.hito p{grid-column:2}
  .hito p{max-width:none}
}

/* La celda que invita a consultar. Existe para que la grilla quede completa
   (12 celdas entran justo en 1, 2, 3 y 4 columnas) y para no dejar un hueco
   vacio al final, ademas de sumar una llamada a la accion. */
.activo--consulta{
  display:block;
  /* Mismo fondo que el resto: si lleva color fijo parece que esta
     seleccionada. El azul aparece solo al pasar el mouse, igual que en las
     demas celdas. */
  background:var(--azul-850);
}
.activo--consulta:hover{background:linear-gradient(150deg,rgba(8,128,224,.22),rgba(79,195,255,.08))}
.activo__mas{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:.87rem;font-weight:600;color:var(--celeste);
}
.activo__mas .ico{width:16px;height:16px;margin:0;color:inherit;transition:transform .25s}
.activo--consulta:hover .activo__mas .ico{transform:translateX(4px)}


/* ============================================================================
   20. INTERIORES PRO 2026
   ----------------------------------------------------------------------------
   Rediseño visual EXCLUSIVO de páginas interiores. Todas las reglas están
   encapsuladas bajo body.pagina-pro para que la portada index.html no cambie.
   ========================================================================== */
.pagina-pro{background:#071120}
.pagina-pro main{overflow:hidden}
.pagina-pro .seccion{position:relative}
.pagina-pro .pro-section{padding:clamp(72px,8vw,112px) 0}
.pagina-pro .pro-section>.contenedor{position:relative;z-index:2}
.pagina-pro .seccion__cabecera{margin-bottom:clamp(34px,5vw,54px);max-width:800px}
.pagina-pro .seccion__cabecera .titulo{font-weight:800;letter-spacing:-.045em}
.pagina-pro .pro-copy{color:var(--texto-suave);font-size:1.02rem;max-width:66ch;margin-top:20px}
.pagina-pro .seccion--clara .pro-copy{color:var(--texto-oscuro-suave)}

/* Hero interior con textura de red y profundidad, sin tocar .portada del inicio */
.pagina-pro .pro-hero{position:relative;isolation:isolate;min-height:650px;padding:calc(var(--alto-cabecera) + 72px) 0 82px;background:linear-gradient(155deg,#08182f 0%,#071120 52%,#04070d 100%);overflow:hidden}
.pagina-pro .pro-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(8,128,224,.17),transparent 34%),radial-gradient(circle at 16% 78%,rgba(79,195,255,.08),transparent 30%);z-index:-2}
.pagina-pro .pro-hero__grid{position:absolute;inset:-20%;z-index:-3;background-image:linear-gradient(rgba(120,170,225,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,225,.055) 1px,transparent 1px);background-size:58px 58px;transform:perspective(900px) rotateX(61deg) translateY(-5%);transform-origin:center bottom;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 88%)}
.pagina-pro .pro-hero__glow{position:absolute;width:min(720px,78vw);aspect-ratio:1;right:-12%;top:-34%;background:radial-gradient(circle,rgba(8,128,224,.24),rgba(8,128,224,.05) 46%,transparent 70%);filter:blur(18px);z-index:-1;animation:pro-breathe 7s ease-in-out infinite}
.pagina-pro .pro-hero__int{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);align-items:center;gap:clamp(40px,6vw,88px);min-height:490px}
.pagina-pro .pro-hero__copy h1{font-size:clamp(2.45rem,5.4vw,4.55rem);font-weight:800;letter-spacing:-.06em;line-height:1.02;max-width:790px}
.pagina-pro .pro-hero__copy h1 span{background:linear-gradient(95deg,#fff 0%,var(--celeste) 46%,#6aa9ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pagina-pro .pro-hero__copy>p{margin-top:24px;color:#a8bad2;font-size:clamp(1.02rem,1.6vw,1.16rem);max-width:62ch}
.pagina-pro .pro-hero__acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pagina-pro .pro-hero__trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;padding-top:22px;border-top:1px solid var(--borde);color:var(--texto-suave);font-size:.82rem}
.pagina-pro .pro-hero__trust span{display:inline-flex;align-items:center;gap:7px}.pagina-pro .pro-hero__trust .ico{width:15px;height:15px;color:var(--celeste)}
.pagina-pro .pro-hero__visual{min-height:420px;display:flex;align-items:center;justify-content:center;position:relative}

/* Glow reactivo de tarjetas, controlado por interiores.js */
.pagina-pro .pro-card{--mx:50%;--my:50%;position:relative;overflow:hidden;padding:28px 26px;border:1px solid var(--borde);border-radius:18px;background:linear-gradient(165deg,rgba(18,42,71,.76),rgba(7,17,32,.96));transition:transform .35s cubic-bezier(.2,.75,.25,1),border-color .35s,box-shadow .35s;min-height:230px}
.pagina-pro .pro-card::after{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx) var(--my),rgba(79,195,255,.12),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.pagina-pro .pro-card:hover{transform:translateY(-7px);border-color:rgba(79,195,255,.4);box-shadow:0 24px 70px -34px rgba(8,128,224,.75)}
.pagina-pro .pro-card:hover::after{opacity:1}.pagina-pro .pro-card>*{position:relative;z-index:1}
.pagina-pro .pro-card h3{font-size:1.08rem;margin:0 0 10px}.pagina-pro .pro-card p{font-size:.92rem;color:var(--texto-suave)}
.pagina-pro .pro-card .tarjeta__ico{margin-bottom:22px}
.pagina-pro .pro-grid{display:grid;gap:18px}.pagina-pro .pro-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.pagina-pro .pro-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.pagina-pro .pro-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pagina-pro .pro-inline-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pagina-pro [data-tilt]{transform-style:preserve-3d;will-change:transform}

/* Hero Soluciones */
.pagina-pro .pro-stack{position:relative;width:min(520px,100%);height:420px;perspective:1000px}
.pagina-pro .pro-stack__halo{position:absolute;inset:10% 3%;border-radius:50%;background:radial-gradient(circle,rgba(8,128,224,.28),transparent 64%);filter:blur(18px)}
.pagina-pro .pro-stack__card{position:absolute;border-radius:18px;border:1px solid rgba(120,170,225,.28);background:linear-gradient(155deg,rgba(18,42,71,.95),rgba(5,12,24,.95));box-shadow:0 28px 70px -32px #000,inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(12px);padding:22px;color:#fff;animation:pro-float 6s ease-in-out infinite}
.pagina-pro .pro-stack__card--a{width:65%;left:0;top:24px;transform:rotate(-4deg)}.pagina-pro .pro-stack__card--b{width:67%;right:0;top:140px;animation-delay:-2s;transform:rotate(3deg)}.pagina-pro .pro-stack__card--c{width:61%;left:7%;bottom:0;animation-delay:-4s;transform:rotate(-1deg)}
.pagina-pro .pro-stack__card span{display:flex;align-items:center;gap:8px;font-size:.68rem;letter-spacing:.14em;color:#9fc6ef}.pagina-pro .pro-stack__card span .ico{width:16px;height:16px;color:var(--celeste)}
.pagina-pro .pro-stack__card>b{display:block;margin-top:18px;font-size:.9rem}.pagina-pro .pro-stack__card>strong{display:block;font-size:2rem;line-height:1;margin-top:8px}.pagina-pro .pro-stack__card>strong small{font-size:.7rem;font-weight:500;color:var(--texto-suave)}.pagina-pro .pro-stack__card>em{display:block;margin-top:10px;font-style:normal;font-size:.7rem;color:var(--texto-suave)}
.pagina-pro .pro-live i,.pagina-pro .pro-okline i{width:7px;height:7px;border-radius:50%;background:#49e49e;box-shadow:0 0 0 5px rgba(73,228,158,.11);animation:parpadeo 1.7s infinite}
.pagina-pro .pro-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:16px}.pagina-pro .pro-metrics b{padding:10px 7px;border:1px solid var(--borde);border-radius:9px;background:rgba(120,170,225,.06);font-size:.93rem}.pagina-pro .pro-metrics small{display:block;font-size:.57rem;color:var(--texto-suave);font-weight:500;margin-top:2px}
.pagina-pro .pro-camera-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:14px}.pagina-pro .pro-camera-mini i{height:48px;border-radius:6px;background:linear-gradient(145deg,#173958,#081421);position:relative;overflow:hidden}.pagina-pro .pro-camera-mini i::after{content:"";position:absolute;left:15%;right:15%;top:48%;height:1px;background:rgba(79,195,255,.35);box-shadow:0 -10px 0 rgba(79,195,255,.12),0 10px 0 rgba(79,195,255,.12)}
.pagina-pro .pro-scanline{position:absolute;left:2%;right:2%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--celeste),transparent);filter:drop-shadow(0 0 8px var(--celeste));animation:pro-scan 4.5s ease-in-out infinite;opacity:.6}

/* Familias / mascotas */
.pagina-pro .pro-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.pagina-pro .pro-feature-light{position:relative;overflow:hidden;padding:34px;border:1px solid #dbe5f0;background:#fff;border-radius:22px;box-shadow:0 25px 70px -45px rgba(0,50,100,.5)}
.pagina-pro .pro-feature-light::before{content:"";position:absolute;width:340px;height:340px;right:-170px;top:-170px;background:radial-gradient(circle,rgba(8,128,224,.12),transparent 70%)}
.pagina-pro .pro-feature-light__top{display:flex;align-items:center;gap:15px;margin-bottom:20px}.pagina-pro .pro-feature-light__top .tarjeta__ico{margin:0}.pagina-pro .pro-feature-light__top>span{font-size:.72rem;font-weight:800;letter-spacing:.15em;color:var(--azul)}
.pagina-pro .pro-feature-light h3{color:var(--texto-oscuro);font-size:1.5rem;margin-bottom:12px}.pagina-pro .pro-feature-light>p{color:var(--texto-oscuro-suave);margin-bottom:20px}
.pagina-pro .pro-mini-map{position:relative;height:190px;margin-top:26px;border-radius:14px;overflow:hidden;background:#081a2d}.pagina-pro .pro-mini-map img{width:100%;height:100%;object-fit:cover}.pagina-pro .pro-mini-map i{position:absolute;left:57%;top:48%;width:13px;height:13px;border-radius:50%;background:#49e49e;box-shadow:0 0 0 9px rgba(73,228,158,.18);animation:latido 2.4s infinite}.pagina-pro .pro-mini-map span{position:absolute;left:12px;bottom:12px;padding:8px 10px;border-radius:8px;background:rgba(4,13,26,.85);color:#fff;font-size:.72rem;backdrop-filter:blur(8px)}
.pagina-pro .pro-pet-signal{position:relative;height:190px;margin-top:26px;border-radius:14px;background:radial-gradient(circle at 50% 45%,rgba(8,128,224,.17),transparent 45%),#081a2d;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.pagina-pro .pro-pet-signal::before,.pagina-pro .pro-pet-signal::after{content:"";position:absolute;border:1px solid rgba(79,195,255,.22);border-radius:50%}.pagina-pro .pro-pet-signal::before{width:150px;height:150px}.pagina-pro .pro-pet-signal::after{width:95px;height:95px}.pagina-pro .pro-pet-signal>div{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--azul-vivo),var(--azul));z-index:2;box-shadow:0 0 30px rgba(8,128,224,.45)}.pagina-pro .pro-pet-signal>div .ico{color:#fff}.pagina-pro .pro-pet-signal span,.pagina-pro .pro-pet-signal b{z-index:2;color:#fff}.pagina-pro .pro-pet-signal span{font-size:.67rem;letter-spacing:.15em;margin-top:12px}.pagina-pro .pro-pet-signal b{font-size:.8rem;margin-top:4px}.pagina-pro .pro-pet-signal>i{position:absolute;width:170px;height:170px;border:1px dashed rgba(73,228,158,.55);border-radius:50%;animation:vuelta 16s linear infinite}

/* Apps */
.pagina-pro .pro-tools{background:linear-gradient(180deg,#071120,#050b15)}.pagina-pro .pro-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pagina-pro .pro-app{position:relative;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;min-height:102px;padding:16px;border:1px solid var(--borde);border-radius:14px;background:rgba(18,42,71,.48);transition:transform .25s,border-color .25s,background .25s}.pagina-pro .pro-app:hover{transform:translateY(-3px);border-color:rgba(79,195,255,.34);background:rgba(18,42,71,.75)}.pagina-pro .pro-app__ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,#4FB4F8,var(--azul-vivo) 40%,var(--azul));box-shadow:inset 0 1px rgba(255,255,255,.45),0 10px 18px -10px var(--azul-vivo)}.pagina-pro .pro-app__ico .ico{width:22px;height:22px;color:#fff}.pagina-pro .pro-app h3{font-size:.94rem;margin:0 0 4px}.pagina-pro .pro-app p{font-size:.76rem;line-height:1.35;color:var(--texto-suave)}.pagina-pro .pro-app__dot{width:6px;height:6px;border-radius:50%;background:var(--celeste);box-shadow:0 0 12px var(--celeste);opacity:.65}

/* Hero Plataforma */
.pagina-pro .pro-console{width:min(560px,100%);border:1px solid rgba(120,170,225,.26);border-radius:18px;background:linear-gradient(165deg,#102a49,#06111f);box-shadow:0 34px 90px -35px #000;overflow:hidden;transform:perspective(1100px) rotateY(-5deg) rotateX(2deg);animation:pro-float 7s ease-in-out infinite}
.pagina-pro .pro-console__top{height:42px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--borde);background:rgba(120,170,225,.05)}.pagina-pro .pro-console__top>span{width:8px;height:8px;border-radius:50%;background:rgba(155,174,201,.25)}.pagina-pro .pro-console__top>span:first-child{background:var(--celeste)}.pagina-pro .pro-console__top b{margin-left:8px;font-size:.62rem;letter-spacing:.12em;color:var(--texto-suave)}
.pagina-pro .pro-console__body{display:grid;grid-template-columns:52px 1fr;height:308px}.pagina-pro .pro-console__body aside{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:18px;border-right:1px solid var(--borde);background:rgba(120,170,225,.03)}.pagina-pro .pro-console__body aside .ico{width:17px;height:17px;color:#7394b8}.pagina-pro .pro-console__body aside .ico:first-child{color:var(--celeste);filter:drop-shadow(0 0 8px rgba(79,195,255,.4))}.pagina-pro .pro-console__map{position:relative;overflow:hidden}.pagina-pro .pro-console__map img{width:100%;height:100%;object-fit:cover;opacity:.78}.pagina-pro .pro-pin{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--celeste);box-shadow:0 0 0 8px rgba(79,195,255,.12);animation:latido 2.4s infinite}.pagina-pro .pro-pin.p1{left:44%;top:40%}.pagina-pro .pro-pin.p2{left:64%;top:58%;animation-delay:.8s;background:#49e49e}.pagina-pro .pro-pin.p3{left:31%;top:67%;animation-delay:1.4s;background:#ffb45e}.pagina-pro .pro-unit{position:absolute;left:14px;top:14px;padding:10px 12px;background:rgba(4,12,24,.88);border:1px solid var(--borde);border-radius:9px;backdrop-filter:blur(8px)}.pagina-pro .pro-unit b{display:block;font-size:.72rem}.pagina-pro .pro-unit span{display:block;color:var(--celeste);font-size:1rem;font-weight:800;margin:3px 0}.pagina-pro .pro-unit small{color:var(--texto-suave);font-size:.61rem}.pagina-pro .pro-console__status{display:flex;gap:10px;padding:11px 14px;border-top:1px solid var(--borde);font-size:.65rem;color:var(--texto-suave)}.pagina-pro .pro-console__status span{display:flex;align-items:center;gap:5px}.pagina-pro .pro-console__status i{width:6px;height:6px;border-radius:50%;background:#49e49e}
.pagina-pro .pro-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(42px,6vw,80px);align-items:center}.pagina-pro .pro-split .seccion__cabecera{margin-bottom:0}
.pagina-pro .pro-livepanel{overflow:hidden;border-radius:18px;border:1px solid var(--borde-2);background:linear-gradient(160deg,#102a49,#06111f);box-shadow:var(--sombra)}.pagina-pro .pro-livepanel__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--borde);font-size:.68rem;color:var(--texto-suave)}.pagina-pro .pro-livepanel__head span{display:flex;align-items:center;gap:8px;letter-spacing:.1em}.pagina-pro .pro-livepanel__head i{width:7px;height:7px;border-radius:50%;background:#49e49e;box-shadow:0 0 10px #49e49e}.pagina-pro .pro-livepanel__head b{font-size:.68rem}.pagina-pro .pro-livepanel__map{height:240px;position:relative;overflow:hidden}.pagina-pro .pro-livepanel__map img{width:100%;height:100%;object-fit:cover}.pagina-pro .pro-livepanel__row{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:12px 16px;border-top:1px solid var(--borde);font-size:.75rem}.pagina-pro .pro-livepanel__row b{color:var(--celeste)}.pagina-pro .pro-livepanel__row em{font-style:normal;color:var(--texto-suave)}
.pagina-pro .pro-dashboard-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.pagina-pro .pro-dash{padding:20px;border:1px solid #d9e3ef;border-radius:18px;background:#fff;box-shadow:0 24px 60px -45px rgba(7,30,60,.5)}.pagina-pro .pro-dash header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding-bottom:14px;border-bottom:1px solid #e7edf4;color:var(--texto-oscuro)}.pagina-pro .pro-dash header .ico{width:20px;height:20px;color:var(--azul)}.pagina-pro .pro-dash header b{font-size:.9rem}.pagina-pro .pro-dash header span{font-size:.68rem;color:var(--texto-oscuro-suave)}.pagina-pro .pro-score{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;margin-top:14px}.pagina-pro .pro-score>span{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8f3ff;color:var(--azul);font-size:.62rem;font-weight:800}.pagina-pro .pro-score>b{grid-column:3;color:#0b7b55}.pagina-pro .pro-score>i{grid-column:2/4;height:5px;border-radius:4px;background:linear-gradient(90deg,var(--azul) var(--w),#e8eef5 var(--w));}.pagina-pro .pro-score>small{grid-column:2/4;color:var(--texto-oscuro-suave);font-size:.67rem}.pagina-pro .pro-score--warn>b{color:#c56a11}.pagina-pro .pro-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.pagina-pro .pro-kpi-grid div{padding:14px;border-radius:10px;background:#f5f8fc;border:1px solid #e3eaf3}.pagina-pro .pro-kpi-grid b{display:block;color:var(--texto-oscuro);font-size:1.08rem}.pagina-pro .pro-kpi-grid span{font-size:.66rem;color:var(--texto-oscuro-suave)}.pagina-pro .pro-okline{display:flex;align-items:center;gap:8px;margin-top:13px;font-size:.68rem;color:#16805a}.pagina-pro .pro-maint{display:grid;margin-top:8px}.pagina-pro .pro-maint span{display:flex;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid #e7edf4;color:var(--texto-oscuro);font-size:.75rem}.pagina-pro .pro-maint em{font-style:normal;color:#1b7b5c}.pagina-pro .pro-maint .warn em{color:#d26055;font-weight:700}
.pagina-pro .pro-tower{position:relative;overflow:hidden;padding:clamp(86px,10vw,140px) 0;background:#03070d}.pagina-pro .pro-tower__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(79,195,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(79,195,255,.04) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 80%)}.pagina-pro .pro-tower__int{position:relative;z-index:2;text-align:center}.pagina-pro .pro-tower h2{font-size:clamp(2.2rem,4.8vw,3.8rem);font-weight:800;letter-spacing:-.055em}.pagina-pro .pro-tower h2 span{color:var(--celeste)}.pagina-pro .pro-tower p{max-width:760px;margin:22px auto 0;color:var(--texto-suave);font-size:1.03rem}.pagina-pro .pro-tower__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:48px;border:1px solid var(--borde);border-radius:16px;overflow:hidden;background:var(--borde)}.pagina-pro .pro-tower__stats div{padding:28px 16px;background:rgba(7,17,32,.86)}.pagina-pro .pro-tower__stats b{display:block;font-size:1.8rem;color:#fff}.pagina-pro .pro-tower__stats span{display:block;margin-top:6px;font-size:.75rem;color:var(--texto-suave)}

/* Sectores */
.pagina-pro .pro-orbit{position:relative;width:min(440px,90vw);aspect-ratio:1}.pagina-pro .pro-orbit__ring{position:absolute;border:1px solid rgba(79,195,255,.24);border-radius:50%;inset:8%;animation:vuelta 24s linear infinite}.pagina-pro .pro-orbit__ring.r2{inset:24%;border-style:dashed;animation-duration:15s;animation-direction:reverse}.pagina-pro .pro-orbit__core{position:absolute;inset:36%;border-radius:28%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(155deg,#4fb4f8,var(--azul-vivo) 38%,var(--azul-hondo));box-shadow:0 0 50px rgba(8,128,224,.4),inset 0 1px rgba(255,255,255,.45);z-index:3}.pagina-pro .pro-orbit__core .ico{color:#fff;width:34px;height:34px}.pagina-pro .pro-orbit__core b{font-size:1.3rem;line-height:1;margin-top:8px}.pagina-pro .pro-orbit__core span{font-size:.57rem;letter-spacing:.1em}.pagina-pro .pro-orbit__node{position:absolute;width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(13,32,55,.92);border:1px solid rgba(79,195,255,.25);box-shadow:0 15px 30px -18px #000;z-index:2;animation:pro-float 6s ease-in-out infinite}.pagina-pro .pro-orbit__node .ico{color:var(--celeste);width:26px;height:26px}.pagina-pro .pro-orbit__node.n1{left:5%;top:20%}.pagina-pro .pro-orbit__node.n2{right:1%;top:26%;animation-delay:-1s}.pagina-pro .pro-orbit__node.n3{right:10%;bottom:13%;animation-delay:-2s}.pagina-pro .pro-orbit__node.n4{left:19%;bottom:4%;animation-delay:-3s}.pagina-pro .pro-orbit__node.n5{left:1%;bottom:32%;animation-delay:-4s}.pagina-pro .pro-orbit__node.n6{right:28%;top:1%;animation-delay:-5s}
.pagina-pro .pro-assets-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--borde);border-radius:20px;overflow:hidden;background:var(--borde)}.pagina-pro .pro-asset{position:relative;min-height:250px;padding:30px 26px;background:var(--azul-850);overflow:hidden;transition:background .3s,transform .3s}.pagina-pro .pro-asset::after{content:"";position:absolute;width:200px;height:200px;right:-100px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(8,128,224,.13),transparent 70%);transition:transform .35s}.pagina-pro .pro-asset:hover{background:#102743}.pagina-pro .pro-asset:hover::after{transform:scale(1.35)}.pagina-pro .pro-asset h3{font-size:1.07rem;margin-bottom:8px}.pagina-pro .pro-asset p{color:var(--texto-suave);font-size:.89rem;max-width:38ch}.pagina-pro .pro-asset__num{position:absolute;right:18px;top:17px;color:rgba(155,174,201,.25);font-weight:800;font-size:.8rem;letter-spacing:.1em}.pagina-pro .pro-asset__line{position:absolute;left:0;bottom:0;width:0;height:3px;background:linear-gradient(90deg,var(--azul-vivo),var(--celeste));transition:width .35s}.pagina-pro .pro-asset:hover .pro-asset__line{width:100%}.pagina-pro .pro-asset--cta{display:block;background:linear-gradient(145deg,#102743,#081629)}.pagina-pro .pro-asset--cta strong{display:flex;align-items:center;gap:8px;margin-top:18px;color:var(--celeste);font-size:.85rem}.pagina-pro .pro-asset--cta strong .ico{width:15px;height:15px}
.pagina-pro .pro-counters{padding:44px 0;background:linear-gradient(105deg,var(--azul-hondo),var(--azul),var(--azul-vivo));position:relative;overflow:hidden}.pagina-pro .pro-counters::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 180px at 50% 130%,rgba(255,255,255,.18),transparent 70%)}.pagina-pro .pro-counters__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.15);border-radius:16px;overflow:hidden}.pagina-pro .pro-counters__grid>div{padding:24px 16px;text-align:center;background:rgba(0,45,95,.25)}.pagina-pro .pro-counters b{display:block;font-size:clamp(1.5rem,3vw,2.2rem);color:#fff;letter-spacing:-.035em}.pagina-pro .pro-counters span{font-size:.77rem;color:rgba(255,255,255,.83)}
.pagina-pro .pro-receive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.pagina-pro .pro-receive{display:flex;align-items:flex-start;gap:13px;padding:20px;border:1px solid var(--borde);border-radius:14px;background:rgba(18,42,71,.5)}.pagina-pro .pro-receive>.ico{width:23px;height:23px;color:var(--celeste);margin-top:2px}.pagina-pro .pro-receive b{display:block;font-size:.9rem}.pagina-pro .pro-receive span{display:block;margin-top:4px;color:var(--texto-suave);font-size:.78rem}
.pagina-pro .pro-process{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.pagina-pro .pro-process__line{position:absolute;left:12%;right:12%;top:52px;height:2px;background:linear-gradient(90deg,var(--azul-vivo),var(--celeste));opacity:.35}.pagina-pro .pro-process article{position:relative;text-align:center;color:var(--texto-oscuro)}.pagina-pro .pro-process article>span{display:block;font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--azul);margin-bottom:8px}.pagina-pro .pro-process .hito__nodo{margin-bottom:18px}.pagina-pro .pro-process h3{font-size:1rem;margin-bottom:8px}.pagina-pro .pro-process p{font-size:.86rem;color:var(--texto-oscuro-suave)}

/* Nosotros */
.pagina-pro .pro-origin{position:relative;width:min(520px,100%);height:410px}.pagina-pro .pro-origin__line{position:absolute;left:50%;top:8%;bottom:8%;width:2px;background:linear-gradient(to bottom,transparent,var(--celeste),var(--azul),transparent);opacity:.5}.pagina-pro .pro-origin__step{position:absolute;display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:13px;align-items:center;width:220px;padding:15px;border:1px solid var(--borde);border-radius:14px;background:rgba(11,29,51,.86);box-shadow:0 20px 45px -30px #000;animation:pro-float 6s ease-in-out infinite}.pagina-pro .pro-origin__step span{grid-row:1/3;width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,#4fb4f8,var(--azul-vivo),var(--azul))}.pagina-pro .pro-origin__step span .ico{color:#fff;width:23px;height:23px}.pagina-pro .pro-origin__step b{font-size:.84rem}.pagina-pro .pro-origin__step small{color:var(--texto-suave);font-size:.68rem}.pagina-pro .pro-origin__step.s1{left:0;top:4%}.pagina-pro .pro-origin__step.s2{right:0;top:29%;animation-delay:-1.5s}.pagina-pro .pro-origin__step.s3{left:0;top:55%;animation-delay:-3s}.pagina-pro .pro-origin__step.s4{right:0;bottom:2%;animation-delay:-4.5s}
.pagina-pro .pro-split--about{align-items:start}.pagina-pro .pro-quote{position:relative;overflow:hidden;padding:42px 36px;border:1px solid var(--borde);border-radius:22px;background:linear-gradient(145deg,#102947,#07111f);box-shadow:var(--sombra)}.pagina-pro .pro-quote>span{position:absolute;right:18px;top:-18px;font-size:9rem;line-height:1;color:rgba(79,195,255,.09);font-family:Georgia,serif}.pagina-pro .pro-quote p{position:relative;font-size:1.35rem;line-height:1.5;font-weight:600;letter-spacing:-.025em;max-width:28ch}.pagina-pro .pro-quote b{display:block;margin-top:28px;font-size:.82rem;color:var(--celeste);letter-spacing:.08em}.pagina-pro .pro-quote small{display:block;color:var(--texto-suave);margin-top:3px}
.pagina-pro .pro-techcloud{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.pagina-pro .pro-techchip{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:17px 18px;border:1px solid var(--borde);border-radius:13px;background:rgba(18,42,71,.46)}.pagina-pro .pro-techchip>.ico{width:21px;height:21px;color:var(--celeste)}.pagina-pro .pro-techchip span{font-size:.88rem;font-weight:600}.pagina-pro .pro-techchip i{position:absolute;right:-8px;width:38px;height:38px;border:1px solid rgba(79,195,255,.15);border-radius:50%;box-shadow:0 0 0 8px rgba(79,195,255,.03)}
.pagina-pro .pro-innovation{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:28px}.pagina-pro .pro-innovation>div{padding:26px;border:1px solid var(--borde);border-radius:16px;background:linear-gradient(145deg,rgba(8,128,224,.1),rgba(18,42,71,.24))}.pagina-pro .pro-innovation .ico{color:var(--celeste);width:26px;height:26px}.pagina-pro .pro-innovation b{display:block;margin:13px 0 6px}.pagina-pro .pro-innovation p{color:var(--texto-suave);font-size:.86rem}
.pagina-pro .pro-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.pagina-pro .pro-pillars article{position:relative;padding:30px;border:1px solid #dae4ef;border-radius:18px;background:#fff;box-shadow:0 25px 70px -50px rgba(6,40,80,.5)}.pagina-pro .pro-pillars article>span{position:absolute;right:22px;top:20px;color:#b9c8d9;font-weight:800;font-size:.75rem}.pagina-pro .pro-pillars h3{color:var(--texto-oscuro);font-size:1.15rem;margin:18px 0 10px}.pagina-pro .pro-pillars p{color:var(--texto-oscuro-suave);font-size:.9rem}.pagina-pro .pro-pillars .tarjeta__ico{margin:0}
.pagina-pro .pro-vision{padding:clamp(90px,10vw,140px) 0;background:radial-gradient(circle at 82% 40%,rgba(8,128,224,.18),transparent 32%),linear-gradient(160deg,#06101e,#03070d);position:relative;overflow:hidden}.pagina-pro .pro-vision::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(79,195,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(79,195,255,.035) 1px,transparent 1px);background-size:58px 58px}.pagina-pro .pro-vision__int{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center}.pagina-pro .pro-vision h2{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;letter-spacing:-.055em;max-width:780px}.pagina-pro .pro-vision h2 span{color:var(--celeste)}.pagina-pro .pro-vision p{margin-top:20px;color:var(--texto-suave);max-width:67ch}.pagina-pro .pro-vision__mark{justify-self:center;width:250px;height:250px;border:1px solid var(--borde-2);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(8,128,224,.15),rgba(7,17,32,.7) 60%);box-shadow:0 0 0 18px rgba(79,195,255,.025),0 0 0 40px rgba(79,195,255,.015)}.pagina-pro .pro-vision__mark .ico{width:54px;height:54px;color:var(--celeste)}.pagina-pro .pro-vision__mark b{margin-top:14px;font-size:.8rem;letter-spacing:.12em}.pagina-pro .pro-vision__mark span{font-size:.63rem;color:var(--texto-suave);margin-top:4px}

/* Contacto */
.pagina-pro .pro-contact-radar{position:relative;width:min(430px,90vw);aspect-ratio:1}.pagina-pro .pro-contact-radar__rings,.pagina-pro .pro-contact-radar__rings i{position:absolute;inset:0;border:1px solid rgba(79,195,255,.18);border-radius:50%}.pagina-pro .pro-contact-radar__rings i:nth-child(1){inset:16%}.pagina-pro .pro-contact-radar__rings i:nth-child(2){inset:31%}.pagina-pro .pro-contact-radar__rings i:nth-child(3){inset:44%}.pagina-pro .pro-contact-radar__beam{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 70%,rgba(79,195,255,.22) 92%,transparent 100%);animation:vuelta 7s linear infinite}.pagina-pro .pro-contact-radar__core{position:absolute;inset:35%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(7,17,32,.95);border:1px solid rgba(79,195,255,.3);box-shadow:0 0 40px rgba(8,128,224,.3)}.pagina-pro .pro-contact-radar__core .ico{width:28px;height:28px;color:var(--celeste)}.pagina-pro .pro-contact-radar__core b{font-size:.73rem;margin-top:8px}.pagina-pro .pro-contact-radar__core span{font-size:.6rem;color:var(--texto-suave)}.pagina-pro .pro-contact-radar__badge{position:absolute;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--borde);border-radius:10px;background:rgba(11,29,51,.9);font-size:.7rem;box-shadow:0 15px 30px -20px #000;animation:pro-float 6s ease-in-out infinite}.pagina-pro .pro-contact-radar__badge .ico{width:16px;height:16px;color:var(--celeste)}.pagina-pro .pro-contact-radar__badge.b1{left:0;top:20%}.pagina-pro .pro-contact-radar__badge.b2{right:0;top:28%;animation-delay:-2s}.pagina-pro .pro-contact-radar__badge.b3{left:18%;bottom:5%;animation-delay:-4s}
.pagina-pro .pro-contact-section{background:linear-gradient(180deg,#f4f7fc,#eef3f9)}.pagina-pro .pro-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(38px,6vw,76px);align-items:start}.pagina-pro .pro-contact-info .seccion__cabecera{margin-bottom:28px}.pagina-pro .pro-contact-cards{display:grid;gap:10px}.pagina-pro .pro-contact-card{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:13px;padding:14px;border:1px solid #d8e3ef;border-radius:14px;background:#fff;color:var(--texto-oscuro);transition:transform .25s,border-color .25s,box-shadow .25s}.pagina-pro a.pro-contact-card:hover{transform:translateX(5px);border-color:#abc8e5;box-shadow:0 15px 35px -28px rgba(0,70,140,.55)}.pagina-pro .pro-contact-card>div{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#eaf4ff;color:var(--azul)}.pagina-pro .pro-contact-card>div .ico{width:22px;height:22px}.pagina-pro .pro-contact-card span b{display:block;font-size:.85rem}.pagina-pro .pro-contact-card span small{display:block;margin-top:2px;color:var(--texto-oscuro-suave);font-size:.72rem}.pagina-pro .pro-contact-card>.ico{width:17px;height:17px;color:#8da5bf}.pagina-pro .pro-coverage{margin-top:18px;overflow:hidden;border:1px solid #d8e3ef;border-radius:16px;background:#fff}.pagina-pro .pro-coverage__map{height:170px;position:relative;background:#08182e}.pagina-pro .pro-coverage__map img{width:100%;height:100%;object-fit:cover}.pagina-pro .pro-coverage>div:last-child{padding:18px}.pagina-pro .pro-coverage>div:last-child>span{font-size:.65rem;font-weight:800;letter-spacing:.15em;color:var(--azul)}.pagina-pro .pro-coverage b{display:block;color:var(--texto-oscuro);font-size:1.05rem;margin-top:4px}.pagina-pro .pro-coverage p{color:var(--texto-oscuro-suave);font-size:.8rem;margin-top:6px}
.pagina-pro .pro-form{border-radius:22px;padding:clamp(28px,4vw,42px);box-shadow:0 28px 75px -45px rgba(3,28,60,.45)}.pagina-pro .pro-form__head{margin-bottom:24px}.pagina-pro .pro-form__head .etiqueta{margin-bottom:10px}.pagina-pro .pro-form__head h3{font-size:1.5rem}.pagina-pro .pro-form__head p{margin-top:6px!important;margin-bottom:0!important}.pagina-pro .campo--trampa{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}

.pagina-pro .pro-franja{position:relative;overflow:hidden}.pagina-pro .pro-franja::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 50%,rgba(79,195,255,.12),transparent 25%),radial-gradient(circle at 82% 50%,rgba(8,128,224,.14),transparent 25%);pointer-events:none}.pagina-pro .pro-franja .franja__int{position:relative;z-index:1}

@keyframes pro-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes pro-breathe{0%,100%{opacity:.6;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes pro-scan{0%,100%{top:2%;opacity:0}15%{opacity:.6}50%{top:96%;opacity:.6}85%{opacity:.6}}

@media (max-width:1050px){
 .pagina-pro .pro-hero__int{grid-template-columns:1fr;min-height:auto}.pagina-pro .pro-hero__copy{max-width:800px}.pagina-pro .pro-hero__visual{min-height:380px}.pagina-pro .pro-grid--3{grid-template-columns:repeat(2,1fr)}.pagina-pro .pro-grid--4{grid-template-columns:repeat(2,1fr)}.pagina-pro .pro-app-grid{grid-template-columns:repeat(3,1fr)}.pagina-pro .pro-assets-grid{grid-template-columns:repeat(2,1fr)}.pagina-pro .pro-receive-grid{grid-template-columns:repeat(2,1fr)}.pagina-pro .pro-dashboard-showcase{grid-template-columns:1fr}.pagina-pro .pro-contact-grid{grid-template-columns:1fr}.pagina-pro .pro-contact-info{display:grid;grid-template-columns:1fr 1fr;gap:24px}.pagina-pro .pro-contact-info .seccion__cabecera{grid-column:1/-1}.pagina-pro .pro-coverage{margin-top:0}.pagina-pro .pro-vision__int{grid-template-columns:1fr}.pagina-pro .pro-vision__mark{justify-self:start}
}
@media (max-width:800px){
 .pagina-pro .pro-section{padding:68px 0}.pagina-pro .pro-hero{min-height:auto;padding-top:calc(var(--alto-cabecera) + 54px)}.pagina-pro .pro-hero__copy h1{font-size:clamp(2.2rem,10vw,3.45rem)}.pagina-pro .pro-hero__visual{min-height:330px}.pagina-pro .pro-grid--2,.pagina-pro .pro-grid--3,.pagina-pro .pro-duo,.pagina-pro .pro-split,.pagina-pro .pro-pillars,.pagina-pro .pro-innovation{grid-template-columns:1fr}.pagina-pro .pro-app-grid{grid-template-columns:repeat(2,1fr)}.pagina-pro .pro-techcloud{grid-template-columns:repeat(2,1fr)}.pagina-pro .pro-tower__stats,.pagina-pro .pro-counters__grid{grid-template-columns:repeat(2,1fr)}.pagina-pro .pro-process{grid-template-columns:1fr;gap:20px}.pagina-pro .pro-process__line{left:31px;right:auto;top:40px;bottom:40px;width:2px;height:auto}.pagina-pro .pro-process article{text-align:left;display:grid;grid-template-columns:62px 1fr;column-gap:18px}.pagina-pro .pro-process article>span{grid-column:2}.pagina-pro .pro-process .hito__nodo{grid-row:1/5;grid-column:1;margin:0}.pagina-pro .pro-process h3,.pagina-pro .pro-process p{grid-column:2}.pagina-pro .pro-contact-info{grid-template-columns:1fr}.pagina-pro .pro-origin{height:460px}.pagina-pro .pro-origin__step{width:205px}
}
@media (max-width:560px){
 .pagina-pro .pro-hero__acciones .btn{width:100%}.pagina-pro .pro-hero__trust{gap:10px 14px}.pagina-pro .pro-hero__visual{min-height:300px}.pagina-pro .pro-stack{transform:scale(.82);transform-origin:center}.pagina-pro .pro-console{transform:none}.pagina-pro .pro-app-grid,.pagina-pro .pro-assets-grid,.pagina-pro .pro-receive-grid,.pagina-pro .pro-techcloud{grid-template-columns:1fr}.pagina-pro .pro-counters__grid,.pagina-pro .pro-tower__stats{grid-template-columns:1fr 1fr}.pagina-pro .pro-contact-radar{transform:scale(.88)}.pagina-pro .pro-origin{transform:scale(.82);transform-origin:center;width:500px;left:50%;margin-left:-250px}.pagina-pro .pro-vision__mark{width:210px;height:210px}.pagina-pro .pro-form{padding:24px 20px}.pagina-pro .pro-feature-light{padding:26px 22px}.pagina-pro .pro-livepanel__head{align-items:flex-start;gap:8px;flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
 html:not(.movimiento-forzado) .pagina-pro .pro-hero__glow,html:not(.movimiento-forzado) .pagina-pro .pro-stack__card,html:not(.movimiento-forzado) .pagina-pro .pro-console,html:not(.movimiento-forzado) .pagina-pro .pro-orbit__node,html:not(.movimiento-forzado) .pagina-pro .pro-origin__step,html:not(.movimiento-forzado) .pagina-pro .pro-contact-radar__badge{animation:none!important}
}