/* Dossier de datos — Vehicle Vision. Versión formal imprimible (A4). */
:root{
  --orange:#FF6900; --orange-600:#E15700; --orange-300:#FEA778;
  --ink:#8D2F00; --tint:#FFF0E8; --tint-2:#FFF8F4; --wash:#FEF9F8;
  --text:#0F172B; --muted:#62748E; --muted-2:#5C5C5C; --border:#E3E4E8;
  --green:#3FC168; --red:#E62C2C; --amber:#B45309; --slate:#90A1B9;
  --radius:12px; --maxw:980px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--text);
  background:#fff; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-size:16px;
}
code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em;
  background:var(--tint); color:var(--ink); padding:.1em .35em; border-radius:5px}
b{font-weight:700}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px}

/* ── head ─────────────────────────────────────────── */
.head{background:var(--wash); border-bottom:1px solid var(--border); padding:26px 0 44px}
.head-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:38px}
.logo{height:32px}
.head-meta{display:flex; align-items:center; gap:14px; font-size:12px; color:var(--muted)}
.conf{
  background:var(--ink); color:#fff; padding:5px 11px; border-radius:100px;
  font-weight:700; letter-spacing:.03em;
}
.eyebrow{font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-bottom:14px}
h1{font-size:clamp(30px,4.4vw,46px); line-height:1.12; font-weight:800; letter-spacing:-.03em; margin-bottom:20px}
.lead{font-size:16.5px; color:var(--muted-2); max-width:74ch}
.cut{display:block; margin-top:8px; font-size:12.5px; color:var(--muted)}
.head-rule{width:78px; height:4px; background:var(--orange); border-radius:4px; margin-top:26px}

/* ── secciones ────────────────────────────────────── */
section.wrap{padding:44px 32px 8px}
.sec-title{
  font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding-bottom:12px; border-bottom:2px solid var(--orange);
  margin-bottom:26px;
}

/* ── resumen ──────────────────────────────────────── */
.summary{list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:16px}
.summary li{
  counter-increment:s; position:relative; padding:18px 22px 18px 62px;
  background:var(--wash); border-radius:var(--radius); border:1px solid var(--border);
}
.summary li::before{
  content:counter(s); position:absolute; left:20px; top:18px;
  width:26px;height:26px;border-radius:8px;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:13.5px;
}

/* ── kpis ─────────────────────────────────────────── */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.kpi{position:relative; border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px 20px 26px; overflow:hidden}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--orange)}
.kpi.warn::before{background:var(--red)}
.kpi.good::before{background:var(--green)}
.kpi b{display:block; font-size:29px; font-weight:800; color:var(--orange); letter-spacing:-.02em; line-height:1.2}
.kpi.warn b{color:var(--red)}
.kpi.good b{color:#2E8B57}
.kpi span{display:block; font-size:13px; color:var(--muted-2); margin-top:4px}

/* ── charts ───────────────────────────────────────── */
.chart{margin:0 0 30px; border:1px solid var(--border); border-radius:var(--radius); padding:22px; background:#fff}
.chart img{width:100%; display:block; border-radius:6px}
.chart figcaption{margin-top:16px; font-size:14px; color:var(--muted-2); line-height:1.6}
.chart figcaption b{color:var(--text)}

/* ── hallazgos ────────────────────────────────────── */
.findings{display:grid; gap:16px}
.findings article{border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px}
.findings h3{font-size:18px; font-weight:700; margin:10px 0 8px; letter-spacing:-.01em}
.findings p{font-size:15px; color:var(--muted-2)}
.tag{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:6px;
}
.t-warn{background:#FFE9E9; color:#9B1C1C}
.t-red{background:#FFF0E9; color:#9A3412}
.t-good{background:#E8F8EE; color:#1E6B3A}

/* ── tabla de decisiones ───────────────────────────── */
.asks{width:100%; border-collapse:collapse; font-size:14.5px; margin-bottom:30px}
.asks th{
  background:var(--orange); color:#fff; text-align:left; padding:12px 16px;
  font-weight:700; font-size:12.5px; letter-spacing:.03em;
}
.asks td{padding:14px 16px; border-top:1px solid var(--border); vertical-align:top; color:var(--muted-2)}
.asks tbody tr:nth-child(even){background:var(--wash)}
.asks td:first-child{width:34px; font-weight:800; color:var(--orange)}
.asks td:nth-child(3),.asks td:nth-child(4){white-space:nowrap; font-weight:600; color:var(--text)}

/* ── riesgos ──────────────────────────────────────── */
.risks{list-style:none; display:flex; flex-direction:column; gap:13px; margin-bottom:30px}
.risks li{position:relative; padding-left:24px; font-size:15px; color:var(--muted-2)}
.risks li::before{content:""; position:absolute; left:0; top:.62em; width:8px;height:8px;border-radius:50%;background:var(--orange-300)}
.risks li b{color:var(--text)}

/* ── anexo ────────────────────────────────────────── */
.annex{background:var(--wash); border-radius:var(--radius); padding:30px 32px; margin-bottom:44px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-bottom:22px}
.grid3 h4{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-bottom:8px}
.grid3 p{font-size:13.5px; color:var(--muted-2)}

/* ── footer ───────────────────────────────────────── */
.foot{border-top:1px solid var(--border); padding:22px 0; margin-top:10px}
.foot-row{display:flex; align-items:center; gap:16px}
.logo-sm{height:22px}
.foot p{font-size:12.5px; color:var(--muted)}

@media (max-width:860px){
  .kpis{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .head-meta{flex-direction:column; align-items:flex-end; gap:6px}
}
@media print{
  body{font-size:11pt}
  .head{background:#fff; border-bottom:2px solid var(--orange); padding-bottom:20px}
  section.wrap{padding:18px 0 4px; break-inside:avoid}
  .chart, .findings article, .asks tr, .kpi{break-inside:avoid}
  .chart{box-shadow:none}
  a{color:inherit; text-decoration:none}
}

/* ── casos ─────────────────────────────────────────── */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:30px}
.cases article{border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; background:var(--wash)}
.case-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.case-head h3{font-size:20px; font-weight:800; letter-spacing:-.02em}
.case-badge{font-size:13px; font-weight:800; padding:5px 11px; border-radius:100px; background:#E8F8EE; color:#1E6B3A}
.cases p{font-size:14.5px; color:var(--muted-2)}

/* ── tabla comparativa ─────────────────────────────── */
.compare{width:100%; border-collapse:collapse; font-size:14.5px; margin-bottom:8px}
.compare th{background:var(--ink); color:#fff; text-align:left; padding:13px 16px; font-weight:700; font-size:13px}
.compare th:first-child{background:var(--text)}
.compare td{padding:13px 16px; border-top:1px solid var(--border); color:var(--muted-2); vertical-align:top}
.compare tbody tr:nth-child(even){background:var(--wash)}
.compare td:first-child{font-weight:600; color:var(--text); width:26%}
.compare td:nth-child(3){color:var(--text)}

@media (max-width:860px){ .cases{grid-template-columns:1fr} }
@media print{ .cases article{break-inside:avoid} }