/* Nouz: página pública, calcada de la referencia "synex" (piedras con musgo, títulos en dos tonos, vidrio). */
:root{
  --bg:#f2f2f1;--white:#fff;--ink:#0d0d0e;--soft:#b3b3b3;--mute:#8a8a8a;--faint:#b9b9b9;--line:#e3e3e1;
  --green:#6f9a4b;--green-d:#3f6a2a;--cream:#efefc9;--red:#e5484d;
  --ease:cubic-bezier(.2,.75,.15,1);
  --pad:clamp(16px,4vw,40px);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-optical-sizing:auto;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
svg{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.center{text-align:center}

/* ---------- barra ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);color:var(--ink);transition:background .7s ease,color .7s ease}
.nav.dark{background:#1b1b1b;color:#fff}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:22px;letter-spacing:-.045em}
.logo svg{width:22px;height:22px;fill:currentColor}
.menu{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:26px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.menu a{opacity:.92}
.menu a:hover{opacity:.6}
.acts{display:flex;align-items:center;gap:10px;font-size:12.5px}
.lang{display:flex;align-items:center;gap:6px;margin-right:6px}
.lang svg{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 16px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;transition:background .4s,color .4s,opacity .4s,transform .4s var(--ease)}
.pill i{width:14px;height:14px;border-radius:50%;background:currentColor;position:relative}
.pill i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--dot,#fff)}
.nav .pill.main{background:var(--ink);color:#fff;--dot:var(--ink)}
.nav.dark .pill.main{background:#fff;color:var(--ink);--dot:#fff}
.nav .pill.ghost{background:#3a3a3a;color:#fff;opacity:0;pointer-events:none;transform:translateX(8px)}
.nav.dark .pill.ghost{opacity:1;pointer-events:auto;transform:none}
.pill:hover{opacity:.85}

/* ---------- textos ---------- */
.eyebrow{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.eyebrow.light{color:rgba(255,255,255,.75)}
.tag{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#555;border:1px solid #d4d4d2;padding:5px 9px;border-radius:3px}
.h-two{font-weight:400;font-size:clamp(32px,4.6vw,58px);line-height:1.08;letter-spacing:-.045em}
.h-two>span{display:block}
.soft{color:var(--soft)}
.h-left{font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;letter-spacing:-.04em;max-width:15em}
.h-center{font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.12;letter-spacing:-.04em;max-width:16em;margin:14px auto 0}
.h-center.light{color:#fff}
.h-center>span{display:block}

/* palabra por palabra: entra borrosa y sube */
[data-words] .w{display:inline-block;white-space:pre;opacity:0;filter:blur(14px);transform:translateY(.35em);transition:opacity 1.1s var(--ease),filter 1.3s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--b,0s) + var(--i)*70ms)}
[data-small] .w{transition-delay:calc(var(--b,0s) + var(--i)*18ms)}
.hero.in [data-words] .w,[data-words].in .w{opacity:1;filter:blur(0);transform:none}
.fade{opacity:0;filter:blur(8px);transform:translateY(14px);transition:opacity 1s var(--ease),filter 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.fade.in,.hero.in .fade{opacity:1;filter:none;transform:none}
.rise{opacity:0;filter:blur(18px);transform:translateY(60px) scale(.97);transition:opacity 1.2s var(--ease),filter 1.3s var(--ease),transform 1.4s var(--ease);transition-delay:var(--d,0s)}
.rise.in{opacity:1;filter:none;transform:none}

/* ---------- portada ---------- */
.hero{position:sticky;top:0;z-index:0;height:100svh;min-height:640px;overflow:hidden;background:linear-gradient(180deg,#fdfdfd 0%,#f4f4f3 45%,#e9e9e7 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 50% at 50% 28%,rgba(255,255,255,.85),transparent 70%);pointer-events:none}
.hero-txt{position:relative;z-index:3;text-align:center;padding-top:clamp(108px,17vh,170px)}
.hero .h-two{margin-top:12px;font-size:clamp(34px,3.6vw,52px)}
.hero .sub{max-width:31em;margin:16px auto 0;color:#5f625e;font-size:clamp(13px,1vw,14.5px);line-height:1.45}
.dash-wrap{position:absolute;z-index:2;left:50%;top:max(54vh,430px);width:min(66vw,1000px);transform:translate(-50%,calc(var(--p,0)*-90px));aspect-ratio:1800/1075}
.dash{position:absolute;inset:0;border-radius:14px 14px 0 0;overflow:hidden;background:#fff;container-type:inline-size;opacity:0;filter:blur(22px);translate:0 80px;transition:opacity 1.4s var(--ease),filter 1.6s var(--ease),translate 1.6s var(--ease);transition-delay:.35s}
.ready .dash{opacity:1;filter:none;translate:0 0}
.dash>img{width:100%;height:auto}
.cnt{position:absolute;background:#fff;color:#111;white-space:nowrap;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;padding:.08em .06em}
.cnt i{font-style:normal;color:#c4c4c4}
.c-small{left:20.95%;top:58.9%;font-size:1.8cqw;font-weight:400}
.c-big{left:21.3%;top:78%;font-size:3.1cqw;font-weight:500}
.chart-cover{position:absolute;right:3.2%;top:87%;bottom:0;width:79%;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 6%);transform-origin:100% 50%;transition:transform 3.2s cubic-bezier(.45,0,.2,1) 1.3s}
.ready .chart-cover{transform:scaleX(0)}
/* profundidad: cada capa se corre según el mouse (--mx/--my) y el scroll (--hp), más cuanto más cerca está */
[data-depth]{translate:calc(var(--mx,0)*var(--k,.5)*-34px) calc(var(--my,0)*var(--k,.5)*-20px + var(--hp,0)*var(--k,.5)*-160px)}
.rock{position:absolute;z-index:4;pointer-events:none;scale:1.07;transition:scale 2.8s var(--ease)}
.ready .rock,.ready .rock-stack{scale:1}
.r-left{--k:1;left:-3vw;bottom:-33vh;width:min(28vw,450px);transform-origin:0 100%}
.rock-stack{--k:.8;position:absolute;z-index:4;right:-9vw;bottom:-10vh;width:min(48vw,780px);pointer-events:none;scale:1.07;transform-origin:100% 100%;transition:scale 2.8s var(--ease)}
.rock-stack img{width:100%}
/* el musgo con flores crece sobre la piedra, de abajo hacia arriba y desde la izquierda */
.rock-stack .moss{position:absolute;left:-6%;top:44%;width:58%;transform-origin:30% 100%;scale:calc(.35 + var(--grow,0)*.65);opacity:clamp(0,calc(var(--grow,0)*3),1);clip-path:inset(calc((1 - var(--grow,0))*100%) calc((1 - var(--grow,0))*60%) 0 0);filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
/* fondo: escena brumosa real, desenfocada; las piedras de adelante, más desenfocadas todavía (como foco de cámara en el panel) */
.hero-bg{position:absolute;left:-3%;top:-3%;width:106%;height:106%;max-width:none;object-fit:cover;object-position:50% 100%;z-index:0;--k:.12;translate:calc(var(--mx,0)*-8px) calc(var(--my,0)*-5px + var(--hp,0)*-40px);scale:1.06;transition:scale 3s var(--ease)}
.ready .hero-bg{scale:1}
.rock,.rock-stack img{filter:blur(2.5px) saturate(.85) contrast(.92) brightness(1.03)}
/* bordes que se pierden en la niebla: nada termina en una línea dura */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:5;background:linear-gradient(180deg,rgba(240,240,238,0),rgba(240,240,238,.55));pointer-events:none}
.dash-wrap{--k:.35}
.scroll-hint{position:absolute;z-index:6;left:50%;bottom:18px;translate:-50% 0;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#555;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:6px 12px;border-radius:999px}

/* ---------- intro ---------- */
.intro{position:relative;z-index:6;background:#fff;padding:70px 0 110px}
main>section:not(.hero),main>footer{position:relative;z-index:6}
.tag-row{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.tag-row::after{content:"";flex:1;height:1px;background:var(--line)}
.intro-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-start}
.intro-head .side{max-width:22em;color:var(--faint);font-size:14px;margin-top:40px}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:70px}
.num{font-size:12px;color:#555;letter-spacing:.1em}
.cols3 h3,.caps-row h3,.live-row h3,.foot-col h3{font-size:15px;font-weight:500;letter-spacing:-.02em;margin-top:12px}
.cols3 p{color:var(--faint);font-size:13.5px;margin-top:8px;max-width:24em}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:60px}
.pcard{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:var(--img) center/cover #ccc;display:flex;align-items:flex-end;padding:22px}
.glass{width:100%;border-radius:14px;padding:16px 16px 14px;color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 20px 50px -20px rgba(0,0,0,.35);opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0s) + .55s)}
.in .glass{opacity:1;transform:none}
.glass header{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.glass header span{display:flex;align-items:center;gap:8px}
.sq{width:10px;height:10px;border:1.5px solid rgba(255,255,255,.8);border-radius:2px}
.dots{opacity:.7;letter-spacing:2px}
.mini{font-size:10px;background:rgba(255,255,255,.15);padding:3px 8px;border-radius:6px}
.g-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.g-row small{display:block;font-size:9.5px;opacity:.7}
.g-row b{font-weight:400;font-size:17px;font-variant-numeric:tabular-nums}
.g-slider{position:relative;height:28px;margin-top:16px;background:rgba(255,255,255,.12);border-radius:4px;overflow:hidden}
.g-slider .t{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,255,255,.55);transition:width 1.6s var(--ease) 1s}
.in .g-slider .t{width:var(--w)}
.g-slider .k{position:absolute;top:50%;left:var(--x);width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff}
.g-slider .k.s{opacity:.6;width:5px;height:5px;margin:-2.5px}
.g-scale{display:flex;justify-content:space-between;font-size:9px;opacity:.65;margin-top:6px}
.glass footer{display:flex;justify-content:space-between;font-size:12px;margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.2)}
.glass footer b{font-weight:500}
.g-pct{display:flex;align-items:flex-start;gap:4px;font-size:clamp(44px,5vw,62px);letter-spacing:-.05em;line-height:1;margin-top:22px}
.g-pct b{font-weight:300;font-variant-numeric:tabular-nums}
.g-pct svg{width:22px;margin-top:22px}
.g-perf h4{font-size:13px;font-weight:500;margin-top:14px}
.g-perf p:not(.g-pct){font-size:11px;opacity:.7;margin-top:4px}
.g-money{font-size:28px;letter-spacing:-.03em;margin-top:14px}
.g-money b{font-weight:400;font-variant-numeric:tabular-nums}
.g-cap{display:flex;align-items:center;gap:6px;font-size:10px;opacity:.75}
.g-cap i{width:6px;height:6px;border-radius:50%;background:#e8c48a}
.map{width:62%;margin:6px auto 0;height:auto}

/* ---------- rama ---------- */
.branch{position:relative;background:linear-gradient(180deg,#fff 0%,#ececeb 18%,#e6e6e5 100%);height:240vh}
.branch-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;perspective:1400px}
.rama-stack{position:absolute;left:-8vw;right:-8vw;top:50%;transform:translateY(-46%);pointer-events:none}
.rama-stack img{width:100%;height:auto}
.rama-stack .dry{filter:drop-shadow(0 30px 30px rgba(0,0,0,.12))}
.rama-stack .moss{position:absolute;inset:0;--a:calc(var(--p,0)*150% - 40%);-webkit-mask:linear-gradient(90deg,transparent calc(var(--a) - 30%),#000 calc(var(--a) - 12%),#000 calc(var(--a) + 12%),transparent calc(var(--a) + 30%));mask:linear-gradient(90deg,transparent calc(var(--a) - 30%),#000 calc(var(--a) - 12%),#000 calc(var(--a) + 12%),transparent calc(var(--a) + 30%))}
.bcard-wrap{position:relative;width:min(300px,62vw);aspect-ratio:300/380;transform:rotateY(calc((var(--p,0) - .5)*-16deg)) rotateX(calc((var(--p,0) - .5)*6deg));transform-style:preserve-3d}
.bcard{position:absolute;inset:0;border-radius:10px;background:var(--img) center/cover #31502a;box-shadow:0 40px 80px -30px rgba(0,0,0,.45);padding:22px 18px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:16px;opacity:0;filter:blur(16px);transform:translateY(60px);transition:opacity 1.2s var(--ease),filter 1.3s var(--ease),transform 1.4s var(--ease)}
.branch.in .bcard{opacity:1;filter:none;transform:none}
.b-signal{position:relative}
.b-signal p{display:flex;align-items:center;gap:6px;font-size:11px}
.dot{width:6px;height:6px;border-radius:50%;background:#b9f08f}
.info{margin-left:auto;width:13px;height:13px;border-radius:50%;border:1px solid currentColor;font-size:8px;display:grid;place-items:center;font-style:normal;opacity:.6}
.hatch{width:100%;margin-top:8px}
.b87{position:absolute;left:54.5%;top:52%;translate:-50% -50%;background:#fff;color:#111;font-size:9px;font-weight:600;border-radius:10px;padding:1px 6px}
.b-list{list-style:none;display:grid;gap:6px;font-size:10.5px}
.b-list li{display:flex;align-items:center;gap:7px;opacity:0;transform:translateX(-6px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.b-list li i{width:9px;height:9px;border-radius:50%;border:1.5px solid #fff;display:grid;place-items:center}
.b-list li i::after{content:"";width:3px;height:3px;border-radius:50%;background:#fff}
.b-list li.on{opacity:1;transform:none}
.chip{position:absolute;border-radius:10px;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.8);box-shadow:0 18px 40px -18px rgba(0,0,0,.3);color:#111;transform:translateZ(60px) scale(.6);opacity:0;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.chip.on{opacity:1;transform:translateZ(60px)}
.c-gain{left:-34%;top:6%;width:168px;padding:10px}
.c-gain b{display:block;font-size:20px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.c-gain small{font-size:9.5px;color:#777}
.c-gain .info{position:absolute;right:9px;top:9px}
.cbtn{display:flex;justify-content:space-between;align-items:center;margin-top:8px;background:#111;color:#fff;border-radius:6px;font-size:10px;padding:6px 8px}
.cbtn i{width:10px;height:10px;border-radius:50%;background:#fff}
.c-alert{right:-30%;bottom:9%;width:150px;padding:8px 10px;font-size:10px;background:rgba(235,235,235,.85)}
.c-alert b{display:block;font-size:10px;font-weight:500;color:#666;margin-bottom:4px}
.c-alert p{background:#fff;border-radius:6px;padding:6px 7px;line-height:1.35}

/* ---------- red ---------- */
.net{position:relative;background:radial-gradient(70% 60% at 15% 10%,#e8f3df 0%,rgba(255,255,255,0) 60%),#fff;padding:100px 0 80px;overflow:hidden}
.h-two.left{text-align:left;font-size:clamp(28px,3.2vw,42px)}
.net-stage{position:relative;height:clamp(360px,52vw,600px);perspective:1600px;margin-top:-20px}
.net-plane{position:absolute;inset:0 var(--pad);transform:rotateX(calc(14deg - var(--p,0)*16deg)) rotateZ(calc(var(--p,0)*5deg - 2.5deg)) translateY(calc(var(--p,0)*-30px));transform-origin:50% 55%}
.net-svg{position:absolute;inset:0;width:100%;height:100%}
.net-svg path{vector-effect:non-scaling-stroke}
.net-svg .grid path{stroke:rgba(0,0,0,.045);stroke-width:1;fill:none}
.net-svg .lines path{fill:none;stroke:#bcc5b4;stroke-width:1.1;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset 2.2s var(--ease)}
.net-svg .lines path.faint{stroke:#e2e5de}
.net.in .net-svg .lines path{stroke-dashoffset:0}
.node{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;text-align:center;font-size:9px;letter-spacing:.08em;color:#666;opacity:0;scale:.6;transition:opacity .8s var(--ease),scale .9s var(--ease);transition-delay:var(--dl,.2s)}
.net.in .node{opacity:1;scale:1}
.node small{display:block;margin-top:6px;line-height:1.3;position:absolute;left:50%;translate:-50% 0;white-space:nowrap}
.n-dot b{display:block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a8c98a,#4f7a37);box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.n-sq b{display:block;width:16px;height:16px;border:1px solid #d9d9d7;background:#f7f7f6}
.n-ghost b{display:block;width:8px;height:8px;border:1px solid #e0e0de;background:#fff}
.core p{font-size:10px;font-weight:600;color:#111;margin-bottom:6px;letter-spacing:.06em}
.frame{position:relative;display:grid;place-items:center;width:54px;height:54px}
.frame i{position:absolute;width:10px;height:10px;border:1.2px solid #888}
.frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.frame b{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#a8c98a,#4f7a37);display:grid;place-items:center}
.frame b svg{width:12px;height:12px;fill:#fff}
.core small{color:#c2c2c0;letter-spacing:0;font-size:9px;margin-top:8px}
.caps{margin-top:30px}
.caps-row{display:grid;grid-template-columns:1.3fr repeat(3,minmax(0,1fr));gap:36px;margin-top:22px;align-items:start}
.caps-big{font-size:clamp(20px,2vw,26px);line-height:1.12;text-transform:uppercase;color:#a9a9a9;letter-spacing:-.02em;max-width:10em}
.caps-row .ic{width:16px;height:16px;color:#111;fill:none}
.caps-row p{color:var(--faint);font-size:13px;margin-top:6px}

/* ---------- integraciones ---------- */
.integ{background:#fafafa;padding:110px 0 100px;overflow:hidden}
.arc{position:relative;height:clamp(200px,24vw,280px);margin-top:30px}
.arc-center{position:absolute;left:50%;top:22%;translate:-50% 0;z-index:3;width:clamp(180px,20vw,230px);height:52px;border-radius:999px;background:url(/web/img/pill-niebla.webp) center/cover;display:grid;place-items:center;color:#fff;font-size:12.5px;font-weight:500;letter-spacing:.02em;box-shadow:0 18px 40px -16px rgba(0,0,0,.35);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.arc-center::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(0,0,0,.12)}
.arc-center span{position:relative}
.ai{position:absolute;left:50%;top:0;width:44px;height:44px;margin:-22px;border-radius:50%;background:#fff;box-shadow:0 8px 22px -8px rgba(0,0,0,.25);display:grid;place-items:center;will-change:transform,opacity}
.ai svg{width:22px;height:22px}
.ai.od svg{width:30px}
.integ-lead{font-size:14px;font-weight:500;margin-top:10px}
.integ-sub{max-width:30em;margin:10px auto 0;color:var(--faint);font-size:13.5px}

/* ---------- comparación ---------- */
.cmp{position:relative;background:#c5c5c3;padding:110px 0 0;overflow:hidden;color:#fff}
.cmp-bg{position:absolute;inset:0}
.cmp-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(calc(1.12 - var(--p,0)*.12));transform-origin:50% 100%}
.cmp-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(150,150,148,.35) 0%,rgba(150,150,148,.1) 40%,rgba(0,0,0,0) 60%)}
.cmp-head{position:relative}
.cmp-sub{max-width:30em;margin:14px auto 0;font-size:13.5px;color:rgba(255,255,255,.82)}
.tbl-wrap{position:relative;padding:60px var(--pad) 70px}
.tbl{position:relative;max-width:820px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 120px 120px;grid-template-rows:auto auto auto;font-size:12.5px}
.t-cap{grid-column:1;grid-row:1;align-self:end;padding:0 18px 8px;font-size:11px;color:rgba(255,255,255,.75)}
.t-rows{grid-column:1/3;grid-row:2;background:linear-gradient(180deg,rgba(120,118,112,.75),rgba(70,68,60,.75));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:8px 0 0 0;padding:8px 0}
.t-rows p{height:38px;display:flex;align-items:center;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.t-foot{grid-column:1/3;grid-row:3;padding:12px 18px;background:rgba(40,38,32,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.t-foot b{display:block;font-weight:500;font-size:12px}
.t-foot small{font-size:10px;opacity:.6}
.t-nouz{grid-column:2;grid-row:1/4;position:relative;z-index:2;background:var(--cream);color:#111;border-radius:8px;margin-top:-6px;display:flex;flex-direction:column;align-items:center;padding:12px 0 0;box-shadow:0 20px 40px -20px rgba(0,0,0,.4)}
.t-brand{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;letter-spacing:-.04em;height:30px}
.t-brand svg{width:13px;height:13px;fill:#111}
.t-brand.o{font-weight:400;font-size:10.5px;letter-spacing:0;color:rgba(255,255,255,.7)}
.t-nouz span,.t-other span{height:38px;display:grid;place-items:center;width:100%}
.t-nouz>span:first-of-type,.t-other>span:first-of-type{margin-top:6px}
.t-nouz svg:not(.t-brand svg){width:15px;height:15px;opacity:0;transform:scale(.4);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.t-nouz span.on svg{opacity:1;transform:none}
.t-val{margin-top:auto;height:52px;display:grid;place-items:center;font-weight:500;font-size:12px}
.t-other{grid-column:3;grid-row:1/4;display:flex;flex-direction:column;align-items:center;padding-top:12px;color:#fff;background:linear-gradient(180deg,rgba(150,148,140,.55),rgba(80,78,70,.55));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:0 8px 8px 0;margin:30px 0 0;opacity:calc((var(--p,0) - .3)*4);transform:translateX(calc(max(0, 1 - (var(--p,0) - .3)*4)*60px))}
.t-other .t-brand{height:auto;margin-top:-28px;margin-bottom:8px}
.t-other svg{width:14px;height:14px}
.t-other .no{font-size:10.5px;color:rgba(255,255,255,.6)}
.t-other .t-val{font-weight:400;color:rgba(255,255,255,.8)}
.t-nouz>span:first-of-type{margin-top:6px}

/* ---------- cierre ---------- */
.cta{background:linear-gradient(180deg,#f0f0ef,#e9e9e8);padding:120px 0 60px}
.h-cta{font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.18;letter-spacing:-.045em;margin-top:14px}
.h-cta>span{display:block}
.pimg{display:inline-block;vertical-align:middle;height:.92em;width:0;margin:0 .1em;border-radius:999px;background:var(--img) center/cover;transition:width 1.2s var(--ease),margin 1.2s var(--ease);transition-delay:var(--d)}
.in .pimg,.pimg.in{width:2.2em;margin:0 .22em}
.cta-sub{max-width:30em;margin:16px auto 0;color:var(--faint);font-size:13.5px}
.cta-btns{display:flex;justify-content:center;gap:10px;margin-top:26px}
.pill.light{background:#fff;color:#111;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.pill.dark{background:#111;color:#fff;--dot:#111}
.live{margin-top:110px}
.live-head{display:flex;justify-content:space-between;border-bottom:1px solid #d9d9d7;padding-bottom:10px;font-size:12px;text-transform:uppercase;letter-spacing:.02em}
.live-head span{color:#999}
.live-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin-top:30px}
.lic{display:block;width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#a8c98a,#5d8a43);box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.live-row h3{font-size:14px;margin-top:12px}
.live-row p{font-size:12px;color:var(--faint);margin-top:2px}

/* ---------- pie ---------- */
.foot{position:relative;background:linear-gradient(180deg,#e9e9e8,#f4f4f3);padding:90px 0 0;overflow:hidden}
.foot-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;border-top:1px solid #d9d9d7;padding-top:60px}
.foot-hi h2{font-weight:400;font-size:clamp(28px,2.8vw,38px);line-height:1.1;letter-spacing:-.04em;max-width:9em}
.foot-hi p{color:var(--faint);font-size:13px;margin-top:14px;max-width:22em}
.foot-col{border-left:1px solid #dcdcda;padding-left:18px}
.foot-col h3{margin-top:0}
.foot-col p{color:var(--faint);font-size:12.5px;margin-top:4px}
.foot-col a{display:inline-flex;align-items:center;gap:8px;margin-top:34px;font-size:13px}
.foot-col a i{width:14px;height:14px;border-radius:3px;background:var(--red);color:#fff;display:grid;place-items:center}
.foot-col a i svg{width:10px;height:10px}
.legal{display:flex;justify-content:space-between;font-size:11.5px;color:#999;margin-top:60px}
.legal a{margin-left:18px}
.legal a:hover{color:#111}
.foot-rocks{position:relative;margin-top:30px;line-height:0}
.foot-rocks img{width:100%;height:auto;display:block}

/* ---------- celular ---------- */
@media (max-width:900px){
  .menu,.lang{display:none}
  .intro-head{flex-direction:column;gap:0}
  .intro-head .side{margin-top:16px}
  .cols3{grid-template-columns:1fr;gap:28px;margin-top:44px}
  .cards3{grid-template-columns:1fr;gap:14px}
  .pcard{aspect-ratio:4/4.3}
  .caps-row{grid-template-columns:1fr;gap:26px}
  .live-row{grid-template-columns:1fr 1fr;gap:26px 18px}
  .foot-row{grid-template-columns:1fr;gap:30px}
  .foot-col{border-left:0;padding-left:0;border-top:1px solid #dcdcda;padding-top:18px}
  .foot-col a{margin-top:14px}
}
@media (max-width:640px){
  .nav{height:58px}
  .nav .pill.ghost{display:none}
  .logo{font-size:20px}
  .hero{min-height:600px}
  .hero-txt{padding-top:104px}
  .dash-wrap{width:165vw;left:72%;top:max(46svh,330px)}
  .r-left{width:40vw;left:-14vw;bottom:-10vh}
  .rock-stack{width:84vw;right:-34vw;bottom:-6vh}
  .intro{padding:60px 0 80px}
  .c-gain{left:-14%;top:-6%;width:142px;padding:8px}
  .c-gain b{font-size:16px}
  .c-alert{right:-12%;bottom:-4%;width:132px}
  .rama-stack{left:-60vw;right:-60vw}
  .net{padding-top:70px}
  .net-stage{height:330px;margin-top:10px}
  .net-plane{inset:0 -40px}
  .node small{font-size:8px}
  .integ{padding:80px 0 70px}
  .ai{width:38px;height:38px;margin:-19px}
  .ai svg{width:19px;height:19px}
  .tbl{grid-template-columns:minmax(0,1fr) 74px 74px;font-size:11px}
  .t-rows p,.t-nouz span,.t-other span{height:46px}
  .t-rows p{padding:0 12px;line-height:1.25}
  .t-foot{padding:10px 12px}
  .t-val{font-size:11px;text-align:center;line-height:1.2}
  .cta{padding-top:90px}
  .h-cta{font-size:clamp(25px,7.2vw,34px)}
  .live{margin-top:70px}
  .legal{flex-direction:column;gap:8px}
  .legal a{margin:0 18px 0 0}
}
@media (prefers-reduced-motion:reduce){
  [data-words] .w,.fade,.rise,.glass,.dash,.bcard,.chip,.b-list li,.node,.pimg{transition:none!important;opacity:1!important;filter:none!important;transform:none!important;translate:none!important;scale:none!important}
  .chart-cover{display:none}
  .pimg{width:2.2em}
  .net-svg .lines path{stroke-dashoffset:0;transition:none}
}

/* portada: foto de naturaleza suave y desenfocada; el panel flota encima en un marco de vidrio */
.scene{position:absolute;inset:-1%;background:url(/web/img/portada-valle.webp) 50% 60%/cover no-repeat;pointer-events:none;z-index:0;--k:.15;animation:acercar 40s ease-in-out infinite alternate}
@keyframes acercar{from{scale:1}to{scale:1.04}}
.hero::before{background:radial-gradient(55% 45% at 50% 30%,rgba(255,255,255,.75),rgba(255,255,255,0) 72%)}
/* nubes reales en capas: se mezclan con la foto (screen) y cada una deriva a su ritmo; el mouse las corre según su profundidad */
.clouds{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.clouds i{position:absolute;left:-35%;width:170%;-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent),linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-composite:intersect;background:url(/web/img/nubes.webp) center/100% 100% no-repeat;will-change:transform;translate:calc(var(--mx,0)*var(--k)*-60px) calc(var(--my,0)*var(--k)*-20px + var(--hp,0)*var(--k)*-120px)}
.clouds .c1{--k:.6;top:8%;height:42%;opacity:.55;animation:deriva 90s ease-in-out infinite alternate}
.clouds .c2{--k:.9;top:30%;height:36%;opacity:.4;transform:scaleX(-1);animation:deriva2 130s ease-in-out infinite alternate}
.clouds .c3{--k:1.2;top:56%;height:34%;opacity:.5;filter:blur(2px);animation:deriva 70s ease-in-out infinite alternate-reverse}
@keyframes deriva{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
@keyframes deriva2{from{transform:scaleX(-1) translateX(-8%)}to{transform:scaleX(-1) translateX(8%)}}
@media (prefers-reduced-motion:reduce){.clouds i{animation:none}}
.dash{border-radius:16px 16px 0 0;box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 0 11px rgba(255,255,255,.28),0 60px 120px -40px rgba(30,45,35,.45)}
@media (prefers-reduced-motion:reduce){.scene{animation:none}}