/* Paleta compartida con alexriquelme.cl */
:root{
  --mk-fondo:#FBF3E7;
  --mk-texto:#16130F;
  --mk-primario:#D2541B;
  --mk-secundario:#2E4A3C;
  --linea:rgba(22,19,15,.14);
  --mk-linea:rgba(22,19,15,.16);
  --card:#FFFDF8;
  --muted:color-mix(in srgb,var(--mk-texto) 55%,transparent);
  --muted-2:color-mix(in srgb,var(--mk-texto) 40%,transparent);
  --nav:4.5rem;
  --crit:#B3401C;
  --warn:var(--mk-primario);
  --ok:var(--mk-secundario);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--mk-fondo); color:var(--mk-texto); min-height:100vh;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{color:inherit}

/* ── barra ── */
.barra{
  position:sticky; top:0; z-index:50; height:var(--nav);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1rem,3vw,2.5rem);
  background:color-mix(in srgb,var(--mk-fondo) 88%,transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);
}
.barra-nombre{display:flex; align-items:center; gap:.65rem; font-weight:900; letter-spacing:-.02em; font-size:.98rem; text-decoration:none}
.barra-icono{width:2.15rem; height:2.15rem; border-radius:.6rem; background:linear-gradient(135deg,var(--mk-primario),color-mix(in srgb,var(--mk-primario) 60%,#F0C36B)); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.barra-nombre span.acento{color:var(--mk-primario); font-weight:300}
.barra-nota{font-size:.7rem; color:var(--muted); font-weight:500}

/* ── Hero ── */
.etiqueta-pill{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--mk-primario);
  background:color-mix(in srgb,var(--mk-primario) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--mk-primario) 30%,transparent);
  border-radius:9999px; padding:.35rem 1.1rem; margin-bottom:1rem;
}
.etiqueta-pill .dot{width:5px; height:5px; border-radius:50%; background:var(--mk-primario); display:inline-block}
h1{
  font-weight:900; letter-spacing:-.03em; line-height:1.1;
  font-size:clamp(1.9rem,5vw,3rem); margin:0 0 .8rem;
}
h1 .acento{
  background:linear-gradient(90deg,var(--mk-primario),color-mix(in srgb,var(--mk-primario) 55%,#F0C36B));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.bajada-hero{color:var(--muted); font-size:.95rem; max-width:500px; margin:0 auto; line-height:1.6}
.bajada-hero strong{color:var(--mk-texto)}

/* ── Form ── */
.sel{width:100%; background:var(--card); border:1px solid var(--linea); border-radius:.75rem; padding:.65rem .95rem; color:var(--mk-texto); font-size:.85rem; outline:none; appearance:none; cursor:pointer; transition:border-color .2s,box-shadow .2s}
.sel:focus{border-color:var(--mk-primario); box-shadow:0 0 0 3px color-mix(in srgb,var(--mk-primario) 18%,transparent)}
.sw{position:relative}.sw::after{content:'▾'; position:absolute; right:.9rem; top:50%; transform:translateY(-50%); color:var(--muted-2); pointer-events:none; font-size:.8rem}

/* ── Autocomplete ── */
.ac-wrap{position:relative}
.ac-dd{
  display:none; position:absolute; left:0; right:0; top:calc(100% + .35rem); z-index:60;
  background:var(--card); border:1px solid var(--linea); border-radius:.75rem;
  box-shadow:0 10px 28px rgba(22,19,15,.14); max-height:280px; overflow-y:auto; padding:.35rem;
}
.ac-wrap.open .ac-dd{display:block}
.ac-item{display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.55rem .7rem; border-radius:.55rem; cursor:pointer; font-size:.82rem}
.ac-item:hover, .ac-item.active{background:color-mix(in srgb,var(--mk-primario) 10%,transparent)}
.ac-item mark{background:none; color:var(--mk-primario); font-weight:800}
.ac-item .ac-score{font-size:.66rem; color:var(--muted-2); font-weight:700; flex-shrink:0}
.ac-empty{padding:.6rem .7rem; font-size:.8rem; color:var(--muted)}
.lbl{display:block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-2); margin-bottom:.35rem}
.card{background:var(--card); border:1px solid var(--linea); border-radius:1rem; padding:1.4rem; box-shadow:0 1px 2px rgba(22,19,15,.03)}

/* ── OS buttons ── */
.osb{padding:.45rem .95rem; border-radius:.65rem; border:1px solid var(--linea); background:transparent; color:var(--muted); font-size:.78rem; font-weight:600; cursor:pointer; transition:all .2s}
.osb.on{border-color:color-mix(in srgb,var(--mk-primario) 70%,transparent); background:color-mix(in srgb,var(--mk-primario) 10%,transparent); color:var(--mk-primario)}

/* ── Analyse button ── */
.btn-go{
  background:var(--mk-texto); color:var(--mk-fondo); font-weight:700; border:none; border-radius:999px;
  padding:.82rem 2.2rem; font-size:.95rem; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s;
}
.btn-go:hover{transform:translateY(-2px); background:var(--mk-primario)}
.btn-go:disabled{opacity:.55; cursor:not-allowed; transform:none}

/* ── Priority levels ── */
.tier-crit{background:color-mix(in srgb,var(--crit) 7%,transparent); border:1px solid color-mix(in srgb,var(--crit) 30%,transparent); border-radius:.9rem; padding:1rem 1.1rem}
.tier-crit-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem}
.badge-crit{background:color-mix(in srgb,var(--crit) 14%,transparent); border:1px solid color-mix(in srgb,var(--crit) 45%,transparent); color:var(--crit); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:3px 9px; border-radius:9999px}

.tier-warn{background:color-mix(in srgb,var(--warn) 7%,transparent); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); border-radius:.9rem; padding:1rem 1.1rem}
.tier-warn-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem}
.badge-warn{background:color-mix(in srgb,var(--warn) 14%,transparent); border:1px solid color-mix(in srgb,var(--warn) 40%,transparent); color:var(--warn); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:3px 9px; border-radius:9999px}

.tier-ok{background:color-mix(in srgb,var(--ok) 6%,transparent); border:1px solid color-mix(in srgb,var(--ok) 22%,transparent); border-radius:.9rem; padding:.85rem 1.1rem}
.tier-ok-head{display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem}
.badge-ok{background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid color-mix(in srgb,var(--ok) 35%,transparent); color:var(--ok); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; padding:3px 9px; border-radius:9999px}

/* ── Component items ── */
.comp-item{background:color-mix(in srgb,var(--mk-texto) 3%,transparent); border-radius:.75rem; padding:.8rem 1rem; display:flex; align-items:flex-start; gap:.65rem}
.sdot{width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:5px}
.sdot-r{background:var(--crit)}
.sdot-o{background:var(--warn)}
.sdot-g{background:var(--ok)}

/* ── Upgrade cards inside tiers ── */
.up-card{background:color-mix(in srgb,var(--mk-texto) 4%,transparent); border-radius:.75rem; padding:.75rem .9rem; margin-top:.55rem}

/* ── Shop buttons ── */
.sbtn{display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .8rem; border-radius:.55rem; font-size:.7rem; font-weight:700; text-decoration:none; transition:all .15s; white-space:nowrap}
.s-amz{background:color-mix(in srgb,var(--mk-primario) 10%,transparent); border:1px solid color-mix(in srgb,var(--mk-primario) 35%,transparent); color:var(--mk-primario)}.s-amz:hover{background:color-mix(in srgb,var(--mk-primario) 20%,transparent)}
.s-ggl{background:color-mix(in srgb,var(--mk-secundario) 10%,transparent); border:1px solid color-mix(in srgb,var(--mk-secundario) 30%,transparent); color:var(--mk-secundario)}.s-ggl:hover{background:color-mix(in srgb,var(--mk-secundario) 20%,transparent)}

/* ── Progress ── */
#pBar{height:100%; border-radius:9999px; background:linear-gradient(90deg,var(--mk-primario),color-mix(in srgb,var(--mk-primario) 55%,#F0C36B)); transition:width .5s}
.progreso-track{background:color-mix(in srgb,var(--mk-texto) 12%,transparent); border-radius:9999px; height:6px; overflow:hidden}

/* ── Mini bar ── */
.mbar{height:5px; background:color-mix(in srgb,var(--mk-texto) 10%,transparent); border-radius:9999px; overflow:hidden; margin-top:.3rem}
.mfill{height:100%; border-radius:9999px; transition:width 1s ease}

/* ── Score ring ── */
#sRing{transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}

/* ── Spinner ── */
.spin{display:inline-block; width:15px; height:15px; border:2px solid color-mix(in srgb,var(--mk-fondo) 30%,transparent); border-top-color:var(--mk-fondo); border-radius:50%; animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:translateY(0)}}
.fu{animation:fadeUp .4s ease both}

/* ── Optional toggle ── */
.opt-toggle{font-size:.75rem; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:.3rem; background:none; border:none; padding:.4rem 0; transition:color .2s; font-weight:600}
.opt-toggle:hover{color:var(--mk-primario)}
#optSection{display:none}

/* ── Footer ── */
.pie-hw{
  position:relative; z-index:5; background:var(--mk-texto); color:var(--mk-fondo);
  text-align:center; padding:2rem 1.5rem; margin-top:2rem; font-size:.7rem; line-height:1.6;
}
.pie-hw p{max-width:600px; margin:0 auto .5rem auto}
.pie-hw .legal{font-size:.65rem; opacity:.55}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--mk-fondo)}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--mk-texto) 25%,transparent); border-radius:3px}

@media(max-width:700px){
  h1{font-size:clamp(1.7rem,8vw,2.4rem)}
}