@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
/* Header brand and language controls */
.brand { width:220px !important; height:64px !important; gap:9px; background:transparent; flex-shrink:0; }
.brand-mark { width:58px; height:64px; display:block; overflow:hidden; position:relative; flex-shrink:0; }
.brand-mark img { position:absolute; width:144px !important; height:auto !important; max-width:none !important; left:-25px; top:-3px; mix-blend-mode:screen; filter:drop-shadow(0 0 9px rgba(242,24,168,.28)); }
.brand-copy { display:flex; flex-direction:column; justify-content:center; line-height:1; white-space:nowrap; }
.brand-copy strong { color:#fff; font-size:20px; font-weight:700; }
.brand-copy small { color:#e63ab7; font-size:9px; letter-spacing:2.5px; margin-top:7px; }
@media (max-width:800px) { .brand { width:auto; } .brand-mark { width:50px; } .brand-mark img { left:-29px; } .brand-copy strong { font-size:17px; } }
.brand-mark { width:52px; }
.brand-mark img { width:108px !important; left:-19px; }
.hero { background:#090a13; }
.brand { width:220px !important; height:auto !important; display:flex; align-items:center; overflow:visible; }
.brand > img { display:block; width:220px !important; height:auto !important; max-width:100%; object-fit:contain; filter:drop-shadow(0 0 10px rgba(242,24,168,.2)); }
.brand-mark, .brand-copy { display:none; }
@media (max-width:800px) { .brand { width:180px !important; } .brand > img { width:180px !important; } }
@media (max-width:460px) { .brand { width:150px !important; } .brand > img { width:150px !important; } .nav-actions { gap:6px; } .nav-actions .button { padding-left:9px; padding-right:9px; } }
.hero-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,46%); gap:28px; }
.hero-copy { width:auto; position:relative; z-index:1; }
.hero-visual { min-width:0; height:100%; display:flex; align-items:center; justify-content:flex-end; overflow:hidden; position:relative; z-index:1; }
.hero-visual img { display:block; width:100%; max-width:540px; max-height:430px; object-fit:contain; object-position:center; mix-blend-mode:screen; filter:drop-shadow(0 18px 34px rgba(242,24,168,.22)); }
@media (max-width:800px) { .brand-mark { width:48px; } .brand-mark img { left:-21px; } .hero-content { display:flex; flex-direction:column; gap:0; } .hero-visual { width:100%; height:270px; margin-top:auto; justify-content:center; } .hero-visual img { width:92%; max-height:270px; } }
:root { --ink:#080811; --pink:#f218a8; --text:#f7f4fb; --muted:#bbb5c9; --line:#392643; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--ink); color:var(--text); font-family:'Space Grotesk',sans-serif; } a { color:inherit; text-decoration:none; }
.page-width,.nav-shell { width:min(1120px,calc(100% - 48px)); margin:0 auto; } .site-header { background:rgba(11,10,20,.92); border-bottom:1px solid rgba(255,255,255,.04); position:relative; z-index:3; } .nav-shell { min-height:112px; display:flex; align-items:center; gap:34px; } .brand { width:172px; height:88px; display:flex; align-items:center; overflow:hidden; } .brand img { width:86px; height:86px; object-fit:contain; object-position:center; filter:drop-shadow(0 0 10px rgba(242,24,168,.22)); } .brand-fallback { align-items:center; gap:7px; color:#fff; display:flex; font-size:15px; line-height:1; } .brand-fallback strong { color:#f226b1; font-size:42px; font-weight:700; } .brand-fallback small { color:#e63ab7; display:block; font-size:8px; letter-spacing:2px; margin-top:4px; } .nav-links { display:flex; gap:32px; margin-left:auto; color:var(--muted); font-weight:600; } .nav-links a:hover,.nav-links a:focus-visible { color:#fff; } .nav-actions { display:flex; gap:16px; }
.button { border-radius:7px; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 24px; font-weight:700; transition:transform .2s,box-shadow .2s,background .2s; } .button:hover { transform:translateY(-2px); } .button:focus-visible,a:focus-visible { outline:2px solid #fff; outline-offset:4px; } .button-primary { background:linear-gradient(100deg,#f70ca4,#a922c2); color:#fff; box-shadow:0 12px 30px rgba(235,16,164,.18); } .button-outline { border:1px solid var(--pink); color:#fb62cb; } .button-ghost { border:1px solid #54355f; color:#fff; } .language-link { border:1px solid transparent; color:#b9aebe; min-height:30px; padding:0 7px; }
.hero { position:relative; overflow:hidden; min-height:450px; background:#090a13; } .hero-backdrop { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,8,16,.35),rgba(7,8,16,.04)),url('/images/portada.png') center/cover no-repeat; clip-path:inset(0 0 0 43%); opacity:.92; } .hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#090a13 0%,rgba(9,10,19,.78) 35%,transparent 69%); } .hero-content { min-height:450px; display:flex; align-items:center; position:relative; z-index:1; } .hero-copy { width:54%; padding:48px 0 42px; z-index:1; } .eyebrow { border:1px solid #a7259c; border-radius:20px; color:#f479d4; display:inline-block; font-size:14px; font-weight:700; margin:0 0 17px; padding:6px 12px; } .eyebrow span { color:#a7a0b2; } h1 { font-size:clamp(2.4rem,5vw,3.25rem); letter-spacing:-1.5px; line-height:1.08; margin:0; } .hero-description { color:#d7d1de; font-size:16px; line-height:1.45; max-width:570px; margin:16px 0 24px; } .hero-actions { display:flex; gap:18px; } .stats { display:flex; flex-wrap:wrap; gap:34px; color:var(--muted); margin-top:31px; } .stats b { color:#f23fb8; font-size:22px; margin-right:7px; }
.hero-art { position:absolute; width:54%; height:100%; right:-3%; display:grid; place-items:center; } .hero-art img { max-width:100%; max-height:92%; object-fit:contain; } .hero-fallback { align-items:center; color:#c32bd7; display:flex; gap:10px; text-shadow:0 0 35px #f218a8; transform:rotate(-4deg); } .hero-fallback strong { font-size:230px; line-height:.7; } .hero-fallback span { color:#fff; font-size:24px; font-weight:700; letter-spacing:6px; line-height:1.1; } .benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:34px 0; } .benefit-card { min-height:168px; background:linear-gradient(145deg,rgba(26,21,37,.88),rgba(11,12,21,.94)); border:1px solid var(--line); border-radius:8px; padding:22px; text-align:center; } .benefit-icon { color:#fa35ba; display:block; font-size:42px; line-height:1; } .benefit-card h2 { font-size:20px; margin:10px 0 6px; } .benefit-card p { color:#eee8f2; font-size:14px; line-height:1.4; margin:0 auto; max-width:260px; }
.section { padding:110px 0; } .section-light { background:#f3eef5; color:#17121c; } .section-kicker { color:#d728a5; font-size:12px; font-weight:700; letter-spacing:2px; margin:0 0 18px; } .section-title { font-size:clamp(2rem,4vw,3.2rem); line-height:1.05; letter-spacing:-1px; margin:0 0 20px; max-width:650px; } .section-title.centered { margin-left:auto; margin-right:auto; text-align:center; } .section-lead { color:#6f6475; font-size:17px; line-height:1.6; max-width:550px; } .text-link { color:#b5168c; font-weight:700; } .split { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; } .pipeline { border-left:1px solid #d6bdd4; padding-left:34px; } .pipeline-step { border-bottom:1px solid #dfd1df; padding:0 0 25px; margin:0 0 25px; } .pipeline-step:last-child { border:0; margin:0; } .pipeline-step b { color:#d728a5; font-size:12px; margin-right:18px; } .pipeline-step span { font-size:22px; font-weight:700; } .pipeline-step small { color:#756976; display:block; line-height:1.5; margin:8px 0 0 40px; } .capability-grid,.pricing-grid,.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; } .capability-grid article { border-top:2px solid #f218a8; padding:25px 4px; } .capability-grid article > span { color:#f218a8; font-size:28px; } .capability-grid h3 { font-size:22px; margin:18px 0 9px; } .capability-grid p { color:var(--muted); line-height:1.55; margin:0 0 20px; } .capability-grid a,.resource-grid a { color:#f46bc9; font-weight:700; } .proof { background:#191324; } .proof-inner { align-items:center; display:grid; grid-template-columns:260px 1fr; gap:70px; } .proof .section-title { color:#fff; } .proof .section-lead { color:#c2b5cb; } .proof-number { color:#f218a8; font-size:clamp(5rem,12vw,9rem); font-weight:700; letter-spacing:-8px; line-height:1; } .proof-number span { font-size:.45em; letter-spacing:0; } .price-card { background:#fff; border:1px solid #dacbda; border-radius:8px; display:flex; flex-direction:column; padding:30px; } .price-card.featured { background:#1b1324; border-color:#f218a8; color:#fff; transform:translateY(-12px); } .plan-name,.resource-tag { color:#d728a5; font-size:12px; font-weight:700; letter-spacing:1.5px; } .price-card h3 { font-size:22px; margin:20px 0 10px; } .price-card p { color:#766b78; line-height:1.5; min-height:70px; } .featured p { color:#c7bbcc; } .price-card strong { font-size:18px; margin:20px 0 24px; } .price-card .button { margin-top:auto; } .resources { background:#0d0b14; } .resource-heading { align-items:end; display:flex; justify-content:space-between; } .resource-grid article { border:1px solid #3c2a43; border-radius:8px; padding:26px; } .resource-grid h3 { font-size:21px; line-height:1.2; margin:18px 0 12px; } .resource-grid p { color:#bcb2c3; line-height:1.5; min-height:48px; } .final-cta { background:linear-gradient(110deg,#30113a,#130c20); padding:100px 0; text-align:center; } .final-cta h2 { font-size:clamp(2.4rem,5vw,4.5rem); letter-spacing:-2px; line-height:1; margin:0 auto 18px; max-width:780px; } .final-cta p:not(.section-kicker) { color:#d0c4d5; font-size:18px; margin:0 auto 28px; } .site-footer { background:#080811; color:#c1b6c8; padding:30px 0; } .site-footer .page-width { align-items:center; display:flex; flex-wrap:wrap; gap:24px; } .site-footer strong { color:#fff; font-size:20px; } .site-footer small { color:#766a7b; margin-left:auto; }
@media (max-width:800px) { .nav-shell { min-height:84px; width:min(100% - 32px,620px); } .brand { width:auto; height:64px; margin-right:auto; } .brand img { width:64px; height:64px; } .nav-links { display:none; } .nav-actions { gap:8px; } .nav-actions .button { min-height:38px; padding:0 12px; font-size:13px; } .hero-content { min-height:650px; width:min(100% - 32px,620px); align-items:flex-start; } .hero-copy { width:100%; padding-top:48px; } .hero-backdrop { clip-path:inset(45% 0 0 0); background-position:center bottom; } .hero-art { width:100%; height:260px; right:0; bottom:0; opacity:.45; } .hero-art img { max-height:100%; max-width:90%; } .hero-fallback strong { font-size:170px; } .stats { gap:14px 22px; font-size:13px; } .benefits,.capability-grid,.pricing-grid,.resource-grid { width:min(100% - 32px,620px); grid-template-columns:1fr; } .section { padding:76px 0; } .split,.proof-inner { grid-template-columns:1fr; gap:40px; } .proof-number { font-size:6rem; } .price-card.featured { transform:none; } .resource-heading { align-items:start; flex-direction:column; gap:20px; } .site-footer small { margin-left:0; width:100%; } } @media (max-width:460px) { h1 { font-size:2.25rem; } .hero-actions { align-items:stretch; flex-direction:column; max-width:250px; gap:10px; } .hero-description { font-size:15px; } .nav-actions .button-outline { display:none; } .language-link { padding:0 5px !important; } }