/* ============================================================
   AIRIS — Sitio (one-page experimental) · v3 "Pulso"
   Identidad aprobada: cian dominante sobre tinta, dorado mínimo.
   Diseño mobile-first. El "show" vive en <canvas>; el texto
   siempre queda legible por encima. Sin dependencias externas
   salvo tipografías. — equipo Airis
   ============================================================ */

:root{
  --cyan:#00e0ff; --cyan-deep:#28beff;
  --gold:#c8a84e; --gold-soft:#e4c873;
  --ink:#04070e; --ink-2:#070b16;
  --text:#eef3fb; --muted:#9ca8bd; --muted-2:#6b7689;
  --line:rgba(255,255,255,.08);
  --maxw:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;width:100%}   /* sin scroll-snap ni smooth nativo: scroll libre, nunca se traba. overflow-x:clip = no desplazamiento horizontal en mobile */
body{
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--ink); color:var(--text);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:rgba(0,224,255,.22)}
/* sólo para lectores de pantalla / SEO (no visible) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Capas de fondo (fijas, persisten en todo el scroll) ---------- */
.layer{position:fixed;inset:0;pointer-events:none}
#fluid{z-index:0}                 /* nebulosa WebGL procedural */
#scrim{z-index:1;background:var(--ink);opacity:0;will-change:opacity} /* oscurece para legibilidad */
#net{z-index:2;will-change:opacity} /* red de partículas (2D canvas) */
#logoReal{                         /* isotipo real, nítido, sólo en la portada */
  position:fixed;left:50%;top:30%;transform:translate(-50%,-50%);z-index:3;
  transform-origin:center center;
  width:min(460px,52vw);aspect-ratio:1/1;object-fit:contain;opacity:0;
  pointer-events:none;will-change:opacity,transform,filter;
  filter:drop-shadow(0 0 22px rgba(0,224,255,.38));
}
.vignette{z-index:4;background:radial-gradient(64% 64% at 50% 42%,transparent 40%,rgba(4,7,14,.66) 100%);will-change:opacity}

/* Fallback sin WebGL: degradado animado liviano */
body.no-webgl #fluid{display:none}
body.no-webgl{
  background:
    radial-gradient(50% 50% at 28% 30%,rgba(0,120,170,.22),transparent 60%),
    radial-gradient(50% 50% at 76% 72%,rgba(200,168,78,.08),transparent 60%),
    radial-gradient(120% 90% at 50% 40%,#0a1426,#04070e);
  background-attachment:fixed;background-size:200% 200%;
  animation:drift 26s ease-in-out infinite;
}
@keyframes drift{50%{background-position:30% 60%,70% 30%,50% 50%}}

/* ---------- Portada (wordmark + tagline + cue), fija ---------- */
.hero-ui{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:28px;
  pointer-events:none;will-change:opacity}
.hero-ui .spacer{height:clamp(150px,30vh,300px)}
.wm{font-family:'Sora',sans-serif;font-weight:200;letter-spacing:.30em;text-indent:.30em;
  font-size:clamp(2.2rem,10vw,5.4rem);line-height:1;white-space:nowrap;display:flex;align-items:center;
  opacity:0;transform:translateY(14px);animation:reveal 1.4s cubic-bezier(.2,.7,.2,1) 2.2s forwards}
.wm .ai{color:#fff;text-shadow:0 0 34px rgba(0,224,255,.5)}
.wm .ai b{color:var(--cyan);font-weight:inherit}
.wm .sep{display:inline-block;width:1.5px;height:.62em;margin:0 .42em;border-radius:2px;
  background:linear-gradient(180deg,var(--gold-soft),#b6882f);box-shadow:0 0 8px rgba(212,175,55,.55)}
.wm .ris{color:var(--text)}
.tagline{margin-top:22px;font-weight:300;font-size:clamp(.7rem,2vw,.92rem);color:#d4af37;
  letter-spacing:.40em;text-transform:uppercase;opacity:0;
  animation:reveal 1.4s ease 2.7s forwards;text-shadow:0 0 18px rgba(212,175,55,.3)}
.tagline .dot{color:var(--gold-soft);margin:0 .25em}
@keyframes reveal{to{opacity:1;transform:none}}

.scrollcue{position:fixed;left:50%;bottom:42px;transform:translateX(-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);
  opacity:0;transition:opacity .5s ease;will-change:opacity}
.scrollcue span{font-family:'Sora';font-size:.58rem;letter-spacing:.42em;text-transform:uppercase}
.scrollcue svg{width:18px;height:18px;stroke:var(--cyan);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;padding:15px clamp(18px,5vw,46px);
  opacity:0;animation:navIn 1.1s ease 3s forwards;
  transition:background .4s ease,border-color .4s ease,backdrop-filter .4s ease}
@keyframes navIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.nav.scrolled{background:rgba(4,7,14,.58);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav .brand{font-family:'Sora';font-weight:300;letter-spacing:.22em;font-size:1rem;display:flex;align-items:center}
.nav .brand .ai b{color:var(--cyan);font-weight:inherit}
.nav .brand .sep{display:inline-block;width:1.2px;height:.66em;margin:0 .32em;background:linear-gradient(180deg,var(--gold-soft),#b6882f)}
.nav .cta{font-family:'Sora';font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);padding:9px 18px;border:1px solid rgba(0,224,255,.3);border-radius:999px;
  transition:border-color .25s,color .25s,background .25s}
.nav .cta:hover,.nav .cta:focus-visible{border-color:var(--cyan);color:var(--cyan);background:rgba(0,224,255,.07);outline:none}
/* accesos directos de la barra superior (deslizan a cada sección) */
.nav-right{display:flex;gap:9px;align-items:center}
.nav-menu{display:flex;gap:9px;align-items:center}
.nav-menu button{font-family:'Sora';font-weight:300;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text);background:none;cursor:pointer;padding:9px 18px;border:1px solid rgba(0,224,255,.3);
  border-radius:999px;transition:border-color .25s,color .25s,background .25s}
.nav-menu button:hover{border-color:var(--cyan);color:var(--cyan);background:rgba(0,224,255,.07)}
.nav-menu button.on{border-color:var(--cyan);color:var(--cyan);background:rgba(0,224,255,.07)}
.cta.on{border-color:var(--cyan);color:var(--cyan)}
@media (max-width:900px){.nav-menu{display:none}}

/* ---------- Progreso de lectura: hairline superior, cian ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:30;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,224,255,.9),rgba(40,190,255,.4));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  box-shadow:0 0 10px rgba(0,224,255,.35)}

/* ---------- Rail de puntos (sólo pantallas chicas: el menú no entra) ---------- */
.rail{position:fixed;right:12px;top:50%;transform:translateY(-50%);z-index:18;
  display:none;flex-direction:column;gap:5px;align-items:center;   /* gap chico: el padding táctil ya separa */
  opacity:0;animation:navIn 1.1s ease 3.2s forwards}
.rail button{display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:9px}   /* área táctil 25px (WCAG 2.5.8) sin cambiar lo visual */
.rail .rl-txt{display:none}                       /* puntos solos: discretos, sin etiquetas */
.rail .rl-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.30);transition:.3s;flex-shrink:0}
.rail button.on .rl-dot{background:var(--cyan);box-shadow:0 0 0 4px rgba(0,224,255,.14),0 0 12px rgba(0,224,255,.7);transform:scale(1.3)}
.rail button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:50%}
@media (max-width:900px){.rail{display:flex}}

/* ---------- Contenido (scrollytelling) ---------- */
main{position:relative;z-index:10;pointer-events:none;overflow-x:clip}   /* deja pasar clicks a los botones del overlay; el texto reactiva la captura. overflow-x:clip recorta el sangrado horizontal del ::before de legibilidad (no afecta el scroll vertical) */
.scene{min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(90px,14vh,150px) clamp(22px,6vw,64px)}
/* secciones-ancla vacías (portada y cierre): no interceptan clicks → llegan a los botones del overlay */
.scene[aria-hidden="true"]{pointer-events:none}
.scene .inner{position:relative;max-width:46ch;width:100%;pointer-events:auto}
/* respaldo de legibilidad detrás del texto, suave, sin tapar la red */
.scene .inner::before{content:"";position:absolute;inset:-70px -110px;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 86% at 28% 50%,rgba(4,7,14,.82),rgba(4,7,14,.32) 50%,transparent 82%);
  filter:blur(38px)}
.scene.right{justify-content:flex-end}
.scene.right .inner{text-align:right}
.scene.right .inner::before{background:radial-gradient(72% 86% at 72% 50%,rgba(4,7,14,.82),rgba(4,7,14,.32) 50%,transparent 82%)}
.scene.center{justify-content:center;text-align:center}
.scene.center .inner{max-width:34ch}
.scene.center .inner::before{background:radial-gradient(78% 88% at 50% 50%,rgba(4,7,14,.84),rgba(4,7,14,.3) 52%,transparent 84%)}

.eyebrow{font-family:'Sora';font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);text-shadow:0 0 18px rgba(200,168,78,.22);margin-bottom:20px}
.headline{font-family:'Sora';font-weight:300;font-size:clamp(2rem,5vw,3.3rem);
  line-height:1.14;letter-spacing:.006em;text-wrap:balance}
.headline .hl{color:var(--cyan)}
.lead{margin-top:24px;font-weight:300;font-size:clamp(1.04rem,2.05vw,1.2rem);
  line-height:1.72;color:#b3bdcf;max-width:52ch;text-wrap:pretty}
.scene.right .lead{margin-left:auto}
/* pilares: desarrollan la ventana con 3 conceptos clave */
.pillars{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding:0}
.pillars li{font-family:'Sora';font-weight:300;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid rgba(0,224,255,.28);border-radius:999px;padding:8px 15px}
.scene.right .pillars{justify-content:flex-end}

/* ---------- Escenas de servicio (Qué hacemos · 01/02/03) ---------- */
.scene.svc .inner{max-width:54ch}
/* número fantasma: trazo cian apenas visible detrás del texto (se pinta antes en el DOM → queda debajo) */
.ghost{position:absolute;top:-.55em;left:-.06em;z-index:0;pointer-events:none;user-select:none;
  font-family:'Sora';font-weight:200;line-height:1;font-size:clamp(6rem,17vw,14rem);
  color:transparent;-webkit-text-stroke:1px rgba(0,224,255,.17)}
@supports not (-webkit-text-stroke:1px black){.ghost{color:rgba(0,224,255,.06)}}
.scene.right .ghost{left:auto;right:-.06em}
/* capacidades: filas con hairline, escalonadas (la escalera rompe la grilla sin perder orden) */
.caps{list-style:none;margin-top:30px;padding:0;display:flex;flex-direction:column}
.caps li{display:flex;align-items:baseline;gap:14px;padding:12px 2px;
  border-top:1px solid rgba(0,224,255,.14)}
.caps li:last-child{border-bottom:1px solid rgba(0,224,255,.14)}
.caps b{font-family:'Sora';font-weight:400;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);white-space:nowrap}
.caps span{font-weight:300;font-size:.95rem;color:#b3bdcf}
.scene.right .caps li{flex-direction:row-reverse}
@media (min-width:760px){
  .caps li:nth-child(2){margin-left:20px}
  .caps li:nth-child(3){margin-left:40px}
  .caps li:nth-child(4){margin-left:60px}
  .scene.right .caps li:nth-child(2){margin-left:0;margin-right:20px}
  .scene.right .caps li:nth-child(3){margin-left:0;margin-right:40px}
  .scene.right .caps li:nth-child(4){margin-left:0;margin-right:60px}
}
/* para quién: línea sobria, separadores dorados mínimos */
.fit{margin-top:24px;font-family:'Sora';font-weight:300;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.fit i{font-style:normal;color:var(--gold-soft);margin:0 .35em}

/* ---------- Cierre: overlay fijo (palabra de nodos + contacto) — patrón de la portada ---------- */
.finale-ui{position:fixed;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:28px;
  pointer-events:none;opacity:0;will-change:opacity}
.finale-ui .fin-spacer{height:clamp(30px,9vh,110px)}
.finale-word{font-family:'Sora';font-weight:300;letter-spacing:0;line-height:1;color:#fff;
  font-size:clamp(2.4rem,9vw,5rem);text-shadow:0 0 38px rgba(0,224,255,.45)}
.fin-lead{margin-top:34px;font-weight:300;font-size:clamp(1.02rem,2.3vw,1.24rem);color:var(--muted);max-width:42ch}
/* acceso directo a las demos desde el cierre */
.fin-work{margin-top:16px;pointer-events:none}
.fin-work a{font-family:'Sora';font-weight:300;font-size:.92rem;letter-spacing:.06em;color:var(--cyan);
  border-bottom:1px solid rgba(0,224,255,.4);padding-bottom:3px;transition:color .2s,border-color .2s}
.fin-work a span{display:inline-block;transition:transform .2s}
.fin-work a:hover{color:#bdf3ff;border-color:var(--cyan)}
.fin-work a:hover span{transform:translateX(4px)}
.fin-actions{margin-top:30px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;pointer-events:none}
.fin-actions .btn{min-width:178px;color:#fff}        /* WhatsApp y Correo del mismo tamaño, texto blanco */
/* clickeables sólo cuando el cierre está visible (botones, teléfono y links del pie) */
.finale-ui.shown .fin-work,.finale-ui.shown .fin-actions,.finale-ui.shown .fin-phone,.finale-ui.shown .fin-meta{pointer-events:auto}
.fin-phone{margin-top:18px;font-family:'Sora';font-size:.82rem;letter-spacing:.16em;color:var(--muted-2)}
.fin-phone a{transition:color .2s}
.fin-phone a:hover{color:var(--cyan)}
.fin-meta{margin-top:24px;font-family:'Sora';font-size:.74rem;letter-spacing:.08em;color:var(--muted-2)}
.fin-meta a{color:inherit;text-decoration:none;transition:color .2s}
.fin-meta a:hover{color:var(--cyan)}

/* ---------- Contacto ---------- */
.actions{margin-top:38px;display:flex;flex-wrap:wrap;gap:15px;align-items:center}
.scene.center .actions{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:15px 26px;border-radius:12px;font-size:1rem;font-weight:500;letter-spacing:.01em;
  transition:transform .15s ease,box-shadow .25s ease,border-color .25s,color .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.btn-primary{background:rgba(0,224,255,.1);border:1px solid rgba(0,224,255,.45);color:var(--cyan)}
.btn-primary:hover{background:rgba(0,224,255,.16);border-color:var(--cyan);box-shadow:0 10px 34px rgba(0,224,255,.18)}
.btn-primary svg{width:20px;height:20px;flex-shrink:0;fill:currentColor}
.phone{margin-top:18px;font-family:'Sora';font-size:.82rem;letter-spacing:.16em;color:var(--muted-2)}

/* ---------- Footer ---------- */
footer{position:relative;z-index:10;border-top:1px solid var(--line);
  padding:44px clamp(22px,5vw,46px);text-align:center;background:rgba(4,7,14,.66)}
footer .fwm{font-family:'Sora';font-weight:300;letter-spacing:.24em;font-size:1.04rem;display:inline-flex;align-items:center}
footer .fwm .ai b{color:var(--cyan);font-weight:inherit}
footer .fwm .sep{display:inline-block;width:1.2px;height:.66em;margin:0 .32em;background:linear-gradient(180deg,var(--gold-soft),#b6882f)}
footer .ftag{margin-top:13px;font-size:.82rem;letter-spacing:.05em;color:var(--muted)}
footer .fmeta{margin-top:18px;display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-family:'Sora';font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
footer .fmeta a{transition:color .25s}
footer .fmeta a:hover{color:var(--cyan)}

/* ---------- Reveal de texto (barato, vía IntersectionObserver) ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ---------- Mobile ---------- */
@media (max-width:680px){
  .scene{padding:clamp(80px,12vh,120px) 22px;align-items:center}
  .scene,.scene.right,.scene.center{justify-content:center}
  .scene .inner,.scene.right .inner{text-align:center;margin:0 auto;max-width:90%}
  .scene .inner::before,.scene.right .inner::before,.scene.center .inner::before{
    background:radial-gradient(120% 120% at 50% 50%,rgba(4,7,14,.78),rgba(4,7,14,.34) 58%,transparent 82%)}
  .scene.right .lead{margin:22px auto 0}
  .actions,.scene.center .actions{justify-content:center}
  .nav .cta{padding:8px 14px;font-size:.7rem}
  /* escenas de servicio: compactas para que todo entre en una pantalla */
  .scene.svc{padding-top:clamp(64px,9vh,90px);padding-bottom:clamp(56px,8vh,84px)}
  .scene.svc .lead{font-size:1rem;line-height:1.6;margin-top:18px}
  .scene.svc .eyebrow{margin-bottom:14px}
  .ghost{left:50%;right:auto;transform:translateX(-50%);top:-.42em;font-size:5.2rem}
  .scene.right .ghost{left:50%;right:auto}
  .caps{text-align:left;margin-top:22px}
  .caps li,.scene.right .caps li{flex-direction:column;gap:3px;align-items:flex-start;padding:9px 2px}
  .fit{letter-spacing:.14em;margin-top:16px;font-size:.62rem}
}

/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rail{animation:none;opacity:1}
  .wm,.tagline,.scrollcue,.nav{animation:none;opacity:1;transform:none}
  .scrollcue svg{animation:none}
  [data-reveal]{transition:none;opacity:1;transform:none}
  body.no-webgl{animation:none}
}