:root {
  --ink: #071a2f;
  --muted: #647489;
  --line: #dce5ec;
  --soft: #f2f6f8;
  --white: #ffffff;
  --teal: #00a5a8;
  --teal-dark: #087b80;
  --blue: #0a5bd8;
  --orange: #ff8a34;
  --red: #d9485f;
  --green: #15936f;
  --shadow: 0 18px 55px rgba(7, 26, 47, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #eef3f5; font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: 74px; padding: 0 max(5vw, 24px); display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.93); border-bottom: 1px solid rgba(7,26,47,.08); position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(14px);
}
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; color: var(--ink); font: 800 21px "Manrope"; letter-spacing: -.6px; }
.brand > span:last-child span { color: var(--teal); }
.brand-mark { width: 27px; height: 27px; display: flex; align-items: flex-end; gap: 3px; padding: 5px; border-radius: 8px; background: var(--ink); }
.brand-mark span { width: 4px; display: block; border-radius: 2px 2px 0 0; background: #fff; }
.brand-mark span:nth-child(1) { height: 6px; }.brand-mark span:nth-child(2) { height: 11px; background: #5ee1d4; }.brand-mark span:nth-child(3) { height: 15px; }
.privacy-chip { display: flex; gap: 9px; align-items: center; color: #4f6174; font-size: 12px; font-weight: 600; }
.lock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(21,147,111,.12); }

main { max-width: 1500px; margin: auto; }
.hero { min-height: 330px; padding: 70px max(5vw, 24px) 62px; color: white; display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; position: relative; overflow: hidden; background: radial-gradient(circle at 82% 10%, rgba(0,165,168,.36), transparent 28%), linear-gradient(125deg, #071a2f 0%, #0b2948 60%, #083e55 100%); }
.hero::after { content:""; position:absolute; width:390px; height:390px; border:1px solid rgba(255,255,255,.07); border-radius:50%; right:-80px; bottom:-230px; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.eyebrow, .kicker { margin:0 0 14px; color: var(--teal); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; }
.hero .eyebrow { color: #62ded8; }
.hero h1 { margin: 0; max-width: 760px; font: 800 clamp(38px, 4.2vw, 64px)/1.04 "Manrope"; letter-spacing: -2.6px; }
.hero h1 em { color: #67ded7; font-style: normal; }
.hero-copy { max-width: 650px; margin: 22px 0 0; color: #c3d2df; font-size: 16px; line-height: 1.65; }
.hero-proof { min-width: 230px; margin-bottom: 5px; position: relative; z-index: 1; }
.hero-proof div { display: grid; grid-template-columns: 34px 1fr; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.hero-proof strong { color: #66ded7; font-size: 11px; letter-spacing: 1px; }.hero-proof span { font-size: 13px; color: #dce7ef; }

.workspace { display: grid; grid-template-columns: minmax(520px, .92fr) minmax(480px, 1.08fr); gap: 22px; padding: 30px max(3vw, 24px) 50px; align-items: start; }
.panel { background: var(--white); border: 1px solid rgba(7,26,47,.07); border-radius: 15px; box-shadow: var(--shadow); overflow: hidden; }
.input-panel { padding: 30px; }
.results-panel { padding: 30px; min-height: 700px; position: sticky; top: 95px; }
.panel-heading, .panel-heading > div, .result-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-heading > div { justify-content: flex-start; }
.panel-heading .kicker, .result-header .kicker { margin-bottom: 4px; }
.panel h2 { margin: 0; font: 700 21px "Manrope"; letter-spacing: -.6px; }
.step { width: 42px; height: 42px; display: grid; place-items: center; background: var(--ink); color: #fff; border-radius: 10px; font: 700 12px "Manrope"; }
.ghost-button, .secondary-button { border: 1px solid var(--line); background: white; color: #385066; border-radius: 8px; padding: 9px 13px; font-size: 12px; font-weight: 700; }
.ghost-button:hover, .secondary-button:hover { border-color: var(--teal); color: var(--teal-dark); }
.example-note { margin-top: 18px; padding: 11px 13px; color: #72501c; background: #fff8e9; border: 1px solid #f3dbab; border-radius: 8px; font-size: 12px; line-height: 1.45; }
.example-note span { font-weight: 800; }

.form-block { margin-top: 27px; padding-top: 24px; border-top: 1px solid var(--line); }
.block-label-row { display:flex; justify-content:space-between; align-items:center; }
.block-label { display: flex; gap: 8px; align-items: center; color: #3a5065; font-size: 12px; font-weight: 800; letter-spacing: .45px; text-transform: uppercase; }
.block-label > span { width: 23px; height: 23px; display:grid; place-items:center; border-radius:6px; color: var(--teal-dark); background:#e2f7f5; }
.block-label small { color:#8a99a8; font-size:9px; letter-spacing:.5px; }
.field-grid { display:grid; gap:16px; margin-top:16px; }
.field-grid-2 { grid-template-columns: repeat(2, 1fr); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field > span { color:#495d70; font-size:11px; font-weight:700; }
.field > span small { margin-left:4px; color:#98a5b2; font-size:9px; text-transform:uppercase; }
.field input { width:100%; min-height:43px; padding: 10px 12px; color:var(--ink); background:#fbfcfd; border:1px solid #d6e0e8; border-radius:8px; outline:none; transition:.18s ease; }
.field input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,165,168,.1); background:white; }
.field input.invalid { border-color:var(--red); box-shadow:0 0 0 3px rgba(217,72,95,.08); }
.error { min-height: 0; color: var(--red); font-size: 10px; line-height:1.25; }
.error:not(:empty) { min-height: 13px; }
.percentage-field > div { position:relative; }.percentage-field input { padding-right:38px; font-weight:700; }.percentage-field b { position:absolute; right:13px; top:11px; color:#8291a0; }
.helper { margin:10px 0 0 31px; color:#8a99a8; font-size:11px; }
.text-button { border:0; background:transparent; color:var(--teal-dark); font-size:11px; font-weight:800; }
.text-button:hover { color:var(--ink); }
.milestone-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.milestone-row { display:grid; grid-template-columns: 1.25fr 1fr 1fr 30px; gap:8px; align-items:start; padding:11px; background:var(--soft); border-radius:9px; }
.milestone-row label { display:flex; flex-direction:column; gap:4px; }
.milestone-row label span { color:#718192; font-size:9px; font-weight:800; text-transform:uppercase; }
.milestone-row input { width:100%; min-width:0; height:36px; padding:7px 8px; border:1px solid transparent; border-radius:6px; background:white; color:var(--ink); font-size:11px; outline:none; }
.milestone-row input:focus { border-color:var(--teal); }.milestone-row input.invalid { border-color:var(--red); }
.milestone-row .error { max-width:130px; }
.remove-milestone { width:30px; height:36px; margin-top:13px; border:0; background:transparent; color:#91a0ae; font-size:18px; border-radius:6px; }
.remove-milestone:hover { color:var(--red); background:#fff; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:27px; padding-top:21px; border-top:1px solid var(--line); }
.secondary-button { padding:12px 18px; }
.primary-button { display:flex; gap:28px; align-items:center; padding:12px 13px 12px 20px; color:white; background:var(--ink); border:0; border-radius:8px; font-size:12px; font-weight:800; box-shadow:0 10px 24px rgba(7,26,47,.18); }
.primary-button b { width:25px; height:25px; display:grid; place-items:center; color:var(--ink); background:#67ded7; border-radius:6px; font-size:15px; }
.primary-button:hover { background:#0c2a49; transform:translateY(-1px); }

.empty-state { min-height:638px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; }
.radar-visual { width:148px; height:148px; position:relative; display:grid; place-items:center; margin-bottom:27px; border-radius:50%; background:radial-gradient(circle, #eefaf9 0 25%, transparent 26% 100%); }
.radar-visual::before, .radar-visual::after, .radar-visual span { content:""; position:absolute; border:1px solid #d7eeee; border-radius:50%; }
.radar-visual::before { inset:16px; }.radar-visual::after { inset:34px; }.radar-visual span:nth-child(1) { width:1px; height:132px; border:0; border-left:1px solid #d7eeee; border-radius:0; }.radar-visual span:nth-child(2) { width:132px; height:1px; border:0; border-top:1px solid #d7eeee; border-radius:0; }.radar-visual span:nth-child(3) { inset:54px; background:var(--ink); border:0; box-shadow:0 7px 18px rgba(7,26,47,.2); }
.radar-visual i { position:relative; z-index:1; color:#67ded7; font-style:normal; font-weight:800; font-size:18px; }
.empty-state .kicker { margin-bottom:8px; }.empty-state h2 { font-size:25px; }.empty-state > p:not(.kicker) { max-width:390px; margin:12px 0 24px; color:var(--muted); font-size:13px; line-height:1.55; }
.empty-features { display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }.empty-features span { padding:7px 10px; color:#6a7c8e; background:#f3f7f9; border-radius:20px; font-size:10px; font-weight:700; }

.result-header { padding-bottom:20px; border-bottom:1px solid var(--line); }.result-header h2 { max-width:330px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.health-badge { padding:7px 10px; border-radius:20px; font-size:9px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }
.health-badge.favorable { color:#0b7759; background:#ddf5ec; }.health-badge.attention { color:#9b5a14; background:#fff0d8; }.health-badge.critical { color:#a92f43; background:#fde4e8; }
.status-banner { display:flex; gap:14px; align-items:center; margin-top:18px; padding:16px; border-radius:10px; }
.status-banner.favorable { background:#eaf8f3; }.status-banner.attention { background:#fff6e7; }.status-banner.critical { background:#fff0f2; }
.status-icon { width:41px; height:41px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:white; font-size:19px; font-weight:900; }
.status-banner.favorable .status-icon { background:var(--green); }.status-banner.attention .status-icon { background:var(--orange); }.status-banner.critical .status-icon { background:var(--red); }
.status-banner small { color:#778696; font-size:8px; font-weight:800; letter-spacing:1px; }.status-banner strong { display:block; margin:2px 0 1px; font:700 18px "Manrope"; }.status-banner p { margin:0; color:#66788b; font-size:11px; }
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:15px; }
.metric-grid article { min-width:0; padding:14px; border:1px solid var(--line); border-radius:9px; }
.metric-grid span { color:#66788a; font-size:9px; font-weight:700; }.metric-grid strong { display:block; margin:5px 0 1px; font:800 23px "Manrope"; letter-spacing:-.8px; }.metric-grid small { color:#93a0ad; font-size:8px; }
.metric-grid strong.negative { color:var(--red); }.metric-grid strong.positive { color:var(--green); }
.result-section { margin-top:21px; }.result-section h3, .executive-box h3 { margin:0 0 10px; font:700 12px "Manrope"; }
.alert-list { display:flex; flex-direction:column; gap:7px; }.alert { display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:start; padding:9px 10px; border:1px solid var(--line); border-radius:8px; color:#4d6175; font-size:10px; line-height:1.4; }.alert i { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; font-style:normal; font-size:9px; font-weight:900; }.alert.danger i { color:#ad3045; background:#fde7ea; }.alert.warning i { color:#9c621e; background:#fff0d9; }.alert.success i { color:#08765a; background:#dff5ed; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; } table { width:100%; border-collapse:collapse; font-size:9px; } th { padding:8px; color:#768697; background:#f4f7f9; text-align:left; white-space:nowrap; } td { padding:8px; color:#41566a; border-top:1px solid var(--line); white-space:nowrap; }.variance-pill { display:inline-block; padding:3px 6px; border-radius:10px; font-weight:800; }.variance-pill.late { color:#a63145; background:#fde7ea; }.variance-pill.ontrack { color:#08765a; background:#dff5ed; }
.executive-box { margin-top:21px; padding:16px; border-radius:10px; background:var(--ink); color:white; }.executive-box > div { display:flex; gap:8px; align-items:center; }.executive-box > div span { color:#60ddd5; font-size:11px; }.executive-box h3 { margin:0; }.executive-box p { margin:9px 0 0; color:#c8d6e1; font-size:11px; line-height:1.55; }
.method-note { margin-top:13px; color:#8795a3; font-size:8.5px; line-height:1.5; }

footer { max-width:1500px; margin:auto; padding:18px max(5vw, 24px) 35px; display:flex; justify-content:space-between; gap:20px; color:#82909d; font-size:9px; letter-spacing:.5px; }
.toast { position:fixed; left:50%; bottom:24px; z-index:20; transform:translate(-50%, 20px); padding:10px 16px; color:white; background:var(--ink); border-radius:8px; box-shadow:0 12px 30px rgba(7,26,47,.24); font-size:11px; opacity:0; pointer-events:none; transition:.2s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 1060px) {
  .workspace { grid-template-columns:1fr; }.results-panel { position:static; min-height:auto; }.empty-state { min-height:430px; }
}
@media (max-width: 680px) {
  .topbar { height:64px; }.privacy-chip { font-size:0; }.privacy-chip::after { content:"Privado"; font-size:11px; }
  .hero { min-height:auto; padding-top:50px; flex-direction:column; align-items:stretch; }.hero h1 { font-size:39px; letter-spacing:-1.7px; }.hero-proof { display:grid; grid-template-columns:repeat(3,1fr); }.hero-proof div { grid-template-columns:1fr; gap:3px; padding-right:7px; }.hero-proof span { font-size:10px; }
  .workspace { padding:16px 12px 35px; }.input-panel, .results-panel { padding:20px 16px; border-radius:12px; }.panel-heading { align-items:flex-start; }.panel-heading > div { align-items:flex-start; }.ghost-button { white-space:nowrap; }
  .field-grid-2 { grid-template-columns:1fr; }.field-wide { grid-column:auto; }.milestone-row { grid-template-columns:1fr 1fr 30px; }.milestone-row label:first-child { grid-column:1 / -1; }.milestone-row .remove-milestone { grid-column:3; grid-row:2; }.metric-grid { grid-template-columns:1fr; }.metric-grid article { display:grid; grid-template-columns:1fr auto; align-items:center; }.metric-grid article small { grid-column:1; }.metric-grid article strong { grid-row:1 / 3; grid-column:2; }.form-actions { justify-content:stretch; }.form-actions button { flex:1; }.primary-button { justify-content:space-between; }
  footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }