/* ============================================================
   AntonioLópezMX — "tkm" design system
   Palette: deep indigo-navy base · teal highlight · coral→amber CTA
   Fonts: Bebas Neue (display) · Wix Madefor Display/Text (UI/body)
   ============================================================ */
:root{
  --bg:#0a0f1c;
  --bg2:#0d1424;
  --card:#131b2e;
  --card2:#1a2338;
  --line:#26314a;
  --line2:#33405e;
  --ink:#eef2fb;
  --muted:#98a2be;
  --muted2:#79839f;
  --accent:#19d3a2;        /* teal highlight — links, marks, scale */
  --accent-d:#0fb389;
  --accent2:#7c9cff;       /* periwinkle secondary */
  --cta1:#ff7a3c;          /* CTA gradient start (coral) */
  --cta2:#ffb43d;          /* CTA gradient end (amber) */
  --cta-ink:#25150a;
  --good:#28c76f;
  --warn:#ffce54;
  --danger:#ff5470;
  --radius:16px;
  --radius-sm:10px;
  --wrap:1200px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --shadow-sm:0 6px 20px rgba(0,0,0,.3);
  --f-disp:'Bebas Neue',Impact,sans-serif;
  --f-head:'Wix Madefor Display',system-ui,sans-serif;
  --f-text:'Wix Madefor Text',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:
  radial-gradient(1100px 500px at 12% -8%,rgba(25,211,162,.10),transparent 60%),
  radial-gradient(900px 500px at 100% 0%,rgba(124,156,255,.08),transparent 55%),
  var(--bg);
  color:var(--ink);font-family:var(--f-text);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.2;margin:0 0 .5em;font-weight:800}
h2{font-size:1.75rem;margin-top:.2em;letter-spacing:-.01em}
h3{font-size:1.28rem}
h4{font-size:1.05rem}
p{margin:0 0 1em}
.tkm-wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
section{padding:26px 0}
section h2{position:relative;padding-left:16px}
section h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:5px;border-radius:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent2))}

/* ---------------- NAV ---------------- */
.tkm-nav{position:sticky;top:0;z-index:80;background:rgba(10,15,28,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.tkm-nav-in{display:flex;align-items:center;gap:26px;height:72px}
.tkm-logo{display:flex;flex-direction:column;justify-content:center;line-height:1;flex:0 0 auto}
.tkm-logo:hover{text-decoration:none}
.tkm-logo-mark{font-family:var(--f-disp);font-size:1.85rem;letter-spacing:.03em;color:var(--ink)}
.tkm-logo-mark b{color:var(--accent);font-weight:400}
.tkm-logo-tag{font-size:.62rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.tkm-nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.tkm-navitem{position:relative}
.tkm-navtop{display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:10px;color:var(--ink);
  font-family:var(--f-head);font-weight:700;font-size:.95rem}
.tkm-navtop:hover{background:var(--card);text-decoration:none;color:var(--accent)}
.tkm-caret{font-size:.7rem;color:var(--muted);transition:transform .2s}
.tkm-navitem:hover .tkm-caret{transform:rotate(180deg)}
.tkm-drop-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:.18s;display:flex;flex-direction:column}
.tkm-navitem:hover .tkm-drop-panel,.tkm-navitem:focus-within .tkm-drop-panel{opacity:1;visibility:visible;transform:none}
.tkm-drop-panel a{padding:9px 12px;border-radius:9px;color:var(--ink);font-size:.92rem;font-weight:600}
.tkm-drop-panel a:hover{background:var(--card2);color:var(--accent);text-decoration:none}
.tkm-drop-panel a.sub{padding-left:22px;font-weight:500;color:var(--muted)}
.tkm-drop-panel a.sub:hover{color:var(--accent)}
.tkm-drop-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);padding:10px 12px 4px}
/* burger */
.tkm-burger{display:none;margin-left:auto;position:relative}
.tkm-burger summary{list-style:none;cursor:pointer;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.tkm-burger summary::-webkit-details-marker{display:none}
.tkm-burger-b,.tkm-burger-b::before,.tkm-burger-b::after{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;position:relative;transition:.2s}
.tkm-burger-b::before,.tkm-burger-b::after{content:"";position:absolute;left:0}
.tkm-burger-b::before{top:-7px}.tkm-burger-b::after{top:7px}
.tkm-burger-p{position:absolute;right:0;top:calc(100% + 10px);width:min(84vw,320px);background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;max-height:76vh;overflow:auto}
.tkm-burger-p>a,.tkm-bsub>summary{padding:12px 14px;border-radius:9px;color:var(--ink);font-weight:700;font-family:var(--f-head)}
.tkm-burger-p>a:hover{background:var(--card2);text-decoration:none}
.tkm-bsub{border-radius:9px}
.tkm-bsub summary{list-style:none;cursor:pointer}
.tkm-bsub summary::-webkit-details-marker{display:none}
.tkm-bsub summary::after{content:"▾";float:right;color:var(--muted)}
.tkm-bsub[open] summary::after{transform:rotate(180deg)}
.tkm-bsub a{display:block;padding:9px 14px 9px 26px;color:var(--muted);font-weight:500;font-size:.92rem;border-radius:8px}
.tkm-bsub a:hover{color:var(--accent);text-decoration:none}

/* ---------------- HERO (redesigned) ---------------- */
.tkm-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 340px at 82% 12%,rgba(255,138,60,.16),transparent 60%),
    radial-gradient(680px 420px at 8% 8%,rgba(25,211,162,.16),transparent 60%),
    linear-gradient(180deg,#0c1326,#0a0f1c);
  background-color:#0b1120}
.tkm-hero::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.014) 0 2px,transparent 2px 26px);pointer-events:none}
.tkm-hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.55fr .9fr;gap:34px;align-items:center;
  padding:52px 22px 46px}
.tkm-eyebrow{display:inline-block;font-family:var(--f-head);font-weight:700;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);border:1px solid rgba(25,211,162,.4);
  background:rgba(25,211,162,.08);padding:6px 14px;border-radius:999px}
.tkm-h1{font-family:var(--f-disp);font-weight:400;font-size:clamp(2.7rem,6vw,4.5rem);line-height:.98;
  letter-spacing:.01em;margin:.35em 0 .3em;color:#fff;text-transform:uppercase}
.tkm-h1 .hl{background:linear-gradient(120deg,var(--accent),#5ff0c9);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.tkm-byline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.9rem;margin:0 0 14px}
.tkm-byline a{color:var(--accent);font-weight:600}
.tkm-avatar{border-radius:50%;object-fit:cover;border:2px solid var(--line2);flex:0 0 auto}
.tkm-lede{color:#d6ddee;font-size:1.1rem;max-width:640px;margin:0 0 16px}
.tkm-lede-more{display:none}
.tkm-lede-more.open{display:inline}
.tkm-lede-tog{background:none;border:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;padding:0 4px;text-decoration:underline}
.tkm-trust{display:flex;flex-wrap:wrap;gap:9px}
.tkm-trust span{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:.82rem;color:var(--muted)}
.tkm-trust span::before{content:"✓";color:var(--accent);font-weight:800}
/* hero subdial (floating top pick) */
.tkm-subdial{position:relative;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  border-radius:22px;padding:22px 22px 20px;text-align:center;box-shadow:var(--shadow)}
.tkm-subdial::before{content:"";position:absolute;inset:-1px;border-radius:22px;padding:1px;
  background:linear-gradient(140deg,rgba(25,211,162,.6),transparent 40%,rgba(255,138,60,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tkm-sd-top{font-family:var(--f-head);font-weight:800;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cta2)}
.tkm-sd-plate{background:#fff;border-radius:12px;padding:12px;height:74px;display:flex;align-items:center;justify-content:center;margin:12px auto}
.tkm-sd-plate img{max-height:100%;max-width:100%;object-fit:contain}
.tkm-sd-ring{width:92px;height:92px;border-radius:50%;margin:6px auto 8px;display:grid;place-items:center;
  background:conic-gradient(var(--accent) 0 82%,rgba(255,255,255,.09) 82% 100%);position:relative}
.tkm-sd-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--card)}
.tkm-sd-val{position:relative;font-family:var(--f-disp);font-size:2rem;line-height:1;color:#fff}
.tkm-sd-val small{display:block;font-family:var(--f-text);font-size:.52rem;color:var(--muted);letter-spacing:.05em;margin-top:2px}
.tkm-sd-name{font-family:var(--f-head);font-weight:800;font-size:1.15rem;margin:2px 0}
.tkm-sd-bon{color:var(--accent);font-size:.9rem;font-weight:600;margin:0 0 12px}

/* ---------------- CTA buttons ---------------- */
.tkm-cta{display:inline-block;background:linear-gradient(135deg,var(--cta1),var(--cta2));color:var(--cta-ink);
  font-family:var(--f-head);font-weight:800;font-size:.95rem;padding:13px 24px;border-radius:11px;text-align:center;
  box-shadow:0 8px 22px rgba(255,138,60,.28);transition:transform .07s,box-shadow .2s;white-space:nowrap}
.tkm-cta:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,138,60,.4);color:var(--cta-ink)}
.tkm-cta-w{display:block;width:100%;padding:12px 16px}
.tkm-tc{font-size:.68rem;color:var(--muted2);margin:7px 0 0;text-align:center}

/* ---------------- FILTERS ---------------- */
.tkm-filters{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 6px}
.tkm-chip{background:var(--card);border:1px solid var(--line);color:var(--muted);font-family:var(--f-head);
  font-weight:700;font-size:.85rem;padding:8px 16px;border-radius:999px;cursor:pointer;transition:.15s}
.tkm-chip:hover{border-color:var(--accent);color:var(--ink)}
.tkm-chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-d));color:#04150f;border-color:transparent}

/* ---------------- TOPLIST ROWS (desktop) ---------------- */
.tkm-desk-rows{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.tkm-row{display:grid;grid-template-columns:44px 132px 1fr 190px 172px;gap:18px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;transition:.15s}
.tkm-row:hover{border-color:var(--line2);transform:translateY(-1px)}
.tkm-row[data-top="1"]{border-color:rgba(25,211,162,.55);background:linear-gradient(100deg,rgba(25,211,162,.09),var(--card) 45%);box-shadow:var(--shadow-sm)}
.tkm-rank{font-family:var(--f-disp);font-size:2rem;color:var(--muted2);text-align:center;line-height:1}
.tkm-row[data-top="1"] .tkm-rank{color:var(--accent)}
.tkm-plate{background:#fff;border-radius:11px;padding:10px;height:66px;display:flex;align-items:center;justify-content:center}
.tkm-plate img{max-height:100%;max-width:100%;object-fit:contain}
.tkm-award{display:inline-block;font-family:var(--f-head);font-weight:800;font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cta2);background:rgba(255,180,61,.1);border:1px solid rgba(255,180,61,.3);
  border-radius:6px;padding:2px 8px;margin:0 0 5px}
.tkm-name{font-family:var(--f-head);font-weight:800;font-size:1.1rem;margin:0 0 3px}
.tkm-bon{color:var(--muted);font-size:.9rem;margin:0}
.tkm-bon b,.tkm-bon strong{color:var(--accent)}
.tkm-scale-t{font-size:.8rem;color:var(--ink);margin:0 0 6px;font-weight:600}
.tkm-track{height:7px;border-radius:6px;background:var(--card2);overflow:hidden;border:1px solid var(--line)}
.tkm-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:6px}
.tkm-scale-l{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted2);margin-top:5px}
/* mobile cards */
.tkm-mobile-cards{display:none;flex-direction:column;gap:12px;margin-top:14px}
.tkm-mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;position:relative}
.tkm-mcard[data-top="1"]{border-color:rgba(25,211,162,.55)}
.tkm-mcard .tkm-rank{position:absolute;top:12px;left:14px;font-size:1.5rem}
.tkm-mcard .tkm-plate{width:150px;height:64px;margin:6px auto 10px}
.tkm-mcard .tkm-award{margin-top:2px}
.tkm-mcard .tkm-scale{margin:12px 0;text-align:left}
.tkm-mcard .tkm-bon{margin:8px 0 12px;color:var(--ink)}
.tkm-morewrap{display:flex;justify-content:center;margin-top:6px}
.tkm-more{background:var(--card);border:1px solid var(--line);color:var(--ink);font-family:var(--f-head);font-weight:700;
  padding:12px 22px;border-radius:11px;cursor:pointer}
.tkm-more:hover{border-color:var(--accent);color:var(--accent)}
.is-hidden{display:none!important}

/* ---------------- CONTENT BLOCKS ---------------- */
.tkm-callout{background:linear-gradient(100deg,rgba(255,84,112,.10),var(--card));border:1px solid rgba(255,84,112,.3);
  border-left:4px solid var(--danger);border-radius:12px;padding:16px 20px;margin:6px 0}
.tkm-callout a{color:var(--accent)}
.tkm-authbox{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;margin:0 0 20px}
.tkm-authbox b{font-family:var(--f-head)}
.tkm-authbox span{color:var(--muted);font-size:.85rem}
.tkm-toc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:18px 0}
.tkm-toc b{font-family:var(--f-head);display:block;margin-bottom:10px}
.tkm-toc ul{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
.tkm-toc li{margin:.32em 0;break-inside:avoid}
.tkm-toc a{color:var(--ink);font-size:.93rem}
.tkm-toc a:hover{color:var(--accent)}
@media(max-width:640px){.tkm-toc ul{columns:1}}
/* comparison table */
.tkm-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin:14px 0}
.tkm-cmp{width:100%;border-collapse:collapse;min-width:820px;font-size:.9rem}
.tkm-cmp th,.tkm-cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.tkm-cmp thead th{background:var(--card2);font-family:var(--f-head);font-weight:700;font-size:.82rem;color:var(--ink);position:sticky;top:0}
.tkm-cmp tbody tr:hover{background:rgba(255,255,255,.02)}
.tkm-cmp tbody tr:last-child td{border-bottom:none}
.tkm-cmp td b{color:var(--ink)}
.tkm-cmp .tkm-cta{padding:8px 16px;font-size:.82rem}
/* ordered/step lists */
.tkm-ol{counter-reset:s;list-style:none;padding:0;margin:1em 0}
.tkm-ol li{position:relative;padding:12px 16px 12px 56px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;margin:8px 0}
.tkm-ol li::before{counter-increment:s;content:counter(s);position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-family:var(--f-disp);font-size:1.25rem;
  color:#04150f;background:linear-gradient(135deg,var(--accent),var(--accent2))}
/* pros/cons grid */
.tkm-grid3{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:12px 0}
@media(max-width:640px){.tkm-grid3{grid-template-columns:1fr}}
.tkm-info{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.tkm-info h4{margin:0 0 10px;font-family:var(--f-head)}
.tkm-info ul{list-style:none;margin:0;padding:0}
.tkm-info li{position:relative;padding:5px 0 5px 26px;font-size:.93rem}
.tkm-info li::before{position:absolute;left:0;top:5px;font-weight:800}
.tkm-info:nth-child(1) li::before{content:"✓";color:var(--good)}
.tkm-info:nth-child(2) li::before{content:"✕";color:var(--danger)}
/* faq */
.tkm-faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:9px 0;padding:2px 20px}
.tkm-faq summary{cursor:pointer;font-family:var(--f-head);font-weight:700;padding:15px 0;list-style:none}
.tkm-faq summary::-webkit-details-marker{display:none}
.tkm-faq summary::after{content:"+";float:right;color:var(--accent);font-size:1.4rem;line-height:1;font-weight:400}
.tkm-faq details[open] summary::after{content:"–"}
.tkm-faq details[open] summary{border-bottom:1px solid var(--line)}
.tkm-faq .a{padding:13px 0;color:var(--muted)}
/* related links */
.tkm-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
@media(max-width:820px){.tkm-links{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tkm-links{grid-template-columns:1fr}}
.tkm-links a{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;color:var(--ink);
  font-family:var(--f-head);font-weight:700;display:flex;flex-direction:column;transition:.15s}
.tkm-links a:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.tkm-links a span{font-family:var(--f-text);font-weight:400;color:var(--muted);font-size:.84rem;margin-top:3px}
/* disclaimer + rg */
.tkm-disc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;color:var(--muted);font-size:.9rem}
.tkm-disc b{color:var(--ink)}
.tkm-rgbar{background:var(--bg2);border-top:1px solid var(--line);text-align:center;font-size:.82rem;color:var(--muted);
  padding:12px 20px}
.tkm-rgbar a{color:var(--accent)}
.note-rg{background:linear-gradient(100deg,rgba(25,211,162,.08),var(--card));border:1px solid rgba(25,211,162,.3);
  border-radius:12px;padding:16px 20px;font-size:.93rem}

/* ---------------- FOOTER ---------------- */
.tkm-foot{background:#070b15;border-top:1px solid var(--line);margin-top:34px;padding:40px 0 26px}
.tkm-foot-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.tkm-foot h4{font-family:var(--f-head);font-size:.95rem;margin:0 0 12px;color:var(--ink)}
.tkm-foot a{display:block;color:var(--muted);font-size:.9rem;padding:3px 0}
.tkm-foot a:hover{color:var(--accent)}
.tkm-foot-plate{font-family:var(--f-disp);font-size:1.7rem;color:var(--ink);margin-bottom:8px}
.tkm-foot-plate b{color:var(--accent);font-weight:400}
.tkm-age{display:inline-block;background:var(--danger);color:#fff;font-weight:800;font-size:.72rem;border-radius:6px;padding:1px 7px;margin-right:4px}
.tkm-legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;font-size:.85rem;color:var(--muted)}
.tkm-legal a{display:inline;color:var(--muted)}
.tkm-legal a:hover{color:var(--accent)}
.linklike{background:none;border:none;color:var(--muted);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.copy{grid-column:1/-1;color:var(--muted2);font-size:.8rem;margin:14px 0 0}
@media(max-width:860px){.tkm-foot-g{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.tkm-foot-g{grid-template-columns:1fr}}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:960px){
  .tkm-nav-links{display:none}
  .tkm-burger{display:block}
  .tkm-hero-in{grid-template-columns:1fr;gap:26px}
  .tkm-subdial{max-width:360px}
}
@media(max-width:820px){
  .tkm-desk-rows{display:none}
  .tkm-mobile-cards{display:flex}
}
/* Mobile above-the-fold: keep H1 + author/updated, pull the toplist (H2 + table) up.
   The hero dial duplicates the #1 pick, so drop it (with the lede + trust chips) on phones. */
@media(max-width:767px){
  .tkm-hero-in{padding:16px 22px 26px;gap:12px}
  .tkm-subdial{display:none}
  .tkm-hero .tkm-lede,.tkm-hero .tkm-trust{display:none}
  .tkm-eyebrow{font-size:.66rem;padding:5px 11px}
  .tkm-h1{font-size:clamp(1.95rem,8.4vw,2.5rem);margin:.12em 0 .28em}
  .tkm-byline{margin-bottom:0;font-size:.82rem}
  section{padding:16px 0}
  #toplist,#lista{padding-top:8px}
  #toplist>.tkm-wrap>p:first-of-type,#lista>.tkm-wrap>p:first-of-type{font-size:.85rem;margin:.15rem 0 0}
  #toplist h2,#lista h2{font-size:1.32rem}
}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--accent);color:#04150f;padding:8px 14px;border-radius:8px;z-index:200}