/* Bastión Red sobre la plantilla Xpovio. Paleta y tipografías del Manual de Identidad Visual v1.0.
   Se carga después de main.min.css y pisa sus variables. */
:root{
  --primary-color:#991B1B;          /* Carmine Red: acento (era naranja) */
  --theme-bg:#0F172A;               /* Deep Slate: fondo */
  --black:#0F172A;
  --quaternary-color:#0F172A;
  --tertiary-color:#111C33;
  --septenary-color:#131F38;
  --senary-color:#172440;
  --octonary-color:#1E293B;         /* Network Slate: superficies */
  --secondary-color:#94A3B8;        /* texto secundario (Steel Gray aclarado para fondo oscuro) */
  --quinary-color:#CBD5E1;
  --nonary-color:#E2E8F0;
  --carmine-light:#D63C3C;
  --wa:#25D366;
  /* tipografía (24/09, elegida por Maxi): Outfit, redondeada y fina, en todo el sitio. La plantilla lee --inter / --theme-font */
  --inter:"Outfit",sans-serif;
  --theme-font:"Outfit",sans-serif;
}
body{background:var(--theme-bg);font-family:"Outfit",sans-serif;font-weight:300}
p,li{font-weight:300}
h1,h2,h3,h4,.h1,.h2,.h3,.title{font-family:"Outfit",sans-serif;font-weight:300;letter-spacing:.005em}
.banner__content h1{font-weight:400!important}
/* la plantilla fuerza negrita en títulos de sección y botones con selectores más específicos: se igualan al peso fino */
.title,.section__header .title,.section__content .title,.cmn-banner .title{font-weight:300!important}
.servicio-banner__titulo,.cmn-banner h1.title{font-weight:400!important}
.btn,button,.sub-title,strong,b{font-family:"Outfit",sans-serif}
.btn{font-weight:500!important}
/* la plantilla pone cada palabra en mayúscula (capitalize); el manual pide títulos en mayúsculas sostenidas */
.title,.section__header .title,.cmn-banner .title,.section__content .title{text-transform:uppercase!important}
.title *{text-transform:inherit!important}
/* SplitText parte el título en div > div > div; alguna regla de la plantilla los deja en capitalize: se fuerza con más especificidad */
.section__content .title div,.section__content .title div div,.section__content .title div div div,
.section__header .title div,.section__header .title div div,.section__header .title div div div,
.cmn-banner .title div,.cmn-banner .title div div,.cmn-banner .title div div div,
.banner__content h1 div,.banner__content h1 div div,.banner__content h1 div div div{text-transform:uppercase!important}
/* los títulos de la lista de servicios van en caja normal (son largos; en mayúsculas pesan demasiado) */
.offer__cta-single h2,.offer__cta-single h2 *{text-transform:none!important;font-size:clamp(26px,3vw,40px)}
/* títulos de los ítems numerados de servicios (23/09 pasaron de Montserrat a Inter; 24/09 todo el sitio a Outfit) */
.offer__cta-single h2,.offer__cta-single h2 a{font-family:"Outfit",sans-serif!important;font-weight:400!important;letter-spacing:0;font-size:clamp(24px,2.4vw,34px)!important;line-height:1.2}
h4,h5,.blog__single-content h4,.paso h4,.razon h5,.contacto__wa h5,.contact-main__form h3{text-transform:none}
h5,h6{font-family:"Outfit",sans-serif;font-weight:500}
.text-stroke{-webkit-text-stroke-color:var(--carmine-light)}

/* cabecera */
.navbar__logo img{width:300px;height:auto}
.offcanvas-menu__header .logo img{width:260px;height:auto}
.footer .logo img{width:320px;height:auto}
@media (max-width:767px){.navbar__logo img{width:220px}}
@media (max-width:479px){.navbar__logo img{width:180px}}

.banner{position:relative}
.banner .container{position:relative;z-index:1}
.banner .star,.banner .banner-social-text{z-index:1}
.navbar__options{display:flex;align-items:center;gap:16px}
.primary-navbar{transition:background .4s,box-shadow .4s}
/* cabecera CLARA al bajar: fondo blanco, logo con sus colores originales, WhatsApp y escudo del menú en los colores de la marca */
.primary-navbar .logo-color,.primary-navbar .escudo-menu--color{display:none}
.primary-navbar.clara{background:#FFFFFF!important;box-shadow:0 6px 24px rgba(15,23,42,.14)}
.primary-navbar.clara .logo-blanco,.primary-navbar.clara .escudo-menu--blanco{display:none}
.primary-navbar.clara .logo-color,.primary-navbar.clara .escudo-menu--color{display:block}
.primary-navbar.clara .btn-wa{color:#8A1B28;border-color:#8A1B28;background:transparent}
.primary-navbar.clara .btn-wa:hover{background:#8A1B28;color:#fff}
.primary-navbar.clara .open-offcanvas-nav:hover .escudo-menu{filter:drop-shadow(0 0 10px rgba(138,27,40,.45))}
/* botón del menú: escudo de perímetro en vez del punto; el aro y el efecto al pasar quedan igual */
.open-offcanvas-nav::before{display:none}
.open-offcanvas-nav,.secondary--navbar .open-offcanvas-nav{padding:0;background:transparent;border:none!important;width:auto;min-width:0;height:auto;border-radius:0}
.escudo-menu{width:50px;height:auto;display:block;opacity:.95;transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .3s,opacity .3s}
.open-offcanvas-nav:hover{background:transparent}
.open-offcanvas-nav:hover .escudo-menu{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(214,60,60,.7))}
.btn-wa{gap:8px}
.btn-wa i{font-size:1.15em}
/* botón de WhatsApp de la cabecera más chico (Maxi 24/09: "muy grande") */
.navbar__options .btn-wa{padding:8px 18px!important;font-size:13px!important;min-height:0;line-height:1.2;gap:6px;letter-spacing:.04em}
.navbar__options .btn-wa i{font-size:1em}
/* botón del menú con la palabra "Menú" al lado del escudo: con el escudo solo, nadie sabía que ahí estaba el menú (Maxi, 23/09) */
.open-offcanvas-nav{align-items:center;gap:10px}
.menu-texto{font-family:"Outfit",sans-serif;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:#fff;transition:color .3s}
.open-offcanvas-nav:hover .menu-texto{color:var(--carmine-light)}
.primary-navbar.clara .menu-texto{color:#8A1B28}
/* cabecera blanca más baja (Maxi: "que sea un poco menos ancha"): de 140 a ~90 px */
.primary-navbar{transition:background .4s,box-shadow .4s,padding .35s}
.primary-navbar.clara{padding:14px 0}
.navbar__logo img{transition:width .35s}
.primary-navbar.clara .navbar__logo img{width:230px}
.primary-navbar.clara .escudo-menu{width:42px}
@media (max-width:767px){.primary-navbar.clara .navbar__logo img{width:180px}}
@media (max-width:479px){.menu-texto{font-size:12px;letter-spacing:.1em}.primary-navbar.clara .navbar__logo img{width:160px}}

/* portada: huella digital propia (idea de Datawise, dibujo nuestro). Las crestas se dibujan solas (animación dentro del SVG);
   acá va la inclinación en 3D, el brillo carmín y una respiración lenta. Candado desenfocado atrás, como segundo plano. */
/* título de portada: "INFRAESTRUCTURA" se partía en 2 (ya pasaba en producción con el escudo): más chico y sin cortes de palabra */
.banner__content h1{font-size:clamp(40px,6vw,104px)!important;line-height:1.08}
.banner__content h1 .interval{white-space:nowrap}
@media (max-width:575px){.banner__content h1{font-size:7.3vw!important}.banner__content h1 .interval i{display:none}}
.huella-portada{position:absolute;right:5%;top:150px;width:min(34vw,470px);opacity:.72;z-index:0;pointer-events:none;perspective:1200px}
.huella-portada__img{display:block;width:100%;height:auto;transform:rotateY(-28deg) rotateX(14deg) rotate(-9deg);transform-origin:60% 50%;
  filter:blur(2.2px) drop-shadow(0 0 16px rgba(214,60,60,.45)) drop-shadow(0 0 60px rgba(153,27,27,.35));
  animation:huella-respira 9s ease-in-out 2.5s infinite alternate}
@keyframes huella-respira{from{filter:blur(2.2px) drop-shadow(0 0 16px rgba(214,60,60,.45)) drop-shadow(0 0 60px rgba(153,27,27,.35))}
  to{filter:blur(2.2px) drop-shadow(0 0 24px rgba(214,60,60,.7)) drop-shadow(0 0 90px rgba(153,27,27,.5))}}
.huella-portada__candado{position:absolute;right:-6%;bottom:-2%;width:30%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  border:10px solid rgba(214,60,60,.55);color:rgba(214,60,60,.8);font-size:clamp(28px,4vw,60px);filter:blur(3px);opacity:.55;
  box-shadow:0 0 40px rgba(214,60,60,.35),inset 0 0 30px rgba(214,60,60,.3);transform:rotateY(-35deg) rotateX(20deg)}
@media (max-width:991px){.huella-portada{width:70vw;right:-12%;top:90px;opacity:.45}.huella-portada__candado{display:none}}
@media (prefers-reduced-motion:reduce){.huella-portada__img{animation:none}}

/* ¿qué estás buscando? (idea de Datawise): botones con borde que se llenan de carmín al pasar */
.buscando{padding:70px 0 20px;position:relative;z-index:1}
.buscando__titulo{text-align:center;font-size:clamp(26px,3vw,40px);margin-bottom:34px;text-transform:none}
.buscando__lista{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:1040px;margin:0 auto}
.buscando__item{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.22);isolation:isolate;
  color:#fff;font-weight:600;font-size:16px;text-decoration:none;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.buscando__item::before{content:"";position:absolute;inset:0;background:var(--primary-color);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1);z-index:-1}
.buscando__item i{color:var(--carmine-light);transition:color .3s}
.buscando__item:hover{color:#fff;border-color:var(--carmine-light);box-shadow:0 0 26px rgba(214,60,60,.35);transform:translateY(-2px)}
.buscando__item:hover::before{transform:scaleX(1)}
.buscando__item:hover i{color:#fff}
.buscando__item--urgente{border-color:var(--carmine-light);background:rgba(153,27,27,.18)}

/* mapa del perímetro: escudo al centro, 8 frentes alrededor unidos por líneas por las que "viaja" señal */
.mapa{overflow:hidden}
.mapa__red{position:relative;height:760px;margin-top:40px}
.mapa__lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mapa__linea{stroke:rgba(214,60,60,.35);stroke-width:1.5;stroke-dasharray:4 7;animation:mapa-senal 1.6s linear infinite;transition:stroke .3s,stroke-width .3s}
.mapa__linea.activa{stroke:#F0584F;stroke-width:2.5;stroke-dasharray:none;filter:drop-shadow(0 0 6px rgba(240,88,79,.9))}
@keyframes mapa-senal{to{stroke-dashoffset:-22}}
.mapa__centro{position:absolute;left:50%;top:50%;width:190px;transform:translate(-50%,-50%);z-index:2}
/* los circuitos del isologo sobresalen a la izquierda: el cuerpo del escudo está 8,3 % del ancho a la derecha del centro de la imagen
   (medido en canvas, 23/09). Se corre para que el centro del ESCUDO coincida con el de las líneas y el pulso. */
.mapa__centro img{position:relative;width:100%;height:auto;transform:translateX(-8.3%);filter:drop-shadow(0 0 22px rgba(138,27,40,.6)) drop-shadow(0 0 60px rgba(138,27,40,.35));transition:filter .4s}
.mapa__red.con-foco .mapa__centro img{filter:drop-shadow(0 0 30px rgba(214,60,60,.85)) drop-shadow(0 0 90px rgba(153,27,27,.55))}
.mapa__pulso{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;border:1px solid rgba(214,60,60,.45);animation:mapa-pulso 3.2s ease-out infinite}
.mapa__pulso--2{animation-delay:1.6s}
@keyframes mapa-pulso{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}
.mapa__nodo{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:220px;padding:18px 18px 16px;border-radius:12px;text-align:center;z-index:3;
  background:var(--octonary-color);border:1px solid rgba(255,255,255,.08);cursor:default;outline:none;
  transition:border-color .3s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.mapa__nodo:hover,.mapa__nodo:focus-visible{border-color:rgba(214,60,60,.6);box-shadow:0 0 34px rgba(153,27,27,.4),inset 0 0 0 1px rgba(214,60,60,.25);transform:translate(-50%,-50%) scale(1.05)}
.mapa__icono{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:10px;background:rgba(153,27,27,.18);color:var(--carmine-light);font-size:20px;transition:background .3s,color .3s,box-shadow .3s}
.mapa__nodo:hover .mapa__icono,.mapa__nodo:focus-visible .mapa__icono{background:var(--primary-color);color:#fff;box-shadow:0 0 18px rgba(214,60,60,.6)}
.mapa__nodo h4{font-size:17px;line-height:1.25;margin:0 0 6px;color:#fff;text-transform:none}
.mapa__nodo p{font-size:14px;line-height:1.45;margin:0;color:var(--secondary-color)}
@media (max-width:1199px){.mapa__nodo{width:190px;padding:14px}.mapa__red{height:720px}}
@media (max-width:991px){
  .mapa__red{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:230px}
  .mapa__lineas{display:none}
  .mapa__centro{top:100px;width:140px}
  .mapa__pulso{width:170px;height:170px;margin:-85px 0 0 -85px}
  .mapa__nodo{position:relative;left:auto;top:auto;transform:none;width:auto}
  .mapa__nodo:hover,.mapa__nodo:focus-visible{transform:none}
}
@media (max-width:479px){.mapa__red{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mapa__linea,.mapa__pulso{animation:none}}

/* números + tecnologías con las que trabajamos */
.numeros{background:var(--octonary-color);position:relative}
.numeros__grilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.numeros__item{padding:8px 0 8px 22px;border-left:3px solid var(--primary-color)}
.numeros__n{display:block;font-family:"Outfit",sans-serif;font-weight:300;font-size:clamp(44px,5vw,68px);line-height:1;color:#fff;text-shadow:0 0 24px rgba(214,60,60,.35)}
.numeros__n span{font:inherit;color:inherit;line-height:inherit}
.numeros__item p{margin:10px 0 0;color:var(--secondary-color);font-size:15px;line-height:1.5}
.marcas{margin-top:80px}
.marcas__cinta{margin-top:22px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marcas__pista{display:flex;width:max-content;gap:18px;animation:marcas-cinta 45s linear infinite}
.marcas__cinta:hover .marcas__pista{animation-play-state:paused}
@keyframes marcas-cinta{to{transform:translateX(calc(-50% - 9px))}}
.marca{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:var(--theme-bg);white-space:nowrap;
  transition:border-color .3s,box-shadow .3s}
.marca__icono{width:28px;height:28px;background:#94A3B8;-webkit-mask:var(--icono) center/contain no-repeat;mask:var(--icono) center/contain no-repeat;transition:background .3s}
.marca__nombre{font-family:"Outfit",sans-serif;font-weight:500;font-size:17px;color:#CBD5E1;transition:color .3s}
.marca:hover{border-color:var(--c);box-shadow:0 0 22px color-mix(in srgb,var(--c) 35%,transparent)}
.marca:hover .marca__icono{background:var(--c)}
.marca:hover .marca__nombre{color:#fff}
.marcas__cinta+.marcas__cinta{margin-top:16px}
.marcas__cinta--inversa .marcas__pista{animation-direction:reverse;animation-duration:55s}
@media (prefers-reduced-motion:reduce){.marcas__pista{animation:none;flex-wrap:wrap;width:auto}}

/* urgencias (24/09, Maxi: "que se destaque más, estilo naranja, con degradé, que llame la atención y sobresalga en importancia") */
/* 24/09 2da vuelta: "el naranja es muy fuerte… un naranja con filtro degradé como las fotos, no tan brillante" ⇒ misma receta que .foto-tono:
   base pizarra que en diagonal se va a un naranja quemado apagado, más un resplandor naranja tenue */
.urgencias{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#0F172A 0%,#1E293B 38%,#5A2311 72%,#7C2D12 88%,#8A3514 100%);background-size:180% 180%;
  animation:urgencias-fondo 16s ease-in-out infinite alternate;box-shadow:inset 0 1px 0 rgba(251,146,60,.18),inset 0 -1px 0 rgba(251,146,60,.12)}
.urgencias::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 50% at 88% 35%,rgba(234,88,12,.28),transparent 70%),radial-gradient(30% 40% at 60% 110%,rgba(185,28,28,.22),transparent 70%)}
@keyframes urgencias-fondo{from{background-position:0% 50%}to{background-position:100% 50%}}
.urgencias .title{max-width:16ch;color:#fff!important;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.urgencias .paragraph p{color:#E2E8F0!important;font-weight:300}
/* "Casos urgentes": píldora naranja con una luz que late */
.urgencias .sub-title{background:rgba(234,88,12,.12);border-color:rgba(251,146,60,.55)!important;color:#FDBA74!important;display:inline-flex;align-items:center;gap:10px}
.urgencias .sub-title::before{content:"";width:9px;height:9px;border-radius:50%;background:#FB923C;box-shadow:0 0 0 0 rgba(251,146,60,.8);animation:urgencias-luz 1.6s ease-out infinite}
.urgencias .sub-title i{color:#FDBA74!important}
@keyframes urgencias-luz{0%{box-shadow:0 0 0 0 rgba(251,146,60,.8)}100%{box-shadow:0 0 0 12px rgba(251,146,60,0)}}
/* el botón: blanco sobre el naranja, con halo que pulsa */
.btn-urgente{background:#fff!important;border-color:#fff!important;color:#991B1B!important;font-weight:600!important;animation:urgencias-halo 2.4s ease-out infinite}
.btn-urgente:hover{background:#FFF7ED!important;border-color:#FFF7ED!important;color:#7F1D1D!important;transform:translateY(-2px)}
.btn-urgente i{margin-right:8px;color:#16A34A}
@keyframes urgencias-halo{0%{box-shadow:0 0 0 0 rgba(251,146,60,.45)}70%,100%{box-shadow:0 0 0 18px rgba(251,146,60,0)}}
/* "mientras tanto": tarjeta oscura semitransparente sobre el degradé */
.urgencias__pasos{background:rgba(15,23,42,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
  border-left:4px solid #FDBA74;border-radius:0 12px 12px 0;padding:26px 28px 18px 30px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.urgencias__pasos h5{margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:#FDBA74}
.urgencias__pasos ol{margin:0;padding-left:20px;color:#F1F5F9}
.urgencias__pasos li{margin-bottom:10px;line-height:1.55}
.urgencias__pasos li::marker{color:#FDBA74;font-weight:600}
.urgencias .lines .line{border-color:rgba(255,255,255,.08)}
/* ícono de alerta al lado del título */
.urgencias__titulo{display:flex;align-items:flex-start;gap:22px;margin-bottom:28px}
.urgencias__titulo .title{margin:0}
.urgencias__alerta{flex:0 0 auto;display:grid;place-items:center;width:clamp(54px,5vw,74px);height:clamp(54px,5vw,74px);margin-top:.35em;border-radius:50%;
  background:rgba(234,88,12,.16);border:1px solid rgba(251,146,60,.55);color:#FB923C;font-size:clamp(24px,2.3vw,34px);
  box-shadow:0 0 24px rgba(234,88,12,.35);animation:urgencias-alerta 2s ease-out infinite}
.urgencias__alerta i{filter:drop-shadow(0 0 8px rgba(251,146,60,.6))}
@keyframes urgencias-alerta{0%{box-shadow:0 0 0 0 rgba(251,146,60,.55),0 0 24px rgba(234,88,12,.35)}70%,100%{box-shadow:0 0 0 16px rgba(251,146,60,0),0 0 24px rgba(234,88,12,.35)}}
@media (max-width:575px){.urgencias__titulo{gap:14px}}
@media (prefers-reduced-motion:reduce){.urgencias,.urgencias .sub-title::before,.btn-urgente,.urgencias__alerta{animation:none}}

/* la seguridad va primero */
.agency__thumb img{object-fit:cover;border-radius:6px}
.puntos{list-style:none;padding:0;margin:28px 0 8px;display:grid;gap:14px}
.puntos li{padding-left:18px;border-left:3px solid var(--primary-color);color:var(--quinary-color)}
.puntos strong{display:block;color:#fff;font-weight:600;margin-bottom:2px}

/* servicios: sin fotos flotantes. Al pasar el mouse la fila se llena desde la izquierda, el número se pinta y el título se corre. */
.offer__cta-single{position:relative;overflow:hidden;padding-left:20px;padding-right:20px;border-radius:8px;transition:transform .35s}
.offer__cta-single::before{content:"";position:absolute;inset:0;background:var(--octonary-color);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:0}
.offer__cta-single:hover::before{transform:scaleX(1)}
/* brillo neón suave detrás de la fila (pedido de Maxi: "algún brillo, no muy marcado") */
.offer__cta-single::after{content:"";position:absolute;inset:0;border-radius:8px;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(60% 120% at 0% 50%,rgba(214,60,60,.28) 0%,rgba(214,60,60,.08) 45%,transparent 75%);
  box-shadow:0 0 34px rgba(153,27,27,.28),inset 0 0 0 1px rgba(214,60,60,.22);transition:opacity .5s}
.offer__cta-single:hover::after{opacity:1}
.offer__cta-single:hover .sub-title{text-shadow:0 0 12px rgba(214,60,60,.65)}
.offer__cta-single>*{position:relative;z-index:1}
.offer__cta-single .sub-title{transition:color .3s}
.offer__cta-single:hover .sub-title{color:var(--carmine-light)}
.offer__cta-single h2 a{transition:transform .4s cubic-bezier(.2,.7,.2,1),color .3s;display:inline-block}
.offer__cta-single:hover h2 a{transform:translateX(12px)}
.offer__cta-single h2 a i{transition:transform .4s}
.offer__cta-single:hover h2 a i{transform:rotate(45deg)}
/* la plantilla mueve el 3er hijo de cada servicio siguiendo al mouse y lo gira 15° (era su foto flotante, main.js punto 12):
   ese lugar ahora es la descripción y quedaba torcida y corrida al sacar el mouse (Maxi, 23/09). Siempre quieta. */
.offer__cta-single .offer__desc{transform:none!important;position:relative!important;left:auto!important;top:auto!important}
/* títulos de servicios en blanco (la sección .light de la plantilla los dejaba gris oscuro) */
.offer .offer__cta-single h2 a{color:#fff!important}
.offer .offer__cta-single:hover h2 a{color:var(--carmine-light)!important}
.offer__desc{margin-top:10px;color:var(--secondary-color);font-size:15px;max-width:48ch;transition:color .3s}
.offer__cta-single:hover .offer__desc{color:var(--nonary-color);opacity:1!important;visibility:visible!important;transform:none!important}

/* la seguridad va primero: una sola foto, limpia */
.seguridad__foto{position:relative;border-radius:8px;overflow:hidden;max-width:520px}
.seguridad__foto img{display:block;width:100%;height:auto;aspect-ratio:451/585;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.seguridad__foto:hover img{transform:scale(1.04)}
/* fotos en el tono de la página (Maxi, 23/09, idea de Insside): blanco y negro + tinte pizarra → carmín. Sólo CSS: el archivo queda intacto.
   Clase reutilizable .foto-tono para cualquier foto nueva (el contenedor necesita position:relative y overflow:hidden). */
.foto-tono,.seguridad__foto{isolation:isolate}
.foto-tono img,.seguridad__foto img{filter:grayscale(1) contrast(1.12) brightness(.9)}
.foto-tono::before,.seguridad__foto::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(160deg,#1E293B 0%,#0F172A 45%,#991B1B 100%);mix-blend-mode:color;transition:opacity .5s}
.foto-tono::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.55))}
.seguridad__foto::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--primary-color);z-index:2}

/* videos: tarjetas con reproductor nativo; la vertical entra en el mismo alto */
.videos{background:var(--octonary-color)}
.video-card{height:100%;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:12px;background:var(--theme-bg);border:1px solid rgba(255,255,255,.07);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s}
.video-card:hover{transform:translateY(-4px);border-color:rgba(214,60,60,.35)}
.video-card__marco{position:relative;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9}
.video-card__marco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--primary-color);pointer-events:none}
.video-card video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.video-card--vertical .video-card__marco{aspect-ratio:16/9}
.video-card h4{margin:6px 0 0;font-size:20px;text-transform:none}
.video-card p{margin:0;color:var(--secondary-color);font-size:15px;line-height:1.55}

/* cómo trabajamos / por qué */
.paso{padding:32px 28px;border:1px solid rgba(255,255,255,.08);border-radius:8px;height:100%;transition:border-color .3s,transform .3s}
.paso:hover{border-color:var(--primary-color);transform:translateY(-4px)}
.paso__n{display:block;font-family:"Outfit",sans-serif;font-weight:300;font-size:44px;color:var(--primary-color);line-height:1;margin-bottom:14px}
.paso h4{margin-bottom:10px}
.paso p{color:var(--secondary-color);margin:0}
.porque{margin-top:64px}
.porque h3{margin:8px 0 24px;text-transform:uppercase}
.razon{padding-left:20px;border-left:3px solid var(--primary-color)}
.razon h5{margin-bottom:8px}
.razon p{color:var(--secondary-color);margin:0}

/* artículos: tarjetas sin foto, con frente propio y efecto (pedido de Maxi) */
.tarjeta-front{text-align:left;position:relative;display:flex;flex-direction:column;gap:12px;height:100%;padding:36px 32px 32px;border-radius:10px;overflow:hidden;
  background:var(--octonary-color);border:1px solid rgba(255,255,255,.07);text-decoration:none;color:inherit;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .35s}
.tarjeta-front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--primary-color);transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tarjeta-front::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;border-radius:10px;
  background:radial-gradient(70% 110% at 0% 0%,rgba(214,60,60,.22) 0%,rgba(214,60,60,.06) 45%,transparent 75%);
  box-shadow:0 0 34px rgba(153,27,27,.28),inset 0 0 0 1px rgba(214,60,60,.22);transition:opacity .5s}
.tarjeta-front:hover{transform:translateY(-6px);border-color:rgba(214,60,60,.35)}
.tarjeta-front:hover::before{transform:scaleY(1)}
.tarjeta-front:hover::after{opacity:1}
.tarjeta-front>*{position:relative;z-index:1}
.tarjeta-front__n{font-family:"Outfit",sans-serif;font-weight:300;font-size:56px;line-height:1;color:rgba(255,255,255,.08);position:absolute;right:24px;top:18px;z-index:0;transition:color .4s}
.tarjeta-front:hover .tarjeta-front__n{color:rgba(214,60,60,.35);text-shadow:0 0 18px rgba(214,60,60,.35)}
.tarjeta-front__meta{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--carmine-light);font-weight:600}
.tarjeta-front__meta i{font-size:11px;margin:0 4px}
.tarjeta-front h4{margin:0;font-size:clamp(20px,1.6vw,24px);line-height:1.3;color:#fff;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.tarjeta-front:hover h4{transform:translateX(6px)}
.tarjeta-front p{margin:0;color:var(--secondary-color);font-size:15px;line-height:1.6;flex:1}
.tarjeta-front__leer{margin-top:8px;font-weight:600;color:#fff;font-size:15px}
.tarjeta-front__leer i{margin-left:6px;color:var(--carmine-light);transition:transform .4s}
.tarjeta-front:hover .tarjeta-front__leer i{transform:translate(3px,-3px)}
.blog .row.gaper>[class*="col-"]{display:flex}
.cmn-banner{background:var(--octonary-color)}
.blog-details__content.articulo{font-size:18px;line-height:1.7;color:var(--quinary-color)}
.blog-details__content.articulo .lead{font-size:21px;color:#fff;margin-bottom:28px}
.blog-details__content.articulo h2{font-size:26px;margin:36px 0 12px;color:#fff}
.blog-details__content.articulo p{margin-bottom:18px}
.blog-details__content.articulo ul,.blog-details__content.articulo ol{padding-left:24px;margin-bottom:18px}
.blog-details__content.articulo li{margin-bottom:8px}
.blog-details__content.articulo strong{color:#fff}
.articulo__cierre{margin-top:48px;padding:28px;border-left:4px solid var(--primary-color);background:var(--octonary-color);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.articulo__cierre p{margin:0;color:#fff;font-weight:600}

/* contacto: formulario propio (el de la plantilla dependía de su página de contacto y quedaba roto) */
.contacto .contact-main__form{background:var(--octonary-color);padding:44px 40px 40px;border-radius:12px;border:1px solid rgba(255,255,255,.07)}
.contacto .contact-main__form h3{margin-bottom:28px;font-size:26px}
.contacto .group-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.contacto .group-wrapper .group-input{width:auto;margin:0}
.contacto .group-input{width:100%;margin-bottom:18px}
.contacto .group-input input,.contacto .group-input textarea{display:block;width:100%;background:var(--theme-bg);border:1px solid rgba(255,255,255,.12);border-radius:8px;
  padding:16px 18px;color:#fff;font-size:16px;line-height:1.4;transition:border-color .25s,box-shadow .25s}
.contacto .group-input textarea{min-height:150px;resize:vertical}
.contacto .group-input input::placeholder,.contacto .group-input textarea::placeholder{color:#64748B}
.contacto .group-input input:focus,.contacto .group-input textarea:focus{outline:none;border-color:var(--carmine-light);box-shadow:0 0 0 3px rgba(214,60,60,.18)}
.contacto .form-cta{margin-top:6px}
.contacto .form-cta .btn{width:100%;justify-content:center;background:var(--primary-color);border:1px solid var(--primary-color);color:#fff!important}
.contacto .form-cta .btn::before{display:none}
.contacto .form-cta .btn:hover{background:#7A1515;border-color:#7A1515}
@media (max-width:575px){.contacto .group-wrapper{grid-template-columns:1fr}.contacto .contact-main__form{padding:32px 22px}}
/* WhatsApp: verde siempre, sin el relleno rojo de la plantilla al pasar el mouse */
.btn-wa::before{display:none!important}
.contacto__wa .btn-wa{background:var(--wa);border-color:var(--wa);color:#0B1F14!important}
.contacto__wa .btn-wa:hover{background:#1DB954;border-color:#1DB954;color:#0B1F14!important;transform:translateY(-2px)}
.btn-urgente::before{display:none!important}
.contacto__wa{margin-top:32px;padding:28px;background:var(--octonary-color);border-left:4px solid var(--wa);border-radius:0 8px 8px 0}
.contacto__wa h5{margin-bottom:8px}
.contacto__wa p{color:var(--secondary-color)}
.contacto__wa .btn-wa{margin-top:10px;background:var(--wa);border-color:var(--wa);color:#0B1F14}
.contacto__wa .btn-wa:hover{background:#1DB954;border-color:#1DB954}
.contacto__correo{margin:18px 0 0}
.contacto__correo a{color:#fff}
.contact-main__form h3{margin-bottom:24px}
.oculto{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.estado{margin-top:14px;min-height:1.4em;color:var(--secondary-color)}
.estado.ok{color:#4ADE80}
.estado.error{color:var(--carmine-light)}

/* pie */
.footer__single-meta span{display:block;color:var(--quinary-color)}
.footer__single-meta i{margin-right:8px;color:var(--primary-color)}

/* ---------- páginas de servicio (/servicios/<nombre>, etapa 2, 24/09) ---------- */
.servicio-banner__kicker{display:inline-block;margin-bottom:14px}
.servicio-banner__titulo{font-size:clamp(34px,4.6vw,68px);line-height:1.08;margin:0;color:#fff;animation:servicio-entra .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes servicio-entra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.servicio-banner__titulo{animation:none}}
.servicio-banner__bajada{max-width:720px;margin:18px 0 26px;color:var(--quinary-color);font-size:clamp(16px,1.3vw,19px);line-height:1.6}
.servicio-banner__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.servicio-banner__cta .btn-wa{background:var(--wa);border-color:var(--wa);color:#0B1F14!important}
.servicio-banner__cta .btn-wa::before{display:none}
.servicio-banner__cta .btn-wa:hover{background:#1DB954;border-color:#1DB954;transform:translateY(-2px)}
@media (max-width:991px){.servicio-banner__bajada{margin-left:auto;margin-right:auto}.servicio-banner__cta{justify-content:center}}

/* situaciones: tarjeta con alerta a la izquierda */
.situacion{display:flex;gap:18px;align-items:flex-start;height:100%;padding:26px 26px 24px;border-radius:10px;background:var(--octonary-color);
  border:1px solid rgba(255,255,255,.08);transition:border-color .3s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.situacion:hover{border-color:rgba(214,60,60,.5);box-shadow:0 0 30px rgba(153,27,27,.3);transform:translateY(-4px)}
.situacion__icono{flex:0 0 auto;margin-top:4px;font-size:20px;color:var(--carmine-light)}
.situacion h4{font-family:"Outfit",sans-serif;font-weight:500;font-size:19px;line-height:1.3;margin:0 0 8px;color:#fff;text-transform:none}
.situacion p{margin:0;color:var(--secondary-color);font-size:15px;line-height:1.6}

/* qué incluye: mismas tarjetas que los nodos del mapa, en grilla */
.incluye{height:100%;padding:28px 22px 24px;border-radius:12px;text-align:center;background:var(--octonary-color);border:1px solid rgba(255,255,255,.08);outline:none;
  transition:border-color .3s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.incluye:hover,.incluye:focus-visible{border-color:rgba(214,60,60,.6);box-shadow:0 0 34px rgba(153,27,27,.4),inset 0 0 0 1px rgba(214,60,60,.25);transform:translateY(-6px)}
.incluye:hover .mapa__icono,.incluye:focus-visible .mapa__icono{background:var(--primary-color);color:#fff;box-shadow:0 0 18px rgba(214,60,60,.6)}
.incluye h4{font-family:"Outfit",sans-serif;font-weight:500;font-size:18px;line-height:1.3;margin:0 0 8px;color:#fff;text-transform:none}
.incluye p{margin:0;color:var(--secondary-color);font-size:15px;line-height:1.55}

/* los 8 frentes en lista compacta (auditoría) */
.servicio-mapa{margin-top:56px}
.servicio-mapa__grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:18px}
.servicio-mapa__item{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-left:3px solid var(--primary-color);background:rgba(30,41,59,.55);border-radius:0 8px 8px 0}
.servicio-mapa__item i{color:var(--carmine-light);font-size:17px;margin-top:3px}
.servicio-mapa__item span{color:var(--secondary-color);font-size:14px;line-height:1.5}
.servicio-mapa__item strong{display:block;color:#fff;font-size:15px;margin-bottom:2px}

/* marcas del servicio: las mismas fichas de la cinta, quietas */
.servicio-marcas__lista{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* preguntas frecuentes */
.preguntas{display:grid;gap:12px}
.pregunta{border:1px solid rgba(255,255,255,.08);border-radius:10px;background:var(--octonary-color);transition:border-color .3s,box-shadow .3s}
.pregunta[open],.pregunta:hover{border-color:rgba(214,60,60,.45);box-shadow:0 0 24px rgba(153,27,27,.25)}
.pregunta summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-weight:600;font-size:17px;color:#fff}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary i{color:var(--carmine-light);transition:transform .3s}
.pregunta[open] summary i{transform:rotate(45deg)}
.pregunta p{margin:0;padding:0 24px 22px;color:var(--secondary-color);line-height:1.65}

/* otros servicios (al pie de cada página) */
.otros-servicios{padding:30px;border-radius:12px;background:var(--octonary-color);border:1px solid rgba(255,255,255,.08)}
.otros-servicios h5{margin-bottom:14px}
.otro-servicio{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08);color:var(--secondary-color);font-size:14px}
.otro-servicio strong{display:block;color:#fff;font-size:17px;margin-bottom:3px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.otro-servicio i{color:var(--carmine-light);transition:transform .35s}
.otro-servicio:hover strong{transform:translateX(6px);color:#fff}
.otro-servicio:hover i{transform:translate(3px,-3px)}

/* desplegable "Servicios" del menú lateral: título + una línea de descripción */
.offcanvas-nav .offcanvas-menu .navbar__sub-menu a.submenu-servicio{display:block;line-height:1.35;padding-top:8px;padding-bottom:8px}
.submenu-servicio strong{display:block;font-weight:600}
.submenu-servicio span{display:block;font-size:13px;color:var(--secondary-color);text-transform:none;letter-spacing:0}
.submenu-servicio--todos{color:var(--carmine-light)!important}

/* menos movimiento si el sistema lo pide */
@media (prefers-reduced-motion:reduce){
  .mouseCursor{display:none!important}
}