:root{
  --vino:#7a1e2e;
  --vino-claro:#a03a4d;
  --naranja:#e8813a;
  --ambar:#f2ab6b;
  --tierra:#8b4a3b;
  --verde:#7d9b63;
  --crema:#efe3d0;
  --humo:#c8b7a6;
  --fondo:#0c0709;
  --panel:#150c10;
  --panel-2:#1c1117;
  --linea:rgba(232,129,58,.3);
  --linea-suave:rgba(239,227,208,.1);
  --linea-verde:rgba(125,155,99,.42);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
}

body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background-color:var(--fondo);
  background-image:
    radial-gradient(1000px 620px at 88% -10%,rgba(232,129,58,.15),transparent 62%),
    radial-gradient(820px 640px at -12% 42%,rgba(122,30,46,.34),transparent 60%),
    radial-gradient(900px 640px at 55% 115%,rgba(125,155,99,.13),transparent 62%);
  background-attachment:fixed;
  color:var(--humo);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(239,227,208,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(239,227,208,.045) 1px,transparent 1px);
  background-size:46px 46px;
}

::selection{
  background:var(--naranja);
  color:#170b07;
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--fondo); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--vino),var(--naranja));
  border:2px solid var(--fondo);
  border-radius:8px;
}

h1,h2,h3{
  font-family:'Orbitron',sans-serif;
  color:var(--crema);
}

a:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:3px;
}

.barra-lateral{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:250px;
  z-index:1035;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
  padding:1.6rem 1.15rem;
  background:linear-gradient(180deg,rgba(21,12,16,.97),rgba(12,7,9,.97));
  border-right:1px solid var(--linea);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.marca{
  display:flex;
  align-items:center;
  gap:.8rem;
  text-decoration:none;
  flex-shrink:0;
}

.marca-logo{
  width:52px;
  height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--naranja);
  box-shadow:0 0 20px rgba(232,129,58,.4);
}

.marca-texto{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.marca-nombre{
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.14em;
  color:var(--crema);
  white-space:nowrap;
}

.marca-nombre b{
  color:var(--naranja);
  font-weight:700;
}

.marca-estado{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  letter-spacing:.24em;
  color:var(--verde);
}

.pulso{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--verde);
  flex-shrink:0;
  animation:latido 2.2s ease-in-out infinite;
}

@keyframes latido{
  0%,100%{ box-shadow:0 0 0 0 rgba(125,155,99,.55); }
  50%{ box-shadow:0 0 0 7px rgba(125,155,99,0); }
}

.nav-lateral{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.nav-lateral a{
  display:flex;
  align-items:center;
  gap:.8rem;
  padding:.65rem .9rem;
  text-decoration:none;
  color:var(--humo);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.06em;
  border:1px solid transparent;
  border-left:2px solid transparent;
  transition:color .3s ease,background .3s ease,border-color .3s ease;
}

.nav-lateral a i{
  font-size:1.05rem;
  color:#9a7f68;
  transition:color .3s ease,text-shadow .3s ease;
}

.nav-lateral a:hover,
.nav-lateral a.activo{
  color:var(--crema);
  background:linear-gradient(90deg,rgba(232,129,58,.14),transparent 85%);
  border-color:rgba(232,129,58,.28);
  border-left-color:var(--naranja);
}

.nav-lateral a:hover i,
.nav-lateral a.activo i{
  color:var(--naranja);
  text-shadow:0 0 12px rgba(232,129,58,.7);
}

.conexiones{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding-top:1.3rem;
  border-top:1px solid var(--linea-suave);
}

.conexion{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.6rem .8rem;
  text-decoration:none;
  color:var(--crema);
  border:1px solid var(--linea);
  background:rgba(232,129,58,.06);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}

.conexion i{
  font-size:1rem;
  color:var(--naranja);
  flex-shrink:0;
}

.conexion span{
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  letter-spacing:.03em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.conexion:hover{
  color:#fff;
  background:rgba(232,129,58,.14);
  border-color:var(--naranja);
  box-shadow:0 0 18px rgba(232,129,58,.28);
  transform:translateX(3px);
}

.principal{ padding-top:74px; }

@media (min-width:992px){
  .principal{
    margin-left:250px;
    padding-top:0;
  }
}

.hero{
  position:relative;
  padding:3.2rem 0 3.4rem;
  overflow:hidden;
}

@media (min-width:992px){
  .hero{ padding:5.4rem 0 4.2rem; }
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.hero::before{
  top:-150px;
  right:-150px;
  width:470px;
  height:470px;
  border:1px solid rgba(232,129,58,.18);
}

.hero::after{
  top:-70px;
  right:-70px;
  width:300px;
  height:300px;
  border:1px dashed rgba(125,155,99,.28);
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem;
  letter-spacing:.34em;
  color:var(--naranja);
  margin-bottom:1.5rem;
}

.kicker::before{
  content:"";
  width:40px;
  height:1px;
  background:linear-gradient(90deg,var(--naranja),transparent);
}

.titulo-hero{
  font-size:clamp(2.6rem,6vw,4.7rem);
  font-weight:900;
  line-height:1.03;
  letter-spacing:.03em;
  margin-bottom:1.3rem;
}

.titulo-hero .acento{
  color:transparent;
  background:linear-gradient(95deg,var(--naranja) 15%,var(--ambar) 60%,var(--vino-claro));
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 24px rgba(232,129,58,.35));
}

.tagline{
  font-size:clamp(1.05rem,2vw,1.32rem);
  font-weight:500;
  color:var(--crema);
  max-width:36rem;
  margin-bottom:2.1rem;
}

.tagline .codigo{
  font-family:'JetBrains Mono',monospace;
  color:var(--naranja);
  margin-right:.45rem;
}

.btn-futuro{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.55rem;
  border-radius:.55rem;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.03em;
  text-decoration:none;
  color:#1b0c07;
  background:linear-gradient(135deg,var(--ambar),var(--naranja) 55%,#c9652a);
  border:1px solid rgba(232,129,58,.6);
  box-shadow:0 14px 34px -12px rgba(232,129,58,.55);
  transition:transform .3s ease,box-shadow .3s ease;
}

.btn-futuro:hover{
  color:#1b0c07;
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(232,129,58,.4),0 18px 42px -14px rgba(232,129,58,.6);
}

.btn-contorno{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.55rem;
  border-radius:.55rem;
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--crema);
  border:1px solid var(--linea);
  background:rgba(21,12,16,.5);
  transition:all .3s ease;
}

.btn-contorno:hover{
  color:var(--crema);
  border-color:var(--naranja);
  background:rgba(232,129,58,.08);
  box-shadow:0 0 24px rgba(232,129,58,.22);
  transform:translateY(-2px);
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:2.3rem;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.42rem .85rem;
  border-radius:2rem;
  border:1px solid var(--linea-verde);
  background:rgba(125,155,99,.08);
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.2em;
  color:var(--verde);
  white-space:nowrap;
}

.chip::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--verde);
  box-shadow:0 0 8px var(--verde);
}

.marco-hud{
  position:relative;
  margin:0;
  padding:10px;
  border:1px solid var(--linea);
  background:linear-gradient(160deg,rgba(232,129,58,.1),rgba(122,30,46,.18));
}

.marco-hud::before,
.marco-hud::after{
  content:"";
  position:absolute;
  width:28px;
  height:28px;
  border:2px solid var(--naranja);
  pointer-events:none;
}

.marco-hud::before{
  top:-2px;
  left:-2px;
  border-right:0;
  border-bottom:0;
}

.marco-hud::after{
  bottom:-2px;
  right:-2px;
  border-left:0;
  border-top:0;
}

.marco-cuerpo{
  position:relative;
  display:block;
  overflow:hidden;
}

.marco-cuerpo img{
  display:block;
  width:100%;
  object-fit:cover;
  filter:saturate(1.06) contrast(1.04);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}

.marco-hud:hover .marco-cuerpo img{
  transform:scale(1.04);
}

.hud-alta{ aspect-ratio:4/5; }
.hud-retrato{ aspect-ratio:3/4; }
.hud-paisaje{ aspect-ratio:16/10; }

.marco-pie{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-top:.7rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.58rem;
  letter-spacing:.2em;
  color:#a89781;
}

.marco-pie b{
  color:var(--naranja);
  font-weight:600;
}

.marco-verde{
  border-color:var(--linea-verde);
  background:linear-gradient(160deg,rgba(125,155,99,.12),rgba(122,30,46,.14));
}

.marco-verde::before,
.marco-verde::after{
  border-color:var(--verde);
}

.marco-verde .marco-pie b{
  color:var(--verde);
}

.flotante{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .8rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.18em;
  color:var(--crema);
  background:rgba(12,7,9,.9);
  border:1px solid var(--linea);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  white-space:nowrap;
}

.flotante b{
  color:var(--naranja);
  font-weight:600;
}

.flotante-1{
  top:-.9rem;
  right:-.9rem;
}

.flotante-2{
  bottom:1rem;
  left:1rem;
  border-left:2px solid var(--verde);
}

.cinta{
  position:relative;
  overflow:hidden;
  padding:.6rem 0;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
  background:rgba(21,12,16,.72);
}

.cinta::before,
.cinta::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:110px;
  z-index:2;
  pointer-events:none;
}

.cinta::before{
  left:0;
  background:linear-gradient(90deg,var(--fondo),transparent);
}

.cinta::after{
  right:0;
  background:linear-gradient(270deg,var(--fondo),transparent);
}

.cinta-pista{
  display:flex;
  width:max-content;
  animation:desfile 32s linear infinite;
}

.cinta:hover .cinta-pista{
  animation-play-state:paused;
}

.cinta-grupo{
  display:flex;
  align-items:center;
  gap:2.6rem;
  padding-right:2.6rem;
}

.cinta-grupo span{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;
  letter-spacing:.3em;
  color:var(--humo);
  white-space:nowrap;
}

.cinta-grupo .sep{
  color:var(--naranja);
  font-size:.5rem;
}

@keyframes desfile{
  to{ transform:translateX(-50%); }
}

.seccion{
  padding:3.6rem 0;
  position:relative;
}

@media (min-width:992px){
  .seccion{ padding:5rem 0; }
}

.seccion-modulos{
  background:linear-gradient(180deg,rgba(21,12,16,.65),rgba(12,7,9,.25));
  border-top:1px solid var(--linea-suave);
  border-bottom:1px solid var(--linea-suave);
}

.cabecera-seccion{
  max-width:820px;
  margin-bottom:2.9rem;
}

.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.64rem;
  letter-spacing:.32em;
  color:var(--naranja);
}

.etiqueta::before{
  content:"";
  width:42px;
  height:1px;
  background:var(--naranja);
}

.titulo-seccion{
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  font-weight:700;
  letter-spacing:.04em;
  margin:1rem 0 0;
}

.texto-seccion p{
  font-size:1.02rem;
  line-height:1.9;
  color:var(--humo);
  margin-bottom:1.35rem;
}

.texto-seccion p:last-child{
  margin-bottom:0;
}

.texto-seccion strong{
  color:var(--crema);
  font-weight:600;
}

.capitular::first-letter{
  font-family:'Orbitron',sans-serif;
  float:left;
  font-size:3.3rem;
  line-height:.82;
  padding:.12rem .65rem .05rem 0;
  color:var(--naranja);
  text-shadow:0 0 18px rgba(232,129,58,.45);
}

.modulo{
  position:relative;
  border:1px solid var(--linea-suave);
  background:linear-gradient(150deg,rgba(28,17,23,.94),rgba(21,12,16,.88));
  margin-bottom:2.6rem;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}

.modulo:last-child{
  margin-bottom:0;
}

.modulo::before,
.modulo::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border:2px solid rgba(232,129,58,.6);
  z-index:3;
  pointer-events:none;
}

.modulo::before{
  top:-2px;
  right:-2px;
  border-left:0;
  border-bottom:0;
}

.modulo::after{
  bottom:-2px;
  left:-2px;
  border-right:0;
  border-top:0;
}

.modulo:hover{
  transform:translateY(-5px);
  border-color:rgba(232,129,58,.35);
  box-shadow:0 30px 70px -30px rgba(232,129,58,.32);
}

.modulo-figura{
  position:relative;
  height:100%;
  margin:0;
  overflow:hidden;
  aspect-ratio:16/10;
}

@media (min-width:992px){
  .modulo-figura{
    aspect-ratio:auto;
    min-height:340px;
  }
}

.modulo-figura img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.05);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}

.modulo:hover .modulo-figura img{
  transform:scale(1.05);
}

.modulo-figura::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(200deg,rgba(232,129,58,.14),rgba(12,7,9,.5));
  pointer-events:none;
}

.modulo-icono{
  position:absolute;
  top:1.1rem;
  left:1.1rem;
  z-index:2;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  font-size:1.2rem;
  color:var(--naranja);
  background:rgba(12,7,9,.88);
  border:1px solid var(--naranja);
  box-shadow:0 0 18px rgba(232,129,58,.4);
}

.modulo-estado{
  position:absolute;
  bottom:1.1rem;
  right:1.1rem;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.38rem .65rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.56rem;
  letter-spacing:.22em;
  color:var(--verde);
  background:rgba(12,7,9,.85);
  border:1px solid var(--linea-verde);
}

.modulo-cuerpo{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:2rem 2.2rem;
}

@media (max-width:991.98px){
  .modulo-cuerpo{ padding:1.6rem 1.35rem; }
}

.modulo-meta{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.28em;
  color:#a89781;
  margin-bottom:1.15rem;
}

.modulo-meta::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--naranja);
}

.modulo-titulo{
  font-size:1.28rem;
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.35;
  margin:0 0 1.35rem;
}

.modulo-titulo span{
  display:block;
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.05em;
  color:var(--ambar);
  margin-top:.5rem;
}

.modulo-cuerpo p{
  font-size:.97rem;
  line-height:1.85;
  color:var(--humo);
  margin-bottom:1.1rem;
}

.modulo-cuerpo p:last-child{
  margin-bottom:0;
}

@media (min-width:992px){
  .modulo--inverso .row{
    flex-direction:row-reverse;
  }
}

.panel-estilo{
  position:relative;
  border:1px solid var(--linea-verde);
  background:linear-gradient(150deg,rgba(34,42,26,.5),rgba(21,12,16,.92));
  padding:clamp(1.6rem,4vw,2.8rem);
}

.panel-estilo::before,
.panel-estilo::after{
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  border:2px solid var(--verde);
  pointer-events:none;
}

.panel-estilo::before{
  top:-2px;
  left:-2px;
  border-right:0;
  border-bottom:0;
}

.panel-estilo::after{
  bottom:-2px;
  right:-2px;
  border-left:0;
  border-top:0;
}

.protocolo{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  padding:0;
  margin:1.7rem 0 0;
}

.protocolo li{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .8rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;
  letter-spacing:.18em;
  color:var(--verde);
  border:1px solid var(--linea-verde);
  background:rgba(125,155,99,.08);
}

.protocolo li i{
  color:var(--verde);
}

.revelar{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s ease,transform .8s ease;
}

.revelar.visible{
  opacity:1;
  transform:none;
}

@media (max-width:991.98px){
  .barra-lateral{
    top:0;
    right:0;
    bottom:auto;
    width:auto;
    flex-direction:row;
    align-items:center;
    gap:.7rem;
    padding:.65rem .9rem;
    border-right:0;
    border-bottom:1px solid var(--linea);
  }
  .marca{ gap:.55rem; }
  .marca-logo{ width:40px; height:40px; }
  .marca-texto{ display:none; }
  .nav-lateral{
    flex-direction:row;
    margin-left:auto;
    gap:.35rem;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .nav-lateral::-webkit-scrollbar{ display:none; }
  .nav-lateral a{
    padding:.5rem .6rem;
    flex-shrink:0;
    border-left-width:1px;
  }
  .nav-lateral a:hover,
  .nav-lateral a.activo{
    border-color:rgba(232,129,58,.4);
  }
  .conexiones{
    margin:0;
    padding:0;
    border:0;
    flex-direction:row;
    gap:.35rem;
    flex-shrink:0;
  }
  .conexion{ padding:.5rem .55rem; }
  .conexion span{ display:none; }
  .conexion:hover{ transform:none; }
}

@media (max-width:575.98px){
  .flotante-1{
    top:.8rem;
    right:.8rem;
  }
  .modulo-titulo{
    font-size:1.12rem;
  }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .revelar{
    opacity:1;
    transform:none;
    transition:none;
  }
  .cinta-pista{ animation:none; }
  .pulso{ animation:none; }
}