/* brightboost IT — estilos */
:root{
  --bg:#F7F6F2; --surface:#FFFFFF; --warm:#EDECEA;
  --indigo:#1A1F5E; --indigo2:#252B78; --indigo3:#3A4196;
  --cyan:#00C2CB; --cyan-ink:#00808A;
  --text2:#3D3D3A; --muted:#666662; --line:#E2E1DC; --line2:#D3D2CC;
  --ok:#16A34A; --warn:#D97706;
  --display:'Space Grotesk',sans-serif; --mono:'DM Mono',monospace;
  --pad:80px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--indigo);font-family:var(--display);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--cyan-ink)}a:hover{color:var(--indigo)}
img,svg{display:block}
button{font-family:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font-family:var(--mono);font-size:13px;color:var(--cyan-ink);letter-spacing:.02em}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(38px,5vw,64px)}
p{margin:0}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 26px;border-radius:14px;font-weight:600;font-size:17px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:transform .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cyan);color:var(--indigo)}
.btn-primary:hover{color:var(--indigo);background:#1BD3DB}
.btn-ghost{background:transparent;color:var(--indigo);border-color:var(--line2)}
.btn-ghost:hover{color:var(--indigo);border-color:var(--indigo)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px}
.sec{padding:112px 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:48px}
.sec-head .lead{max-width:420px;font-size:18px;color:var(--muted)}
.stack16{display:flex;flex-direction:column;gap:16px}

/* animaciones */
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)}70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cursor{animation:blink 1s steps(1) infinite}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;animation:pulse 1.8s infinite}
.fade{animation:fadein .45s ease both}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(247,246,242,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--indigo)}
.logo-mark{width:36px;height:36px;border-radius:10px;background:var(--cyan);display:flex;align-items:center;justify-content:center}
.logo-text{font-weight:700;font-size:22px;letter-spacing:-.02em}
.logo-text b{color:var(--cyan-ink);font-weight:700}
.logo-tag{margin-left:8px;font-family:var(--mono);font-size:13px;font-weight:500;background:var(--cyan);color:var(--indigo);padding:3px 8px;border-radius:6px;vertical-align:middle;letter-spacing:0}
.menu{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px}
.menu a{color:var(--text2);text-decoration:none;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:500}
.menu a:hover{background:var(--warm);color:var(--indigo)}
.nav-cta{min-height:46px;border-radius:999px;font-size:15px;padding:0 22px}
.burger{display:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;align-items:center;justify-content:center}
.mobile-menu{display:none}

/* hero */
.hero{padding-top:96px;padding-bottom:88px;display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.hero-live{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--muted)}
.hero-live .dot{background:#4ADE80}
.hero h1{font-size:clamp(48px,7vw,96px);line-height:.95;letter-spacing:-.045em;margin:28px 0}
.hero h1 .word{color:var(--cyan-ink)}
.hero .lead{font-size:20px;color:var(--muted);max-width:600px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin:32px 0}
.stats{display:flex;gap:40px;flex-wrap:wrap}
.stat b{display:block;font-size:36px;font-weight:700;letter-spacing:-.03em}
.stat span{font-size:14px;color:var(--muted)}
.stat-sep{width:1px;background:var(--line)}

.panel{background:var(--indigo);border:1px solid var(--indigo2);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:16px;font-family:var(--mono);color:#fff;box-shadow:0 30px 60px -20px rgba(26,31,94,.45);animation:float 6s ease-in-out infinite}
.panel-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#B8BBDD}
.panel-top .lights{display:flex;align-items:center;gap:8px}
.panel-top .lights i{width:9px;height:9px;border-radius:50%;display:inline-block}
.live-tag{display:flex;align-items:center;gap:8px;color:#4ADE80}
.live-tag .dot{width:7px;height:7px;background:#4ADE80}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{background:var(--indigo2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px}
.tile span{font-size:11px;color:#B8BBDD}
.tile b{font-family:var(--display);font-size:28px;font-weight:700}
.chart{background:var(--indigo2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
.chart-head{display:flex;justify-content:space-between;font-size:11px;color:#B8BBDD}
.bars{height:110px;display:flex;align-items:flex-end;gap:5px}
.bars i{flex:1;border-radius:4px;background:var(--indigo3);transition:height .8s cubic-bezier(.2,.8,.2,1)}
.bars i:last-child{background:var(--cyan)}
.logs{display:flex;flex-direction:column;gap:8px;font-size:12px;min-height:148px}
.log{display:flex;gap:10px;align-items:center;background:var(--indigo2);border-radius:10px;padding:8px 12px;animation:fadein .45s ease both}
.log .t{color:#8F93C4}.log .m{color:#E6E7F5}

/* marquee */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;overflow:hidden}
.track{display:flex;gap:56px;width:max-content;font-size:30px;font-weight:600;color:#9A9CB8;white-space:nowrap;animation:marquee 28s linear infinite}
.track em{font-style:normal;color:var(--cyan-ink)}

/* servicios */
.svc{display:grid;grid-template-columns:5fr 7fr;gap:24px}
.svc-list{display:flex;flex-direction:column;gap:12px}
.svc-btn{display:flex;align-items:center;gap:18px;width:100%;min-height:84px;padding:0 28px;border-radius:18px;cursor:pointer;background:var(--surface);color:var(--indigo);border:1px solid var(--line);transition:all .25s ease;text-align:left}
.svc-btn:hover{border-color:var(--indigo)}
.svc-btn .n{font-family:var(--mono);font-size:14px;opacity:.7}
.svc-btn .name{flex:1;font-size:26px;font-weight:600;letter-spacing:-.02em}
.svc-btn .arr{font-size:22px}
.svc-btn[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan)}
.svc-detail{padding:44px;display:flex;flex-direction:column;gap:24px}
.svc-detail h3{font-size:44px}
.svc-detail .desc{font-size:18px;color:var(--text2)}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.point{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:16px}
.point svg{flex-shrink:0;margin-top:3px}
.svc-foot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.svc-foot .price{font-size:28px;font-weight:700;color:var(--cyan-ink)}

/* test */
.quiz{background:var(--cyan);border-radius:32px;padding:64px;display:grid;grid-template-columns:5fr 7fr;gap:32px;min-height:480px}
.quiz-left{display:flex;flex-direction:column;gap:20px}
.quiz-left h2{font-size:clamp(34px,4.4vw,56px)}
.quiz-left .eyebrow{color:var(--indigo)}
.progress{height:8px;background:rgba(26,31,94,.15);border-radius:999px;overflow:hidden;margin-top:auto}
.progress i{display:block;height:100%;width:0;background:var(--indigo);border-radius:999px;transition:width .4s ease}
.quiz-box{background:var(--bg);border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:14px}
.quiz-box h3{font-size:30px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;line-height:1.15}
.opt{display:flex;align-items:center;gap:14px;text-align:left;min-height:60px;padding:16px 20px;background:var(--surface);color:var(--indigo);border:1px solid var(--line);border-radius:14px;font-size:17px;cursor:pointer;transition:border-color .2s ease,transform .2s ease}
.opt:hover{border-color:var(--cyan);transform:translateX(4px)}
.opt .k{font-family:var(--mono);font-size:13px;color:var(--cyan-ink)}
.link-btn{align-self:flex-start;background:none;border:none;color:var(--muted);font-size:15px;padding:12px 0;cursor:pointer}
.rec h3{font-size:44px;font-weight:700;letter-spacing:-.03em}

/* precios */
.prices{display:grid;grid-template-columns:7fr 5fr;gap:24px}
.price-box{padding:32px;display:flex;flex-direction:column;gap:24px}
.tabs{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:6px}
.tab{flex:1;min-height:46px;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;background:transparent;color:var(--muted);transition:all .2s ease}
.tab[aria-selected="true"]{background:var(--cyan);color:var(--indigo)}
.row{display:grid;grid-template-columns:130px minmax(0,1fr) 190px;gap:20px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line)}
.row .plan{font-size:22px;font-weight:600}
.row .scope{color:var(--muted);font-size:16px}
.row .amt{text-align:right;font-size:22px;font-weight:700}
.calc{padding:32px;display:flex;flex-direction:column;gap:22px;border-color:var(--cyan)}
.calc h3{font-size:30px}
.stepper-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.stepper-row small{display:block;font-size:13px;color:var(--muted)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;border-radius:12px;background:var(--bg);color:var(--indigo);border:1px solid var(--line2);font-size:20px;cursor:pointer}
.stepper output{width:52px;text-align:center;font-size:26px;font-weight:700}
.calc-lines{display:flex;flex-direction:column;gap:10px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.calc-lines div{display:flex;justify-content:space-between}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.calc-total b{font-size:44px;font-weight:700;color:var(--cyan-ink);letter-spacing:-.03em}
.combo{margin-top:24px;background:var(--indigo);color:#fff;border-radius:18px;padding:32px 40px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.combo b{font-size:26px}
.combo span{display:block;color:#B8BBDD}

/* proceso */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.step{padding:32px;display:flex;flex-direction:column;gap:16px;min-height:280px;transition:transform .25s ease,border-color .25s ease}
.step:hover{transform:translateY(-4px);border-color:var(--indigo)}
.step .num{font-size:64px;font-weight:700;color:var(--line2);line-height:1}
.step:last-child{border-color:var(--cyan)}
.step:last-child .num{color:var(--cyan-ink)}
.step h3{font-size:24px;font-weight:600;letter-spacing:-.02em}
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.why div{display:flex;gap:16px;padding:24px;border-top:1px solid var(--line)}
.why i{font-style:normal;font-family:var(--mono);color:var(--cyan-ink)}
.why b{display:block;font-size:17px;margin-bottom:6px}

/* contacto */
.contact{padding:64px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.contact h2{font-size:clamp(38px,4.6vw,60px)}
.ways{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.way{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--indigo);font-weight:600;font-size:18px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:transform .2s ease,border-color .2s ease;overflow-wrap:anywhere;min-width:0}
.way:hover{transform:translateY(-3px);border-color:var(--indigo);color:var(--indigo)}
form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:15px;font-weight:600}
.field input,.field select,.field textarea{min-height:54px;padding:0 16px;border:1px solid var(--line2);border-radius:12px;font-size:16px;font-family:inherit;background:var(--bg);color:var(--indigo)}
.field textarea{padding:14px 16px;resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:var(--cyan)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--indigo)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:16px 18px;border-radius:12px;font-weight:600}
.alert.ok{background:#DCFCE7;color:#14532D}
.alert.err{background:#FEE2E2;color:#7F1D1D}

footer{border-top:1px solid var(--line);padding:48px 0;color:var(--muted);font-size:15px}
.foot{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-cols{display:flex;gap:72px;flex-wrap:wrap}
.foot-cols div{display:flex;flex-direction:column;gap:10px}
.foot-cols b{color:var(--indigo)}
.foot a{color:var(--muted);text-decoration:none}.foot a:hover{color:var(--indigo)}
.wa{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(0,0,0,.18);z-index:60}

/* responsive */
@media (max-width:1100px){
  :root{--pad:40px}
  .menu{display:none}
  .burger{display:flex}
  .nav-cta{display:none}
  .mobile-menu.open{display:flex;flex-direction:column;gap:4px;padding:12px var(--pad) 20px;border-top:1px solid var(--line)}
  .mobile-menu a{padding:14px 4px;color:var(--indigo);text-decoration:none;font-size:18px;font-weight:600;border-bottom:1px solid var(--line)}
  .hero,.svc,.quiz,.prices,.contact{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px}
  .sec-head .lead{max-width:640px}
}
@media (max-width:640px){
  :root{--pad:16px}
  body{font-size:16px}
  .sec{padding:72px 0}
  .hero{padding-top:48px;padding-bottom:56px;gap:40px}
  .hero .lead{font-size:18px}
  .hero-ctas .btn{width:100%}
  .stats{gap:20px}.stat b{font-size:28px}.stat-sep{display:none}
  .panel{padding:16px;animation:none}
  .tile b{font-size:22px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:16px}
  .svc-btn{min-height:68px;padding:0 18px}.svc-btn .name{font-size:20px}
  .svc-detail{padding:24px}.svc-detail h3{font-size:32px}
  .points{grid-template-columns:1fr}
  .quiz{padding:28px 20px;border-radius:24px}
  .quiz-box{padding:20px}.quiz-box h3{font-size:24px}.rec h3{font-size:32px}
  .tabs{flex-wrap:wrap}.tab{flex:1 1 45%}
  .price-box,.calc{padding:20px}
  .row{grid-template-columns:1fr auto;gap:6px 12px;padding:16px 0}
  .row .scope{grid-column:1/-1;grid-row:2}
  .row .plan,.row .amt{font-size:19px}
  .calc-total b{font-size:34px}
  .combo{padding:24px}
  .steps{grid-template-columns:1fr}.step{min-height:0}
  .contact{padding:24px;gap:40px;border-radius:24px}
  .two{grid-template-columns:1fr}
  .track{font-size:22px;gap:32px}
  .panel-top .lights span{display:none}
  .way{font-size:16px;padding:16px}
  .wa{width:52px;height:52px;right:14px;bottom:14px}
}
@media (max-width:400px){
  .log .t{display:none}
  .tiles{gap:6px}.tile{padding:10px}.tile b{font-size:19px}
  .stepper button{width:40px;height:40px}.stepper output{width:40px}
}