@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#171714; --muted:#666458; --paper:#f4f1e9; --sand:#e8e0d1; --gold:#b8863a; --line:rgba(23,23,20,.15); --display:Georgia,"Times New Roman",serif; --body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); }
a { color:inherit; }
.shell { width:min(1160px,calc(100% - 3rem)); margin-inline:auto; }
.skip { position:fixed; top:-5rem; left:1rem; z-index:9; padding:.75rem; background:var(--ink); color:#fff; }
.skip:focus { top:1rem; }
header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-bottom:1px solid var(--line); }
.brand { font-family:var(--display); font-size:1.3rem; font-weight:700; letter-spacing:-.04em; text-decoration:none; }
.brand i { color:var(--gold); font-style:normal; }
nav { display:flex; align-items:center; gap:1.6rem; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
nav a { position:relative; text-decoration:none; }
nav a:not(.nav-cta)::after { position:absolute; right:0; bottom:-.45rem; left:0; height:1px; content:""; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform 220ms ease; }
nav a:hover::after,nav a:focus-visible::after { transform:scaleX(1); }
.nav-cta { padding:.7rem .95rem; border:1px solid var(--ink); }
.eyebrow { margin:0 0 1.2rem; color:#806432; font-size:.68rem; font-weight:800; letter-spacing:.18em; line-height:1.4; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-weight:400; }
h1 { max-width:760px; margin-bottom:1.8rem; font-family:var(--display); font-size:clamp(3.6rem,7.4vw,6.9rem); letter-spacing:-.075em; line-height:.9; }
h1 em,h2 em { color:var(--gold); font-style:italic; }
.hero { min-height:min(720px,calc(100vh - 77px)); display:grid; align-items:center; padding:clamp(5rem,10vw,9rem) 0; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.58fr); gap:clamp(3rem,11vw,10rem); align-items:end; }
.hero-copy { max-width:560px; color:#4b493f; font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.7; }
.actions { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; margin-top:2.3rem; }
.button { display:inline-flex; justify-content:space-between; align-items:center; min-width:230px; gap:2.4rem; padding:1rem 1.15rem 1rem 1.3rem; background:var(--ink); color:#fffdf7; font-size:.7rem; font-weight:800; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; transition:transform 200ms ease,box-shadow 200ms ease,background-color 200ms ease; }
.button:hover,.button:focus-visible { background:#3c392e; box-shadow:0 12px 26px rgba(25,22,16,.18); transform:translateY(-2px); }
.link { padding-bottom:.35rem; border-bottom:1px solid var(--ink); font-size:.7rem; font-weight:800; letter-spacing:.09em; text-decoration:none; text-transform:uppercase; }
.offer { position:relative; padding:2rem; border:1px solid var(--line); background:#eee7d9; }
.offer::before { position:absolute; top:-1px; left:2rem; width:58px; height:3px; content:""; background:var(--gold); }
.offer-label { margin:0 0 1rem; color:#806432; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.offer-price { margin:0; font-family:var(--display); font-size:clamp(3.2rem,5vw,4.4rem); letter-spacing:-.075em; line-height:.9; }
.offer-price small { display:block; margin-top:.8rem; font-family:var(--body); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.offer p:last-child { margin:1.25rem 0 0; color:var(--muted); font-size:.86rem; line-height:1.6; }
section { padding:clamp(5rem,10vw,9rem) 0; }
.problem { background:var(--ink); color:#f5eee2; }
.section-heading { display:grid; grid-template-columns:minmax(0,.85fr) minmax(250px,.65fr); gap:clamp(2rem,9vw,9rem); align-items:end; margin-bottom:3.5rem; }
h2 { margin-bottom:0; font-family:var(--display); font-size:clamp(2.8rem,5vw,5rem); letter-spacing:-.07em; line-height:.94; }
.section-heading > p { margin-bottom:0; color:#beb7a9; line-height:1.7; }
.problem .eyebrow { color:#d7ad62; }
.problem-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.17); }
.problem-item { min-height:220px; padding:1.8rem 1.8rem 1rem 0; border-right:1px solid rgba(255,255,255,.17); }
.problem-item + .problem-item { padding-left:1.8rem; }
.problem-item:last-child { border-right:0; }
.problem-item span { display:block; margin-bottom:2.6rem; color:#d7ad62; font-size:.7rem; letter-spacing:.1em; }
.problem-item h3 { margin-bottom:.75rem; font-family:var(--display); font-size:1.75rem; letter-spacing:-.045em; }
.problem-item p { max-width:30ch; margin-bottom:0; color:#c6bfb1; font-size:.92rem; line-height:1.65; }
.value { background:#ded4c3; }
.value-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(3rem,10vw,10rem); align-items:start; }
.value-copy p:not(.eyebrow),.proof-copy p:not(.eyebrow) { color:var(--muted); line-height:1.7; }
.deliverables { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid rgba(52,42,27,.18); background:rgba(52,42,27,.18); }
.deliverable { min-height:180px; padding:1.5rem; background:#eee7d9; }
.deliverable span { color:#806432; font-size:.65rem; font-weight:800; letter-spacing:.13em; }
.deliverable h3 { margin:2.3rem 0 .55rem; font-family:var(--display); font-size:1.55rem; letter-spacing:-.04em; }
.deliverable p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.55; }
.proof { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(3rem,10vw,10rem); align-items:center; }
.proof-visual { min-height:430px; display:flex; flex-direction:column; justify-content:end; padding:2rem; background:linear-gradient(135deg,#201c16 0%,#4d3820 100%); color:#fff8e9; box-shadow:inset 0 0 0 1px rgba(255,255,255,.13); }
.proof-visual .mini-label { color:#e4bd75; font-size:.66rem; font-weight:800; letter-spacing:.14em; }
.proof-visual strong { max-width:9ch; margin-top:1rem; font-family:var(--display); font-size:clamp(3rem,5vw,4.5rem); font-weight:400; letter-spacing:-.07em; line-height:.86; }
.proof-visual i { width:70px; height:1px; margin:2.2rem 0 .9rem; background:#e4bd75; }
.proof-visual small { max-width:28ch; color:#d8cdbd; line-height:1.55; }
.proof-copy p:not(.eyebrow) { max-width:49ch; line-height:1.75; }
.pilot { position:relative; overflow:hidden; background:var(--gold); color:#231b0e; }
.pilot::after { position:absolute; right:-8vw; bottom:-15vw; width:42vw; height:42vw; border:1px solid rgba(66,46,14,.32); border-radius:50%; content:""; }
.pilot-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:3rem; align-items:end; }
.pilot .eyebrow { color:#563b10; }
.pilot h2 { max-width:13ch; }
.pilot-copy { max-width:500px; margin:1.5rem 0 0; line-height:1.7; }
.pilot .button { background:#211a0e; }
.pilot .button:hover,.pilot .button:focus-visible { background:#443214; }
footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2rem 0; color:#868174; font-size:.75rem; }
footer .brand { color:var(--ink); }
@media (max-width:900px) { .shell { width:min(calc(100% - 2.25rem),1160px); } header { min-height:68px; } nav a:not(.nav-cta) { display:none; } .hero { min-height:auto; } .hero-grid,.section-heading,.value-grid,.proof,.pilot-grid { grid-template-columns:1fr; } .hero-grid { gap:2.5rem; } .offer { max-width:430px; } .problem-list { grid-template-columns:1fr; } .problem-item,.problem-item + .problem-item { min-height:auto; padding:1.5rem 0; border-right:0; border-bottom:1px solid rgba(255,255,255,.17); } .problem-item span { margin-bottom:1rem; } .proof-visual { min-height:330px; } .pilot .button { width:fit-content; } }
@media (max-width:480px) { h1 { font-size:clamp(3.3rem,16vw,4.5rem); } .actions { align-items:flex-start; flex-direction:column; } .deliverables { grid-template-columns:1fr; } footer { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; } }

/* Dirección de arte Noema: sistema, claridad y señal. Esta capa no comparte
   ni la paleta ni la composición de una landing de cliente. */
:root { --ink:#15191f; --muted:#52606a; --paper:#fbfbf9; --sand:#dfe5e8; --gold:#d9ff58; --line:rgba(21,25,31,.16); --display:"Manrope",Arial,sans-serif; --body:"Manrope",Arial,sans-serif; --mono:"DM Mono",monospace; }
body { background:var(--paper); }
.shell { width:min(1200px,90vw); }
header { min-height:88px; border-bottom:1px solid var(--line); }
.brand { font-family:var(--display); font-size:1.32rem; font-weight:800; letter-spacing:-.1em; }
.brand i { color:#5277cf; }
nav { gap:1.65rem; font-family:var(--mono); font-size:.66rem; font-weight:500; }
nav a:not(.nav-cta)::after { background:#5277cf; }
.nav-cta { padding:.72rem 1rem; border-color:var(--ink); background:var(--ink); color:#fff; }
.eyebrow { display:flex; align-items:center; gap:.7rem; color:#435f9d; font-family:var(--mono); font-size:.67rem; font-weight:500; letter-spacing:.1em; }
.eyebrow::before { width:1.8rem; height:1px; content:""; background:currentColor; }
h1,h2,h3 { font-family:var(--display); }
h1 { font-weight:800; letter-spacing:-.08em; }
h1 em,h2 em { color:#5277cf; font-style:normal; }
.hero { position:relative; min-height:690px; overflow:hidden; padding:10rem 0 6rem; background:#fbfbf9; }
.hero::before { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(21,25,31,.07) 1px,transparent 1px),linear-gradient(rgba(21,25,31,.07) 1px,transparent 1px); background-size:5rem 5rem; mask-image:linear-gradient(100deg,#000,transparent 78%); }
.hero::after { position:absolute; right:7vw; bottom:13%; width:clamp(180px,20vw,310px); aspect-ratio:1; border:1px solid rgba(21,25,31,.28); content:""; box-shadow:2.8rem -2.8rem 0 -1px rgba(156,186,255,.9); }
.hero-grid { position:relative; z-index:1; grid-template-columns:minmax(0,1fr) minmax(260px,.4fr); gap:clamp(2.5rem,9vw,9rem); }
.hero-copy { color:#3e4851; }
.actions { gap:.8rem; }
.button { min-width:0; gap:.7rem; min-height:3.1rem; padding:.85rem 1rem; border:1px solid var(--ink); background:var(--ink); font-size:.74rem; letter-spacing:0; text-transform:none; }
.button:hover,.button:focus-visible { background:#27313b; box-shadow:none; }
.link { border-bottom:1px solid currentColor; font-family:var(--mono); font-size:.67rem; font-weight:500; letter-spacing:.04em; text-transform:none; }
.offer { align-self:center; padding:1.5rem; border:1px solid var(--ink); background:#9cbaff; box-shadow:1.15rem 1.15rem 0 var(--gold); }
.offer::before { top:1.5rem; left:auto; right:1.5rem; width:.75rem; height:.75rem; background:var(--ink); border-radius:50%; }
.offer-label,.offer-price small { font-family:var(--mono); font-weight:500; letter-spacing:.06em; }
.offer-label { color:#2d3741; }
.offer-price { font-family:var(--display); font-weight:800; }
.offer p:last-child { color:#2d3741; }
.problem { background:#202631; }
.problem .eyebrow,.problem-item span { color:var(--gold); font-family:var(--mono); font-weight:500; }
.section-heading > p,.problem-item p { color:#c3ccd2; }
h2 { font-weight:800; letter-spacing:-.075em; }
.problem-list { border-color:rgba(255,255,255,.2); }
.problem-item,.problem-item + .problem-item { border-color:rgba(255,255,255,.2); }
.problem-item h3 { font-family:var(--display); font-weight:700; }
.value { background:#dfe5e8; }
.value .eyebrow,.deliverable span { color:#435f9d; font-family:var(--mono); font-weight:500; }
.deliverables { border-color:rgba(21,25,31,.24); background:rgba(21,25,31,.24); }
.deliverable { position:relative; background:#fbfbf9; }
.deliverable::after { position:absolute; top:1.35rem; right:1.35rem; width:.55rem; height:.55rem; border-radius:50%; content:""; background:#5277cf; }
.deliverable h3 { font-family:var(--display); font-weight:700; }
.proof { grid-template-columns:1fr 1fr; }
.proof-visual { position:relative; min-height:440px; overflow:hidden; background:#15191f; box-shadow:none; }
.proof-visual::before { position:absolute; inset:0; content:""; background:linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size:2.5rem 2.5rem; }
.proof-visual::after { position:absolute; top:20%; right:14%; width:25%; aspect-ratio:1; border:1px solid var(--gold); border-radius:50%; content:""; box-shadow:-8rem 8rem 0 -1px #5277cf; }
.proof-visual > * { position:relative; z-index:1; }
.proof-visual .mini-label { color:var(--gold); font-family:var(--mono); font-weight:500; }
.proof-visual strong { font-family:var(--display); font-weight:800; }
.proof-visual i { background:var(--gold); }
.proof-copy .eyebrow { color:#435f9d; }
.pilot { background:var(--gold); }
.pilot::after { width:34vw; height:34vw; border-color:rgba(21,25,31,.45); }
.pilot .eyebrow { color:#27313b; }
.pilot h2 { max-width:15ch; }
.pilot .button { background:var(--ink); }
footer { border-top:1px solid var(--line); font-family:var(--mono); }
footer .brand { font-family:var(--display); }
@media (max-width:900px) { .hero::after { display:none; } .proof { grid-template-columns:1fr; } }
@media (max-width:560px) { .shell { width:88vw; } .hero { padding-top:8rem; } .offer { box-shadow:.75rem .75rem 0 var(--gold); } }