/* =============================================================
   ScooterLegal.cl — hoja de estilos única
   1. Tokens · 2. Reset · 3. Utilidades · 4. Tipografía
   5. Componentes · 6. Secciones · 7. Herramientas · 8. Efectos
   9. Responsive · 10. Reduced motion · 11. Impresión
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* Neutros */
  --ink:        #0d1117;
  --ink-2:      #172029;
  --ink-3:      #253140;
  --paper:      #ffffff;
  --ground:     #f4f6f9;
  --ground-2:   #eaeef4;
  --line:       #e2e8f0;
  --line-2:     #cbd5e1;
  --muted:      #5b6775;
  /* #7d8894 daba 3,61:1 sobre blanco y hacen falta 4,5:1. Lo reportó
     Lighthouse en 26 elementos: marca, specs y nota de precio de cada tarjeta.
     Este color no solo va sobre blanco: también sobre --ground y --ground-2,
     que son más exigentes. #6c7783 arreglaba el blanco pero seguía fallando
     sobre el gris (4,21:1). #626d79 es el tono más cercano que cumple en los
     tres fondos: 5,27 sobre blanco, 4,87 sobre --ground, 4,53 sobre
     --ground-2. */
  --muted-2:    #626d79;

  /* Marca */
  --accent:      #1f49f5;
  --accent-dark: #1636c4;
  --accent-soft: #eef2ff;
  --accent-line: #c3d0fe;
  --accent-ink:  #ffffff;

  /* Veredicto legal */
  --ok:       #067a55;
  --ok-deep:  #045c40;
  --ok-bg:    #e7f6f0;
  --ok-line:  #9dddc4;

  --warn:     #b45309;
  --warn-bg:  #fef5e7;
  --warn-line:#f3d19e;

  --stop:     #c8202a;
  --stop-deep:#9c1720;
  --stop-bg:  #fdecec;
  --stop-line:#f4bcbf;

  /* Tipografía */
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Métrica */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --nav-h: 64px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(13, 17, 23, .05);
  --sh-2: 0 2px 4px rgba(13, 17, 23, .04), 0 8px 24px rgba(13, 17, 23, .06);
  --sh-3: 0 4px 8px rgba(13, 17, 23, .05), 0 16px 48px rgba(13, 17, 23, .10);

  /* Easing */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--display); text-wrap: balance; line-height: 1.1; letter-spacing: -.02em; font-weight: 700; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Iconos en línea: SIEMPRE dimensionados (gotcha E.1) */
svg[data-ico] { width: 1.1em; height: 1.1em; flex: none; }

/* =============================================================
   3. UTILIDADES
   ============================================================= */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: .65rem 1.1rem; background: var(--ink); color: #fff;
  border-radius: 8px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.nums { font-variant-numeric: tabular-nums; }

/* =============================================================
   4. TIPOGRAFÍA
   ============================================================= */
.h-xl { font-family: var(--display); font-size: clamp(2.1rem, 5.2vw, 3.6rem); line-height: 1.04; letter-spacing: -.032em; }
.h-lg { font-family: var(--display); font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -.028em; }
.h-md { font-family: var(--display); font-size: clamp(1.32rem, 2.4vw, 1.7rem); letter-spacing: -.02em; }
.h-sm { font-family: var(--display); font-size: 1.1rem; letter-spacing: -.012em; }

.kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
}
.kicker-muted { color: var(--muted-2); }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--muted); line-height: 1.68; }
.small { font-size: .86rem; }
.tiny { font-size: .78rem; line-height: 1.5; }
.muted { color: var(--muted); }

.section-head { margin-bottom: 1.75rem; }
.section-head .kicker { display: block; margin-bottom: .5rem; }
.section-head p { margin-top: .6rem; max-width: 62ch; }

/* Cuerpo editorial largo (guías) */
.prose { font-size: 1.02rem; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-top: 2.6rem; }
.prose h3 { font-size: 1.16rem; margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li + li { margin-top: .45rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent-dark); }
.prose strong { font-weight: 650; }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding: .2rem 0 .2rem 1.1rem; color: var(--ink-3); font-size: 1.06rem;
}

/* =============================================================
   5. COMPONENTES
   ============================================================= */

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.3rem; border-radius: 999px;
  font-weight: 620; font-size: .95rem; letter-spacing: -.01em;
  transition: background .25s var(--ease-out), color .25s var(--ease-out),
              transform .25s var(--ease-out), box-shadow .25s var(--ease-out),
              border-color .25s var(--ease-out);
  border: 1px solid transparent; text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 12px rgba(31, 73, 245, .26); }
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 6px 20px rgba(31, 73, 245, .32); }
.btn-buy { background: var(--ink); color: #fff; box-shadow: var(--sh-2); }
.btn-buy:hover { background: var(--accent); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper); }
.btn-quiet { color: var(--muted); padding-inline: .4rem; }
.btn-quiet:hover { color: var(--accent); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--ground-2); color: var(--muted-2); box-shadow: none;
  cursor: not-allowed; transform: none; border-color: var(--line);
}

/* --- Chips / badges --- */
.chip {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .28rem .68rem; border-radius: 999px;
  font-size: .76rem; font-weight: 620; letter-spacing: -.005em;
  background: var(--ground-2); color: var(--ink-3);
  border: 1px solid var(--line);
}
.chip-ok    { background: var(--ok-bg);   color: var(--ok-deep);   border-color: var(--ok-line); }
.chip-stop  { background: var(--stop-bg); color: var(--stop-deep); border-color: var(--stop-line); }
.chip-warn  { background: var(--warn-bg); color: var(--warn);      border-color: var(--warn-line); }
.chip-accent{ background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent-line); }
.chip-dot { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; flex: none; }

/* --- Tarjetas --- */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-1);
}
.card-pad { padding: clamp(1.1rem, 2.6vw, 1.6rem); }

/* =============================================================
   HEADER / NAV
   ============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)) {
  .site-header { background: rgba(255, 255, 255, .74); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); }
}
.nav {
  display: flex; align-items: center; gap: 1rem;
  height: var(--nav-h);
}
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.03em; flex: none; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand-cl { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: .15rem; margin-left: auto; list-style: none; padding: 0; }
.nav-links a {
  display: inline-flex; align-items: center; padding: .5rem .72rem;
  border-radius: 8px; font-size: .92rem; font-weight: 520; color: var(--ink-3);
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.nav-links a:hover { color: var(--accent); background: var(--accent-soft); }
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 640; }
/* --- Las dos herramientas van agrupadas como un control segmentado.
       Es el único elemento con color del nav: ahí queremos que caiga el ojo.
       Gotcha E.2: hay que re-afirmar color y fondo con la misma especificidad
       que `.nav-links a`, incluido :hover. --- */
.nav-grupo { display: flex; }
.nav-herramientas {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-soft), #fff);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(31, 73, 245, .07);
}
.nav-links a.nav-herramienta {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .42rem .78rem; border-radius: 999px;
  font-size: .88rem; font-weight: 620; color: var(--accent-dark);
  background: transparent; white-space: nowrap;
  transition: background .22s var(--ease-out), color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.nav-links a.nav-herramienta svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.nav-links a.nav-herramienta:hover {
  background: var(--paper); color: var(--accent-dark);
  box-shadow: 0 1px 3px rgba(13, 17, 23, .1);
}
.nav-links a.nav-herramienta[aria-current="page"],
.nav-links a.nav-herramienta[aria-current="page"]:hover {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 2px 8px rgba(31, 73, 245, .28);
}
.nav-links a.nav-herramienta[aria-current="page"] svg { opacity: 1; }

.nav-toggle { display: none; margin-left: auto; padding: .5rem; border-radius: 8px; border: 1px solid var(--line); }
.nav-toggle svg { width: 20px; height: 20px; }

/* =============================================================
   6. SECCIONES
   ============================================================= */
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-tight { padding-block: clamp(1.8rem, 4vw, 2.8rem); }
.section-alt { background: var(--paper); border-block: 1px solid var(--line); }

/* --- Hero --- */
.hero {
  background:
    radial-gradient(120% 90% at 84% -10%, rgba(31, 73, 245, .30), transparent 62%),
    radial-gradient(90% 70% at 8% 110%, rgba(6, 122, 85, .18), transparent 60%),
    linear-gradient(160deg, #0d1117 0%, #141d29 100%);
  color: #fff;
  padding-block: clamp(2.8rem, 8vw, 5.2rem);
  position: relative;
}
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .78); max-width: 56ch; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .34rem .8rem .34rem .5rem; border-radius: 999px; margin-bottom: 1.1rem;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .92);
}
.hero-eyebrow svg { width: 15px; height: 15px; color: #6ee7b7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.hero .btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.hero-split { display: grid; gap: 2.4rem; align-items: center; }

/* Las dos caras de la ley, en el hero */
.law-cards { display: grid; gap: .8rem; }
.law-card {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: var(--radius);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
}
.law-card-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.law-card-ico svg { width: 18px; height: 18px; }
.law-card--ok .law-card-ico { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
.law-card--warn .law-card-ico { background: rgba(245, 158, 11, .18); color: #fcd34d; }
.law-card--stop .law-card-ico { background: rgba(248, 113, 113, .17); color: #fca5a5; }
.law-card h3 { font-size: .95rem; color: #fff; letter-spacing: -.01em; }
.law-card p { font-size: .84rem; color: rgba(255, 255, 255, .7); margin-top: .18rem; line-height: 1.5; }

/* =============================================================
   EL VEREDICTO LEGAL — el bloque central del sitio
   ============================================================= */
.verdict {
  border-radius: var(--radius-lg);
  border: 1.5px solid;
  padding: clamp(1.15rem, 3vw, 1.7rem);
  position: relative;
}
.verdict--ok   { background: var(--ok-bg);   border-color: var(--ok-line); }
.verdict--warn { background: var(--warn-bg); border-color: var(--warn-line); }
.verdict--stop { background: var(--stop-bg); border-color: var(--stop-line); }

.verdict-top { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.verdict-mark {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.verdict-mark svg { width: 24px; height: 24px; }
.verdict--ok   .verdict-mark { background: var(--ok); }
.verdict--warn .verdict-mark { background: var(--warn); }
.verdict--stop .verdict-mark { background: var(--stop); }

.verdict-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.verdict--ok   .verdict-label { color: var(--ok-deep); }
.verdict--warn .verdict-label { color: var(--warn); }
.verdict--stop .verdict-label { color: var(--stop-deep); }

.verdict-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.18rem, 3.1vw, 1.72rem); line-height: 1.12;
  letter-spacing: -.025em; margin-top: .75rem;
}
.verdict--ok   .verdict-title { color: var(--ok-deep); }
.verdict--warn .verdict-title { color: #8a3f06; }
.verdict--stop .verdict-title { color: var(--stop-deep); }

.verdict-why {
  margin-top: .6rem; font-size: 1rem; line-height: 1.55;
  color: var(--ink-2); max-width: 68ch;
}
.verdict-why strong { font-weight: 650; }

/* Nota de fiscalización: la diferencia entre lo que exige la ley y lo que se mide */
.verdict-note {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: .85rem; padding: .8rem .95rem; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(13, 17, 23, .09);
  font-size: .88rem; line-height: 1.55; color: var(--ink-2); max-width: 72ch;
}
.verdict-note svg { width: 17px; height: 17px; flex: none; margin-top: .18rem; }
.verdict--warn .verdict-note svg { color: var(--warn); }
.verdict--stop .verdict-note svg { color: var(--stop); }

.verdict-reqs-label {
  display: block; margin-top: 1.05rem; margin-bottom: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.verdict-reqs { display: flex; flex-wrap: wrap; gap: .45rem; }
.verdict-reqs .chip { background: rgba(255, 255, 255, .8); }

/* Los trámites, cuando son una obligación y no una buena noticia.
   La lista se lee como un checklist: la idea es que nadie compre un modelo de
   zona gris o de alto riesgo creyendo que no hay nada que hacer después. */
.obliga {
  margin-top: 1.05rem; padding: 1rem 1.1rem;
  border-radius: var(--radius-sm); border: 1.5px solid;
  background: rgba(255, 255, 255, .82);
}
.obliga--warn { border-color: var(--warn-line); }
.obliga--stop { border-color: var(--stop-line); }

.obliga-top {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .93rem; line-height: 1.5; color: var(--ink-2);
}
.obliga-top svg { width: 18px; height: 18px; flex: none; margin-top: .16rem; }
.obliga--warn .obliga-top svg { color: var(--warn); }
.obliga--stop .obliga-top svg { color: var(--stop); }
.obliga-top strong { font-weight: 700; }

.obliga-list {
  list-style: none; margin: .8rem 0 0;
  display: grid; gap: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.obliga-list li {
  display: flex; gap: .5rem; align-items: center;
  padding: .5rem .7rem; border-radius: 8px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: .88rem; font-weight: 620; color: var(--ink-2);
}
.obliga-list svg { width: 15px; height: 15px; flex: none; }
.obliga--warn .obliga-list li { border-color: var(--warn-line); }
.obliga--warn .obliga-list svg { color: var(--warn); }
.obliga--stop .obliga-list li { border-color: var(--stop-line); }
.obliga--stop .obliga-list svg { color: var(--stop); }

.obliga-foot {
  margin-top: .8rem; font-size: .85rem; line-height: 1.55; color: var(--ink-3);
}
.obliga-foot strong { font-weight: 660; }
.obliga-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* El casco: el único requisito común a los tres estados, así que va aparte
   y con su propio botón. Se repite en la ficha, el verificador, el
   recomendador y las dos calculadoras. */
.verdict-casco {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .85rem; padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--ink); color: #fff;
}
.verdict-casco-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12);
}
.verdict-casco-ico svg { width: 20px; height: 20px; }
.verdict-casco-txt {
  flex: 1 1 240px; font-size: .87rem; line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.verdict-casco-txt strong { color: #fff; font-weight: 660; }
.btn-casco {
  flex: none; background: #fff; color: var(--ink);
  font-size: .84rem; padding: .55rem .95rem;
}
.btn-casco:hover { background: var(--accent); color: #fff; }

/* Recordatorio del casco fuera del veredicto (calculadoras y recomendador) */
.picks-casco {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: 1.1rem; padding: .8rem .95rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ground);
  font-size: .86rem; line-height: 1.5; color: var(--ink-3);
}
.picks-casco svg { width: 18px; height: 18px; flex: none; margin-top: .16rem; color: var(--ink); }
.picks-casco a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

.card-casco { border-color: var(--line-2); background: linear-gradient(180deg, var(--ground) 0%, var(--paper) 60%); }
.card-casco h2 svg { width: 19px; height: 19px; flex: none; }

.verdict-scope {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: 1.05rem; padding-top: .9rem;
  border-top: 1px solid rgba(13, 17, 23, .1);
  font-size: .83rem; line-height: 1.5; color: var(--ink-3);
}
.verdict-scope svg { width: 16px; height: 16px; flex: none; margin-top: .16rem; }
.verdict-scope strong { font-weight: 650; }

.verdict-disclaimer {
  margin-top: .55rem; font-size: .78rem; line-height: 1.5; color: var(--muted);
}
.verdict-disclaimer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Versión compacta (tarjetas y tablas) */
.verdict-mini {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .6rem; border-radius: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  border: 1px solid;
}
.verdict-mini svg { width: 13px; height: 13px; flex: none; }
.verdict-mini--ok   { background: var(--ok-bg);   color: var(--ok-deep);   border-color: var(--ok-line); }
.verdict-mini--warn { background: var(--warn-bg); color: #8a3f06;          border-color: var(--warn-line); }
.verdict-mini--stop { background: var(--stop-bg); color: var(--stop-deep); border-color: var(--stop-line); }

/* Resumen de los tres estados en la portada */
.estado-resumen {
  display: grid; gap: .7rem; margin-bottom: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.estado-chip {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid; background: var(--paper);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.estado-chip:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.estado-chip svg { width: 20px; height: 20px; flex: none; }
.estado-chip b {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.estado-chip span { font-size: .82rem; font-weight: 600; line-height: 1.25; }
.estado-chip--ok   { border-color: var(--ok-line);   color: var(--ok-deep);   background: var(--ok-bg); }
.estado-chip--warn { border-color: var(--warn-line); color: #8a3f06;          background: var(--warn-bg); }
.estado-chip--stop { border-color: var(--stop-line); color: var(--stop-deep); background: var(--stop-bg); }

/* =============================================================
   TARJETA DE SCOOTER
   ============================================================= */
.grid-cards {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.scooter-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
.scooter-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.scooter-card-media { position: relative; background: var(--ground); aspect-ratio: 4 / 3; overflow: hidden; }
.scooter-card-media img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; }
.scooter-card-flag { position: absolute; top: .65rem; left: .65rem; }
.scooter-card-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.scooter-card-brand { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.scooter-card-name { font-family: var(--display); font-size: 1.06rem; letter-spacing: -.02em; margin-top: .2rem; line-height: 1.22; }
.scooter-card-name a:hover { color: var(--accent); }
.scooter-card-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem;
  margin: .85rem 0; padding: .7rem 0; border-block: 1px solid var(--line);
}
.scooter-card-specs div { text-align: center; }
.scooter-card-specs dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); font-weight: 600; }
.scooter-card-specs dd { font-family: var(--display); font-size: 1rem; font-weight: 700; margin: .1rem 0 0; letter-spacing: -.02em; }
.scooter-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; }
.price { font-family: var(--display); font-size: 1.24rem; font-weight: 700; letter-spacing: -.03em; }
.price-note { font-size: .72rem; color: var(--muted-2); }
.card-actions { display: flex; gap: .5rem; margin-top: .9rem; }
.card-actions .btn { flex: 1; padding-inline: .8rem; font-size: .88rem; }

/* =============================================================
   FICHA DE PRODUCTO
   ============================================================= */
.ficha-head { display: grid; gap: 1.6rem; margin-top: 1.5rem; }
.ficha-title { margin-top: .5rem; }
.ficha-brand { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

.gallery { display: grid; gap: .6rem; }
.gallery-main {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  aspect-ratio: 4 / 3; overflow: hidden; display: grid; place-items: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }
.gallery-thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.gallery-thumb {
  width: 66px; height: 54px; border-radius: 9px; overflow: hidden;
  border: 1.5px solid var(--line); background: var(--paper); padding: 0;
  transition: border-color .2s var(--ease-out);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .2rem; }
.gallery-thumb[aria-current="true"] { border-color: var(--accent); }
.gallery-note { font-size: .74rem; color: var(--muted-2); }

.ficha-price-row {
  display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.ficha-price { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.2rem); font-weight: 700; letter-spacing: -.035em; }
.ficha-buy { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; }
.ficha-buy .btn { width: 100%; }
.store-line { font-size: .82rem; color: var(--muted); }

/* Tabla de especificaciones */
.spec-group + .spec-group { margin-top: 1.6rem; }
.spec-group h3 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .5rem; font-family: var(--sans); font-weight: 700; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.spec-table th, .spec-table td { padding: .68rem .2rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table th { font-weight: 520; color: var(--muted); width: 46%; }
.spec-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-na { color: var(--muted-2); font-weight: 500; }
.spec-hint { display: block; font-size: .72rem; font-weight: 400; color: var(--muted-2); margin-top: .1rem; }

/* Nota al pie de un grupo de especificaciones (fiabilidad de un dato) */
.spec-aviso {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: .7rem; font-size: .78rem; line-height: 1.5; color: var(--warn);
}
.spec-aviso svg { width: 15px; height: 15px; flex: none; margin-top: .2rem; }
.spec-aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.spec-aviso--neutra { color: var(--muted); }
.spec-aviso--neutra a { color: var(--accent); }

/* Pros / contras */
.pc { display: grid; gap: 1rem; }
.pc-col { border-radius: var(--radius); padding: 1.1rem 1.2rem; border: 1px solid; }
.pc-col--pro { background: var(--ok-bg); border-color: var(--ok-line); }
.pc-col--con { background: var(--stop-bg); border-color: var(--stop-line); }
.pc-col h3 { display: flex; align-items: center; gap: .45rem; font-size: .95rem; margin-bottom: .7rem; }
.pc-col h3 svg { width: 17px; height: 17px; flex: none; }
.pc-col--pro h3 { color: var(--ok-deep); }
.pc-col--con h3 { color: var(--stop-deep); }
.pc-col ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.pc-col li { display: flex; gap: .55rem; font-size: .92rem; line-height: 1.5; }
.pc-col li svg { width: 15px; height: 15px; flex: none; margin-top: .28rem; }
.pc-col--pro li svg { color: var(--ok); }
.pc-col--con li svg { color: var(--stop); }

.ideal-para {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius); padding: 1.05rem 1.2rem; margin-top: 1.2rem;
}
.ideal-para svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: .12rem; }
.ideal-para strong { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: .2rem; }

/* Radar */
.radar-wrap { display: grid; gap: 1.2rem; align-items: center; min-width: 0; }
.radar-svg {
  display: block; width: 100%; max-width: 440px; height: auto;
  margin-inline: auto; overflow: visible;
}
.radar-legend { list-style: none; padding: 0; display: grid; gap: .45rem; }
.radar-legend li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; font-size: .88rem; padding-bottom: .4rem; border-bottom: 1px dashed var(--line); }
.radar-legend b { font-family: var(--display); font-variant-numeric: tabular-nums; }
.radar-swatch { width: .7rem; height: .7rem; border-radius: 3px; flex: none; display: inline-block; margin-right: .45rem; }

/* =============================================================
   7. HERRAMIENTAS (calculadoras, comparador)
   ============================================================= */

/* --- Botones tipo tarjeta (topografía, medio de transporte) --- */
.choice-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--line); background: var(--paper); text-align: left;
  transition: border-color .22s var(--ease-out), background .22s var(--ease-out), transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.choice:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.choice-ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--ground); color: var(--ink-3); flex: none;
  transition: background .22s var(--ease-out), color .22s var(--ease-out);
}
.choice-ico svg { width: 21px; height: 21px; }
.choice-name { font-family: var(--display); font-weight: 700; font-size: .97rem; letter-spacing: -.015em; line-height: 1.2; }
.choice-desc { font-size: .79rem; color: var(--muted); line-height: 1.42; }
.choice[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(31, 73, 245, .1);
}
.choice[aria-pressed="true"] .choice-ico { background: var(--accent); color: #fff; }

/* Dato duro de la opción: la pendiente que exige ese terreno */
.choice-meta {
  margin-top: .1rem; font-size: .72rem; font-weight: 650;
  letter-spacing: .01em; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.choice[aria-pressed="true"] .choice-meta { color: var(--accent-dark); }

/* Casilla destacada: "puedo enchufarlo en el destino" cambia el resultado
   de arriba abajo, así que no puede parecer una casilla de letra chica. */
.check-card {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-bottom: 1.3rem; padding: .85rem .95rem;
  border-radius: var(--radius-sm); cursor: pointer;
  border: 1.5px solid var(--line); background: var(--paper);
  transition: border-color .18s var(--ease-soft), background .18s var(--ease-soft);
}
.check-card:hover { border-color: var(--line-2); }
.check-card input {
  flex: none; margin-top: .15rem; width: 18px; height: 18px; accent-color: var(--accent);
}
.check-card-ico {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--ground-2); color: var(--muted);
}
.check-card-ico svg { width: 18px; height: 18px; }
.check-card-txt { font-size: .79rem; line-height: 1.45; color: var(--muted); }
.check-card-txt strong {
  display: block; font-size: .93rem; font-weight: 650; color: var(--ink-2); margin-bottom: .15rem;
}
.check-card:has(input:checked) {
  border-color: var(--accent-line); background: var(--accent-soft);
}
.check-card:has(input:checked) .check-card-ico { background: var(--accent); color: #fff; }
.check-card input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Deslizadores --- */
.field { margin-bottom: 1.35rem; }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; }
.field-label { font-weight: 620; font-size: .95rem; }
.field-value {
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  background: var(--accent-soft); color: var(--accent-dark);
  padding: .12rem .6rem; border-radius: 8px; border: 1px solid var(--accent-line);
}
.field-hint { font-size: .79rem; color: var(--muted-2); margin-top: .4rem; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; background: var(--ground-2);
  outline-offset: 6px; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(31, 73, 245, .4); cursor: grab;
}
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(31, 73, 245, .4); cursor: grab;
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--ground-2); }

.stepper { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: 999px; padding: .18rem; background: var(--paper); }
.stepper button { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 1.1rem; font-weight: 700; color: var(--accent); }
.stepper button:hover { background: var(--accent-soft); }
.stepper output { min-width: 2.1rem; text-align: center; font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Resultados de la calculadora de autonomía --- */
.tool-layout { display: grid; gap: 1.4rem; align-items: start; }

/* El panel de controles NO se fija por defecto.
   Motivo: mide ~815 px y, pegado con un desfase de 80 px, en pantallas de
   menos de ~900 px de alto su parte inferior —justo donde están las tres
   opciones de topografía— quedaba permanentemente por debajo del borde de la
   pantalla, imposible de alcanzar por mucho que se hiciera scroll.
   Solo se fija cuando hay sitio de sobra (ver la consulta de altura en la
   sección responsive), y aun así se limita a la altura de la ventana. */
.tool-panel { position: static; }

.result-list { display: grid; gap: .7rem; }
.result-row {
  display: grid; gap: .8rem; align-items: center;
  padding: .95rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line);
  border-left: 4px solid var(--line-2);
  transition: border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.result-row--ok    { border-left-color: var(--ok);   background: linear-gradient(90deg, var(--ok-bg) 0%, var(--paper) 42%); }
.result-row--limit { border-left-color: var(--warn); background: linear-gradient(90deg, var(--warn-bg) 0%, var(--paper) 42%); }
.result-row--no    { border-left-color: var(--stop); background: linear-gradient(90deg, var(--stop-bg) 0%, var(--paper) 42%); }
/* Descartado por la pendiente, no por la batería: se distingue del anterior
   con una trama, porque el motivo del descarte es otro. */
.result-row--nosube {
  border-left-color: var(--stop);
  background:
    repeating-linear-gradient(135deg, rgba(200, 32, 42, .07) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, var(--stop-bg) 0%, var(--paper) 42%);
}
.result-name { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.02em; }
.result-name a:hover { color: var(--accent); }
.result-sub { font-size: .78rem; color: var(--muted); margin-top: .12rem; }
.result-figures { display: flex; gap: 1.4rem; align-items: baseline; }
.result-fig b { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: block; }
.result-fig span { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); font-weight: 600; }
.result-fig--declared b { color: var(--muted-2); font-size: 1.05rem; }
.result-status { font-size: .78rem; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .35rem; }
.result-status svg { width: 14px; height: 14px; }
.result-row--ok    .result-status { color: var(--ok-deep); }
.result-row--limit .result-status { color: var(--warn); }
.result-row--no    .result-status { color: var(--stop-deep); }
.result-row--nosube .result-status { color: var(--stop-deep); }
.result-row--nosube .bar > i { background: var(--stop); opacity: .45; }
.bar { height: 6px; border-radius: 999px; background: var(--ground-2); overflow: hidden; margin-top: .5rem; }
.bar > i { display: block; height: 100%; border-radius: 999px; transition: width .55s var(--ease-out); }
.result-row--ok    .bar > i { background: var(--ok); }
.result-row--limit .bar > i { background: var(--warn); }
.result-row--no    .bar > i { background: var(--stop); }

/* --- Modelos recomendados por la calculadora de autonomía --- */
.picks-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.pick {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s var(--ease-out);
}
.pick:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--line-2); }
/* La imagen va en posición absoluta: si se deja en el flujo, su altura
   intrínseca estira la caja y el aspect-ratio deja de cumplirse. */
.pick-media { background: var(--ground); aspect-ratio: 16 / 9; position: relative; }
.pick-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; padding: .45rem;
}
.pick-body { padding: .95rem 1.05rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.pick-top { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pick-name { font-family: var(--display); font-size: 1.04rem; letter-spacing: -.02em; margin-top: .55rem; line-height: 1.22; }
.pick-name a:hover { color: var(--accent); }
.pick-figs {
  display: flex; gap: 1.3rem; margin: .8rem 0;
  padding: .65rem 0; border-block: 1px solid var(--line);
}
.pick-figs b {
  display: block; font-family: var(--display); font-size: 1.12rem; font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ok-deep);
}
.pick-figs span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); font-weight: 600; }
.pick-price { font-family: var(--display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.03em; }
.pick-price span { font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }

/* Aviso dentro de una tarjeta recomendada: sube la cuesta, pero justo */
.pick-aviso {
  display: flex; gap: .45rem; align-items: flex-start;
  margin: .7rem 0 0; padding: .5rem .6rem; border-radius: 8px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  font-size: .76rem; line-height: 1.4; color: #8a3f06;
}
.pick-aviso svg { width: 14px; height: 14px; flex: none; margin-top: .15rem; color: var(--warn); }

/* Cuántos modelos quedaron fuera por la pendiente */
.picks-nota {
  display: flex; gap: .55rem; align-items: flex-start;
  margin-top: 1rem; padding: .75rem .9rem; border-radius: var(--radius-sm);
  background: var(--stop-bg); border: 1px solid var(--stop-line);
  font-size: .84rem; line-height: 1.5; color: var(--stop-deep);
}
.picks-nota svg { width: 17px; height: 17px; flex: none; margin-top: .16rem; color: var(--stop); }
.pick-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .9rem; }
.pick-actions .btn { flex: 1; padding: .62rem .7rem; font-size: .86rem; }

/* --- Calculadora de ahorro --- */
.savings-hero {
  background: linear-gradient(155deg, var(--ink) 0%, #16202c 100%);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(1.3rem, 3.5vw, 2rem);
}
.savings-big {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 3.4rem); letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums; color: #6ee7b7;
}
.savings-label { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .6); font-weight: 600; }
.savings-cmp { display: grid; gap: .8rem; margin-top: 1.5rem; }
.savings-cmp-item { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-sm); padding: .85rem 1rem; }
.savings-cmp-item b { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.03em; display: block; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.savings-cmp-item span { font-size: .76rem; color: rgba(255, 255, 255, .62); }
.payback {
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.payback b { font-family: var(--display); font-size: 1.8rem; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.breakdown { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .35rem; font-size: .84rem; }
.breakdown li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .3rem; border-bottom: 1px dashed var(--line); }
.breakdown li b { font-variant-numeric: tabular-nums; font-weight: 620; }

/* --- Nota metodológica --- */
.method {
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.3rem; margin-top: 1.4rem;
}
.method summary {
  cursor: pointer; font-weight: 640; font-size: .93rem;
  display: flex; align-items: center; gap: .5rem; list-style: none;
}
.method summary::-webkit-details-marker { display: none; }
.method summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; color: var(--muted-2); font-weight: 400; }
.method[open] summary::after { content: "−"; }
.method summary svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.method-body { margin-top: .9rem; font-size: .89rem; line-height: 1.62; color: var(--ink-2); }
.method-body > * + * { margin-top: .7rem; }
.method-body ul { padding-left: 1.1rem; }
.method-body li + li { margin-top: .3rem; }
.formula {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
  font-size: .82rem; line-height: 1.7; background: var(--paper); border: 1px solid var(--line);
  border-radius: 8px; padding: .7rem .85rem; overflow-x: auto;
  white-space: pre;              /* conserva los saltos de línea de las reglas */
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 539px) { .formula { font-size: .74rem; } }

/* =============================================================
   COMPARADOR
   ============================================================= */
.compare-slots {
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  /* sin overflow: el botón × sobresale (gotcha E.3) */
  overflow: visible; padding-top: .6rem; padding-right: .4rem;
}
.slot-wrap { position: relative; overflow: visible; }
.slot {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius-sm);
  background: var(--paper); padding: .7rem; min-height: 118px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; text-align: center; width: 100%;
}
.slot--filled { border-style: solid; border-color: var(--accent-line); background: var(--accent-soft); }
.slot-thumb { width: 54px; height: 44px; border-radius: 7px; overflow: hidden; background: var(--paper); }
.slot-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .15rem; }
.slot-name { font-size: .8rem; font-weight: 620; line-height: 1.25; }
.slot-empty { color: var(--muted-2); font-size: .82rem; }
.slot-empty svg { width: 22px; height: 22px; margin-inline: auto; margin-bottom: .3rem; }
.slot-remove {
  position: absolute; top: -8px; right: -8px; z-index: 2;
  width: 24px; height: 24px; border-radius: 999px;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-size: .8rem; line-height: 1; box-shadow: var(--sh-2);
}
.slot-remove:hover { background: var(--stop); }

.picker { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 1rem; }
.picker-item {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); font-size: .87rem; font-weight: 560;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.picker-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.picker-item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.picker-item img { width: 38px; height: 30px; object-fit: contain; flex: none; }

.table-scroll {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.compare-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.compare-table th, .compare-table td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--line); }
.compare-table thead th { background: var(--ground); font-family: var(--display); font-size: .92rem; letter-spacing: -.015em; vertical-align: bottom; }
/* La primera columna se queda fija al desplazar en horizontal, también la cabecera */
.compare-table th:first-child {
  position: sticky; left: 0; z-index: 2;
  width: 158px; min-width: 158px;
  box-shadow: 1px 0 0 var(--line);
}
.compare-table thead th:first-child { background: var(--ground); z-index: 3; }
.compare-table thead th:not(:first-child),
.compare-table tbody td { min-width: 132px; }
.compare-table tbody th {
  font-weight: 520; color: var(--muted); font-size: .86rem;
  background: var(--paper);
}
.compare-table td { font-weight: 600; font-variant-numeric: tabular-nums; }
.compare-table tr.row-legal td { padding-block: 1rem; }
.compare-table tr.row-legal th { color: var(--ink); font-weight: 700; }
.cell-best { position: relative; }
.cell-best::after {
  content: "mejor"; display: inline-block; margin-left: .45rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ok-bg); color: var(--ok-deep); border: 1px solid var(--ok-line);
  padding: .05rem .35rem; border-radius: 5px; vertical-align: middle;
}
.compare-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); }

/* =============================================================
   ACCESORIOS
   ============================================================= */
.acc-group + .acc-group { margin-top: 2.8rem; }
.acc-check { list-style: none; padding: 0; display: grid; gap: .55rem; margin-top: 1rem; }
.acc-check li { display: flex; gap: .6rem; font-size: .93rem; line-height: 1.5; }
.acc-check li svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: .28rem; }
.acc-card { display: flex; flex-direction: column; height: 100%; }
.acc-card h3 { font-size: 1.04rem; }
.acc-card p { margin-top: .5rem; font-size: .91rem; color: var(--muted); line-height: 1.55; }
.acc-card .btn, .acc-card .chip-pending { margin-top: auto; }
.chip-pending {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem;
  padding: .5rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--ground); color: var(--muted); border: 1px dashed var(--line-2);
}
.chip-pending svg { width: 15px; height: 15px; }

/* =============================================================
   VERIFICADOR UNIVERSAL
   ============================================================= */
.verif-layout { display: grid; gap: 1.4rem; align-items: start; }
.verif-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.verif-campo { display: flex; align-items: center; gap: .5rem; }
.verif-campo input {
  flex: 1; min-width: 0; padding: .75rem .85rem; font-size: 1.05rem;
  font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums;
  border-radius: 10px; border: 1px solid var(--line); background: var(--paper);
}
.verif-campo input:focus-visible { border-color: var(--accent); }
.verif-campo > span { font-weight: 700; color: var(--muted); font-size: .95rem; flex: none; }
.verif-check {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .88rem; line-height: 1.45; color: var(--ink-2); cursor: pointer;
  padding: .8rem .9rem; border-radius: var(--radius-sm);
  background: var(--ground); border: 1px solid var(--line);
}
.verif-check input { margin-top: .18rem; flex: none; accent-color: var(--accent); width: 17px; height: 17px; }

/* Precio no disponible */
.price-na { color: var(--muted-2) !important; }
.pick-price.price-na span { display: block; font-size: .72rem; }

/* =============================================================
   RECOMENDADOR DE 3 PREGUNTAS
   ============================================================= */
.quiz { border-color: var(--accent-line); }
.quiz-preguntas { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.quiz-label { display: block; font-weight: 640; font-size: .93rem; margin-bottom: .55rem; }
.quiz-ops { display: flex; gap: .45rem; flex-wrap: wrap; }
.quiz-op {
  padding: .6rem 1rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--paper);
  font-size: .88rem; font-weight: 560; color: var(--ink-2);
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), color .2s var(--ease-out);
}
.quiz-op:hover { border-color: var(--accent); }
.quiz-op[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 2px 10px rgba(31, 73, 245, .24);
}
.quiz-resultado { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.quiz-titulo { color: var(--accent-dark); }

/* =============================================================
   BARRA FIJA DE MÓVIL (fichas)
   ============================================================= */
.barra-movil { display: none; }
@media (max-width: 768px) {
  .barra-movil {
    display: flex; align-items: center; gap: .7rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: .6rem var(--gutter);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(13, 17, 23, .1);
  }
  @supports (backdrop-filter: blur(12px)) {
    .barra-movil { background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); }
  }
  .barra-movil[hidden] { display: none; }
  .barra-movil-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
  .barra-movil-nombre {
    font-family: var(--display); font-weight: 700; font-size: .92rem;
    letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .barra-movil .verdict-mini { align-self: flex-start; font-size: .68rem; padding: .18rem .45rem; }
  .barra-movil .btn { flex: none; padding: .68rem 1.05rem; font-size: .9rem; }
  /* Deja sitio para que la barra no tape el pie ni el último bloque */
  body.con-barra-movil { padding-bottom: 74px; }
}

/* =============================================================
   ACCESORIOS CON FOTO
   ============================================================= */
.acc-card--foto { overflow: hidden; }
.acc-media { position: relative; aspect-ratio: 4 / 3; background: var(--ground); }
.acc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.acc-cuerpo { padding: clamp(1rem, 2.4vw, 1.4rem); display: flex; flex-direction: column; flex: 1; }
.acc-marca { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.acc-precio {
  font-family: var(--display); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--ink); margin-top: .3rem;
}
.acc-precio span { font-family: var(--sans); font-size: .78rem; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.acc-detalle { list-style: none; padding: 0; display: grid; gap: .4rem; margin-top: .9rem; }
.acc-detalle li { display: flex; gap: .5rem; font-size: .85rem; line-height: 1.45; color: var(--ink-2); }
.acc-detalle li svg { width: 14px; height: 14px; color: var(--ok); flex: none; margin-top: .25rem; }
.acc-card--foto .btn { margin-top: auto; }

/* =============================================================
   BLOQUES DE CONFIANZA / AVISOS
   ============================================================= */
.notice {
  display: flex; gap: .8rem; align-items: flex-start;
  border-radius: var(--radius); padding: 1rem 1.15rem;
  font-size: .88rem; line-height: 1.55;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: #7c3a05;
}
.notice svg { width: 18px; height: 18px; flex: none; margin-top: .18rem; }
.notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.notice--info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--ink-2); }
.notice--info svg { color: var(--accent); }
.notice--neutral { background: var(--ground); border-color: var(--line); color: var(--ink-2); }
.notice--neutral svg { color: var(--muted); }

.steps { display: grid; gap: 1rem; counter-reset: s; }
.step { display: flex; gap: .9rem; }
.step-n {
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  background: var(--accent-soft); color: var(--accent-dark); border: 1px solid var(--accent-line);
  display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: .88rem;
}
.step h3 { font-size: 1rem; }
.step p { font-size: .89rem; color: var(--muted); margin-top: .18rem; }

.faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); overflow: hidden; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1rem 1.2rem; font-weight: 620; font-size: .98rem;
  display: flex; gap: .8rem; align-items: center; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--muted-2); font-size: 1.3rem; font-weight: 300; }
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { color: var(--accent); }
.faq-body { padding: 0 1.2rem 1.2rem; font-size: .93rem; color: var(--ink-2); line-height: 1.62; }
.faq-body > * + * { margin-top: .7rem; }

/* Migas */
.crumbs { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .8rem; color: var(--muted-2); padding-top: 1.2rem; }
.crumbs a:hover { color: var(--accent); }
.crumbs span[aria-current] { color: var(--ink-3); font-weight: 560; }

/* Enlaces relacionados */
.rel-links { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.rel-link {
  display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 560;
  transition: border-color .22s var(--ease-out), transform .22s var(--ease-out);
}
.rel-link:hover { border-color: var(--accent); transform: translateX(2px); color: var(--accent-dark); }
.rel-link svg { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* =============================================================
   BLOQUE DE ANUNCIO
   -------------------------------------------------------------
   Discreto a propósito: sin marco, sin fondo, del ancho de la
   columna de texto y con una etiqueta pequeña arriba. Tiene que
   leerse como una sección más, no como un cartel encima.
   ============================================================= */
/* Sin reserva de altura, y es a propósito.
   La primera versión reservaba 160 px. Medido con Chrome headless: al recoger
   ese hueco cuando Google no tenía anuncio, el texto de abajo saltaba y el
   desplazamiento de diseño subía a 0,49, cinco veces el umbral de Google.

   La alternativa es no ocupar nada hasta que haya anuncio de verdad. El bloque
   se activa 800 px antes de llegar a la pantalla, así que cuando el anuncio
   aparece y empuja el texto, eso pasa fuera de la vista. Si no hay anuncio,
   nunca hubo hueco que recoger. */
.anuncio {
  display: block;
  margin: 2.4rem auto;
  max-width: 100%;
  text-align: center;
}
/* La etiqueta solo aparece cuando hay algo que etiquetar: "Publicidad" sobre
   un espacio vacío es peor que no poner nada. */
.anuncio-label {
  display: none; margin-bottom: .5rem;
  font-size: .63rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
}
.anuncio--lleno .anuncio-label { display: block; }
.anuncio ins { display: block; margin: 0 auto; }

/* Cuando Google no tiene anuncio que servir se esconde el bloque entero,
   etiqueta y reserva de altura incluidas, para no dejar un hueco en blanco.

   Quién decide esconderlo es main.js, NO una regla que mire directamente el
   atributo data-ad-status. Se probó con :has(ins[data-ad-status="unfilled"])
   y el bloque se recogía en el instante en que Google respondía, aunque el
   lector lo tuviera delante: medido, 0,29 de desplazamiento de diseño, tres
   veces el umbral de Google. main.js espera a que el bloque salga de pantalla
   antes de recogerlo. */
.anuncio.anuncio--vacio { display: none; }

/* Dato pendiente de confirmar en un artículo YMYL.
   Deliberadamente incómodo de mirar: mientras quede uno, el artículo no está
   listo para publicarse. */
.verificar {
  display: block; margin: 1rem 0; padding: .85rem 1rem;
  border-left: 4px solid var(--warn); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: repeating-linear-gradient(135deg, var(--warn-bg) 0 10px, #fff9ef 10px 20px);
  font-size: .88rem; line-height: 1.55; color: #8a3f06;
}
.verificar b:first-child {
  display: inline-block; margin-right: .5rem; padding: .1rem .45rem;
  border-radius: 5px; background: var(--warn); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .09em; vertical-align: .08em;
}

/* Listado de artículos en los índices de /legal/ y /guias/: la misma tarjeta,
   con sitio para el titular y una línea de resumen debajo. */
.rel-links--articulos { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .7rem; }
.rel-link--articulo { align-items: flex-start; padding: 1.05rem 1.15rem; }
.rel-link--articulo > span:first-child { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.rel-link--articulo strong {
  font-family: var(--display); font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25;
}
.rel-link--articulo .tiny { font-weight: 400; line-height: 1.5; }
.rel-link--articulo svg { margin-top: .3rem; }

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding-block: 3rem 2rem; margin-top: 3rem; }
.footer-grid { display: grid; gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: .55rem; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.03em; }
.footer-brand svg { width: 24px; height: 24px; }
.site-footer h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 700; margin-bottom: .7rem; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
.site-footer a { font-size: .89rem; transition: color .2s var(--ease-out); }
.site-footer a:hover { color: #fff; }
.footer-disclosure {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem; line-height: 1.6; color: rgba(255, 255, 255, .58);
}
.footer-disclosure p + p { margin-top: .6rem; }
.footer-disclosure strong { color: rgba(255, 255, 255, .85); font-weight: 620; }
/* .42 de opacidad daba 4,09:1 sobre el fondo del pie; .45 sube a 4,53:1. */
.footer-legal { margin-top: 1.2rem; font-size: .78rem; color: rgba(255, 255, 255, .45); display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* Franja de afiliados visible en cada página */
.aff-strip {
  background: var(--ground-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: .8rem; color: var(--muted); padding-block: .7rem; line-height: 1.5;
}
.aff-strip .wrap { display: flex; gap: .55rem; align-items: flex-start; }
.aff-strip svg { width: 15px; height: 15px; flex: none; margin-top: .18rem; color: var(--muted-2); }
.aff-strip a { text-decoration: underline; text-underline-offset: 2px; }
.aff-strip a:hover { color: var(--accent); }

/* =============================================================
   8. EFECTOS
   ============================================================= */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@view-transition { navigation: auto; }

/* =============================================================
   9. RESPONSIVE
   ============================================================= */
/* El menú desplegable se usa hasta 959 px: por debajo de ~900 la fila de
   enlaces no cabe junto a la marca y quedaba cortada por `overflow-x: clip`. */
@media (max-width: 959px) {
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: .6rem var(--gutter) 1.1rem; box-shadow: var(--sh-2);
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links[hidden] { display: none; }
  .nav-links a { padding: .78rem .4rem; border-radius: 8px; font-size: 1rem; }
  /* En móvil las dos herramientas ocupan una fila propia, a partes iguales */
  .nav-grupo { margin: .5rem 0; }
  .nav-herramientas { display: flex; width: 100%; }
  .nav-links a.nav-herramienta { flex: 1; justify-content: center; padding: .7rem .5rem; font-size: .95rem; }
  .nav-toggle { display: grid; place-items: center; }
}

@media (max-width: 719px) {
  /* --- Comparador en móvil: primera columna más estrecha y celdas compactas --- */
  .compare-table { font-size: .84rem; }
  .compare-table th, .compare-table td { padding: .6rem .65rem; }
  .compare-table th:first-child { width: 118px; min-width: 118px; }
  .compare-table thead th:not(:first-child),
  .compare-table tbody td { min-width: 116px; }
  .compare-table thead th { font-size: .84rem; }

  /* --- Calculadora de autonomía en móvil --- */
  .result-row { grid-template-columns: 1fr; gap: .55rem; }
  .result-row > * { min-width: 0; }
  .result-figures { gap: 1.6rem; }
  .result-name { overflow-wrap: anywhere; }
  .result-status { justify-self: start; }
}

/* Teléfonos estrechos (375 px y menos) */
@media (max-width: 539px) {
  .radar-svg { max-width: 100%; }
  .radar-legend li { font-size: .84rem; }
  .estado-chip { padding: .7rem .8rem; }
  .estado-chip b { font-size: 1.3rem; }
  .verdict-title { font-size: 1.14rem; }
  .verdict-note { font-size: .84rem; padding: .7rem .8rem; }
  .scooter-card-specs dd { font-size: .92rem; }
  .compare-slots { grid-template-columns: 1fr 1fr; }
  .savings-cmp-item b { font-size: 1.2rem; }
  .breakdown li { font-size: .8rem; gap: .6rem; }
  .breakdown li span { min-width: 0; overflow-wrap: anywhere; }
}

@media (min-width: 960px) {
  .nav-links { display: flex !important; }
  .nav-toggle { display: none; }
}

@media (min-width: 720px) {
  .hero-split { grid-template-columns: 1.25fr .95fr; gap: 3rem; }
  .pc { grid-template-columns: 1fr 1fr; }
  .result-row { grid-template-columns: 1.6fr auto auto; }
  .radar-wrap { grid-template-columns: 1fr 1fr; }
  .savings-cmp { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .ficha-head { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
}

/* Se fija el panel solo si la ventana es lo bastante alta para mostrarlo
   entero (desfase superior + alto del panel). Si no cabe, se comporta como
   contenido normal y se desplaza con la página: siempre alcanzable.
   El max-height es la red de seguridad para tamaños intermedios. */
@media (min-width: 960px) and (min-height: 920px) {
  .tool-panel {
    position: sticky;
    top: calc(var(--nav-h) + 16px);
    max-height: calc(100vh - var(--nav-h) - 2rem);
    max-height: calc(100dvh - var(--nav-h) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 960px) {
  .verif-layout { grid-template-columns: 400px 1fr; gap: 2rem; }
  .tool-layout { grid-template-columns: 380px 1fr; gap: 2rem; }
  .ficha-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2.4rem; align-items: start; }
  .ficha-aside { position: sticky; top: calc(var(--nav-h) + 16px); }
}

@media (min-width: 1280px) {
  .ficha-head { grid-template-columns: 1.05fr 1fr; gap: 3rem; }
}

/* =============================================================
   10. REDUCED MOTION — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transition-duration: .01ms; }
  @view-transition { navigation: none; }
}

/* =============================================================
   11. IMPRESIÓN
   ============================================================= */
@media print {
  .site-header, .site-footer, .aff-strip, .card-actions, .ficha-buy, .nav-toggle { display: none !important; }
  body { background: #fff; }
  .verdict { border-width: 2px; }
}

/* =============================================================================
   FICHA · JERARQUÍA DE EVIDENCIA  (bloque 13)
   El estado jurídico manda arriba; lo editorial se identifica como editorial;
   y cada cifra puede rastrearse hasta su fuente.
   ========================================================================== */

/* Marca editorial: nunca debe leerse como una categoría legal, así que va en
   un chip aparte del título y con su descargo debajo. */
.verdict-chip {
  display: inline-block; margin-top: .55rem;
  padding: .28rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .85); border: 1px dashed rgba(13, 17, 23, .22);
  font-size: .78rem; font-weight: 650; color: var(--ink-2);
}

.verdict-porque-titulo {
  margin-top: 1.05rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.verdict-datos {
  margin: .5rem 0 0; padding: 0; list-style: none;
  display: grid; gap: .4rem; max-width: 72ch;
}
.verdict-datos li {
  font-size: .94rem; line-height: 1.5; color: var(--ink-2);
  padding: .5rem .75rem; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(13, 17, 23, .08);
}
.verdict-descargo {
  margin-top: .85rem; font-size: .84rem; line-height: 1.5;
  color: var(--ink-3); max-width: 72ch; font-style: italic;
}

/* Evidencia técnica: el dato, qué significa y de dónde sale. */
.evidencia { margin-top: 0; }
.evidencia-cabecera { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.evidencia-nivel {
  padding: .25rem .65rem; border-radius: 999px;
  font-size: .76rem; font-weight: 700; border: 1px solid;
}
.evidencia-nivel--ok   { background: var(--ok-bg);   color: var(--ok-deep);   border-color: var(--ok-line); }
.evidencia-nivel--warn { background: var(--warn-bg); color: #8a3f06;          border-color: var(--warn-line); }
.evidencia-nivel--stop { background: var(--stop-bg); color: var(--stop-deep); border-color: var(--stop-line); }

.evidencia-lista { margin: 1.1rem 0 0; display: grid; gap: .7rem; }
.evidencia-item {
  display: grid; gap: .15rem;
  padding: .8rem .95rem; border-radius: var(--radius-sm);
  background: var(--ground); border: 1px solid var(--line);
}
.evidencia-item dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}
.evidencia-item dd { margin: 0; }
.evidencia-valor { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.evidencia-matiz { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.evidencia-cita  { display: block; margin-top: .4rem; font-size: .82rem; line-height: 1.45; color: var(--muted-2); }

.evidencia-fuente {
  display: flex; gap: .6rem; align-items: flex-start; margin-top: 1rem;
  font-size: .88rem; line-height: 1.55; color: var(--ink-2); max-width: 74ch;
}
.evidencia-fuente svg { width: 17px; height: 17px; flex: none; margin-top: .2rem; color: var(--accent); }
.evidencia-fecha { margin-top: .6rem; }

@media (min-width: 720px) {
  .evidencia-lista { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   RECOMENDACIÓN PARA MODELOS EN REVISIÓN  (bloque 11)
   Va rotulada como recomendación de producto y se distingue a propósito del
   bloque de veredicto: otro fondo, otro borde, etiqueta explícita. Nunca debe
   confundirse con la clasificación legal.
   ========================================================================== */
.reco {
  border: 1.5px solid var(--accent-line); border-radius: var(--radius);
  background: var(--accent-soft); padding: 1.15rem 1.15rem 1.25rem;
}
.reco-etiqueta {
  display: inline-block; padding: .22rem .6rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--accent-line);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-dark);
}
.reco-titulo { margin-top: .7rem; font-size: 1.22rem; line-height: 1.25; color: var(--ink); }
.reco-texto  { margin-top: .5rem; font-size: .97rem; line-height: 1.55; color: var(--ink-2); max-width: 66ch; }
.reco-matiz  { margin-top: .6rem; font-size: .88rem; line-height: 1.5; color: var(--ink-3); max-width: 70ch; }
.reco-vacio {
  display: flex; gap: .6rem; align-items: flex-start; margin-top: .9rem;
  padding: .75rem .9rem; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--accent-line);
  font-size: .9rem; line-height: 1.5; color: var(--ink-2);
}
.reco-vacio svg { width: 17px; height: 17px; flex: none; margin-top: .18rem; color: var(--accent); }

.reco-alts { display: grid; gap: .7rem; margin-top: 1rem; }
.reco-alt {
  display: flex; gap: .8rem; align-items: center;
  padding: .6rem; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line);
}
.reco-alt-img { flex: none; width: 74px; height: 74px; border-radius: var(--radius-sm); overflow: hidden; background: var(--ground); }
.reco-alt-img img { width: 100%; height: 100%; object-fit: contain; }
.reco-alt-nombre { margin: 0; font-size: 1rem; line-height: 1.25; }
.reco-alt-nombre a { color: var(--ink); text-decoration: none; }
.reco-alt-nombre a:hover { text-decoration: underline; }
.reco-alt-datos {
  margin: .3rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .1rem .7rem;
  font-size: .84rem; color: var(--muted-2);
}
.reco-alt-datos li + li::before { content: "·"; margin-right: .7rem; color: var(--line-2); }

.reco-acciones { margin-top: 1.05rem; }
.reco-acciones .btn { width: 100%; justify-content: center; }
.reco-links { margin-top: .8rem; font-size: .84rem; color: var(--muted-2); }
.reco-links a { color: var(--accent-dark); }
.reco-zona { margin-bottom: 1.2rem; }

@media (min-width: 720px) {
  .reco { padding: 1.4rem 1.5rem 1.5rem; }
  .reco-alts { grid-template-columns: repeat(3, 1fr); }
  .reco-alt { flex-direction: column; align-items: flex-start; }
  .reco-alt-img { width: 100%; height: 118px; }
  .reco-acciones .btn { width: auto; }
}

/* =============================================================================
   VERIFICADOR  (bloque 12)
   El resultado dejó de ser un semáforo: son ocho secciones que se leen en
   orden, así que lo importante es la jerarquía de los subtítulos.
   ========================================================================== */
.verif-grupo {
  margin-top: 1.1rem; padding: .9rem 1rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ground);
}
.verif-grupo legend {
  padding: 0 .4rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2);
}
.verif-fila { display: grid; gap: .8rem; }
.verif-fila .field { margin: 0; }
.field-opt { font-weight: 400; color: var(--muted-2); font-size: .82rem; }
.verif-grupo input[type="text"],
.verif-fila input[type="text"] {
  width: 100%; padding: .7rem .8rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); font: inherit; color: var(--ink);
}

.verif-detalle { margin-top: 1rem; }
.verif-detalle h3 {
  margin-top: 1.3rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
}
.verif-detalle h3:first-child { margin-top: 0; }
.verif-detalle p { margin-top: .45rem; font-size: .95rem; line-height: 1.55; color: var(--ink-2); max-width: 70ch; }
.verif-lista { margin: .5rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.verif-lista li {
  padding: .6rem .8rem; border-radius: var(--radius-sm);
  background: var(--ground); border: 1px solid var(--line);
  font-size: .93rem; line-height: 1.5; color: var(--ink-2);
}
.verif-cita {
  margin: .6rem 0 0; padding: .7rem .9rem; border-left: 3px solid var(--accent-line);
  background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .87rem; line-height: 1.55; color: var(--ink-3);
}
.verif-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.verif-acciones .btn { flex: 1 1 100%; justify-content: center; }
.verif-descargo { margin-top: 1rem; font-size: .82rem; line-height: 1.5; color: var(--muted-2); }

@media (min-width: 640px) {
  .verif-fila { grid-template-columns: repeat(2, 1fr); }
  .verif-fila:has(.field:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
  .verif-acciones .btn { flex: 0 0 auto; }
}

/* =============================================================
   ARTÍCULOS EN MARKDOWN (bloque 15)
   ============================================================= */
/* Las tablas de los artículos comparan casos (ciclo / fuera de ciclo / sin
   datos) y tienen tres o cuatro columnas. En un teléfono no caben: se
   desplaza la tabla, nunca la página. */
.prose .tabla-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper);
}
.prose .tabla-articulo {
  width: 100%; min-width: 520px; border-collapse: collapse;
  font-size: .9rem; line-height: 1.45;
}
.prose .tabla-articulo th,
.prose .tabla-articulo td {
  padding: .65rem .8rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.prose .tabla-articulo thead th {
  background: var(--ground); color: var(--ink-3);
  font-weight: 650; font-size: .82rem; letter-spacing: .01em;
}
.prose .tabla-articulo tbody tr:last-child td { border-bottom: 0; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 90px; }

/* Aviso bajo la cabecera: «información general, no asesoría legal». */
.aviso-articulo {
  margin-top: 1rem; padding: .75rem .95rem;
  border-radius: var(--radius-sm);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: #7a3a06; font-size: .92rem; line-height: 1.5;
}

/* CTA de cierre: uno por artículo, el que corresponde al tipo de contenido. */
.cta-pilar {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem;
  align-items: start;
  padding: 1.2rem; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.cta-pilar-ico {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.cta-pilar-ico svg { width: 22px; height: 22px; }
.cta-pilar-txt strong { display: block; font-size: 1.05rem; }
.cta-pilar-txt p { margin-top: .3rem; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.cta-pilar .btn { grid-column: 1 / -1; justify-self: stretch; }
@media (min-width: 640px) {
  .cta-pilar { grid-template-columns: auto 1fr auto; align-items: center; padding: 1.3rem 1.4rem; }
  .cta-pilar .btn { grid-column: auto; justify-self: end; white-space: nowrap; }
}

/* Normativa y fuente primaria al pie de los artículos escritos a mano. */
.norma-fuente {
  margin-top: 2.4rem; padding: 1.1rem 1.2rem;
  border-radius: var(--radius-sm);
  background: var(--ground); border: 1px solid var(--line);
}
.norma-fuente-ref { margin-top: .6rem; font-size: .95rem; }
.norma-fuente-cita {
  margin: .8rem 0; padding-left: .9rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-3); font-size: .95rem; line-height: 1.55;
}
.norma-fuente a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   FUENTES Y METODOLOGÍA (bloque 16)
   ============================================================= */
.fuentes .tabla-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.tabla-fuentes {
  width: 100%; min-width: 560px; border-collapse: collapse;
  font-size: .88rem; line-height: 1.45;
}
.tabla-fuentes th, .tabla-fuentes td {
  padding: .6rem .75rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.tabla-fuentes thead th { background: var(--ground); color: var(--ink-3); font-weight: 650; font-size: .8rem; }
.tabla-fuentes tbody tr:last-child td { border-bottom: 0; }
.tabla-fuentes a, .fuentes p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.tabla-fuentes td:last-child { white-space: nowrap; }

/* Alerta de revisión: ámbar, no rojo. No dice que el veredicto esté mal,
   dice que su base necesita volver a leerse. */
.fuentes-alerta {
  margin-top: .9rem; padding: .8rem .95rem;
  border-radius: var(--radius-sm);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: #7a3a06; font-size: .92rem; line-height: 1.5;
}
.fuentes-alerta ul { margin: .4rem 0 .4rem 1.1rem; }
.fuentes-alerta li + li { margin-top: .25rem; }
.verdict-revision {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .7rem; padding: .45rem .75rem;
  border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: #7a3a06;
}
.verdict-revision svg { width: 16px; height: 16px; flex: none; }
.footer-revision { opacity: .85; }

/* =============================================================
   AVISOS COMERCIALES (bloque 17)
   ============================================================= */
/* Aviso de comisión: discreto pero legible, siempre junto a los botones.
   No se esconde en gris claro: es información que el lector tiene derecho
   a ver antes de hacer clic. */
.aviso-comision {
  display: flex; gap: .45rem; align-items: flex-start;
  margin-top: .75rem; font-size: .82rem; line-height: 1.45; color: var(--muted);
}
.aviso-comision svg { width: 15px; height: 15px; flex: none; margin-top: .12rem; }
.aviso-comision a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.aviso-comision--grid { margin-top: 1rem; }

/* Aviso previo a la compra en zona gris: recomendación de simplicidad
   normativa, en ámbar como el resto de la zona gris, sin tono de alarma. */
.aviso-zona-compra {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: .9rem; padding: .7rem .85rem;
  border-radius: var(--radius-sm);
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: #7a3a06; font-size: .88rem; line-height: 1.5;
}
.aviso-zona-compra svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; }
.aviso-zona-compra a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 2px; }
/* La frase de transparencia, arriba del aviso de afiliados. */
.aviso-destacado {
  padding: .9rem 1.05rem; border-radius: var(--radius-sm);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--ink-3);
}

/* =============================================================
   INTEGRACIÓN FINAL (bloque 19)
   ============================================================= */
/* Qué es el sitio y por qué puede creerse lo que dice: va en la portada,
   debajo de los botones, sin robarle protagonismo al titular. */
.hero-que-somos {
  margin-top: 1.4rem; font-size: .9rem; line-height: 1.55;
  color: rgba(255, 255, 255, .72); max-width: 62ch;
}
.hero-confianza { margin-top: 1rem; display: grid; gap: .55rem; max-width: 62ch; }
.hero-confianza li {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .87rem; line-height: 1.5; color: rgba(255, 255, 255, .8);
}
.hero-confianza svg { width: 16px; height: 16px; flex: none; margin-top: .18rem; color: rgba(255, 255, 255, .55); }
.hero-confianza strong { color: #fff; font-weight: 620; }
.hero-confianza a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* El siguiente paso del recorrido: una sola salida clara por página. */
.paso-siguiente {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.2rem; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.paso-siguiente:hover { border-color: var(--accent); transform: translateY(-1px); }
.paso-siguiente-txt { display: grid; gap: .15rem; }
.paso-siguiente-txt strong { font-size: 1.05rem; }
.paso-siguiente-txt .small { color: var(--muted); }
.paso-siguiente svg { width: 22px; height: 22px; flex: none; color: var(--accent); }

.requisitos-bloque .obliga { margin-top: .8rem; }
.compra-bloque .ficha-buy { margin-top: .9rem; }

/* ---------- Análisis propio de cada modelo (capa 3 · interpretación) -------
   Bloque nuevo tras el informe de Search Console del 20-09-2026: las fichas
   compartían la mitad de su texto. Aquí va lo que solo sirve para ese modelo. */
.analisis-modelo p { margin: 0 0 .9rem; line-height: 1.65; }
.analisis-modelo p:last-child { margin-bottom: 0; }
.analisis-modelo a { text-decoration: underline; text-underline-offset: .15em; }

/* ---------- Texto propio de páginas que no son ficha ni artículo ----------
   Categorías, comparador e índices de sección. Añadido el 26-09-2026: eran
   páginas de navegación de 150-300 palabras, justo lo que Google marcó como
   «contenido de poco valor». */
.texto-pagina p { margin: 0 0 .9rem; line-height: 1.65; max-width: 68ch; }
.texto-pagina p:last-child { margin-bottom: 0; }
.texto-pagina h3 { margin: 1.6rem 0 .6rem; font-size: 1.05rem; }
.texto-pagina ul { margin: 0 0 .9rem 1.1rem; }
.texto-pagina li { margin-bottom: .45rem; line-height: 1.6; }
.texto-pagina a { text-decoration: underline; text-underline-offset: .15em; }

.reparto-legal {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 12px;
  padding: .85rem 1rem; margin: 0; line-height: 1.55;
}
.reparto-legal svg { flex: 0 0 auto; margin-top: .15rem; }