/* ============================================================
   CASALS.AR — HUD / SpaceX-grade landing
   Paleta: void black · blanco frío · gris telemetría · azul señal
   ============================================================ */

:root {
  --bg:      #050608;
  --ink:     #EDEFF2;
  --dim:     #919AA6;            /* >=7:1 sobre --bg (WCAG AAA) */
  --line:    rgba(237, 239, 242, 0.12);
  --signal:  #9BD8FF;            /* SOLO para telemetría/datos */
  --panel:   rgba(10, 12, 16, 0.55);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --hud-pad: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Espacio que cada panel debe reservar para no quedar detrás del HUD fijo */
  --hud-top-reserve: 64px;
  --hud-bottom-reserve: 56px;
}

/* Modo día ("blueprint" — plano técnico claro), automático por SO.
   Ver docs/superpowers/specs/2026-07-20-modo-dia-noche-idioma-design.md */
@media (prefers-color-scheme: light) {
  :root {
    --bg:      #F3F5F7;
    --ink:     #0B1622;
    --dim:     #44515D;            /* 7.45:1 sobre --bg (WCAG AAA) */
    --line:    rgba(11, 22, 34, 0.14);
    --signal:  #0B4F8A;            /* 7.69:1 sobre --bg (WCAG AAA) */
    --panel:   rgba(206, 222, 235, 0.45);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-display);
  font-variation-settings: "wdth" 100;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--signal); color: var(--bg); }

img { display: block; max-width: 100%; }

/* ============ UTILIDADES DE ACCESIBILIDAD ============ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--signal);
  color: var(--bg);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--hud-pad);
  top: var(--hud-pad);
}

/* ============ CAPAS DE FONDO ============ */

#scene3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grain-shift 0.9s steps(4) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1%); }
  50%  { transform: translate(1%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

body.is-hidden-tab .grain { animation-play-state: paused; }

/* ============ HUD ============ */

.hud { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

.hud__corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  background: var(--panel);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 2px;
}
.hud__corner--tl {
  top: calc(var(--hud-pad) + env(safe-area-inset-top));
  left: calc(var(--hud-pad) + env(safe-area-inset-left));
}
.hud__corner--tr {
  top: calc(var(--hud-pad) + env(safe-area-inset-top));
  right: calc(var(--hud-pad) + env(safe-area-inset-right));
  text-align: right;
}

.hud__mark {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.22em;
}
.hud__mark i { font-style: normal; color: var(--signal); }
.hud__sub { color: var(--dim); font-size: 9px; letter-spacing: 0.3em; }

.hud__status { color: var(--ink); }
.hud__status .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  margin-right: 6px;
  box-shadow: 0 0 8px var(--signal);
  animation: pulse 2.4s infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }
.hud__clock { color: var(--dim); }

/* Riel lateral */
.hud__rail {
  position: absolute;
  left: calc(var(--hud-pad) + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
  background: var(--panel);
  backdrop-filter: blur(8px);
  padding: 14px 10px;
  border-radius: 3px;
}
.rail__item {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s var(--ease);
}
.rail__item::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--line);
  transition: width 0.3s var(--ease), background 0.3s var(--ease);
}
.rail__item.is-active { color: var(--signal); }
.rail__item.is-active::before { width: 34px; background: var(--signal); }

/* Barra inferior de telemetría */
.hud__bar {
  position: absolute;
  left: calc(var(--hud-pad) + env(safe-area-inset-left));
  right: calc(var(--hud-pad) + env(safe-area-inset-right));
  bottom: calc(var(--hud-pad) * 0.6 + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--dim);
  border-top: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(8px);
  padding: 10px 12px;
  border-radius: 3px 3px 0 0;
}
.bar__cell--wide { flex: 1; }
.bar__track {
  display: block;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.bar__fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--signal);
}
#hudPercent { color: var(--signal); min-width: 4ch; text-align: right; }

.bar__cell--lang {
  display: flex;
  gap: 6px;
  pointer-events: auto;
}
.lang__btn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--dim);
  background: none;
  border: 1px solid var(--line);
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.lang__btn.is-active { color: var(--signal); border-color: var(--signal); }
.lang__btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ============ PANELES ============ */

main { position: relative; z-index: 10; }

.panel {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block:
    calc(var(--hud-top-reserve) + env(safe-area-inset-top) + clamp(24px, 6vh, 60px))
    calc(var(--hud-bottom-reserve) + env(safe-area-inset-bottom) + clamp(24px, 6vh, 60px));
  padding-inline: clamp(24px, 8vw, 120px);
  position: relative;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--signal);
  margin-bottom: 24px;
}

.h2 {
  font-variation-settings: "wdth" 118;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.body {
  color: var(--dim);
  max-width: 52ch;
  margin-bottom: 18px;
  font-size: clamp(15px, 1.2vw, 17px);
}

.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--dim);
}

/* ---- HERO ---- */

.panel--hero {
  align-items: flex-start;
  text-align: left;
  container-type: inline-size;
}

.hero__title {
  display: flex;
  flex-direction: column;
  font-variation-settings: "wdth" 125;
  font-weight: 900;
  /* cqw (no vw): el tamaño debe seguir el ancho real disponible dentro
     del panel, no el viewport completo — si no, cambios en el padding
     del panel (p.ej. el reserve del riel) desalinean el clamp y las
     palabras largas del hero envuelven a mitad de palabra. Coeficiente
     calibrado contra "INFRAESTRUCTURA" (la palabra más larga, ES/EN)
     a font-variation wdth 125: a 120px mide ~1616px, o ~13.47px por
     cada 1px de tamaño — 7cqw dejamost ~6% de margen sobre ese ancho. */
  font-size: clamp(38px, 7cqw, 120px);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.hero__line { display: block; overflow: hidden; }
.hero__line--ghost {
  color: transparent;
  -webkit-text-stroke: 1px rgba(237, 239, 242, 0.45);
}
.hero__line .char { display: inline-block; }

.hero__lede { color: var(--dim); max-width: 46ch; margin-bottom: 40px; font-size: clamp(15px, 1.3vw, 18px); }

.hero__cta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 14px 28px;
  position: relative;
  overflow: hidden;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hero__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
  z-index: -1;
}
.hero__scrollhint {
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 1px; height: 56px;
  background: var(--line);
  overflow: hidden;
}
.hero__scrollhint span {
  position: absolute;
  left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--signal);
  animation: drop 2s var(--ease) infinite;
}
@keyframes drop { to { top: 110%; } }

/* ---- SPLIT (PERFIL) ---- */

.panel--split {
  flex-direction: row;
  align-items: center;
  gap: clamp(32px, 6vw, 90px);
}
.split__text { flex: 1.1; }
.split__media { flex: 1; }

.split__media figcaption,
.gallery__item figcaption { margin-top: 10px; }

/* ============ ARTE WIREFRAME (reemplaza fotografía) ============
   Ilustraciones esquemáticas propias en el mismo lenguaje visual
   que el icosaedro wireframe de fondo, en vez de fotos de stock. */

.art {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(155, 216, 255, 0.06), transparent 60%),
    var(--panel);
  overflow: hidden;
  filter: grayscale(0.35) contrast(1.05);
  transition: filter 0.5s var(--ease);
}

.art svg { display: block; width: 100%; height: 100%; }

.art-line       { stroke: var(--line); stroke-width: 1; fill: none; }
.art-line--dim  { opacity: 0.4; }
.art-tick       { stroke: var(--line); stroke-width: 1; opacity: 0.55; }
.art-rack       { fill: rgba(237, 239, 242, 0.03); stroke: var(--line); stroke-width: 1; }
.art-led        { fill: var(--signal); animation: pulse 2.4s infinite; }
.art-cell       { fill: rgba(237, 239, 242, 0.03); stroke: var(--line); stroke-width: 1; }
.art-cell--hot  { fill: rgba(155, 216, 255, 0.16); stroke: var(--signal); }
.art-hub        { fill: var(--bg); stroke: var(--signal); stroke-width: 1.5; }
.art-node       { fill: var(--bg); stroke: var(--dim); stroke-width: 1.5; }
.art-node--lit  { stroke: var(--signal); fill: var(--signal); }
.art-panel      { fill: rgba(237, 239, 242, 0.03); stroke: var(--line); stroke-width: 1; }
.art-spark      { fill: none; stroke: var(--signal); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.art-spark--alt { stroke: var(--dim); }
.art-bar        { fill: rgba(155, 216, 255, 0.35); stroke: var(--signal); stroke-width: 1; }
.art-gauge-track { fill: none; stroke: var(--line); stroke-width: 6; }
.art-gauge-fill  { fill: none; stroke: var(--signal); stroke-width: 6; stroke-linecap: round; }

.art--terminal { padding: clamp(14px, 2vw, 22px); overflow: auto; }
.art-term {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.9;
  color: var(--dim);
  white-space: pre-wrap;
}
.art-term__ln     { display: block; }
.art-term__ts     { opacity: 0.7; }
.art-term__ok     { color: var(--signal); font-weight: 600; }
.art-term__info   { color: var(--dim); font-weight: 600; }
.art-term__warn   { color: var(--ink); font-weight: 600; }
.art-term__cursor { color: var(--signal); animation: pulse 1s steps(2) infinite; }

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.tags li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--dim);
  border: 1px solid var(--line);
  padding: 6px 10px;
}

/* ---- OPERACIONES ---- */

.ops__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 20px;
}
.ops__card {
  background: var(--panel);
  backdrop-filter: blur(6px);
  padding: clamp(24px, 3vw, 40px);
  transition: background 0.4s var(--ease);
}
.ops__code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--signal);
}
.ops__card h3 {
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 10px;
}
.ops__card p { color: var(--dim); font-size: 14px; }

/* ---- TELEMETRÍA (stats) ---- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 4vw, 60px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(32px, 5vh, 60px) 0;
}
.stat { text-align: left; }
.stat__num {
  display: block;
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.stat__label {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--dim);
}

/* ---- GALERÍA ---- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 20px;
}
.gallery__item:nth-child(even) { transform: translateY(clamp(20px, 4vh, 60px)); }

/* ---- CONTACTO ---- */

.panel--contact { align-items: flex-start; }

.contact__form {
  width: min(560px, 100%);
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  color: var(--signal);
  font-size: 10px;
  letter-spacing: 0.25em;
}
.field input,
.field textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  padding: 12px 14px;
  resize: vertical;
  transition: border-color 0.3s var(--ease);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--signal);
}
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Honeypot anti-spam: fuera de pantalla, no display:none (algunos bots lo saltean) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact__form .hero__cta {
  align-self: flex-start;
  cursor: pointer;
}

.contact__status { min-height: 1.5em; }
.contact__status[data-state="ok"] { color: var(--signal); }
.contact__status[data-state="error"] { color: #ff8a8a; }

.contact__foot { margin-top: 48px; }

/* ============ ESTADOS DE ANIMACIÓN ============ */

.reveal { opacity: 0; transform: translateY(36px); }

body[data-motion="off"] .reveal { opacity: 1; transform: none; }
body[data-motion="off"] .grain,
body[data-motion="off"] .hero__scrollhint,
body[data-motion="off"] .dot { animation: none; }

/* ============ INTERACCIÓN (solo con hover real) ============
   Evita que :hover quede "pegado" tras un tap en touch. */

@media (hover: hover) and (pointer: fine) {
  .rail__item:hover { color: var(--ink); }
  .lang__btn:hover { color: var(--ink); }
  .hero__cta:hover { color: var(--bg); border-color: var(--ink); }
  .hero__cta:hover::before { transform: scaleX(1); }
  .split__media:hover .art,
  .gallery__item:hover .art { filter: grayscale(0) contrast(1); }
  .ops__card:hover { background: rgba(20, 24, 32, 0.85); }
}

/* ============ RESPONSIVE ============ */

@media (max-width: 900px) {
  .panel--split { flex-direction: column; align-items: flex-start; }
  .bar__cell--coords { display: none; }
  .gallery__item:nth-child(even) { transform: none; }

  :root {
    /* Riel horizontal + barra de telemetría quedan apilados abajo */
    --hud-bottom-reserve: 150px;
  }

  /* El riel pasa de columna lateral a franja horizontal: en mobile
     sigue siendo el único medio de saltar entre secciones. */
  .hud__rail {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(var(--hud-pad) * 0.6 + env(safe-area-inset-bottom) + 46px);
    transform: none;
    flex-direction: row;
    justify-content: space-between;
    gap: 4px;
    padding-left: calc(var(--hud-pad) + env(safe-area-inset-left));
    padding-right: calc(var(--hud-pad) + env(safe-area-inset-right));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hud__rail::-webkit-scrollbar { display: none; }
  .rail__item {
    flex-direction: column;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .rail__item::before { width: 1px; height: 10px; }
  .rail__item.is-active::before { width: 1px; height: 18px; }
}

@media (max-width: 640px) {
  /* Palabras largas del hero (p.ej. "INFRAESTRUCTURA") no tienen
     puntos de corte: hay que achicar tamaño y ancho de variable en
     vez de solo bajar el font-size, o quedan recortadas contra el
     overflow:hidden de .hero__line (que existe para el efecto de
     entrada por caracteres). overflow-wrap es la red de seguridad
     si aun así no entran en una pantalla muy angosta. */
  .hero__title {
    font-size: clamp(26px, 8vw, 42px);
    font-variation-settings: "wdth" 90;
    letter-spacing: -0.01em;
  }
  .hero__line {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 560px) {
  .hud__corner--tr { display: none; }
}

@media (min-width: 901px) {
  /* El riel vertical ahora tiene fondo propio (ver INTERACCIÓN/legibilidad
     más arriba): sin este reserve, el contenido centrado (hero incluido)
     arranca antes de que termine el riel y queda recortado detrás de él
     en anchos de laptop típicos (~1000–1400px). */
  .panel {
    padding-inline-start: calc(var(--hud-pad) + 98px);
  }
}

@media (max-width: 480px) {
  /* La barra de telemetría no entra completa: se deja sección,
     porcentaje e idioma — el track visual de progreso se saca. */
  .hud__bar { gap: 10px; }
  .bar__cell--wide { display: none; }
  #hudSection {
    max-width: 13ch;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (max-height: 650px) {
  /* Notebooks bajas / celulares en horizontal: HUD, riel, scrollhint
     y panel centrado compiten por muy poca altura disponible. */
  .panel {
    justify-content: flex-start;
    padding-top: calc(var(--hud-top-reserve) + env(safe-area-inset-top) + 16px);
  }
  .hero__scrollhint { display: none; }
  .hud__clock { display: none; }
}

/* ============ ACCESIBILIDAD ============ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.rail__item:focus-visible,
.hero__cta:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}