/* ================================================================
   AVIZOR · azul profundo + celeste + dorado
   Estructura inspirada en patrones de página de seguridad corporativa.
   Contenido, marca y recursos propios de AVIZOR.
   Marca: grafito #101820 · dorado/ámbar #F2A900 · celeste de apoyo.
   ================================================================ */
:root{
  --navy-950:#081019; --navy-900:#0a1420; --navy-800:#0e2030; --navy-700:#123150;
  --azul:#1b4d7e; --celeste:#39b7f0; --celeste-soft:#7dd3fc;
  --dorado:#d2a84f; --dorado-600:#8f6c25; --oro-claro:#f3dfa2; --oro-oscuro:#8a6420;
  --oro-metal:linear-gradient(180deg,#f6e6b0 0%,#e3c172 22%,#c99b45 52%,#a77a2a 78%,#d6b062 100%);
  --oro-texto:linear-gradient(180deg,#f2dc9c 0%,#d9b05a 45%,#b7873a 100%); --grafito:#101820;
  --nube:#f4f7fa; --niebla:#dfe7ef; --tinta:#0b121c; --tinta-60:rgba(11,18,28,.62);
  --blanco:#fff; --linea:rgba(255,255,255,.1); --linea-fuerte:rgba(255,255,255,.18);
  --sombra:0 24px 60px -24px rgba(3,10,20,.8); --sombra-suave:0 10px 30px -14px rgba(3,10,20,.5);
  --ancho:1180px; --gutter:clamp(18px,5vw,48px); --radio:16px; --radio-sm:11px;
  --ease:cubic-bezier(.22,1,.36,1); --d:200ms; --dn:500ms;
  --f-disp:"Big Shoulders Display","BSD Respaldo","BSD Respaldo 2",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-txt:"Source Sans 3","SS3 Respaldo",system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f-txt);font-size:clamp(15.5px,1vw,17px);line-height:1.6;color:var(--niebla);background:var(--navy-900);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--celeste);outline-offset:3px;border-radius:6px}
.contenedor{width:min(100% - calc(var(--gutter)*2),var(--ancho));margin-inline:auto}
h1,h2,h3{font-family:var(--f-disp);font-weight:800;line-height:1;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:clamp(1.9rem,4vw,3rem);color:var(--blanco)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.02rem,1.4vw,1.2rem);color:var(--niebla);max-width:60ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;left:50%;top:-60px;transform:translateX(-50%);background:var(--dorado);color:var(--grafito);padding:.7em 1.2em;border-radius:0 0 10px 10px;font-weight:700;z-index:200;transition:top var(--d)}
.skip:focus{top:0}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--celeste);display:inline-flex;gap:.6em;align-items:center;margin:0 0 .9rem}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--celeste)}

/* botones */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:.85em 1.4em;border-radius:10px;font-weight:700;transition:transform var(--d) var(--ease),background var(--d),box-shadow var(--d)}
.btn--gold{background:var(--oro-metal);color:#1c1508;border:1px solid rgba(255,238,190,.35);text-shadow:0 1px 0 rgba(255,244,214,.45);box-shadow:inset 0 1px 0 rgba(255,250,232,.75),inset 0 -1px 0 rgba(96,66,16,.45),0 10px 24px -12px rgba(150,110,40,.65)}
.btn--ghost{background:rgba(255,255,255,.04);color:var(--blanco);border:1px solid var(--linea-fuerte)}
.btn--celeste{background:var(--celeste);color:var(--grafito)}
.btn .ic{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:7px;background:rgba(16,24,32,.14);transition:transform var(--d) var(--ease)}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}.btn:hover .ic{transform:translateX(2px)}}
.btn:active{transform:translateY(0) scale(.98)}
.btn--sm{padding:.55em 1em;font-size:.88rem}

/* cabecera */
.cab{position:fixed;inset:0 0 auto;z-index:100;transition:background var(--dn),border-color var(--dn)}
.cab__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:16px 0;transition:padding var(--dn)}
.cab__logo{height:clamp(30px,3.4vw,42px);transition:height var(--dn)}
.cab.compacta{background:rgba(8,16,25,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.cab.compacta .cab__row{padding:9px 0}
.nav{display:flex;align-items:center;gap:clamp(.9rem,1.8vw,1.7rem)}
.nav a{font-size:.9rem;font-weight:600;color:var(--niebla);position:relative;padding:.3em 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--celeste);transition:right var(--d) var(--ease)}
@media (hover:hover){.nav a:hover::after{right:0}}
.cab__acc{display:flex;align-items:center;gap:.8rem}
.tel{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:.9rem;padding:.5em .9em;border-radius:999px;border:1px solid var(--linea-fuerte);color:var(--blanco)}
.tel .dot{width:7px;height:7px;border-radius:999px;background:var(--celeste)}
.menu-btn{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--linea-fuerte);position:relative}
.menu-btn span{position:absolute;left:11px;right:11px;height:2px;background:var(--blanco);transition:transform var(--d),opacity var(--d)}
.menu-btn span:nth-child(1){top:15px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:27px}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1199px){.nav--main,.cab__acc .tel,.cab__acc .btn{display:none}.menu-btn{display:block}}
.menu-movil{position:fixed;inset:0;z-index:99;background:var(--navy-950);padding:92px var(--gutter) 40px;display:flex;flex-direction:column;gap:.3rem;transform:translateY(-100%);visibility:hidden;transition:transform var(--dn) var(--ease),visibility var(--dn)}
body.menu-open .menu-movil{transform:none;visibility:visible}
.menu-movil a{font-family:var(--f-disp);font-size:1.6rem;font-weight:700;color:var(--blanco);padding:.45rem 0;border-bottom:1px solid var(--linea)}
.menu-movil .btn{margin-top:1.2rem;justify-content:center}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--navy-950)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--navy-950) 10%,rgba(8,16,25,.6) 50%,rgba(8,16,25,.25) 100%),radial-gradient(90% 70% at 85% 20%,rgba(57,183,240,.22),transparent 60%)}
.hero__in{position:relative;z-index:2;padding-block:120px 60px;max-width:62ch}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.badge{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.45em .85em;border-radius:999px;border:1px solid var(--linea-fuerte);color:var(--niebla)}
.badge .dot{width:7px;height:7px;border-radius:999px;background:var(--celeste)}
.badge--gold{border-color:rgba(201,160,76,.5);color:var(--dorado)}
.hero h1{font-size:clamp(2.4rem,6.4vw,5rem);color:var(--blanco);margin:.15em 0 .45em}
.hero h1 .cel{color:var(--celeste)}.hero h1 .gold{background:var(--oro-texto);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem}
.hero__checks{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;font-size:.92rem;color:var(--niebla)}
.hero__checks span{display:inline-flex;gap:.5em;align-items:center}
.hero__checks span::before{content:"✓";color:var(--celeste);font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:2.4rem;background:var(--linea);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.stat{background:var(--navy-900);padding:1.1rem 1.2rem}
.stat b{font-family:var(--f-disp);font-size:clamp(1.6rem,3vw,2.4rem);color:var(--dorado);background:var(--oro-texto);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;line-height:1}
.stat small{color:var(--niebla);font-size:.8rem}
@media (max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* marquesina */
.marq{background:var(--navy-800);border-block:1px solid var(--linea);overflow:hidden;position:relative}
.marq__track{display:flex;gap:2.4rem;white-space:nowrap;padding:.9rem 0;width:max-content;animation:marq 32s linear infinite}
.marq:hover .marq__track,.marq:focus-within .marq__track{animation-play-state:paused}
.marq span{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla);display:inline-flex;gap:.7em;align-items:center}
.marq span::before{content:"◆";color:var(--celeste);font-size:.6em}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__track{animation:none;flex-wrap:wrap;white-space:normal;width:auto}}

/* secciones */
.sec{padding-block:clamp(62px,9vh,120px)}
.sec--clara{background:var(--nube);color:var(--tinta)}
.sec--clara h2{color:var(--tinta)}.sec--clara .lead{color:var(--tinta-60)}
.sec--clara .eyebrow{color:var(--dorado-600)}.sec--clara .eyebrow::before{background:var(--dorado-600)}
.sec__head{max-width:58ch;margin-bottom:clamp(1.8rem,4vw,3rem)}

/* servicios grid */
.serv{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.serv-card{background:var(--blanco);border:1px solid #dce4ee;border-radius:var(--radio);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;transition:transform var(--d) var(--ease),box-shadow var(--d),border-color var(--d)}
@media (hover:hover){.serv-card:hover{transform:translateY(-4px);box-shadow:var(--sombra-suave);border-color:var(--celeste)}}
.serv-card .tag{align-self:flex-start;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:.35em .7em;border-radius:999px;background:rgba(57,183,240,.14);color:var(--azul)}
.serv-card .tag--gold{background:rgba(201,160,76,.16);color:var(--dorado-600)}
.serv-card h3{color:var(--tinta)}
.serv-card .prob{color:var(--tinta-60);font-size:.92rem;margin:0}
.serv-card ul{list-style:none;padding:0;margin:.3rem 0 .6rem;display:grid;gap:.35rem}
.serv-card li{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem;color:var(--tinta)}
.serv-card li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.5em;border-radius:2px;background:var(--celeste);transform:rotate(45deg)}
.serv-card .acc{margin-top:auto;display:flex;gap:1rem;align-items:center;padding-top:.6rem}
.serv-card .acc a{font-weight:700;font-size:.9rem;color:var(--azul)}
.serv-card .acc a.g{color:var(--dorado-600)}
@media (max-width:900px){.serv{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.serv{grid-template-columns:1fr}}

/* banda CTA */
.banda{background:linear-gradient(120deg,var(--navy-800),var(--azul));border-radius:var(--radio);padding:clamp(1.6rem,4vw,2.6rem);display:flex;gap:1.4rem;align-items:center;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--sombra)}
.banda h3{color:var(--blanco);max-width:40ch}

/* proceso */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:p}
.paso{background:var(--navy-800);border:1px solid var(--linea);border-radius:var(--radio);padding:1.4rem;position:relative}
.paso::before{counter-increment:p;content:counter(p,decimal-leading-zero);font-family:var(--f-disp);font-size:2.4rem;color:var(--celeste);opacity:.6;display:block;line-height:1;margin-bottom:.5rem}
.paso b{display:block;font-family:var(--f-disp);font-size:1.2rem;color:var(--blanco);margin-bottom:.3rem}
.paso p{margin:0;font-size:.92rem;color:var(--niebla)}
@media (max-width:860px){.pasos{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pasos{grid-template-columns:1fr}}

/* razones (metrics) */
.razones{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.razon{text-align:left;padding:1.2rem;border-radius:var(--radio);background:rgba(255,255,255,.03);border:1px solid var(--linea)}
.razon b{font-family:var(--f-disp);font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--dorado);display:block;line-height:1}
.razon small{color:var(--niebla);font-size:.86rem}
@media (max-width:760px){.razones{grid-template-columns:1fr 1fr}}

/* tecnología tabs */
.tec{display:grid;grid-template-columns:260px 1fr;gap:1.4rem}
.tec__tabs{display:flex;flex-direction:column;gap:.4rem}
.tec__tab{text-align:left;padding:.9rem 1rem;border-radius:var(--radio-sm);border:1px solid var(--linea);background:rgba(255,255,255,.02);color:var(--niebla);font-weight:600;transition:background var(--d),border-color var(--d)}
.tec__tab[aria-selected="true"]{background:linear-gradient(120deg,rgba(57,183,240,.16),rgba(201,160,76,.1));border-color:var(--celeste);color:var(--blanco)}
.tec__panel{position:relative;border-radius:var(--radio);overflow:hidden;min-height:360px;border:1px solid var(--linea);background:var(--navy-800)}
.tec__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4}
.tec__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,32,48,.3),rgba(8,16,25,.92))}
.tec__cuerpo{position:relative;z-index:2;padding:clamp(1.4rem,3vw,2.2rem);height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem}
.tec__cuerpo h3{color:var(--blanco)}
[data-swap]{transition:opacity var(--dn) var(--ease)}[data-swap].out{opacity:0}
@media (max-width:860px){.tec{grid-template-columns:1fr}.tec__tabs{flex-direction:row;flex-wrap:wrap}}

/* sectores grid */
.sect{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.sect a{position:relative;border-radius:var(--radio);overflow:hidden;min-height:200px;display:flex;align-items:flex-end;border:1px solid var(--linea);background:var(--navy-800)}
.sect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;transition:transform var(--dn) var(--ease)}
.sect a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(8,16,25,.9))}
@media (hover:hover){.sect a:hover img{transform:scale(1.06)}}
.sect b{position:relative;z-index:2;padding:1rem;font-family:var(--f-disp);font-weight:700;color:var(--blanco);font-size:1.1rem}
@media (max-width:900px){.sect{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:560px){.sect{grid-template-columns:1fr 1fr}}

/* cobertura */
.cob{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.cob__prov{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.cob__prov span{font-family:var(--f-mono);font-size:.78rem;padding:.45em .9em;border-radius:999px;border:1px solid var(--linea-fuerte);color:var(--niebla)}
.cob__panel{position:relative;border-radius:var(--radio);overflow:hidden;min-height:320px;display:flex;align-items:flex-end;box-shadow:var(--sombra)}
.cob__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cob__panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(8,16,25,.9))}
.cob__panel div{position:relative;z-index:2;padding:1.4rem}
@media (max-width:860px){.cob{grid-template-columns:1fr}}

/* cumplimiento */
.cumple{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cumple div{background:var(--blanco);border:1px solid #dce4ee;border-radius:var(--radio-sm);padding:1.1rem}
.cumple b{color:var(--tinta);font-family:var(--f-disp);font-size:1.05rem;display:block;margin-bottom:.2rem}
.cumple p{color:var(--tinta-60);font-size:.86rem;margin:0}
@media (max-width:860px){.cumple{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cumple{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:.6rem;max-width:860px}
.faq details{border:1px solid var(--linea);border-radius:var(--radio-sm);background:rgba(255,255,255,.02);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1rem 1.2rem;font-weight:700;color:var(--blanco);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--celeste);font-size:1.3rem;transition:transform var(--d)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0;padding:0 1.2rem 1.1rem;color:var(--niebla)}

/* cotización */
.conv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
.form-card{background:var(--blanco);color:var(--tinta);border-radius:var(--radio);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--sombra)}
.form-card h3{color:var(--tinta)}
.campo{display:grid;gap:.3rem;margin-bottom:.9rem}
.campo label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-60)}
.campo input,.campo select{padding:.72em .9em;border-radius:9px;border:1px solid #cdd6e0;background:var(--nube);color:var(--tinta);font:inherit}
.campo input:focus,.campo select:focus{border-color:var(--celeste);box-shadow:0 0 0 3px rgba(57,183,240,.25);outline:none}
.campo.fila{grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:520px){.campo.fila{grid-template-columns:1fr}}
.aviso{font-size:.84rem;color:var(--tinta-60);border-left:3px solid var(--celeste);padding-left:.8rem;margin:.3rem 0 1rem}
.form-estado{min-height:1.4em;font-weight:600;font-size:.94rem}
.form-estado.ok{color:#1d7a46}.form-estado.err{color:#b3261e}
.conv__lado .vid{position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:16/9;background:var(--grafito);box-shadow:var(--sombra);display:grid;place-items:center}
.conv__lado .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.conv__lado .vid .play{position:relative;z-index:2;display:flex;flex-direction:column;gap:.7rem;align-items:center;color:var(--blanco);font-weight:600}
.conv__lado .vid .disco{width:66px;height:66px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:1px solid var(--linea-fuerte)}
@media (hover:hover){.conv__lado .vid:hover .disco{background:var(--celeste);color:var(--grafito)}}

/* pie + whatsapp */
.pie{background:var(--navy-950);padding-block:clamp(2.2rem,5vw,3.4rem);border-top:1px solid var(--linea)}
.pie__grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem;align-items:center}
.pie img{height:38px}
.pie small{color:rgba(223,231,239,.5);font-family:var(--f-mono);font-size:.72rem}
.wa{position:fixed;right:18px;bottom:18px;z-index:120;width:58px;height:58px;border-radius:999px;background:#25d366;color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 12px 28px -8px rgba(37,211,102,.6);transition:transform var(--d)}
@media (hover:hover){.wa:hover{transform:scale(1.06)}}
.wa svg{width:30px;height:30px}

/* revelados */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--dn) var(--ease),transform var(--dn) var(--ease)}
.rv.vis{opacity:1;transform:none}
.rv-st>*{opacity:0;transform:translateY(16px);transition:opacity var(--dn) var(--ease),transform var(--dn) var(--ease)}
.rv-st.vis>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv,.rv-st>*{opacity:1;transform:none;transition:none}.hero__bg img{transform:none}}

/* modal */
.modal{position:fixed;inset:0;z-index:150;display:none;place-items:center;background:rgba(5,10,18,.86);backdrop-filter:blur(8px);padding:var(--gutter)}
.modal.open{display:grid}
.modal__panel{width:min(100%,900px);background:var(--navy-800);border:1px solid var(--linea-fuerte);border-radius:var(--radio);overflow:hidden}
.modal__bar{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.1rem;border-bottom:1px solid var(--linea)}
.modal__x{width:38px;height:38px;border-radius:999px;border:1px solid var(--linea-fuerte)}
.modal__body{padding:2rem;text-align:center;color:var(--niebla)}

/* ===== destellos dorados en selecciones (gráficos dinámicos) ===== */
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
.tec__tab{position:relative;isolation:isolate}
.tec__tab[aria-selected="true"]::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;padding:1px;
  background:conic-gradient(from var(--ga),transparent 0 70%,var(--dorado) 82%,var(--celeste) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:giragold 2.6s linear infinite;
}
@keyframes giragold{to{--ga:360deg}}
.btn--gold{isolation:isolate}
.btn--gold::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--ga),transparent 0 72%,rgba(201,160,76,.9) 85%,rgba(125,211,252,.8) 94%,transparent 100%);
  filter:blur(5px);opacity:0;transition:opacity var(--d);animation:giragold 3s linear infinite;
}
@media (hover:hover){.btn--gold:hover::before{opacity:.8}}
.serv-card{position:relative;isolation:isolate}
.serv-card::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;box-shadow:0 0 0 0 rgba(201,160,76,0);transition:box-shadow var(--dn)}
@media (hover:hover){.serv-card:hover::after{box-shadow:0 0 34px -6px rgba(201,160,76,.45)}}
@media (prefers-reduced-motion:reduce){
  .tec__tab[aria-selected="true"]::before,.btn--gold::before{animation:none;background:var(--dorado)}
  .btn--gold::before{opacity:0}
}

/* ================= v5 · efectos dinámicos ================= */
/* (22/10) Se retiraron el rayo de luz y el destello grande del cursor: ver «retículo» al final */

/* host de canvas (red neuronal / lluvia) */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#mapFx{opacity:.4}

/* Marcos de esquina del hero + coords */
.hero__frame{position:absolute;z-index:2;width:34px;height:34px;border:2px solid rgba(57,183,240,.5);pointer-events:none}
.hero__frame.tl{top:92px;left:var(--gutter);border-right:0;border-bottom:0}
.hero__frame.tr{top:92px;right:var(--gutter);border-left:0;border-bottom:0}
.hero__frame.bl{bottom:28px;left:var(--gutter);border-right:0;border-top:0}
.hero__frame.br{bottom:28px;right:var(--gutter);border-left:0;border-top:0}
.coords{position:absolute;right:var(--gutter);bottom:30px;z-index:2;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;color:rgba(223,231,239,.55);text-align:right;line-height:1.5}
.coords .rec{color:var(--dorado)}
@media (max-width:760px){.coords{display:none}.hero__frame{display:none}}

/* Mapa interactivo de Costa Rica */
.mapa{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
.mapa__svg{position:relative;border-radius:var(--radio);overflow:hidden;background:radial-gradient(120% 90% at 70% 20%,rgba(27,77,126,.4),var(--navy-950));border:1px solid var(--linea);min-height:340px}
.mapa__svg svg{width:100%;height:auto;display:block}
.prov{fill:rgba(57,183,240,.08);stroke:rgba(57,183,240,.45);stroke-width:1.4;cursor:pointer;transition:fill .45s var(--ease),filter .45s}
@media (hover:hover){.prov:hover{fill:rgba(57,183,240,.22)}}
.prov.on{fill:url(#gprov);stroke:var(--celeste);filter:drop-shadow(0 0 14px rgba(57,183,240,.7))}
.prov-dot{fill:#fff;filter:drop-shadow(0 0 6px var(--celeste));opacity:0;transition:opacity .4s}
.prov-dot.on{opacity:1}
.prov-lbl{font-family:var(--f-disp);font-weight:700;fill:#fff;font-size:20px;paint-order:stroke;stroke:rgba(8,16,25,.8);stroke-width:4px;opacity:0;transition:opacity .4s}
.prov-lbl.on{opacity:1}
.mapa__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.mapa__pills button{font-family:var(--f-mono);font-size:.82rem;padding:.5em 1em;border-radius:999px;border:1px solid var(--linea-fuerte);color:var(--niebla);transition:background .3s,color .3s,border-color .3s}
.mapa__pills button[aria-pressed="true"]{background:var(--celeste);color:var(--grafito);border-color:var(--celeste)}
.mapa__info{margin-top:1rem;min-height:3em}
.mapa__info h3{color:#fff}

/* banda CTA con red neuronal */
.ctaband{position:relative;overflow:hidden;background:linear-gradient(110deg,rgba(27,77,126,.5),var(--navy-900) 60%);border-radius:var(--radio);padding:clamp(2.4rem,6vw,4rem) clamp(1.4rem,4vw,3rem);text-align:center;border:1px solid var(--linea)}
.ctaband .fx-canvas{opacity:.6}
.ctaband__in{position:relative;z-index:2;max-width:46ch;margin-inline:auto}
.ctaband h2{color:#fff}.ctaband h2 .cel{color:var(--celeste)}
.ctaband__acc{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
@media (max-width:860px){.mapa{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.prov{transition:none}}

/* mapa real */
.prov{vector-effect:non-scaling-stroke;stroke-width:1}
.prov-lbl{font-size:16px}

/* ===== v5 · contenido fusionado de v3 (propuestas, configurador, demostración) ===== */
.planes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem)}
.plan{position:relative;background:var(--blanco);color:var(--tinta);border-radius:var(--radio);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--sombra-suave);border:1px solid #dce4ee}
.plan h3{color:var(--tinta);font-size:clamp(1.5rem,3vw,2.1rem)}
.plan__modo{font-family:var(--f-mono);font-size:.82rem;color:var(--dorado-600);margin:.2rem 0 1rem}
.plan__lista{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.5rem}
.plan__lista li{display:flex;gap:.6rem;align-items:flex-start;color:var(--tinta-60)}
.plan__lista li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.55em;border-radius:2px;background:var(--celeste);transform:rotate(45deg)}
.plan__nota{font-size:.82rem;color:var(--tinta-60);margin:0 0 1.1rem}
.plan--estrella{border:2px solid var(--dorado);box-shadow:0 24px 60px -30px rgba(201,160,76,.5)}
.plan__sello{position:absolute;top:-.8rem;left:1.4rem;background:var(--dorado);color:var(--grafito);font-family:var(--f-mono);font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.4em .9em;border-radius:999px}
@media (max-width:760px){.planes{grid-template-columns:1fr}}
.cfg{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
.cfg__g{border:0;margin:0 0 1.1rem;padding:0}
.cfg__g legend{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--niebla);margin-bottom:.5rem}
.cfg__ops{display:flex;flex-wrap:wrap;gap:.5rem}
.cfg__ops button{padding:.55em 1em;border-radius:999px;border:1px solid var(--linea-fuerte);background:rgba(255,255,255,.04);color:var(--niebla);font-weight:600;font-size:.88rem;transition:background .2s,color .2s,border-color .2s}
.cfg__ops button[aria-pressed="true"]{background:var(--celeste);color:var(--grafito);border-color:var(--celeste)}
.cfg__res{background:linear-gradient(140deg,rgba(57,183,240,.12),var(--navy-800));color:var(--niebla);border-radius:var(--radio);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--sombra);border:1px solid var(--linea)}
.cfg__res h3{color:#fff;margin:.3rem 0 .5rem}
@media (max-width:860px){.cfg{grid-template-columns:1fr}}
.demo__pasos{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.demo-paso{flex:1 1 150px;text-align:left;padding:.85rem 1rem;border-radius:var(--radio-sm);border:1px solid var(--linea);background:rgba(255,255,255,.02);transition:border-color .2s,background .2s}
.demo-paso .et{font-family:var(--f-mono);font-size:.68rem;color:var(--celeste)}
.demo-paso b{display:block;font-family:var(--f-disp);color:#fff;font-size:1.02rem;margin-top:.2rem}
.demo-paso[aria-selected="true"]{border-color:var(--celeste);background:linear-gradient(120deg,rgba(57,183,240,.14),transparent)}
.demo__escena{display:grid;grid-template-columns:1.1fr .9fr;gap:1.3rem;border-radius:var(--radio);border:1px solid var(--linea);background:var(--navy-800);padding:clamp(1.3rem,3vw,2.1rem);box-shadow:var(--sombra)}
.demo__visual{position:relative;border-radius:var(--radio-sm);overflow:hidden;min-height:240px;background:var(--grafito);display:grid;place-items:center}
.demo__glyph{font-family:var(--f-disp);font-size:4.4rem;color:var(--celeste);transition:transform .5s var(--ease)}
.demo__ficha dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;margin:0}
.demo__ficha dt{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;color:rgba(223,231,239,.55)}
.demo__ficha dd{margin:0;color:#fff;font-weight:600}
.demo__barra{display:flex;gap:.5rem;margin-top:1rem}
.demo__barra button{padding:.5em 1em;border-radius:999px;border:1px solid var(--linea-fuerte);font-size:.85rem;font-weight:600;color:#fff}
.demo__badge{position:absolute;top:1rem;left:1rem;z-index:3;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--celeste);background:rgba(16,24,32,.7);padding:.4em .8em;border-radius:999px}
@media (max-width:860px){.demo__escena{grid-template-columns:1fr}}

/* mapa: base azul profundo, resalta al pasar el cursor — transición suave */
.mapa__svg{box-shadow:0 0 50px -12px rgba(57,183,240,.18) inset}
.mapa__svg svg{filter:drop-shadow(0 0 26px rgba(57,183,240,.14))}
.prov{fill:rgba(27,77,126,.34);stroke:rgba(57,183,240,.42);
  transition:fill .5s cubic-bezier(.4,0,.2,1),stroke .5s cubic-bezier(.4,0,.2,1),filter .5s cubic-bezier(.4,0,.2,1)}
.prov:hover,.prov.on{fill:url(#gprov);stroke:var(--celeste);filter:drop-shadow(0 0 16px rgba(57,183,240,.85))}

/* alternativa: mapa en celeste, resalta en dorado */
.cobertura--oro .mapa__svg{box-shadow:0 0 50px -12px rgba(201,160,76,.16) inset}
.cobertura--oro .mapa__svg svg{filter:drop-shadow(0 0 26px rgba(201,160,76,.13))}
.cobertura--oro .prov{fill:rgba(57,183,240,.16);stroke:rgba(57,183,240,.5)}
.cobertura--oro .prov:hover,.cobertura--oro .prov.on{fill:rgba(201,160,76,.82);stroke:var(--dorado);filter:drop-shadow(0 0 16px rgba(201,160,76,.8))}
.cobertura--oro .prov-dot{filter:drop-shadow(0 0 6px var(--dorado))}
.cobertura--oro .prov-lbl{stroke:rgba(8,16,25,.85)}
.cobertura--oro .mapa__pills button[aria-pressed="true"]{background:var(--dorado);color:var(--grafito);border-color:var(--dorado)}

/* conmutador de paleta del mapa */
.pal-switch{display:inline-flex;gap:.25rem;padding:.25rem;border:1px solid var(--linea-fuerte);border-radius:999px;background:rgba(10,20,32,.5)}
.pal-switch button{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;padding:.4em .9em;border-radius:999px;color:var(--niebla);border:0;background:transparent;cursor:pointer;transition:background .3s,color .3s}
.pal-switch button[aria-pressed="true"]{background:var(--celeste);color:var(--grafito)}
.cobertura--oro .pal-switch button[aria-pressed="true"]{background:var(--dorado);color:var(--grafito)}

/* lluvia de números discreta de fondo en secciones oscuras */
/* (22/10) Se retiró la lluvia de números de las secciones oscuras */


/* ================= v6 · actualización consolidada de Lex (22/10/2026) ================= */
/* Hero: sala de monitoreo inmóvil. Mientras llega el archivo aprobado, fondo azul marino profundo sin fotografía. */
.hero__bg--sala{background:radial-gradient(70% 80% at 78% 45%,rgba(27,77,126,.32),transparent 70%),var(--navy-950)}

/* (22/10, punto 15) se descartó la mira técnica: ver «cursor-destello» al final */

/* Sectores: cinco escenas distintas con una misma dirección fotográfica azul marino / cian / dorado y zona inferior legible */
.sect a{min-height:230px;border-color:rgba(201,160,76,.18);background:var(--navy-900);isolation:isolate}
.sect img{opacity:1;filter:saturate(.78) contrast(1.06) brightness(.82)}
.sect a::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(160deg,rgba(57,183,240,.55),rgba(27,77,126,.35) 45%,rgba(201,160,76,.28))}
.sect a::after{z-index:1;background:linear-gradient(180deg,rgba(8,16,25,0) 35%,rgba(8,16,25,.55) 62%,rgba(8,16,25,.95) 100%)}
.sect b{z-index:2;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.sect b::after{content:"";display:block;width:28px;height:2px;margin-top:.45rem;background:var(--dorado);transition:width var(--dn) var(--ease)}
@media (hover:hover){.sect a:hover b::after{width:56px}.sect a:hover{border-color:rgba(201,160,76,.5)}}

/* Propuestas: tarjetas azul marino con doble borde fino dorado, profundidad interior, halo dorado localizado (dirección aprobada) */
.sec--planes{background:radial-gradient(80% 60% at 50% 0%,rgba(27,77,126,.35),transparent 70%),var(--navy-950);color:var(--niebla)}
.sec--planes .eyebrow{color:var(--dorado)}.sec--planes .eyebrow::before{background:var(--dorado)}
.sec--planes h2{color:var(--blanco)}.sec--planes .lead{color:var(--niebla)}
.plan{color-scheme:dark;background:linear-gradient(180deg,#10264a 0%,#0b1a33 55%,#091427 100%);color:var(--niebla);border-radius:22px;
  border:1px solid rgba(201,160,76,.55);box-shadow:inset 0 0 0 5px rgba(9,20,39,.9),inset 0 0 0 6px rgba(201,160,76,.32),inset 0 30px 60px -30px rgba(57,183,240,.18),0 26px 60px -30px rgba(0,0,0,.85);
  display:flex;flex-direction:column;overflow:hidden}
.plan>*{position:relative;z-index:1}
.plan h3{color:var(--blanco)}
.plan__modo{color:var(--dorado)}
.plan__lista li{color:var(--niebla)}
.plan__lista li::before{content:"✓";width:auto;height:auto;margin:0;background:none;transform:none;color:var(--dorado);font-weight:700;line-height:1.6}
.plan__nota{color:rgba(223,231,239,.62)}
.plan .btn{align-self:flex-start;margin-top:auto;border-radius:999px;padding:.75em .8em .75em 1.3em}
.plan .btn .ic{border-radius:50%;width:1.9em;height:1.9em;background:rgba(16,24,32,.22)}
.plan__sello{position:static;align-self:flex-start;display:inline-flex;gap:.45em;align-items:center;margin:0 0 1rem;border-radius:999px}
.plan__sello::before{content:"★";font-size:.9em}
.plan--estrella{border-color:rgba(201,160,76,.85);box-shadow:inset 0 0 0 5px rgba(9,20,39,.9),inset 0 0 0 6px rgba(201,160,76,.5),inset 0 30px 60px -30px rgba(57,183,240,.2),0 30px 70px -28px rgba(201,160,76,.45)}
.plan--estrella::after{content:"";position:absolute;left:12%;right:12%;bottom:-40px;height:120px;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%,rgba(201,160,76,.38),transparent 70%);filter:blur(8px)}
.plan:not(.plan--estrella){border-color:rgba(201,160,76,.32);box-shadow:inset 0 0 0 5px rgba(9,20,39,.9),inset 0 0 0 6px rgba(57,183,240,.22),0 22px 50px -30px rgba(0,0,0,.8)}
.plan:not(.plan--estrella) .plan__lista li::before{color:#5fd39a}
.plan:not(.plan--estrella) .plan__modo{color:var(--celeste-soft)}
.plan__chip{align-self:flex-start;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:.35em .8em;border-radius:999px;border:1px solid rgba(125,211,252,.45);color:var(--celeste-soft);margin:0 0 1rem}
.plan .btn--ghost{color:var(--blanco);border-color:rgba(125,211,252,.4)}
@media (max-width:760px){.plan{padding:1.4rem 1.2rem 1.5rem}.plan .btn{align-self:stretch;justify-content:space-between}}


/* ================= v7 · ajustes de Lex (22/10/2026, 16:29) ================= */
/* Dorado metálico sobrio en superficies: sellos, conmutadores y botón saltar */
.plan__sello,.skip,.cobertura--oro .mapa__pills button[aria-pressed="true"],.cobertura--oro .pal-switch button[aria-pressed="true"]{background:var(--oro-metal);color:#1c1508;box-shadow:inset 0 1px 0 rgba(255,250,232,.7),inset 0 -1px 0 rgba(96,66,16,.4)}
.badge--gold .dot{background:var(--oro-metal)!important}

/* Revelado reversible: fundido y desplazamiento corto, simétrico al bajar y al subir; secuencia leve dentro del bloque */
.rv{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.rv.vis{opacity:1;transform:none}
.rv-st>*{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--k,0)*55ms)}
.rv-st.vis>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv,.rv-st>*{opacity:1!important;transform:none!important;transition:none!important}}

/* Hero: sala de monitoreo aprobada, inmóvil; capa de pantallas en coordenadas de la imagen (1740×904) */
.hero__bg--sala{background:var(--navy-950);overflow:hidden}
.sala{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0}
.hero__bg .sala__img{width:1672px;height:941px;max-width:none;display:block;opacity:1;object-fit:fill}
.sala__capa{position:absolute;inset:0;pointer-events:none}
.sala__capa>div{position:absolute}
.hero__bg--sala::after{background:linear-gradient(90deg,var(--navy-950) 0%,rgba(8,16,25,.95) 30%,rgba(8,16,25,.8) 44%,rgba(8,16,25,.38) 57%,rgba(8,16,25,.08) 72%,rgba(8,16,25,0) 100%),linear-gradient(180deg,rgba(8,16,25,.35),transparent 20%,transparent 62%,var(--navy-950) 100%)}
/* el texto del hero va a la izquierda, sobre el espacio oscuro de la sala; las pantallas quedan a la derecha */
.hero .hero__in{margin-inline:max(var(--gutter),calc((100% - var(--ancho))/2)) auto}
@media (max-width:760px){.hero__bg--sala::after{background:linear-gradient(180deg,rgba(8,16,25,.72) 0%,rgba(8,16,25,.86) 55%,rgba(8,16,25,.94) 100%)}}
.p-cam{overflow:hidden;border-radius:2px}
.p-cam::after{content:"";position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(180deg,transparent,rgba(170,220,255,.09),transparent);transform:translateY(-110%);animation:p-barrido 8s linear infinite;animation-delay:var(--d)}
.p-hora{position:absolute;left:5px;bottom:4px;font:600 8px/1 var(--f-mono);letter-spacing:.05em;color:rgba(222,236,255,.82);text-shadow:0 0 3px rgba(0,0,0,.95);white-space:pre}
.p-rec{position:absolute;right:6px;top:6px;width:5px;height:5px;border-radius:50%;background:#e5484d;animation:p-rec 2s steps(1) infinite}
.p-nodo::before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:1.4px solid rgba(232,196,110,.85);opacity:0;animation:p-pulso 7.7s ease-out infinite;animation-delay:var(--d)}
.p-sensor::before{content:"";position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,128,.7),transparent 70%);opacity:0;animation:p-brillo 6.3s ease-in-out infinite;animation-delay:var(--d)}
.p-sensor.alerta::before{background:radial-gradient(circle,rgba(255,128,96,.9),transparent 70%);animation:p-brillo 1.1s ease-in-out infinite}
.p-graf svg{width:100%;height:100%;overflow:visible;display:block}
.p-graf polyline{stroke:rgba(125,211,252,.9);stroke-width:1.3;filter:drop-shadow(0 0 2px rgba(57,183,240,.7))}
.p-alerta{border:1.4px solid transparent;border-radius:3px;transition:border-color .7s,box-shadow .7s}
.p-alerta.on{border-color:rgba(236,200,118,.92);box-shadow:0 0 14px rgba(236,200,118,.4)}
.p-etq{position:absolute;left:4px;top:-15px;font:700 7.5px/1 var(--f-mono);letter-spacing:.06em;color:#1c1508;background:var(--oro-metal);padding:3px 5px;border-radius:2px;opacity:0;transition:opacity .7s}
.p-alerta.on .p-etq{opacity:1}
.hero:not(.anim-on) .sala__capa *,.hero:not(.anim-on) .sala__capa *::before,.hero:not(.anim-on) .sala__capa *::after,.hero:not(.anim-on) .hero__rayo::before{animation-play-state:paused}
@keyframes p-barrido{to{transform:translateY(720%)}}
@keyframes p-rec{50%{opacity:0}}
@keyframes p-pulso{0%{transform:scale(.4);opacity:0}6%{opacity:.85}24%{transform:scale(1.5);opacity:0}100%{opacity:0}}
@keyframes p-brillo{0%,100%{opacity:0}45%,55%{opacity:.95}}
/* un solo rayo de luz: estrecho, tenue, lento y con pausas; solo sobre las pantallas, nunca sobre el texto */
.hero__rayo{position:absolute;top:0;bottom:0;left:56%;right:0;overflow:hidden;pointer-events:none;z-index:1}
.hero__rayo::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:70px;background:linear-gradient(90deg,transparent,rgba(180,220,255,.085) 42%,rgba(232,206,150,.07) 58%,transparent);
  transform:translateX(-140px) skewX(-16deg);opacity:0;animation:rayo 24s ease-in-out infinite}
@keyframes rayo{0%{transform:translateX(-140px) skewX(-16deg);opacity:0}5%{opacity:1}32%{transform:translateX(48vw) skewX(-16deg);opacity:1}36%,100%{transform:translateX(48vw) skewX(-16deg);opacity:0}}
@media (max-width:760px),(prefers-reduced-motion:reduce){.hero__rayo{display:none}}
/* con movimiento reducido la capa de pantallas se muestra estática (mismas cifras de demostración) */

/* Tecnología: red neuronal tenue y localizada sobre la escena del panel */
.tec__panel{position:relative}
.tec__red{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:screen}
.tec__cuerpo{position:relative;z-index:2}

/* Banda CTA: un haz de luz suave, lento y ocasional (solo esta banda) */
.banda{position:relative;overflow:hidden;isolation:isolate}
.banda::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:120px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(125,211,252,.12),rgba(214,178,98,.10),transparent);transform:translateX(-200px) skewX(-18deg);opacity:0}
.banda.en-vista::after{animation:haz 16s ease-in-out infinite}
@keyframes haz{0%{transform:translateX(-200px) skewX(-18deg);opacity:0}6%{opacity:1}34%{transform:translateX(1400px) skewX(-18deg);opacity:1}38%,100%{transform:translateX(1400px) skewX(-18deg);opacity:0}}
@media (max-width:760px),(prefers-reduced-motion:reduce){.banda::after{display:none}}

/* Caso operativo: plano funcional que cambia con cada paso (sin el círculo decorativo) */
.demo__visual{display:block;padding:2.6rem .8rem .6rem;background:radial-gradient(120% 90% at 30% 20%,rgba(27,77,126,.35),transparent 70%),var(--grafito)}
.caso{width:100%;height:auto;display:block}
.caso .c-perim{fill:rgba(57,183,240,.03);stroke:rgba(125,211,252,.38);stroke-width:1.1;stroke-dasharray:5 4}
.caso .c-edif{fill:rgba(57,183,240,.07);stroke:rgba(125,211,252,.42);stroke-width:1}
.caso .c-caseta{fill:rgba(57,183,240,.14);stroke:rgba(125,211,252,.55);stroke-width:1}
.caso .c-txt{font:500 8.5px var(--f-mono);fill:rgba(223,231,239,.5)}
.caso .c-mini{font:600 7.5px var(--f-mono);fill:rgba(223,231,239,.85);letter-spacing:.03em}
.caso .c-porton line{stroke:rgba(223,231,239,.75);stroke-width:3;stroke-linecap:round}
.caso .c-porton-b{transform-box:view-box;transform-origin:180px 40px;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.caso:not([data-paso="4"]) .c-porton-b{transform:rotate(34deg)}   /* la hoja abre hacia dentro del predio */
.caso .c-sen{fill:#5fd39a;transition:fill .6s}
.caso:not([data-paso="4"]) .c-sen{fill:#e0a948}
.caso .c-pulso{fill:none;stroke:#e0a948;stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.caso[data-paso="0"] .c-pulso{animation:c-pulso 2.6s ease-out infinite}
@keyframes c-pulso{0%{transform:scale(1);opacity:.9}70%{transform:scale(3.2);opacity:0}100%{opacity:0}}
.caso .c-ruta-of,.caso .c-ruta-u{fill:none;stroke-width:1.4;stroke-dasharray:3 4;opacity:0;transition:opacity .6s}
.caso .c-ruta-of{stroke:rgba(125,211,252,.85)}.caso .c-ruta-u{stroke:rgba(214,178,98,.85)}
.caso[data-paso="1"] .c-ruta-of,.caso[data-paso="2"] .c-ruta-u{opacity:1}
.caso .c-oficial{fill:#7dd3fc;stroke:#0b1a2a;stroke-width:1.5}
.caso .c-unidad rect{fill:#d6b062;stroke:#0b1a2a;stroke-width:1.2}
.caso .c-unidad{opacity:0;transition:opacity .6s}.caso[data-paso="2"] .c-unidad,.caso[data-paso="3"] .c-unidad,.caso[data-paso="4"] .c-unidad{opacity:1}
.caso .c-tel>rect:first-child{fill:rgba(16,24,32,.9);stroke:rgba(223,231,239,.35)}
.caso .c-noti{fill:rgba(57,183,240,.08);stroke:rgba(125,211,252,.3);transition:fill .6s,stroke .6s}
.caso .c-tel{opacity:.35;transition:opacity .6s}.caso[data-paso="3"] .c-tel,.caso[data-paso="4"] .c-tel{opacity:1}
.caso[data-paso="3"] .c-noti{fill:rgba(214,178,98,.18);stroke:#d6b062}
.caso .c-noti-e{fill:#e6c682}
.caso .c-doc rect,.caso .c-doc line{fill:rgba(16,24,32,.85);stroke:rgba(223,231,239,.35)}
.caso .c-doc{opacity:.3;transition:opacity .6s}.caso[data-paso="4"] .c-doc{opacity:1}
.caso .c-sello{fill:none;stroke:#d6b062;stroke-width:1.6}
.caso[data-paso="4"] .c-sello{fill:rgba(214,178,98,.25)}
.caso .c-enlace path{fill:none;stroke:rgba(214,178,98,.7);stroke-width:1.2;stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.2s ease}
.caso .c-enlace path{stroke-dashoffset:0}
.caso .c-caso rect{fill:rgba(16,24,32,.92);stroke:#d6b062;stroke-width:1.2}
.caso .c-tele{font:500 8px var(--f-mono);fill:rgba(125,211,252,.85)}
@media (prefers-reduced-motion:reduce){.caso *{transition:none!important;animation:none!important}}


/* ================= v7b · paleta final de Lex (22/10/2026; prevalece sobre el dorado predominante) =================
   ≈70 % azul marino / blanco / neutros · ≈20 % gris espacial metálico (estructura, marcos, bordes pasivos, separadores,
   controles inactivos) · ≈10 % dorado metálico (CTA principales, estados seleccionados, cifras prioritarias).
   Celeste solo para tecnología, sensores, mapas y datos en vivo. */
:root{
  --titanio:#9aa5b4; --titanio-osc:#5a6573; --titanio-borde:rgba(196,206,220,.30);
  --gris-metal:linear-gradient(180deg,#3a434f 0%,#28303a 46%,#1c2229 100%);
  --gris-metal-claro:linear-gradient(180deg,#f6f8fa 0%,#e6eaef 55%,#d6dce3 100%);
  --iris:linear-gradient(90deg,#2b3038 0%,#7d8693 12%,#463a5e 26%,#21406b 40%,#2c5a58 54%,#dde4ec 64%,#8a93a0 76%,#3a3550 88%,#2b3038 100%);
}
/* textos de sección: titanio en lugar de dorado o celeste (el celeste queda para tecnología y datos) */
.eyebrow{color:var(--titanio)}
.sec--clara .eyebrow,.sec--planes .eyebrow{color:var(--titanio-osc)}
.sec--planes .eyebrow{color:var(--titanio)}
#tecnologia .eyebrow,#cobertura .eyebrow,#demostracion .eyebrow{color:var(--celeste)}
.sec--clara#demostracion .eyebrow{color:#1b6fa0}
/* controles inactivos: gris espacial metálico */
.btn--ghost,.cfg__ops button,.mapa__pills button,.tec__tab,.demo-paso,.pal-switch button,.demo__barra button{background:var(--gris-metal);color:#e8edf3;border:1px solid var(--titanio-borde);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 16px -12px rgba(0,0,0,.8)}
.sec--clara .demo-paso{background:var(--gris-metal-claro);border-color:rgba(70,82,98,.22);box-shadow:inset 0 1px 0 #fff,0 6px 16px -14px rgba(20,30,45,.5)}
.sec--clara .demo-paso b{color:var(--tinta)}.sec--clara .demo-paso .et{color:var(--titanio-osc)}
/* estados seleccionados: dorado metálico (en mapas y datos se mantiene el celeste) */
.cfg__ops button[aria-pressed="true"],.tec__tab[aria-selected="true"],.demo-paso[aria-selected="true"]{background:var(--oro-metal);color:#1c1508;border-color:rgba(255,238,190,.45);box-shadow:inset 0 1px 0 rgba(255,250,232,.75),inset 0 -1px 0 rgba(96,66,16,.4)}
.demo-paso[aria-selected="true"] b,.demo-paso[aria-selected="true"] .et{color:#1c1508}
.tec__tab[aria-selected="true"]::before{opacity:.55}
/* bordes y acentos pasivos: titanio */
.badge--gold{border-color:var(--titanio-borde);color:#e8edf3}
.badge--gold .dot{background:var(--celeste)!important}
.serv-card .tag--gold{background:rgba(90,101,115,.12);color:var(--titanio-osc)}
.sect a{border-color:var(--titanio-borde)}
.sect b::after{background:linear-gradient(90deg,#dfe5ec,#8a94a2)}
@media (hover:hover){.sect a:hover{border-color:rgba(214,222,232,.6)}}
.plan:not(.plan--estrella){border-color:var(--titanio-borde);box-shadow:inset 0 0 0 5px rgba(9,20,39,.9),inset 0 0 0 6px rgba(196,206,220,.20),0 22px 50px -30px rgba(0,0,0,.8)}
.plan:not(.plan--estrella) .plan__modo{color:var(--titanio)}
.plan__chip{border-color:var(--titanio-borde);color:var(--titanio)}
.marq span::before{color:var(--titanio)}
.coords .rec{color:var(--celeste)}

/* líneas horizontales: transición metálica muy tenue (grafito, titanio, amatista oscura, zafiro profundo, verde azulado
   ahumado y un reflejo plateado), lenta y con pausas; sin neón ni arcoíris */
.marq{border-block:0}
.marq::before,.marq::after,.pie::before,.hero::after,.eyebrow::before{background:var(--iris);background-size:320% 100%;animation:iris 30s ease-in-out infinite}
.marq::before,.marq::after{content:"";position:absolute;left:0;right:0;height:1px;opacity:.7;z-index:1}
.marq::before{top:0}.marq::after{bottom:0;animation-delay:-11s}
.pie{position:relative;border-top:0}
.pie::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;opacity:.65}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;opacity:.6;z-index:3}
.eyebrow::before{opacity:.9}
.sec--clara .eyebrow::before{opacity:.75}
@keyframes iris{0%,14%{background-position:0% 0}46%,60%{background-position:100% 0}92%,100%{background-position:0% 0}}
@media (max-width:760px){.marq::before,.marq::after,.pie::before,.hero::after,.eyebrow::before{animation:none;background-position:30% 0}}
@media (prefers-reduced-motion:reduce){.marq::before,.marq::after,.pie::before,.hero::after,.eyebrow::before{animation:none}}
/* servicios: tras retirar «Custodia de valores» quedan cinco tarjetas; la última fila se reparte el ancho sin huecos */
.serv{display:flex;flex-wrap:wrap;gap:1rem}
.serv>.serv-card{flex:1 1 300px}
/* números de los pasos del proceso en titanio (el celeste queda para tecnología y datos) */
.paso::before{color:var(--titanio);opacity:.75}
.paso{border-color:var(--titanio-borde)}

/* v7c · punto 13 de Lex: iridiscencia todavía más sutil. Línea de 1 px casi toda grafito/titanio y de baja opacidad;
   amatista, zafiro, verde azulado y plata solo en un reflejo breve y localizado que pasa despacio y se detiene.
   Se percibe al mirar con atención; no es una franja multicolor continua. */
:root{
  --linea-base:linear-gradient(90deg,rgba(58,64,74,.9) 0%,rgba(138,148,162,.9) 30%,rgba(92,100,112,.9) 55%,rgba(150,159,172,.9) 78%,rgba(58,64,74,.9) 100%);
  --linea-reflejo:linear-gradient(90deg,transparent 0%,rgba(84,70,120,.55) 22%,rgba(46,78,128,.6) 40%,rgba(222,230,240,.85) 50%,rgba(52,96,94,.55) 62%,transparent 100%);
}
.marq::before,.marq::after,.pie::before,.hero::after,.eyebrow::before{
  height:1px;background:var(--linea-reflejo),var(--linea-base);background-size:14% 100%,100% 100%;background-repeat:no-repeat;
  background-position:-20% 0,0 0;animation:reflejo 34s ease-in-out infinite}
.marq::before,.marq::after{opacity:.42}
.pie::before{opacity:.4}
.hero::after{opacity:.38}
.eyebrow::before{opacity:.55;background-size:60% 100%,100% 100%}
.sec--clara .eyebrow::before{opacity:.45}
.marq::after{animation-delay:-17s}
@keyframes reflejo{0%,58%{background-position:-20% 0,0 0}86%{background-position:120% 0,0 0}100%{background-position:120% 0,0 0}}
@media (max-width:760px){.marq::before,.marq::after,.pie::before,.hero::after,.eyebrow::before{animation:none;background:var(--linea-base)}}
@media (prefers-reduced-motion:reduce){.marq::before,.marq::after,.pie::before,.hero::after,.eyebrow::before{animation:none;background:var(--linea-base)}}


/* ================= v8 · puntos 14 y 15 de Lex (22/10/2026) ================= */
/* Hero muy tenue (tratamiento de portada corporativa): contraste reducido, velo azul marino y degradado
   localizado detrás del texto; el contenido, los CTA y la navegación dominan. */
.hero__bg .sala__img{filter:saturate(.7) contrast(.82) brightness(.72)}
.sala::after{content:"";position:absolute;inset:0;background:rgba(9,18,31,.46);pointer-events:none}
.hero__bg--sala::after{background:
  radial-gradient(58% 78% at 20% 52%,rgba(8,16,25,.95) 0%,rgba(8,16,25,.82) 42%,rgba(8,16,25,.32) 72%,rgba(8,16,25,0) 100%),
  linear-gradient(180deg,rgba(8,16,25,.6) 0%,rgba(8,16,25,0) 18%,rgba(8,16,25,0) 66%,var(--navy-950) 100%)}
@media (max-width:760px){.hero__bg--sala::after{background:linear-gradient(180deg,rgba(8,16,25,.78) 0%,rgba(8,16,25,.86) 55%,rgba(8,16,25,.95) 100%)}}
.hero__nota{position:absolute;right:max(var(--gutter),calc((100% - var(--ancho))/2));bottom:18px;z-index:2;margin:0;font:500 .62rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(223,231,239,.38)}
@media (max-width:760px){.hero__nota{display:none}}
/* capas de las pantallas (dentro de la escena: quedan igual de tenues que la sala) */
.sala__capa>div{position:absolute}
.h-chip{display:flex;align-items:center;gap:5px;justify-content:flex-end;font:700 9px/18px var(--f-mono);letter-spacing:.06em;color:rgba(160,230,190,.9)}
.h-chip i{width:6px;height:6px;border-radius:50%;background:#4fd08f;transition:background .8s}
.h-chip span{transition:color .8s}
.h-chip.activa i{background:#e6b65c}.h-chip.activa span{color:#f0cf86}
.h-caja{border:1.5px solid rgba(240,207,134,0);border-radius:3px;transition:border-color .9s,box-shadow .9s}
.h-caja.on{border-color:rgba(240,207,134,.85);box-shadow:0 0 0 1px rgba(10,16,24,.5),0 0 10px rgba(240,207,134,.25)}
.h-caja::before,.h-caja::after{content:"";position:absolute;left:-1px;top:-14px;font:700 8px/1 var(--f-mono);color:#f0cf86;opacity:0;transition:opacity .9s}
.h-caja::before{content:"MOV · 0,87"}
.h-caja.on::before{opacity:1}
.h-nodo::before{content:"";position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;border:1.4px solid rgba(240,207,134,.8);opacity:0;transform:scale(.4)}
.h-nodo.pulso::before{animation:h-pulso 2.6s ease-out}
@keyframes h-pulso{0%{opacity:0;transform:scale(.4)}12%{opacity:.85}100%{opacity:0;transform:scale(1.7)}}
.h-ruta svg{width:100%;height:100%;overflow:visible}
.h-ruta polyline{stroke:rgba(125,211,252,.85);stroke-width:2;stroke-dasharray:420;stroke-dashoffset:420;opacity:0;filter:drop-shadow(0 0 3px rgba(57,183,240,.6))}
.h-ruta.on polyline{animation:h-ruta 6.2s ease-in-out forwards}
@keyframes h-ruta{0%{stroke-dashoffset:420;opacity:0}8%{opacity:1}50%{stroke-dashoffset:0;opacity:1}80%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.h-anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.h-anillo circle{fill:none;stroke-width:5}.h-anillo .b{stroke:rgba(57,183,240,.18)}.h-anillo .a{stroke:#39b7f0;stroke-linecap:round;transition:stroke-dasharray 2.4s ease}
.h-anillo b{position:absolute;inset:0;display:grid;place-items:center;font:700 13px/1 var(--f-txt);color:#eaf4fb}
.h-val{font:600 11px/16px var(--f-txt);color:#dfe8f1;text-align:right;transition:color 1s}
.h-val.cambia,.h-est.cambia{color:#f0cf86}
.h-est{font:700 17px/26px var(--f-txt);color:#e6eef6;transition:color 1s}
.h-acc .hoja{position:absolute;left:62px;top:16px;width:20px;height:34px;border:1.5px solid rgba(125,211,252,0);border-radius:2px;transform-origin:left center;transition:transform 1.1s cubic-bezier(.22,.61,.36,1),border-color .6s}
.h-acc.on .hoja{border-color:rgba(125,211,252,.9);transform:perspective(60px) rotateY(-55deg)}
.h-acc em,.h-ala em{position:absolute;left:0;right:0;bottom:4px;text-align:center;font:700 8px/1 var(--f-mono);font-style:normal;letter-spacing:.05em;opacity:0;transition:opacity .6s}
.h-acc em{color:#7fe0b0}.h-ala em{color:#f0cf86}
.h-acc,.h-ala,.h-ana{border-radius:6px;border:1.4px solid transparent;transition:border-color .8s,box-shadow .8s}
.h-acc.on{border-color:rgba(125,211,252,.55)}.h-acc.on em,.h-ala.on em{opacity:1}
.h-ala .halo{position:absolute;left:46px;top:12px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle,rgba(240,190,100,.45),transparent 70%);opacity:0;transition:opacity .5s}
.h-ala .nro{position:absolute;left:82px;top:12px;width:13px;height:13px;border-radius:50%;background:#d9a648;color:#1c1508;font:700 8px/13px var(--f-txt);text-align:center;opacity:0;transform:scale(.6);transition:opacity .5s,transform .5s}
.h-ala.on{border-color:rgba(240,207,134,.5)}.h-ala.on .halo{opacity:1}.h-ala.on .nro{opacity:1;transform:none}
.h-ana .barras{position:absolute;left:54px;top:46px;display:flex;gap:4px;align-items:flex-end;height:20px}
.h-ana .barras i{width:5px;height:6px;background:rgba(125,211,252,.0);transition:height 1.6s ease,background .8s}
.h-ana.on .barras i{background:rgba(125,211,252,.85)}.h-ana.on .barras i:nth-child(1){height:9px}.h-ana.on .barras i:nth-child(2){height:15px}.h-ana.on .barras i:nth-child(3){height:20px}
.h-scan{background:linear-gradient(180deg,transparent,rgba(125,211,252,.75),transparent);opacity:0;transition:opacity 1.2s}
.h-fila{border-radius:2px;background:linear-gradient(90deg,rgba(125,211,252,0),rgba(125,211,252,.0));transition:background 1.2s}
.h-fila.on{background:linear-gradient(90deg,rgba(125,211,252,.0),rgba(125,211,252,.55),rgba(125,211,252,0))}
.hero:not(.anim-on) .sala__capa *,.hero:not(.anim-on) .sala__capa *::before{animation-play-state:paused}

/* Cursor aprobado (punto 15): destello amatista muy leve detrás de la flecha nativa; pequeño, halo corto y difuso */
.cursor-destello{position:fixed;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;z-index:9999;opacity:0;
  background:radial-gradient(circle,rgba(118,72,160,.34) 0%,rgba(104,58,146,.16) 42%,rgba(92,48,130,0) 72%);filter:blur(1px);
  transition:opacity .25s ease,background .15s ease}
.cursor-destello.on{opacity:.8}
.cursor-destello.on.sobre{opacity:.95;background:radial-gradient(circle,rgba(132,80,176,.40) 0%,rgba(116,64,160,.20) 44%,rgba(96,50,136,0) 74%)}
.cursor-destello.on.clic{opacity:1;background:radial-gradient(circle,rgba(140,86,186,.46) 0%,rgba(122,68,168,.22) 46%,rgba(100,52,140,0) 76%)}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-destello{display:none}}

/* las cifras del panel inferior izquierdo quedan detrás del texto del hero: más tenues para no competir con la lectura */
.h-est{color:rgba(230,238,246,.62)}

/* ===================== v9 · Lex 22/10 17:40 (y adendas) · encargo 23/10 ===================== */
/* Ritmo: un foco principal por sección, dos movimientos secundarios y el resto quieto. Solo transform/opacity/variables. */
@property --mo{syntax:"<angle>";initial-value:0deg;inherits:false}

/* 1 · superficies que responden al puntero: luz recortada dentro del elemento, elevación corta, icono que sobresale */
.sup{position:relative;isolation:isolate;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),border-color .3s}
.sup__luz{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle 360px at var(--mx,50%) var(--my,50%),rgba(122,96,255,.20),rgba(64,128,240,.10) 38%,rgba(64,128,240,0) 70%)}
.sec--clara .sup__luz,.serv-card .sup__luz,.razon .sup__luz{background:radial-gradient(circle 380px at var(--mx,50%) var(--my,50%),rgba(96,70,210,.10),rgba(27,77,126,.06) 40%,rgba(27,77,126,0) 72%)}
/* especificidad cero: el contenido queda sobre la luz sin pisar el posicionamiento propio de cada componente
   (fotos de sectores, rótulos, barra de progreso de las pestañas, etiquetas absolutas) */
:where(.sup>:not(.sup__luz):not(.marco-luz):not(img)){position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
  .sup:hover>.sup__luz{opacity:1}
  .serv-card.sup:hover,.paso.sup:hover,.sect a.sup:hover,.razon.sup:hover,.plan.sup:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(12,24,48,.55)}
  .tec__tab.sup:hover,.cfg__ops button.sup:hover,.demo-paso.sup:hover,.mapa__pills button.sup:hover{transform:translateY(-2px)}
}
.sup:focus-visible,.sup:focus-within{outline:none}
.sup:focus-visible>.sup__luz,.sup:focus-within>.sup__luz{opacity:.85;background:radial-gradient(circle 420px at 50% 40%,rgba(122,96,255,.18),rgba(64,128,240,.08) 45%,rgba(64,128,240,0) 75%)}
.serv-card.sup:focus-within,.sect a.sup:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 2px var(--celeste),0 22px 44px -26px rgba(12,24,48,.55)}
.sup.toque{transform:translateY(-3px)}.sup.toque>.sup__luz{opacity:.9;background:radial-gradient(circle 300px at 50% 50%,rgba(122,96,255,.18),rgba(64,128,240,0) 70%)}
.srv-ic{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:.35rem;
  background:linear-gradient(160deg,#2a3443 0%,#151b24 55%,#222b38 100%);border:1px solid rgba(196,206,220,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 18px -12px rgba(8,16,25,.9);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s,border-color .3s}
.srv-ic svg{width:24px;height:24px;fill:none;stroke:#cfe9fb;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.serv-card:hover .srv-ic{transform:translateY(-3px) scale(1.06);border-color:rgba(125,211,252,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 4px rgba(57,183,240,.10),0 14px 26px -14px rgba(57,183,240,.55)}}
.serv-card:focus-within .srv-ic{transform:translateY(-3px) scale(1.06);border-color:rgba(125,211,252,.55)}

/* 2 · servicios con jerarquía: tarjeta principal visual (seguridad física) y cuatro secundarias compactas */
.serv{grid-template-columns:1.25fr 1fr 1fr;grid-auto-rows:auto}
.serv-card--principal{grid-row:span 2;background:var(--navy-900,#0b1626);border-color:rgba(196,206,220,.25);color:#eef3f9;overflow:hidden;justify-content:flex-end;min-height:420px}
.serv-card--principal .serv-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;z-index:0;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.serv-card--principal::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(8,16,25,.15) 0%,rgba(8,16,25,.72) 52%,rgba(8,16,25,.95) 100%)}
.serv-card--principal h3,.serv-card--principal li{color:#f2f6fb}.serv-card--principal .prob{color:#b9c6d6}
.serv-card--principal .acc a{color:#7dd3fc}.serv-card--principal .acc a.g{color:var(--oro-claro)}
.serv-card--principal .tag--gold{background:rgba(210,168,79,.18);color:var(--oro-claro)}
@media (hover:hover){.serv-card--principal:hover .serv-card__img{transform:scale(1.035)}}
@media (max-width:980px){.serv{grid-template-columns:1fr 1fr}.serv-card--principal{grid-column:1 / -1;grid-row:auto;min-height:340px}}
@media (max-width:640px){.serv{grid-template-columns:1fr}}

/* 3 · reflejo dorado fino que recorre parte del perímetro, con pausa larga (no parpadea el marco completo) */
.marco-luz{position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:4;opacity:0;
  background:conic-gradient(from calc(var(--mo) + var(--m0,0deg)),rgba(243,223,162,0) 0deg,rgba(243,223,162,0) 292deg,rgba(210,168,79,.55) 318deg,rgba(255,244,214,.95) 336deg,rgba(210,168,79,.5) 346deg,rgba(243,223,162,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.marco-luz.activo{animation:marcoOro var(--mdur,15s) linear var(--md,0s) infinite}
@keyframes marcoOro{0%{--mo:0deg;opacity:0}5%{opacity:.8}30%{--mo:300deg;opacity:.8}36%{--mo:330deg;opacity:0}100%{--mo:330deg;opacity:0}}

/* 4 · Tecnología: progreso por pestaña, HUD con esquinas, LIVE/CAM y escena, scanlines solo dentro del panel, cambio scale/fade 0,5 s */
.tec__tab{display:flex;align-items:center;gap:.6rem;overflow:hidden}
.tec__n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;opacity:.65}
.tec__prog{position:absolute;left:0;right:0;bottom:0;height:2px;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--celeste),#f3dfa2);opacity:0;transition:opacity .3s;z-index:2}
.tec__tab[aria-selected="true"] .tec__prog{opacity:.95}
.tec--pausa .tec__tab[aria-selected="true"] .tec__prog{opacity:.45}
.tec--manual .tec__prog{opacity:0!important}
.tec__panel img{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.tec__panel.cambio img{opacity:0!important;transform:scale(1.035)}
.tec__scan{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;background:repeating-linear-gradient(180deg,rgba(125,211,252,.10) 0 1px,transparent 1px 4px)}
.tec__scan::after{content:"";position:absolute;left:0;right:0;height:18%;top:-18%;background:linear-gradient(180deg,transparent,rgba(125,211,252,.10),transparent);animation:tecBarre 7.5s linear infinite}
@keyframes tecBarre{0%{transform:translateY(0)}70%,100%{transform:translateY(660%)}}
.tec__hud{position:absolute;inset:12px;z-index:2;pointer-events:none;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;color:#cfe9fb}
.tec__hud .c{position:absolute;width:16px;height:16px;border-color:rgba(125,211,252,.6);border-style:solid;border-width:0}
.tec__hud .tl{top:0;left:0;border-top-width:1px;border-left-width:1px}.tec__hud .tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.tec__hud .bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}.tec__hud .br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.tec__live{position:absolute;top:6px;left:24px;color:#ff8a7a}.tec__cam{position:absolute;top:6px;right:24px}.tec__esc{position:absolute;bottom:4px;right:24px;opacity:.7}
.tec__lista{list-style:none;padding:0;margin:.4rem 0 .2rem;display:grid;gap:.3rem}
.tec__lista li{display:flex;gap:.5rem;align-items:flex-start;font-size:.92rem;color:#dbe6f2}
.tec__lista li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:.5em;border-radius:1px;background:var(--celeste);transform:rotate(45deg)}
.tec__cta{align-self:flex-start;margin-top:.5rem}

/* 5 · mapa: retícula celeste, rótulos de borde, rutas y nodos tenues, barrido lento, ping localizado y entrada del nombre */
.mapa-reticula line.r1{stroke:rgba(125,211,252,.20);stroke-width:.6}
.mapa-reticula line.r5{stroke:rgba(125,211,252,.08);stroke-width:.5;stroke-dasharray:2 4}
.mapa-reticula .rt{font-family:var(--f-mono);font-size:7.5px;letter-spacing:.06em;fill:rgba(160,214,245,.65)}
.mapa-ruta{fill:none;stroke:rgba(125,211,252,.16);stroke-width:.9;stroke-dasharray:3 5}
.mapa-ruta.on{stroke:rgba(243,223,162,.75);stroke-width:1.1}
.mapa--vivo .mapa-ruta.on{animation:rutaFluye 2.4s linear infinite}
@keyframes rutaFluye{to{stroke-dashoffset:-32}}
.mapa-nodo{fill:rgba(125,211,252,.55)}.mapa-central{fill:#f3dfa2;filter:drop-shadow(0 0 4px rgba(243,223,162,.8))}
.mapa-barrido{opacity:0}
.mapa--vivo .mapa-barrido{animation:mapaBarre 15s cubic-bezier(.45,0,.55,1) infinite}
@keyframes mapaBarre{0%{transform:translateX(160px);opacity:0}6%{opacity:1}55%{transform:translateX(470px);opacity:1}62%,100%{transform:translateX(470px);opacity:0}}
.prov-ping{fill:none;stroke:var(--celeste);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
.prov-ping.on{animation:provPing 1.8s cubic-bezier(.22,1,.36,1) 2}
@keyframes provPing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.6);opacity:0}}
#provNom.cambio,#provTxt.cambio{animation:provEntra .55s cubic-bezier(.22,1,.36,1)}
@keyframes provEntra{from{opacity:0;filter:blur(4px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}

/* 6 · banda de capacidades: space gray casi negro, recorrido ~40 s, bordes enmascarados, reflejo lineal lento; pausa con cursor o foco */
.marq{background:linear-gradient(180deg,#171b21 0%,#0d1014 100%);border-block:1px solid rgba(196,206,220,.14);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq__track{animation-duration:40s}
.marq:focus .marq__track{animation-play-state:paused}
.marq:focus-visible{outline:2px solid var(--celeste);outline-offset:-2px}
.marq::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(57,183,240,.0) 20%,rgba(125,211,252,.7) 35%,rgba(243,223,162,.8) 45%,rgba(160,110,230,.6) 55%,transparent 70%);background-size:260% 100%;animation:marqLuz 18s linear infinite}
@keyframes marqLuz{from{background-position:130% 0}to{background-position:-130% 0}}

/* 7 · botones secundarios space gray metálico (grafito/acero, borde frío fino, reflejo superior, brillo de hover contenido) */
.btn--ghost{background:linear-gradient(180deg,#3a414b 0%,#262b33 48%,#1c2027 52%,#2a3039 100%);color:#eef2f6;border:1px solid rgba(190,204,222,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35),0 8px 20px -14px rgba(0,0,0,.85)}
.btn--ghost .ic{background:rgba(255,255,255,.08)}
@media (hover:hover){.btn--ghost:hover{border-color:rgba(214,226,240,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.35),0 0 0 3px rgba(125,211,252,.08),0 12px 24px -14px rgba(0,0,0,.9)}}

/* 8 · cursor: halo púrpura-magenta limpio de ~20 px, centro pequeño, caída radial y cola casi imperceptible; la flecha normal se mantiene */
.cursor-destello{width:20px;height:20px;margin:-10px 0 0 -10px;transition:transform 45ms linear,opacity .25s;
  background:radial-gradient(circle,rgba(236,120,255,.62) 0%,rgba(196,72,230,.40) 26%,rgba(150,52,200,.16) 56%,rgba(120,40,170,0) 72%);mix-blend-mode:normal}
.cursor-destello.on{opacity:.95}
.cursor-destello.on.sobre{opacity:1;background:radial-gradient(circle,rgba(246,140,255,.72) 0%,rgba(206,80,240,.46) 28%,rgba(160,56,210,.18) 58%,rgba(120,40,170,0) 74%)}
.cursor-destello.on.clic{transform-origin:center}

/* 9 · revelado escalonado reversible: desplazamiento corto, opacidad y desenfoque leve; 110 ms entre elementos */
.rv,.rv-st>*{filter:blur(3px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1)}
.rv.vis,.rv-st.vis>*{filter:none}
.rv-st>*{transition-delay:calc(var(--i,0) * 110ms)}

/* 10 · una palabra con brillo metálico lento en algunos títulos (alto contraste en el resto) */
.metal{background:linear-gradient(100deg,#d8e1ec 0%,#ffffff 20%,#93a2b8 40%,#e9eef5 55%,#d2a84f 68%,#f3dfa2 74%,#d8e1ec 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:metalTxt 16s ease-in-out infinite}
.sec--clara .metal{background-image:linear-gradient(100deg,#13263f 0%,#2b4a6f 28%,#8a6420 46%,#c99a3d 52%,#2b4a6f 66%,#13263f 100%)}
@keyframes metalTxt{0%,100%{background-position:100% 0}50%{background-position:0 0}}

@media (prefers-reduced-motion:reduce){
  .sup,.srv-ic,.serv-card--principal .serv-card__img{transition:none}
  .serv-card.sup:hover,.paso.sup:hover,.sect a.sup:hover,.razon.sup:hover,.plan.sup:hover,.sup.toque,.tec__tab.sup:hover{transform:none}
  .serv-card:hover .srv-ic,.serv-card:focus-within .srv-ic{transform:none}
  .marco-luz,.tec__scan::after,.mapa-barrido,.prov-ping,.marq::after{display:none}
  .mapa-ruta.on{animation:none}
  .metal{animation:none;background-position:50% 0}
  .rv,.rv-st>*{filter:none;transition:none}
  #provNom.cambio,#provTxt.cambio{animation:none}
}

/* 11 · ajustes móviles v9 (23/10): el HUD no tapa el texto del panel y la foto principal queda arriba, sin texto sobre los rostros */
.tec__cuerpo{padding-top:clamp(2.6rem,4vw,2.8rem)}
@media (max-width:520px){
  .tec__cam{top:22px;left:24px;right:auto;opacity:.8}
  .tec__esc{top:22px;bottom:auto;right:24px}
  .tec__cuerpo{padding-top:3.6rem}
}
@media (max-width:640px){
  .serv-card--principal{padding-top:205px;justify-content:flex-start}
  .serv-card--principal .serv-card__img{height:250px;bottom:auto;opacity:.82;object-position:50% 28%}
  .serv-card--principal::before{background:linear-gradient(180deg,rgba(8,16,25,0) 0,rgba(8,16,25,.2) 110px,rgba(8,16,25,.9) 220px,#0b1626 252px)}
}

/* 12 · formulario: campo marcado por la capa de integración y botón ocupado */
.form-card [aria-invalid="true"]{border-color:#e5676b;box-shadow:0 0 0 3px rgba(229,103,107,.16)}
.form-card button[aria-busy="true"]{opacity:.7;cursor:progress}

/* 13 · seis pilares (prompt consolidado 23/10, punto 7): eje «protege, comprueba, coordina e informa»; sin cifras; lo no operativo va rotulado */
.sec--pilares{background:linear-gradient(180deg,#0e1724 0%,#0b131e 100%);border-top:1px solid rgba(196,206,220,.10)}
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pilar{background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--titanio-borde,rgba(196,206,220,.2));border-radius:var(--radio);padding:1.35rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.45rem}
.pilar__n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--celeste)}
.pilar h3{color:var(--blanco);margin:0}
.pilar p{color:var(--niebla);margin:0;font-size:.95rem}
.pilar__tag{align-self:flex-start;margin-top:.35rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#cdd6e2;padding:.28rem .55rem;border-radius:6px;border:1px solid rgba(190,204,222,.3);background:linear-gradient(180deg,#323943,#22272f)}
@media (hover:hover) and (pointer:fine){.pilar.sup:hover{transform:translateY(-3px);border-color:rgba(214,226,240,.4)}}
@media (max-width:900px){.pilares{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pilares{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pilar.sup:hover{transform:none}}
/* variante solo plata para títulos largos: el dorado queda para CTA y selección (paleta 70/20/10) */
.metal--plata{background-image:linear-gradient(100deg,#c9d3df 0%,#ffffff 22%,#8f9db2 42%,#e9eef5 58%,#b4c2d4 76%,#c9d3df 100%)}

/* 14 · accesibilidad táctil (23/10): en pantallas táctiles cada control alcanza 44 px de alto de zona de toque sin cambiar su dibujo
   (área extendida con ::after, invisible); el botón del menú no se comprime en la cabecera */
.menu-btn{flex:0 0 44px}
@media (pointer:coarse){
  .serv-card .acc a,#palSwitch button,#demoPrev,#demoNext,.menu-movil a,.cab__row>a{position:relative}
  .cab__row>a::after,.serv-card .acc a::after,.mapa__pills button::after,.cfg__ops button::after,#palSwitch button::after,#demoPrev::after,#demoNext::after,
  .btn--sm::after,.tec__tab::after,.demo-paso::after,.menu-movil a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;min-height:100%;transform:translateY(-50%)}
}

/* 15 · carga sin brincos (23/10): respaldos locales con la misma anchura media que las fuentes web (size-adjust medido: Big Shoulders
   Display 800: Arial Narrow al 100 % reproduce las mismas seis líneas del título (el barrido 94–99 % daba cinco) e Impact al 96 %; Source Sans 3 = 92,7 % de Arial), para que el cambio de fuente no reacomode el
   título ni el texto (CLS medido 0,234 antes). La rejilla de contacto pasa a una columna por debajo de 600 px (desbordaba a 320–360 px). */
@font-face{font-family:"BSD Respaldo";src:local("Arial Narrow"),local("ArialNarrow"),local("Arial Narrow Bold");size-adjust:100%;font-weight:600 900}
@font-face{font-family:"BSD Respaldo 2";src:local("Impact");size-adjust:96%;font-weight:600 900}
@font-face{font-family:"SS3 Respaldo";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica");size-adjust:92.7%;font-weight:300 900}
@media (max-width:600px){.conv{grid-template-columns:1fr}}

/* 16 · Lex 24/10 · (a) rayo dorado VIVO en las tarjetas de plan y en el CTA de Avizor Esencial; (b) cursor sin punto: solo resplandor difuso.
   (a) El anillo v9 era de 1 px sobre un borde dorado de 2 px y encendido el 30 % del tiempo: invisible. Ahora: línea de 2 px con cabeza
   blanco-dorada y cola larga, giro continuo y lento (9 s por vuelta, desfase distinto por tarjeta), más una capa de resplandor ancha y
   difusa sincronizada (::before enmascarado, 10 px, desenfocado). El CTA dorado de la tarjeta estrella lleva su halo giratorio de v8
   (`.btn--gold::before`) siempre encendido. Nada cambia en maquetación, tipografía, contenido ni estilo de botón. */
@keyframes marcoOroVivo{from{--mo:0deg}to{--mo:360deg}}
.plan>.marco-luz{padding:2px;opacity:.95;
  background:conic-gradient(from calc(var(--mo) + var(--m0,0deg)),rgba(243,223,162,0) 0deg,rgba(243,223,162,0) 228deg,rgba(210,168,79,.22) 284deg,rgba(226,190,106,.6) 326deg,rgba(255,246,222,1) 344deg,rgba(255,250,236,1) 349deg,rgba(226,190,106,.55) 355deg,rgba(243,223,162,0) 360deg)}
.plan>.marco-luz.activo{animation:marcoOroVivo 9s linear var(--md,0s) infinite}
.plan::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:10px;pointer-events:none;z-index:3;opacity:.55;filter:blur(5px);
  background:conic-gradient(from calc(var(--mo) + var(--m0,0deg)),rgba(243,223,162,0) 0deg,rgba(243,223,162,0) 250deg,rgba(226,190,106,.35) 318deg,rgba(255,240,200,.9) 346deg,rgba(226,190,106,.3) 356deg,rgba(243,223,162,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:marcoOroVivo 9s linear var(--md,0s) infinite;animation-play-state:paused}
.plan:has(>.marco-luz.activo)::before{animation-play-state:running}
/* 24/10 (Lex): el botón «Cotizar Avizor Esencial» NO lleva halo fijo ni rayo giratorio; queda como el resto de los botones dorados */
.plan .btn--gold::before{display:none}
/* (b) resplandor del puntero: ancho (180 px), translúcido, sin núcleo ni anillo; la flecha del sistema se mantiene. Se apaga al salir de la
   ventana o al perder el foco (app.js); no existe en táctil ni con movimiento reducido. */
.cursor-destello{width:180px;height:180px;margin:-90px 0 0 -90px;transition:transform 60ms linear,opacity .3s;mix-blend-mode:normal;
  background:radial-gradient(circle,rgba(196,110,255,.15) 0%,rgba(176,86,240,.10) 30%,rgba(150,64,214,.045) 55%,rgba(130,50,190,0) 72%)}
.cursor-destello.on{opacity:1}
.cursor-destello.on.sobre{opacity:1;background:radial-gradient(circle,rgba(206,120,255,.19) 0%,rgba(180,90,242,.12) 30%,rgba(150,64,214,.05) 55%,rgba(130,50,190,0) 72%)}
.cursor-destello.on.clic{background:radial-gradient(circle,rgba(206,120,255,.19) 0%,rgba(180,90,242,.12) 30%,rgba(150,64,214,.05) 55%,rgba(130,50,190,0) 72%)}
@media (prefers-reduced-motion:reduce){.plan::before{display:none}}

/* 17 · 24/10 (Lex): las cuatro tarjetas secundarias de servicios llevan foto del material existente del sitio (franja superior, icono encima) */
.serv-card__foto{display:block;width:calc(100% + 2.8rem);height:168px;margin:-1.4rem -1.4rem .2rem;object-fit:cover;border-radius:var(--radio) var(--radio) 0 0;background:#0b1626}
.serv-card__foto+.srv-ic{position:relative;z-index:2;margin-top:-24px}
@media (max-width:760px){.serv-card__foto{width:calc(100% + 2.4rem);margin:-1.2rem -1.2rem .2rem;height:150px}}
@media (hover:hover){.serv-card:hover .serv-card__foto{filter:saturate(1.08)}}

/* 18 · 24/10 (Lex): fuera el resplandor dorado fijo bajo la tarjeta Esencial (no se movía); el rayo del perímetro se conserva */
.plan--estrella::after{display:none}
.serv-card__foto{max-width:none}

/* 19 · 24/10: el resplandor del puntero se mueve solo por transform (sin transición de posición), compuesto en su propia capa */
.cursor-destello{transition:opacity .3s;will-change:transform;contain:strict}

/* 20 · mapa (24/10): recuadro de la Isla del Coco; se oculta en móvil, donde el encuadre ya era continental */
.mapa-isla__marco{fill:rgba(8,16,25,.55);stroke:rgba(125,211,252,.35);stroke-width:.6}
.mapa-isla__trazo{fill:rgba(57,183,240,.45);stroke:rgba(125,211,252,.7);stroke-width:2}
.mapa-isla__t{font-family:var(--f-mono);font-size:7px;letter-spacing:.06em;fill:rgba(207,233,251,.9)}
.mapa-isla__s{font-family:var(--f-mono);font-size:5.2px;letter-spacing:.04em;fill:rgba(160,214,245,.7)}
@media (max-width:760px){.mapa-isla{display:none}}

/* 21 · MATERIALES (Lex 24/10). Oro = material del logotipo oficial de Grupo Global (LOGO NUEVO GGS.png, medido): sombra bronce #8d613f,
   oro oscuro #bb8c4d, oro medio #d6b05d, oro claro #e7cf6f, brillo #f2e485. Metal pulido: medio rico, sombras bronce, un brillo estrecho
   y controlado; sin amarillo plano, sin halos externos. Space gray = grafito/acero oscuro con bisel y luz fría contenida. */
:root{--oro-bronce:#8d613f;--oro-oscuro:#bb8c4d;--oro-medio:#d6b05d;--oro-claro:#e7cf6f;--oro-brillo:#f2e485;--oro-tinta:#1d1608;
  --sg-luz:#4a515a;--sg-1:#363c44;--sg-2:#262b31;--sg-3:#1a1e23;--sg-borde:rgba(172,184,200,.42);--sg-texto:#eef2f6}
.btn.btn--gold{color:var(--oro-tinta);border:1px solid var(--oro-bronce);
  background:linear-gradient(180deg,rgba(255,250,222,.55) 0%,rgba(255,250,222,0) 14%),linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 42%,var(--oro-oscuro) 64%,#c79a52 100%);
  box-shadow:inset 0 1px 0 rgba(255,248,214,.5),inset 0 -2px 0 rgba(90,60,30,.42),0 8px 16px -10px rgba(141,97,63,.75);text-shadow:0 1px 0 rgba(255,245,210,.35)}
.btn.btn--gold .ic{background:rgba(70,46,16,.28);box-shadow:inset 0 1px 0 rgba(255,248,214,.25)}
@media (hover:hover){.btn.btn--gold:hover{background:linear-gradient(180deg,rgba(255,250,222,.6) 0%,rgba(255,250,222,0) 14%),linear-gradient(180deg,#ecd678 0%,#dcb864 42%,#c4955a 64%,#cda45d 100%);box-shadow:inset 0 1px 0 rgba(255,248,214,.55),inset 0 -2px 0 rgba(90,60,30,.42),0 12px 20px -10px rgba(141,97,63,.85);transform:translateY(-1px)}}
.btn.btn--gold:active{background:linear-gradient(180deg,rgba(255,250,222,.25) 0%,rgba(255,250,222,0) 14%),linear-gradient(180deg,var(--oro-medio) 0%,var(--oro-oscuro) 48%,#a87b43 100%);box-shadow:inset 0 2px 4px rgba(70,46,16,.45);transform:translateY(0)}
.btn.btn--gold:focus-visible{outline:2px solid var(--oro-brillo);outline-offset:3px;box-shadow:0 0 0 4px rgba(214,176,93,.32),inset 0 1px 0 rgba(255,248,214,.5)}
.btn--gold::before{display:none}
.badge--gold,.tag--gold,.plan__sello{color:var(--oro-tinta);border:1px solid rgba(141,97,63,.75);background:linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 55%,var(--oro-oscuro) 100%);box-shadow:inset 0 1px 0 rgba(255,248,214,.45),inset 0 -1px 0 rgba(90,60,30,.35)}
.tec__tab[aria-selected="true"]{color:var(--oro-tinta);background:linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 48%,var(--oro-oscuro) 100%);border-color:var(--oro-bronce);box-shadow:inset 0 1px 0 rgba(255,248,214,.45),inset 0 -2px 0 rgba(90,60,30,.35)}
/* space gray metálico: botones secundarios y controles */
.btn.btn--ghost,.cfg__ops button,.mapa__pills button,#demoPrev,#demoNext,#palSwitch button,.tec__tab:not([aria-selected="true"]),.pilar__tag,.badge:not(.badge--gold),.plan__chip{
  color:var(--sg-texto);border:1px solid var(--sg-borde);
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 22%),linear-gradient(180deg,var(--sg-luz) 0%,var(--sg-1) 40%,var(--sg-3) 58%,var(--sg-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.55),0 6px 14px -10px rgba(0,0,0,.9)}
.btn.btn--ghost .ic{background:rgba(255,255,255,.08)}
.cfg__ops button[aria-pressed="true"],.mapa__pills button[aria-pressed="true"]{color:var(--oro-tinta);border-color:var(--oro-bronce);background:linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 48%,var(--oro-oscuro) 100%);box-shadow:inset 0 1px 0 rgba(255,248,214,.45),inset 0 -2px 0 rgba(90,60,30,.35)}
@media (hover:hover){
  .btn.btn--ghost:hover,.cfg__ops button:not([aria-pressed="true"]):hover,.mapa__pills button:not([aria-pressed="true"]):hover,#demoPrev:hover,#demoNext:hover,#palSwitch button:hover,.tec__tab:not([aria-selected="true"]):hover{
    border-color:rgba(200,212,228,.62);background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 22%),linear-gradient(180deg,#555c66 0%,#3d434b 40%,#20242a 58%,#2d323a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.55),0 10px 18px -10px rgba(0,0,0,.95)}}
.btn.btn--ghost:active,.cfg__ops button:active,.mapa__pills button:active,#demoPrev:active,#demoNext:active,#palSwitch button:active{background:linear-gradient(180deg,var(--sg-3) 0%,var(--sg-2) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.btn.btn--ghost:focus-visible,.cfg__ops button:focus-visible,.mapa__pills button:focus-visible,#demoPrev:focus-visible,#demoNext:focus-visible,#palSwitch button:focus-visible,.tec__tab:focus-visible{outline:2px solid #cfe9fb;outline-offset:3px}

/* 22 · fade reversible por sección (ver app.js 4b): solo opacidad y 10 px; la cabecera y el cursor quedan fuera; con foco dentro, plena */
.fx-scroll main>section.sec{opacity:var(--fs,1);transform:translateY(calc((1 - var(--fs,1)) * 10px));transition:opacity .12s linear,transform .12s linear;will-change:opacity}
.fx-scroll main>section.sec:focus-within{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fx-scroll main>section.sec{opacity:1;transform:none;transition:none}}

/* 23 · MURO DE MONITOREO con video dentro de cada pantalla (muro.js, Lex 24/10). Composición aprobada 1740×904; lienzos por pantalla
   ajustados con matrix3d; controles pausar/ampliar/reconocer; móvil apilado (texto arriba, muro completo debajo). */
.sala{width:1740px;height:904px}
.hero__bg .sala__img{width:1740px;height:904px}
.muro__pantalla{position:absolute;left:0;top:0;transform-origin:0 0;display:block;backface-visibility:hidden}
.muro__fuentes{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;opacity:.01;pointer-events:none}
.muro__fuentes video{width:480px;height:268px}
.muro__ctl{position:absolute;right:var(--gutter);bottom:30px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;max-width:min(580px,calc(100% - 2*var(--gutter)))}
.muro__nota{margin:0;font:500 .72rem/1.35 var(--f-mono);letter-spacing:.03em;color:rgba(222,236,255,.74);text-align:right;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.muro__btns{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:flex-end}
.muro__btn{font:600 .78rem/1 var(--f-txt);padding:.55em 1em;border-radius:999px;cursor:pointer;min-height:34px;color:var(--sg-texto);border:1px solid var(--sg-borde);
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 22%),linear-gradient(180deg,var(--sg-luz) 0%,var(--sg-1) 40%,var(--sg-3) 58%,var(--sg-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.55),0 6px 14px -10px rgba(0,0,0,.9)}
@media (hover:hover){.muro__btn:hover{border-color:rgba(200,212,228,.62);background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 22%),linear-gradient(180deg,#555c66 0%,#3d434b 40%,#20242a 58%,#2d323a 100%)}}
.muro__btn:focus-visible{outline:2px solid #cfe9fb;outline-offset:3px}
.muro__btn[aria-pressed="true"]{background:linear-gradient(180deg,var(--sg-3) 0%,var(--sg-2) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.muro__alarma{display:inline-flex;align-items:center;gap:.55rem;padding:.25em .3em .25em .8em;border-radius:999px;background:rgba(120,20,26,.84);border:1px solid rgba(255,120,120,.55);color:#fff;font:600 .74rem/1.2 var(--f-txt)}
.muro__alarma i{width:8px;height:8px;border-radius:50%;background:#ff5a5f;animation:muroPulso 1.25s ease-in-out infinite;flex:0 0 8px}
.muro__alarma .muro__btn--rec{min-height:28px;padding:.4em .8em}
@keyframes muroPulso{0%,100%{opacity:.45}50%{opacity:1}}
.hero__bg--sala::after{transition:opacity .4s}
.hero.ampliado .hero__in{opacity:0;pointer-events:none;transition:opacity .3s}
.hero.ampliado .hero__bg--sala::after{opacity:0}
.hero.ampliado .hero__rayo,.hero.ampliado .hero__frame,.hero.ampliado .coords{display:none}
.hero:not(.anim-on) .muro__alarma i{animation-play-state:paused}
@media (max-width:760px){
  .hero{display:block;min-height:0}
  .hero .hero__in{padding:96px 0 1rem}
  .hero__bg--sala{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1740/904}
  .hero__bg--sala::after{background:linear-gradient(180deg,rgba(8,16,25,0) 0%,rgba(8,16,25,0) 85%,var(--navy-950) 100%)}
  .muro__ctl{position:static;align-items:flex-start;padding:.7rem var(--gutter) 1.1rem;max-width:none}
  .muro__nota{text-align:left}
  .hero.ampliado .hero__in{opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.muro__alarma i{animation:none}}

/* 24 · LÍNEA DE DIAMANTE bajo el menú (Lex 24/10): línea fina blanco cristalino/plata con reflejos fríos y una estrella pequeña con halo
   y estela corta que recorre la línea en ~10 s, se desvanece en los extremos y repite sin salto. Sin movimiento con reduced-motion. */
.cab{overflow:visible}
.cab__linea{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(214,232,255,.42) 12%,rgba(255,255,255,.92) 50%,rgba(214,232,255,.42) 88%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 6px rgba(190,220,255,.32),0 0 1px rgba(255,255,255,.5)}
.cab__linea i{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff 0 1.1px,rgba(232,243,255,.96) 1.8px,rgba(176,214,255,.38) 4.5px,rgba(176,214,255,0) 9px);
  animation:cabEstrella 10s linear infinite}
.cab__linea i::before{content:"";position:absolute;top:50%;right:50%;width:60px;height:1px;margin-top:-.5px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(236,246,255,.8))}
.cab__linea i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;opacity:.85;
  background:linear-gradient(#fff,#fff) center/1px 12px no-repeat,linear-gradient(#fff,#fff) center/12px 1px no-repeat}
@keyframes cabEstrella{0%{transform:translateX(-3vw);opacity:0}7%{opacity:1}93%{opacity:1}100%{transform:translateX(103vw);opacity:0}}
@media (prefers-reduced-motion:reduce){.cab__linea i{display:none}}

/* 25 · TÍTULO «Solicite su cotización»: texto claro + palabra destacada en oro metálico de referencia con un reflejo que recorre las letras y vuelve.
   Base siempre legible (oro oscuro); el reflejo es una capa recortada al texto (::after) con banda estrecha. */
.tit-brillo .brillo{position:relative;display:inline-block;color:#8a6428;background:linear-gradient(180deg,#a67c36,#7a5522);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tit-brillo .brillo::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;
  background:linear-gradient(100deg,rgba(255,255,255,0) 36%,rgba(240,214,140,.85) 46%,#f6e2a2 50%,rgba(240,214,140,.85) 54%,rgba(255,255,255,0) 64%);
  background-size:300% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;animation:brilloTexto 4.6s ease-in-out infinite alternate}
@keyframes brilloTexto{0%{background-position:120% 0}100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.tit-brillo .brillo::after{animation:none;background-position:50% 0}}

/* 26 · PREGUNTAS FRECUENTES: cada fila hace «pop out» al pasar el cursor o recibir foco (elevación suave, +1,2 % de escala, sombra y realce
   de borde) sin desplazar el resto ni solapar filas; retorno suave; foco visible; con reduced-motion solo cambian borde y sombra. */
.faq details{position:relative;transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s,background-color .28s;will-change:transform}
@media (hover:hover){.faq details:hover{transform:translateY(-3px) scale(1.012);z-index:2;border-color:rgba(57,183,240,.6);background:rgba(255,255,255,.045);box-shadow:0 18px 36px -18px rgba(0,0,0,.8),0 0 0 1px rgba(57,183,240,.18),0 0 24px -8px rgba(57,183,240,.35)}}
.faq details:focus-within{transform:translateY(-3px) scale(1.012);z-index:2;border-color:rgba(57,183,240,.6);background:rgba(255,255,255,.045);box-shadow:0 18px 36px -18px rgba(0,0,0,.8),0 0 0 1px rgba(57,183,240,.18)}
.faq summary:focus-visible{outline:2px solid var(--celeste);outline-offset:-4px;border-radius:var(--radio-sm)}
@media (prefers-reduced-motion:reduce){.faq details,.faq details:hover,.faq details:focus-within{transform:none;transition:none}}

/* 27 · CURSOR «MIRA ROJA» (variante para revisión de Lex; ?cursor=brillo devuelve el destello difuso). Trazo fino, sin punto central,
   centrado exactamente en el puntero (margen −14 px), nunca intercepta clics; oculto en táctil. El puntero nativo se conserva. */
.cursor-mira{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;pointer-events:none;z-index:9999;opacity:0;transition:opacity .18s;will-change:transform;contain:strict}
.cursor-mira.on{opacity:1}
.cursor-mira svg{display:block;width:28px;height:28px;overflow:visible;filter:drop-shadow(0 0 1px rgba(0,0,0,.6));transition:transform .12s}
.cursor-mira.clic svg{transform:scale(.86)}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-mira{display:none}}

/* 28 · PORTADA EN DOS COLUMNAS (Lex 24/10): para que el muro aprobado se vea COMPLETO con sus 16 pantallas en movimiento, el texto va
   a la izquierda (misma anchura de 62ch que antes) y el muro entero a la derecha, sin recorte; «Ampliar» lo muestra a pantalla completa.
   En móvil: texto arriba y muro completo debajo. */
.hero{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);grid-template-areas:"texto muro" "texto ctl";column-gap:clamp(1.5rem,3vw,3rem);row-gap:.6rem;
  align-items:center;align-content:center;padding:96px var(--gutter) 44px;min-height:100svh;max-width:var(--ancho);margin-inline:auto;overflow:visible}
.hero .hero__in.contenedor{grid-area:texto;padding:0;margin:0;max-width:none;width:100%}
.hero__bg.hero__bg--sala{grid-area:muro;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1740/904;align-self:end;overflow:hidden;border-radius:6px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 0 0 1px rgba(120,160,200,.12)}
.hero__bg--sala::after{background:linear-gradient(180deg,rgba(8,16,25,.0) 0%,rgba(8,16,25,0) 88%,rgba(8,16,25,.55) 100%)}
.hero__rayo{left:0}
.muro__ctl{grid-area:ctl;position:static;justify-self:end;max-width:none;align-items:flex-end;margin-top:.2rem}
.hero__frame.tl,.hero__frame.tr{top:84px}.hero__frame.bl,.hero__frame.br{bottom:22px}
.hero__frame.tl,.hero__frame.bl{left:calc(var(--gutter) - 14px)}.hero__frame.tr,.hero__frame.br{right:calc(var(--gutter) - 14px)}
.hero.ampliado{grid-template-columns:1fr;grid-template-areas:"muro" "ctl";align-content:center;max-width:none;padding-inline:var(--gutter)}
.hero.ampliado .hero__in{display:none}
.hero.ampliado .hero__bg.hero__bg--sala{width:min(100%,calc((100svh - 150px) * 1740 / 904));justify-self:center;align-self:center;border-radius:0}
.hero.ampliado .muro__ctl{justify-self:center;align-items:center}
.hero.ampliado .muro__nota{text-align:center}
@media (max-width:1100px){.hero{grid-template-columns:minmax(0,460px) minmax(0,1fr)}}
@media (max-width:900px){.hero{grid-template-columns:1fr;grid-template-areas:"texto" "muro" "ctl";align-content:start;padding-top:92px}.hero .hero__in.contenedor{max-width:62ch}.hero__bg.hero__bg--sala{align-self:start}.muro__ctl{justify-self:start;align-items:flex-start}.muro__nota{text-align:left}}
@media (max-width:760px){.hero{display:grid;padding:88px var(--gutter) 1.2rem}.hero .hero__in{padding:0}.muro__ctl{padding:0}}

/* 29 · PORTADA v3 (sustituye la disposición de dos columnas del bloque 28): texto compacto en dos columnas arriba (título | lead+CTA) y el
   MURO COMPLETO debajo, lo más grande que quepa sin salir de la ventana (ancho = min(100 %, (100svh − 420px) × 1740/904)).
   El título de la portada baja de 5rem a --h1-portada (3.4rem) para que el muro tenga sitio: decisión reversible cambiando la variable. */
:root{--h1-portada:clamp(2.2rem,3.6vw,3.4rem)}
.hero{grid-template-columns:1fr;grid-template-areas:"texto" "muro" "ctl";align-content:center;row-gap:.9rem;padding:92px var(--gutter) 28px}
.hero .hero__in.contenedor{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"badges badges" "h1 lead" "h1 cta" "h1 checks";column-gap:clamp(1.5rem,4vw,3.5rem);row-gap:.25rem;align-items:start}
.hero .hero__in .badges{grid-area:badges;margin-bottom:.4rem}
.hero .hero__in h1{grid-area:h1;font-size:var(--h1-portada);margin:0;text-wrap:balance}
.hero .hero__in .lead{grid-area:lead;margin:.2rem 0 0;max-width:52ch}
.hero .hero__in .hero__cta{grid-area:cta;margin-top:.9rem}
.hero .hero__in .hero__checks{grid-area:checks;margin-top:.8rem}
.hero__bg.hero__bg--sala{width:min(100%,calc((100svh - 420px) * 1740 / 904));min-width:min(100%,640px);justify-self:center;align-self:center}
.muro__ctl{justify-self:center;align-items:center;margin-top:0}
.muro__nota{text-align:center}
@media (max-width:900px){.hero .hero__in.contenedor{grid-template-columns:1fr;grid-template-areas:"badges" "h1" "lead" "cta" "checks";max-width:none}.hero__bg.hero__bg--sala{width:100%}}
@media (max-width:760px){.hero{padding-top:84px}.muro__ctl{align-items:flex-start}.muro__nota{text-align:left}}

/* 30 · COTIZACIÓN AMPLIADA (Lex 24/10, mecánica de referencia, identidad AVIZOR): tipo de cliente, chips de servicios múltiples,
   plan precargado, provincia/sedes, campos pertinentes por servicio, descripción, documentación, aviso propio; botón deshabilitado al inicio;
   panel lateral con canales (solo datos verificados; lo no confirmado se marca pendiente). Móvil: apilado y campos cómodos. */
.form-card fieldset{border:0;padding:0;margin:0 0 .9rem;min-width:0}
.form-card legend{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-60);padding:0;margin-bottom:.4rem}
.form-card label b{color:#b3261e;font-weight:700}
.form-card label small,.form-card legend small{text-transform:none;letter-spacing:0;color:var(--tinta-60);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{position:relative;display:inline-flex;align-items:center;min-height:38px;padding:0 .95em;border-radius:999px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--sg-texto);border:1px solid var(--sg-borde);
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 22%),linear-gradient(180deg,var(--sg-luz) 0%,var(--sg-1) 40%,var(--sg-3) 58%,var(--sg-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.55);transition:transform .18s,box-shadow .18s,border-color .18s}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.chip span::before{content:"";display:inline-block;width:.8em;height:.8em;margin-right:.5em;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);vertical-align:-.05em;transition:background .18s,border-color .18s}
.chip:has(input:checked){color:var(--oro-tinta);border-color:var(--oro-bronce);background:linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 48%,var(--oro-oscuro) 100%);box-shadow:inset 0 1px 0 rgba(255,248,214,.45),inset 0 -2px 0 rgba(90,60,30,.35)}
.chip:has(input:checked) span::before{background:var(--oro-tinta);border-color:var(--oro-tinta)}
@media (hover:hover){.chip:hover{transform:translateY(-1px);border-color:rgba(200,212,228,.62)}}
.chip:has(input:focus-visible){outline:2px solid var(--celeste);outline-offset:3px}
.plan-pre{display:inline-flex;align-items:center;gap:.6rem;padding:.45em .5em .45em .9em;border-radius:999px;background:rgba(201,160,76,.14);border:1px solid rgba(141,97,63,.5);color:var(--tinta);font-size:.92rem}
.plan-pre .quitar{border:0;background:rgba(0,0,0,.08);color:var(--tinta);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:.8rem}
.plan-pre .quitar:focus-visible{outline:2px solid var(--celeste);outline-offset:2px}
.campo textarea{padding:.72em .9em;border-radius:9px;border:1px solid #cdd6e0;background:var(--nube);color:var(--tinta);font:inherit;resize:vertical;min-height:84px}
.campo textarea:focus{border-color:var(--celeste);box-shadow:0 0 0 3px rgba(57,183,240,.25);outline:none}
.contador{justify-self:end;font-family:var(--f-mono);font-size:.68rem;color:var(--tinta-60)}
.cond{animation:condIn .25s ease-out}
@keyframes condIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.check{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .9rem;font-size:.92rem;color:var(--tinta);cursor:pointer}
.check input{width:18px;height:18px;margin-top:.15em;accent-color:#9a7536;flex:0 0 18px}
.privacidad{font-size:.8rem;color:var(--tinta-60);margin:0 0 1rem;line-height:1.45}
.form-card .btn--gold:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.6)}
.form-card .btn--gold:disabled:hover{transform:none}

/* 36 · ORO RELUCIENTE (Lex 24/10).
   El color deja de funcionar como relleno plano: la superficie combina vetas de
   sombra, medios tonos, una línea especular estrecha y biseles. El reflejo se
   desplaza dentro del material, sin halo exterior y sin recolorear la marca. */
:root{
  --oro-metal-real:
    linear-gradient(180deg,rgba(255,252,225,.82) 0%,rgba(255,252,225,.18) 4%,rgba(69,39,5,.22) 7%,transparent 13%,rgba(61,34,4,.18) 86%,rgba(55,30,3,.48) 100%),
    linear-gradient(108deg,#6e430b 0%,#a9751d 12%,#d7ad50 24%,#f8e79b 31%,#b77d20 37%,#72450d 43%,#c99a35 53%,#f3d879 61%,#fff1ad 64%,#bd8629 70%,#7b4d10 79%,#d0a044 91%,#8a5714 100%);
  --oro-metal-presionado:
    linear-gradient(180deg,rgba(61,34,4,.45),transparent 20%,rgba(255,240,174,.16) 100%),
    linear-gradient(108deg,#68400c 0%,#96651a 20%,#c99837 38%,#efd06d 48%,#a8731e 62%,#6f430d 78%,#bd8b2e 100%);
}
.btn.btn--gold,
.badge--gold,.tag--gold,.plan__sello,
.tec__tab[aria-selected="true"],
.cfg__ops button[aria-pressed="true"],
.mapa__pills button[aria-pressed="true"]{
  background-image:var(--oro-metal-real);
  background-size:100% 100%,220% 100%;
  background-position:0 0,8% 0;
  border-color:#7b4d10;
  box-shadow:
    inset 0 1px 0 rgba(255,252,222,.88),
    inset 0 2px 3px rgba(255,240,174,.22),
    inset 0 -2px 0 rgba(69,39,5,.55),
    inset 1px 0 0 rgba(255,230,140,.18),
    inset -1px 0 0 rgba(75,43,6,.28),
    0 8px 16px -11px rgba(111,67,11,.78);
  text-shadow:0 1px 0 rgba(255,246,203,.55);
}
.btn.btn--gold{overflow:hidden;isolation:isolate}
.btn.btn--gold::before{
  content:"";display:block;position:absolute;z-index:1;pointer-events:none;
  top:-35%;bottom:-35%;left:-45%;width:24%;border-radius:50%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,235,.12) 22%,rgba(255,255,242,.82) 48%,rgba(255,247,207,.22) 72%,transparent 100%);
  filter:blur(1.5px);transform:skewX(-18deg) translateX(-260%);opacity:.72;
  animation:oroReluce 7.2s cubic-bezier(.22,.7,.2,1) infinite;
}
.btn.btn--gold::after{
  content:"";position:absolute;z-index:0;pointer-events:none;inset:2px;border-radius:8px;
  border:1px solid rgba(255,244,190,.2);
  box-shadow:inset 0 0 7px rgba(255,224,120,.13);
}
.btn.btn--gold>*{position:relative;z-index:2}
@keyframes oroReluce{
  0%,56%{transform:skewX(-18deg) translateX(-260%);opacity:0}
  60%{opacity:.72}
  76%{transform:skewX(-18deg) translateX(760%);opacity:.72}
  80%,100%{transform:skewX(-18deg) translateX(760%);opacity:0}
}
@media (hover:hover){
  .btn.btn--gold:hover{background-image:var(--oro-metal-real);background-size:100% 100%,220% 100%;background-position:0 0,82% 0;box-shadow:inset 0 1px 0 rgba(255,252,222,.92),inset 0 -2px 0 rgba(69,39,5,.58),0 12px 22px -12px rgba(151,101,22,.9)}
  .btn.btn--gold:hover::before{animation-duration:1.35s;opacity:.82}
}
.btn.btn--gold:active{background-image:var(--oro-metal-presionado);background-size:100% 100%;background-position:0 0;box-shadow:inset 0 3px 6px rgba(56,31,4,.52),inset 0 -1px 0 rgba(255,231,147,.28);transform:translateY(0)}
.btn.btn--gold:focus-visible{outline-color:#fff0a8;box-shadow:0 0 0 4px rgba(221,182,83,.3),inset 0 1px 0 rgba(255,252,222,.9),inset 0 -2px 0 rgba(69,39,5,.55)}
@media (prefers-reduced-motion:reduce){
  .btn.btn--gold::before{animation:none;left:58%;transform:skewX(-18deg);opacity:.34}
}
.form-card.enviado .solo-envio{display:none}
.confirmacion{display:none;margin:0 0 1rem;padding:1rem 1.1rem;border-radius:12px;background:#eef8f1;border:1px solid #bfe3cb;color:#1d5a35}
.confirmacion b{font-family:var(--f-mono);font-size:1.05rem;letter-spacing:.04em;color:#0f3f24}
.form-card.enviado .confirmacion{display:block}
.canales{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem;font-size:.92rem;color:var(--tinta)}
.canales li{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem;padding:.55rem .8rem;border-radius:10px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06)}
.canales b{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-60);align-self:center}
.canales .pend{display:inline-block;padding:.1em .55em;border-radius:999px;background:#fff3d6;color:#7a5522;border:1px solid #ecd39a;font-size:.78rem;font-weight:600}
@media (max-width:600px){.canales li{grid-template-columns:1fr}.form-card .campo input,.form-card .campo select,.form-card .campo textarea{font-size:16px;min-height:46px}.chip{min-height:44px}}
@media (prefers-reduced-motion:reduce){.cond{animation:none}.chip,.chip:hover{transition:none;transform:none}}

/* 31 · PORTADA v3, ajuste: título y CTA a la izquierda, lead y verificaciones a la derecha (sin filas implícitas); la franja de cifras de
   demostración (.stats) se oculta en la portada para dejar sitio al muro (decisión reversible: quitar esta regla). Muro = (100svh − 460px). */
.hero .hero__in.contenedor{grid-template-areas:"badges badges" "h1 lead" "cta checks";align-items:start;row-gap:.35rem}
.hero .hero__in .hero__cta{margin-top:.7rem}
.hero .hero__in .hero__checks{margin-top:.9rem;align-self:start}
.hero .hero__in .stats{display:none}
.hero__bg.hero__bg--sala{width:min(100%,calc((100svh - 460px) * 1740 / 904))}
.hero.ampliado .hero__bg.hero__bg--sala{width:min(100%,calc((100svh - 150px) * 1740 / 904))}
@media (max-width:900px){.hero .hero__in.contenedor{grid-template-areas:"badges" "h1" "lead" "cta" "checks"}.hero__bg.hero__bg--sala{width:100%}}

/* 32 · TARJETAS CON MOVIMIENTO (tarjetas.js): mini muro de Monitoreo y cabezal PTZ de CCTV. */
.serv-card__foto.mini-muro,.serv-card__foto.ptz{position:relative;height:auto;min-height:168px;background:#0b1420;display:grid;gap:4px;padding:6px 6px 8px;box-sizing:border-box;color:#dfe9f5}
.mini__fuentes{position:absolute;width:1px;height:1px;overflow:hidden;opacity:.01;pointer-events:none;left:0;top:0}
.mini__fuentes video{width:480px;height:268px}
.mini__rejilla{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mini__cam{width:100%;height:auto;display:block;border-radius:3px;background:#06101a;aspect-ratio:236/132}
.mini__graf{width:100%;height:auto;display:block;border-radius:3px;aspect-ratio:480/54}
.mini__barra{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;justify-content:space-between;min-height:24px}
.mini__estado{display:inline-flex;align-items:center;gap:.4rem;font:600 .68rem/1 var(--f-mono);letter-spacing:.04em;color:rgba(222,236,255,.8)}
.mini__estado i{width:7px;height:7px;border-radius:50%;background:#49d17d;box-shadow:0 0 6px rgba(73,209,125,.7)}
.mini__alarma{display:inline-flex;align-items:center;gap:.45rem;padding:.2em .25em .2em .7em;border-radius:999px;background:rgba(120,20,26,.88);border:1px solid rgba(255,120,120,.55);color:#fff;font:600 .68rem/1.2 var(--f-txt)}
.mini__alarma i{width:7px;height:7px;border-radius:50%;background:#ff5a5f;animation:muroPulso 1.25s ease-in-out infinite}
.mini-muro.en-alarma .mini__estado i{background:#ff5a5f;box-shadow:0 0 6px rgba(255,90,95,.8)}
.mini__ctl{display:flex;gap:.4rem;flex-wrap:wrap}
.mini__btn{font:600 .72rem/1 var(--f-txt);padding:.5em .85em;border-radius:999px;cursor:pointer;min-height:30px;color:var(--sg-texto);border:1px solid var(--sg-borde);
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 22%),linear-gradient(180deg,var(--sg-luz) 0%,var(--sg-1) 40%,var(--sg-3) 58%,var(--sg-2) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.55)}
.mini__btn:focus-visible{outline:2px solid #cfe9fb;outline-offset:2px}
.mini__btn[aria-pressed="true"]{background:linear-gradient(180deg,var(--sg-3) 0%,var(--sg-2) 100%);box-shadow:inset 0 2px 4px rgba(0,0,0,.6)}
.mini__btn--rec{min-height:24px;padding:.35em .7em}
.mini__etq,.ptz__etq{font:500 .64rem/1.3 var(--f-mono);letter-spacing:.03em;color:rgba(222,236,255,.62)}
@media (pointer:coarse){.mini__btn{min-height:44px;padding:.6em 1em}}
/* diálogo ampliado: el mismo nodo del mini muro se mueve dentro */
.mini__dialogo{border:0;padding:0;background:transparent;max-width:min(96vw,1180px);width:min(96vw,1180px)}
.mini__dialogo::backdrop{background:rgba(4,8,14,.82);backdrop-filter:blur(6px)}
.mini__dialogo-in{background:#0b1420;border:1px solid rgba(120,160,200,.2);border-radius:12px;padding:.8rem;color:#dfe9f5;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.mini__dialogo-cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem}
.mini-muro.ampliado{min-height:0;max-width:none;margin:0;padding:0;background:transparent}
.mini-muro.ampliado .mini__rejilla{gap:8px}
/* cabezal PTZ en CSS 3D (representación) */
.serv-card__foto.ptz{grid-template-columns:118px 1fr;grid-template-areas:"escena monitor" "etq etq" "ctl ctl";align-items:center;column-gap:8px}
.ptz__escena{grid-area:escena;position:relative;height:124px;perspective:520px;perspective-origin:50% 40%}
.ptz__soporte{position:absolute;left:50%;top:0;width:34px;height:22px;margin-left:-17px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#3a424b,#20262c);box-shadow:inset 0 -2px 0 rgba(0,0,0,.5)}
.ptz__cabeza{position:absolute;left:50%;top:22px;width:84px;height:84px;margin-left:-42px;transform-style:preserve-3d;transform:rotateY(0deg) rotateX(0deg);will-change:transform}
.ptz__cuerpo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 38% 32%,#5c656f 0,#2b3138 48%,#161a1f 100%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 18px 28px -14px rgba(0,0,0,.9);transform:translateZ(0)}
.ptz__led{position:absolute;left:50%;top:9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#ff5a5f;box-shadow:0 0 8px rgba(255,90,95,.9);animation:muroPulso 1.6s ease-in-out infinite}
.ptz__lente{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;transform:translateZ(36px);background:radial-gradient(circle at 42% 38%,#1c2c3e 0,#070b11 55%,#0b1118 100%);box-shadow:0 0 0 5px #1b2027,0 0 0 7px rgba(255,255,255,.08),0 10px 18px -8px rgba(0,0,0,.9)}
.ptz__lente i{position:absolute;left:30%;top:24%;width:8px;height:5px;border-radius:50%;background:rgba(190,220,255,.55);filter:blur(1px)}
.ptz__monitor{grid-area:monitor;width:100%;height:auto;display:block;border-radius:3px;aspect-ratio:300/168;background:#06101a}
.ptz__etq{grid-area:etq}.serv-card__foto.ptz .mini__ctl{grid-area:ctl}
.serv-card__foto.mini-muro:not(.vivo) .mini__alarma i,.serv-card__foto.ptz:not(.vivo) .ptz__led{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mini__alarma i,.ptz__led{animation:none}}
@media (max-width:640px){.serv-card__foto.ptz{grid-template-columns:96px 1fr}.ptz__escena{height:110px}.ptz__cabeza{width:70px;height:70px;margin-left:-35px}}

/* 33 · ajustes tras la revisión en navegador: la franja de insignias no debe cruzar la línea de diamante (cabecera ≈118 px) → más aire
   arriba y presupuesto del muro acorde; en las tarjetas con movimiento el icono no se superpone a los controles. */
.hero{padding-top:134px}
.hero__bg.hero__bg--sala{width:min(100%,calc((100svh - 500px) * 1740 / 904))}
.serv-card__foto.mini-muro+.srv-ic,.serv-card__foto.ptz+.srv-ic{margin-top:.6rem}
.serv-card__foto.mini-muro,.serv-card__foto.ptz{padding-bottom:10px}
@media (max-width:900px){.hero{padding-top:118px}}
@media (max-width:760px){.hero{padding-top:104px}}

/* 34 · cabecera: el enlace del logotipo no debe estirarse ni empujar el menú (los rótulos se partían en 2–3 líneas y la cabecera crecía a
   117 px). Logotipo a su ancho natural, rótulos en una línea, cabecera de una sola fila. */
.cab__row>a:first-of-type{flex:0 0 auto;width:auto;display:inline-flex;align-items:center}
.nav{flex:0 1 auto;min-width:0}
.nav a,.tel,.cab__acc .btn{white-space:nowrap}
.cab__acc{flex:0 0 auto}

/* 35 · chips del formulario: el rótulo hereda el color y la tipografía de «.form-card label» (gris oscuro, mono, mayúsculas); el chip debe
   leerse claro sobre space gray y oscuro sobre oro, con la tipografía de texto. */
.form-card label.chip{color:var(--sg-texto);font-family:var(--f-txt);font-size:.9rem;letter-spacing:0;text-transform:none;margin:0}
.form-card label.chip:has(input:checked){color:var(--oro-tinta)}
/* 36 · causa raíz de la cabecera estrecha: el logotipo conservaba su ancho de atributo (912 px) con altura 42 px; ancho automático. */
.cab__logo{width:auto}

/* ============================================================================================================================
   37 · ORO RELUCIENTE (Lex 24/10): metal real, no color fijo. Tres capas: (1) bandas anisótropas de oro (claros y sombras bronce) que
   se desplazan lentamente = la luz cambia de ángulo; (2) bisel con luz arriba y sombra abajo; (3) destello especular estrecho que
   recorre la superficie cada 6,5 s y, con puntero fino, una luz que sigue al cursor (--mx/--my). Tonos medidos en el logotipo vigente
   de Grupo Global. Con movimiento reducido: metal estático con bisel. ============================================================= */
:root{--oro-anis:linear-gradient(112deg,#9a7030 0%,#c9a04f 9%,#f3dd93 20%,#d2ab59 29%,#9d7430 40%,#dcbb6a 52%,#fcedb6 60%,#d0a654 70%,#9a7030 82%,#cfa858 92%,#f1d98b 100%)}
.btn.btn--gold,.plan__sello,.badge--gold,.serv-card .tag--gold,.tec__tab[aria-selected="true"],.form-card label.chip:has(input:checked),.cfg__ops button[aria-pressed="true"],.mapa__pills button[aria-pressed="true"]{
  position:relative;isolation:isolate;color:var(--oro-tinta);border-color:var(--oro-bronce);
  background:radial-gradient(60% 90% at var(--mx,50%) var(--my,-20%),rgba(255,250,228,.55) 0%,rgba(255,250,228,0) 70%),linear-gradient(180deg,rgba(255,250,222,.42) 0%,rgba(255,250,222,0) 18%,rgba(70,46,16,0) 70%,rgba(70,46,16,.28) 100%),var(--oro-anis);
  background-size:100% 100%,100% 100%,340% 100%;background-position:0 0,0 0,0% 0;
  box-shadow:inset 0 1px 0 rgba(255,248,214,.6),inset 0 -2px 0 rgba(90,60,30,.5),inset 1px 0 0 rgba(255,248,214,.25),inset -1px 0 0 rgba(90,60,30,.3),0 10px 18px -12px rgba(141,97,63,.9);
  animation:oroAnis 11s ease-in-out infinite alternate;text-shadow:0 1px 0 rgba(255,245,210,.35)}
.btn.btn--gold::after,.plan__sello::after,.badge--gold::after,.serv-card .tag--gold::after,.tec__tab[aria-selected="true"]::after,.form-card label.chip:has(input:checked)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;mix-blend-mode:screen;
  background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 58%);background-size:260% 100%;background-position:160% 0;
  animation:oroDestello 6.5s cubic-bezier(.45,0,.2,1) infinite}
.btn.btn--gold>*{position:relative;z-index:2}
.btn.btn--gold .ic{background:rgba(70,46,16,.3);box-shadow:inset 0 1px 0 rgba(255,248,214,.25)}
@keyframes oroAnis{from{background-position:0 0,0 0,0% 0}to{background-position:0 0,0 0,100% 0}}
@keyframes oroDestello{0%{background-position:160% 0}38%{background-position:-60% 0}100%{background-position:-60% 0}}
@media (hover:hover){.btn.btn--gold:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,248,214,.65),inset 0 -2px 0 rgba(90,60,30,.5),0 14px 24px -12px rgba(141,97,63,1);filter:brightness(1.06)}}
.btn.btn--gold:active{transform:translateY(0);filter:brightness(.94);box-shadow:inset 0 2px 5px rgba(70,46,16,.5)}
.btn.btn--gold:focus-visible{outline:2px solid var(--oro-brillo);outline-offset:3px}
.btn--gold::before{display:none}
/* el texto dorado de la portada: metal animado recortado a las letras */
.hero h1 .gold{background:var(--oro-anis);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:oroAnis 11s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){.btn.btn--gold,.plan__sello,.badge--gold,.serv-card .tag--gold,.tec__tab[aria-selected="true"],.form-card label.chip:has(input:checked),.hero h1 .gold{animation:none;background-position:0 0,0 0,50% 0}
  .btn.btn--gold::after,.plan__sello::after,.badge--gold::after,.serv-card .tag--gold::after,.tec__tab[aria-selected="true"]::after,.form-card label.chip:has(input:checked)::after{animation:none;background-position:-60% 0}}

/* 38 · DESTELLO EN TEXTOS DESTACADOS: barrido de luz que recorre las letras (capa ::after con el mismo texto, recortada), recurrente y
   fluido, sin apagar el texto base. Celeste en la portada (luz blanca-cian), oro en «teléfono» y «cotización», sutil en los eyebrows. */
.destello{position:relative;display:inline-block}
.destello::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
  background:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(226,246,255,.95) 48%,#ffffff 50%,rgba(226,246,255,.95) 52%,rgba(255,255,255,0) 62%);background-size:320% 100%;background-position:170% 0;
  animation:textoDestello 7s cubic-bezier(.45,0,.2,1) infinite}
.hero h1 .gold.destello::after{background-image:linear-gradient(100deg,rgba(255,255,255,0) 38%,rgba(255,240,196,.95) 48%,#fff8dc 50%,rgba(255,240,196,.95) 52%,rgba(255,255,255,0) 62%);animation-delay:1.8s}
.eyebrow.destello::after{background-image:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(200,236,255,.9) 50%,rgba(255,255,255,0) 60%);animation-duration:9s;animation-delay:.6s}
.tit-brillo .brillo.destello::after{animation:brilloTexto 4.6s ease-in-out infinite alternate}
@keyframes textoDestello{0%{background-position:170% 0}34%{background-position:-70% 0}100%{background-position:-70% 0}}
@media (prefers-reduced-motion:reduce){.destello::after{display:none}.tit-brillo .brillo.destello::after{display:block;animation:none}}

/* 39 · MÁS VIDA: luz ambiental coordinada. Portada: tres halos (cian, oro, azul profundo) que derivan lentamente tras el muro y un barrido
   de luz diagonal cada 18 s; secciones: un halo que respira y deriva, solo mientras la sección está en vista (clase en-vista del fade).
   Solo transform/opacity sobre gradientes (sin filtros), pausado fuera de vista y sin movimiento reducido. */
.hero{position:relative}
.hero__ambiente{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__ambiente i{position:absolute;border-radius:50%;opacity:.5;will-change:transform;animation-play-state:paused}
.hero__ambiente i:nth-child(1){left:-12%;top:-20%;width:62vw;height:62vw;background:radial-gradient(circle,rgba(57,183,240,.22) 0%,rgba(57,183,240,.08) 38%,rgba(57,183,240,0) 70%);animation:ambA 34s ease-in-out infinite alternate}
.hero__ambiente i:nth-child(2){right:-18%;top:10%;width:56vw;height:56vw;background:radial-gradient(circle,rgba(214,176,93,.16) 0%,rgba(214,176,93,.05) 40%,rgba(214,176,93,0) 70%);animation:ambB 41s ease-in-out infinite alternate}
.hero__ambiente i:nth-child(3){left:25%;bottom:-40%;width:70vw;height:70vw;background:radial-gradient(circle,rgba(27,77,126,.4) 0%,rgba(27,77,126,.12) 40%,rgba(27,77,126,0) 70%);animation:ambC 47s ease-in-out infinite alternate}
.hero__ambiente::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-20%;width:26%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(200,230,255,.05) 45%,rgba(232,206,150,.045) 55%,rgba(255,255,255,0));transform:skewX(-14deg) translateX(-40vw);animation:ambBarrido 18s ease-in-out infinite;animation-play-state:paused}
.hero.anim-on .hero__ambiente i,.hero.anim-on .hero__ambiente::after{animation-play-state:running}
.hero__in,.hero__bg--sala,.muro__ctl{z-index:2}
@keyframes ambA{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.18)}}
@keyframes ambB{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8vw,-6vh) scale(.92)}}
@keyframes ambC{from{transform:translate(0,0) scale(1)}to{transform:translate(-6vw,-9vh) scale(1.12)}}
@keyframes ambBarrido{0%{transform:skewX(-14deg) translateX(-40vw);opacity:0}8%{opacity:1}42%{transform:skewX(-14deg) translateX(150vw);opacity:1}46%,100%{transform:skewX(-14deg) translateX(150vw);opacity:0}}
main>section.sec{position:relative;overflow:hidden}
.sec__luz{position:absolute;z-index:0;left:50%;top:40%;width:min(90vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  background:radial-gradient(circle,rgba(57,183,240,.13) 0%,rgba(57,183,240,.05) 35%,rgba(57,183,240,0) 68%);animation:secLuz 26s ease-in-out infinite alternate;animation-play-state:paused}
.sec--clara .sec__luz{background:radial-gradient(circle,rgba(57,183,240,.14) 0%,rgba(255,255,255,.08) 35%,rgba(57,183,240,0) 68%)}
main>section.sec.en-vista .sec__luz{animation-play-state:running;opacity:1;transition:opacity 1.2s}
main>section.sec>*:not(.sec__luz){position:relative;z-index:1}
@keyframes secLuz{0%{transform:translate(-58%,-56%) scale(.95)}50%{transform:translate(-44%,-42%) scale(1.12)}100%{transform:translate(-56%,-48%) scale(1.02)}}
@media (prefers-reduced-motion:reduce){.hero__ambiente i,.hero__ambiente::after,.sec__luz{animation:none}.hero__ambiente::after{display:none}}

/* 40 · SIN CONTROLES VISIBLES en el muro y las tarjetas: solo el rótulo de demostración; el botón de pausa existe para teclado y aparece
   únicamente al recibir foco (o con movimiento reducido, como «Reproducir»). Sin espacio residual. */
.muro__ctl--min{gap:.3rem;margin-top:.1rem}
.muro__btn--oculto,.mini__btn--oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muro__btn--oculto:focus-visible,.mini__btn--oculto:focus-visible{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal}
.mini__ctl--min{display:contents}
.serv-card__foto.ptz{grid-template-areas:"escena monitor" "etq etq"}
.serv-card__foto.mini-muro,.serv-card__foto.ptz{padding-bottom:8px}
.mini__alarma{padding-right:.8em}

/* 41 · ajustes de rendimiento y detalle: botón de pausa oculto sin caja; el texto dorado de la portada con su propio ciclo (una sola capa). */
.muro__btn--oculto,.mini__btn--oculto{padding:0;border:0;min-height:0;margin:0}
.muro__btn--oculto:focus-visible,.mini__btn--oculto:focus-visible{padding:.55em 1em;border:1px solid var(--sg-borde);min-height:34px}
.hero h1 .gold{animation:oroAnisTexto 11s ease-in-out infinite alternate}
@keyframes oroAnisTexto{from{background-position:0% 0}to{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.hero h1 .gold{animation:none;background-position:50% 0}}
/* 42 · movimiento reducido: los halos de la portada tienen selectores más específicos (nth-child); se anulan con la misma especificidad. */
@media (prefers-reduced-motion:reduce){.hero__ambiente i:nth-child(n){animation:none}}
/* 43 · corrección: en «.destello::after» el shorthand «background» anulaba «background-clip:text» (se veía un rectángulo de luz sobre las
   letras); el recorte al texto se declara después. El chip «Alarma local» de la tarjeta de Monitoreo también se oculta (Lex): la alarma se
   ve en la cámara (tinte rojo) y en el punto de estado. */
.destello::after,.hero h1 .gold.destello::after,.eyebrow.destello::after,.tit-brillo .brillo.destello::after{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mini__alarma{display:none}

/* ============================================================================================================================
   44 · PORTADA PANORÁMICA (consolidado de Lex 24/10 · puntos 9 y 10). El muro de monitoreo con sus 16 pantallas vivas cubre TODA la
   primera pantalla como fondo («cover» anclado al lado visual), con velo base y degradados hacia el lado del texto; el titular grande
   (tres líneas deliberadas, blanco→gris metálico, una sola frase en cian con destello), lead, dos CTA, garantías y cuatro cifras de
   demostración al pie. Capas sutiles: retícula casi imperceptible, REC/hora/ubicación discretos y el haz luminoso que baja lentamente.
   Sin halos grandes ni barridos diagonales. ================================================================================== */
.hero{display:flex;align-items:center;grid-template-columns:none;grid-template-areas:none;min-height:100svh;padding:128px var(--gutter) 60px;max-width:none;margin:0;overflow:hidden}
.hero__bg.hero__bg--sala{position:absolute;inset:0;width:auto;min-width:0;height:auto;aspect-ratio:auto;border-radius:0;box-shadow:none;z-index:0;justify-self:auto;align-self:auto;overflow:hidden}
.hero__bg--sala::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(8,16,25,.2);pointer-events:none}
.hero__bg--sala::after{z-index:2;transition:none;background:linear-gradient(90deg,var(--navy-950) 0%,rgba(8,16,25,.96) 24%,rgba(8,16,25,.84) 40%,rgba(8,16,25,.46) 56%,rgba(8,16,25,.14) 72%,rgba(8,16,25,.06) 100%),linear-gradient(180deg,rgba(8,16,25,.6) 0%,rgba(8,16,25,0) 22%,rgba(8,16,25,0) 66%,var(--navy-950) 100%)}
.hero__grid-fina{position:absolute;inset:0;z-index:1;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 84px),repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 84px)}
.hero .hero__in.contenedor{display:block;grid-area:auto;max-width:min(820px,58%);width:100%;padding:0;margin:0;position:relative;z-index:3}
.hero .hero__in .badges{margin-bottom:.9rem}
.hero .hero__in h1{font-size:clamp(2.5rem,4.15vw,3.75rem);line-height:.98;letter-spacing:-.012em;margin:0 0 .5em;text-wrap:balance;max-width:14.5em;
  background:linear-gradient(180deg,#ffffff 0%,#e3e8ef 52%,#9fabbb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fff}
.hero .hero__in .lead{max-width:60ch;margin:0;font-size:1.08rem}
.hero .hero__in .hero__cta{margin-top:1.6rem}
.hero .hero__in .hero__checks{margin-top:1.1rem}
.hero .hero__in .stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.1rem;max-width:760px;background:rgba(255,255,255,.03);backdrop-filter:blur(4px)}
.hero__ambiente{display:none}
.hero__rec{position:absolute;right:var(--gutter);top:124px;z-index:3;font:600 .64rem/1 var(--f-mono);letter-spacing:.16em;color:rgba(255,128,128,.78);display:inline-flex;align-items:center}
.hero__rec i{width:7px;height:7px;border-radius:50%;background:#ff5a5f;margin-right:.6em;animation:recParpadeo 1.4s steps(1) infinite}
@keyframes recParpadeo{0%,55%{opacity:1}56%,100%{opacity:.18}}
.muro__ctl{position:absolute;left:var(--gutter);bottom:12px;z-index:3;justify-self:auto;align-items:flex-start;margin:0;gap:0;max-width:60%}
.muro__nota{text-align:left;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(222,236,255,.42);text-shadow:none;line-height:1.4}
.coords{bottom:14px;color:rgba(223,231,239,.5)}
/* haz luminoso: franja horizontal muy suave que baja por la portada en 14 s, entrada y salida graduales, borde difuso, nunca domina */
.hero__rayo{left:0;right:0;top:0;bottom:0;z-index:2;overflow:hidden}
.hero__rayo::before{top:0;bottom:auto;left:0;right:0;width:auto;height:180px;background:linear-gradient(180deg,rgba(180,220,255,0) 0%,rgba(180,220,255,.045) 42%,rgba(232,206,150,.035) 58%,rgba(180,220,255,0) 100%);transform:translateY(-220px);animation:rayoV 14s cubic-bezier(.37,0,.63,1) infinite}
@keyframes rayoV{0%{transform:translateY(-220px);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translateY(100vh);opacity:0}}
@media (max-width:1100px){.hero .hero__in.contenedor{max-width:min(760px,64%)}}
@media (max-width:900px){.hero .hero__in.contenedor{max-width:none}.hero{padding-top:112px}}
@media (max-width:760px){.hero{display:flex;padding:100px var(--gutter) 64px;min-height:100svh}.hero__bg.hero__bg--sala{position:absolute;aspect-ratio:auto;height:auto;width:auto}
  .hero__bg--sala::after{background:linear-gradient(180deg,rgba(8,16,25,.72) 0%,rgba(8,16,25,.66) 50%,rgba(8,16,25,.9) 100%)}
  .hero .hero__in h1{font-size:clamp(2.3rem,10.4vw,2.8rem);max-width:none}.hero .hero__in .stats{grid-template-columns:1fr 1fr;margin-top:1.6rem}
  .muro__ctl{position:absolute;padding:0;bottom:10px;max-width:calc(100% - 2*var(--gutter))}.hero__rec{top:92px}.coords{display:none}}

/* 45 · DIVISIÓN MULTICOLOR METÁLICA bajo el menú (punto 11 y precisión de Fernando): franja fina de 2 px con cian, azul, oro, titanio y
   platino siempre visibles, con bisel metálico; grosor y posición constantes. Encima pasa SOLO un realce luminoso tenue y ancho (36 % del
   ancho, mezcla «screen») que va iluminando cada color en 16 s, continuo. Movimiento reducido: franja estática, sin recorrido. */
.cab__linea{height:2px;bottom:-2px;
  background:linear-gradient(90deg,#123a5a 0%,#39b7f0 9%,#9fe3ff 14%,#39b7f0 19%,#1b4d7e 29%,#7f5a24 38%,#d6b05d 46%,#f2e485 51%,#bb8c4d 57%,#5b6775 67%,#c3ccd8 73%,#eef2f7 77%,#8f9cab 83%,#1b4d7e 91%,#123a5a 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.16),0 1px 0 rgba(0,0,0,.5),0 0 8px rgba(120,170,220,.16)}
.cab__linea i{top:0;left:0;width:36%;height:2px;margin:0;border-radius:0;opacity:1;mix-blend-mode:screen;will-change:transform;transform:translateX(-40vw);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.26) 35%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.26) 65%,rgba(255,255,255,0));animation:cabRealce 16s linear infinite}
.cab__linea i::before,.cab__linea i::after{display:none}
@keyframes cabRealce{0%{transform:translateX(-40vw)}100%{transform:translateX(104vw)}}
@media (prefers-reduced-motion:reduce){.cab__linea i{display:none;animation:none}}

/* 46 · ORO CALIBRADO, TITANIO FRÍO Y LETRAS METÁLICAS (puntos 2 y 3). Oro: bandas menos contrastadas y más lentas (14 s), destello estrecho,
   cálido y tenue (9 s, 30 % de recorrido, descanso). Titanio: metal frío claro con bisel, luces y sombras para secundarios, chips, controles
   y pastillas; tinta oscura con realce. Letras destacadas: cian metálico (luz arriba, sombra abajo) con un solo barrido por ciclo de 10 s. */
:root{--oro-anis:linear-gradient(112deg,#a87a3a 0%,#c9a04f 10%,#ead48f 20%,#d2ab59 30%,#a87a3a 42%,#dcbb6a 54%,#f0dc9b 61%,#d0a654 72%,#a87a3a 84%,#cfa858 93%,#e8d28a 100%);
  --ti-luz:#eef2f7;--ti-1:#d7dee7;--ti-2:#b3bdc9;--ti-3:#8794a4;--ti-4:#5e6a78;--ti-borde:#6a7686;--ti-tinta:#0f1722}
.btn.btn--gold,.plan__sello,.badge--gold,.serv-card .tag--gold,.tec__tab[aria-selected="true"],.form-card label.chip:has(input:checked),.cfg__ops button[aria-pressed="true"],.mapa__pills button[aria-pressed="true"]{animation-duration:14s;color:#241a08;text-shadow:0 1px 0 rgba(255,246,220,.5),0 -1px 0 rgba(90,60,30,.22)}
.btn.btn--gold::after,.plan__sello::after,.badge--gold::after,.serv-card .tag--gold::after,.tec__tab[aria-selected="true"]::after,.form-card label.chip:has(input:checked)::after{
  background:linear-gradient(105deg,rgba(255,244,214,0) 46%,rgba(255,244,214,.3) 50%,rgba(255,244,214,0) 54%);background-size:260% 100%;animation:oroDestello 9s cubic-bezier(.45,0,.2,1) infinite}
@keyframes oroDestello{0%{background-position:160% 0}30%{background-position:-60% 0}100%{background-position:-60% 0}}
.btn.btn--ghost,.cfg__ops button:not([aria-pressed="true"]),.mapa__pills button:not([aria-pressed="true"]),#demoPrev,#demoNext,#palSwitch button:not([aria-pressed="true"]),.pal-switch button:not([aria-pressed="true"]),.tec__tab:not([aria-selected="true"]),.pilar__tag,.badge:not(.badge--gold),.plan__chip,.form-card label.chip:not(:has(input:checked)),.tel,.demo-paso,.demo__barra button,.muro__btn,.mini__btn{
  color:var(--ti-tinta);border:1px solid var(--ti-borde);text-shadow:0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 18%),linear-gradient(180deg,var(--ti-luz) 0%,var(--ti-1) 30%,var(--ti-3) 62%,var(--ti-2) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(30,38,48,.45),inset 1px 0 0 rgba(255,255,255,.3),0 8px 16px -10px rgba(0,0,0,.8)}
.btn.btn--ghost .ic{background:rgba(15,23,34,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.tel .dot{background:#1680b8;box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.badge:not(.badge--gold) .dot{background:#1680b8}
@media (hover:hover){.btn.btn--ghost:hover,.cfg__ops button:not([aria-pressed="true"]):hover,.mapa__pills button:not([aria-pressed="true"]):hover,#demoPrev:hover,#demoNext:hover,#palSwitch button:hover,.tec__tab:not([aria-selected="true"]):hover,.tel:hover,.form-card label.chip:not(:has(input:checked)):hover{
  border-color:#8b97a7;background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 18%),linear-gradient(180deg,#f7f9fb 0%,#e4e9f0 30%,#9ba8b7 62%,#c8d1dc 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(30,38,48,.45),0 12px 20px -10px rgba(0,0,0,.85)}}
.btn.btn--ghost:active,.cfg__ops button:active,.mapa__pills button:active,#demoPrev:active,#demoNext:active,#palSwitch button:active,.tel:active{background:linear-gradient(180deg,var(--ti-3) 0%,var(--ti-2) 100%);box-shadow:inset 0 2px 4px rgba(20,28,38,.45)}
.btn.btn--ghost:focus-visible,.cfg__ops button:focus-visible,.mapa__pills button:focus-visible,#demoPrev:focus-visible,#demoNext:focus-visible,#palSwitch button:focus-visible,.tec__tab:focus-visible,.tel:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}
/* letras destacadas metálicas */
.hero h1 .cel{background:linear-gradient(180deg,#d2f3ff 0%,#6fd0ff 40%,#39b7f0 58%,#1a86bf 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#39b7f0}
.hero h1 .gold{animation-duration:16s}
.destello::after{background:linear-gradient(100deg,rgba(255,255,255,0) 41%,rgba(232,248,255,.7) 49%,rgba(255,255,255,.88) 50%,rgba(232,248,255,.7) 51%,rgba(255,255,255,0) 59%);background-size:320% 100%;animation:textoDestello 10s cubic-bezier(.4,0,.2,1) infinite}
@keyframes textoDestello{0%{background-position:170% 0;opacity:0}5%{opacity:1}30%{background-position:-70% 0;opacity:1}34%{opacity:0}100%{background-position:-70% 0;opacity:0}}
.hero h1 .gold.destello::after{display:none}       /* una sola frase con destello en el titular */
.eyebrow.destello::after{animation-duration:12s}
.sec__luz{opacity:0}main>section.sec.en-vista .sec__luz{opacity:.6}

/* 47 · CURSOR: sin mira roja en ningún estado; resplandor púrpura tenue, difuso y pequeño, con el mismo lenguaje del foco de luz de las
   tarjetas Esencial/Élite (púrpura suave sobre azul). Entrada/salida suaves; nada en táctil ni con movimiento reducido. */
.cursor-mira{display:none !important}
.cursor-destello{width:150px;height:150px;margin:-75px 0 0 -75px;mix-blend-mode:normal;transition:opacity .35s,transform 0s;
  background:radial-gradient(circle,rgba(150,104,232,.13) 0%,rgba(132,92,214,.07) 36%,rgba(112,72,196,.025) 56%,rgba(100,60,180,0) 70%)}
.cursor-destello.on{opacity:1}
.cursor-destello.on.sobre{opacity:1;background:radial-gradient(circle,rgba(160,112,240,.16) 0%,rgba(138,96,222,.085) 36%,rgba(112,72,196,.03) 56%,rgba(100,60,180,0) 70%)}
.cursor-destello.on.clic{background:radial-gradient(circle,rgba(160,112,240,.16) 0%,rgba(138,96,222,.085) 36%,rgba(112,72,196,.03) 56%,rgba(100,60,180,0) 70%)}

/* 48 · MAPA SIN SALTOS (punto 5): hover, foco y selección de provincias y pastillas no cambian posición, tamaño, tipografía, padding ni
   borde; solo color, luz, reflejo o sombra. */
.mapa__pills button,.mapa__pills button:hover,.mapa__pills button:focus-visible,.mapa__pills button[aria-pressed="true"],.mapa__pills button.sup:hover,.mapa__pills button.sup.toque,.mapa__pills button:active{transform:none;font-weight:500;font-size:.82rem;letter-spacing:0;line-height:1.25;padding:.5em 1em;border-width:1px}
.mapa__pills button.sup>.sup__luz{display:none}
.prov,.prov:hover,.prov.on{transform:none}

/* 49 · MAPA: el panel de información cambia de altura según la provincia y, con la columna centrada, desplazaba pastillas y título.
   Altura mínima fija = sin salto. */
.mapa__info{min-height:84px}

/* 50 · COTIZADOR PREMIUM POR PASOS (punto 6): contenedor azul marino profundo con doble marco dorado fino, resplandor muy sutil, sello
   metálico, título fuerte, progreso discreto, contexto de lo elegido, opciones en titanio (seleccionadas en oro reluciente), campos
   oscuros con etiqueta persistente, resumen editable y CTA dorado con barrido sutil. Transiciones suaves; sin movimiento reducido. */
.cotizador{position:relative;color-scheme:dark;background:linear-gradient(180deg,#10264a 0%,#0b1a33 55%,#091427 100%);color:var(--niebla);border-radius:22px;padding:clamp(1.3rem,2.6vw,2rem);
  border:1px solid rgba(214,176,93,.6);box-shadow:0 34px 70px -36px rgba(0,0,0,.9),0 0 50px -18px rgba(57,183,240,.22),inset 0 1px 0 rgba(255,255,255,.06)}
.cot__marco{position:absolute;inset:6px;border:1px solid rgba(214,176,93,.38);border-radius:17px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.cotizador>*{position:relative;z-index:1}
.cot__cab{margin-bottom:1rem}
.cot__sello{display:inline-flex;align-items:center;gap:.45em;margin:0 0 .9rem;padding:.42em .95em;border-radius:999px;font-family:var(--f-mono);font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#241a08;border:1px solid var(--oro-bronce);
  background:linear-gradient(180deg,rgba(255,250,222,.42) 0%,rgba(255,250,222,0) 18%),var(--oro-anis);background-size:100% 100%,340% 100%;animation:oroAnis 14s ease-in-out infinite alternate;box-shadow:inset 0 1px 0 rgba(255,248,214,.6),inset 0 -2px 0 rgba(90,60,30,.5)}
.cotizador h3{color:var(--blanco);font-size:clamp(1.7rem,3vw,2.3rem);margin:0 0 .25rem}
.cot__sub{margin:0 0 1rem;color:var(--niebla);font-size:.95rem}
.cot__progreso{list-style:none;margin:0 0 .8rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .7rem}
.cot__progreso li{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(223,231,239,.5)}
.cot__progreso li i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:.62rem;color:var(--ti-tinta);border:1px solid var(--ti-borde);background:linear-gradient(180deg,var(--ti-luz),var(--ti-2) 60%,var(--ti-3));box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.cot__progreso li.actual{color:var(--blanco)}
.cot__progreso li.actual i{color:#241a08;border-color:var(--oro-bronce);background:var(--oro-anis);background-size:340% 100%;animation:oroAnis 14s ease-in-out infinite alternate;box-shadow:inset 0 1px 0 rgba(255,248,214,.6),0 0 10px rgba(214,176,93,.35)}
.cot__progreso li.hecho{color:rgba(223,231,239,.75)}
.cot__progreso li.hecho i{color:#06121c;background:linear-gradient(180deg,#bdeeff,#39b7f0 60%,#1a86bf);border-color:#1a86bf}
.cot__contexto{margin:0;padding:.55em .8em;border-radius:10px;background:rgba(8,16,25,.45);border:1px solid rgba(172,184,200,.18);font-size:.82rem;color:var(--niebla)}
.cot__contexto[hidden]{display:none}
.cot__pasos{min-height:270px;position:relative}
.cot__paso h4{color:var(--blanco);font-size:1.3rem;margin:0 0 .35rem;outline:none}
.cot__paso h4:focus-visible{outline:2px solid var(--celeste);outline-offset:4px;border-radius:4px}
.cot__ayuda{margin:0 0 .9rem;color:var(--niebla);font-size:.9rem}
.cot__rotulo{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(223,231,239,.7);margin:.9rem 0 .4rem}
.cot__paso.entra-der{animation:cotEntra .32s cubic-bezier(.2,.7,.2,1)}
.cot__paso.entra-izq{animation:cotEntraIzq .32s cubic-bezier(.2,.7,.2,1)}
@keyframes cotEntra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes cotEntraIzq{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.opc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.cotizador .chip.opc{display:flex;align-items:stretch;min-height:0;padding:.9em .9em;border-radius:14px;text-align:left;white-space:normal}
.cotizador .chip.opc span{display:grid;gap:.2rem}
.cotizador .chip.opc span::before{display:none}
.cotizador .chip.opc i{font-style:normal;font-size:1.3rem;line-height:1}
.cotizador .chip.opc b{font-size:.98rem}
.cotizador .chip.opc small{font-size:.74rem;font-weight:500;opacity:.8;line-height:1.3}
.cotizador .chip{margin:0}
.cotizador .chip:has(input:checked){color:#241a08}
.cotizador .chips{gap:.5rem}
.cot__plan{margin-top:.9rem;display:grid;gap:.4rem}
.cot__nota{display:block;font-size:.78rem;color:rgba(223,231,239,.72)}
.cot__error{margin:.35rem 0 0;font-size:.82rem;color:#ffb4b4}
.cot__error[hidden]{display:none}
.cotizador .campo{margin-bottom:.9rem}
.cotizador .campo label{color:rgba(223,231,239,.78)}
.cotizador .campo label b{color:#ffb4b4}
.cotizador .campo input,.cotizador .campo select,.cotizador .campo textarea{background:rgba(8,16,25,.55);border:1px solid rgba(172,184,200,.32);color:var(--blanco);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),inset 0 2px 6px rgba(0,0,0,.35)}
.cotizador .campo input::placeholder,.cotizador .campo textarea::placeholder{color:rgba(223,231,239,.35)}
.cotizador .campo input:focus,.cotizador .campo textarea:focus{border-color:var(--celeste);box-shadow:0 0 0 3px rgba(57,183,240,.22),inset 0 2px 6px rgba(0,0,0,.35);outline:none}
.cotizador [aria-invalid="true"]{border-color:#ff8a8a !important;box-shadow:0 0 0 3px rgba(255,120,120,.16) !important}
.cotizador .contador{color:rgba(223,231,239,.55)}
.cotizador .check{color:var(--niebla)}
.cotizador .check input{accent-color:#d6b05d}
.cot__resumen{margin:0 0 1rem;display:grid;gap:.4rem}
.cot__fila{display:grid;grid-template-columns:9.5rem 1fr auto;gap:.6rem;align-items:center;padding:.5rem .8rem;border-radius:10px;background:rgba(8,16,25,.4);border:1px solid rgba(172,184,200,.14)}
.cot__fila dt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(223,231,239,.6)}
.cot__fila dd{margin:0;color:var(--blanco);font-size:.92rem}
.cot__editar{border:0;background:none;color:var(--celeste);font:600 .78rem var(--f-txt);cursor:pointer;padding:.2em .4em;border-radius:6px}
.cot__editar:hover{text-decoration:underline}.cot__editar:focus-visible{outline:2px solid var(--celeste);outline-offset:2px}
.cotizador .privacidad{color:rgba(223,231,239,.7)}
.cot__pie{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(172,184,200,.14)}
.cot__pie #cotSig,.cot__pie #formEnviar{margin-left:auto}
.cot__pie .btn[hidden]{display:none}
.cot__estado{flex:1 1 auto;min-height:0;font-size:.88rem}
.form-estado.cot__estado.ok{color:#8be0b0}.form-estado.cot__estado.err{color:#ffb4b4}
.cot__fin{text-align:center;padding:1.2rem 0}
.cot__acuse{font-size:1.1rem;color:var(--blanco)}
.cot__acuse b{font-family:var(--f-mono);letter-spacing:.06em;color:#f2e485}
.cotizador.cot--fin .cot__progreso,.cotizador.cot--fin .cot__contexto{display:none}
.confianza{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem}
.confianza li{display:grid;gap:.15rem;padding:.6rem .85rem;border-radius:10px;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.06);color:var(--tinta);font-size:.9rem}
.confianza b{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-60)}
@media (max-width:640px){.opc-grid{grid-template-columns:1fr}.cot__fila{grid-template-columns:1fr;gap:.2rem}.cot__fila .cot__editar{justify-self:start}.cot__pie{gap:.5rem}.cotizador .campo input,.cotizador .campo textarea{font-size:16px;min-height:46px}}
@media (prefers-reduced-motion:reduce){.cot__paso.entra-der,.cot__paso.entra-izq{animation:none}.cot__sello,.cot__progreso li.actual i{animation:none}}
/* 51 · sección de contacto: el botón de video del panel lateral ocupaba solo su contenido (118 px); ancho completo del panel. */
.conv__lado .vid{width:100%;max-width:560px}

/* ============================================================================================================================
   52 · DEFINICIÓN FINAL DE MATERIALES (Lex 24/10, noche): dos acabados — ORO AMARILLO metálico (logotipo Grupo Global) y PLATINUM / ORO
   BLANCO metálico claro, frío y elegante (sustituye al titanio/gris). LETRAS METÁLICAS ESTÁTICAS: luces, medios tonos, sombras y bisel
   fijos; sin barridos, shimmer ni cambios de brillo sobre la tipografía. Se conservan la barra multicolor del menú (reflejo tenue y lento),
   el rayo del perímetro de las tarjetas y el reflejo sutil de los BOTONES; los destellos en letras quedan eliminados. ================= */
:root{--pt-luz:#fbfcfd;--pt-1:#e7eaee;--pt-2:#c9cfd6;--pt-3:#9ea7b1;--pt-4:#78818c;--pt-borde:#8d96a1;--pt-tinta:#121923}
.btn.btn--ghost,.cfg__ops button:not([aria-pressed="true"]),.mapa__pills button:not([aria-pressed="true"]),#demoPrev,#demoNext,#palSwitch button:not([aria-pressed="true"]),.pal-switch button:not([aria-pressed="true"]),.tec__tab:not([aria-selected="true"]),.pilar__tag,.badge:not(.badge--gold),.plan__chip,.form-card label.chip:not(:has(input:checked)),.cotizador .chip:not(:has(input:checked)),.tel,.demo-paso,.demo__barra button,.muro__btn,.mini__btn,.cot__progreso li i{
  color:var(--pt-tinta);border-color:var(--pt-borde);text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 20%),linear-gradient(180deg,var(--pt-luz) 0%,var(--pt-1) 28%,var(--pt-3) 60%,var(--pt-2) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(40,48,58,.38),inset 1px 0 0 rgba(255,255,255,.55),0 8px 16px -10px rgba(0,0,0,.6)}
.cot__progreso li i{background:linear-gradient(180deg,var(--pt-luz),var(--pt-2) 60%,var(--pt-3))}
@media (hover:hover){.btn.btn--ghost:hover,.cfg__ops button:not([aria-pressed="true"]):hover,.mapa__pills button:not([aria-pressed="true"]):hover,#demoPrev:hover,#demoNext:hover,#palSwitch button:hover,.tec__tab:not([aria-selected="true"]):hover,.tel:hover,.form-card label.chip:not(:has(input:checked)):hover,.cotizador .chip:not(:has(input:checked)):hover{
  border-color:#a4adb8;background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,0) 20%),linear-gradient(180deg,#ffffff 0%,#eef1f4 28%,#aeb6c0 60%,#d6dbe1 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(40,48,58,.38),0 12px 20px -10px rgba(0,0,0,.7)}}
.btn.btn--ghost:active,.cfg__ops button:active,.mapa__pills button:active,#demoPrev:active,#demoNext:active,#palSwitch button:active,.tel:active{background:linear-gradient(180deg,var(--pt-3) 0%,var(--pt-2) 100%);box-shadow:inset 0 2px 4px rgba(20,28,38,.35)}
.btn.btn--ghost .ic{background:rgba(18,25,35,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
/* letras metálicas ESTÁTICAS: gradiente de luz/medios tonos/sombra recortado al texto + bisel fijo (sombra 1 px abajo y luz 1 px arriba) */
.destello::after,.hero h1 .gold.destello::after,.eyebrow.destello::after,.tit-brillo .brillo.destello::after,.tit-brillo .brillo::after{display:none !important;animation:none !important}
.hero h1 .gold,.hero h1 .gold.destello{animation:none !important;background:linear-gradient(180deg,#f6e7b2 0%,#ead48f 22%,#c9a04f 48%,#8d613f 70%,#d6b05d 88%,#f0dc9b 100%);background-size:100% 100%;background-position:0 0}
.hero h1 .cel{background:linear-gradient(180deg,#e6f7ff 0%,#9be0ff 24%,#39b7f0 50%,#1476ad 72%,#5cc6f5 100%)}
.hero h1,.hero h1 .cel,.hero h1 .gold{filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(255,255,255,.14))}
.hero h1 .cel,.hero h1 .gold{filter:none}   /* el bisel lo aporta el h1 completo; evitar doble sombra en los spans */
.tit-brillo .brillo,.tit-brillo .brillo.destello{background:linear-gradient(180deg,#f0dc9b 0%,#d6b05d 38%,#a87a3a 62%,#7a5522 80%,#c9a04f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#a87a3a;filter:drop-shadow(0 1px 0 rgba(0,0,0,.28))}
.sec__head h2 .cel,h2 .cel{background:linear-gradient(180deg,#9be0ff 0%,#39b7f0 50%,#1476ad 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec__head h2 .gold,h2 .gold{background:linear-gradient(180deg,#ead48f 0%,#c9a04f 50%,#8d613f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eyebrow.destello{color:var(--celeste)}
@media (prefers-reduced-motion:reduce){.hero h1,.tit-brillo .brillo{filter:none}}
/* 53 · corrección: el shorthand «background» del bloque 52 anulaba el recorte al texto en .cel/.gold (se veían rectángulos). Recorte declarado después. */
.hero h1 .cel,.hero h1 .gold,.hero h1 .gold.destello,.tit-brillo .brillo,.sec__head h2 .cel,h2 .cel,.sec__head h2 .gold,h2 .gold{-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent;color:transparent}

/* 54 · CORRECCIONES DE LEX 24/10 (noche, tercera serie). Línea del menú con PÚRPURA y realce muy suave; GPS y Planes con acción real;
   PTZ fotorrealista (SVG con bisel, cristal y módulo que gira); fondos de sección: red neuronal (FAQ) y lluvia de dígitos (pilares);
   franja de los siete agentes; copy de lanzamiento. */
.cab__linea{background:linear-gradient(90deg,#123a5a 0%,#39b7f0 8%,#9fe3ff 12%,#39b7f0 17%,#1b4d7e 24%,#6b45c8 31%,#b18cff 36%,#6b45c8 41%,#7f5a24 48%,#d6b05d 54%,#f2e485 58%,#bb8c4d 63%,#5b6775 71%,#c3ccd8 76%,#eef2f7 80%,#8f9cab 85%,#1b4d7e 93%,#123a5a 100%)}
.cab__linea i{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16) 35%,rgba(255,255,255,.28) 50%,rgba(255,255,255,.16) 65%,rgba(255,255,255,0));animation-duration:18s}
.agentes{list-style:none;margin:0 0 1.4rem;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem}
.agentes li{display:grid;gap:.1rem;padding:.6rem .8rem;border-radius:12px;color:var(--pt-tinta);border:1px solid var(--pt-borde);text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 20%),linear-gradient(180deg,var(--pt-luz) 0%,var(--pt-1) 28%,var(--pt-3) 60%,var(--pt-2) 100%);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(40,48,58,.38)}
.agentes b{font-family:var(--f-disp);font-size:1.05rem;letter-spacing:.02em}.agentes span{font-size:.76rem;color:#2d3845}
.serv-card__foto.gps{display:grid;grid-template-columns:1.25fr 1fr;grid-template-areas:"video mapa" "etq etq";gap:6px;padding:6px;background:#0b1420;height:auto;min-height:168px}
.gps__pantalla{grid-area:video;border-radius:3px;overflow:hidden;background:#06101a}
.gps__video{width:100%;height:auto;display:block;aspect-ratio:300/168}
.gps__mapa{grid-area:mapa;width:100%;height:auto;display:block;border-radius:3px;aspect-ratio:220/168}
.serv-card__foto.gps .ptz__etq{grid-area:etq}
.serv-card__foto.asesora{position:relative;padding:6px;background:#0b1420;height:auto;min-height:168px;display:grid;grid-template-areas:"v" "etq";gap:6px}
.ase__video{grid-area:v;width:100%;height:auto;display:block;border-radius:3px;aspect-ratio:480/270}
.ase__doc{position:absolute;right:14px;top:14px;width:46%;max-width:210px;padding:.5rem .6rem .6rem;border-radius:8px;background:rgba(8,16,25,.78);border:1px solid rgba(172,184,200,.28);color:#e6eef7;font:500 .66rem/1.4 var(--f-mono);letter-spacing:.02em;backdrop-filter:blur(3px)}
.ase__doc b{display:block;font-size:.68rem;color:#f2e485;margin-bottom:.3rem}
.ase__doc ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.ase__doc li{display:flex;align-items:center;gap:.4em;opacity:.55;transition:opacity .4s}
.ase__doc li::before{content:"";width:9px;height:9px;border-radius:50%;border:1px solid rgba(222,236,255,.6);flex:0 0 9px;transition:background .4s,border-color .4s}
.ase__doc li.activo{opacity:1}.ase__doc li.activo::before{border-color:#39b7f0;box-shadow:0 0 6px rgba(57,183,240,.7)}
.ase__doc li.ok{opacity:1;color:#bfeeff}.ase__doc li.ok::before{background:#39b7f0;border-color:#39b7f0}
.ase__barra{display:block;height:2px;margin-top:.4rem;background:linear-gradient(90deg,#39b7f0,#d6b05d);width:0;transition:width .3s linear;border-radius:2px}
.serv-card__foto.asesora .ptz__etq{grid-area:etq}
.serv-card__foto.gps+.srv-ic,.serv-card__foto.asesora+.srv-ic{margin-top:.6rem}
/* PTZ fotorrealista */
.serv-card__foto.ptz{grid-template-columns:128px 1fr}
.ptz__escena{height:140px;perspective:none}
.ptz__svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.ptz__modulo{transform-box:fill-box}
.ptz__svg .ptz__led{animation:muroPulso 1.6s ease-in-out infinite}
.serv-card__foto.ptz:not(.vivo) .ptz__svg .ptz__led{animation-play-state:paused}
/* fondos animados de sección */
main>section.sec>.fondo-anim{position:absolute;left:0;top:0;z-index:0;pointer-events:none}
.fondo-red{opacity:.7} /* 24/10 19:57: red que procesa (pulsos y nodos a la deriva), ver tarjetas.js */
.fondo-lluvia{opacity:.22}
.sec--pilares .pilar{position:relative;z-index:1}
@media (max-width:640px){.serv-card__foto.gps{grid-template-columns:1fr;grid-template-areas:"video" "mapa" "etq"}.ase__doc{width:56%}.fondo-red{opacity:.4}}
@media (prefers-reduced-motion:reduce){.fondo-anim{display:none}.ptz__svg .ptz__led{animation:none}}
/* 55 · LÍNEA DEL MENÚ VIVA (Lex 24/10 19:27): colores saturados y contrastados (cian/azul, púrpura, dorado) sin tramos grises ni oscuros;
   línea fina (2 px) con bisel; realce luminoso estrecho (14 % del ancho) y brillante que recorre los colores de izquierda a derecha en
   10 s, continuo y repetitivo, con un halo suave de 10 px alrededor de la línea; sin estrella, sin flash, sin blanquear toda la línea.
   Movimiento reducido: línea de colores estática, sin recorrido. */
.cab__linea{height:2px;bottom:-2px;
  background:linear-gradient(90deg,#1c8fd6 0%,#39b7f0 6%,#8fe3ff 11%,#39b7f0 16%,#2f6fff 23%,#6f8cff 28%,#2f6fff 33%,#8e5cff 40%,#c9a9ff 46%,#8e5cff 52%,#e9b94a 60%,#ffe08a 66%,#d6a63a 72%,#39b7f0 82%,#8fe3ff 88%,#2f6fff 95%,#1c8fd6 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.22),0 1px 0 rgba(0,0,0,.55),0 0 10px rgba(120,160,255,.28)}
.cab__linea i{display:block;top:-5px;left:0;width:14%;height:12px;margin:0;border-radius:6px;opacity:1;mix-blend-mode:screen;will-change:transform;transform:translateX(-16vw);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.35) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.35) 70%,rgba(255,255,255,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 30%,#000 44%,#000 56%,rgba(0,0,0,.35) 70%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 30%,#000 44%,#000 56%,rgba(0,0,0,.35) 70%,rgba(0,0,0,0) 100%);
  animation:cabRealce 10s linear infinite}
.cab__linea i::before,.cab__linea i::after{display:none}
@keyframes cabRealce{0%{transform:translateX(-16vw)}100%{transform:translateX(102vw)}}
@media (prefers-reduced-motion:reduce){.cab__linea i{display:none;animation:none}}

/* 56 · SEIS PILARES (Lex 24/10 19:31): tarjetas con fondo totalmente opaco (mismo tono azul marino profundo que tenían sobre la sección)
   y por encima de la lluvia de dígitos; ningún dígito detrás de títulos, textos o etiquetas, tampoco en hover. La lluvia solo se ve en el
   fondo exterior y entre tarjetas. Colores, bordes, distribución e interacción sin cambios. */
.sec--pilares .pilar{position:relative;z-index:2;background:#19212e;background-image:linear-gradient(165deg,#19212e 0%,#0f1721 100%)}   /* = el gradiente translúcido original (4,5 %→1,5 % de blanco) aplanado sobre la sección: mismo tono, opaco */
.sec--pilares .pilar::before,.sec--pilares .pilar::after{z-index:0}
.sec--pilares .pilar>*{position:relative;z-index:1}
.sec--pilares .pilar>.sup__luz{z-index:0}
@media (hover:hover){.sec--pilares .pilar:hover,.sec--pilares .pilar.sup:hover{background-color:#19212e;background-image:linear-gradient(165deg,#19212e 0%,#0f1721 100%)}}

/* 57 · ACCESOS (Lex 24/10 tarde): «Acceso de clientes» y «Acceso interno» en el menú, el menú móvil y el pie, enlazados al portal
   (en producción, la misma ruta bajo el dominio). Mismo estilo de los enlaces del menú, con un candado fino.
   No se tocan los demás enlaces ni los botones aprobados. */
.nav .nav__acceso{display:inline-flex;align-items:center;gap:.4em;color:#cfe3f5}
.nav .nav__acceso:first-of-type{padding-left:.9em;border-left:1px solid rgba(172,184,200,.28)}
.nav a.nav__acceso:nth-last-child(2){padding-left:.9em;border-left:1px solid rgba(172,184,200,.28)}
.nav a.nav__acceso:last-child{padding-left:0;border-left:0}
.candado{flex:none;width:10px;height:9px;border:1.4px solid currentColor;border-radius:2px;position:relative;opacity:.85;margin-top:3px}
.candado::before{content:"";position:absolute;left:1.3px;top:-6px;width:4.4px;height:6px;border:1.4px solid currentColor;border-bottom:0;border-radius:4px 4px 0 0}
.menu-movil .nav__acceso{color:#cfe3f5}
.pie__accesos{display:flex;gap:1.1rem;flex-wrap:wrap;margin:0 0 .7rem;font-size:.9rem}
.pie__accesos a{color:#cfe3f5;text-decoration:underline;text-underline-offset:3px}
.pie__accesos a:hover{color:#fff}
@media (max-width:1180px){.nav .candado{display:none}}

/* 58 · ICONO QUE SOBRESALE CON RAYO (Fernando 24/10 21:30; reforzado 21:55 porque no se percibía): al pasar el cursor por un botón
   dorado (Continuar del cotizador, Cotizar, Cotizar Avizor Esencial…) el icono sale hacia adelante (×1,38) y lleva alrededor un anillo
   giratorio nítido con el mismo rayo oro → celeste del botón, más un halo dorado. El botón flotante de WhatsApp sobresale igual (×1,22)
   con el mismo anillo. Misma temática, nada nuevo de color. Sin movimiento con prefers-reduced-motion. */
.btn--gold .ic{position:relative;transition:transform var(--d) var(--ease),box-shadow var(--d) var(--ease)}
.btn--gold .ic::before{content:"";position:absolute;inset:-5px;padding:2px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--ga),transparent 0 58%,rgba(255,222,140,1) 78%,rgba(125,211,252,1) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 3px rgba(255,214,120,.9));opacity:0;transition:opacity var(--d);animation:giragold 2.2s linear infinite}
.wa{transition:transform var(--d) var(--ease),box-shadow var(--d) var(--ease)}
.wa::before{content:"";position:absolute;inset:-7px;padding:3px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from var(--ga),transparent 0 58%,rgba(255,222,140,1) 78%,rgba(125,211,252,1) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:drop-shadow(0 0 4px rgba(255,214,120,.9));opacity:0;transition:opacity var(--d);animation:giragold 2.4s linear infinite}
@media (hover:hover){
  .btn--gold:hover .ic{transform:translate(4px,-1px) scale(1.38);box-shadow:0 0 0 1px rgba(255,236,170,.5),0 0 16px rgba(201,160,76,.8),0 8px 18px -6px rgba(0,0,0,.6)}
  .btn--gold:hover .ic::before{opacity:1}
  .wa:hover{transform:translateY(-3px) scale(1.22);box-shadow:0 0 0 2px rgba(255,255,255,.08),0 0 28px rgba(201,160,76,.65),0 16px 32px -8px rgba(37,211,102,.7)}
  .wa:hover::before{opacity:1}
}
.btn--gold:focus-visible .ic{transform:translate(4px,-1px) scale(1.38)}.btn--gold:focus-visible .ic::before{opacity:1}
.wa:focus-visible{transform:translateY(-3px) scale(1.22)}.wa:focus-visible::before{opacity:1}
@media (prefers-reduced-motion:reduce){.btn--gold .ic::before,.wa::before{animation:none}.btn--gold:hover .ic,.wa:hover{transform:none}}

/* 59 · FADE POR ELEMENTO LIGADO AL SCROLL (Fernando 24/10 22:10, tipo Apple; ver app.js 4d): la opacidad y el desplazamiento los pone
   el script cuadro a cuadro, así que aquí se apagan las transiciones y el desenfoque del revelado por clase (que seguía ahí debajo).
   Con movimiento reducido el script no corre y rige la regla de arriba (todo visible). */
html.fx-scroll-el .rv:not(.cotizador),html.fx-scroll-el .rv-st>*{transition:none!important;filter:none!important}
html.fx-scroll-el .rv,html.fx-scroll-el .rv-st>*{opacity:var(--fo,1);transform:translateY(var(--fy,0px))}

/* 60 · COTIZADOR COMPLETO: ELEVACIÓN + RAYO PERIMETRAL (Lex 24/10 22:30). Al pasar el cursor por todo el bloque .cotizador, o con foco de
   teclado dentro, el bloque se eleva 10 px con escala 1,015 (solo transform: sin salto de maquetación) y un haz oro→celeste recorre los
   cuatro lados del borde redondeado (anillo nítido de 2 px + resplandor suave, mismo lenguaje que el marco de los planes). Las capas van
   DETRÁS del contenido (z-index 0; el contenido ya está en z-index 1). En táctil no hay hover. Con movimiento reducido: borde dorado
   estático, sin desplazamiento ni animación. El desplazamiento del fade de scroll (--fy) se compone con la elevación. */
@property --lift{syntax:"<length>";initial-value:0px;inherits:false}
@property --lsc{syntax:"<number>";initial-value:1;inherits:false}
.cotizador,html.fx-scroll-el .cotizador.rv{transform:translateY(calc(var(--fy,0px) + var(--lift))) scale(var(--lsc));filter:none!important;
  transition:--lift .55s var(--ease),--lsc .55s var(--ease),box-shadow .55s var(--ease)!important}
.cotizador>.marco-luz{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .45s var(--ease)}   /* .cotizador>* lo volvía relative (caja de 4×26 px): se fija aquí con más especificidad */
.cotizador>.marco-luz--cot{padding:2px;
  background:conic-gradient(from calc(var(--mo) + var(--m0,0deg)),rgba(243,223,162,0) 0deg,rgba(243,223,162,0) 232deg,rgba(57,183,240,.35) 284deg,rgba(226,190,106,.7) 322deg,rgba(255,246,222,1) 342deg,rgba(143,227,255,1) 350deg,rgba(57,183,240,.65) 356deg,rgba(243,223,162,0) 360deg)}
.cotizador>.marco-luz--cot-glow{padding:9px;filter:blur(6px);
  background:conic-gradient(from calc(var(--mo) + var(--m0,0deg)),rgba(243,223,162,0) 0deg,rgba(243,223,162,0) 252deg,rgba(226,190,106,.4) 318deg,rgba(255,240,200,.9) 344deg,rgba(143,227,255,.8) 352deg,rgba(243,223,162,0) 360deg)}
@media (hover:hover){
  .cotizador:hover,.cotizador:has(input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible){--lift:-10px;--lsc:1.015;
    box-shadow:0 52px 96px -42px rgba(0,0,0,.95),0 0 72px -18px rgba(57,183,240,.32),inset 0 1px 0 rgba(255,255,255,.08)}
  .cotizador:hover>.marco-luz--cot,.cotizador:has(input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible)>.marco-luz--cot{opacity:1;animation:marcoOroVivo 6.5s linear infinite}
  .cotizador:hover>.marco-luz--cot-glow,.cotizador:has(input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible)>.marco-luz--cot-glow{opacity:.6;animation:marcoOroVivo 6.5s linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .cotizador,.cotizador:hover,html.fx-scroll-el .cotizador.rv{--lift:0px;--lsc:1;transition:none!important}
  .cotizador>.marco-luz{animation:none!important;opacity:0}
  .cotizador:hover>.marco-luz--cot,.cotizador:has(input:focus-visible)>.marco-luz--cot{opacity:.9;background:linear-gradient(135deg,#8fe3ff,#d6b05d 50%,#39b7f0)}
}

/* 61 · METAL LENTO EN BOTONES Y OPCIONES (Lex 24/10 22:30; ver app.js 4f). Lámina .msh dentro de cada control (recortada al radio del
   control, detrás del contenido) con un reflejo especular que la recorre LENTO (16–22 s, desfases por grupo y por control), discreto y sin
   sincronía. Volumen: los acabados oro (bloques 37/46) y platinum (52) ya traen luz superior, medio tono, sombra inferior y bisel; aquí se
   añade solo el reflejo en movimiento. Hover/foco lo intensifica levemente. Solo corre en pantalla (.msh-on). Reducido: metal estático. */
.btn,label.chip,.tec__tab,.cfg__ops button,.mapa__pills button,.pal-switch button,#palSwitch button,#demoPrev,#demoNext{position:relative;isolation:isolate}
.msh{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1!important}
.msh::before{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:46%;transform:translateX(-130%) skewX(-18deg);opacity:.55;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.22) 42%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.22) 58%,rgba(255,255,255,0) 100%);
  animation:mshLento var(--msd,18s) cubic-bezier(.45,0,.2,1) var(--mso,0s) infinite;animation-play-state:paused}
.btn--gold .msh::before,label.chip:has(input:checked) .msh::before,.tec__tab[aria-selected="true"] .msh::before,[aria-pressed="true"] .msh::before{opacity:.42;
  background:linear-gradient(90deg,rgba(255,250,222,0) 0%,rgba(255,250,222,.3) 42%,rgba(255,250,222,.55) 50%,rgba(255,250,222,.3) 58%,rgba(255,250,222,0) 100%)}
.msh-on .msh::before{animation-play-state:running}
@keyframes mshLento{0%{transform:translateX(-130%) skewX(-18deg)}22%{transform:translateX(330%) skewX(-18deg)}100%{transform:translateX(330%) skewX(-18deg)}}
@media (hover:hover){.btn:hover .msh::before,label.chip:hover .msh::before,.tec__tab:hover .msh::before,.cfg__ops button:hover .msh::before,.mapa__pills button:hover .msh::before{opacity:.8}}
.btn:focus-visible .msh::before,label.chip:focus-within .msh::before,.tec__tab:focus-visible .msh::before{opacity:.8}
@media (prefers-reduced-motion:reduce){.msh{display:none}}

/* 62 · CHIPS DE HORARIO CON MINI ESCENA ANIMADA (Fernando 24/10 22:50, propuesta C elegida). Cada opción lleva una ventana de cielo
   que se entiende sin leer: DIURNO = amanecer con sol que brilla y se contrae como una estrella; NOCTURNO = luna y estrellas que van y
   vienen, con una estrella fugaz ocasional; 24/7 = cielo partido con ambos efectos. El chip conserva el metal (platinum, oro al elegir) y
   los rótulos/valores aprobados. Todo CSS, sin imágenes. Con movimiento reducido: escenas estáticas. */
.cotizador .chip.chip--cielo{display:inline-grid;grid-template-columns:64px auto;align-items:center;gap:.75em;padding:0 1.05em 0 0;min-height:58px;border-radius:16px;overflow:hidden;text-align:left;white-space:normal}
.cotizador .chip.chip--cielo .txt{display:grid;gap:.1rem;line-height:1.15}.cotizador .chip.chip--cielo .txt::before{display:none}
.cotizador .chip.chip--cielo .txt b{font-size:.98rem}.cotizador .chip.chip--cielo .txt small{font-size:.72rem;font-weight:500;opacity:.78}
.cielo{position:relative;display:block;width:64px;height:58px;overflow:hidden;box-shadow:inset -1px 0 0 rgba(0,0,0,.18)}
.cielo i{position:absolute;display:block;pointer-events:none}
/* día: amanecer y sol */
.cielo-dia .cielo{background:linear-gradient(180deg,#7fc3ff 0%,#dff0ff 68%,#ffe9b0 100%)}
.cielo-dia .cielo::before,.cielo-full .cielo::before{content:"";position:absolute;left:19px;top:14px;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle,#fff8d6 0%,#ffd24d 55%,#f0a63a 100%);box-shadow:0 0 14px 4px rgba(255,214,90,.65);animation:solBrilla 3.4s ease-in-out infinite;transform-origin:50% 50%}
.cielo-dia .cielo::after,.cielo-full .cielo::after{content:"";position:absolute;left:12px;top:7px;width:40px;height:40px;pointer-events:none;
  background:linear-gradient(90deg,transparent 46%,rgba(255,246,200,.9) 50%,transparent 54%),linear-gradient(0deg,transparent 46%,rgba(255,246,200,.9) 50%,transparent 54%);
  opacity:.45;animation:solRayos 3.4s ease-in-out infinite;transform-origin:50% 50%}
@keyframes solBrilla{0%,100%{transform:scale(.92);box-shadow:0 0 10px 3px rgba(255,214,90,.5)}50%{transform:scale(1.16);box-shadow:0 0 24px 10px rgba(255,214,90,.9)}}
@keyframes solRayos{0%,100%{transform:scale(.8) rotate(0deg);opacity:.25}50%{transform:scale(1.25) rotate(12deg);opacity:.75}}
/* noche: luna, estrellas que van y vienen, fugaz ocasional */
.cielo-noche .cielo{background:linear-gradient(180deg,#0a1130 0%,#17264f 100%)}
.cielo .luna{display:none}
.cielo-noche .cielo .luna,.cielo-full .cielo .luna{display:block;left:34px;top:11px;width:20px;height:20px;border-radius:50%;background:transparent;box-shadow:inset -6px -3px 0 0 #e9eef7,0 0 10px rgba(233,238,247,.35);animation:lunaRespira 6s ease-in-out infinite}
.cielo-full .cielo .luna{left:38px;top:30px;width:16px;height:16px;box-shadow:inset -5px -2px 0 0 #e9eef7,0 0 8px rgba(233,238,247,.35)}
@keyframes lunaRespira{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.15)}}
.cielo .estrellas{display:none}
.cielo-noche .cielo .estrellas,.cielo-full .cielo .estrellas{display:block;inset:0;
  background:radial-gradient(circle at 10px 40px,#fff 1.1px,transparent 2px),radial-gradient(circle at 48px 46px,#fff 1px,transparent 1.9px),radial-gradient(circle at 7px 10px,#fff .9px,transparent 1.7px),radial-gradient(circle at 56px 8px,#fff .9px,transparent 1.7px),radial-gradient(circle at 26px 22px,#fff .8px,transparent 1.6px);
  animation:titila 2.6s ease-in-out infinite}
.cielo-noche .cielo::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 20px 50px,#fff 1px,transparent 1.9px),radial-gradient(circle at 40px 14px,#fff 1px,transparent 1.9px),radial-gradient(circle at 58px 30px,#fff .8px,transparent 1.6px),radial-gradient(circle at 30px 38px,#fff .7px,transparent 1.5px);
  animation:titila 3.4s ease-in-out -1.7s infinite}
.cielo-full .cielo .estrellas{background:radial-gradient(circle at 44px 50px,#fff 1px,transparent 1.9px),radial-gradient(circle at 58px 40px,#fff .9px,transparent 1.7px),radial-gradient(circle at 52px 22px,#fff .8px,transparent 1.6px),radial-gradient(circle at 36px 46px,#fff .7px,transparent 1.5px)}
@keyframes titila{0%,100%{opacity:.25}50%{opacity:1}}
.cielo .fugaz{display:none}
.cielo-noche .cielo .fugaz,.cielo-full .cielo .fugaz{display:block;left:-18px;top:6px;width:22px;height:1.5px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),#fff);box-shadow:0 0 4px rgba(255,255,255,.8);transform:rotate(28deg);animation:fugaz 9s linear 2s infinite}
.cielo-full .cielo .fugaz{top:22px;left:14px;animation-delay:4.5s}
@keyframes fugaz{0%{transform:translate(0,0) rotate(28deg);opacity:0}3%{opacity:1}11%{transform:translate(78px,42px) rotate(28deg);opacity:0}100%{transform:translate(78px,42px) rotate(28deg);opacity:0}}
/* 24/7: cielo partido día/noche */
.cielo-full .cielo{background:linear-gradient(135deg,#7fc3ff 0%,#dff0ff 38%,#17264f 58%,#0a1130 100%)}
.cielo-full .cielo::before{left:8px;top:8px;width:22px;height:22px}
.cielo-full .cielo::after{left:2px;top:1px;width:34px;height:34px}
@media (prefers-reduced-motion:reduce){.cielo *,.cielo::before,.cielo::after{animation:none!important}.cielo .fugaz{display:none}}

/* 63 · H1 DEL HERO: MÁS DOMINANTE + REFLEJO METÁLICO DENTRO DE LAS LETRAS (Lex 24/10 noche). Excepción única a la regla de letras
   metálicas estáticas (bloque 52), solo para este titular. Texto, tres líneas y colores (platino / celeste / oro) sin cambio; tipografía
   condensada sin cambio. Tamaños: 1920 → ~86 px, 1440 → ~78 px, tablet 1024 → ~54 px, móvil 390 → 46 px (clamp por tramo, medido para que
   la línea más larga quepa en la columna y las cifras sigan dentro del primer viewport). Reflejo: banda especular ancha y suave (105°,
   fondo de 200 % con banda del 36–64 % → la banda mide ~0,56 del ancho del fragmento y está DENTRO de las letras durante toda la pasada; pico 70 % de blanco sobre platino y 60 % sobre celeste y oro: aclara sin lavar) que recorre cada fragmento de izquierda a derecha en
   4,8 s (curva casi lineal: la banda cruza las letras durante ~3 s) y descansa 6,2 s (ciclo 11 s), recortada a los glifos por background-clip:text; desfase 0 / −0,35 / −0,7 s entre platino, celeste
   y oro. Corre solo con el hero en pantalla (.anim-on) y queda estática con movimiento reducido. */
.hero .hero__in h1{font-size:clamp(4rem,5.4vw,4.9rem);line-height:.96;letter-spacing:-.016em;max-width:none;margin:.1em 0 .4em;
  color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;
  background-image:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 64%),linear-gradient(180deg,#f4f7fa 0%,#dbe2e9 28%,#a3aebb 60%,#d9e0e7 100%);
  background-size:200% 100%,100% 100%;background-position:150% 0,0 0;animation:h1Reflejo 11s cubic-bezier(.3,.05,.7,.95) 0s infinite}
@media (min-width:1600px){.hero .hero__in h1{font-size:clamp(4.6rem,4.5vw,5.5rem)}}
@media (min-width:900px) and (max-width:1199px){.hero .hero__in h1{font-size:clamp(3.1rem,5.3vw,3.6rem)}}
@media (max-width:899px){.hero .hero__in h1{font-size:clamp(2.6rem,6.2vw,3.4rem)}}
@media (max-width:640px){.hero .hero__in h1{font-size:clamp(2.6rem,11.8vw,3rem);line-height:.97;margin:.12em 0 .42em}}
.hero .hero__in h1 .cel,.hero .hero__in h1 .gold{background-repeat:no-repeat;background-size:200% 100%,100% 100%;background-position:150% 0,0 0}
.hero .hero__in h1 .cel{background-image:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 64%),linear-gradient(180deg,#e6f7ff 0%,#9be0ff 24%,#39b7f0 50%,#1476ad 72%,#5cc6f5 100%);
  animation:h1Reflejo 11s cubic-bezier(.3,.05,.7,.95) -.35s infinite !important}
.hero .hero__in h1 .gold{background-image:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 64%),linear-gradient(180deg,#f6e7b2 0%,#ead48f 22%,#c9a04f 48%,#8d613f 70%,#d6b05d 88%,#f0dc9b 100%);
  animation:h1Reflejo 11s cubic-bezier(.3,.05,.7,.95) -.7s infinite !important}
@keyframes h1Reflejo{0%{background-position:150% 0,0 0}44%{background-position:-50% 0,0 0}100%{background-position:-50% 0,0 0}}
.hero:not(.anim-on) .hero__in h1,.hero:not(.anim-on) .hero__in h1 .cel,.hero:not(.anim-on) .hero__in h1 .gold{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.hero .hero__in h1,.hero .hero__in h1 .cel,.hero .hero__in h1 .gold{animation:none !important;background-position:150% 0,0 0}}

/* 64 · RESPUESTA GLOBAL AL CURSOR, FOCO Y TOQUE (Lex 25/10; app.js 4g). Todo control con .hv: elevación por variables registradas
   (--lift/--lsc, compuestas con el --fy del fade: ninguna animación pisa a la otra), escala muy moderada, sombra profunda + halo contenido
   (drop-shadow, que no borra los biseles de box-shadow), borde y contraste reforzados. La pasada de luz de vidrio (.msh::after) SOLO en
   tarjetas y recuadros, lenta (1,4 s), al entrar el cursor, con foco visible o al tocar; dentro de los botones y controles no hay
   ninguna pasada rápida: solo el reflejo ambiental lento (corrección de Lex). Sin cambios de caja ni de texto (solo transform/filter).
   Táctil: :active breve y físico. Reducido: borde, luz y contraste estáticos. */
.hv{--lift:0px;--lsc:1;--hv-up:-7px;--hv-sc:1.012;position:relative;isolation:isolate;
  transform:translateY(calc(var(--fy,0px) + var(--lift))) scale(var(--lsc)) !important;
  transition:--lift .42s var(--ease),--lsc .42s var(--ease),box-shadow .35s var(--ease),border-color .3s var(--ease),filter .35s var(--ease),background-color .3s,color .3s !important}
.serv-card.hv,.sect a.hv,.plan.hv,.pilar.hv,.razon.hv,.paso.hv,.faq details.hv{--hv-up:-10px;--hv-sc:1.01}
.nav--main a.hv,.menu-movil a.hv,.pie__accesos a.hv,.tel.hv{--hv-up:-6px;--hv-sc:1.02}
.menu-btn.hv,.modal__x.hv,#idiomaBtn.hv,.quitar.hv,.cot__editar.hv{--hv-up:-6px;--hv-sc:1.06}
.msh--quieto::before{display:none}
.serv-card.hv>.msh::after,.sect a.hv>.msh::after,.plan.hv>.msh::after,.pilar.hv>.msh::after,.razon.hv>.msh::after,.paso.hv>.msh::after,.faq details.hv>.msh::after{
  content:"";position:absolute;top:-45%;bottom:-45%;left:0;width:64%;opacity:0;pointer-events:none;transform:translateX(-150%) skewX(-16deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 30%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0) 100%)}
@keyframes hvVidrio{0%{transform:translateX(-150%) skewX(-16deg);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translateX(270%) skewX(-16deg);opacity:0}}
@media (hover:hover){
  .hv:hover{--lift:var(--hv-up);--lsc:var(--hv-sc);border-color:rgba(214,226,240,.55);
    filter:drop-shadow(0 18px 16px rgba(0,0,0,.42)) drop-shadow(0 0 9px rgba(57,183,240,.26)) brightness(1.045)}
  .serv-card.hv:hover>.msh::after,.sect a.hv:hover>.msh::after,.plan.hv:hover>.msh::after,.pilar.hv:hover>.msh::after,.razon.hv:hover>.msh::after,.paso.hv:hover>.msh::after,.faq details.hv:hover>.msh::after{animation:hvVidrio 1.4s cubic-bezier(.25,.1,.25,1) 1 both}
  .hv:hover>.msh::before{opacity:.8}
}
.hv:focus-visible{--lift:var(--hv-up);--lsc:var(--hv-sc);border-color:rgba(214,226,240,.6);outline:2px solid var(--celeste);outline-offset:3px;
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.42)) drop-shadow(0 0 9px rgba(57,183,240,.3)) brightness(1.045)}
.serv-card.hv:focus-visible>.msh::after,.sect a.hv:focus-visible>.msh::after,.plan.hv:focus-visible>.msh::after,.paso.hv:focus-visible>.msh::after,.faq details.hv:focus-within>.msh::after{animation:hvVidrio 1.4s cubic-bezier(.25,.1,.25,1) 1 both}
.hv:active{--lift:2px;--lsc:.985;transition-duration:.12s,.12s,.12s,.12s,.12s !important}
.faq details.hv:hover,.faq details.hv{z-index:auto}
@media (prefers-reduced-motion:reduce){
  .hv,.hv:hover,.hv:focus-visible,.hv:active{--lift:0px;--lsc:1;filter:none;transition:none !important}
  .hv:hover,.hv:focus-visible{box-shadow:0 0 0 1px rgba(214,226,240,.45),0 0 18px rgba(57,183,240,.3) !important;border-color:rgba(214,226,240,.7)}
  .hv>.msh::after{animation:none !important;opacity:0}
}
/* 64b · BOTONES Y CTA SIN BARRIDOS RÁPIDOS (corrección de Lex 25/10): se anulan los destellos internos heredados (oroDestello de los
   bloques 37 y 46 en ::after, oroReluce) en oro, platinum, sellos, pestañas y chips; dentro queda un solo sistema: el reflejo lento .msh
   (16–22 s). Los anillos perimetrales giratorios (botón dorado al pasar el cursor, icono) se ralentizan para no leerse como destello.
   Las zonas de toque ampliadas (::after en táctil) se conservan: solo se quitan fondo y animación. */
.btn.btn--gold::after,.plan__sello::after,.badge--gold::after,.serv-card .tag--gold::after,.tec__tab[aria-selected="true"]::after,.form-card label.chip:has(input:checked)::after,.cotizador label.chip::after{animation:none !important;background-image:none !important;background:none !important}
.btn.btn--gold::before{animation:none !important;display:none !important}   /* oroReluce: banda rápida de izquierda a derecha dentro del botón → eliminada (Lex 25/10) */
.btn--gold .ic::before,.wa::before{animation-duration:5.5s !important}
.btn.btn--gold,.plan__sello,.badge--gold,.serv-card .tag--gold,.tec__tab[aria-selected="true"]{animation-duration:14s !important}

/* 65 · SELECTOR DE IDIOMA (Lex 25/10): globo en el extremo superior derecho, visible en escritorio y móvil; menú de 13 idiomas con nombre
   nativo; persistencia en localStorage; dir=rtl para árabe (i18n.js). Lleva también la respuesta .hv. */
.idioma{position:relative;margin-left:.6rem;flex:0 0 auto;z-index:131}
.idioma__btn{display:inline-flex;align-items:center;gap:.4em;height:40px;padding:0 .8em 0 .6em;border-radius:999px;border:1px solid rgba(172,184,200,.32);background:rgba(255,255,255,.04);color:#cfe3f5;font:600 .78rem var(--f-mono);letter-spacing:.06em;cursor:pointer}
.idioma__globo{width:20px;height:20px;flex:none}
.idioma__btn[aria-expanded="true"]{border-color:var(--celeste);color:#fff}
.idioma__menu{position:absolute;right:0;top:calc(100% + 10px);margin:0;padding:.4rem;list-style:none;min-width:228px;max-height:min(72vh,540px);overflow:auto;border-radius:14px;
  background:linear-gradient(180deg,#141b27,#0e141d);border:1px solid rgba(172,184,200,.26);box-shadow:0 30px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.idioma__menu[hidden]{display:none}
.idioma__menu button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.8rem;padding:.6rem .85rem;border-radius:9px;border:1px solid transparent;background:transparent;color:#e6edf5;font:500 .95rem var(--f-txt);text-align:start;cursor:pointer}
.idioma__menu button[aria-checked="true"]{background:rgba(57,183,240,.12);border-color:rgba(57,183,240,.45);color:#fff}
.idioma__menu button[aria-checked="true"]::after{content:"✓";font-size:.85em;color:var(--celeste)}
@media (max-width:1000px){.idioma{margin-left:auto;margin-right:.4rem}.idioma__cod{display:none}.idioma__btn{padding:0 .55em}}
html[dir="rtl"] .idioma__menu{right:auto;left:0}
html[dir="rtl"] .nav--main,html[dir="rtl"] .cab__acc{flex-direction:row-reverse}

/* 66 · COTIZADOR: ESTADOS DE LAS OPCIONES (Lex 25/10). Todas las opciones elegibles (tarjetas, chips, radios y casillas): PLATINO sin
   elegir; al pasar el cursor o con foco de teclado pasan a DORADO con fundido (.35 s) y elevación (.hv); elegidas quedan DORADAS; al salir
   el cursor vuelven a platino; en selección única solo la elegida queda dorada (lo decide el input). El oro lo pinta la lámina .msh
   (detrás del texto, recortada al radio) para que el cambio sea un fundido y no un salto; con movimiento reducido el oro va en el fondo
   directamente. Deshabilitado: atenuado, sin elevación. El encabezado del paso (h4) no lleva recuadro de foco: el foco visible es de las
   opciones y de los botones. Sin barridos rápidos dentro (regla 64b). */
.cot__paso h4:focus-visible,.cot__paso h4:focus{outline:none !important;box-shadow:none !important;border:0 !important}
.cotizador label.chip{transition:color .35s var(--ease),border-color .35s var(--ease),text-shadow .35s var(--ease) !important}
.cotizador label.chip,.cotizador label.chip:has(input:checked){color:var(--pt-tinta);border-color:var(--pt-borde);text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 20%),linear-gradient(180deg,var(--pt-luz) 0%,var(--pt-1) 28%,var(--pt-3) 60%,var(--pt-2) 100%) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(40,48,58,.38),inset 1px 0 0 rgba(255,255,255,.55),0 8px 16px -10px rgba(0,0,0,.6)}
.cotizador label.chip>.msh{background:linear-gradient(180deg,rgba(255,250,222,.55) 0%,rgba(255,250,222,0) 14%),linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 42%,var(--oro-oscuro) 64%,#c79a52 100%);opacity:0;transition:opacity .38s var(--ease)}
@media (hover:hover){.cotizador label.chip:not(:has(input:disabled)):hover>.msh{opacity:1}
  .cotizador label.chip:not(:has(input:disabled)):hover{color:var(--oro-tinta);border-color:var(--oro-bronce);text-shadow:0 1px 0 rgba(255,245,210,.35)}}
.cotizador label.chip:has(input:focus-visible)>.msh,.cotizador label.chip:has(input:checked)>.msh,.cotizador label.chip:active>.msh{opacity:1}
.cotizador label.chip:has(input:focus-visible),.cotizador label.chip:has(input:checked),.cotizador label.chip:active{color:var(--oro-tinta);border-color:var(--oro-bronce);text-shadow:0 1px 0 rgba(255,245,210,.35)}
.cotizador label.chip:has(input:focus-visible){outline:2px solid var(--celeste);outline-offset:3px}
.cotizador label.chip:has(input:checked){--lift:0px}
.cotizador label.chip:has(input:disabled){opacity:.5;filter:grayscale(.35);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .cotizador label.chip:hover,.cotizador label.chip:has(input:focus-visible),.cotizador label.chip:has(input:checked){
    background:linear-gradient(180deg,rgba(255,250,222,.55) 0%,rgba(255,250,222,0) 14%),linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 42%,var(--oro-oscuro) 64%,#c79a52 100%) !important}}

/* 67 · BARRA MULTICOLOR DE LA CABECERA: LOS COLORES CAMINAN (Lex 25/10). Misma línea (2 px, misma posición), misma paleta aprobada
   (celeste #39b7f0/#8fe3ff, azul #2f6fff/#6f8cff, violeta #8e5cff/#c9a9ff, oro #e9b94a/#ffe08a/#d6a63a, base #1c8fd6). El gradiente es
   cerrado (empieza y termina en #1c8fd6) y se repite en mosaico de 200 %: la posición de fondo avanza dos mosaicos por ciclo (26 s,
   lineal), así la paleta recorre la barra y vuelve a empezar sin ningún salto. El resalto blanco se conserva, más tenue y lento (16 s)
   para no competir. Reducido: paleta estática centrada, sin resalto. Sin cambios de grosor ni de posición. */
.cab__linea{background-size:200% 100% !important;background-repeat:repeat-x;background-position:0 0;animation:cabCorriente 26s linear infinite;will-change:background-position}
@keyframes cabCorriente{from{background-position:0 0}to{background-position:200% 0}}
.cab__linea i{opacity:.55;animation-duration:16s}
@media (prefers-reduced-motion:reduce){.cab__linea{animation:none;background-position:50% 0}.cab__linea i{display:none}}

/* 68 · CONFIGURADOR «SU ARQUITECTURA SUGERIDA»: MISMO SISTEMA DE ESTADOS QUE EL COTIZADOR (Lex 25/10). Chips de las tres preguntas:
   PLATINO sin elegir (sin selección decorativa por defecto: app.js 1b), al pasar el cursor o con foco de teclado fundido a DORADO con
   elevación (.hv), elegidos (aria-pressed=true) quedan dorados, al salir vuelven a platino; el oro lo pinta la lámina .msh. El panel de
   resultado queda neutro hasta tener las tres respuestas. El CTA «Cotizar esta solución» sigue la regla de botones (reflejo lento). */
.cfg__ops button,.cfg__ops button[aria-pressed="true"]{color:var(--pt-tinta);border-color:var(--pt-borde);text-shadow:0 1px 0 rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 20%),linear-gradient(180deg,var(--pt-luz) 0%,var(--pt-1) 28%,var(--pt-3) 60%,var(--pt-2) 100%) !important;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(40,48,58,.38),inset 1px 0 0 rgba(255,255,255,.55),0 8px 16px -10px rgba(0,0,0,.6);transition:color .35s var(--ease),border-color .35s var(--ease),text-shadow .35s var(--ease) !important}
.cfg__ops button>.msh{background:linear-gradient(180deg,rgba(255,250,222,.55) 0%,rgba(255,250,222,0) 14%),linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 42%,var(--oro-oscuro) 64%,#c79a52 100%);opacity:0;transition:opacity .38s var(--ease)}
@media (hover:hover){.cfg__ops button:hover>.msh{opacity:1}.cfg__ops button:hover{color:var(--oro-tinta);border-color:var(--oro-bronce);text-shadow:0 1px 0 rgba(255,245,210,.35);background:linear-gradient(180deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 20%),linear-gradient(180deg,var(--pt-luz) 0%,var(--pt-1) 28%,var(--pt-3) 60%,var(--pt-2) 100%) !important}}
.cfg__ops button:focus-visible>.msh,.cfg__ops button[aria-pressed="true"]>.msh,.cfg__ops button:active>.msh{opacity:1}
.cfg__ops button:focus-visible,.cfg__ops button[aria-pressed="true"],.cfg__ops button:active{color:var(--oro-tinta);border-color:var(--oro-bronce);text-shadow:0 1px 0 rgba(255,245,210,.35)}
.cfg__ops button[aria-pressed="true"]{--lift:0px}
.cfg__res.espera h3{color:var(--niebla);font-weight:600}
.cfg__res.espera .btn{opacity:1}   /* 25/10 (Fernando): «Cotizar esta solución» siempre activo; lleva al cotizador con o sin respuestas */
@media (prefers-reduced-motion:reduce){.cfg__ops button:hover,.cfg__ops button:focus-visible,.cfg__ops button[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(255,250,222,.55) 0%,rgba(255,250,222,0) 14%),linear-gradient(180deg,var(--oro-claro) 0%,var(--oro-medio) 42%,var(--oro-oscuro) 64%,#c79a52 100%) !important}}

/* 25/10 · área táctil mínima del selector de idioma (44×44) en punteros gruesos */
@media (pointer:coarse){.idioma__btn{min-width:44px;height:44px;justify-content:center}}

/* 25/10 · demo «Del evento al cierre»: indicador de posición y botones con destino */
.demo__pos{margin:0 0 .55rem;font-family:var(--mono,ui-monospace,monospace);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--celeste,#8fe3ff);opacity:.9}
#demoPrev,#demoNext{white-space:normal;text-align:left;line-height:1.25}
#demoPrev[hidden]{display:none}

/* ===== 69 · 25/10 (Fernando): cabecera sin solapes. Medido: la fila (contenedor ≈1180 px) no cabía con 7 enlaces + «Hablar con un asesor» +
   «Cotizar» + idioma; la navegación se desbordaba 51–67 px y «Acceso interno» quedaba bajo el pill. Ahora la fila usa hasta 1500 px, la
   navegación no se comprime, el pill «Hablar con un asesor» se muestra desde 1440 px y por debajo de 1200 px se pasa al menú compacto. */
.cab__row.contenedor{width:min(100% - calc(var(--gutter)*2),1500px)}
.nav--main{flex:0 0 auto}
@media (max-width:1199px){.nav--main,.cab__acc .tel,.cab__acc .btn{display:none}.menu-btn{display:block}}

/* ===== 70 · 25/10 (Lex) · Centro de confianza y cumplimiento: azul profundo, expediente central y cuatro nodos conectados ===== */
.sec--cumple{background:linear-gradient(180deg,#07111f 0%,#0b1a30 55%,#07111f 100%);color:#fff;position:relative;overflow:hidden}
.sec--cumple::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(57,183,240,.12),transparent 55%);pointer-events:none}
.sec--cumple .sec__head h2{color:#fff}.sec--cumple .lead{color:var(--niebla)}
.cum{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px) minmax(0,1fr);grid-template-areas:"n1 c n3" "n2 c n4" "cta cta cta";gap:30px 64px;align-items:center;padding:12px 0 4px}
.cum__red{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.cum__linea{fill:none;stroke:rgba(143,227,255,.26);stroke-width:1.5;vector-effect:non-scaling-stroke}
.cum__via{fill:#0b1a33;stroke:#8fe3ff;stroke-width:1.4}
.cum__pulso{fill:none;stroke:#8fe3ff;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:70 930;stroke-dashoffset:1000;animation:cumPulso 10.5s linear infinite;animation-play-state:paused;filter:drop-shadow(0 0 5px rgba(143,227,255,.85));vector-effect:non-scaling-stroke}
.cum.anim-on .cum__pulso{animation-play-state:running}
@keyframes cumPulso{to{stroke-dashoffset:0}}
.cum__centro{grid-area:c;position:relative;z-index:1;border-radius:20px;padding:28px 22px 24px;text-align:center;background:linear-gradient(170deg,#102445,#0b1a33 60%,#081326);border:1px solid rgba(143,227,255,.38);box-shadow:0 0 0 1px rgba(214,176,93,.28),0 18px 40px rgba(0,0,0,.45),inset 0 0 44px rgba(57,183,240,.12)}
.cum__escudo{width:64px;height:72px;display:block;margin:0 auto 12px;filter:drop-shadow(0 0 10px rgba(214,176,93,.35))}
.cum__centro b{display:block;font-size:1.12rem;color:#fff}.cum__centro small{display:block;margin-top:.3rem;font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--celeste,#8fe3ff)}
.cum__nodos{display:contents;margin:0;padding:0}
.cum__nodo{list-style:none;position:relative;z-index:1;isolation:isolate;padding:18px 20px 16px;border-radius:16px;background:linear-gradient(165deg,#f6f8fb 0%,#d9e1ea 45%,#aeb9c8 100%);color:#0b1322;border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 26px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.85);cursor:default;transition:color .35s var(--ease)}
.cum__nodo[data-n="1"]{grid-area:n1}.cum__nodo[data-n="2"]{grid-area:n2}.cum__nodo[data-n="3"]{grid-area:n3}.cum__nodo[data-n="4"]{grid-area:n4}
.cum__num{font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;letter-spacing:.16em;color:#3a4a60}
.cum__nodo b{display:block;font-size:1.08rem;margin:.3rem 0 .25rem;color:#0b1322}.cum__nodo p{margin:0;font-size:.93rem;line-height:1.45;color:#2b3a4e}
.cum__nodo>.msh{background:linear-gradient(165deg,#f6e2a0 0%,#d6b05d 48%,#a9822a 100%);opacity:0;transition:opacity .4s var(--ease)}
@media (hover:hover){.cum__nodo:hover>.msh{opacity:1}.cum__nodo:hover .cum__num,.cum__nodo:hover p{color:#3a2a08}}
.cum__nodo:focus-visible{outline:2px solid var(--celeste);outline-offset:3px}.cum__nodo:focus-visible>.msh{opacity:1}
.cum__cta{grid-area:cta;text-align:center;margin-top:10px}.cum__nota{margin:.75rem auto 0;max-width:56ch;font-size:.86rem;color:var(--niebla)}
@media (max-width:900px){.cum{grid-template-columns:1fr;grid-template-areas:"c" "n1" "n2" "n3" "n4" "cta";gap:22px;padding-left:34px}.cum__centro{margin-left:-34px}.cum__cta{margin-left:-34px}}
@media (prefers-reduced-motion:reduce){.cum__pulso{display:none}.cum__linea{stroke:rgba(143,227,255,.45)}}
/* 25/10 · titular del Centro de cumplimiento: misma frase, tamaño contenido (ocupaba ocho líneas en 1440) */
.sec--cumple .sec__head h2{font-size:clamp(1.7rem,2.5vw,2.45rem);line-height:1.12;max-width:34ch}
.sec--cumple .sec__head{max-width:none}

/* ===== 71 · 25/10 (Lex) · cabecera por niveles medidos: 0 = todo; 1 = «Hablar con un asesor» abreviado a «Asesor» (aria-label completo);
   2 = menú compacto con todos los destinos. app.js 4i mide rectángulos tras cada cambio de ancho/idioma y elige el primer nivel sin
   colisión ni desborde; por debajo de 1200 px el nivel 2 es fijo. Nada se recorta ni se oculta detrás de otro componente. */
.tel__corto{display:none}
html.cab-t1 .tel__txt{display:none}html.cab-t1 .tel__corto{display:inline}
html.cab-t2 .nav--main,html.cab-t2 .cab__acc .tel,html.cab-t2 .cab__acc .btn{display:none}html.cab-t2 .menu-btn{display:block}
.cab__row>*{flex-shrink:0}
.cab__acc{margin-left:auto}
.menu-movil__asesor{display:flex;align-items:center;gap:.6rem}.menu-movil__asesor .dot{width:9px;height:9px;border-radius:50%;background:var(--celeste,#8fe3ff);box-shadow:0 0 10px rgba(143,227,255,.8)}

/* ===== 72 · 25/10 (Lex) · hero: franja informativa editorial en lugar de tres pastillas. Texto descriptivo, no control: sin fondo,
   cápsula, bisel, sombra, hover, foco ni puntero; los tres datos con el mismo peso (platino, indicador celeste discreto). ===== */
.hero__datos{list-style:none;margin:0 0 .2rem;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 0;font-family:var(--mono,ui-monospace,monospace);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#d9e1ea;cursor:default}
.hero__datos li{display:inline-flex;align-items:center;gap:.55em;padding:0 1em;border-left:1px solid rgba(143,227,255,.35);line-height:1.5}
.hero__datos li:first-child{border-left:0;padding-left:0}
.hero__ind{width:6px;height:6px;border-radius:50%;background:var(--celeste,#8fe3ff);box-shadow:0 0 8px rgba(143,227,255,.55);flex:0 0 auto}
.hero__datos,.hero__datos li{background:none;border-radius:0;box-shadow:none;transform:none;transition:none}
@media (max-width:640px){.hero__datos{flex-direction:column;align-items:flex-start;gap:.5rem}.hero__datos li{border-left:0;padding:0}}

/* ===== 73 · 25/10 (Lex eligió la propuesta B) · «Del evento al cierre»: mapa tipo metro con cinco estaciones, ficha del caso que viaja,
   color celeste → oro según avanza, panel de detalle y controles contextuales con avance automático pausable. Vertical en móvil. ===== */
.demo__pasos.metro{display:block;position:relative;padding:36px 22px 14px;margin-bottom:1.2rem;border-radius:18px;background:linear-gradient(170deg,#0c1c34,#081326 70%);border:1px solid rgba(143,227,255,.22);box-shadow:0 18px 44px rgba(0,0,0,.35)}
.metro__via{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.metro__linea{position:absolute;left:28px;right:28px;top:20px;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(214,226,240,.18),rgba(214,226,240,.28))}
.metro__avance{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#39b7f0,#8fe3ff 40%,#f3dc8a 85%,#d6b05d);transition:width 1.2s var(--ease),height 1.2s var(--ease);box-shadow:0 0 12px rgba(143,227,255,.45)}
.metro .demo-paso{position:relative;z-index:1;flex:0 1 20%;width:20%;text-align:center;background:none !important;border:0 !important;padding:0 !important;box-shadow:none !important;border-radius:12px;color:inherit;cursor:pointer}
.metro .demo-paso i{display:block;width:46px;height:46px;margin:0 auto;border-radius:50%;background:linear-gradient(165deg,#f6f8fb,#aeb9c8);border:3px solid #aeb9c8;color:#0b1322;font:700 15px var(--f-mono);line-height:40px;font-style:normal;transition:transform .4s var(--ease),border-color .4s,background .4s;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.metro .demo-paso span{display:block;margin-top:9px;font-size:.95rem;color:var(--niebla);font-weight:600;font-family:var(--f-disp);line-height:1.2}
.metro .demo-paso.hecho i{border-color:#d6b05d}
.metro .demo-paso[aria-selected="true"] i{background:linear-gradient(165deg,#f3dc8a,#d6b05d 55%,#a9822a);border-color:#f3dc8a;transform:scale(1.14)}
.metro .demo-paso[aria-selected="true"] span{color:#fff}
.metro .demo-paso:focus-visible{outline:none !important}.metro .demo-paso:focus-visible i{box-shadow:0 0 0 3px #07111f,0 0 0 5px var(--celeste)}
.metro__caso{position:absolute;z-index:2;left:10%;top:-30px;transform:translateX(-50%);font:700 .72rem var(--f-mono);letter-spacing:.1em;color:#0b1322;background:linear-gradient(165deg,#f3dc8a,#d6b05d);padding:.35em .7em;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.45);transition:left 1.2s var(--ease),top 1.2s var(--ease);white-space:nowrap}
.metro__caso::after{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:8px;background:#d6b05d;transform:translateX(-50%) rotate(45deg)}
#demoPausa{appearance:none;font:600 .9rem var(--f-body,inherit);color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(214,226,240,.32);border-radius:999px;padding:.55em 1em;cursor:pointer;min-height:44px;margin-left:.5rem}
.demo__nota{width:100%;flex-basis:100%;margin:.5rem 0 0;font-size:.84rem;color:var(--niebla)}
@media (max-width:700px){.demo__pasos.metro{padding:22px 12px 12px}.metro__via{flex-direction:column;align-items:stretch;gap:24px;padding-left:64px}.metro__linea{left:31px;right:auto;top:24px;bottom:24px;width:6px;height:auto}.metro__avance{width:100%;height:0}.metro .demo-paso{width:auto;flex:none;text-align:left;display:flex;align-items:center;gap:14px;min-height:46px}.metro .demo-paso i{margin:0;position:absolute;left:-55px;top:0}.metro .demo-paso span{margin:0}.metro__caso{left:auto !important;right:8px;top:0;transform:none}.metro__caso::after{left:-4px;bottom:auto;top:50%;transform:translateY(-50%) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){.metro__avance,.metro__caso,.metro .demo-paso i{transition:none}}
/* 25/10 · sin saltos de diseño al cambiar de hito: el texto del paso reserva su alto y los controles no reflowean la fila */
#demoTexto{min-height:3.3em}#demoPrev,#demoNext,#demoPausa{white-space:normal}#demoPausa[hidden]{display:none}
/* 25/10 · controles del recorrido en bloque: posición en su línea, botones en fila (Continuar en oro como en la propuesta B), nota debajo */
.demo__ficha .demo__pos{display:block;width:100%;margin:1.1rem 0 .55rem;white-space:normal}
#demoPrev,#demoNext,#demoPausa{display:inline-flex;align-items:center;min-height:44px;margin:0 .5rem .5rem 0;border-radius:999px;padding:.5em 1em;white-space:nowrap;line-height:1.2;text-align:left}
#demoNext{background:linear-gradient(165deg,#f3dc8a,#d6b05d 55%,#a9822a);color:#0b1322;border-color:rgba(255,255,255,.4);font-weight:700}
.demo__ficha .demo__nota{display:block;width:100%;margin:.2rem 0 0}
@media (max-width:700px){#demoPrev,#demoNext,#demoPausa{white-space:normal;width:100%;margin-right:0}}
/* 25/10 · controles del recorrido en rejilla estable (sin saltos entre hitos): posición · Volver | Continuar · Pausar · nota */
.demo__ficha .demo__ctl{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .6rem;width:100%;margin-top:1rem;align-items:start}
.demo__ficha .demo__ctl .demo__pos{grid-column:1 / -1;margin:0 0 .2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#demoPrev,#demoNext{margin:0;min-height:56px;white-space:normal;width:100%;justify-content:flex-start}
#demoPrev[hidden]{display:inline-flex !important;visibility:hidden}
#demoPausa{grid-column:1 / -1;justify-self:start;margin:0;white-space:nowrap}
.demo__ficha .demo__ctl .demo__nota{grid-column:1 / -1;margin:0;min-height:2.7em}
#demoTexto{min-height:4.5em}
@media (max-width:700px){.demo__ficha .demo__ctl{grid-template-columns:1fr}#demoPrev,#demoNext,#demoPausa{width:100%}}

/* ===== 74 · 25/10 (Lex) · hebreo (idioma 14): RTL como el árabe y pila tipográfica del sistema con glifos hebreos (sin descargas) ===== */
html[lang="he"] body,html[lang="he"] input,html[lang="he"] button,html[lang="he"] select,html[lang="he"] textarea{font-family:"Heebo","Arial Hebrew","Noto Sans Hebrew","Segoe UI",Arial,sans-serif}
html[lang="he"] h1,html[lang="he"] h2,html[lang="he"] h3,html[lang="he"] h4,html[lang="he"] .btn,html[lang="he"] .nav--main a,html[lang="he"] .menu-movil a,html[lang="he"] .plan h3,html[lang="he"] .demo-paso span{font-family:"Heebo","Arial Hebrew","Noto Sans Hebrew","Segoe UI",Arial,sans-serif;letter-spacing:0}
html[lang="he"] .hero h1{font-weight:800}

/* CORRECCIÓN 30/10 · movimiento reducido (Codex 03:53 CR): las dos animaciones decorativas que seguían activas con prefers-reduced-motion
   (oroAnis en los acentos dorados y recParpadeo en el punto REC del hero) se detienen; aspecto estático e identidad intactos; sin la preferencia nada cambia. */
@media (prefers-reduced-motion:reduce){.btn.btn--gold,.plan__sello,.badge--gold,.serv-card .tag--gold,.tec__tab[aria-selected="true"],.form-card label.chip:has(input:checked),.cfg__ops button[aria-pressed="true"],.mapa__pills button[aria-pressed="true"],.hero h1 .gold,.cot__sello,.cot__progreso li.actual i,.hero__rec i{animation:none}}

/* Ronda 36 (04/11/2026): línea de posicionamiento del hero (maestro: seguridad integral, inteligencia operativa y continuidad empresarial). 12 px para no sumar textos < 12 px (A6). */
.hero__pos{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--celeste);margin:0 0 .8rem;line-height:1.5}
@media (max-width:640px){.hero__pos{letter-spacing:.12em}}

/* v11k · video comercial en el espacio de las cifras de la portada (Lex 06/11/2026) */
.hero .hero__in .stats--video{display:block;grid-template-columns:none;gap:0;background:none;border:0;backdrop-filter:none;max-width:760px;margin-top:2.1rem;overflow:visible}
.hero__video{position:relative;aspect-ratio:16/9;border-radius:var(--radio);overflow:hidden;border:1px solid var(--linea-fuerte);background:#000;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.hero__video video{display:block;width:100%;height:100%;object-fit:cover}
.hero__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(180deg,rgba(5,10,18,.15),rgba(5,10,18,.45));color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.02em;cursor:pointer;border:0;transition:background var(--d)}
.hero__play .disco{display:grid;place-items:center;width:72px;height:72px;border-radius:999px;background:var(--oro-metal);color:#1c1508;font-size:1.6rem;padding-left:4px;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform var(--d) var(--ease)}
@media (hover:hover){.hero__play:hover{background:linear-gradient(180deg,rgba(5,10,18,.05),rgba(5,10,18,.35))}.hero__play:hover .disco{transform:scale(1.06)}}
.hero__play[hidden]{display:none}