/* ==========================================================================
   miguelangelpiquerastrenado.com — dirección visual «Cuadro de red»
   Sala técnica: azul profundo de rack, ámbar de LED, verde solo para estados.
   ========================================================================== */

@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/plex-sans-latin-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/plex-sans-latin-600.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/plex-sans-latin-700.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/plex-mono-latin-400.woff2") format("woff2");
}
@font-face{
  font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/plex-mono-latin-600.woff2") format("woff2");
}

:root{
  --bg:#0C1522; --bg-panel:#101D30; --bg-panel2:#0E1A2B;
  --linea:#20344B; --linea2:#182940;
  --tinta:#D9E4F0; --tenue:#8CA0B5; --apagado:#63788C;
  --ambar:#F2A93B; --ambar-vivo:#FFC66E; --verde:#37C97D; --rojo:#E5605A;
  --sans:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Cascadia Mono",monospace;
  --ancho:1080px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--tinta);
  font-family:var(--sans); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{background:var(--ambar); color:#1F1608}
:focus-visible{outline:2px solid var(--ambar); outline-offset:3px; border-radius:2px}
a{color:inherit}
.wrap{max-width:var(--ancho); margin:0 auto; padding:0 22px}

.saltar{
  position:absolute; left:-999px; top:10px; z-index:100;
  background:var(--ambar); color:#1F1608; font-family:var(--mono); font-size:13px;
  padding:10px 16px; border-radius:8px; text-decoration:none;
}
.saltar:focus{left:10px}

/* ---------- barra superior ---------- */
.barra{
  position:sticky; top:0; z-index:50;
  background:rgba(12,21,34,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea2);
}
.barra-nav{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding-top:13px; padding-bottom:13px; flex-wrap:wrap}
.marca{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.12em;
}
.marca-punto{width:8px; height:8px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 8px var(--verde)}
.rutas{display:flex; gap:20px; flex-wrap:wrap}
.rutas a{font-family:var(--mono); font-size:12px; color:var(--tenue);
  text-decoration:none; letter-spacing:.04em; padding:4px 0}
.rutas a:hover{color:var(--ambar)}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:120px 0 88px; border-bottom:1px solid var(--linea2);
  background:
    radial-gradient(1100px 480px at 78% -12%, rgba(242,169,59,.06), transparent 60%),
    var(--bg);
}
#red-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
          mask-image:linear-gradient(180deg,#000 55%,transparent)}
.hero-grid{position:relative; z-index:1; display:grid;
  grid-template-columns:1.45fr 1fr; gap:44px; align-items:center}

.chip{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--verde);
  border:1px solid var(--linea); border-radius:999px; padding:6px 13px;
  background:rgba(13,24,38,.72);
}
.chip i{width:7px; height:7px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 8px var(--verde)}
.chip-rojo{color:var(--rojo)}
.chip-rojo i{background:var(--rojo); box-shadow:0 0 8px var(--rojo)}

.titulo{
  font-size:clamp(38px,6.4vw,66px); line-height:1.03; font-weight:700;
  letter-spacing:-.018em; margin:18px 0; text-wrap:balance;
}
.titulo em{font-style:normal; color:var(--ambar)}
.lede{color:var(--tenue); font-size:17px; max-width:50ch; margin:0 0 26px}
.lede a{color:var(--tinta); text-decoration:none;
  border-bottom:1px solid rgba(242,169,59,.45)}
.lede a:hover{color:var(--ambar)}

.acciones{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.btn{
  display:inline-block; font-family:var(--mono); font-size:13.5px; font-weight:600;
  background:var(--ambar); color:#1F1608; text-decoration:none;
  padding:13px 20px; border-radius:8px;
}
.btn:hover{background:var(--ambar-vivo)}
.btn-ghost{font-family:var(--mono); font-size:13.5px; color:var(--ambar);
  text-decoration:none; padding:13px 4px}
.btn-ghost:hover{text-decoration:underline; text-underline-offset:4px}

/* panel de estado */
.panel{
  background:linear-gradient(180deg,#132238,var(--bg-panel));
  border:1px solid var(--linea); border-radius:12px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.panel-cab{
  display:flex; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--apagado);
  padding:12px 16px; border-bottom:1px solid var(--linea2);
}
.fila{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; border-top:1px solid rgba(255,255,255,.035)}
.fila:first-of-type{border-top:0}
.fila-nombre{font-size:14.5px; line-height:1.35}
.fila-nombre small{display:block; font-family:var(--mono); font-size:10.5px;
  color:var(--apagado); letter-spacing:.04em; margin-top:2px}
.estado{display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; color:var(--verde)}
.estado i{width:7px; height:7px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 7px var(--verde)}
.estado.ambar{color:var(--ambar)}
.estado.ambar i{background:var(--ambar); box-shadow:0 0 7px var(--ambar)}

/* ---------- secciones ---------- */
.seccion{padding:92px 0; border-bottom:1px solid var(--linea2); scroll-margin-top:70px}
.ruta{display:block; font-family:var(--mono); font-size:12px; color:var(--ambar);
  letter-spacing:.14em; margin-bottom:10px}
.seccion h2{font-size:clamp(26px,3.4vw,36px); margin:0 0 18px;
  letter-spacing:-.012em; text-wrap:balance}
.prosa p{max-width:68ch; color:var(--tenue); font-size:16.5px; margin:0 0 16px}
.prosa p:last-child{margin-bottom:0}
.prosa strong{color:var(--tinta); font-weight:600}

/* trayectoria */
.hitos{margin-top:36px}
.hito{position:relative; padding:0 0 40px 36px}
.hito::before{
  content:""; position:absolute; left:0; top:5px; width:12px; height:12px;
  border-radius:50%; border:2px solid var(--ambar); background:var(--bg);
  box-shadow:0 0 10px rgba(242,169,59,.35);
}
.hito::after{
  content:""; position:absolute; left:6px; top:24px; bottom:4px; width:2px;
  background:repeating-linear-gradient(180deg,var(--linea) 0 8px,transparent 8px 14px);
}
.hito:last-child{padding-bottom:0}
.hito:last-child::after{display:none}
.hito:last-child::before{border-color:var(--verde);
  box-shadow:0 0 10px rgba(55,201,125,.4)}
.hito .cuando{font-family:var(--mono); font-size:11.5px; color:var(--ambar);
  letter-spacing:.12em}
.hito h3{margin:6px 0 8px; font-size:20px}
.hito p{margin:0; color:var(--tenue); font-size:15.5px; max-width:62ch}

.cifras{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px}
.cifra{background:var(--bg-panel2); border:1px solid var(--linea);
  border-left:3px solid var(--ambar); border-radius:10px; padding:18px 20px}
.cifra b{display:block; font-size:30px; font-weight:700; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.cifra span{font-family:var(--mono); font-size:11px; color:var(--apagado);
  letter-spacing:.1em}

/* áreas */
.tarjetas{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px}
.tarjeta{
  background:var(--bg-panel2); border:1px solid var(--linea); border-radius:12px;
  padding:22px 24px; transition:border-color .18s ease, transform .18s ease;
}
.tarjeta:hover{border-color:rgba(242,169,59,.55); transform:translateY(-2px)}
.etiqueta{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--ambar)}
.tarjeta h3{margin:10px 0 8px; font-size:18.5px}
.tarjeta p{margin:0 0 14px; color:var(--tenue); font-size:14.5px}

/* contacto */
.contacto-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:36px}
.ficha{background:var(--bg-panel2); border:1px solid var(--linea); border-radius:12px;
  padding:24px 26px}
.ficha h3{margin:10px 0 8px; font-size:19px}
.ficha > p{margin:0 0 18px; color:var(--tenue); font-size:14.5px}
.ficha-filas{margin-top:6px}
.dato{display:flex; gap:16px; align-items:baseline; margin:0;
  padding:10px 0; border-top:1px solid var(--linea2)}
.dato:first-child{border-top:0}
.dato b{font-family:var(--mono); font-size:10.5px; font-weight:400;
  color:var(--apagado); letter-spacing:.12em; flex:0 0 44px}
.dato a{color:var(--tinta); text-decoration:none;
  border-bottom:1px solid rgba(242,169,59,.4)}
.dato a:hover{color:var(--ambar)}
.dato span{color:var(--tinta)}
.nota-humana{font-family:var(--mono); font-size:12px; color:var(--apagado);
  margin:24px 0 0}

/* 404 */
.n404{padding:130px 0 110px}

/* pie */
.pie{padding:30px 0 44px}
.pie-linea{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--apagado); font-size:13px}
.pie-nota{font-family:var(--mono); font-size:11.5px}

/* ---------- responsive ---------- */
@media (max-width:840px){
  .hero{padding:72px 0 64px}
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .panel{max-width:560px}
  .seccion{padding:64px 0}
  .tarjetas,.contacto-grid{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .rutas{gap:14px}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tarjeta{transition:none}
  .tarjeta:hover{transform:none}
}