:root {
  --fondo: #0a0a0a;
  --linea: rgba(255, 255, 255, .09);
  --texto: #ededed;
  --tenue: #6f6f6f;
  --cuerpo: #a3a3a3;
  --tarjeta: #151515;
  --acento: #3ecf8e;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --ancho: 1240px;
  --margen: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, dl, dd, ul, pre { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.tenue { color: var(--tenue); }

/* Piezas comunes */
.etiqueta, .menu a, .boton, .numero, .pie, dt {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.etiqueta { color: var(--tenue); margin-bottom: 28px; }
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: var(--texto);
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.boton:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .4); }

/* Barra superior */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: 40px;
  padding: 18px var(--margen);
  background: linear-gradient(var(--fondo), transparent);
}
.marca { font-size: 1.05rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.menu { display: flex; gap: 32px; margin-right: auto; }
.menu a { color: var(--tenue); transition: color .2s; }
.menu a:hover { color: var(--texto); }

/* Portada */
.portada {
  position: relative;
  min-height: min(100svh, 980px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0 var(--margen) 44px;
  overflow: hidden;
}
.portada-titulo { position: relative; margin-top: min(26vh, 250px); }
h1 {
  font-size: clamp(2.5rem, 6.2vw, 5rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.portada-pie {
  position: relative;
  display: grid; grid-template-columns: 1fr minmax(0, 30em) auto; align-items: end; gap: 40px;
}
.bajar { font-size: 1.2rem; color: var(--tenue); }
.bajada { font-size: .95rem; line-height: 1.6; color: var(--texto); }

/* Haz de luz */
.haz {
  position: absolute; right: 0; top: 46%;
  width: 50%; height: 440px;
  transform: translateY(-50%);
  pointer-events: none;
  animation: pulso 7s ease-in-out infinite;
}
.haz-cono { position: absolute; inset: 0; }
.haz-cono i { position: absolute; inset: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.haz-cono.ancho { inset: 14% 0; filter: blur(44px); opacity: .5; }
.haz-cono.ancho i { background: linear-gradient(90deg, transparent, #5f7fd6 45%, #b9c8f5); }
.haz-cono.fino { inset: 43% 0; filter: blur(10px); opacity: .9; }
.haz-cono.fino i { background: linear-gradient(90deg, transparent, #c9d6ff 40%, #fff); }
.haz-nucleo {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, #fff 35%);
  box-shadow: 0 0 18px 2px rgba(200, 215, 255, .8);
}
@keyframes pulso { 50% { opacity: .78; } }

/* Bloques */
.bloque { padding: 120px var(--margen) 0; }
.bloque-cabeza, .rejilla { max-width: var(--ancho); margin-inline: auto; }
.bloque-cabeza { padding-bottom: 64px; }
h2 {
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.025em;
}
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 400; line-height: 1.2; letter-spacing: -.015em; }

/* Rejilla de líneas finas */
.rejilla { border: 1px solid var(--linea); }
.fila { display: grid; grid-template-columns: 1fr 1fr; }
.fila + .fila { border-top: 1px solid var(--linea); }
.celda { padding: 40px; }
.fila .celda + .celda { border-left: 1px solid var(--linea); }
.texto { display: flex; flex-direction: column; justify-content: space-between; gap: 72px; min-height: 340px; }
.texto p { max-width: 30em; margin-bottom: 24px; font-size: .95rem; line-height: 1.6; color: var(--cuerpo); }
.prueba { display: grid; place-items: center; }

/* Fragmentos de producto */
.tarjeta {
  width: min(100%, 320px);
  padding: 22px 24px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--tarjeta);
  font-size: .88rem;
}
.pasos li { display: flex; justify-content: space-between; padding: 9px 0; color: var(--tenue); }
.pasos li span { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; }
.pasos li.activo { color: var(--texto); }
.pasos li.activo span { color: var(--acento); }
.pregunta p { color: var(--texto); }
.terminal { font-family: var(--mono); font-size: .78rem; line-height: 1.9; white-space: pre-wrap; color: var(--texto); }
.cursor {
  display: inline-block; width: 7px; height: 1em; margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--texto);
  animation: parpadeo 1.1s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }
.bodega p { margin-bottom: 14px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.mapa { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.mapa i { aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, .06); }
.mapa .n1 { background: rgba(255, 255, 255, .16); }
.mapa .n2 { background: rgba(255, 255, 255, .38); }
.mapa .n3 { background: var(--acento); }

/* Método */
.tres { display: grid; grid-template-columns: repeat(3, 1fr); }
.tres .celda + .celda { border-left: 1px solid var(--linea); }
.numero { color: var(--tenue); }
.paso h3 { margin: 110px 0 14px; }
.paso p:last-child { font-size: .95rem; line-height: 1.6; color: var(--cuerpo); }

/* Ficha para agentes */
.ficha { padding: 12px 40px; }
.ficha dl > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 20px 0; }
.ficha dl > div + div { border-top: 1px solid var(--linea); }
dt { color: var(--tenue); padding-top: 3px; }
dd { font-size: .95rem; line-height: 1.6; color: var(--texto); }
dd a { border-bottom: 1px solid rgba(255, 255, 255, .25); }
dd a:hover { border-color: var(--texto); }

/* Cierre y pie */
.cierre { padding: 160px max(var(--margen), calc(50vw - var(--ancho) / 2)) 140px; }
.cierre h2 { font-size: clamp(2.5rem, 6.2vw, 5rem); margin-bottom: 48px; }
.pie {
  display: flex; justify-content: space-between;
  padding: 24px var(--margen);
  border-top: 1px solid var(--linea);
  color: var(--tenue);
}
.pie a:hover { color: var(--texto); }

@media (max-width: 860px) {
  .menu { display: none; }
  .barra { justify-content: space-between; }
  .haz { width: 85%; top: 60%; height: 260px; }
  .portada-pie { grid-template-columns: 1fr; gap: 24px; }
  .bajar { display: none; }
  .bloque { padding-top: 88px; }
  .fila, .tres { grid-template-columns: 1fr; }
  .fila .celda + .celda, .tres .celda + .celda { border-left: 0; border-top: 1px solid var(--linea); }
  .celda { padding: 28px 22px; }
  .texto { min-height: 0; gap: 40px; }
  .paso h3 { margin-top: 40px; }
  .portada-pie .boton { justify-self: start; }
  .ficha { padding: 4px 22px; }
  .ficha dl > div { grid-template-columns: 1fr; gap: 6px; }
  .cierre { padding: 110px var(--margen) 96px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .haz, .cursor { animation: none; }
}