@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)}

.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}

.marca{display:flex;align-items:center;flex:none}
.marca img{height:66px;width:auto}

.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;
}
.portada--inicio{min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--alto-cabecera) + 46px);padding-bottom:58px}
.portada__fondo{position:absolute;inset:0;pointer-events:none}
.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}

/* Puntos de prueba: lo que el visitante tiene que entender en dos segundos.
   En bloque de 2x2, que lee mejor que 3+1. */
.portada__pruebas{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 22px;margin-top:26px;max-width:620px;
}

.portada__pruebas li{
  display:flex;align-items:center;gap:9px;
  font-size:.94rem;font-weight:500;color:var(--texto);
}
.portada__pruebas .ico{width:19px;height:19px;stroke-width:2.6;color:var(--celeste);flex:none}

/* 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;
}
.senal__anillo:nth-of-type(3){animation-delay:1.15s}
.senal__anillo:nth-of-type(4){animation-delay:2.3s}
.senal__anillo:nth-of-type(5){animation-delay:3.45s}
@keyframes onda{
  0%{width:26%;height:26%;opacity:0}
  12%{opacity:.85}
  100%{width:100%;height:100%;opacity:0}
}
.senal__marca{
  position:relative;z-index:2;width:46%;height:auto;
  filter:drop-shadow(0 18px 42px rgba(8,128,224,.62));
}

/* 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)}

/* 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}
.pie__marca img{height:52px;width: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}
  .portada__pruebas{margin-top:18px;gap:8px 22px}
  .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}
  .senal{width:min(74%,300px)}
  .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)}

/* --- 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)}