/* =========================================================
   QUANTASPORT · SITIO DE PRESENTACIÓN
   ---------------------------------------------------------
   Hereda el lenguaje visual de la ventana de inicio de la app
   (styles/main.css): nebulosa en «screen», grano, viñeta,
   cyan de marca y los colores de eje X rojo · Y cyan · Z índigo.
   ========================================================= */

:root{
  /* ---- Papel: la página ----
     El sitio va sobre blanco a propósito, para que no se confunda con la
     ventana de la aplicación, que es azul noche. El contraste se lo dan las
     VENTANAS: escenas, tutorial, descargas y cierre siguen siendo oscuras y
     se recortan sobre el papel como objetos a los que mirar. */
  --paper:#ffffff;
  --paper-2:#f7f9fc;    /* superficie elevada (tarjetas, formulario) */
  --paper-3:#eef3fa;    /* rellenos suaves (chips, pozos) */

  /* ---- Superficies oscuras ---- */
  --deep:#070b14;
  --night:#0b1220;
  --panel:rgba(13,21,38,.62);
  --panel-2:rgba(19,29,50,.55);

  /* ---- Tinta y líneas ----
     Estos cuatro se REDEFINEN dentro de cada superficie oscura (más abajo),
     así que una regla escrita con var(--fg-soft) sirve en los dos mundos sin
     duplicarla. Ratios sobre blanco: 18,7 · 10,4 · 7,6 · 4,8. */
  --fg:#0b1220;
  --fg-soft:#334155;
  --fg-mute:#475569;
  --fg-faint:#64748b;
  --line:#e3e9f2;
  --line-strong:#cbd7e6;

  /* ---- Marca ----
     Dos azules distintos a propósito: --brand-ink es el que puede llevar
     TEXTO sobre blanco (5,9:1, cumple AA); --brand se reserva para piezas de
     interfaz —iconos, bordes, puntos— donde basta 3:1. --glow solo vive
     sobre las superficies oscuras. */
  --brand:#0284c7;
  --brand-ink:#0369a1;
  --brand-tint:#e8f4fd;
  --glow:#38bdf8;
  --glow-soft:#7dd3fc;
  --accent:#0ea5e9;

  /* Ejes (variantes luminosas para fondo oscuro) */
  --x-color:#f87171;
  --y-color:#22d3ee;
  --z-color:#818cf8;
  --hr-color:#fca5a5;

  --radius:18px;
  --radius-sm:12px;
  --radius-full:999px;

  --maxw:1180px;
  --pad:clamp(20px,5vw,48px);

  /* Alto de la cabecera fija; en móvil pasa a dos filas (ver media queries) */
  --nav-h:62px;
}

/* ---------------------------------------------------------
   Superficies oscuras · las «ventanas»
   ---------------------------------------------------------
   Un único sitio donde se invierte la tinta. Todo lo que cuelgue de una de
   estas cajas hereda los valores oscuros, de modo que las reglas de contenido
   se escriben una sola vez.
   --------------------------------------------------------- */

.scene-frame,
.modal-card,
.closing,
.site-footer,
.dl{
  --fg:#eaf1fb;
  --fg-soft:rgba(234,241,251,.80);
  --fg-mute:rgba(234,241,251,.66);
  --fg-faint:rgba(234,241,251,.48);
  --line:rgba(148,163,184,.18);
  --line-strong:rgba(148,197,255,.30);
  --brand-ink:#7dd3fc;
  --brand-tint:rgba(56,189,248,.14);
  color:var(--fg);
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;scroll-padding-top:82px;}

body{
  margin:0;
  min-height:100%;
  color:var(--fg);
  background:var(--paper);
  font-family:"Segoe UI Variable Text","Segoe UI Variable",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}

code{
  font-family:ui-monospace,Consolas,"Cascadia Mono",monospace;
  font-size:.88em;
  padding:1px 6px;
  border-radius:6px;
  background:var(--brand-tint);
  border:1px solid rgba(2,132,199,.22);
  color:var(--brand-ink);
  white-space:nowrap;
}

em{font-style:italic;color:var(--fg);}
strong{color:var(--fg);font-weight:700;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  padding:12px 18px;border-radius:0 0 var(--radius-sm) 0;
  background:var(--brand-ink);color:#fff;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0;}

/* ---------------------------------------------------------
   Fondo: la misma nebulosa del splash, fija tras la página
   --------------------------------------------------------- */

body::before{
  content:"";
  position:fixed;inset:0;z-index:-3;
  background:radial-gradient(125% 125% at 50% 12%,#f4f9ff 0%,#fbfdff 44%,#ffffff 100%);
}

.bg-nebula{
  position:fixed;inset:-12%;z-index:-2;
  filter:blur(76px) saturate(112%);
  pointer-events:none;
  opacity:.85;
}

.nebula-blob{position:absolute;border-radius:50%;mix-blend-mode:multiply;opacity:.6;will-change:transform,opacity;}
.nebula-blob-1{width:46vmax;height:46vmax;left:4%;top:2%;
  background:radial-gradient(circle at 50% 50%,rgba(148,206,246,.95),rgba(148,206,246,0) 62%);
  animation:nebula-drift-1 26s ease-in-out infinite alternate;}
.nebula-blob-2{width:40vmax;height:40vmax;right:0%;top:-4%;
  background:radial-gradient(circle at 50% 50%,rgba(178,184,240,.9),rgba(178,184,240,0) 60%);
  animation:nebula-drift-2 32s ease-in-out infinite alternate;}
.nebula-blob-3{width:44vmax;height:44vmax;left:10%;bottom:-6%;
  background:radial-gradient(circle at 50% 50%,rgba(150,220,232,.9),rgba(150,220,232,0) 60%);
  animation:nebula-drift-3 30s ease-in-out infinite alternate;}
.nebula-blob-4{width:30vmax;height:30vmax;right:10%;bottom:0%;
  background:radial-gradient(circle at 50% 50%,rgba(247,198,198,.85),rgba(247,198,198,0) 64%);
  animation:nebula-drift-4 36s ease-in-out infinite alternate;}
.nebula-blob-5{width:34vmax;height:34vmax;left:50%;top:34%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(176,224,252,.9),rgba(176,224,252,0) 60%);
  animation:nebula-pulse 9s ease-in-out infinite;}

@keyframes nebula-drift-1{from{transform:translate(0,0) scale(1)}to{transform:translate(8%,7%) scale(1.12)}}
@keyframes nebula-drift-2{from{transform:translate(0,0) scale(1)}to{transform:translate(-7%,9%) scale(1.1)}}
@keyframes nebula-drift-3{from{transform:translate(0,0) scale(1)}to{transform:translate(7%,-8%) scale(1.14)}}
@keyframes nebula-drift-4{from{transform:translate(0,0) scale(1)}to{transform:translate(-9%,-7%) scale(1.18)}}
@keyframes nebula-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.40}50%{transform:translate(-50%,-50%) scale(1.16);opacity:.62}}

.bg-grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}

/* ---------------------------------------------------------
   Progreso de lectura
   --------------------------------------------------------- */

.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:120;background:transparent;}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,rgba(125,211,252,.2),var(--glow) 60%,#fff);
  box-shadow:0 0 14px rgba(56,189,248,.7);
  transition:width .1s linear;
}

/* ---------------------------------------------------------
   Navegación
   --------------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;gap:clamp(12px,3vw,32px);
  padding:14px var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}

.nav.is-stuck{
  background:rgba(255,255,255,.82);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}

.nav-brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:-.01em;font-size:1.02rem;color:var(--fg);text-decoration:none;
  flex:0 0 auto;
}
.nav-brand img{border-radius:8px;filter:drop-shadow(0 3px 10px rgba(2,132,199,.28));}
.nav-brand sub{font-size:.55em;font-weight:700;color:var(--brand-ink);bottom:-.1em;}

.nav-links{
  display:flex;align-items:center;gap:4px;
  margin-left:auto;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav-links::-webkit-scrollbar{display:none;}

.nav-links a{
  padding:7px 13px;border-radius:var(--radius-full);
  font-size:.86rem;font-weight:600;color:var(--fg-mute);text-decoration:none;white-space:nowrap;
  transition:color .25s ease,background .25s ease;
}
.nav-links a:hover{color:var(--fg);background:var(--paper-3);}
.nav-links a.is-current{color:var(--brand-ink);background:var(--brand-tint);box-shadow:inset 0 0 0 1px rgba(2,132,199,.28);}

.nav-cta{
  flex:0 0 auto;
  padding:9px 20px;border-radius:var(--radius-full);
  background:linear-gradient(180deg,#0369a1 0%,#075985 100%);
  color:#fff;font-weight:800;font-size:.86rem;text-decoration:none;
  border:1px solid #075985;
  box-shadow:0 8px 18px rgba(3,105,161,.26);
  transition:transform .15s ease,box-shadow .25s ease,filter .25s ease;
}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.12);box-shadow:0 12px 26px rgba(3,105,161,.4);}

/* ---------------------------------------------------------
   INICIO · calcado de la ventana de inicio de la aplicación
   --------------------------------------------------------- */

.hero{
  position:relative;
  min-height:calc(100vh - var(--nav-h));
  min-height:calc(100svh - var(--nav-h));
  display:grid;place-items:center;
  padding:clamp(40px,8vh,90px) var(--pad) 110px;
  overflow:hidden;
}

.hero-signal{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;pointer-events:none;
}

.hero-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 36%,transparent 46%,rgba(255,255,255,.88) 100%);
}

.hero-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:24px;max-width:820px;
  animation:hero-in .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-logo-wrap{position:relative;margin-bottom:28px;animation:hero-pop .85s cubic-bezier(.2,.8,.2,1) both;}
.hero-logo{
  width:clamp(150px,19vw,210px);height:auto;border-radius:22%;
  filter:drop-shadow(0 18px 40px rgba(2,132,199,.28));
  animation:hero-float 6s ease-in-out infinite;
}
.hero-logo-ring{
  position:absolute;inset:-18px;border-radius:26%;
  border:1px solid rgba(2,132,199,.22);
  box-shadow:0 0 70px rgba(56,189,248,.20),inset 0 0 34px rgba(56,189,248,.07);
  animation:hero-ring 4.5s ease-in-out infinite;
}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hero-ring{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.05)}}
@keyframes hero-pop{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}

.hero-wordmark{
  margin:0;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--fg);
  font-size:clamp(2.6rem,7vw,4.2rem);
}
.hero-wordmark sub{font-size:.4em;font-weight:700;letter-spacing:.02em;color:var(--brand-ink);bottom:-.08em;}

.hero-tagline{
  margin:18px 0 0;max-width:52ch;
  color:var(--fg-soft);line-height:1.55;
  font-size:clamp(.98rem,1.6vw,1.14rem);
  animation:fade-in 1s .15s both;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}


.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:36px;animation:fade-in .8s 1s both;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 30px;border-radius:var(--radius-full);
  font-weight:800;font-size:.98rem;text-decoration:none;cursor:pointer;
  transition:transform .15s ease,box-shadow .25s ease,filter .25s ease,background .25s ease,border-color .25s ease;
}
.btn-primary{
  background:linear-gradient(180deg,#0369a1 0%,#075985 100%);
  border:1px solid #075985;color:#fff;
  box-shadow:0 12px 26px rgba(3,105,161,.30),inset 0 1px 0 rgba(255,255,255,.18);
  animation:cta-pulse 2.8s 1.6s ease-in-out infinite;
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 16px 34px rgba(3,105,161,.42),inset 0 1px 0 rgba(255,255,255,.22);}
.btn-ghost{
  background:rgba(255,255,255,.7);border:1px solid var(--line-strong);color:var(--fg);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:#fff;border-color:var(--brand);transform:translateY(-2px);}
.btn:focus-visible,.nav-cta:focus-visible,.nav-links a:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px rgba(3,105,161,.55);}

@keyframes cta-pulse{
  0%,100%{box-shadow:0 12px 26px rgba(3,105,161,.28),inset 0 1px 0 rgba(255,255,255,.18);}
  50%{box-shadow:0 16px 36px rgba(3,105,161,.46),inset 0 1px 0 rgba(255,255,255,.22);}
}

/* ---------------------------------------------------------
   Antetítulo (lo usan funcionalidades.html y contacto.html)
   --------------------------------------------------------- */

.eyebrow{
  margin:0 0 12px;font-size:.74rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand-ink);
}

/* ---------------------------------------------------------
   Funcionalidades
   --------------------------------------------------------- */

main{display:block;padding:clamp(40px,7vh,80px) var(--pad) 0;}

.feature{padding:clamp(38px,7vh,86px) 0;}

.feature-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(28px,5vw,66px);align-items:center;
}
.feature:nth-of-type(even) .feature-copy{order:2;}

.feature-num{
  display:inline-block;margin-bottom:14px;
  font-size:.78rem;font-weight:800;letter-spacing:.2em;
  color:var(--brand-ink);
  padding:5px 12px;border-radius:var(--radius-full);
  background:var(--brand-tint);border:1px solid rgba(2,132,199,.22);
}

.feature-copy h3{
  margin:0 0 16px;font-size:clamp(1.5rem,3.2vw,2.15rem);font-weight:800;line-height:1.16;letter-spacing:-.02em;color:var(--fg);
}
.lead{margin:0 0 22px;color:var(--fg-soft);font-size:clamp(.98rem,1.5vw,1.06rem);line-height:1.66;}


.chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;}
.chips span{
  padding:6px 13px;border-radius:var(--radius-full);
  font-size:.78rem;font-weight:600;color:var(--fg-mute);
  background:var(--paper-3);border:1px solid var(--line);
}

/* Escenas (lienzos animados) */
.scene{margin:0;}
.scene-frame{
  position:relative;
  border-radius:var(--radius);
  border:1px solid rgba(11,18,32,.14);
  background:linear-gradient(180deg,#16213a 0%,#0b1220 100%);
  box-shadow:0 30px 60px -20px rgba(11,18,32,.42),0 8px 20px -8px rgba(11,18,32,.24),inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.scene-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,rgba(56,189,248,.10),transparent 60%);
}
.scene-head{
  display:flex;align-items:center;gap:9px;
  padding:11px 16px;
  border-bottom:1px solid rgba(148,163,184,.14);
  font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--fg-mute);
  background:rgba(255,255,255,.02);
}
.scene-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--glow);box-shadow:0 0 10px rgba(56,189,248,.9);
  animation:dot-blink 2.4s ease-in-out infinite;
}
@keyframes dot-blink{0%,100%{opacity:1}50%{opacity:.35}}
.scene-canvas{display:block;width:100%;aspect-ratio:16/10;}
.scene figcaption{margin-top:14px;color:#64748b;font-size:.84rem;line-height:1.55;}


/* ---------------------------------------------------------
   Cierre y pie
   --------------------------------------------------------- */

.closing{
  position:relative;
  overflow:hidden;
  padding:clamp(78px,13vh,150px) var(--pad);
  text-align:center;
  background:radial-gradient(120% 130% at 50% 0%,#16223b 0%,#0b1220 52%,#070b14 100%);
  border-top:0;
}

/* La señal vuelve a cruzar la pantalla, ya desenfocada: es el mismo motor
   que la portada (js/hero.js), atenuado para que no compita con las
   descargas. */
.closing-signal{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;display:block;pointer-events:none;
  filter:blur(3.5px) saturate(118%);
  opacity:.92;
}

.closing-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 44%,rgba(7,11,20,.30) 0%,rgba(7,11,20,.68) 58%,rgba(7,11,20,.92) 100%);
}

.closing-inner{position:relative;z-index:2;max-width:860px;margin:0 auto;}

.closing-logo-wrap{position:relative;display:inline-block;margin-bottom:20px;}
.closing-logo{
  width:84px;height:auto;border-radius:20px;
  filter:drop-shadow(0 12px 30px rgba(56,189,248,.4));
  animation:hero-float 6s ease-in-out infinite;
}
.closing-logo-ring{
  position:absolute;inset:-12px;border-radius:28px;
  border:1px solid rgba(125,211,252,.32);
  box-shadow:0 0 54px rgba(56,189,248,.24),inset 0 0 26px rgba(56,189,248,.1);
  animation:hero-ring 4.5s ease-in-out infinite;
}
/* ---- Botones de descarga ----
   Formato de botón de tienda: rectángulo casi negro, logo de la plataforma
   a la izquierda y dos líneas de texto con el nombre del sistema destacado.
   Los dos son idénticos salvo el logo y el nombre. */

.downloads{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px;
  margin-top:40px;
}

.dl{
  display:inline-flex;align-items:center;gap:16px;
  min-width:268px;padding:13px 30px 13px 22px;
  border-radius:14px;
  text-decoration:none;text-align:left;color:#fff;
  background:#0f1520;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 38px rgba(2,6,18,.55);
  transition:transform .18s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.dl:hover{
  transform:translateY(-2px);
  background:#161e2c;
  border-color:rgba(255,255,255,.34);
  box-shadow:0 22px 50px rgba(2,6,18,.66);
}
.dl:active{transform:translateY(0);}
.dl:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(56,189,248,.5);}

.dl-ic{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;}
.dl-ic svg{display:block;}
.dl-ic-win{color:#00a4ef;}
.dl-ic-mac{color:#f4f7fb;}

.dl-body{display:flex;flex-direction:column;line-height:1.16;}
.dl-body small{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.72);}
.dl-body strong{font-size:1.42rem;font-weight:700;letter-spacing:-.01em;color:#fff;}


.site-footer{
  padding:44px var(--pad) 56px;text-align:center;
  border-top:1px solid rgba(148,163,184,.14);
  background:var(--deep);
}
.foot-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#fff;}
.foot-brand img{border-radius:7px;}
.foot-brand sub{font-size:.55em;font-weight:700;color:var(--glow-soft);bottom:-.1em;}
.foot-meta{margin:14px 0 0;font-size:.84rem;letter-spacing:.05em;color:var(--fg-mute);}

/* ---------------------------------------------------------
   Revelado al desplazar
   --------------------------------------------------------- */

.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none;}

.feature-inner .scene{transition:opacity .9s cubic-bezier(.2,.7,.2,1) .12s,transform .9s cubic-bezier(.2,.7,.2,1) .12s;opacity:0;transform:translateY(20px) scale(.985);}
.feature-inner.is-in .scene{opacity:1;transform:none;}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width:960px){
  /* La navegación pasa a dos filas: el ancla debe dejar sitio a las dos. */
  html{scroll-padding-top:150px;}
  :root{--nav-h:112px;}
  .feature-inner{grid-template-columns:1fr;gap:32px;}
  .feature:nth-of-type(even) .feature-copy{order:0;}
  .nav-links{order:3;width:100%;margin-left:0;padding-top:10px;}
  .nav{flex-wrap:wrap;}
  /* En dos filas, idioma y descarga se quedan juntos a la derecha. */
  .lang-select{margin-left:auto;}
}

@media (max-width:560px){
  html{scroll-padding-top:118px;}
  :root{--nav-h:104px;}
  .hero-logo{width:clamp(120px,36vw,168px);}
  /* En móvil la cabecera solo lleva marca e idioma: la descarga ya está en la
     portada y en el cierre, y con tres bloques la barra se rompía en tres filas. */
  .nav{padding-left:16px;padding-right:16px;gap:10px;}
  .nav-cta{display:none;}
  .btn{padding:12px 22px;font-size:.92rem;}
  .scene-canvas{aspect-ratio:4/3;}
  /* En móvil la portada ya es más alta que la pantalla: la pista de
     desplazamiento quedaría por debajo del pliegue y no ayudaría. */
  .hero{padding-bottom:56px;}
  .downloads{flex-direction:column;}
  .dl{min-width:0;width:100%;}
}

/* ---------------------------------------------------------
   Movimiento reducido
   --------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1;transform:none;}
  .feature-inner .scene{opacity:1;transform:none;}
}

/* ---------------------------------------------------------
   Conmutador de idioma
   --------------------------------------------------------- */

.lang-select{position:relative;flex:0 0 auto;}

.lang-trigger{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 9px 6px 11px;border-radius:var(--radius-full);
  border:1px solid transparent;background:transparent;
  color:var(--fg-soft);
  font:inherit;font-size:.84rem;font-weight:600;
  cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.lang-trigger svg{transition:transform .2s ease;}
.lang-trigger:hover{color:var(--fg);background:var(--paper-3);}
.lang-trigger[aria-expanded="true"]{color:var(--fg);background:var(--paper-3);}
.lang-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.lang-trigger:focus-visible{outline:none;border-color:var(--brand-ink);box-shadow:0 0 0 3px rgba(3,105,161,.28);}

.lang-code{text-transform:lowercase;letter-spacing:.02em;}

.lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;z-index:110;
  display:flex;flex-direction:column;
  min-width:150px;padding:6px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow-lg,0 18px 40px rgba(11,18,32,.16));
  animation:lang-in .14s cubic-bezier(.2,.7,.2,1) both;
}
.lang-menu.hidden{display:none !important;}

@keyframes lang-in{
  from{opacity:0;transform:translateY(-5px);}
  to{opacity:1;transform:none;}
}

.lang-opt{
  padding:8px 12px;border-radius:var(--radius-sm);
  border:0;background:transparent;color:var(--fg-soft);
  font:inherit;font-size:.9rem;font-weight:600;text-align:left;
  cursor:pointer;white-space:nowrap;
  transition:color .18s ease,background .18s ease;
}
.lang-opt:hover:not(.is-active){color:var(--fg);background:var(--paper-3);}
/* El idioma activo se marca con el color de marca, no con un relleno: es un
   estado, no una acción. */
.lang-opt.is-active{color:var(--brand-ink);}
.lang-opt:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--brand-ink);}

/* ---------------------------------------------------------
   Cabecera de cada funcionalidad y acceso al tutorial
   --------------------------------------------------------- */

.feature-head{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin-bottom:18px;
}
.feature-head .feature-num{margin-bottom:0;}

.tutorial-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 15px 6px 11px;border-radius:var(--radius-full);
  font:inherit;font-size:.79rem;font-weight:700;line-height:1;
  color:var(--fg-mute);
  background:var(--paper-2);
  border:1px solid var(--line-strong);
  cursor:pointer;
  transition:color .22s ease,background .22s ease,border-color .22s ease,transform .18s ease,box-shadow .22s ease;
}
.tutorial-btn:hover{
  color:#fff;transform:translateY(-1px);
  background:var(--brand-ink);
  border-color:var(--brand-ink);
  box-shadow:0 8px 20px rgba(3,105,161,.28);
}
.tutorial-btn:active{transform:translateY(0);}
.tutorial-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(3,105,161,.5);}
.tutorial-ic{display:grid;place-items:center;color:var(--brand);transition:color .22s ease;}
.tutorial-btn:hover .tutorial-ic{color:#fff;}

/* ---------------------------------------------------------
   Ventana del tutorial
   --------------------------------------------------------- */

body.is-locked{overflow:hidden;}

.modal{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  padding:clamp(14px,4vw,44px);
}
.modal[hidden]{display:none !important;}

.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(3,7,18,.8);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  animation:fade-in .25s ease both;
}

.modal-card{
  position:relative;width:min(940px,100%);
  border-radius:var(--radius);
  border:1px solid rgba(11,18,32,.2);
  background:linear-gradient(180deg,#16213a 0%,#0b1220 100%);
  box-shadow:0 40px 90px rgba(2,6,18,.45);
  overflow:hidden;
  animation:modal-in .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 14px 13px 20px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0;font-size:1rem;font-weight:700;color:var(--fg);letter-spacing:-.01em;}

.modal-close{
  display:grid;place-items:center;flex:0 0 auto;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:var(--fg-mute);cursor:pointer;
  transition:color .2s ease,background .2s ease,border-color .2s ease;
}
.modal-close:hover{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);}
.modal-close:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(56,189,248,.45);}

.modal-body{padding:16px;}

.video-frame{
  position:relative;aspect-ratio:16/9;
  border-radius:var(--radius-sm);overflow:hidden;
  background:#04070d;border:1px solid var(--line);
  display:grid;place-items:center;
}
.video-frame video,.video-frame iframe{
  width:100%;height:100%;display:block;border:0;background:#000;object-fit:contain;
}

/* Estado mientras el vídeo no está conectado */
.video-soon{text-align:center;padding:26px;max-width:44ch;}
.video-soon-ic{
  display:grid;place-items:center;margin:0 auto 16px;
  width:56px;height:56px;border-radius:50%;
  color:var(--glow-soft);
  background:rgba(56,189,248,.12);
  border:1px solid rgba(125,211,252,.35);
}
.video-soon h4{margin:0 0 8px;font-size:1.02rem;font-weight:700;color:var(--fg);}
.video-soon p{margin:0;font-size:.88rem;color:var(--fg-mute);line-height:1.6;}

@media (max-width:560px){
  .modal-body{padding:12px;}
  .modal-head{padding:12px 12px 12px 16px;}
  .modal-head h3{font-size:.92rem;}
}