/* ==========================================================================
   StackVerdict — Design System
   --------------------------------------------------------------------------
   Principios:
   1. Cero dependencias, cero @import, cero web fonts → LCP < 1.2 s
   2. Cero CLS: todo contenedor de anuncio reserva altura ANTES de cargar
   3. Legibilidad editorial: medida 68ch, ritmo vertical consistente
   4. Los CTA de afiliado usan un color que NO se usa en ningún otro sitio,
      para que el ojo los encuentre sin que parezcan un anuncio de AdSense
      (mezclar ambos es una violación de política y hunde el RPM)
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* Neutrales de matiz cálido: leen como papel, no como pantalla */
  --n-0:   #ffffff;
  --n-25:  #fbfaf9;
  --n-50:  #f6f5f3;
  --n-100: #eceae6;
  --n-200: #ddd9d3;
  --n-300: #c3bdb4;
  --n-400: #9c948a;
  --n-500: #756d64;
  --n-600: #57514a;
  --n-700: #3d3934;
  --n-800: #26231f;
  --n-900: #14120f;

  /* Marca: teal profundo = confianza + software, sin ser el azul genérico */
  --brand-50:  #ecfdf8;
  --brand-100: #d1faec;
  --brand-500: #14b8a6;
  --brand-600: #0f766e;
  --brand-700: #0c5d57;
  --brand-900: #063330;

  /* Acción: ámbar cálido. Reservado EXCLUSIVAMENTE a CTAs de afiliado. */
  --act-50:  #fff7ed;
  --act-100: #ffedd5;
  --act-500: #f97316;
  --act-600: #ea580c;
  --act-700: #c2410c;

  /* Semánticos */
  --pos: #15803d;
  --pos-bg: #f0fdf4;
  --neg: #b91c1c;
  --neg-bg: #fef2f2;
  --warn: #a16207;
  --warn-bg: #fefce8;

  /* Roles */
  --bg: var(--n-0);
  --bg-sunken: var(--n-25);
  --bg-raised: var(--n-0);
  --surface: var(--n-50);
  --line: var(--n-100);
  --line-strong: var(--n-200);
  --text: var(--n-900);
  --text-soft: var(--n-600);
  --text-mute: var(--n-500);
  --link: var(--brand-700);

  /* Tipografía — stack de sistema: 0 bytes de red, render instantáneo */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
           "Times New Roman", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida (min 375px → max 1280px) */
  --t-xs:  0.78rem;
  --t-sm:  0.875rem;
  --t-base: 1.0625rem;
  --t-md:  clamp(1.125rem, 0.3vw + 1.06rem, 1.25rem);
  --t-lg:  clamp(1.3rem, 0.6vw + 1.15rem, 1.55rem);
  --t-xl:  clamp(1.55rem, 1.1vw + 1.3rem, 2rem);
  --t-2xl: clamp(1.9rem, 1.9vw + 1.45rem, 2.75rem);
  --t-3xl: clamp(2.25rem, 3vw + 1.55rem, 3.5rem);

  /* Espaciado (escala 4px) */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.75rem; --s-8: 4rem;
  --s-9: 6rem;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --sh-sm: 0 1px 2px rgb(20 18 15 / .06), 0 1px 3px rgb(20 18 15 / .05);
  --sh-md: 0 4px 12px rgb(20 18 15 / .07), 0 1px 3px rgb(20 18 15 / .05);
  --sh-lg: 0 18px 40px -12px rgb(20 18 15 / .16), 0 2px 6px rgb(20 18 15 / .05);

  --wrap: 1200px;
  --prose: 68ch;
  --header-h: 60px;
}

/* ------------------------------------------------------------ DARK MODE */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #100f0d;
    --bg-sunken: #0a0a08;
    --bg-raised: #1a1815;
    --surface: #1a1815;
    --line: #2b2823;
    --line-strong: #3b372f;
    --text: #f4f2ee;
    --text-soft: #b8b2a8;
    --text-mute: #8d867b;
    --link: var(--brand-500);
    --pos: #4ade80; --pos-bg: #0d2418;
    --neg: #f87171; --neg-bg: #2a1414;
    --warn: #fbbf24; --warn-bg: #2a2210;
    --sh-sm: 0 1px 2px rgb(0 0 0 / .4);
    --sh-md: 0 4px 14px rgb(0 0 0 / .45);
    --sh-lg: 0 18px 44px -12px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #100f0d;
  --bg-sunken: #0a0a08;
  --bg-raised: #1a1815;
  --surface: #1a1815;
  --line: #2b2823;
  --line-strong: #3b372f;
  --text: #f4f2ee;
  --text-soft: #b8b2a8;
  --text-mute: #8d867b;
  --link: var(--brand-500);
  --pos: #4ade80; --pos-bg: #0d2418;
  --neg: #f87171; --neg-bg: #2a1414;
  --warn: #fbbf24; --warn-bg: #2a2210;
  --sh-sm: 0 1px 2px rgb(0 0 0 / .4);
  --sh-md: 0 4px 14px rgb(0 0 0 / .45);
  --sh-lg: 0 18px 44px -12px rgb(0 0 0 / .6);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ------------------------------------------------------------- RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.021em; font-weight: 700; text-wrap: balance; }
p, li { text-wrap: pretty; }
table { border-collapse: collapse; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-600); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ LAYOUT */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(100% - 3rem, var(--wrap)); } }

.shell { display: grid; gap: var(--s-7); }
@media (min-width: 1060px) {
  .shell { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s-8); align-items: start; }
}

/* ------------------------------------------------------------ HEADER */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
}
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.03em;
  color: var(--text); text-decoration: none; flex: none;
}
.brand-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center;
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: -.04em;
}
.nav { display: none; gap: var(--s-1); margin-inline-start: auto; align-items: center; }
@media (min-width: 940px) { .nav { display: flex; } }
.nav a {
  padding: .4rem .6rem; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 550; color: var(--text-soft);
  text-decoration: none; white-space: nowrap;
}
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--brand-700); background: var(--brand-50); }
:root[data-theme="dark"] .nav a[aria-current="page"] {
  color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
}

.header-tools { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
@media (min-width: 940px) { .header-tools { margin-inline-start: var(--s-3); } }
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; cursor: pointer; color: var(--text-soft);
}
.icon-btn:hover { background: var(--surface); color: var(--text); }
@media (min-width: 940px) { .nav-toggle { display: none; } }

.mobile-nav { display: none; border-top: 1px solid var(--line); padding: var(--s-3) 0 var(--s-4); }
.mobile-nav[data-open="true"] { display: block; }
@media (min-width: 940px) { .mobile-nav { display: none !important; } }
.mobile-nav a {
  display: block; padding: .6rem .25rem; font-weight: 550;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* ------------------------------------------------------------- ANUNCIOS
   Cada slot reserva su altura. Sin esto, AdSense produce CLS > 0.25 y
   Google degrada el ranking del sitio entero. Es el error nº1 del nicho. */
.ad {
  --ad-h: 280px;
  margin: var(--s-6) 0;
  display: flex; flex-direction: column; align-items: center;
  contain: layout style;
}
.ad-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 6px; font-weight: 600;
}
.ad-box {
  width: 100%; min-height: var(--ad-h);
  display: grid; place-items: center; overflow: hidden;
}
.ad--leaderboard { --ad-h: 100px; }
@media (max-width: 640px) { .ad--leaderboard { --ad-h: 250px; } }
.ad--in-article { --ad-h: 280px; }
.ad--rect { --ad-h: 250px; }
.ad--sidebar { --ad-h: 600px; }
.ad--feed { --ad-h: 200px; }

/* Placeholder visible solo cuando aún no hay client id de AdSense */
.ad-placeholder {
  width: 100%; height: var(--ad-h);
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  display: grid; place-items: center; gap: 2px;
  background: repeating-linear-gradient(45deg,
    transparent, transparent 9px,
    color-mix(in srgb, var(--line) 60%, transparent) 9px,
    color-mix(in srgb, var(--line) 60%, transparent) 10px);
  color: var(--text-mute); font-size: var(--t-xs); text-align: center;
  font-family: var(--mono);
}

/* -------------------------------------------------------------- SIDEBAR */
.sidebar { display: none; }
@media (min-width: 1060px) {
  .sidebar { display: block; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.side-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-raised); padding: var(--s-5); margin-bottom: var(--s-5);
  box-shadow: var(--sh-sm);
}
.side-card h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-mute); margin-bottom: var(--s-4);
}
.pick { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.pick:first-of-type { border-top: 0; padding-top: 0; }
.pick-rank {
  flex: none; width: 22px; height: 22px; border-radius: var(--r-full);
  background: var(--surface); color: var(--text-soft);
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.pick-name { font-weight: 650; font-size: var(--t-sm); line-height: 1.3; }
.pick-name a { color: var(--text); text-decoration: none; }
.pick-name a:hover { color: var(--link); }
.pick-meta { font-size: var(--t-xs); color: var(--text-mute); margin-top: 2px; }

/* ------------------------------------------------------------- MONOGRAM */
.mono-tile {
  flex: none; display: grid; place-items: center;
  border-radius: 9px; color: #fff; font-weight: 800;
  letter-spacing: -.04em; line-height: 1;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
}
.mono-tile[data-size="sm"] { width: 30px; height: 30px; font-size: 13px; }
.mono-tile[data-size="md"] { width: 42px; height: 42px; font-size: 17px; }
.mono-tile[data-size="lg"] { width: 60px; height: 60px; font-size: 24px; border-radius: 13px; }

/* ------------------------------------------------------------ ARTÍCULO */
.article-head { padding: var(--s-6) 0 var(--s-5); }
.crumbs { font-size: var(--t-xs); color: var(--text-mute); margin-bottom: var(--s-4); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li::after { content: "›"; margin-inline-start: .35rem; color: var(--line-strong); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--text-mute); text-decoration: none; }
.crumbs a:hover { color: var(--link); text-decoration: underline; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--brand-700);
  background: var(--brand-50); padding: .3rem .6rem; border-radius: var(--r-full);
}
:root[data-theme="dark"] .eyebrow { color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 14%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow { color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 14%, transparent); }
  :root:not([data-theme="light"]) .nav a[aria-current="page"] { color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 12%, transparent); }
}

.article-title { font-size: var(--t-3xl); margin: var(--s-4) 0 var(--s-4); }
.article-standfirst {
  font-size: var(--t-md); color: var(--text-soft); line-height: 1.6;
  max-width: var(--prose); margin-bottom: var(--s-5);
}
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  font-size: var(--t-sm); color: var(--text-mute);
  padding: var(--s-4) 0; border-block: 1px solid var(--line);
}
.byline strong { color: var(--text); font-weight: 600; }
.byline-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); }

.disclosure {
  font-size: var(--t-sm); color: var(--text-soft); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  margin: var(--s-5) 0;
}
.disclosure b { color: var(--text); }

/* ---------------------------------------------------------------- PROSA */
.prose { max-width: var(--prose); }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 {
  font-size: var(--t-xl); margin-top: var(--s-7); padding-top: var(--s-2);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.prose h3 {
  font-size: var(--t-lg); margin-top: var(--s-6);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.prose h4 { font-size: var(--t-md); margin-top: var(--s-5); }
.prose p { color: var(--text); }
.prose ul, .prose ol { padding-inline-start: 1.4em; display: grid; gap: .5rem; }
.prose li::marker { color: var(--brand-600); }
.prose blockquote {
  border-inline-start: 3px solid var(--brand-500);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  font-family: var(--serif); font-size: var(--t-md); color: var(--text-soft);
}
.prose code {
  font-family: var(--mono); font-size: .875em;
  background: var(--surface); padding: .15em .38em; border-radius: 4px;
  border: 1px solid var(--line);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }
.prose figure { margin: var(--s-6) 0; }
.prose figcaption {
  font-size: var(--t-xs); color: var(--text-mute); margin-top: var(--s-3);
  text-align: center; font-style: italic;
}
.prose .full-bleed { max-width: none; }

/* Full-width elements dentro de prosa limitada */
.prose > .wide { max-width: none; width: 100%; }

/* ------------------------------------------------------------------ TOC */
.toc {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-sunken); padding: var(--s-5); margin: var(--s-6) 0;
}
.toc-title {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-mute); font-weight: 700; margin-bottom: var(--s-3);
}
.toc ol { list-style: none; padding: 0; display: grid; gap: .1rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: block; padding: .35rem 0; font-size: var(--t-sm);
  color: var(--text-soft); text-decoration: none; line-height: 1.4;
}
.toc a::before { content: counter(toc) ". "; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--link); }
.toc a.is-active { color: var(--brand-700); font-weight: 600; }

/* ------------------------------------------------------- CAJA VEREDICTO */
.verdict {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--bg-raised); box-shadow: var(--sh-md);
  overflow: hidden; margin: var(--s-6) 0;
}
.verdict-top {
  display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-5); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-sunken), transparent);
}
.verdict-id { min-width: 0; flex: 1; }
.verdict-name { font-size: var(--t-lg); font-weight: 750; letter-spacing: -.02em; }
.verdict-tag { font-size: var(--t-sm); color: var(--text-soft); margin-top: 2px; }
.score-ring {
  flex: none; width: 70px; height: 70px; position: relative;
  display: grid; place-items: center;
}
.score-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-ring-val {
  position: relative; font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.score-ring-val small { font-size: .6em; font-weight: 600; color: var(--text-mute); }

.verdict-grid { display: grid; gap: 0; }
@media (min-width: 620px) { .verdict-grid { grid-template-columns: 1fr 1fr; } }
.verdict-col { padding: var(--s-5); }
.verdict-col + .verdict-col { border-top: 1px solid var(--line); }
@media (min-width: 620px) {
  .verdict-col + .verdict-col { border-top: 0; border-inline-start: 1px solid var(--line); }
}
.verdict-col h4 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: var(--s-3); display: flex; align-items: center; gap: .4rem;
}
.verdict-col--pro h4 { color: var(--pos); }
.verdict-col--con h4 { color: var(--neg); }
.verdict-col ul { list-style: none; padding: 0; display: grid; gap: .6rem; font-size: var(--t-sm); line-height: 1.5; }
.verdict-col li { position: relative; padding-inline-start: 1.4rem; }
.verdict-col li::before {
  position: absolute; left: 0; top: .05em; font-weight: 800; font-size: .95em;
}
.verdict-col--pro li::before { content: "✓"; color: var(--pos); }
.verdict-col--con li::before { content: "✕"; color: var(--neg); }

.verdict-foot {
  padding: var(--s-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  justify-content: space-between; background: var(--bg-sunken);
}
.verdict-foot-text { font-size: var(--t-sm); color: var(--text-soft); flex: 1 1 240px; }
.verdict-foot-text b { color: var(--text); }

/* Nota de primera mano del autor real (t.take en tools.mjs) — separada
   de pros/cons porque es una opinión con voz, no un dato de la ficha. */
.verdict-take { padding: var(--s-5); border-top: 1px solid var(--line); }
.verdict-take blockquote {
  margin: 0; padding-inline-start: var(--s-4);
  border-inline-start: 3px solid var(--brand-500);
  font-size: var(--t-sm); font-style: italic; color: var(--text); line-height: 1.6;
}
.verdict-take cite {
  display: block; margin-top: .5rem; padding-inline-start: calc(var(--s-4) + 3px);
  font-size: var(--t-xs); font-style: normal; color: var(--text-mute); font-weight: 600;
}

/* ------------------------------------------------------- BARRAS DE SCORE */
.score-bars { display: grid; gap: var(--s-3); }
.score-bar { display: grid; grid-template-columns: 108px 1fr 34px; gap: var(--s-3); align-items: center; }
.score-bar-label { font-size: var(--t-xs); color: var(--text-soft); font-weight: 550; }
/* display:block es obligatorio: son <span>, y sin él width/height
   no aplican (los inline los ignoran) y la barra queda vacía. */
.score-bar-track {
  display: block; height: 7px; border-radius: var(--r-full);
  background: var(--surface); overflow: hidden; border: 1px solid var(--line);
}
.score-bar-fill {
  display: block; height: 100%; min-width: 4px; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
}
.score-bar-val { font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; color: var(--text); }

/* ---------------------------------------------------------------- BOTONES
   .btn-cta es el único elemento naranja del sitio. Reservado a afiliados. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  /* 44px mínimo: objetivo táctil accesible y, en la práctica, más
     conversión de afiliado en móvil, que es >65 % del tráfico del nicho */
  padding: .68rem 1.15rem; min-height: 44px; border-radius: var(--r-md);
  font-size: var(--t-sm); font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* act-700 (no act-600): con texto blanco da 4.8:1 y pasa WCAG AA.
   act-600 se queda en 3.6:1 — falla, y en móvil bajo sol se lee peor. */
.btn-cta {
  background: var(--act-700); color: #fff;
  box-shadow: 0 1px 2px rgb(124 45 18 / .35), 0 4px 12px -4px rgb(194 65 12 / .45);
}
.btn-cta:hover { background: #9a3412; }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface); }
.btn-brand { background: var(--brand-600); color: #fff; }
.btn-brand:hover { background: var(--brand-700); }
.btn-block { width: 100%; }
.btn-sm { padding: .45rem .8rem; min-height: 36px; font-size: var(--t-xs); }
.btn .ext { opacity: .75; }

/* --------------------------------------------------------- TABLA COMPARA
   En móvil se convierte en tarjetas apiladas usando data-label. Una tabla
   con scroll horizontal destroza la métrica de INP en móvil. */
.cmp-wrap { margin: var(--s-6) 0; }
.cmp {
  width: 100%; font-size: var(--t-sm);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.cmp thead { background: var(--bg-sunken); }
.cmp th, .cmp td { padding: var(--s-3) var(--s-4); text-align: start; vertical-align: top; }
.cmp th {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute); font-weight: 700; white-space: nowrap;
}
.cmp tbody tr + tr { border-top: 1px solid var(--line); }
.cmp tbody tr:hover { background: var(--bg-sunken); }
.cmp .cell-tool { display: flex; align-items: center; gap: var(--s-3); font-weight: 650; color: var(--text); }
.cmp .cell-tool a { color: inherit; text-decoration: none; }
.cmp .cell-tool a:hover { color: var(--link); }
.cmp .num { font-variant-numeric: tabular-nums; font-weight: 650; }

@media (max-width: 780px) {
  .cmp, .cmp thead, .cmp tbody, .cmp th, .cmp td, .cmp tr { display: block; }
  .cmp { border: 0; }
  .cmp thead { position: absolute; left: -9999px; }
  .cmp tbody tr {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    margin-bottom: var(--s-4); padding: var(--s-2); background: var(--bg-raised);
  }
  .cmp tbody tr + tr { border-top: 1px solid var(--line); }
  .cmp td { display: grid; grid-template-columns: 40% 1fr; gap: var(--s-3); padding: .55rem var(--s-3); }
  .cmp td + td { border-top: 1px solid var(--line); }
  .cmp td::before {
    content: attr(data-label);
    font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-mute); font-weight: 700; padding-top: .1em;
  }
  .cmp td[data-label="Tool"] { grid-template-columns: 1fr; }
  .cmp td[data-label="Tool"]::before { display: none; }
}
/* El breakpoint móvil de arriba redeclara `display:block` en <tr>, lo que
   ganaría por orden de cascada sobre el `display:none` nativo de [hidden].
   Sin esto, filtrar filas con JS las dejaría visibles en móvil. */
.cmp tr[hidden] { display: none; }

/* -------------------------------------------------------------- CTA BOX */
.cta-box {
  border: 1px solid var(--act-500); border-radius: var(--r-lg);
  background: var(--act-50); padding: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  justify-content: space-between; margin: var(--s-6) 0;
}
:root[data-theme="dark"] .cta-box { background: color-mix(in srgb, var(--act-500) 10%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-box { background: color-mix(in srgb, var(--act-500) 10%, transparent); }
}
.cta-copy { flex: 1 1 260px; min-width: 0; }
.cta-copy strong { display: block; font-size: var(--t-md); letter-spacing: -.015em; }
.cta-copy span { font-size: var(--t-sm); color: var(--text-soft); }

/* -------------------------------------------------------------- CALLOUT */
.callout {
  border-inline-start: 3px solid var(--brand-500);
  background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-4) var(--s-5); margin: var(--s-5) 0;
}
.callout-title {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; color: var(--brand-700); margin-bottom: .35rem;
}
.callout p { font-size: var(--t-sm); color: var(--text-soft); }
.callout--warn { border-color: var(--warn); background: var(--warn-bg); }
.callout--warn .callout-title { color: var(--warn); }
:root[data-theme="dark"] .callout-title { color: var(--brand-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout-title { color: var(--brand-500); }
}

/* --------------------------------------------------------------- KEY TAKE */
.takeaways {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-sunken); padding: var(--s-5); margin: var(--s-5) 0;
}
.takeaways h2 {
  font-size: var(--t-xs) !important; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-mute); margin: 0 0 var(--s-3) !important; padding: 0 !important;
}
.takeaways ul { list-style: none; padding: 0; display: grid; gap: .65rem; font-size: var(--t-sm); }
.takeaways li { position: relative; padding-inline-start: 1.5rem; line-height: 1.55; }
.takeaways li::before {
  content: ""; position: absolute; left: .35rem; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-500);
}

/* ------------------------------------------------------------------ FAQ */
.faq { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin: var(--s-5) 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
  font-weight: 620; font-size: var(--t-sm); display: flex;
  align-items: flex-start; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-weight: 400; font-size: 1.25rem;
  line-height: 1; color: var(--text-mute); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--bg-sunken); }
.faq-body { padding: 0 var(--s-5) var(--s-5); font-size: var(--t-sm); color: var(--text-soft); line-height: 1.6; }
.faq-body > * + * { margin-top: var(--s-3); }

/* ---------------------------------------------------------------- CHART */
.chart { margin: var(--s-6) 0; }
.chart-title { font-size: var(--t-sm); font-weight: 650; margin-bottom: var(--s-4); }
.chart-note { font-size: var(--t-xs); color: var(--text-mute); margin-top: var(--s-3); }
.chart svg { width: 100%; height: auto; }

/* ---------------------------------------------------------------- CARDS */
.grid { display: grid; gap: var(--s-5); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-raised); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); border-color: var(--line-strong); }
.card-visual { aspect-ratio: 16 / 9; background: var(--surface); }
.card-visual svg { width: 100%; height: 100%; }
.card-body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.card-cat {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--brand-700);
}
:root[data-theme="dark"] .card-cat { color: var(--brand-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card-cat { color: var(--brand-500); }
}
.card-title { font-size: var(--t-md); line-height: 1.3; letter-spacing: -.02em; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card-title a:hover { color: var(--link); }
.card-excerpt { font-size: var(--t-sm); color: var(--text-soft); line-height: 1.55; }
.card-meta {
  margin-top: auto; padding-top: var(--s-3);
  font-size: var(--t-xs); color: var(--text-mute);
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
}

/* ----------------------------------------------------------------- HERO */
.hero { padding: var(--s-8) 0 var(--s-7); border-bottom: 1px solid var(--line); }
.hero-inner { max-width: 46rem; }
.hero h1 { font-size: var(--t-3xl); margin: var(--s-4) 0 var(--s-4); }
.hero p { font-size: var(--t-md); color: var(--text-soft); line-height: 1.6; }
.hero-stats {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.stat-n { font-size: var(--t-xl); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-l { font-size: var(--t-xs); color: var(--text-mute); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

.section { padding: var(--s-7) 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.section-head h2 { font-size: var(--t-xl); }
.section-head p { font-size: var(--t-sm); color: var(--text-soft); max-width: 46ch; }
.section-link { font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.section-link::after { content: " →"; }

/* -------------------------------------------------------------- CAT PILLS */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill {
  padding: .4rem .85rem; border-radius: var(--r-full);
  border: 1px solid var(--line-strong); font-size: var(--t-sm);
  font-weight: 550; text-decoration: none; color: var(--text-soft);
}
.pill:hover { border-color: var(--brand-500); color: var(--brand-700); background: var(--brand-50); }
:root[data-theme="dark"] .pill:hover { color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 12%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill:hover { color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 12%, transparent); }
}
/* .pill también se usa como <button> (filtro del índice de precios):
   el reset global no quita el cromo nativo de los botones, así que hace
   falta declararlo aquí explícitamente. */
.pill { background: transparent; cursor: pointer; font: inherit; }
.pill[aria-pressed="true"] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.pill[aria-pressed="true"]:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
:root[data-theme="dark"] .pill[aria-pressed="true"] { background: var(--brand-500); border-color: var(--brand-500); color: #0a1418; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill[aria-pressed="true"] { background: var(--brand-500); border-color: var(--brand-500); color: #0a1418; }
}

/* --------------------------------------------------------- PRICING INDEX */
.pi-promo {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--brand-50); padding: var(--s-5) var(--s-6);
  text-decoration: none; color: inherit; margin: var(--s-6) 0 0;
}
.pi-promo-copy { flex: 1 1 320px; min-width: 0; }
.pi-promo-copy strong { display: block; font-size: var(--t-md); letter-spacing: -.015em; color: var(--text); }
.pi-promo-copy span { font-size: var(--t-sm); color: var(--text-soft); line-height: 1.5; }
.pi-promo .btn { flex: none; pointer-events: none; }
.pi-promo:hover { border-color: var(--brand-500); }
:root[data-theme="dark"] .pi-promo { background: color-mix(in srgb, var(--brand-500) 10%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pi-promo { background: color-mix(in srgb, var(--brand-500) 10%, transparent); }
}

.pi-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-5) 0 var(--s-7); }
.pi-filter-label {
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-mute);
}

.pi-table-wrap { margin: var(--s-6) 0 var(--s-7); }

.seat-toggle {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface);
}
.seat-toggle button {
  padding: .4rem .95rem; border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--text-soft); font-size: var(--t-sm);
  font-weight: 600; cursor: pointer; font-family: inherit;
}
.seat-toggle button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text); box-shadow: var(--sh-sm); }

/* ----------------------------------------------------------- AUTHOR BOX */
.author-box {
  display: flex; gap: var(--s-4); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--bg-sunken); padding: var(--s-5); margin: var(--s-7) 0 var(--s-6);
}
.author-avatar {
  flex: none; width: 48px; height: 48px; border-radius: var(--r-full);
  background: linear-gradient(140deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
}
.author-name { font-weight: 700; font-size: var(--t-sm); }
.author-role { font-size: var(--t-xs); color: var(--text-mute); margin-bottom: var(--s-2); }
.author-bio { font-size: var(--t-sm); color: var(--text-soft); line-height: 1.55; }

/* ------------------------------------------------------------- RELATED */
.related { border-top: 1px solid var(--line); padding-top: var(--s-6); margin-top: var(--s-7); }
.related-list { list-style: none; padding: 0; display: grid; gap: 0; }
.related-list li { border-bottom: 1px solid var(--line); }
.related-list a {
  display: flex; gap: var(--s-4); align-items: baseline; justify-content: space-between;
  padding: var(--s-4) 0; text-decoration: none; color: var(--text);
  font-weight: 600; font-size: var(--t-sm); line-height: 1.4;
}
.related-list a:hover { color: var(--link); }
.related-list .rl-cat { font-size: var(--t-xs); color: var(--text-mute); font-weight: 500; white-space: nowrap; }

/* ------------------------------------------------------------- NEWSLETTER */
.newsletter {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--brand-900), #0a2c2a);
  color: #eafaf6; padding: var(--s-6); margin: var(--s-7) 0;
}
.newsletter h2 { font-size: var(--t-lg); color: #fff; margin-bottom: var(--s-2); }
.newsletter p { font-size: var(--t-sm); color: #a7ded4; max-width: 44ch; }
.nl-form { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.nl-form input {
  flex: 1 1 220px; min-width: 0; padding: .68rem .9rem;
  border-radius: var(--r-md); border: 1px solid rgb(255 255 255 / .18);
  background: rgb(255 255 255 / .07); color: #fff; font-size: var(--t-sm);
}
.nl-form input::placeholder { color: #7fbdb2; }
.nl-note { font-size: var(--t-xs); color: #77b3a8; margin-top: var(--s-3); }

/* ---------------------------------------------------------------- FOOTER */
.site-footer {
  border-top: 1px solid var(--line); background: var(--bg-sunken);
  padding: var(--s-7) 0 var(--s-6); margin-top: var(--s-8);
}
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-about { font-size: var(--t-sm); color: var(--text-soft); max-width: 40ch; margin-top: var(--s-3); line-height: 1.6; }
.footer-col h4 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-mute); margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer-col a { font-size: var(--t-sm); color: var(--text-soft); text-decoration: none; }
.footer-col a:hover { color: var(--link); }
.footer-bottom {
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between;
  font-size: var(--t-xs); color: var(--text-mute);
}
.footer-bottom p { max-width: 70ch; }

/* --------------------------------------------------------------- BADGES */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--t-xs); font-weight: 650; padding: .18rem .5rem;
  border-radius: var(--r-full); border: 1px solid var(--line-strong);
  color: var(--text-soft); white-space: nowrap;
}
.badge--best { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.badge--free { background: var(--pos-bg); border-color: color-mix(in srgb, var(--pos) 40%, transparent); color: var(--pos); }
.badge--updated { background: var(--surface); }

.verified-note {
  font-size: var(--t-xs); color: var(--text-mute);
  display: inline-flex; align-items: center; gap: .35rem;
}
.verified-note::before { content: "◷"; }

/* Captura fechada de una página real del proveedor — mismo icono de
   reloj que .verified-note para que se lea como la misma promesa: esto
   se comprobó, y aquí está la fecha en que se comprobó. */
.evidence-shot { margin: var(--s-6) 0; }
.evidence-shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md);
}
.evidence-shot figcaption {
  margin-top: var(--s-3); font-size: var(--t-xs); color: var(--text-mute);
  display: flex; align-items: center; gap: .35rem;
}
.evidence-shot figcaption::before { content: "◷"; }

/* ----------------------------------------------------------------- MISC */
.lede { font-size: var(--t-md); color: var(--text-soft); line-height: 1.6; }
.muted { color: var(--text-mute); }
.center { text-align: center; }
.stack-sm > * + * { margin-top: var(--s-3); }
.divider { border: 0; border-top: 1px solid var(--line); margin: var(--s-7) 0; }

@media print {
  .site-header, .site-footer, .ad, .sidebar, .newsletter, .cta-box { display: none !important; }
  .prose { max-width: none; }
}