/* Web oficial TechPilot — base. Paleta de la Orden Maestra (punto 3):
   izquierda azul tecnologico, derecha energia calida, centro mezcla, fondo negro/vidrio. */
:root {
  /* Especificacion milimetrica (correo 2026-08-28) */
  --negro: #050505; --azul-negro: #050505;
  --cian: #00F0FF; --cian-rgb: 0,240,255; --naranja: #FF6600; --naranja-rgb: 255,102,0;
  --azul-electrico: #00F0FF; --azul-profundo: #0b3cae; --blanco-frio: #e8f1ff; --ambar: #FF6600; --dorado: #ffb347; --rojo-sutil: #ff5a4a;
  --texto: #FFFFFF; --gris-claro: #CCCCCC; --tenue: #888888; --apagado: #666666; --gris-oscuro: #111111; --borde-gris: #222222;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --vidrio: rgba(255,255,255,.035); --vidrio-borde: rgba(160,190,255,.14); --vidrio-viva: rgba(160,220,255,.5);
  --radio: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--negro); color: var(--texto); overflow-x: hidden;
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#escena { position: fixed; inset: 0; z-index: 0; display: block; }
.sin-webgl #escena { display: none; }
.sin-webgl body { background: var(--negro) radial-gradient(60vw 50vh at 30% 40%, rgba(47,123,255,.14), transparent 60%),
  radial-gradient(60vw 50vh at 70% 40%, rgba(255,138,42,.10), transparent 60%); }
.velo { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,4,10,.55), transparent 18%, transparent 82%, rgba(2,4,10,.8)); }
.capa { position: relative; z-index: 2; }

/* ── Entrada cinematografica (punto 2): pantalla oscura, el sistema despierta ── */
/* Transparente: la escena 3D (fuente -> cerebro) se ve detras mientras el texto espera. */
#entrada { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(60vw 50vh at 50% 55%, transparent, rgba(0,0,0,.35));
  transition: opacity 1.4s ease; pointer-events: none; }
.capa { opacity: 0; transition: opacity 1.4s ease; }
.capa.lista { opacity: 1; }
.sin-webgl .capa { opacity: 1; }
#entrada.fuera { opacity: 0; }
#entrada .logo { text-align: center; transform: translateY(-4vh); opacity: 0; transform: scale(.92); transition: opacity 1.6s ease .6s, transform 1.6s cubic-bezier(.2,.8,.3,1) .6s; }
#entrada.logo-visible .logo { opacity: 1; transform: none; }
#entrada .tp { font-size: clamp(64px, 12vw, 160px); font-weight: 200; letter-spacing: .12em; line-height: 1;
  background: linear-gradient(92deg, var(--cian), #fff 50%, var(--ambar)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#entrada .nombre { font-size: clamp(13px, 1.6vw, 18px); letter-spacing: .5em; text-transform: uppercase; color: var(--tenue); margin-top: 10px; }
#entrada .nombre b { color: #fff; font-weight: 600; }
#entrada #saltar { position: absolute; bottom: 28px; right: 32px; pointer-events: auto; background: none; border: 1px solid var(--vidrio-borde);
  color: var(--apagado); font: inherit; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; cursor: pointer; }

/* ── Cabecera fija (spec 2): 80px, rgba(5,5,5,.85), blur 16px, borde inferior cian→naranja ── */
header { position: fixed; top: 0; left: 0; right: 0; height: 80px; z-index: 100; display: flex; align-items: center; gap: 18px;
  padding: 0 clamp(16px, 3vw, 40px); background: rgba(5,5,5,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--cian) 30%, var(--naranja) 70%, transparent); opacity: .7; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.marca .simbolo { width: 30px; height: 30px; color: #fff; }
.marca b { display: block; font-size: 13px; letter-spacing: 2px; font-weight: 700; color: #FFFFFF; line-height: 1.1; }
.marca span { display: block; font-size: 9px; letter-spacing: 2px; color: #FFFFFF; font-weight: 700; opacity: .8; }
nav { margin-left: auto; margin-right: auto; display: flex; gap: 4px; }
nav a { color: #888888; text-decoration: none; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 12px; transition: color .25s; }
nav a:hover { color: #FFFFFF; }
.origen { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #FFFFFF;
  padding: 8px 14px; background: #111111; border: 1px solid #222222; border-radius: 999px; }
.bandera { font-size: 14px; line-height: 1; }
.menu { display: inline-grid; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
.menu span { width: 18px; height: 1.5px; background: var(--tenue); display: block; }

/* ── La gran sala (puntos 5-7, portada de referencia): titular, dos arcos de neon, cerebro entre ellos, franja ── */
.gran-sala { min-height: 100vh; display: grid; grid-template-columns: 1fr minmax(240px, 28vw) 1fr; grid-template-rows: auto 1fr auto;
  grid-template-areas: "titular titular titular" "pro nucleo factory" "franja franja franja";
  align-items: end; gap: 0 clamp(10px, 2vw, 30px); padding: 96px clamp(16px, 4vw, 70px) 16px; }
.titular { grid-area: titular; text-align: center; padding-bottom: 6px; }
.titular .bienvenida { display: block; font-size: 11px; letter-spacing: .5em; color: #00F0FF; margin-bottom: 10px; }
.titular h1 { margin: 0; font-size: clamp(24px, 3vw, 46px); letter-spacing: .06em; font-weight: 900; text-transform: uppercase; color: #FFFFFF; line-height: 1.05;
  text-shadow: 0 0 24px rgba(255,255,255,.35), 0 0 60px rgba(var(--cian-rgb),.25), 0 0 60px rgba(var(--naranja-rgb),.2); }
.titular .lema { display: block; margin-top: 8px; font-size: clamp(12px, 1.1vw, 16px); letter-spacing: .3em; color: #CCCCCC; font-weight: 600; }
.titular p { margin: 12px auto 0; max-width: 600px; font-size: clamp(12px, .95vw, 14px); color: #888888; line-height: 1.6; font-weight: 400; }
.nucleo { grid-area: nucleo; position: relative; min-height: 56vh; }
.logo-nucleo { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; padding: 26px 34px;
  background: radial-gradient(closest-side, rgba(2,4,10,.85), rgba(2,4,10,.45) 60%, transparent); filter: drop-shadow(0 0 10px rgba(255,255,255,.7)); }
.logo-nucleo .tp { display: block; font-size: clamp(36px, 4.4vw, 64px); font-weight: 800; font-style: italic; letter-spacing: -.06em; color: #fff; line-height: 1; }
.logo-nucleo .nombre { display: block; font-size: clamp(14px, 1.5vw, 22px); font-weight: 600; color: #fff; margin-top: 6px; letter-spacing: .02em; }
.logo-nucleo .apellido { display: block; font-size: 9px; letter-spacing: .5em; color: var(--blanco-frio); margin-top: 3px; }

/* El arco: marco de neon con el texto dentro, reflejo en el suelo. */
.puerta { position: relative; display: block; text-decoration: none; color: inherit; width: min(100%, 400px, 40vh); justify-self: center; aspect-ratio: 0.64; max-height: 62vh;
  transition: transform .7s cubic-bezier(.2,.8,.3,1), filter .7s; }
.puerta.pro { grid-area: pro; --c1: #00F0FF; --c2: #00F0FF; --c3: 0,240,255; }
.puerta.factory { grid-area: factory; --c1: #FF6600; --c2: #FF6600; --c3: 255,102,0; }
.puerta .arco { position: absolute; inset: 0; border-radius: 50% 50% 4px 4px / 34% 34% 4px 4px; padding: clamp(6px, .9vw, 12px);
  border: 1px solid rgba(var(--c3), .55); background: rgba(5,5,5,.6);
  box-shadow: 0 0 50px rgba(var(--c3), .25), inset 0 0 40px rgba(var(--c3), .12); }
/* Tubo de luz perimetral: arco de plasma que recorre el marco en bucle. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.puerta .tubo { position: absolute; inset: -3px; border-radius: 50% 50% 6px 6px / 34% 34% 6px 6px; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--ang), transparent 0 55%, rgba(var(--c3), .5) 68%, var(--c2) 78%, #ffffff 82%, var(--c2) 86%, rgba(var(--c3), .5) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px var(--c2)) drop-shadow(0 0 14px rgba(var(--c3), .8));
  animation: tubo-luz 6s linear infinite; }
.puerta.factory .tubo { animation-delay: -3s; }
@keyframes tubo-luz { to { --ang: 360deg; } }
.puerta .interior { height: 100%; border-radius: 50% 50% 3px 3px / 34% 34% 3px 3px; border: 1px solid rgba(var(--c3), .55);
  background: radial-gradient(120% 80% at 50% 100%, rgba(var(--c3), .18), transparent 60%), linear-gradient(180deg, rgba(var(--c3), .08), rgba(5,5,5,.4) 60%, rgba(var(--c3), .10));
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16% 10% 9%; gap: 0; }
/* Reflejo del arco en el suelo espejo. */
.puerta::after { content: ""; position: absolute; left: 6%; right: 6%; top: 100%; height: 34%; border-radius: 0 0 50% 50% / 0 0 60% 60%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(var(--c3), .55), rgba(var(--c3), .12) 55%, transparent 80%); filter: blur(14px); opacity: .8; pointer-events: none; }
.puerta:hover { transform: translateY(-6px); }
.puerta:hover .arco { box-shadow: 0 0 70px rgba(var(--c3), .4), inset 0 0 50px rgba(var(--c3), .18); }
.puerta h3 { margin: 0; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: .06em; font-weight: 700; color: #fff; line-height: 1.15;
  text-shadow: 0 0 14px rgba(var(--c3), .9); }
.puerta .sub { margin: 8px 0 0; font-size: clamp(9px, .8vw, 11px); letter-spacing: .22em; color: var(--c2); text-shadow: 0 0 10px rgba(var(--c3), .8); }
.puerta .icono { width: clamp(46px, 4.6vw, 66px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--c2); display: grid; place-items: center; margin: clamp(14px, 2.2vh, 26px) 0;
  color: var(--c2); box-shadow: 0 0 18px rgba(var(--c3), .6), inset 0 0 14px rgba(var(--c3), .3); }
.puerta .icono svg { width: 52%; height: 52%; }
.puerta .desc { margin: 0; font-size: clamp(11px, 1vw, 14px); color: #FFFFFF; line-height: 1.5; font-weight: 400; }
.puerta .etiquetas { margin: clamp(12px, 2vh, 22px) 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.puerta .etiquetas span { font-size: clamp(8px, .68vw, 10px); letter-spacing: .14em; padding: 4px 8px; border-radius: 999px; background: rgba(5,5,5,.75); border: 1px solid var(--c2); color: var(--c2); }
.puerta .boton { margin-top: clamp(14px, 2.4vh, 26px); display: inline-flex; align-items: center; gap: 18px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--c2);
  font-size: clamp(9px, .75vw, 11px); letter-spacing: .18em; font-weight: 600; color: #fff; background: rgba(5,5,5,.6);
  box-shadow: 0 0 12px rgba(var(--c3), .6), inset 0 0 10px rgba(var(--c3), .15); transition: background .3s, box-shadow .3s, transform .3s; }
.puerta .boton i { font-style: normal; font-size: 14px; color: var(--c2); transition: transform .3s; }
.puerta:hover .boton { background: rgba(var(--c3), .2); box-shadow: 0 0 24px rgba(var(--c3), .9), inset 0 0 14px rgba(var(--c3), .25); transform: translateY(-1px); }
.puerta:hover .boton i { transform: translateX(4px); }

.franja { grid-area: franja; text-align: center; margin-top: clamp(14px, 3vh, 30px); padding-top: 18px; position: relative; }
.franja::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); }
.franja b { display: inline-block; padding: 10px 34px; font-size: clamp(11px, 1.05vw, 15px); letter-spacing: .3em; font-weight: 600; color: #FFFFFF; white-space: pre; }
.franja span { display: block; margin-top: 8px; font-family: var(--mono); font-size: clamp(9px, .8vw, 11px); letter-spacing: .18em; color: #666666; }
.franja .explorar { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; font-size: 9px; letter-spacing: .4em; color: #888888; text-decoration: none; transition: color .3s; }
.franja .explorar:hover { color: #fff; }
.franja .explorar i { width: 34px; height: 34px; border: 1px solid #444; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; animation: flecha 1.8s ease-in-out infinite; }
@keyframes flecha { 50% { transform: translateY(5px); border-color: #888; } }

/* ── Salas (punto 10) ── */
.sala { min-height: 92vh; display: grid; align-items: center; padding: clamp(60px, 10vw, 140px) clamp(16px, 5vw, 80px); }
.sala .num { font-size: 11px; letter-spacing: .5em; color: var(--cian); margin-bottom: 14px; }
.sala:nth-child(even) .num { color: var(--ambar); }
.sala h2 { font-size: clamp(38px, 7vw, 110px); line-height: .95; margin: 0 0 18px; letter-spacing: -.035em; font-weight: 700; color: #fff; max-width: 12ch; }
.sala .sub { font-size: clamp(16px, 1.7vw, 22px); color: var(--blanco-frio); margin: 0 0 14px; font-weight: 300; }
.sala p.texto { color: var(--tenue); max-width: 58ch; margin: 0; font-size: 16px; font-weight: 300; }
.sala .tarjeta { max-width: 640px; padding: clamp(24px, 3vw, 40px); border-radius: var(--radio); border: 1px solid var(--vidrio-borde);
  background: linear-gradient(170deg, rgba(5,9,26,.72), rgba(2,4,10,.55)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.sala.derecha { justify-items: end; }
.aparece { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.8,.3,1); }
.aparece.visto { opacity: 1; transform: none; }

/* ── Arquitectura holografica (punto 11) ── */
.arquitectura { padding: clamp(70px, 10vw, 140px) clamp(16px, 5vw, 80px); text-align: center; }
.holo { display: grid; gap: 0; max-width: 520px; margin: 40px auto 0; position: relative; }
.holo::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--cian), var(--ambar)); opacity: .5; }
.nodo { position: relative; margin: 0 auto; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--vidrio-borde); background: rgba(5,9,26,.7);
  font-size: 11px; letter-spacing: .32em; color: var(--blanco-frio); backdrop-filter: blur(10px); transition: border-color .4s, box-shadow .4s, transform .4s; }
.nodo + .nodo { margin-top: 18px; }
.nodo.activo { border-color: var(--vidrio-viva); box-shadow: 0 0 30px -8px var(--cian); transform: scale(1.04); }
.nodo::after { content: ""; position: absolute; left: 50%; bottom: -19px; width: 5px; height: 5px; border-radius: 50%; background: var(--cian); transform: translateX(-50%); box-shadow: 0 0 10px var(--cian); }
.nodo:last-child::after { display: none; }

/* ── Demostracion real (punto 12) ── */
.pruebas { padding: clamp(70px, 10vw, 140px) clamp(16px, 5vw, 80px); }
.pruebas h2, .arquitectura h2, .soberania h2 { font-size: clamp(34px, 5.5vw, 78px); line-height: 1; margin: 0 0 18px; letter-spacing: -.03em; font-weight: 700; color: #fff; }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; margin-top: 40px; border: 1px solid var(--vidrio-borde); border-radius: var(--radio); overflow: hidden; }
.metrica { padding: 30px 26px; background: rgba(255,255,255,.025); backdrop-filter: blur(14px); position: relative; }
.metrica b { display: block; font-size: clamp(36px, 4.6vw, 62px); font-weight: 600; letter-spacing: -.03em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.metrica b small { font-size: .45em; color: var(--tenue); margin-left: 6px; font-weight: 400; }
.metrica .et { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--apagado); }
.metrica .nota { display: block; margin-top: 8px; font-size: 13px; color: var(--tenue); font-weight: 300; }
.metrica.validacion b { color: var(--tenue); }
.metrica .sello { position: absolute; top: 14px; right: 14px; font-size: 9.5px; letter-spacing: .3em; color: var(--ambar); border: 1px solid rgba(255,181,71,.4); border-radius: 999px; padding: 4px 9px; }

/* ── Soberania (punto 13) ── */
.soberania { padding: clamp(70px, 10vw, 140px) clamp(16px, 5vw, 80px); text-align: center; }
.tejido { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; max-width: 980px; margin: 40px auto 0; }
.tejido div { padding: 22px 12px; border: 1px solid var(--vidrio-borde); border-radius: 16px; font-size: 11px; letter-spacing: .3em; color: var(--blanco-frio);
  background: linear-gradient(170deg, rgba(47,123,255,.08), rgba(255,138,42,.06)); position: relative; }
.tejido div::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 12px; background: var(--vidrio-viva); }
.soberania .nucleo-tp { display: inline-block; margin-top: 12px; padding: 14px 30px; border-radius: 999px; border: 1px solid var(--vidrio-viva); font-size: 12px; letter-spacing: .4em; }

/* ── Frases de marca (punto 15), con moderacion ── */
.frase-marca { text-align: center; padding: clamp(50px, 8vw, 110px) 20px; }
.frase-marca p { margin: 0; font-size: clamp(22px, 3.4vw, 44px); line-height: 1.15; font-weight: 300; color: var(--tenue); }
.frase-marca p b { color: #fff; font-weight: 600; }

footer { padding: 40px clamp(16px, 4vw, 52px); border-top: 1px solid var(--vidrio-borde); color: var(--apagado); font-size: 12px; letter-spacing: .06em;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; background: rgba(2,4,10,.7); }
footer a { color: var(--tenue); text-decoration: none; }

/* ── Transicion de entrada por puerta (punto 20) ── */
#portal { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(circle at 50% 50%, var(--c, #fff) 0%, transparent 60%); }
#portal.activo { opacity: 1; }

/* ── Movil (punto 19): puertas en vertical, cerebro entre ellas ── */
@media (max-width: 900px) {
  .gran-sala { grid-template-columns: 1fr; grid-template-areas: "titular" "pro" "nucleo" "factory" "franja"; padding-top: 84px; gap: 22px 0; align-items: center; }
  .puerta { width: min(100%, 300px); aspect-ratio: 0.72; max-height: none; }
  .puerta::after { display: none; }
  .nucleo { min-height: 46vh; }
  nav { display: none; position: fixed; inset: 60px 12px auto; flex-direction: column; padding: 12px; border-radius: 16px; background: rgba(2,4,10,.92); border: 1px solid var(--vidrio-borde); }
  .menu-abierto nav { display: flex; }
  header { height: 64px; padding: 0 14px; gap: 10px; }
  .gran-sala { padding-top: 80px; }
  .marca b { font-size: 11px; }
  .origen { margin-left: auto; padding: 6px 10px; font-size: 9px; }
  .titular h1 { font-size: 22px; }
  .sala h2 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .puerta .tubo, .franja .explorar i { animation: none; }
  .aparece { opacity: 1; transform: none; transition: none; }
  #entrada { display: none; }
}