/* Capa visual inspirada en fluent2.microsoft.design: malla pastel, iconos 3D, formas vectoriales y movimiento */
:root{
  --mesh-top:#ecebf3;
  --m1:#fde3d3;--m2:#d3e7fa;--m3:#e6dbf7;--m4:#d9f2e4;
  --glow:rgba(15,108,189,.18);
  --brand-grad:linear-gradient(120deg,#0f6cbd 0%,#6b46c8 52%,#af33a1 100%);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --mesh-top:#26232f;--m1:#4a2a1c;--m2:#143252;--m3:#35224f;--m4:#16392a;--glow:rgba(71,158,245,.18)}}
:root[data-theme="dark"]{--mesh-top:#26232f;--m1:#4a2a1c;--m2:#143252;--m3:#35224f;--m4:#16392a;--glow:rgba(71,158,245,.18)}

/* degradados 3D por empresa */
.u-tech{--g1:#4aa6f2;--g2:#0f5fb8;--gs:rgba(15,108,189,.45)}
.u-studio{--g1:#f58a4d;--g2:#c43501;--gs:rgba(196,53,1,.4)}
.u-learning{--g1:#52b552;--g2:#0e700e;--gs:rgba(14,112,14,.4)}
.u-health{--g1:#d46ac6;--g2:#8a2a9c;--gs:rgba(175,51,161,.42)}
.u-group{--g1:#ff9a5a;--g2:#6b46c8;--gs:rgba(107,70,200,.4)}

/* fondo: malla suave que se funde con la pagina */
html{overflow-x:clip}
body{position:relative;isolation:isolate;overflow-x:clip}
body:before{content:"";position:absolute;inset:0 0 auto 0;height:min(1100px,120vh);z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 34% at 12% 38%,var(--m1) 0,transparent 70%),
    radial-gradient(40% 36% at 82% 30%,var(--m2) 0,transparent 70%),
    radial-gradient(34% 30% at 52% 62%,var(--m3) 0,transparent 70%),
    radial-gradient(30% 26% at 92% 70%,var(--m4) 0,transparent 70%),
    linear-gradient(180deg,var(--mesh-top) 0,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
  animation:drift 22s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,2%,0) scale(1.06)}}

/* tipografia */
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:700}
.display-1{font-weight:700;letter-spacing:-.02em;line-height:1.05}
.display-2{font-weight:600;letter-spacing:-.01em}
.hero-h1{font-size:clamp(36px,5.2vw,72px)!important}
.flow{margin-top:18px;font-size:clamp(22px,3vw,34px);font-weight:600;line-height:1.3}
.flow-word{font-family:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace;font-weight:400;display:inline-block;transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);color:var(--tech)}
.flow-word.out{opacity:0;transform:translateY(-8px)}
.flow-word.pre{opacity:0;transform:translateY(8px);transition:none}
.flow-word[data-u=studio]{color:var(--studio)}.flow-word[data-u=learning]{color:var(--learning)}.flow-word[data-u=health]{color:var(--health)}

/* cabecera */
.site-header{background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.nav>ul>li>a:not(.btn){border-radius:999px}
.theme-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.theme-toggle .sw-track{width:40px;height:22px;border-radius:999px;border:2px solid var(--ink);display:inline-flex;align-items:center;padding:0 3px;transition:background-color var(--dur) var(--ease)}
.theme-toggle .sw-knob{width:12px;height:12px;border-radius:50%;background:var(--ink);transition:transform var(--dur) var(--ease)}
.theme-toggle[aria-pressed=true] .sw-knob{transform:translateX(16px)}
.bar-tools{display:flex;align-items:center;gap:12px}
@media (width<=520px){.theme-toggle .sw-label{display:none}}

/* iconos 3D */
.tile3d,.empresa .ico,.card>.ico{position:relative;display:inline-grid;place-items:center;flex:none;color:#fff;
  background:linear-gradient(150deg,var(--g1,#4aa6f2),var(--g2,#0f5fb8));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -8px 14px rgba(0,0,0,.14),0 12px 22px -8px var(--gs,rgba(15,108,189,.4))}
.tile3d:after,.empresa .ico:after,.card>.ico:after{content:"";position:absolute;left:8%;top:6%;width:70%;height:42%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent);pointer-events:none}
.tile3d svg,.empresa .ico svg,.card>.ico svg{position:relative;z-index:1}
.empresa .ico,.card>.ico{width:52px;height:52px;border-radius:16px;margin-bottom:6px}
.empresa .ico svg,.card>.ico svg{width:26px;height:26px}
.card>.ico{--g1:#ff9a5a;--g2:#6b46c8;--gs:rgba(107,70,200,.38)}
.porque-cards .card:nth-child(2)>.ico{--g1:#4aa6f2;--g2:#0f5fb8;--gs:rgba(15,108,189,.4)}
.porque-cards .card:nth-child(3)>.ico{--g1:#52b552;--g2:#0e700e;--gs:rgba(14,112,14,.4)}
.empresa .ico-u{background:linear-gradient(150deg,var(--g1),var(--g2));color:#fff}

/* tarjetas amplias y suaves */
.card{border-radius:var(--radius-lg);padding:28px;border-color:transparent;box-shadow:var(--sh4);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh16)}
.empresa{border-radius:var(--radius-lg)!important;overflow:hidden;background:linear-gradient(160deg,var(--ct) 0%,var(--surface) 62%)!important;border:1px solid var(--cb)!important;padding:28px!important;box-shadow:var(--sh2);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)!important}
.empresa:hover{transform:translateY(-6px)!important;box-shadow:var(--sh16)!important}
.empresa:before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,var(--g1),transparent);opacity:.22;pointer-events:none}
.empresa .top{position:relative}
.band-white{background:color-mix(in srgb,var(--surface) 70%,transparent);border-color:transparent}
.fila{border-radius:var(--radius-lg)!important}
.servicio,.problema{border-radius:var(--radius-lg)!important}
.servicio{background:linear-gradient(160deg,var(--ct),var(--surface))!important}
.form{border-radius:var(--radius-lg)!important}

/* hero de portada: losetas flotantes brillantes */
.hero-art{position:relative}
.tiles{gap:16px!important}
.tile{background:linear-gradient(150deg,var(--g1),var(--g2))!important;border-radius:28px!important;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -14px 24px rgba(0,0,0,.14),0 22px 36px -14px var(--gs);
  animation:floaty 7s ease-in-out infinite;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.tile:after{content:"";position:absolute;left:-10%;top:-30%;width:90%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.4),transparent);pointer-events:none}
.tile:nth-child(2){animation-delay:-1.8s}.tile:nth-child(3){animation-delay:-3.6s}.tile:nth-child(4){animation-delay:-5.2s}
.tile:hover{scale:1.04;animation-play-state:paused}
.tile-name{font-weight:700!important;position:relative;z-index:1}
.tile .tile-top{position:relative;z-index:1}
.tile svg{width:30px!important;height:30px!important}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* formas vectoriales decorativas */
.deco{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.deco svg{position:absolute;max-width:none}
.deco .d1{right:34%;bottom:2%;width:110px;animation:spin 40s linear infinite;opacity:.8}
.deco .d2{right:5%;top:8%;width:220px;animation:spin 60s linear infinite reverse;opacity:.7}
.deco .d3{right:3%;bottom:3%;width:170px;opacity:.9}
.deco .d3 path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 3.2s var(--ease-out) .4s forwards,breathe 7s ease-in-out 3.8s infinite}
.deco .brace{position:absolute;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:120px;line-height:1;color:var(--health);opacity:.16;animation:floaty 9s ease-in-out infinite}
.deco .b1{left:46%;top:6%}.deco .b2{right:30%;top:78%;color:var(--tech);animation-delay:-4s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes breathe{0%,100%{opacity:.9}50%{opacity:.5}}
.hero{position:relative}

/* panel suave de cifras y bandas */
.band-soft{background:radial-gradient(40% 90% at 10% 20%,var(--m1),transparent 70%),radial-gradient(40% 90% at 90% 10%,var(--m2),transparent 70%),radial-gradient(40% 90% at 55% 110%,var(--m3),transparent 70%),var(--surface);color:var(--ink);border-radius:var(--radius-lg);width:calc(100% - 32px);max-width:var(--wrap);margin:40px auto}
.band-soft .eyebrow{color:var(--brand-fg)}
.band-soft .lead,.band-soft .texto{color:var(--body)!important}
.band-soft .valor{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:700}
.band-soft>.wrap{max-width:var(--wrap)}

/* lista tipografica grande, como los nombres de plataforma de Fluent */
.explora .section-head{margin-bottom:24px}
.biglist{list-style:none;margin:0;padding:0;display:grid}
.biglist a{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:44px;padding:clamp(6px,1.2vw,14px) 0;border-top:1px solid var(--line);text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:300;font-size:clamp(40px,8vw,104px);line-height:1.1;letter-spacing:-.02em;transition:padding-left .3s var(--ease-out),color .2s var(--ease)}
.biglist li:last-child a{border-bottom:1px solid var(--line)}
.biglist a .bl-arrow{width:clamp(28px,4vw,56px);height:clamp(28px,4vw,56px);fill:currentColor;opacity:0;transform:translateX(-12px);transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);flex:none}
.biglist a:hover,.biglist a:focus-visible{padding-left:clamp(8px,2vw,28px)}
.biglist a:hover .bl-arrow,.biglist a:focus-visible .bl-arrow{opacity:1;transform:none}
.biglist .bl-t:hover,.biglist li:nth-child(1) a:hover{color:var(--tech)}
.biglist li:nth-child(2) a:hover{color:var(--studio)}.biglist li:nth-child(3) a:hover{color:var(--learning)}.biglist li:nth-child(4) a:hover{color:var(--health)}
.biglist small{font-family:var(--font);font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0;align-self:flex-start;margin-top:.9em}

/* cierre vibrante */
.cta,.cierre{position:relative;overflow:hidden}
.cta{background:var(--brand-grad)!important;background-size:160% 160%!important;animation:shift 14s ease-in-out infinite alternate;color:#fff!important}
.cta:before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent);pointer-events:none}
.cta p{color:#f4f0fb!important}
@keyframes shift{to{background-position:100% 50%}}

/* paginas de empresa */
.hero:not(.wrap){overflow:hidden;background:
  radial-gradient(50% 90% at 88% 10%,color-mix(in srgb,var(--g1) 70%,var(--c)),transparent 70%),
  radial-gradient(40% 70% at 70% 110%,color-mix(in srgb,var(--g2) 80%,#000),transparent 70%),var(--c)}
.hero-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-deco .big{position:absolute;right:4%;top:9%;width:clamp(110px,13vw,180px);aspect-ratio:1;border-radius:24%;rotate:8deg;
  background:linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 30px 60px -20px rgba(0,0,0,.35);display:grid;place-items:center;animation:floaty 8s ease-in-out infinite;color:#fff}
.hero-deco .big svg{width:46%;height:46%;fill:currentColor;opacity:.95}
.hero-deco .ring{position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:50%;border:2px dashed rgba(255,255,255,.4);animation:spin 50s linear infinite}
.hero-deco .ring2{position:absolute;left:46%;bottom:-90px;width:200px;height:200px;border-radius:50%;border:2px dashed rgba(255,255,255,.25);animation:spin 70s linear infinite reverse}
@media (width<=900px){.hero-deco .big{opacity:.35;right:-30px}}
.hero .wrap{position:relative;z-index:1}
.submarca{border-radius:var(--radius)!important}

/* aparicion al desplazarse */
.rv{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  body:before,.tile,.deco *,.hero-deco *,.cta{animation:none!important}
  .deco .d3 path{stroke-dashoffset:0}
}
@media (width<=720px){.deco .d2,.deco .brace{display:none}.deco .d1{opacity:.5}}