/* Miami Maps Audit — paleta y tipografia tomadas de krelo.marketing.
   Sin azules, sin gradientes, sin glassmorphism, sin esquinas de 4px. */

:root{
 --bg:#ECE5DB; --bg-alt:#DDD4C4; --paper:#F3EEE4; --dark:#1A0804;
 --accent:#C72A08; --accent-dk:#A82206; --muted:#7A5248;
 --line:rgba(26,8,4,.12);
 --display:'Barlow Condensed','Bebas Neue',Impact,sans-serif;
 --body:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
 --dots:radial-gradient(circle,rgba(26,8,4,.11) 1px,transparent 1px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--bg);background-image:var(--dots);
 background-size:28px 28px;color:var(--dark);line-height:1.55;
 -webkit-font-smoothing:antialiased}
.dsp{font-family:var(--display);font-weight:800;text-transform:uppercase;
 letter-spacing:-.02em;line-height:.9}

.wrap{width:100%;max-width:760px;margin:0 auto;padding:clamp(24px,5vw,56px) clamp(18px,5vw,32px)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:600;
 letter-spacing:.2em;text-transform:uppercase;color:var(--accent-dk)}
.kicker::before{content:'';width:24px;height:1px;background:var(--accent)}
h1.dsp{font-size:clamp(34px,8vw,64px);margin:10px 0 12px;
 text-shadow:3px 3px 0 var(--accent)}
.sub{color:var(--muted);max-width:52ch;font-size:clamp(14.5px,2vw,17px)}

.card{background:var(--paper);border:2px solid var(--dark);border-radius:12px;
 padding:clamp(20px,4vw,30px);margin-top:22px;
 box-shadow:6px 7px 0 rgba(26,8,4,.18)}
h2.dsp{font-size:clamp(22px,5vw,32px);margin-bottom:6px}
.help{color:var(--muted);font-size:14px;margin-bottom:16px}

label{display:block;font-family:var(--display);font-weight:800;font-size:15px;
 text-transform:uppercase;letter-spacing:.05em;margin:14px 0 6px}
/* nada de azules: los controles nativos tambien */
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
input,select{width:100%;font-family:var(--body);font-size:16px;   /* 16px evita el zoom de iOS */
 padding:13px 14px;border:2px solid var(--dark);border-radius:8px;
 background:#fff;color:var(--dark)}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{
 outline:3px solid var(--accent);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:48px;padding:14px 26px;border:none;border-radius:100px;cursor:pointer;
 font-family:var(--body);font-weight:600;font-size:15px;
 background:var(--accent);color:#fff;transition:filter .2s}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-l{background:transparent;color:var(--dark);border:2px solid var(--dark)}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

.err{background:rgba(199,42,8,.1);border-left:4px solid var(--accent);
 padding:12px 14px;border-radius:6px;font-size:14px;margin-top:14px}
.note{font-size:13px;color:var(--muted);margin-top:14px}

/* progreso real, no falso */
.bar{height:10px;background:var(--bg-alt);border:2px solid var(--dark);border-radius:100px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}

/* ── mapa de calor: SVG a mano, sin libreria de mapas ─────────────────────── */
.heat{width:100%;max-width:420px;margin:18px auto 0;display:block}
/* las teselas se aclaran para que los circulos de marca manden */
.heat image{filter:grayscale(.55) brightness(1.12) contrast(.9);opacity:.9}
.heat{border:2px solid var(--dark);border-radius:10px;overflow:hidden;background:var(--bg-alt)}
.heat text{font-family:var(--display);font-weight:800;font-size:13px;
 text-anchor:middle;dominant-baseline:central;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px;
 font-size:12px;color:var(--muted)}
.legend b{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.legend i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--dark)}

.kwtabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.kwtab{padding:8px 14px;border:2px solid var(--dark);border-radius:100px;
 background:transparent;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--body)}
.kwtab[aria-selected="true"]{background:var(--dark);color:var(--paper)}

.big{font-family:var(--display);font-weight:800;font-size:clamp(38px,10vw,64px);
 line-height:1;color:var(--accent)}
.stat{display:flex;gap:26px;flex-wrap:wrap;margin-top:16px}
.stat div b{display:block;font-family:var(--display);font-weight:800;
 font-size:clamp(26px,6vw,40px);line-height:1;color:var(--accent)}
.stat div span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

details{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-weight:600;font-size:14px}
details pre{margin-top:10px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;
 color:var(--muted);font-family:var(--body)}

.disclaimer{margin-top:18px;padding:14px;border:2px dashed var(--muted);border-radius:8px;
 font-size:13.5px;color:var(--muted)}   /* visible, no letra pequeña */

.next{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.next li{position:relative;padding-left:26px;font-size:15px}
.next li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;
 border-radius:50%;background:var(--accent)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px}
.consent input{width:22px;height:22px;flex:none;margin-top:1px}

.lang{position:absolute;top:18px;right:18px;display:flex;gap:2px;
 border:2px solid var(--dark);border-radius:100px;overflow:hidden}
.lang button{border:none;background:transparent;padding:7px 13px;cursor:pointer;
 font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.06em}
.lang button[aria-pressed="true"]{background:var(--dark);color:var(--paper)}

.steps{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:20px}
[hidden]{display:none!important}

@media(max-width:420px){
 .card{padding:18px 16px}
 .stat{gap:18px}
}