/* ═══════════════════════════════════════════════════════════════════════
   VIXOZ 2026 · BASE
   Reset, tipografia, utilidades de layout y primitivas del sistema visual
   (etiqueta de seccion, linea separadora, titulo con ultima palabra verde).
   ═══════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* El scroll suave lo maneja Lenis. Si Lenis no arranca, no queremos
     que el navegador compita: se activa solo como respaldo via .sin-lenis */
  scroll-behavior: auto;
}

html.sin-lenis { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--interlinea-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ── Foco visible y consistente en todo el sitio ──────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Saltar al contenido (accesibilidad de teclado) ───────────────── */
.saltar {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-4);
  z-index: calc(var(--z-preloader) + 1);
  padding: var(--esp-3) var(--esp-6);
  background: var(--acento);
  color: var(--azul-900);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur-rapida) var(--curva-salida);
}
.saltar:focus-visible { transform: translateY(0); }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ═══════════════════════════════ LAYOUT ═══════════════════════════════ */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion {
  position: relative;
  padding-block: var(--seccion-y);
}

/* .sitio NO lleva z-index a proposito: si lo llevara crearia un contexto de
   apilado y el canvas 3D (que esta afuera) nunca podria meterse entre el
   fondo de una seccion y su texto. Ver la escala en tokens.css. */
.sitio { position: relative; }
.encabezado, .pie { position: relative; z-index: var(--z-header); }

/* El contenido de cada seccion va por encima del canvas 3D. Lo decorativo
   que debe quedar DETRAS de los triangulos se marca con data-fondo. */
.seccion > .contenedor,
.seccion > .hero__scroll {
  position: relative;
  z-index: var(--z-contenido);
}
.seccion > [data-fondo] { z-index: 0; }


/* ═══════════════════════ PRIMITIVAS DEL SISTEMA ═══════════════════════ */

/* Etiqueta de seccion — "CAPACIDADES / 06" */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  font-family: var(--fuente-texto);
  font-size: var(--t-etiqueta);
  font-weight: 500;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-etiqueta);
}
.etiqueta__num { color: var(--texto-etiqueta); }

/* Linea horizontal corta que separa bloques */
.linea {
  width: 3rem;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--borde-fuerte);
}
.linea--verde { background: var(--acento); }

/* Titulo de seccion. La ultima linea o palabra clave va en verde:
   se marca en el HTML con <span class="verde">. */
.titulo {
  font-family: var(--fuente-titulo);
  font-weight: 900;
  font-stretch: var(--ancho-titulo);
  font-size: var(--t-titulo);
  line-height: var(--interlinea-titulo);
  letter-spacing: var(--tracking-titulo);
  text-transform: uppercase;
  text-wrap: balance;
}
.titulo--hero { font-size: var(--t-hero); }
.verde { color: var(--acento); }

.bajada {
  max-width: var(--ancho-texto);
  color: var(--texto-tenue);
  font-size: var(--t-cuerpo);
}

/* Enlace con flecha — "EXPLORAR PROYECTOS →" */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  font-size: var(--t-etiqueta);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto);
  transition: color var(--dur-rapida) ease;
}
.enlace-flecha svg { transition: transform var(--dur-rapida) var(--curva-salida); }
.enlace-flecha:hover { color: var(--acento); }
.enlace-flecha:hover svg { transform: translateX(4px); }

/* Boton con borde — "VER PROYECTO" */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-6);
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  font-size: var(--t-etiqueta);
  font-weight: 600;
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  transition: border-color var(--dur-rapida) ease,
              color var(--dur-rapida) ease,
              background-color var(--dur-rapida) ease;
}
.boton:hover {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-suave);
}


/* ══════════════════════════ FONDO PLASMA ══════════════════════════════ */

/* Un unico canvas fijo detras de todo. Las secciones que NO llevan plasma
   se tapan con su propio fondo opaco. */
#plasma {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-plasma);
  pointer-events: none;
}

/* Canvas compartido de Three.js: tambien fijo, justo encima del plasma.
   Cada escena se dibuja recortada al rectangulo de su placeholder. */
#escena-3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas-3d);
  pointer-events: none;
}

/* Reserva de espacio en el layout para un objeto 3D. El canvas compartido
   dibuja encima de este rectangulo. */
.ancla-3d {
  position: relative;
  pointer-events: none;
}


/* ══════════════════════════ APARICIONES ═══════════════════════════════ */

/* Estado inicial de los elementos que aparecen al entrar en pantalla.
   GSAP ScrollTrigger los anima; si el JS falla, .sin-js los deja visibles. */
[data-aparece] {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.sin-js [data-aparece],
.reduce-movimiento [data-aparece] {
  opacity: 1;
  transform: none;
}


/* ══════════════════════ PREFERENCIA DE MOVIMIENTO ═════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-aparece] { opacity: 1 !important; transform: none !important; }
}


/* ═════════════════════════════ SCROLLBAR ══════════════════════════════ */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--azul-900); }
::-webkit-scrollbar-thumb { background: var(--azul-400); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--azul-400) var(--azul-900); }


/* ══════════════════════ BLOQUEO DE SCROLL (modal) ═════════════════════ */

body.scroll-bloqueado { overflow: hidden; }