/* =====================================================================
   Creación de Apps · EXPERIENCIA INMERSIVA v4.9.0
   1) Flash de revelación  2) Arranque realista  3) Universo vivo
   4) Portafolio modal (teléfono que despierta)  5) App launch + screen-off
   Se carga DESPUÉS de styles.css y redefine el simulador.
   ===================================================================== */

/* ---------- 1 · FLASH DE REVELACIÓN (salida del wormhole) ---------- */
.apps-flash{position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,#ffffff,#eaf2ff 42%,#c9dcff 72%);
  opacity:0;animation:apps-flash-out 1.25s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes apps-flash-out{0%{opacity:1;transform:scale(1.06);filter:blur(0)}14%{opacity:1}100%{opacity:0;transform:scale(1);filter:blur(10px)}}

/* ---------- 2 · ZOOM AL TELÉFONO ELEGIDO ---------- */
.decision-stage[data-mode="android"],.decision-stage[data-mode="ios"]{overflow:visible}
.decision-stage[data-mode="android"] .decision-choice--android,
.decision-stage[data-mode="ios"] .decision-choice--apple{z-index:4;transform:none}
.decision-stage[data-mode="android"] .decision-choice--android .device__phone,
.decision-stage[data-mode="ios"] .decision-choice--apple .device__phone{
  animation:none;transform:translate(-50%,-4%) scale(2.7);filter:brightness(1.12) saturate(1.05);
  transition:transform .6s cubic-bezier(.5,0,.3,1),filter .6s ease}
.decision-stage[data-mode="android"] .decision-choice--android .device__aura,
.decision-stage[data-mode="ios"] .decision-choice--apple .device__aura{opacity:0}

/* ---------- SIMULADOR: contenedor ---------- */
.os-sim{display:block;background:transparent}

/* ---------- 2 · SECUENCIA DE ARRANQUE (pantalla negra + logo) ---------- */
.os-sim[data-os="android"]{--os-accent:#3ddc84;--os-accent-rgb:61,220,132;--os-bg:#06170f;--os-bg2:#0a2519}
.os-sim[data-os="ios"]{--os-accent:#0a84ff;--os-accent-rgb:10,132,255;--os-bg:#070a14;--os-bg2:#0d1730}
.os-boot{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:#000;opacity:1;transition:opacity .65s ease,visibility 0s linear .65s}
.os-sim[data-phase="ready"] .os-boot{opacity:0;visibility:hidden;pointer-events:none}
.os-boot__logo{display:none;width:clamp(66px,13vh,116px);height:clamp(66px,13vh,116px)}
.os-boot__logo svg{width:100%;height:100%}
.os-sim[data-os="android"] .os-boot__logo--android{display:block;color:var(--android);
  animation:boot-glow 1.8s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(var(--android-rgb),.85))}
.os-sim[data-os="ios"] .os-boot__logo--ios{display:block;color:#fff;
  animation:boot-glow 2.1s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(255,255,255,.75))}
.os-boot__load{width:132px;height:4px;border-radius:3px;background:rgba(255,255,255,.16);overflow:hidden;display:none}
.os-boot__load i{display:block;height:100%;width:38%;border-radius:3px;background:#fff;animation:boot-load 1.15s ease-in-out infinite}
.os-sim[data-os="ios"] .os-boot__load{display:block}
@keyframes boot-glow{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@keyframes boot-load{0%{transform:translateX(-130%)}100%{transform:translateX(370%)}}

/* ---------- 3 · UNIVERSO VIVO (landing del SO) ---------- */
.os-land{position:absolute;inset:0;z-index:5;opacity:0;visibility:hidden;overflow:hidden;
  background:var(--os-bg,#05070f);transition:opacity .7s ease,visibility 0s linear .75s}
.os-sim[data-phase="ready"] .os-land{opacity:1;visibility:visible;transition:opacity .8s ease .1s}
.os-land__bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% -8%,rgba(var(--os-accent-rgb),.18),transparent 60%),linear-gradient(180deg,var(--os-bg),var(--os-bg2))}
.os-land__veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,12,.1),rgba(3,5,12,.55))}
.os-land__scroll{position:absolute;inset:0;z-index:2;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth}
.os-land__bar{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px clamp(16px,4vw,40px);background:linear-gradient(180deg,rgba(4,7,16,.78),transparent);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.os-chip{display:inline-flex;align-items:center;gap:9px;font-weight:800;color:#fff;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
.os-chip svg{width:20px;height:20px;color:var(--os-accent)}
.os-sim[data-os="ios"] .os-chip svg{color:#fff}
.os-escape{position:static;translate:none;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;
  font-weight:800;font-size:.88rem;color:#fff;background:rgba(8,14,30,.6);border:1px solid rgba(255,255,255,.2);cursor:pointer;
  transition:transform .25s var(--ease),border-color .25s,background .25s}
.os-escape svg{width:18px;height:18px;transform:rotate(180deg)}
.os-escape:hover{transform:translateY(-2px);border-color:rgba(var(--os-accent-rgb),.7);background:rgba(var(--os-accent-rgb),.16)}
.os-escape:focus-visible{outline:2px solid var(--os-accent);outline-offset:3px}

.os-land__scroll>section{max-width:960px;margin:0 auto;padding:clamp(40px,7vh,88px) clamp(20px,5vw,40px)}
.os-hero{min-height:58vh;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:18px}
.os-hero__eyebrow{margin:0;font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--os-accent);font-weight:800}
.os-sim[data-os="ios"] .os-hero__eyebrow{color:#8fc2ff}
.os-hero__title{margin:0;font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-weight:950;text-transform:uppercase;line-height:.98;font-size:clamp(2.1rem,5.4vw,4.3rem);text-wrap:balance}
.os-sim[data-os="ios"] .os-hero__title{font-family:"SF Pro Display","Segoe UI",-apple-system,Helvetica,Arial,sans-serif;text-transform:none;font-weight:800;letter-spacing:-.02em}
.os-hero__lead{margin:0 auto;max-width:52ch;color:var(--muted-strong);font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.55}
.os-hero__scrollcue{margin-top:16px;display:inline-flex;flex-direction:column;align-items:center;gap:9px;color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.os-hero__scrollcue span{width:22px;height:34px;border:2px solid rgba(255,255,255,.3);border-radius:12px;position:relative}
.os-hero__scrollcue span::before{content:"";position:absolute;left:50%;top:6px;translate:-50% 0;width:3px;height:7px;border-radius:2px;background:var(--os-accent);animation:scrollcue 1.5s ease-in-out infinite}
@keyframes scrollcue{0%,100%{transform:translate(-50%,0);opacity:1}70%{transform:translate(-50%,12px);opacity:.15}}

.os-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}
.os-feat{padding:22px;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.os-sim[data-os="ios"] .os-feat{background:rgba(255,255,255,.08);border-radius:26px;border-color:rgba(255,255,255,.16)}
.os-feat__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;margin-bottom:14px;color:#fff;
  background:linear-gradient(150deg,rgba(var(--os-accent-rgb),.95),rgba(var(--os-accent-rgb),.4));box-shadow:0 8px 22px -6px rgba(var(--os-accent-rgb),.6)}
.os-sim[data-os="android"] .os-feat__icon{border-radius:50%}
.os-feat__icon svg{width:24px;height:24px}
.os-feat h4{margin:0 0 7px;font-size:1.08rem}
.os-feat p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}

.os-pf{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.os-pf__eyebrow{margin:0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--os-accent);font-weight:800}
.os-pf__title{margin:0;font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:900}
.os-pf__text{margin:0 auto;max-width:46ch;color:var(--muted-strong)}
.deadphone{position:relative;margin:16px 0 4px;width:clamp(150px,22vw,208px)}
.deadphone__frame{position:relative;width:100%;aspect-ratio:9/19;border-radius:30px;padding:8px;background:linear-gradient(150deg,#1b2130,#0a0e18);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px rgba(2,6,20,.6),inset 0 2px rgba(255,255,255,.08)}
.deadphone__screen{display:block;width:100%;height:100%;border-radius:22px;background:radial-gradient(120% 80% at 50% 0,rgba(255,255,255,.05),#020308 62%)}
.deadphone__cam{position:absolute;top:15px;left:50%;translate:-50% 0;width:7px;height:7px;border-radius:50%;background:#05070f;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.deadphone__pulse{position:absolute;inset:0;border-radius:34px;pointer-events:none;animation:dead-pulse 2.4s ease-out infinite}
@keyframes dead-pulse{0%{box-shadow:0 0 0 0 rgba(var(--os-accent-rgb),.45)}100%{box-shadow:0 0 0 26px rgba(var(--os-accent-rgb),0)}}
.os-power{display:inline-flex;align-items:center;gap:11px;min-height:52px;padding:0 26px;border-radius:999px;cursor:pointer;font-weight:900;font-size:.98rem;
  color:#05070f;background:linear-gradient(120deg,#fff,var(--os-accent));border:0;box-shadow:0 16px 40px -12px rgba(var(--os-accent-rgb),.85);transition:transform .25s var(--ease),box-shadow .25s}
.os-power:hover{transform:translateY(-2px);box-shadow:0 20px 46px -12px rgba(var(--os-accent-rgb),.95)}
.os-power:focus-visible{outline:2px solid #fff;outline-offset:3px}
.os-power__dot{position:relative;width:11px;height:11px;border-radius:50%;background:rgba(5,7,15,.5)}
.os-power__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#05070f;animation:power-blink 1.6s ease-in-out infinite}
@keyframes power-blink{0%,100%{opacity:1}50%{opacity:.25}}
.os-final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:clamp(60px,10vh,120px)!important}
.os-final h3{margin:0;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:900}
.os-final p{margin:0 auto;max-width:44ch;color:var(--muted)}

/* Fondo VIVO: formas Material (Android) / burbujas glass (iOS) */
.mat-blob{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:var(--r,50%);background:var(--c);opacity:.15;filter:blur(2px);
  animation:blob-float var(--dur,22s) ease-in-out var(--delay,0s) infinite alternate}
.mat-glyph{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);color:rgba(var(--os-accent-rgb),.2);
  animation:blob-float var(--dur,26s) ease-in-out var(--delay,0s) infinite alternate}
.mat-glyph svg{width:100%;height:100%}
.glass-blob{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),rgba(var(--os-accent-rgb),.14) 58%,transparent 72%);
  border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:.5;
  animation:blob-float var(--dur,28s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes blob-float{0%{transform:translate3d(0,0,0) rotate(0deg)}100%{transform:translate3d(var(--dx,30px),var(--dy,-26px),0) rotate(var(--rot,20deg))}}

/* ---------- 4 · PORTAFOLIO MODAL (sub-ventana) ---------- */
.pf-modal{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility 0s linear .4s}
.pf-modal[data-os="android"]{--os-accent:#3ddc84;--os-accent-rgb:61,220,132;--os-bg:#06170f}
.pf-modal[data-os="ios"]{--os-accent:#0a84ff;--os-accent-rgb:10,132,255;--os-bg:#070a14}
.pf-modal[data-phase="waking"],.pf-modal[data-phase="on"],.pf-modal[data-phase="app"],.pf-modal[data-phase="off"]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--ease)}
.pf-modal__backdrop{position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 40%,rgba(6,10,26,.9),rgba(1,2,8,.98));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pf-close{position:absolute;top:max(16px,3vh);right:max(16px,3vw);z-index:5;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:#fff;background:rgba(8,14,30,.7);border:1px solid rgba(255,255,255,.22);cursor:pointer;transition:transform .2s var(--ease),background .2s}
.pf-close svg{width:20px;height:20px}
.pf-close:hover{transform:rotate(90deg);background:rgba(255,90,90,.28)}
.pf-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pf-stage{position:relative;display:grid;place-items:center;padding:clamp(10px,2vh,22px)}
.pf-phone{position:relative;height:min(88vh,824px);aspect-ratio:9/19.3;max-width:94vw;border-radius:clamp(36px,5vh,54px);padding:clamp(8px,1.1vh,13px);
  background:linear-gradient(155deg,#252b41,#0b1120);border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 0 rgba(255,255,255,.12) inset,0 -4px 16px rgba(0,0,0,.55) inset,0 44px 92px rgba(2,6,20,.72);
  transform:scale(.82);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.24,1),opacity .4s ease}
.pf-modal[data-phase="waking"] .pf-phone,.pf-modal[data-phase="on"] .pf-phone,.pf-modal[data-phase="app"] .pf-phone{transform:scale(1);opacity:1}
.pf-phone__glow{position:absolute;inset:-8% -14%;z-index:-1;border-radius:50%;filter:blur(60px);opacity:0;background:radial-gradient(circle,rgba(var(--os-accent-rgb),.55),transparent 70%);transition:opacity .6s ease}
.pf-modal[data-phase="on"] .pf-phone__glow,.pf-modal[data-phase="app"] .pf-phone__glow{opacity:.55}
.pf-phone__notch{position:absolute;top:14px;left:50%;translate:-50% 0;width:30%;height:12px;background:#05070f;border-radius:0 0 12px 12px;z-index:6}
.pf-modal[data-os="android"] .pf-phone__notch{width:9px;height:9px;border-radius:50%;top:15px}
.pf-screen{position:relative;width:100%;height:100%;border-radius:clamp(28px,4vh,44px);overflow:hidden;background:#05070f;transform-origin:center}
.pf-off{position:absolute;inset:0;z-index:8;background:#000;opacity:1;pointer-events:none}
.pf-modal[data-phase="waking"] .pf-off{animation:pf-wake 1s ease forwards}
.pf-modal[data-phase="on"] .pf-off,.pf-modal[data-phase="app"] .pf-off{opacity:0}
@keyframes pf-wake{0%{opacity:1;background:#000}52%{opacity:.55;background:#000}70%{opacity:.32;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.55),#000 70%)}100%{opacity:0}}

.pf-ui{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;background:linear-gradient(180deg,var(--os-bg,#0a0f20),#05070f)}
.pf-statusbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 20px 4px;font-size:.78rem;font-weight:700;color:#fff}
.pf-statusbar__icons{display:inline-flex;gap:6px}.pf-statusbar__icons svg{width:15px;height:15px}
.pf-body{position:relative;flex:1 1 auto;overflow:hidden}
.pf-home,.pf-app{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.pf-home{padding:10px 18px 20px}
.pf-home__head{text-align:center;padding:8px 0 14px}
.pf-home__head h4{margin:0 0 4px;font-size:1.4rem;font-weight:900}
.pf-home__head p{margin:0;color:var(--muted);font-size:.84rem}
.pf-home__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-align:center;color:var(--faint,#8290af);font-size:.7rem;line-height:1.5}
.pf-modal[data-os="android"] .app-tile__icon{border-radius:50%}
.pf-app{background:linear-gradient(180deg,#0a1022,#05070f);transform:scale(.42);opacity:0;transform-origin:var(--ox,50%) var(--oy,55%);pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.24,1),opacity .38s ease}
.pf-modal[data-phase="app"] .pf-app{transform:scale(1);opacity:1;pointer-events:auto}
.pf-app__bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(8,13,28,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pf-app__back{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:var(--os-accent,#8c8cff);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;padding:6px 6px 6px 0}
.pf-app__back svg{width:18px;height:18px}
.pf-app__title{flex:1;font-size:1rem}
.pf-app__tag{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong)}
.pf-app__view{padding:20px 18px 30px}

.pf-navbar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:64px;padding:10px 0 14px;background:rgba(5,8,18,.6);border-top:1px solid rgba(255,255,255,.05)}
.pf-navbar__btn{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.7);display:grid;place-items:center;padding:6px}
.pf-navbar__btn svg{width:20px;height:20px}
.pf-navbar__btn--home span{display:block;width:16px;height:16px;border:2px solid currentColor;border-radius:5px}
.pf-navbar__btn--recents span{display:block;width:15px;height:15px;border:2px solid currentColor;border-radius:3px}
.pf-navbar__btn:focus-visible{outline:2px solid var(--os-accent);outline-offset:3px;border-radius:8px}
.pf-modal[data-os="ios"] .pf-navbar{gap:0}
.pf-modal[data-os="ios"] .pf-navbar__btn--back,.pf-modal[data-os="ios"] .pf-navbar__btn--recents{display:none}
.pf-modal[data-os="ios"] .pf-navbar__btn--home{padding:0}
.pf-modal[data-os="ios"] .pf-navbar__btn--home span{width:130px;height:5px;border:0;border-radius:3px;background:rgba(255,255,255,.6)}

/* ---------- 5 · SCREEN-OFF (efecto CRT) ---------- */
.pf-modal[data-phase="off"] .pf-screen{animation:crt-off .52s cubic-bezier(.6,.05,.5,.95) forwards}
@keyframes crt-off{
  0%{transform:scale(1);filter:brightness(1)}
  46%{transform:scaleX(1) scaleY(.006);filter:brightness(2.7)}
  62%{transform:scaleX(1) scaleY(.006);filter:brightness(2.7)}
  100%{transform:scaleX(.02) scaleY(.006);filter:brightness(3);opacity:.1}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .apps-flash{display:none!important}
  .os-land__bg *{animation:none!important}
  .os-boot__logo,.os-boot__load i,.deadphone__pulse,.os-power__dot::after,.os-hero__scrollcue span::before{animation:none!important}
  .pf-phone,.pf-off,.pf-screen,.pf-app{animation:none!important;transition:none!important}
  .pf-phone{transform:none!important;opacity:1!important}
  .pf-off{opacity:0!important}
  .pf-app{transform:none!important}
  .decision-stage[data-mode="android"] .decision-choice--android .device__phone,
  .decision-stage[data-mode="ios"] .decision-choice--apple .device__phone{transition:none!important}
}
html.reduce-motion .apps-flash{display:none!important}
html.reduce-motion .os-land__bg *{animation:none!important}
html.reduce-motion .os-boot__logo,html.reduce-motion .os-boot__load i,html.reduce-motion .deadphone__pulse{animation:none!important}
html.reduce-motion .pf-phone{transform:none!important;opacity:1!important;animation:none!important}
html.reduce-motion .pf-off{opacity:0!important;animation:none!important}
html.reduce-motion .pf-app{transform:none!important}

/* ---------- RESPONSIVE ---------- */
@media (max-width:560px){
  .pf-close{width:42px;height:42px}
  .os-land__scroll>section{padding-left:18px;padding-right:18px}
  .os-hero{min-height:64vh}
  .deadphone{width:min(58vw,176px)}
  .decision-stage[data-mode="android"] .decision-choice--android .device__phone,
  .decision-stage[data-mode="ios"] .decision-choice--apple .device__phone{transform:translate(-50%,-2%) scale(2.1)}
}

/* =====================================================================
   ESTADO DE FLUJO · Pantalla de decisión BLOQUEADA (sin scroll)
   El documento nunca hace scroll; el universo del SO se desplaza dentro
   de su propio overlay (.os-land__scroll). Nada existe debajo de las manos.
   ===================================================================== */
html.js body[data-apps]{height:100vh;height:100svh;overflow:hidden}
/* Solo la pantalla de decisión existe en el documento */
body[data-apps] #contenido>:not(#decision){display:none!important}
body[data-apps]>.site-footer{display:none!important}
body[data-apps] .decision-stage{min-height:100svh}
/* Header limpio: sin navegación a secciones inexistentes en este flujo */
body[data-apps] .site-header .desktop-nav,
body[data-apps] .site-header .header-cta,
body[data-apps] .site-header .mobile-menu-button{display:none!important}

/* =====================================================================
   REDISEÑO v5.0 · Decisión minimalista + Universos clonados
   ===================================================================== */
/* Flash: luz blanca pura y brillante */
.apps-flash{background:#ffffff}

/* Fondo abisal: negro puro en la fase de decision */
body[data-apps]{background:#000}
/* Ocultar todo el cromo de agencia y los fondos mientras se decide.
   Reaparecen solo dentro del universo (body.uni-active). */
body[data-apps]:not(.uni-active) .site-header,
body[data-apps]:not(.uni-active) .service-dock,
body[data-apps]:not(.uni-active) .settings-float,
body[data-apps]:not(.uni-active) .apps-universe,
body[data-apps]:not(.uni-active) .ambient-canvas,
body[data-apps]:not(.uni-active) .cosmic-backdrop,
body[data-apps]:not(.uni-active) .cosmic-noise,
body[data-apps]:not(.uni-active) .pointer-glow{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Decision minimalista: Android a la izquierda, titulo al centro, Apple a la derecha */
.decision-stage{display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;gap:clamp(16px,4vw,60px);text-align:center;grid-template-columns:none!important;background:#000;min-height:100svh;padding-left:clamp(16px,5vw,88px);padding-right:clamp(16px,5vw,88px)}
.decision-stage__aura,.decision-stage__scan{display:none!important}
.decision-title{flex:0 1 auto;font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-weight:950;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;margin:0;font-size:clamp(1.9rem,5vw,4.6rem);text-wrap:balance;color:#fff}
.decision-title__l1{display:block}
.decision-title em{display:block;font-style:normal;background:linear-gradient(100deg,var(--android),var(--app-a) 50%,var(--app-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.decision-choice{padding:0;flex:0 0 auto}
.decision-choice__label{font-size:clamp(1.05rem,1.7vw,1.55rem);font-weight:900;letter-spacing:.02em}
@media(max-width:820px){
  .decision-stage{display:grid!important;grid-template-columns:1fr 1fr;grid-template-areas:"t t" "a p";align-items:center;justify-items:center;gap:clamp(18px,4vh,34px) clamp(12px,4vw,28px);padding-left:clamp(14px,4vw,28px);padding-right:clamp(14px,4vw,28px)}
  .decision-title{grid-area:t;font-size:clamp(2rem,8.5vw,3.3rem)}
  .decision-choice--android{grid-area:a}
  .decision-choice--apple{grid-area:p}
}
@media(max-width:560px){.device{width:clamp(112px,38vw,150px)}}

/* Universo: landing clonada y adaptada por SO */
#os-universe{display:block}
.uni-sec{max-width:1040px;margin:0 auto;padding:clamp(44px,7vh,90px) clamp(20px,5vw,40px)}
.uni-eyebrow{margin:0 0 10px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--os-accent);font-weight:800}
.os-sim[data-os="ios"] .uni-eyebrow{color:#8fc2ff}
.uni-head{max-width:760px;margin:0 auto clamp(24px,4vh,44px);text-align:center}
.uni-title{margin:0;font-weight:900;font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.05}
.uni-sub{margin:12px auto 0;max-width:60ch;color:var(--muted-strong);line-height:1.55}
.uni-hero{min-height:64vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
.uni-title--hero{font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif;font-weight:950;text-transform:uppercase;font-size:clamp(2.2rem,6vw,4.6rem);line-height:.96;margin:0}
.os-sim[data-os="ios"] .uni-title--hero{font-family:"SF Pro Display","Segoe UI",-apple-system,Helvetica,Arial,sans-serif;text-transform:none;letter-spacing:-.02em;font-weight:800}
.uni-lead{margin:0 auto;max-width:54ch;color:var(--muted-strong);font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.55}
.uni-scrollcue{margin-top:12px;display:inline-flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.uni-scrollcue i{width:22px;height:34px;border:2px solid rgba(255,255,255,.3);border-radius:12px;position:relative;display:block}
.uni-scrollcue i::before{content:"";position:absolute;left:50%;top:6px;translate:-50% 0;width:3px;height:7px;border-radius:2px;background:var(--os-accent);animation:scrollcue 1.5s ease-in-out infinite}
/* Bento */
.uni-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bento{position:relative;padding:22px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden}
.os-sim[data-os="ios"] .bento{background:rgba(255,255,255,.08);border-radius:28px;border-color:rgba(255,255,255,.16)}
.bento--wide{grid-column:span 2}
.bento--tall{grid-row:span 2}
.bento__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:14px;color:#fff;background:linear-gradient(150deg,rgba(var(--os-accent-rgb),.95),rgba(var(--os-accent-rgb),.4));box-shadow:0 8px 22px -6px rgba(var(--os-accent-rgb),.6)}
.os-sim[data-os="android"] .bento__icon{border-radius:50%}
.bento__icon svg{width:23px;height:23px}
.bento__tag{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:800}
.bento h3{margin:6px 0 8px;font-size:1.12rem}
.bento p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
@media(max-width:760px){.uni-bento{grid-template-columns:repeat(2,1fr)}.bento--wide{grid-column:span 2}.bento--tall{grid-row:auto}}
@media(max-width:460px){.uni-bento{grid-template-columns:1fr}.bento--wide{grid-column:auto}}
/* Timeline */
.uni-timeline{list-style:none;margin:0 auto;padding:0;max-width:720px;position:relative}
.uni-timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--os-accent),transparent)}
.tl{position:relative;display:flex;gap:18px;padding:0 0 26px}
.tl:last-child{padding-bottom:0}
.tl__n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#05070f;background:linear-gradient(150deg,#fff,var(--os-accent));z-index:1}
.tl__b h4{margin:2px 0 5px;font-size:1.08rem}
.tl__b p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}
/* MVP */
.uni-mvp__card{position:relative;overflow:hidden;padding:clamp(24px,4vw,44px);border-radius:26px;background:linear-gradient(150deg,rgba(var(--os-accent-rgb),.16),rgba(255,255,255,.04));border:1px solid rgba(var(--os-accent-rgb),.3)}
.uni-mvp__card h3{margin:6px 0 10px;font-size:clamp(1.4rem,3vw,2rem)}
.uni-mvp__card>p{margin:0 0 16px;color:var(--muted-strong);max-width:60ch;line-height:1.55}
.uni-mvp__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.uni-mvp__list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted-strong);font-size:.92rem}
.uni-mvp__list li::before{content:"";flex:0 0 auto;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--os-accent)}
/* FAQ */
.uni-faq__list{max-width:760px;margin:0 auto;display:grid;gap:10px}
.uni-faq__item{border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04);overflow:hidden}
.uni-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 18px;font-weight:700}
.uni-faq__item summary::-webkit-details-marker{display:none}
.uni-faq__item summary span{color:var(--os-accent);font-size:1.4rem;line-height:1;transition:transform .25s}
.uni-faq__item[open] summary span{transform:rotate(45deg)}
.uni-faq__item p{margin:0;padding:0 18px 16px;color:var(--muted);line-height:1.55}
/* Contact form */
.uni-form{max-width:640px;margin:0 auto;display:grid;gap:14px}
.uni-form label{display:grid;gap:6px;font-size:.82rem;font-weight:700;color:var(--muted-strong);text-align:left}
.uni-form input,.uni-form textarea{width:100%;padding:13px 15px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(255,255,255,.05);color:var(--text);font:inherit;font-size:.95rem}
.os-sim[data-os="ios"] .uni-form input,.os-sim[data-os="ios"] .uni-form textarea{border-radius:16px}
.uni-form input:focus,.uni-form textarea:focus{outline:2px solid var(--os-accent);outline-offset:1px;border-color:transparent}
.uni-form__row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.uni-form__row{grid-template-columns:1fr}}
.uni-form__submit{margin-top:4px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;font-weight:900;font-size:1rem;color:#05070f;background:linear-gradient(120deg,#fff,var(--os-accent));box-shadow:0 16px 40px -12px rgba(var(--os-accent-rgb),.8)}
.uni-form__submit svg{width:20px;height:20px}
.uni-form__note{margin:2px 0 0;font-size:.76rem;color:var(--muted);text-align:center}

/* =====================================================================
   ENTRADA WARP · salto hiperespacial (partículas SVG en eje Z)
   ===================================================================== */
.warp{position:fixed;inset:0;z-index:10000;background:#000;display:grid;place-items:center;overflow:hidden;perspective:520px}
.warp.is-done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .7s ease,visibility 0s linear .7s}
.warp__field{position:absolute;inset:0;transform-style:preserve-3d}
.warp__label{position:relative;z-index:2;margin:0;color:#dbe7ff;font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:clamp(.78rem,2.3vw,1.05rem);text-shadow:0 0 18px rgba(140,140,255,.6);animation:warp-label 2.6s ease both}
.warp-icon{position:absolute;left:50%;top:50%;width:var(--sz,40px);height:var(--sz,40px);margin:calc(var(--sz,40px) / -2) 0 0 calc(var(--sz,40px) / -2);color:var(--c,#8c8cff);opacity:0;filter:drop-shadow(0 0 12px currentColor);animation:warp-fly var(--dur,2.4s) cubic-bezier(.55,.06,.9,.5) var(--delay,0s) infinite}
.warp-icon svg{width:100%;height:100%}
@keyframes warp-fly{0%{opacity:0;transform:translate3d(0,0,0) scale(.05)}10%{opacity:1}100%{opacity:0;transform:translate3d(calc(cos(var(--a)) * var(--d)),calc(sin(var(--a)) * var(--d)),0) scale(2.8)}}
@keyframes warp-label{0%{opacity:0}18%{opacity:1}78%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.warp{display:none!important}}
html.reduce-motion .warp{display:none!important}

/* =====================================================================
   v5.2 - Universo WINDOWS + restauracion de cromo + laptop
   ===================================================================== */
/* Acento y fondo Windows (Fluent) */
.os-sim[data-os="windows"]{--os-accent:#3aa0ff;--os-accent-rgb:58,160,255;--os-bg:#06101c;--os-bg2:#0b2036}
.pf-modal[data-os="windows"]{--os-accent:#3aa0ff;--os-accent-rgb:58,160,255;--os-bg:#06101c}

/* Boot logo Windows */
.os-boot__logo--windows{display:none}
.os-sim[data-os="windows"] .os-boot__logo--windows{display:block;color:#3aa0ff;animation:boot-glow 1.9s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(58,160,255,.85))}
.os-sim[data-os="windows"] .os-boot__load{display:block}
.os-sim[data-os="windows"] .os-boot__load i{background:#3aa0ff}

/* ---- Decision: LAPTOP (Windows) ---- */
.device--windows{width:clamp(168px,19vw,246px);aspect-ratio:auto}
.device--windows .device__aura{inset:-14% -12% 0}
.device--windows .laptop{position:relative;width:100%;animation:float-y 5.6s ease-in-out infinite;transform-origin:50% 78%}
.decision-choice--apple .device--ios .laptop{}
.device--windows .laptop__lid{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px 12px 4px 4px;padding:7px;background:linear-gradient(150deg,#20263c,#0c1224);border:1px solid rgba(255,255,255,.16);box-shadow:0 2px 0 rgba(255,255,255,.1) inset,0 -3px 12px rgba(0,0,0,.5) inset,0 22px 44px rgba(2,6,20,.55)}
.device--windows .laptop__screen{width:100%;height:100%;border-radius:6px;display:grid;place-items:center;background:radial-gradient(120% 110% at 50% 0,rgba(58,160,255,.32),#070d18 62%)}
.device--windows .laptop__screen .device__brand{width:36%;aspect-ratio:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18%}
.device--windows .laptop__screen .device__brand svg{color:#3aa0ff;width:60%;height:60%}
.device--windows .laptop__base{position:relative;left:50%;translate:-50% 0;width:122%;height:13px;border-radius:0 0 13px 13px;background:linear-gradient(180deg,#2a3142,#141a28);box-shadow:0 18px 32px rgba(2,6,20,.5)}
.device--windows .laptop__base::before{content:"";position:absolute;left:50%;top:3px;translate:-50% 0;width:24%;height:3px;border-radius:2px;background:rgba(255,255,255,.2)}
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---- Decision: triangulo invertido (Android izq, Apple der, Windows abajo-centro) ---- */
.decision-stage{display:grid!important;flex-direction:unset!important;grid-template-columns:1fr auto 1fr;grid-template-rows:auto auto;grid-template-areas:"a t p" "a w p";align-items:center;justify-items:center;gap:clamp(8px,2vh,22px) clamp(16px,5vw,80px)}
.decision-choice--android{grid-area:a}
.decision-title{grid-area:t}
.decision-choice--apple{grid-area:p}
.decision-choice--windows{grid-area:w}
@media(max-width:820px){
  .decision-stage{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;grid-template-areas:"t t" "a p" "w w";gap:clamp(14px,3vh,28px) clamp(12px,5vw,30px)}
  .decision-title{font-size:clamp(1.9rem,8vw,3.1rem)}
}
/* Zoom del dispositivo elegido + ocultar los otros */
.decision-stage[data-mode="windows"] .decision-choice--windows .laptop{animation:none;transform:scale(2.3);filter:brightness(1.12) saturate(1.05);transition:transform .6s cubic-bezier(.5,0,.3,1),filter .6s ease}
.decision-stage[data-mode="android"] .decision-choice:not(.decision-choice--android),
.decision-stage[data-mode="ios"] .decision-choice:not(.decision-choice--apple),
.decision-stage[data-mode="windows"] .decision-choice:not(.decision-choice--windows){opacity:0;filter:blur(6px);transform:scale(.82);pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)}
.decision-stage:not([data-mode="idle"]) .decision-title{opacity:0;transition:opacity .4s ease}

/* =====================================================================
   RESTAURACION DE CROMO (header, dock, footer) DENTRO del universo
   ===================================================================== */
/* En decision / warp: oculto por completo */
body[data-apps]:not(.uni-active) .site-header,
body[data-apps]:not(.uni-active) .service-dock,
body[data-apps]:not(.uni-active) .settings-float{display:none!important}
/* En universo: visible y por ENCIMA del overlay del SO */
body.uni-active .site-header{display:block!important;z-index:9300;background:linear-gradient(180deg,rgba(4,7,16,.94),rgba(4,7,16,.4));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
body.uni-active .service-dock{display:block!important;z-index:9320}
body.uni-active .settings-float{display:grid!important;z-index:9320}
/* Restaurar acciones del header que estaban ocultas globalmente */
body.uni-active .site-header .header-actions{display:flex!important}
body.uni-active .site-header .header-cta,
body.uni-active .site-header .mobile-menu-button{display:inline-flex!important}
body.uni-active .site-header .desktop-nav{display:none!important}
/* Dejar espacio para el header fijo dentro del scroll del universo */
body.uni-active .os-land__scroll{padding-top:var(--header-h,84px)}
/* Chip del SO en el header */
.os-chip--head{margin-right:auto}
body[data-apps]:not(.uni-active) .os-chip--head{display:none}

/* ---- Footer dentro del universo ---- */
.uni-footer{max-width:1040px;margin:0 auto;padding:clamp(40px,6vh,72px) clamp(20px,5vw,40px) clamp(56px,10vh,110px);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.uni-footer__brand img{height:38px;width:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4))}
.uni-footer__tag{margin:0;color:var(--muted-strong);font-size:.95rem}
.uni-footer__legal{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}
.uni-footer__legal a{color:var(--muted);font-size:.85rem;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.uni-footer__legal a:hover{color:#fff;border-color:var(--os-accent)}
.uni-footer__copy{margin:0;color:var(--faint,#8290af);font-size:.78rem}

/* =====================================================================
   PORTAFOLIO WINDOWS: la laptop apagada + laptop interactiva en el modal
   ===================================================================== */
/* Dead-laptop en la seccion de portafolio del universo Windows */
.os-sim[data-os="windows"] .deadphone{width:clamp(220px,32vw,340px)}
.os-sim[data-os="windows"] .deadphone__frame{aspect-ratio:16/10;border-radius:12px 12px 4px 4px}
.os-sim[data-os="windows"] .deadphone__cam{display:none}
.os-sim[data-os="windows"] .deadphone__screen{border-radius:6px}
.os-sim[data-os="windows"] .deadphone__frame::after{content:"";position:absolute;left:50%;bottom:-14px;translate:-50% 0;width:120%;height:14px;border-radius:0 0 13px 13px;background:linear-gradient(180deg,#2a3142,#141a28)}
.os-sim[data-os="windows"] .deadphone__pulse{border-radius:16px}

/* Modal: el "telefono" se convierte en laptop */
.pf-modal[data-os="windows"] .pf-phone{height:auto;width:min(92vw,940px);aspect-ratio:16/10.4;border-radius:14px 14px 6px 6px;padding:11px 11px 0;margin-bottom:26px}
.pf-modal[data-os="windows"] .pf-phone__notch{display:none}
.pf-modal[data-os="windows"] .pf-phone::after{content:"";position:absolute;left:50%;bottom:-26px;translate:-50% 0;width:116%;height:26px;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#2a3142,#141a28);box-shadow:0 26px 44px rgba(2,6,20,.6)}
.pf-modal[data-os="windows"] .pf-phone::before{content:"";position:absolute;left:50%;bottom:-14px;translate:-50% 0;width:20%;height:4px;border-radius:0 0 6px 6px;background:rgba(255,255,255,.16);z-index:1}
.pf-modal[data-os="windows"] .pf-screen{border-radius:8px}
.pf-modal[data-os="windows"] .pf-statusbar{display:none}
.pf-modal[data-os="windows"] .pf-home{padding-top:16px}
.pf-modal[data-os="windows"] .app-grid{grid-template-columns:repeat(4,1fr)}
.pf-modal[data-os="windows"] .app-tile__icon{border-radius:22%}
/* Taskbar estilo Windows */
.pf-modal[data-os="windows"] .pf-navbar{gap:16px;justify-content:center;background:rgba(8,16,30,.85);backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,.08)}
.pf-modal[data-os="windows"] .pf-navbar__btn{color:rgba(255,255,255,.85)}
.pf-modal[data-os="windows"] .pf-navbar__btn span{border-radius:5px}
@media(max-width:560px){.pf-modal[data-os="windows"] .app-grid{grid-template-columns:repeat(3,1fr)}}

/* =====================================================================
   v5.3 - Ajuste iOS: Dynamic Island (en vez de camara perforada)
   ===================================================================== */
.os-sim[data-os="ios"] .deadphone__cam{top:11px;width:32%;max-width:74px;height:12px;border-radius:999px;background:#04060d;box-shadow:none}


/* Unified header: contextual app-universe controls */
.apps-context-controls{position:fixed;z-index:1640;top:calc(var(--sm-ui-header-height,78px) + 12px);left:50%;display:flex;align-items:center;gap:10px;transform:translateX(-50%);transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
body[data-apps]:not(.uni-active) .apps-context-controls{opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-10px)}
body[data-apps].uni-active .apps-context-controls{opacity:1;visibility:visible;pointer-events:auto}
@media (max-width:760px){.apps-context-controls{top:calc(var(--sm-ui-header-height,70px) + 8px);width:min(calc(100% - 28px),430px);justify-content:center;flex-wrap:wrap}.apps-context-controls .os-escape{min-height:38px;padding:0 13px;font-size:.75rem}}
@media (prefers-reduced-motion:reduce){.apps-context-controls{transition:none}}