/* ==========================================================================
   ALS DevStudio — hoja de estilos
   Índice
   01 Tokens y base
   02 Utilidades
   03 Capas de fondo (canvas espacial, cursor)
   04 Navegación
   05 Botones
   06 Hero (órbita 3D, chips en profundidad, carrusel)
   07 Marquee
   08 Alcance global (mapa)
   09 Proyectos (vista en vivo)
   10 Proceso
   11 Contacto y footer
   12 Movimiento (reveal, tilt 3D, keyframes)
   13 Responsive (≤900, ≤680)
   14 Gama baja y transparencia reducida
   15 Reduced motion
   ========================================================================== */

/* 01 Tokens y base ------------------------------------------------------- */
:root {
  --ink:#071a2f; --ink-deep:#041224; --panel:#0d2746; --panel-soft:#123353;
  --blue:#4d9bff; --blue-strong:#1969cb; --mint:#65d49d;
  --paper:#f5f8fb; --muted:#aab9cb; --ink-muted:#536477;
  --line:rgba(221,237,252,.14); --radius:24px; --shadow:0 26px 80px rgba(0,0,0,.22);
  --ease-expo:cubic-bezier(.16,1,.3,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--ink); color:var(--paper); font-family:'DM Sans',sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; text-wrap:pretty; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:20; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); }
a { color:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
::selection { background:var(--mint); color:var(--ink); }
:focus-visible { outline:3px solid var(--mint); outline-offset:4px; }
main, footer { position:relative; z-index:1; }
[hidden] { display:none!important; }

/* 02 Utilidades ---------------------------------------------------------- */
.wrap { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.mono { font-family:'IBM Plex Mono',monospace; }
.eyebrow { color:var(--mint); font:500 11px/1.2 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:50; background:var(--mint); color:var(--ink); padding:10px 14px; font-weight:700; text-decoration:none; transition:top .2s; }
.skip-link:focus { top:16px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.section { padding:132px 0; position:relative; }
.section + .section { border-top:1px solid var(--line); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:46px; }
.section-heading h2 { max-width:650px; margin-top:16px; font:600 clamp(34px,5vw,68px)/.98 'Space Grotesk',sans-serif; letter-spacing:-.055em; }
.section-heading p { color:var(--muted); max-width:290px; font-size:14px; }

/* 03 Capas de fondo ------------------------------------------------------ */
.space-canvas { position:fixed; inset:0; z-index:0; width:100%; height:100%; pointer-events:none; opacity:.58; mix-blend-mode:screen; }
.logo-cursor { display:none; position:fixed; z-index:30; width:36px; height:36px; place-items:center; border:1px solid rgba(101,212,157,.72); border-radius:50%; background:rgba(4,18,36,.76); box-shadow:0 0 0 7px rgba(101,212,157,.08),0 10px 28px rgba(0,0,0,.28); pointer-events:none; opacity:0; transform:translate3d(-100px,-100px,0); transition:opacity .2s ease,box-shadow .2s ease; }
.logo-cursor::before { content:''; position:absolute; inset:4px; border:1px dashed rgba(77,155,255,.58); border-radius:50%; animation:spin 9s linear infinite; }
.logo-cursor::after { content:''; position:absolute; width:5px; height:5px; top:1px; right:1px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px rgba(101,212,157,.12); }
.logo-cursor img { position:relative; z-index:1; width:21px; height:21px; object-fit:contain; }
.logo-cursor.is-pressed { box-shadow:0 0 0 11px rgba(101,212,157,.12),0 10px 28px rgba(0,0,0,.28); }
@media (pointer:fine) {
  body.has-custom-pointer, body.has-custom-pointer a, body.has-custom-pointer button { cursor:none; }
  body.has-custom-pointer .logo-cursor { display:grid; }
}

/* 04 Navegación ---------------------------------------------------------- */
.nav-shell { position:fixed; inset:0 0 auto; z-index:15; padding-top:14px; transition:padding .35s var(--ease-expo); }
.nav-shell::after { content:''; position:fixed; top:0; left:0; width:calc(var(--scroll-progress,0) * 100%); height:2px; background:linear-gradient(90deg,var(--mint),var(--blue)); box-shadow:0 0 16px rgba(101,212,157,.55); transform-origin:left; z-index:2; }
.nav-shell.is-scrolled { padding-top:8px; }
nav { position:relative; overflow:hidden; background:rgba(7,26,47,.82); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:999px; box-shadow:0 14px 50px rgba(0,0,0,.14); transition:box-shadow .35s ease,border-color .35s ease; }
nav::before { content:''; position:absolute; inset:0; background:linear-gradient(105deg,rgba(101,212,157,.08),transparent 28%,transparent 72%,rgba(77,155,255,.1)); pointer-events:none; }
nav .wrap { width:auto; padding:9px 10px 9px 14px; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:max-content; transition:transform .35s var(--ease-expo); }
.brand:hover { transform:translateX(3px); }
.brand-mark { width:40px; height:40px; border-radius:50%; background:var(--ink-deep); border:1px solid rgba(101,212,157,.42); display:grid; place-items:center; overflow:hidden; flex:none; transition:transform .45s var(--ease-expo),box-shadow .35s ease; }
.brand:hover .brand-mark { transform:rotate(8deg) scale(1.06); box-shadow:0 0 0 6px rgba(101,212,157,.08),0 0 24px rgba(101,212,157,.18); }
.brand-mark img { width:34px; height:34px; object-fit:contain; }
.brand-name { font:600 16px 'Space Grotesk',sans-serif; letter-spacing:-.03em; }
.brand-name span { color:var(--mint); }
.nav-links { display:flex; gap:26px; align-items:center; color:var(--muted); font:500 11px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.nav-links a { position:relative; padding:12px 0; text-decoration:none; transition:color .25s ease; }
.nav-links a::after { content:''; position:absolute; left:0; right:100%; bottom:5px; height:1px; background:var(--mint); transition:right .35s var(--ease-expo); }
.nav-links a:hover, .nav-links a.is-active { color:var(--paper); }
.nav-links a:hover::after, .nav-links a.is-active::after { right:0; }
.nav-menu-toggle, .mobile-menu { display:none; }

/* 05 Botones ------------------------------------------------------------- */
.nav-cta, .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; text-decoration:none; font-weight:700; transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease; }
.nav-cta { background:var(--mint); color:var(--ink); padding:11px 18px; font-size:12px; }
.nav-cta:hover, .button:hover { transform:translateY(-3px); }
.button { padding:15px 22px; font-size:13px; }
.button-primary { background:var(--mint); color:var(--ink); box-shadow:0 12px 28px rgba(101,212,157,.16); }
.button-primary:hover { box-shadow:0 16px 34px rgba(101,212,157,.28); }
.button-ghost { color:var(--paper); border:1px solid var(--line); }
.button-ghost:hover { border-color:var(--mint); background:rgba(101,212,157,.08); }
/* `.magnetic` solo lo añade el JS en escritorio: la capa de compositor se paga donde se usa. */
.magnetic { transform:translate3d(var(--mag-x,0px),var(--mag-y,0px),0); will-change:transform; }
.magnetic:hover { transform:translate3d(var(--mag-x,0px),calc(var(--mag-y,0px) - 3px),0); }

/* 06 Hero ---------------------------------------------------------------- */
.hero { min-height:840px; padding:176px 0 96px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; width:900px; height:900px; right:-320px; top:120px; border:1px solid rgba(101,212,157,.22); border-radius:50%; box-shadow:0 0 0 44px rgba(101,212,157,.03),0 0 0 120px rgba(77,155,255,.025); transform:rotateX(64deg) rotate(-12deg); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(400px,1.05fr); align-items:center; gap:64px; position:relative; z-index:1; perspective:1600px; }
.hero h1 { max-width:730px; margin-top:24px; font:600 clamp(52px,8.7vw,112px)/.9 'Space Grotesk',sans-serif; letter-spacing:-.075em; text-wrap:balance; }
.hero h1 em { font-style:normal; color:transparent; background:linear-gradient(110deg,var(--blue) 10%,#9bd4ff 45%,var(--mint) 85%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; animation:gradient-shift 8s ease-in-out infinite; }
.hero-copy { margin-top:28px; max-width:530px; color:var(--muted); font-size:clamp(17px,2vw,21px); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:20px; margin-top:52px; color:var(--muted); font:400 11px 'IBM Plex Mono',monospace; }
.live-dot { width:7px; height:7px; background:var(--mint); border-radius:50%; display:inline-block; margin-right:7px; box-shadow:0 0 0 5px rgba(101,212,157,.13); }
.scroll-cue { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); color:var(--muted); font:400 10px 'IBM Plex Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.scroll-cue::after { content:''; display:block; width:1px; height:38px; margin:10px auto 0; background:linear-gradient(var(--mint),transparent); }

/* Escena 3D: la visual abre un contexto de perspectiva compartido por órbita, chips y carrusel.
   La inclinación (puntero/scroll/giroscopio) se aplica a toda la escena: inclinar solo el carrusel dentro del
   contexto preserve-3d rompe el hit-testing de sus botones en Chromium. */
.hero-visual { position:relative; min-height:550px; display:grid; place-items:center; perspective:1400px; transform-style:preserve-3d; transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .65s var(--ease-expo); }

/* Órbita ALS: anillo inclinado bajo el card; sus satélites pasan delante y detrás por profundidad real. */
.orbit { position:absolute; top:50%; left:50%; pointer-events:none; width:min(660px,120%); aspect-ratio:1; border:1px solid rgba(77,155,255,.36); border-radius:50%; box-shadow:inset 0 0 70px rgba(77,155,255,.07),0 0 0 1px rgba(77,155,255,.04); transform:translate3d(calc(-50% + var(--orbit-x,0px)),calc(-50% + 150px + var(--orbit-y,0px)),-40px) rotateX(68deg) rotate(-17deg); transform-style:preserve-3d; transition:transform .7s var(--ease-expo); }
.orbit::before, .orbit::after { content:''; position:absolute; border-radius:50%; }
.orbit::before { width:16px; height:16px; top:13%; right:8%; background:var(--mint); box-shadow:0 0 0 12px rgba(101,212,157,.12),0 0 28px rgba(101,212,157,.55); }
.orbit::after { width:8px; height:8px; left:11%; bottom:18%; background:var(--blue); }
.orbit-ring { position:absolute; inset:26px; border:1px dashed rgba(101,212,157,.4); border-radius:50%; animation:spin 22s linear infinite; }
.orbit-ring::before, .orbit-ring::after { content:''; position:absolute; border-radius:50%; }
.orbit-ring::after { right:10%; top:4%; width:12px; height:12px; background:var(--mint); box-shadow:0 0 0 8px rgba(101,212,157,.14),0 0 24px rgba(101,212,157,.8); }
.orbit-ring::before { left:14%; bottom:8%; width:8px; height:8px; background:var(--blue); box-shadow:0 0 0 6px rgba(77,155,255,.14),0 0 18px rgba(77,155,255,.8); }

/* Chips flotantes a distintas profundidades (parallax por puntero o giroscopio). */
.hero-depth { position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; }
.hero-float { position:absolute; transform:translate3d(calc(var(--px,0px) * var(--depth,1)),calc(var(--py,0px) * var(--depth,1)),var(--z,60px)); transition:transform .7s var(--ease-expo); }
.hero-float > span { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid rgba(245,248,251,.2); border-radius:999px; background:rgba(7,26,47,.74); backdrop-filter:blur(12px); color:var(--paper); font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; box-shadow:0 16px 38px rgba(0,0,0,.3),inset 0 0 0 1px rgba(101,212,157,.05); white-space:nowrap; animation:float 7s ease-in-out infinite; }
.hero-float i { width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(101,212,157,.14),0 0 12px rgba(101,212,157,.7); }
.hero-float-1 { top:6%; left:-2%; --z:90px; --depth:1.5; }
.hero-float-1 > span { animation-delay:-1.5s; }
.hero-float-2 { top:44%; right:-3%; --z:150px; --depth:2.3; }
.hero-float-2 > span { animation-delay:-4s; }
.hero-float-2 i { background:var(--blue); box-shadow:0 0 0 4px rgba(77,155,255,.14),0 0 12px rgba(77,155,255,.7); }
.hero-float-3 { bottom:4%; left:8%; --z:60px; --depth:1.1; }
.hero-float-3 > span { animation-delay:-2.6s; border-color:rgba(101,212,157,.42); color:var(--mint); }

/* Carrusel: lleva dos tarjetas fantasma detrás que se desplazan en contra del parallax. */
.hero-carousel { position:relative; width:min(530px,100%); transform-style:preserve-3d; }
.hero-carousel::before, .hero-carousel::after { content:''; position:absolute; inset:0; border:1px solid rgba(245,248,251,.14); border-radius:var(--radius); background:linear-gradient(160deg,rgba(18,51,83,.82),rgba(4,18,36,.92)); box-shadow:0 20px 60px rgba(0,0,0,.25); pointer-events:none; transition:transform .65s var(--ease-expo); }
.hero-carousel::before { transform:translate3d(0,-22px,-80px) scale(.95); }
.hero-carousel::after { transform:translate3d(0,-44px,-160px) scale(.9); opacity:.75; }
.hero-visual.is-tilting .hero-carousel::before { transform:translate3d(calc(var(--px,0px) * -.6),calc(-22px + var(--py,0px) * -.6),-80px) scale(.95); }
.hero-visual.is-tilting .hero-carousel::after { transform:translate3d(calc(var(--px,0px) * -1.1),calc(-44px + var(--py,0px) * -1.1),-160px) scale(.9); }
.hero-card { width:100%; position:relative; overflow:hidden; border:1px solid rgba(245,248,251,.22); border-radius:var(--radius); background:var(--ink-deep); color:var(--paper); box-shadow:var(--shadow); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.hero-card:hover { transform:translateY(-8px); }
.hero-card::after { content:''; position:absolute; inset:0; z-index:6; border-radius:inherit; background:radial-gradient(560px circle at var(--glare-x,50%) var(--glare-y,-20%),rgba(255,255,255,.18),rgba(255,255,255,.05) 34%,transparent 62%); opacity:0; transition:opacity .45s ease; mix-blend-mode:screen; pointer-events:none; }
.hero-visual.is-tilting .hero-card::after { opacity:1; }
.hero-card-media { position:relative; overflow:hidden; background:#eaf2f8; }
.hero-card-media::before { content:'LIVE / ALS PORTFOLIO'; position:absolute; top:16px; right:16px; z-index:3; padding:7px 10px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:rgba(7,26,47,.62); color:var(--paper); backdrop-filter:blur(10px); font:500 9px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.hero-card:hover .hero-card-media::before { border-color:rgba(101,212,157,.7); color:var(--mint); }
.hero-card-media::after { content:''; position:absolute; inset:0; z-index:2; background:linear-gradient(135deg,rgba(255,255,255,.2),transparent 38%,rgba(7,26,47,.22)); pointer-events:none; }
.hero-slides { position:relative; aspect-ratio:16/10; overflow:hidden; background:#eaf2f8; touch-action:pan-y; user-select:none; }
.hero-slide { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; transform:scale(1.03); transition:opacity .7s ease,transform 1.4s ease; }
.hero-slide:not(.is-active) { pointer-events:none; }
.hero-slide.is-active { opacity:1; transform:scale(1); }
.hero-picture, .project-picture { display:block; width:100%; height:100%; }
.hero-slide img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.hero-card-footer { position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'meta counter' 'controls link'; align-items:center; gap:12px 18px; padding:16px 18px 18px; border-top:1px solid rgba(245,248,251,.14); background:linear-gradient(110deg,rgba(101,212,157,.055),transparent 38%),var(--ink-deep); }
.hero-card-meta { grid-area:meta; min-width:0; }
.hero-card-kicker { display:block; margin-bottom:3px; color:var(--mint); font:500 8px/1.2 'IBM Plex Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
#hero-slide-label { display:block; min-width:0; overflow:hidden; color:var(--paper); font:500 10px/1.35 'IBM Plex Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }
.hero-slide-counter { grid-area:counter; display:flex; align-items:center; gap:5px; color:var(--mint); font:500 10px/1 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.hero-carousel-controls { grid-area:controls; position:static; display:flex; align-items:center; gap:8px; }
.hero-carousel-button, .hero-project-link { min-height:44px; border:1px solid rgba(245,248,251,.24); color:var(--paper); background:rgba(245,248,251,.055); transition:color .25s ease,background .25s ease,border-color .25s ease,transform .25s ease; }
.hero-carousel-button { width:44px; min-width:44px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:600 18px/1 'IBM Plex Mono',monospace; }
.hero-carousel-toggle, .hero-motion-toggle { width:auto; min-width:104px; padding-inline:14px; gap:7px; border-radius:999px; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.hero-motion-toggle { min-width:64px; }
.hero-motion-toggle[aria-pressed='true'] { border-color:var(--mint); background:var(--mint); color:var(--ink); }
.hero-toggle-icon { font-size:12px; }
.hero-project-link { grid-area:link; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; border-radius:999px; font:600 10px 'IBM Plex Mono',monospace; text-decoration:none; white-space:nowrap; }
.hero-carousel-button:hover, .hero-project-link:hover { border-color:var(--mint); background:var(--mint); color:var(--ink); transform:translateY(-2px); }

/* 07 Marquee ------------------------------------------------------------- */
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:17px 0; color:var(--muted); white-space:nowrap; }
.marquee-track { display:inline-flex; gap:34px; animation:marquee 14s linear infinite; font:500 12px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.12em; }
.marquee-track span:nth-child(odd) { color:var(--mint); }

/* 08 Alcance global ------------------------------------------------------ */
.global-section { overflow:hidden; }
.global-stage { position:relative; display:grid; align-items:start; grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr); gap:28px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg,rgba(18,51,83,.72),rgba(4,18,36,.94)); box-shadow:0 26px 80px rgba(0,0,0,.14); overflow:hidden; }
.global-stage::before { content:''; position:absolute; width:580px; height:580px; right:-290px; top:-360px; border:1px solid rgba(101,212,157,.14); border-radius:50%; box-shadow:0 0 0 34px rgba(101,212,157,.025),0 0 0 80px rgba(77,155,255,.02),0 0 0 142px rgba(77,155,255,.015); pointer-events:none; opacity:.65; }
.global-intro, .global-map-wrap, .global-status { position:relative; z-index:1; }
.global-intro { padding:16px 8px 10px 4px; }
.global-signal { display:flex; justify-content:space-between; gap:14px; color:var(--muted); font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.global-signal i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 5px rgba(101,212,157,.12),0 0 15px rgba(101,212,157,.5); animation:signal-pulse 2.4s ease-in-out infinite; }
.global-intro h3 { max-width:390px; margin-top:48px; font:600 clamp(28px,3.5vw,48px)/.98 'Space Grotesk',sans-serif; letter-spacing:-.06em; text-wrap:balance; }
.global-intro > p { max-width:400px; margin-top:20px; color:var(--muted); font-size:15px; }
.global-metrics { display:flex; gap:30px; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); }
.global-metrics div { display:flex; align-items:flex-start; gap:9px; }
.global-metrics strong { color:var(--mint); font:600 24px/1 'Space Grotesk',sans-serif; letter-spacing:-.06em; }
.global-metrics span { color:var(--muted); font:400 10px/1.35 'IBM Plex Mono',monospace; text-transform:uppercase; }
.global-location-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:14px; }
.global-location { position:relative; display:grid; grid-template-columns:20px minmax(0,1fr); gap:7px; align-items:center; min-height:36px; padding:7px 10px; border:1px solid rgba(221,237,252,.06); border-radius:10px; background:rgba(245,248,251,.035); color:var(--muted); text-align:left; cursor:pointer; transition:transform .3s var(--ease-expo),background .3s ease,border-color .3s ease,color .3s ease; }
.global-location:hover, .global-location.is-active { transform:translateY(-2px); border-color:rgba(101,212,157,.38); background:rgba(101,212,157,.1); color:var(--paper); }
.global-location span { color:var(--mint); font:500 9px 'IBM Plex Mono',monospace; }
.global-location strong { font:600 12px/1.1 'Space Grotesk',sans-serif; }
.global-location small { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.global-map-wrap { min-height:0; padding:16px 16px 13px; border:1px solid rgba(221,237,252,.13); border-radius:20px; background:radial-gradient(circle at 50% 42%,rgba(77,155,255,.14),transparent 58%),linear-gradient(180deg,rgba(4,18,36,.5),rgba(4,18,36,.22)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.015),0 18px 50px rgba(0,0,0,.12); align-self:start; display:flex; flex-direction:column; overflow:hidden; }
.global-map-wrap::before { content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,transparent 0%,transparent 47%,rgba(101,212,157,.09) 49%,rgba(101,212,157,.02) 51%,transparent 54%); background-size:100% 220px; background-repeat:no-repeat; animation:map-scanline 8s linear infinite; pointer-events:none; }
.global-map-wrap > * { position:relative; z-index:1; }
.global-map-label { display:flex; justify-content:space-between; color:var(--muted); font:500 9px 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
/* El mapa SVG se carga desde assets/brand/world-map.svg; el host reserva su proporción para evitar saltos de layout. */
.global-map-host { display:block; width:calc(100% + 14px); margin:16px -7px 14px; aspect-ratio:1200/560; }
.global-map { display:block; width:100%; height:100%; overflow:visible; transform:scale(1.06); transform-origin:center; }
.global-map-console { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:10px; margin-top:0; }
.global-map-insight { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-height:118px; margin:0; padding:14px; border:1px solid rgba(77,155,255,.18); border-radius:12px; background:linear-gradient(135deg,rgba(77,155,255,.09),rgba(101,212,157,.05)); }
.global-map-insight span { color:var(--mint); font:500 8px/1.2 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.global-map-insight strong { display:block; margin-top:7px; color:var(--paper); font:500 15px/1.12 'Space Grotesk',sans-serif; letter-spacing:-.03em; }
.global-map-nodebar { display:flex; align-items:center; width:100%; margin-top:auto; }
.global-map-nodebar i { position:relative; flex:1; height:1px; background:rgba(101,212,157,.2); }
.global-map-nodebar i::after { content:''; position:absolute; top:50%; right:-2px; width:5px; height:5px; border-radius:50%; background:#376b72; transform:translateY(-50%); }
.global-map-nodebar i:nth-child(4)::after { width:7px; height:7px; background:var(--mint); box-shadow:0 0 0 5px rgba(101,212,157,.1),0 0 14px rgba(101,212,157,.6); animation:signal-pulse 2.4s ease-in-out infinite; }
.global-map-footer { display:flex; justify-content:space-between; gap:14px; margin-top:10px; padding:10px 2px 0; border-top:1px solid rgba(221,237,252,.1); color:rgba(202,220,237,.68); font:500 8px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.global-map-footer i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px rgba(101,212,157,.7); }
.map-grid path { fill:none; stroke:rgba(138,190,228,.08); stroke-width:1; stroke-dasharray:2 10; }
.map-country-land { pointer-events:none; }
.map-country-land path { fill:rgba(23,91,151,.78); stroke:rgba(184,216,241,.22); stroke-width:.65; vector-effect:non-scaling-stroke; }
.map-country-highlight { pointer-events:none; }
.map-country-highlight path, .map-country-highlight ellipse { fill:rgba(101,212,157,.16); stroke:rgba(101,212,157,.82); stroke-width:1.05; vector-effect:non-scaling-stroke; opacity:.82; transition:fill .3s ease,stroke .3s ease,opacity .3s ease; }
.map-country-highlight path.is-active, .map-country-highlight ellipse.is-active { fill:rgba(101,212,157,.48); stroke:var(--paper); stroke-width:1.7; opacity:1; filter:url(#map-glow); }
.map-country-highlight ellipse { stroke-dasharray:2 3; }
.global-map-selection { display:flex; flex-direction:column; min-height:118px; margin:0; padding:14px; border:1px solid rgba(101,212,157,.22); border-radius:12px; background:linear-gradient(145deg,rgba(101,212,157,.08),rgba(4,18,36,.12)); }
.global-map-selection-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.global-map-selection span { color:var(--mint); font:500 8px 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; }
.global-map-selection strong { color:var(--paper); font:600 17px/1 'Space Grotesk',sans-serif; letter-spacing:-.035em; text-align:right; }
.global-map-coordinates { display:flex; justify-content:space-between; gap:12px; margin-top:auto; padding-top:15px; border-top:1px solid rgba(221,237,252,.1); color:var(--muted); font:500 9px 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.map-routes { fill:none; }
.map-route { fill:none; stroke:url(#map-route); stroke-width:1.4; stroke-linecap:round; stroke-dasharray:4 9; opacity:.54; animation:route-flow 5s linear infinite; vector-effect:non-scaling-stroke; }
.map-route:nth-child(2) { animation-delay:-1s; }
.map-route:nth-child(3) { animation-delay:-2s; }
.map-route:nth-child(4) { animation-delay:-3s; }
.map-route:nth-child(5) { animation-delay:-4s; }
.map-marker { cursor:pointer; outline:none; }
.map-marker text { fill:var(--paper); font:500 11px 'IBM Plex Mono',monospace; letter-spacing:.08em; paint-order:stroke; stroke:rgba(4,18,36,.92); stroke-width:4px; stroke-linejoin:round; pointer-events:none; }
.marker-pulse { fill:rgba(101,212,157,.12); stroke:rgba(101,212,157,.24); stroke-width:1; animation:marker-pulse 2.4s ease-out infinite; }
.marker-core { fill:var(--paper); stroke:var(--mint); stroke-width:2; filter:url(#map-glow); transition:fill .3s ease,stroke .3s ease,r .3s ease; }
.map-marker:hover .marker-core, .map-marker.is-active .marker-core { fill:var(--mint); stroke:var(--paper); }
.map-marker:hover text, .map-marker.is-active text { fill:var(--paper); }
.map-marker:focus-visible .marker-core { stroke:var(--paper); stroke-width:3; }
.global-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* 09 Proyectos ----------------------------------------------------------- */
.project-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.filter { background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:9px 14px; cursor:pointer; font:500 10px 'IBM Plex Mono',monospace; text-transform:uppercase; transition:.25s ease; }
.filter:hover, .filter.is-active { color:var(--ink); background:var(--mint); border-color:var(--mint); }
.projects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; align-items:start; }
.project-card { position:relative; isolation:isolate; align-self:start; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(13,39,70,.65); text-decoration:none; transition:transform .35s ease,border-color .35s ease,opacity .25s; }
.project-card:hover { --lift:-10px; transform:translateY(-8px); border-color:rgba(101,212,157,.65); box-shadow:0 30px 70px rgba(0,0,0,.32),0 0 0 1px rgba(101,212,157,.2); }
.project-card.is-hidden { display:none; }
.project-card::before { content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; background:radial-gradient(260px circle at var(--card-x,50%) var(--card-y,50%),rgba(101,212,157,.14),transparent 68%); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.project-card::after { content:'ver proyecto  ↗'; position:absolute; top:16px; right:16px; z-index:4; padding:8px 10px; border:1px solid rgba(101,212,157,.48); border-radius:999px; background:rgba(7,26,47,.72); color:var(--mint); backdrop-filter:blur(10px); font:500 9px 'IBM Plex Mono',monospace; letter-spacing:.06em; opacity:0; transform:translateY(-6px); transition:opacity .3s ease,transform .35s var(--ease-expo); pointer-events:none; }
.project-card:hover::before, .project-card:hover::after { opacity:1; }
.project-card:hover::after { transform:translateY(0); }
.project-visual { min-height:300px; aspect-ratio:16/10; flex:none; position:relative; overflow:hidden; display:flex; background:#11375b; }
.project-card:nth-child(3n) .project-visual { background:linear-gradient(135deg,#123e4c,#17697e); }
.project-card:nth-child(3n+1) .project-visual { background:linear-gradient(135deg,#142f59,#236fc0); }
.project-card:nth-child(3n+2) .project-visual { background:linear-gradient(135deg,#203c37,#2d8e69); }
.project-card[href*='pintumaster'] .project-visual { background:linear-gradient(180deg,#191919 0 38%,#0d2746 72% 100%); }
.project-image { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:contain; object-position:center; transition:transform .9s var(--ease-expo); }
.project-card:hover .project-image { transform:scale(1.045); }
/* Vista en vivo: el sitio real embebido sobre la captura. La captura nunca se quita:
   es el marcador de posición mientras el iframe carga y el respaldo si el sitio no se deja embeber. */
.project-live { position:absolute; inset:0; z-index:1; overflow:hidden; opacity:0; pointer-events:none; }
/* Sin fundido: en cuanto el sitio real termina de cargar, sustituye a la captura de golpe.
   Un cruce progresivo hace que se lea como «la pagina cambio», que es justo lo contrario. */
.project-visual.is-live-ready .project-live { opacity:1; }
/* La diapositiva activa del hero usa el mismo marco: el card ya lleva el distintivo
   «LIVE / ALS PORTFOLIO», así que aquí no hace falta repetirlo. */
.hero-slides .project-live { z-index:2; }
.hero-slides.is-live-ready .project-live { opacity:1; }
.project-live-frame { position:absolute; top:0; left:0; width:1440px; height:900px; border:0; background:#0d2746; transform-origin:0 0; transform:scale(var(--live-scale,.4)); pointer-events:none; }
/* Inclinar en 3D un ancestro del iframe obliga a re-rasterizar el documento anidado en cada
   frame: medido con CPU 4x, el recálculo de estilo se duplica (2,40 s frente a 1,13 s).
   En escritorio solo se inclina la tarjeta bajo el puntero, así que el coste está acotado a una
   y el efecto se conserva. En táctil el scroll inclina TODAS las visibles a la vez y encima las
   GPU móviles dejan el marco borroso, así que ahí sí se congela. */
@media (hover:none) {
  .project-card.is-live-host.tilt-3d { transform:none; }
}
.project-card.is-live-host:hover .project-image { transform:none; }
/* Distintivo de que lo que se ve es el sitio en directo, no una foto. */
.project-visual.is-live-ready::after { content:'en vivo'; position:absolute; left:14px; bottom:14px; z-index:2; padding:5px 9px 5px 22px; border:1px solid rgba(101,212,157,.45); border-radius:999px; background:rgba(7,26,47,.78); color:var(--mint); backdrop-filter:blur(10px); font:500 8px 'IBM Plex Mono',monospace; letter-spacing:.1em; text-transform:uppercase; pointer-events:none; }
.project-visual.is-live-ready::before { content:''; position:absolute; left:24px; bottom:22px; z-index:3; width:5px; height:5px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(101,212,157,.18); animation:signal-pulse 2.4s ease-in-out infinite; pointer-events:none; }
/* Interruptor de la vista en vivo, junto a los filtros. */
.projects-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.projects-toolbar .project-filters { margin-bottom:0; }
.live-toggle { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font:500 10px 'IBM Plex Mono',monospace; text-transform:uppercase; transition:color .25s,border-color .25s,background .25s; }
.live-toggle:hover { color:var(--paper); border-color:rgba(101,212,157,.5); }
.live-toggle i { width:6px; height:6px; border-radius:50%; background:rgba(202,220,237,.35); transition:background .25s,box-shadow .25s; }
.live-toggle[aria-pressed='true'] { color:var(--paper); border-color:rgba(101,212,157,.45); }
.live-toggle[aria-pressed='true'] i { background:var(--mint); box-shadow:0 0 0 3px rgba(101,212,157,.16); }
.live-toggle:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }

.project-body { position:relative; padding:20px 20px 18px; background:linear-gradient(180deg,rgba(13,39,70,.9),rgba(7,26,47,.72)); }
.project-body h3 { font:600 23px 'Space Grotesk',sans-serif; letter-spacing:-.04em; transition:transform .5s var(--ease-expo); }
.project-card:hover .project-body h3 { transform:translateX(4px); }
.project-body p { min-height:43px; margin-top:7px; color:var(--muted); font-size:13px; }

/* 10 Proceso ------------------------------------------------------------- */
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); perspective:1200px; }
.process-item { position:relative; overflow:hidden; min-height:235px; padding:28px; background:var(--ink); transition:transform .35s var(--ease-expo),background .35s ease; }
.process-item > * { position:relative; z-index:1; }
.process-item::before { content:''; position:absolute; top:0; left:-35%; width:35%; height:1px; background:linear-gradient(90deg,transparent,var(--mint),transparent); opacity:0; transition:opacity .25s ease; }
.process-item::after { content:attr(data-step); content:attr(data-step) / ''; position:absolute; right:18px; top:6px; z-index:0; font:600 118px/1 'Space Grotesk',sans-serif; letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px rgba(101,212,157,.18); transform:translateY(14px); opacity:.8; transition:transform .6s var(--ease-expo),-webkit-text-stroke-color .4s ease,opacity .4s ease; pointer-events:none; }
.process-item:hover { --lift:-6px; transform:translateY(-5px); background:linear-gradient(145deg,rgba(18,51,83,.92),var(--ink)); }
.process-item:hover::before { left:100%; opacity:1; transition:left .8s var(--ease-expo),opacity .2s ease; }
.process-item:hover::after { transform:translateY(0) scale(1.06); -webkit-text-stroke-color:rgba(101,212,157,.55); opacity:1; }
.process-number { color:var(--mint); font:500 11px 'IBM Plex Mono',monospace; }
.process-item h3 { margin-top:52px; font:600 23px 'Space Grotesk',sans-serif; letter-spacing:-.04em; }
.process-item p { margin-top:10px; color:var(--muted); font-size:14px; }

/* 11 Contacto y footer --------------------------------------------------- */
.contact-section { padding-bottom:104px; }
.contact-card { display:grid; grid-template-columns:minmax(0,1.22fr) minmax(330px,.78fr); gap:clamp(36px,5vw,64px); align-items:stretch; padding:clamp(30px,6vw,76px); border-radius:var(--radius); background:var(--paper); color:var(--ink); overflow:hidden; position:relative; }
.contact-card::after { content:''; position:absolute; width:460px; height:460px; right:-100px; bottom:-280px; border:1px solid rgba(19,100,196,.24); border-radius:50%; box-shadow:0 0 0 36px rgba(19,100,196,.05),0 0 0 86px rgba(19,100,196,.035); transform:rotateX(58deg); }
.contact-card .eyebrow { color:var(--blue-strong); }
.contact-card h2 { max-width:650px; margin-top:17px; font:600 clamp(38px,5.2vw,68px)/.94 'Space Grotesk',sans-serif; letter-spacing:-.07em; }
.contact-card p { max-width:460px; margin-top:22px; color:var(--ink-muted); line-height:1.65; }
.contact-intro { align-self:center; position:relative; z-index:1; padding-right:clamp(0px,2vw,24px); }
.contact-notes { display:grid; gap:10px; max-width:460px; margin-top:40px; }
.contact-note { display:flex; align-items:center; gap:13px; padding-top:11px; border-top:1px solid var(--line); color:var(--ink-muted); font:500 11px 'IBM Plex Mono',monospace; }
.contact-note strong { color:var(--blue-strong); font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.contact-actions { display:flex; flex-direction:column; align-items:start; gap:12px; position:relative; z-index:1; }
.contact-actions .button-primary { background:var(--ink); color:var(--paper); }
.contact-link { color:var(--ink); font:500 12px 'IBM Plex Mono',monospace; text-underline-offset:4px; }
.contact-playground { min-height:420px; padding:28px; border-radius:20px; background:linear-gradient(145deg,var(--ink) 0%,#0b2541 100%); color:var(--paper); position:relative; z-index:1; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 18px 40px rgba(7,26,47,.15); }
.contact-playground::before { content:''; position:absolute; width:260px; height:260px; right:-110px; top:-100px; border:1px solid rgba(101,212,157,.42); border-radius:50%; box-shadow:0 0 0 26px rgba(101,212,157,.06),0 0 0 58px rgba(77,155,255,.05); }
.playground-top, .playground-question, .playground-options, .playground-result, .contact-playground .contact-actions { position:relative; z-index:1; }
.playground-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.playground-status { color:var(--mint); font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.06em; text-align:right; text-transform:uppercase; }
.playground-status::before { content:'●'; margin-right:6px; font-size:8px; }
.playground-question { margin-top:34px; max-width:360px; font:600 clamp(24px,3vw,34px)/.98 'Space Grotesk',sans-serif; letter-spacing:-.055em; }
.playground-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
.playground-option { min-height:138px; padding:15px; border:1px solid rgba(245,248,251,.16); border-radius:16px; color:var(--muted); background:rgba(245,248,251,.04); text-align:left; cursor:pointer; position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease; }
.playground-option:hover { --lift:-4px; transform:translateY(-4px); color:var(--paper); border-color:rgba(101,212,157,.5); box-shadow:0 12px 26px rgba(4,18,36,.2); }
.playground-option:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.global-location:focus-visible, .filter:focus-visible, .nav-menu-toggle:focus-visible, .mobile-menu a:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.playground-option.is-selected { color:var(--ink); background:var(--mint); border-color:var(--mint); box-shadow:0 14px 30px rgba(101,212,157,.2); }
.playground-option span { display:block; color:var(--mint); font:500 10px 'IBM Plex Mono',monospace; letter-spacing:.08em; opacity:.9; }
.playground-option strong { display:block; margin-top:18px; font:600 16px/1.05 'Space Grotesk',sans-serif; letter-spacing:-.025em; }
.playground-option small { display:block; margin-top:6px; max-width:150px; font-size:10px; line-height:1.45; opacity:.8; }
.playground-option::after { content:'↗'; position:absolute; right:14px; bottom:13px; color:var(--mint); font:500 14px 'IBM Plex Mono',monospace; }
.playground-option.is-selected::after { color:var(--ink); }
.playground-result { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-top:22px; padding-top:15px; border-top:1px solid rgba(245,248,251,.14); }
.playground-result span { color:var(--muted); font:500 10px 'IBM Plex Mono',monospace; text-transform:uppercase; }
.playground-result strong { color:var(--paper); font:500 13px 'IBM Plex Mono',monospace; text-align:right; }
.contact-playground .contact-actions { margin-top:20px; align-items:stretch; }
.contact-playground .button-primary { background:var(--mint); color:var(--ink); text-align:center; }
.contact-playground .contact-link { color:var(--paper); text-underline-offset:4px; }
.contact-playground .contact-link:hover { color:var(--mint); }
footer { padding:30px 0 46px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px; color:var(--muted); font:400 11px 'IBM Plex Mono',monospace; }

/* 12 Movimiento ---------------------------------------------------------- */
[data-reveal] { opacity:0; transform:perspective(1200px) translateY(30px) rotateX(7deg); transform-origin:50% 100%; transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity:1; transform:none; }
/* Inclinación 3D genérica: el JS fija --rx/--ry (puntero) o --rx (scroll); cada bloque define su --lift al hover. */
.tilt-3d, .tilt-3d:hover { transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)); }
.tilt-3d { transition-property:transform,border-color,background,background-color,color,box-shadow,opacity; transition-duration:.55s,.35s,.35s,.35s,.25s,.35s,.25s; transition-timing-function:var(--ease-expo),ease,ease,ease,ease,ease,ease; }
.tilt-3d:active { --lift:-3px; }
.contact-playground.tilt-3d, .global-map-wrap.tilt-3d, .process-item.tilt-3d { transform-style:flat; }

/* Profundidad táctil: el scroll ya aporta continuidad, así que la transición larga de
   escritorio solo añade retardo. La pulsación tiene que responder aún más rápido. */
@media (pointer:coarse) {
  .tilt-3d { transition-duration:.18s,.35s,.35s,.35s,.25s,.35s,.25s; }
  .hero-visual { transition-duration:.24s; }
  .tilt-3d.is-pressed-3d { --lift:-4px; transition-duration:.1s,.35s,.35s,.35s,.25s,.35s,.25s; }
  /* Cada bloque aísla su layout y su pintado: inclinar una tarjeta no invalida el resto.
     Seguro en táctil porque aquí no hay `:hover` con sombra saliéndose del borde. */
  /* `contain:paint` recorta al borde todo lo que sobresalga, incluida la sombra de 70 px de
     `.project-card:hover`. Un portátil táctil informa `pointer:coarse` y SÍ tiene hover real,
     así que la contención se limita a los dispositivos que no lo tienen. */
  @media (hover:none) {
    .project-card, .process-item, .playground-option { contain:layout paint; }
  }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes gradient-shift { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
@keyframes panel-scan { 0%,35% { transform:translateX(-45%) rotate(-8deg); opacity:0; } 50% { opacity:1; } 70%,100% { transform:translateX(45%) rotate(-8deg); opacity:0; } }
@keyframes route-flow { to { stroke-dashoffset:-52; } }
@keyframes map-scanline { 0% { background-position:0 -220px; opacity:0; } 12% { opacity:.7; } 72% { opacity:.5; } 100% { background-position:0 100%; opacity:0; } }
@keyframes marker-pulse { 0% { transform:scale(.6); transform-origin:center; opacity:.8; } 70%,100% { transform:scale(1.8); transform-origin:center; opacity:0; } }
@keyframes signal-pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }

/* 13 Responsive ---------------------------------------------------------- */
@media (max-width:1100px) {
  .global-location-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .hero-grid, .contact-card { grid-template-columns:1fr; }
  .hero-grid { row-gap:48px; }
  .hero { min-height:auto; padding-top:148px; }
  .hero-visual { min-height:480px; margin-top:0; perspective:1100px; }
  .orbit { width:min(560px,96vw); }
  .hero-float-1 { left:4%; }
  .hero-float-2 { right:4%; --depth:1.6; }
  .hero-float-3 { left:10%; }
  .contact-actions { align-items:start; }
  .global-stage { grid-template-columns:1fr; }
  .global-intro { padding-right:0; }
  .global-intro h3 { margin-top:34px; max-width:520px; }
  .global-location-list { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .global-map-wrap { min-height:0; align-self:stretch; }
}

/* Entre 901 y 1520 px `.wrap` deja muy poco margen a la derecha y el chip 02, empujado hacia
   fuera por su profundidad, se salía de la pantalla (hasta 101 px a 1180 px). Se acerca al
   card y se le baja la Z para que quepa entero. */
@media (min-width:901px) and (max-width:1520px) {
  .hero-float-2 { right:8%; --z:90px; --depth:1.6; }
}
@media (min-width:681px) {
  .mobile-menu, .nav-menu-toggle { display:none!important; }
}
@media (max-width:680px) {
  .space-canvas { display:none!important; }
  .wrap { width:min(100% - 32px,1180px); }
  .nav-shell { padding-top:8px; }
  .nav-shell.is-scrolled { padding-top:5px; }
  nav .wrap { padding-left:9px; }
  .nav-links, .nav-cta { display:none; }
  .nav-menu-toggle { position:fixed; top:12px; right:16px; z-index:18; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:rgba(7,26,47,.92); color:var(--paper); font:600 11px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
  .nav-menu-toggle-icon { color:var(--mint); font-size:20px; line-height:1; }
  .mobile-menu { position:fixed; top:68px; left:16px; right:16px; z-index:17; display:grid; gap:4px; padding:10px; border:1px solid var(--line); border-radius:18px; background:rgba(7,26,47,.97); box-shadow:0 18px 48px rgba(0,0,0,.28); }
  .mobile-menu[hidden] { display:none!important; }
  .mobile-menu a { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:10px 12px; border-radius:10px; color:var(--muted); font:500 11px 'IBM Plex Mono',monospace; text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
  .mobile-menu a:hover { color:var(--paper); background:rgba(77,155,255,.1); }
  .mobile-menu .mobile-menu-cta { margin-top:4px; background:var(--mint); color:var(--ink); font-weight:700; }

  .hero { min-height:auto; padding:96px 0 58px; }
  .hero::before { display:none; }
  .hero-grid { row-gap:20px; }
  .hero h1 { margin-top:12px; font-size:clamp(44px,14vw,60px); line-height:.92; letter-spacing:-.065em; }
  .hero-copy { margin-top:14px; font-size:clamp(15px,4.1vw,17px); line-height:1.5; }
  .hero-actions { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,.9fr); gap:8px; margin-top:20px; }
  .hero-actions .button { min-width:0; min-height:44px; padding:0 clamp(9px,3vw,15px); font-size:12px; white-space:nowrap; }
  .hero-meta { display:grid; gap:7px; margin-top:18px; font-size:10px; line-height:1.45; }
  .hero-visual { min-height:0; margin-top:14px; perspective:1000px; }
  /* Órbita 3D en móvil: más pequeña y con el arco frontal justo bajo el card. */
  .orbit { width:min(340px,calc(100vw - 8px)); transform:translate3d(-50%,calc(-50% + 175px),-30px) rotateX(78deg) rotate(-17deg); }
  /* A ≤680 el canvas espacial y el aro del hero están ocultos: detrás de los chips solo
     queda el color plano del body, así que el desenfoque no se ve y sí se paga por frame. */
  .hero-float > span { padding:7px 10px; font-size:8px; letter-spacing:.08em; backdrop-filter:none; background:rgba(7,26,47,.9); }
  .hero-float-1 { top:-12px; left:2px; --z:70px; --depth:1.4; }
  .hero-float-2 { top:38%; right:-2px; --z:110px; --depth:1.9; }
  .hero-float-3 { bottom:-10px; left:10px; --z:50px; --depth:1.1; }
  .hero-carousel { width:100%; }
  .hero-carousel::before { transform:translate3d(0,-12px,-60px) scale(.96); }
  .hero-carousel::after { transform:translate3d(0,-24px,-120px) scale(.92); }
  .hero-card:hover { transform:none; }
  .hero-card-media::before { top:10px; right:10px; padding:5px 7px; font-size:7px; }
  .hero-card-footer { grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'meta counter' 'controls controls' 'link link'; gap:10px 12px; padding:13px; }
  .hero-card-kicker { font-size:7px; }
  .hero-carousel-controls { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; width:100%; gap:8px; }
  .hero-carousel-toggle, .hero-motion-toggle { width:100%; min-width:0; padding-inline:8px; }
  .hero-project-link { width:100%; min-width:0; padding-inline:10px; }
  .scroll-cue { position:static; display:block; width:max-content; margin:44px auto 0; transform:none; }
  .scroll-cue::after { height:28px; margin-top:8px; }

  .section { padding:84px 0; }
  .section-heading { display:block; margin-bottom:32px; }
  .section-heading p { margin-top:18px; }
  .global-stage { padding:16px; gap:20px; }
  .global-signal { display:block; line-height:2; }
  .global-signal span { display:block; }
  .global-location { min-height:44px; }
  .global-location-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .global-map-wrap { padding:12px 8px 8px; }
  .global-map-host { width:calc(100% + 8px); margin-inline:-4px; }
  .global-map { transform:scale(1.02); }
  .global-map-console { grid-template-columns:1fr; }
  .global-map-insight { align-items:flex-start; }
  .global-map-insight strong { font-size:14px; }
  .global-map-footer { display:block; line-height:1.7; }
  .global-map-footer span { display:block; }
  .global-status { display:block; }
  .global-status strong { display:block; margin-top:8px; text-align:left; line-height:1.4; }
  .filter { min-height:44px; }
  .live-toggle { min-height:44px; }
  .projects-grid { grid-template-columns:1fr; }
  .project-visual { min-height:0; aspect-ratio:16/10; }
  .project-card::after { display:none; }
  .process-grid { grid-template-columns:1fr; }
  .process-item { min-height:190px; }
  .process-item h3 { margin-top:32px; }
  .process-item::after { font-size:88px; }
  .contact-section { padding-top:72px; }
  .contact-card { gap:38px; padding:34px 24px 42px; }
  .contact-card h2 { font-size:48px; }
  .contact-intro { padding-right:0; }
  .contact-notes { margin-top:32px; }
  .playground-options { grid-template-columns:1fr; }
  .playground-result { display:block; }
  .playground-result strong { display:block; margin-top:8px; text-align:left; }
  footer { padding-bottom:30px; }
}

/* 14 Gama baja y transparencia reducida ---------------------------------- */
/* Los desenfoques de fondo se recalculan en cada frame de scroll: en una GPU modesta
   cuestan más que toda la escena 3D junta. La clase `is-low-tier` la pone `initDepth()`
   con las pistas del navegador o con el vigilante de frames. */
@media (prefers-reduced-transparency:reduce) {
  nav { backdrop-filter:none; background:rgba(7,26,47,.97); }
  .hero-float > span { backdrop-filter:none; background:rgba(7,26,47,.95); }
  .hero-card-media::before { backdrop-filter:none; background:rgba(7,26,47,.92); }
  .project-card::after { backdrop-filter:none; background:rgba(7,26,47,.95); }
}
body.is-low-tier nav { backdrop-filter:none; background:rgba(7,26,47,.97); }
body.is-low-tier .hero-float > span { backdrop-filter:none; background:rgba(7,26,47,.95); animation:none; }
body.is-low-tier .hero-card-media::before { backdrop-filter:none; background:rgba(7,26,47,.92); }
body.is-low-tier .project-card::after { backdrop-filter:none; background:rgba(7,26,47,.95); }
body.is-low-tier .orbit-ring { animation:none; }
body.is-low-tier .capability-panel::after { animation:none; }
body.is-low-tier .hero h1 em { animation:none; }

/* 15 Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
  [data-reveal] { opacity:1; transform:none; }
  .orbit-ring, .hero-float > span { animation:none; }
  .tilt-3d, .tilt-3d.is-pressed-3d, .hero-visual { transform:none!important; }
  /* Dentro del iframe corre el sitio real con sus propias animaciones y no hay forma de
     apagarlas desde aquí, así que con «reducir movimiento» la vista en vivo no se muestra. */
  .project-live { display:none!important; }
}