:root{
  --rojo:#C71C48;
  --rojo-osc:#9d1538;
  --salvia:#84BDAC;
  --crema:#FBE7BF;
  --tinta:#1c1b1a;
  --gris:#5d5a57;
  --linea:#e3ddd5;
  --papel:#fffefb;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel);
  color:var(--tinta);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  min-height:100svh;
  display:flex;flex-direction:column;
}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:20px 18px 56px}
a{color:var(--rojo);text-decoration:none}
h1{font-size:1.5rem;line-height:1.2;margin:.2em 0 .5em;letter-spacing:-.01em}
h2{font-size:1.12rem;margin:1.6em 0 .6em;letter-spacing:-.01em}
h3{font-size:1rem;margin:1.2em 0 .4em}
p{margin:.6em 0}
small,.small{font-size:.86rem;color:var(--gris)}

.top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 18px;border-bottom:2px solid var(--tinta);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--tinta);letter-spacing:-.01em}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--rojo)}
.ev{font-size:.78rem;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.foot{padding:18px;border-top:1px solid var(--linea);font-size:.76rem;color:var(--gris);text-align:center}

.card{border:1px solid var(--linea);border-radius:var(--r);padding:16px;background:#fff;margin:14px 0}
.card.soft{background:var(--crema);border-color:#f0dcae}
.card.salvia{background:#eef6f3;border-color:#cfe4dd}

.hero{padding:22px 0 6px}
.hero .kicker{display:inline-block;background:var(--rojo);color:#fff;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;border-radius:99px}
.hero h1{font-size:1.85rem;margin-top:14px}
.lead{color:var(--gris);font-size:1.02rem}

.btn{display:inline-block;background:var(--rojo);color:#fff;border:0;border-radius:10px;
  padding:14px 20px;font-size:1rem;font-weight:600;cursor:pointer;text-align:center}
.btn:hover{background:var(--rojo-osc);color:#fff}
.btn.block{display:block;width:100%}
.btn.ghost{background:#fff;color:var(--tinta);border:1.5px solid var(--tinta)}
.btn.ghost:hover{background:var(--crema);color:var(--tinta)}
.btn.sm{padding:9px 14px;font-size:.88rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

label.f{display:block;margin:16px 0 0;font-weight:600;font-size:.94rem}
.hint{font-size:.82rem;color:var(--gris);margin:2px 0 6px;font-weight:400}
select,textarea,input[type=text],input[type=password]{
  width:100%;margin-top:5px;padding:12px;font:inherit;color:inherit;background:#fff;
  border:1.5px solid var(--linea);border-radius:10px}
select:focus,textarea:focus,input:focus{outline:2px solid var(--salvia);outline-offset:1px;border-color:var(--salvia)}
textarea{min-height:96px;resize:vertical}

.opt{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1.5px solid var(--linea);
  border-radius:10px;margin:7px 0;background:#fff;cursor:pointer}
.opt:hover{border-color:var(--salvia)}
.opt input{margin:3px 0 0;accent-color:var(--rojo);width:18px;height:18px;flex:0 0 auto}
.opt span{font-size:.95rem;line-height:1.35}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.scale label{border:1.5px solid var(--linea);border-radius:10px;padding:10px 4px;text-align:center;
  font-size:.76rem;cursor:pointer;background:#fff;min-height:64px;display:flex;flex-direction:column;
  justify-content:center;gap:4px}
.scale input{accent-color:var(--rojo);margin:0 auto}
.scale label:has(input:checked){border-color:var(--rojo);background:#fdf2f5;font-weight:600}

.q{border-top:1px solid var(--linea);padding-top:18px;margin-top:18px}
.q .num{display:inline-block;width:24px;height:24px;border-radius:50%;background:var(--tinta);
  color:#fff;font-size:.78rem;text-align:center;line-height:24px;margin-right:8px;font-weight:700}

.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.kpi div{border:1px solid var(--linea);border-radius:var(--r);padding:14px;background:#fff}
.kpi .n{font-size:2rem;font-weight:700;line-height:1;letter-spacing:-.02em}
.kpi .l{font-size:.78rem;color:var(--gris);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}

table{width:100%;border-collapse:collapse;font-size:.9rem;margin:10px 0}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--linea)}
th{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}
td.num,th.num{text-align:right}

.bar{height:8px;background:#eee7dd;border-radius:99px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--salvia)}
.bar.rojo i{background:var(--rojo)}

.tag{display:inline-block;background:#f4efe7;border-radius:99px;padding:4px 10px;font-size:.8rem;margin:3px 4px 0 0}
.quote{border-left:3px solid var(--salvia);padding:2px 0 2px 12px;margin:10px 0;font-size:.94rem}
.warn{background:#fdf2f5;border:1.5px solid var(--rojo);border-radius:var(--r);padding:14px;margin:14px 0;font-size:.92rem}
.ok{background:#eef6f3;border:1.5px solid var(--salvia);border-radius:var(--r);padding:14px;margin:14px 0}

.steps{display:flex;gap:8px;margin:6px 0 20px}
.steps i{height:4px;flex:1;background:var(--linea);border-radius:99px}
.steps i.on{background:var(--rojo)}

.center{text-align:center}

/* sala / proyección */
body.sala{background:#0e0d0c;color:#fff}
body.sala .top{border-color:#3a3632;color:#fff}
body.sala .brand,body.sala .brand span{color:#fff}
body.sala main{max-width:1200px;padding:24px 28px}
body.sala .foot{border-color:#3a3632;color:#8b847c}
body.sala .kpi div{background:#171513;border-color:#332f2b;color:#fff}
body.sala .kpi .n{color:var(--crema);font-size:2.6rem}
body.sala .kpi .l{color:#b3aaa1}
body.sala h1{font-size:2.4rem}
body.sala .slide{display:none}
body.sala .slide.on{display:block}
body.sala .dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
body.sala .dots b{width:9px;height:9px;border-radius:50%;background:#4a443e}
body.sala .dots b.on{background:var(--rojo)}
.sala-titulo{font-size:3rem;line-height:1.05;letter-spacing:-.02em;margin:.1em 0 .3em}
@media(max-width:700px){.sala-titulo{font-size:2rem}}