:root{
  --bg:#000000;
  --bg-panel:#08080e;
  --bg-card:#0b0b13;
  --azul:#2e3cf2;
  --azul-claro:#5b6bff;
  --violeta:#8b2fd6;
  --rojo:#f5203e;
  --texto:#e9ebff;
  --apagado:#8a93c4;
  --linea:rgba(91,107,255,.18);
  --glow-azul:0 0 24px rgba(46,60,242,.45);
  --glow-rojo:0 0 24px rgba(245,32,62,.4);
  --fuente-display:'Chakra Petch',system-ui,sans-serif;
  --fuente-cuerpo:'Space Grotesk',system-ui,sans-serif;
  --fuente-mono:'Chakra Petch',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--bg);
  color:var(--texto);
  font-family:var(--fuente-cuerpo);
  line-height:1.6;
  overflow-x:hidden;
}
::selection{background:var(--rojo);color:#fff}

/* ── fondo de circuito ─────────────────────────────── */
.circuito{
  position:fixed;inset:0;z-index:-2;
  background-image:
    linear-gradient(rgba(46,60,242,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,60,242,.055) 1px,transparent 1px);
  background-size:56px 56px;
}
.circuito::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(46,60,242,.14),transparent 60%),
             radial-gradient(ellipse 45% 35% at 85% 90%,rgba(139,47,214,.1),transparent 60%);
}

a{color:var(--azul-claro)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--rojo);outline-offset:3px;border-radius:2px;
}
.contenedor{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:110px 0}

/* ── etiquetas / eyebrows ──────────────────────────── */
.etiqueta{
  font-family:var(--fuente-display);font-size:.72rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;color:var(--rojo);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;
}
.etiqueta::before{content:'';width:34px;height:1px;background:var(--rojo)}
h1,h2,h3{font-family:var(--fuente-display);line-height:1.12}
h2{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:700;margin-bottom:14px}
.sub{color:var(--apagado);max-width:640px;font-size:1.05rem}

/* ── navegación ────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(0,0,0,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
.nav-inner{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none}
.marca img{width:42px;height:42px;object-fit:cover;border-radius:8px}
.marca span{
  font-family:var(--fuente-display);font-weight:700;font-size:1.3rem;letter-spacing:.14em;
  background:linear-gradient(90deg,var(--azul-claro),var(--violeta) 55%,var(--rojo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-links{display:flex;align-items:center;gap:6px;list-style:none}
.nav-links a{
  color:var(--apagado);text-decoration:none;font-size:.92rem;font-weight:500;
  padding:8px 14px;border-radius:6px;transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--texto);background:rgba(91,107,255,.1)}
.nav-cta{
  background:linear-gradient(90deg,var(--azul),var(--violeta));
  color:#fff!important;font-family:var(--fuente-display);font-weight:600;
  letter-spacing:.05em;box-shadow:var(--glow-azul);
}
.nav-cta:hover{filter:brightness(1.15)}
.menu-btn{display:none;background:none;border:1px solid var(--linea);color:var(--texto);
  font-size:1.4rem;padding:4px 12px;border-radius:6px;cursor:pointer}

/* ── héroe ─────────────────────────────────────────── */
.hero{padding:170px 0 120px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{
  font-size:clamp(2.4rem,6vw,4.2rem);font-weight:700;letter-spacing:.02em;margin:14px 0 20px;
}
.hero h1 .gradiente{
  background:linear-gradient(95deg,var(--azul-claro) 0%,var(--violeta) 48%,var(--rojo) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--apagado);font-size:1.12rem;max-width:520px;margin-bottom:34px}
.acciones{display:flex;gap:16px;flex-wrap:wrap}
.btn{
  font-family:var(--fuente-display);font-weight:600;letter-spacing:.06em;font-size:.95rem;
  padding:15px 30px;border-radius:8px;text-decoration:none;display:inline-block;
  transition:transform .18s,filter .18s,box-shadow .18s;border:none;cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-primario{background:linear-gradient(90deg,var(--azul),var(--violeta));color:#fff;box-shadow:var(--glow-azul)}
.btn-primario:hover{filter:brightness(1.12)}
.btn-fantasma{border:1px solid rgba(245,32,62,.55);color:var(--texto)}
.btn-fantasma:hover{background:rgba(245,32,62,.1);box-shadow:var(--glow-rojo)}
.btn-rojo{background:linear-gradient(90deg,#d81736,var(--rojo));color:#fff;box-shadow:var(--glow-rojo)}

/* consola de diagnóstico (elemento distintivo) */
.consola{
  background:linear-gradient(160deg,var(--bg-panel),#050508);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;
}
.consola::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(46,60,242,.03) 3px 4px);
}
.consola-barra{
  display:flex;align-items:center;gap:10px;padding:12px 18px;
  border-bottom:1px solid var(--linea);background:rgba(0,0,0,.6);
}
.punto{width:11px;height:11px;border-radius:50%}
.punto.r{background:var(--rojo)}.punto.v{background:var(--violeta)}.punto.a{background:var(--azul-claro)}
.consola-barra span{margin-left:auto;font-family:var(--fuente-mono);font-size:.72rem;letter-spacing:.2em;color:var(--apagado)}
.consola-cuerpo{padding:22px 24px;font-family:var(--fuente-mono);font-size:.85rem;min-height:265px}
.consola-cuerpo .linea-log{display:flex;gap:10px;margin-bottom:10px;opacity:0;transform:translateY(4px);animation:aparecer .4s forwards}
@keyframes aparecer{to{opacity:1;transform:none}}
.linea-log .p{color:var(--azul-claro)}
.linea-log .ok{color:#3ddc84;margin-left:auto}
.linea-log .alerta{color:var(--rojo);margin-left:auto}
.linea-log .txt{color:var(--apagado)}
.cursor{display:inline-block;width:9px;height:16px;background:var(--rojo);animation:parpadeo 1s steps(1) infinite;vertical-align:text-bottom}
@keyframes parpadeo{50%{opacity:0}}
.mantis-marca{
  position:absolute;right:-40px;bottom:-50px;width:230px;opacity:.1;pointer-events:none;
  filter:blur(.4px);
}
.cinta{
  margin-top:70px;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:16px 0;overflow:hidden;white-space:nowrap;
}
.cinta-track{display:inline-block;animation:desplazar 30s linear infinite;font-family:var(--fuente-display);
  font-size:.78rem;letter-spacing:.3em;color:var(--apagado)}
.cinta-track b{color:var(--rojo);font-weight:600;margin:0 26px}
@keyframes desplazar{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── servicios ─────────────────────────────────────── */
.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:54px}
.tarjeta{
  background:var(--bg-card);border:1px solid var(--linea);border-radius:14px;
  padding:30px 26px;position:relative;overflow:hidden;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.tarjeta::before{
  content:attr(data-letra);position:absolute;top:-26px;right:-8px;
  font-family:var(--fuente-display);font-weight:700;font-size:7rem;line-height:1;
  color:rgba(91,107,255,.07);pointer-events:none;
}
.tarjeta:hover{transform:translateY(-6px);border-color:rgba(245,32,62,.5);box-shadow:var(--glow-rojo)}
.tarjeta .icono{
  width:54px;height:54px;border-radius:10px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,rgba(46,60,242,.25),rgba(139,47,214,.2));
  border:1px solid var(--linea);
}
.tarjeta .icono svg{width:28px;height:28px;stroke:var(--azul-claro);fill:none;stroke-width:1.7}
.tarjeta h3{font-size:1.06rem;letter-spacing:.06em;margin-bottom:10px}
.tarjeta p{color:var(--apagado);font-size:.92rem}
.tarjeta ul{margin-top:14px;list-style:none}
.tarjeta li{color:var(--apagado);font-size:.85rem;padding:4px 0 4px 18px;position:relative}
.tarjeta li::before{content:'▸';position:absolute;left:0;color:var(--rojo)}

/* ── acerca de ─────────────────────────────────────── */
.acerca-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.acerca-visual{position:relative;text-align:center}
.acerca-visual img{width:min(100%,420px);border-radius:16px;border:1px solid var(--linea);
  box-shadow:0 30px 90px rgba(46,60,242,.25)}
.acerca p{color:var(--apagado);margin-bottom:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.stat{border-left:2px solid var(--rojo);padding-left:16px}
.stat b{font-family:var(--fuente-display);font-size:1.9rem;font-weight:700;display:block;color:var(--texto)}
.stat span{color:var(--apagado);font-size:.83rem}
.principios{margin-top:30px;display:grid;gap:12px}
.principio{display:flex;gap:14px;align-items:flex-start}
.principio .chip{
  font-family:var(--fuente-display);font-size:.7rem;font-weight:600;letter-spacing:.12em;
  color:var(--rojo);border:1px solid rgba(245,32,62,.4);border-radius:5px;padding:3px 9px;margin-top:3px;white-space:nowrap;
}
.principio p{margin:0;font-size:.93rem}

/* ── blog ──────────────────────────────────────────── */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
.post{
  background:var(--bg-card);border:1px solid var(--linea);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s,border-color .25s;
}
.post:hover{transform:translateY(-6px);border-color:var(--azul-claro)}
.post-cab{height:6px;background:linear-gradient(90deg,var(--azul),var(--violeta),var(--rojo))}
.post-cuerpo{padding:26px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;gap:12px;font-family:var(--fuente-display);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);margin-bottom:12px}
.post-meta .fecha{color:var(--apagado)}
.post h3{font-size:1.08rem;margin-bottom:12px;line-height:1.35}
.post p{color:var(--apagado);font-size:.9rem;flex:1}
.post a{margin-top:18px;font-family:var(--fuente-display);font-size:.82rem;font-weight:600;
  letter-spacing:.1em;text-decoration:none;color:var(--azul-claro)}
.post a:hover{color:var(--rojo)}

/* ── contacto ──────────────────────────────────────── */
.contacto-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;margin-top:50px}
.canal{display:flex;gap:16px;margin-bottom:26px;align-items:flex-start}
.canal .icono{width:46px;height:46px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:rgba(46,60,242,.15);border:1px solid var(--linea)}
.canal .icono svg{width:22px;height:22px;stroke:var(--azul-claro);fill:none;stroke-width:1.7}
.canal b{font-family:var(--fuente-display);font-size:.92rem;letter-spacing:.05em;display:block;margin-bottom:3px}
.canal span,.canal button{color:var(--apagado);font-size:.92rem}
.correo-btn{background:none;border:none;cursor:pointer;text-decoration:underline dotted;padding:0;font-family:inherit}
.correo-btn:hover{color:var(--texto)}
.escudo{
  margin-top:34px;background:rgba(245,32,62,.06);border:1px solid rgba(245,32,62,.3);
  border-radius:12px;padding:20px 22px;
}
.escudo b{font-family:var(--fuente-display);font-size:.8rem;letter-spacing:.16em;color:var(--rojo);
  display:flex;align-items:center;gap:8px;margin-bottom:10px}
.escudo ul{list-style:none}
.escudo li{color:var(--apagado);font-size:.83rem;padding:3px 0 3px 20px;position:relative}
.escudo li::before{content:'✓';position:absolute;left:0;color:var(--rojo)}

form{background:var(--bg-card);border:1px solid var(--linea);border-radius:16px;padding:36px;position:relative}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{margin-bottom:18px;display:flex;flex-direction:column}
label{font-family:var(--fuente-display);font-size:.76rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--apagado);margin-bottom:8px}
label .req{color:var(--rojo)}
input,textarea,select{
  background:rgba(0,0,0,.6);border:1px solid var(--linea);border-radius:8px;
  padding:13px 15px;color:var(--texto);font-family:var(--fuente-cuerpo);font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;width:100%;
}
input:focus,textarea:focus,select:focus{border-color:var(--azul-claro);box-shadow:0 0 0 3px rgba(46,60,242,.2);outline:none}
input.invalido,textarea.invalido{border-color:var(--rojo);box-shadow:0 0 0 3px rgba(245,32,62,.15)}
textarea{resize:vertical;min-height:130px}
.error-msg{color:var(--rojo);font-size:.78rem;margin-top:6px;min-height:1em}
.contador{color:var(--apagado);font-size:.74rem;text-align:right;margin-top:4px}
/* honeypot: fuera de pantalla, invisible para humanos, visible para bots */
.hp-campo{position:absolute!important;left:-9999px!important;top:-9999px!important;height:1px;width:1px;overflow:hidden}
.consentimiento{display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px}
.consentimiento input{width:18px;height:18px;margin-top:3px;flex:none;accent-color:var(--rojo)}
.consentimiento span{color:var(--apagado);font-size:.85rem}
.form-pie{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-nota{font-family:var(--fuente-mono);font-size:.72rem;letter-spacing:.08em;color:var(--apagado);
  display:flex;align-items:center;gap:8px}
.form-nota .led{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.aviso-envio{margin-top:18px;padding:14px 18px;border-radius:8px;font-size:.9rem;display:none}
.aviso-envio.ok{display:block;background:rgba(61,220,132,.08);border:1px solid rgba(61,220,132,.4);color:#9df2c4}
.aviso-envio.error{display:block;background:rgba(245,32,62,.08);border:1px solid rgba(245,32,62,.4);color:#ffb3c0}

/* ── pie ───────────────────────────────────────────── */
footer{border-top:1px solid var(--linea);padding:54px 0 34px;background:rgba(0,0,0,.6)}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.pie-grid h4{font-family:var(--fuente-display);font-size:.8rem;letter-spacing:.2em;color:var(--texto);margin-bottom:16px}
.pie-grid ul{list-style:none}
.pie-grid li{margin-bottom:9px}
.pie-grid a{color:var(--apagado);text-decoration:none;font-size:.9rem}
.pie-grid a:hover{color:var(--rojo)}
.pie-grid p{color:var(--apagado);font-size:.9rem;max-width:320px}
.legal{border-top:1px solid var(--linea);padding-top:24px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--apagado);font-size:.8rem}

/* revelado al hacer scroll */
.revelar{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.revelar.visible{opacity:1;transform:none}

/* ── responsivo ────────────────────────────────────── */
@media(max-width:980px){
  .hero-grid,.acerca-grid,.contacto-grid{grid-template-columns:1fr}
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:1fr}
  .pie-grid{grid-template-columns:1fr 1fr}
  .mantis-marca{display:none}
}
@media(max-width:640px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    background:rgba(0,0,0,.97);border-bottom:1px solid var(--linea);padding:16px 24px;gap:4px;
    align-items:stretch;
  }
  .nav-links.abierto{display:flex}
  .menu-btn{display:block}
  .tarjetas,.fila,.stats{grid-template-columns:1fr}
  section{padding:80px 0}
  form{padding:26px 20px}
}

/* ── botón flotante WhatsApp (paleta MANTIS + verde oficial) ── */
.btn-whatsapp{
  position:fixed; right:22px; bottom:22px; z-index:90;
  display:flex; align-items:center; gap:0; text-decoration:none;
}
.btn-whatsapp-icono{
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(140deg,#25d366,#128c7e);
  display:grid; place-items:center;
  box-shadow:0 0 0 0 rgba(37,211,102,.55), 0 12px 30px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.18);
  transition:transform .2s, box-shadow .2s;
  animation:ws-pulso 2.6s infinite;
}
.btn-whatsapp:hover .btn-whatsapp-icono{
  transform:translateY(-3px) scale(1.06);
  animation:none;
  box-shadow:0 0 26px rgba(37,211,102,.6), 0 14px 34px rgba(0,0,0,.5);
}
.btn-whatsapp-etiqueta{
  font-family:'Chakra Petch',system-ui,sans-serif; font-weight:600;
  font-size:.78rem; letter-spacing:.08em; color:#e9ebff;
  background:rgba(0,0,0,.82); border:1px solid rgba(37,211,102,.45);
  border-radius:20px; padding:8px 14px; margin-right:12px;
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .25s, transform .25s; white-space:nowrap;
}
.btn-whatsapp:hover .btn-whatsapp-etiqueta,
.btn-whatsapp:focus-visible .btn-whatsapp-etiqueta{opacity:1; transform:none}
.btn-whatsapp:focus-visible{outline:2px solid #25d366; outline-offset:4px; border-radius:40px}
@keyframes ws-pulso{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5), 0 12px 30px rgba(0,0,0,.45)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0), 0 12px 30px rgba(0,0,0,.45)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0), 0 12px 30px rgba(0,0,0,.45)}
}
@media (prefers-reduced-motion:reduce){.btn-whatsapp-icono{animation:none}}
@media (max-width:640px){.btn-whatsapp{right:14px;bottom:14px}.btn-whatsapp-etiqueta{display:none}}
@media print{.btn-whatsapp{display:none}}