:root{ --bg:#0A0A0B; --surface:rgba(255,255,255,.025); --surface-2:rgba(255,255,255,.045); --text:#F1EFEB; --text-soft:#C2BFBA; --muted:#8A8791; --line:#26262D; --line-soft:#1B1B20; --accent:#E8734A; --accent-2:#FF9A6E; --accent-soft:rgba(232,115,74,.10); --serif:'Fraunces',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --wrap:1180px; --pad:clamp(20px,5vw,64px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark;background:#0A0A0B} /* el fondo lo pone ; el body va transparente para que .bgfx (z-index:-1) se vea */ body{ background:transparent;color:var(--text); font-family:var(--sans);font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } /* ---------- fondo dinamico ---------- */ .bgfx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .bgfx .grid{ position:absolute;inset:-1px; background-image: linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 0%,transparent 78%); mask-image:radial-gradient(ellipse 78% 62% at 50% 34%,#000 0%,transparent 78%); } .bgfx .aura{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform} .bgfx .a1{ width:58vw;height:58vw;max-width:820px;max-height:820px;top:-16vw;left:-10vw; background:radial-gradient(circle,rgba(232,115,74,.20),transparent 68%); animation:drift1 28s ease-in-out infinite alternate; } .bgfx .a2{ width:46vw;height:46vw;max-width:660px;max-height:660px;top:24vh;right:-14vw; background:radial-gradient(circle,rgba(120,132,190,.16),transparent 68%); animation:drift2 36s ease-in-out infinite alternate; } .bgfx .a3{ width:52vw;height:52vw;max-width:720px;max-height:720px;bottom:-18vw;left:24vw; background:radial-gradient(circle,rgba(232,115,74,.11),transparent 70%); animation:drift1 44s ease-in-out infinite alternate-reverse; } @keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,5vh,0) scale(1.18)}} @keyframes drift2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-6vw,-7vh,0) scale(.9)}} ::selection{background:var(--accent);color:#fff} img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)} /* ---------- tipografia ---------- */ h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;letter-spacing:-.02em} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .eyebrow.grey{color:var(--muted)} .lead{font-size:clamp(17px,1.9vw,20px);color:var(--text-soft);line-height:1.62} .muted{color:var(--muted)} .num{font-variant-numeric:tabular-nums;letter-spacing:-.03em} /* ---------- nav ---------- */ nav{ position:sticky;top:0;z-index:50; background:rgba(10,10,11,.72);backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent;transition:border-color .3s,background .3s; } nav.stuck{border-bottom-color:var(--line);background:rgba(10,10,11,.88)} .navin{max-width:var(--wrap);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:28px} .navlogo{display:flex;align-items:center;gap:13px;text-decoration:none;white-space:nowrap} .navlogo img{height:19px;width:auto;opacity:.95;transition:opacity .2s} .navlogo:hover img{opacity:1} .navlogo .sep{width:1px;height:19px;background:var(--line)} .navlogo .nm{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:-.02em} @media(max-width:520px){.navlogo .sep,.navlogo .nm{display:none}} .navlinks{display:flex;gap:26px;margin-left:auto;align-items:center} .navlinks a{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s;white-space:nowrap} .navlinks a:hover{color:var(--text)} .navlinks a.cta{color:var(--bg);background:var(--text);padding:8px 16px;border-radius:100px} .navlinks a.cta:hover{background:var(--accent);color:#fff} @media(max-width:880px){.navlinks a:not(.cta){display:none}} /* ---------- hero ---------- */ .hero{padding:clamp(46px,7vw,92px) 0 clamp(38px,5vw,60px)} .herogrid{display:grid;grid-template-columns:1.32fr .88fr;gap:clamp(32px,5vw,72px);align-items:end} h1{font-size:clamp(40px,6.6vw,78px);margin:18px 0 0} h1 .ln2{display:block;color:var(--muted)} .role{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);font-size:clamp(16px,2vw,19px);font-weight:600;letter-spacing:-.01em} .role span{color:var(--accent)} .subrole{font-size:14.5px;color:var(--muted);margin-top:4px} .pitch{margin-top:26px;max-width:46ch} .pitch strong{font-weight:600;color:var(--text)} .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .btn{ display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:100px; font-size:14.5px;font-weight:600;text-decoration:none;transition:all .22s;border:1px solid transparent; } .btn.solid{background:var(--text);color:var(--bg)} .btn.solid:hover{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(232,115,74,.7)} .btn.ghost{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.03)} .btn.ghost:hover{border-color:rgba(232,115,74,.55);background:rgba(232,115,74,.08);transform:translateY(-2px)} .portrait{ position:relative;border-radius:6px;overflow:hidden;background:#000;align-self:end; box-shadow:0 0 0 1px var(--line),0 30px 80px -30px rgba(232,115,74,.35); } .portrait img{width:100%;height:auto;display:block} .portrait::after{ content:'';position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.65),transparent 42%), radial-gradient(ellipse 90% 60% at 50% 110%,rgba(232,115,74,.16),transparent 70%); } .plabel{position:absolute;left:0;bottom:0;z-index:2;padding:20px 22px;color:#fff} .plabel .n{font-family:var(--serif);font-size:19px;line-height:1.25} .plabel .c{font-size:12px;opacity:.72;margin-top:3px;letter-spacing:.02em} @media(max-width:900px){.herogrid{grid-template-columns:1fr;gap:36px}.portrait{max-width:330px}} /* ---------- metricas ---------- */ .metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.022);backdrop-filter:blur(2px)} .mgrid{display:grid;grid-template-columns:repeat(4,1fr)} .m{padding:34px clamp(16px,2.4vw,32px);border-right:1px solid var(--line)} .m:last-child{border-right:none} .mgrid>.m:first-child{padding-left:0} /* nowrap para que el "USD" no se caiga a una segunda linea en +$200K */ .mv{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1;white-space:nowrap} .mv small{font-size:.48em;font-weight:500;color:var(--muted);margin-left:3px} .ml{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.4} .mnote{padding:0 var(--pad) 22px;font-size:11.5px;color:var(--muted);opacity:.82} @media(max-width:860px){ .mgrid{grid-template-columns:1fr 1fr} .m{border-bottom:1px solid var(--line);padding:26px clamp(16px,4vw,var(--pad))} .m:nth-child(2n){border-right:none} .m:nth-child(n+3){border-bottom:none} .mgrid>.m:first-child{padding-left:var(--pad)} } /* ---------- secciones ---------- */ section{padding:clamp(58px,7vw,100px) 0} .shead{max-width:660px;margin-bottom:clamp(34px,4.5vw,54px)} .shead h2{font-size:clamp(29px,4.2vw,44px);margin:14px 0 0} .shead p{margin-top:18px;font-size:17px;color:var(--muted);line-height:1.6} .divider{height:1px;background:var(--line)} /* pilares / errores */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(255,255,255,.018)} .pillar{padding:clamp(26px,3vw,36px);border-right:1px solid var(--line);transition:background .3s} .pillar:last-child{border-right:none} .pillar:hover{background:rgba(255,255,255,.022)} .pillar .pn{font-family:var(--serif);font-size:13px;color:var(--accent);letter-spacing:.04em} .pillar h3{font-size:21px;margin:14px 0 12px} .pillar p{font-size:15px;color:var(--muted);line-height:1.62} .pillar p b{color:var(--text-soft);font-weight:600} @media(max-width:820px){ .pillars{grid-template-columns:1fr} .pillar{border-right:none;border-bottom:1px solid var(--line)} .pillar:last-child{border-bottom:none} } /* casos */ .case{border-top:1px solid var(--line);padding:clamp(30px,4vw,46px) 0;display:grid;grid-template-columns:210px 1fr;gap:clamp(22px,4vw,52px)} .case:last-of-type{border-bottom:1px solid var(--line)} .cmeta .cid{font-family:var(--serif);font-size:40px;color:#33333D;line-height:1;letter-spacing:-.03em} .cmeta .csec{font-size:13px;font-weight:600;margin-top:12px;line-height:1.4} .cmeta .cgeo{font-size:12.5px;color:var(--muted);margin-top:2px} .case h3{font-size:clamp(22px,2.8vw,30px);margin-bottom:18px;max-width:24ch} .cblock{margin-bottom:14px;font-size:15.5px;line-height:1.65;color:var(--text-soft)} /* b de enfasis dentro del parrafo */ .cblock b{color:var(--text);font-weight:600} /* ...pero el PRIMER b del bloque es la etiqueta (CONTEXTO, QUE HICE, ...) */ .cblock>b:first-child{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .cstats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .stat{border:1px solid var(--line);border-radius:4px;padding:12px 16px;background:rgba(255,255,255,.03);min-width:118px;flex:1 1 118px;transition:border-color .25s,background .25s} .stat:hover{border-color:#3A3A44;background:rgba(255,255,255,.045)} .stat .sv{font-family:var(--serif);font-size:22px;letter-spacing:-.03em;line-height:1.1} .stat .sl{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.35} .stat.hot{background:var(--accent-soft);border-color:rgba(232,115,74,.34)} .stat.hot .sv{color:var(--accent-2)} .stat.hot:hover{background:rgba(232,115,74,.16);border-color:rgba(232,115,74,.5)} .finding{margin-top:20px;padding:16px 18px;border-left:2px solid var(--accent);background:var(--accent-soft);border-radius:0 4px 4px 0;font-size:14.5px;line-height:1.6;color:var(--text-soft)} .finding b{color:var(--accent-2);font-weight:600} @media(max-width:820px){ .case{grid-template-columns:1fr;gap:16px} .cmeta{display:flex;align-items:baseline;gap:14px} .cmeta .cid{font-size:28px} .cmeta .csec{margin-top:0} } /* ---------- los 6 ejes ---------- */ .axes{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(255,255,255,.018)} .axis{padding:clamp(24px,2.8vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s} .axis:nth-child(3n){border-right:none} .axis:nth-last-child(-n+3){border-bottom:none} .axis:hover{background:rgba(255,255,255,.03)} .axis .an{font-family:var(--serif);font-size:14px;color:var(--accent);display:block;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:16px} .axis h3{font-size:19px;margin-bottom:10px;line-height:1.2} .axis p{font-size:14.5px;color:var(--muted);line-height:1.6} .axis .out{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-soft);font-size:13px;color:var(--text-soft)} .axis .out b{color:var(--accent-2);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:4px} @media(max-width:900px){ .axes{grid-template-columns:1fr 1fr} .axis:nth-child(3n){border-right:1px solid var(--line)} .axis:nth-child(2n){border-right:none} .axis:nth-last-child(-n+3){border-bottom:1px solid var(--line)} .axis:nth-last-child(-n+2){border-bottom:none} } @media(max-width:620px){ .axes{grid-template-columns:1fr} .axis{border-right:none!important;border-bottom:1px solid var(--line)!important} .axis:last-child{border-bottom:none!important} } /* ---------- metodo ---------- */ .method{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:rgba(255,255,255,.018)} .step{padding:clamp(24px,3vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s} .step:nth-child(2n){border-right:none} .step:nth-last-child(-n+2){border-bottom:none} .step:hover{background:rgba(255,255,255,.022)} .step .sn{font-family:var(--serif);font-size:15px;color:var(--accent);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px;display:block} .step h3{font-size:20px;margin-bottom:11px} .step p{font-size:15px;color:var(--muted);line-height:1.64} @media(max-width:760px){ .method{grid-template-columns:1fr} .step{border-right:none;border-bottom:1px solid var(--line)} .step:last-child{border-bottom:none} } /* ---------- panel elevado ---------- */ .dark{position:relative;color:#EDEBE6;background:rgba(255,255,255,.03);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .dark::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 70% at 12% 0%,rgba(232,115,74,.10),transparent 62%)} .dark>*{position:relative} .dark .shead h2{color:#fff} .dark .shead p{color:#9C9AA2} .dark .eyebrow{color:var(--accent-2)} /* ---------- proceso numerado (flow) ---------- */ .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .fstep{border:1px solid var(--line);border-radius:4px;padding:22px;background:rgba(255,255,255,.022);transition:border-color .25s,background .25s} .fstep:hover{border-color:#3E3E48;background:rgba(255,255,255,.04)} .fstep .fn{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);border:1px solid rgba(232,115,74,.4);color:var(--accent-2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;font-family:var(--serif);margin-bottom:14px} .fstep b{display:block;font-size:15.5px;margin-bottom:6px;font-weight:600} .fstep span{font-size:13.5px;color:var(--muted);line-height:1.55} @media(max-width:900px){.flow{grid-template-columns:1fr 1fr}} @media(max-width:540px){.flow{grid-template-columns:1fr}} /* ---------- listas si / no ---------- */ .twolists{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px)} .lbox h3{font-size:20px;margin-bottom:18px;display:flex;align-items:center;gap:10px} .lbox h3 .mk{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-family:var(--sans);font-weight:700;flex:none} .lbox.yes h3 .mk{background:rgba(232,115,74,.16);color:var(--accent-2);border:1px solid rgba(232,115,74,.4)} .lbox.no h3 .mk{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--line)} .lbox ul{list-style:none} .lbox li{padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px;line-height:1.6;color:var(--text-soft)} .lbox li:first-child{border-top:1px solid var(--line-soft)} .lbox.no li{color:var(--muted)} @media(max-width:800px){.twolists{grid-template-columns:1fr}} /* ---------- accesos ---------- */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .chip{border:1px solid var(--line);border-radius:100px;padding:7px 15px;font-size:13.5px;background:rgba(255,255,255,.03);color:var(--text-soft);transition:border-color .22s,color .22s,background .22s} .chip:hover{border-color:rgba(232,115,74,.45);color:var(--text);background:rgba(232,115,74,.09)} /* ---------- trayectoria compacta ---------- */ .tl{list-style:none;margin-top:8px} .tl li{display:grid;grid-template-columns:170px 1fr;gap:clamp(16px,3vw,40px);padding:20px 0;border-top:1px solid var(--line)} .tl li:last-child{border-bottom:1px solid var(--line)} .tl .ty{font-family:var(--serif);font-size:18px;letter-spacing:-.02em} .tl .to{font-size:12.5px;color:var(--muted);margin-top:3px} .tl .tr{font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px} .tl .td{font-size:14.5px;color:var(--muted);line-height:1.6} @media(max-width:760px){.tl li{grid-template-columns:1fr;gap:8px}} /* ---------- cita ---------- */ .quote{border-left:2px solid var(--accent-2);padding:4px 0 4px 24px} .quote p{font-family:var(--serif);font-size:clamp(18px,2.3vw,24px);line-height:1.42;color:#fff} .quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:13px;color:#8E8C94;margin-top:16px;line-height:1.55} /* ---------- contacto ---------- */ .contact{background:rgba(255,255,255,.025);border-top:1px solid var(--line)} .cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:start} .cgrid h2{font-size:clamp(29px,4.4vw,48px)} .clist{list-style:none;margin-top:8px} .clist li{border-top:1px solid var(--line);padding:16px 0} .clist li:last-child{border-bottom:1px solid var(--line)} .clist a,.clist .val{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;font-size:15.5px;font-weight:500;transition:color .2s} .clist a:hover{color:var(--accent)} .clist .k{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.05em;text-transform:uppercase} .motto{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);font-family:var(--serif);font-size:clamp(18px,2.4vw,25px);line-height:1.4;max-width:20ch} .motto span{color:var(--muted);display:block;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px;font-weight:600} @media(max-width:820px){.cgrid{grid-template-columns:1fr}} /* ---------- cruce entre versiones ---------- */ .crosslink{border:1px solid var(--line);border-radius:4px;padding:clamp(22px,3vw,30px);background:rgba(255,255,255,.022);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between} .crosslink .cl-t{font-family:var(--serif);font-size:clamp(18px,2.2vw,22px);line-height:1.3;max-width:46ch} .crosslink .cl-s{font-size:13.5px;color:var(--muted);margin-top:6px} footer{padding:26px 0 40px;font-size:12.5px;color:var(--muted)} .footin{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center} .footlogo{height:30px;width:auto;opacity:.42;transition:opacity .25s} .footlogo:hover{opacity:.75} /* reveal */ .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .btn:hover{transform:none} .bgfx .aura{animation:none} } @media print{ nav,.btns,.portrait,.bgfx,.crosslink{display:none} body{font-size:11pt;background:#fff;color:#000} section{padding:16pt 0} .metrics,.contact,.dark,.pillars,.method,.axes,.stat,.chip,.fstep,.finding{background:#fff!important;color:#000!important} .dark::before{display:none} h1,h2,h3,.mv,.sv,.cid,.ty,.axis h3{color:#000!important} .dark .shead h2,.quote p,.dark .shead p{color:#000!important} .lead,.pitch,.cblock,.finding,.lbox li{color:#222!important} .footlogo{filter:invert(1);opacity:1} .rv{opacity:1;transform:none} }