:root { --blue:#2563eb; --navy:#0f172a; --ink:#14213b; --mist:#eef6ff; --line:#d9e5f5; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--navy); background:var(--white); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { width:min(1240px, calc(100% - 48px)); min-height:86px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { font-weight:850; font-size:2rem; letter-spacing:-.1em; color:var(--blue); }.brand span { color:var(--navy); }
nav { display:flex; gap:26px; font-size:.92rem; font-weight:650; color:#40506a; } nav a:hover,.text-link:hover { color:var(--blue); }
.section { width:min(1240px, calc(100% - 48px)); margin:0 auto; }
.hero { display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap:54px; padding:72px 0 90px; }
.eyebrow { margin:0 0 16px; color:var(--blue); text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:800; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:670px; margin-bottom:25px; color:var(--navy); letter-spacing:-.067em; font-size:clamp(3.4rem,6.1vw,5.9rem); line-height:.95; } h1 em { color:var(--blue); font-style:normal; }
h2 { max-width:700px; letter-spacing:-.048em; font-size:clamp(2.2rem,4vw,4rem); line-height:1.02; } h3 { letter-spacing:-.028em; font-size:1.25rem; }
.lead { max-width:580px; color:#41516b; font-size:1.16rem; line-height:1.6; }.hero-actions { display:flex; gap:25px; align-items:center; margin:34px 0 57px; }.button { display:inline-flex; justify-content:center; align-items:center; min-height:52px; padding:0 23px; border-radius:9px; background:var(--blue); color:white; font-size:.93rem; font-weight:800; box-shadow:0 8px 20px #2563eb24; }.button:hover { background:#1d4ed8; transform:translateY(-1px); }.button-small { min-height:40px; padding:0 17px; }.text-link { font-size:.92rem; font-weight:750; }.text-link span { color:var(--blue); font-size:1.2rem; margin-left:4px; }
.hero-visual { position:relative; }.hero-visual::before { content:""; position:absolute; inset:-5% -5% auto auto; z-index:-1; width:56%; aspect-ratio:1; border-radius:50%; background:var(--mist); }.hero-visual img { width:100%; display:block; border-radius:30px; box-shadow:0 32px 60px #0f172a1c; }
.proof-points { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:0; }.proof-points div { border-left:1px solid var(--line); padding-left:14px; }.proof-points dt { font-size:.79rem; font-weight:800; }.proof-points dd { margin:7px 0 0; color:#6b7a91; font-size:.72rem; line-height:1.4; }
.statement { padding:110px max(7vw,30px); background:var(--navy); color:white; border-radius:28px; }.statement h2 { margin-bottom:20px; }.statement p:last-child { max-width:600px; color:#c9d6e9; font-size:1.08rem; line-height:1.65; }.statement .eyebrow { color:#85aaff; }
#como-funciona { padding:140px 0; }.section-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }.section-intro h2 { margin-bottom:0; }.steps { list-style:none; margin:60px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.steps li { padding:28px 34px 0 0; }.steps li+li { border-left:1px solid var(--line); padding-left:34px; }.steps span { display:block; margin-bottom:55px; color:var(--blue); font-size:.8rem; font-weight:850; }.steps p,.audience p { color:#586981; line-height:1.6; font-size:.94rem; }
.audience { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding:105px max(7vw,30px); background:var(--mist); border-radius:28px; }.audience-grid { display:grid; gap:1px; background:#cfdff2; border:1px solid #cfdff2; }.audience article { background:var(--mist); padding:8px 26px 21px; }.audience article h3 { margin-bottom:8px; }
.contact { margin-top:140px; padding:110px max(7vw,30px); text-align:center; background:var(--blue); color:white; border-radius:28px; }.contact .eyebrow { color:#c9dcff; }.contact h2 { margin:0 auto 18px; }.contact p { max-width:540px; margin:0 auto 32px; color:#dbe9ff; line-height:1.6; }.button-light { background:white; color:var(--blue); box-shadow:none; }.button-light:hover { background:#eff6ff; }
footer { width:min(1240px, calc(100% - 48px)); display:flex; align-items:center; justify-content:space-between; gap:25px; margin:82px auto 30px; padding-top:28px; border-top:1px solid var(--line); color:#68758a; font-size:.76rem; } footer .brand { font-size:1.55rem; } footer p { margin:0; }
@media (max-width:800px) { .site-header { width:min(100% - 32px,1240px); min-height:72px; }.site-header nav { display:none; }.site-header .button { display:none; }.section { width:min(100% - 32px,1240px); }.hero { grid-template-columns:1fr; padding:48px 0 70px; gap:40px; }.hero-copy { order:1; }.hero-visual { order:2; }.proof-points { grid-template-columns:1fr; gap:18px; }.proof-points div { border-left:2px solid #d5e4ff; }.statement,#como-funciona { padding:72px 28px; }.statement { width:calc(100% - 32px); }.steps { grid-template-columns:1fr; margin-top:40px; }.steps li,.steps li+li { border-left:0; border-bottom:1px solid var(--line); padding:26px 0; }.steps span { margin-bottom:24px; }.audience { width:calc(100% - 32px); grid-template-columns:1fr; gap:35px; padding:72px 28px; }.contact { width:calc(100% - 32px); margin-top:72px; padding:72px 26px; } footer { align-items:flex-start; flex-direction:column; margin-top:50px; } }