/* ========================================================= Vega Studio · Capa de dirección de arte (sep 2026) Se carga al final del en todas las páginas y pisa los estilos inline. Criterio: "editorial operator". Menos efecto de agencia, más precisión de producto: referencias Linear / Mercury (sobriedad, confianza para fundadores) + Stripe Press (serif editorial como acento). - Geist: sans de trabajo (precisa, del mundo startup) - Instrument Serif itálica: un solo acento por pantalla - Geist Mono: datos y rótulos - Oro como señal, no como decoración ========================================================= */ :root{ --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace; --serif:"Instrument Serif",Georgia,"Times New Roman",serif; --line:rgba(242,239,233,.09); --line-strong:rgba(242,239,233,.18); --surface:#111110; } /* ---------- Tipografía ---------- */ body{letter-spacing:-.006em;text-rendering:optimizeLegibility} h1,h2,h3{font-weight:600;letter-spacing:-.028em} h1{letter-spacing:-.04em;line-height:1} h2{line-height:1.04} h3{letter-spacing:-.015em} strong,b{font-weight:600} /* Acento serif: la frase que se tiene que recordar */ .serif, .hero h1 .blind, .cs-hero h1 em{ font-family:var(--serif);font-style:italic;font-weight:400; letter-spacing:-.01em;color:var(--gold); } .hero h1 .blind{font-size:1.08em;line-height:.95} /* Rótulos mono: menos tracking, más legibles */ .eyebrow{letter-spacing:.16em;font-size:.7rem;font-weight:500} .mono-tag,.pod-role,.reach-no,.pcard-per,.lb-note,.case-client small,.field label, .cmp thead th,.footer h4,.menu .menu-foot{letter-spacing:.12em} .nav-links a:not(.btn){letter-spacing:.1em;font-size:.72rem} .case-chips li,.reach-tags li,.chips li{letter-spacing:.08em} /* ---------- Efectos de agencia: fuera ---------- */ .preloader,.cursor-dot,.cursor-ring,.cursor-glow{display:none!important} html.cursor-on,html.cursor-on *{cursor:auto} html.cursor-on a,html.cursor-on button,html.cursor-on summary,html.cursor-on select,html.cursor-on label[for]{cursor:pointer} html.cursor-on input,html.cursor-on textarea{cursor:text} .grain{animation:none!important;opacity:.03} .pulse{animation:none!important} .btn-gold::after{display:none} /* Los números de sección gigantes con contorno competían con los títulos */ .sec-no{display:none!important} .sec-head{grid-template-columns:1fr!important;margin-bottom:clamp(32px,5vw,60px)} /* ---------- Superficies: planas y precisas ---------- */ .glass{ background:var(--surface)!important; -webkit-backdrop-filter:none!important;backdrop-filter:none!important; border:1px solid var(--line);border-radius:4px;box-shadow:none; } .glass::before{display:none} .glass:hover{border-color:var(--line-strong);box-shadow:none} /* Esquinas doradas solo donde hay una decisión: oferta destacada y formulario */ .hud{display:none} .pcard-feat .hud,.form .hud{display:block} .pcard-feat{border-color:var(--gold-soft)!important} /* ---------- Ritmo ---------- */ section{padding:clamp(72px,9vw,128px) 0} .divider{background:var(--line)!important;opacity:1!important;transform:none!important} /* ---------- Botones ---------- */ .btn{font-weight:600;letter-spacing:-.005em;border-radius:3px;min-height:48px;padding:13px 24px;font-size:.95rem} .btn-ghost{border-color:var(--line-strong)} .nav-links .btn{min-height:40px;padding:8px 18px;font-size:.88rem} /* ---------- Hero ---------- */ .status{letter-spacing:.12em} @media (max-width:520px){.status{border-radius:14px}} .nowrap{white-space:nowrap} /* ---------- Home: índice de sección en el rótulo ---------- */ .home main{counter-reset:sec} .home main>section:not(.hero){counter-increment:sec} .home .sec-head .eyebrow::before{ content:counter(sec,decimal-leading-zero); width:auto;height:auto;background:none;color:var(--faint);margin-top:0; } /* ---------- Frases de cierre en serif ---------- */ .pod-close,.who-lead{ font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em; font-size:clamp(1.45rem,1.2rem + 1.1vw,2.1rem);line-height:1.2;max-width:32ch; } /* ---------- Datos ---------- */ .pcard-num{font-family:var(--font);font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .cmp .us{font-weight:600} .cmp td,.cmp th{font-variant-numeric:tabular-nums} /* ---------- Problema: tarjetas más editoriales ---------- */ .reach .lead{font-weight:500;letter-spacing:-.015em} /* ---------- Logos ---------- */ /* La opacidad va en la imagen, no en el contenedor: si no, el mix-blend-mode queda aislado y aparecen las cajas negras. */ .lb-item,.lb-item:hover{opacity:1} .lb-item img{opacity:.62;transition:opacity .3s var(--ease)} .lb-item:hover img{opacity:.95} .logobar{border-top:1px solid var(--line);border-bottom:0} /* ---------- FAQ ---------- */ .faq summary{font-weight:600;letter-spacing:-.015em} /* ---------- Formularios ---------- */ .field input,.field textarea,.field select{border-radius:3px;border-color:var(--line-strong)} /* ---------- Máscaras de animación ---------- Con Geist y line-height ajustado, la máscara de 0.06/0.08em cortaba los descendentes (g, y, p). */ .w{padding-bottom:.16em;margin-bottom:-.16em} .hero h1 .h-line{padding-bottom:.16em;margin-bottom:-.16em} /* ---------- Ajustes de la revisión visual ---------- */ p,li{text-wrap:pretty} .btn-line{letter-spacing:0;font-weight:600} /* Franja de logos: misma caja óptica para todos, una sola fila en desktop */ .lb-row{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 16px;align-items:end} .lb-row .lb-item{width:auto;padding:0;gap:14px} .lb-row .lb-item img,.lb-row .lb-item img.lb-sq{height:34px;max-width:132px;width:auto} .lb-row .lb-item img.lb-sq{height:44px} @media (min-width:640px){.lb-row{grid-template-columns:repeat(3,1fr)}} @media (min-width:980px){.lb-row{grid-template-columns:repeat(3,1fr);max-width:760px;margin:0 auto}} /* Logos: un punto más de presencia */ .lb-row .lb-item img{height:40px;max-width:150px} .lb-row .lb-item img.lb-sq{height:58px} /* ---------- Casos / Research: hero ---------- */ .cs-hero{min-height:auto} .cs-hero-inner{max-width:var(--max);margin:0 auto} .cs-hero-inner>.btn{align-self:flex-start} .cs-hero-inner h1{font-size:clamp(2.6rem,1.4rem + 5vw,5.2rem)} .case h3{max-width:34ch;font-weight:600} /* Chips de casos: mismo lenguaje neutro que la home */ .chips li{color:var(--mute)!important;border-color:var(--line-strong)!important;background:none!important;font-weight:500!important;border-radius:999px} .paper .btn{margin-top:12px} .footer .brand img{height:40px} @media (max-width:520px){.hero h1{font-size:10.6vw}} /* Logos con mucho margen interno en el archivo: compensación óptica */ .lb-row .lb-item img[alt="OSDE"]{height:88px;max-width:180px} .lb-row .lb-item img[alt="Mercado Ads"]{height:72px}