@font-face { font-family: Inter; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0b0e1c; --bg2: #12162b; --card: #151a33; --line: #ffffff14; --line2: #ffffff24;
  --fg: #f4f5fb; --mute: #a5abc9; --dim: #6f7598;
  --acc: #5eead4; --acc2: #818cf8; --grad: linear-gradient(135deg, var(--acc), var(--acc2));
  --r: 18px; --max: 1140px;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth; scroll-padding-top: 84px }
body { font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif; background: var(--bg); color: var(--fg);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip }
img { max-width: 100%; display: block }
a { color: inherit }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
section { padding: 96px 0; position: relative }
.eyebrow { color: var(--acc); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px }
h1, h2, h3 { letter-spacing: -.03em; line-height: 1.08 }
h2 { font-size: clamp(30px, 4.6vw, 48px); font-weight: 800; max-width: 22ch }
.sub { color: var(--mute); font-size: clamp(16px, 1.8vw, 19px); max-width: 60ch; margin-top: 16px }
.center { text-align: center } .center h2, .center .sub { margin-left: auto; margin-right: auto }

/* Botones */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; font-weight: 600;
  text-decoration: none; font-size: 16px; transition: transform .15s, box-shadow .2s, border-color .2s; cursor: pointer; border: 0 }
.btn:hover { transform: translateY(-2px) }
.btn-p { background: var(--acc); color: #06121a; box-shadow: 0 8px 30px -8px #5eead480 }
.btn-p:hover { box-shadow: 0 12px 40px -8px #5eead4aa }
.btn-s { border: 1px solid var(--line2); color: var(--fg); background: #ffffff06 }
.btn-s:hover { border-color: var(--acc) }

/* Nav */
nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent }
nav.scrolled { background: #0b0e1ccc; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line) }
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; letter-spacing: -.03em; text-decoration: none }
.logo img { width: 32px; height: 32px; border-radius: 9px }
.links { display: flex; gap: 28px; align-items: center }
.links a { text-decoration: none; color: var(--mute); font-size: 15px; font-weight: 500 }
.links a:hover { color: var(--fg) }
.links .btn { color: #06121a; padding: 10px 16px; font-size: 14px }
.burger { display: none; background: none; border: 0; color: var(--fg); font-size: 26px; cursor: pointer }

/* Hero */
.hero { padding: 150px 0 90px; overflow: hidden; position: relative }
.hero::before { content: ""; position: absolute; width: 900px; height: 900px; right: -300px; top: -350px; border-radius: 50%;
  background: radial-gradient(circle, #818cf833, transparent 60%); pointer-events: none }
.hero::after { content: ""; position: absolute; width: 700px; height: 700px; left: -320px; bottom: -380px; border-radius: 50%;
  background: radial-gradient(circle, #5eead422, transparent 60%); pointer-events: none }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; position: relative; z-index: 1 }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #5eead455; color: var(--acc); padding: 7px 14px;
  border-radius: 999px; font-size: 13px; font-weight: 600 }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 0 #5eead4; animation: pulse 2s infinite }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px #5eead400 } 100% { box-shadow: 0 0 0 0 #5eead400 } }
.hero h1 { font-size: clamp(42px, 6.6vw, 78px); font-weight: 800; margin: 22px 0 22px; letter-spacing: -.04em }
.hero .sub { font-size: clamp(17px, 2vw, 20px) }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px }
.trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 34px; color: var(--dim); font-size: 14px }
.trust span::before { content: "✓ "; color: var(--acc); font-weight: 700 }

/* Flujo animado */
.flow { background: linear-gradient(180deg, #171c38, #10142a); border: 1px solid var(--line2); border-radius: 22px; padding: 22px;
  box-shadow: 0 40px 80px -30px #000c, 0 0 0 1px #ffffff08 inset }
.flow-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 13px; color: var(--mute) }
.flow-head b { color: var(--fg); font-size: 14px }
.live { color: var(--acc); font-weight: 600; display: flex; align-items: center; gap: 6px }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: pulse 2s infinite }
.step { display: flex; gap: 14px; align-items: center; padding: 13px 14px; border-radius: 14px; background: #ffffff05;
  border: 1px solid var(--line); margin-bottom: 10px; opacity: .35; transition: opacity .4s, border-color .4s, background .4s, transform .4s }
.step.on { opacity: 1; border-color: #5eead455; background: #5eead40d; transform: translateX(4px) }
.step .ic { width: 38px; height: 38px; border-radius: 10px; background: #ffffff0d; display: grid; place-items: center; font-size: 18px; flex: none }
.step b { display: block; font-size: 14.5px } .step small { color: var(--mute); font-size: 12.5px }
.step .ok { margin-left: auto; color: var(--acc); font-weight: 700; opacity: 0; transition: opacity .3s }
.step.done .ok { opacity: 1 }
.flow-foot { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute) }
.flow-foot b { color: var(--acc); font-size: 15px }

/* Dolores */
.pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px }
.pain { padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: #ffffff04 }
.pain .e { font-size: 26px } .pain p { color: var(--mute); font-size: 15px; margin-top: 10px }
.pain b { color: var(--fg) }

/* Servicios */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px }
.svc { padding: 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); position: relative;
  transition: transform .25s, border-color .25s; display: flex; flex-direction: column }
.svc:hover { transform: translateY(-4px); border-color: #5eead455 }
.svc.star { border-color: #5eead466; background: linear-gradient(180deg, #5eead40f, var(--card) 60%) }
.svc .tag { position: absolute; top: 18px; right: 18px; font-size: 11px; font-weight: 700; color: #06121a; background: var(--acc);
  padding: 4px 9px; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em }
.svc .e { width: 48px; height: 48px; border-radius: 13px; background: #ffffff0a; display: grid; place-items: center; font-size: 24px }
.svc h3 { font-size: 21px; margin: 18px 0 8px }
.svc p { color: var(--mute); font-size: 15px; flex: 1 }
.svc ul { list-style: none; margin: 16px 0 18px } .svc li { font-size: 14px; color: var(--fg); padding: 3px 0 }
.svc li::before { content: "→ "; color: var(--acc) }
.price { border-top: 1px solid var(--line); padding-top: 16px; font-size: 14px; color: var(--mute) }
.price b { color: var(--fg); font-size: 20px; letter-spacing: -.02em }
.price .ask { color: var(--acc); font-weight: 600; font-size: 15px; text-decoration: none }
.price .ask:hover { text-decoration: underline }

/* Calculadora */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px; border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line2); background: var(--card) }
.calc-in { padding: 36px }
.field { margin-bottom: 28px }
.field label { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; margin-bottom: 12px }
.field label { gap: 16px } .field label output { color: var(--acc); font-variant-numeric: tabular-nums; white-space: nowrap }
input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; background: #ffffff1a; outline: none }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 6px #5eead433; cursor: pointer }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--acc); cursor: pointer }
.calc-out { padding: 36px; background: linear-gradient(160deg, #5eead41a, #818cf81a); display: flex; flex-direction: column; justify-content: center }
.big { font-size: clamp(44px, 6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums }
.calc-out .lbl { color: var(--mute); font-size: 15px; margin: 6px 0 24px }
.calc-out .row { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 26px }
.calc-out .row div b { display: block; font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.calc-out .row div span { color: var(--mute); font-size: 13px }
.note { color: var(--dim); font-size: 12.5px; margin-top: 14px }

/* Proceso */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; counter-reset: s }
.pstep { padding: 26px; border-radius: var(--r); border: 1px solid var(--line); position: relative }
.pstep::before { counter-increment: s; content: "0" counter(s); font-size: 44px; font-weight: 800; letter-spacing: -.04em; display: block;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 14px }
.pstep h3 { font-size: 18px; margin-bottom: 8px } .pstep p { color: var(--mute); font-size: 14.5px }
.pstep small { display: inline-block; margin-top: 12px; color: var(--acc); font-weight: 600; font-size: 13px }

/* Diferencial */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.stat { padding: 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line) }
.stat b { font-size: 42px; font-weight: 800; letter-spacing: -.04em; display: block; line-height: 1.1 }
.stat span { color: var(--mute); font-size: 14px }
.checks { list-style: none; margin-top: 26px } .checks li { padding: 9px 0 9px 34px; position: relative; color: var(--mute) }
.checks li b { color: var(--fg) }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 9px; width: 22px; height: 22px; border-radius: 6px;
  background: #5eead422; color: var(--acc); font-size: 13px; font-weight: 800; display: grid; place-items: center }

/* Sobre mí */
.about { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; padding: 44px; border-radius: 28px;
  border: 1px solid var(--line2); background: linear-gradient(135deg, #151a33, #0f1328) }
.about img { width: 100%; height: auto; max-width: 240px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin: 0 auto; box-shadow: 0 0 0 6px #5eead422, 0 0 0 7px #5eead455 }
.about h2 { font-size: clamp(26px, 3.4vw, 36px) }
.about p { color: var(--mute); margin-top: 14px; font-size: 16.5px }
.timeline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px }
.timeline span { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); color: var(--fg) }

/* FAQ */
.faq { max-width: 820px; margin: 44px auto 0 }
details { border-bottom: 1px solid var(--line); padding: 20px 0 }
summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 20px }
summary::-webkit-details-marker { display: none }
summary::after { content: "+"; color: var(--acc); font-size: 24px; line-height: 1; transition: transform .2s }
details[open] summary::after { transform: rotate(45deg) }
details p { color: var(--mute); margin-top: 12px; font-size: 15.5px }

/* CTA final */
.final { text-align: center; padding: 72px 28px; border-radius: 32px; position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #818cf840, transparent 60%), linear-gradient(180deg, #151a33, #0f1328); border: 1px solid var(--line2) }
.final h2 { margin: 0 auto; font-size: clamp(32px, 5vw, 54px) }
.final .ctas { justify-content: center }

/* Footer */
footer { padding: 48px 0 40px; border-top: 1px solid var(--line); margin-top: 40px; color: var(--dim); font-size: 14px }
footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap }
footer a { color: var(--mute); text-decoration: none } footer a:hover { color: var(--fg) }
footer nav, footer .fl { position: static; display: flex; gap: 18px; flex-wrap: wrap }

/* WhatsApp flotante */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25d366;
  display: grid; place-items: center; box-shadow: 0 10px 30px -6px #25d36699; transition: transform .2s }
.wa:hover { transform: scale(1.08) } .wa svg { width: 30px; height: 30px; fill: #fff }

/* Aparición */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease }
.rv.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none } * { animation: none !important; transition: none !important } }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid, .why, .calc { grid-template-columns: 1fr }
  .services { grid-template-columns: 1fr 1fr } .pains, .steps { grid-template-columns: 1fr 1fr }
  .about { grid-template-columns: 1fr; padding: 28px; gap: 28px } .about img { max-width: 220px }
}
@media (max-width: 760px) {
  .links { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #0b0e1cf2; backdrop-filter: blur(14px); padding: 10px 20px 20px; border-bottom: 1px solid var(--line) }
  .links.open { display: flex } .links a { padding: 12px 0 } .links .btn { justify-content: center; margin-top: 8px }
  .burger { display: block }
  section { padding: 72px 0 } .hero { padding: 120px 0 64px }
  .services, .pains, .steps, .stats { grid-template-columns: 1fr }
  .calc-in, .calc-out { padding: 26px }
}

/* Páginas legales */
.legal { padding: 130px 0 60px; max-width: 780px }
.legal h1 { font-size: 40px; margin-bottom: 10px } .legal h2 { font-size: 22px; margin: 34px 0 10px; max-width: none }
.legal p, .legal li { color: var(--mute); margin-bottom: 10px } .legal ul { padding-left: 20px }

/* Formulario de diagnóstico */
.dform { max-width: 760px; margin: 36px auto 0; display: grid; gap: 16px; text-align: left }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.dform label { display: grid; gap: 7px; font-weight: 600; font-size: 14.5px }
.dform label small { color: var(--dim); font-weight: 400 }
.dform input, .dform select, .dform textarea { font: inherit; font-weight: 400; color: var(--fg); background: #0b0e1c;
  border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; width: 100%; outline: none; transition: border-color .2s, box-shadow .2s }
.dform textarea { resize: vertical; min-height: 96px }
.dform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px }
.dform input:focus, .dform select:focus, .dform textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 4px #5eead422 }
.dform ::placeholder { color: var(--dim) }
.dform .chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--mute); font-size: 14px }
.dform .chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acc); flex: none }
.dform .chk a, .dform .note a { color: var(--acc) }
.dform button { justify-self: start; font-size: 17px; padding: 16px 26px }
@media (max-width: 760px) { .frow { grid-template-columns: 1fr } .dform button { justify-self: stretch; justify-content: center } }
.dfail { border: 1px solid #f59e0b66; background: #f59e0b14; color: var(--fg); padding: 14px 16px; border-radius: 12px; display: grid; gap: 12px; justify-items: start }
.dfail[hidden] { display: none }
.dfail textarea { width: 100%; font: 13px/1.5 ui-monospace, monospace; color: var(--fg); background: #0b0e1c; border: 1px solid var(--line2); border-radius: 10px; padding: 10px }
.dfail-btns { display: flex; flex-wrap: wrap; gap: 8px } .dfail-btns .btn { padding: 10px 14px; font-size: 14px }
.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px }
.extra { padding: 20px 24px; border-radius: var(--r); border: 1px dashed #5eead466; background: #5eead408; display: grid; gap: 4px }
.extra span { color: var(--mute); font-size: 15px } .extra span b { color: var(--fg) }
@media (max-width: 1000px) { .extras { grid-template-columns: 1fr } }
.services.mk { grid-template-columns: repeat(4, 1fr) }
@media (max-width: 1100px) { .services.mk { grid-template-columns: 1fr 1fr } }
@media (max-width: 760px) { .services.mk { grid-template-columns: 1fr } }
.principles .pstep::before { content: none } .principles { margin-top: 36px }
.principles .pstep { background: var(--card) }
.founder { margin-top: 26px; color: var(--mute); font-size: 15px } .founder a { color: var(--acc); text-decoration: none }