/* ═══ Lexfilm · landing ═══
 * Recreada en CSS plano desde el handoff de Claude Design (2026-09-25).
 * 1) Tokens: copia de design/tokens/*.css (colors, typography, spacing, base).
 *    Las fuentes se cargan con <link> en index.html, no con @import.
 * 2) Estilos de la landing: valores tomados de los .dc.html y components/*.jsx.
 * Las animaciones de reveal, parallax, tilt, etc. las inyecta js/motion.js.
 */

/* ─── Tokens · colors.css ─── */
:root{
  --ink-1000:#050505;
  --ink-950:#0A0A0A;
  --ink-900:#111111;
  --ink-800:#1A1A1A;
  --ink-700:#242424;
  --ink-600:#3A3A3A;
  --ink-500:#5C5C5C;
  --ink-400:#8A8A8A;
  --ink-300:#B4B0A8;
  --ink-200:#D8D3C8;
  --ink-150:#E4E0D6;
  --ink-100:#EFEDE6;
  --ink-50:#F3F1EA;
  --ink-0:#EFEDE6;

  --studio-900:#1E2226;
  --studio-500:#8E959C;
  --studio-300:#C2C6CA;
  --studio-100:#E4E6E8;

  --gold-900:#8A5A16;
  --gold-700:#D98A1F;
  --gold-500:#F5A623;
  --gold-300:#F7C66B;
  --gold-200:#FAD693;
  --gold-100:#FCE7BC;

  --muted-700:#6E695F;
  --muted-500:#9B958A;
  --muted-300:#C3BFB5;

  --signal-red:#B03A2E;
  --signal-green:#3E7A5C;

  --bg-canvas:var(--ink-0);
  --bg-surface:var(--ink-50);
  --bg-inset:var(--ink-100);
  --bg-inverse:var(--ink-950);
  --bg-noir:var(--ink-1000);
  --bg-gold:var(--gold-500);
  --bg-gold-soft:var(--gold-100);

  --text-primary:var(--ink-950);
  --text-secondary:var(--ink-600);
  --text-muted:var(--muted-500);
  --text-faint:var(--ink-400);
  --text-on-noir:var(--ink-0);
  --text-on-noir-muted:var(--muted-300);
  --text-on-gold:var(--ink-950);
  --text-accent:var(--gold-500);

  --border-hair:rgba(10,10,10,0.10);
  --border-line:rgba(10,10,10,0.18);
  --border-strong:rgba(10,10,10,0.42);
  --border-on-noir:rgba(255,255,255,0.12);
  --border-on-noir-strong:rgba(255,255,255,0.32);

  --grad-noir-bottom:linear-gradient(180deg,transparent 0%,rgba(5,5,5,0) 40%,rgba(5,5,5,0.85) 100%);
  --grad-noir-full:linear-gradient(180deg,rgba(5,5,5,0.55) 0%,rgba(5,5,5,0.15) 45%,rgba(5,5,5,0.9) 100%);
  --grad-vignette:radial-gradient(120% 90% at 50% 50%,rgba(5,5,5,0) 40%,rgba(5,5,5,0.55) 100%);
  --grad-ambient-warm:radial-gradient(120% 80% at 78% -10%,rgba(194,98,46,0.22),transparent 55%),radial-gradient(90% 60% at 12% 110%,rgba(245,166,35,0.10),transparent 55%);
  --grad-gold-wash:linear-gradient(135deg,var(--gold-100) 0%,var(--gold-300) 100%);
}

/* ─── Tokens · typography.css ─── */
:root{
  --font-display:'Anton',Impact,'Arial Narrow',sans-serif;
  --font-sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --text-display-xl:clamp(72px,9vw,168px);
  --text-display-lg:clamp(56px,6.5vw,120px);
  --text-display-md:clamp(40px,4.5vw,80px);
  --text-display-sm:clamp(30px,3vw,52px);

  --text-lead:22px;
  --text-body:17px;
  --text-body-sm:15px;
  --text-caption:13px;
  --text-eyebrow:12px;

  --leading-display:0.96;
  --leading-title:1.1;
  --leading-body:1.55;
  --leading-tight:1.2;

  --tracking-display:0.02em;
  --tracking-title:0em;
  --tracking-body:0;
  --tracking-eyebrow:0.28em;
  --tracking-mono:0.02em;

  --weight-display:400;
  --weight-display-bold:400;
  --weight-body:400;
  --weight-medium:600;
  --weight-semi:600;
  --weight-bold:700;
}

/* ─── Tokens · spacing.css ─── */
:root{
  --space-0:0;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:192px;

  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --radius-full:999px;

  --shadow-hair:0 1px 0 rgba(10,10,10,0.06);
  --shadow-sm:0 2px 8px rgba(10,10,10,0.06);
  --shadow-md:0 12px 32px -12px rgba(10,10,10,0.18);
  --shadow-lg:0 24px 60px -20px rgba(10,10,10,0.28);
  --shadow-noir:0 30px 80px -24px rgba(0,0,0,0.6);

  --content-narrow:640px;
  --content-body:820px;
  --content-wide:1200px;
  --content-max:1440px;

  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --dur-fast:180ms;
  --dur-base:280ms;
  --dur-slow:520ms;
  --dur-cinematic:900ms;
}

/* ─── Tokens · base.css ─── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  color:var(--text-primary);
  background:var(--bg-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  line-height:var(--leading-title);
  letter-spacing:var(--tracking-title);
  margin:0;
}
a{color:inherit;text-decoration:none;transition:opacity var(--dur-fast) var(--ease-out)}
a:hover{opacity:0.62}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:var(--gold-500);color:var(--ink-950)}
.lx-grain{position:fixed;inset:0;pointer-events:none;opacity:0.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}


/* ═══════════════════════ Landing ═══════════════════════ */

html{scroll-behavior:smooth}
html,body{max-width:100vw;overflow-x:clip}
.lx-page{background:#EFEDE6}
.lx-grain{inset:-10%;z-index:70}
.lx-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─── Botón (components/Button.jsx) ─── */
.lx-btn{font-family:var(--font-sans);font-weight:600;letter-spacing:0.04em;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);text-decoration:none;white-space:nowrap;text-transform:uppercase}
.lx-btn--sm{font-size:12px;padding:8px 16px;height:34px}
.lx-btn--md{font-size:13px;padding:13px 22px;height:44px}
.lx-btn--lg{font-size:14px;padding:16px 28px;height:54px}
.lx-btn--primary{background:var(--ink-950);color:var(--ink-0);border-color:var(--ink-950)}
.lx-btn--accent{background:var(--gold-500);color:var(--ink-950);border-color:var(--gold-500);box-shadow:0 8px 30px -10px rgba(245,166,35,0.6)}
.lx-btn--onNoir{background:transparent;color:var(--ink-0);border-color:var(--border-on-noir-strong)}
.lx-magnet{display:inline-flex}

/* ─── Eyebrow (components/Eyebrow.jsx) ─── */
.lx-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.lx-eyebrow--noir{color:var(--muted-300)}

/* ─── SectionHeader (components/SectionHeader.jsx) ─── */
.lx-sh{display:flex;flex-direction:column;gap:20px;align-items:flex-start;text-align:left;max-width:820px;margin:0}
.lx-sh h2{font-family:var(--font-display);font-size:clamp(38px,5vw,76px);line-height:var(--leading-display);letter-spacing:var(--tracking-display);font-weight:400;text-transform:uppercase;color:var(--ink-950)}
.lx-sh p{font-family:var(--font-sans);font-size:19px;line-height:1.55;color:var(--text-secondary);max-width:620px;margin:0}
.lx-sh--noir h2{color:var(--ink-0)}

/* ─── Badge (components/Badge.jsx) ─── */
.lx-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;padding:4px 10px;border-radius:var(--radius-full);background:var(--ink-100);color:var(--ink-950)}
.lx-badge--gold{background:var(--gold-500);color:var(--ink-950)}

/* ─── Intro cortina ─── */
.lx-intro{position:fixed;inset:0;z-index:200;pointer-events:none}
.lx-intro-bar{position:absolute;left:0;right:0;height:50%;background:#050505;top:0;animation:lx-ib 1s cubic-bezier(.76,0,.24,1) .55s forwards}
.lx-intro-bar.b{top:auto;bottom:0;animation-name:lx-ibb}
.lx-intro-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--gold-500);box-shadow:0 0 18px var(--gold-500);transform:scaleX(0);animation:lx-il .6s cubic-bezier(.7,0,.3,1) forwards,lx-io .3s ease .7s forwards}
@keyframes lx-il{to{transform:scaleX(1)}}
@keyframes lx-io{to{opacity:0}}
@keyframes lx-ib{to{transform:translateY(-101%)}}
@keyframes lx-ibb{to{transform:translateY(101%)}}
@media (prefers-reduced-motion:reduce){.lx-intro{display:none}}

/* ─── HUD: timecode + regla de capítulos ─── */
.lx-tc-wrap{position:fixed;left:26px;bottom:27px;z-index:80;display:flex;align-items:center;gap:10px;pointer-events:none}
.lx-tc{font-family:var(--font-mono);font-size:11px;letter-spacing:0.18em;color:#fff;mix-blend-mode:difference}
.lx-rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.lx-ch{display:flex;align-items:center;gap:10px;text-decoration:none;mix-blend-mode:difference;color:#fff}
.lx-ch-lbl{font-family:var(--font-mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:opacity .35s,transform .35s}
.lx-ch-bar{display:block;width:18px;height:1px;background:#fff;transition:width .4s cubic-bezier(.16,1,.3,1)}
.lx-ch.lx-act .lx-ch-lbl,.lx-ch:hover .lx-ch-lbl{opacity:1;transform:none}
.lx-ch.lx-act .lx-ch-bar{width:36px}

/* ─── Nav (components/Nav.jsx, tone noir) ─── */
.lx-navwrap{position:fixed;top:0;left:0;right:0;z-index:50}
.lx-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:rgba(10,10,10,0.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-on-noir);color:var(--ink-0);position:relative;transition:background .5s ease,border-color .5s ease}
.lx-navwrap:not(.lx-solid) .lx-nav{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.lx-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;z-index:2}
.lx-brand img{height:28px;width:auto}
.lx-brand span{font-family:var(--font-display);font-size:18px;letter-spacing:var(--tracking-display);text-transform:uppercase}
.lx-nav-links{display:flex;gap:32px;align-items:center}
.lx-nav-links > a:not(.lx-btn){font-family:var(--font-sans);font-size:14px;font-weight:600;text-decoration:none;color:var(--ink-200)}
.lx-burger{display:none;background:transparent;border:1px solid rgba(255,255,255,0.28);border-radius:6px;padding:10px 12px;flex-direction:column;gap:4px;cursor:pointer;z-index:2}
.lx-burger span{display:block;width:20px;height:2px;background:currentColor;transition:transform 200ms,opacity 200ms}
.lx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.lx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.lx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.lx-menu{position:absolute;top:100%;left:0;right:0;background:#0A0A0A;border-bottom:1px solid var(--border-on-noir);padding:24px 20px 28px;display:flex;flex-direction:column;gap:18px;z-index:1}
.lx-menu[hidden]{display:none}
.lx-menu > a:not(.lx-btn){font-family:var(--font-display);font-size:22px;text-transform:uppercase;letter-spacing:0.04em;text-decoration:none;color:var(--ink-0)}
.lx-menu-cta{margin-top:12px}
.lx-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold-500);box-shadow:0 0 10px rgba(245,166,35,0.6);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ─── Hero fijado ─── */
.lx-herowrap{position:sticky;top:0;z-index:0;transform-origin:50% 30%}
.lx-cover{position:relative;z-index:1;box-shadow:0 -30px 80px rgba(5,5,5,0.5)}

/* ─── 1. Hero ─── */
.lx-hero{position:relative;min-height:100vh;overflow:hidden;background:#0A0A0A;display:flex;flex-direction:column}
.lx-hero-media{position:absolute;inset:-24px}
.lx-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.lx-hero-grad{position:absolute;inset:0;pointer-events:none}
.lx-hero-grad.full{background:var(--grad-noir-full)}
.lx-hero-grad.warm{background:var(--grad-ambient-warm)}
.lx-hero-col{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:160px 40px 0;display:flex;flex-direction:column;gap:36px;flex:1;color:#EFEDE6}
.lx-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-500)}
.lx-hero-eyebrow span{width:8px;height:8px;border-radius:50%;background:currentColor}
.lx-hero-title{position:relative}
.lx-hero-title h1,.lx-hero-rot{font-family:var(--font-display);font-size:clamp(44px,7.4vw,120px);line-height:1;letter-spacing:0.02em;text-transform:uppercase;margin:0}
.lx-hero-rot{position:relative;height:1.05em;margin-top:6px}
.lx-word{position:absolute;left:0;top:0;color:var(--gold-300);white-space:nowrap;display:inline-block;transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .32s cubic-bezier(.16,1,.3,1)}
.lx-hero-lead{font-family:var(--font-sans);font-size:20px;line-height:1.55;color:#D8D3C8;max-width:640px;margin:0}
.lx-hero-lead strong{color:#fff;font-weight:700}
.lx-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;margin-bottom:24px}
.lx-hero-cue{margin-top:auto;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding-bottom:26px}
.lx-hero-cue span:last-child{font-family:var(--font-mono);font-size:9px;letter-spacing:0.3em;text-transform:uppercase;color:var(--muted-300)}

/* ─── 2. Barra de autoridad ─── */
.lx-auth{background:#0A0A0A;padding:32px 0;border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12);overflow:hidden}
.lx-auth-in{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:22px;padding:0 40px}
.lx-auth-head{display:flex;align-items:center;gap:14px}
.lx-auth-lbl{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted-500);white-space:nowrap}
.lx-auth-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(245,166,35,0.6),rgba(255,255,255,0.14) 40%)}
.lx-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(90deg,transparent,black 6%,black 94%,transparent)}
.lx-marquee-track{display:flex;align-items:center;gap:96px;width:max-content;animation:lx-marquee 42s linear infinite}
@keyframes lx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lx-logo{width:auto;opacity:0.8}
.lx-logo.h22{height:22px}.lx-logo.h30{height:30px}.lx-logo.h36{height:36px}.lx-logo.h40{height:40px}
.lx-logo.h46{height:46px}.lx-logo.h48{height:48px}.lx-logo.h60{height:60px}.lx-logo.h68{height:68px}

/* ─── 3. Diferenciales ─── */
.lx-dif{background:#EFEDE6;padding:120px 40px 96px;scroll-margin-top:80px}
.lx-wrap{max-width:1280px;margin:0 auto}
.lx-dif-top{display:grid;grid-template-columns:1.05fr 1.15fr;gap:56px;align-items:center;margin-bottom:88px}
.lx-dif-img{width:100%;height:auto;max-height:660px;object-fit:contain;display:block;-webkit-mask-image:radial-gradient(ellipse 82% 88% at 50% 50%,black 60%,rgba(0,0,0,0.85) 78%,transparent 100%);mask-image:radial-gradient(ellipse 82% 88% at 50% 50%,black 60%,rgba(0,0,0,0.85) 78%,transparent 100%)}
.lx-dif-copy{display:flex;flex-direction:column;gap:28px}
.lx-dif-copy h2{font-family:var(--font-display);font-size:clamp(52px,7.5vw,120px);line-height:0.94;letter-spacing:0.02em;text-transform:uppercase;margin:0}
.lx-gold{color:var(--gold-500)}
.lx-dif-count{display:flex;align-items:flex-end;gap:20px;padding-top:8px}
.lx-big-num{font-family:var(--font-display);font-size:clamp(96px,12vw,180px);line-height:0.85;color:var(--gold-500);letter-spacing:-0.02em;font-weight:400;font-variant-numeric:tabular-nums}
.lx-dif-note{display:flex;flex-direction:column;gap:6px;padding-bottom:14px;border-left:2px solid var(--gold-500);padding-left:18px;max-width:380px}
.lx-dif-note span{font-family:var(--font-mono);font-size:11px;letter-spacing:0.28em;text-transform:uppercase;color:var(--text-muted)}
.lx-dif-note p{font-family:var(--font-sans);font-size:17px;line-height:1.5;color:var(--ink-800);margin:0}
.lx-dif-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lx-cell{display:flex}
.lx-film-card{flex:1;position:relative;background:#FFFFFF;color:var(--ink-900);padding:44px 24px 32px;border-radius:6px;box-shadow:9px 9px 0 rgba(10,10,10,0.07),0 20px 40px -26px rgba(10,10,10,0.3);transition:box-shadow 400ms ease;display:flex;flex-direction:column;gap:16px}
.lx-film-card:hover{box-shadow:13px 13px 0 rgba(245,166,35,0.35),0 32px 60px -20px rgba(10,10,10,0.35)}
.lx-film-card::before,.lx-film-card::after{content:"";position:absolute;left:16px;right:16px;height:12px;background-image:radial-gradient(circle at 8px 6px,#EFEDE6 3px,transparent 3.5px);background-size:22px 12px;background-repeat:repeat-x}
.lx-film-card::before{top:8px}
.lx-film-card::after{bottom:8px}
.lx-card-idx{font-family:var(--font-mono);font-size:11px;letter-spacing:0.28em;color:var(--gold-500);opacity:0.7}
.lx-film-card h3{font-family:var(--font-display);font-size:21px;text-transform:uppercase;letter-spacing:0.01em;margin:0;color:var(--ink-900)}
.lx-film-card p{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0}

/* ─── 4. Equipo ─── */
.lx-team{background:#EFEDE6;padding:40px 0 40px;scroll-margin-top:80px;overflow:hidden}
.lx-team-grid{max-width:1440px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:40px;align-items:center}
.lx-team-img{width:100%;height:auto;max-height:640px;object-fit:contain;display:block;-webkit-mask-image:radial-gradient(ellipse 84% 90% at 50% 50%,black 62%,rgba(0,0,0,0.85) 80%,transparent 100%);mask-image:radial-gradient(ellipse 84% 90% at 50% 50%,black 62%,rgba(0,0,0,0.85) 80%,transparent 100%)}
.lx-team-copy{display:flex;flex-direction:column;gap:22px}
.lx-team-copy h2{font-family:var(--font-display);font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:0.02em;text-transform:uppercase;margin:0}
.lx-team-copy > p{font-family:var(--font-sans);font-size:15px;line-height:1.55;color:var(--text-secondary);margin:0}
.lx-quote{position:relative;padding-left:16px;display:flex;flex-direction:column;gap:6px;margin:0}
.lx-quote p{font-family:var(--font-sans);font-size:14px;line-height:1.55;color:var(--ink-800);margin:0}
.lx-quote figcaption{font-family:var(--font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}

/* ─── 5. Servicios ─── */
.lx-svc{position:relative;background:#EFEDE6;padding:120px 40px;overflow:hidden;scroll-margin-top:80px}
.lx-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.lx-bg img{position:absolute;top:-15%;left:0;width:100%;height:130%;object-fit:cover}
.lx-svc .lx-bg img{filter:blur(36px) saturate(0.85);opacity:0.28}
.lx-svc .lx-veil{position:absolute;inset:0;background:linear-gradient(180deg,#EFEDE6 0%,#EFEDE6cc 30%,#EFEDE6cc 70%,#EFEDE6 100%)}
.lx-svc-in{position:relative;z-index:1;max-width:1280px;margin:0 auto}
.lx-pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.lx-cell--rel{position:relative}
.lx-halo{position:absolute;inset:-28px;border-radius:32px;background:radial-gradient(60% 50% at 50% 30%,rgba(245,166,35,0.34),transparent 72%);pointer-events:none}
.lx-pkg{flex:1;position:relative;overflow:hidden;background:#FFFFFF;color:var(--ink-900);border-radius:8px;padding:36px;display:flex;flex-direction:column;gap:20px;min-height:380px;box-shadow:0 20px 40px -26px rgba(10,10,10,0.25)}
.lx-pkg--featured{box-shadow:0 30px 60px -30px rgba(245,166,35,0.35),0 20px 40px -26px rgba(10,10,10,0.25)}
.lx-pkg-head{display:flex;justify-content:space-between;align-items:center}
.lx-pkg-num{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);letter-spacing:0.16em}
.lx-pkg h3{font-family:var(--font-display);font-size:32px;text-transform:uppercase;margin:0}
.lx-pkg > p{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:var(--text-secondary);margin:0}
.lx-pkg ul{list-style:none;margin:4px 0 0;padding:20px 0 0;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(10,10,10,0.10)}
.lx-pkg li{font-family:var(--font-sans);font-size:13px;line-height:var(--leading-body);color:var(--ink-800)}
.lx-pkg-cta{margin-top:auto}

/* ─── 6. Proceso ─── */
.lx-proc{background:#0A0A0A;padding:120px 40px;scroll-margin-top:80px}
.lx-steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin:72px 0 0;position:relative;list-style:none;padding:0}
.lx-steps-line{position:absolute;top:26px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,var(--gold-500),rgba(245,166,35,0.35) 50%,rgba(255,255,255,0.14))}
.lx-step{position:relative;padding:0 28px;display:flex;flex-direction:column;gap:16px}
.lx-step-head{display:flex;align-items:center;gap:14px}
.lx-step-num{font-family:var(--font-display);font-size:32px;line-height:var(--leading-body);color:var(--gold-500);background:#0A0A0A;padding-right:8px}
.lx-step-head svg{color:#EFEDE6;width:22px;height:22px}
.lx-step h3{font-family:var(--font-display);font-size:24px;text-transform:uppercase;color:#EFEDE6;margin:0}
.lx-step p{font-family:var(--font-sans);font-size:14px;line-height:1.6;color:#B4B0A8;margin:0}

/* ─── 7. CTA final ─── */
.lx-cta{position:relative;background:#0A0A0A;padding:140px 40px;overflow:hidden;scroll-margin-top:80px}
.lx-cta .lx-bg img{filter:blur(30px) saturate(0.8);opacity:0.35}
.lx-cta .lx-veil{position:absolute;inset:0;background:linear-gradient(180deg,#0A0A0A 0%,#0A0A0Acc 30%,#0A0A0Acc 70%,#0A0A0A 100%)}
.lx-cta-halo{position:absolute;inset:0;margin:auto;width:min(80vw,900px);height:min(50vw,480px);border-radius:50%;background:radial-gradient(closest-side,rgba(245,166,35,0.20),rgba(245,166,35,0.05) 55%,transparent);pointer-events:none}
.lx-cta-in{position:relative;z-index:1;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px}
.lx-cta-in h2{font-family:var(--font-display);font-size:clamp(40px,7vw,104px);line-height:0.96;letter-spacing:0.02em;text-transform:uppercase;margin:0;max-width:1000px;color:#EFEDE6}
.lx-cta-in > p{font-family:var(--font-sans);font-size:19px;line-height:1.55;color:#B4B0A8;max-width:560px;margin:0}
.lx-cta-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* ─── 8. Footer (components/Footer.jsx) ─── */
.lx-footer{background:var(--ink-1000);color:var(--ink-0);padding:80px 20px 32px}
.lx-footer-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:48px}
.lx-footer-brand{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.lx-footer-brand img{height:40px;width:auto}
.lx-footer-contact{font-family:var(--font-mono);font-size:13px;line-height:1.9;color:var(--muted-300);letter-spacing:0.04em;display:flex;flex-direction:column;gap:2px;font-style:normal}
.lx-footer-tag{font-family:var(--font-display);font-size:22px;line-height:1.2;letter-spacing:var(--tracking-display);text-transform:uppercase;margin:0;max-width:360px;color:var(--ink-100)}
.lx-footer-col{display:flex;flex-direction:column;gap:12px}
.lx-footer-col h3{font-family:var(--font-mono);font-size:11px;font-weight:400;line-height:var(--leading-body);letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-400)}
.lx-footer-col a{font-family:var(--font-sans);font-size:14px;color:var(--ink-100);text-decoration:none}
.lx-footer-bottom{max-width:1240px;margin:56px auto 0;padding-top:20px;border-top:1px solid var(--border-on-noir);display:flex;justify-content:space-between;gap:12px;font-family:var(--font-mono);font-size:11px;color:var(--ink-400);letter-spacing:0.06em;flex-wrap:wrap}

/* ─── Móvil (breakpoint único: 900px) ─── */
@media (max-width:900px){
  .lx-m-hide{display:none !important}
  .lx-nav-links{display:none}
  .lx-burger{display:flex}
  .lx-hero-col{padding:120px 20px 40px}
  .lx-hero-ctas,.lx-cta-btns{display:flex;width:100%}
  /* Como en la referencia: el wrapper ocupa el 100 %, el botón conserva su ancho natural. */
  .lx-hero-ctas > *,.lx-cta-btns > *{flex:1;width:100%}
  .lx-auth{padding-top:22px;padding-bottom:22px}
  .lx-marquee-track{gap:40px;animation-duration:18s}
  .lx-logo.m18{height:18px}.lx-logo.m32{height:32px}.lx-logo.m36{height:36px}
  .lx-logo.m44{height:44px}.lx-logo.m50{height:50px}
  .lx-dif,.lx-svc,.lx-proc,.lx-cta{padding-left:18px;padding-right:18px;padding-top:64px;padding-bottom:64px}
  .lx-team-grid{padding-left:18px;padding-right:18px}
  .lx-dif-top,.lx-team-grid,.lx-pkg-grid,.lx-steps{grid-template-columns:1fr;gap:32px}
  .lx-dif-grid{grid-template-columns:1fr 1fr;gap:14px}
  .lx-footer-grid{grid-template-columns:1fr;gap:36px}
  .lx-footer-bottom{flex-direction:column;align-items:flex-start;gap:6px}
}