/* ============================================================
   Layer One Networks — sistema de diseño
   Concepto: instrumento de operaciones de red, no folleto.
   Estratos apilados · registro datasheet · escala de estado NOC.
   ============================================================ */

:root{
  /* --- estratos (frío, deliberado; no el negro cálido tintado) --- */
  --l0:        #080B0F;   /* base de página — "fibra apagada"         */
  --l1:        #0F151B;   /* banda de sección elevada                 */
  --l2:        #17212B;   /* inputs, mocks, capa superior             */
  --edge:      #263340;   /* hairlines, rieles de grilla, estructura  */
  --edge-soft: #1B2530;

  --ink:       #EAF0F4;   /* texto primario (blanco señal)            */
  --ink-dim:   #8B99A6;   /* texto secundario / etiquetas             */
  --ink-mute:  #5C6875;

  /* --- escala de estado (funcional, del monitoreo NOC) --- */
  --ok:    #33C08A;
  --warn:  #E3A63A;
  --alert: #E3304A;       /* crítico + color de marca / énfasis (logo) */
  --alert-deep: #C0263C;

  /* --- tipografía --- */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --step--1: .8125rem;
  --step-0:  1.0625rem;
  --step-1:  1.375rem;
  --step-2:  clamp(1.6rem, 1.15rem + 1.8vw, 2.45rem);
  --step-3:  clamp(2rem, 1.35rem + 2.6vw, 3.45rem);

  --rail-w: 88px;
  --head-h: 68px;
  --wrap:   1180px;

  --ease: cubic-bezier(.2,.6,.2,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--l0);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.6;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,dl,dd,figure,blockquote{ margin:0; }
img,svg{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
::selection{ background:var(--alert); color:#fff; }

h1,h2,h3{
  font-stretch:125%;
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.015em;
  overflow-wrap:break-word;
}

:focus-visible{
  outline:2px solid var(--alert);
  outline-offset:3px;
  border-radius:2px;
}

.u-visually-hidden{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- layout scaffolding ---------- */
.shell{ position:relative; }
.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.25rem, 5vw, 3rem);
}
.band{
  padding-block:clamp(3rem, 2.25rem + 3vw, 5.25rem);
  border-top:1px solid var(--edge-soft);
  background:var(--l0);
}
.band--raised{ background:var(--l1); }
#inicio{ border-top:0; }

section[id]{ scroll-margin-top:calc(var(--head-h) + 16px); }

/* ============================================================
   RIEL IZQUIERDO — índice de sección tipo regla de rack
   ============================================================ */
.rail{
  position:fixed; z-index:40;
  left:0; top:0; bottom:0; width:var(--rail-w);
  display:none;
  border-right:1px solid var(--edge-soft);
  background:var(--l0);
}
.rail ul{
  list-style:none; margin:0; padding:0;
  position:absolute; top:50%; left:0; right:0;
  transform:translateY(-50%);
}
.rail li{ position:relative; }
.rail a{
  display:flex; align-items:baseline; gap:.55rem;
  padding:.5rem 0 .5rem 20px;
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--ink-mute);
  transition:color .2s var(--ease);
}
.rail a b{ font-weight:500; font-size:.72rem; letter-spacing:.02em; }
.rail a span{
  opacity:0; transform:translateX(-4px);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  white-space:nowrap; text-transform:lowercase; letter-spacing:.04em;
}
.rail a::before{
  content:""; position:absolute; left:0; top:50%;
  width:8px; height:1px; background:var(--edge);
  transform:translateY(-50%); transition:background .2s var(--ease), width .2s var(--ease);
}
.rail a:hover{ color:var(--ink-dim); }
.rail a:hover span{ opacity:1; transform:none; }
.rail a.is-active{ color:var(--ink); }
.rail a.is-active::before{ background:var(--alert); width:13px; }
.rail a.is-active span{ opacity:1; transform:none; color:var(--ink-dim); }

/* progreso (reemplaza al riel en pantallas chicas) */
.progress{
  position:fixed; z-index:45; top:0; left:0; right:0; height:2px;
  background:var(--edge-soft);
}
.progress span{
  display:block; height:100%; width:0;
  background:var(--alert);
  transition:width .1s linear;
}

/* ============================================================
   HEADER
   ============================================================ */
.head{
  position:sticky; top:0; z-index:30;
  background:transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease);
  border-bottom:1px solid transparent;
}
.head.is-stuck{
  background:var(--l0);
  border-bottom-color:var(--edge-soft);
}
.head__in{
  display:flex; align-items:center; gap:1.5rem;
  height:var(--head-h);
}
.brand{ display:flex; align-items:center; gap:.5rem; flex:0 0 auto; }
.brand__mark{ width:32px; height:32px; flex:0 0 auto; display:block; }
.brand__name{
  font-stretch:125%; font-weight:700; letter-spacing:-.01em;
  font-size:.98rem;
}
.brand__name i{ font-style:normal; font-weight:400; color:var(--ink-dim); }

.nav{
  margin-left:auto;
  display:flex; align-items:center; gap:1.65rem;
}
.nav > a:not(.btn){
  font-size:.9rem; color:var(--ink-dim);
  transition:color .18s var(--ease);
}
.nav > a:not(.btn):hover{ color:var(--ink); }

.nav-toggle{ display:none; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  --bg:var(--alert); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.35rem;
  background:var(--bg); color:var(--fg);
  font-weight:600; font-size:.92rem; font-stretch:110%;
  border:1px solid var(--bg); border-radius:3px;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{ background:var(--alert-deep); border-color:var(--alert-deep); }
.btn:active{ transform:translateY(1px); }
.btn--ghost{
  --bg:transparent; --fg:var(--ink);
  border-color:var(--edge);
}
.btn--ghost:hover{ background:var(--l2); border-color:var(--ink-mute); }
.btn--sm{ padding:.5rem .95rem; font-size:.85rem; }
.btn--full{ width:100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-top:clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.hero__in{
  display:grid; gap:clamp(2.5rem, 5vw, 4rem);
  grid-template-columns:1fr;
  align-items:center;
}
.hero__title{
  font-size:var(--step-3);
  max-width:19ch;
}
.hero__lead{
  margin-top:1.5rem;
  max-width:52ch;
  color:var(--ink-dim);
  font-size:1.075rem;
}
.hero__cta{
  margin-top:2rem;
  display:flex; flex-wrap:wrap; gap:.85rem;
}

.facts{
  margin-top:2.75rem;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:0 1.5rem;
  border-top:1px solid var(--edge);
}
.facts > div{
  padding:1rem 0;
  border-bottom:1px solid var(--edge-soft);
}
.facts dt{
  font-stretch:120%; font-weight:700; font-size:1.05rem;
  letter-spacing:-.01em;
}
.facts dd{
  font-family:var(--mono); font-size:.72rem;
  color:var(--ink-mute); margin-top:.25rem; letter-spacing:.02em;
}

/* --- panel de topología (la única apuesta fuerte) --- */
.topo-panel{
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--alert) 6%, transparent), transparent 40%),
    var(--l1);
  border:1px solid var(--edge);
  border-radius:6px;
  padding:1rem 1rem 1.15rem;
}
.topo-panel figcaption{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:.85rem; margin-bottom:.25rem;
  border-bottom:1px solid var(--edge-soft);
}
.topo-panel__note{
  font-family:var(--mono); font-size:.68rem; color:var(--ink-mute);
}
.topo{ display:block; width:100%; height:auto; }

.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.01em;
  font-stretch:100%; font-weight:400;
  color:var(--ink-dim);
  border:1px solid var(--edge);
  padding:.25rem .55rem; border-radius:3px;
}
.tag--live{
  color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%, var(--edge));
  text-transform:uppercase; letter-spacing:.08em; font-size:.62rem;
}
.tag--live i{
  width:6px; height:6px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%, transparent);
  animation:beat 3s ease-in-out infinite;
}
@keyframes beat{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* topología: geometría de nodos y enlaces */
.e{ stroke:var(--ok); }
.e--100{ stroke-width:4; }
.e--10 { stroke-width:2.4; }
.e--1  { stroke-width:1.4; }
.e--warn{ stroke:var(--warn); }
.e--bkp{ stroke:var(--ink-mute); stroke-width:1.2; stroke-dasharray:3 5; opacity:.7; }

.n circle{
  fill:var(--l2); stroke:var(--ok); stroke-width:2;
}
.n--core circle{ stroke-width:2.5; }
.n--ix circle{ stroke:var(--ink-dim); }
.n--edge circle{ stroke:var(--ink-dim); }
.n text{
  fill:var(--ink-dim);
  font-family:var(--mono); font-size:11px;
  text-anchor:middle;
}
.n--core text{ fill:var(--ink); }
.n circle{ transition:none; }

/* entrada única y discreta: el panel de topología aparece al cargar */
.topo-panel{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.topo-panel.is-live{ opacity:1; transform:none; }

/* leyenda de estado */
.legend{
  display:flex; flex-wrap:wrap; gap:1rem 1.4rem;
  margin-top:1rem; padding-top:.9rem;
  border-top:1px solid var(--edge-soft);
}
.legend span{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.68rem; color:var(--ink-dim);
  letter-spacing:.02em;
}
.legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; }
.legend__bkp{ background:var(--ink-mute); }
.legend--sm{ gap:.7rem 1rem; }
.legend--sm span{ font-size:.64rem; }

/* ============================================================
   SECCIÓN — título
   ============================================================ */
.sec-title{
  font-size:var(--step-2);
  margin-bottom:2.5rem;
  max-width:22ch;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem;
}
.sec-title .tag{ flex:0 0 auto; }

/* ============================================================
   BLOQUE DE DOS COLUMNAS (nosotros / recursos)
   ============================================================ */
.two{
  display:grid; gap:clamp(1.75rem, 4vw, 3.5rem);
  grid-template-columns:1fr;
}
.two__head h2{ font-size:var(--step-2); max-width:14ch; }
.two__sub{ margin-top:1.1rem; color:var(--ink-dim); max-width:44ch; }
.two__body p + p{ margin-top:1.1rem; }
.two__body{ color:var(--ink-dim); max-width:60ch; }

.pull{
  margin-top:1.75rem;
  padding-left:1.1rem;
  border-left:2px solid var(--alert);
  font-stretch:115%; font-weight:600; font-size:1.2rem;
  color:var(--ink); line-height:1.35;
}

/* ============================================================
   SPEC — filas tipo datasheet (reemplaza a las cards)
   ============================================================ */
.spec{ border-top:1px solid var(--edge); }
.spec__row{
  display:grid; grid-template-columns:1fr;
  gap:.4rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--edge-soft);
}
.spec__row dt{
  font-stretch:115%; font-weight:700; font-size:1.075rem;
  letter-spacing:-.01em;
}
.spec__row dd{ color:var(--ink-dim); max-width:56ch; }
.spec--tight .spec__row{ padding:1.15rem 0; }

.spec__tag{
  display:inline-block; margin-left:.6rem;
  font-family:var(--mono); font-weight:400; font-size:.68rem;
  letter-spacing:.01em;
  color:var(--ink-mute);
  border:1px solid var(--edge-soft); border-radius:3px;
  padding:.12rem .42rem; vertical-align:middle;
}

/* ============================================================
   PRODUCTO (bot / mapas) — copy + mock
   ============================================================ */
.product{
  display:grid; gap:clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
.product__copy > p{ color:var(--ink-dim); max-width:52ch; }
.product__copy .spec{ margin-top:1.75rem; }
.product__copy .btn{ margin-top:1.9rem; }

/* --- mock de teléfono / WhatsApp --- */
.phone{
  background:var(--l2);
  border:1px solid var(--edge);
  border-radius:14px;
  overflow:hidden;
  max-width:360px;
  margin-inline:auto;
}
.phone__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1rem;
  background:var(--l1);
  border-bottom:1px solid var(--edge-soft);
}
.phone__who{ font-weight:600; font-size:.9rem; }
.phone__state{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--mono); font-size:.65rem; color:var(--ok);
}
.phone__state i{ width:6px; height:6px; border-radius:50%; background:var(--ok); }
.phone__chat{ padding:1rem; display:flex; flex-direction:column; gap:.7rem; }
.msg{
  font-size:.84rem; line-height:1.5;
  padding:.6rem .75rem; border-radius:10px;
  max-width:88%; position:relative;
}
.msg--in{ background:var(--l1); border:1px solid var(--edge-soft); align-self:flex-start; border-bottom-left-radius:3px; }
.msg--out{
  background:color-mix(in srgb,var(--alert) 22%, var(--l1));
  border:1px solid color-mix(in srgb,var(--alert) 30%, var(--edge));
  align-self:flex-end; border-bottom-right-radius:3px;
  min-width:2.5rem;
}
.msg__t{
  display:block; margin-top:.3rem;
  font-family:var(--mono); font-size:.6rem; color:var(--ink-mute);
}
.phone__input{
  display:flex; align-items:center; justify-content:space-between;
  margin:0 1rem 1rem; padding:.6rem .8rem;
  background:var(--l1); border:1px solid var(--edge-soft); border-radius:20px;
  font-size:.8rem; color:var(--ink-mute);
}
.phone__input i{
  width:24px; height:24px; border-radius:50%; background:var(--alert);
  flex:0 0 auto;
}


/* --- mock de panel NOC --- */
.noc{
  background:var(--l2);
  border:1px solid var(--edge);
  border-radius:8px;
  overflow:hidden;
}
.noc__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .95rem;
  background:var(--l1);
  border-bottom:1px solid var(--edge-soft);
  font-family:var(--mono); font-size:.72rem; color:var(--ink-dim);
}
.noc__stats{
  display:flex; gap:1.25rem; flex-wrap:wrap;
  padding:.7rem .95rem;
  border-bottom:1px solid var(--edge-soft);
  font-family:var(--mono); font-size:.7rem; color:var(--ink-mute);
}
.noc__stats b{ color:var(--ink-dim); font-weight:500; }
.noc__stats b.is-warn{ color:var(--warn); }
.noc__map{ display:block; width:100%; height:auto; padding:1.25rem 1rem .5rem; }
.noc__map .e{ stroke-width:2.4; }
.noc__map .e--100{ stroke-width:3.4; }
.noc__map .e--1{ stroke-width:1.4; }
.noc__nodes circle{ fill:var(--l2); stroke:var(--ok); stroke-width:2; }
.noc__nodes circle.is-warn{ stroke:var(--warn); }
.noc .legend{ margin:0; padding:.6rem .95rem .9rem; border-top:1px solid var(--edge-soft); }

/* ============================================================
   VENDORS
   ============================================================ */
.vendors{
  list-style:none; margin:0 0 3rem; padding:1.5rem 0;
  display:flex; flex-wrap:wrap; gap:1.75rem 2.75rem;
  border-block:1px solid var(--edge);
}
.vendors li{
  font-stretch:115%; font-weight:600; font-size:1.05rem;
  letter-spacing:.01em;
  color:var(--ink-mute);
  transition:color .18s var(--ease);
}
.vendors li:hover{ color:var(--ink-dim); }

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{
  display:grid; gap:clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns:1fr;
}
.contact__intro h2{ font-size:var(--step-2); max-width:12ch; }
.contact__intro > p{ margin-top:1.2rem; color:var(--ink-dim); max-width:44ch; }
.dir{
  list-style:none; margin:2rem 0 0; padding:0;
  border-top:1px solid var(--edge);
}
.dir li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem;
  padding:.85rem 0; border-bottom:1px solid var(--edge-soft);
}
.dir span{
  font-family:var(--mono); font-size:.75rem;
  color:var(--ink-mute);
  flex:0 0 8.5rem;
}
.dir a{
  font-family:var(--mono); font-size:.9rem; color:var(--ink);
  transition:color .18s var(--ease);
}
.dir a:hover{ color:var(--alert); }

.form__grid{
  display:grid; grid-template-columns:1fr; gap:1.1rem;
  margin-bottom:1.1rem;
}
.field{ display:flex; flex-direction:column; gap:.45rem; }
.field span{
  font-size:.82rem; color:var(--ink-dim);
}
.field span b{ color:var(--alert); font-weight:400; }
.field input,
.field textarea{
  font:inherit; font-size:.95rem;
  color:var(--ink);
  background:var(--l2);
  border:1px solid var(--edge);
  border-radius:3px;
  padding:.7rem .8rem;
  transition:border-color .18s var(--ease), background .18s var(--ease);
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:var(--ink-mute); }
.field input:focus,
.field textarea:focus{
  outline:none; border-color:var(--alert);
  background:color-mix(in srgb,var(--alert) 5%, var(--l2));
}
.form .btn{ margin-top:1.2rem; }
.form__note{
  margin-top:.9rem; font-size:.85rem; color:var(--ok);
}
.form__note.is-err{ color:var(--warn); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  border-top:1px solid var(--edge);
  background:var(--l0);
  padding-block:3rem;
}
.foot__in{
  display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:baseline;
}
.foot__brand{ display:flex; gap:.6rem; align-items:flex-start; }
.foot__brand > img{ flex:0 0 auto; width:30px; height:30px; margin-top:.15rem; }
.foot__in p{ color:var(--ink-mute); font-size:.85rem; margin-top:.4rem; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1rem 1.4rem; }
.foot__nav a{ font-size:.85rem; color:var(--ink-dim); }
.foot__nav a:hover{ color:var(--ink); }
.foot__copy{ margin-left:auto; font-family:var(--mono); font-size:.72rem; color:var(--ink-mute)!important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:640px){
  .form__grid{ grid-template-columns:1fr 1fr; }
  .facts{ grid-template-columns:repeat(4,1fr); }
  .facts > div{ padding-right:0; }
}

@media (min-width:860px){
  .two{ grid-template-columns:minmax(0,19rem) 1fr; align-items:start; column-gap:clamp(2rem,4vw,3.5rem); }
  .two__head{ position:sticky; top:calc(var(--head-h) + 1.75rem); align-self:start; }
  .spec__row{ grid-template-columns:minmax(0,18rem) 1fr; gap:2rem; align-items:baseline; }
  .product .spec__row{ grid-template-columns:1fr; gap:.4rem; }

  .product{ grid-template-columns:1fr minmax(0,20rem); align-items:start; }
  .product--rev{ grid-template-columns:minmax(0,24rem) 1fr; }
  .product--rev .product__copy{ order:2; }
  .product--rev .noc{ order:1; }
  .product .phone,
  .product .noc{ position:sticky; top:calc(var(--head-h) + 1.75rem); }

  .contact{ grid-template-columns:1fr 1fr; align-items:start; }
  .hero__in{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1180px){
  .rail{ display:block; }
  .progress{ display:none; }
  .shell{ padding-left:var(--rail-w); }
}

/* --- nav colapsable en pantallas chicas --- */
@media (max-width:859px){
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    margin-left:auto;
    width:40px; height:40px; padding:8px;
    background:transparent; border:1px solid var(--edge); border-radius:3px;
  }
  .nav-toggle span{
    display:block; height:2px; width:100%; background:var(--ink);
    transition:transform .2s var(--ease), opacity .2s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .nav{
    position:absolute; left:0; right:0; top:100%;
    margin:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--l1);
    border-bottom:1px solid var(--edge);
    padding:.5rem clamp(1.25rem,5vw,3rem) 1.25rem;
    clip-path:inset(0 0 100% 0); pointer-events:none;
    transition:clip-path .25s var(--ease);
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
  .nav > a:not(.btn){ padding:.85rem 0; border-bottom:1px solid var(--edge-soft); font-size:.95rem; }
  .nav .btn{ margin-top:1rem; }
  .head.is-stuck .nav{ background:var(--l1); }
}

/* ============================================================
   MOTION — respetar preferencia del sistema
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .topo-panel{ opacity:1; transform:none; }
}