:root{
  --bg:#070A12;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.10);
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.70);

  --blue:#4aa3ff;
  --purple:#8b5cf6;
  --pink:#ff4fd8;

  --radius:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(74,163,255,.10), transparent 60%),
    radial-gradient(1100px 600px at 80% 30%, rgba(255,79,216,.10), transparent 55%),
    radial-gradient(900px 550px at 50% 90%, rgba(139,92,246,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1200px, 92vw); margin:0 auto}

.kicker{letter-spacing:.18em; text-transform:uppercase; font-weight:800; font-size:.82rem; color:var(--muted)}
.h2{font-size:clamp(1.6rem, 2.6vw, 2.2rem); margin:0 0 14px}
.p{color:var(--muted); line-height:1.65; font-size:1.02rem}
.muted{color:var(--muted)}

.neon-text{
  background:linear-gradient(90deg, var(--blue), var(--purple), var(--pink), var(--blue));
  background-size: 250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;

  text-shadow: 0 0 18px rgba(74,163,255,.22), 0 0 26px rgba(255,79,216,.14);

  animation: neonMove 4.5s ease-in-out infinite;
}

@keyframes neonMove{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--text);
  transition:.18s transform,.18s filter,.18s background,.18s border-color;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
.btn--cta{
  border-color:rgba(74,163,255,.28);
  background:linear-gradient(90deg, rgba(74,163,255,.18), rgba(139,92,246,.16), rgba(255,79,216,.14));
  box-shadow:0 0 25px rgba(139,92,246,.18);
}
.btn--cta:hover{filter:brightness(1.1)}

.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(7,10,18,.62);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line)
}
.nav{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:240px}
.brand__logo{width:36px;height:36px;border-radius:50%;box-shadow:0 0 18px rgba(139,92,246,.35)}
.brand__text{font-weight:700;letter-spacing:.4px}
.brand__text b{font-weight:800}

.nav__links{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav__links a{padding:10px 12px;border-radius:999px;border:1px solid transparent;color:var(--muted)}
.nav__links a:hover{border-color:var(--line);background:rgba(255,255,255,.04);color:var(--text)}

.nav__burger{
  display:none;
  margin-left:auto;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  z-index:90;
}
.nav__burger span{display:block;width:22px;height:2px;background:var(--text);margin:5px 0;opacity:.9}

.nav-drawer{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  opacity:0; visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index:80;
}
.nav-drawer.open{opacity:1; visibility:visible}
.nav-drawer__inner{
  position:absolute; right:0; top:0; height:100%;
  width:min(420px,92vw);
  background:rgba(10,12,22,.92);
  border-left:1px solid var(--line);
  padding:18px;
  box-shadow:var(--shadow);
  transform:translateX(18px);
  transition: transform .25s ease;
}
.nav-drawer.open .nav-drawer__inner{transform:translateX(0)}
.nav-drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.nav-drawer__title{font-weight:800;letter-spacing:.6px}
.nav-drawer__close{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);border-radius:10px;padding:8px 12px;cursor:pointer}
.nav-drawer__inner a{display:block;padding:12px 12px;border-radius:14px;border:1px solid transparent;color:var(--muted)}
.nav-drawer__inner a:hover{border-color:var(--line);background:rgba(255,255,255,.04);color:var(--text)}

.hero{padding:64px 16px 34px; position:relative}
.hero__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:center}
.hero__left{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero__left::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: conic-gradient(from 180deg,
    rgba(74,163,255,0),
    rgba(74,163,255,.16),
    rgba(139,92,246,.16),
    rgba(255,79,216,.16),
    rgba(74,163,255,0)
  );
  filter: blur(20px);
  opacity:.65;
  animation: fvck_spin 9s linear infinite;
}
.hero__left > *{position:relative; z-index:2}
@keyframes fvck_spin { to{ transform: rotate(360deg);} }

.hero__right{display:flex;justify-content:center}
.hero__frame{width:100%;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel2);box-shadow:var(--shadow);padding:18px}
.hero__img{border-radius:14px;opacity:.96}

.pill{display:inline-flex;align-items:center;gap:10px;padding:9px 12px;border-radius:999px;border:1px solid var(--line);
background:rgba(255,255,255,.03);color:var(--muted);font-size:14px}
.pill .dot{opacity:.55}
.hero__title{margin:14px 0 10px;font-size:clamp(34px,4vw,54px);line-height:1.05;letter-spacing:-.5px}
.hero__sub{margin:0 0 14px;color:var(--muted);font-size:16px;line-height:1.55}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);font-size:14px}
.hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:18px}
.stat{padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(10,12,22,.55)}
.stat b{font-size:1.6rem}
.stat small{display:block; color:var(--muted); margin-top:4px}

.section{padding:84px 0; position:relative}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:16px; flex-wrap:wrap}

.panel{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(12,16,28,.72), rgba(10,14,24,.35));
  box-shadow: var(--shadow);
}

.glow-frame{
  padding:18px; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  position:relative; overflow:hidden;
}
.glow-frame:before{
  content:""; position:absolute; inset:-2px;
  background:conic-gradient(from 180deg, var(--blue), var(--pink), var(--purple), var(--blue));
  filter:blur(22px); opacity:.18;
}
.glow-frame > *{position:relative}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,14,24,.55);
}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted); line-height:1.55}
.icon{
  width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(74,163,255,.18), rgba(255,79,216,.14));
  box-shadow:0 0 18px rgba(74,163,255,.10);
  margin-bottom:12px;
}

.slider{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,14,24,.4);
}
.track{display:flex; transition: transform .55s ease}
.slide{min-width:100%; padding:26px}
.slide-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:center}
.slider-nav{position:absolute; inset:auto 12px 12px auto; display:flex; gap:8px}
.navbtn{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  display:grid; place-items:center; cursor:pointer;
}
.navbtn:hover{border-color:rgba(74,163,255,.55)}
.dots{position:absolute; left:12px; bottom:16px; display:flex; gap:8px}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.12);cursor:pointer}
.dot.active{background:linear-gradient(90deg,var(--blue),var(--pink)); box-shadow:0 0 14px rgba(74,163,255,.25)}

.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(10,14,24,.55);
}

.footer{border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.footer__grid{max-width:1200px;margin:0 auto;padding:26px 16px;display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.orb{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(255,79,216,.9), rgba(139,92,246,.65), rgba(74,163,255,.55));
box-shadow:0 0 26px rgba(139,92,246,.28)}
.footer__name{font-weight:800;letter-spacing:.5px}
.footer__bottom{max-width:1200px;margin:0 auto;padding:14px 16px;color:rgba(234,240,255,.55);border-top:1px solid var(--line)}
.footer__links a{display:block;color:var(--muted);padding:8px 0}
.footer__links a:hover{color:var(--text)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cta-row--footer{margin-top:14px}

.ico{width:18px;height:18px;display:inline-block;filter:drop-shadow(0 0 10px rgba(139,92,246,.25))}
.ico--wa{background:conic-gradient(from 180deg, var(--blue), var(--purple), var(--pink));-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M19.11 17.28c-.28-.14-1.66-.82-1.92-.91s-.45-.14-.64.14-.73.91-.9 1.1-.32.21-.6.07a7.8 7.8 0 0 1-2.3-1.42 8.62 8.62 0 0 1-1.59-1.98c-.17-.28 0-.43.13-.57.13-.13.28-.32.42-.48.14-.16.18-.28.28-.46.09-.18.05-.36-.02-.5-.07-.14-.64-1.55-.88-2.12-.23-.56-.47-.48-.64-.49h-.55c-.19 0-.5.07-.76.36s-1 1-.99 2.44 1.02 2.84 1.16 3.03c.14.19 2 3.05 4.85 4.27.68.29 1.2.46 1.61.59.67.21 1.27.18 1.75.11.53-.08 1.66-.68 1.89-1.33.23-.65.23-1.21.16-1.33s-.25-.19-.53-.33ZM16.05 27.5h-.01c-1.83 0-3.62-.49-5.18-1.41l-.37-.22-3.84 1.01 1.03-3.74-.24-.39A11.36 11.36 0 0 1 4.69 16c0-6.28 5.11-11.39 11.39-11.39S27.47 9.72 27.47 16c0 6.28-5.11 11.5-11.42 11.5Zm0-20.64c-5.02 0-9.11 4.08-9.11 9.1 0 1.72.49 3.4 1.41 4.86l.3.47-.6 2.2 2.26-.59.45.27a9.06 9.06 0 0 0 4.68 1.29h.01c5.02 0 9.3-4.27 9.3-9.29 0-5.02-4.08-9.31-9.1-9.31Z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="black" d="M19.11 17.28c-.28-.14-1.66-.82-1.92-.91s-.45-.14-.64.14-.73.91-.9 1.1-.32.21-.6.07a7.8 7.8 0 0 1-2.3-1.42 8.62 8.62 0 0 1-1.59-1.98c-.17-.28 0-.43.13-.57.13-.13.28-.32.42-.48.14-.16.18-.28.28-.46.09-.18.05-.36-.02-.5-.07-.14-.64-1.55-.88-2.12-.23-.56-.47-.48-.64-.49h-.55c-.19 0-.5.07-.76.36s-1 1-.99 2.44 1.02 2.84 1.16 3.03c.14.19 2 3.05 4.85 4.27.68.29 1.2.46 1.61.59.67.21 1.27.18 1.75.11.53-.08 1.66-.68 1.89-1.33.23-.65.23-1.21.16-1.33s-.25-.19-.53-.33ZM16.05 27.5h-.01c-1.83 0-3.62-.49-5.18-1.41l-.37-.22-3.84 1.01 1.03-3.74-.24-.39A11.36 11.36 0 0 1 4.69 16c0-6.28 5.11-11.39 11.39-11.39S27.47 9.72 27.47 16c0 6.28-5.11 11.5-11.42 11.5Zm0-20.64c-5.02 0-9.11 4.08-9.11 9.1 0 1.72.49 3.4 1.41 4.86l.3.47-.6 2.2 2.26-.59.45.27a9.06 9.06 0 0 0 4.68 1.29h.01c5.02 0 9.3-4.27 9.3-9.29 0-5.02-4.08-9.31-9.1-9.31Z"/></svg>') center/contain no-repeat}
.ico--ig{background:conic-gradient(from 180deg, var(--blue), var(--purple), var(--pink));-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm-5 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm5.5-.9a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5Zm10 2H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3Zm-5 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm0 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm5.5-.9a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2Z"/></svg>') center/contain no-repeat}
.ico--form{background:conic-gradient(from 180deg, var(--blue), var(--purple), var(--pink));-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1v5h5M7 10h10v2H7v-2Zm0 4h10v2H7v-2Zm0 4h7v2H7v-2Z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 2h9l5 5v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1v5h5M7 10h10v2H7v-2Zm0 4h10v2H7v-2Zm0 4h7v2H7v-2Z"/></svg>') center/contain no-repeat}

/* Floating pro */
.float{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:10px;z-index:70}
.float__btn{
  width:54px;height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);backdrop-filter: blur(10px);
  display:grid;place-items:center;position:relative;overflow:hidden
}
.float__btn::before{
  content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 180deg, rgba(74,163,255,.0), rgba(74,163,255,.35), rgba(139,92,246,.35), rgba(255,79,216,.35), rgba(74,163,255,.0));
  animation:spin 2.8s linear infinite;opacity:.65
}
.float__btn::after{
  content:"";position:absolute;inset:2px;border-radius:14px;
  background:rgba(10,12,22,.72);border:1px solid rgba(255,255,255,.08)
}
.float__ico{
  width:22px;height:22px;position:relative;z-index:2;
  background:linear-gradient(90deg,var(--blue),var(--purple),var(--pink))
}
.float__ico--chat{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2 4h12v2H6V8Zm0 4h9v2H6v-2Z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2 4h12v2H6V8Zm0 4h9v2H6v-2Z"/></svg>') center/contain no-repeat;
}
.float__ico--cam{
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 4h6l1 2h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3l1-2Zm3 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 4h6l1 2h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3l1-2Zm3 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z"/></svg>') center/contain no-repeat;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* Loader */
#loader{
  position:fixed; inset:0; z-index:2000;
  display:grid; place-items:center;
  background:radial-gradient(900px 600px at 50% 35%, rgba(74,163,255,.10), transparent 55%),
             radial-gradient(900px 600px at 50% 65%, rgba(255,79,216,.08), transparent 60%),
             rgba(0,0,0,.92);
  transition: opacity .5s ease, visibility .5s ease;
}
#loader.hide{opacity:0; visibility:hidden}
.loader-ring{
  width:120px; height:120px; border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  border-top-color: var(--blue);
  border-right-color: var(--pink);
  animation: spin 1.2s linear infinite;
  box-shadow:0 0 22px rgba(74,163,255,.20), 0 0 28px rgba(255,79,216,.14);
}
.loader-text{margin-top:16px; text-align:center; font-weight:900; letter-spacing:.12em}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .65s ease,transform .65s ease,filter .65s ease}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0)}
.reveal--delay-1{transition-delay:.08s}
.reveal--delay-2{transition-delay:.16s}
.reveal--delay-3{transition-delay:.24s}

@media (max-width: 980px){
  .nav__links{display:none}
  .nav__burger{display:block}
  .hero__grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .slide-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
}


/* ===== INTRO BOOT ===== */
.intro-boot{
  position:fixed;
  inset:0;
  z-index:1900; /* debajo de loader (2000), encima del sitio */
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  opacity:0;
  visibility:hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.intro-boot.show{
  opacity:1;
  visibility:visible;
}

.intro-boot__box{
  width:min(560px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 70px rgba(0,0,0,.6);
  padding:18px 18px 16px;
  transform: translateY(12px) scale(.98);
  animation: bootIn .55s ease forwards;
  position:relative;
  overflow:hidden;
}

.intro-boot__box::before{
  content:"";
  position:absolute;
  inset:-60%;
  background:conic-gradient(from 180deg,
    rgba(74,163,255,0),
    rgba(74,163,255,.20),
    rgba(139,92,246,.20),
    rgba(255,79,216,.20),
    rgba(74,163,255,0)
  );
  filter: blur(22px);
  opacity:.55;
  animation: spin 7s linear infinite;
}

.intro-boot__box > *{ position:relative; z-index:2; }

.intro-boot__top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.intro-boot__dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(90deg,var(--blue),var(--pink));
  box-shadow:0 0 18px rgba(255,79,216,.35);
}

.intro-boot__title{
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(234,240,255,.8);
}

.intro-boot__chip{
  margin-left:auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  font-weight:900;
  letter-spacing:.12em;
  font-size:11px;
}

.intro-boot__lines{
  display:grid;
  gap:8px;
  margin:10px 0 12px;
}

.intro-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  font-size:12px;
}

.intro-line .k{
  color:rgba(234,240,255,.55);
  letter-spacing:.12em;
  font-weight:900;
}

.intro-line .v{
  color:rgba(234,240,255,.88);
  font-weight:900;
  letter-spacing:.06em;
}

.intro-boot__bar{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  overflow:hidden;
}

.intro-boot__bar span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--blue), var(--purple), var(--pink));
  animation: bootLoad 1.1s ease forwards;
}

@keyframes bootIn{
  to{ transform: translateY(0) scale(1); }
}

@keyframes bootLoad{
  to{ width:100%; }
}

/* ===== INTRO TERMINAL ===== */
.intro-boot__terminal{
  margin:10px 0 12px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  line-height:1.6;
  overflow:hidden;
}

.term-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.prompt{color:rgba(234,240,255,.65); font-weight:800;}
.path{color:rgba(74,163,255,.80); font-weight:900;}
.cmd{color:rgba(234,240,255,.92); font-weight:900; position:relative;}

.cmd::after{
  content:"";
  display:inline-block;
  width:7px;height:12px;
  margin-left:6px;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.85));
  transform:translateY(2px);
  animation: caretBlink .8s steps(1) infinite;
  opacity:.75;
}

.term-line.done .cmd::after{display:none;}

@keyframes caretBlink{
  50%{opacity:.1;}
}

.brand__logo,
.hero__img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 20;
}

.topbar, .nav { overflow: visible !important; }

@keyframes blinkCursor {
  50% {
    border-right-color: transparent;
  }
}

@keyframes typeAndDelete {
  0%,
  10% {
    width: 0;
  }
  45%,
  55% {
    width: 6.2em;
  } /* adjust width based on content */
  90%,
  100% {
    width: 0;
  }
}

.terminal-loader {
  border: 0.1em solid #333;
  background-color: #1a1a1a;
  color: #0f0;
  font-family: "Courier New", Courier, monospace;
  font-size: 1em;
  padding: 1.5em 1em;
  width: 12em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.terminal-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5em;
  background-color: #333;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding: 0 0.4em;
  box-sizing: border-box;
}

.terminal-controls {
  float: right;
}

.control {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.4em;
  border-radius: 50%;
  background-color: #777;
}

.control.close {
  background-color: #e33;
}

.control.minimize {
  background-color: #ee0;
}

.control.maximize {
  background-color: #0b0;
}

.terminal-title {
  float: left;
  line-height: 1.5em;
  color: #eee;
}

.text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 0.2em solid green; /* Cursor */
  animation:
    typeAndDelete 4s steps(11) infinite,
    blinkCursor 0.5s step-end infinite alternate;
  margin-top: 1.5em;
} /* ✅ ESTA LLAVE TE FALTABA */

/* =========================
   CONTACTO: terminal cards (AISLADO)
========================= */
.contact-grid-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

/* responsive */
@media (max-width: 980px){
  .contact-grid-3{ grid-template-columns: 1fr; }
}

.contact-card{
  padding: 1rem;
  overflow: hidden;
  border: 1px solid #c5c5c5;
  border-radius: 12px;
  background-color: #d9d9d92f;
  backdrop-filter: blur(8px);
}

.contact-wrap{
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  z-index:10;
  border:0.5px solid #525252;
  border-radius:8px;
  overflow:hidden;
}

.contact-terminal{
  display:flex;
  flex-direction:column;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

.contact-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow:hidden;
  min-height:40px;
  padding-inline:12px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  background-color:#202425;
}

.contact-title{
  display:flex;
  align-items:center;
  gap:8px;
  height:2.5rem;
  user-select:none;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8e8e8e;
}
.contact-title > svg{
  height:18px;
  width:18px;
  margin-top:2px;
  color:#006adc;
}

.contact-copy_toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.25rem;
  border:0.65px solid #c1c2c5;
  margin-left:auto;
  border-radius:6px;
  background-color:#202425;
  color:#8e8e8e;
  cursor:pointer;
}
.contact-copy_toggle > svg{
  width:20px;
  height:20px;
}

.contact-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
  overflow-x:auto;
  padding:1rem;
  line-height:19px;
  color:white;
  background-color:black;
  white-space:nowrap;
}

.contact-pre{
  display:flex;
  flex-direction:row;
  align-items:center;
  text-wrap:nowrap;
  white-space:pre;
  background-color:transparent;
  overflow:hidden;
  box-sizing:border-box;
  font-size:16px;
  margin:0;
}

.contact-pre code:nth-child(1){ color:#575757; }
.contact-pre code:nth-child(2){ color:#e34ba9; }

.contact-cmd{
  height:19px;
  position:relative;
  display:flex;
  align-items:center;
  flex-direction:row;
}

/* typing effect */
.contact-cmd::before{
  content: attr(data-cmd);
  position:relative;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  background-color:transparent;
  animation: contact-inputs 8s steps(22) infinite;
}
.contact-cmd::after{
  content:"";
  position:relative;
  display:block;
  height:100%;
  overflow:hidden;
  background-color:transparent;
  border-right:0.15em solid #e34ba9;
  animation: contact-cursor 0.5s step-end infinite alternate, contact-blinking 0.5s infinite;
}

.contact-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Animaciones con nombres únicos (no chocan con otras) */
@keyframes contact-blinking{
  20%, 80% { transform: scaleY(1); }
  50% { transform: scaleY(0); }
}
@keyframes contact-cursor{
  50% { border-right-color: transparent; }
}
@keyframes contact-inputs{
  0%, 100% { width:0; }
  10%, 90% { width:58px; }
  30%, 70% { width:215px; max-width:max-content; }
}

/* Accesibilidad: si alguien desactiva animaciones */
@media (prefers-reduced-motion: reduce){
  .contact-cmd::before,
  .contact-cmd::after{
    animation:none !important;
  }
}

.section {
  padding-bottom: 64px; /* antes se ve pegado al footer */
}

/* 2) Que los paneles tengan separación entre ellos */
.section .panel{
  margin-top: 18px !important;
  margin-bottom: 22px !important;
}

/* 3) Centrar y limitar ancho del grid de las terminal cards */
.contact-grid-3{
  max-width: 1100px;
  margin: 0 auto;
}

/* 4) Aire interno extra (opcional) para que se vea “en medio” */
.section .container{
  padding-top: 10px;
}

.section .panel{
  padding: 26px !important;
}

/* =========================================
   COMO-FUNCIONA: Cards neon animadas (AISLADO)
   No usa .container para no romper tu layout
========================================= */

.howfx-section{
  margin-top: 16px;
}

/* Grid 3 columnas (igual vibe que tu sitio) */
.howfx-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
}

@media (max-width: 980px){
  .howfx-grid{ grid-template-columns: 1fr; }
}

/* Card base (tamaño parecido a tu referencia) */
.howfx-card{
  position: relative;
  height: 170px;
  border-radius: 18px;
  overflow: hidden;

  /* Fondo */
  background: rgba(45,45,45,1);
  border: 1px solid rgba(255,255,255,.10);

  /* Para que se vea “pro” con tu estilo */
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

/* El “neón” animado */
.howfx-card::before{
  content:"";
  position:absolute;
  width: 1000px;
  height: 1000px;
  left: -85px;
  top: -85px;
  background: radial-gradient(var(--clr), transparent 60%);
  animation: howfx-animate 1.7s linear infinite;
}

/* Capa interna (la tapa oscura como tu diseño) */
.howfx-card::after{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 16px;
  background: rgba(45,45,45,.92);
}

/* Contenido por encima */
.howfx-inner{
  position: relative;
  z-index: 2;
  padding: 18px;
  height: 100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 8px;
}

.howfx-inner h3{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--text);
}

.howfx-inner .p{
  margin: 0;
  color: rgba(234,240,255,.72);
  line-height: 1.55;
  font-size: .98rem;
}

/* numerito tipo badge */
.howfx-num{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  box-shadow: 0 0 18px rgba(0,0,0,.35);
}

/* Animación */
@keyframes howfx-animate{
  0%   { transform: translate(-50%, -50%); }
  25%  { transform: translate(0%, -50%); }
  50%  { transform: translate(0%, 0%); }
  75%  { transform: translate(-50%, 0%); }
  100% { transform: translate(-50%, -50%); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .howfx-card::before{ animation: none !important; }
}

/* =========================================
   COMO-FUNCIONA: Card grande estilo Mac (AISLADO)
   (No usa .card para no romper tu diseño global)
========================================= */

.howmac-card{
  width: 100%;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(0,0,0,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  cursor: default;
  position: relative;
  overflow: hidden;
}

/* Glow sutil FVCKHAL */
.howmac-card::before{
  content:"";
  position:absolute;
  inset:-60%;
  background: conic-gradient(from 180deg,
    rgba(74,163,255,0),
    rgba(74,163,255,.20),
    rgba(139,92,246,.18),
    rgba(255,79,216,.16),
    rgba(74,163,255,0)
  );
  filter: blur(28px);
  opacity: .35;
  animation: spin 10s linear infinite;
}

.howmac-card > *{
  position: relative;
  z-index: 2;
}

.howmac-header{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 14px;
}

.howmac-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display:inline-block;
}
.howmac-dot.red{ background:#ff5f57; }
.howmac-dot.yellow{ background:#ffbd2e; }
.howmac-dot.green{ background:#28c941; }

.howmac-title{
  display:block;
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--text);
  letter-spacing: .2px;
}

.howmac-description{
  font-size: 14px;
  color: rgba(234,240,255,.68);
  margin: 0 0 14px;
  line-height: 1.6;
}

.howmac-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.howmac-tag{
  display:inline-block;
  font-size: 11px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 10px;
  color: rgba(234,240,255,.82);
}

/* Área tipo code editor */
.howmac-editor{
  background: rgba(13,17,23,.85);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px;
  overflow: auto;
  max-height: 220px;
}

.howmac-editor pre{
  margin: 0;
  white-space: pre-wrap;
}

.howmac-editor code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: rgba(234,240,255,.86);
  font-size: 14px;
  line-height: 1.6;
  display:block;
}

/* Scrollbar */
.howmac-editor::-webkit-scrollbar{ width: 8px; }
.howmac-editor::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.22);
  border-radius: 10px;
}

/* Botones */
.howmac-actions{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================
   HOWFX: fondo glow (solo background)
   ========================================= */

.howfx-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px; /* o el radio que ya uses */
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,14,24,.55); /* base */
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* Glow animado usando el color --clr que ya traes en el inline */
.howfx-card::before{
  content:"";
  position:absolute;
  inset:-70%;
  background: conic-gradient(
    from 180deg,
    rgba(0,0,0,0),
    color-mix(in srgb, var(--clr) 40%, transparent),
    rgba(0,0,0,0),
    color-mix(in srgb, var(--clr) 35%, transparent),
    rgba(0,0,0,0)
  );
  filter: blur(26px);
  opacity: .55;
  animation: howfxGlowSpin 9s linear infinite;
}

/* Capa para “limpiar” el centro y que se vea pro */
.howfx-card::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(12,16,28,.78), rgba(10,14,24,.35));
  border: 1px solid rgba(255,255,255,.06);
}

/* Asegura que el texto quede arriba del glow */
.howfx-inner{
  position: relative;
  z-index: 2;
}

@keyframes howfxGlowSpin{
  to{ transform: rotate(360deg); }
}