/* ============================================================
   Daptux.ai — Experiencia animada (intro boot + hero vivo)
   Stack: CSS animations + Web Animations API + Canvas (sin libs).
   Animaciones solo con transform/opacity para buen performance.
   Tokens alineados a los 3 frames de marca.
   ============================================================ */

/* Fuente pixel auto-hospedada (sin CDN externo) */
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/pixelify-sans.woff2") format("woff2");
}

:root {
  --boot-bg: #020812;
  --boot-bg-2: #06111f;
  --boot-bg-3: #0b172a;
  --neon: #9cff00;
  --neon-2: #8be600;
  --pix-blue: #1f5eff;
  --boot-white: #ffffff;
  /* Fuente pixel para títulos (display) y monoespaciada para terminal/código */
  --font-display: "Pixelify Sans", ui-monospace, "Consolas", "Courier New", monospace;
  --font-pixel: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular",
    "Courier New", monospace;
  --boot-dur: 1; /* multiplicador global de duración de la intro */
}

/* ===== Utilidad de color de marca ===== */
.neon { color: var(--neon); }

/* ============================================================
   1) BOOT INTRO OVERLAY
   ============================================================ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--boot-white);
  background:
    radial-gradient(circle at 50% 38%, rgba(156, 255, 0, .06), transparent 55%),
    linear-gradient(160deg, var(--boot-bg) 0%, var(--boot-bg-2) 60%, var(--boot-bg-3) 100%);
  font-family: var(--font-pixel);
}

.boot[hidden] { display: none; }

/* Estado de salida: se desvanece y deja ver la landing */
.boot.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}

/* Bloquea scroll del body mientras corre la intro */
body.boot-lock { overflow: hidden; }

/* Canvas de partículas pixeladas (fondo del overlay) */
.boot__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Scanline muy sutil sobre todo el overlay */
.boot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, .025) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  opacity: .5;
}

/* Código flotante de fondo (frame 1) */
.boot__code {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: clamp(.6rem, 1.1vw, .82rem);
  line-height: 1.7;
  color: rgba(156, 255, 0, .16);
  white-space: pre;
}

.boot__code span {
  position: absolute;
  opacity: 0;
  animation: code-in .8s ease forwards;
}

.boot__code .code--tl { top: 7%; left: 5%; animation-delay: .25s; }
.boot__code .code--bl { bottom: 26%; left: 5%; color: rgba(31, 94, 255, .22); animation-delay: .5s; }
.boot__code .code--tr { top: 6%; right: 6%; text-align: right; animation-delay: .4s; color: rgba(156, 255, 0, .14); }
.boot__code .code--mr { top: 42%; right: 6%; text-align: right; animation-delay: .65s; }

@keyframes code-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HACKEO / CORRUPCIÓN del frame 3 (dentro del boot, antes de la propulsión)
   - Capa Matrix que inunda el fondo + glitch datamosh + scramble del código
   - El contenido central (título/servicios/mascota) permanece legible
   ============================================================ */

/* Inundación Matrix a pantalla completa (centro despejado para leer el texto) */
.boot__matrix {
  position: absolute;
  inset: 0;
  width: 100%;          /* el <canvas> es replaced: sin esto NO se estira a inset:0 */
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* Inunda TODA la escena; el centro solo se atenúa (no se borra) para leer el texto */
  -webkit-mask-image: radial-gradient(ellipse 40% 48% at 50% 47%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.55) 32%, #000 64%);
          mask-image: radial-gradient(ellipse 40% 48% at 50% 47%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.55) 32%, #000 64%);
}
/* El código de las esquinas se ve POR ENCIMA de la lluvia mientras se corrompe */
.boot__code { z-index: 1; }
.boot.is-hacking .boot__code span { color: rgba(156, 255, 0, .55); text-shadow: 0 0 8px rgba(156, 255, 0, .5); }

/* Capa glitch (RGB split + datamosh + scanlines) */
.boot__glitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .22) 2px 3px),
    linear-gradient(90deg, rgba(255, 0, 64, .16), rgba(0, 229, 255, .16) 55%, rgba(156, 255, 0, .16));
  background-size: 100% 3px, 220% 100%;
}
.boot.is-hacking .boot__glitch {
  opacity: 1;
  animation: bootGlitch .2s steps(2) infinite, bootGlitchSlide 1.1s linear infinite;
}
.boot.is-peak .boot__glitch { animation-duration: .08s, 1.1s; opacity: 1; }
@keyframes bootGlitch {
  0%   { clip-path: inset(0 0 86% 0);  transform: translateX(-4px); }
  20%  { clip-path: inset(30% 0 50% 0); transform: translateX(5px); }
  40%  { clip-path: inset(60% 0 18% 0); transform: translateX(-6px); }
  60%  { clip-path: inset(12% 0 70% 0); transform: translateX(4px); }
  80%  { clip-path: inset(48% 0 36% 0); transform: translateX(-3px); }
  100% { clip-path: inset(74% 0 4% 0);  transform: translateX(3px); }
}
@keyframes bootGlitchSlide {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 14px, 220% 0; }
}

/* Sacudida sutil de todo el overlay durante el hackeo */
.boot.is-hacking { animation: bootShake .16s steps(2) infinite; }
.boot.is-peak    { animation-duration: .09s; }
@keyframes bootShake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(1px, 1px); }
}

/* Flash verde de fondo en el clímax (debajo del contenido) */
.boot.is-peak::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  background: rgba(156, 255, 0, .18);
  animation: bootFlash .5s ease-out forwards;
}
@keyframes bootFlash { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }

/* Glitch cromático del título "Bienvenidos a Daptux." (se estabiliza al terminar) */
.boot__welcome { position: relative; }
.boot.is-hacking .boot__welcome { animation: titleJitter .15s steps(2) infinite; }
@keyframes titleJitter {
  0% { transform: translate(0, 0); } 50% { transform: translate(-2px, 1px); } 100% { transform: translate(2px, -1px); }
}
.boot.is-hacking .boot__welcome::before,
.boot.is-hacking .boot__welcome::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
  mix-blend-mode: screen;
}
.boot.is-hacking .boot__welcome::before { color: #ff003c; animation: titleGhostR .2s steps(2) infinite; }
.boot.is-hacking .boot__welcome::after  { color: #00e5ff; animation: titleGhostC .25s steps(2) infinite; }
@keyframes titleGhostR {
  0%   { clip-path: inset(0 0 72% 0);  transform: translate(-4px, -1px); }
  50%  { clip-path: inset(48% 0 22% 0); transform: translate(4px, 1px); }
  100% { clip-path: inset(82% 0 0 0);  transform: translate(-3px, 2px); }
}
@keyframes titleGhostC {
  0%   { clip-path: inset(22% 0 52% 0); transform: translate(4px, 1px); }
  50%  { clip-path: inset(62% 0 10% 0); transform: translate(-4px, -1px); }
  100% { clip-path: inset(0 0 76% 0);  transform: translate(3px, -2px); }
}

/* Banner de intrusión */
.boot__breach {
  position: absolute;
  top: clamp(10px, 3.5vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  font-family: var(--font-pixel);
  font-weight: 800;
  letter-spacing: .14em;
  font-size: clamp(.74rem, 1.5vw, 1rem);
  padding: 6px 14px;
  border: 1px solid var(--neon);
  background: rgba(2, 8, 18, .62);
  color: var(--neon);
  text-shadow: 0 0 10px rgba(156, 255, 0, .8);
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
}
.boot__breach.is-on { opacity: 1; visibility: visible; animation: breachFlick .14s steps(2) infinite; }
.boot__breach.is-alert {
  color: #ff2e57;
  border-color: #ff2e57;
  text-shadow: 0 0 10px rgba(255, 46, 87, .85);
}
@keyframes breachFlick { 0% { opacity: 1; } 50% { opacity: .5; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .boot__matrix, .boot__glitch, .boot__breach { display: none !important; }
  .boot.is-hacking, .boot.is-peak { animation: none !important; }
  .boot.is-hacking .boot__welcome { animation: none !important; }
  .boot.is-hacking .boot__welcome::before,
  .boot.is-hacking .boot__welcome::after { display: none !important; }
  .boot.is-peak::before { display: none !important; }
}

/* Botón saltar (abajo a la izquierda) */
.boot__skip {
  position: absolute;
  left: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(156, 255, 0, .45);
  border-radius: 8px;
  padding: 9px 14px;
  color: var(--neon);
  background: rgba(2, 8, 18, .6);
  font: inherit;
  font-family: var(--font-pixel);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.boot__skip:hover,
.boot__skip:focus { background: rgba(156, 255, 0, .14); transform: translateY(-1px); }
.boot__skip svg { width: 12px; height: 12px; }
@media (prefers-reduced-motion: reduce) { .boot__skip { display: none; } }

/* ----- Escenas ----- */
.boot__scene {
  position: relative;
  z-index: 2;
  display: none;
  width: min(760px, 90vw);
  text-align: center;
  padding: 0 16px;
}
.boot__scene.is-active { display: block; }

/* Aparición/salida controladas por clases (animación con WAAPI o CSS) */
.boot__scene.is-active > * {
  animation: scene-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

/* ----- Stage persistente (escenas HELLO WORLD + Daptux.AI) ----- */
.boot__stage.is-active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* La mascota vive aquí, fuera de las fases -> su animación nunca se reinicia */
.boot__mascot { line-height: 0; }

/* Contenedor de altura estable para que el bot no salte al cambiar de fase */
.boot__phases {
  position: relative;
  width: 100%;
  min-height: clamp(400px, 58vh, 540px);
}
.boot__phase {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  align-items: center;
}
.boot__phase.is-active { display: flex; }
.boot__phase.is-active > * {
  animation: scene-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes scene-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- Pixel bot ----- */
.pixel-bot {
  width: clamp(72px, 12vw, 116px);
  height: auto;
  margin: 0 auto clamp(16px, 3vw, 30px);
  overflow: visible; /* deja que el bot se mueva fuera del viewBox sin recortarse */
  filter: drop-shadow(0 0 12px rgba(156, 255, 0, .45));
}
.pixel-bot .bot-frame { fill: var(--boot-white); }
.pixel-bot .bot-face  { fill: var(--boot-bg); }
.pixel-bot .bot-neon  { fill: var(--neon); }

/* --- Movimiento arcade (estilo Galaga) --- */

/* Cuerpo: deriva horizontal suave y continua, con inclinación hacia el lado + glow */
.bot-body {
  transform-box: fill-box;
  transform-origin: center;
  animation:
    bot-arcade 6.5s ease-in-out infinite,
    bot-pulse 2.4s ease-in-out infinite;
}
@keyframes bot-arcade {
  0%    { transform: translate(0, 0) rotate(0deg); }
  12.5% { transform: translate(11px, -5px) rotate(4deg); }
  25%   { transform: translate(16px, -9px) rotate(5deg); }   /* extremo derecho */
  37.5% { transform: translate(11px, -5px) rotate(4deg); }
  50%   { transform: translate(0, -1px) rotate(0deg); }      /* centro */
  62.5% { transform: translate(-11px, -5px) rotate(-4deg); }
  75%   { transform: translate(-16px, -9px) rotate(-5deg); } /* extremo izquierdo */
  87.5% { transform: translate(-11px, -5px) rotate(-4deg); }
  100%  { transform: translate(0, 0) rotate(0deg); }
}
@keyframes bot-pulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(156, 255, 0, .35)); }
  50%      { filter: drop-shadow(0 0 16px rgba(156, 255, 0, .8)); }
}

/* Antenas: vibración choppy retro */
.bot-antennae {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: bot-antennae 1.1s steps(2) infinite;
}
@keyframes bot-antennae {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-9deg); }
  75%      { transform: rotate(9deg); }
}

/* Ojos: parpadeo + miradas laterales (saltos secos, sabor arcade) */
.bot-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: bot-eyes 4s steps(1) infinite;
}
@keyframes bot-eyes {
  0%, 38%   { transform: translateX(0) scaleY(1); }
  42%       { transform: translateX(0) scaleY(.12); }   /* parpadeo */
  46%       { transform: translateX(0) scaleY(1); }
  58%       { transform: translateX(-2px) scaleY(1); }  /* mira izquierda */
  72%       { transform: translateX(2px) scaleY(1); }   /* mira derecha */
  86%, 100% { transform: translateX(0) scaleY(1); }
}

/* --- Mascota: wrapper que viaja de la intro al hero + propulsor Iron Man --- */
.mascot {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.hero__bot .mascot { display: block; width: 100%; }

/* Llama de propulsión bajo los pies (solo durante el vuelo) */
.mascot__thruster {
  position: absolute;
  top: 82%;
  left: 50%;
  width: 46%;
  height: 46%;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  border-radius: 46% 46% 42% 42%;
  background: radial-gradient(ellipse at top,
    rgba(255, 255, 255, .95) 0%,
    rgba(156, 255, 0, .9) 32%,
    rgba(31, 94, 255, .5) 62%,
    transparent 80%);
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}
.mascot.is-flying .mascot__thruster {
  opacity: 1;
  animation: thruster .1s steps(2) infinite;
}
@keyframes thruster {
  0%, 100% { transform: translateX(-50%) scaleY(1);    opacity: .82; }
  50%      { transform: translateX(-50%) scaleY(1.4);  opacity: 1; }
}
.mascot.is-flying { filter: drop-shadow(0 0 22px rgba(156, 255, 0, .7)); }

/* Modo compañero: sigue el cursor por toda la página (posición vía JS) */
.mascot.is-following {
  position: fixed;
  left: 0;
  top: 0;
  width: 80px;
  z-index: 8;                 /* sobre el contenido, bajo el header (10) y WhatsApp */
  pointer-events: none;       /* nunca estorba clics ni textos */
  will-change: transform;
  filter: drop-shadow(0 0 14px rgba(156, 255, 0, .5));
}
.mascot.is-following .pixel-bot { width: 100%; margin: 0; }

/* ----- Escena HELLO WORLD ----- */
.boot__hello {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 12vw, 7rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.boot__hello span { display: block; }
.boot__hello .neon { text-shadow: 0 0 24px rgba(156, 255, 0, .5); }

/* efecto "pixel reveal" por línea */
.boot__hello span {
  clip-path: inset(0 100% 0 0);
  animation: pixel-reveal .7s steps(14) forwards;
}
.boot__hello span:nth-child(2) { animation-delay: .55s; }

@keyframes pixel-reveal {
  to { clip-path: inset(0 0 0 0); }
}

.boot__bracket {
  margin: clamp(14px, 3vw, 26px) 0 clamp(10px, 2vw, 18px);
  color: var(--neon);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-shadow: 0 0 18px rgba(156, 255, 0, .55);
}

.boot__sub {
  margin: 0;
  color: var(--boot-white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(1.05rem, 3vw, 1.7rem);
  font-weight: 800;
}

/* ----- Escena BRANDING (Daptux.AI + terminal) ----- */
.boot__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 11vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}
.boot__brand .neon { text-shadow: 0 0 24px rgba(156, 255, 0, .5); }

.boot__brand-sub {
  margin: clamp(8px, 2vw, 14px) 0 clamp(18px, 3vw, 28px);
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.72rem, 2.2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .28em;
}

/* Ventana terminal */
.terminal {
  width: min(560px, 92vw);
  margin: 0 auto;
  border: 1px solid rgba(156, 255, 0, .5);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(3, 10, 20, .72);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(156, 255, 0, .08);
  text-align: left;
}
.terminal__bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.terminal__bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #cbd5e1;
}
.terminal__bar i:nth-child(1) { background: #ef4444; }
.terminal__bar i:nth-child(2) { background: #f59e0b; }
.terminal__bar i:nth-child(3) { background: var(--neon); }

.terminal__code {
  margin: 0;
  padding: 18px clamp(16px, 3vw, 24px) 20px;
  min-height: 270px;
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-pixel);
  font-size: clamp(.78rem, 2vw, .98rem);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}
.terminal__code .k { color: var(--pix-blue); }   /* keyword */
.terminal__code .s { color: var(--neon); }        /* string  */
.terminal__code .p { color: rgba(255,255,255,.55); } /* prompt/punct */

/* cursor de tipeo */
.terminal__cursor {
  display: inline-block;
  width: .6ch;
  background: var(--neon);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ----- Escena WELCOME (frame 3) ----- */
.boot__welcome {
  margin: 0 0 clamp(20px, 4vw, 34px);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 4.8rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: 0;
}
.boot__welcome .neon { text-shadow: 0 0 24px rgba(156, 255, 0, .5); }

.boot__services {
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  width: min(460px, 90vw);
  margin: 0 auto clamp(18px, 3vw, 28px);
  padding: 0;
  list-style: none;
  text-align: left;
}
.boot__services li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: clamp(.95rem, 2.4vw, 1.18rem);
  font-weight: 700;
  opacity: 0;
  transform: translateX(-14px);
  animation: svc-in .5s ease forwards;
}
.boot__services li:nth-child(1) { animation-delay: .15s; }
.boot__services li:nth-child(2) { animation-delay: .35s; }
.boot__services li:nth-child(3) { animation-delay: .55s; }
.boot__services em { color: var(--neon); font-style: normal; }

@keyframes svc-in {
  to { opacity: 1; transform: translateX(0); }
}

/* Icono con esquinas tipo "scan frame" (frame 3) */
.svc-ic {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: var(--neon);
}
.svc-ic::before,
.svc-ic::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--neon);
}
.svc-ic::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.svc-ic::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.svc-ic svg { width: 26px; height: 26px; }
.svc-ic--code { font-family: var(--font-pixel); font-weight: 800; font-size: 1rem; }

.boot__welcome-msg {
  margin: 0 0 clamp(14px, 2vw, 20px);
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-pixel);
  font-size: clamp(.9rem, 2.4vw, 1.15rem);
  font-weight: 600;
}
.boot__handle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(156, 255, 0, .55);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--neon);
  font-family: var(--font-pixel);
  font-weight: 700;
  letter-spacing: .04em;
}

/* ============================================================
   2) HERO VIVO (persistente tras la intro)
   ============================================================ */
.hero--alive {
  background: linear-gradient(160deg, var(--boot-bg) 0%, var(--boot-bg-2) 58%, var(--boot-bg-3) 100%);
}

/* Sustituimos la foto por el asset pixel-tech (Higgsfield) + capas dark */
.hero--alive .hero__media {
  background:
    radial-gradient(circle at 78% 18%, rgba(156, 255, 0, .10), transparent 32%),
    radial-gradient(circle at 14% 82%, rgba(31, 94, 255, .14), transparent 38%),
    linear-gradient(160deg, rgba(2, 8, 18, .55) 0%, rgba(6, 17, 31, .35) 60%, rgba(11, 23, 42, .55) 100%),
    url("../img/pixel-bg.webp") center / cover no-repeat,
    var(--boot-bg);
  transform: none;
}

.hero--alive .hero__overlay {
  background:
    linear-gradient(90deg, rgba(2, 8, 18, .78) 0%, rgba(2, 8, 18, .42) 55%, rgba(2, 8, 18, .15) 100%);
}

/* Canvas de partículas del hero */
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Lluvia de código estilo Matrix (costados del hero) */
.hero__rain {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: clamp(160px, 27vw, 440px);
  height: 100%;
  pointer-events: none;
  opacity: 1;
  /* Se difumina hacia el centro y por arriba/abajo para no tapar el contenido */
  -webkit-mask-image:
    linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.hero__rain--left {
  left: 0;
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, #000 60%, transparent 100%),
    linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to right, #000 0%, #000 60%, transparent 100%),
    linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.hero__rain--right {
  right: 0;
  -webkit-mask-image:
    linear-gradient(to left, #000 0%, #000 60%, transparent 100%),
    linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:
    linear-gradient(to left, #000 0%, #000 60%, transparent 100%),
    linear-gradient(to top, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
@media (max-width: 720px) {
  .hero__rain { width: 38vw; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__rain { display: none !important; }
}

/* Capa de "corrupción / hackeo" (transitoria, introduce la lluvia Matrix).
   Vive SOBRE el fondo pero DEBAJO del contenido (frame3 z-index:2) y de la
   mascota; nunca afecta de forma permanente al fondo ni a la escena. */
.hero__glitch {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg,
      rgba(156, 255, 0, .05) 0 2px, transparent 2px 4px),
    linear-gradient(90deg,
      rgba(31, 94, 255, .12), rgba(156, 255, 0, .12) 50%, rgba(31, 94, 255, .12));
  background-size: 100% 4px, 200% 100%;
}
.hero--alive.is-corrupting .hero__glitch {
  animation: heroCorrupt 2s steps(28) forwards;
}
@keyframes heroCorrupt {
  0%   { opacity: 0;   transform: translateX(0)    skewX(0deg); clip-path: inset(0 0 100% 0); }
  8%   { opacity: .9;  transform: translateX(-3px) skewX(2deg); clip-path: inset(0 0 0 0); }
  16%  { opacity: .35; transform: translateX(4px)  skewX(-3deg); clip-path: inset(40% 0 20% 0); }
  26%  { opacity: .85; transform: translateX(-5px) skewX(1deg); clip-path: inset(0 0 55% 0); }
  38%  { opacity: .45; transform: translateX(2px)  skewX(-2deg); clip-path: inset(70% 0 0 0); }
  52%  { opacity: .7;  transform: translateX(-2px) skewX(1deg); clip-path: inset(10% 0 30% 0); }
  70%  { opacity: .3;  transform: translateX(1px)  skewX(0deg); clip-path: inset(0 0 0 0); }
  100% { opacity: 0;   transform: translateX(0)    skewX(0deg); clip-path: inset(0 0 0 0); }
}
/* Barrido de scanline brillante que recorre el hero durante el hackeo */
.hero--alive.is-corrupting::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 26%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(156, 255, 0, .22) 50%, transparent 100%);
  animation: heroScanSweep 1.4s ease-in-out forwards;
}
@keyframes heroScanSweep {
  0%   { transform: translateY(-30%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(420%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__glitch { display: none !important; }
  .hero--alive.is-corrupting::before { display: none !important; }
}

/* Grid pixel sutil con leve parallax */
.hero__grid {
  position: absolute;
  inset: -10% -5%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(156, 255, 0, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 255, 0, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
  will-change: transform;
}

/* Código flotante decorativo del hero */
.hero__code {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-pixel);
  font-size: clamp(.62rem, 1vw, .8rem);
  line-height: 1.7;
  color: rgba(156, 255, 0, .12);
  white-space: pre;
  will-change: transform;
}
.hero__code--a { top: 14%; right: 5%; text-align: right; }
.hero__code--b { bottom: 12%; left: 4%; color: rgba(31, 94, 255, .16); }

/* Bot pixelado watermark en el hero */
.hero__bot {
  position: absolute;
  top: 18%;
  right: 7%;
  z-index: 0;
  width: clamp(80px, 9vw, 132px);
  opacity: .9;
  pointer-events: none;
  will-change: transform;
}
.hero__bot .pixel-bot { width: 100%; margin: 0; }

/* Scanline del hero */
.hero--alive::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  opacity: .4;
}

/* Eyebrow del hero con cursor de terminal */
.hero--alive .eyebrow::before {
  content: "> ";
  color: var(--neon);
}

/* ============================================================
   3) MICROINTERACCIONES CTA
   ============================================================ */
.cta-anim {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Glow/pulso del CTA primario */
.hero--alive .button--primary.cta-anim {
  box-shadow: 0 0 0 0 rgba(156, 255, 0, .55);
  animation: cta-pulse 2.6s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 255, 0, .45); }
  50%      { box-shadow: 0 0 22px 2px rgba(156, 255, 0, .45); }
}
.hero--alive .button--primary.cta-anim:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 26px 4px rgba(156, 255, 0, .6);
}

/* Borde animado del CTA ghost */
.hero--alive .button--ghost.cta-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, transparent, var(--neon), transparent);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .25s ease;
}
.hero--alive .button--ghost.cta-anim:hover::before {
  opacity: 1;
  animation: border-sweep 1.4s linear infinite;
}
@keyframes border-sweep {
  to { background-position: -220% 0; }
}

/* ============================================================
   4) REVEAL ON SCROLL + tarjetas vivas
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Señales del hero entran escalonadas */
.hero--alive .hero__signals div {
  opacity: 0;
  transform: translateY(14px);
  animation: svc-in .6s ease forwards;
}
.hero--alive .hero__signals div:nth-child(1) { animation-delay: .15s; }
.hero--alive .hero__signals div:nth-child(2) { animation-delay: .3s; }
.hero--alive .hero__signals div:nth-child(3) { animation-delay: .45s; }

/* Tarjetas de servicio: acento neón en hover */
.service-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(165, 212, 10, .6);
  box-shadow: 0 18px 44px rgba(7, 26, 61, .12), 0 0 0 1px rgba(165, 212, 10, .25);
}

/* ============================================================
   5) ACCESIBILIDAD — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .boot,
  .boot__particles,
  .hero__canvas { display: none !important; }

  .pixel-bot,
  .bot-body,
  .bot-antennae,
  .bot-eye,
  .mascot__thruster,
  .page-dark .eyebrow,
  .frame3__title .neon,
  .hero--alive .button--primary.cta-anim,
  .boot__hello span,
  .boot__services li,
  .hero--alive .hero__signals div { animation: none !important; }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .boot__hello span { clip-path: none !important; }
}

/* ============================================================
   HERO = FRAME 3  ("Bienvenidos a Daptux")
   Recreación fiel de la última imagen de marca.
   ============================================================ */
.hero--frame3 {
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(104px, 15vh, 160px) 0 clamp(64px, 9vh, 110px);
}

/* Overlay parejo y oscuro: deja ver los clusters pixel de los bordes */
.hero--frame3 .hero__overlay {
  background: linear-gradient(180deg, rgba(2, 8, 18, .62) 0%, rgba(2, 8, 18, .76) 100%);
}

.frame3 {
  position: relative;
  z-index: 2;
  width: min(720px, calc(100% - 40px));
  margin: 0 auto;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  will-change: transform;
}
.frame3 .white { color: #fff; }
.frame3 .neon {
  color: var(--neon);
  text-shadow: 0 0 22px rgba(156, 255, 0, .45);
}
/* "Daptux." del hero con neón intermitente (mismo efecto que los eyebrows) */
.frame3__title .neon { animation: eyebrow-neon 2.8s ease-in-out infinite; }

/* Meta superior: // construyendo el futuro  +  binarios */
.frame3__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(20px, 4vw, 34px);
  font-family: var(--font-pixel);
  font-size: clamp(.58rem, 1.4vw, .8rem);
  line-height: 1.7;
  white-space: pre;
}
.frame3__comment { color: rgba(156, 255, 0, .55); }
.frame3__bits { color: rgba(31, 94, 255, .55); text-align: right; }

/* Título pixel */
.frame3__title {
  margin: 0 0 clamp(22px, 4vw, 36px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 12vw, 6.6rem);
  line-height: .98;
  letter-spacing: 0;
  color: #fff;
}
.frame3__line { display: block; }

/* Líneas divisorias neón */
.frame3__rule {
  display: block;
  width: 100%;
  height: 2px;
  margin: clamp(18px, 3.2vw, 28px) 0;
  background: linear-gradient(90deg, rgba(156, 255, 0, .75), rgba(156, 255, 0, .06));
}

/* Servicios (frame 3) */
.frame3__services {
  display: grid;
  gap: clamp(16px, 2.6vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.frame3__services li {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.6vw, 28px);
}
.frame3__svc-txt {
  color: #fff;
  font-size: clamp(1.05rem, 2.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.18;
}
.frame3__svc-txt em { color: var(--neon); font-style: normal; }

/* Iconos scan-frame más grandes en el hero */
.hero--frame3 .svc-ic {
  width: clamp(56px, 8vw, 74px);
  height: clamp(56px, 8vw, 74px);
}
.hero--frame3 .svc-ic::before,
.hero--frame3 .svc-ic::after { width: 16px; height: 16px; }
.hero--frame3 .svc-ic svg { width: clamp(28px, 4vw, 38px); height: clamp(28px, 4vw, 38px); }
.hero--frame3 .svc-ic--code { font-size: clamp(1.15rem, 2.8vw, 1.6rem); }

/* Tagline terminal */
.frame3__tagline {
  margin: 0 0 clamp(26px, 4vw, 38px);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  font-weight: 600;
}
.frame3__tagline em { color: var(--neon); font-style: normal; }
.frame3__tagline .neon { font-weight: 800; }

/* Handle @daptux.ai */
.frame3__handle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(156, 255, 0, .6);
  border-radius: 999px;
  padding: 12px 26px;
  color: #fff;
  font-family: var(--font-pixel);
  font-size: clamp(.95rem, 2.4vw, 1.2rem);
  font-weight: 700;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.frame3__handle:hover,
.frame3__handle:focus {
  background: rgba(156, 255, 0, .12);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(156, 255, 0, .35);
}
.frame3__heart {
  width: 18px;
  height: 16px;
  color: var(--neon);
  filter: drop-shadow(0 0 5px rgba(156, 255, 0, .6));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 540px) {
  .hero__bot { top: 11%; right: 5%; opacity: .7; }
  .hero__code--a { top: 9%; }
  .terminal__code { min-height: 240px; }
  .boot__code { font-size: .58rem; }

  .frame3__meta { font-size: .54rem; }
  .frame3__bits { display: none; } /* evita saturar en móvil */
  .frame3__services li { gap: 14px; }
}

/* ============================================================
   TEMA OSCURO GLOBAL (home) — el fondo pixel cubre toda la página
   ============================================================ */
body.page-dark {
  color: #e8eef7;
  background:
    linear-gradient(180deg, rgba(2, 8, 18, .9) 0%, rgba(6, 17, 31, .94) 100%),
    url("../img/pixel-bg.webp") center top / cover no-repeat fixed,
    var(--boot-bg);
}

/* Canvas de partículas global: anima el fondo de TODA la página */
.page-fx {
  position: fixed;
  inset: 0;
  z-index: -1;            /* detrás del contenido, encima del fondo del body */
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Las secciones se vuelven transparentes para dejar ver el fondo */
.page-dark .section--intro,
.page-dark .contact-section,
.page-dark .portfolio-strip,
.page-dark .portfolio-section,
.page-dark .portfolio-section--soft { background: transparent; }

/* El bloque "dark" sólido se aligera para que el fondo fluya */
.page-dark .section--dark { background: rgba(2, 8, 18, .42); }

/* Tipografía sobre oscuro */
.page-dark h2,
.page-dark h3 { color: #fff; }
.page-dark .eyebrow--dark { color: var(--lime); }
.page-dark p,
.page-dark .intro-copy,
.page-dark .trust-layout p,
.page-dark .contact-section p { color: rgba(255, 255, 255, .72); }

/* Tarjetas de servicio en versión oscura translúcida */
.page-dark .service-card {
  border-color: rgba(156, 255, 0, .18);
  background: rgba(10, 20, 35, .5);
  box-shadow: none;
  backdrop-filter: blur(4px);
  color: #e8eef7;
}
.page-dark .service-card h3 { color: #fff; }
.page-dark .service-card p { color: rgba(255, 255, 255, .66); }
.page-dark .service-card__number { color: var(--lime); }

/* Eyebrows y números en verde lima -> tipografía pixel (Pixelify Sans), un poco más grandes */
.page-dark .eyebrow {
  font-family: var(--font-display);
  color: var(--lime) !important;   /* lime en TODOS los eyebrows, gane lo que gane */
  letter-spacing: .06em;
  font-size: .95rem;
  animation: eyebrow-neon 2.8s ease-in-out infinite;  /* iluminación neón intermitente */
}
/* alumbra -> se apaga -> flash fuerte -> se apaga -> vuelve (bucle, tipo letrero neón) */
@keyframes eyebrow-neon {
  0%, 40% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(156, 255, 0, .8), 0 0 18px rgba(156, 255, 0, .55), 0 0 30px rgba(156, 255, 0, .35);
  }
  44% { opacity: .5; text-shadow: none; }                 /* se apaga */
  48% {
    opacity: 1;
    text-shadow: 0 0 12px rgba(156, 255, 0, 1), 0 0 26px rgba(156, 255, 0, .85), 0 0 42px rgba(156, 255, 0, .6);
  }                                                       /* flash neón fuerte */
  52% { opacity: .55; text-shadow: none; }                /* parpadeo apagado */
  58%, 100% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(156, 255, 0, .8), 0 0 18px rgba(156, 255, 0, .55), 0 0 30px rgba(156, 255, 0, .35);
  }
}

/* Tipografía pixel en la interfaz del header (NO el logo ni descripciones) */
.page-dark .site-header { font-family: var(--font-display); letter-spacing: .01em; }
.page-dark .brand__text { font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif; }
.page-dark .mega-menu__column small,
.page-dark .nav-dropdown small { font-family: Inter, "Segoe UI", Arial, sans-serif; }

/* Texto del header más grande (solo en desktop amplio, para no romper el medium) */
@media (min-width: 1181px) {
  .page-dark .site-header .nav { font-size: 1.06rem; }
}

/* ===== Efecto neón en contornos/cuadros con acento verde lima ===== */
.page-dark .svc-ic { filter: drop-shadow(0 0 6px rgba(156, 255, 0, .6)); }
.page-dark .frame3__rule { box-shadow: 0 0 8px rgba(156, 255, 0, .5); }
.page-dark .frame3__handle,
.page-dark .boot__handle { box-shadow: 0 0 16px rgba(156, 255, 0, .32); }
.page-dark .terminal { box-shadow: 0 0 22px rgba(156, 255, 0, .22), 0 24px 70px rgba(0, 0, 0, .55); }
.page-dark .process__step { box-shadow: 0 -2px 14px -4px rgba(156, 255, 0, .45); }
.page-dark .process__step span { box-shadow: 0 0 14px rgba(156, 255, 0, .55); }
.page-dark .hero__signals div { box-shadow: 0 -2px 14px -4px rgba(156, 255, 0, .45); }
.page-dark .trust-list div { box-shadow: -3px 0 14px -4px rgba(156, 255, 0, .45); }
.page-dark .contact-note { filter: drop-shadow(-2px 0 6px rgba(156, 255, 0, .45)); }
.page-dark .service-card {
  box-shadow: 0 0 0 1px rgba(156, 255, 0, .06), 0 12px 30px rgba(0, 0, 0, .3);
}
.page-dark .service-card:hover {
  border-color: rgba(165, 212, 10, .7);
  box-shadow: 0 0 22px rgba(156, 255, 0, .32), 0 18px 44px rgba(0, 0, 0, .4);
}
.page-dark .nav__cta { box-shadow: 0 0 16px rgba(156, 255, 0, .5); }
.page-dark .nav__portal { box-shadow: 0 0 12px rgba(156, 255, 0, .3); }
/* Cuadros de texto (inputs) brillan en lime al enfocarse */
.page-dark input:focus,
.page-dark select:focus,
.page-dark textarea:focus {
  box-shadow: 0 0 14px rgba(156, 255, 0, .3);
}
.page-dark .service-card__number {
  font-family: var(--font-display);
  font-size: 1.22rem;
}
.page-dark .process__step span {
  font-family: var(--font-display);
  font-size: 1.18rem;
}

/* Lista de confianza */
.page-dark .trust-list div {
  border-left-color: var(--lime);
  background: rgba(10, 20, 35, .5);
}
.page-dark .trust-list strong { color: #fff; }
.page-dark .trust-list span { color: rgba(255, 255, 255, .66); }

/* Formulario de contacto en oscuro */
.page-dark .contact-form {
  border-color: rgba(156, 255, 0, .18);
  background: rgba(10, 20, 35, .6);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4);
}
.page-dark label { color: rgba(255, 255, 255, .82); }
.page-dark input,
.page-dark select,
.page-dark textarea {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(2, 8, 18, .6);
  color: #fff;
}
.page-dark input:focus,
.page-dark select:focus,
.page-dark textarea:focus {
  outline: 3px solid rgba(156, 255, 0, .22);
  border-color: var(--lime);
}
.page-dark select option { color: #0b172a; } /* legibilidad del desplegable nativo */
.page-dark .choice-option {
  border-color: rgba(255, 255, 255, .2);
  background: rgba(2, 8, 18, .5);
  color: rgba(255, 255, 255, .88);
}
.page-dark .form-help,
.page-dark .form-group legend { color: rgba(255, 255, 255, .62); }
.page-dark .contact-note span { color: rgba(255, 255, 255, .66); }

/* Banda CTA con diseño propio dark pixel (en vez del degradado azul) */
.page-dark .cta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(156, 255, 0, .28);
  border-bottom: 1px solid rgba(156, 255, 0, .28);
  color: #fff;
  background:
    radial-gradient(circle at 10% 18%, rgba(156, 255, 0, .14), transparent 32%),
    radial-gradient(circle at 90% 86%, rgba(31, 94, 255, .18), transparent 36%),
    linear-gradient(120deg, rgba(6, 17, 31, .94) 0%, rgba(2, 8, 18, .97) 100%);
}
/* Rejilla pixel sutil dentro de la banda */
.page-dark .cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(156, 255, 0, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(156, 255, 0, .06) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 80%);
          mask-image: radial-gradient(circle at 50% 50%, #000, transparent 80%);
}
.page-dark .cta-band__inner { position: relative; z-index: 1; }
.page-dark .cta-band h2 { color: #fff; }
/* Acento terminal a la izquierda del titular */
.page-dark .cta-band h2::before {
  content: "> ";
  color: var(--neon);
  font-family: var(--font-pixel);
}
.page-dark .cta-band .button--primary {
  font-family: var(--font-display);   /* tipografía pixel (Pixelify Sans) */
  min-height: 54px;
  padding: 14px 26px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.6;                    /* evita que se corten las letras pixel */
  letter-spacing: .04em;
  box-shadow: 0 0 0 0 rgba(156, 255, 0, .5);
  transition: box-shadow .2s ease, transform .18s ease, background .18s ease;
}
.page-dark .cta-band .button--primary:hover,
.page-dark .cta-band .button--primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 0 26px 3px rgba(156, 255, 0, .55);
}

/* Píxeles decorativos en las 4 esquinas de la banda (clusters tipo frame) */
.cta-px {
  position: absolute;
  z-index: 0;
  width: 6px;
  height: 6px;
  background: var(--neon);
  opacity: .9;
  pointer-events: none;
}
.cta-px--tl {
  top: 14px;
  left: 16px;
  box-shadow:
    12px 2px 0 var(--neon), 24px 8px 0 rgba(31,94,255,.85), 6px 16px 0 var(--neon),
    20px 20px 0 rgba(156,255,0,.45), 34px 12px 0 rgba(31,94,255,.85), 2px 30px 0 var(--neon),
    16px 32px 0 rgba(156,255,0,.45), 30px 28px 0 rgba(31,94,255,.7), 44px 20px 0 var(--neon),
    40px 38px 0 rgba(156,255,0,.4), 10px 46px 0 rgba(31,94,255,.6), 26px 44px 0 var(--neon),
    52px 32px 0 rgba(156,255,0,.4), 48px 8px 0 rgba(31,94,255,.5);
}
.cta-px--tr {
  top: 14px;
  right: 16px;
  box-shadow:
    -12px 2px 0 var(--neon), -24px 8px 0 rgba(31,94,255,.85), -6px 16px 0 var(--neon),
    -20px 20px 0 rgba(156,255,0,.45), -34px 12px 0 rgba(31,94,255,.85), -2px 30px 0 var(--neon),
    -16px 32px 0 rgba(156,255,0,.45), -30px 28px 0 rgba(31,94,255,.7), -44px 20px 0 var(--neon),
    -40px 38px 0 rgba(156,255,0,.4), -10px 46px 0 rgba(31,94,255,.6), -26px 44px 0 var(--neon),
    -52px 32px 0 rgba(156,255,0,.4), -48px 8px 0 rgba(31,94,255,.5);
}
.cta-px--bl {
  bottom: 14px;
  left: 16px;
  box-shadow:
    12px -2px 0 var(--neon), 24px -8px 0 rgba(31,94,255,.85), 6px -16px 0 var(--neon),
    20px -20px 0 rgba(156,255,0,.45), 34px -12px 0 rgba(31,94,255,.85), 2px -30px 0 var(--neon),
    16px -32px 0 rgba(156,255,0,.45), 30px -28px 0 rgba(31,94,255,.7), 44px -20px 0 var(--neon),
    40px -38px 0 rgba(156,255,0,.4), 10px -46px 0 rgba(31,94,255,.6), 26px -44px 0 var(--neon),
    52px -32px 0 rgba(156,255,0,.4), 48px -8px 0 rgba(31,94,255,.5);
}
.cta-px--br {
  right: 16px;
  bottom: 14px;
  box-shadow:
    -12px -2px 0 var(--neon), -24px -8px 0 rgba(31,94,255,.85), -6px -16px 0 var(--neon),
    -20px -20px 0 rgba(156,255,0,.45), -34px -12px 0 rgba(31,94,255,.85), -2px -30px 0 var(--neon),
    -16px -32px 0 rgba(156,255,0,.45), -30px -28px 0 rgba(31,94,255,.7), -44px -20px 0 var(--neon),
    -40px -38px 0 rgba(156,255,0,.4), -10px -46px 0 rgba(31,94,255,.6), -26px -44px 0 var(--neon),
    -52px -32px 0 rgba(156,255,0,.4), -48px -8px 0 rgba(31,94,255,.5);
}

/* En móvil, fondo no fijo (iOS ignora 'fixed' y puede causar saltos) */
@media (max-width: 920px) {
  body.page-dark {
    background:
      linear-gradient(180deg, rgba(2, 8, 18, .9) 0%, rgba(6, 17, 31, .94) 100%),
      url("../img/pixel-bg.webp") center top / cover no-repeat,
      var(--boot-bg);
    background-attachment: scroll;
  }
}

/* ============================================================
   BOTÓN WHATSAPP — estilo Daptux pixel/neón animado
   ============================================================ */
.page-dark .whatsapp-float {
  border: 2px solid var(--neon) !important;
  border-radius: 14px !important;          /* cuadrado redondeado, sabor pixel/tech */
  background: rgba(2, 8, 18, .9) !important;
  box-shadow: 0 0 0 0 rgba(156, 255, 0, .5) !important;
  animation: wa-float 3s ease-in-out infinite, wa-pulse 2.2s ease-in-out infinite;
}
.page-dark .whatsapp-float:hover,
.page-dark .whatsapp-float:focus {
  background: rgba(156, 255, 0, .16) !important;
  box-shadow: 0 0 26px 3px rgba(156, 255, 0, .6) !important;
}
.page-dark .whatsapp-float__icon { filter: drop-shadow(0 0 5px rgba(156, 255, 0, .7)); }
@keyframes wa-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(156, 255, 0, .4); }
  50%      { box-shadow: 0 0 18px 2px rgba(156, 255, 0, .55); }
}

/* ============================================================
   GALAGA — dos batallas independientes (2º frame de la intro)
   Izquierda y derecha = partidas distintas (movimientos/ataques/final).
   ============================================================ */
.galaga {
  position: absolute;
  top: 12%;
  bottom: 18%;
  width: clamp(150px, 15vw, 220px);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
.galaga--left { left: 6%; }
.galaga--right { right: 6%; }
.galaga.is-active { opacity: 1; }
.galaga.is-gone { opacity: 0 !important; }
.gx-svg { display: block; width: 100%; height: 100%; }

/* Nave enemiga (arriba, apunta hacia abajo) */
.gx-enemy {
  position: absolute;
  top: 4%;
  left: 50%;
  width: clamp(54px, 5.6vw, 74px);
  color: #ff3b6b;
  filter: drop-shadow(0 0 9px rgba(255, 59, 107, .65));
  transform: translateX(-50%);
}
.galaga--left  .gx-enemy { animation: enemyL 2.6s ease-in-out infinite; }
.galaga--right .gx-enemy { animation: enemyR 2.1s ease-in-out infinite; }

/* Navecitas aliadas (abajo, apuntan hacia arriba) */
.gx-ship {
  position: absolute;
  bottom: 5%;
  width: clamp(28px, 3vw, 38px);
  color: var(--neon);
  filter: drop-shadow(0 0 6px rgba(156, 255, 0, .7));
}
.gx-ship--a { left: 22%; }
.gx-ship--b { left: 52%; }
.galaga--left  .gx-ship--a { animation: shipLa 1.6s ease-in-out infinite; }
.galaga--left  .gx-ship--b { animation: shipLb 2.0s ease-in-out infinite; }
.galaga--right .gx-ship--a { animation: shipRa 1.35s ease-in-out infinite; }
.galaga--right .gx-ship--b { animation: shipRb 1.9s ease-in-out infinite; }

/* Disparos aliados (suben hacia el enemigo) */
.gx-laser {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 3px;
  height: 11px;
  background: var(--neon);
  box-shadow: 0 0 6px rgba(156, 255, 0, .8);
  opacity: 0;
  transform: translateX(-50%);
}
.galaga--left  .gx-ship--a .gx-laser { animation: gxfire .85s linear infinite; }
.galaga--left  .gx-ship--b .gx-laser { animation: gxfire 1.1s linear infinite .3s; }
.galaga--right .gx-ship--a .gx-laser { animation: gxfire .7s linear infinite .15s; }
.galaga--right .gx-ship--b .gx-laser { animation: gxfire 1.25s linear infinite; }

/* Disparos enemigos (bajan) */
.gx-elaser {
  position: absolute;
  top: 16%;
  left: 50%;
  width: 3px;
  height: 12px;
  background: #ff3b6b;
  box-shadow: 0 0 6px rgba(255, 59, 107, .8);
  opacity: 0;
  transform: translateX(-50%);
}
.gx-elaser--2 { left: 56%; }
.galaga--left  .gx-elaser--1 { animation: gxefire 1.2s linear infinite .2s; }
.galaga--left  .gx-elaser--2 { animation: gxefire 1.6s linear infinite .6s; }
.galaga--right .gx-elaser--1 { animation: gxefire .95s linear infinite; }
.galaga--right .gx-elaser--2 { animation: gxefire 1.4s linear infinite .4s; }

/* Explosión */
.gx-boom {
  position: absolute;
  top: 8%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: transparent;
  opacity: 0;
}
/* steps(1) -> frames discretos tipo sprite (estética arcade pixelada) */
.galaga.is-over .gx-boom { animation: gxboom .6s steps(1) forwards; }

/* --- Movimientos (izquierda) --- */
@keyframes shipLa {
  0% { transform: translate(0, 0); }
  25% { transform: translate(16px, -10px) rotate(8deg); }
  50% { transform: translate(3px, 5px); }
  75% { transform: translate(-16px, -10px) rotate(-8deg); }
  100% { transform: translate(0, 0); }
}
@keyframes shipLb {
  0% { transform: translate(0, 0); }
  30% { transform: translate(-13px, -7px) rotate(-6deg); }
  60% { transform: translate(14px, -13px) rotate(7deg); }
  100% { transform: translate(0, 0); }
}
@keyframes enemyL {
  0% { transform: translateX(calc(-50% - 28px)) translateY(0); }
  50% { transform: translateX(calc(-50% + 28px)) translateY(12px); }
  100% { transform: translateX(calc(-50% - 28px)) translateY(0); }
}
/* --- Movimientos (derecha, distintos) --- */
@keyframes shipRa {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-15px, -13px) rotate(-9deg); }
  55% { transform: translate(17px, -5px) rotate(9deg); }
  80% { transform: translate(-7px, -14px); }
  100% { transform: translate(0, 0); }
}
@keyframes shipRb {
  0% { transform: translate(0, 0); }
  40% { transform: translate(13px, -14px) rotate(7deg); }
  70% { transform: translate(-17px, -8px) rotate(-8deg); }
  100% { transform: translate(0, 0); }
}
@keyframes enemyR {
  0% { transform: translateX(calc(-50% + 26px)) translateY(0); }
  25% { transform: translateX(-50%) translateY(16px); }
  50% { transform: translateX(calc(-50% - 26px)) translateY(0); }
  75% { transform: translateX(-50%) translateY(16px); }
  100% { transform: translateX(calc(-50% + 26px)) translateY(0); }
}
/* --- Disparos / explosión --- */
@keyframes gxfire {
  0% { transform: translate(-50%, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-50%, -240px); opacity: 0; }
}
@keyframes gxefire {
  0% { transform: translate(-50%, 0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(-50%, 230px); opacity: 0; }
}
@keyframes gxboom {
  0% { opacity: 1; background: #fff;
    box-shadow: 0 -8px 0 0 #fff, 8px -8px 0 0 #ffd23b, 8px 8px 0 0 #ff7b00, -8px 8px 0 0 #ff3b6b, -8px -8px 0 0 #9cff00, 0 8px 0 0 #fff, 8px 0 0 0 #ffd23b, -8px 0 0 0 #fff; }
  25% { opacity: 1; background: #ffd23b;
    box-shadow: 0 -16px 0 0 #fff, 16px 0 0 0 #ffd23b, 0 16px 0 0 #ff7b00, -16px 0 0 0 #ff3b6b, 8px -8px 0 0 #9cff00, 8px 8px 0 0 #fff, -8px 8px 0 0 #ffd23b, -8px -8px 0 0 #fff; }
  50% { opacity: 1; background: #ff7b00;
    box-shadow: 0 -24px 0 0 #fff, 24px -16px 0 0 #ffd23b, 24px 16px 0 0 #ff7b00, 0 24px 0 0 #ff3b6b, -24px 16px 0 0 #9cff00, -24px -16px 0 0 #fff, 16px 0 0 0 #ffd23b, -16px 0 0 0 #fff; }
  75% { opacity: 1; background: transparent;
    box-shadow: 8px -32px 0 0 #ffd23b, 32px -8px 0 0 #ff7b00, 24px 24px 0 0 #ff3b6b, -8px 32px 0 0 #9cff00, -32px 8px 0 0 #fff, -24px -24px 0 0 #ffd23b, 16px 16px 0 0 #ff7b00, -16px -8px 0 0 #ff3b6b; }
  100% { opacity: 0; background: transparent;
    box-shadow: 8px -40px 0 0 #ffd23b, 40px -8px 0 0 #ff7b00, 30px 30px 0 0 #ff3b6b, -8px 40px 0 0 #9cff00, -40px 8px 0 0 #fff, -30px -30px 0 0 #ffd23b, 20px 20px 0 0 #ff7b00, -20px -10px 0 0 #ff3b6b; }
}
/* --- Final: derrota del enemigo (distinto izq/der) + victoria --- */
.galaga.is-over .gx-elaser { opacity: 0 !important; animation: none !important; }
.galaga--left.is-over  .gx-enemy { animation: enemyDieL .45s ease forwards; }
.galaga--right.is-over .gx-enemy { animation: enemyDieR .5s ease forwards; }
.galaga--left.is-over  .gx-ship { animation: winHop .7s ease .12s; }
.galaga--right.is-over .gx-ship { animation: winSpin .8s ease .12s; }
.galaga.is-over .gx-laser { animation-duration: .4s; }
@keyframes enemyDieL { to { transform: translateX(-50%) scale(.1) rotate(45deg); opacity: 0; } }
@keyframes enemyDieR { to { transform: translateX(-50%) translateY(22px) scale(.1) rotate(-65deg); opacity: 0; } }
@keyframes winHop { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(0, -16px); } }
@keyframes winSpin { to { transform: rotate(360deg); } }

/* Oculta las batallas en pantallas pequeñas (no hay espacio lateral) */
@media (max-width: 960px) {
  .galaga { display: none; }
}

/* ============================================================
   PÁGINAS INTERNAS (apps / soluciones) — tema dark + héroe con video
   ============================================================ */
/* Héroe con video de fondo (Higgsfield) */
.page-dark .portfolio-hero,
.page-dark .solutions-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #020812 0%, #06111f 60%, #0b172a 100%);
}
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
  pointer-events: none;
}
.hero-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 22%, rgba(156, 255, 0, .1), transparent 34%),
    linear-gradient(90deg, rgba(2, 8, 18, .82) 0%, rgba(2, 8, 18, .5) 55%, rgba(2, 8, 18, .25) 100%);
}
.page-dark .portfolio-hero__inner,
.page-dark .solutions-hero__inner { position: relative; z-index: 2; }

/* Título del héroe en tipografía pixel (héroe nuevo) */
/* Títulos de héroe en tipografía NORMAL (no pixel) en estas páginas */
.page-dark .portfolio-hero h1 {
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 5.4vw, 4.8rem);
  line-height: 1.04;
  overflow-wrap: normal;
  word-break: normal;
}
.page-dark .solutions-hero h1 {
  font-family: Aptos, Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  line-height: 1.06;
  overflow-wrap: normal;
  word-break: normal;
}

/* Números/acentos en pixel + lima (como en la home) */
.page-dark .vertical-card__number,
.page-dark .solutions-principles strong,
.page-dark .roadmap-grid span {
  font-family: var(--font-display);
  color: var(--lime);
}

/* Secciones transparentes para dejar ver el fondo animado */
.page-dark .portfolio-strip,
.page-dark .portfolio-section,
.page-dark .portfolio-section--soft,
.page-dark .solutions-principles,
.page-dark .solutions-section,
.page-dark .roadmap-section { background: transparent; }

/* Texto claro en spans/acentos que venían oscuros */
.page-dark .portfolio-strip strong,
.page-dark .roadmap-grid strong,
.page-dark .portfolio-card__body h3,
.page-dark .portfolio-feature__content h3 { color: #fff; }
.page-dark .portfolio-strip span,
.page-dark .portfolio-heading-copy,
.page-dark .portfolio-feature p,
.page-dark .portfolio-card p,
.page-dark .vertical-card p,
.page-dark .collaboration-list span,
.page-dark .solutions-principles p { color: rgba(255, 255, 255, .68); }

/* Tarjetas en versión oscura translúcida con glow lima */
.page-dark .portfolio-feature,
.page-dark .portfolio-card,
.page-dark .vertical-card {
  border-color: rgba(156, 255, 0, .16);
  background: rgba(10, 20, 35, .55);
  box-shadow: 0 0 0 1px rgba(156, 255, 0, .05), 0 14px 34px rgba(0, 0, 0, .35);
}
.page-dark .portfolio-card:hover,
.page-dark .vertical-card:hover {
  border-color: rgba(156, 255, 0, .55);
  box-shadow: 0 0 22px rgba(156, 255, 0, .28), 0 18px 44px rgba(0, 0, 0, .4);
}
.page-dark .portfolio-feature__media,
.page-dark .portfolio-card__media { border-color: rgba(255, 255, 255, .1); background: #061937; }

/* Bordes y divisores oscuros */
.page-dark .portfolio-strip { border-bottom-color: rgba(255, 255, 255, .08); }
.page-dark .portfolio-strip__inner div,
.page-dark .solutions-principles__grid > div,
.page-dark .roadmap-grid,
.page-dark .roadmap-grid div { border-color: rgba(255, 255, 255, .1); }

/* Etiquetas y metadatos */
.page-dark .portfolio-tag {
  border-color: rgba(31, 94, 255, .4);
  color: #c7d8ff;
  background: rgba(31, 94, 255, .14);
}
.page-dark .portfolio-card__meta span {
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .05);
}
.page-dark .portfolio-link { color: #9cc2ff; }
.page-dark .vertical-card a { color: #9cc2ff; }
.page-dark .vertical-card::after { background: rgba(31, 94, 255, .1); }
.page-dark .vertical-card__market { color: #7fe0e3 !important; }

/* ============================================================
   LOGIN — terminal de acceso Daptux (interactiva y animada)
   ============================================================ */
.login-daptux {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 56px 20px;
}
.login-wrap {
  position: relative;
  z-index: 2;
  width: min(440px, 100%);
}
/* Mascota guardián sobre la tarjeta (luego sigue el cursor) */
.login-bot {
  position: absolute;
  top: -58px;
  left: 50%;
  width: 96px;
  transform: translateX(-50%);
  z-index: 3;
}
.login-bot .mascot { display: block; width: 100%; }

/* Tarjeta tipo terminal */
.login-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(156, 255, 0, .5);
  border-radius: 16px;
  background: rgba(3, 10, 20, .82);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 30px rgba(156, 255, 0, .16);
  backdrop-filter: blur(6px);
  animation: scene-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.login-card__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-pixel);
  font-size: .76rem;
  color: rgba(255, 255, 255, .5);
}
.login-card__bar i { width: 11px; height: 11px; border-radius: 50%; }
.login-card__bar i:nth-child(1) { background: #ef4444; }
.login-card__bar i:nth-child(2) { background: #f59e0b; }
.login-card__bar i:nth-child(3) { background: var(--neon); }
.login-card__path { margin-left: 6px; }

.login-card__body { padding: clamp(26px, 5vw, 38px); padding-top: 34px; }
.login-title {
  margin: 4px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3rem);
  line-height: 1;
  color: #fff;
}
.login-sub { margin: 0 0 22px; color: rgba(255, 255, 255, .66); }

.login-form { display: grid; gap: 15px; }
.login-form label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, .82);
  font-size: .9rem;
  font-weight: 700;
}
.login-form input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  padding: 13px 14px;
  background: rgba(2, 8, 18, .65);
  color: #fff;
  font: inherit;
}
.login-form input:focus {
  outline: 3px solid rgba(156, 255, 0, .22);
  border-color: var(--lime);
  box-shadow: 0 0 14px rgba(156, 255, 0, .3);
}
.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  padding: 14px 22px;
  color: #04210a;
  background: var(--lime);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(156, 255, 0, .5);
  transition: box-shadow .2s ease, transform .18s ease, background .18s ease;
  animation: cta-pulse 2.6s ease-in-out infinite;
}
.login-btn:hover,
.login-btn:focus {
  transform: translateY(-2px);
  background: #b9e623;
  box-shadow: 0 0 26px 4px rgba(156, 255, 0, .6);
}
.login-alert {
  margin-bottom: 16px;
  border: 1px solid rgba(255, 59, 107, .5);
  border-radius: 10px;
  padding: 12px 14px;
  color: #ffd0da;
  background: rgba(255, 59, 107, .12);
  font-weight: 700;
}
.login-meta {
  margin: 16px 0 0;
  color: rgba(156, 255, 0, .75);
  font-family: var(--font-pixel);
  font-size: .82rem;
}
.login-back {
  display: block;
  width: fit-content;
  margin: 20px auto 0;          /* centrado, lejos de los píxeles de las esquinas */
  text-align: center;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-pixel);
  font-size: .82rem;
}
.login-back::before { content: "\2190  "; }
.login-back:hover { color: var(--neon); }

@media (max-width: 540px) {
  .login-bot { width: 78px; top: -46px; }
}

/* ============================================================
   OFICINA VIVA — mascotas trabajando a los lados del login
   ============================================================ */
.office {
  position: absolute;
  bottom: 0;
  z-index: 1;                       /* detrás del formulario (z-index 2) */
  height: 84vh;
  opacity: .92;
  pointer-events: none;
}
/* Zonas a los lados con un margen cómodo respecto al formulario (no lo tapan) */
.office--left  { left: 0;  width: calc(50% - 320px); }
.office--right { right: 0; width: calc(50% - 350px); }

.ws { position: absolute; width: 150px; height: 156px; }

/* Izquierda: ancladas al borde derecho de su zona (con espacio al form) */
.office--left .ws { transform-origin: right bottom; }
.office--left .ws--a { right: 0;   bottom: 5%;  transform: scale(1.35); }
.office--left .ws--b { right: 28px; bottom: 46%; transform: scale(1.12); opacity: .9; }

/* Derecha: ancladas al borde izquierdo, crecen hacia la derecha (sin espejar) */
.office--right .ws { transform-origin: left bottom; }
.office--right .ws--a { left: 0;   bottom: 5%;  transform: scale(1.35); }
.office--right .ws--b { left: 28px; bottom: 46%; transform: scale(1.12); opacity: .9; }

/* En pantallas no muy anchas, deja solo una estación por lado para que respire */
@media (max-width: 1320px) {
  .office .ws--b { display: none; }
}

/* Trabajador (mascota) — tecleo sutil en vez de la patrulla */
.ws__bot {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 50px;
  transform: translateX(-50%);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(156, 255, 0, .5));
}
.ws .bot-body {
  transform-origin: center bottom;
  animation: ws-bob .7s ease-in-out infinite;
}
.ws--b .bot-body { animation-duration: .95s; }
.office--right .bot-body { animation-delay: .25s; }
@keyframes ws-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Monitor con código animado */
.ws__monitor {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 86px;
  height: 52px;
  transform: translateX(-50%);
  z-index: 2;
  overflow: hidden;
  border: 3px solid #2a3a52;
  border-radius: 6px;
  background: #02140a;
  box-shadow: 0 0 12px rgba(156, 255, 0, .25);
}
.ws__screen {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(156, 255, 0, .55) 0 2px, transparent 2px 8px);
  opacity: .5;
  animation: ws-screen 1.1s linear infinite, ws-flicker 3s steps(1) infinite;
}
@keyframes ws-screen { from { background-position: 0 0; } to { background-position: 0 -20px; } }
@keyframes ws-flicker { 0%, 92%, 100% { opacity: .5; } 95% { opacity: .85; } }

/* Escritorio */
.ws__desk {
  position: absolute;
  top: 92px;
  left: 4px;
  right: 4px;
  height: 12px;
  z-index: 3;
  border-top: 2px solid rgba(156, 255, 0, .3);
  border-radius: 3px;
  background: linear-gradient(#14243c, #0c182a);
}
.ws__desk::before,
.ws__desk::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 6px;
  height: 22px;
  background: #0c182a;
}
.ws__desk::before { left: 16%; }
.ws__desk::after { right: 16%; }

/* Teclado (teclea), mouse, taza con vapor */
.ws__kb {
  position: absolute;
  top: 84px;
  left: 28%;
  width: 50px;
  height: 9px;
  z-index: 4;
  border-radius: 2px;
  background: #1b2c46;
  box-shadow: inset 0 0 0 1px rgba(156, 255, 0, .3);
  animation: ws-key .5s steps(1) infinite;
}
.ws--b .ws__kb { animation-duration: .7s; }
@keyframes ws-key {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(156, 255, 0, .3); }
  50% { box-shadow: inset 0 0 0 1px rgba(156, 255, 0, .7), 0 0 7px rgba(156, 255, 0, .45); }
}
.ws__mouse {
  position: absolute;
  top: 86px;
  left: 82%;
  width: 11px;
  height: 8px;
  z-index: 4;
  border-radius: 5px;
  background: #1b2c46;
  box-shadow: inset 0 0 0 1px rgba(156, 255, 0, .3);
}
.ws__cup {
  position: absolute;
  top: 78px;
  left: 7%;
  width: 13px;
  height: 14px;
  z-index: 4;
  border-radius: 2px 2px 4px 4px;
  background: #0e1c30;
  box-shadow: inset 0 0 0 2px var(--neon);
}
.ws__cup::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 3px;
  width: 4px;
  height: 6px;
  border: 2px solid var(--neon);
  border-left: 0;
  border-radius: 0 4px 4px 0;
}
.ws__steam {
  position: absolute;
  left: 50%;
  top: -9px;
  width: 3px;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(#fff, transparent);
  opacity: 0;
  animation: ws-steam 2.2s ease-in-out infinite;
}
.ws--b .ws__steam { animation-delay: .8s; }
@keyframes ws-steam {
  0% { opacity: 0; transform: translate(-50%, 4px) scaleY(.6); }
  40% { opacity: .55; }
  100% { opacity: 0; transform: translate(-50%, -10px) scaleY(1.2); }
}

/* Sin espacio lateral en pantallas medianas/pequeñas: ocultar la oficina */
@media (max-width: 1024px) {
  .office { display: none; }
}

/* ============================================================
   AJUSTES FINOS (home + páginas internas)
   ============================================================ */
/* Intro: centrar verticalmente la copia con el título grande + agrandarla */
.page-dark .section--intro .intro-grid { align-items: center; }
.page-dark .intro-copy { font-size: 1.24rem; line-height: 1.6; }

/* Proceso: cuadros más grandes para que el texto respire */
.page-dark .process { gap: 18px; }
.page-dark .process__step {
  border: 1px solid rgba(156, 255, 0, .18);
  border-top: 2px solid rgba(156, 255, 0, .7);
  border-radius: 12px;
  padding: 26px 22px 28px;
  min-height: 250px;
  background: rgba(10, 20, 35, .5);
  box-shadow: 0 0 0 1px rgba(156, 255, 0, .05), 0 12px 30px rgba(0, 0, 0, .3);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.page-dark .process__step:hover {
  transform: translateY(-4px);
  border-color: rgba(156, 255, 0, .55);
  box-shadow: 0 0 22px rgba(156, 255, 0, .3), 0 18px 44px rgba(0, 0, 0, .4);
}

/* Apps: viñetas del producto destacado con buen contraste */
.page-dark .portfolio-points li { color: rgba(255, 255, 255, .82); }

/* Soluciones: sección "Modelo colaborativo" embellecida estilo Daptux */
.page-dark .collaboration-section {
  background:
    radial-gradient(circle at 12% 16%, rgba(156, 255, 0, .08), transparent 30%),
    radial-gradient(circle at 88% 84%, rgba(31, 94, 255, .12), transparent 34%),
    rgba(2, 8, 18, .55);
}
.page-dark .collaboration-list div {
  border: 1px solid rgba(156, 255, 0, .18);
  border-left: 3px solid rgba(156, 255, 0, .6);
  border-radius: 12px;
  background: rgba(10, 20, 35, .55);
  box-shadow: 0 0 0 1px rgba(156, 255, 0, .05), 0 12px 30px rgba(0, 0, 0, .3);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.page-dark .collaboration-list div:hover {
  transform: translateY(-3px);
  border-color: rgba(156, 255, 0, .6);
  box-shadow: 0 0 22px rgba(156, 255, 0, .3), 0 18px 44px rgba(0, 0, 0, .4);
}
.page-dark .collaboration-list strong { color: #fff; }
.page-dark .collaboration-layout blockquote {
  border-left-width: 4px;
  box-shadow: -4px 0 16px -6px rgba(156, 255, 0, .5);
}

/* ============================================================
   OPTIMIZACIÓN MÓVIL (≤600px) — Hero index (frame3) + intro
   ============================================================ */
@media (max-width: 600px) {
  .hero--frame3, .hero--alive { overflow-x: hidden; }

  /* Título del hero: ajusta sin cortarse */
  .frame3 { width: calc(100% - 32px); max-width: calc(100% - 32px); }
  .frame3__title { font-size: clamp(2rem, 10.5vw, 3.1rem) !important; }
  .frame3__title .neon, .frame3__line { overflow-wrap: break-word; }

  /* Tagline y servicios legibles, sin desbordar */
  .frame3__tagline { font-size: .92rem; white-space: normal; overflow-wrap: break-word; }
  .frame3__services li { font-size: .95rem; }
  .frame3__handle { font-size: .85rem; }

  /* La lluvia Matrix lateral más sutil para no robar espacio ni legibilidad */
  .hero__rain { width: 26vw; opacity: .3; }
  /* El bot flotante satura en pantallas pequeñas */
  .hero__bot { display: none; }
}