:root{
  --cafe:#3b2314; --cafe2:#5c3a22; --tostado:#8b5a2b; --cobre:#c0834a;
  --tinta:#241a12; --gris:#6d6058; --linea:#e6dbcd; --crema:#faf5ee; --crema2:#f3e9db;
  --verde:#146b3e; --verde-bg:#e7f3ec; --rojo:#a8261c; --rojo-bg:#fbeceb;
  --ambar:#8a5e00; --ambar-bg:#fdf3dc;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--tinta);background:#fff;line-height:1.55;-webkit-text-size-adjust:100%}
.wrap{max-width:780px;margin:0 auto;padding:0 18px 70px}

header{background:var(--cafe);color:#fff;padding:24px 18px 30px}
header .in{max-width:780px;margin:0 auto}
.marca{font-size:11px;letter-spacing:3px;color:var(--cobre);font-weight:800;margin-bottom:12px;text-transform:uppercase}
header h1{font-size:27px;line-height:1.18;font-weight:800;margin-bottom:10px;color:#fff}
header .sub{color:#dcc7b0;font-size:16px}

nav{background:var(--cafe2);position:sticky;top:0;z-index:50;overflow-x:auto;-webkit-overflow-scrolling:touch}
nav .in{max-width:780px;margin:0 auto;display:flex;white-space:nowrap;padding:0 8px}
nav a{color:#e5d3bf;text-decoration:none;font-size:13.5px;font-weight:700;padding:12px 12px;display:block;border-bottom:3px solid transparent}
nav a.on{color:#fff;border-bottom-color:var(--cobre)}

h2{font-size:20px;color:var(--cafe);margin:34px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--linea);font-weight:800}
h3{font-size:16px;color:var(--cafe2);margin:24px 0 8px;font-weight:800}
p{margin-bottom:12px;color:var(--gris);font-size:15.5px}
p.tinta,li.tinta{color:var(--tinta)}
ol,ul{margin:0 0 14px 20px}
li{margin-bottom:8px;font-size:15.5px;color:var(--gris)}
li strong,p strong{color:var(--tinta)}
a{color:var(--tostado)}
.lead{font-size:17px;color:var(--tinta);margin-bottom:16px}

.caja{background:var(--crema);border:1px solid var(--linea);border-radius:10px;padding:16px 18px;margin:16px 0}
.caja h4{font-size:15px;color:var(--cafe);margin-bottom:8px;font-weight:800}
.caja p:last-child,.caja ul:last-child,.caja li:last-child{margin-bottom:0}
.caja.verde{background:var(--verde-bg);border-color:#a8d4bb}
.caja.verde h4{color:var(--verde)}
.caja.roja{background:var(--rojo-bg);border-color:#e8b6b2}
.caja.roja h4{color:var(--rojo)}
.caja.ambar{background:var(--ambar-bg);border-color:#e2c987}
.caja.ambar h4{color:var(--ambar)}

.tabla{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px;display:block;overflow-x:auto}
.tabla thead th{background:var(--cafe);color:#fff;text-align:left;padding:10px 12px;font-weight:700;font-size:13px;white-space:nowrap}
.tabla td{padding:10px 12px;border-bottom:1px solid var(--linea);color:var(--gris);vertical-align:top}
.tabla tbody tr:nth-child(even){background:var(--crema)}
.tabla td:first-child{font-weight:600;color:var(--tinta);min-width:150px}
.tabla .num{text-align:right;font-weight:700;color:var(--cafe);font-variant-numeric:tabular-nums;white-space:nowrap}
.tabla .ctr{text-align:center;font-weight:700}
.tabla tr.total td{background:var(--verde-bg)!important;color:var(--verde);font-weight:800;font-size:16px;
  border-top:2px solid var(--verde);border-bottom:2px solid var(--verde)}
.mal{color:var(--rojo);font-weight:800}
.bien{color:var(--verde);font-weight:800}

.cifra{background:var(--cafe);color:#fff;border-radius:12px;padding:20px 18px;margin:18px 0;text-align:center}
.cifra .n{font-size:40px;font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.cifra .n small{font-size:19px;font-weight:700}
.cifra .t{color:#dcc7b0;font-size:14px;margin-top:8px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{border:1px solid var(--linea);border-radius:10px;padding:14px 16px;background:#fff}
.card .k{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--tostado);font-weight:800;margin-bottom:6px}
.card .v{font-size:24px;font-weight:800;color:var(--cafe);font-variant-numeric:tabular-nums;line-height:1.1}
.card .d{font-size:13px;color:var(--gris);margin-top:6px}
.card.rojo{background:var(--rojo-bg);border-color:#e8b6b2}
.card.rojo .v{color:var(--rojo)} .card.rojo .k{color:var(--rojo)}
.card.verde{background:var(--verde-bg);border-color:#a8d4bb}
.card.verde .v{color:var(--verde)} .card.verde .k{color:var(--verde)}

.plan{border:2px solid var(--linea);border-radius:12px;padding:18px;margin:16px 0;background:#fff}
.plan.destacado{border-color:var(--cobre);box-shadow:0 3px 14px rgba(140,90,43,.14)}
.plan .fase{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--tostado);font-weight:800}
.plan h3{margin:6px 0 4px;font-size:19px;color:var(--cafe)}
.plan .precio{font-size:30px;font-weight:800;color:var(--cafe);margin:8px 0 2px;font-variant-numeric:tabular-nums}
.plan .precio small{font-size:14px;color:var(--gris);font-weight:600}
.plan .meta{font-size:13.5px;color:var(--tostado);font-weight:700;margin-bottom:10px}

.paso{display:flex;gap:12px;margin-bottom:14px;align-items:flex-start}
.paso .n{flex:0 0 28px;height:28px;border-radius:50%;background:var(--cafe);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.paso .tx{flex:1}
.paso .tx b{display:block;color:var(--tinta);font-size:15.5px;margin-bottom:2px}
.paso .tx span{font-size:14.5px;color:var(--gris)}

.capas{margin:16px 0;border:1px solid var(--linea);border-radius:10px;overflow:hidden}
.capa{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--linea);font-size:14.5px}
.capa:last-child{border-bottom:0}
.capa .sw{flex:0 0 34px;height:34px;border-radius:6px;border:1px solid rgba(0,0,0,.12)}
.capa b{color:var(--tinta);display:block;font-size:14.5px}
.capa span{color:var(--gris);font-size:13px}

.btn{display:block;background:var(--verde);color:#fff!important;text-decoration:none;text-align:center;
  padding:15px 18px;border-radius:10px;font-weight:800;font-size:16.5px;margin:12px 0}
.btn.sec{background:var(--cafe2)}
.btn.out{background:#fff;color:var(--cafe)!important;border:2px solid var(--cafe)}

.calc{background:var(--crema);border:1px solid var(--linea);border-radius:12px;padding:18px;margin:18px 0}
.calc label{display:block;font-size:13px;font-weight:800;color:var(--cafe);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.5px}
.calc label:first-child{margin-top:0}
.calc input[type=range]{width:100%;accent-color:var(--tostado);height:28px}
.calc select,.calc input[type=number]{width:100%;padding:11px;border:1px solid var(--linea);border-radius:8px;
  font-size:16px;background:#fff;color:var(--tinta);font-family:inherit}
.calc .val{font-size:19px;font-weight:800;color:var(--tostado);font-variant-numeric:tabular-nums}

.nota{font-size:13px;color:var(--gris);border-left:3px solid var(--linea);padding-left:12px;margin:14px 0}
footer{border-top:1px solid var(--linea);margin-top:40px;padding-top:20px;font-size:13px;color:var(--gris)}
.pill{display:inline-block;background:var(--crema2);color:var(--cafe2);border-radius:20px;
  padding:4px 11px;font-size:12px;font-weight:700;margin:0 6px 6px 0}
.pill.v{background:var(--verde-bg);color:var(--verde)}
.pill.r{background:var(--rojo-bg);color:var(--rojo)}

/* ---- Carta Gantt ---- */
.gantt{width:100%;overflow-x:auto;margin:16px 0;-webkit-overflow-scrolling:touch}
.gantt table{border-collapse:collapse;min-width:640px;font-size:12.5px;width:100%}
.gantt th{background:var(--cafe);color:#fff;font-weight:700;padding:6px 4px;text-align:center;
  font-size:11px;white-space:nowrap;border-right:1px solid rgba(255,255,255,.15)}
.gantt th.f{text-align:left;padding-left:10px;min-width:190px;position:sticky;left:0;z-index:2;background:var(--cafe)}
.gantt td{padding:0;border-bottom:1px solid var(--linea);height:34px}
.gantt td.f{padding:6px 10px;font-size:13px;color:var(--tinta);font-weight:600;min-width:190px;
  position:sticky;left:0;background:#fff;z-index:1;border-right:1px solid var(--linea)}
.gantt tr:nth-child(even) td.f{background:var(--crema)}
.gantt tr:nth-child(even){background:var(--crema)}
.gantt td.w{width:26px;border-right:1px solid #f0e9e0}
.gantt td.on{background:var(--tostado)}
.gantt td.on.b{background:var(--cobre)}
.gantt td.hito{background:var(--verde);position:relative}
.gantt td.hito::after{content:"◆";color:#fff;font-size:11px;display:block;text-align:center;line-height:34px}
.gantt .lg{font-size:12.5px;color:var(--gris);margin-top:8px}
.gantt .lg i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin:0 4px 0 12px}
.gantt .lg i:first-child{margin-left:0}

/* ---- Tablas en pantalla angosta: primera columna fija + indicador de scroll ---- */
.tabla{position:relative}
.tabla thead th{white-space:normal}
.tabla thead th:first-child,
.tabla td:first-child{position:sticky;left:0;z-index:3}
.tabla thead th:first-child{background:var(--cafe)}
.tabla td:first-child{background:#fff;box-shadow:1px 0 0 var(--linea)}
.tabla tbody tr:nth-child(even) td:first-child{background:var(--crema)}
.tabla tr.total td:first-child{background:#e7f3ec}

.tw{position:relative;margin:14px 0}
.tw .hint{display:none;font-size:12px;font-weight:700;color:var(--tostado);
  background:var(--crema2);border-radius:6px;padding:5px 10px;margin-bottom:6px}
.tw.desborda .hint{display:inline-block}
.tw.desborda::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;
  pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92))}
.tw.fin::after{display:none}

@media(max-width:620px){
  .tabla{font-size:13px}
  .tabla thead th{padding:8px 9px;font-size:11.5px;line-height:1.25}
  .tabla td{padding:8px 9px;font-size:13px}
  .tabla td:first-child{min-width:112px;max-width:150px}
  .tabla .num{font-size:12.5px}
}

/* ---- Gantt: mismo tratamiento que las tablas ---- */
.gantt td.f, .gantt th.f{box-shadow:1px 0 0 var(--linea)}
.tw.gw{overflow:visible}
.tw.gw .hint{display:none}
.tw.gw.desborda .hint{display:inline-block}
@media(max-width:620px){
  .gantt table{min-width:520px;font-size:11px}
  .gantt th.f, .gantt td.f{min-width:150px;max-width:150px;font-size:11.5px}
  .gantt td.w{width:15px}
  .gantt th{font-size:10px;padding:5px 2px}
  .gantt td{height:40px}
  .gantt td.hito::after{line-height:40px;font-size:10px}
}

/* ---- FIX: encabezados con clase .num heredaban color cafe sobre fondo cafe ---- */
.tabla thead th,
.tabla thead th.num,
.tabla thead th.ctr,
.tabla thead th.bien,
.tabla thead th.mal{color:#fff !important}
.gantt thead th{color:#fff !important}