/* ============================================================
   GRUPO CASTMEDIA — Sistema de diseño web v2
   Navy fílmico · Rojo REC · Satoshi / Inter / JetBrains Mono
   Firma: el sitio se comporta como un visor de cámara (●REC, timecode,
   marcas de encuadre, playhead). ADO es el rostro del equipo.
   ============================================================ */

:root{
  --navy:#0D1B2A;
  --navy-2:#08131F;
  --navy-3:#050D16;
  --card:#12243A;
  --card-2:#152A42;
  --rojo:#E30613;
  --rojo-dim:#B0050F;
  --rojo-texto:#FF6B73;       /* rojo legible sobre navy (6,3:1) */
  --rojo-texto-claro:#B0050F; /* rojo legible sobre secciones claras (6,6:1) */
  --blanco:#FFFFFF;
  --niebla:#B8C2CC;
  --niebla-2:#8795A4;
  --pantalla:#F3F5F8;
  --tinta:#13233A;
  --slate:#4A5A6E;
  --linea:rgba(184,194,204,.13);
  --linea-2:rgba(184,194,204,.24);
  --linea-clara:rgba(19,35,58,.12);

  --f-display:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --f-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --f-mono:var(--f-body);

  --w-max:1240px;
  --pad-x:clamp(1rem,4vw,3rem);
  --sec-y:clamp(4.5rem,10vw,8.5rem);
  --radius:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.28s var(--ease);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
  font-family:var(--f-body);background:var(--navy);color:var(--blanco);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--rojo);color:var(--blanco)}
:focus-visible{outline:2px solid var(--rojo);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar:focus{position:fixed;top:.8rem;left:.8rem;z-index:5001;width:auto;height:auto;clip:auto;background:var(--rojo);color:var(--blanco);padding:.8rem 1.2rem;border-radius:10px;font-weight:700}

/* ---------- Grain fílmico ---------- */
body::after{
  content:"";position:fixed;inset:-50%;z-index:3000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation:grain 9s steps(8) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}12%{transform:translate(-3%,2%)}25%{transform:translate(2%,-3%)}
  37%{transform:translate(-2%,-2%)}50%{transform:translate(3%,3%)}62%{transform:translate(-3%,1%)}
  75%{transform:translate(2%,2%)}87%{transform:translate(-1%,-3%)}
}

/* ---------- Utilidades ---------- */
.wrap{max-width:var(--w-max);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y);position:relative}
.sec--flush-top{padding-top:0}
.sec--clara{background:var(--pantalla);color:var(--tinta)}
.sec--clara p{color:var(--slate)}
.sec--profunda{background:var(--navy-2)}

.sec-eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--niebla);margin-bottom:1.2rem;
}
.sec-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--rojo);flex:none}
.sec-eyebrow .num{color:var(--rojo-texto)}
.sec--clara .sec-eyebrow{color:var(--slate)}
.sec--clara .sec-eyebrow .num{color:var(--rojo-texto-claro)}

h1,h2,h3{font-family:var(--f-display);line-height:1.02;letter-spacing:-.025em;font-weight:900}
h1{font-size:clamp(2.1rem,6.6vw,5.6rem)}
h2{font-size:clamp(2rem,4.8vw,3.7rem);margin-bottom:1.4rem}
h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;letter-spacing:-.012em;line-height:1.15}
.rojo{color:var(--rojo-texto)}
.sec--clara .rojo{color:var(--rojo-texto-claro)}
.lead{font-size:clamp(1.03rem,1.5vw,1.22rem);color:var(--niebla);max-width:52ch}
.sec--clara .lead{color:var(--slate)}
.sec--clara h2,.sec--clara h3{color:var(--tinta)}
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2rem;margin-bottom:3rem}
.sec-head h2{margin-bottom:0;max-width:18ch}
.sec-head .lead{max-width:40ch}

/* ---------- Botones ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--f-display);font-weight:700;font-size:1rem;
  padding:1rem 1.75rem;border-radius:999px;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast),box-shadow var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  will-change:transform;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(101%);transition:transform .45s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn--rojo{background:var(--rojo);color:var(--blanco)}
.btn--rojo::before{background:var(--rojo-dim)}
.btn--rojo:hover{box-shadow:0 18px 40px -14px rgba(227,6,19,.65)}
.btn--ghost{border:1px solid rgba(255,255,255,.3);color:var(--blanco)}
.btn--ghost::before{background:var(--blanco)}
.btn--ghost:hover{color:var(--navy);border-color:var(--blanco)}
.sec--clara .btn--ghost{border-color:rgba(19,35,58,.3);color:var(--tinta)}
.sec--clara .btn--ghost::before{background:var(--tinta)}
.sec--clara .btn--ghost:hover{color:var(--blanco)}
.btn .ic{width:1.1em;height:1.1em;flex:none}
.btn .fl{transition:transform var(--t-fast)}
.btn:hover .fl{transform:translateX(4px)}
.btn--lg{font-size:1.1rem;padding:1.2rem 2.1rem}

/* ---------- Preloader: claqueta ---------- */
.slate{
  position:fixed;inset:0;z-index:5000;background:var(--navy-3);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.6rem;
  transition:clip-path .9s var(--ease);clip-path:inset(0 0 0 0);
}
.slate.is-out{clip-path:inset(0 0 100% 0)}
.slate-count{
  position:relative;width:min(34vw,180px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--linea-2);display:grid;place-items:center;
  font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,9vw,5rem);
}
.slate-count::before{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(var(--rojo) var(--p,0%),transparent 0);-webkit-mask:radial-gradient(circle,transparent 69%,#000 70%);mask:radial-gradient(circle,transparent 69%,#000 70%)}
.slate-meta{display:flex;gap:1.6rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--niebla-2);text-transform:uppercase}
.slate-meta b{color:var(--blanco);font-weight:500}
html:not(.anim) .slate,html.no-slate .slate{display:none}

/* ---------- Cortina de transición ---------- */
.curtain{position:fixed;inset:0;z-index:4500;pointer-events:none;background:var(--rojo);transform:scaleY(0);transform-origin:bottom}
.curtain.is-in{transition:transform .5s var(--ease);transform:scaleY(1)}

/* ---------- Playhead (progreso de scroll) ---------- */
.playhead{position:fixed;top:0;left:0;right:0;height:2px;z-index:1200;pointer-events:none}
.playhead span{display:block;height:100%;background:var(--rojo);transform-origin:left;transform:scaleX(0)}

/* ---------- Cursor ---------- */
.cursor{position:fixed;top:0;left:0;z-index:4000;pointer-events:none;display:none}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} }
.cursor-dot{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--rojo)}
.cursor-ring{
  position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1px solid rgba(255,255,255,.45);display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;color:var(--blanco);
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.cursor.is-link .cursor-ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--rojo)}
.cursor.is-label .cursor-ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--rojo);border-color:var(--rojo)}
.cursor.is-label .cursor-dot{opacity:0}
.cursor.is-drag .cursor-ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(255,255,255,.1);backdrop-filter:blur(4px)}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.2rem 0;transition:background var(--t-fast),padding var(--t-fast),transform .5s var(--ease)}
.nav.is-scrolled{background:rgba(8,19,31,.78);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--linea);padding:.7rem 0}
.nav.is-hidden{transform:translateY(-110%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav-logo img{height:auto;width:132px}
.nav-links{display:flex;align-items:center;gap:2rem;font-size:.93rem;font-weight:500}
.nav-links>a,.nav-drop>a{color:var(--niebla);transition:color var(--t-fast);position:relative;padding:.3rem 0}
.nav-links>a::after,.nav-drop>a::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--rojo);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav-links>a:hover::after,.nav-drop:hover>a::before{transform:scaleX(1);transform-origin:left}
.nav-links a:hover,.nav-links a.is-active{color:var(--blanco)}
.nav-links a.is-active::before{
  content:"";position:absolute;left:-13px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--rojo);animation:recblink 1.6s ease-in-out infinite;
}
.nav-menu-cta{display:none}
.nav-cta{flex:none;padding:.75rem 1.35rem;font-size:.92rem}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:.6rem;margin-right:-.6rem}
.nav-burger span{display:block;width:26px;height:2px;background:var(--blanco);transition:transform var(--t-fast),opacity var(--t-fast)}
.nav-drop{position:relative}
.nav-drop>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:.45rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);opacity:.7}
.nav-drop-menu{
  position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);
  background:rgba(18,36,58,.96);backdrop-filter:blur(16px);border:1px solid var(--linea);border-radius:16px;
  padding:.6rem;min-width:280px;display:grid;gap:.15rem;
  opacity:0;visibility:hidden;transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-drop-menu a{display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;padding:.7rem .85rem;border-radius:10px;color:var(--niebla)}
.nav-drop-menu a:hover{background:rgba(255,255,255,.06);color:var(--blanco)}
.nav-drop-menu a b{font-family:var(--f-display);color:var(--blanco);font-size:.98rem}
.nav-drop-menu a small{grid-column:2;font-size:.8rem;color:var(--niebla-2)}
.nav-drop-menu a i{grid-row:span 2;font-style:normal;font-family:var(--f-mono);font-size:.7rem;color:var(--rojo);padding-top:.25rem}

/* ---------- REC / HUD ---------- */
@keyframes recblink{0%,100%{opacity:1}50%{opacity:.2}}
.rec{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;color:var(--niebla)}
.rec .dot{width:9px;height:9px;border-radius:50%;background:var(--rojo);animation:recblink 1.6s ease-in-out infinite}
.rec .tc{font-variant-numeric:tabular-nums;color:var(--blanco)}

/* Visor: marcas de encuadre + HUD */
.vf{position:absolute;inset:clamp(5.6rem,13vh,7rem) var(--pad-x) clamp(1.2rem,3vh,2rem);pointer-events:none;z-index:2}
.vf i{position:absolute;width:clamp(18px,3vw,34px);height:clamp(18px,3vw,34px);border-color:rgba(255,255,255,.55);border-style:solid;border-width:0}
.vf i:nth-child(1){top:0;left:0;border-top-width:1.5px;border-left-width:1.5px}
.vf i:nth-child(2){top:0;right:0;border-top-width:1.5px;border-right-width:1.5px}
.vf i:nth-child(3){bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px}
.vf i:nth-child(4){bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px}
.vf-hud{position:absolute;display:flex;gap:1.4rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;color:rgba(255,255,255,.72)}
.vf-hud--tl{top:.9rem;left:1.1rem}
.vf-hud--tr{top:.9rem;right:1.1rem}
.vf-hud--br{bottom:.9rem;right:1.1rem}
.vf-cross{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:.35}
.vf-cross::before,.vf-cross::after{content:"";position:absolute;background:#fff}
.vf-cross::before{left:50%;top:0;bottom:0;width:1px}
.vf-cross::after{top:50%;left:0;right:0;height:1px}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;padding-top:6.5rem;padding-bottom:clamp(3rem,8vh,5.5rem)}
.hero-frame{position:absolute;inset:0;z-index:-2;overflow:hidden;transform-origin:50% 60%}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,19,31,.6) 0%,rgba(8,19,31,.15) 30%,rgba(8,19,31,.35) 60%,rgba(8,19,31,.95) 100%)}
.hero-content{position:relative;z-index:3;width:100%}
.hero h1{max-width:14ch}
.hero-sub{margin-top:1.5rem;font-size:clamp(1.02rem,1.6vw,1.25rem);color:var(--niebla);max-width:52ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem}
.hero-scroll{position:absolute;z-index:3;left:50%;bottom:1.4rem;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.24em;color:var(--niebla-2)}
.hero-scroll span{width:1px;height:38px;background:linear-gradient(var(--rojo),transparent);animation:scrollcue 2s var(--ease) infinite;transform-origin:top}
@keyframes scrollcue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.hero--int{min-height:86svh}
.hero--int h1{max-width:16ch;font-size:clamp(2.4rem,6.2vw,5rem)}
.hero-logo-unidad{height:clamp(40px,5.5vw,60px);width:auto;margin-bottom:1.6rem}
.hero--corta{min-height:66svh}

.hero .ph{border:none}

/* ---------- Placeholders inteligentes ---------- */
.ph{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  background:radial-gradient(120% 90% at 70% 10%,rgba(227,6,19,.10),transparent 55%),linear-gradient(160deg,var(--card) 0%,var(--navy-2) 100%);
  border:1px dashed rgba(184,194,204,.28);text-align:center;padding:1.5rem;
}
.ph-file{font-family:var(--f-mono);font-size:.8rem;color:var(--blanco);background:rgba(255,255,255,.07);padding:.4rem .8rem;border-radius:6px}
.ph-spec{font-size:.78rem;color:var(--niebla-2);max-width:34ch;line-height:1.5}
.media-frame{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2;background:var(--card)}
.media-frame--retrato{aspect-ratio:4/5}
.media-frame--ancho{aspect-ratio:16/9}
.media-frame>img,.media-frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-frame>img{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.media-frame.is-in>img,.media-frame:not([data-parallax])>img{transform:scale(1)}
.media-frame>img.is-missing,.media-frame>video.is-missing{visibility:hidden}
.media-frame .ph{display:none}
.media-frame.is-ph .ph{display:flex}
.ilustrativa{position:absolute;left:.9rem;bottom:.8rem;z-index:2;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82);background:rgba(8,19,31,.55);backdrop-filter:blur(6px);padding:.3rem .6rem;border-radius:999px}

/* Template (asset aún no producido, pero con diseño) */
.tpl{position:absolute;inset:0;display:none;background:
  linear-gradient(rgba(184,194,204,.07) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(184,194,204,.07) 1px,transparent 1px) 0 0/28px 28px,
  radial-gradient(90% 80% at 60% 30%,#1b3553 0%,var(--navy-2) 70%)}
.media-frame.is-ph .tpl{display:block}
.media-frame.is-ph:has(.tpl) .ph{display:none}
.tpl svg{position:absolute;inset:0;width:100%;height:100%}
.tpl .tpl-tag{position:absolute;left:1rem;top:.9rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;color:var(--niebla)}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:1.3rem 0;background:var(--navy-2);position:relative;z-index:2}
.marquee-track{display:flex;width:max-content;gap:3rem;will-change:transform}
.marquee-item{display:flex;align-items:center;gap:3rem;font-family:var(--f-display);font-weight:900;font-size:clamp(2.2rem,6vw,4.6rem);letter-spacing:-.02em;white-space:nowrap;line-height:1}
.marquee-item .o{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
.marquee-item .d{width:.28em;height:.28em;border-radius:50%;background:var(--rojo);flex:none}

/* ---------- Bifurcación ---------- */
.bifurca{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.bif-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(420px,58vh,560px);border-radius:var(--radius);overflow:hidden;padding:clamp(1.5rem,3vw,2.4rem);isolation:isolate;border:1px solid var(--linea)}
.bif-card .bif-media{position:absolute;inset:0;z-index:-2}
.bif-card .bif-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease),filter 1.2s var(--ease);filter:saturate(.85) brightness(.8)}
.bif-card:hover .bif-media img{transform:scale(1.12);filter:saturate(1) brightness(.9)}
.bif-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,19,31,.05) 20%,rgba(8,19,31,.92) 100%)}
.bif-card .sec-eyebrow{margin-bottom:.8rem;color:var(--blanco)}
.bif-card h3{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:900;margin-bottom:.7rem;max-width:14ch}
.bif-card p{color:var(--niebla);font-size:1rem;max-width:40ch}
.bif-go{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-family:var(--f-display)}
.bif-go .fl{transition:transform var(--t-fast)}
.bif-card:hover .bif-go{color:var(--rojo-texto)}
.bif-card:hover .bif-go .fl{transform:translateX(6px)}

/* ---------- Sistema 3D ---------- */
.sistema{position:relative;background:radial-gradient(70% 60% at 30% 50%,#13283f 0%,var(--navy-2) 70%)}
.sistema-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;min-height:100svh;padding-top:6rem;padding-bottom:4rem}
.sistema-stage{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:center}
.sistema-grid>*{min-width:0}
.sistema-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.sistema-stage .fallback{position:absolute;top:18%;left:18%;width:64%;height:64%;object-fit:contain;opacity:0;transition:opacity .6s}
.sistema-stage.no-webgl .fallback{opacity:1}
.sistema-label{position:absolute;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;color:var(--niebla);pointer-events:none;white-space:nowrap;transform:translate(-50%,-50%);transition:color .4s,opacity .4s}
.sistema-label.is-on{color:var(--blanco)}
.sistema-label.is-on::before{content:"● ";color:var(--rojo)}
.sistema-panel h2{max-width:14ch}
.uni-list{margin-top:2rem;display:grid;gap:.4rem;counter-reset:u}
.uni-item{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1.05rem 1.1rem;border-radius:14px;border:1px solid transparent;transition:background .5s var(--ease),border-color .5s var(--ease)}
.uni-item .n{font-family:var(--f-mono);font-size:.72rem;color:var(--niebla-2)}
.uni-item img{height:30px;width:auto;opacity:.55;transition:opacity .5s}
.uni-item p{grid-column:2/4;color:var(--niebla);font-size:.95rem;margin-top:.5rem}
html.anim .uni-item p{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.uni-item .go{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--niebla-2);transition:opacity .4s,color .3s}
html.anim .uni-item .go{opacity:0}
.uni-item.is-on{background:rgba(255,255,255,.04);border-color:var(--linea-2)}
.uni-item.is-on img{opacity:1}
.uni-item.is-on .n{color:var(--rojo-texto)}
html.anim .uni-item.is-on p{max-height:6rem;opacity:1;margin-top:.5rem}
html.anim .uni-item.is-on .go{opacity:1}
.uni-item:hover .go{color:var(--rojo-texto)}
.sistema-nota{margin-top:1.6rem;color:var(--niebla);font-size:.96rem;max-width:50ch}
.sistema-nota strong{color:var(--blanco)}

/* ---------- Ventajas (tarjetas apiladas) ---------- */
.ventajas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.ventaja{position:relative;background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--linea);border-radius:var(--radius);padding:2rem 1.8rem 2.2rem;overflow:hidden;min-height:320px;display:flex;flex-direction:column;transition:border-color .4s,transform .5s var(--ease)}
.ventaja:hover{border-color:rgba(227,6,19,.45);transform:translateY(-6px)}
.ventaja .idx{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--rojo-texto);margin-bottom:auto}
.ventaja .big{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,6vw,4.6rem);line-height:.9;letter-spacing:-.04em;margin:2.2rem 0 1rem}
.ventaja .big small{font-size:.38em;letter-spacing:-.01em;color:var(--niebla);font-weight:700}
.ventaja h3{margin-bottom:.6rem}
.ventaja p{color:var(--niebla);font-size:.96rem}
.ventaja::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(227,6,19,.22),transparent 70%);opacity:0;transition:opacity .5s}
.ventaja:hover::after{opacity:1}

/* Pruebas (páginas internas) */
.pruebas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.prueba{background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--linea);border-radius:var(--radius);padding:1.9rem 1.7rem;transition:border-color .4s,transform .5s var(--ease)}
.prueba:hover{border-color:rgba(227,6,19,.4);transform:translateY(-5px)}
.prueba .idx{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--rojo-texto);margin-bottom:2.2rem}
.prueba h3{margin-bottom:.7rem}
.prueba p{color:var(--niebla);font-size:.95rem}

/* ---------- Proceso (confianza sin rostro) ---------- */
.proceso{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
.proceso-linea{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--linea-2)}
.proceso-linea span{position:absolute;inset:0;background:var(--rojo);transform-origin:left;transform:scaleX(0)}
.paso{position:relative;padding-top:4rem}
.paso::before{content:"";position:absolute;top:15px;left:0;width:15px;height:15px;border-radius:50%;background:var(--navy);border:1.5px solid var(--niebla-2);transition:background .4s,border-color .4s,box-shadow .4s}
.paso.is-on::before{background:var(--rojo);border-color:var(--rojo);box-shadow:0 0 0 6px rgba(227,6,19,.18)}
.paso .tc{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--niebla-2);display:block;margin-bottom:.8rem}
.paso h3{margin-bottom:.6rem}
.paso p{color:var(--niebla);font-size:.94rem}
.sec--clara .paso::before{background:var(--pantalla)}
.sec--clara .paso p{color:var(--slate)}

/* ---------- Cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.cifra{padding:2.4rem 1.4rem;border-right:1px solid var(--linea)}
.cifra:last-child{border-right:none}
.cifra b{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:1;letter-spacing:-.04em}
.cifra b sup{font-size:.45em;color:var(--rojo-texto);vertical-align:top;margin-left:.05em}
.cifra > span{display:block;margin-top:.8rem;color:var(--niebla);font-size:.92rem;max-width:22ch}

/* ---------- ADO (visor 360°) ---------- */
.ado{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.ado-spin{position:relative;aspect-ratio:2/3;max-height:78vh;border-radius:var(--radius);overflow:hidden;background:#1a2f47;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ado-spin:active{cursor:grabbing}
.ado-spin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.ado-spin img.is-on{opacity:1}
.ado-spin .vf{inset:1rem}
.ado-dial{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;color:var(--blanco);background:rgba(8,19,31,.6);backdrop-filter:blur(8px);padding:.55rem .9rem;border-radius:999px;white-space:nowrap}
.ado-dial i{display:flex;gap:4px}
.ado-dial i u{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3);text-decoration:none}
.ado-dial i u.is-on{background:var(--rojo)}
.ado-ctrl{display:flex;align-items:center;gap:.6rem;margin-top:1rem;justify-content:center}
.ado-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--linea-2);color:var(--niebla);
  display:grid;place-items:center;font-size:1.1rem;transition:all var(--t-fast)}
.ado-ctrl button:hover{border-color:var(--rojo);color:var(--blanco)}
.ado-estado{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--niebla-2)}
.ado-txt h2{max-width:16ch}
.ado-txt .lead{margin-bottom:1.2rem}
.ado-puntos{margin-top:1.8rem;display:grid;gap:.9rem}
.ado-puntos li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;color:var(--niebla)}
.ado-puntos li::before{content:"";width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--rojo)}
.ado-puntos strong{color:var(--blanco)}

/* ---------- Credencial / split ---------- */
.cred{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.cred blockquote{font-family:var(--f-display);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.05rem);line-height:1.25;letter-spacing:-.015em}
.cred blockquote em{color:var(--rojo-texto);font-style:normal}
.sec--clara .cred blockquote em{color:var(--rojo-texto-claro)}
.cred-nota{margin-top:1.3rem;color:var(--niebla);font-size:.98rem}
.sec--clara .cred-nota{color:var(--slate)}
.cred--inv > :first-child{order:2}

/* ---------- Escenarios ---------- */
.tarjetas-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem}
.esc-card{background:var(--blanco);border:1px solid var(--linea-clara);border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 40px -28px rgba(19,35,58,.35);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.esc-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(19,35,58,.45)}
.esc-card .media-frame{border-radius:0;aspect-ratio:16/10}
.esc-card .esc-body{padding:1.5rem 1.5rem 1.7rem}
.esc-card .idx{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;color:var(--rojo-texto-claro);display:block;margin-bottom:.6rem}
.esc-card h3{color:var(--tinta);margin-bottom:.55rem;font-size:1.18rem}
.esc-card p{color:var(--slate);font-size:.93rem}

/* ---------- Dual ---------- */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:2.4rem}
.dual-col{background:var(--blanco);border:1px solid var(--linea-clara);border-radius:var(--radius);padding:2rem 1.8rem;box-shadow:0 18px 40px -30px rgba(19,35,58,.3)}
.dual-col .sec-eyebrow{color:var(--rojo-texto-claro);margin-bottom:1rem}
.dual-col ul{display:grid;gap:.75rem}
.dual-col li{color:var(--slate);font-size:.98rem;padding-left:1.3rem;position:relative}
.dual-col li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--rojo)}

/* ---------- Conexión entre unidades ---------- */
.conexion{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.2rem}
.conexion--2{grid-template-columns:repeat(2,1fr)}
.conx{display:block;background:var(--card-2);border:1px solid var(--linea);border-radius:14px;padding:1.5rem 1.4rem;transition:border-color .4s,transform .5s var(--ease)}
.conx:hover{border-color:rgba(227,6,19,.45);transform:translateY(-4px)}
.conx img{height:30px;width:auto;margin-bottom:.9rem}
.conx p{color:var(--niebla);font-size:.9rem}

/* ---------- Para quién ---------- */
.quien{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:2.2rem}
.quien-col{border-radius:var(--radius);padding:1.9rem 1.8rem;border:1px solid var(--linea)}
.quien-col.si{background:rgba(227,6,19,.06);border-color:rgba(227,6,19,.32)}
.quien-col h3{margin-bottom:1rem}
.quien-col ul{display:grid;gap:.65rem}
.quien-col li{color:var(--niebla);font-size:.96rem;padding-left:1.3rem;position:relative}
.quien-col li::before{content:"—";position:absolute;left:0;color:var(--niebla-2)}
.quien-col.si li::before{content:"●";color:var(--rojo);font-size:.6em;top:.45em}

/* ---------- Compromisos ---------- */
.compromisos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2.6rem}
.comp{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.7rem;border-radius:var(--radius);background:var(--blanco);border:1px solid var(--linea-clara)}
.comp .ico{width:46px;height:46px;border-radius:12px;background:rgba(227,6,19,.08);display:grid;place-items:center}
.comp .ico svg{width:22px;height:22px;stroke:var(--rojo);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.comp h3{color:var(--tinta);font-size:1.12rem;margin-bottom:.35rem}
.comp p{font-size:.94rem}

/* ---------- CTA final ---------- */
.cta-final{position:relative;overflow:hidden}
.cta-final h2{font-size:clamp(2.4rem,7vw,6rem);max-width:15ch;line-height:.98}
.cta-final .lead{margin:1.6rem 0 2.2rem}
.cta-final::before{content:"";position:absolute;right:-12vw;top:50%;width:52vw;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(227,6,19,.16),transparent 62%);pointer-events:none}

/* ---------- Formulario ---------- */
.solo-js:not(.form-ready){display:none}
[hidden]{display:none!important}
.sin-js-aviso{background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--linea);border-radius:var(--radius);padding:1.8rem}
.sin-js-aviso h3{margin-bottom:.6rem}

.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start;margin-top:2.6rem}
.form{display:grid;gap:1.1rem}
.segmento{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.seg-btn{border:1px solid var(--linea-2);border-radius:12px;padding:1rem;text-align:center;font-family:var(--f-display);font-weight:700;color:var(--niebla);transition:all var(--t-fast)}
.seg-btn:hover{border-color:var(--blanco);color:var(--blanco)}
.seg-btn.is-on{background:var(--rojo);border-color:var(--rojo);color:var(--blanco)}
.campo label{display:block;font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;color:var(--niebla);margin-bottom:.45rem;text-transform:uppercase}
.campo input,.campo select{width:100%;background:var(--card);border:1px solid var(--linea-2);border-radius:12px;padding:1rem 1.05rem;color:var(--blanco);font:inherit;font-size:16px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--rojo);box-shadow:0 0 0 4px rgba(227,6,19,.15)}
.campo select option{background:var(--card);color:var(--blanco)}
.campo.is-error input{border-color:var(--rojo)}
.campo .err{display:none;margin-top:.4rem;font-size:.82rem;color:#ff6b73}
.campo.is-error .err{display:block}
.form .btn{justify-content:center;width:100%}
.form-nota{font-size:.84rem;color:var(--niebla-2)}
.contacto-directo{background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--linea);border-radius:var(--radius);padding:2.1rem 2rem;position:sticky;top:6.5rem}
.contacto-directo h3{margin-bottom:.4rem}
.contacto-directo .tel{font-family:var(--f-display);font-weight:900;font-size:clamp(1.6rem,3vw,2rem);letter-spacing:-.015em;margin:.9rem 0 1.3rem;display:block}
.contacto-directo p{color:var(--niebla);font-size:.95rem}
.contacto-directo ul{margin:1.4rem 0 1.6rem;display:grid;gap:.6rem}
.contacto-directo li{display:flex;gap:.6rem;color:var(--niebla);font-size:.92rem}
.contacto-directo li::before{content:"●";color:var(--rojo);font-size:.6em;padding-top:.4em}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed;right:1.2rem;bottom:1.2rem;z-index:900;width:58px;height:58px;border-radius:50%;background:var(--rojo);display:flex;align-items:center;justify-content:center;box-shadow:0 14px 34px -10px rgba(227,6,19,.6);transition:transform var(--t-fast),background var(--t-fast),opacity .4s,visibility .4s}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--rojo);animation:pulso 2.4s var(--ease) infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.wa-float:hover{transform:translateY(-3px) scale(1.05);background:var(--rojo-dim)}
.wa-float svg{width:27px;height:27px;fill:var(--blanco)}
.wa-float.is-hidden{opacity:0;visibility:hidden}

/* ---------- Footer ---------- */
.footer{position:relative;background:var(--navy-3);padding:clamp(4rem,8vw,6rem) 0 2rem;overflow:hidden}
.footer-big{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;padding-bottom:3rem;border-bottom:1px solid var(--linea);margin-bottom:3rem}
.footer-big a.lema{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,11vw,9rem);line-height:.9;letter-spacing:-.05em;display:inline-flex;align-items:baseline;gap:.1em;transition:color .4s}
.footer-big a.lema .dot{width:.18em;height:.18em;border-radius:50%;background:var(--rojo);display:inline-block}
.footer-big a.lema:hover{color:var(--rojo)}
.footer-big p{color:var(--niebla);max-width:34ch}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem;align-items:start}
.footer-logo img{height:auto;width:152px;margin-bottom:1.1rem}
.footer-slogan{display:flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;color:var(--niebla-2);text-transform:uppercase}
.footer-slogan i{width:7px;height:7px;border-radius:50%;background:var(--rojo)}
.footer h4{font-family:var(--f-mono);font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--niebla-2);margin-bottom:1.1rem}
.footer-col ul{display:grid;gap:.6rem}
.footer-col a{color:var(--niebla);font-size:.95rem;transition:color var(--t-fast);cursor:pointer}
.footer-col a:hover{color:var(--blanco)}
.footer-bottom{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--linea);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;color:var(--niebla-2);text-transform:uppercase}

/* ---------- Reveals ---------- */
html.anim [data-reveal]{opacity:0;transform:translateY(34px)}
html.anim [data-reveal].is-in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.anim [data-split]{visibility:hidden}
html.anim [data-split].is-split{visibility:visible}
[data-split] .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
[data-split] .word{display:inline-block}

/* ---------- Página completa centrada ---------- */
.full-center{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden}
.full-center .wrap{width:100%}

/* ---------- Control de movimiento del visitante ---------- */
.motion-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla-2);transition:color var(--t-fast)}
.motion-btn:hover{color:var(--blanco)}
.motion-btn i{width:9px;height:9px;border-radius:2px;background:var(--rojo);flex:none}
html.sin-motion *,html.sin-motion *::before,html.sin-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
html.sin-motion body::after{animation:none}
html.sin-motion [data-reveal]{opacity:1;transform:none}
html.sin-motion [data-split]{visibility:visible}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr}
  .sistema-grid{grid-template-columns:1fr;min-height:auto;padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  .sistema-stage{max-width:460px}
  .proceso{grid-template-columns:1fr 1fr;row-gap:2.5rem}
  .proceso-linea{display:none}
  .cifras{grid-template-columns:1fr 1fr}
  .cifra:nth-child(2){border-right:none}
  .cifra:nth-child(-n+2){border-bottom:1px solid var(--linea)}
}
@media (max-width:920px){
  .nav-links{
    position:fixed;inset:0;background:var(--navy-3);flex-direction:column;align-items:flex-start;justify-content:center;gap:1.1rem;
    padding:6rem var(--pad-x) 3rem;font-family:var(--f-display);font-size:clamp(1.8rem,8vw,2.6rem);font-weight:900;letter-spacing:-.02em;
    clip-path:circle(0 at calc(100% - 2.2rem) 2.2rem);transition:clip-path .7s var(--ease);visibility:hidden;overflow-y:auto
  }
  .nav-links.is-open{clip-path:circle(150% at calc(100% - 2.2rem) 2.2rem);visibility:visible}
  .nav-links[inert],.nav-links[hidden]{display:none}
  .nav-links>a,.nav-drop>a{color:var(--blanco)}
  .nav-links a.is-active::before{left:-14px}
  .nav-drop>a::after{display:none}
  .nav-drop-menu{position:static;transform:none;opacity:1;visibility:inherit;border:none;background:none;backdrop-filter:none;padding:.4rem 0 0;min-width:0;gap:.2rem}
  .nav-drop-menu a{padding:.3rem 0;font-family:var(--f-body);font-weight:500;font-size:1rem;letter-spacing:0}
  .nav-drop-menu a small,.nav-drop-menu a i{display:none}
  .nav-drop-menu a b{font-family:var(--f-body);font-weight:500;color:var(--niebla)}
  .nav-menu-cta{display:inline-flex;font-size:1rem;letter-spacing:0;margin-top:1rem}
  .nav-burger{display:flex;z-index:1001}
  .nav-burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-burger.is-open span:nth-child(2){opacity:0}
  .nav-burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-cta{padding:.6rem 1rem;font-size:.85rem}
  .nav-cta .fl{display:none}

  .bifurca,.dual,.quien,.form-grid,.cred,.ado,.compromisos{grid-template-columns:1fr}
  .cred--inv > :first-child{order:0}
  .ventajas,.pruebas,.tarjetas-3,.conexion,.conexion--2{grid-template-columns:1fr}
  .ventaja{min-height:0}
  .sec-head{grid-template-columns:1fr}
  .ado-spin{max-height:none;max-width:440px;width:100%;margin:0 auto}
  .contacto-directo{position:static}
  .vf-hud--tl span:nth-child(n+2),.vf-hud--tr .res{display:none}
}
@media (max-width:560px){
  .footer-top{grid-template-columns:1fr}
  .proceso{grid-template-columns:1fr}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center}
  .bif-card{min-height:440px}
  .nav-cta{padding:.55rem .9rem;font-size:.82rem}
  .nav-logo img{height:auto;width:120px}
}
@media (max-width:480px){
  .vf-hud{display:none}
}
@media (max-width:400px){
  .nav-cta{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html.js [data-reveal]{opacity:1;transform:none}
  html.js [data-split]{visibility:visible}
  body::after{animation:none}
  .slate{display:none}
}

/* Navegación utilizable también si main.js no carga o JavaScript está apagado. */
@media (max-width:920px){
  html:not(.nav-ready) .nav{position:relative;transform:none!important}
  html:not(.nav-ready) .nav-inner{flex-wrap:wrap}
  html:not(.nav-ready) .nav-links{position:static;inset:auto;display:flex;visibility:visible;clip-path:none;flex-basis:100%;padding:1rem 0;font-size:1.15rem;gap:.8rem}
  html:not(.nav-ready) .nav-burger{display:none}
  html:not(.nav-ready) .nav-drop-menu{visibility:visible;display:grid}
}
.ado-view{min-width:0}
.sin-motion .cursor{display:none!important}

/* Mapa de unidades: identidad plana, sin WebGL ni scroll fijado. */
.sistema-stage{max-width:560px;width:100%;margin:auto}
.sistema-conexiones{width:100%;height:100%;stroke:var(--linea-2);stroke-width:1.4}
.sistema-conexiones .nodo{stroke:var(--rojo);fill:var(--navy)}
.sistema-stage .fallback{position:absolute;top:50%;left:50%;width:80px;height:80px;opacity:1;transform:translate(-50%,-50%);object-fit:contain}
.sistema-stage .sistema-label{opacity:1;font-weight:700;letter-spacing:.1em;background:var(--navy);padding:.4rem .65rem;border:1px solid var(--linea-2);border-radius:5px}
.sistema-stage .sistema-label:nth-of-type(1){left:26%;top:19%}
.sistema-stage .sistema-label:nth-of-type(2){left:74%;top:19%}
.sistema-stage .sistema-label:nth-of-type(3){left:74%;top:81%}
.sistema-stage .sistema-label:nth-of-type(4){left:26%;top:81%}
.sistema-stage .sistema-label.is-on{border-color:var(--rojo);color:var(--blanco)}
.sistema{min-height:0;padding:clamp(3.5rem,8vw,7rem) 0}
.sistema-grid{min-height:0;padding-top:0;padding-bottom:0}
.hero h1{font-size:clamp(2.7rem,5.2vw,5rem);max-width:19ch}
.hero--home .hero-sub{max-width:57ch}
.hero-scrim{background:linear-gradient(180deg,rgba(8,19,31,.72),rgba(8,19,31,.72) 62%,rgba(8,19,31,.95))}
.hero-sub{color:#E6ECF2}
@media (min-width:1025px){.sistema-panel h2{font-size:clamp(2.1rem,3.4vw,3.2rem);max-width:20ch}}

/* ============================================================
   Qué es Castmedia — contraste, categoría y disciplinas
   ============================================================ */
.categoria{
  margin:2rem 0 0;font-family:var(--f-display);font-weight:900;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.15;letter-spacing:-.02em;max-width:24ch;
}
.categoria .rojo{display:block}
.categoria-nota{margin-top:1rem;color:var(--niebla);font-size:.97rem;max-width:52ch}
.sec--clara .categoria-nota{color:var(--slate)}

.disciplinas{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:3rem}
.disc{
  display:flex;flex-direction:column;gap:.55rem;padding:1.6rem 1.5rem 1.5rem;
  border:1px solid var(--linea);border-radius:var(--radius);background:linear-gradient(160deg,var(--card-2),var(--card));
  transition:border-color .4s,transform .5s var(--ease);
}
.disc:hover{border-color:rgba(227,6,19,.4);transform:translateY(-4px)}
.disc h3{font-size:1.12rem}
.disc .disc-problema{color:var(--niebla-2);font-size:.9rem;font-style:italic}
.disc p{color:var(--niebla);font-size:.94rem;margin-top:auto}
.disc .disc-unidad{
  align-self:flex-start;margin-top:.9rem;padding:.3rem .65rem;border-radius:999px;
  border:1px solid var(--linea-2);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--niebla-2);
}
.disc:hover .disc-unidad{border-color:rgba(227,6,19,.45);color:var(--blanco)}
.disciplinas-pie{margin-top:2rem;color:var(--niebla);font-size:.96rem;max-width:62ch}
.disciplinas-pie strong{color:var(--blanco)}

@media (max-width:1024px){ .disciplinas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .disciplinas{grid-template-columns:1fr} .disc p{margin-top:0} }

/* ---------- Preguntas frecuentes (v2.4) ----------
   <details> nativo: abre y cierra sin JavaScript y con teclado. */
.faq{display:grid;gap:.7rem;margin-top:2.6rem;max-width:860px}
.faq-item{
  border:1px solid var(--linea);border-radius:var(--radius);
  background:linear-gradient(160deg,var(--card-2),var(--card));transition:border-color .4s;
}
.faq-item[open],.faq-item:hover{border-color:rgba(227,6,19,.4)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.25rem 1.5rem;font-family:var(--f-display);font-weight:700;font-size:1.08rem;line-height:1.3;color:var(--blanco);
  border-radius:var(--radius);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";flex:none;font-family:var(--f-body);font-weight:400;font-size:1.5rem;line-height:1;
  color:var(--rojo-texto);transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 1.5rem 1.4rem;color:var(--niebla);font-size:.97rem;max-width:68ch}
html.sin-motion .faq-item summary::after{transition:none}
@media (max-width:760px){
  .faq-item summary{padding:1.05rem 1.15rem;font-size:1rem}
  .faq-item p{padding:0 1.15rem 1.2rem}
}

/* Hero 2.5: pilares que cortan entre elementos, no dentro de ellos; titular en dos frases enteras */
.nw{white-space:nowrap}
.sec-eyebrow--lista{align-items:flex-start}
.sec-eyebrow--lista .dot{margin-top:.38em}
/* (15 oct) Se quitó ".hero h1 .rojo{white-space:nowrap}": cortaba los titulares rojos largos de las
   páginas internas en celular y escritorio. El hero de portada usa .nw donde hace falta. */
@media (max-width:480px){.sec-eyebrow--lista{letter-spacing:.12em}}

/* ============================================================
   PORTADA · DIRECCIÓN D (14–15 oct 2026)
   Intro: el video se ve a través de "UN EQUIPO. UN ENFOQUE." con brillo
   blanco suave + rojo disperso; al bajar, las letras crecen y abren el video.
   Tríptico: tres pilares que convergen en un solo encuadre.
   js/portada.js anima las capas según el scroll.
   ============================================================ */
/* Rendimiento (15 oct): js/portada.js escribe transform, opacity y clip-path directamente
   en cada capa, sin variables en cascada. El CSS describe el estado final: sin JS se lee
   todo; con JS (html.js) arranca en el estado inicial y se anima solo con propiedades
   que el teléfono compone sin redibujar. */
.ed{position:relative;height:240vh}
.ed-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.ed-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Letras y brillo en SVG (15 oct): sin mix-blend-mode. La capa negra lleva las letras como
   huecos (máscara) y el brillo es un filtro SVG que se rasteriza una vez; el teléfono solo
   compone capas fijas sobre el video, sin releerlo en cada cuadro. */
.ed-zoom{position:absolute;inset:0}
.ed-mask,.ed-glow{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  transform-origin:50% 52%;will-change:transform,opacity;backface-visibility:hidden}
.ed-glow-svg{display:block;width:100%;height:100%}
html.js .ed-glow-svg{animation:ed-respira 5s ease-in-out infinite;will-change:opacity}
@keyframes ed-respira{50%{opacity:.78}}
.ed-svgtexto{font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,12.4vw,14.5rem);letter-spacing:-.005em;
  stroke-width:.055em;stroke-linejoin:round;text-anchor:middle;dominant-baseline:central}
@media (min-width:900px){.ed-glow .ed-svgtexto{filter:url(#ed-brillo-g)}}
.ed-hud{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:1.2rem;display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.14em;color:#DDE3EA;font-variant-numeric:tabular-nums;will-change:opacity}
.ed-hud .rec i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rojo);margin-right:.45rem;animation:ed-parp 1.2s steps(2) infinite}
@keyframes ed-parp{50%{opacity:.2}}
.ed-copy{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:clamp(2rem,7vh,5rem);max-width:760px;will-change:transform,opacity}
html.js .ed-copy{opacity:0;transform:translate3d(0,30px,0)}
.ed-copy::before{content:"";position:absolute;inset:-40vh -50vw -10vh -10vw;background:linear-gradient(transparent,rgba(0,0,0,.82));z-index:-1}
.ed-h1{font-family:var(--f-display);font-weight:900;font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:.98;letter-spacing:-.03em;margin:0 0 1rem;max-width:none}
.ed-sub{color:#E3E8EE;font-size:clamp(1rem,1.4vw,1.15rem);max-width:52ch}
.ed-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}

/* Tríptico: el panel central ocupa la pantalla y se recorta (clip-path) a su ranura;
   los laterales salen con transform/opacity. Nada cambia de tamaño en el layout. */
.tri{position:relative;height:220vh;--g:clamp(8px,1.2vw,18px);--col:calc((100% - 4 * var(--g)) / 3)}
.tri-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#05080C}
.tri-panels{position:absolute;inset:0}
.tri-panel{position:absolute;overflow:hidden;margin:0;border-radius:18px;will-change:transform,opacity;backface-visibility:hidden}
.tri-panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tri-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,12,.1) 35%,rgba(5,8,12,.88));pointer-events:none}
.tri-panel:nth-child(1){top:var(--g);bottom:var(--g);left:var(--g);width:var(--col)}
.tri-panel:nth-child(3){top:var(--g);bottom:var(--g);right:var(--g);width:var(--col)}
.tri-panel--centro{inset:0;border-radius:0;will-change:clip-path}
.tri-panel:not(.tri-panel--centro){display:none}
html.js .tri-panel:not(.tri-panel--centro){display:block}
.tri-panel figcaption{position:absolute;left:clamp(1rem,2vw,1.6rem);right:1rem;bottom:clamp(1rem,2.4vw,1.8rem);display:flex;flex-direction:column;gap:.15rem;z-index:2;will-change:opacity}
.tri-panel--centro figcaption{left:calc(2 * var(--g) + var(--col) + clamp(1rem,2vw,1.6rem));bottom:calc(var(--g) + clamp(1rem,2.4vw,1.8rem));right:auto;max-width:calc(var(--col) - 2rem)}
.tri-panel figcaption .n{font-size:.72rem;letter-spacing:.2em;color:var(--rojo-texto);font-weight:700}
.tri-panel figcaption strong{font-family:var(--f-display);font-weight:900;font-size:clamp(1.1rem,1.8vw,1.6rem);line-height:1.1}
.tri-panel figcaption .det{font-size:.8rem;color:var(--niebla)}
html:not(.js) .tri-panel figcaption{display:none}
.tri-scrim{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 55%,rgba(5,8,12,.8),rgba(5,8,12,.25) 70%);pointer-events:none;will-change:opacity}
.tri-copy{position:absolute;left:var(--pad-x);right:var(--pad-x);top:50%;transform:translateY(-50%);max-width:900px;z-index:3;will-change:opacity}
html.js .tri-copy,html.js .tri-scrim{opacity:0}
.tri-h2{font-family:var(--f-display);font-weight:900;font-size:clamp(2.2rem,5.4vw,5rem);line-height:.98;letter-spacing:-.03em;margin:0}
/* Celular: tres franjas horizontales */
@media (max-width:760px){
  .tri{--row:calc((100% - 4 * var(--g)) / 3)}
  .tri-panel:nth-child(1){top:var(--g);bottom:auto;left:var(--g);right:var(--g);width:auto;height:var(--row)}
  .tri-panel:nth-child(3){top:auto;bottom:var(--g);left:var(--g);right:var(--g);width:auto;height:var(--row)}
  .tri-panel--centro figcaption{left:calc(var(--g) + 1rem);bottom:calc(2 * var(--g) + var(--row) + .8rem);max-width:none}
  .tri-panel figcaption .det{display:none}
}

.enfoque h2{max-width:22ch}
.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:2.6rem 0 0;padding:0;background:var(--linea);border:1px solid var(--linea);border-radius:18px;overflow:hidden}
.pasos>li{background:#080C11;padding:2rem 1.6rem 2.2rem;display:flex;flex-direction:column;gap:.45rem}
.pasos .io{font-size:.68rem;letter-spacing:.14em;color:var(--rojo-texto);font-weight:700;font-variant-numeric:tabular-nums}
.pasos h3{font-family:var(--f-display);font-weight:900;font-size:1.5rem;line-height:1.1;margin:.2rem 0}
.pasos p{color:var(--niebla)}
.pasos .nota{color:var(--blanco);font-weight:600}
.chips{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:.3rem 0 0;padding:0}
.chips li{font-family:var(--f-display);font-weight:900;font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.1;padding-left:1rem;border-left:3px solid var(--rojo)}
@media (max-width:760px){.pasos{grid-template-columns:1fr}}
/* Semáforo: rojo (objetivo) → amarillo (especialidades) → verde (un solo equipo) */
.linea{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;height:5px;margin-top:2rem}
.luz{display:block;border-radius:4px;opacity:.22;animation:6s linear infinite}
.luz--roja{background:#FF3B46;--g:rgba(255,59,70,.75);animation-name:luz1}
.luz--amarilla{background:#FFC93C;--g:rgba(255,201,60,.7);animation-name:luz2}
.luz--verde{background:#2FD07A;--g:rgba(47,208,122,.7);animation-name:luz3}
@keyframes luz1{0%,1%{opacity:.22;box-shadow:none}3%,95%{opacity:1;box-shadow:0 0 14px var(--g)}100%{opacity:.22;box-shadow:none}}
@keyframes luz2{0%,33%{opacity:.22;box-shadow:none}36%,95%{opacity:1;box-shadow:0 0 14px var(--g)}100%{opacity:.22;box-shadow:none}}
@keyframes luz3{0%,66%{opacity:.22;box-shadow:none}69%,95%{opacity:1;box-shadow:0 0 18px var(--g)}100%{opacity:.22;box-shadow:none}}
.linea span{position:absolute;top:-6px;bottom:-6px;left:0;width:2px;background:#fff;box-shadow:0 0 10px #fff;animation:linea-cabezal 6s linear infinite}
@keyframes linea-cabezal{to{left:100%}}
.cierre-cta{margin-top:2.4rem}

/* Indicador de scroll: flecha doble luminosa hacia abajo (el contenido está abajo, también en
   celular). Solo transform/opacity; el brillo es un filtro fijo en un elemento pequeño. */
.ed-flecha{position:absolute;left:50%;bottom:clamp(3.4rem,9vh,5.5rem);transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.35rem;color:#fff;pointer-events:none;will-change:opacity}
.ed-flecha svg{width:30px;height:38px;display:block;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 6px rgba(255,107,115,.9)) drop-shadow(0 0 14px rgba(227,6,19,.8));
  animation:ed-flecha 1.8s cubic-bezier(.45,0,.55,1) infinite;will-change:transform,opacity}
@keyframes ed-flecha{0%{transform:translate3d(0,-6px,0);opacity:.35}45%{opacity:1}100%{transform:translate3d(0,10px,0);opacity:0}}
.ed-flecha-txt{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 6px rgba(255,107,115,.85),0 0 14px rgba(227,6,19,.6)}
.solo-raton{display:none}
@media (hover:hover) and (pointer:fine){.solo-tactil{display:none}.solo-raton{display:inline}}
html.sin-motion .ed-flecha svg{animation:none}
@media (prefers-reduced-motion:reduce){.ed-flecha svg{animation:none}}

/* Sin movimiento: sin zoom ni convergencia; se muestra el estado final legible.
   portada.js quita sus estilos en línea en este modo, así que estas reglas mandan. */
html.sin-motion .ed,html.sin-motion .tri{height:auto}
html.sin-motion .ed-stage,html.sin-motion .tri-stage{position:relative}
html.sin-motion .ed-mask,html.sin-motion .ed-glow,html.sin-motion .ed-hud{display:none}
html.sin-motion .ed-copy{opacity:1;transform:none}
html.sin-motion .tri-panel:not(.tri-panel--centro),html.sin-motion .tri-panel figcaption{display:none}
html.sin-motion .tri-copy,html.sin-motion .tri-scrim{opacity:1}
html.sin-motion .luz{animation:none;opacity:1}
html.sin-motion .linea span{display:none}
@media (prefers-reduced-motion:reduce){
  .ed,.tri{height:auto}.ed-stage,.tri-stage{position:relative}
  .ed-mask,.ed-glow,.ed-hud{display:none}html.js .ed-copy{opacity:1;transform:none}
  html.js .tri-panel:not(.tri-panel--centro),html.js .tri-panel figcaption{display:none}
  html.js .tri-copy,html.js .tri-scrim{opacity:1}
  .luz{animation:none;opacity:1}.linea span{display:none}
}

/* ============================================================
   PÁGINAS LEGALES (política de privacidad, 15 oct 2026)
   ============================================================ */
.legal-head{padding-top:clamp(8rem,14vw,10rem)}
.legal-head h1{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:none;margin:.2rem 0 1rem}
.legal-fecha{margin-top:1.2rem;font-size:.82rem;letter-spacing:.06em;color:var(--niebla-2)}
.legal-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.legal-indice{position:sticky;top:6.5rem;font-size:.88rem;border-left:1px solid var(--linea-2);padding-left:1.1rem}
.legal-indice ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;counter-reset:legal}
.legal-indice li{counter-increment:legal}
.legal-indice a{color:var(--niebla);transition:color var(--t-fast)}
.legal-indice a::before{content:counter(legal,decimal-leading-zero) "  ";color:var(--rojo-texto);font-weight:700;font-size:.74rem;letter-spacing:.08em}
.legal-indice a:hover{color:var(--blanco)}
.legal-texto{max-width:70ch;color:var(--niebla);line-height:1.7}
.legal-texto h2{font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--blanco);margin:3rem 0 .9rem;scroll-margin-top:6.5rem}
.legal-texto h2:first-child{margin-top:0}
.legal-texto h3{font-family:var(--f-display);font-size:1.08rem;color:var(--blanco);margin:1.6rem 0 .5rem}
.legal-texto p{margin:0 0 1rem}
.legal-texto ul{margin:0 0 1.2rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.5rem}
.legal-texto li::marker{color:var(--rojo-texto)}
.legal-texto strong{color:var(--blanco);font-weight:600}
.legal-texto a{color:var(--rojo-texto);text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){
  .legal-grid{grid-template-columns:1fr}
  .legal-indice{position:static;border-left:0;padding:1.2rem;border:1px solid var(--linea);border-radius:var(--radius)}
}
.form-nota a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   IDIOMA (15 oct 2026): botón ES / EN en la barra y aviso discreto.
   El aviso lo crea main.js solo si el navegador prefiere el otro idioma; nunca redirige.
   ============================================================ */
.nav-acc{display:flex;align-items:center;gap:1rem;flex:none}
.nav-lang{display:flex;align-items:center;gap:.3rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;color:var(--niebla-2)}
.nav-lang a,.nav-lang-on{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:0 .2rem;border-radius:8px}
.nav-lang a{color:var(--niebla);transition:color var(--t-fast),background var(--t-fast)}
.nav-lang a:hover,.nav-lang a:focus-visible{color:var(--blanco);background:rgba(255,255,255,.08)}
.nav-lang-on{color:var(--blanco);background:linear-gradient(var(--rojo),var(--rojo)) no-repeat 50% calc(100% - 4px)/55% 2px}
.nav-lang i{font-style:normal;opacity:.45}
/* En celular el selector queda por encima del menú abierto (como la hamburguesa), siempre a mano. */
@media (max-width:920px){.nav-acc{margin-left:auto;gap:.6rem}.nav-inner{gap:.8rem}.nav-lang{position:relative;z-index:1001}}
@media (max-width:400px){.nav-lang a,.nav-lang-on{min-width:40px;min-height:40px}}

.lang-aviso{position:fixed;z-index:950;top:5.2rem;right:var(--pad-x);max-width:340px;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem;
  padding:.85rem 2.8rem .85rem 1rem;background:rgba(13,27,42,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--linea-2);border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);font-size:.9rem;color:var(--niebla);
  opacity:0;transform:translate3d(0,-8px,0);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lang-aviso.is-on{opacity:1;transform:none}
.lang-aviso p{margin:0;flex:1 1 100%}
.lang-aviso-ir{color:var(--blanco);font-weight:600;text-decoration:underline;text-decoration-color:var(--rojo);text-underline-offset:4px}
.lang-aviso-x{position:absolute;background:none;border:0;cursor:pointer;font-family:inherit;top:.35rem;right:.35rem;width:40px;height:40px;border-radius:10px;font-size:1.4rem;line-height:1;color:var(--niebla)}
.lang-aviso-x:hover,.lang-aviso-x:focus-visible{color:var(--blanco);background:rgba(255,255,255,.08)}
@media (max-width:560px){.lang-aviso{left:var(--pad-x);right:var(--pad-x);max-width:none;top:4.6rem}}
html.sin-motion .lang-aviso{transition:none}