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

:root { --navy:#06204b; --blue:#0787f7; --blue-2:#36b8ff; --ink:#071d3f; --muted:#667387; --line:#dce4ee; --soft:#f4f8fc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Manrope","Segoe UI",sans-serif; }
a { color:inherit; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:100; background:#fff; padding:12px 16px; border-radius:8px; }
.skip-link:focus { top:12px; }
.landing-header { position:sticky; top:0; z-index:30; display:grid; grid-template-columns:230px 1fr 130px; align-items:center; gap:28px; width:calc(100% - 48px); max-width:1440px; margin:18px auto 0; padding:13px 18px; border:1px solid rgba(7,29,63,.08); border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 14px 45px rgba(6,32,75,.08); backdrop-filter:blur(16px); }
.cit-brand { display:inline-flex; align-items:center; gap:11px; width:max-content; text-decoration:none; }
.cit-mark { display:grid; place-items:center; width:68px; height:48px; border-radius:52% 48% 44% 56%; color:#fff; background:var(--blue); font-size:32px; font-weight:800; letter-spacing:-4px; line-height:1; }
.cit-name { color:var(--navy); font-size:9px; font-weight:700; line-height:1.05; }
.variant-switcher { display:flex; justify-content:center; gap:4px; }
.variant-switcher a { display:flex; align-items:center; gap:8px; padding:10px 12px; color:#647185; border-radius:13px; font-size:12px; font-weight:700; text-decoration:none; }
.variant-switcher a span { color:#8b97a8; font-size:10px; letter-spacing:.08em; }
.variant-switcher a:hover,.variant-switcher a[aria-current="page"] { color:var(--navy); background:#eaf5ff; }
.variant-switcher a[aria-current="page"] span { color:var(--blue); }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 22px; border-radius:999px; font-size:14px; font-weight:800; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#fff; background:var(--blue); box-shadow:0 12px 25px rgba(7,135,247,.25); }
.button-dark { color:#fff; background:var(--navy); }
.button-light { color:var(--navy); background:#fff; }
.kicker { margin:0 0 20px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.16em; }
.hero { max-width:1440px; min-height:690px; margin:24px auto 0; border-radius:38px; overflow:hidden; }
.hero h1 { max-width:780px; margin:0; color:#fff; font-size:clamp(48px,5.4vw,82px); line-height:1.02; letter-spacing:-.055em; }
.hero h1 em { color:var(--blue-2); font-style:normal; }
.hero .lead { max-width:690px; margin:28px 0 34px; color:rgba(255,255,255,.82); font-size:18px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:26px; }
.text-link { color:#fff; font-size:14px; font-weight:800; text-decoration:none; }
.hero-radar { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:54px; padding:70px 60px; background:radial-gradient(circle at 88% 12%,rgba(7,135,247,.34),transparent 35%),linear-gradient(135deg,#04152f 0%,#092b5f 100%); }
.trust-row { display:flex; gap:28px; margin:46px 0 0; padding:24px 0 0; border-top:1px solid rgba(255,255,255,.15); list-style:none; color:rgba(255,255,255,.6); font-size:11px; }
.trust-row strong { display:block; color:#fff; font-size:24px; }
.radar-visual { position:relative; padding:18px; border:1px solid rgba(255,255,255,.22); border-radius:24px; background:rgba(247,251,255,.96); box-shadow:0 30px 70px rgba(0,0,0,.26); transform:rotate(1.5deg); }
.visual-top { display:flex; align-items:center; gap:7px; color:var(--ink); font-size:12px; }
.visual-top>span { width:8px; height:8px; border-radius:50%; background:#d7e0eb; }
.visual-top b { margin-left:10px; }
.visual-top i { margin-left:auto; color:#168a63; font-size:10px; font-style:normal; font-weight:700; }
.visual-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; }
.visual-metrics article { padding:15px; border:1px solid #e3eaf2; border-radius:14px; background:#fff; }
.visual-metrics small,.visual-metrics span { display:block; color:#78869a; font-size:9px; }
.visual-metrics strong { display:block; margin:5px 0; font-size:24px; }
.visual-metrics .alert-metric { color:#d65358; background:#fff7f7; border-color:#ffd7d9; }
.visual-chart { margin:10px 0; padding:16px; border-radius:14px; background:#eaf5ff; }
.chart-head { display:flex; justify-content:space-between; font-size:10px; }
.chart-head small { color:#79889c; }
.bars { display:flex; height:150px; align-items:end; gap:15px; margin-top:15px; padding:0 15px; border-bottom:1px solid #bfd9ef; }
.bars i { flex:1; height:var(--h); border-radius:7px 7px 0 0; background:linear-gradient(#2caaff,#087fe1); }
.visual-feed { display:grid; grid-template-columns:9px 1fr auto; gap:4px 9px; align-items:center; margin-top:8px; padding:11px 13px; border:1px solid #e3eaf2; border-radius:12px; background:#fff; font-size:10px; }
.visual-feed small { grid-column:2; color:#7d899a; }
.visual-feed time { grid-column:3; grid-row:1/3; color:#8793a4; }
.status-dot { width:8px; height:8px; border-radius:50%; }
.status-dot.debt { background:#ec5d63; }
.status-dot.ok { background:#28ae7c; }
.situation,.flow-story,.day-compare,.calculator-section,.roi-proof,.evidence-section { max-width:1380px; margin:0 auto; padding:130px 34px; }
.section-heading { display:grid; grid-template-columns:.45fr 1fr; gap:40px; align-items:start; }
.section-heading .kicker { grid-column:1; }
.section-heading h2 { grid-column:2; margin:0; font-size:clamp(40px,4vw,62px); line-height:1.07; letter-spacing:-.045em; }
.problem-grid,.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:70px; background:var(--line); }
.problem-grid article,.proof-grid article { padding:36px; background:#fff; }
.problem-grid article>span,.proof-grid article>span { color:var(--blue); font-size:12px; font-weight:800; }
.problem-grid h3,.proof-grid h3 { margin:60px 0 14px; font-size:24px; }
.problem-grid p,.proof-grid p { color:var(--muted); line-height:1.65; }
.outcome-band { display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:1440px; margin:0 auto; padding:80px 70px; color:#fff; border-radius:38px; background:var(--blue); }
.outcome-band .kicker { color:#d7f1ff; }
.outcome-band h2 { margin:0; font-size:clamp(40px,4vw,64px); line-height:1.06; letter-spacing:-.045em; }
.outcome-list p { display:grid; grid-template-columns:30px 120px 1fr; gap:10px; margin:0; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.25); font-size:14px; line-height:1.6; }
.outcome-list span { opacity:.65; }

.landing-l2 { --blue:#0065f2; }
.hero-flow { position:relative; display:grid; place-items:center; padding:100px 170px; text-align:center; background:#eff7ff; }
.hero-flow:before,.hero-flow:after { position:absolute; width:260px; height:260px; border:1px solid #9bceff; border-radius:50%; content:""; }
.hero-flow:before { left:-110px; top:80px; box-shadow:0 0 0 45px rgba(0,101,242,.05),0 0 0 90px rgba(0,101,242,.03); }
.hero-flow:after { right:-100px; bottom:-90px; box-shadow:0 0 0 45px rgba(0,101,242,.05); }
.hero-flow .hero-copy { position:relative; z-index:2; }
.hero-flow h1 { color:var(--navy); }
.hero-flow h1 em { color:var(--blue); }
.hero-flow .lead { margin-left:auto; margin-right:auto; color:#56677d; }
.flow-note { position:absolute; z-index:3; left:42px; top:42px; max-width:220px; padding:18px; text-align:left; border:1px solid #dce8f3; border-radius:15px; background:rgba(255,255,255,.9); box-shadow:0 15px 35px rgba(8,44,92,.08); transform:rotate(-4deg); }
.flow-note-result { left:auto; right:42px; top:auto; bottom:42px; transform:rotate(4deg); }
.flow-note span { display:block; margin-bottom:8px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.14em; }
.flow-note b { font-size:13px; line-height:1.5; }
.section-heading.centered { display:block; max-width:820px; margin:0 auto; text-align:center; }
.section-heading.centered h2 { font-size:clamp(42px,4vw,62px); }
.section-heading.centered p:last-child { color:var(--muted); font-size:17px; }
.flow-line { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:78px; }
.flow-line:before { position:absolute; left:8%; right:8%; top:26px; height:2px; background:#bedcff; content:""; }
.flow-line article { position:relative; padding:0 16px; text-align:center; }
.flow-line article>span { position:relative; z-index:2; display:grid; place-items:center; width:54px; height:54px; margin:0 auto 30px; color:#fff; border:8px solid #fff; border-radius:50%; background:var(--blue); box-shadow:0 0 0 1px #abd4ff; font-size:12px; font-weight:800; }
.flow-line small { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.flow-line h3 { margin:10px 0; font-size:20px; }
.flow-line p { color:var(--muted); font-size:14px; line-height:1.65; }
.day-compare { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:center; padding-top:70px; }
.compare-copy h2 { margin:0 0 20px; font-size:48px; line-height:1.08; letter-spacing:-.04em; }
.compare-copy>p:last-child { color:var(--muted); line-height:1.7; }
.compare-board { display:grid; grid-template-columns:1fr 40px 1fr; align-items:center; padding:22px; border-radius:28px; background:var(--soft); }
.compare-column { padding:24px; border-radius:20px; }
.compare-column span { font-size:10px; font-weight:800; letter-spacing:.14em; }
.compare-column p { margin:0; padding:15px 0; border-bottom:1px solid #dde5ee; font-size:13px; font-weight:700; }
.compare-column.muted { color:#7d8796; }
.compare-column.muted p { text-decoration:line-through; }
.compare-column.result { color:#fff; background:var(--blue); box-shadow:0 18px 35px rgba(0,101,242,.18); }
.compare-column.result p { border-color:rgba(255,255,255,.23); }
.compare-arrow { color:var(--blue); text-align:center; }
.capacity-strip { display:flex; align-items:baseline; justify-content:center; gap:16px; max-width:1440px; margin:0 auto; padding:55px 30px; color:#fff; border-radius:30px; background:var(--navy); }
.capacity-strip p { margin-right:20px; font-size:13px; font-weight:700; }
.capacity-strip strong { color:#59bdff; font-size:35px; }
.capacity-strip span { font-size:12px; }
.capacity-strip i { width:1px; height:36px; margin:0 8px; background:rgba(255,255,255,.2); }

.landing-l3 { --blue:#0c80ff; }
.hero-roi { display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center; padding:75px 65px; background:linear-gradient(135deg,#073272 0%,#047cf2 62%,#20a9ff 100%); }
.hero-roi .hero-copy { padding-right:10px; }
.hero-roi h1 { font-size:clamp(48px,5vw,74px); }
.hero-roi h1 em { color:#bde8ff; }
.hero-roi .kicker { color:#c8ecff; }
.roi-statement { padding:46px; border:1px solid rgba(255,255,255,.3); border-radius:28px; color:#fff; background:rgba(3,38,86,.28); backdrop-filter:blur(12px); }
.roi-statement small { font-weight:800; letter-spacing:.15em; }
.roi-statement>p { margin:50px 0; font-size:38px; line-height:1.18; letter-spacing:-.035em; }
.roi-statement>p b { color:#bde8ff; }
.equation { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:8px; align-items:center; }
.equation span { padding:10px; border-radius:10px; text-align:center; background:rgba(255,255,255,.13); font-size:10px; }
.equation i { opacity:.65; font-style:normal; }
.equation b { grid-column:1/-1; margin-top:12px; color:#bde8ff; font-size:12px; text-align:center; }
.light-link { color:#fff; }
.calculator-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; }
.calculator-copy h2 { margin:0 0 24px; font-size:50px; line-height:1.06; letter-spacing:-.045em; }
.calculator-copy>p { color:var(--muted); line-height:1.7; }
.formula-note { margin-top:28px; padding:15px 18px; border-left:3px solid var(--blue); color:var(--navy); background:#eff7ff; font-size:12px; font-weight:800; }
.roi-calculator { display:grid; gap:24px; padding:34px; border:1px solid #d6e3ef; border-radius:28px; background:var(--soft); box-shadow:0 22px 55px rgba(10,45,92,.08); }
.roi-calculator label { display:grid; grid-template-columns:1fr auto; gap:12px; font-size:13px; font-weight:800; }
.roi-calculator output { color:var(--blue); font-size:18px; }
.roi-calculator input { grid-column:1/-1; width:100%; accent-color:var(--blue); }
.calculator-result { padding:28px; border-radius:20px; color:#fff; background:var(--navy); }
.calculator-result small { color:#aedfff; font-size:10px; font-weight:800; letter-spacing:.13em; }
.calculator-result strong { display:block; margin:10px 0; font-size:42px; }
.calculator-result p { margin:0; color:rgba(255,255,255,.65); font-size:12px; }
.roi-proof { padding-top:70px; }
.proof-grid article b { display:block; margin-top:30px; color:var(--blue); font-size:12px; }
.roi-formula { display:grid; grid-template-columns:.4fr 1fr; gap:30px; align-items:center; margin-top:60px; padding:32px; border:1px solid #b9dcff; border-radius:20px; background:#edf7ff; }
.roi-formula span { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.roi-formula strong { font-size:20px; }
.roi-formula p { grid-column:2; margin:-14px 0 0; color:var(--muted); font-size:12px; }

.evidence-section { margin-top:90px; padding-top:85px; padding-bottom:85px; border-radius:38px; background:var(--soft); }
.evidence-section>div:first-child { display:flex; justify-content:space-between; gap:50px; align-items:end; }
.evidence-section h2 { max-width:690px; margin:0; font-size:48px; line-height:1.08; letter-spacing:-.04em; }
.evidence-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:55px; }
.evidence-grid article { padding:26px; border:1px solid #dfe7ef; border-radius:17px; background:#fff; }
.evidence-grid strong { display:block; color:var(--blue); font-size:42px; }
.evidence-grid span { display:block; margin:4px 0 18px; font-size:13px; font-weight:800; }
.evidence-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.evidence-disclaimer { margin:24px 0 0; color:#7b8797; font-size:11px; line-height:1.6; }
.final-cta { max-width:1440px; margin:120px auto 0; padding:80px 30px; border-radius:38px; color:#fff; background:linear-gradient(135deg,#087ce7,#1260d8); text-align:center; }
.cit-mark-white { margin:0 auto 35px; color:var(--blue); background:#fff; }
.final-cta .kicker { color:#c7eaff; }
.final-cta h2 { margin:0; font-size:clamp(44px,5vw,70px); line-height:1.05; letter-spacing:-.05em; }
.final-cta>p:not(.kicker) { margin:22px auto 30px; color:rgba(255,255,255,.78); }
.landing-footer { display:grid; grid-template-columns:1fr auto; gap:35px; align-items:end; max-width:1380px; margin:0 auto; padding:70px 34px 45px; color:#718096; font-size:12px; }
.landing-footer>p:last-child { grid-column:1/-1; padding-top:25px; border-top:1px solid var(--line); }
.landing-footer>p { margin:0; }

@media (max-width:1050px) {
  .landing-header { grid-template-columns:1fr auto; }
  .variant-switcher { grid-column:1/-1; grid-row:2; overflow-x:auto; justify-content:flex-start; }
  .hero { margin-left:16px; margin-right:16px; }
  .hero-radar,.hero-roi { grid-template-columns:1fr; }
  .hero-flow { padding:120px 70px; }
  .radar-visual { max-width:720px; }
  .section-heading,.outcome-band,.day-compare,.calculator-section { grid-template-columns:1fr; }
  .section-heading h2 { grid-column:1; }
  .evidence-grid { grid-template-columns:repeat(2,1fr); }
  .flow-line { grid-template-columns:repeat(2,1fr); row-gap:50px; }
  .flow-line:before { display:none; }
  .capacity-strip { flex-wrap:wrap; margin-left:16px; margin-right:16px; }
  .roi-statement { max-width:700px; }
}

@media (max-width:680px) {
  .landing-header { width:calc(100% - 24px); margin-top:10px; border-radius:18px; }
  .header-login { min-height:42px; padding:0 16px; }
  .cit-mark { width:56px; height:42px; font-size:27px; }
  .cit-name { display:none; }
  .variant-switcher a { min-width:76px; padding:9px; font-size:10px; }
  .variant-switcher a span { display:none; }
  .hero { min-height:auto; border-radius:26px; }
  .hero-radar,.hero-roi { padding:56px 24px; gap:42px; }
  .hero h1 { font-size:43px; }
  .hero .lead { font-size:16px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .trust-row { gap:15px; }
  .trust-row strong { font-size:20px; }
  .visual-metrics { grid-template-columns:1fr; }
  .bars { height:100px; }
  .situation,.flow-story,.day-compare,.calculator-section,.roi-proof,.evidence-section { padding:85px 22px; }
  .problem-grid,.proof-grid,.evidence-grid,.flow-line { grid-template-columns:1fr; }
  .problem-grid h3,.proof-grid h3 { margin-top:30px; }
  .outcome-band { margin:0 16px; padding:55px 25px; gap:30px; border-radius:26px; }
  .outcome-list p { grid-template-columns:28px 1fr; font-size:13px; }
  .outcome-list p b { grid-column:2; }
  .section-heading h2,.compare-copy h2,.calculator-copy h2,.evidence-section h2 { font-size:38px; }
  .hero-flow { margin-left:16px; margin-right:16px; padding:150px 24px 140px; }
  .flow-note { left:18px; top:24px; }
  .flow-note-result { left:auto; right:18px; top:auto; bottom:24px; }
  .compare-board { grid-template-columns:1fr; }
  .compare-arrow { transform:rotate(90deg); }
  .capacity-strip { display:grid; grid-template-columns:auto 1fr; align-items:center; justify-content:start; padding:35px 24px; }
  .capacity-strip p { grid-column:1/-1; }
  .capacity-strip i { display:none; }
  .roi-statement { padding:26px; }
  .roi-statement>p { font-size:29px; }
  .equation { grid-template-columns:1fr; }
  .equation i { text-align:center; }
  .roi-formula { grid-template-columns:1fr; }
  .roi-formula p { grid-column:1; margin:0; }
  .evidence-section { margin:70px 16px 0; }
  .evidence-section>div:first-child { display:block; }
  .final-cta { margin:80px 16px 0; padding:60px 22px; border-radius:26px; }
  .landing-footer { grid-template-columns:1fr; padding:55px 24px 35px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }

/* L1 · Identidad CIT ONE */
.landing-l1 { background:#fff; color:#061d48; font-family:"DM Sans","Segoe UI",sans-serif; }
.landing-l1 .landing-header { max-width:1240px; min-height:86px; padding:10px 14px 10px 22px; border-color:rgba(255,255,255,.78); border-radius:999px; background:rgba(255,255,255,.76); box-shadow:0 18px 45px rgba(6,29,72,.10); backdrop-filter:blur(22px) saturate(150%); }
.cit-logo { display:block; width:190px; max-width:100%; height:58px; object-fit:contain; object-position:left center; }
.landing-l1 .variant-switcher a { padding:12px 14px; color:#172033; font-size:14px; font-weight:800; }
.landing-l1 .variant-switcher a[aria-current="page"] { color:#0b7cf4; background:#edf6ff; }
.landing-l1 .button { min-height:52px; font-size:16px; font-weight:900; }
.landing-l1 .button-primary { background:#0b7cf4; box-shadow:0 14px 30px rgba(11,124,244,.20); }
.landing-l1 .button-dark { background:#061d48; }
.landing-l1 .kicker { color:#0b7cf4; font-size:14px; font-weight:900; letter-spacing:.2em; }
.cit-one-hero { position:relative; isolation:isolate; display:flex; align-items:center; max-width:1320px; min-height:590px; margin:24px auto 0; padding:64px; overflow:hidden; border-radius:44px; color:#fff; background:#061d48; box-shadow:0 20px 55px rgba(6,29,72,.12); }
.cit-one-hero-image { position:absolute; inset:0; z-index:-3; width:100%; height:100%; object-fit:cover; object-position:center; }
.cit-one-hero-overlay { position:absolute; inset:0; z-index:-2; background:linear-gradient(90deg,rgba(2,13,27,.96) 0%,rgba(3,20,44,.91) 31%,rgba(3,20,44,.58) 53%,rgba(3,20,44,.08) 78%),linear-gradient(0deg,rgba(2,13,27,.48),transparent 52%); }
.cit-one-hero-copy { max-width:720px; }
.cit-pill { display:inline-flex; margin:0 0 24px; padding:9px 16px; border-radius:999px; background:#0b7cf4; font-size:12px; font-weight:900; letter-spacing:.16em; }
.cit-one-hero h1 { margin:0; font-size:clamp(44px,4.4vw,66px); font-weight:900; line-height:1.04; letter-spacing:-.045em; }
.cit-one-hero h1 strong { color:#0b7cf4; font-weight:900; }
.cit-one-hero-copy>p:not(.cit-pill) { max-width:650px; margin:25px 0 0; color:rgba(255,255,255,.92); font-size:21px; line-height:1.55; }
.cit-one-hero .hero-actions { margin-top:34px; }
.button-ghost { color:#fff; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.10); }
.button-ghost:hover { background:rgba(255,255,255,.16); }
.l1-capacity { display:grid; grid-template-columns:.8fr 1.7fr; gap:50px; align-items:center; max-width:1240px; margin:0 auto; padding:64px 0 28px; }
.l1-capacity>p { margin:0; color:#647084; font-size:17px; line-height:1.5; }
.l1-capacity dl { display:grid; grid-template-columns:repeat(3,1fr); margin:0; }
.l1-capacity dl>div { padding:0 28px; border-left:1px solid #dde3ee; }
.l1-capacity dd { margin:0; color:#0b7cf4; font-size:38px; font-weight:900; letter-spacing:-.04em; }
.l1-capacity dt { margin-top:8px; color:#647084; font-size:14px; font-weight:600; }
.l1-situation,.l1-result,.l1-impact,.l1-process { max-width:1240px; margin:0 auto; padding:96px 0; }
.l1-situation { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:start; }
.l1-section-intro h2 { margin:0; color:#061d48; font-size:clamp(40px,4.1vw,56px); font-weight:900; line-height:1.06; letter-spacing:-.045em; }
.l1-section-intro>p:last-child { margin:24px 0 0; color:#647084; font-size:17px; line-height:1.65; }
.l1-section-intro.compact { max-width:760px; }
.l1-problem-list { border-top:1px solid #dde3ee; }
.l1-problem-list article { display:grid; grid-template-columns:46px 1fr; gap:22px; padding:30px 0; border-bottom:1px solid #dde3ee; }
.l1-problem-list article>span { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#0b7cf4; background:#eaf5ff; font-size:12px; font-weight:900; }
.l1-problem-list h3 { margin:0 0 8px; font-size:22px; font-weight:900; }
.l1-problem-list p { margin:0; color:#647084; font-size:16px; line-height:1.6; }
.l1-result { display:grid; grid-template-columns:.82fr 1.18fr; gap:70px; max-width:1320px; padding:76px 64px; border-radius:44px; background:#edf7fc; }
.l1-result-copy h2 { margin:0; font-size:clamp(40px,4vw,56px); font-weight:900; line-height:1.06; letter-spacing:-.045em; }
.l1-result-copy>p:not(.kicker) { margin:22px 0; color:#647084; font-size:17px; line-height:1.65; }
.l1-result-copy ul { margin:32px 0 0; padding:0; list-style:none; border-top:1px solid #cfe0ec; }
.l1-result-copy li { display:grid; grid-template-columns:110px 1fr; gap:16px; padding:18px 0; border-bottom:1px solid #cfe0ec; font-size:15px; line-height:1.5; }
.l1-result-copy li b { color:#061d48; font-weight:900; }
.l1-result-copy li span { color:#647084; }
.l1-dashboard { align-self:center; padding:22px; border:1px solid #d9e5f0; border-radius:28px; background:#fff; box-shadow:0 20px 55px rgba(6,29,72,.12); transform:rotate(1deg); }
.l1-dashboard-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:4px 3px 18px; }
.l1-dashboard-head small,.l1-dashboard-head b { display:block; }
.l1-dashboard-head small { color:#0b7cf4; font-size:10px; font-weight:900; letter-spacing:.14em; }
.l1-dashboard-head b { margin-top:5px; font-size:19px; }
.l1-dashboard-head>span { padding:7px 10px; border-radius:999px; color:#647084; background:#f5f7fb; font-size:10px; }
.l1-dashboard-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.l1-dashboard-metrics article { padding:15px 12px; border:1px solid #e4eaf1; border-radius:15px; background:#fff; }
.l1-dashboard-metrics small,.l1-dashboard-metrics span { display:block; color:#7b8797; font-size:9px; }
.l1-dashboard-metrics strong { display:block; margin:5px 0; color:#061d48; font-size:23px; }
.l1-dashboard-metrics .is-debt { background:#fff5f5; border-color:#ffd8da; }
.l1-dashboard-metrics .is-debt strong { color:#da555c; }
.l1-dashboard-metrics .is-pending { background:#fff9ec; border-color:#ffe3a8; }
.l1-dashboard-metrics .is-pending strong { color:#b47700; }
.l1-dashboard-body { display:grid; grid-template-columns:190px 1fr; gap:22px; align-items:center; margin-top:12px; padding:22px; border-radius:19px; background:#f5f9fd; }
.l1-donut { position:relative; display:grid; place-items:center; width:150px; height:150px; margin:auto; border-radius:50%; background:conic-gradient(#0b7cf4 0 89%,#dfe8f0 89% 100%); }
.l1-donut:before { position:absolute; width:105px; height:105px; border-radius:50%; background:#fff; content:""; }
.l1-donut span { position:relative; z-index:1; color:#647084; font-size:10px; text-align:center; }
.l1-donut b { display:block; color:#061d48; font-size:26px; }
.l1-rows p { display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:center; margin:0; padding:13px 0; border-bottom:1px solid #dfe6ed; font-size:11px; }
.l1-rows p:last-child { border-bottom:0; }
.l1-rows span { color:#7c8999; }
.dot { width:8px; height:8px; border-radius:50%; }
.dot.debt { background:#e56167; }.dot.ok { background:#38cc98; }.dot.pending { background:#f1b83b; }
.l1-impact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:48px; }
.l1-impact-grid article { padding:34px; border:1px solid #dde3ee; border-radius:26px; background:#fff; box-shadow:0 14px 35px rgba(6,29,72,.05); }
.l1-impact-grid article>span { color:#0b7cf4; font-size:13px; font-weight:900; }
.l1-impact-grid h3 { margin:50px 0 12px; font-size:24px; font-weight:900; }
.l1-impact-grid p { min-height:78px; margin:0; color:#647084; font-size:16px; line-height:1.6; }
.l1-impact-grid strong { display:block; margin-top:24px; color:#0b7cf4; font-size:14px; }
.l1-scenario { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:18px; padding:34px; border-radius:26px; color:#fff; background:#061d48; }
.l1-scenario small { display:block; color:#4fd0e6; font-size:11px; font-weight:900; letter-spacing:.15em; }
.l1-scenario strong { display:block; margin-top:10px; font-size:21px; }
.l1-scenario p { margin:0; color:rgba(255,255,255,.72); line-height:1.6; }
.l1-scenario p b { color:#fff; font-size:25px; }
.l1-process { padding-top:60px; }
.l1-process ol { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:55px 0 0; padding:0; list-style:none; }
.l1-process ol:before { position:absolute; left:8%; right:8%; top:25px; height:2px; background:#c9e4ff; content:""; }
.l1-process li { position:relative; padding:0 22px; text-align:center; }
.l1-process li>span { position:relative; z-index:1; display:grid; place-items:center; width:52px; height:52px; margin:0 auto 25px; border:7px solid #fff; border-radius:50%; color:#fff; background:#0b7cf4; box-shadow:0 0 0 1px #acd5ff; font-size:11px; font-weight:900; }
.l1-process h3 { margin:0 0 10px; font-size:22px; font-weight:900; }
.l1-process p { margin:0; color:#647084; font-size:15px; line-height:1.6; }
.landing-l1 .final-cta { max-width:1240px; border-radius:44px; background:linear-gradient(180deg,#0b8fce 0%,#0b7cf4 62%,#2459d8 100%); box-shadow:0 30px 70px rgba(6,29,72,.20); }
.cta-logo { display:block; width:236px; height:auto; margin:0 auto 32px; }
.landing-l1 .landing-footer { max-width:1240px; font-size:14px; }

@media (max-width:1050px) {
  .cit-one-hero { margin-left:16px; margin-right:16px; padding:56px 44px; }
  .l1-capacity,.l1-situation,.l1-impact,.l1-process { margin-left:32px; margin-right:32px; }
  .l1-result { margin-left:16px; margin-right:16px; grid-template-columns:1fr; }
  .l1-capacity,.l1-situation { grid-template-columns:1fr; gap:40px; }
  .l1-process ol { grid-template-columns:repeat(2,1fr); row-gap:45px; }
  .l1-process ol:before { display:none; }
}

@media (max-width:680px) {
  .landing-l1 .landing-header { min-height:auto; padding:8px 12px; border-radius:22px; }
  .landing-l1 .cit-logo { width:142px; height:44px; }
  .cit-one-hero { display:block; min-height:auto; margin-top:16px; padding:0 0 40px; border-radius:28px; background:#fff; color:#061d48; box-shadow:none; }
  .cit-one-hero-image { position:relative; z-index:0; display:block; height:230px; border-radius:24px; object-position:center; }
  .cit-one-hero-overlay { display:none; }
  .cit-one-hero-copy { padding:28px 8px 0; }
  .cit-one-hero h1 { font-size:38px; }
  .cit-one-hero-copy>p:not(.cit-pill) { color:#647084; font-size:17px; }
  .cit-one-hero .hero-actions { align-items:stretch; }
  .cit-one-hero .button-ghost { color:#0b7cf4; border-color:#0b7cf4; background:#fff; }
  .l1-capacity { margin:0 24px; padding-top:30px; }
  .l1-capacity dl { grid-template-columns:1fr; gap:20px; }
  .l1-capacity dl>div { padding:0 0 0 18px; }
  .l1-situation,.l1-impact,.l1-process { margin:0 24px; padding:74px 0; }
  .l1-section-intro h2 { font-size:38px; }
  .l1-result { margin:0 14px; padding:56px 22px; border-radius:28px; }
  .l1-result-copy h2 { font-size:38px; }
  .l1-result-copy li { grid-template-columns:1fr; gap:5px; }
  .l1-dashboard { padding:14px; transform:none; }
  .l1-dashboard-metrics { grid-template-columns:repeat(2,1fr); }
  .l1-dashboard-body { grid-template-columns:1fr; padding:16px; }
  .l1-impact-grid,.l1-scenario { grid-template-columns:1fr; }
  .l1-impact-grid h3 { margin-top:30px; }
  .l1-impact-grid p { min-height:0; }
  .l1-scenario { gap:25px; }
  .l1-process ol { grid-template-columns:1fr; }
  .landing-l1 .final-cta { margin-top:40px; }
  .cta-logo { width:190px; }
}

/* L4 · Ejemplos alineados con la interfaz real del Monitor */
.monitor-app-preview { align-self:center; display:grid; grid-template-columns:126px minmax(0,1fr); min-width:0; overflow:hidden; border:1px solid #d9e1e5; border-radius:14px; color:#18242b; background:#f4f6f8; box-shadow:0 30px 70px rgba(0,0,0,.28); transform:rotate(1deg); }
.monitor-app-sidebar { display:flex; flex-direction:column; min-height:430px; padding:17px 12px; border-right:1px solid #d9e1e5; background:#fff; }
.monitor-app-brand { display:flex; align-items:center; gap:8px; }
.monitor-app-brand>span { display:grid; place-items:center; width:34px; height:30px; border-radius:6px; color:#fff; background:#0f5f6f; font-size:12px; font-weight:900; }
.monitor-app-brand>b { color:#152832; font-size:10px; line-height:1.15; }
.monitor-app-nav { display:grid; gap:5px; margin-top:24px; }
.monitor-app-nav i { padding:8px 9px; border-radius:5px; color:#53636c; font-size:9px; font-style:normal; font-weight:700; }
.monitor-app-nav i.active { color:#0f5f6f; background:#eef5f7; }
.monitor-app-sidebar>small { margin-top:auto; color:#7a8a91; font-size:8px; font-weight:900; letter-spacing:.06em; }
.monitor-app-content { min-width:0; padding:16px; }
.monitor-app-overview { display:grid; grid-template-columns:1.45fr .65fr; gap:10px; }
.monitor-app-overview article { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:14px; border:1px solid #d9e1e5; border-radius:8px; background:#fff; box-shadow:0 6px 14px rgba(16,39,50,.05); }
.monitor-app-overview article:first-child { color:#fff; border-color:#0f5f6f; background:linear-gradient(135deg,#0f5f6f,#123d4b); }
.monitor-app-overview small { color:#6b7a82; font-size:8px; font-weight:900; letter-spacing:.06em; }
.monitor-app-overview article:first-child small,.monitor-app-overview article:first-child span { color:rgba(255,255,255,.86); }
.monitor-app-overview b { margin-top:6px; font-size:15px; line-height:1.15; }
.monitor-app-overview span { margin-top:5px; color:#60717a; font-size:9px; line-height:1.35; }
.monitor-app-overview em { width:max-content; margin-top:10px; padding:7px 9px; border-radius:5px; color:#0f5f6f; background:#fff; font-size:8px; font-style:normal; font-weight:900; }
.monitor-app-current strong { margin-top:8px; color:#102b36; font-size:30px; line-height:1; }
.monitor-app-current time { margin-top:6px; color:#7a8a91; font-size:8px; }
.monitor-app-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:9px; }
.monitor-app-kpis>span { padding:11px; border:1px solid #d9e1e5; border-radius:8px; background:#fff; }
.monitor-app-kpis small,.monitor-app-kpis b { display:block; }
.monitor-app-kpis small { color:#60717a; font-size:8px; }
.monitor-app-kpis b { margin-top:5px; color:#152832; font-size:17px; }
.monitor-app-portal-table { margin-top:9px; overflow:hidden; border:1px solid #d9e1e5; border-radius:8px; background:#fff; }
.monitor-app-portal-table header { display:flex; align-items:center; justify-content:space-between; padding:11px 12px; border-bottom:1px solid #edf1ef; }
.monitor-app-portal-table header b { font-size:11px; }.monitor-app-portal-table header small { color:#0f5f6f; font-size:8px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.monitor-app-portal-table p { display:grid; grid-template-columns:.8fr 1.2fr auto; gap:8px; align-items:center; margin:0; padding:9px 12px; border-bottom:1px solid #edf1ef; font-size:8px; }
.monitor-app-portal-table p:last-child { border-bottom:0; }
.monitor-app-portal-table i { width:max-content; min-width:38px; padding:4px 6px; border-radius:999px; color:#0f5f6f; background:#e7f2f5; font-style:normal; font-weight:900; text-align:center; }
.monitor-app-portal-table p>span { color:#5e6d75; }
.monitor-app-portal-table em,.monitor-results-table em { width:max-content; padding:4px 6px; border-radius:5px; font-style:normal; font-weight:800; }
.monitor-app-portal-table .ok,.monitor-results-table .ok { color:#176b5d; background:#e7f5ee; }
.monitor-app-portal-table .review,.monitor-results-table .review { color:#775000; background:#fff1d8; }

.monitor-results-preview { align-self:center; min-width:0; overflow:hidden; border:1px solid #d9e1e5; border-radius:10px; color:#18242b; background:#f4f6f8; box-shadow:0 20px 55px rgba(6,29,72,.12); }
.monitor-results-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border-bottom:1px solid #d9e1e5; background:#fff; }
.monitor-results-head small,.monitor-results-head b { display:block; }.monitor-results-head small { color:#0f5f6f; font-size:9px; font-weight:900; letter-spacing:.08em; }.monitor-results-head b { margin-top:4px; color:#152832; font-size:18px; }
.monitor-results-head>span { padding:9px 12px; border:1px solid #cbd8de; border-radius:6px; color:#44545d; background:#fff; font-size:10px; font-weight:800; }
.monitor-results-filters { display:grid; grid-template-columns:1.5fr 1fr .8fr auto; gap:8px; padding:12px; }
.monitor-results-filters span,.monitor-results-filters b { padding:9px 10px; border:1px solid #cbd8de; border-radius:6px; color:#718087; background:#fff; font-size:9px; font-weight:600; }
.monitor-results-filters b { color:#fff; border-color:#0f5f6f; background:#0f5f6f; text-align:center; }
.monitor-results-table { overflow:hidden; margin:0 12px; border:1px solid #d9e1e5; border-radius:8px; background:#fff; }
.monitor-results-table header,.monitor-results-table>p { display:grid; grid-template-columns:1.45fr .65fr 1fr .7fr; gap:10px; align-items:center; }
.monitor-results-table header { padding:9px 12px; color:#52626b; background:#f8fafb; font-size:8px; font-weight:900; }
.monitor-results-table>p { margin:0; padding:11px 12px; border-top:1px solid #edf1ef; font-size:9px; }
.monitor-results-table p>span b,.monitor-results-table p>span small { display:block; }.monitor-results-table p>span b { color:#243942; font-size:10px; }.monitor-results-table p>span small { margin-top:3px; color:#718087; font-size:8px; }
.monitor-results-table i { width:max-content; min-width:38px; padding:4px 6px; border-radius:999px; color:#0f5f6f; background:#e7f2f5; font-style:normal; font-weight:900; text-align:center; }
.monitor-results-table em.debt { color:#775000; background:#fff1d8; }
.monitor-results-table strong { color:#243942; font-size:10px; text-align:right; }
.monitor-results-note { margin:10px 14px 13px; color:#75838a; font-size:9px; text-align:right; }

@media (max-width:680px) {
  .monitor-app-preview { grid-template-columns:1fr; transform:none; }
  .monitor-app-sidebar { display:none; }
  .monitor-app-content { padding:10px; }
  .monitor-app-overview { grid-template-columns:1fr; }
  .monitor-app-current { display:none !important; }
  .monitor-app-kpis { grid-template-columns:repeat(3,1fr); }
  .monitor-app-portal-table p { grid-template-columns:.7fr 1fr auto; }
  .monitor-results-head { padding:14px; }
  .monitor-results-head>span { display:none; }
  .monitor-results-filters { grid-template-columns:1fr auto; }
  .monitor-results-filters span:nth-child(2),.monitor-results-filters span:nth-child(3) { display:none; }
  .monitor-results-table { overflow-x:auto; }
  .monitor-results-table header,.monitor-results-table>p { min-width:480px; }
}

/* L4 · Relato condensado en cuatro vistas */
.landing-l4 main { scroll-snap-type:y proximity; }
.landing-l4 .landing-header { grid-template-columns:1fr auto; }
.l4-screen { width:calc(100% - 32px); max-width:1320px; min-height:min(760px,calc(100svh - 108px)); margin:24px auto 0; padding:64px; border-radius:38px; scroll-snap-align:start; }
.l4-hero { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:50px; overflow:hidden; color:#fff; background:radial-gradient(circle at 88% 12%,rgba(15,95,111,.42),transparent 36%),linear-gradient(135deg,#04152f,#092b5f); }
.l4-hero-copy h1 { max-width:650px; margin:0; color:#fff; font-size:clamp(46px,4.7vw,70px); line-height:1.01; letter-spacing:-.055em; }
.l4-hero-copy h1 em { color:#009fdf; font-style:normal; }
.l4-hero-copy .lead { max-width:620px; margin:24px 0 30px; color:rgba(255,255,255,.82); font-size:17px; line-height:1.6; }
.l4-hero .trust-row { margin-top:34px; }
.l4-hero .monitor-app-preview { width:100%; }

.l4-context { display:grid; grid-template-columns:.78fr 1.22fr; align-items:center; gap:52px; background:#edf7fc; }
.l4-context-copy h2 { margin:0; color:#061d48; font-size:clamp(38px,3.5vw,52px); line-height:1.05; letter-spacing:-.045em; }
.l4-context-copy>p:not(.kicker) { margin:18px 0 22px; color:#647084; font-size:16px; line-height:1.55; }
.l4-problems { border-top:1px solid #cfe0ec; }
.l4-problems article { display:grid; gap:3px; padding:12px 0; border-bottom:1px solid #cfe0ec; }
.l4-problems b { color:#21364d; font-size:14px; }.l4-problems span { color:#647084; font-size:13px; line-height:1.4; }
.l4-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:16px; }
.l4-benefits span { padding:10px; border-radius:8px; color:#53646f; background:#fff; font-size:11px; line-height:1.35; }
.l4-benefits b { display:block; margin-bottom:3px; color:#0f5f6f; font-size:12px; }
.l4-context .monitor-results-preview { width:100%; }

.l4-impact { display:flex; flex-direction:column; justify-content:center; }
.l4-impact .l1-section-intro { max-width:680px; }
.l4-impact .l1-section-intro h2 { font-size:clamp(38px,3.8vw,54px); }
.l4-impact .l1-impact-grid { margin-top:34px; }
.l4-impact .l1-impact-grid article { padding:28px; border-radius:20px; }
.l4-impact .l1-impact-grid h3 { margin:28px 0 10px; font-size:22px; }
.l4-impact .l1-impact-grid p { min-height:54px; font-size:15px; }
.l4-impact .l1-impact-grid strong { margin-top:16px; }
.l4-impact .l1-scenario { margin-top:14px; padding:26px 30px; border-radius:20px; }

.l4-close { display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:60px; min-height:min(590px,calc(78svh - 90px)); padding-top:44px; padding-bottom:44px; color:#fff; background:radial-gradient(circle at 88% 12%,rgba(0,159,223,.28),transparent 36%),linear-gradient(135deg,#04152f,#092b5f); box-shadow:0 28px 65px rgba(6,29,72,.18); }
.l4-close-copy .cta-logo { width:190px; margin:0 0 28px; }
.l4-close-copy .kicker { color:#009fdf; }
.l4-close-copy h2 { margin:0; font-size:clamp(42px,4.3vw,62px); line-height:1.03; letter-spacing:-.05em; }
.l4-close-copy>p:not(.kicker) { max-width:540px; margin:22px 0 28px; color:rgba(255,255,255,.76); font-size:17px; line-height:1.6; }
.l4-steps { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; list-style:none; }
.l4-steps li { display:grid; grid-template-columns:38px 1fr; gap:13px; min-height:112px; align-items:start; padding:18px 20px; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(255,255,255,.08); }
.l4-steps li>span { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:#0f5f6f; background:#fff; font-size:10px; font-weight:900; }
.l4-steps h3 { margin:4px 0 7px; font-size:19px; }.l4-steps p { margin:0; color:rgba(255,255,255,.7); font-size:13px; line-height:1.45; }
.whatsapp-float { position:fixed; right:26px; bottom:26px; z-index:70; display:flex; align-items:center; gap:9px; min-height:58px; padding:12px 20px 12px 14px; color:#fff; background:#087b42; border:2px solid #fff; border-radius:100px; box-shadow:0 7px 30px rgba(4,46,56,.18); font-size:14px; font-weight:650; text-decoration:none; transition:background .2s,transform .2s; }
.whatsapp-float svg { width:31px; height:31px; flex-shrink:0; }
.whatsapp-float:hover { color:#fff; background:#056335; transform:translateY(-3px); }
.whatsapp-float:focus-visible { outline:3px solid #071d3b; outline-offset:4px; }

@media (max-width:1050px) {
  .l4-screen { min-height:auto; padding:54px 42px; }
  .l4-hero,.l4-context,.l4-close { grid-template-columns:1fr; }
  .l4-hero-copy { max-width:760px; }
  .l4-hero .monitor-app-preview,.l4-context .monitor-results-preview { max-width:760px; }
}

@media (max-width:680px) {
  .l4-screen { width:calc(100% - 28px); margin-top:14px; padding:44px 22px; border-radius:26px; }
  .l4-hero { gap:34px; }
  .l4-hero-copy h1 { font-size:40px; }
  .l4-hero-copy .lead { font-size:16px; }
  .l4-hero .trust-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .l4-hero .trust-row strong { font-size:19px; }
  .l4-context { gap:34px; }
  .l4-context-copy h2 { font-size:37px; }
  .l4-benefits { grid-template-columns:1fr; }
  .l4-impact .l1-impact-grid { grid-template-columns:1fr; gap:10px; margin-top:26px; }
  .l4-impact .l1-impact-grid article { padding:22px; }
  .l4-impact .l1-impact-grid h3 { margin-top:14px; }
  .l4-impact .l1-impact-grid p { min-height:0; }
  .l4-impact .l1-scenario { grid-template-columns:1fr; gap:14px; padding:22px; }
  .l4-close { gap:34px; }
  .l4-close-copy h2 { font-size:40px; }
  .l4-steps { grid-template-columns:1fr; }
  .l4-steps li { min-height:auto; padding:18px; }
  .whatsapp-float { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); justify-content:center; width:58px; height:58px; padding:11px; }
  .whatsapp-label { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .whatsapp-float { transition:none; }
}