/* BuildKontrol · estilos compartidos */
:root {
  --navy: #1E2B3A;
  --navy-900: #121B26;
  --navy-800: #182433;
  --navy-700: #26364A;
  --red: #E30613;
  --red-600: #C70511;
  --text: #3D4855;
  --muted: #6B7785;
  --line: #E2E7ED;
  --soft: #F4F6F9;
  --white: #FFFFFF;
  --on-dark: #C9D2DD;
  --on-dark-muted: #8C9AAB;
  --line-dark: rgba(255,255,255,.09);
  --radius: 14px;
  --radius-sm: 8px;
  --max: 1360px;
  /* Escala de espaciado vertical */
  --sec-y: 64px;        /* relleno de sección (arriba y abajo) */
  --sec-y-tight: 48px;  /* sección compacta (enlaces a módulos, cierre) */
  --head-gap: 40px;     /* título de sección → contenido */
  --card-gap: 20px;     /* hueco entre tarjetas */
  --hero-end: 48px;     /* final del hero oscuro y arranque de la sección siguiente */
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--white); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { text-wrap: balance; color: var(--navy); line-height: 1.15; margin: 0; letter-spacing: -0.02em; font-weight: 700; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
section { padding: var(--sec-y) 0; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.section-head { max-width: 760px; margin-bottom: var(--head-gap); }
.section-head h2 { font-size: clamp(30px, 4vw, 44px); }
.section-head p { margin-top: 14px; font-size: 19px; color: var(--muted); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 10px; font-weight: 600; font-size: 16px; border: 1px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, color .2s; font-family: inherit; white-space: nowrap; }
.btn-primary { background: var(--red); color: var(--white); }
.btn-primary:hover { background: var(--red-600); transform: translateY(-1px); }
.btn-ghost-dark { color: var(--white); border-color: rgba(255,255,255,.22); }
.btn-ghost-dark:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.04); }
.btn-ghost { color: var(--navy); border-color: var(--line); background: var(--white); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; }

/* Marcas de revisión */
.pending { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: #8A5A00; background: #FFF4D6; border: 1px dashed #E0B44C; border-radius: 6px; padding: 2px 8px; vertical-align: middle; letter-spacing: 0; text-transform: none; line-height: 1.5; }
.confirm { position: relative; }
body.review .confirm { outline: 1px dashed #E0B44C; outline-offset: 4px; border-radius: 4px; }
body.review .confirm::after { content: "Por confirmar"; position: absolute; top: -10px; right: -6px; font-family: var(--mono); font-size: 10px; background: #FFF4D6; color: #8A5A00; border: 1px solid #E0B44C; padding: 0 6px; border-radius: 4px; line-height: 16px; }
body:not(.review) .pending { display: none; }
.review-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 60; background: var(--navy-900); color: var(--white); border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 8px 14px 8px 10px; font-family: var(--mono); font-size: 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.review-toggle .dot { width: 10px; height: 10px; border-radius: 50%; background: #E0B44C; }
body:not(.review) .review-toggle .dot { background: #4B5868; }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: #152B47; border-bottom: 1px solid #273C55; }
.header .wrap { display: flex; align-items: center; height: 72px; gap: 32px; }
.logo img { height: 18px; width: auto; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { color: var(--on-dark); font-size: 15px; font-weight: 500; transition: color .2s; }
.nav a:hover { color: var(--white); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.drop { position: relative; }
.drop > button { background: none; border: 0; color: var(--on-dark); font: 500 15px var(--sans); cursor: pointer; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; }
.drop > button:hover, .drop.open > button { color: var(--white); }
.drop > button svg { transition: transform .2s; }
.drop.open > button svg { transform: rotate(180deg); }
.drop-menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--white); border-radius: 12px; box-shadow: 0 20px 50px rgba(18,27,38,.25); padding: 8px; min-width: 260px; display: none; z-index: 5; }
.drop.open .drop-menu { display: block; }
.drop-menu a { display: block; padding: 10px 12px; border-radius: 8px; }
.drop-menu a:hover { background: var(--soft); }
.drop-menu strong { display: block; color: var(--navy); font-size: 15px; }
.drop-menu span { font-size: 13px; color: var(--muted); }
.nav .drop > button { padding: 0; height: auto; }
.nav-drop .drop-menu { left: -16px; right: auto; top: calc(100% + 22px); min-width: 380px; }
.nav-drop .drop-menu a { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; color: var(--text); }
.nav-drop .drop-menu a.current { background: var(--soft); }
.mi { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.mi.red { background: var(--red); }
.menu-btn { display: none; background: none; border: 0; color: var(--white); cursor: pointer; padding: 8px; margin-left: auto; }

/* Hero */
.hero { position: relative; background: var(--navy-900); color: var(--on-dark); padding: 96px 0 0; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%); }
.hero::after { content: ""; position: absolute; width: 720px; height: 720px; right: -200px; top: -260px; background: radial-gradient(circle, rgba(227,6,19,.16), transparent 62%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; color: var(--on-dark); border: 1px solid var(--line-dark); background: rgba(255,255,255,.03); padding: 7px 16px; letter-spacing: .12em; font-weight: 500; border-radius: 999px; margin-bottom: 28px; }
.hero-tag b { background: var(--red); color: var(--white); font-weight: 500; padding: 2px 8px; border-radius: 999px; font-size: 11px; letter-spacing: .06em; }
.hero h1 { color: var(--white); font-size: clamp(38px, 6vw, 68px); letter-spacing: -0.035em; }
.hero-sub { font-size: clamp(18px, 2vw, 21px); margin: 24px auto 0; max-width: 640px; color: var(--on-dark); }
.hero-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.hero-notes { display: flex; gap: 24px; justify-content: center; margin-top: 28px; flex-wrap: wrap; font-size: 14px; color: var(--on-dark-muted); }
.hero-notes span { display: inline-flex; align-items: center; gap: 8px; }
.hero-notes svg { color: var(--red); }

/* Mockup */
.mock-stage { position: relative; margin: 72px auto 0; max-width: 1080px; }
.mock { background: #0F1721; border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -20px 80px rgba(0,0,0,.35); overflow: hidden; }
.mock-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2A3747; }
.mock-url { margin-left: 16px; font-family: var(--mono); font-size: 12px; color: var(--on-dark-muted); background: rgba(255,255,255,.04); padding: 4px 12px; border-radius: 6px; }
.mock-body { display: grid; grid-template-columns: 200px 1fr 300px; min-height: 380px; }
.mock-side { border-right: 1px solid rgba(255,255,255,.07); padding: 18px 12px; }
.mock-side img { width: 26px; margin: 0 8px 20px; }
.mock-nav { font-size: 13px; color: var(--on-dark-muted); padding: 8px 10px; border-radius: 6px; display: flex; gap: 10px; align-items: center; }
.mock-nav.active { background: rgba(255,255,255,.06); color: var(--white); }
.mock-nav i { width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: .6; }
.mock-main { padding: 20px 24px; }
.mock-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.mock-title h4 { color: var(--white); font-size: 16px; font-weight: 600; letter-spacing: 0; }
.mock-title span { font-family: var(--mono); font-size: 11px; color: var(--on-dark-muted); }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.mock-kpi { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 12px; }
.mock-kpi small { display: block; font-size: 11px; color: var(--on-dark-muted); }
.mock-kpi b { color: var(--white); font-size: 18px; font-weight: 600; }
.mock-rows { border: 1px solid rgba(255,255,255,.06); border-radius: 10px; overflow: hidden; }
.mock-row { display: grid; grid-template-columns: 70px 1fr 90px; gap: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--on-dark); border-bottom: 1px solid rgba(255,255,255,.05); align-items: center; }
.mock-row:last-child { border-bottom: 0; }
.mock-row .t { font-family: var(--mono); color: var(--on-dark-muted); font-size: 11px; }
.chip { font-family: var(--mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; justify-self: end; }
.chip.ok { background: rgba(74,190,140,.12); color: #6FD3A7; }
.chip.warn { background: rgba(227,6,19,.14); color: #FF6B73; }
.chip.info { background: rgba(120,160,220,.14); color: #9DBBEA; }
.mock-aside { border-left: 1px solid rgba(255,255,255,.07); padding: 20px; }
.mock-aside h5 { margin: 0 0 4px; color: var(--white); font-size: 13px; font-weight: 600; }
.mock-aside p { font-size: 11px; color: var(--on-dark-muted); margin-bottom: 16px; font-family: var(--mono); }
.stage-bar { margin-bottom: 14px; }
.stage-bar div { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.stage-bar span { color: var(--on-dark); }
.stage-bar em { font-style: normal; font-family: var(--mono); color: var(--on-dark-muted); font-size: 11px; }
.track { height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #5E7896, #9DB3CC); }
.track.red i { background: linear-gradient(90deg, #B00510, var(--red)); }
.ceiling { margin-top: 18px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(227,6,19,.35); background: rgba(227,6,19,.07); font-size: 11.5px; color: #FFB3B7; display: flex; gap: 8px; }
.mock-caption { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--on-dark-muted); padding: 14px 0 0; position: relative; z-index: 1; }

/* Problema */
.problem { background: var(--white); }
.problem-quote { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; color: var(--navy); letter-spacing: -0.02em; line-height: 1.2; max-width: 900px; }
.problem-quote span { color: var(--muted); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: var(--head-gap); }
.problem-item { background: var(--white); padding: 28px; }
.problem-item .k { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.problem-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.problem-item p { font-size: 15.5px; color: var(--muted); }
.problem-item p::before { content: "→ "; color: var(--red); }

/* Ideas */
.ideas { background: var(--soft); }
.ideas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.idea { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; position: relative; overflow: hidden; }
.idea-n { font-family: var(--mono); font-size: 13px; color: var(--red); margin-bottom: 40px; display: block; }
.idea h3 { font-size: 22px; margin-bottom: 12px; }
.idea p { color: var(--muted); font-size: 16px; }
.idea-icon { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; color: var(--navy); }

/* Módulos */
.modules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
.module { border: 1px solid var(--line); border-radius: 18px; padding: 36px; display: flex; flex-direction: column; transition: border-color .25s, box-shadow .25s, transform .25s; background: var(--white); }
.module:hover { border-color: #C8D1DC; box-shadow: 0 24px 60px -24px rgba(30,43,58,.22); transform: translateY(-2px); }
.module-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.module-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.module-tag { font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.module h3 { font-size: 26px; margin-bottom: 8px; }
.module .lead { font-size: 18px; color: var(--navy); font-weight: 500; margin-bottom: 14px; }
.module .desc { color: var(--muted); font-size: 16px; margin-bottom: 24px; }
.module ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.module li { display: flex; gap: 12px; font-size: 15.5px; align-items: flex-start; }
.module li svg { flex: none; margin-top: 4px; color: var(--red); }
.module-foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.module-foot small { font-size: 13px; color: var(--muted); }
.module-foot a { font-weight: 600; color: var(--navy); font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.module-foot a:hover { color: var(--red); }
.modular-note { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; border-radius: 18px; background: var(--navy); color: var(--on-dark); flex-wrap: wrap; }
.modular-note strong { color: var(--white); font-size: 20px; display: block; margin-bottom: 4px; }
.relation { font-size: 14.5px; color: var(--muted); margin-top: 20px; }

/* Presupuesto: dark */
.budget { background: var(--navy-900); color: var(--on-dark); position: relative; overflow: hidden; }
.budget::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 48px 48px; }
.budget .wrap { position: relative; }
.budget h2 { color: var(--white); }
.budget .section-head p { color: var(--on-dark-muted); }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.flow-step { background: rgba(255,255,255,.03); border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 28px 24px; position: relative; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; right: -17px; top: 50%; width: 16px; height: 1px; background: rgba(255,255,255,.25); }
.flow-step .n { font-family: var(--mono); font-size: 12px; color: var(--on-dark-muted); }
.flow-step h3 { color: var(--white); font-size: 22px; margin: 28px 0 8px; }
.flow-step p { font-size: 15px; color: var(--on-dark-muted); }
.flow-step .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 24px; overflow: hidden; }
.flow-step .bar i { display: block; height: 100%; background: var(--red); }
.budget-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-dark); }
.budget-points h4 { color: var(--white); font-size: 17px; margin-bottom: 8px; letter-spacing: -0.01em; }
.budget-points p { font-size: 15px; color: var(--on-dark-muted); }

/* BK Tareas */
.tasks-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.steps { list-style: none; padding: 0; margin: 32px 0 0; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps .n { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--navy); }
.steps h4 { font-size: 17px; margin-bottom: 4px; letter-spacing: -0.01em; }
.steps p { font-size: 15px; color: var(--muted); }
.phone-stage { position: relative; display: grid; place-items: center; padding: 40px 0; }
.phone-stage::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(30,43,58,.08), transparent 70%); }
.phone { position: relative; width: 290px; background: var(--navy-900); border-radius: 40px; padding: 12px; box-shadow: 0 40px 80px -20px rgba(18,27,38,.45); }
.phone-screen { background: var(--soft); border-radius: 30px; overflow: hidden; }
.phone-top { background: var(--navy); color: var(--white); padding: 22px 18px 16px; }
.phone-top small { font-family: var(--mono); font-size: 10px; color: var(--on-dark-muted); display: block; }
.phone-top b { font-size: 16px; }
.phone-filters { display: flex; gap: 6px; margin-top: 12px; }
.phone-filters span { white-space: nowrap; font-size: 10.5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--on-dark); }
.phone-filters span.on { background: var(--white); color: var(--navy); }
.task { background: var(--white); margin: 10px; border-radius: 14px; padding: 12px; display: grid; grid-template-columns: 44px 1fr; gap: 10px; border: 1px solid var(--line); }
.task .ph { width: 44px; height: 44px; border-radius: 10px; background: repeating-linear-gradient(45deg, #DCE2E9, #DCE2E9 6px, #E8ECF1 6px, #E8ECF1 12px); }
.task b { display: block; font-size: 12.5px; color: var(--navy); line-height: 1.3; }
.task small { font-size: 10.5px; color: var(--muted); font-family: var(--mono); }
.task .meta { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.pri { font-size: 9.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.pri.c { background: #FDE3E5; color: var(--red-600); }
.pri.a { background: #FDEFD9; color: #9A5B00; }
.pri.m { background: #E5ECF5; color: #3A5A86; }
.days { font-size: 10px; color: var(--muted); font-family: var(--mono); margin-left: auto; }
.days.late { color: var(--red); }
.phone-fab { margin: 6px 10px 14px; height: 40px; border-radius: 12px; background: var(--red); color: var(--white); font-size: 12.5px; font-weight: 600; display: grid; place-items: center; }
.float-card { position: absolute; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 20px 40px -16px rgba(18,27,38,.25); font-size: 12.5px; max-width: 220px; }
.float-card b { color: var(--navy); display: block; font-size: 13px; }
.float-card span { color: var(--muted); }
.float-a { left: 0; top: 70px; }
.float-b { right: 0; bottom: 80px; }
.stores { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; align-items: center; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: 10px; background: var(--navy-900); color: var(--white); font-size: 13px; line-height: 1.1; }
.store small { display: block; font-size: 10px; color: var(--on-dark-muted); }
.store b { font-size: 15px; font-weight: 600; }

/* Audiencias */
.audience { background: var(--soft); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tab { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; font: 500 15px var(--sans); color: var(--text); cursor: pointer; transition: all .2s; }
.tab:hover { border-color: var(--navy); }
.tab[aria-selected="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.panel { display: none; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.panel.active { display: grid; }
.panel-main { padding: 44px; }
.panel-main h3 { font-size: 28px; margin-bottom: 14px; }
.panel-main > p { color: var(--muted); font-size: 17px; margin-bottom: 28px; }
.panel-kv { display: grid; gap: 18px; margin-bottom: 32px; }
.panel-kv div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; font-size: 15.5px; }
.panel-kv dt { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding-top: 3px; }
.panel-kv dd { margin: 0; color: var(--navy); }
.panel-side { background: var(--navy); color: var(--on-dark); padding: 44px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.panel-side::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }
.panel-side > * { position: relative; }
.panel-side small { font-family: var(--mono); font-size: 12px; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: .06em; }
.panel-side strong { display: block; color: var(--white); font-size: 26px; margin: 10px 0 12px; letter-spacing: -0.02em; }
.panel-side p { font-size: 16px; }
.fisc-note { margin-top: 24px; font-size: 15px; color: var(--muted); display: flex; gap: 10px; align-items: flex-start; }
.fisc-note svg { flex: none; margin-top: 3px; color: var(--navy); }

/* Es / No es */
.isnot-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.isnot-col { padding: 36px 40px; }
.isnot-col + .isnot-col { border-left: 1px solid var(--line); background: var(--soft); }
.isnot-col h3 { font-size: 15px; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; color: var(--muted); }
.isnot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.isnot-col li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; color: var(--navy); }
.isnot-col li svg { flex: none; margin-top: 4px; }
.yes svg { color: #1F9D6A; }
.no li { color: var(--muted); }
.no svg { color: #9AA5B1; }

/* Cómo empezar */
.start { background: var(--white); }
.start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.start-step { position: relative; padding: 32px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); }
.start-step .n { font-family: var(--mono); font-size: 44px; color: var(--line); font-weight: 500; line-height: 1; display: block; margin-bottom: 28px; }
.start-step p { font-size: 17px; color: var(--navy); font-weight: 500; }
.deal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 32px; }
.deal div { background: var(--white); padding: 24px; }
.deal small { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 8px; }
.deal p { font-size: 15.5px; color: var(--navy); }

/* FAQ */
.faq-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.faq-layout .section-head { position: sticky; top: 110px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; font-size: 18px; font-weight: 600; color: var(--navy); position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-item p { padding: 0 40px 24px 0; color: var(--muted); font-size: 16.5px; }

/* Demo */
.demo { background: var(--navy-900); color: var(--on-dark); position: relative; overflow: hidden; }
.demo::after { content: ""; position: absolute; width: 800px; height: 800px; left: -300px; bottom: -400px; background: radial-gradient(circle, rgba(227,6,19,.14), transparent 62%); }
.demo .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.demo h2 { color: var(--white); font-size: clamp(32px, 4.2vw, 48px); }
.demo-lead { font-size: 19px; margin-top: 18px; }
.demo-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 18px; }
.demo-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; font-size: 16px; }
.demo-steps .n { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; font-family: var(--mono); font-size: 13px; color: var(--white); }
.contact-direct { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-dark); display: grid; gap: 10px; font-size: 15px; }
.contact-direct div { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.contact-direct small { width: 90px; color: var(--on-dark-muted); font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
form.card { background: var(--white); color: var(--text); border-radius: 20px; padding: 36px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
form h3 { font-size: 22px; margin-bottom: 6px; }
form .hint { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label, .field legend { font-size: 13.5px; font-weight: 600; color: var(--navy); padding: 0; }
.field label i, .field legend i { font-style: normal; color: var(--red); }
.field label span, .field legend span { font-weight: 400; color: var(--muted); }
input, select, textarea { font: 15.5px var(--sans); color: var(--navy); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--white); width: 100%; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(30,43,58,.1); }
textarea { resize: vertical; min-height: 90px; }
fieldset.field { border: 0; margin: 0 0 16px; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.checks label { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-weight: 500; font-size: 14px; cursor: pointer; color: var(--text); }
.checks input { width: auto; accent-color: var(--red); margin: 0; }
.checks label:has(input:checked) { border-color: var(--navy); background: var(--soft); color: var(--navy); }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.form-foot small { font-size: 12.5px; color: var(--muted); max-width: 300px; }
.form-msg { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: #FFF4D6; color: #8A5A00; font-size: 14px; border: 1px dashed #E0B44C; }
/* Formulario por pasos */
.fsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.fsteps i { height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.fsteps i.on { background: var(--red); }
.fstep-label { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.fstep { animation: fstepIn .35s ease; }
.fstep[hidden] { display: none; }
@keyframes fstepIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.field .err { display: none; font-size: 12.5px; color: var(--red-600); font-weight: 500; line-height: 1.35; }
.field.is-bad .err { display: block; }
.field.is-bad input, .field.is-bad select { border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,6,19,.1); }
.field.is-good input, .field.is-good select { border-color: #15803D; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field.is-good select { background-position: right 38px center; }
.fgroup { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.fgroup legend { font-size: 13.5px; font-weight: 600; color: var(--navy); padding: 0; margin-bottom: 10px; }
.fgroup legend span { font-weight: 400; color: var(--muted); }
.mod-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mod-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--white); transition: border-color .2s, background .2s, box-shadow .2s, transform .2s; }
.mod-card:hover { border-color: #B9C4D2; transform: translateY(-1px); }
.mod-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mod-card:has(input:focus-visible) { outline: 3px solid #6FA6F0; outline-offset: 2px; }
.mod-card:has(input:checked) { border-color: var(--navy); background: var(--soft); box-shadow: 0 6px 18px -8px rgba(18,27,38,.35); }
.mc-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.mc-ic.mc-img { background: #fff; border: 1px solid var(--line); }
.mc-ic img { width: 24px; height: 24px; }
.mc-tx { display: grid; gap: 2px; min-width: 0; padding-right: 22px; }
.mc-tx b { font-size: 14.5px; font-weight: 600; color: var(--navy); line-height: 1.25; }
.mc-tx small { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.mc-ck { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.mod-card:has(input:checked) .mc-ck { opacity: 1; transform: none; }
#f-msg { min-height: 56px; height: 56px; }
.priv { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.form-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.form-nav .btn { margin-left: auto; }
.btn-back { background: none; border: 0; font: 600 15px var(--sans); color: var(--muted); cursor: pointer; padding: 10px 4px; }
.btn-back:hover { color: var(--navy); }
.btn[disabled] { opacity: .7; cursor: progress; }
#formErr { background: #FDECEC; border: 1px solid #F3B7B7; color: #9B1C1C; }
.form-ok { text-align: center; padding: 28px 8px; animation: fstepIn .4s ease; }
.form-ok[hidden] { display: none; }
.form-ok .ok-ic { width: 64px; height: 64px; border-radius: 50%; background: #E8F6EE; color: #15803D; display: grid; place-items: center; margin: 0 auto 18px; }
.form-ok h3 { font-size: 26px; margin-bottom: 8px; }
.form-ok p { color: var(--text); margin-bottom: 16px; }
@media (max-width: 640px) { .mod-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fstep, .form-ok { animation: none; } .mod-card, .mc-ck { transition: none; } }

/* CTA final */
.final { text-align: center; padding: 120px 0; }
.final img { width: 64px; margin: 0 auto 28px; }
.final h2 { font-size: clamp(34px, 5vw, 56px); }
.final p { font-size: 19px; color: var(--muted); margin-top: 16px; }
.final .hero-ctas { margin-top: 36px; }

/* Footer */
footer { background: var(--navy-900); color: var(--on-dark-muted); padding: 56px 0 28px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.foot-grid img { height: 18px; width: auto; margin-bottom: 20px; }
.foot-grid h4 { color: var(--white); font-size: 14px; font-weight: 600; margin-bottom: 16px; letter-spacing: 0; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-grid a:hover { color: var(--white); }
.foot-bottom { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }

/* Animación de entrada */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* Responsive */
@media (max-width: 1080px) {
  .mock-body { grid-template-columns: 1fr 260px; }
  .mock-side { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  :root { --sec-y: 56px; --sec-y-tight: 44px; --head-gap: 32px; }
  .nav, .header-actions .drop, .header-actions .btn { display: none; }
  .header.open .nav .nav-drop { display: none; }
  .menu-btn { display: block; }
  .header.open .nav { display: flex; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--navy-900); padding: 8px 24px 24px; border-bottom: 1px solid var(--line-dark); }
  .header.open .nav a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); }
  .header.open .nav .mobile-only { display: flex; }
  .problem-grid, .ideas-grid, .start-grid { grid-template-columns: 1fr 1fr; }
  .modules-grid, .tasks-layout, .faq-layout, .demo .wrap { grid-template-columns: 1fr; }
  .faq-layout .section-head { position: static; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow-step:not(:last-child)::after { display: none; }
  .budget-points { grid-template-columns: 1fr; gap: 24px; }
  .panel.active { grid-template-columns: 1fr; }
  .deal { grid-template-columns: 1fr 1fr; }
  .tasks-layout { gap: 24px; }
}
@media (max-width: 640px) {
  :root { --sec-y: 44px; --sec-y-tight: 36px; --head-gap: 28px; --card-gap: 16px; --hero-end: 40px; }
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hero { padding-top: 64px; }
  .hero-tag { font-size: 11.5px; text-align: left; }
  .mock-body { grid-template-columns: 1fr; }
  .mock-aside { display: none; }
  .mock-kpis { grid-template-columns: 1fr 1fr; }
  .problem-grid, .ideas-grid, .start-grid, .flow, .deal, .grid-2, .isnot-grid, .foot-grid { grid-template-columns: 1fr; }
  .isnot-col + .isnot-col { border-left: 0; border-top: 1px solid var(--line); }
  .module, .panel-main, .panel-side, form.card, .isnot-col { padding: 28px 22px; }
  .panel-kv div { grid-template-columns: 1fr; gap: 4px; }
  .float-card { display: none; }
  .phone { width: 270px; }
  .modular-note { padding: 24px 22px; }
}
.mobile-only { display: none; }

/* =========================================================
   Páginas de módulo
   ========================================================= */
.page-hero { position: relative; background: var(--navy-900); color: var(--on-dark); padding: 40px 0 96px; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 90% 80% at 70% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 70% 40%, #000 30%, transparent 100%); }
.page-hero::after { content: ""; position: absolute; width: 700px; height: 700px; right: -220px; top: -240px; background: radial-gradient(circle, rgba(227,6,19,.14), transparent 62%); pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 1; }
.mod-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 56px; padding: 6px; border: 1px solid var(--line-dark); border-radius: 999px; width: fit-content; background: rgba(255,255,255,.02); }
.mod-switch a { font-size: 14px; font-weight: 500; color: var(--on-dark-muted); padding: 7px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.mod-switch a:hover { color: var(--white); }
.mod-switch a.current { background: var(--white); color: var(--navy); }
.page-hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.page-hero-grid > *, .split > * { min-width: 0; }
.ui-body { overflow-x: auto; }
.page-hero h1 { color: var(--white); font-size: clamp(36px, 5vw, 58px); letter-spacing: -0.035em; }
.page-hero .hero-sub { margin: 22px 0 0; max-width: 560px; }
.page-hero .hero-ctas { justify-content: flex-start; }
.mod-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.mod-label .mi { width: 44px; height: 44px; }
.mod-label b { color: var(--white); font-size: 17px; font-weight: 600; display: block; line-height: 1.2; }
.mod-label small { font-family: var(--mono); font-size: 12px; color: var(--on-dark-muted); }
.hero-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.hero-facts span { font-size: 13.5px; color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: 999px; padding: 6px 14px; display: inline-flex; gap: 8px; align-items: center; }
.hero-facts svg { color: var(--red); }

/* Ventana de interfaz genérica (maquetas) */
.ui { background: #0F1721; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); overflow: hidden; font-size: 12.5px; color: var(--on-dark); }
.ui-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ui-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2A3747; }
.ui-bar span { margin-left: 12px; font-family: var(--mono); font-size: 11px; color: var(--on-dark-muted); }
.ui-body { padding: 18px; }
.ui-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; gap: 12px; }
.ui-head b { color: var(--white); font-size: 15px; font-weight: 600; }
.ui-head small { font-family: var(--mono); font-size: 10.5px; color: var(--on-dark-muted); }
.ui-block { border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: rgba(255,255,255,.02); }
.ui-block h6 { margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark-muted); }
.ui-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid rgba(255,255,255,.04); align-items: center; }
.ui-line:first-of-type { border-top: 0; }
.ui-line em { font-style: normal; font-family: var(--mono); color: var(--on-dark-muted); font-size: 11px; white-space: nowrap; }
.ui-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-cols .ui-block { margin-bottom: 0; }
.ui-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ui-photos i { aspect-ratio: 1; border-radius: 6px; background: repeating-linear-gradient(45deg, #1F2B3A, #1F2B3A 6px, #243243 6px, #243243 12px); }
.ui-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ui-table th { text-align: right; font-family: var(--mono); font-weight: 500; font-size: 10px; color: var(--on-dark-muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,.08); }
.ui-table th:first-child, .ui-table td:first-child { text-align: left; }
.ui-table td { text-align: right; padding: 9px 6px; border-bottom: 1px solid rgba(255,255,255,.05); font-family: var(--mono); color: var(--on-dark); }
.ui-table td:first-child { font-family: var(--sans); color: var(--white); }
.ui-table tr.alert td { color: #FF8A91; }
.ui-table tr.alert td:first-child::after { content: " ●"; color: var(--red); }
.ui-check { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); }
.ui-check:first-of-type { border-top: 0; }
.ui-check i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #4B5B6E; }
.ui-check.done i { background: #3FAF82; border-color: #3FAF82; }
.ui-check.done span { color: var(--on-dark-muted); text-decoration: line-through; }
.ui-check em { font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--on-dark-muted); white-space: nowrap; }
.ui-check .carry { color: #F2B36B; }
.ui-caption { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--on-dark-muted); margin-top: 14px; }

/* Bloques de contenido */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: var(--white); transition: border-color .25s, box-shadow .25s; }
.feature:hover { border-color: #C8D1DC; box-shadow: 0 20px 50px -28px rgba(30,43,58,.25); }
.feature .fi { width: 44px; height: 44px; border-radius: 10px; background: var(--soft); color: var(--navy); display: grid; place-items: center; margin-bottom: 22px; }
.feature h3 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.01em; }
.feature p { font-size: 15.5px; color: var(--muted); }
.soft { background: var(--soft); }
.soft .feature { border-color: transparent; }

.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.persona { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; position: relative; }
.persona small { font-family: var(--mono); font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: .06em; }
.persona h3 { font-size: 22px; margin: 10px 0 12px; }
.persona p { color: var(--muted); font-size: 16px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split h2 { font-size: clamp(28px, 3.6vw, 40px); }
.split .lead-p { margin-top: 18px; font-size: 18px; color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 16.5px; color: var(--navy); }
.check-list li svg { margin-top: 4px; color: var(--red); }
.check-list li span small { display: block; color: var(--muted); font-size: 15px; margin-top: 2px; }

.callout { display: flex; gap: 20px; align-items: flex-start; padding: 28px 32px; border-radius: 16px; border: 1px solid var(--line); background: var(--white); }
.callout .fi { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--navy); color: var(--white); display: grid; place-items: center; }
.callout h3 { font-size: 19px; margin-bottom: 6px; }
.callout p { color: var(--muted); font-size: 16px; }
.callouts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap); margin-top: 32px; }

/* Barra apilada del presupuesto */
.stack-row { display: grid; grid-template-columns: 180px 1fr 64px; gap: 20px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line-dark); }
.stack-row:last-of-type { border-bottom: 1px solid var(--line-dark); }
.stack-row b { color: var(--white); font-size: 18px; font-weight: 600; }
.stack-row b small { display: block; font-weight: 400; font-size: 14px; color: var(--on-dark-muted); margin-top: 2px; }
.stack-row .track { height: 10px; border-radius: 6px; }
.stack-row em { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--on-dark-muted); text-align: right; }
.stack-legend { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-muted); }

/* Diagrama de circuito */
.circuit { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: stretch; }
.node { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--white); }
.node small { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.node h4 { font-size: 18px; margin: 10px 0 6px; letter-spacing: -0.01em; }
.node p { font-size: 15px; color: var(--muted); }
.node.dark { background: var(--navy); border-color: var(--navy); }
.node.dark h4 { color: var(--white); }
.node.dark p, .node.dark small { color: var(--on-dark-muted); }
.link { display: grid; place-items: center; color: #9AA5B1; }
.panel.circuit-panel { background: none; border: 0; border-radius: 0; overflow: visible; }
.panel.circuit-panel.active { display: block; }

/* Ciclo de reuniones */
.cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cycle .node .n { font-family: var(--mono); font-size: 40px; color: var(--line); line-height: 1; display: block; margin-bottom: 20px; }
.cycle-loop { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--muted); padding: 16px; border: 1px dashed #C8D1DC; border-radius: var(--radius); text-align: center; }
.cycle-loop svg { color: var(--red); flex: none; }

/* BK Tareas: estados, prioridades, ubicación */
.states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.state { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--white); position: relative; }
.state i { display: block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: 14px; }
.state b { display: block; color: var(--navy); font-size: 16px; }
.state span { font-size: 13.5px; color: var(--muted); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pills span { font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; }
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.loc { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--white); }
.loc b { display: block; color: var(--navy); font-size: 15px; }
.loc span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trio > div { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.trio h3 { font-size: 18px; margin-bottom: 16px; letter-spacing: -0.01em; }
.trio p { font-size: 15px; color: var(--muted); margin-top: 14px; }
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.role { border: 1px solid var(--line-dark); border-radius: 12px; padding: 20px; background: rgba(255,255,255,.02); }
.role b { color: var(--white); display: block; font-size: 16px; margin-bottom: 4px; }
.role span { font-size: 14px; color: var(--on-dark-muted); }
.dark-sec { background: var(--navy-900); color: var(--on-dark); }
.dark-sec h2, .dark-sec h3 { color: var(--white); }
.dark-sec .section-head p { color: var(--on-dark-muted); }

/* Paso a paso numerado grande */
.steps-big { border-top: 1px solid var(--line); }
.step-big { display: grid; grid-template-columns: 80px 1fr 1.3fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.step-big .n { font-family: var(--mono); font-size: 14px; color: var(--red); padding-top: 4px; }
.step-big h3 { font-size: 22px; }
.step-big p { color: var(--muted); font-size: 16.5px; }
.step-big p strong { color: var(--navy); }

/* Otros módulos */
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.related a { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; transition: border-color .2s, transform .2s; background: var(--white); }
.related a:hover { border-color: var(--navy); transform: translateY(-2px); }
.related b { display: block; color: var(--navy); font-size: 16px; }
.related span { font-size: 14px; color: var(--muted); }

/* Banda de cierre */
.cta-band { position: relative; overflow: hidden; background: var(--navy-900); border-radius: 24px; padding: 64px; display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 40px 40px; }
.cta-band::after { content: ""; position: absolute; width: 500px; height: 500px; right: -150px; bottom: -250px; background: radial-gradient(circle, rgba(227,6,19,.2), transparent 62%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); font-size: clamp(28px, 3.6vw, 42px); }
.cta-band p { color: var(--on-dark); font-size: 18px; margin-top: 12px; }
.cta-band .hero-ctas { margin: 0; justify-content: flex-end; }
.btn-ghost-dark.on-band { background: transparent; }
.sec-tight { padding: var(--sec-y-tight) 0; }

@media (max-width: 960px) {
  .page-hero-grid, .split, .callouts { grid-template-columns: 1fr; gap: 48px; }
  .feature-grid, .persona-grid, .related, .trio { grid-template-columns: 1fr 1fr; }
  .circuit { grid-template-columns: 1fr; }
  .circuit .link { height: 40px; transform: rotate(90deg); }
  .cycle, .states, .roles { grid-template-columns: 1fr 1fr; }
  .step-big { grid-template-columns: 56px 1fr; }
  .step-big p { grid-column: 2; }
  .cta-band { grid-template-columns: 1fr; padding: 44px; }
  .cta-band .hero-ctas { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .page-hero { padding: 28px 0 72px; }
  .mod-switch { margin-bottom: 40px; border-radius: 14px; }
  .feature-grid, .persona-grid, .related, .trio, .cycle, .roles, .ui-cols, .states, .loc-grid { grid-template-columns: 1fr; }
  .stack-row { grid-template-columns: 1fr 52px; gap: 10px; }
  .stack-row .track { grid-column: 1 / -1; grid-row: 2; }
  .cta-band { padding: 32px 22px; border-radius: 18px; }
  .callout { padding: 22px; flex-direction: column; }
  .step-big { grid-template-columns: 1fr; gap: 8px; }
  .step-big p { grid-column: auto; }
}

/* =========================================================
   Lenguaje visual del sistema BuildKontrol
   Colores tomados de la plataforma: barra superior #152B47,
   barra lateral #1E3A5F, acento azul #1E6FD9 y estados ámbar, verde y rojo.
   ========================================================= */
:root {
  --navy: #1E3A5F;          /* barra lateral del sistema */
  --navy-900: #152B47;      /* barra superior del sistema */
  --navy-800: #1A3352;
  --navy-700: #2A4A73;
  --ink: #101828;           /* títulos dentro del sistema */
  --blue: #1E6FD9;          /* acento azul del sistema */
  --blue-soft: #E2ECFC;
  --amber: #B45309;
  --amber-soft: #FEF3C7;
  --green: #15803D;
  --green-soft: #DCFCE7;
  --sys-red: #B91C1C;
  --sys-bg: #F4F6FB;        /* fondo de pantalla del sistema */
  --sys-line: #E1E5EE;
  --on-dark: #CBD6E4;
  --on-dark-muted: #93A5BC;
  --soft: #F4F6FB;
}
h1, h2, h3, h4 { color: var(--navy-900); }
.eyebrow { color: var(--blue); }
.page-hero .eyebrow, .hero .eyebrow, .budget .eyebrow, .demo .eyebrow, .dark-sec .eyebrow { color: #6FA6F0; }
.hero::after, .page-hero::after { background: radial-gradient(circle, rgba(30,111,217,.22), transparent 62%); }
.demo::after { background: radial-gradient(circle, rgba(30,111,217,.18), transparent 62%); }
.cta-band::after { background: radial-gradient(circle, rgba(30,111,217,.26), transparent 62%); }
.module-icon, .mi, .callout .fi { background: var(--blue-soft); color: var(--blue); }
.module-icon[style*="--red"], .mi.red { background: #FDE2E2; color: var(--red); }
.feature .fi, .idea-icon { background: var(--blue-soft); color: var(--blue); }
.problem-item p::before { color: var(--blue); }
.module li svg, .check-list li svg { color: var(--blue); }
.tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); }
.flow-step .bar i { background: var(--blue); }
.flow-step:last-child .bar i { background: var(--red); }
.node.dark { background: var(--navy); border-color: var(--navy); }

/* ---------- Maquetas con el aspecto real de la plataforma ---------- */
.mock, .ui { background: var(--sys-bg); border: 1px solid rgba(255,255,255,.14); color: #475467; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.mock-bar, .ui-bar { background: var(--navy-900); border-bottom: 0; padding: 10px 16px; }
.mock-bar i, .ui-bar i { display: none; }
.mock-url, .ui-bar span { margin-left: 0; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: #fff; background: none; padding: 0; }
.mock-side { background: var(--navy); border-right: 0; padding: 16px 10px; }
.mock-side img { width: 120px; margin: 4px 8px 22px; }
.mock-nav { color: #C9D6E8; font-weight: 500; }
.mock-nav.active { background: rgba(255,255,255,.1); color: #fff; }
.mock-group { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #8FA6C4; padding: 10px 10px 4px; }
.mock-main { background: var(--sys-bg); }
.mock-title h4, .ui-head b { color: var(--ink); }
.mock-title span, .ui-head small { color: #667085; font-family: var(--sans); font-weight: 500; }
.mock-kpi { background: #fff; border: 1px solid var(--sys-line); }
.mock-kpi small { color: #667085; }
.mock-kpi b { color: var(--ink); }
.mock-rows { background: #fff; border: 1px solid var(--sys-line); }
.mock-row { color: #344054; border-bottom-color: var(--sys-line); }
.mock-row .t { color: #98A2B3; font-family: var(--sans); }
.chip { font-family: var(--sans); font-weight: 600; }
.chip.ok { background: var(--green-soft); color: var(--green); }
.chip.warn { background: var(--amber-soft); color: var(--amber); }
.chip.info { background: var(--blue-soft); color: var(--blue); }
.chip.danger { background: #FEE2E2; color: var(--sys-red); }
.mock-aside { background: #fff; border-left: 1px solid var(--sys-line); }
.mock-aside h5 { color: var(--ink); }
.mock-aside p { color: #667085; font-family: var(--sans); font-weight: 600; letter-spacing: .04em; }
.stage-bar span { color: #344054; }
.stage-bar em { color: #667085; font-family: var(--sans); font-weight: 600; }
.track { background: var(--sys-line); }
.track i { background: var(--blue); }
.track.red i { background: var(--sys-red); }
.ceiling { background: var(--amber-soft); border: 0; color: var(--amber); font-weight: 500; }
.mock-caption, .ui-caption { font-family: var(--sans); color: var(--on-dark-muted); }

.ui-block { background: #fff; border: 1px solid var(--sys-line); }
.ui-block h6 { font-family: var(--sans); font-weight: 700; color: var(--blue); }
.ui-line { border-top-color: #EEF1F6; color: #344054; }
.ui-line em { color: #667085; font-family: var(--sans); }
.ui-photos i { background: repeating-linear-gradient(45deg, #DCE3EE, #DCE3EE 6px, #E9EEF5 6px, #E9EEF5 12px); }
.ui-table { background: #fff; border: 1px solid var(--sys-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.ui-table th { font-family: var(--sans); font-weight: 700; color: #667085; border-bottom-color: var(--sys-line); background: #F9FAFC; }
.ui-table td { font-family: var(--sans); color: #344054; border-bottom-color: #EEF1F6; }
.ui-table td:first-child { color: var(--ink); font-weight: 600; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table tr.alert td { color: var(--amber); background: #FFFBEB; }
.ui-table tr.alert td:first-child::after { color: var(--amber); }
.ui-check { border-top-color: #EEF1F6; color: #344054; }
.ui-check i { border-color: #98A2B3; }
.ui-check.done i { background: var(--green); border-color: var(--green); }
.ui-check.done span { color: #98A2B3; }
.ui-check em { color: #667085; font-family: var(--sans); }
.ui-check .carry { color: var(--amber); font-weight: 600; }

/* Teléfono de BK Tareas con los colores del sistema */
.phone { background: var(--navy-900); }
.phone-top { background: var(--navy); }
.chip { white-space: nowrap; }
.mock-row { grid-template-columns: 92px 1fr auto; }

/* Hero: plataforma + app BK Tareas */
.mock-row-head { font-size: 11px; font-weight: 700; color: #667085; background: #F9FAFC; padding-top: 8px; padding-bottom: 8px; }
.mock-row .t { color: var(--ink); font-weight: 600; font-size: 12.5px; }
.mock-kpi small { line-height: 1.3; }
.mock-phone { position: absolute; right: -64px; top: 300px; width: 290px; transform: scale(.7); transform-origin: top right; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }
@media (max-width: 1200px) { .mock-phone { right: -16px; transform: scale(.6); } }
@media (max-width: 1080px) { .mock-phone { display: none; } }

/* =========================================================
   Hero: pantalla de inicio de un proyecto en la plataforma
   (misma barra superior y tarjetas que el sistema; todos los módulos en azul)
   ========================================================= */
.sh { background: var(--sys-bg); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.35); text-align: left; color: #475467; font-size: 13px; line-height: 1.45; }
.sh-top { height: 54px; background: var(--navy-900); display: grid; grid-template-columns: 210px 1fr 210px; align-items: center; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sh-marca { height: 100%; display: flex; align-items: center; padding: 0 22px; border-right: 1px solid #273C55; }
.sh-marca img { height: 12px; width: auto; }
.sh-proyecto { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; }
.sh-selector { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 190px; height: 38px; padding: 0 12px 0 18px; background: #fff; border-radius: 6px; color: var(--navy-900); font-weight: 500; font-size: 14px; }
.sh-user { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-right: 20px; font-weight: 700; font-size: 13px; }
.sh-avatar { width: 30px; height: 30px; border-radius: 50%; background: #D0D6DE; color: var(--navy-900); display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.sh-body { padding: 20px 24px 26px; }
.sh-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--sys-line); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; }
.sh-fecha { width: 48px; height: 48px; border-radius: 9px; background: #E8EEF6; color: var(--navy); display: grid; place-content: center; text-align: center; line-height: 1; }
.sh-fecha small { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; }
.sh-fecha b { font-size: 18px; font-weight: 800; margin-top: 2px; }
.sh-titulo { display: block; color: var(--ink); font-size: 16px; }
.sh-cab p { color: #667085; font-size: 12.5px; }
.sh-estado { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--navy); background: #E8EEF6; border-radius: 999px; padding: 1px 8px; margin-right: 6px; }
.sh-estado::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sh-dato { text-align: right; }
.sh-dato small { display: block; font-size: 11px; color: #667085; }
.sh-dato b { color: var(--ink); font-size: 14px; }
.sh-sec { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--navy-900); margin-bottom: 10px; }
.sh-sec i { width: 7px; height: 7px; border-radius: 2px; background: var(--navy); }
.sh-sec span { color: #98A2B3; font-weight: 600; }
.sh-mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sh-mod { background: #fff; border: 1px solid var(--sys-line); border-top: 3px solid var(--navy); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; }
.sh-arriba { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.sh-tile { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: #fff; display: grid; place-items: center; }
.sh-orden { font-size: 11px; font-weight: 700; color: #98A2B3; }
.sh-aparte { font-size: 10px; font-weight: 700; color: #667085; background: #EEF1F6; padding: 1px 7px; border-radius: 999px; }
.sh-nombre { color: var(--ink); font-size: 14.5px; line-height: 1.25; margin-bottom: 3px; }
.sh-desc { font-size: 11.5px; color: #667085; margin-bottom: 10px; min-height: 2.9em; }
.sh-kpis { border-top: 1px solid var(--sys-line); margin-bottom: 12px; }
.sh-kpis div { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #EEF1F6; font-size: 11.5px; }
.sh-kpis b { color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.sh-num { min-width: 22px; text-align: center; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #E8EEF6; color: var(--navy); }
.sh-num.sh-alerta { background: #FEE2E2; color: #B91C1C; }
.sh-entrar { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 7px; background: var(--navy); color: #fff; font-weight: 700; font-size: 12.5px; }
.sh-entrar.sh-ext { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }

@media (max-width: 960px) {
  .sh-top { grid-template-columns: auto 1fr; }
  .sh-user { display: none; }
  .sh-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sh-top { grid-template-columns: 1fr; height: auto; padding: 10px 0; row-gap: 8px; }
  .sh-marca { border-right: 0; height: auto; justify-content: center; }
  .sh-proyecto { font-size: 13px; }
  .sh-selector { width: 160px; height: 34px; }
  .sh-body { padding: 14px 12px 18px; }
  .sh-cab { grid-template-columns: auto 1fr; }
  .sh-dato { display: none; }
  .sh-desc, .sh-kpis { display: none; }
  .sh-mod { padding: 12px; }
  .sh-nombre { font-size: 13px; margin-bottom: 10px; }
}

/* Problema: una frase por tarjeta */
.problem-item { padding: 32px 28px; }
.problem-item h3 { font-size: 20px; line-height: 1.3; margin: 0; }

/* Problema: un problema por módulo */
.problem-title { font-size: clamp(28px, 3.6vw, 42px); max-width: 18em; margin-bottom: 40px; }
.problem-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.problem-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 28px; min-height: 220px; transition: border-color .2s; }
.problem-card:hover { border-color: var(--navy); }
.problem-card p { font-size: 19px; line-height: 1.3; color: var(--navy-900); font-weight: 600; letter-spacing: -0.01em; }
.problem-card .mod { margin-top: auto; display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--blue); }
.problem-card .mod svg { flex: none; }
@media (max-width: 960px) { .problem-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .problem-cards { grid-template-columns: 1fr; } .problem-card { min-height: 0; gap: 16px; } }

/* Para quién: tarjetas de una línea */
.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.who-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 210px; transition: border-color .2s; }
.who-card:hover { border-color: var(--navy); }
.who-card h3 { font-size: 18px; }
.who-card p { font-size: 15.5px; color: var(--muted); }
.who-sol { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--blue); }
.who-note { margin-top: 28px; font-size: 15px; color: var(--muted); max-width: 46em; }
@media (max-width: 960px) { .who-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .who-grid { grid-template-columns: 1fr; } .who-card { min-height: 0; } }

/* Ícono de la app BK Tareas, con forma de app de iOS */
.app-icon { display: block; flex: none; width: 40px; height: 40px; border-radius: 22.37%; box-shadow: 0 1px 2px rgba(16,24,40,.14), 0 6px 14px -8px rgba(16,24,40,.35); }
.app-icon-lg { width: 52px; height: 52px; }
.app-icon-sm { width: 24px; height: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.16); }
.app-icon-hero { width: 40px; height: 40px; }
.mod-label .app-icon { width: 44px; height: 44px; }
.sh-arriba .app-icon { width: 40px; height: 40px; }

/* Íconos (Lucide, ISC): un solo grosor y estilo para todo el sitio */
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic-bold { stroke-width: 2.6; }
.module-icon .ic, .mi .ic, .fi .ic, .sh-tile .ic, .callout .fi .ic { stroke-width: 1.75; }
.problem-card .mod .ic { stroke-width: 1.9; }

/* Portadas con fondo de construcción (propuestas) */
.opt-intro { background: #fff; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.opt-bar { background: var(--navy-800); color: #fff; padding: 11px 0; font-size: 14px; border-top: 1px solid rgba(255,255,255,.1); }
.opt-bar b { font-weight: 700; }
.opt-bar span { color: var(--on-dark-muted); margin-left: 12px; }
.cover { position: relative; overflow: hidden; background: var(--navy-900); min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); display: flex; align-items: center; padding: 28px 0 56px; }
.cover .wrap { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.cover-bg { position: absolute; inset: 0; z-index: 0; }
.cover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(21,43,71,0), var(--navy-900)); z-index: 1; pointer-events: none; }
.cover-copy { max-width: 640px; pointer-events: auto; }
.cover h1 { color: #fff; font-size: clamp(34px, min(4.6vw, 7.4vh), 60px); letter-spacing: -0.035em; line-height: 1.07; }
.cover .hero-tag { margin-bottom: 22px; }
.cover .hero-sub { margin: 22px 0 0; max-width: 540px; text-align: left; }
.cover .hero-ctas { justify-content: flex-start; margin-top: 30px; }


.cover-plano .cover-bg { left: 44%; right: 0; display: flex; align-items: center; justify-content: flex-end; }
.cover-plano::before { content: ""; position: absolute; width: 760px; height: 760px; right: -80px; top: -60px; background: radial-gradient(circle, rgba(30,111,217,.28), transparent 62%); z-index: 0; }

@media (max-width: 900px) {
  .cover { min-height: 0; padding: 48px 0 64px; }
    .cover-plano .cover-bg { left: 0; opacity: .35; }
}

.mock-wrap { background: var(--navy-900); padding: 0 0 72px; }
.mock-wrap .mock-stage { margin-top: 0; }

/* ---------- Plano de la obra: capas, animación e interacción ---------- */
.obra { width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.obra .trama { opacity: .9; }
.obra .eje { stroke: #9CC2F5; stroke-opacity: .16; stroke-dasharray: 2 7; }
.obra .col { stroke: #9CC2F5; stroke-opacity: .85; stroke-width: 1.5; stroke-linecap: round; }
.obra .losa { fill: #1E6FD9; fill-opacity: .10; stroke: #CFE2FB; stroke-opacity: .85; stroke-width: 1.4; stroke-linejoin: round; transition: fill-opacity .25s, stroke-opacity .25s, stroke .25s; cursor: crosshair; }
.obra .viga { stroke: #9CC2F5; stroke-opacity: .45; pointer-events: none; }
.obra .encofrado { stroke: #CFE2FB; stroke-opacity: .7; stroke-width: 1.4; stroke-dasharray: 6 5; stroke-linejoin: round; fill: #1E6FD9; fill-opacity: 0; cursor: crosshair; }
.obra .viga-enc { stroke: #9CC2F5; stroke-opacity: .35; stroke-dasharray: 3 5; pointer-events: none; }
.obra .cota line { stroke: #9CC2F5; stroke-opacity: .5; }
.obra .cota text, .obra .burbuja text, .obra .capa-cotas text { font: 11px ui-monospace, Menlo, Consolas, monospace; fill: #CFE2FB; }
.obra .cota text { fill-opacity: .85; transition: fill-opacity .25s; }
.obra .piso:hover .losa { fill-opacity: .3; stroke: #fff; stroke-opacity: 1; }
.obra .piso:hover .encofrado { fill-opacity: .16; stroke-opacity: 1; }
.obra .piso:hover .cota text { fill-opacity: 1; fill: #fff; }
.obra .mastil, .obra .pluma { stroke: #CFE2FB; stroke-opacity: .85; stroke-width: 2; }
.obra .mastil2 { stroke: #CFE2FB; stroke-opacity: .5; stroke-width: 1.4; }
.obra .celosia, .obra .tirante { stroke: #9CC2F5; stroke-opacity: .4; }
.obra .cable { stroke: #9CC2F5; stroke-opacity: .7; }
.obra .carga rect { fill: #1E6FD9; fill-opacity: .4; stroke: #CFE2FB; stroke-opacity: .8; }
.obra .ext { stroke: #9CC2F5; stroke-opacity: .5; }
.obra .dim { stroke: #CFE2FB; stroke-opacity: .7; }
.obra .capa-cotas rect { fill: #152B47; }
.obra .burbuja circle { stroke: #9CC2F5; stroke-opacity: .7; }
.obra .aro { stroke: #E30613; stroke-opacity: .5; stroke-width: 1.5; }
.obra .halo { stroke: #E30613; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.obra .punto { fill: #E30613; }
.obra .alerta { cursor: pointer; outline: none; }
.obra .alerta .tip { opacity: 0; transition: opacity .2s; pointer-events: none; }
.obra .alerta .tip rect { fill: #fff; }
.obra .alerta .tip text { font: 600 12px "DM Sans", system-ui, sans-serif; fill: #152B47; }
.obra .alerta:hover .tip, .obra .alerta:focus .tip { opacity: 1; }
.obra .alerta:focus-visible .aro { stroke-opacity: 1; stroke-width: 2.5; }

/* Paralaje con el puntero: cada capa se mueve distinto */
.cover-plano { --px: 0; --py: 0; }
.obra .capa { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.obra .capa-suelo { transform: translate(calc(var(--px) * -10px), calc(var(--py) * -6px)); }
.obra .capa-obra, .obra .capa-cotas, .obra .alerta { transform: translate(calc(var(--px) * -22px), calc(var(--py) * -14px)); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.obra .capa-grua { transform: translate(calc(var(--px) * -42px), calc(var(--py) * -26px)); }
.cover-plano::before { transform: translate(calc(var(--px) * 48px), calc(var(--py) * 34px)); transition: transform .6s ease-out; }

/* Una sola secuencia al cargar: la obra se levanta piso por piso */
@media (prefers-reduced-motion: no-preference) {
  .obra .col { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar .8s cubic-bezier(.3,.7,.2,1) forwards; animation-delay: calc(var(--i) * .5s + .25s); }
  .obra .losa, .obra .encofrado, .obra .viga, .obra .viga-enc, .obra .cota { opacity: 0; animation: aparecer .6s ease-out forwards; animation-delay: calc(var(--i) * .5s + .75s); }
  .obra .capa-grua, .obra .capa-cotas { opacity: 0; animation: aparecer .9s ease-out 2.4s forwards; }
  .obra .alerta { opacity: 0; animation: aparecer .5s ease-out 2.9s forwards; }
  .obra .halo { animation: latido 2.4s ease-out 3.2s infinite; }
  .obra .gancho .cable { transform-box: fill-box; transform-origin: 50% 0; animation: cable 7s ease-in-out 3s infinite alternate; }
  .obra .gancho .carga { animation: carga 7s ease-in-out 3s infinite alternate; }
}
@keyframes trazar { to { stroke-dashoffset: 0; } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes latido { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cable { from { transform: scaleY(1); } to { transform: scaleY(1.28); } }
@keyframes carga { from { transform: translateY(0); } to { transform: translateY(38px); } }

/* =========================================================
   Un día en la obra: cada registro recorre tres paneles en orden
   (1 En la obra → 2 En el presupuesto → 3 Reporte gerencial)
   ========================================================= */
.dia { position: relative; background: var(--navy-900); color: var(--on-dark); min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); display: flex; align-items: center; padding: 26px 0 30px; overflow: hidden; isolation: isolate; }
.dia::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; }
.dia::after { content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; left: 8%; top: -160px; background: radial-gradient(circle, rgba(30,111,217,.24), transparent 62%); pointer-events: none; }
.dia .wrap { max-width: 1400px; width: 100%; display: flex; flex-direction: column; }
.dia .eyebrow { color: #6FA6F0; margin-bottom: 8px; }
.dia-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.dia h2 { color: #fff; font-size: clamp(24px, min(2.6vw, 4.4vh), 36px); letter-spacing: -0.03em; line-height: 1.1; max-width: 22em; }
.dia-play { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; }
.dia-play:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.65); }
.dia-play .ic { stroke-width: 2.4; }
.dia-play .ic-play { display: none; fill: currentColor; }
.dia-play.paused .ic-pause { display: none; }
.dia-play.paused .ic-play { display: block; }
.dia-play:focus-visible, .dstep:focus-visible { outline: 3px solid #4C8DF0; outline-offset: 3px; }

/* Los cinco momentos, como pasos numerados */
.dia-steps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dstep { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: #CBD6E4; font: 600 14px "DM Sans", system-ui, sans-serif; cursor: pointer; transition: background .3s, border-color .3s, color .3s; }
.dstep:hover { border-color: rgba(255,255,255,.55); }
.dstep .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; font-size: 12.5px; font-weight: 800; transition: background .3s, color .3s; }
.dstep.done { border-color: rgba(111,166,240,.7); color: #fff; }
.dstep.done .n { background: #4C8DF0; font-size: 0; }
.dstep.done .n::after { content: "✓"; font-size: 13px; }
.dstep.now { background: #fff; color: #152B47; border-color: #fff; }
.dstep.now .n { background: #1E6FD9; color: #fff; font-size: 12.5px; }
.dstep.now .n::after { content: none; }

/* Qué está pasando ahora */
.dia-now { display: flex; align-items: center; gap: 16px; margin-top: 12px; padding: 12px 18px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.dia-chip { flex: none; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; white-space: nowrap; }
.dia-now[data-src="obra"] .dia-chip { background: #1E6FD9; }
.dia-now[data-src="pres"] .dia-chip { background: #fff; color: #152B47; }
.dia-now b { display: block; color: #fff; font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; }
.dia-now span:last-child, .dia-now div span { display: block; color: #CBD6E4; font-size: 14px; margin-top: 2px; }

/* Los tres paneles */
.dia-panels { display: grid; grid-template-columns: 1.15fr 34px 1fr 34px 1fr; align-items: stretch; margin-top: 14px; }
.dia-p { display: flex; flex-direction: column; border-radius: 14px; padding: 14px 16px 12px; min-width: 0; transition: box-shadow .5s, border-color .5s; }
.dia-p header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dia-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #1E6FD9; color: #fff; flex: none; }
.dia-p h3 { font-size: 16px; letter-spacing: -0.01em; }
.dia-p header small { margin-left: auto; font-size: 12px; }
.dia-p-obra { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.dia-p-obra h3 { color: #fff; }
.dia-p-obra header small { color: var(--on-dark-muted); }
.dia-p-pres, .dia-p-rep { background: #F4F6FB; color: #475467; border: 1px solid transparent; }
.dia-p-pres h3, .dia-p-rep h3 { color: #101828; }
.dia-p-pres header small, .dia-p-rep header small { color: #667085; }
.dia-p.hot { box-shadow: 0 0 0 3px #6FA6F0, 0 22px 50px -24px rgba(30,111,217,.9); }
.dia-pn { margin-top: auto; padding-top: 10px; border-top: 1px solid #E1E5EE; font-size: 13px; line-height: 1.4; color: #475467; min-height: 3.1em; }

.dia-arrow { display: grid; place-items: center; color: #6FA6F0; }
.dia-arrow .ic { stroke-width: 2.8; }
.dia-arrow.go .ic { animation: fluye 1.2s ease-out; }
@keyframes fluye { 0% { transform: translateX(-8px) scale(1); color: #6FA6F0; } 40% { transform: translateX(4px) scale(1.6); color: #fff; } 100% { transform: translateX(0) scale(1); color: #6FA6F0; } }

/* 1 · En la obra */
.dia-stage { position: relative; flex: 1; min-height: 300px; overflow: hidden; }
.dob { position: absolute; inset: 0; width: 100%; height: 100%; }
.dob .eje { stroke: #9CC2F5; stroke-opacity: .2; stroke-dasharray: 2 7; }
.dob .col { stroke: #9CC2F5; stroke-opacity: .9; stroke-width: 1.5; stroke-linecap: round; }
.dob .losa { fill: #1E6FD9; fill-opacity: .14; stroke: #CFE2FB; stroke-opacity: .9; stroke-width: 1.4; stroke-linejoin: round; }
.dob .viga { stroke: #9CC2F5; stroke-opacity: .5; }
.dob .enc { fill: #1E6FD9; fill-opacity: 0; stroke: #CFE2FB; stroke-opacity: .8; stroke-width: 1.4; stroke-dasharray: 6 5; stroke-linejoin: round; transition: fill-opacity .6s; }
.dob .ov { opacity: 0; transition: opacity .5s; }
.dob .ov.on { opacity: 1; }
.dob .halo { stroke: #E30613; fill: none; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .dob .halo { animation: latido 2.4s ease-out infinite; } }
.dia-tag { position: absolute; transform: translate(-50%, -100%); padding: 5px 13px; border-radius: 999px; font: 600 13.5px "DM Sans", system-ui, sans-serif; background: #fff; color: #152B47; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); opacity: 0; transition: opacity .4s; pointer-events: none; }
.dia-tag.on { opacity: 1; }
.dia-tag.right { transform: translate(0, -100%); }
.dia-tag.ok { color: #15803D; } .dia-tag.bad { color: #B91C1C; }
.dia-tag.dark { background: #152B47; color: #fff; box-shadow: 0 0 0 1.5px rgba(156,194,245,.8), 0 8px 20px -8px rgba(0,0,0,.6); }
.dia-tag.num { transform: translate(-50%, -50%); width: 28px; height: 28px; padding: 0; display: grid; place-items: center; background: #152B47; color: #fff; font-weight: 700; font-size: 13.5px; box-shadow: 0 0 0 1.5px rgba(207,226,251,.85); }

/* 2 · En el presupuesto */
.dia-saldo { display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid #E1E5EE; border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; }
.dia-saldo span { color: #667085; font-size: 13px; }
.dia-saldo b { color: #101828; font-family: var(--mono); font-size: 19px; font-weight: 500; }
.dia-bar { margin-bottom: 13px; }
.dia-bar > div:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.dia-bar span { color: #344054; }
.dia-bar em { margin-left: auto; font-style: normal; font-weight: 700; color: #667085; font-size: 13px; }
.dia-delta { display: none; font-size: 12px; font-weight: 800; color: #15803D !important; background: #DCFCE7; border-radius: 999px; padding: 0 9px; }
.dia-delta.on { display: inline-block; animation: aparece-delta .5s ease-out; }
@keyframes aparece-delta { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dia-track { height: 9px; border-radius: 5px; background: #E1E5EE; overflow: hidden; }
.dia-track i { display: block; height: 100%; width: 0; border-radius: 5px; background: #1E6FD9; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.dia-track.red i { background: #B91C1C; }
.dia-bar.flash .dia-track { box-shadow: 0 0 0 3px rgba(30,111,217,.35); }

/* 3 · Reporte gerencial: huecos grises que se llenan con cada registro */
.dia-obra { color: #667085; font-size: 13px; margin: -4px 0 8px; }
.dia-p-rep h4 { margin: 10px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #1E3A5F; text-transform: uppercase; }
.rs { position: relative; display: flex; align-items: center; min-height: 40px; padding: 7px 12px; border-radius: 9px; background: #fff; border: 1px solid #E1E5EE; margin-bottom: 6px; font-size: 13.5px; line-height: 1.35; color: #344054; transition: background .5s, border-color .5s; }
.rs .sk { display: block; height: 9px; width: 62%; border-radius: 5px; background: #E6EAF1; }
.rs .tx { display: none; }
.rs.on .sk { display: none; }
.rs.on .tx { display: block; animation: aparece-delta .5s ease-out; }
.rs.new { background: #E2ECFC; border-color: #6FA6F0; }
.dia-sent { margin-top: auto; display: flex; align-items: center; gap: 8px; background: #E8EEF6; color: #475467; font-weight: 700; font-size: 14px; border-radius: 10px; padding: 11px 13px; transition: background .5s, color .5s; }
.dia-sent .ic { display: none; }
.dia-sent.ok { background: #DCFCE7; color: #15803D; }
.dia-sent.ok .ic { display: block; }
.dia-fict { text-align: center; font-size: 11.5px; color: var(--on-dark-muted); margin-top: 10px; }

@media (max-width: 1180px) { .dia-panels { grid-template-columns: 1.1fr 26px 1fr 26px 1fr; } }
@media (max-width: 1000px) {
  .dia { min-height: 0; padding: 64px 0; }
  .dia-now { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dia-panels { grid-template-columns: 1fr; }
  .dia-arrow { height: 36px; transform: rotate(90deg); }
  .dia-stage { min-height: 340px; }
  .dstep { height: 36px; font-size: 13px; padding-right: 12px; }
}
@media (min-width: 1001px) and (max-height: 800px) {
  .dia { padding: 14px 0 16px; }
  .dia .eyebrow { display: none; }
  .dia h2 { font-size: 22px; }
  .dia-steps { margin-top: 10px; }
  .dstep { height: 34px; }
  .dia-now { padding: 8px 14px; margin-top: 10px; }
  .dia-now b { font-size: 16px; }
  .dia-panels { margin-top: 10px; }
  .dia-p { padding: 10px 12px 8px; }
  .dia-p header { margin-bottom: 6px; }
  .dia-stage { min-height: 220px; }
  .dia-saldo { padding: 7px 10px; margin-bottom: 8px; }
  .dia-bar { margin-bottom: 8px; }
  .dia-pn { padding-top: 6px; min-height: 0; }
  .dia-p-rep h4 { margin: 6px 0 4px; }
  .rs { min-height: 34px; padding: 5px 10px; margin-bottom: 4px; font-size: 12.5px; }
  .dia-sent { padding: 8px 10px; }
  .dia-obra, .dia-fict { display: none; }
}

/* =========================================================
   Portada con foto: obra en construcción al atardecer
   ========================================================= */
.cover-foto .cover-bg { background: url(portada-obra.webp) center 40% / cover no-repeat; }
.cover-foto .cover-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,43,71,.97) 0%, rgba(21,43,71,.85) 36%, rgba(21,43,71,.16) 100%), linear-gradient(180deg, rgba(21,43,71,0) 55%, rgba(21,43,71,.8) 100%); }
.cover-foto .cover-copy { text-shadow: 0 1px 24px rgba(21,43,71,.45); }
@media (max-width: 900px) {
  .cover-foto .cover-bg { opacity: .5; }
  .cover-foto .cover-bg::after { background: linear-gradient(180deg, rgba(21,43,71,.75), rgba(21,43,71,.9)); }
}


/* ===== Imágenes ===== */
.module-photo { margin: -36px -36px 28px; height: 200px; border-radius: 17px 17px 0 0; overflow: hidden; position: relative; background: var(--navy-900); }
.module-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.module:hover .module-photo img { transform: scale(1.04); }
.module-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,43,71,0) 45%, rgba(21,43,71,.45) 100%); pointer-events: none; }
.who-card { overflow: hidden; }
.who-photo { margin: -24px -24px 6px; height: 150px; overflow: hidden; position: relative; background: var(--navy-900); }
.who-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.who-card:hover .who-photo img { transform: scale(1.05); }
.who-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,43,71,0) 50%, rgba(21,43,71,.35) 100%); pointer-events: none; }
.ph-bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; opacity: .55; }
.ph-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,43,71,.97) 0%, rgba(21,43,71,.86) 42%, rgba(21,43,71,.5) 100%), linear-gradient(180deg, rgba(21,43,71,0) 55%, rgba(21,43,71,.9) 100%); }
.demo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,27,38,.93) 0%, rgba(18,27,38,.8) 100%), url(img/cierre-atardecer.webp) center 40% / cover no-repeat; }
@media (max-width: 640px) {
  .module-photo { margin: -28px -22px 24px; height: 170px; }
  .who-photo { margin: -20px -20px 6px; height: 140px; }
}
@media (prefers-reduced-motion: reduce) { .module-photo img, .who-photo img { transition: none; } }


/* ===== Ritmo de fondos: hero oscuro, mockup sobre fondo claro, «Un día» oscuro ===== */
.mock-wrap { background: var(--sys-bg, #F4F6FB); padding: 0 0 96px; position: relative; z-index: 2; }
.mock-wrap .mock-stage { margin-top: -110px; }
.mock-wrap .sh { box-shadow: 0 30px 70px -20px rgba(21,43,71,.45); }
@media (max-width: 640px) { .mock-wrap { padding-bottom: 64px; } .mock-wrap .mock-stage { margin-top: -48px; } }

/* «Para quién»: tarjetas informativas, no son enlaces */
div.who-card { min-height: 0; }
div.who-card:hover { border-color: var(--line); }
div.who-card:hover .who-photo img { transform: none; }

/* Mockup de la home: centrado en su franja, con el mismo espacio arriba y abajo */
.mock-wrap { padding: var(--sec-y) 0; }
.mock-wrap .mock-stage { margin-top: 0; }

/* Menú desplegable: puente invisible entre el botón y el menú, para que no se cierre al bajar el cursor */
.drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
/* Sin el menú de pestañas, el hero de cada módulo arranca con su propio espacio */
.page-hero { padding-top: 72px; }
@media (max-width: 640px) { .page-hero { padding-top: 44px; } }

/* Íconos de los módulos: cada archivo ya trae su propio cuadrado */
.mod-ic { display: block; width: 100%; height: 100%; object-fit: contain; }
.mi:has(.mod-ic), .xp-ti:has(.mod-ic), .sh-tile:has(.mod-ic), .mc-ic:has(.mod-ic) { background: none !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; }
.xp-tab[aria-selected="true"] .xp-ti:has(.mod-ic) { background: none !important; }
.xp-ti img.mod-ic, .mc-ic img.mod-ic { width: 100%; height: 100%; border-radius: 0; }
img.mod-ic.app-icon { background: none !important; box-shadow: none !important; border-radius: 0 !important; border: 0 !important; padding: 0 !important; }

/* Ventana emergente del formulario de demostración */
.md-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(10,18,30,.66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; padding: 24px; overflow-y: auto; animation: mdFondo .2s ease; }
.md-overlay[hidden] { display: none; }
.md-box { position: relative; width: 100%; max-width: 560px; margin: auto; outline: none; animation: mdEntra .25s ease; }
.md-box form.card { box-shadow: 0 40px 90px -20px rgba(0,0,0,.65); }
.md-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #F2F4F7; color: #344054; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.md-close:hover { background: #E4E7EC; }
.md-close:focus-visible { outline: 3px solid #6FA6F0; outline-offset: 2px; }
.md-box .form-body > h3 { padding-right: 40px; }
body.md-abierto { overflow: hidden; }
@keyframes mdFondo { from { opacity: 0; } to { opacity: 1; } }
@keyframes mdEntra { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .md-overlay { padding: 12px; } }
@media (prefers-reduced-motion: reduce) { .md-overlay, .md-box { animation: none; } }

/* Hero de las páginas de módulo: franja de texto arriba y pantalla horizontal debajo */
.hb { padding: 72px 0 var(--hero-end); }
/* Sección que sigue a un hero de módulo */
.page-hero + section { padding-top: var(--hero-end); }
/* Secciones consecutivas con el mismo fondo: el relleno no se suma (arriba + abajo) */
section.soft + section.soft, section.dark-sec + section.dark-sec { padding-top: 0; }
section:not(.soft):not(.dark-sec):not(.page-hero):not(.xp):not(.audience):not(.start):not(.mock-wrap):not(.cover):not(.budget):not(.demo) + section:not(.soft):not(.dark-sec):not(.page-hero):not(.xp):not(.audience):not(.start):not(.mock-wrap):not(.cover):not(.budget):not(.demo) { padding-top: var(--join-y, 0px); }
.sec-tight + .sec-tight { --join-y: 16px; }
.hb-band { display:grid; grid-template-columns: 1.15fr 1fr; gap:56px; align-items:start; min-height:227px; margin-bottom:44px; }
.hb-band h1 { font-size: clamp(30px, 3.6vw, 48px); line-height:1.08; }
.hb-band .hero-sub { margin:0; max-width:none; }
/* ventana horizontal: mismo tamaño en los cuatro módulos */
.hb-win { width:100%; max-width:none; margin:0 auto; }
.hb-body { min-height: 440px; padding:22px 24px; }
.hb-cols { display:grid; grid-template-columns: 1.55fr 1fr; gap:28px; align-items:start; }
.hb-cols-pres { grid-template-columns: 1.3fr 1fr; }
.hb-card { background:#fff; border:1px solid #E1E5EE; border-radius:14px; padding:16px 18px; }
.hb-rep { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:8px 10px; border:1px solid #E1E5EE; border-radius:10px; background:#fff; margin-top:8px; }
.hb-rep .xr-thumb { aspect-ratio:auto; height:52px; padding:5px; gap:3px; }
.hb-rep .xr-thumb .bars { height:20px; } .hb-rep .xr-thumb .box { height:12px; } .hb-rep .xr-thumb .rows u { height:4px; }
.hb-rep b { font-size:13.5px; color:#101828; }
.hb-phones { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; justify-items:center; align-items:start; }
.hb-ph p { margin:12px 0 0; text-align:center; font-size:12.5px; font-weight:600; color:#475467; }
.hb-ph .xd-phone { width:230px; }
.hb-ph .xd-phone-body { min-height:250px; }
.hb .xh-grid { gap:8px; } .hb .xh-tile { padding-top:30px; }
@media (max-width: 960px) { .hb-band { grid-template-columns:1fr; gap:24px; min-height:0; } .hb-cols, .hb-cols-pres { grid-template-columns:1fr; } .hb-phones { grid-template-columns:1fr; } }

/* Datos de disponibilidad bajo la pantalla (BK Tareas) */
.hb-avail { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: center; align-items: center; margin-top: 18px; }
.hb-avail .hero-facts { margin: 0; justify-content: center; }
.hb-avail .stores { margin: 0 !important; }

/* Barra superior de las pantallas de los módulos: la misma de la home */
.hb-win .sh-top, .ui .sh-top { border-radius: 0; }
.sh-top-enlace .sh-proyecto { font-weight: 600; font-size: 14px; }
.sh-top-enlace .sh-proyecto span:last-child { font-weight: 500; color: #C9D2DD; }

/* Funciones de Control de Obras: filas con pantalla */
.fx { display: grid; gap: 56px; }
.fx-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.fx-row.rev { grid-template-columns: 1.2fr 1fr; }
.fx-row.rev .fx-txt { order: 2; }
.fx-n { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--blue); display: block; margin-bottom: 10px; }
.fx-txt h3 { font-size: clamp(22px,2.4vw,28px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.fx-txt > p { color: var(--muted); margin: 0 0 18px; max-width: 460px; }
.fx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.fx-list svg { color: var(--blue); flex: none; margin-top: 3px; }
.fx-shot { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 28px 56px -28px rgba(21,43,71,.4); min-width: 0; font-size: 14px; }
.fx-shot .xd-title { margin-bottom: 12px; }
.fx-inc { display: grid; gap: 8px; }
.fx-ir { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid #E1E5EE; border-radius: 12px; background: #fff; }
.fx-ir i { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #FDEBC8; color: #B45309; }
.fx-ir div { flex: 1; min-width: 0; }
.fx-ir b { display: block; font-size: 14px; color: #101828; }
.fx-ir small { color: #667085; font-size: 12.5px; }
.fx-ir em { font-style: normal; font-size: 12px; color: #667085; display: inline-flex; gap: 4px; align-items: center; background: #F2F4F7; padding: 4px 8px; border-radius: 999px; }
.fx-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #FFF6E5; color: #92400E; font-weight: 600; }
.fx-total b { font-size: 22px; }
@media (max-width: 960px) { .fx { gap: 44px; } .fx-row, .fx-row.rev { grid-template-columns: 1fr; gap: 24px; } .fx-row.rev .fx-txt { order: 0; } }
@media (max-width: 640px) { .fx-shot { padding: 12px; } .fx-shot .xh-grid { grid-template-columns: repeat(2, 1fr); } .fx-shot .xr-grid { grid-template-columns: repeat(2, 1fr); } .fx-shot .xdb-kpis { grid-template-columns: repeat(2, 1fr); } .fx-shot .xdb-cols { grid-template-columns: 1fr; } }

.hb-dash .xdb{gap:12px}

/* Hero de Control Presupuestario: pantalla de Presupuesto */
.pw-win { max-width: 1240px; margin: 0 auto; }
.pw-body { background: #F4F6FB; padding: 22px 24px 26px; }
.pw-t { font-size: 26px; margin: 0 0 16px; color: #101828; }
.pw-ks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.pw-k { background: #fff; border: 1px solid #E1E5EE; border-left: 3px solid #152B47; border-radius: 10px; padding: 14px 18px; }
.pw-k b { display: block; font-size: 24px; color: #101828; line-height: 1.2; }
.pw-k small { color: #667085; font-size: 12.5px; }
.pw-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pw-q { flex: 1; height: 40px; border: 1px solid #D0D5DD; border-radius: 8px; padding: 0 14px; font: inherit; font-size: 14px; background: #fff; }
.pw-n { font-family: var(--mono); font-size: 11.5px; color: #667085; white-space: nowrap; }
.pw-card { background: #fff; border: 1px solid #E1E5EE; border-radius: 12px; overflow: hidden; }
.pw-tools { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #E1E5EE; flex-wrap: wrap; }
.pw-vh { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #667085; }
.pw-seg { display: inline-flex; border: 1px solid #D0D5DD; border-radius: 8px; overflow: hidden; }
.pw-seg button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; background: #fff; border: 0; border-right: 1px solid #D0D5DD; cursor: pointer; color: #344054; }
.pw-seg button:last-child { border-right: 0; }
.pw-seg button.on { background: #E8F0FD; color: #1E4FA8; }
.pw-sum { margin-left: auto; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: #667085; }
.pw-scroll { overflow-x: auto; }
.pw-tb { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 860px; }
.pw-tb th { text-align: left; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; color: #667085; padding: 12px 14px; border-bottom: 1px solid #E1E5EE; }
.pw-tb td { padding: 13px 14px; border-bottom: 1px solid #EEF1F6; color: #344054; }
.pw-tb .num { text-align: right; white-space: nowrap; }
.pw-tb th.num { text-align: right; }
.pw-un { color: #667085; }
.pw-c td { background: #EAF0F8; font-weight: 700; color: #101828; border-top: 2px solid #C8D3E3; }
.pw-s td { background: #F7F9FC; font-weight: 600; color: #101828; }
.pw-cod { white-space: nowrap; color: #475467; }
.pw-ch { font-style: normal; font-size: 10px; margin-right: 8px; color: #667085; }
.pw-tb tr[hidden] { display: none; }
@media (max-width: 760px) { .pw-ks { grid-template-columns: 1fr; } .pw-sum { margin-left: 0; } .pw-body { padding: 16px; } }
.page-hero .pw-win { max-width: none; }
.page-hero .pw-body { padding: 16px 20px 18px; }
.page-hero .pw-t { font-size: 22px; margin-bottom: 10px; }
.page-hero .pw-k { padding: 10px 16px; }
.page-hero .pw-k b { font-size: 21px; }
.page-hero .pw-ks, .page-hero .pw-bar { margin-bottom: 10px; }
.page-hero .pw-tb td { padding: 6px 14px; }
.page-hero .pw-tb th { padding: 9px 14px; }
.page-hero .pw-k { padding: 8px 16px; }
.page-hero .pw-tb { min-width: 0; }

/* Control Presupuestario: descripción, diagrama y funciones */
.pb-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 24px 50px -28px rgba(21,43,71,.35); }
.pb-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid #E1E5EE; }
.pb-h b { font-size: 16px; color: #101828; } .pb-h small { color: #667085; font-family: var(--mono); font-size: 12px; }
.pb-row { display: grid; grid-template-columns: 1.3fr 1.2fr 44px; gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid #EEF1F6; }
.pb-row:last-child { border-bottom: 0; }
.pb-row b { display: block; font-size: 14.5px; color: #101828; } .pb-row small { color: #667085; font-size: 12.5px; }
.pb-row em { font-style: normal; font-weight: 700; text-align: right; color: #101828; }
.pb-track { height: 10px; border-radius: 99px; background: #EEF2F7; overflow: hidden; } .pb-track i { display: block; height: 100%; background: #1E6FD9; border-radius: 99px; }
.pb-track.red i { background: var(--red); } .pb-track.ok i { background: #15803D; }
.pf-seg { display: inline-flex; border: 1px solid #D0D5DD; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.pf-seg button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; background: #fff; border: 0; border-right: 1px solid #D0D5DD; cursor: pointer; color: #344054; }
.pf-seg button:last-child { border-right: 0; } .pf-seg button.on { background: #E8F0FD; color: #1E4FA8; }
.pf-ks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.pf-ks > div { border: 1px solid #E1E5EE; border-radius: 10px; padding: 10px 12px; } .pf-ks small { color: #667085; font-size: 12px; display: block; } .pf-ks b { font-size: 19px; color: #101828; }
.pf-t { border: 1px solid #E1E5EE; border-radius: 10px; overflow: hidden; }
.pf-th, .pf-tr { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 8px; padding: 9px 12px; font-size: 13px; align-items: center; }
.pf-th { background: #F7F9FC; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #667085; border-bottom: 1px solid #E1E5EE; }
.pf-th span:not(:first-child), .pf-tr span:not(:first-child) { text-align: right; }
.pf-tr { border-bottom: 1px solid #EEF1F6; } .pf-tr:last-child { border-bottom: 0; } .pf-tr span:first-child { font-weight: 600; color: #101828; }
.pf-th5, .pf-r5 { grid-template-columns: 1.4fr .8fr 1fr 1fr .9fr; }
.pf-r5 { display: grid; gap: 8px; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid #EEF1F6; align-items: center; } .pf-r5:last-child { border-bottom: 0; }
.pf-r5 span:not(:first-child) { text-align: right; } .pf-r5 span:first-child { font-weight: 600; color: #101828; }
.pf-ok { font-style: normal; color: #15803D; font-weight: 700; } .pf-bad { font-style: normal; color: #B42318; font-weight: 700; }
.pf-r5.bad { background: #FEF3F2; }
.pf-msg { margin: 12px 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: #ECFDF3; color: #067647; font-weight: 600; }
.pf-msg.bad { background: #FEF3F2; color: #B42318; }
.pf-tot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #F4F6FB; border-radius: 10px; } .pf-tot b { font-size: 20px; }
.pf-btns { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pf-b { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--navy); background: var(--navy); color: #fff; cursor: pointer; }
.pf-b.ghost { background: #fff; color: var(--navy); } .pf-b:disabled { opacity: .45; cursor: not-allowed; }
.pf-l { display: block; font-size: 12.5px; color: #667085; margin-bottom: 6px; }
.pf-in { display: flex; align-items: center; border: 1px solid #D0D5DD; border-radius: 8px; padding: 0 12px; height: 42px; max-width: 260px; } .pf-in span { color: #667085; margin-right: 6px; } .pf-in input { border: 0; outline: 0; font: inherit; font-size: 16px; width: 100%; background: transparent; }
.pf-pre { display: flex; gap: 8px; margin: 10px 0 14px; flex-wrap: wrap; } .pf-pre button { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid #D0D5DD; background: #fff; cursor: pointer; color: #344054; }
.pf-res { padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.pf-res.ok { background: #ECFDF3; color: #067647; } .pf-res.warn { background: #FFF6E5; color: #92400E; } .pf-res.bad { background: #FEF3F2; color: #B42318; }
.pf-bar { height: 10px; border-radius: 99px; background: #EEF2F7; overflow: hidden; } .pf-bar i { display: block; height: 100%; width: 0; background: #1E6FD9; transition: width .3s, background .3s; }
.pf-leg { display: flex; justify-content: space-between; font-size: 12px; color: #667085; margin-top: 6px; }
.pf-log { display: grid; gap: 8px; } .pf-log > div { border: 1px solid #E1E5EE; border-radius: 10px; padding: 11px 13px; } .pf-log b { display: block; font-size: 14px; color: #101828; } .pf-log small { color: #667085; font-size: 12.5px; }
.pf-reps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .pf-reps > div { border: 1px solid #E1E5EE; border-radius: 10px; padding: 12px 13px; } .pf-reps b { display: block; color: #101828; } .pf-reps small { color: #667085; font-size: 12.5px; }
.pf-minis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap, 20px); margin-top: var(--card-gap, 20px); }
.pf-mini { background: #fff; border: 1px solid var(--line); border-radius: var(--radius, 16px); padding: 20px 22px; display: flex; gap: 16px; align-items: flex-start; } .pf-mini h3 { font-size: 17px; margin: 0 0 4px; } .pf-mini p { margin: 0; color: var(--muted); font-size: 14.5px; }
.pc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .pc-head b { font-size: 24px; color: #101828; } .pc-head span { font-weight: 700; color: #344054; font-size: 14px; text-transform: uppercase; }
.pc-chip { font-style: normal; font-size: 12px; font-weight: 600; background: #ECFDF3; color: #067647; border-radius: 999px; padding: 3px 10px; }
.pc-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; border: 1px solid #E1E5EE; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.pc-info small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #667085; } .pc-info span { font-size: 12.5px; color: #344054; }
.pc-tot { border: 1px solid #E1E5EE; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; } .pc-tot small { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #667085; } .pc-tot > b { display: block; font-size: 24px; color: #101828; margin: 2px 0 8px; }
.pc-bar { display: flex; gap: 2px; height: 12px; } .pc-bar i { display: block; height: 100%; border-radius: 3px; } .s-g { background: #15803D; } .s-o { background: #B45309; } .s-b { background: #1E6FD9; } .s-d { border: 1.5px dashed #1E6FD9; background: transparent; }
.pc-leg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; margin-top: 10px; } .pc-leg > div { font-size: 11.5px; color: #475467; line-height: 1.3; } .pc-leg b { display: block; font-size: 15px; color: #101828; } .pc-leg small { color: #667085; font-family: inherit; font-size: 11px; letter-spacing: 0; text-transform: none; }
.pc-leg span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .d-g { background: #15803D; } .d-o { background: #B45309; } .d-b { background: #1E6FD9; } .d-d { border: 1.5px dashed #1E6FD9; }
.pf-tabs { display: flex; border: 1px solid #E1E5EE; border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .pf-tabs span { flex: 1; text-align: center; font-size: 13px; padding: 9px 6px; background: #fff; border-bottom: 2px solid transparent; color: #667085; } .pf-tabs span.on { color: #101828; font-weight: 600; border-bottom-color: #1E6FD9; }
.pc-th, .pc-tr { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.1fr; gap: 8px; padding: 9px 12px; font-size: 12.5px; align-items: center; }
.pc-th { background: #F7F9FC; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #667085; border-bottom: 1px solid #E1E5EE; }
.pc-th span:not(:first-child), .pc-tr span:not(:first-child) { text-align: right; } .pc-tr { border-bottom: 1px solid #EEF1F6; } .pc-tr:last-child { border-bottom: 0; } .pc-tr span:first-child { font-weight: 600; color: #101828; }
.pc-mini { display: inline-block; width: 38px; height: 6px; background: #EEF2F7; border-radius: 9px; margin-right: 6px; vertical-align: middle; overflow: hidden; } .pc-mini u { display: block; height: 100%; background: #15803D; text-decoration: none; }
@media (max-width: 640px) { .pc-info { grid-template-columns: 1fr 1fr; } .pc-leg { grid-template-columns: 1fr; } .pc-th, .pc-tr { grid-template-columns: 1.4fr 1fr 1fr; } .pc-th span:nth-child(n+4), .pc-tr span:nth-child(n+4) { display: none; } }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pl-head b { font-size: 21px; color: #101828; } .pl-chip { background: #FFF6E5; color: #92400E; }
.pl-sub { color: #667085; font-size: 12.5px; margin: 4px 0 12px; }
.pl-tot { border: 1px solid #E1E5EE; border-left: 3px solid #1E6FD9; border-radius: 10px; padding: 12px 16px; margin-bottom: 12px; } .pl-tot b { display: block; font-size: 26px; color: #1E6FD9; line-height: 1.15; } .pl-tot small { display: block; color: #667085; font-size: 12px; } .pl-tot span { font-size: 12px; color: #475467; }
.pl-th, .pl-tr { display: grid; grid-template-columns: 1.5fr 1fr .8fr .9fr .9fr 1fr .8fr; gap: 6px; padding: 9px 10px; font-size: 12px; align-items: center; }
.pl-th { background: #F7F9FC; font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: #667085; border-bottom: 1px solid #E1E5EE; }
.pl-th span:not(:first-child), .pl-tr span:not(:first-child) { text-align: right; } .pl-tr { border-bottom: 1px solid #EEF1F6; } .pl-tr:last-child { border-bottom: 0; }
.pl-tr span:first-child { font-weight: 600; color: #101828; } .pl-tr small { display: block; color: #667085; font-weight: 400; font-size: 11px; }
.pl-es { color: #067647; font-weight: 700; } .pl-av { color: #067647; font-weight: 700; }
@media (max-width: 640px) { .pl-th, .pl-tr { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .pl-th span:nth-child(2), .pl-tr span:nth-child(2), .pl-th span:nth-child(3), .pl-tr span:nth-child(3), .pl-th span:nth-child(5), .pl-tr span:nth-child(5) { display: none; } }
.pd { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 24px 50px -28px rgba(21,43,71,.35); display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 0 18px; }
.pd-base { grid-row: 1; background: linear-gradient(180deg, #E8F0FD, #DCE8FB); border: 1px solid #C6D8F6; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.pd-base span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: #1E4FA8; font-weight: 600; padding: 10px 0; }
.pd-flow { grid-row: 1; grid-column: 2; display: grid; gap: 0; }
.pd-n { display: flex; gap: 14px; align-items: flex-start; position: relative; padding: 0 0 22px; }
.pd-n:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: repeating-linear-gradient(#B8C4D6 0 5px, transparent 5px 9px); }
.pd-n::before { content: ""; position: absolute; left: -18px; top: 15px; width: 18px; height: 0; border-top: 2px solid #9DB8E8; }
.pd-num { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #152B47; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; z-index: 1; }
.pd-t b { display: block; font-size: 16px; color: #101828; line-height: 1.2; }
.pd-t small { display: block; color: #667085; font-size: 13px; margin-top: 2px; }
.pd-c { display: inline-flex; align-items: flex-start; gap: 6px; font-style: normal; font-size: 12.5px; font-weight: 600; color: #067647; background: #ECFDF3; border-radius: 8px; padding: 5px 9px; margin-top: 8px; line-height: 1.3; }
.pd-c svg { flex: none; margin-top: 1px; }
.pd-foot { grid-column: 1 / -1; grid-row: 2; padding: 12px 14px; background: #F4F6FB; border-radius: 12px; }
.pd-foot b { display: block; font-size: 14px; color: #101828; }
.pd-foot small { color: #667085; font-size: 12.5px; }
@media (max-width: 640px) { .pd { grid-template-columns: 34px 1fr; gap: 0 12px; padding: 16px; } }
.pa-h { display: flex; justify-content: space-between; align-items: center; padding: 2px 2px 12px; } .pa-h b { font-size: 16px; color: #101828; }
.pa-chip { font-style: normal; font-size: 12px; font-weight: 700; background: #FFF6E5; color: #B45309; border-radius: 999px; padding: 4px 11px; }
.pa-i { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #E1E5EE; border-radius: 12px; padding: 14px 14px; margin-bottom: 8px; background: #fff; }
.pa-i > i { flex: none; color: #B45309; margin-top: 2px; } .pa-i.bad > i { color: #B42318; }
.pa-i div { flex: 1; min-width: 0; } .pa-i b { display: block; font-size: 14px; color: #101828; } .pa-i small { display: block; color: #667085; font-size: 13px; margin-top: 3px; line-height: 1.35; }
.pa-v { flex: none; align-self: center; border: 1px solid #98A2B3; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 600; color: #344054; }
@media (max-width: 640px) { .pa-i { flex-wrap: wrap; } .pa-v { margin-left: 36px; } }
@media (max-width: 960px) { .pf-minis { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pf-ks { grid-template-columns: 1fr; } .pb-row { grid-template-columns: 1fr 44px; } .pb-row .pb-track { grid-column: 1 / -1; order: 3; } .pf-th5, .pf-r5 { grid-template-columns: 1.3fr 1fr 1fr; } .pf-th5 span:nth-child(2), .pf-r5 span:nth-child(2), .pf-th5 span:nth-child(3), .pf-r5 span:nth-child(3) { display: none; } .pf-reps { grid-template-columns: 1fr; } }

/* Control Presupuestario: control de anticipos */
.pn-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .pn-head b { font-size: 21px; color: #101828; }
.pn-chip { font-style: normal; font-size: 12px; font-weight: 600; background: #E8F0FD; color: #1E4FA8; border-radius: 999px; padding: 3px 10px; }
.pn-sub { color: #667085; font-size: 12.5px; margin: 4px 0 12px; }
.pn-ks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.pn-ks > div { border: 1px solid #E1E5EE; border-radius: 10px; padding: 10px 12px; } .pn-ks small { display: block; color: #667085; font-size: 12px; } .pn-ks b { font-size: 18px; color: #101828; } .pn-ks b.g { color: #067647; } .pn-ks b.b { color: #1E6FD9; }
.pn-bar { display: flex; gap: 2px; height: 12px; margin-bottom: 8px; } .pn-bar i { display: block; height: 100%; border-radius: 3px; } .pn-bar i.g { background: #15803D; } .pn-bar i.d { border: 1.5px dashed #1E6FD9; background: transparent; }
.pn-leg { display: flex; gap: 18px; font-size: 12px; color: #475467; margin-bottom: 12px; } .pn-leg u { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; text-decoration: none; } .pn-leg u.g { background: #15803D; } .pn-leg u.d { border: 1.5px dashed #1E6FD9; }
.pn-th, .pn-tr { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 8px; padding: 9px 12px; font-size: 12.5px; align-items: center; }
.pn-th { background: #F7F9FC; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #667085; border-bottom: 1px solid #E1E5EE; }
.pn-th span:not(:first-child), .pn-tr span:not(:first-child) { text-align: right; } .pn-tr { border-bottom: 1px solid #EEF1F6; } .pn-tr:last-child { border-bottom: 0; } .pn-tr span:first-child { font-weight: 600; color: #101828; } .pn-tr .g { color: #067647; font-weight: 700; } .pn-tr.next { color: #667085; background: #FAFBFD; }
@media (max-width: 640px) { .pn-ks { grid-template-columns: 1fr; } .pn-th, .pn-tr { grid-template-columns: 1.2fr 1fr 1fr; } .pn-th span:nth-child(2), .pn-tr span:nth-child(2) { display: none; } }

/* BK Tareas: cómo funciona, dashboard del hero y pestañas */
.hw { display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr; gap: 0 10px; align-items: start; }
.hw-ar { align-self: start; margin-top: 140px; color: #98A2B3; font-size: 18px; text-align: center; }
.hw-shot { background: #F4F6FB; border: 1px solid var(--line); border-radius: 18px; height: 330px; overflow: hidden; display: flex; justify-content: center; padding-top: 22px; }
.hw-ph { width: 214px; background: #fff; border: 5px solid #1B3A5F; border-bottom: 0; border-radius: 26px 26px 0 0; overflow: hidden; align-self: flex-start; height: 320px; font-size: 11px; color: #344054; }
.hw-bar { background: #1B3A5F; color: #fff; padding: 11px 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.hw-bar b { font-weight: 700; } .hw-bar em { margin-left: auto; font-style: normal; font-size: 10px; opacity: .8; }
.hw-body { padding: 10px 10px 0; }
.hw-box { border: 1px solid #E1E5EE; border-radius: 10px; padding: 8px; margin-bottom: 8px; } .hw-box > small, .hw-f > small, .hw-list > small { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .05em; color: #667085; margin-bottom: 4px; }
.hw-drop { border: 1.5px dashed #D0D5DD; border-radius: 8px; padding: 10px 8px; text-align: center; } .hw-drop p { margin: 4px 0 8px; font-size: 10.5px; color: #667085; line-height: 1.3; }
.hw-btns { display: flex; gap: 6px; justify-content: center; } .hw-btns i, .hw-task i, .hw-chips i, .hw-tabs i { font-style: normal; border: 1px solid #98A2B3; border-radius: 6px; padding: 4px 8px; font-size: 10px; font-weight: 600; color: #344054; background: #fff; }
.hw-btns i.pri, .hw-task i.pri { background: #0E6B84; border-color: #0E6B84; color: #fff; }
.hw-f { margin-bottom: 8px; } .hw-f > span { display: block; font-size: 11px; color: #101828; border: 1px solid #E1E5EE; border-radius: 8px; padding: 7px 9px; }
.hw-f > span.hw-chips { border: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; } .hw-chips i { border-radius: 99px; padding: 3px 8px; } .hw-chips i.on, .hw-tabs i.on { background: #0E6B84; border-color: #0E6B84; color: #fff; }
.hw-tabs { display: flex; gap: 4px; margin-bottom: 8px; } .hw-tabs i { flex: 1; text-align: center; padding: 6px 4px; }
.hw-send { background: #0E6B84; color: #fff; text-align: center; font-weight: 700; border-radius: 6px; padding: 8px; font-size: 11px; }
.hw-task { border: 1px solid #E1E5EE; border-radius: 10px; padding: 9px; margin-bottom: 7px; } .hw-task b { display: block; font-size: 11.5px; color: #101828; } .hw-task small { display: block; color: #667085; font-size: 10px; margin: 2px 0 7px; } .hw-task i { display: block; text-align: center; }
.hw-cnt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; } .hw-cnt > div { border: 1px solid #E1E5EE; border-radius: 8px; text-align: center; padding: 5px 2px; } .hw-cnt > div.on { background: #0E6B84; } .hw-cnt b { display: block; font-size: 15px; color: #101828; } .hw-cnt b.r { color: #B42318; } .hw-cnt b.a { color: #B45309; } .hw-cnt b.g { color: #067647; } .hw-cnt small { font-size: 8.5px; color: #667085; } .hw-cnt > div.on b, .hw-cnt > div.on small { color: #fff; }
.hw-list > small.red { color: #B42318; } .hw-list > small.gr { color: #067647; margin-top: 8px; }
.hw-it { border: 1px solid #E1E5EE; border-radius: 8px; padding: 8px 9px; margin-bottom: 4px; } .hw-it b { display: block; font-size: 11px; color: #101828; } .hw-it small { color: #667085; font-size: 9.5px; } .hw-it.done { background: #F0FAF4; }
.hw-n { display: block; margin-top: 18px; font-size: 30px; font-weight: 700; color: #0E6B84; line-height: 1; }
.hw-s h3 { font-size: 19px; margin: 12px 0 6px; } .hw-s p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; }
@media (max-width: 1100px) { .hw { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .hw-ar { display: none; } }
@media (max-width: 640px) { .hw { grid-template-columns: 1fr; } }
.hb-win .bd { display: grid; grid-template-columns: 200px 1fr; background: #F4F6FB; min-height: 0; }
.bd-side { background: #fff; border-right: 1px solid #E1E5EE; padding: 16px 12px; } .bd-side small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: #98A2B3; margin: 12px 8px 6px; } .bd-side small:first-child { margin-top: 0; }
.bd-side a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #475467; } .bd-side a i { width: 14px; height: 14px; border-radius: 4px; background: #D0D5DD; flex: none; } .bd-side a.on { background: #E6F2F5; color: #0E6B84; font-weight: 600; } .bd-side a.on i { background: #0E6B84; }
.bd-main { padding: 14px 20px 16px; min-width: 0; } .bd-crumb { font-size: 12px; color: #667085; } .bd-main h3 { font-size: 24px; margin: 6px 0 2px; color: #101828; } .bd-sub { margin: 0 0 14px; color: #667085; font-size: 13px; }
.bd-ks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; } .bd-k { background: #fff; border: 1px solid #E1E5EE; border-radius: 10px; padding: 9px 12px; } .bd-k small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: #667085; } .bd-k b { display: block; font-size: 26px; line-height: 1.15; color: #101828; } .bd-k b.g { color: #067647; } .bd-k b.r { color: #B42318; } .bd-k b.a { color: #B45309; } .bd-k span { font-size: 11.5px; color: #667085; }
.bd-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10px; } .bd-card { background: #fff; border: 1px solid #E1E5EE; border-radius: 10px; padding: 12px 14px; } .bd-ch { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .bd-ch b { font-size: 13px; color: #101828; } .bd-ch i { font-style: normal; font-size: 9px; font-family: var(--mono); background: #E6F2F5; color: #0E6B84; border-radius: 99px; padding: 2px 8px; }
.bd-card > strong { font-size: 15px; color: #101828; } .bd-pb { display: flex; justify-content: space-between; font-size: 11.5px; color: #475467; margin: 8px 0 4px; } .bd-pb em { font-style: normal; font-weight: 700; color: #0E6B84; } .bd-bar { height: 8px; background: #EEF2F7; border-radius: 99px; overflow: hidden; } .bd-bar u { display: block; height: 100%; background: #0E6B84; border-radius: 99px; text-decoration: none; }
.bd-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; } .bd-st small { display: block; font-size: 10px; color: #667085; } .bd-st b { font-size: 15px; color: #101828; }
.bd-li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #EEF1F6; } .bd-li i { width: 24px; height: 24px; border-radius: 6px; background: #E8F0FD; flex: none; } .bd-li.r i { background: #FEE4E2; } .bd-li.a i { background: #FDEBC8; } .bd-li div { flex: 1; } .bd-li b { display: block; font-size: 12.5px; color: #101828; } .bd-li small { color: #667085; font-size: 10.5px; } .bd-li em { font-style: normal; font-weight: 700; font-size: 14px; color: #101828; }
@media (max-width: 1200px) { .bd-ks { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .hb-win .bd { grid-template-columns: 1fr; } .bd-side { display: none; } .bd-ks { grid-template-columns: 1fr 1fr; } .bd-cols { grid-template-columns: 1fr; } }
.hw-panel { display: none; } .hw-panel.active { display: block; }
.hw3 { grid-template-columns: 1fr 22px 1fr 22px 1fr; }
.hw-f > span.sel { background: #E6F2F5; border-color: #0E6B84; color: #0E6B84; font-weight: 600; }
@media (max-width: 1100px) { .hw3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .hw3 { grid-template-columns: 1fr; } }

/* BK Tareas: pantallas del paso a paso */
.hw-thumb { height: 74px; border-radius: 8px; background-size: cover; background-position: center; margin-bottom: 7px; }
.hw-box label { display: block; font-size: 9.5px; font-weight: 600; color: #475467; margin: 6px 0 3px; } .hw-box label em { font-style: normal; color: #B42318; }
.hw-in { border: 1px solid #D0D5DD; border-radius: 7px; padding: 6px 8px; font-size: 10.5px; color: #101828; background: #fff; }
.hw-in.ta { min-height: 38px; color: #475467; line-height: 1.3; } .hw-in.sel { position: relative; } .hw-in.sel::after { content: "▾"; position: absolute; right: 8px; top: 5px; color: #667085; }
.hw-ct { border: 1px solid #E1E5EE; border-radius: 8px; padding: 7px 9px; margin-bottom: 5px; } .hw-ct b { display: block; font-size: 11px; color: #101828; } .hw-ct small { color: #667085; font-size: 9.5px; }
.hw-note { border: 0 !important; padding: 0 !important; font-size: 9px !important; color: #667085 !important; margin-bottom: 4px; }
.hw-send.out { background: #fff; color: #0E6B84; border: 1.5px solid #0E6B84; margin-top: 6px; }

/* Presupuesto del hero en móvil: menos columnas y controles que no se cortan */
@media (max-width: 740px) {
  .pw-tools { gap: 8px; }
  .pw-seg button { padding: 7px 10px; font-size: 12.5px; }
  .pw-sum { margin-left: 0; width: 100%; white-space: normal; }
  .pw-tb { min-width: 0; }
  .pw-tb th:nth-child(n+3):not(:last-child), .pw-tb td:nth-child(n+3):not(:last-child) { display: none; }
  .pw-tb { font-size: 12px; }
  .pw-tb th, .pw-tb td { padding-left: 8px; padding-right: 8px; }
  .pw-tb td.pw-cod { padding-left: 8px !important; }
  .pw-cod .pw-ch { margin-right: 4px; }
}

/* Presupuesto del hero en tablet: sin las columnas de unidad e IVA */
@media (max-width: 960px) and (min-width: 741px) {
  .pw-tb th:nth-child(3), .pw-tb td:nth-child(3), .pw-tb th:nth-child(7), .pw-tb td:nth-child(7) { display: none; }
  .pw-tb { min-width: 0; }
  .pw-tb { font-size: 12.5px; }
  .pw-tb th, .pw-tb td { padding-left: 8px; padding-right: 8px; }
  .pw-tb th { letter-spacing: .02em; font-size: 10px; }
}

/* Formulario: paso 3 más compacto en móvil */
@media (max-width: 640px) {
  .mod-cards { gap: 8px; }
  .mod-card { padding: 10px 12px; gap: 10px; grid-template-columns: 34px 1fr; }
  .mod-card .mc-tx small { font-size: 12px; }
  .fgroup { margin-bottom: 14px; }
  .md-box textarea { min-height: 64px; }
}

/* Acerca de */
.ac-top { padding-top: 72px; padding-bottom: 8px; }
.ac-head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.ac-head .eyebrow::after { content: ""; width: 18px; height: 2px; background: currentColor; }
.ac-head h1, .ac-head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px; text-wrap: balance; }
.ac-head p { color: var(--muted); font-size: 18px; line-height: 1.55; margin: 0; }
.ac-why { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.ac-why-t h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
.ac-why-t p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.ac-cards { display: grid; gap: 14px; }
.ac-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: 0 18px 40px -28px rgba(21,43,71,.35); }
.ac-card h4 { font-size: 18px; margin: 0 0 6px; color: var(--navy); } .ac-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 960px) { .ac-why { grid-template-columns: 1fr; gap: 28px; } .ac-head { margin-bottom: 36px; } }

/* Campo trampa del formulario (invisible para las personas) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.priv a { color: var(--navy); text-decoration: underline; }

/* Política de privacidad */
.lg-top { padding-top: 64px; }
.lg { max-width: 760px; margin: 0 auto; }
.lg h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 10px; }
.lg .lg-fecha { color: var(--muted); font-size: 14.5px; margin: 0 0 32px; }
.lg h2 { font-size: 22px; margin: 34px 0 10px; letter-spacing: -.01em; }
.lg p, .lg li { color: #475467; font-size: 16.5px; line-height: 1.65; }
.lg ul { padding-left: 22px; margin: 8px 0 14px; display: grid; gap: 6px; }
.lg a { color: var(--blue); text-decoration: underline; }

/* Nosotros */
.nz-hero { position: relative; background: #152B47; color: #fff; padding: 110px 0 96px; overflow: hidden; }
.nz-bg { position: absolute; inset: 0; background: url(img/nosotros-grua.webp) center 55% / cover no-repeat; opacity: .42; }
.nz-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,43,71,.94) 0%, rgba(21,43,71,.6) 55%, rgba(21,43,71,.2) 100%); }
.nz-marca { position: absolute; right: -50px; top: 50%; width: 520px; transform: translateY(-50%) rotate(-6deg); opacity: .26; z-index: 1; pointer-events: none; }
.nz-in { position: relative; z-index: 2; } .nz-in h1 { color: #fff; font-size: clamp(36px, 5vw, 64px); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 20px; max-width: 760px; text-wrap: balance; } .nz-in p { color: #C9D6E6; font-size: 20px; line-height: 1.55; max-width: 640px; margin: 0; }
.nz-crees { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap, 20px); } .nz-cree { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; } .nz-cree > span { font-family: var(--mono); font-size: 13px; color: var(--red); letter-spacing: .06em; } .nz-cree h3 { font-size: 22px; line-height: 1.2; margin: 12px 0 8px; } .nz-cree p { color: var(--muted); font-size: 16.5px; line-height: 1.55; margin: 0; }
.nz-why { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } .nz-foto { position: relative; } .nz-foto > img { width: 100%; height: 440px; object-fit: cover; border-radius: 22px; display: block; box-shadow: 0 30px 60px -30px rgba(21,43,71,.5); }
.nz-sello { position: absolute; right: -22px; bottom: -22px; width: 108px; height: 108px; border-radius: 50%; background: #fff; box-shadow: 0 16px 40px -12px rgba(21,43,71,.45); display: grid; place-items: center; padding: 22px; } .nz-sello img { width: 100%; height: auto; }
.nz-mision { position: relative; background: var(--navy); color: #fff; padding: 96px 0; overflow: hidden; text-align: center; } .nz-mision .eyebrow { color: #6FA6F0; } .nz-mision-casco { position: absolute; left: 50%; top: 50%; width: 520px; transform: translate(-50%, -50%) rotate(-6deg); opacity: .10; pointer-events: none; }
.nz-frase { position: relative; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; max-width: 900px; margin: 12px auto 0; text-wrap: balance; }
.nz-vision { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; } .nz-foto2 img { width: 100%; height: 400px; object-fit: cover; border-radius: 22px; display: block; }
.nz-cta { position: relative; overflow: hidden; } .nz-cta > div { position: relative; z-index: 1; } .nz-cta-casco { position: absolute; right: -30px; bottom: -40px; width: 300px; opacity: .14; transform: rotate(-8deg); pointer-events: none; }
@media (max-width: 960px) { .nz-crees { grid-template-columns: 1fr; } .nz-why, .nz-vision { grid-template-columns: 1fr; gap: 32px; } .nz-marca { width: 320px; opacity: .16; } .nz-hero { padding: 80px 0 64px; } .nz-sello { right: 10px; } .nz-mision { padding: 72px 0; } .nz-mision-casco { width: 340px; } }

.nz-datos { background: #fff; }
.nz-grid-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap, 20px); }
.nz-dato { background: #F4F6FB; border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px; }
.nz-dato b { display: block; font-size: clamp(40px, 4.2vw, 56px); line-height: 1; letter-spacing: -.035em; color: var(--navy); }
.nz-dato .u { display: block; margin-top: 8px; font-weight: 600; color: var(--navy); font-size: 15.5px; line-height: 1.3; }
.nz-dato p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.nz-dato.destacado { background: var(--navy); border-color: var(--navy); } .nz-dato.destacado b { color: #fff; } .nz-dato.destacado .u { color: #BFD3EE; } .nz-dato.destacado p { color: #C9D6E6; }
.nz-dato-nota { text-align: center; max-width: 780px; margin: 32px auto 0; font-size: 18px; line-height: 1.55; color: var(--navy); }
.nz-fuente { text-align: center; max-width: 820px; margin: 14px auto 0; font-size: 13px; line-height: 1.5; color: #667085; } .nz-fuente a { color: #1E4FA8; text-decoration: underline; }
@media (max-width: 960px) { .nz-grid-datos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .nz-grid-datos { grid-template-columns: 1fr; } }

/* Espacio tras la portada y la misión de Nosotros (las reglas de secciones seguidas lo dejaban en cero) */
.nz-hero + section, .nz-mision + section { padding-top: 72px !important; }
@media (max-width: 960px) { .nz-hero + section, .nz-mision + section { padding-top: 52px !important; } }

/* Cómo empezar */
.start .st-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.st-foto { position: relative; } .st-foto > img { width: 100%; height: 520px; object-fit: cover; border-radius: 24px; display: block; box-shadow: 0 30px 60px -30px rgba(21,43,71,.5); }
.st-sello { position: absolute; right: -22px; top: 36px; width: 108px; height: 108px; border-radius: 50%; background: #fff; box-shadow: 0 16px 40px -12px rgba(21,43,71,.45); display: grid; place-items: center; padding: 22px; } .st-sello img { width: 100%; height: auto; }
.st-cuerpo h2 { margin: 0 0 32px; text-wrap: balance; }
.st-lista { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 26px; }
.st-lista::before { content: ""; position: absolute; left: 33px; top: 40px; bottom: 40px; width: 2px; background: repeating-linear-gradient(#B8C4D6 0 6px, transparent 6px 11px); }
.st-paso { display: grid; grid-template-columns: 68px 1fr; gap: 22px; align-items: center; position: relative; }
.st-ic { position: relative; width: 68px; height: 68px; border-radius: 20px; background: #fff; border: 1.5px solid #DCE5F2; color: var(--navy); display: grid; place-items: center; box-shadow: 0 10px 24px -14px rgba(21,43,71,.45); z-index: 1; }
.st-tx h3 { font-size: 21px; margin: 0 0 4px; letter-spacing: -.01em; } .st-tx p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.5; }
.st-cta { margin-top: 34px; }
@media (max-width: 960px) { .start .st-grid { grid-template-columns: 1fr; gap: 40px; } .st-foto > img { height: 340px; } .st-sello { right: 12px; top: 12px; width: 84px; height: 84px; padding: 17px; } }
.nz-why h2, .nz-vision h2 { margin: 10px 0 18px; } .nz-why .lead-p, .nz-vision .lead-p { margin: 0 0 14px; } .nz-why .lead-p:last-child, .nz-vision .lead-p:last-child { margin-bottom: 0; }