/* ============================================================
   NICAS DESIGN — index.css
   ============================================================ */

/* ============================================================
   01 · HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;
  padding-block:140px 100px;
  overflow:hidden;
  isolation:isolate;
}
.hero__canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  z-index:-1;
  opacity:.55;
}
.hero__inner{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:4rem;
  align-items:center;
  width:100%;
}
.hero__content{display:flex;flex-direction:column;gap:1.5rem;max-width:640px}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  color:var(--tx-400);
}
.hero__eyebrow::before{
  content:"";display:block;width:24px;height:1px;background:var(--grad-brand);
}
.hero__title{
  font-size:var(--fs-display);
  line-height:1.05;
  letter-spacing:-.03em;
}
.hero__title .grad{display:inline-block}
.hero__lead{
  font-size:1.0625rem;
  color:var(--tx-300);
  max-width:52ch;
}
.hero__cta{
  display:flex;gap:.75rem;flex-wrap:wrap;
  margin-top:.5rem;
}

/* Stats */
.hero__stats{
  display:flex;gap:2.5rem;flex-wrap:wrap;
  margin-top:2rem;
  padding-top:1.75rem;
  border-top:1px solid var(--bd-1);
}
.hero__stat{display:flex;flex-direction:column;gap:.15rem}
.hero__stat-num{
  font-family:var(--font-display);
  font-size:1.75rem;font-weight:700;
  color:var(--tx-100);line-height:1;
}
.hero__stat-num .suf{color:var(--cyan);margin-left:2px}
.hero__stat-label{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-400);
}

/* Panel del sistema (lado derecho) */
.hero__panel{
  position:relative;
  perspective:1200px;
}
.hero__panel-inner{
  position:relative;
  transform-style:preserve-3d;
  transition:transform var(--dur-slow) var(--ease-out);
}

/* Ventana principal */
.sys-window{
  background:linear-gradient(180deg,rgba(16,20,28,.95),rgba(11,14,20,.95));
  border:1px solid var(--bd-1);
  border-radius:var(--radius);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), 0 0 60px -20px rgba(121,81,171,.25);
  overflow:hidden;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  position:relative;
}
.sys-window::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg,rgba(121,81,171,.5),transparent 40%,transparent 60%,rgba(53,177,230,.4));
  -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;
  pointer-events:none;
}
.sys-window__bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem 1rem;
  background:rgba(7,8,12,.6);
  border-bottom:1px solid var(--bd-1);
}
.sys-window__dots{display:flex;gap:.35rem}
.sys-window__dots span{
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-400);
}
.sys-window__dots span:nth-child(1){background:#3a2a2a}
.sys-window__dots span:nth-child(2){background:#3a3322}
.sys-window__dots span:nth-child(3){background:#22332a}
.sys-window__name{
  margin-left:.5rem;
  font-family:var(--font-mono);font-size:.7rem;
  color:var(--tx-400);letter-spacing:.06em;
}
.sys-window__badge{
  margin-left:auto;
  font-family:var(--font-mono);font-size:.65rem;
  color:var(--cyan);letter-spacing:.1em;
  display:inline-flex;align-items:center;gap:.35rem;
}
.sys-window__badge::before{
  content:"";display:block;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.85)}
}

.sys-window__body{
  display:grid;grid-template-columns:120px 1fr;
  min-height:300px;
}
.sys-side{
  padding:1rem .75rem;
  border-right:1px solid var(--bd-1);
  background:rgba(7,8,12,.4);
}
.sys-side__title{
  font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-400);margin-bottom:.75rem;
}
.sys-side ul{display:flex;flex-direction:column;gap:.25rem}
.sys-side li{
  font-size:.75rem;color:var(--tx-300);
  padding:.35rem .5rem;border-radius:6px;
  display:flex;align-items:center;gap:.5rem;
}
.sys-side li::before{
  content:"";display:block;width:5px;height:5px;border-radius:50%;
  background:var(--tx-400);
}
.sys-side li.is-on{color:var(--cyan);background:rgba(53,177,230,.06)}
.sys-side li.is-on::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.sys-main{padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.sys-chart{
  height:90px;border-radius:8px;
  border:1px solid var(--bd-1);
  background:rgba(7,8,12,.4);
  padding:.5rem;
  position:relative;
  overflow:hidden;
}
.sys-chart svg{width:100%;height:100%}
.sys-chart__line{
  fill:none;stroke:url(#chartGrad);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:drawLine 2.2s var(--ease-out) forwards .4s;
}
@keyframes drawLine{to{stroke-dashoffset:0}}

.sys-metrics{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.sys-metric{
  padding:.75rem;
  border:1px solid var(--bd-1);
  border-radius:8px;
  background:rgba(7,8,12,.4);
  display:flex;flex-direction:column;gap:.15rem;
}
.sys-metric__num{
  font-family:var(--font-display);
  font-size:1.25rem;font-weight:700;
  color:var(--tx-100);line-height:1;
}
.sys-metric__num .suf{color:var(--orange);font-size:.85rem;margin-left:2px}
.sys-metric__label{
  font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-400);
}

.sys-terminal{
  border-top:1px solid var(--bd-1);
  padding:.75rem 1rem;
  background:rgba(7,8,12,.6);
  font-family:var(--font-mono);font-size:.72rem;
  color:var(--tx-300);
  line-height:1.6;
  min-height:52px;
}
.sys-terminal .prompt{color:var(--purple)}
.sys-terminal .ok{color:var(--cyan)}
.sys-terminal .caret{
  display:inline-block;width:7px;height:12px;
  background:var(--cyan);vertical-align:middle;
  margin-left:2px;
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* Paneles flotantes */
.sys-float{
  position:absolute;
  padding:.65rem .85rem;
  background:var(--bg-200);
  border:1px solid var(--bd-1);
  border-radius:10px;
  font-family:var(--font-mono);font-size:.68rem;
  color:var(--tx-300);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:.3rem;
  z-index:2;
}
.sys-float strong{
  font-family:var(--font-body);font-weight:600;
  color:var(--tx-100);font-size:.8rem;
}
.sys-float--a{
  top:-8%;left:-8%;
  animation:float 6s ease-in-out infinite;
}
.sys-float--b{
  bottom:-6%;right:-6%;
  animation:float 7s ease-in-out infinite .8s;
}
.sys-float__dot{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--cyan);
}
.sys-float__dot::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ============================================================
   02 · TICKER
   ============================================================ */
.ticker{
  border-block:1px solid var(--bd-1);
  padding-block:1.25rem;
  background:rgba(11,14,20,.5);
  overflow:hidden;
  position:relative;
}
.ticker::before,.ticker::after{
  content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg-000),transparent)}
.ticker::after{right:0;background:linear-gradient(-90deg,var(--bg-000),transparent)}
.ticker__track{
  display:flex;gap:3rem;
  animation:tickerScroll 40s linear infinite;
  width:max-content;
}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{
  font-family:var(--font-mono);
  font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx-400);
  display:inline-flex;align-items:center;gap:3rem;
  transition:color var(--dur-base) var(--ease-out);
}
.ticker__item::after{content:"◈";color:var(--purple);opacity:.6}
.ticker__item:hover{color:var(--cyan)}
@keyframes tickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================================
   03 · SECTION BASE
   ============================================================ */
.section{
  position:relative;
  padding-block:7rem;
}
.section__head{
  display:flex;flex-direction:column;gap:1rem;
  max-width:720px;margin-bottom:3.5rem;
}
.section__head--center{align-items:center;text-align:center;margin-inline:auto}
.section__eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  color:var(--tx-400);
}
.section__eyebrow::before{
  content:"";display:block;width:20px;height:1px;background:var(--grad-brand);
}
.section__title{font-size:var(--fs-h2);color:var(--tx-100)}
.section__desc{
  color:var(--tx-300);font-size:1.0625rem;
  max-width:58ch;
}

/* ============================================================
   04 · ESCALERA (Qué hacemos)
   ============================================================ */
.stairs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:start;
}
.stairs__intro{
  display:flex;flex-direction:column;gap:1.5rem;
  position:sticky;top:120px;
}
.stairs__list{
  position:relative;
  padding-left:2.5rem;
}
.stairs__line{
  position:absolute;left:7px;top:12px;bottom:12px;
  width:1px;
  background:linear-gradient(180deg,
    rgba(121,81,171,.5),
    rgba(53,177,230,.5),
    rgba(252,168,50,.4));
}
.stairs__item{
  position:relative;
  padding-bottom:2.25rem;
  opacity:.4;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.stairs__item.is-active{opacity:1}
.stairs__item:last-child{padding-bottom:0}
.stairs__node{
  position:absolute;left:-2.5rem;top:6px;
  width:15px;height:15px;border-radius:50%;
  background:var(--bg-100);
  border:1.5px solid var(--purple-deep);
  transition:all var(--dur-base) var(--ease-out);
}
.stairs__item.is-active .stairs__node{
  border-color:var(--cyan);
  background:var(--cyan);
  box-shadow:0 0 0 4px rgba(53,177,230,.15), 0 0 20px rgba(53,177,230,.5);
}
.stairs__num{
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;color:var(--tx-400);
  margin-bottom:.35rem;
}
.stairs__title{
  font-size:1.25rem;color:var(--tx-100);
  margin-bottom:.4rem;font-weight:500;
}
.stairs__desc{
  font-size:.95rem;color:var(--tx-300);
  max-width:48ch;
}
.stairs__tags{
  display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.75rem;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height var(--dur-slow) var(--ease-out),
             opacity var(--dur-base) var(--ease-out);
}
.stairs__item.is-active .stairs__tags{max-height:40px;opacity:1}
.stairs__tag{
  font-family:var(--font-mono);font-size:.65rem;
  padding:.25rem .55rem;
  border:1px solid var(--bd-1);border-radius:100px;
  color:var(--tx-300);
}

/* ============================================================
   05 · SERVICIOS
   ============================================================ */
.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
.svc-card{
  position:relative;
  padding:1.75rem;
  border:1px solid var(--bd-1);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(16,20,28,.6),rgba(11,14,20,.4));
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
  overflow:hidden;
  isolation:isolate;
  display:flex;flex-direction:column;gap:1rem;
  min-height:260px;
}
.svc-card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),
    rgba(121,81,171,.12),transparent 60%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.svc-card:hover{
  transform:translateY(-4px);
  border-color:var(--bd-brand);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7), 0 0 40px -20px rgba(121,81,171,.35);
}
.svc-card:hover::before{opacity:1}

.svc-card__icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--bd-1);
  color:var(--tx-300);
  transition:all var(--dur-base) var(--ease-out);
}
.svc-card[data-color="purple"]:hover .svc-card__icon{
  color:var(--purple-soft);border-color:var(--bd-brand);background:rgba(121,81,171,.08);
  box-shadow:0 0 22px rgba(121,81,171,.3);
}
.svc-card[data-color="cyan"]:hover .svc-card__icon{
  color:var(--cyan);border-color:var(--bd-cyan);background:rgba(53,177,230,.08);
  box-shadow:0 0 22px rgba(53,177,230,.3);
}
.svc-card[data-color="orange"]:hover .svc-card__icon{
  color:var(--orange);border-color:rgba(252,168,50,.35);background:rgba(252,168,50,.08);
  box-shadow:0 0 22px rgba(252,168,50,.3);
}

.svc-card__title{
  font-size:1.0625rem;color:var(--tx-100);
  font-weight:500;line-height:1.3;
}
.svc-card__desc{
  font-size:.9rem;color:var(--tx-300);
  flex:1;
}
.svc-card__tags{
  display:flex;flex-wrap:wrap;gap:.35rem;
  margin-top:auto;padding-top:1rem;
  border-top:1px solid var(--bd-1);
}
.svc-card__tag{
  font-family:var(--font-mono);font-size:.62rem;
  letter-spacing:.06em;
  padding:.2rem .5rem;border-radius:4px;
  color:var(--tx-400);
  background:rgba(255,255,255,.02);
  border:1px solid var(--bd-1);
}

/* ============================================================
   06 · SISTEMAS EMPRESARIALES
   ============================================================ */
.systems{
  position:relative;
  padding-block:8rem;
}
.systems__stage{
  position:relative;
  display:grid;
  place-items:center;
  min-height:520px;
}
.systems__dashboard{
  position:relative;
  width:min(560px,100%);
  z-index:2;
}
/* Reutiliza sys-window pero más grande */
.systems__dashboard .sys-window{transform:scale(1)}
.systems__dashboard .sys-window__body{grid-template-columns:140px 1fr;min-height:340px}

/* Nodos satélite */
.sys-node{
  position:absolute;
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .8rem;
  background:rgba(16,20,28,.9);
  border:1px solid var(--bd-1);
  border-radius:100px;
  font-family:var(--font-mono);font-size:.68rem;
  color:var(--tx-300);
  letter-spacing:.06em;
  transition:all var(--dur-base) var(--ease-out);
  opacity:.55;
  z-index:3;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.sys-node::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--tx-400);
  transition:all var(--dur-base) var(--ease-out);
}
.sys-node.is-active{
  opacity:1;
  color:var(--tx-100);
  border-color:var(--bd-cyan);
  box-shadow:0 0 24px -4px rgba(53,177,230,.4);
}
.sys-node.is-active::before{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

.sys-node--1{top:6%;left:2%}
.sys-node--2{top:8%;right:2%}
.sys-node--3{top:42%;left:-2%}
.sys-node--4{top:46%;right:-2%}
.sys-node--5{bottom:8%;left:8%}
.sys-node--6{bottom:6%;right:8%}
.sys-node--7{bottom:-2%;left:50%;transform:translateX(-50%)}

/* Dron (agente del sistema) */
.sys-drone{
  position:absolute;
  width:44px;height:44px;
  z-index:4;
  pointer-events:none;
  transition:transform .9s var(--ease-out);
  will-change:transform;
}
.sys-drone svg{width:100%;height:100%}
.sys-drone__ring{
  transform-origin:center;
  animation:spin 8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   07 · TECNOLOGÍAS
   ============================================================ */
.tech{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center;
}
.tech__orbit{
  position:relative;
  aspect-ratio:1;
  max-width:520px;
  margin-inline:auto;
  display:grid;place-items:center;
}
.tech__core{
  position:relative;
  width:110px;height:110px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle,rgba(121,81,171,.15),transparent 70%);
  border:1px solid var(--bd-brand);
  box-shadow:0 0 60px -10px rgba(121,81,171,.5), inset 0 0 30px rgba(121,81,171,.15);
  z-index:2;
}
.tech__core svg{width:44px;height:44px}
.tech__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.05);
  animation:spin 60s linear infinite;
}
.tech__ring--2{inset:12%;border-color:rgba(255,255,255,.03);animation-duration:80s;animation-direction:reverse}

.tech__node{
  position:absolute;
  width:72px;height:72px;
  top:50%;left:50%;
  margin:-36px 0 0 -36px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-200);
  border:1px solid var(--bd-1);
  font-family:var(--font-mono);font-size:.68rem;
  font-weight:500;letter-spacing:.08em;
  color:var(--tx-300);
  cursor:pointer;
  transition:all var(--dur-base) var(--ease-out);
  z-index:3;
}
.tech__node:hover,.tech__node.is-active{
  transform:scale(1.08);
  color:var(--tx-100);
  border-color:var(--cyan);
  background:var(--bg-300);
  box-shadow:0 0 30px -4px rgba(53,177,230,.45);
}
.tech__node.is-active{
  border-color:var(--cyan);
  color:var(--cyan);
}

/* Panel de detalle */
.tech__detail{
  border:1px solid var(--bd-1);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(16,20,28,.7),rgba(11,14,20,.5));
  padding:2rem;
  min-height:280px;
  display:flex;flex-direction:column;gap:1rem;
  position:relative;
  overflow:hidden;
}
.tech__detail::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad-brand);opacity:.4;
}
.tech__detail-role{
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);
}
.tech__detail-name{
  font-family:var(--font-display);
  font-size:2rem;font-weight:700;
  color:var(--tx-100);
}
.tech__detail-desc{color:var(--tx-300);font-size:.95rem}
.tech__detail-demo{
  margin-top:auto;
  padding:1rem;
  border:1px solid var(--bd-1);
  border-radius:8px;
  background:rgba(7,8,12,.6);
  font-family:var(--font-mono);font-size:.75rem;
  color:var(--tx-300);
  line-height:1.7;
  min-height:110px;
}
.tech__detail-demo .k{color:var(--purple-soft)}
.tech__detail-demo .s{color:var(--cyan)}
.tech__detail-demo .n{color:var(--orange)}
.tech__detail-demo .c{color:var(--tx-400);font-style:italic}

/* ============================================================
   08 · PROCESO
   ============================================================ */
.process{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1rem;
  position:relative;
  padding-top:2rem;
}
.process::before{
  content:"";position:absolute;
  top:38px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,
    rgba(121,81,171,.4),rgba(53,177,230,.5),rgba(252,168,50,.4));
}
.step{
  position:relative;
  padding-top:64px;
  text-align:center;
  opacity:.5;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.step.is-active,.step:hover{opacity:1}
.step::before{
  content:"";position:absolute;
  top:32px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:var(--bg-000);
  border:1.5px solid var(--purple-deep);
  transition:all var(--dur-base) var(--ease-out);
  z-index:2;
}
.step.is-active::before,.step:hover::before{
  background:var(--cyan);
  border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(53,177,230,.15), 0 0 20px rgba(53,177,230,.6);
}
.step__num{
  font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.14em;color:var(--tx-400);
  margin-bottom:.35rem;
}
.step__title{
  font-size:.9rem;color:var(--tx-100);
  font-weight:500;line-height:1.3;
}
.step__desc{
  font-size:.78rem;color:var(--tx-400);
  margin-top:.4rem;line-height:1.5;
}

/* ============================================================
   09 · NICARAGUA
   ============================================================ */
.nicaragua{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:5rem;
  align-items:center;
}
.nicaragua__map{
  position:relative;
  aspect-ratio:1.15;
  max-width:560px;
}
.nicaragua__map svg{width:100%;height:100%;overflow:visible}
.nicaragua__outline{
  fill:rgba(13,16,23,.9);
  stroke:rgba(53,177,230,.35);
  stroke-width:.7;
  filter:drop-shadow(0 0 30px rgba(53,177,230,.15));
}
.nicaragua__city{
  cursor:pointer;
}
.nicaragua__city circle.core{
  fill:var(--cyan);
  transition:all var(--dur-base) var(--ease-out);
}
.nicaragua__city circle.halo{
  fill:var(--cyan);opacity:.2;
  animation:cityPulse 3s ease-in-out infinite;
  transform-origin:center;
}
@keyframes cityPulse{
  0%,100%{transform:scale(1);opacity:.2}
  50%{transform:scale(2);opacity:0}
}
.nicaragua__city:hover circle.core,
.nicaragua__city.is-active circle.core{
  fill:var(--orange);
  filter:drop-shadow(0 0 8px var(--orange));
}
.nicaragua__city text{
  font-family:var(--font-mono);
  font-size:2.6px;
  fill:var(--tx-300);
  opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
  pointer-events:none;
}
.nicaragua__city:hover text,
.nicaragua__city.is-active text{opacity:1}

.nicaragua__line{
  stroke:rgba(53,177,230,.35);
  stroke-width:.4;
  stroke-dasharray:80;
  stroke-dashoffset:80;
  fill:none;
}
.nicaragua__line.is-drawn{animation:drawPath 1.6s var(--ease-out) forwards}
@keyframes drawPath{to{stroke-dashoffset:0}}

/* Contenido */
.nicaragua__content{display:flex;flex-direction:column;gap:1.5rem}
.nicaragua__title{font-size:var(--fs-h2);color:var(--tx-100)}
.nicaragua__desc{color:var(--tx-300);font-size:1.0625rem}
.nicaragua__coords{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--font-mono);font-size:.72rem;
  color:var(--cyan);
  padding:.75rem 1rem;
  border:1px solid var(--bd-cyan);
  border-radius:100px;
  background:rgba(53,177,230,.04);
  width:fit-content;
}
.nicaragua__coords::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
  animation:pulse 2s ease-in-out infinite;
}

/* ============================================================
   10 · PORTAFOLIO (preview)
   ============================================================ */
.portfolio-preview{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
.work-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--bd-1);
  background:var(--bg-100);
  transition:transform var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
  display:block;
}
.work-card:hover{
  transform:translateY(-4px);
  border-color:var(--bd-brand);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8), 0 0 40px -20px rgba(121,81,171,.4);
}
.work-card__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:linear-gradient(135deg,#10141C,#0B0E14);
}
.work-card__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform var(--dur-slow) var(--ease-out);
}
.work-card:hover .work-card__media img{transform:scale(1.05)}

/* Placeholder si no hay imagen */
.work-card__media::after{
  content:attr(data-placeholder);
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--tx-400);
  opacity:.6;
  z-index:-1;
}
.work-card__media img[src=""] + .work-card__ph{display:grid}

.work-card__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,8,12,.9) 95%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.25rem;
  gap:.35rem;
}
.work-card__type{
  font-family:var(--font-mono);font-size:.65rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);
}
.work-card__name{
  font-family:var(--font-display);
  font-size:1.0625rem;font-weight:500;
  color:var(--tx-100);
}
.work-card__meta{
  font-family:var(--font-mono);font-size:.68rem;
  color:var(--tx-400);
  display:flex;gap:.6rem;flex-wrap:wrap;
}
.work-card__tags{
  display:flex;gap:.35rem;flex-wrap:wrap;
  margin-top:.5rem;
}
.work-card__tag{
  font-family:var(--font-mono);font-size:.6rem;
  padding:.15rem .45rem;
  border:1px solid var(--bd-1);
  border-radius:3px;
  color:var(--tx-300);
}

/* ============================================================
   11 · WORDPRESS
   ============================================================ */
.wp-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
  padding:3rem;
  border:1px solid var(--bd-1);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,rgba(121,81,171,.05),rgba(53,177,230,.04));
  position:relative;
  overflow:hidden;
}
.wp-block::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--grad-brand);opacity:.4;
}
.wp-block__content{display:flex;flex-direction:column;gap:1.25rem}
.wp-block__visual{
  display:grid;place-items:center;
  aspect-ratio:1;
}
.wp-block__visual svg{width:60%;height:60%}
.wp-block__visual circle{fill:none;stroke:url(#wpGrad);stroke-width:1}
.wp-block__visual path{fill:none;stroke:url(#wpGrad);stroke-width:1;stroke-linecap:round}

/* ============================================================
   12 · ABOUT
   ============================================================ */
.about-strip{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:4rem;
  align-items:center;
}
.about-strip__content{display:flex;flex-direction:column;gap:1.5rem}
.about-strip__list{
  display:flex;flex-direction:column;gap:.75rem;
}
.about-strip__list li{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:.95rem;color:var(--tx-300);
}
.about-strip__list li::before{
  content:"";flex-shrink:0;
  width:16px;height:16px;margin-top:.35rem;
  border:1px solid var(--bd-cyan);
  border-radius:4px;
  display:grid;place-items:center;
  background:rgba(53,177,230,.06);
}

/* ============================================================
   13 · CTA FINAL
   ============================================================ */
.final-cta{
  text-align:center;
  padding-block:6rem;
  display:flex;flex-direction:column;
  align-items:center;gap:1.5rem;
}
.final-cta__title{
  font-size:clamp(1.8rem,3.5vw,3rem);
  max-width:20ch;
}
.final-cta__desc{color:var(--tx-300);max-width:56ch}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1199px){
  .process{grid-template-columns:repeat(4,1fr);row-gap:2rem}
  .process::before{display:none}
  .step{padding-top:56px}
  .step::before{top:22px}
}

@media (max-width:991px){
  .section{padding-block:5rem}
  .hero{padding-block:120px 60px;min-height:auto}
  .hero__inner{grid-template-columns:1fr;gap:3rem}
  .hero__panel{max-width:520px;margin-inline:auto;width:100%}
  .sys-float--a{left:0}
  .sys-float--b{right:0}

  .stairs{grid-template-columns:1fr;gap:3rem}
  .stairs__intro{position:static}

  .services{grid-template-columns:repeat(2,1fr)}
  .systems__dashboard .sys-window__body{grid-template-columns:1fr}
  .sys-side{display:none}
  .sys-node--3,.sys-node--4{display:none}

  .tech{grid-template-columns:1fr;gap:3rem}
  .tech__orbit{max-width:420px}

  .process{grid-template-columns:repeat(2,1fr)}

  .nicaragua{grid-template-columns:1fr;gap:3rem}
  .nicaragua__map{max-width:440px;margin-inline:auto}

  .portfolio-preview{grid-template-columns:repeat(2,1fr)}
  .wp-block{grid-template-columns:1fr;padding:2rem}
  .about-strip{grid-template-columns:1fr;gap:2.5rem}
}

@media (max-width:640px){
  .section{padding-block:4rem}
  .services{grid-template-columns:1fr}
  .portfolio-preview{grid-template-columns:1fr}
  .process{grid-template-columns:1fr;gap:1.75rem}
  .step{text-align:left;padding:0 0 0 40px}
  .step::before{left:6px;top:8px;transform:none}
  .sys-node{font-size:.6rem;padding:.4rem .65rem}
  .sys-node--5,.sys-node--6,.sys-node--7{display:none}
  .hero__stats{gap:1.5rem}
  .hero__stat-num{font-size:1.4rem}

  .final-cta{padding-block:4rem}
}