/* HUB · 03-niveles (#tiers) — «el quilate»: dial de 180° con bisel de oro líquido */
#tiers{overflow:hidden;isolation:isolate}
#tiers .qd-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 42% at 50% 34%,rgba(216,166,70,.10) 0%,rgba(216,166,70,0) 70%),
             radial-gradient(90% 60% at 50% 110%,rgba(16,39,58,.55) 0%,rgba(5,9,15,0) 70%)}
#tiers p,#tiers h3,#tiers dl,#tiers dd{margin:0}
#tiers .qd-head{margin-bottom:clamp(28px,4vw,56px)}
#tiers .qd-head .lead{margin:22px auto 0}

/* ---------- Dial ---------- */
#tiers .qd-gauge{position:relative}
#tiers .qd-dial{position:relative;width:min(640px,100%,max(480px,calc((100svh - 450px) * 1.92)));margin:0 auto;aspect-ratio:600/312;container-type:inline-size}
#tiers .qd-halo{position:absolute;left:50%;bottom:-6%;width:86%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(216,166,70,.16),rgba(216,166,70,.05) 55%,rgba(216,166,70,0));pointer-events:none}
#tiers .qd-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#tiers .qd-hair{fill:none;stroke:var(--hair);stroke-width:1}
#tiers .qd-track path{fill:none;stroke:rgba(243,234,219,.07);stroke-width:30}
#tiers .qd-fill{fill:none;stroke:url(#qdGold);stroke-width:30}
#tiers .qd-fill-sheen{fill:none;stroke:url(#qdSheen);stroke-width:30;mix-blend-mode:screen;opacity:.55}
#tiers .qd-ticks{fill:none;stroke:rgba(243,234,219,.22);stroke-width:1.4;stroke-linecap:round}
#tiers .qd-ticks--maj{stroke:var(--gold);stroke-width:2;opacity:.75}
#tiers .qd-lip{fill:#FFF3CC;opacity:.9;filter:drop-shadow(0 0 6px rgba(244,213,138,.9))}
#tiers .qd-drops ellipse{fill:url(#qdDrop)}
#tiers .qd-needle__glow{fill:rgba(244,213,138,.22)}
#tiers .qd-needle__blade{fill:url(#qdBlade);stroke:#FFF3CC;stroke-width:.6;stroke-linejoin:round}
#tiers .qd-needle__jewel{fill:var(--ink);stroke:var(--gold-2);stroke-width:2}
#tiers .qd-hits path{fill:none;stroke:transparent;stroke-width:64;pointer-events:none}
#tiers.qd--live .qd-hits path{pointer-events:stroke;cursor:pointer}

#tiers .qd-labels{position:absolute;inset:0;pointer-events:none}
#tiers .qd-label{position:absolute;--ang:calc((180deg - (var(--a) - .5) * 36deg));
  left:calc(50% + cos(var(--ang)) * 50.3%);top:calc(96.15% - sin(var(--ang)) * 96.8%);
  transform:translate(calc(-50% + cos(var(--ang)) * 50%),calc(-50% - sin(var(--ang)) * 50%));
  font:700 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap;transition:color .5s}
#tiers .qd-label.is-on{color:var(--gold-2)}

#tiers .qd-read{position:absolute;left:50%;bottom:-2%;transform:translateX(-50%);width:46%;text-align:center;display:grid;justify-items:center;gap:6px}
#tiers .qd-read__num{font-size:clamp(2.6rem,15cqw,6rem);line-height:.9;color:var(--cream);white-space:nowrap;
  background:linear-gradient(180deg,#FFF3CC 0%,#F4D58A 42%,#D8A646 78%,#A77927 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#tiers .qd-read__num small{-webkit-text-fill-color:var(--cream-2)}
#tiers .qd-read__name{font:400 italic clamp(1.25rem,5cqw,2rem)/1.1 var(--serif);color:var(--cream)}
#tiers .qd-read__num small{font-size:max(.42em,14px)}
/* Sin animación (?reduce / sin JS): la cifra fija se explica con su etiqueta «Más popular» */
#tiers .qd-read__tag{font-size:.75rem;padding:5px 10px}
#tiers .qd-read__tag:empty,#tiers.qd--live .qd-read__tag{display:none}
#tiers:not(.qd--live) .qd-read{bottom:-10%}

/* ---------- Fichas (role=tab) — solo con JS en escritorio ---------- */
#tiers .qd-pick{display:none;text-align:center;margin:clamp(40px,4.6vw,64px) 0 18px}
#tiers .qd-tabs{display:none}
#tiers.qd--live .qd-pick{display:block}
#tiers.qd--live .qd-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);max-width:1180px;margin:0 auto}
#tiers .qd-tab{display:grid;gap:10px;align-content:start;text-align:left;padding:18px 20px 20px;border-radius:var(--r-sm);cursor:pointer;color:var(--cream);font:inherit;min-height:44px}
#tiers .qd-tab__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
#tiers .qd-tab__tag{font-size:.6875rem;padding:4px 8px}
#tiers .eyebrow{font-size:max(.75rem,12px)}
#tiers .qd-tab__fee small,#tiers .qd-card__num small{font-size:max(.55em,12px)}
#tiers .qd-tab__name{font:500 1.2rem/1.15 var(--serif);color:var(--cream)}
#tiers .qd-tab__fee{font-size:1.5rem;line-height:1;color:var(--cream-2);transition:color .4s}
#tiers .qd-tab:hover{border-color:var(--line-2);background:var(--glass-2)}
#tiers .qd-tab[aria-selected=true]{border-color:var(--gold);background:linear-gradient(180deg,rgba(216,166,70,.16),rgba(13,27,40,.6) 70%)}
#tiers .qd-tab[aria-selected=true] .qd-tab__fee{color:var(--gold-2)}
#tiers .qd-tab:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}

/* ---------- Tarjetas de nivel (respaldo por defecto: rejilla completa) ---------- */
#tiers .qd-car{position:relative;margin-top:clamp(36px,4vw,56px)}
#tiers .qd-panels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);max-width:1180px;margin:0 auto}
#tiers .qd-card{display:flex;flex-direction:column;gap:16px;padding:clamp(20px,1.8vw,26px);border-radius:var(--r-sm)}
#tiers .qd-card--top{border-color:var(--gold)}
#tiers .qd-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
#tiers .qd-card__name{font:500 clamp(1.4rem,1.8vw,1.75rem)/1.1 var(--serif);color:var(--cream);margin:12px 0 6px}
#tiers .qd-card__txt{color:var(--cream-2);line-height:1.5;font-size:.95rem}
#tiers .qd-k{display:block;font:700 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
#tiers .qd-card__fee{display:grid;gap:6px}
#tiers .qd-card__num{font-size:clamp(2rem,2.6vw,2.6rem);line-height:1;color:var(--gold-2)}
#tiers .qd-card__rows{display:grid;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
#tiers .qd-card__rows div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
#tiers .qd-card__rows dd{color:var(--cream);font-size:1.05rem}
#tiers .qd-card__act{margin-top:auto;justify-content:center;min-height:48px}
#tiers .qd-ctl,#tiers .qd-hint{display:none}

@media (min-width:900px){
  #tiers:not(.qd--live) .qd-card__txt{min-height:3em}
  #tiers:not(.qd--live) .qd-card__rows div{display:grid;gap:4px;justify-content:start}
}
@media (min-width:900px) and (max-width:1199px){
  #tiers:not(.qd--live) .qd-panels{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Escritorio con JS: solo la tarjeta del nivel elegido, como placa bajo el dial ---------- */
@media (min-width:900px){
  #tiers.qd--live .qd-car{margin-top:clamp(18px,2vw,26px)}
  #tiers.qd--live .qd-panels{display:block;max-width:1180px}
  #tiers.qd--live .qd-card{display:none;grid-template-columns:minmax(220px,1.15fr) auto minmax(0,1.6fr) auto;align-items:center;column-gap:clamp(20px,2.6vw,40px);padding:clamp(18px,1.8vw,26px) clamp(24px,2.6vw,36px)}
  #tiers.qd--live .qd-card.is-on{display:grid}
  #tiers.qd--live .qd-card__id{min-width:0}
  #tiers.qd--live .qd-card__name{margin:6px 0 4px}
  #tiers.qd--live .qd-card__top .glass__n{display:none}
  #tiers.qd--live .qd-card__top{justify-content:flex-start;min-height:0}
  #tiers.qd--live .qd-card__top{min-height:26px}
  #tiers.qd--live .qd-card__top:not(:has(.tag)){visibility:hidden}
  #tiers.qd--live .qd-card__fee,#tiers.qd--live .qd-card__rows div{display:grid;grid-template-rows:auto auto;gap:8px;align-content:center;justify-items:start}
  #tiers.qd--live .qd-card__fee{padding-left:clamp(20px,2.6vw,40px);border-left:1px solid var(--line);align-self:stretch}
  #tiers.qd--live .qd-card__rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,40px);padding:0 0 0 clamp(20px,2.6vw,40px);border-top:0;border-left:1px solid var(--line);align-self:stretch}
  #tiers.qd--live .qd-k{line-height:1.2}
  #tiers.qd--live .qd-card__num,#tiers.qd--live .qd-card__rows dd{font-size:1.5rem;line-height:1.1}
  #tiers.qd--live .qd-card__act{margin:0;flex:none;min-height:52px;padding-inline:28px}
}

@media (min-width:900px) and (max-height:960px){
  #tiers .qd-head{margin-bottom:40px}
  #tiers .qd-head .lead{margin-top:12px}
  #tiers .qd-dial{width:min(500px,100%)}
  #tiers.qd--live .qd-pick{margin:26px 0 10px}
  #tiers .qd-tab{padding:12px 16px 14px;gap:6px}
  #tiers .qd-tab__fee{font-size:1.3rem}
  #tiers.qd--live .qd-car{margin-top:12px}
}

/* ---------- Celular: rejilla apilada (respaldo) ---------- */
@media (max-width:899px){
  #tiers .qd-dial{width:min(320px,100%)}
  #tiers .qd-labels{display:none}
  #tiers .qd-read{width:62%;gap:4px;bottom:-4%}
  #tiers .qd-read__k{font-size:.75rem}
  #tiers .qd-card .tag{font-size:.75rem}
  #tiers.qd--car .qd-tabs{display:none}
  #tiers.qd--car .qd-pick{margin:22px 0 0}
  #tiers .qd-panels{grid-template-columns:minmax(0,1fr);max-width:520px}
  #tiers .qd-card__act{min-height:52px;width:100%}
  #tiers .qd-card__txt{font-size:1rem}
  #tiers .qd-card__rows dd{font-size:1.1rem}
}

/* ---------- Celular con JS: carrusel con la receta única (SPEC §6.2) ---------- */
@media (max-width:899px){
  #tiers.qd--car .qd-car{margin-top:8px;padding-top:24px;margin-inline:calc(var(--gut) * -1)}
  #tiers.qd--car .qd-panels{display:flex;gap:10px;max-width:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--gut);padding:6px var(--gut) 10px;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #tiers.qd--car .qd-panels::-webkit-scrollbar{display:none}
  #tiers.qd--car .qd-card{flex:0 0 80vw;max-width:400px;scroll-snap-align:start;scroll-snap-stop:always;border-color:var(--hair)}
  #tiers.qd--car .qd-card--top{border-color:var(--gold)}
  #tiers.qd--car .qd-card{gap:14px}
  #tiers.qd--car .qd-card__name{margin:8px 0 4px}
  #tiers.qd--car .qd-card__fee{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  #tiers.qd--car .qd-card__num{font-size:1.9rem}
  #tiers.qd--car .qd-card.is-on{border-color:var(--gold-2);background:linear-gradient(180deg,rgba(216,166,70,.13),rgba(13,27,40,.62) 60%)}
  #tiers.qd--car .qd-panels::after{content:"";flex:0 0 1px}
  #tiers.qd--car .qd-ctl{display:grid;grid-template-columns:44px auto 44px;justify-content:center;align-items:center;column-gap:4px;padding:6px var(--gut) 0}
  #tiers .qd-meta{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px}
  #tiers.qd--car .qd-ctl[hidden]{display:none}
  #tiers .qd-arrow,#tiers .qd-pause{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:rgba(5,9,15,.5);color:var(--gold-2);cursor:pointer}
  #tiers .qd-arrow svg{width:20px;height:20px}
  #tiers .qd-pause{border-color:var(--line)}
  #tiers .qd-pause svg{width:16px;height:16px;fill:var(--cream-2)}
  #tiers .qd-pause .qd-pause__b{display:none}
  #tiers .qd-pause[aria-pressed=true] .qd-pause__a{display:none}
  #tiers .qd-pause[aria-pressed=true] .qd-pause__b{display:block}
  #tiers .qd-dots{display:flex}
  #tiers .qd-dot{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;cursor:pointer;padding:0}
  #tiers .qd-dot i{display:block;width:8px;height:8px;border-radius:99px;background:var(--line-2);transition:width .4s var(--ease),background .4s}
  #tiers .qd-dot[aria-current=true] i{width:20px;background:var(--gold-grad)}
  #tiers .qd-count{min-width:62px;text-align:center;font-size:.86rem;color:var(--mute);letter-spacing:.04em}
  #tiers .qd-count b{color:var(--gold-2);font-weight:800}
  #tiers.qd--car .qd-hint{display:inline-flex;align-items:center;gap:6px;position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;font-size:.75rem;color:var(--cream-2);opacity:0;pointer-events:none}
  #tiers .qd-hint svg{width:14px;height:14px}
  #tiers .qd-arrow:focus-visible,#tiers .qd-pause:focus-visible,#tiers .qd-dot:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
}

/* Celular bajo (≤700 px de alto, p. ej. 360×640): dial más chico y sin aire muerto para que arco y cifra convivan con la tarjeta */
@media (max-width:899px) and (max-height:700px){
  #tiers .qd-head{margin-bottom:20px}
  #tiers .qd-head .lead{margin-top:14px}
  #tiers .qd-dial{width:min(260px,100%)}
  #tiers.qd--car .qd-pick{margin:14px 0 0}
  #tiers.qd--car .qd-car{margin-top:0;padding-top:20px}
  #tiers.qd--car .qd-card{gap:10px}
}

/* ---------- Tabla ---------- */
#tiers .qd-acc{max-width:1180px;margin:clamp(40px,5vw,72px) auto 0}
#tiers .qd-acc>summary{font-size:clamp(1.05rem,1.5vw,1.3rem)}
#tiers .qd-acc__body{max-width:none}
#tiers .qd-tbl th[scope=row]{color:var(--cream);font:600 .96rem/1.3 var(--sans);letter-spacing:0;text-transform:none;border-bottom:1px solid var(--line);white-space:nowrap}
#tiers .qd-tbl .tag{margin-left:8px;vertical-align:middle}
#tiers .qd-tbl td.cifra{color:var(--cream);font-size:1rem}
@media (max-width:599px){#tiers .qd-tbl th,#tiers .qd-tbl td{padding:12px 4px}#tiers .qd-tbl th:first-child,#tiers .qd-tbl td:first-child{padding-left:12px}#tiers .qd-tbl{font-size:.84rem}#tiers .qd-tbl td.cifra{font-size:.9rem}#tiers .qd-tbl thead th{font-size:.78rem;letter-spacing:.02em;text-transform:none}#tiers .qd-tbl .tag{display:block;width:max-content;margin:6px 0 0;padding:0;background:none;font-size:.75rem;letter-spacing:.08em}#tiers .qd-tbl th[scope=row]{white-space:normal}}

/* ---------- Gama baja: sin vidrio esmerilado ---------- */
#tiers.qd--low .glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink-3)}
#tiers.qd--low .qd-fill-sheen,#tiers.qd--low .qd-drops{display:none}
#tiers .qd-needle__spine{stroke:#FFF8E2;stroke-width:1;opacity:.8}
#tiers .qd-needle{filter:drop-shadow(0 0 8px rgba(244,213,138,.45))}
#tiers.qd--low .qd-needle,#tiers.qd--moving .qd-lip{filter:none}

/* Celular: entrada más pegada a «Servicios» (evita el hueco de ~250 px) */
@media (max-width:767px){#tiers{padding-top:var(--s-8,56px)}}