/* ============================================================================
   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: 82px;

  --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: "Inter","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:46px;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;
}
.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:.42;cursor:not-allowed;filter:grayscale(.55)}
.btn.sin-configurar:hover,.flotante.sin-configurar:hover{transform:none;box-shadow:none}

/* == 5. PORTADAS =========================================================== */
.portada{
  position:relative;overflow:hidden;background:var(--negro);
  padding:calc(var(--alto-cabecera) + 70px) 0 84px;
}
.portada--inicio{min-height:100svh;display:flex;align-items:center}
.portada__fondo{position:absolute;inset:0;pointer-events:none}
.portada__rejilla{
  position:absolute;inset:-10% -10% 0;
  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{
  position:absolute;top:-28%;right:-12%;width:74vw;height:74vw;max-width:960px;max-height:960px;
  background:radial-gradient(circle,rgba(8,128,224,.22) 0%,rgba(79,195,255,.10) 40%,transparent 68%);
  filter:blur(14px);
}
.portada__radar{
  position:absolute;right:-7%;top:50%;transform:translateY(-50%);
  width:min(56vw,740px);color:rgba(79,195,255,.16);animation:girar 70s linear infinite;
}
@keyframes girar{to{transform:translateY(-50%) rotate(360deg)}}

.portada__int{position:relative;z-index:2;max-width:1000px}
.portada__titulo{font-size:clamp(2.25rem,5.2vw,3.85rem);letter-spacing:-.04em;font-weight:800}
.portada__bajada{margin-top:24px;font-size:clamp(1.02rem,1.8vw,1.2rem);color:var(--texto-suave);max-width:62ch}
.portada__acciones{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}

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

/* Migas de pan */
.migas{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--texto-suave);margin-bottom:18px}
.migas a:hover{color:var(--celeste)}
.migas .ico{width:15px;height:15px;opacity:.6}

/* Publico al que apunta (chips) */
.publicos{
  display:flex;flex-wrap:wrap;gap:11px;margin-top:44px;
  padding-top:30px;border-top:1px solid var(--borde);
}
.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))}

.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%}
.tarjeta__ico{
  display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
  border-radius:13px;margin-bottom:19px;color:var(--celeste);
  background:linear-gradient(150deg,rgba(8,128,224,.25),rgba(79,195,255,.12));
  border:1px solid rgba(79,195,255,.18);
}
.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)}
.seccion--clara .tarjeta__ico{
  color:var(--azul);background:linear-gradient(150deg,rgba(0,88,176,.13),rgba(79,195,255,.10));
  border-color:rgba(0,88,176,.14);
}

/* 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:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--azul),var(--azul-vivo));color:#fff;margin-bottom:20px;
}
.destacado__ico .ico{width:30px;height:30px}
.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 .ico{width:30px;height:30px;color:var(--celeste);margin-bottom:16px;stroke-width:1.6}
.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;
}
.flotante--wa{
  right:22px;bottom:22px;width:58px;height:58px;background:#25D366;color:#fff;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.65);
}
.flotante--wa svg{width:32px;height:32px}
.flotante--wa:hover{transform:scale(1.07)}
.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)}

@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}
  .destacado__visual,.panel,.maqueta{max-width:560px;margin-inline:auto;width:100%}
  .portada__radar{opacity:.5;right:-26%}
}
@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:38px}
  .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}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js-activo .anim{opacity:1;transform:none}
}
@media print{
  .cabecera,.flotante,.portada__fondo{display:none}
  body{background:#fff;color:#000}
}