/* ============================================================
GRUPO CISPE — Dark Tactical / Editorial Operativo
============================================================ */
:root{
/* base */
--bg-0:#050607;
--bg-1:#0B0D0E;
--bg-2:#141719;
--bg-blue:#0A1018;
--steel:#1D2226;
--steel-2:#2A3035;
--gray-mid:#596168;
--gray-blue:#34404A;
--gray-light:#B6BDC2;
--white:#F2F4F2;
--white-2:#C9D0CF;
/* blue (acento quirúrgico) */
--green:#2E6FA8;
--green-bright:#38B0F2;
--green-deep:#142A3B;
/* unit colors */
--u-cap:#94A83A;
--u-seg:#EFC81F;
--u-leg:#E5B83C;
--u-mon:#0E5AA7;
--u-inv:#5A3A8E;
--u-com:#FF5B1E;
/* layout */
--maxw: 1440px;
--pad: clamp(20px, 4vw, 64px);
/* type */
--f-display:'Oswald', 'Bebas Neue', Impact, sans-serif;
--f-body:'Inter Tight', 'Inter', system-ui, sans-serif;
--f-mono:'JetBrains Mono', ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg-0);
color:var(--white-2);
font-family:var(--f-body);
font-size:15px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
/* ---------- subtle global film grain ---------- */
body::after{
content:"";
position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.06;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,");
}
/* ============================================================ TYPE */
.mono{
font-family:var(--f-mono);
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--gray-mid);
font-weight:400;
}
.title-xl{
font-family:var(--f-display);
font-weight:600;
font-size:clamp(40px, 6.5vw, 92px);
line-height:.95;
letter-spacing:-.005em;
color:var(--white);
margin:0 0 28px;
text-transform:uppercase;
}
.title-xl em{
font-style:normal;
color:var(--green-bright);
position:relative;
white-space:nowrap;
}
.title-xl em::after{
content:"";display:inline-block;width:.18em;height:.18em;background:var(--green-bright);margin-left:.1em;vertical-align:.2em;
}
/* ============================================================ BUTTONS */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 22px;
font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
border:1px solid transparent;
cursor:pointer;
transition:all .25s ease;
position:relative;
}
.btn--lg{padding:18px 28px;font-size:12px}
.btn--primary{
background:var(--green);
color:#0A0A0A;
border-color:var(--green);
font-weight:600;
}
.btn--primary:hover{background:var(--green-bright);border-color:var(--green-bright);box-shadow:0 0 0 1px var(--green-bright), 0 0 30px -8px var(--green-bright)}
.btn--line{
border-color:rgba(182,189,194,.2);
color:var(--white-2);
background:transparent;
}
.btn--line:hover{border-color:var(--green-bright);color:var(--white);box-shadow:inset 0 0 0 1px var(--green-bright)}
.btn--ghost{
border-color:rgba(182,189,194,.18);color:var(--white-2);
padding:10px 16px;
}
.btn--ghost:hover{border-color:var(--green-bright);color:var(--white)}
/* ============================================================ HUD BUTTONS (angular tactical) */
.hud-btn{
--bw: 1.6px; /* rim thickness */
--cx: 16px; /* horizontal chamfer */
--cy: 10px; /* vertical chamfer */
--h: 56px;
--gap: 7px;
--rim: linear-gradient(180deg,#6fccff,#2479bd 55%,#0e3654);
--fill: linear-gradient(180deg,#1d242b,#11161c 55%,#0a0e12);
--ink: var(--white);
--chev: var(--green-bright);
--glow: rgba(56,176,242,.24);
--glow-hover: rgba(56,176,242,.6);
display:inline-flex;align-items:stretch;gap:var(--gap);
height:var(--h);text-decoration:none;color:var(--ink);
-webkit-tap-highlight-color:transparent;
transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.hud-btn--lg{--h:66px;--cx:19px;--cy:12px;--gap:8px}
/* shared chamfer polygons */
.hud-btn__frame{
--clip: polygon(var(--cx) 0, calc(100% - var(--cx)) 0, 100% var(--cy), 100% calc(100% - var(--cy)), calc(100% - var(--cx)) 100%, var(--cx) 100%, 0 calc(100% - var(--cy)), 0 var(--cy));
position:relative;display:inline-flex;align-items:center;
clip-path:var(--clip);
background:var(--rim);
filter:drop-shadow(0 0 7px var(--glow));
transition:filter .3s, background .3s;
}
.hud-btn__arrow{
--clip: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 0 0);
position:relative;display:flex;align-items:center;justify-content:flex-start;
width:58px;flex:none;
clip-path:var(--clip);
background:var(--rim);
filter:drop-shadow(0 0 7px var(--glow));
transition:filter .3s, background .3s;
}
.hud-btn--lg .hud-btn__arrow{width:66px}
/* inner panel (primary = solid fill) — real element for reliable rendering */
.hud-btn__panel{
position:absolute;inset:var(--bw);
clip-path:var(--clip);
background:var(--fill);
z-index:0;
}
/* content */
.hud-btn__icon,.hud-btn__div,.hud-btn__label,.hud-btn__edge{position:relative;z-index:2}
.hud-btn__icon{
display:flex;align-items:center;justify-content:center;
width:52px;flex:none;align-self:stretch;
}
.hud-btn--lg .hud-btn__icon{width:62px}
.hud-btn__icon svg{width:21px;height:21px;color:var(--green-bright)}
.hud-btn__icon--badge img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(56,176,242,.6))}
.hud-btn--lg .hud-btn__icon--badge img{width:42px;height:42px}
.hud-btn__div{
width:1px;align-self:stretch;margin:12px 0;flex:none;
background:linear-gradient(180deg,transparent,rgba(120,205,255,.7),transparent);
}
.hud-btn__label{
padding:0 26px;white-space:nowrap;
font-family:var(--f-mono);font-weight:600;
font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
}
.hud-btn--lg .hud-btn__label{font-size:13.5px;letter-spacing:.2em;padding:0 30px}
/* bright accent bars on the left rim */
.hud-btn__edge{
position:absolute;left:2px;top:0;bottom:0;width:4px;flex:none;
background:linear-gradient(180deg,
transparent 16%, #7ad2ff 16% 40%, transparent 40% 60%, #7ad2ff 60% 84%, transparent 84%);
box-shadow:0 0 9px rgba(122,210,255,.85);
}
/* chevron */
.hud-btn__arrow svg{
position:relative;z-index:2;width:20px;height:20px;margin-left:15px;
color:var(--chev);transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.hud-btn--lg .hud-btn__arrow svg{width:22px;height:22px;margin-left:18px}
/* ── SECONDARY = wireframe (TRUE transparent interior via mask ring) ── */
.hud-btn--secondary{
--rim: linear-gradient(180deg, rgba(122,210,255,.95), rgba(46,111,168,.8) 55%, rgba(20,54,84,.65));
--bw: 1.4px;
--glow: rgba(56,176,242,.16);
}
.hud-btn--secondary .hud-btn__frame{background:transparent}
.hud-btn--secondary .hud-btn__panel{
inset:0;background:var(--rim);
padding:var(--bw);
-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, linear-gradient(#000 0 0);
mask-composite:exclude;
}
/* hover */
.hud-btn:hover{transform:translateY(-2px)}
.hud-btn:hover .hud-btn__frame,
.hud-btn:hover .hud-btn__arrow{filter:drop-shadow(0 0 18px var(--glow-hover))}
.hud-btn:hover .hud-btn__arrow svg{transform:translateX(4px)}
.hud-btn--secondary:hover{
--rim: linear-gradient(180deg,#8fd9ff,#38B0F2 55%,#1f6fb0);
}
.hud-btn--secondary:hover .hud-btn__label{color:#fff}
.hud-btn:active{transform:translateY(0)}
@media (max-width:520px){
.hud-btn{--h:50px}
.hud-btn--lg{--h:56px}
.hud-btn__label{font-size:11px;letter-spacing:.12em;padding:0 18px}
.hud-btn--lg .hud-btn__label{font-size:12px;padding:0 20px}
.hud-btn__icon{width:40px}
.hud-btn__arrow{width:48px}
}
/* ============================================================ CORNER BRACKETS */
.bracket{
position:absolute;width:22px;height:22px;
pointer-events:none;
z-index:5;
}
.bracket.small{width:14px;height:14px}
.bracket::before, .bracket::after{
content:"";position:absolute;background:var(--green-bright);
}
.bracket--tl{top:18px;left:18px}
.bracket--tl::before{left:0;top:0;width:100%;height:1px}
.bracket--tl::after{left:0;top:0;height:100%;width:1px}
.bracket--tr{top:18px;right:18px}
.bracket--tr::before{right:0;top:0;width:100%;height:1px}
.bracket--tr::after{right:0;top:0;height:100%;width:1px}
.bracket--bl{bottom:18px;left:18px}
.bracket--bl::before{left:0;bottom:0;width:100%;height:1px}
.bracket--bl::after{left:0;bottom:0;height:100%;width:1px}
.bracket--br{bottom:18px;right:18px}
.bracket--br::before{right:0;bottom:0;width:100%;height:1px}
.bracket--br::after{right:0;bottom:0;height:100%;width:1px}
/* ============================================================ NAV */
.nav{
position:fixed;top:0;left:0;right:0;z-index:100;
background:linear-gradient(180deg, rgba(5,6,7,.85), rgba(5,6,7,.35) 70%, transparent);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
border-bottom:1px solid rgba(255,255,255,.04);
}
.nav__wrap{
max-width:var(--maxw);
margin:0 auto;
padding:14px var(--pad);
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:32px;
}
.nav__brand{display:flex;align-items:center;gap:10px}
.nav__mark{height:104px;width:auto;object-fit:contain;margin:-16px 0}
.nav__word{display:flex;flex-direction:column;line-height:1;font-family:var(--f-display);letter-spacing:.04em}
.nav__word-top{font-size:9px;color:var(--gray-mid);letter-spacing:.32em;font-weight:400}
.nav__word-bot{font-size:18px;color:var(--white);font-weight:600;letter-spacing:.18em}
.nav__links{display:flex;gap:32px;justify-content:center}
.nav__links a{
font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--white-2);position:relative;padding:6px 0;
transition:color .2s;
}
.nav__links a::after{
content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--green-bright);transition:width .25s;
}
.nav__links a:hover{color:var(--white)}
.nav__links a:hover::after{width:100%}
.nav__meta{display:flex;align-items:center;gap:18px}
.nav__status{display:flex;align-items:center;gap:8px;color:var(--gray-light)}
.nav__status .dot{width:6px;height:6px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 8px var(--green-bright);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (max-width:1024px){
.nav__links{display:none}
.nav__status{display:none}
}
/* ============================================================ HERO */
.hero{
position:relative;min-height:100vh;
padding:172px var(--pad) 60px;
overflow:hidden;
display:flex;flex-direction:column;justify-content:flex-end;
isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__img{
width:100%;height:100%;object-fit:cover;object-position:center 30%;
filter:grayscale(.25) brightness(.72) contrast(1.08) saturate(.85) hue-rotate(-4deg);
}
.hero__vignette{
position:absolute;inset:0;
background:
radial-gradient(130% 85% at 30% 30%, transparent, rgba(5,6,7,.35) 70%, rgba(5,6,7,.9) 100%),
linear-gradient(180deg, rgba(5,6,7,.35) 0%, rgba(5,6,7,.05) 35%, rgba(5,6,7,.5) 75%, rgba(5,6,7,.98) 100%),
linear-gradient(90deg, rgba(5,6,7,.55) 0%, transparent 50%);
}
.hero__grid{
position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
background-image:
linear-gradient(to right, rgba(182,189,194,.18) 1px, transparent 1px),
linear-gradient(to bottom, rgba(182,189,194,.18) 1px, transparent 1px);
background-size:80px 80px;
mask-image:radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
}
.hero__scan{
position:absolute;inset:0;pointer-events:none;
background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
}
/* hero side rail */
.hero__rail{
position:absolute;left:18px;top:50%;transform:translateY(-50%) rotate(180deg);
writing-mode:vertical-rl;
display:flex;gap:24px;
font-size:10px;color:var(--gray-mid);
}
@media (max-width:900px){.hero__rail{display:none}}
.hero__tagstrip{
position:absolute;top:116px;left:0;right:0;
display:flex;justify-content:space-between;gap:24px;
padding:12px var(--pad);
border-top:1px solid rgba(255,255,255,.05);
border-bottom:1px solid rgba(255,255,255,.05);
background:linear-gradient(90deg, rgba(5,6,7,.6), rgba(5,6,7,.2) 50%, rgba(5,6,7,.6));
color:var(--gray-mid);
z-index:2;
overflow:hidden;white-space:nowrap;
}
@media (max-width:900px){.hero__tagstrip span:nth-child(n+3){display:none}}
/* hero content */
.hero__content{
max-width:1180px;width:100%;
margin-top:auto;
position:relative;z-index:3;
}
.hero__tags{
display:flex;flex-wrap:wrap;gap:8px 14px;
color:var(--green-bright);
margin-bottom:24px;
letter-spacing:.22em;
font-size:10px;
}
.hero__tags .sep{color:var(--gray-mid);opacity:.5}
.hero__title{
font-family:var(--f-display);
font-weight:600;
font-size:clamp(48px, 9.5vw, 152px);
line-height:1.04;
letter-spacing:-.01em;
color:var(--white);
margin:0 0 32px;
text-transform:uppercase;
}
.hero__title .line{display:block}
.hero__title em{
font-style:normal;
position:relative;
background:linear-gradient(180deg, var(--white) 0%, var(--white) 60%, var(--green-bright) 60%, var(--green-bright) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero__title .dot-accent{
display:inline-block;width:.16em;height:.16em;background:var(--green-bright);
vertical-align:.18em;margin-left:.08em;
box-shadow:0 0 24px var(--green-bright);
}
.hero__sub{
max-width:560px;
font-size:clamp(14px, 1.05vw, 17px);
color:var(--gray-light);
margin:0 0 36px;
line-height:1.6;
}
.hero__sub strong{color:var(--white);font-weight:500}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
/* hero stats */
.hero__stats{
position:relative;z-index:3;
margin-top:54px;
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid rgba(255,255,255,.07);
padding-top:24px;
gap:18px;
}
.stat{display:flex;align-items:baseline;gap:14px;padding-right:18px;border-right:1px solid rgba(255,255,255,.05)}
.stat:last-child{border-right:0}
.stat__num{
font-family:var(--f-display);font-weight:500;font-size:clamp(34px, 4vw, 56px);
color:var(--white);line-height:1;letter-spacing:-.01em;
}
.stat__num i{font-style:normal;color:var(--green-bright);font-size:.65em;margin:0 .04em}
.stat__lbl{
font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-mid);line-height:1.4;
}
@media (max-width:760px){
.hero__stats{grid-template-columns:repeat(2,1fr)}
.stat:nth-child(2){border-right:0}
}
/* ============================================================ SECTION RULE */
.section-rule{
max-width:var(--maxw);margin:0 auto;
padding:36px var(--pad) 0;
display:flex;align-items:center;gap:18px;
color:var(--gray-mid);
}
.section-rule .rule{flex:1;height:1px;background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04))}
/* ============================================================ GRUPO (section 02) */
.grupo{
position:relative;
padding:60px var(--pad) 120px;
max-width:var(--maxw);margin:0 auto;
background:
radial-gradient(80% 60% at 90% 10%, rgba(20,42,59,.18), transparent 60%),
var(--bg-0);
}
.grupo__intro{
display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);
margin-top:44px;align-items:end;
}
.grupo__title{margin:0}
.grupo__intro-r{display:flex;flex-direction:column;gap:22px;padding-bottom:8px}
.grupo__body{
color:var(--gray-light);
font-size:16px;line-height:1.65;margin:0;text-wrap:pretty;
}
.grupo__body em{color:var(--white);font-style:normal;font-weight:500}
.grupo__meta{display:flex;align-items:center;gap:10px;color:var(--gray-mid);font-size:10px;letter-spacing:.2em}
/* ── contained image + capabilities, side by side ── */
.grupo__split{
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(28px,3.4vw,52px);
margin-top:clamp(40px,4.5vw,64px);
align-items:stretch;
}
.grupo__hero{
position:relative;margin:0;overflow:hidden;isolation:isolate;
border:1px solid rgba(255,255,255,.1);
aspect-ratio:4/5;max-height:600px;background:var(--bg-2);
}
.grupo__hero img{
width:100%;height:100%;object-fit:cover;object-position:center 38%;
filter:grayscale(.12) brightness(.92) contrast(1.06) saturate(.97);
transition:transform 8s ease;
}
.grupo__hero:hover img{transform:scale(1.05)}
.grupo__hero-grad{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg, rgba(5,6,7,.5) 0%, transparent 22%, transparent 52%, rgba(5,6,7,.88) 100%);
}
.grupo__hero-tag{
position:absolute;z-index:3;display:flex;align-items:center;gap:8px;
font-size:10px;letter-spacing:.2em;color:var(--white-2);
text-shadow:0 1px 8px rgba(0,0,0,.75);
}
.grupo__hero-tag--tl{top:18px;left:20px}
.grupo__hero-tag--tr{top:18px;right:20px;color:var(--gray-light)}
.grupo__hero-cap{
position:absolute;z-index:3;left:20px;right:20px;bottom:18px;
display:flex;flex-direction:column;gap:5px;
font-size:11px;letter-spacing:.16em;color:var(--white);
text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.grupo__hero-cap span:last-child{color:var(--gray-light);font-size:10px}
/* capabilities — vertical numbered list */
.grupo__capwrap{display:flex;flex-direction:column}
.grupo__capwrap-head{
display:flex;align-items:center;gap:12px;
padding-bottom:14px;margin-bottom:2px;
border-bottom:1px solid rgba(255,255,255,.14);
color:var(--gray-light);font-size:11px;letter-spacing:.22em;
}
.grupo__capwrap-count{margin-left:auto;color:var(--green-bright);font-size:12px;letter-spacing:.1em}
.grupo__caps{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;flex:1;
}
.grupo__caps li{
display:flex;align-items:center;gap:20px;
padding:0 18px 0 18px;flex:1;min-height:64px;
border-bottom:1px solid rgba(255,255,255,.07);
position:relative;transition:background .3s, padding-left .3s;
}
.grupo__caps li:last-child{border-bottom:0}
.grupo__caps li::before{
content:"";position:absolute;left:0;top:0;width:2px;height:0;
background:var(--green-bright);transition:height .35s var(--rv-ease);
}
.grupo__caps li:hover{background:rgba(20,42,59,.12);padding-left:28px}
.grupo__caps li:hover::before{height:100%}
.grupo__caps li:hover .grupo__caps-num{color:var(--green-bright)}
.grupo__caps-num{
color:var(--gray-mid);font-size:13px;letter-spacing:.08em;flex:none;
width:30px;transition:color .3s;
}
.grupo__caps-txt{color:var(--white-2);font-size:15.5px;line-height:1.35;text-wrap:pretty}
@media (max-width:980px){
.grupo__intro{grid-template-columns:1fr;gap:28px;align-items:start}
.grupo__split{grid-template-columns:1fr;gap:32px}
.grupo__hero{aspect-ratio:16/10;max-height:none}
.grupo__caps li{min-height:72px}
}
@media (max-width:600px){
.grupo__hero{aspect-ratio:4/3;object-position:center 42%}
}
/* image frame */
.frame{
position:relative;margin:0;
border:1px solid rgba(255,255,255,.08);
overflow:hidden;
aspect-ratio: 4 / 5;
background:var(--bg-2);
}
.frame img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(.15) brightness(.95) contrast(1.05) saturate(.95);
transition:transform 6s ease;
}
.frame:hover img{transform:scale(1.04)}
.frame figcaption{
position:absolute;left:18px;right:18px;bottom:18px;
display:flex;justify-content:space-between;color:var(--white-2);
z-index:2;
}
.frame::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 55%, rgba(5,6,7,.7) 100%);
pointer-events:none;
}
.frame__caption{
margin-top:14px;display:flex;align-items:center;gap:10px;color:var(--gray-mid);
}
.dot-green{
width:6px;height:6px;border-radius:50%;background:var(--green-bright);
box-shadow:0 0 8px var(--green-bright);display:inline-block;flex-shrink:0;
}
/* ============================================================ ECOSISTEMA (section 03) */
.eco{
position:relative;
padding:60px var(--pad) 120px;
max-width:var(--maxw);margin:0 auto;
background:
linear-gradient(180deg, transparent, rgba(10,16,24,.4) 30%, transparent),
var(--bg-0);
}
.eco__head{
display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end;
margin:48px 0 48px;
}
.eco__sub{max-width:440px;color:var(--gray-light);font-size:16px;margin:0}
@media (max-width:900px){.eco__head{grid-template-columns:1fr}}
.eco__stage{
display:grid;grid-template-columns:1fr 1.2fr;gap:24px;
align-items:stretch;
}
@media (max-width:1024px){.eco__stage{grid-template-columns:1fr}}
/* unit list */
.eco__list{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;
border-top:1px solid rgba(255,255,255,.07);
}
.unit{
--unit:#94A83A;
position:relative;
display:grid;grid-template-columns:48px 1fr 24px;
gap:18px;align-items:center;
padding:22px 18px 22px 0;
border-bottom:1px solid rgba(255,255,255,.06);
cursor:pointer;
transition:background .25s, padding .25s;
}
.unit::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
background:var(--unit);opacity:0;transition:opacity .25s;
}
.unit__idx{color:var(--gray-mid)}
.unit h3{
margin:0 0 4px;
font-family:var(--f-display);font-weight:500;font-size:19px;
letter-spacing:.06em;color:var(--white-2);text-transform:uppercase;
transition:color .25s;
}
.unit p{margin:0;font-size:13px;color:var(--gray-mid);line-height:1.5;max-width:42ch}
.unit__chev{color:var(--gray-mid);font-size:24px;line-height:1;transition:color .25s, transform .25s}
.unit:hover, .unit.is-active{
background:linear-gradient(90deg, rgba(255,255,255,.025), transparent 80%);
padding-left:18px;
}
.unit:hover::before, .unit.is-active::before{opacity:1}
.unit.is-active h3, .unit:hover h3{color:var(--white)}
.unit.is-active .unit__idx, .unit:hover .unit__idx{color:var(--unit)}
.unit.is-active .unit__chev, .unit:hover .unit__chev{color:var(--unit);transform:translateX(4px)}
/* panel */
.eco__panel{
display:grid;grid-template-rows:1.05fr .9fr;
border:1px solid rgba(255,255,255,.08);
background:var(--bg-1);
overflow:hidden;
}
.eco__images{position:relative;overflow:hidden;min-height:340px}
.eco__img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:grayscale(.25) brightness(.85) contrast(1.06) saturate(.9);
opacity:0;transition:opacity .6s ease, transform 8s ease;
transform:scale(1.04);
}
.eco__img.is-active{opacity:1;transform:scale(1.0)}
.eco__overlay{
position:absolute;inset:0;
background:
linear-gradient(180deg, rgba(5,6,7,.08) 0%, rgba(5,6,7,.32) 100%),
repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.02) 4px 5px);
pointer-events:none;
}
.eco__hud{position:absolute;inset:14px;pointer-events:none}
.eco__hud-top{
position:absolute;top:0;left:0;right:0;
display:flex;justify-content:space-between;color:var(--white-2);
}
.eco__hud-top span{display:flex;align-items:center;gap:8px}
.eco__hud-bot{
position:absolute;left:0;right:0;bottom:0;
display:flex;justify-content:space-between;color:var(--gray-light);
}
.eco__info{
padding:32px;
border-top:1px solid rgba(255,255,255,.08);
position:relative;
}
.eco__info-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.eco__bar{width:36px;height:2px;background:var(--u-cap);transition:background .3s}
.eco__name{
font-family:var(--f-display);font-weight:600;font-size:clamp(24px, 2.4vw, 32px);
letter-spacing:.04em;color:var(--white);margin:0 0 14px;text-transform:uppercase;
}
.eco__line{color:var(--gray-light);margin:0 0 24px;font-size:15px;max-width:54ch}
.caps-label{color:var(--gray-mid);display:block;margin-bottom:10px}
.eco__caps ul{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;
}
.eco__caps li{
font-size:14px;color:var(--white-2);
padding:6px 0 6px 18px;position:relative;
}
.eco__caps li::before{
content:"";position:absolute;left:0;top:13px;width:8px;height:1px;background:var(--green-bright);
}
@media (max-width:560px){.eco__caps ul{grid-template-columns:1fr}}
/* diagram strip */
.eco__diagram{
margin-top:60px;
border-top:1px solid rgba(255,255,255,.07);
border-bottom:1px solid rgba(255,255,255,.07);
padding:28px 0;
display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
position:relative;
}
.diag__center{
color:var(--white);font-size:14px;letter-spacing:.32em;
padding:8px 16px;border:1px solid var(--green-bright);
background:rgba(20,42,59,.2);
}
.diag__node{
--c:#94A83A;
font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
padding:6px 12px;color:var(--white-2);
border:1px solid var(--c);
background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
position:relative;
}
.diag__node::before{
content:"";position:absolute;left:50%;top:-14px;width:1px;height:12px;background:var(--c);opacity:.5;
}
/* ============================================================ METODOLOGÍA (section 04) */
.metodo{
position:relative;
padding:0 var(--pad) 120px;
overflow:hidden;
background:var(--bg-1);
border-top:1px solid rgba(255,255,255,.05);
}
.metodo__bg{position:relative;z-index:0;opacity:1;overflow:hidden}
.metodo__bg::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;pointer-events:none;
background:linear-gradient(180deg, transparent, rgba(11,13,14,.55) 62%, var(--bg-1) 96%);
}
.metodo__bg img{
width:100%;height:auto;display:block;object-fit:cover;
filter:grayscale(.28) brightness(.92) contrast(1.05) saturate(.96);
}
.metodo::before{
content:"";position:absolute;inset:0;z-index:1;
background: radial-gradient(72% 64% at 50% 36%, transparent, rgba(11,13,14,.32));
}
.metodo > *{position:relative;z-index:2;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.metodo .section-rule{
position:absolute;top:22px;left:0;right:0;width:100%;max-width:var(--maxw);
margin:0 auto;padding:0 var(--pad);z-index:4;
}
.metodo .section-rule .mono{text-shadow:0 1px 10px rgba(0,0,0,.7)}
.metodo__head{
margin:clamp(-168px,-13vw,-96px) 0 60px;
position:relative;z-index:4;max-width:var(--maxw);
}
.metodo__head .title-xl{text-shadow:0 3px 26px rgba(0,0,0,.72)}
.metodo__sub{max-width:580px;color:var(--gray-light);font-size:16px;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.6)}
/* ─── COLLAGE CINEMÁTICO (metodología) ─── */
.mscene{position:relative}
.mscene__canvas{
position:relative;
height:clamp(360px, 44vw, 600px);
overflow:hidden;
background:#050607;
border:1px solid rgba(255,255,255,.08);
}
.mscene__canvas img{display:block}
/* ambient fragments — faded, blended into the dark */
.mfrag{position:absolute;object-fit:cover;pointer-events:none;z-index:1}
.mfrag--a{inset:0;width:100%;height:100%;opacity:.16;filter:grayscale(.85) brightness(.5) contrast(1.05);
-webkit-mask-image:radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 80%);
mask-image:radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 80%);}
.mfrag--b{left:-4%;bottom:-6%;width:34%;opacity:.28;filter:grayscale(.7) brightness(.55) contrast(1.08);
-webkit-mask-image:radial-gradient(80% 80% at 30% 70%, #000, transparent 72%);
mask-image:radial-gradient(80% 80% at 30% 70%, #000, transparent 72%);}
.mfrag--c{right:-3%;top:-5%;width:26%;opacity:.26;filter:grayscale(.75) brightness(.55) contrast(1.08);
-webkit-mask-image:radial-gradient(80% 80% at 70% 30%, #000, transparent 72%);
mask-image:radial-gradient(80% 80% at 70% 30%, #000, transparent 72%);}
.mfrag--d{right:18%;bottom:-8%;width:26%;opacity:.22;filter:grayscale(.7) brightness(.55) contrast(1.08);
-webkit-mask-image:radial-gradient(80% 80% at 50% 60%, #000, transparent 72%);
mask-image:radial-gradient(80% 80% at 50% 60%, #000, transparent 72%);}
/* lead panels — vertical slices with feathered seams that merge into one montage */
.mpanel{
position:absolute;top:0;height:100%;margin:0;overflow:hidden;z-index:2;
opacity:.42;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
transition:opacity .8s var(--rv-ease);
}
.mpanel img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(.55) brightness(.6) contrast(1.07) saturate(.85);
transform:scale(1.02);
transition:filter 1s var(--rv-ease), transform 7s ease;
}
.mpanel--1{left:0;width:38%}
.mpanel--2{left:24%;width:34%}
.mpanel--3{left:48%;width:37%}
.mpanel--4{left:70%;width:31%}
.mpanel.is-active{opacity:1;z-index:3}
.mpanel.is-active img{filter:grayscale(0) brightness(.95) contrast(1.05) saturate(1.02);transform:scale(1.07)}
.mscene__wash{
position:absolute;inset:0;z-index:4;pointer-events:none;
background:
linear-gradient(180deg, rgba(5,6,7,.5) 0%, transparent 20%, transparent 52%, rgba(5,6,7,.78) 82%, rgba(5,6,7,.96) 100%),
linear-gradient(90deg, rgba(5,6,7,.55), transparent 18%, transparent 82%, rgba(5,6,7,.55)),
radial-gradient(62% 80% at 50% 38%, rgba(20,42,59,.2), transparent 72%);
}
.mscene__grain{
position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mscene__hud{
position:absolute;left:18px;bottom:16px;z-index:6;
display:flex;align-items:center;gap:10px;
font-size:11px;letter-spacing:.2em;color:var(--white);
padding:8px 15px;
background:rgba(5,6,7,.55);
border:1px solid rgba(56,176,242,.32);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.mscene__hud-dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 8px var(--green-bright);animation:socialPulse 2.4s ease-in-out infinite}
.mscene__hud-sep{color:var(--gray-mid)}
#mhudName{color:var(--green-bright)}
/* phases timeline */
.mscene__phases{
list-style:none;margin:0;padding:0;position:relative;
display:grid;grid-template-columns:repeat(4,1fr);
border:1px solid rgba(255,255,255,.08);border-top:0;
background:rgba(5,6,7,.55);
}
.mphase{
position:relative;
display:flex;flex-direction:column;
padding:28px 26px;
border-right:1px solid rgba(255,255,255,.06);
cursor:pointer;
transition:background .35s;
outline:none;
}
.mphase:last-child{border-right:0}
.mphase::after{
content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;
background:var(--green-bright);transform:scaleX(0);transform-origin:left center;
transition:transform .55s var(--rv-ease);
}
.mphase.is-active{background:linear-gradient(180deg, rgba(20,42,59,.16), transparent 70%)}
.mphase.is-active::after,.mphase:focus-visible::after{transform:scaleX(1)}
.mphase__num{
font-family:var(--f-display);font-weight:600;font-size:clamp(40px,3.4vw,56px);line-height:.9;
letter-spacing:-.02em;color:var(--gray-blue);
transition:color .4s;margin-bottom:12px;
}
.mphase.is-active .mphase__num{color:var(--white)}
.mphase__bar{display:block;width:28px;height:2px;background:var(--green-bright);opacity:.4;margin-bottom:16px;transition:width .4s, opacity .4s}
.mphase.is-active .mphase__bar{width:46px;opacity:1}
.mphase h4{
margin:0 0 10px;font-family:var(--f-display);font-weight:600;font-size:19px;
letter-spacing:.06em;color:var(--white);text-transform:uppercase;line-height:1.05;
}
.mphase p{margin:0 0 16px;color:var(--gray-light);font-size:13.5px;line-height:1.55;text-wrap:pretty}
.mphase__tag{color:var(--gray-mid);font-size:10px;letter-spacing:.16em;margin-top:auto}
.mphase.is-active .mphase__tag{color:var(--green)}
/* per-phase image — only surfaces on phones (see ≤560 block) */
.mphase__img{display:none}
@media (max-width:900px){
/* pin the image while the phases scroll past so taps visibly swap it */
.mscene__canvas{height:clamp(240px,52vw,360px);position:sticky;top:62px;z-index:3}
.mfrag--b,.mfrag--c,.mfrag--d{display:none}
.mpanel{left:0 !important;width:100% !important;opacity:0;
-webkit-mask-image:none;mask-image:none;}
.mpanel.is-active{opacity:1}
.mscene__phases{grid-template-columns:1fr 1fr}
.mphase:nth-child(2){border-right:0}
.mphase:nth-child(1),.mphase:nth-child(2){border-bottom:1px solid rgba(255,255,255,.06)}
}
@media (max-width:560px){
/* ─── MÉTODO · teléfono: cada fase es una tarjeta con su propia imagen ─── */
.metodo{padding-bottom:64px}
.mscene__canvas{display:none}
.mscene__phases{
display:flex;flex-direction:column;gap:14px;
background:transparent;border:0;margin-top:6px;
}
.mphase{
flex-direction:column;align-items:stretch;
padding:0;position:relative;overflow:hidden;
border:1px solid rgba(255,255,255,.1);
background:linear-gradient(180deg,rgba(17,21,24,.72),rgba(7,9,10,.8));
transition:border-color .45s;
}
.mphase:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.mphase.is-active{border-color:rgba(56,176,242,.48)}
/* línea-acento superior al borde de la tarjeta */
.mphase::after{top:0;height:3px}
/* imagen propia de cada fase */
.mphase__img{
display:block;width:100%;height:190px;object-fit:cover;object-position:center 28%;
filter:grayscale(.2) brightness(.84) contrast(1.06) saturate(.97);
transition:filter .5s;
}
.mphase.is-active .mphase__img{filter:grayscale(0) brightness(1) contrast(1.06) saturate(1.02)}
.mphase::before{
content:"";position:absolute;left:0;right:0;top:0;height:190px;z-index:2;pointer-events:none;
background:linear-gradient(180deg,rgba(7,9,10,.18) 0%,transparent 34%,rgba(9,12,13,.94) 100%);
}
/* número grande sobre la imagen */
.mphase__num{
position:absolute;left:18px;top:128px;margin:0;z-index:3;
font-size:54px;line-height:.85;color:var(--white);
text-shadow:0 6px 22px rgba(0,0,0,.78);
}
.mphase.is-active .mphase__num{color:var(--green-bright)}
/* etiqueta FASE_00x en la esquina superior de la imagen */
.mphase__tag{
position:absolute;top:14px;left:18px;right:auto;margin:0;z-index:3;
color:var(--green-bright);font-size:10px;letter-spacing:.18em;
background:rgba(6,9,11,.5);padding:5px 9px;border:1px solid rgba(56,176,242,.32);
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.mphase.is-active .mphase__tag{color:var(--green-bright)}
/* línea-acento + texto en el área de contenido */
.mphase__bar{margin:18px 0 0 18px;opacity:1;width:34px}
.mphase.is-active .mphase__bar{width:50px}
.mphase__txt{display:block;padding:12px 18px 22px}
.mphase h4{font-size:19px;margin-bottom:9px}
.mphase p{font-size:14px;line-height:1.6;margin-bottom:0;color:var(--gray-light)}
}
/* ============================================================
DIFERENCIADORES (section 05) · EDITORIAL TÁCTICO
============================================================ */
.dif{
position:relative;
padding: clamp(64px, 7vw, 104px) var(--pad) clamp(40px, 5vw, 72px);
background:
radial-gradient(80% 70% at 50% 65%, rgba(20,42,59,.14), transparent 72%),
linear-gradient(180deg, #050607 0%, #0a0d10 55%, #050607 100%);
overflow:hidden;
}
.dif__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.dif__grid-bg{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(70% 70% at 50% 55%, #000 25%, transparent 80%);
-webkit-mask-image: radial-gradient(70% 70% at 50% 55%, #000 25%, transparent 80%);
}
.dif__noise{
position:absolute;inset:0;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
mix-blend-mode:overlay;
}
.dif > *{position:relative;z-index:2;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.dif .section-rule{padding-left:0;padding-right:0;padding-top:0}
.dif__head{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end;margin:44px 0 28px}
.dif__sub{max-width:420px;color:var(--gray-light);font-size:16px;margin:0}
@media (max-width:900px){.dif__head{grid-template-columns:1fr}}
/* ─── STAGE ─── */
.dif__stage{
position:relative;
display:grid;
grid-template-columns: 1fr clamp(300px, 30vw, 440px) 1fr;
gap: clamp(20px, 2.6vw, 48px);
align-items:center;
min-height: clamp(540px, 58vw, 760px);
margin-top: clamp(20px, 3vw, 44px);
}
/* imagen central compuesta (texto + equipo) */
.dif__hero{
position:absolute;inset:0;z-index:2;
display:flex;align-items:center;justify-content:center;
pointer-events:none;
overflow:visible;
}
.dif__hero-img{
width:min(116%, 1320px);
max-width:none;height:auto;
filter: drop-shadow(0 34px 90px rgba(0,0,0,.62));
}
/* portrait hero shown only on phones (see responsive block) */
.dif__hero-img-mobile{display:none}
/* ─── FIGURE ─── */
.dif__figure{
position:relative;z-index:6;
pointer-events:none;
align-self:stretch;
display:flex;align-items:flex-start;justify-content:center;
}
.dif__reticle{
display:none;
}
@keyframes difGlow{0%,100%{opacity:.7}50%{opacity:1}}
.dif__ring{
position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
border-radius:50%;pointer-events:none;z-index:1;
}
.dif__ring--a{
width:min(560px,128%);aspect-ratio:1;
border:1px dashed rgba(255,255,255,.12);
animation: spin 70s linear infinite;
}
.dif__ring--a::before{
content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);
box-shadow:0 0 10px rgba(255,255,255,.4);
}
.dif__ring--b{
width:min(420px,98%);aspect-ratio:1;
border:1px solid rgba(255,255,255,.08);
animation: spin 52s linear infinite reverse;
}
.dif__beam{
display:none;
}
.dif__plinth{
display:none;
position:absolute;left:50%;bottom:13%;transform:translateX(-50%);
width:84%;height:56px;z-index:1;
background:
radial-gradient(60% 100% at 50% 0, rgba(255,255,255,.10), transparent 70%);
border-top:1px solid rgba(255,255,255,.16);
border-radius:50%;
box-shadow: 0 0 40px -10px rgba(0,0,0,.6);
}
.dif__img{
position:relative;z-index:2;
width:190% !important;max-width:none;height:auto !important;
aspect-ratio:16 / 10;object-fit:cover;object-position:center 32%;
filter:
grayscale(.32) contrast(1.1) brightness(1.02)
drop-shadow(0 24px 40px rgba(0,0,0,.7));
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 14%, #000 90%, transparent 100%);
-webkit-mask-composite:source-in;
mask-composite:intersect;
transform: translateY(56%);
transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.dif__figure:hover .dif__img{
filter:
grayscale(.12) contrast(1.14) brightness(1.06)
drop-shadow(0 24px 44px rgba(0,0,0,.75));
transform: translateY(54%);
}
.dif__scan{
position:absolute;left:50%;top:0;transform:translateX(-50%);
width:120%;height:100%;z-index:3;pointer-events:none;
background: linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent);
height:2px;top:10%;opacity:.4;
animation: difScan 4.5s ease-in-out infinite;
}
@keyframes difScan{
0%{top:8%;opacity:0}
20%{opacity:.7}
80%{opacity:.7}
100%{top:88%;opacity:0}
}
.dif__tag{
position:absolute;z-index:4;
font-size:9px;letter-spacing:.3em;color:var(--gray-mid);
display:inline-flex;align-items:center;gap:8px;
}
.dif__tag::before{content:"";width:14px;height:1px;background:var(--green-bright)}
.dif__tag--tl{top:8%;left:-6%}
.dif__tag--br{bottom:16%;right:-6%}
/* ─── SIDE COLUMNS · editorial index (no cards) ─── */
.dif__col{
position:relative;z-index:4;
display:flex;flex-direction:column;
gap: clamp(22px, 2.4vw, 40px);
padding: 8px 0;
}
/* vertical spine */
.dif__col::before{
content:"";position:absolute;top:6px;bottom:6px;width:1px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,.18) 12%, rgba(255,255,255,.18) 88%, transparent);
}
.dif__col--left::before{right:0}
.dif__col--right::before{left:0}
.dif__col--left{grid-column:1}
.dif__col--right{grid-column:3}
.ditem{
--mc:#38B0F2;
position:relative;
display:block;
padding: 0 26px;
transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.ditem--r{text-align:right}
/* node on the spine */
.ditem::before{
content:"";position:absolute;top:7px;
width:9px;height:9px;border:1px solid var(--mc);
background:var(--bg-0);
transform: rotate(45deg);
transition: background .3s, box-shadow .3s, transform .4s;
}
.ditem--l::before{right:-4.5px}
.ditem--r::before{left:-4.5px}
.ditem:hover::before{
background:var(--mc);
box-shadow:0 0 14px var(--mc);
transform: rotate(45deg) scale(1.15);
}
/* big ghost index numeral */
.ditem__idx{
display:block;
font-family:var(--f-display);font-weight:300;
font-size: clamp(40px, 4vw, 62px);line-height:.85;
letter-spacing:-.04em;
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.22);
text-stroke: 1px rgba(255,255,255,.22);
margin-bottom:6px;
transition: -webkit-text-stroke-color .35s, color .35s;
}
.ditem:hover .ditem__idx{
color: var(--mc);
-webkit-text-stroke-color: transparent;
}
/* title with measure line */
.ditem__body h4{
position:relative;
margin:0 0 10px;font-family:var(--f-display);font-weight:600;
font-size: clamp(15px, 1.35vw, 19px);letter-spacing:.05em;
color:var(--white);text-transform:uppercase;line-height:1.08;
padding-bottom:10px;
}
.ditem__body h4::after{
content:"";position:absolute;bottom:0;height:1px;width:34px;
background: var(--mc);
box-shadow:0 0 8px color-mix(in oklab, var(--mc) 70%, transparent);
transition: width .4s;
}
.ditem--l .ditem__body h4::after{left:0}
.ditem--r .ditem__body h4::after{right:0}
.ditem:hover .ditem__body h4::after{width:64px}
.ditem__body p{
margin:0;color:var(--gray-light);font-size:13px;line-height:1.6;
max-width:34ch;
}
.ditem--r .ditem__body p{margin-left:auto}
.ditem:hover{transform:translateX(6px)}
.ditem--r:hover{transform:translateX(-6px)}
/* hover connector reaching toward figure */
.ditem__tick{
position:absolute;top:14px;
width:0;height:1px;background:linear-gradient(90deg,var(--mc),transparent);
box-shadow:0 0 8px var(--mc);opacity:0;
transition: width .4s, opacity .4s;
}
.ditem--l .ditem__tick{right:-4px}
.ditem--r .ditem__tick{left:-4px;background:linear-gradient(270deg,var(--mc),transparent)}
.ditem:hover .ditem__tick{width:28px;opacity:.9}
/* item 06 — subtle highlight, still no card */
.ditem--seal .ditem__idx{
-webkit-text-stroke-color: rgba(56,176,242,.45);
text-stroke-color: rgba(56,176,242,.45);
}
/* ─── SPECS FOOTER ─── */
.dif__specs{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
margin-top: clamp(4px, 1vw, 16px);
padding-top:20px;border-top:1px solid rgba(255,255,255,.08);
color:var(--gray-mid);font-size:9.5px;letter-spacing:.3em;
}
.dif__specs-dot{color:var(--green-bright);font-size:7px}
/* ─── responsive ─── */
@media (max-width:1040px){
.dif__stage{grid-template-columns:1fr;gap:clamp(18px,5vw,30px);min-height:0}
/* both index columns drop into the single track instead of a phantom 3rd one */
.dif__col--left,.dif__col--right{grid-column:1}
.dif__hero{position:relative;inset:auto;order:-1;margin:0 auto;width:100%}
/* swap the wide desktop composite for the dedicated 9:16 portrait */
.dif__hero-img{display:none}
.dif__hero-img-mobile{
display:block;
width:min(86%, 380px);height:auto;margin:0 auto;
filter: drop-shadow(0 24px 64px rgba(0,0,0,.6));
}
.dif__ring{display:none}
/* continuous editorial list 01–06 */
.dif__col{gap:clamp(24px,6vw,36px);padding:4px 0}
.dif__col--left::before,.dif__col--right::before{right:auto;left:0;opacity:.6}
.ditem, .ditem--r{text-align:left;padding:0 0 0 26px}
.ditem__body p{max-width:46ch}
.ditem--l::before,.ditem--r::before{left:-4.5px;right:auto}
.ditem--l .ditem__body h4::after,.ditem--r .ditem__body h4::after{left:0;right:auto}
.ditem--r .ditem__body p{margin-left:0}
.ditem--r:hover{transform:translateX(6px)}
.dif__tag{display:none}
}
@media (max-width:560px){
/* ─── DIFERENCIADORES · teléfono: imagen grande a sangre + índice limpio ─── */
.dif{padding-left:20px;padding-right:20px;padding-top:10px;padding-bottom:48px}
.dif__head{margin:0 0 6px}
.dif__sub{font-size:14.5px}
.dif__stage{gap:18px;margin-top:0}
/* imagen vertical — a sangre, justo debajo del texto (sin solaparlo) */
.dif__hero{order:-1;margin:-2px calc(var(--pad) * -1) -2px;width:auto}
.dif__hero-img{display:none}
.dif__hero-img-mobile{
display:block;width:100%;max-width:560px;margin:0 auto;
filter:drop-shadow(0 26px 70px rgba(0,0,0,.6));
}
/* índice editorial 01–06 con divisores limpios */
.dif__col{gap:0;padding:0}
.dif__col::before{display:none}
.ditem,.ditem--r{
text-align:left;padding:17px 0 17px 52px;
border-top:1px solid rgba(255,255,255,.09);
}
.dif__col--left .ditem:first-child{border-top:0}
.ditem::before{display:none}
.ditem__idx{
position:absolute;left:0;top:18px;margin:0;
font-size:26px;line-height:1;font-weight:600;
color:var(--mc);-webkit-text-stroke:0;text-stroke:0;
}
.ditem--seal .ditem__idx{-webkit-text-stroke:0}
.ditem__body h4{font-size:16px;padding-bottom:9px;margin-bottom:9px}
.ditem__body h4::after,.ditem--l .ditem__body h4::after,.ditem--r .ditem__body h4::after{width:30px;left:0;right:auto}
.ditem__body p{font-size:13.5px;line-height:1.6;max-width:none;margin-left:0}
.dif__specs{gap:10px;font-size:9px;margin-top:18px}
}
/* ============================================================ EXPERIENCIA (section 06) */
.exp{
padding:80px var(--pad) 120px;
background:var(--bg-1);
border-top:1px solid rgba(255,255,255,.05);
}
.exp .section-rule{padding-top:0}
.exp__wrap{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr 1fr;gap:60px;
margin-top:48px;align-items:start;
}
@media (max-width:980px){.exp__wrap{grid-template-columns:1fr}}
.exp__copy p{color:var(--gray-light);max-width:480px;font-size:16px}
.exp__pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.pill{
border:1px solid rgba(255,255,255,.1);padding:8px 14px;
color:var(--white-2);background:rgba(255,255,255,.02);
}
.pill:hover{border-color:var(--green-bright);color:var(--white)}
.exp__logos-label, .exp__logos-note{display:block;color:var(--gray-mid);margin-bottom:18px}
.exp__logos-note{margin-top:18px;margin-bottom:0;color:var(--gray-mid);opacity:.6;font-size:10px}
.exp__logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)}
.logo-slot{
aspect-ratio: 16 / 7;
background:var(--bg-2);
display:flex;align-items:center;justify-content:center;
color:var(--gray-mid);
transition:background .25s, color .25s;
}
.logo-slot:hover{background:var(--bg-blue);color:var(--white-2)}
/* ============================================================ CTA / CONTACTO (section 07) */
.cta{
position:relative;
padding:120px var(--pad) 120px;
overflow:hidden;
isolation:isolate;
border-top:1px solid rgba(255,255,255,.05);
}
.cta__bg{position:absolute;inset:0;z-index:-1}
.cta__bg-mobile{display:none}
.cta__bg img{
width:100%;height:100%;object-fit:cover;object-position:center 40%;
filter:grayscale(.45) brightness(.55) contrast(1.1) saturate(.8);
}
.cta__overlay{
position:absolute;inset:0;
background:
radial-gradient(90% 90% at 50% 50%, transparent, rgba(5,6,7,.7) 85%, rgba(5,6,7,.96)),
linear-gradient(180deg, rgba(5,6,7,.5), rgba(5,6,7,.15) 40%, rgba(5,6,7,.7));
}
.cta__grid{
position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;
background-image:
linear-gradient(to right, rgba(182,189,194,.2) 1px, transparent 1px),
linear-gradient(to bottom, rgba(182,189,194,.2) 1px, transparent 1px);
background-size:120px 120px;
mask-image:radial-gradient(60% 60% at 50% 50%, #000 30%, transparent 100%);
}
.cta__wrap{max-width:1100px;margin:0 auto;position:relative}
.cta__kicker{
display:inline-flex;align-items:center;gap:10px;color:var(--green-bright);margin-bottom:32px;
}
.cta__title{
font-family:var(--f-display);font-weight:600;
font-size:clamp(40px, 6vw, 88px);line-height:.95;letter-spacing:-.005em;
color:var(--white);margin:0 0 24px;text-transform:uppercase;
}
.cta__title em{
font-style:normal;color:var(--green-bright);
}
.cta__sub{max-width:560px;color:var(--gray-light);font-size:17px;margin:0 0 40px}
.cta__panel{
border:1px solid rgba(255,255,255,.1);
background:linear-gradient(180deg, rgba(20,23,25,.6), rgba(5,6,7,.7));
backdrop-filter:blur(8px);
padding:32px;
}
.cta__row{display:flex;gap:14px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:28px}
.cta__contacts{
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.cta__contacts > div{display:flex;flex-direction:column;gap:8px}
.cta__contacts span{color:var(--gray-mid)}
.cta__contacts p{margin:0;color:var(--white);font-size:15px;font-weight:500}
@media (max-width:760px){.cta__contacts{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.cta__contacts{grid-template-columns:1fr}}
@media (max-width:560px){
/* teléfono: imagen de fondo dedicada (retrato) */
.cta__bg-desktop{display:none}
.cta__bg-mobile{display:block}
.cta__bg-mobile{object-position:center 30%}
}
/* ============================================================ FOOTER */
.foot{
position:relative;background:#040506;overflow:hidden;isolation:isolate;
padding:0 var(--pad) 30px;
}
/* ── FX layers ── */
.foot__fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.foot__gridbg{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(56,176,242,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(56,176,242,.05) 1px, transparent 1px);
background-size:62px 62px;
-webkit-mask: radial-gradient(120% 92% at 50% 26%, #000 28%, transparent 74%);
mask: radial-gradient(120% 92% at 50% 26%, #000 28%, transparent 74%);
}
.foot__rings{
position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
width:min(1100px,150vw);aspect-ratio:1;border-radius:50%;
background: repeating-radial-gradient(circle at center, transparent 0 78px, rgba(56,176,242,.05) 79px 80px);
opacity:.55;
}
.foot__scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px);mix-blend-mode:overlay}
.foot__vignette{position:absolute;inset:0;background:radial-gradient(78% 58% at 50% 2%, rgba(20,42,59,.22), transparent 58%)}
.foot__hairline{
position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
background:linear-gradient(90deg, transparent, var(--green-bright) 50%, transparent);
opacity:.85;
}
/* ── transmission ticker ── */
.foot__ticker{
position:relative;z-index:4;overflow:hidden;
border-bottom:1px solid rgba(255,255,255,.06);
padding:14px 0;margin:0 calc(var(--pad) * -1);
}
.foot__ticker-track{
display:inline-flex;align-items:center;gap:28px;white-space:nowrap;
color:var(--gray-light);font-size:12px;letter-spacing:.3em;
animation:footTick 40s linear infinite;will-change:transform;
}
.foot__ticker-track i{color:var(--green-bright);font-size:9px;font-style:normal}
@keyframes footTick{to{transform:translateX(-50%)}}
/* ── centerpiece stage ── */
.foot__stage{
position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
min-height:min(70vh,620px);
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:90px 0 56px;text-align:center;
}
.foot__ghost{
position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);z-index:0;
font-family:var(--f-display);font-weight:700;
font-size:clamp(150px,33vw,500px);line-height:.8;letter-spacing:.02em;
color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.055);
pointer-events:none;user-select:none;white-space:nowrap;
}
.foot__badge{
position:relative;z-index:2;width:clamp(230px,30vw,370px);aspect-ratio:1;
display:flex;align-items:center;justify-content:center;
opacity:0;will-change:transform,opacity;
}
.foot__badge-img{
width:100%;height:auto;display:block;
filter:drop-shadow(0 30px 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(56,176,242,.14));
animation:footFloat 7s ease-in-out infinite;
}
.foot__badge-glow{
position:absolute;inset:6%;z-index:-1;border-radius:50%;
background:radial-gradient(circle, rgba(56,176,242,.24), transparent 62%);
filter:blur(28px);animation:footGlow 4.5s ease-in-out infinite;
}
@keyframes footFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes footGlow{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.12)}}
.foot__hud{
position:absolute;z-index:3;font-family:var(--f-mono);
font-size:9px;letter-spacing:.28em;color:var(--green-bright);opacity:.78;white-space:nowrap;
}
.foot__hud--tl{top:4%;left:-8%}
.foot__hud--tr{top:4%;right:-8%}
.foot__hud--bl{bottom:4%;left:-6%}
.foot__hud--br{bottom:4%;right:-6%}
@media (max-width:680px){.foot__hud{display:none}}
.foot__claim{
position:relative;z-index:2;margin:38px 0 0;
font-family:var(--f-display);font-weight:600;text-transform:uppercase;
font-size:clamp(20px,3vw,40px);line-height:1.06;letter-spacing:.02em;color:var(--white);
}
.foot__claim em{font-style:normal;color:var(--green-bright)}
/* ── link rail · directorio operativo + consola ── */
.foot__rail{
position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(36px,5vw,84px);align-items:start;
padding:54px 0 8px;border-top:1px solid rgba(255,255,255,.07);
}
@media (max-width:860px){.foot__rail{grid-template-columns:1fr;gap:44px}}
/* section heads shared */
.foot__dir-head,.foot__console-head{
display:flex;align-items:center;gap:10px;
font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gray-mid);
padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.06);
}
.foot__h-dot{width:6px;height:6px;background:var(--green-bright);box-shadow:0 0 8px var(--green-bright);flex:none}
.foot__dir-count{margin-left:auto;color:var(--gray-blue);letter-spacing:.2em}
/* registry rows */
.foot__reg{list-style:none;margin:0;padding:0}
.foot__reg-row + .foot__reg-row{border-top:1px solid rgba(255,255,255,.05)}
.foot__reg-row a{
position:relative;display:grid;align-items:center;gap:16px;
grid-template-columns:auto auto 1fr auto auto;
padding:14px 6px 14px 14px;color:var(--white-2);transition:color .22s;
}
/* color tick = vertical's accent, slides in on hover */
.foot__reg-row a::before{
content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
background:var(--u);opacity:0;transform:scaleY(.4);transform-origin:center;
transition:opacity .22s,transform .22s;
}
.foot__reg-row a:hover::before{opacity:1;transform:scaleY(1)}
.foot__reg-i{font-size:10.5px;letter-spacing:.12em;color:var(--gray-blue);transition:color .22s}
.foot__reg-tick{width:7px;height:7px;border:1px solid var(--u);background:transparent;flex:none;transition:background .22s,box-shadow .22s}
.foot__reg-name{font-size:15px;letter-spacing:.005em;white-space:nowrap}
.foot__reg-tag{
justify-self:end;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
color:var(--gray-mid);opacity:.7;transition:color .22s,opacity .22s;
}
.foot__reg-arr{color:var(--gray-blue);opacity:0;transform:translate(-4px,4px);transition:opacity .22s,transform .22s,color .22s}
.foot__reg-row a:hover{color:var(--white)}
.foot__reg-row a:hover .foot__reg-i{color:var(--u)}
.foot__reg-row a:hover .foot__reg-tick{background:var(--u);box-shadow:0 0 9px -1px var(--u)}
.foot__reg-row a:hover .foot__reg-tag{color:var(--white-2);opacity:1}
.foot__reg-row a:hover .foot__reg-arr{opacity:1;transform:translate(0,0);color:var(--u)}
@media (max-width:520px){
.foot__reg-row a{grid-template-columns:auto auto 1fr auto;gap:12px}
.foot__reg-tag{display:none}
}
/* secondary nav strip */
.foot__nav{
display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:26px;padding-top:22px;
border-top:1px solid rgba(255,255,255,.06);
}
.foot__nav a{
position:relative;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--gray-mid);transition:color .2s;
}
.foot__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--green-bright);transition:right .25s}
.foot__nav a:hover{color:var(--green-bright)}
.foot__nav a:hover::after{right:0}
/* contact console */
.foot__console{
position:relative;padding:30px 32px 32px;
border:1px solid rgba(56,176,242,.16);
background:linear-gradient(180deg, rgba(20,42,59,.18), rgba(10,16,24,.06));
}
.foot__console-status{margin-left:auto;color:var(--green-bright);font-size:9px;letter-spacing:.22em}
.foot__bigmail{
display:block;margin:22px 0 24px;
font-family:var(--f-display);font-weight:500;letter-spacing:.005em;line-height:1.05;
font-size:clamp(21px,2.3vw,31px);color:var(--white)!important;transition:color .2s;
}
.foot__bigmail:hover{color:var(--green-bright)!important}
.foot__meta{margin:0 0 26px;display:flex;flex-direction:column;gap:0}
.foot__meta-row{
display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:baseline;
padding:11px 0;border-top:1px solid rgba(255,255,255,.06);
}
.foot__meta-row:last-child{border-bottom:1px solid rgba(255,255,255,.06)}
.foot__meta dt{font-size:9px;letter-spacing:.26em;color:var(--gray-blue)}
.foot__meta dd{margin:0;font-size:11.5px;letter-spacing:.06em;color:var(--white-2)}
.foot__cta{
display:flex;align-items:center;justify-content:space-between;width:100%;
padding:0 0 0 20px;border:1px solid rgba(56,176,242,.4);color:var(--green-bright)!important;
font-size:11px;letter-spacing:.24em;text-transform:uppercase;
transition:background .25s,color .25s,box-shadow .25s,border-color .25s;
}
.foot__cta-arr{
display:flex;align-items:center;justify-content:center;width:48px;align-self:stretch;
border-left:1px solid rgba(56,176,242,.4);transition:background .25s,border-color .25s;
}
.foot__cta-label{padding:15px 0}
.foot__cta:hover{background:rgba(56,176,242,.07);box-shadow:0 0 34px -10px var(--green-bright);border-color:var(--green-bright)}
.foot__cta:hover .foot__cta-arr{background:var(--green-bright);color:#06121b;border-color:var(--green-bright)}
.foot__bottom{
position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding-top:24px;
border-top:1px solid rgba(255,255,255,.06);
display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--gray-mid);
}
.foot__bottom-mid{display:flex;align-items:center;gap:8px}
.foot__zk{color:var(--white-2);transition:color .2s}
.foot__zk:hover{color:var(--green-bright)}
@media (max-width:600px){.foot__bottom{flex-direction:column;gap:10px;text-align:center}}
/* ============================================================ SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:translateY(0)}
/* clip reveal for big blocks */
.clip-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.7,.0,.2,1)}
.clip-reveal.is-in{clip-path:inset(0 0 0 0)}
/* line-draw for hairlines + step rules */
.step__rule, .dcard__mark{transform-origin:left center;transform:scaleX(0);transition:transform .9s .15s cubic-bezier(.7,.0,.2,1)}
.is-in .step__rule, .is-in .dcard__mark, .dcard:hover .dcard__mark{transform:scaleX(1)}
/* word-by-word title stagger */
.title-words .w{display:inline-block;opacity:0;transform:translateY(.5em) skewY(2deg);transition:opacity .7s, transform .7s}
.title-words .w.is-in{opacity:1;transform:translateY(0) skewY(0)}
/* em uses background-clip:text — keep its inline flow so the gradient renders */
.title-words em.w, .title-words i.w{display:inline}
/* list stagger */
.stagger > *{opacity:0;transform:translateX(-12px);transition:opacity .6s, transform .6s}
.stagger.is-in > *{opacity:1;transform:translateX(0)}
.stagger.is-in > *:nth-child(1){transition-delay:.05s}
.stagger.is-in > *:nth-child(2){transition-delay:.12s}
.stagger.is-in > *:nth-child(3){transition-delay:.19s}
.stagger.is-in > *:nth-child(4){transition-delay:.26s}
.stagger.is-in > *:nth-child(5){transition-delay:.33s}
.stagger.is-in > *:nth-child(6){transition-delay:.40s}
/* ============================================================ MICRO ANIMATIONS */
/* scanline barre el hero cada cierto tiempo */
.hero__scan::after{
content:"";position:absolute;left:0;right:0;top:-10%;height:14%;
background:linear-gradient(180deg, transparent, rgba(56,176,242,.06) 50%, transparent);
animation:scanSweep 7s linear infinite;
mix-blend-mode:screen;
}
@keyframes scanSweep{
0%{transform:translateY(0)}
100%{transform:translateY(820%)}
}
/* marquee técnico abajo del nav (tagstrip) */
.hero__tagstrip{justify-content:flex-start;gap:48px}
.hero__tagstrip .marquee{
display:inline-flex;gap:48px;animation:marquee 38s linear infinite;
flex-shrink:0;
}
@keyframes marquee{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* botón shimmer */
.btn{overflow:hidden;isolation:isolate}
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
transform:translateX(-100%);
transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::before{transform:translateX(100%)}
/* chevron magnetic en units */
.unit__chev{transition:color .25s, transform .35s cubic-bezier(.2,.7,.2,1)}
.unit:hover .unit__chev{transform:translateX(8px)}
/* card halo following cursor (set via JS via --mx --my) */
.dcard{
--mx:50%; --my:50%;
}
.dcard::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(180px 180px at var(--mx) var(--my), rgba(56,176,242,.12), transparent 65%);
opacity:0;transition:opacity .35s;
}
.dcard:hover::before{opacity:1}
.dcard__num{transition:transform .5s cubic-bezier(.2,.7,.2,1), color .3s}
.dcard:hover .dcard__num{transform:translateY(-4px);color:var(--green-bright)}
/* logo-slot subtle scan */
.logo-slot{position:relative;overflow:hidden}
.logo-slot::before{
content:"";position:absolute;inset:0;
background:linear-gradient(110deg, transparent 30%, rgba(56,176,242,.08) 50%, transparent 70%);
transform:translateX(-100%);transition:transform .8s;
}
.logo-slot:hover::before{transform:translateX(100%)}
/* nav links underline already exists. Add brand spin on hover */
.nav__mark{transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .4s}
.nav__brand:hover .nav__mark{transform:scale(1.04);filter:drop-shadow(0 0 10px rgba(56,176,242,.45))}
/* frame: animated grain overlay + slow zoom */
.frame{isolation:isolate}
.frame::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;opacity:.12;
animation:grainShift 1.6s steps(6) infinite;
}
@keyframes grainShift{
0%{transform:translate(0,0)}
20%{transform:translate(-2%,1%)}
40%{transform:translate(1%,-1%)}
60%{transform:translate(-1%,2%)}
80%{transform:translate(2%,-2%)}
100%{transform:translate(0,0)}
}
/* eco panel image — slow ken-burns when active */
.eco__img.is-active{animation:kenburns 14s ease-out forwards}
@keyframes kenburns{
from{transform:scale(1.0) translateX(0)}
to{transform:scale(1.08) translateX(-1%)}
}
/* eco progress arc on active unit */
.unit.is-active{position:relative}
.unit.is-active::after{
content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
background:var(--unit);
animation:ecoTick 5s linear forwards;
}
@keyframes ecoTick{from{width:0}to{width:100%}}
/* hud code blink */
.eco__hud-top .dot-green{animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
/* hero title — restore static two-tone (white top / green bottom) */
.hero__title .dot-accent{
animation:dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse{
0%,100%{box-shadow:0 0 24px var(--green-bright);transform:scale(1)}
50%{box-shadow:0 0 36px var(--green-bright);transform:scale(1.2)}
}
/* hero stats number tick — bump on enter */
.stat__num{display:inline-flex;align-items:baseline}
/* diagram nodes — gentle float */
.diag__node{animation:floaty 6s ease-in-out infinite}
.diag__node:nth-child(2){animation-delay:.0s}
.diag__node:nth-child(3){animation-delay:.7s}
.diag__node:nth-child(4){animation-delay:1.4s}
.diag__node:nth-child(5){animation-delay:2.1s}
.diag__node:nth-child(6){animation-delay:2.8s}
.diag__node:nth-child(7){animation-delay:3.5s}
@keyframes floaty{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-4px)}
}
.diag__center{
animation:pulseEdge 3.6s ease-in-out infinite;
}
@keyframes pulseEdge{
0%,100%{box-shadow:0 0 0 0 rgba(56,176,242,.0), inset 0 0 0 0 rgba(56,176,242,0)}
50%{box-shadow:0 0 24px -6px rgba(56,176,242,.5), inset 0 0 12px -4px rgba(56,176,242,.25)}
}
/* metodo steps — number translate on hover */
.metodo__steps li{overflow:hidden}
.step__num{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.metodo__steps li:hover .step__num{transform:translateX(8px)}
.metodo__steps li::after{
content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--green-bright);
transition:width .5s cubic-bezier(.2,.7,.2,1);
}
.metodo__steps li:hover::after{width:100%}
/* CTA title — letter fade with gradient sweep */
.cta__title em{
background:linear-gradient(90deg, var(--green-bright), var(--white) 50%, var(--green-bright));
background-size:200% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:sweep 4s linear infinite;
}
@keyframes sweep{
from{background-position:0% 0%}
to{background-position:-200% 0%}
}
/* footer hairline pulse */
.foot__hairline{animation:railPulse 3.8s ease-in-out infinite}
@keyframes railPulse{
0%,100%{opacity:.55}
50%{opacity:1}
}
/* nav status pulse already in place */
/* scroll progress */
.scroll-progress{
position:fixed;left:0;top:0;height:2px;width:0;
background:linear-gradient(90deg, transparent, var(--green-bright));
z-index:300;pointer-events:none;transition:width .08s linear;
}
/* floating coordinate ticker (bottom-right of hero) */
.hero__ticker{
position:absolute;right:18px;bottom:18px;z-index:4;
display:flex;flex-direction:column;align-items:flex-end;gap:4px;
font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-mid);
}
.hero__ticker .ticker-line{display:flex;gap:8px;align-items:center}
.hero__ticker .ticker-line strong{color:var(--green-bright);font-weight:500}
/* parallax helpers */
.parallax{will-change:transform}
/* unit hover/active — bar grows */
.unit::before{transform:scaleY(0);transform-origin:top}
.unit:hover::before, .unit.is-active::before{transform:scaleY(1);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.unit::before{opacity:1;transition:transform .25s}
/* eco panel name change ripple */
.eco__name{position:relative;display:inline-block}
.eco__name.swap{animation:swapIn .55s cubic-bezier(.2,.7,.2,1)}
@keyframes swapIn{
from{opacity:0;transform:translateY(8px) skewY(2deg);letter-spacing:.18em}
to {opacity:1;transform:translateY(0) skewY(0); letter-spacing:.04em}
}
.eco__bar{transform-origin:left center;animation:barIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* capa list - hover effect more punchy already done */
/* reduce motion */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
}
/* ============================================================ STRIP (image marquee between sections) */
.strip{
position:relative;
padding:40px 0 60px;
background:var(--bg-0);
border-top:1px solid rgba(255,255,255,.05);
border-bottom:1px solid rgba(255,255,255,.05);
overflow:hidden;
}
.strip .section-rule{padding-left:var(--pad);padding-right:var(--pad);margin-bottom:32px}
.strip__track{
width:100%;
overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip__row{
display:inline-flex;gap:18px;padding:0 18px;
animation:stripScroll 55s linear infinite;
will-change:transform;
}
.strip:hover .strip__row{animation-play-state:paused}
@keyframes stripScroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.shot{
position:relative;flex:0 0 auto;
width:340px;height:230px;
overflow:hidden;
border:1px solid rgba(255,255,255,.06);
background:var(--bg-2);
margin:0;
isolation:isolate;
}
.shot img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(.2) brightness(.92) contrast(1.05) saturate(.9);
transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.shot:hover img{transform:scale(1.06);filter:grayscale(0) brightness(1) contrast(1.05) saturate(1)}
.shot figcaption{
position:absolute;left:12px;bottom:12px;right:12px;z-index:2;
display:flex;justify-content:space-between;color:var(--white-2);
}
.shot::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(5,6,7,.75));
pointer-events:none;z-index:1;
}
@media (max-width:760px){
.shot{width:240px;height:170px}
}
/* ============================================================ GALLERY */
.gallery{
padding:80px var(--pad) 120px;
max-width:var(--maxw);margin:0 auto;
background:var(--bg-0);
border-top:1px solid rgba(255,255,255,.05);
}
.gallery .section-rule{padding-left:0;padding-right:0;padding-top:0}
.gallery__head{margin:48px 0 48px;display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end}
.gallery__sub{max-width:440px;color:var(--gray-light);font-size:16px;margin:0}
@media (max-width:900px){.gallery__head{grid-template-columns:1fr}}
.gallery__grid{
display:grid;
grid-template-columns:repeat(6, 1fr);
grid-auto-rows: 230px;
grid-auto-flow: dense;
gap:14px;
}
.gtile{
position:relative;margin:0;overflow:hidden;
border:1px solid rgba(255,255,255,.07);
background:var(--bg-2);
isolation:isolate;
cursor:pointer;
grid-column: span 2;
grid-row: span 1;
}
.gtile--feat{
grid-column: span 2;
grid-row: span 2;
}
.gtile img{
width:100%;height:100%;object-fit:cover;
filter:grayscale(.15) brightness(.9) contrast(1.05) saturate(.95);
transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.gtile:hover img{
transform:scale(1.06);
filter:grayscale(0) brightness(1.02) contrast(1.06) saturate(1.05);
}
.gtile::after{
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg, transparent 50%, rgba(5,6,7,.75));
pointer-events:none;
}
.gtile figcaption{
position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
display:flex;justify-content:space-between;color:var(--white-2);
opacity:.85;transition:opacity .25s;
}
.gtile:hover figcaption{opacity:1;color:var(--white)}
@media (max-width:1024px){
.gallery__grid{
grid-template-columns:repeat(4, 1fr);
grid-auto-rows:200px;
}
}
@media (max-width:640px){
.gallery__grid{
grid-template-columns:repeat(2, 1fr);
grid-auto-rows:160px;
gap:10px;
}
.gtile, .gtile--feat{ grid-column: span 1; grid-row: span 1; }
.gtile--feat{ grid-column: span 2; }
}
/* ============================================================ LIGHTBOX */
.lightbox{
position:fixed;inset:0;z-index:400;
display:flex;align-items:center;justify-content:center;
padding:clamp(20px,5vw,72px);
background:rgba(4,5,6,.94);
backdrop-filter:blur(8px);
opacity:0;visibility:hidden;
transition:opacity .3s ease, visibility .3s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{
position:relative;margin:0;
max-width:min(1100px,92vw);max-height:84vh;
display:flex;align-items:center;justify-content:center;
transform:scale(.96);transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.lightbox.is-open .lightbox__stage{transform:scale(1)}
.lightbox__stage img{
max-width:100%;max-height:84vh;
object-fit:contain;display:block;
border:1px solid rgba(255,255,255,.12);
filter:contrast(1.04) saturate(1.02);
}
.lightbox__stage .bracket{position:absolute;z-index:2}
.lightbox__cap{
position:absolute;left:0;right:0;bottom:0;z-index:3;
display:flex;justify-content:space-between;align-items:center;
padding:14px 16px;
color:var(--white);
background:linear-gradient(180deg, transparent, rgba(5,6,7,.85));
}
.lightbox__cap span:last-child{color:var(--accent,#38B0F2)}
.lightbox__close{
position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);z-index:5;
background:none;border:1px solid rgba(255,255,255,.18);
color:var(--white-2);padding:9px 14px;cursor:pointer;
font-size:11px;letter-spacing:.16em;transition:border-color .2s,color .2s;
}
.lightbox__close:hover{color:var(--white);border-color:rgba(255,255,255,.5)}
.lightbox__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:52px;height:52px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
color:var(--white-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
.lightbox__nav:hover{background:rgba(255,255,255,.1);color:var(--white);border-color:rgba(255,255,255,.4)}
.lightbox__nav--prev{left:clamp(12px,3vw,32px)}
.lightbox__nav--next{right:clamp(12px,3vw,32px)}
@media (max-width:640px){
.lightbox__nav{width:42px;height:42px}
.lightbox__nav--prev{left:8px}
.lightbox__nav--next{right:8px}
}
/* ============================================================ TWEAKS PANEL */
.tw{
position:fixed;right:24px;bottom:24px;z-index:300;
width:300px;
background:rgba(11,13,14,.92);
backdrop-filter:blur(10px);
border:1px solid rgba(182,189,194,.14);
padding:18px;
font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
color:var(--white-2);
display:none;
}
.tw.is-on{display:block}
.tw__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;color:var(--white)}
.tw__head span{display:flex;align-items:center;gap:8px}
.tw__close{background:none;border:1px solid rgba(255,255,255,.1);color:var(--white-2);width:24px;height:24px;cursor:pointer}
.tw__row{margin-bottom:14px;padding-bottom:12px;border-bottom:1px dashed rgba(255,255,255,.08)}
.tw__row:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.tw__label{display:block;color:var(--gray-mid);margin-bottom:8px;font-size:10px}
.tw__swatches{display:flex;gap:6px;flex-wrap:wrap}
.tw__swatch{width:28px;height:28px;border:1px solid rgba(255,255,255,.12);cursor:pointer;position:relative}
.tw__swatch.is-on::after{content:"";position:absolute;inset:-3px;border:1px solid var(--white)}
.tw__segs{display:flex;gap:4px}
.tw__seg{flex:1;padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:var(--white-2);cursor:pointer;text-align:center;font:inherit}
.tw__seg.is-on{background:var(--green-deep);border-color:var(--green-bright);color:var(--white)}
.tw__toggle{display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.tw__check{width:32px;height:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);position:relative}
.tw__check::after{content:"";position:absolute;top:1px;left:1px;width:14px;height:14px;background:var(--gray-mid);transition:transform .2s, background .2s}
.tw__check.is-on{background:var(--green-deep);border-color:var(--green-bright)}
.tw__check.is-on::after{transform:translateX(14px);background:var(--green-bright)}
/* reticle density */
body[data-reticle="dense"] .hero__grid{background-size:48px 48px;opacity:.22}
body[data-reticle="medium"] .hero__grid{background-size:80px 80px;opacity:.18}
body[data-reticle="sparse"] .hero__grid{background-size:140px 140px;opacity:.13}
/* grain toggle */
body[data-grain="off"]::after{display:none}
/* ============================================================
MATRIZ CORPORATIVA — Ecosistema (section 02) · PREMIUM HUD
============================================================ */
.matrix{
position:relative;
padding: clamp(56px, 7vw, 104px) var(--pad) clamp(64px, 8vw, 120px);
background:
radial-gradient(70% 60% at 50% 42%, rgba(20,42,59,.20), transparent 72%),
linear-gradient(180deg, #050607 0%, #0a0d10 48%, #050607 100%);
border-top:1px solid rgba(255,255,255,.05);
border-bottom:1px solid rgba(255,255,255,.05);
overflow:hidden;
}
.matrix__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.matrix__grid-bg{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(56,176,242,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(56,176,242,.045) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(62% 60% at 50% 50%, #000 28%, transparent 78%);
-webkit-mask-image: radial-gradient(62% 60% at 50% 50%, #000 28%, transparent 78%);
opacity:.5;
}
.matrix__scan{
position:absolute;inset:0;
background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
mix-blend-mode: overlay;
}
.matrix__glow{
position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
width:min(620px,70vw);height:min(620px,70vw);
background: radial-gradient(circle, rgba(56,176,242,.10), transparent 62%);
filter: blur(20px);
animation: matGlow 7s ease-in-out infinite;
}
@keyframes matGlow{0%,100%{opacity:.6}50%{opacity:1}}
.matrix > *{position:relative;z-index:2}
.matrix > .bracket{position:absolute;width:46px;height:46px;border:1px solid var(--green-bright);opacity:.55;z-index:3}
.matrix > .bracket--tl{top:20px;left:20px;border-right:0;border-bottom:0}
.matrix > .bracket--tr{top:20px;right:20px;border-left:0;border-bottom:0}
.matrix > .bracket--bl{bottom:20px;left:20px;border-right:0;border-top:0}
.matrix > .bracket--br{bottom:20px;right:20px;border-left:0;border-top:0}
.bracket.tiny{position:relative;display:inline-block;width:8px;height:8px;vertical-align:middle;border:1px solid var(--green-bright);opacity:.6}
.bracket.tiny.bracket--tl{border-right:0;border-bottom:0}
.bracket.tiny.bracket--tr{border-left:0;border-bottom:0}
/* HEADER */
.matrix__head{
max-width:var(--maxw);margin:0 auto clamp(40px, 4.5vw, 72px);
display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
.matrix__nivel{color:var(--gray-mid);font-size:10.5px;letter-spacing:.28em}
.matrix__kicker{
display:inline-flex;align-items:center;gap:14px;
color:var(--green-bright);font-size:11px;letter-spacing:.42em;
padding:8px 18px;border:1px solid rgba(56,176,242,.35);
background:rgba(20,42,59,.18);
}
.matrix__title{
font-family:var(--f-display);font-weight:600;
font-size:clamp(42px, 6vw, 88px);line-height:.95;
letter-spacing:-.005em;color:var(--white);
margin:6px 0 4px;text-transform:uppercase;
}
.matrix__title em{font-style:normal;color:var(--green-bright)}
.matrix__title em::after{
content:"";display:inline-block;width:.16em;height:.16em;
background:var(--green-bright);margin-left:.12em;vertical-align:.22em;
}
.matrix__sub{color:var(--gray-light);font-size:12px;letter-spacing:.42em;margin:0}
/* BOARD */
.matrix__board{
position:relative;
max-width:var(--maxw);margin:0 auto;
display:grid;
grid-template-columns: 1fr clamp(300px, 31vw, 440px) 1fr;
gap: clamp(26px, 3.4vw, 64px);
align-items:center;
}
.matrix__wires{
position:absolute;inset:0;width:100%;height:100%;
pointer-events:none;z-index:1;overflow:visible;
}
.matrix__col{
display:flex;flex-direction:column;
gap: clamp(18px, 2.2vw, 30px);
position:relative;z-index:2;
min-width:0;
}
/* ─── HUD UNIT CARDS ─── */
.ucard{
--mc:#94A83A;
position:relative;
display:grid;
grid-template-columns: clamp(120px, 15vw, 190px) minmax(0, 1fr);
min-height:172px;
min-width:0;
color:var(--white);
text-decoration:none;
background:
linear-gradient(135deg, rgba(20,23,25,.97), rgba(8,10,12,.98));
border:1px solid rgba(255,255,255,.07);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 16px 40px -28px rgba(0,0,0,.8);
clip-path: polygon(
0 0, calc(100% - 16px) 0, 100% 16px,
100% 100%, 16px 100%, 0 calc(100% - 16px)
);
overflow:hidden;
transition: border-color .35s, box-shadow .4s, transform .45s cubic-bezier(.2,.7,.2,1);
}
.ucard--right{grid-template-columns: minmax(0, 1fr) clamp(120px, 15vw, 190px)}
.ucard--right .ucard__media{order:2}
.ucard--right{
clip-path: polygon(
16px 0, 100% 0, 100% calc(100% - 16px),
calc(100% - 16px) 100%, 0 100%, 0 16px
);
}
.ucard:hover{
border-color: color-mix(in oklab, var(--mc) 60%, transparent);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.04),
0 24px 56px -28px color-mix(in oklab, var(--mc) 40%, black),
0 0 0 1px color-mix(in oklab, var(--mc) 22%, transparent);
}
/* left accent edge */
.ucard::after{
content:"";position:absolute;top:0;bottom:0;left:0;width:3px;
background: var(--mc);
box-shadow: 0 0 16px color-mix(in oklab, var(--mc) 80%, transparent);
opacity:.85;z-index:4;
transition: width .35s;
}
.ucard--right::after{left:auto;right:0}
.ucard:hover::after{width:5px}
/* corner ticks */
.ucard__cn{position:absolute;width:12px;height:12px;border:1px solid color-mix(in oklab, var(--mc) 70%, transparent);opacity:0;transition:opacity .3s;z-index:5}
.ucard__cn--tl{top:6px;left:6px;border-right:0;border-bottom:0}
.ucard__cn--tr{top:6px;right:6px;border-left:0;border-bottom:0}
.ucard__cn--bl{bottom:6px;left:6px;border-right:0;border-top:0}
.ucard__cn--br{bottom:6px;right:6px;border-left:0;border-top:0}
.ucard:hover .ucard__cn{opacity:.9}
/* media block */
.ucard__media{
position:relative;overflow:hidden;
background:#06070a;
}
.ucard__media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter: contrast(1.06) brightness(1) saturate(1.12);
transform: scale(1.04);
transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.ucard:hover .ucard__media img{
transform: scale(1.1);
filter: contrast(1.05) brightness(1.05) saturate(1.18);
}
/* duotone wash keyed to unit color */
.ucard__duo{
position:absolute;inset:0;z-index:1;
background:
linear-gradient(180deg, transparent 50%, rgba(6,7,10,.35));
mix-blend-mode: normal;
opacity:.5;
}
.ucard__media::after{
content:"";position:absolute;inset:0;z-index:2;
background: linear-gradient(90deg, transparent 55%, rgba(11,13,16,.92) 100%);
}
.ucard--right .ucard__media::after{
background: linear-gradient(270deg, transparent 55%, rgba(11,13,16,.92) 100%);
}
/* diagonal scan sweep on media */
.ucard__sweep{
position:absolute;inset:0;z-index:3;
background: linear-gradient(115deg, transparent 42%, color-mix(in oklab, var(--mc) 45%, transparent) 50%, transparent 58%);
transform: translateX(-120%);
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.ucard:hover .ucard__sweep{transform: translateX(120%)}
/* hex emblem — corner insignia at the media/body seam */
.ucard__hex{
position:absolute;z-index:4;
bottom:12px;right:10px;
width:40px;height:45px;
display:flex;align-items:center;justify-content:center;
color:var(--mc);
background: color-mix(in oklab, var(--mc) 14%, rgba(8,10,12,.82));
border:1px solid color-mix(in oklab, var(--mc) 55%, transparent);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
transition: background .3s, transform .4s;
}
.ucard--right .ucard__hex{right:auto;left:10px}
.ucard__hex svg{width:20px;height:20px}
.ucard:hover .ucard__hex{transform:scale(1.08); background: color-mix(in oklab, var(--mc) 24%, rgba(8,10,12,.7))}
.ucard__hex svg{filter: drop-shadow(0 0 6px color-mix(in oklab, var(--mc) 55%, transparent))}
/* body */
.ucard__body{
position:relative;z-index:3;
display:flex;flex-direction:column;justify-content:center;
gap:8px;padding: clamp(12px, 1.4vw, 20px) clamp(14px, 1.6vw, 22px);
min-width:0;
}
.ucard--right .ucard__body{align-items:flex-end;text-align:right}
.ucard__brand{
font-family:var(--f-display);font-weight:700;
font-size:13px;letter-spacing:.34em;color:var(--gray-light);
line-height:1;
}
.ucard__unit{
font-family:var(--f-display);font-weight:600;
font-size: clamp(15px, 1.55vw, 27px);line-height:1.05;
letter-spacing:.01em;color:var(--white);text-transform:uppercase;
overflow-wrap:anywhere;
}
.ucard__rail{
display:flex;align-items:center;gap:14px;
font-size:9px;letter-spacing:.22em;color:var(--gray-mid);
margin-top:2px;
}
.ucard--right .ucard__rail{flex-direction:row-reverse}
.ucard__id{color: var(--mc)}
.ucard__status{display:inline-flex;align-items:center;gap:6px;color:var(--gray-light)}
.ucard__status i{width:5px;height:5px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 7px var(--green-bright);animation: spotPulse 1.8s ease-in-out infinite}
.ucard__go{
display:inline-flex;align-items:center;gap:8px;
font-size:9.5px;letter-spacing:.26em;color:var(--mc);
margin-top:4px;opacity:.65;
transition: opacity .3s, gap .3s;
}
.ucard:hover .ucard__go{opacity:1;gap:12px}
.ucard__go svg{transition: transform .3s}
.ucard:hover .ucard__go svg{transform: translateX(3px)}
.ucard--right:hover .ucard__go svg{transform: translateX(-3px)}
/* scanbar at bottom */
.ucard__scanbar{
position:absolute;left:0;bottom:0;height:2px;width:0%;z-index:5;
background: linear-gradient(90deg, var(--mc), transparent);
box-shadow:0 0 10px var(--mc);
transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.ucard--right .ucard__scanbar{left:auto;right:0;background:linear-gradient(270deg,var(--mc),transparent)}
.ucard:hover .ucard__scanbar{width:100%}
/* connector node on the inner edge */
.ucard__node{
position:absolute;top:50%;transform:translateY(-50%);z-index:6;
width:9px;height:9px;border-radius:50%;
background:#F2F4F2;border:1px solid var(--mc);
box-shadow:0 0 12px var(--mc);
opacity:.5;transition:opacity .3s, box-shadow .3s;
}
.ucard--left .ucard__node{right:-4px}
.ucard--right .ucard__node{left:-4px}
.ucard:hover .ucard__node{opacity:1;box-shadow:0 0 18px var(--mc)}
/* ─── COMMAND CORE (circular) ─── */
.matrix__hub{
position:relative;
aspect-ratio: 1 / 1;
display:flex;align-items:center;justify-content:center;
isolation:isolate;
}
.hub__ring{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
border-radius:50%;pointer-events:none;
}
.hub__ring--dash{
width:97%;height:97%;
border:1px dashed rgba(56,176,242,.16);
animation: spin 90s linear infinite;
}
.hub__ring--ticks{
width:85%;height:85%;
background: repeating-conic-gradient(from 0deg, rgba(56,176,242,.30) 0deg .55deg, transparent .55deg 9deg);
-webkit-mask: radial-gradient(circle, transparent 0 48%, #000 48% 50%, transparent 50%);
mask: radial-gradient(circle, transparent 0 48%, #000 48% 50%, transparent 50%);
opacity:.5;animation: spin 150s linear infinite;
}
.hub__ring--rim{
width:78%;height:78%;
border:1px solid rgba(56,176,242,.24);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 44px -12px rgba(56,176,242,.28);
}
@keyframes spin{to{transform:rotate(360deg)}}
/* cardinal tick marks at N / S of the rim */
.hub__cardinal{
position:absolute;left:50%;width:1px;height:14px;
background:var(--green-bright);opacity:.55;
box-shadow:0 0 8px var(--green-bright);
}
.hub__cardinal--n{top:4%;transform:translateX(-50%)}
.hub__cardinal--s{bottom:4%;transform:translateX(-50%)}
/* the disc */
.hub__core{
position:relative;z-index:2;
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
background:transparent;
}
.hub__glow{
position:absolute;inset:16%;border-radius:50%;z-index:0;
background: radial-gradient(circle, rgba(56,176,242,.5), transparent 62%);
filter: blur(12px);
animation: hubPulse 3.6s ease-in-out infinite;
}
/* slow radar sweep wedge */
.hub__sweep{
position:absolute;inset:0;border-radius:50%;z-index:1;pointer-events:none;
background: conic-gradient(from 0deg, color-mix(in oklab, var(--green-bright) 20%, transparent) 0deg, transparent 42deg);
-webkit-mask: radial-gradient(circle, #000 0 70%, transparent 71%);
mask: radial-gradient(circle, #000 0 70%, transparent 71%);
opacity:.6;
animation: spin 6s linear infinite;
}
.matrix__hub-inner{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
width:100%;text-align:center;
}
.matrix__hub-emblem{
width:clamp(260px, 34vw, 420px);
max-width:100%;height:auto;display:block;
filter: drop-shadow(0 12px 36px rgba(0,0,0,.6));
}
.matrix__hub-eyebrow{font-size:8px;letter-spacing:.32em;color:var(--green-bright);opacity:.85}
.matrix__hub-logo{
width:clamp(34px, 4.2vw, 50px);height:auto;
filter: drop-shadow(0 0 14px rgba(56,176,242,.5));
}
.matrix__hub-title{
font-family:var(--f-display);font-weight:700;
font-size:clamp(24px, 3vw, 46px);line-height:.9;
letter-spacing:.01em;color:var(--white);margin:2px 0 0;
display:flex;flex-direction:column;
}
.matrix__hub-title span:first-child{color: var(--green-bright)}
.matrix__hub-title span:last-child{
background: linear-gradient(180deg, #EEF2EE, #8A938F);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.matrix__hub-rule{
width:46px;height:1px;margin:4px 0 2px;
background: linear-gradient(90deg, transparent, var(--green-bright), transparent);
opacity:.7;
}
.matrix__hub-tag{color: var(--green-bright);font-size:9px;letter-spacing:.36em}
.matrix__hub-coord{font-size:8px;letter-spacing:.26em;color:var(--gray-mid)}
@keyframes hubPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.16)}}
/* ─── FOOTER ROW ─── */
.matrix__foot{
max-width:var(--maxw);margin: clamp(52px, 6vw, 84px) auto 0;
display:grid;grid-template-columns: 1fr auto 1fr;gap:24px;align-items:center;
}
.matrix__values{display:flex;flex-direction:column;gap:4px;color:var(--gray-light);font-size:10px;letter-spacing:.42em}
.matrix__values--r{align-items:flex-end;text-align:right}
.matrix__footstrip{
display:inline-flex;align-items:center;gap:14px;
color:var(--white);font-size:11px;letter-spacing:.42em;
padding:14px 28px;
border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);
background: rgba(255,255,255,.015);
}
.matrix__footstrip i{font-style:normal;color:var(--green-bright)}
/* wire styling */
.wire-path{fill:none;stroke-width:1.4;opacity:.32;transition:opacity .4s,stroke-width .4s}
.wire-path.is-hot{opacity:.9;stroke-width:2}
.wire-pulse{fill:none;stroke-width:2.4;stroke-linecap:round;opacity:.9}
/* ─── responsive ─── */
@media (max-width:1100px){
.matrix__board{grid-template-columns:1fr; gap:26px}
.matrix__wires{display:none}
.matrix__hub{order:-1; width:min(360px,80vw); max-width:360px; margin:0 auto; aspect-ratio:1/1}
.matrix__col{order:1}
.ucard__node{display:none}
.ucard--right{grid-template-columns:160px 1fr;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));}
.ucard--right .ucard__media{order:0}
.ucard--right .ucard__media::after{background: linear-gradient(90deg, transparent 40%, rgba(11,13,16,.95) 100%)}
.ucard--right .ucard__body{align-items:flex-start;text-align:left}
.ucard--right .ucard__rail{flex-direction:row}
.ucard--right::after{left:0;right:auto}
.ucard--right .ucard__scanbar{left:0;right:auto;background:linear-gradient(90deg,var(--mc),transparent)}
.matrix__foot{grid-template-columns:1fr;justify-items:center;gap:14px}
.matrix__values,.matrix__values--r{align-items:center;text-align:center;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:14px}
/* keep the values strip inside the viewport instead of clipping on the right */
.matrix__footstrip{flex-wrap:wrap;justify-content:center;max-width:100%;text-align:center;gap:10px 14px}
}
@media (max-width:560px){
.ucard{grid-template-columns:96px 1fr;min-height:124px}
.ucard--right{grid-template-columns:96px 1fr}
.ucard__hex{width:44px;height:50px}
.ucard__go{font-size:9px}
.matrix__hub{width:min(300px,84vw); max-width:300px}
.matrix__footstrip{font-size:10px;letter-spacing:.18em;gap:8px 12px;padding:11px 14px}
.matrix__values,.matrix__values--r{font-size:9.5px;letter-spacing:.22em;gap:10px}
}
/* ============================================================
TRUST / EXPERIENCIA (section 06) — redesigned
============================================================ */
.trust{
position:relative;
padding: 88px var(--pad) 0;
background:
radial-gradient(50% 40% at 80% 30%, rgba(20,42,59,.18), transparent 70%),
linear-gradient(180deg, #060708 0%, #0a0d10 60%, #060708 100%);
border-top:1px solid rgba(255,255,255,.05);
overflow:hidden;
}
.trust__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.trust__grid-bg{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(56,176,242,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(56,176,242,.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(70% 60% at 70% 40%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(70% 60% at 70% 40%, #000 30%, transparent 80%);
}
.trust__radar{
position:absolute;top:-8%;right:-12%;
width:680px;height:680px;
background:
radial-gradient(circle at center, rgba(56,176,242,.06), transparent 60%),
repeating-radial-gradient(circle at center, rgba(56,176,242,.10) 0 1px, transparent 1px 90px);
border-radius:50%;
opacity:.55;
filter: blur(.3px);
}
.trust > *{position:relative;z-index:2}
/* HEAD layout */
.trust__head{
max-width:var(--maxw);margin:36px auto 0;
display:grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(40px, 6vw, 88px);
align-items:start;
padding-bottom: 64px;
}
.trust__kicker{
display:inline-flex;align-items:center;gap:12px;
color: var(--green-bright);font-size:10.5px;letter-spacing:.42em;
padding:6px 12px;border:1px solid rgba(56,176,242,.32);
background:rgba(20,42,59,.18);
margin-bottom:18px;
}
.trust__title{
font-family:var(--f-display);font-weight:600;
font-size:clamp(40px, 5.4vw, 80px);line-height:.94;
color:var(--white);margin:0 0 22px;letter-spacing:-.005em;
text-transform:uppercase;
}
.trust__title em{font-style:normal;color:var(--green-bright)}
.trust__body{color:var(--gray-light);font-size:16px;max-width:520px;line-height:1.55;margin:0 0 36px}
/* stats */
.trust__stats{
display:grid;grid-template-columns:repeat(3,1fr);
gap:0;
border-top:1px solid rgba(255,255,255,.1);
border-bottom:1px solid rgba(255,255,255,.1);
padding:22px 0;
margin-bottom:28px;
}
.tstat{display:flex;flex-direction:column;gap:6px;padding-right:16px;position:relative}
.tstat + .tstat{padding-left:18px;border-left:1px solid rgba(255,255,255,.08)}
.tstat__num{
font-family:var(--f-display);font-weight:700;
font-size: clamp(38px, 4.2vw, 56px);
color:var(--white);line-height:1;
letter-spacing:-.01em;
}
.tstat__lbl{
color:var(--gray-mid);font-size:10px;letter-spacing:.34em;line-height:1.4;
}
.trust__pills{display:flex;flex-wrap:wrap;gap:8px}
/* ─── SPOTLIGHT DOSSIER ─── */
.trust__spot{
position:relative;
padding: 28px 28px 26px;
background:
linear-gradient(135deg, rgba(20,23,25,.95), rgba(8,10,11,.96));
border:1px solid rgba(255,255,255,.08);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.02),
0 30px 80px -30px rgba(0,0,0,.85);
}
.trust__spot > .bracket{position:absolute;width:24px;height:24px;border:1px solid var(--green-bright);opacity:.85}
.trust__spot > .bracket--tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.trust__spot > .bracket--tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.trust__spot > .bracket--bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.trust__spot > .bracket--br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.spot__head{
display:flex;align-items:center;gap:12px;
color:var(--gray-mid);font-size:10.5px;letter-spacing:.32em;
padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.08);
margin-bottom:18px;
}
.spot__head strong{color:var(--white);font-weight:600;font-family:var(--f-mono)}
.spot__dot{
width:7px;height:7px;background:var(--green-bright);border-radius:50%;
box-shadow:0 0 10px var(--green-bright);
animation: spotPulse 1.6s ease-in-out infinite;
}
@keyframes spotPulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.55;transform:scale(.85)}
}
.spot__live{
margin-left:auto;color:var(--green-bright);
letter-spacing:.36em;
}
.spot__frame{
position:relative;
aspect-ratio: 16 / 9;
display:flex;align-items:center;justify-content:center;
background:
radial-gradient(60% 70% at 50% 40%, rgba(20,42,59,.22), rgba(8,10,11,.6) 70%),
linear-gradient(180deg, #0c0f10, #060708);
border:1px solid rgba(255,255,255,.06);
box-shadow: inset 0 0 60px rgba(0,0,0,.5);
overflow:hidden;
}
.spot__scan{
position:absolute;inset:0;
background:
repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px),
radial-gradient(40% 40% at 50% 50%, rgba(56,176,242,.08), transparent 70%);
mix-blend-mode:overlay;
animation: scanShift 7s linear infinite;
}
@keyframes scanShift{
0%{transform:translateY(0)}
100%{transform:translateY(40px)}
}
.spot__corner{position:absolute;width:18px;height:18px;border:1px solid var(--green-bright);opacity:.7}
.spot__corner--tl{top:10px;left:10px;border-right:0;border-bottom:0}
.spot__corner--tr{top:10px;right:10px;border-left:0;border-bottom:0}
.spot__corner--bl{bottom:10px;left:10px;border-right:0;border-top:0}
.spot__corner--br{bottom:10px;right:10px;border-left:0;border-top:0}
.spot__img{
max-width:62%;max-height:78%;
object-fit:contain;
filter:
grayscale(1) brightness(1.45) contrast(1.05)
drop-shadow(0 6px 20px rgba(0,0,0,.6));
opacity:0;
transform: scale(.96);
transition: opacity .55s cubic-bezier(.2,.7,.2,1),
transform .8s cubic-bezier(.2,.7,.2,1),
filter .4s;
}
.spot__img.is-in{opacity:.96;transform:scale(1)}
.spot__meta{
padding-top:18px;
}
.spot__name{
font-family:var(--f-display);font-weight:700;
font-size: clamp(22px, 2.2vw, 30px);
letter-spacing:.04em;color:var(--white);
margin:0 0 4px;text-transform:uppercase;
}
.spot__sector{
color:var(--gray-light);font-size:11px;letter-spacing:.32em;
margin:0 0 14px;
}
.spot__bar{
height:2px;width:100%;
background:rgba(255,255,255,.08);
overflow:hidden;
}
.spot__bar-fill{
display:block;height:100%;width:0%;
background: linear-gradient(90deg, var(--green-bright), color-mix(in oklab, var(--green-bright) 30%, white));
box-shadow: 0 0 8px var(--green-bright);
animation: spotBar 3.4s linear forwards;
}
@keyframes spotBar{
from{width:0%}
to{width:100%}
}
/* thumbnails grid */
.spot__grid{
list-style:none;margin:22px 0 0;padding:0;
display:grid;grid-template-columns: repeat(6, 1fr);
gap:6px;
}
.tthumb{
position:relative;
aspect-ratio: 1 / 1;
display:flex;align-items:center;justify-content:center;
background: rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.06);
cursor:pointer;
transition: background .25s, border-color .25s, transform .25s;
overflow:hidden;
}
.tthumb img{
width:74%;height:74%;object-fit:contain;
filter: grayscale(1) brightness(1.3) contrast(.9) opacity(.55);
transition: filter .3s, transform .3s;
}
.tthumb__num{
position:absolute;top:4px;left:5px;
font-size:8px;letter-spacing:.2em;color:var(--gray-mid);
}
.tthumb__name{
position:absolute;bottom:-22px;left:0;right:0;
text-align:center;font-size:8px;letter-spacing:.18em;
color:var(--green-bright);opacity:0;
transition: opacity .25s, bottom .25s;
pointer-events:none;
white-space:nowrap;
}
.tthumb:hover{
background: rgba(56,176,242,.06);
border-color: rgba(56,176,242,.45);
}
.tthumb:hover img{
filter: grayscale(1) brightness(1.55) contrast(1) opacity(.95);
transform: scale(1.04);
}
.tthumb.is-active{
background: rgba(56,176,242,.10);
border-color: var(--green-bright);
box-shadow:
inset 0 0 0 1px rgba(56,176,242,.4),
0 0 18px -4px rgba(56,176,242,.55);
}
.tthumb.is-active img{
filter: grayscale(1) brightness(1.7) contrast(1.05) opacity(1);
}
.tthumb.is-active::after{
content:"";position:absolute;top:5px;right:5px;
width:6px;height:6px;background:var(--green-bright);border-radius:50%;
box-shadow:0 0 8px var(--green-bright);
animation: spotPulse 1.6s ease-in-out infinite;
}
/* ─── MARQUEE STRIP ─── */
.trust__strip{
position:relative;
max-width:none;margin: 0 calc(-1 * var(--pad));
padding: 36px 0;
background:
linear-gradient(180deg, transparent 0%, rgba(255,255,255,.02) 50%, transparent 100%);
border-top:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
overflow:hidden;
}
.strip__edge{
position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none;
}
.strip__edge--l{left:0;background:linear-gradient(90deg, #060708 0%, transparent 100%)}
.strip__edge--r{right:0;background:linear-gradient(270deg, #060708 0%, transparent 100%)}
.strip__row{
position:relative;
overflow:hidden;
}
.strip__row + .strip__row{margin-top:22px}
.strip__track{
display:flex;
gap: 64px;
width: max-content;
will-change: transform;
}
.strip__row--rtl .strip__track{
animation: stripScroll 38s linear infinite;
}
.strip__row--ltr .strip__track{
animation: stripScroll 38s linear infinite reverse;
}
.strip__row:hover .strip__track{animation-play-state: paused}
@keyframes stripScroll{
from{transform: translateX(0)}
to{transform: translateX(-50%)}
}
.strip__cell{
flex:0 0 auto;
height: 64px;
width: 160px;
display:flex;align-items:center;justify-content:center;
opacity:.55;
transition: opacity .35s, transform .35s;
}
.strip__cell img{
max-width:100%;max-height:100%;object-fit:contain;
filter: grayscale(1) brightness(1.4) contrast(.95);
}
.strip__cell:hover{opacity:1;transform: scale(1.08)}
/* footer */
.trust__foot{
max-width:var(--maxw);margin: 0 auto;
display:flex;justify-content:space-between;align-items:center;
padding: 24px 0 64px;
color:var(--gray-mid);font-size:10px;letter-spacing:.36em;
}
.trust__foot span{display:inline-flex;align-items:center;gap:10px}
.dot-green{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--green-bright);box-shadow:0 0 8px var(--green-bright);
}
/* ─── responsive ─── */
@media (max-width:1100px){
.trust__head{grid-template-columns:1fr;gap:48px}
.spot__grid{grid-template-columns: repeat(6, 1fr)}
}
@media (max-width:680px){
.trust__stats{grid-template-columns:1fr 1fr}
.tstat:nth-child(3){grid-column:1 / -1;border-left:0;padding-left:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.spot__grid{grid-template-columns: repeat(4, 1fr)}
.strip__cell{width:120px;height:50px}
.trust__foot{flex-direction:column;gap:14px;text-align:center}
}
/* ============================================================
GLOBAL MOTION SYSTEM — reveal / tilt / hero entry
============================================================ */
/* baseline easing var */
:root{
--rv-ease: cubic-bezier(.22, .68, .24, 1);
--rv-dur: .8s;
}
/* ─── [data-reveal] base states ─────────────────────── */
[data-reveal]{
opacity:0;
transform: translate3d(0, 26px, 0);
transition:
opacity .85s var(--rv-ease) var(--rv-delay, 0ms),
transform .85s var(--rv-ease) var(--rv-delay, 0ms),
filter .7s var(--rv-ease) var(--rv-delay, 0ms);
filter: blur(4px);
will-change: opacity, transform;
}
[data-reveal="left"]{ transform: translate3d(-40px, 0, 0); }
[data-reveal="right"]{ transform: translate3d(40px, 0, 0); }
[data-reveal="zoom"]{ transform: scale(1.08); filter: blur(6px) brightness(.7); }
[data-reveal="fade"]{ transform: none; filter: none; }
[data-reveal].is-revealed{
opacity:1;
transform: none;
filter: none;
}
/* ─── word-by-word reveal ─────────────────────── */
.rv-words .rv-word{
display:inline-block;
opacity:0;
transform: translate3d(0, .55em, 0) rotateX(-25deg);
transform-origin: 50% 100%;
transition:
opacity .7s var(--rv-ease),
transform .85s var(--rv-ease);
transition-delay: calc(var(--rv-w, 0) * 55ms + 80ms);
will-change: opacity, transform;
}
.rv-words.is-revealed .rv-word{
opacity:1;
transform: none;
}
/* underline sweep for big section titles after reveal */
.matrix__title.rv-words,
.trust__title.rv-words,
.cta__title.rv-words{
position:relative;
}
/* ─── TILT cards ─────────────────────── */
.ucard, .dcard, .feat, .trust__spot, .cta__panel, .met__step{
--tilt-rx: 0deg;
--tilt-ry: 0deg;
--tilt-x: 50%;
--tilt-y: 50%;
transform-style: preserve-3d;
transform: perspective(900px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.is-tilting{
transition: transform .12s linear, box-shadow .35s, border-color .35s !important;
}
/* glare overlay on tilted cards */
.ucard::before,
.dcard::before,
.feat::before,
.trust__spot::before{
content:"";
position:absolute;inset:0;
background: radial-gradient(220px circle at var(--tilt-x) var(--tilt-y),
rgba(255,255,255,.10), transparent 60%);
opacity:0;
transition: opacity .35s ease;
pointer-events:none;
z-index:5;
mix-blend-mode: screen;
}
.is-tilting::before{opacity:1}
/* preserve original ucard hover lift on top of tilt */
.ucard.is-tilting{
transform: perspective(900px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry)) translateY(-2px);
}
/* ─── BUTTONS — magnetic + sweep ─────────────────────── */
.btn--primary, .btn--lg{
transition: transform .3s cubic-bezier(.2,.7,.2,1), background-color .25s, color .25s, box-shadow .3s;
position:relative;
overflow:hidden;
}
.btn--primary::after,
.btn--lg::after{
content:"";
position:absolute;inset:0;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
transform: translateX(-110%);
transition: transform .8s cubic-bezier(.2,.7,.2,1);
pointer-events:none;
}
.btn--primary:hover::after,
.btn--lg:hover::after{
transform: translateX(110%);
}
/* ─── NAV motion ─────────────────────── */
.nav{
transition: transform .45s var(--rv-ease),
background-color .35s,
backdrop-filter .35s,
padding .3s,
border-color .35s;
}
.nav.is-scrolled{
background-color: rgba(6,7,8,.78);
-webkit-backdrop-filter: blur(14px) saturate(120%);
backdrop-filter: blur(14px) saturate(120%);
border-bottom-color: rgba(255,255,255,.08);
}
.nav.is-hidden{
transform: translateY(-110%);
}
.nav__links a{
position:relative;
transition: color .25s;
}
.nav__links a::after{
content:"";
position:absolute;
left:0;right:0;bottom:-6px;
height:1px;
background: var(--green-bright);
transform: scaleX(0);
transform-origin: left center;
transition: transform .35s var(--rv-ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after{
transform: scaleX(1);
}
/* ─── HERO entry sequence ─────────────────────── */
.hero{ overflow:hidden }
.hero__media img,
.hero__bg img,
.hero img.hero__img,
.hero video{
transition: transform 1.6s var(--rv-ease), filter 1.6s var(--rv-ease);
transform: scale(1.12);
filter: brightness(.55) saturate(.85);
}
.hero.is-entered .hero__media img,
.hero.is-entered .hero__bg img,
.hero.is-entered img.hero__img,
.hero.is-entered video{
transform: scale(1);
filter: brightness(.9) saturate(1);
}
.hero .hero__title,
.hero h1,
.hero .hero__sub,
.hero .hero__meta,
.hero .hero__cta,
.hero .hero__kicker,
.hero .hero__chips,
.hero .mono{
opacity:0;
transform: translateY(28px);
transition:
opacity 1s var(--rv-ease),
transform 1s var(--rv-ease);
}
.hero.is-entered .hero__kicker,
.hero.is-entered .mono{ transition-delay: .1s }
.hero.is-entered .hero__title,
.hero.is-entered h1{ transition-delay: .25s }
.hero.is-entered .hero__sub{ transition-delay: .45s }
.hero.is-entered .hero__chips{ transition-delay: .6s }
.hero.is-entered .hero__cta,
.hero.is-entered .hero__meta{ transition-delay: .75s }
.hero.is-entered .hero__title,
.hero.is-entered h1,
.hero.is-entered .hero__sub,
.hero.is-entered .hero__meta,
.hero.is-entered .hero__cta,
.hero.is-entered .hero__kicker,
.hero.is-entered .hero__chips,
.hero.is-entered .mono{
opacity:1;
transform:none;
}
/* ─── Brackets draw-in on reveal ─────────────────────── */
.matrix > .bracket,
.trust__spot > .bracket{
transition: transform .9s var(--rv-ease), opacity .6s var(--rv-ease);
transition-delay: .3s;
}
.matrix.is-revealed > .bracket,
.trust__spot.is-revealed > .bracket{
/* default already set */
}
/* ─── Section rule sweep ─────────────────────── */
.section-rule{
position:relative;
}
.section-rule .rule{
transform-origin: left center;
transition: transform 1.1s var(--rv-ease) .3s;
}
.section-rule[data-reveal]:not(.is-revealed) .rule{
transform: scaleX(0);
}
/* ─── Stat numbers — accent flash on reveal ─────────────────────── */
.tstat__num,
.grupo__stat-num{
transition: text-shadow .8s var(--rv-ease) .4s;
}
[data-reveal].is-revealed .tstat__num,
[data-reveal].is-revealed .grupo__stat-num{
text-shadow: 0 0 22px rgba(56,176,242,.18);
}
/* ─── Images: subtle reveal mask ─────────────────────── */
[data-reveal="zoom"]{
overflow:hidden;
}
/* ============================================================ REDES SOCIALES (section 06·B) */
.social{
position:relative;
padding:80px var(--pad) 96px;
background:var(--bg-1);
border-top:1px solid rgba(255,255,255,.05);
overflow:hidden;
}
.social > *{position:relative;z-index:2;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.social .section-rule{padding-left:0;padding-right:0;padding-top:0}
/* background */
.social__bg{position:absolute;inset:0;z-index:1;pointer-events:none}
.social__grid-bg{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
background-size:54px 54px;
-webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 35%, transparent 78%);
mask-image: radial-gradient(120% 90% at 70% 30%, #000 35%, transparent 78%);
}
.social__sweep{
position:absolute;left:-30%;top:0;width:60%;height:100%;
background:linear-gradient(90deg, transparent, rgba(56,176,242,.05), transparent);
filter:blur(8px);
animation:socialSweep 9s ease-in-out infinite;
}
@keyframes socialSweep{0%{left:-40%}55%,100%{left:120%}}
.social > .bracket{position:absolute;width:42px;height:42px;border:1px solid var(--green-bright);opacity:.5;z-index:3}
.social > .bracket--tl{top:20px;left:20px;border-right:0;border-bottom:0}
.social > .bracket--tr{top:20px;right:20px;border-left:0;border-bottom:0}
.social > .bracket--bl{bottom:20px;left:20px;border-right:0;border-top:0}
.social > .bracket--br{bottom:20px;right:20px;border-left:0;border-top:0}
/* head */
.social__head{margin:48px auto 52px;text-align:center;max-width:760px}
.social__kicker{
display:inline-flex;align-items:center;gap:14px;position:relative;
font-size:10px;letter-spacing:.34em;color:var(--green-bright);
padding:8px 18px;margin-bottom:24px;
}
.social__title{margin:0 auto 20px;text-align:center}
.social__title em{font-style:normal;color:var(--green-bright)}
.social__lead{
color:var(--gray-light);font-size:16px;line-height:1.6;
max-width:560px;margin:0 auto;text-wrap:pretty;
}
/* body grid */
.social__body{
display:grid;
grid-template-columns:0.9fr 1.1fr;
gap:clamp(32px,5vw,72px);
align-items:center;
}
/* ─── PLATE / dossier del emblema ─── */
.social__plate{
position:relative;
width:100%;max-width:420px;
margin:0 auto;
display:flex;flex-direction:column;
background:
linear-gradient(160deg, rgba(20,23,25,.9), rgba(8,10,11,.92));
border:1px solid rgba(255,255,255,.1);
padding:18px;
box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.plate__corner{position:absolute;width:16px;height:16px;border:1px solid var(--green-bright);opacity:.8;z-index:5}
.plate__corner--tl{top:8px;left:8px;border-right:0;border-bottom:0}
.plate__corner--tr{top:8px;right:8px;border-left:0;border-bottom:0}
.plate__corner--bl{bottom:8px;left:8px;border-right:0;border-top:0}
.plate__corner--br{bottom:8px;right:8px;border-left:0;border-top:0}
.plate__head{
display:flex;justify-content:space-between;gap:12px;
font-size:9px;letter-spacing:.2em;color:var(--gray-mid);
padding:4px 4px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.plate__stage{
position:relative;flex:1;
aspect-ratio:1/1.04;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
background:
linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0/100% 34px,
linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0/34px 100%;
}
.plate__vlabel{
position:absolute;right:6px;top:50%;
writing-mode:vertical-rl;transform:translateY(-50%);
font-size:9px;letter-spacing:.32em;color:var(--gray-mid);
}
.plate__ruler{
position:absolute;left:6px;top:14%;bottom:14%;width:7px;
background:repeating-linear-gradient(to bottom, rgba(255,255,255,.28) 0 1px, transparent 1px 13px);
-webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
/* square focus reticle framing the dragon */
.reticle{position:absolute;width:34px;height:34px;border:1.5px solid var(--green-bright);opacity:.85;z-index:4}
.reticle--tl{top:16%;left:20%;border-right:0;border-bottom:0}
.reticle--tr{top:16%;right:20%;border-left:0;border-bottom:0}
.reticle--bl{bottom:16%;left:20%;border-right:0;border-top:0}
.reticle--br{bottom:16%;right:20%;border-left:0;border-top:0}
.reticle__cross{position:absolute;left:50%;top:50%;background:rgba(56,176,242,.5);z-index:4}
.reticle__cross--v{width:1px;height:26px;transform:translate(-50%,-50%)}
.reticle__cross--h{width:26px;height:1px;transform:translate(-50%,-50%)}
.plate__glow{
position:absolute;width:60%;height:60%;
background:radial-gradient(ellipse at center, rgba(56,176,242,.16), transparent 68%);
filter:blur(10px);animation:platePulse 3.6s ease-in-out infinite;
}
@keyframes platePulse{0%,100%{opacity:.55}50%{opacity:1}}
.plate__scan{
position:absolute;left:0;right:0;height:2px;top:0;z-index:3;
background:linear-gradient(90deg, transparent, rgba(56,176,242,.55), transparent);
box-shadow:0 0 12px rgba(56,176,242,.5);
animation:plateScan 4.5s ease-in-out infinite;
}
@keyframes plateScan{0%{top:8%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:92%;opacity:0}}
.plate__dragon{
position:relative;z-index:3;
width:84%;height:auto;
filter:
drop-shadow(0 0 22px rgba(56,176,242,.32))
drop-shadow(0 18px 34px rgba(0,0,0,.7));
animation:dragonFloat 6s ease-in-out infinite;
}
@keyframes dragonFloat{0%,100%{transform:translateY(-2%)}50%{transform:translateY(2%)}}
.plate__dim{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);font-size:8px;letter-spacing:.26em;color:var(--gray-mid);z-index:4}
.plate__bars{
height:18px;margin:14px 0 0;
background:repeating-linear-gradient(90deg,
var(--white-2) 0 1px, transparent 1px 3px,
var(--white-2) 3px 5px, transparent 5px 6px,
var(--white-2) 6px 9px, transparent 9px 13px);
opacity:.4;
}
.plate__readout{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-top:12px;padding:11px 14px;
background:rgba(5,6,7,.6);
border:1px solid rgba(56,176,242,.3);
white-space:nowrap;
}
.plate__live{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.22em;color:var(--white)}
.plate__pulse{width:7px;height:7px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 0 0 rgba(56,176,242,.6);animation:scopePing 1.8s ease-out infinite}
@keyframes scopePing{0%{box-shadow:0 0 0 0 rgba(56,176,242,.5)}70%,100%{box-shadow:0 0 0 9px rgba(56,176,242,0)}}
@keyframes socialPulse{0%,100%{opacity:.6;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
.plate__handle{font-size:10px;letter-spacing:.2em;color:var(--green-bright);font-weight:600}
/* ─── channels (2 feature cards) ─── */
.social__channels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.social__channels > li{display:flex}
.chan{
position:relative;
flex:1;
display:grid;
grid-template-rows:auto 1fr auto;
gap:16px;
padding:26px 28px;
background:linear-gradient(135deg, rgba(20,23,25,.92), rgba(11,13,14,.6));
border:1px solid rgba(255,255,255,.08);
text-decoration:none;
overflow:hidden;
transition:border-color .3s, transform .3s, background .3s, box-shadow .3s;
}
.chan::after{
content:"";position:absolute;left:0;top:0;height:100%;width:3px;
background:var(--green-bright);
transform:scaleY(0);transform-origin:bottom;transition:transform .4s var(--rv-ease);
}
.chan:hover{
border-color:rgba(56,176,242,.42);
background:linear-gradient(135deg, rgba(18,30,44,.95), rgba(13,16,12,.66));
transform:translateX(4px);
box-shadow:0 24px 60px -34px rgba(0,0,0,.9);
}
.chan:hover::after{transform:scaleY(1)}
.chan__top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.chan__ico{
display:flex;align-items:center;justify-content:center;
width:56px;height:56px;flex:none;
color:var(--white-2);
border:1px solid rgba(255,255,255,.12);
background:rgba(5,6,7,.55);
transition:color .3s, border-color .3s, box-shadow .3s, background .3s;
}
.chan:hover .chan__ico{
color:#0A0A0A;background:var(--green-bright);
border-color:var(--green-bright);
box-shadow:0 0 26px -6px rgba(56,176,242,.7);
}
.chan__status{
display:inline-flex;align-items:center;gap:8px;
font-size:9px;letter-spacing:.22em;color:var(--gray-light);
padding:6px 11px;border:1px solid rgba(255,255,255,.1);
}
.chan__dot{width:7px;height:7px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 8px var(--green-bright);animation:socialPulse 2.6s ease-in-out infinite}
.chan__main{display:flex;flex-direction:column;gap:4px}
.chan__name{
font-family:var(--f-display);font-weight:600;font-size:34px;letter-spacing:.04em;
color:var(--white);text-transform:uppercase;line-height:.95;
}
.chan__handle{font-size:11px;letter-spacing:.14em;color:var(--green-bright)}
.chan__desc{
color:var(--gray-light);font-size:13.5px;line-height:1.55;max-width:46ch;margin:0;
align-self:start;
}
.chan__cta{
display:inline-flex;align-items:center;gap:9px;
font-size:10px;letter-spacing:.22em;color:var(--white);
padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
transition:color .3s, gap .3s;
}
.chan__cta svg{transition:transform .3s}
.chan:hover .chan__cta{color:var(--green-bright)}
.chan:hover .chan__cta svg{transform:translateX(5px)}
.chan__idx{position:absolute;top:26px;right:28px;font-size:10px;letter-spacing:.16em;color:var(--gray-mid);display:none}
.chan__tick{position:absolute;width:9px;height:9px;border:1px solid rgba(56,176,242,0);transition:border-color .3s}
.chan__tick--tl{top:7px;left:7px;border-right:0;border-bottom:0}
.chan__tick--tr{top:7px;right:7px;border-left:0;border-bottom:0}
.chan__tick--bl{bottom:7px;left:7px;border-right:0;border-top:0}
.chan__tick--br{bottom:7px;right:7px;border-left:0;border-top:0}
.chan:hover .chan__tick{border-color:rgba(56,176,242,.55)}
/* ─── brand-colored channel cards ─── */
/* Instagram — corporate gradient fading into black */
.chan--ig{
background:
linear-gradient(135deg,
rgba(254,218,117,.20) 0%,
rgba(250,126,30,.22) 22%,
rgba(214,41,118,.26) 48%,
rgba(150,47,191,.22) 72%,
rgba(79,91,213,.20) 100%),
linear-gradient(160deg, rgba(20,16,22,.82), #050405 78%);
border-color:rgba(214,41,118,.32);
}
.chan--ig::after{
background:linear-gradient(180deg,#feda75,#fa7e1e 28%,#d62976 60%,#962fbf 82%,#4f5bd5);
}
.chan--ig:hover{
border-color:rgba(214,41,118,.7);
background:
linear-gradient(135deg,
rgba(254,218,117,.42) 0%,
rgba(250,126,30,.46) 22%,
rgba(214,41,118,.55) 48%,
rgba(150,47,191,.46) 72%,
rgba(79,91,213,.42) 100%),
linear-gradient(160deg, rgba(24,18,26,.7), #050405 82%);
box-shadow:0 26px 64px -32px rgba(214,41,118,.65);
}
.chan--ig:hover .chan__ico{
color:#fff;
background:linear-gradient(135deg,#feda75,#fa7e1e 30%,#d62976 62%,#962fbf 84%,#4f5bd5);
border-color:transparent;
box-shadow:0 0 30px -6px rgba(214,41,118,.8);
}
.chan--ig:hover .chan__cta{color:#ff8fc4}
.chan--ig:hover .chan__tick{border-color:rgba(214,41,118,.7)}
/* Facebook — corporate blue fading into black */
.chan--fb{
background:
linear-gradient(135deg, rgba(24,119,242,.30) 0%, rgba(24,119,242,.10) 46%, transparent 70%),
linear-gradient(160deg, rgba(10,18,30,.85), #050405 80%);
border-color:rgba(24,119,242,.32);
}
.chan--fb::after{
background:linear-gradient(180deg,#3b9bff,#1877F2 60%,#0a4fb0);
}
.chan--fb:hover{
border-color:rgba(24,119,242,.72);
background:
linear-gradient(135deg, rgba(24,119,242,.58) 0%, rgba(24,119,242,.24) 48%, transparent 76%),
linear-gradient(160deg, rgba(10,20,34,.72), #050405 84%);
box-shadow:0 26px 64px -32px rgba(24,119,242,.6);
}
.chan--fb:hover .chan__ico{
color:#fff;
background:linear-gradient(135deg,#3b9bff,#1877F2 70%);
border-color:transparent;
box-shadow:0 0 30px -6px rgba(24,119,242,.8);
}
.chan--fb:hover .chan__cta{color:#7fb6ff}
.chan--fb:hover .chan__tick{border-color:rgba(24,119,242,.7)}
/* foot */
.social__foot{
display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
margin-top:54px;padding-top:22px;
border-top:1px solid rgba(255,255,255,.07);
font-size:10px;letter-spacing:.18em;color:var(--gray-mid);
}
.social__foot .dot-green{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green-bright);box-shadow:0 0 8px var(--green-bright);vertical-align:middle;margin-right:6px}
@media (max-width:920px){
.social__body{grid-template-columns:1fr;gap:48px}
.social__plate{max-width:380px}
.social__channels{max-width:620px;margin:0 auto;width:100%}
}
@media (max-width:560px){
.social{padding:60px var(--pad) 72px}
.chan{padding:22px}
.chan__name{font-size:28px}
.chan__desc{font-size:13px}
}
/* ─── prefers-reduced ─────────────────────── */
@media (prefers-reduced-motion: reduce){
[data-reveal], .rv-words .rv-word{
opacity:1 !important;
transform:none !important;
filter:none !important;
transition:none !important;
}
.hero .hero__title,
.hero .hero__sub,
.hero .hero__cta,
.hero .hero__meta,
.hero .hero__kicker,
.hero .hero__chips,
.hero .mono{
opacity:1 !important; transform:none !important;
}
}
/* ─── BANNER · SEGURIDAD QUE CONECTA ──────── */
.connecta{
position:relative;
min-height:clamp(420px, 64vh, 680px);
display:flex;align-items:center;
padding:clamp(56px,9vw,120px) var(--pad);
overflow:hidden;
background:#050405;
border-top:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
}
.connecta__bg{
position:absolute;inset:0;z-index:0;
background:url('assets/banner-conecta.png') center 38% / cover no-repeat;
opacity:.46;
filter:contrast(1.08) saturate(1.25);
}
.connecta__veil{
position:absolute;inset:0;z-index:1;
background:
radial-gradient(120% 95% at 50% 50%, transparent 0%, rgba(5,4,5,.55) 70%, rgba(5,4,5,.92) 100%),
linear-gradient(90deg, rgba(5,4,5,.9) 0%, rgba(5,4,5,.35) 42%, rgba(5,4,5,.35) 58%, rgba(5,4,5,.9) 100%);
}
.connecta__bracket{
position:absolute;width:46px;height:46px;z-index:3;
border:1px solid rgba(56,176,242,.5);
}
.connecta__bracket--tl{top:26px;left:26px;border-right:0;border-bottom:0}
.connecta__bracket--br{bottom:26px;right:26px;border-left:0;border-top:0}
.connecta__inner{
position:relative;z-index:2;
max-width:var(--maxw);margin:0 auto;width:100%;
display:flex;flex-direction:column;gap:clamp(20px,3vw,34px);
}
.connecta__kicker{
display:inline-flex;align-items:center;gap:12px;
color:var(--green-bright);letter-spacing:.34em;
}
.connecta__kicker::before{
content:"";width:34px;height:1px;background:var(--green-bright);
box-shadow:0 0 10px var(--green-bright);
}
.connecta__title{
margin:0;
font-family:var(--f-display);font-weight:700;
text-transform:uppercase;
line-height:1.02;letter-spacing:-.005em;
display:flex;flex-direction:column;gap:clamp(6px,1vw,14px);
}
.connecta__line{
font-size:clamp(30px,5.6vw,82px);
color:var(--white);
text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.connecta__line em{
font-style:normal;
color:var(--green-bright);
}
@media (max-width:560px){
.connecta{align-items:flex-end;padding-bottom:clamp(48px,12vw,72px)}
.connecta__bg{opacity:.28}
.connecta__bracket{display:none}
.connecta__line{font-size:clamp(20px,6vw,28px) !important}
}
/* ============================================================
MOVIMIENTO DE SCROLL BIDIRECCIONAL · entrada + salida (abajo y arriba)
Reusa los estados ya definidos (.is-in / .is-revealed) y solo añade
la variante de SALIDA según la dirección en que el elemento abandona
el viewport. Lo gestionan app.js y animations.js.
============================================================ */
/* — sistema app.js (.reveal / .stagger / .title-words) — */
.reveal.exit-up{ transform:translateY(-30px); } /* sale por arriba */
/* exit-down conserva el translateY(28px) base */
.stagger.exit-up > *{ transform:translateY(-24px); }
.stagger.exit-down > *{ transform:translateY(24px); }
.title-words.exit-up .w{ transform:translateY(-.55em) skewY(-2deg); }
/* — sistema animations.js ([data-reveal] / .rv-words) — */
[data-reveal].is-exit-up{ transform:translate3d(0,-30px,0); }
[data-reveal="left"].is-exit-up,[data-reveal="left"].is-exit-down{ transform:translate3d(-40px,0,0); }
[data-reveal="right"].is-exit-up,[data-reveal="right"].is-exit-down{ transform:translate3d(40px,0,0); }
[data-reveal="zoom"].is-exit-up,[data-reveal="zoom"].is-exit-down{ transform:scale(1.08); }
.rv-words.is-exit-up .rv-word{ transform:translateY(-.6em) skewY(-3deg); }
/* — MÉTODO · tarjetas con entrada/salida marcada (abajo y arriba) — */
.mscene__phases.stagger > .mphase{
transform:translateY(36px) scale(.96);
filter:blur(2px);
transition:opacity .6s cubic-bezier(.2,.7,.2,1),
transform .72s cubic-bezier(.2,.7,.2,1),
filter .6s ease,
border-color .45s ease;
}
.mscene__phases.stagger.is-in > .mphase{ transform:translateY(0) scale(1); filter:blur(0); }
.mscene__phases.stagger.exit-up > .mphase{ transform:translateY(-36px) scale(.96); filter:blur(2px); }
.mscene__phases.stagger.exit-down > .mphase{ transform:translateY(36px) scale(.96); filter:blur(2px); }
@media (prefers-reduced-motion: reduce){
.reveal, .reveal.exit-up,
.stagger > *, .stagger.exit-up > *, .stagger.exit-down > *,
.mscene__phases.stagger > .mphase,
.title-words .w{
transform:none !important; filter:none !important; transition:none !important;
}
}