/* =========================================================
   DACARS — Villavicencio, Meta
   Identidad: negro azulado + cromo + neón azul eléctrico
   ========================================================= */

:root{
  /* Fondos */
  --ink:        #04060c;
  --ink-2:      #070b14;
  --panel:      #0a1020;
  --panel-2:    #0d1526;
  --line:       rgba(122,163,255,.13);
  --line-hi:    rgba(122,163,255,.28);

  /* Marca */
  --blue:       #0a5cff;
  --blue-hi:    #3d8bff;
  --cyan:       #00c8ff;
  --wa:         #25d366;

  /* Texto */
  --text:       #e9eef8;
  --muted:      #93a0b8;
  --muted-2:    #6c7a93;

  /* Tipografía */
  --f-display:  'Saira', 'Arial Narrow', system-ui, sans-serif;
  --f-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --wrap:       1200px;
  --pad:        clamp(20px, 5vw, 40px);
  --r:          14px;
  --head-h:     70px;

  --ease:       cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 18px); -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}

svg{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round}

/* Logos de marca: son siluetas sólidas, no trazos. Sin esto el CSS de arriba
   los dibuja huecos y la «f» de Facebook sale como un contorno raro. */
svg.marca{fill:currentColor; stroke:none}
/* Los glifos oficiales llenan todo el viewBox, así que pesan más que los
   iconos de trazo que van al lado. Se compensa bajándolos un punto. */
.btn svg.marca{width:16px; height:16px}
.topbar__item svg.marca{width:13px; height:13px}
.info__ico svg.marca{width:19px; height:19px}
.wa svg.marca{width:20px; height:20px}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue);
      color:#fff; padding:12px 20px; border-radius:0 0 8px 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--blue-hi); outline-offset:3px; border-radius:4px}

/* ---------- Efecto cromo (del logotipo) ---------- */
.chrome{
  background:linear-gradient(180deg,
    #ffffff 0%, #eef3fb 22%, #a6b1c6 45%,
    #ffffff 52%, #c9d3e4 70%, #7f8ca4 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 14px rgba(10,92,255,.28));
}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{
  background:linear-gradient(90deg,#05080f 0%,#0a1224 50%,#05080f 100%);
  border-bottom:1px solid var(--line);
  font-size:12.5px; color:var(--muted);
}
.topbar__in{display:flex; align-items:center; gap:22px; min-height:38px; flex-wrap:wrap}
.topbar__item{display:inline-flex; align-items:center; gap:7px; letter-spacing:.01em}
.topbar__item svg{width:14px; height:14px; color:var(--blue-hi)}
.topbar__item--hide{margin-left:auto}
.topbar__link{color:var(--text); font-weight:600; transition:color .2s}
.topbar__link:hover{color:var(--cyan)}

@media (max-width:900px){
  .topbar{font-size:11.5px}
  .topbar__item--hide{display:none}
  .topbar__link{margin-left:auto}
}
@media (max-width:560px){
  .topbar__in{gap:10px; justify-content:space-between}
  .topbar__item:first-child{max-width:60%}
}

/* =========================================================
   HEADER
   ========================================================= */
.head{
  position:sticky; top:0; z-index:100;
  background:rgba(4,6,12,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.head.is-stuck{background:rgba(4,6,12,.94); border-bottom-color:var(--line)}

.head__in{display:flex; align-items:center; justify-content:space-between;
          min-height:var(--head-h); gap:20px}

.brand img{height:30px; width:auto; transition:filter .3s}
.brand:hover img{filter:drop-shadow(0 0 14px rgba(61,139,255,.55))}

.nav{display:flex; align-items:center; gap:4px}
.nav > a{
  position:relative; padding:9px 13px; border-radius:8px;
  font-size:13.5px; font-weight:600; letter-spacing:.02em;
  color:var(--muted); transition:color .2s;
}
.nav > a:hover{color:var(--text)}
.nav > a:not(.btn)::after{
  content:''; position:absolute; left:13px; right:13px; bottom:4px; height:1.5px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease);
  box-shadow:0 0 8px rgba(0,200,255,.7);
}
.nav > a:hover:not(.btn)::after,
.nav > a.is-active:not(.btn)::after{transform:scaleX(1)}
.nav > a.is-active:not(.btn){color:var(--text)}
.nav__cta{margin-left:10px}
/* «.nav > a» (0,1,1) le gana por especificidad a «.btn--wa» (0,1,0) y le robaba
   el color al botón: quedaba texto gris sobre verde. Se lo devolvemos. */
.nav > a.btn--wa{color:#04160c}
.nav > a.btn--wa:hover{color:#04160c}

/* Burger */
.burger{display:none; width:42px; height:42px; background:transparent;
        border:1px solid var(--line-hi); border-radius:10px; cursor:pointer;
        padding:0; place-items:center; gap:4px}
.burger span{display:block; width:18px; height:1.8px; background:var(--text);
             border-radius:2px; transition:transform .3s var(--ease), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

@media (max-width:940px){
  .burger{display:grid}
  .nav{
    position:fixed; inset:calc(var(--head-h) + 38px) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(5,8,16,.985);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:14px var(--pad) 24px;
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:transform .3s var(--ease), opacity .25s var(--ease);
    max-height:calc(100dvh - var(--head-h) - 38px); overflow-y:auto;
  }
  .nav.is-open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav > a{padding:14px 6px; font-size:16px; border-bottom:1px solid rgba(122,163,255,.07)}
  .nav > a:not(.btn)::after{display:none}
  .nav__cta{margin:16px 0 0; justify-content:center; border-bottom:0}
}

/* =========================================================
   BOTONES
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border:0; border-radius:10px; cursor:pointer;
  font-family:var(--f-display); font-size:14px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  transition:transform .22s var(--ease), box-shadow .28s var(--ease),
             background .25s, color .25s, border-color .25s;
}
.btn svg{width:17px; height:17px}
.btn:active{transform:translateY(1px)}

.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--blue) 0%, #1f74ff 50%, #0047d6 100%);
  box-shadow:0 6px 24px -6px rgba(10,92,255,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:hover{
  box-shadow:0 10px 34px -6px rgba(10,92,255,.95),
             0 0 0 1px rgba(0,200,255,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transform:translateY(-2px);
}

.btn--ghost{
  color:var(--text); background:rgba(122,163,255,.05);
  border:1px solid var(--line-hi); backdrop-filter:blur(6px);
}
.btn--ghost:hover{border-color:rgba(61,139,255,.65); background:rgba(61,139,255,.11);
                  transform:translateY(-2px)}

.btn--wa{
  padding:10px 20px; font-size:12.5px; color:#04160c;
  background:linear-gradient(135deg,#31e07a,#16b455);
  box-shadow:0 4px 18px -5px rgba(37,211,102,.7);
}
.btn--wa:hover{transform:translateY(-2px); box-shadow:0 8px 24px -5px rgba(37,211,102,.9)}

.btn--block{width:100%}

.link{color:var(--blue-hi); font-weight:600; border-bottom:1px solid rgba(61,139,255,.35);
      transition:color .2s, border-color .2s}
.link:hover{color:var(--cyan); border-color:var(--cyan)}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(600px, 88vh, 900px);
  display:flex; align-items:center;
  padding:clamp(70px,11vh,120px) 0 clamp(80px,12vh,130px);
  overflow:hidden;
}
.hero__bg{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 65% at 50% 8%,  rgba(10,92,255,.20) 0%, transparent 62%),
    radial-gradient(70% 55% at 50% 100%, rgba(0,200,255,.09) 0%, transparent 70%),
    linear-gradient(180deg,#05080f 0%, #071020 45%, #04060c 100%);
}
.grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(122,163,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,163,255,.055) 1px, transparent 1px);
  background-size:62px 62px;
  mask-image:radial-gradient(75% 65% at 50% 42%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 42%, #000 0%, transparent 78%);
}
.glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.glow--a{width:520px; height:520px; top:-140px; left:-100px;
         background:radial-gradient(circle, rgba(10,92,255,.55), transparent 65%)}
.glow--b{width:460px; height:460px; bottom:-160px; right:-90px;
         background:radial-gradient(circle, rgba(0,200,255,.32), transparent 65%)}

.hero__in{position:relative; text-align:center}

/* Rayos de neón — eco del logotipo */
.beams{position:absolute; inset:-40px 0 auto; height:340px; pointer-events:none}
.beam{
  position:absolute; width:2px; border-radius:2px;
  background:linear-gradient(180deg, transparent 0%, var(--cyan) 28%, var(--blue) 72%, transparent 100%);
  box-shadow:0 0 10px rgba(10,92,255,.95), 0 0 34px rgba(10,92,255,.55);
  opacity:0; animation:beamIn 1.1s var(--ease) .25s forwards;
}
.beam--tl{height:210px; left:6%;  top:0;    transform:rotate(-24deg) }
.beam--bl{height:170px; left:3.6%; top:196px; transform:rotate(24deg)}
.beam--tr{height:210px; right:6%; top:0;    transform:rotate(24deg)}
.beam--br{height:170px; right:3.6%; top:196px; transform:rotate(-24deg)}
.spark{
  position:absolute; top:190px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle, #ffffff 0%, var(--cyan) 30%, transparent 70%);
  box-shadow:0 0 22px 6px rgba(0,200,255,.75);
  opacity:0; animation:sparkIn .7s var(--ease) 1s forwards;
}
.spark--l{left:calc(6% - 7px)}
.spark--r{right:calc(6% - 7px)}

@keyframes beamIn{from{opacity:0; filter:blur(6px)} to{opacity:.95; filter:blur(0)}}
@keyframes sparkIn{from{opacity:0; transform:scale(.3)} to{opacity:1; transform:scale(1)}}

@media (max-width:820px){ .beams{display:none} }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0 0 26px;
  padding:7px 18px; border:1px solid var(--line-hi); border-radius:100px;
  background:rgba(10,92,255,.07);
  font-family:var(--f-display); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--cyan);
              box-shadow:0 0 10px var(--cyan)}

.hero__title{
  margin:0 0 24px;
  font-family:var(--f-display); font-style:italic; font-weight:900;
  font-size:clamp(33px, 8.2vw, 96px); line-height:.95;
  letter-spacing:-.02em; text-transform:uppercase;
}
/* Halo oscuro: el titular se sostiene sobre cualquier fotograma del video */
.hero__title .chrome{filter:drop-shadow(0 2px 18px rgba(4,6,12,.9)) drop-shadow(0 0 40px rgba(4,6,12,.65))}
.hero__accent{
  display:block; font-style:italic;
  color:var(--blue-hi);
  text-shadow:0 2px 16px rgba(4,6,12,.95), 0 0 34px rgba(4,6,12,.8),
              0 0 22px rgba(61,139,255,.6), 0 0 52px rgba(10,92,255,.4);
}

.hero__lead{
  max-width:640px; margin:0 auto 38px;
  font-size:clamp(15.5px,1.9vw,18.5px); color:var(--muted); line-height:1.7;
  text-shadow:0 1px 12px rgba(4,6,12,.95), 0 0 26px rgba(4,6,12,.8);
}
.hero__lead strong{color:var(--text); font-weight:600}

.hero__cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:64px}

.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  list-style:none; margin:0; padding:0;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden;
}
.hero__stats li{
  display:flex; flex-direction:column; gap:5px; align-items:center;
  padding:24px 16px; background:rgba(8,13,26,.78); backdrop-filter:blur(8px);
}
.hero__stats b{
  font-family:var(--f-display); font-style:italic; font-weight:800;
  font-size:clamp(24px,3.4vw,34px); line-height:1;
  background:linear-gradient(180deg,#fff,#93a8cc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__stats span{font-size:12px; color:var(--muted-2); text-align:center; line-height:1.4}

@media (max-width:760px){
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .hero__cta{margin-bottom:46px}
}

.hero__scroll{
  position:absolute; bottom:26px; left:50%; translate:-50% 0;
  width:24px; height:38px; border:1.5px solid var(--line-hi); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px;
}
.hero__scroll span{width:3px; height:7px; border-radius:2px; background:var(--blue-hi);
                   animation:scrollDot 1.7s var(--ease) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}35%{opacity:1}
                     100%{opacity:0;transform:translateY(15px)}}
@media (max-width:760px){ .hero__scroll{display:none} }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg,#05080f,#0a1224,#05080f);
  padding:15px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex; width:max-content; animation:slide 34s linear infinite}
.marquee__track span{
  display:flex; align-items:center; white-space:nowrap; padding-right:26px;
  font-family:var(--f-display); font-style:italic; font-weight:800;
  font-size:clamp(17px,2.4vw,24px); letter-spacing:.05em; text-transform:uppercase;
  color:rgba(233,238,248,.30);
}
.marquee__track i{margin:0 26px; font-style:normal; font-size:.5em;
                  color:var(--blue); text-shadow:0 0 12px var(--blue)}
@keyframes slide{to{transform:translateX(-50%)}}

/* =========================================================
   SECCIONES
   ========================================================= */
.sec{position:relative; padding:clamp(70px,9vw,120px) 0}
.sec--alt{background:linear-gradient(180deg,#05080f,#080e1c 50%,#05080f)}
.sec--alt::before,.sec--alt::after{
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi),transparent);
}
.sec--alt::before{top:0} .sec--alt::after{bottom:0}

.sec__head{max-width:740px; margin:0 0 clamp(40px,5vw,60px)}
.tag{
  display:inline-block; margin:0 0 14px;
  font-family:var(--f-display); font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--blue-hi);
}
.sec__title{
  margin:0 0 18px;
  font-family:var(--f-display); font-style:italic; font-weight:800;
  font-size:clamp(30px,5vw,54px); line-height:1.02;
  letter-spacing:-.015em; text-transform:uppercase;
}
.sec__lead{margin:0 0 16px; font-size:clamp(15px,1.7vw,17px); color:var(--muted); line-height:1.72}
.sec__lead strong{color:var(--text); font-weight:600}
.sec__foot{margin:40px 0 0; font-size:15px; color:var(--muted)}

/* =========================================================
   CARDS — SERVICIOS
   ========================================================= */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
/* Si queda una tarjeta suelta al final, se centra sin ocupar el ancho completo */
.cards:not(.cards--3) > .card:last-child:nth-child(odd){
  grid-column:1 / -1; width:calc(50% - 9px); justify-self:center;
}

.card{
  position:relative; isolation:isolate; overflow:hidden;
  padding:32px 28px 30px; border-radius:var(--r);
  background:linear-gradient(160deg, rgba(14,21,38,.92), rgba(8,12,22,.92));
  border:1px solid var(--line);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(10,92,255,.20), transparent 62%);
  transition:opacity .4s var(--ease);
}
.card::after{
  content:''; position:absolute; top:0; left:16%; right:16%; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent);
  opacity:0; transition:opacity .4s var(--ease);
  box-shadow:0 0 12px rgba(0,200,255,.8);
}
.card:hover{transform:translateY(-6px); border-color:rgba(61,139,255,.4);
            box-shadow:0 22px 50px -24px rgba(10,92,255,.65)}
.card:hover::before,.card:hover::after{opacity:1}

.card--hot{border-color:rgba(61,139,255,.32)}
.card--hot::after{opacity:.75}

.card__n{
  position:absolute; top:22px; right:26px;
  font-family:var(--f-display); font-style:italic; font-weight:800; font-size:44px;
  line-height:1; color:rgba(122,163,255,.09); letter-spacing:-.03em;
}
.card__ico{
  display:grid; place-items:center; width:50px; height:50px; margin-bottom:20px;
  border-radius:12px; border:1px solid var(--line-hi);
  background:linear-gradient(145deg, rgba(10,92,255,.16), rgba(10,92,255,.03));
  color:var(--blue-hi); transition:color .3s, box-shadow .3s, border-color .3s;
}
.card__ico svg{width:24px; height:24px}
.card:hover .card__ico{color:var(--cyan); border-color:rgba(0,200,255,.45);
                       box-shadow:0 0 22px -4px rgba(0,200,255,.6)}

.card h3{
  margin:0 0 10px;
  font-family:var(--f-display); font-weight:700; font-size:19.5px;
  letter-spacing:.005em; color:var(--text);
}
.card p{margin:0; font-size:14.6px; color:var(--muted); line-height:1.66}
/* Tarjeta con dos párrafos (el hub del Meta pone distancia + descripción).
   .card p lleva margin:0, así que sin esta regla los dos quedan pegados. */
.card p + p{margin-top:10px}

/* La portada mantiene SIEMPRE 2 columnas: se compacta la tarjeta en móvil */
@media (max-width:640px){
  .cards:not(.cards--3){gap:12px}
  .cards:not(.cards--3) > .card:last-child:nth-child(odd){width:calc(50% - 6px)}
  .cards:not(.cards--3) > .card{padding:22px 16px 20px}
  .cards:not(.cards--3) > .card .card__n{top:14px; right:14px; font-size:30px}
  .cards:not(.cards--3) > .card .card__ico{width:42px; height:42px; margin-bottom:14px; border-radius:10px}
  .cards:not(.cards--3) > .card .card__ico svg{width:21px; height:21px}
  .cards:not(.cards--3) > .card h3{font-size:16.5px; margin-bottom:8px}
  .cards:not(.cards--3) > .card p{font-size:13.2px; line-height:1.58}
  .cards:not(.cards--3) > .card .card__mas{margin-top:12px; font-size:11px; letter-spacing:.06em}
}
@media (max-width:400px){
  .cards:not(.cards--3){gap:10px}
  .cards:not(.cards--3) > .card:last-child:nth-child(odd){width:calc(50% - 5px)}
  .cards:not(.cards--3) > .card{padding:18px 13px 16px}
  .cards:not(.cards--3) > .card .card__n{font-size:24px; top:11px; right:11px}
  .cards:not(.cards--3) > .card h3{font-size:15px}
  .cards:not(.cards--3) > .card p{font-size:12.4px}
}

/* =========================================================
   PPF
   ========================================================= */
.ppf{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,70px); align-items:center}
@media (max-width:920px){ .ppf{grid-template-columns:1fr} }

.checks{list-style:none; margin:30px 0 34px; padding:0; display:grid; gap:15px}
.checks li{display:flex; gap:14px; align-items:flex-start; font-size:15px; color:var(--muted)}
.checks li b{color:var(--text); font-weight:600}
.checks li > span{
  flex:0 0 auto; width:22px; height:22px; margin-top:2px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),#0047d6); position:relative;
  box-shadow:0 0 14px -2px rgba(10,92,255,.8);
}
.checks li > span::after{
  content:''; position:absolute; left:7px; top:6px; width:5px; height:9px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg);
}

.ppf__cta{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.ppf__note{font-size:13.5px; color:var(--muted-2)}

.ppf__panel{
  padding:2px; border-radius:20px;
  background:linear-gradient(160deg, rgba(0,200,255,.45), rgba(10,92,255,.15) 40%, rgba(122,163,255,.06));
}
.ppf__panel-in{
  padding:clamp(26px,3.4vw,40px); border-radius:18px;
  background:linear-gradient(165deg,#0b1425,#06090f);
}
.ppf__panel-tag{
  margin:0 0 22px; font-family:var(--f-display); font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--blue-hi);
}
.layers{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:9px; counter-reset:l}
.layers li{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:15px 18px; border-radius:11px;
  background:linear-gradient(90deg, rgba(122,163,255,.09), rgba(122,163,255,.02));
  border-left:3px solid rgba(122,163,255,.22);
  transition:border-color .3s, background .3s;
}
.layers li:first-child{
  border-left-color:var(--cyan);
  background:linear-gradient(90deg, rgba(0,200,255,.18), rgba(10,92,255,.04));
  box-shadow:0 0 26px -12px rgba(0,200,255,.8);
}
.layers li b{font-family:var(--f-display); font-size:15.5px; font-weight:700; color:var(--text)}
.layers li span{font-size:13px; color:var(--muted-2)}
.ppf__panel-foot{margin:0; font-size:13.8px; color:var(--muted); line-height:1.6}

/* =========================================================
   PROCESO
   ========================================================= */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.step{position:relative; padding:36px 28px 34px; background:#070b14; transition:background .35s}
.step:hover{background:#0b1220}
.step__n{
  display:block; margin-bottom:16px;
  font-family:var(--f-display); font-style:italic; font-weight:800; font-size:15px;
  letter-spacing:.12em; color:var(--blue-hi);
}
.step::before{
  content:''; position:absolute; top:0; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.step:hover::before{transform:scaleX(1)}
.step h3{margin:0 0 10px; font-family:var(--f-display); font-weight:700; font-size:18.5px}
.step p{margin:0; font-size:14.4px; color:var(--muted); line-height:1.65}

/* =========================================================
   GALERÍA
   ========================================================= */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.gal__i{
  position:relative; overflow:hidden; border-radius:var(--r);
  aspect-ratio:1/1; border:1px solid var(--line);
  background:
    radial-gradient(90% 70% at 30% 10%, rgba(10,92,255,.28), transparent 62%),
    linear-gradient(150deg,#0d1526,#06090f);
  transition:transform .4s var(--ease), border-color .35s, box-shadow .4s;
}
.gal__i--wide{grid-column:span 2}
.gal__i img{width:100%; height:100%; object-fit:cover;
            transition:transform .6s var(--ease), opacity .3s}
.gal__i.no-img img{display:none}
.gal__i.no-img::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(122,163,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,163,255,.07) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.gal__i:hover{transform:translateY(-5px); border-color:rgba(61,139,255,.45);
              box-shadow:0 26px 52px -26px rgba(10,92,255,.8)}
.gal__i:hover img{transform:scale(1.07); opacity:.72}

.gal__tag{
  position:absolute; top:16px; left:16px; z-index:2;
  padding:6px 13px; border-radius:100px;
  background:rgba(4,6,12,.72); border:1px solid var(--line-hi);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--f-display); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text);
}
.gal__go{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:34px 18px 18px;
  background:linear-gradient(180deg,transparent,rgba(4,6,12,.9));
  font-family:var(--f-display); font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);
  opacity:0; transform:translateY(10px); transition:all .35s var(--ease);
}
.gal__i:hover .gal__go{opacity:1; transform:translateY(0)}

.gal__cta{display:flex; justify-content:center; margin-top:38px}

@media (max-width:900px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__i--wide{grid-column:span 2}
}
@media (max-width:520px){
  .gal{grid-template-columns:1fr}
  .gal__i--wide{grid-column:span 1}
}

/* =========================================================
   NOSOTROS
   ========================================================= */
.nos{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5vw,70px); align-items:center}
@media (max-width:920px){ .nos{grid-template-columns:1fr} .nos__mark{order:-1} }

.values{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:34px}
@media (max-width:560px){ .values{grid-template-columns:1fr} }
.value{
  padding:20px 20px 18px; border-radius:12px;
  background:linear-gradient(150deg, rgba(14,21,38,.9), rgba(8,12,22,.9));
  border:1px solid var(--line); border-top:2px solid rgba(61,139,255,.45);
  transition:border-color .3s, transform .3s var(--ease);
}
.value:hover{transform:translateY(-3px); border-color:rgba(61,139,255,.35);
             border-top-color:var(--cyan)}
.value b{display:block; margin-bottom:6px; font-family:var(--f-display);
         font-size:15.5px; font-weight:700}
.value span{font-size:13.6px; color:var(--muted); line-height:1.6}

.nos__mark{
  margin:0; padding:clamp(28px,4vw,52px); border-radius:20px;
  background:
    radial-gradient(75% 60% at 50% 45%, rgba(10,92,255,.20), transparent 68%),
    linear-gradient(160deg,#0a1222,#05080f);
  border:1px solid var(--line); display:grid; place-items:center;
}
.nos__mark img{width:100%; max-width:380px;
               filter:drop-shadow(0 0 40px rgba(10,92,255,.45))}

/* =========================================================
   FAQ
   ========================================================= */
.faq{display:grid; gap:12px; max-width:880px}
.faq details{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:linear-gradient(150deg, rgba(13,20,36,.85), rgba(7,11,20,.85));
  transition:border-color .3s;
}
.faq details[open]{border-color:rgba(61,139,255,.35)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 24px; cursor:pointer; list-style:none;
  font-family:var(--f-display); font-size:16.5px; font-weight:600; color:var(--text);
  transition:color .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blue-hi)}
.faq summary::after{
  content:''; flex:0 0 auto; width:11px; height:11px; margin-right:2px;
  border-right:2px solid var(--blue-hi); border-bottom:2px solid var(--blue-hi);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details > div{padding:0 24px 22px; border-top:1px solid rgba(122,163,255,.07)}
.faq details > div p{margin:16px 0 0; font-size:14.8px; color:var(--muted); line-height:1.7}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,3.4vw,40px);
         align-items:start}
@media (max-width:920px){ .contact{grid-template-columns:1fr} }

.form{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  padding:clamp(26px,3.4vw,38px); border-radius:18px;
  background:linear-gradient(160deg, rgba(13,21,38,.9), rgba(6,9,16,.9));
  border:1px solid var(--line);
}
@media (max-width:560px){ .form{grid-template-columns:1fr} }
.field{display:flex; flex-direction:column; gap:8px}
.field--full{grid-column:1 / -1}
.field label{font-size:12.5px; font-weight:600; letter-spacing:.06em;
             text-transform:uppercase; color:var(--muted)}
.field .opt{text-transform:none; letter-spacing:0; color:var(--muted-2); font-weight:400}

.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:10px;
  background:rgba(4,7,14,.75); border:1px solid var(--line-hi);
  font-size:15px; color:var(--text);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field textarea{resize:vertical; min-height:110px; font-family:var(--f-body)}
.field select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--blue-hi) 50%),
                   linear-gradient(135deg,var(--blue-hi) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field select option{background:#0a1020; color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:#55627a}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,92,255,.18); background:rgba(6,10,20,.95);
}
.field.is-bad input,.field.is-bad select{border-color:#ff5470;
  box-shadow:0 0 0 3px rgba(255,84,112,.14)}

.form__note{margin:14px 0 0; font-size:13px; color:var(--muted-2); text-align:center}
.form__note.is-bad{color:#ff7a8f}

.info{display:grid; gap:12px}
.info__row{
  display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:13px;
  background:linear-gradient(150deg, rgba(13,21,38,.85), rgba(7,11,20,.85));
  border:1px solid var(--line);
  transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.info__row:hover{border-color:rgba(61,139,255,.42); transform:translateX(4px)}
.info__ico{
  flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px;
  border-radius:11px; border:1px solid var(--line-hi); color:var(--blue-hi);
  background:linear-gradient(145deg, rgba(10,92,255,.16), rgba(10,92,255,.03));
  transition:color .3s, box-shadow .3s;
}
.info__ico svg{width:21px; height:21px}
.info__row:hover .info__ico{color:var(--cyan); box-shadow:0 0 20px -5px rgba(0,200,255,.7)}
/* Cada red con su color al pasar el mouse: se leen como lo que son */
.info__row[href*="wa.me"]:hover .info__ico{
  color:#25d366; border-color:rgba(37,211,102,.55); box-shadow:0 0 22px -5px rgba(37,211,102,.75)}
.info__row[href*="instagram.com"]:hover .info__ico{
  color:#e1306c; border-color:rgba(225,48,108,.55); box-shadow:0 0 22px -5px rgba(225,48,108,.75)}
.info__row[href*="facebook.com"]:hover .info__ico{
  color:#1877f2; border-color:rgba(24,119,242,.55); box-shadow:0 0 22px -5px rgba(24,119,242,.75)}
.info__row > span:last-child{font-size:14.5px; color:var(--muted); line-height:1.5}
.info__row b{display:block; font-family:var(--f-display); font-size:12px; font-weight:700;
             letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin-bottom:3px}

.map{
  margin-top:4px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); height:260px; background:#0a1020;
}
.map iframe{width:100%; height:100%; border:0; filter:grayscale(.45) invert(.92) hue-rotate(185deg)
            contrast(.9) brightness(.95)}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{border-top:1px solid var(--line);
      background:linear-gradient(180deg,#05080f,#02040a)}
.foot__in{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:38px;
  padding-block:clamp(48px,6vw,70px) 42px;
}
@media (max-width:900px){ .foot__in{grid-template-columns:repeat(2,1fr); gap:32px} }
@media (max-width:520px){ .foot__in{grid-template-columns:1fr} }

.foot__brand img{width:150px; margin-bottom:16px;
                 filter:drop-shadow(0 0 22px rgba(10,92,255,.4))}
.foot__brand p{margin:0; font-size:14px; color:var(--muted-2); line-height:1.65}

.foot__col{display:flex; flex-direction:column; gap:11px}
.foot__col h4{
  margin:0 0 6px; font-family:var(--f-display); font-size:12px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}
.foot__col a{font-size:14px; color:var(--muted-2); transition:color .22s, padding-left .22s}
.foot__col a:hover{color:var(--blue-hi); padding-left:5px}

.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-block:22px; border-top:1px solid var(--line);
}
.foot__bar p{margin:0; font-size:12.5px; color:var(--muted-2)}
.foot__made{color:var(--muted-2)}

/* Acceso al panel. Discreto a propósito: quien lo necesita sabe que está ahí,
   y para el visitante es casi invisible. Al enfocarlo con el teclado se
   ilumina entero — un enlace apagado no puede volverse inalcanzable para
   quien navega sin mouse. */
.foot__acceso{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); opacity:.32;
  transition:opacity .25s var(--ease), color .25s;
}
.foot__acceso svg{width:12px; height:12px}
.foot__acceso:hover{opacity:1; color:var(--blue-hi)}
.foot__acceso:focus-visible{
  opacity:1; color:var(--cyan);
  outline:2px solid var(--cyan); outline-offset:4px; border-radius:4px;
}

/* =========================================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================================= */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px; border-radius:100px; color:#04160c;
  background:linear-gradient(135deg,#31e07a,#16b455);
  box-shadow:0 10px 30px -8px rgba(37,211,102,.75);
  font-family:var(--f-display); font-size:13.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  transition:transform .28s var(--ease), box-shadow .3s;
}
.wa svg{width:21px; height:21px; stroke-width:1.8}
.wa:hover{transform:translateY(-3px) scale(1.03);
          box-shadow:0 16px 40px -8px rgba(37,211,102,.9)}
.wa::before{
  content:''; position:absolute; inset:0; border-radius:100px;
  border:1.5px solid rgba(49,224,122,.6); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%{transform:scale(1); opacity:.75}
                 70%{transform:scale(1.28); opacity:0} 100%{opacity:0}}
@media (max-width:560px){
  .wa{right:16px; bottom:16px; padding:15px}
  .wa span{display:none}
}

/* =========================================================
   REVEAL AL SCROLL
   ========================================================= */
[data-reveal]{opacity:0; transform:translateY(22px);
              transition:opacity .7s var(--ease), transform .7s var(--ease)}
[data-reveal].is-in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
                       transition-duration:.01ms !important}
  [data-reveal]{opacity:1; transform:none}
  .marquee__track{animation:none}
  .beam,.spark{opacity:1}
}

/* =========================================================
   PÁGINAS DE SERVICIO
   ========================================================= */

/* --- Migas de pan --- */
.migas{border-bottom:1px solid var(--line); background:#05080f}
.migas ol{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  list-style:none; margin:0; padding:14px 0; font-size:13px; color:var(--muted-2);
}
.migas li + li::before{content:'/'; margin-right:8px; color:rgba(122,163,255,.3)}
.migas a{color:var(--muted); transition:color .2s}
.migas a:hover{color:var(--blue-hi)}
.migas [aria-current]{color:var(--text)}

/* --- Hero de servicio --- */
.shero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(54px,8vw,92px) 0 clamp(50px,7vw,80px);
}
.shero__bg{position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(95% 70% at 20% 0%, rgba(10,92,255,.22) 0%, transparent 62%),
    linear-gradient(180deg,#05080f 0%, #071020 55%, #04060c 100%);
}
.shero__title{
  margin:0 0 12px; max-width:16ch;
  font-family:var(--f-display); font-style:italic; font-weight:900;
  font-size:clamp(34px,6.4vw,70px); line-height:.98;
  letter-spacing:-.02em; text-transform:uppercase;
}
.shero__sub{
  margin:0 0 20px; max-width:34ch;
  font-family:var(--f-display); font-style:italic; font-weight:700;
  font-size:clamp(17px,2.4vw,24px); line-height:1.24; color:var(--blue-hi);
  text-shadow:0 0 20px rgba(61,139,255,.45);
}
.shero__lead{margin:0 0 32px; max-width:60ch; font-size:clamp(15px,1.8vw,17.5px); color:var(--muted)}

/* --- Contenedor angosto para lectura --- */
.sec__narrow{max-width:860px}
.sec__narrow .sec__head{max-width:none}

/* --- Checks a dos columnas --- */
.checks--2{grid-template-columns:repeat(2,1fr); gap:18px 34px}
@media (max-width:760px){ .checks--2{grid-template-columns:1fr} }
.checks--2 li{font-size:14.8px}

/* --- Cards a tres --- */
.cards--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){ .cards--3{grid-template-columns:1fr} }
.cards--3 .card{padding-top:28px}

/* --- Factores de precio --- */
.factores{list-style:none; margin:0; padding:0; display:grid; gap:11px; counter-reset:f}
.factores li{
  counter-increment:f; position:relative; padding:16px 20px 16px 58px;
  border-radius:11px; font-size:15px; color:var(--muted);
  background:linear-gradient(90deg, rgba(122,163,255,.08), rgba(122,163,255,.02));
  border:1px solid var(--line);
}
.factores li strong{color:var(--text); font-weight:600}
.factores li::before{
  content:counter(f,decimal-leading-zero); position:absolute; left:20px; top:16px;
  font-family:var(--f-display); font-style:italic; font-weight:800; font-size:14px;
  color:var(--blue-hi);
}

/* --- Zonas de cobertura --- */
.zonas{
  margin:0 0 16px; padding:20px 24px; border-radius:12px;
  background:linear-gradient(150deg, rgba(13,21,38,.85), rgba(7,11,20,.85));
  border:1px solid var(--line); border-left:3px solid rgba(61,139,255,.5);
  font-size:14.4px; color:var(--muted); line-height:1.75;
}
.zonas b{display:block; margin-bottom:6px; font-family:var(--f-display);
         font-size:12.5px; font-weight:700; letter-spacing:.12em;
         text-transform:uppercase; color:var(--text)}

.mapa-mini{
  margin-top:24px; height:280px; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:#0a1020;
}
.mapa-mini iframe{width:100%; height:100%; border:0;
  filter:grayscale(.45) invert(.92) hue-rotate(185deg) contrast(.9) brightness(.95)}

/* --- Otros servicios (enlaces internos) --- */
.otros{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:860px){ .otros{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .otros{grid-template-columns:1fr} }
.otro{
  display:flex; flex-direction:column; gap:3px; padding:22px 24px; border-radius:12px;
  background:linear-gradient(150deg, rgba(14,21,38,.9), rgba(8,12,22,.9));
  border:1px solid var(--line);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.otro:hover{transform:translateY(-4px); border-color:rgba(61,139,255,.45);
            box-shadow:0 20px 44px -24px rgba(10,92,255,.7)}
.otro b{font-family:var(--f-display); font-style:italic; font-weight:800;
        font-size:18px; text-transform:uppercase; letter-spacing:.005em; color:var(--text)}
.otro span{font-size:12.5px; color:var(--muted-2); letter-spacing:.04em}

/* --- Cierre / CTA final --- */
.cierre{
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(60px,8vw,100px) 0;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(10,92,255,.22), transparent 65%),
    linear-gradient(180deg,#05080f,#02040a);
  border-top:1px solid var(--line);
}
.cierre__in{display:grid; justify-items:center; gap:16px}
.cierre h2{
  margin:0; max-width:18ch;
  font-family:var(--f-display); font-style:italic; font-weight:800;
  font-size:clamp(26px,4.4vw,46px); line-height:1.04;
  letter-spacing:-.015em; text-transform:uppercase;
}
.cierre p{margin:0 0 10px; max-width:52ch; font-size:16px; color:var(--muted)}

/* =========================================================
   COBERTURA EN LA PORTADA
   ========================================================= */
.cobertura{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px}
@media (max-width:820px){ .cobertura{grid-template-columns:1fr} }
.cobertura__col{
  padding:26px 28px; border-radius:14px;
  background:linear-gradient(150deg, rgba(13,21,38,.88), rgba(7,11,20,.88));
  border:1px solid var(--line); border-top:2px solid rgba(61,139,255,.45);
}
.cobertura__col h3{
  margin:0 0 14px; font-family:var(--f-display); font-weight:700; font-size:17.5px; color:var(--text);
}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none}
.chips li{
  padding:5px 12px; border-radius:100px; font-size:12.5px; color:var(--muted);
  background:rgba(122,163,255,.07); border:1px solid var(--line);
  transition:border-color .25s, color .25s;
}
.chips li:hover{border-color:rgba(61,139,255,.45); color:var(--text)}
.cobertura__nota{margin:16px 0 0; font-size:13.5px; color:var(--muted-2); line-height:1.6}

/* Enlace «ver servicio» dentro de las tarjetas de la portada */
.card__mas{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-family:var(--f-display); font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--blue-hi);
  transition:gap .25s var(--ease), color .25s;
}
.card:hover .card__mas{gap:11px; color:var(--cyan)}


/* =========================================================
   FONDO DE VIDEO DEL HERO
   ========================================================= */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  opacity:0; transition:opacity 1.2s var(--ease);
  /* Solo el ajuste minimo para integrarlo a la paleta. El material ya viene
     graduado desde tools/generar-video.py: aqui no se vuelve a oscurecer. */
  filter:saturate(1.02) contrast(1.04);
}
.hero__video.is-on{opacity:.96}

/* Velo: abre el centro para que se vea el video y oscurece solo las bandas
   donde hay interfaz — el header arriba y el paso al marquee abajo. */
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,6,12,.74) 0%, rgba(4,6,12,.30) 18%,
                            rgba(4,6,12,.20) 52%, rgba(4,6,12,.55) 84%,
                            rgba(4,6,12,.92) 100%),
    radial-gradient(85% 60% at 50% 46%, rgba(4,6,12,0) 0%, rgba(4,6,12,.34) 100%),
    linear-gradient(90deg, rgba(10,92,255,.12), transparent 45%, rgba(0,200,255,.08));
}

/* Colchon local detras del texto: sostiene la lectura sin apagar el encuadre */
.hero:has(.hero__video.is-on) .hero__in::before{
  content:""; position:absolute; z-index:-1;
  inset:-6% -8% 18%;
  background:radial-gradient(58% 52% at 50% 44%, rgba(4,6,12,.62) 0%,
                             rgba(4,6,12,.34) 52%, transparent 100%);
  pointer-events:none;
}

/* Con el video encendido, la rejilla y los glows bajan para no competir */
.hero:has(.hero__video.is-on) .grid{opacity:.20}
.hero:has(.hero__video.is-on) .glow{opacity:.18}

/* Legibilidad sobre un fondo ya no apagado: los elementos translucidos del
   hero se apoyan en su propio fondo oscuro en vez de en el velo. */
.hero:has(.hero__video.is-on) .eyebrow{
  background:rgba(6,10,20,.62); backdrop-filter:blur(8px);
  border-color:rgba(122,163,255,.30); color:var(--text);
}
.hero:has(.hero__video.is-on) .btn--ghost{
  background:rgba(6,10,20,.55); border-color:rgba(122,163,255,.34);
}
.hero:has(.hero__video.is-on) .hero__stats li{background:rgba(6,10,20,.84)}
.hero:has(.hero__video.is-on) .hero__lead{
  color:#c6d3ea;
  text-shadow:0 1px 14px rgba(4,6,12,1), 0 0 30px rgba(4,6,12,.95);
}

/* En movil el encuadre es mas estrecho: el video manda y el velo se aligera */
@media (max-width:860px){
  .hero__video.is-on{opacity:1}
  .hero__veil{
    background:
      linear-gradient(180deg, rgba(4,6,12,.78) 0%, rgba(4,6,12,.34) 16%,
                              rgba(4,6,12,.26) 50%, rgba(4,6,12,.60) 82%,
                              rgba(4,6,12,.94) 100%),
      radial-gradient(95% 55% at 50% 44%, rgba(4,6,12,0) 0%, rgba(4,6,12,.30) 100%);
  }
}

/* =========================================================
   GALERÍA DE VIDEO (reels)
   ========================================================= */
.clips{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  align-items:start;
}
@media (max-width:1040px){ .clips{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){
  /* carrusel horizontal en móvil: no aplasta los verticales */
  .clips{
    display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:14px; margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
    scrollbar-width:thin; scrollbar-color:rgba(61,139,255,.45) transparent;
  }
  .clips::-webkit-scrollbar{height:6px}
  .clips::-webkit-scrollbar-thumb{background:rgba(61,139,255,.45); border-radius:10px}
  .clip{flex:0 0 66vw; max-width:280px; scroll-snap-align:center}
}

.clip{display:flex; flex-direction:column; gap:12px}

.clip__media{
  position:relative; overflow:hidden; border-radius:var(--r);
  aspect-ratio:9/16; background:linear-gradient(150deg,#0d1526,#06090f);
  border:1px solid var(--line);
  transition:transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.clip:hover .clip__media{
  transform:translateY(-5px); border-color:rgba(61,139,255,.45);
  box-shadow:0 26px 52px -26px rgba(10,92,255,.8);
}
.clip__v{width:100%; height:100%; object-fit:cover; display:block; background:#06090f}

/* Botón de reproducción */
.clip__btn{
  position:absolute; inset:0; display:grid; place-items:center;
  width:100%; height:100%; padding:0; cursor:pointer; border:0;
  background:linear-gradient(180deg, rgba(4,6,12,.18) 0%, rgba(4,6,12,.62) 100%);
  transition:background .3s;
}
.clip__btn::before{
  content:''; width:62px; height:62px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),#0047d6);
  box-shadow:0 0 0 1px rgba(0,200,255,.4), 0 10px 34px -8px rgba(10,92,255,.95);
  transition:transform .3s var(--ease), box-shadow .3s;
}
.clip__btn::after{
  content:''; position:absolute;
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
  margin-left:5px;
}
.clip:hover .clip__btn{background:linear-gradient(180deg, rgba(4,6,12,.06), rgba(4,6,12,.5))}
.clip:hover .clip__btn::before{transform:scale(1.09); box-shadow:0 0 0 1px rgba(0,200,255,.7), 0 14px 42px -8px rgba(10,92,255,1)}
.clip.is-playing .clip__btn{display:none}

.clip__tag{
  position:absolute; top:14px; left:14px; z-index:3;
  padding:6px 12px; border-radius:100px;
  background:rgba(4,6,12,.74); border:1px solid var(--line-hi);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--f-display); font-size:10.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text);
}
.clip.is-playing .clip__tag{opacity:0; transition:opacity .3s}

.clip__meta h3{
  margin:0 0 5px; font-family:var(--f-display); font-weight:700;
  font-size:15.5px; line-height:1.25; color:var(--text);
}
.clip__meta a{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--blue-hi);
  transition:gap .25s var(--ease), color .25s;
}
.clip__meta a:hover{gap:10px; color:var(--cyan)}

.clips__nota{
  margin:26px 0 0; font-size:13.5px; color:var(--muted-2);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.clips__nota svg{width:15px; height:15px; color:var(--blue-hi)}

/* =========================================================
   TESTIMONIO EN VIDEO
   ========================================================= */
.testi{
  display:grid; grid-template-columns:minmax(0,320px) 1fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
@media (max-width:820px){
  .testi{grid-template-columns:1fr; gap:28px}
  .testi__media{max-width:300px; margin-inline:auto}
}
.testi__media{position:relative; width:100%}
.testi__media .clip__media{aspect-ratio:9/16}

.testi__copy .comillas{
  display:block; font-family:var(--f-display); font-style:italic; font-weight:900;
  font-size:64px; line-height:.6; color:var(--blue); opacity:.5; margin-bottom:12px;
}
.testi__copy blockquote{
  margin:0 0 20px; font-family:var(--f-display); font-weight:600;
  font-size:clamp(19px,2.6vw,27px); line-height:1.34; color:var(--text);
}
.testi__copy p{margin:0 0 18px; font-size:15px; color:var(--muted); line-height:1.7}
.testi__pie{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px;
  border-radius:100px; background:rgba(122,163,255,.07);
  border:1px solid var(--line-hi); font-size:13px; color:var(--muted);
}
.testi__pie b{color:var(--text); font-weight:600}

/* =========================================================
   VIDEO EN LAS PÁGINAS DE SERVICIO
   ========================================================= */
.vserv{
  display:grid; grid-template-columns:minmax(0,300px) 1fr;
  gap:clamp(26px,4vw,50px); align-items:center;
}
@media (max-width:820px){
  .vserv{grid-template-columns:1fr; gap:26px}
  .vserv__media{max-width:290px; margin-inline:auto}
}
.vserv__media .clip__media{aspect-ratio:9/16}
.vserv__copy h2{margin-top:0}
.vserv__copy .sec__lead{margin-bottom:22px}

@media (prefers-reduced-motion: reduce){
  .hero__video{transition:none}
}