/*
Theme Name: HG_Framework
Theme URI: http://www.hectorgarrofe.com
Author: Hector Garrofe
Author URI: http://www.hectorgarrofe.com
Description: Theme de tecnorival.com · diseño «Editorial con criterio» (sep-2026).
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hg_framework
*/

/* ==========================================================================
   tecnorival.com · Dirección final «Editorial con criterio»
   Hoja única compartida por home, ficha, categoría y componentes.
   Está pensada para convertirse en style.css del theme: rutas de fuentes
   relativas (fonts/ → assets/fonts/ en el theme), sin dependencias. Se minifica al publicar.
   La creatividad ficticia de las maquetas está en proto.css, que NO pasa al theme.
   Índice
     01 Fuentes · 02 Tokens · 03 Base · 04 Utilidades · 05 Iconos
     06 Botones y controles · 07 Etiquetas · 08 Nota · 09 Cabecera
     10 Megamenú y desplegables · 11 Menú móvil · 12 Buscador (paleta)
     13 Cabecera de sección · 14 Hero · 15 Categorías · 16 Tarjeta
     17 Tarjeta compacta · 18 Carril y rejillas · 19 Cara a cara
     20 Banda de método · 21 Guías · 22 Publicidad · 23 Formatos pagados
     24 Dónde comprar y caja de precio · 25 Bandeja del comparador
     26 Ficha · 27 Categoría · 28 Pie · 29 Páginas estáticas
     30 Responsive · 31 Movimiento
   ========================================================================== */

/* 01 · Fuentes ------------------------------------------------------------ */
@font-face{font-family:"Outfit";src:url(assets/fonts/outfit-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";src:url(assets/fonts/outfit-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20CF}
/* Una sola familia extra, un solo archivo (regular, subconjunto latin, 21 KB). Sin itálica: el énfasis es color. */
@font-face{font-family:"Archivo Condensed JB";src:url(assets/fonts/archivo-condensed-620.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Titulares: Archivo (Omnibus-Type, OFL) fijada en anchura 75 y peso 620, subconjunto latino (12,6 KB).
   Se declara como 400 para que los atajos «font:400 … var(--serif)» la usen tal cual.
   Respaldos métricos (CLS): Arial Narrow (macOS, Windows con Office) y, si no está, Arial Bold / Roboto Bold. */
@font-face{font-family:"Headline Fallback N";src:local("Arial Narrow"),local("ArialNarrow");size-adjust:99%;ascent-override:88%;descent-override:21%;line-gap-override:0%}
@font-face{font-family:"Headline Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:76%;ascent-override:88%;descent-override:21%;line-gap-override:0%}

/* 02 · Tokens ------------------------------------------------------------- */
:root{
  /* Tinta y papel */
  --ink:#12151F;          /* texto, nota, botón primario, filete de sección, pie · 18,2:1 */
  --ink-2:#3F4452;        /* texto secundario largo · 9,7:1 */
  --muted:#60646E;        /* metadatos, kickers · 5,9:1 sobre blanco, 5,4:1 sobre papel */
  --paper:#FFFFFF;        /* superficies y fondo de TODA imagen de producto */
  --paper-2:#F6F4EF;      /* bandas: publicidad, tablas zebra, pies de caja */
  --paper-3:#EEEBE3;      /* hover sobre papel */
  --band:#FAF9F5;         /* banda del hero */
  --plate:#EFEBE2;        /* placa de icono de categoría (visible sobre blanco y sobre --band) */
  --rule:#E5E2DA;         /* filete 1 px (decorativo) */
  --rule-2:#D3CFC5;       /* bordes de inputs, chips y botones fantasma */
  --rule-3:#B9B5AA;       /* hover de tarjetas (decorativo) */
  --control:#8A857A;      /* borde de controles: checkbox, campos · 3,7:1 sobre blanco (WCAG 1.4.11) */
  /* Señal (un solo acento) */
  --blue:#1F4FE0;         /* enlaces, dato medido, CTA de tienda · 6,5:1 */
  --blue-600:#1A40B8;
  --blue-50:#EEF2FE;
  --blue-100:#DCE5FF;
  --blue-on-ink:#8FA9FF;  /* acento sobre tinta · 8,1:1 */
  /* Pagado: exclusivo de «Patrocinado» y «Publicidad» nativa */
  --paid:#7A4F00; --paid-bg:#FFF4DB; --paid-line:#EBD6A6; --paid-edge:#D9A941;
  /* Funcionales */
  --offer:#C4122F; --offer-bg:#FDECEE;
  --pos:#157F3B; --neg:#B42318;
  /* Sobre tinta */
  --on-ink:#FFFFFF; --on-ink-2:#C9CCD3; --on-ink-3:#9A9FAA; --ink-line:rgba(255,255,255,.12); --ink-raise:rgba(255,255,255,.05);

  /* Tipografía */
  --serif:"Archivo Condensed JB","Headline Fallback N","Headline Fallback",system-ui,sans-serif; /* familia de los titulares (grotesca estrecha) */
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-display:52px;  --lh-display:1.0;
  --fs-h1:46px;       --lh-h1:1.02;
  --fs-h2:32px;       --lh-h2:1.06;
  --fs-h2-sm:26px;
  --fs-h3:18px;       /* Outfit 600: títulos de guía, subtítulos de ficha */
  --fs-title:16px;    /* título de tarjeta */
  --fs-lead:17px;
  --fs-body:16px;
  --fs-article:18px;
  --fs-ui:15px;
  --fs-sm:13.5px;
  --fs-meta:12.5px;
  --fs-xs:12px;       /* notas al pie de componente, meta de tile */
  --fs-2xs:11.5px;    /* «desde», pesos, contadores */
  --fs-kicker:11px;
  --fs-micro:10.5px;
  --fs-data:30px;     /* precio grande, nota L */

  /* Espaciado (base 4) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:56px;
  --section:36px;     /* padding vertical de sección */
  --sh-gap:20px;      /* cabecera de sección → contenido */

  /* Forma */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --r-plate:23%;   /* placas: radio proporcional */
  --sh-pop:0 18px 44px -12px rgba(18,21,31,.22),0 2px 6px rgba(18,21,31,.06);   /* capas flotantes */
  --sh-raise:0 1px 0 rgba(18,21,31,.04),0 12px 32px -18px rgba(18,21,31,.28);  /* tarjeta del hero */
  --sh-up:0 -8px 24px -12px rgba(18,21,31,.25);                                 /* barras fijas inferiores */

  /* Capas */
  --z-tabs:30; --z-header:50; --z-tray:60; --z-mega:70; --z-overlay:80; --z-modal:90; --z-toast:100;

  /* Maquetación · breakpoints: móvil < 768 · tableta 768–1023 · escritorio ≥ 1024 · ancho ≥ 1280 */
  --container:1200px; --gutter:24px; --header-h:64px;
}

/* 03 · Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 56px)}
/* Barras fijas inferiores: el JS que las muestra añade la clase al body para que no tapen el final de la página */
body.has-tray{padding-bottom:100px}
body.has-buybar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased;font-synthesis:none;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
[hidden]{display:none!important}
.site-footer :focus-visible,.band-ink :focus-visible,.tray :focus-visible,.pcard--n1 .pcard__bar :focus-visible{outline-color:var(--blue-on-ink)}   /* azul claro sobre tinta: 8,1:1 */
::selection{background:var(--blue-100)}

/* 04 · Utilidades --------------------------------------------------------- */
.wrap{max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.num,.price,.score{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:var(--z-toast);background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r-sm)}
.skip-link:focus{top:12px}
.kicker{font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.link{display:inline-flex;align-items:center;gap:4px;color:var(--blue);font:600 14px/1.2 var(--sans);white-space:nowrap}
.link:hover{color:var(--blue-600);text-decoration:underline;text-underline-offset:3px}
.link .ic{width:16px;height:16px}
.muted{color:var(--muted)}
.serif{font-family:var(--serif);font-weight:400}
.hl{color:var(--blue)}                          /* énfasis de titular: color, nunca itálica */
.sec{padding:var(--section) 0}

/* 05 · Iconos ------------------------------------------------------------- */
/* UI (Tabler 3.16, en el theme con <i class="ti ti-…">; aquí SVG en línea) */
.ic{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ic--s{width:16px;height:16px}
.ic--l{width:24px;height:24px}
/* Categoría «Plano técnico»: rejilla 32, trazo tinta + un único detalle en azul */
.cat-icon{--ic-stroke:var(--ink);--ic-ac:var(--blue);--ic-tint:var(--blue-100);--ic-sw:2;width:32px;height:32px;flex:none;fill:none;stroke:var(--ic-stroke);stroke-width:var(--ic-sw);stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* Globales (no «.cat-icon .ac»): así también funcionan dentro de <use> */
.ac{stroke:var(--ic-ac,#1F4FE0)}
.acf{fill:var(--ic-ac,#1F4FE0);stroke:none}
.tint{fill:var(--ic-tint,#DCE5FF);stroke:none}   /* una superficie clave por icono (pantalla, lente, esfera…) */
.cat-icon--20{width:20px;height:20px;--ic-sw:2.4}
.cat-icon--24{width:24px;height:24px;--ic-sw:2.2}
.cat-icon--28{width:28px;height:28px;--ic-sw:2.1}
.cat-icon--32{width:32px;height:32px;--ic-sw:2}
.cat-icon--44{width:44px;height:44px;--ic-sw:1.8}
.plate{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-plate);background:var(--plate);transition:background .15s}
.plate--40{width:40px;height:40px}
.plate--48{width:48px;height:48px}
.plate--52{width:52px;height:52px}
.plate--64{width:64px;height:64px}
/* Estados: hover/actual = placa de tinta, trazo blanco, acento azul claro */
.is-inked .plate,.plate.is-inked{background:var(--ink)}
.is-inked .cat-icon,.plate.is-inked .cat-icon,.on-ink .cat-icon{--ic-stroke:#fff;--ic-ac:var(--blue-on-ink);--ic-tint:rgba(143,169,255,.25)}
.on-ink .plate{background:rgba(255,255,255,.08)}

/* 06 · Botones y controles ----------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-sm);border:1.5px solid transparent;font:600 var(--fs-ui)/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s;text-decoration:none}
.btn .ic{width:16px;height:16px}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:#2A2F3D}
.btn--buy{background:var(--blue);color:#fff}             /* único botón azul: sale a una tienda */
.btn--buy:hover{background:var(--blue-600)}
.btn--ghost{background:#fff;border-color:var(--rule-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--paid{background:#fff;border-color:var(--paid-line);color:var(--paid)}   /* CTA de lo pagado: nunca parece el de compra */
.btn--paid:hover{border-color:var(--paid)}
.btn--inverse{background:#fff;color:var(--ink)}
.btn--inverse:hover{background:var(--paper-3)}
.btn--sm{height:36px;padding:0 13px;font-size:var(--fs-sm);gap:6px}
.btn--xs{height:30px;padding:0 10px;font-size:13px;gap:5px}
.btn--block{width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none;cursor:default}
.iconbtn{position:relative;width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--rule-2);background:#fff;color:var(--ink);cursor:pointer}
.iconbtn:hover{border-color:var(--ink)}
.iconbtn[disabled]{opacity:.4;cursor:default}
.iconbtn--bare{border-color:transparent}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-md);background:var(--blue);color:#fff;font:700 var(--fs-2xs)/1 var(--sans);font-variant-numeric:tabular-nums}
.iconbtn .count{position:absolute;right:1px;top:1px;min-width:17px;height:17px;font-size:var(--fs-micro);padding:0 4px}
/* Checkbox «Comparar» */
.cmp{display:inline-flex;align-items:center;gap:6px;font:500 var(--fs-meta)/1 var(--sans);color:var(--ink-2);cursor:pointer;white-space:nowrap;user-select:none;min-height:28px}
.cmp input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--control);border-radius:var(--r-xs);display:grid;place-items:center;background:#fff;cursor:pointer;flex:none}
.cmp input:checked{background:var(--ink);border-color:var(--ink)}
.cmp input:checked::after{content:"";width:8px;height:4px;border:2px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.cmp:hover input{border-color:var(--ink)}
.cmp input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--rule-2);color:var(--ink);font:500 13px/1 var(--sans);white-space:nowrap;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip .vs{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.chip sup{font-size:var(--fs-kicker);color:var(--muted);top:0;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}   /* el estado visual sale de la semántica */
.chip[aria-pressed="true"] sup{color:var(--on-ink-2)}
/* Campos */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 13px/1.2 var(--sans)}
.input,.select,.textarea{height:44px;width:100%;border:1px solid var(--control);border-radius:var(--r-sm);background:#fff;padding:0 12px;font-size:var(--fs-ui)}
.textarea{height:auto;min-height:110px;padding:10px 12px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.check{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-2)}
.check input{width:16px;height:16px;margin:2px 0 0;accent-color:var(--ink)}

/* 07 · Etiquetas --------------------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-xs);font:600 var(--fs-micro)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tag--n1{background:var(--ink);color:#fff;height:24px;padding:0 8px 0 7px;gap:6px}
.tag--n1 b{font:400 15px/1 var(--serif);letter-spacing:0;text-transform:none;margin-top:0}
.tag--seg{background:var(--paper-2);color:var(--ink-2)}
.tag--new{background:var(--blue-50);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue-100)}
.tag--offer{background:var(--offer);color:#fff}
.tag--paid{background:var(--paid-bg);color:var(--paid);box-shadow:inset 0 0 0 1px var(--paid-line)}
.tag--best{background:var(--blue);color:#fff}
.tag--official{background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-2)}
/* Barra pagada: el formato común de todo lo pagado dentro del contenido */
.paidbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 8px;min-height:40px;padding:0 10px 0 12px;background:var(--paid-bg);color:var(--paid);border-bottom:1px solid var(--paid-line);font-size:var(--fs-meta)}
.paidbar b{font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
/* Anunciante (texto) y ⓘ (enlace a «Cómo trabajamos»): el nombre accesible del enlace dice adónde va */
.paidbar__r{display:inline-flex;align-items:center;gap:2px;min-width:0}
.paidbar__who{font-weight:600;white-space:nowrap}   /* el anunciante nunca se recorta: si no cabe, la barra pasa a 2 líneas */
.paidbar__why{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--paid);flex:none}
.paidbar__why::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.paidbar__why:hover{background:rgba(122,79,0,.1)}
.paidbar .ic{width:16px;height:16px}
/* Etiqueta de display: texto fuera de la creatividad */
.adlabel{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}   /* la etiqueta pesa más que la venta de al lado */

/* 08 · Nota --------------------------------------------------------------- */
.score{display:inline-grid;place-items:center;background:var(--ink);color:#fff;font-weight:600;border-radius:var(--r-xs);letter-spacing:-.01em;flex:none;line-height:1}
.score--xs{height:22px;min-width:31px;padding:0 5px;font-size:var(--fs-meta)}
.score--s{height:28px;min-width:38px;padding:0 6px;font-size:var(--fs-ui);border-radius:var(--r-xs)}
.score--m{width:48px;height:48px;font-size:20px;border-radius:var(--r-sm)}
.score--l{width:80px;height:80px;font-size:34px;border-radius:var(--r-md);align-content:center;gap:4px}
.score--l small{display:block;font-size:var(--fs-kicker);font-weight:500;opacity:.7;letter-spacing:0}
.score--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}   /* nota real de un patrocinado fuera del ranking */
.score--none{background:#fff;color:var(--muted);box-shadow:none;border:1px dashed var(--rule-3);font-size:var(--fs-kicker);font-weight:600;letter-spacing:.02em;padding:0 7px}
.verdict{font:600 var(--fs-meta)/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.ruler{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;height:5px;width:100%}
.ruler i{display:block;background:var(--rule);border-radius:1px;position:relative;overflow:hidden}
.ruler i.f{background:var(--blue)}
.ruler i.p::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,50%);background:var(--blue)}
.ruler--l{height:7px;gap:3px}
.on-ink .ruler i{background:rgba(255,255,255,.14)}
.on-ink .ruler i.f,.on-ink .ruler i.p::after{background:var(--blue-on-ink)}
.scorerow{display:flex;align-items:center;gap:10px;min-width:0}
.scorerow__meta{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
/* Criterio: etiqueta · peso · valor, y la regla continua con marcas por punto */
.crit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:baseline}
.crit__l{font-size:var(--fs-sm);color:var(--ink-2);min-width:0}
.crit__l small{font-size:var(--fs-2xs);color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
.crit__v{font:600 var(--fs-sm)/1 var(--sans);font-variant-numeric:tabular-nums}
.crit__bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--rule);position:relative;overflow:hidden}
.crit__bar::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--v);background:var(--blue)}
.crit__bar::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.95) calc(10% - 1px) 10%)}
/* Barra de pesos apilada (categoría, «Cómo puntuamos») */
.wbar{display:flex;height:12px;border-radius:var(--r-xs);overflow:hidden;gap:2px}
.wbar span{display:block}
.wlegend{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px;margin-top:10px;font-size:var(--fs-meta);color:var(--ink-2)}
.wlegend li{display:flex;justify-content:space-between;gap:8px}
.wlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;vertical-align:0}
.wlegend b{font-weight:600;font-variant-numeric:tabular-nums}
.w1{background:#12151F}.w2{background:#1F4FE0}.w3{background:#4F74E8}.w4{background:#7F9AEE}.w5{background:#A9BBF3}.w6{background:#CFDAF8}

/* 09 · Cabecera ---------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:#fff;border-bottom:1px solid var(--rule)}
.site-header__in{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:9px;font:700 21px/1 var(--sans);letter-spacing:-.03em;flex:none;color:var(--ink)}
.logo__mark{width:28px;height:28px;border-radius:7px;background:var(--ink);display:grid;place-items:center;flex:none}
.logo__mark svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.logo em{font-style:normal;color:var(--blue)}
.site-nav{display:flex;align-items:center;gap:2px;height:100%}
.site-nav__item{display:inline-flex;align-items:center;gap:4px;height:100%;padding:0 12px;font:500 var(--fs-ui)/1 var(--sans);color:var(--ink);background:none;border:0;cursor:pointer;position:relative;white-space:nowrap}
.site-nav__item:hover{color:var(--blue)}
.site-nav__item .ic{width:15px;height:15px;stroke-width:2;opacity:.65;transition:transform .15s}
.site-nav__item[aria-expanded="true"],.site-nav__item[aria-current]{color:var(--ink)}
.site-nav__item[aria-expanded="true"]::after,.site-nav__item[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--ink)}
.site-nav__item[aria-expanded="true"] .ic{transform:rotate(180deg)}
/* Botón con aspecto de campo que abre la paleta. Se encoge sin partir el texto; por debajo de 1.280 px es un botón de icono */
.site-header__search{margin-left:auto;display:flex;align-items:center;gap:8px;height:40px;flex:0 1 220px;min-width:0;padding:0 12px;border:1px solid var(--rule-2);border-radius:var(--r-sm);color:var(--muted);font-size:14px;background:#fff;cursor:text;white-space:nowrap;overflow:hidden;transition:opacity .15s}
.site-header__search span{overflow:hidden;text-overflow:ellipsis}
.site-header__search:hover{border-color:var(--ink)}
/* Portada: mientras el buscador del hero está en pantalla, el de la cabecera no se ve (el JS añade .is-hidden).
   Su hueco se conserva para que la cabecera no salte al aparecer. Sin JS, se ve siempre. */
.site-header__search.is-hidden{visibility:hidden;opacity:0}
.site-header__adv{display:inline-flex;align-items:center;gap:6px;font:500 14px/1 var(--sans);color:var(--ink-2);white-space:nowrap;padding:0 4px 0 18px;border-left:1px solid var(--rule);height:24px}
.site-header__adv:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.site-header__adv .ic{width:16px;height:16px;color:var(--muted)}
.site-header__compare .count{background:#fff;color:var(--ink)}
.site-header__m{display:none}

/* 10 · Megamenú y desplegables ------------------------------------------- */
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);box-shadow:var(--sh-pop);z-index:var(--z-mega)}
.mega__in{display:grid;grid-template-columns:minmax(0,1fr) 216px 300px;gap:0 28px;padding:20px var(--gutter) 0}
.mega__col-h{display:flex;justify-content:space-between;align-items:baseline;padding:0 10px 10px;border-bottom:1px solid var(--rule);margin-bottom:6px;min-height:31px}
.mega__cats{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.mcat{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:8px 10px;border-radius:var(--r-sm)}
.mcat:hover,.mcat.is-hover{background:var(--paper-2)}
.mcat:hover .plate,.mcat.is-hover .plate{background:var(--ink)}
.mcat:hover .cat-icon,.mcat.is-hover .cat-icon{--ic-stroke:#fff;--ic-ac:var(--blue-on-ink);--ic-tint:rgba(143,169,255,.25)}
.mcat__t{display:block;font:600 var(--fs-ui)/1.2 var(--sans)}
.mcat__t small{font-weight:500;color:var(--muted);font-size:var(--fs-meta);margin-left:6px}
.mcat__n1{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);color:var(--muted);margin-top:4px;line-height:1.25;white-space:nowrap;overflow:hidden}   /* una línea: short_title ≤ 32 caracteres */
.mcat__n1 b{color:var(--ink);font-weight:500;overflow:hidden}
.mega__explore{display:grid;gap:1px;align-content:start}
.mega__explore a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);font:500 14.5px/1.2 var(--sans)}
.mega__explore a:hover{background:var(--paper-2)}
.mega__explore .ic{color:var(--ink-2);width:18px;height:18px}
.mega__explore small{margin-left:auto;font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.mega__side{border-left:1px solid var(--rule);padding-left:28px;padding-bottom:18px}
.mega__foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--rule);margin-top:14px;padding:13px 10px 15px;font-size:13px;color:var(--muted)}
.mega__foot span{display:inline-flex;align-items:center;gap:6px}
.mega__foot .links{display:flex;gap:22px}
/* Tarjeta «Destacado» (vendible; con alternativa editorial) */
.mfeat{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:#fff}
.mfeat--paid{border-color:var(--paid-line)}
.mfeat__edh{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-bottom:1px solid var(--rule);font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.mfeat__media{display:block;aspect-ratio:16/10;background:#fff;border-bottom:1px solid var(--rule)}
.mfeat--paid .mfeat__media{border-color:var(--paid-line)}
.mfeat__media img,.mfeat__media svg{width:100%;height:100%;object-fit:contain}
.mfeat__b{padding:10px 12px 12px;display:grid;gap:6px}
.mfeat__b h4{font:600 var(--fs-ui)/1.25 var(--sans)}
.mfeat__b p{font-size:var(--fs-meta);color:var(--muted);line-height:1.4}
.mfeat__row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
/* Desplegable «Empresa» */
.dropdown{position:absolute;top:calc(100% + 1px);width:340px;background:#fff;border:1px solid var(--rule);border-radius:0 0 var(--r-md) var(--r-md);box-shadow:var(--sh-pop);padding:8px;z-index:var(--z-mega)}
.dropdown a{display:grid;grid-template-columns:22px 1fr;gap:12px;padding:10px;border-radius:var(--r-sm)}
.dropdown a:hover,.dropdown a.is-hover{background:var(--paper-2)}
.dropdown b{font-weight:600;font-size:14.5px;display:block}
.dropdown small{display:block;font-size:var(--fs-meta);line-height:1.35;color:var(--muted);margin-top:2px}
.dropdown .ic{color:var(--ink-2);margin-top:1px}
.dropdown hr{border:0;border-top:1px solid var(--rule);margin:6px 4px}
.dropdown__mail{display:flex;align-items:center;gap:8px;padding:8px 10px 6px;font-size:13px;color:var(--muted)}

/* 11 · Menú móvil (hoja a pantalla completa) ----------------------------- */
.msheet{background:#fff}
.msheet__top{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 10px 0 16px;border-bottom:1px solid var(--rule)}
.msheet__body{padding:14px 16px 20px}
.msheet__search{display:flex;align-items:center;gap:10px;height:46px;border:1.5px solid var(--ink);border-radius:var(--r-md);padding:0 12px;color:var(--muted);font-size:var(--fs-ui)}
.msheet__search:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.msheet__search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px}
.msheet__search input::placeholder{color:var(--muted)}
.msheet__g{margin-top:18px}
.msheet__gh{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:2px solid var(--ink);margin-bottom:4px}
.msheet__gh h3{font:400 24px/1 var(--serif)}
.msheet__cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.msheet__cats a{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:10px;min-height:52px;padding:6px 0;border-bottom:1px solid var(--rule)}
.msheet__cats .plate{width:36px;height:36px}
.msheet__cats b{font:600 14px/1.15 var(--sans);display:block}
.msheet__cats small{font-size:var(--fs-2xs);color:var(--muted)}
.msheet__links a{display:flex;align-items:center;gap:10px;height:50px;border-bottom:1px solid var(--rule);font:600 16px/1 var(--sans)}
.msheet__links a>.ic:last-child{margin-left:auto;color:var(--muted)}
.msheet__co{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}
.msheet__co a{display:flex;align-items:center;gap:8px;min-height:46px;border-bottom:1px solid var(--rule);font-size:14.5px;font-weight:500}
.msheet__co .ic{width:18px;height:18px;color:var(--ink-2)}
.msheet__foot{margin-top:16px;display:grid;gap:10px}
.msheet__foot p{font-size:var(--fs-xs);color:var(--muted);text-align:center}

/* 12 · Buscador (paleta) ------------------------------------------------- */
.palette{width:640px;max-width:100%;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-pop),0 0 0 1px var(--rule);overflow:hidden}
.palette__in{display:flex;align-items:center;gap:10px;height:58px;padding:0 10px 0 16px;border-bottom:1px solid var(--rule)}
.palette__in:focus-within{box-shadow:inset 0 -2px 0 var(--blue)}   /* sustituye al contorno que el campo no puede llevar */
.palette__in input{flex:1;min-width:0;border:0;outline:0;font-size:17px;background:transparent}
.palette__in input::placeholder{color:var(--muted)}
.palette__scope{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px;border:1px solid var(--rule-2);border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.palette__g{padding:8px}
.palette__g+.palette__g{border-top:1px solid var(--rule)}
.palette__gh{display:flex;justify-content:space-between;padding:6px 8px 6px;font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.palette__row{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:7px 8px;border-radius:var(--r-sm)}
.palette__row.is-active,.palette__row:hover{background:var(--paper-2)}
.palette__row .thumb{width:56px;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-xs);background:#fff;overflow:hidden}
.palette__row .thumb img{width:100%;height:100%;object-fit:contain}
.palette__row b{display:block;font:600 14.5px/1.25 var(--sans)}
.palette__row b mark{background:none;color:var(--blue)}
.palette__row small{font-size:var(--fs-meta);color:var(--muted)}
.palette__row--doc{grid-template-columns:36px minmax(0,1fr) auto}
.palette__row--doc .plate{width:36px;height:36px}
.palette__keys{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--paper-2);border-top:1px solid var(--rule);font-size:var(--fs-xs);color:var(--muted)}
.palette__keys kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:4px;border:1px solid var(--rule-2);border-bottom-width:2px;border-radius:var(--r-xs);background:#fff;font:600 var(--fs-kicker)/1 var(--sans);color:var(--ink-2)}

/* 13 · Cabecera de sección (firma) --------------------------------------- */
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-top:2px solid var(--ink);padding-top:12px;margin-bottom:var(--sh-gap)}
.sh__t{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;min-width:0}
.sh h2{font:400 var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:-.01em;word-spacing:.05em;text-wrap:balance}
.sh__dek{font-size:14.5px;color:var(--muted)}
.sh__r{display:flex;align-items:center;gap:14px;flex:none}
.sh__ctl{display:flex;gap:6px;align-items:center}
.sh--sm{border-top-width:1px;border-color:var(--rule-2);padding-top:10px;margin-bottom:12px}
.sh--sm h2,.sh--sm h3{font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}

/* 14 · Hero -------------------------------------------------------------- */
.hero-band{background:var(--band);border-bottom:1px solid var(--rule)}
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,var(--band) 0,var(--band) 44%,rgba(250,249,245,0) 70%),
  repeating-linear-gradient(0deg,transparent 0 23px,rgba(18,21,31,.05) 23px 24px),
  repeating-linear-gradient(90deg,transparent 0 23px,rgba(18,21,31,.05) 23px 24px)}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:56px;align-items:center;padding-top:30px;padding-bottom:28px}
.hero__in>*{min-width:0}
.hero__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.fresh{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 10px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--rule);font-size:13px;color:var(--ink-2);white-space:nowrap}
.fresh b{font-weight:600;color:var(--ink)}
.fresh::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pos);box-shadow:0 0 0 3px rgba(21,127,59,.14)}
.trust{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.trust .ic{width:16px;height:16px;color:var(--pos)}
.hero h1{font:400 var(--fs-display)/var(--lh-display) var(--serif);letter-spacing:-.015em;word-spacing:.05em;max-width:640px;text-wrap:balance}
.hero h1 .hl{display:block}
.hero__dek{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:580px;margin-top:12px}
.hsearch{display:flex;align-items:center;margin-top:20px;max-width:620px;height:56px;background:#fff;border:1.5px solid var(--ink);border-radius:var(--r-md);padding:5px}
.hsearch:focus-within{outline:2px solid var(--blue);outline-offset:2px}   /* el campo no lleva contorno propio: lo lleva la caja */
.hsearch__scope{display:flex;align-items:center;gap:4px;height:100%;padding:0 12px 0 10px;border-right:1px solid var(--rule);font:500 14px/1 var(--sans);color:var(--ink);background:none;border-top:0;border-bottom:0;border-left:0;cursor:pointer;white-space:nowrap}
.hsearch__scope .ic{width:15px;height:15px;color:var(--muted)}
.hsearch>.ic{margin:0 0 0 14px;color:var(--muted)}
.hsearch input{flex:1;min-width:0;height:100%;border:0;outline:0;padding:0 12px 0 10px;font-size:16px;background:transparent}
.hsearch input::placeholder{color:var(--muted)}   /* 5,9:1 */
.hsearch .btn{height:44px;border-radius:var(--r-xs)}
.hero__pop{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;font-size:13px;color:var(--muted)}
.hero__pop>span{margin-right:2px}
.hero__pop-s{display:none;font-weight:600;color:var(--ink)}   /* por debajo de 1.280 la etiqueta corta deja sitio a los dos chips */
/* Comparador rápido (vendible como «Comparativa patrocinada») */
.qc{background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-lg);box-shadow:var(--sh-raise);overflow:hidden}
.qc__h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px 0}
.qc__h .kicker{display:flex;align-items:center;gap:6px;color:var(--ink)}
.qc__h .kicker .ic{width:15px;height:15px;color:var(--blue)}
.qc__b{padding:8px 18px 16px}
.qc__p{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:start}
.qc__p figure{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.qc__p img{width:100%;max-width:128px;aspect-ratio:4/3;object-fit:contain}
.qc__p figcaption{font:600 var(--fs-sm)/1.25 var(--sans);display:flex;flex-direction:column;align-items:center;gap:6px}
.qc__vs{align-self:center;margin-top:-26px;font:400 20px/1 var(--serif);color:var(--muted);text-align:center}
.qc__rows{margin-top:10px;border-top:1px solid var(--rule);padding-top:10px;display:grid;gap:7px}
.vr{display:grid;grid-template-columns:30px minmax(0,1fr) 112px minmax(0,1fr) 30px;align-items:center;gap:8px;font-size:13px;font-variant-numeric:tabular-nums}
.vr em{font-style:normal;text-align:center;color:var(--ink-2);font-size:var(--fs-meta);white-space:nowrap}
.vr b{font-weight:500;color:var(--muted)}
.vr b.w{font-weight:700;color:var(--ink)}
.vr b:last-child{text-align:right}
.vr .bl,.vr .br{height:6px;background:var(--rule);border-radius:3px;display:flex;overflow:hidden}
.vr .bl{justify-content:flex-end}
.vr .bl i{background:var(--ink);display:block;opacity:.28}
.vr .br i{background:var(--blue);display:block;opacity:.3}
.vr i.w{opacity:1!important}
.qc__f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.qc__f span{font-size:var(--fs-meta);color:var(--muted)}
.qc--paid{border-color:var(--paid-line)}
.qc--paid .paidbar{font-size:var(--fs-xs)}
/* Teaser del comparador (una fila): sustituye al comparador rápido por debajo de 1.024 px */
.qteaser{display:none;margin-top:12px;background:#fff;border:1px solid var(--rule-2);border-radius:var(--r-md);overflow:hidden;max-width:620px}
.qteaser__row{display:grid;grid-template-columns:auto minmax(0,1fr) 20px;align-items:center;gap:12px;padding:10px 12px}
.qteaser__th{display:flex}
.qteaser__th span{width:44px;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-xs);background:#fff;overflow:hidden}
.qteaser__th span+span{margin-left:-8px;box-shadow:-2px 0 0 #fff}
.qteaser__th img{width:100%;height:100%;object-fit:contain}
.qteaser__row b{display:block;font:600 14px/1.25 var(--sans)}
.qteaser__row small{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.qteaser__row>.ic{color:var(--blue)}
/* Comparativa patrocinada en el teaser: misma etiqueta que .qc--paid (el PHP añade la clase siempre que la pareja sea pagada) */
.qteaser--paid{border-color:var(--paid-line)}
.qteaser--paid .paidbar{min-height:32px;font-size:var(--fs-xs)}
.qteaser--paid .qteaser__row small{color:var(--paid)}

/* 15 · Categorías -------------------------------------------------------- */
.cats-row{padding:2px 0 26px}
.cats-row__h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.cats{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
/* Tile: placa · nombre corto en una línea · «N fichas» y «desde X €». Nada comparte fila con la placa: no hay choques */
.ctile{display:flex;flex-direction:column;padding:10px 10px 11px;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);transition:border-color .15s;min-width:0}
.ctile:hover{border-color:var(--ink)}
.ctile:hover .plate{background:var(--ink)}
.ctile:hover .cat-icon{--ic-stroke:#fff;--ic-ac:var(--blue-on-ink);--ic-tint:rgba(143,169,255,.25)}
.ctile__t{font:600 14px/1.2 var(--sans);letter-spacing:-.01em;margin-top:9px;white-space:nowrap;overflow:hidden}   /* etiqueta corta («Gafas», «Anillos»): el nombre completo va en aria-label */
.ctile__m{display:flex;flex-direction:column;margin-top:2px;font-size:var(--fs-2xs);line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ctile__m span+span{color:var(--ink-2)}
/* Variante compacta (404 y estados vacíos): placa de 40, solo el nombre, centrado */
.ctile--compact{align-items:center;text-align:center;padding:8px}
.ctile--compact .ctile__t{font-size:var(--fs-xs);margin-top:6px}

/* 16 · Tarjeta de producto ---------------------------------------------- */
/* Anatomía: barra (distintivo + comparar) · imagen 4:3 blanca intacta · cuerpo · nota · pie (precio + CTA) */
.pcard{container-type:inline-size;position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;transition:border-color .15s;min-width:0}
.pcard:hover{border-color:var(--rule-3)}
.pcard__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;height:40px;padding:0 10px;border-bottom:1px solid var(--rule)}
.pcard__bar .cmp{margin-left:auto}
.pcard__media{display:block;aspect-ratio:4/3;background:#fff}
.pcard__media img,.pcard__media>svg{width:100%;height:100%;object-fit:contain}
.pcard__body{display:flex;flex-direction:column;gap:10px;padding:12px 14px 0;flex:1;border-top:1px solid var(--rule)}
.pcard__head{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:calc(13px + 4px + 2.5em)}   /* altura reservada: el hueco queda arriba, nunca entre título y nota */
.pcard__kicker{font:600 var(--fs-micro)/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pcard__title{font:600 var(--fs-title)/1.25 var(--sans);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard__title a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pcard__desc{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:-2px}
.pcard__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:10px 0 12px;border-top:1px solid var(--rule)}
.price{display:inline-flex;align-items:baseline;gap:5px;line-height:1.1;white-space:nowrap}
.price small{font-size:var(--fs-2xs);color:var(--muted)}
.price b{font-size:17px;font-weight:650;letter-spacing:-.01em}
.price s{font-size:var(--fs-xs);color:var(--muted)}
.price--stack{flex-direction:column;align-items:flex-start;gap:2px}
.pcard__cta{display:inline-flex;align-items:center;gap:2px;height:30px;padding:0 6px 0 10px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue);font:600 13px/1 var(--sans);white-space:nowrap}
.pcard__cta:hover{background:var(--blue);color:#fff}
.pcard__cta .ic{width:15px;height:15px}
.pcard__paidnote{display:flex;align-items:center;gap:8px;min-height:28px;font-size:var(--fs-meta);line-height:1.3;color:var(--ink-2)}
/* Nº 1 en rejillas mixtas: barra de tinta completa */
.pcard--n1{border-color:var(--ink)}
.pcard--n1 .pcard__bar{background:var(--ink);border-color:var(--ink);color:#fff}
.pcard--n1 .tag--n1{padding:0;height:auto}
.pcard--n1 .cmp{color:#fff}
.pcard--n1 .cmp input{border-color:rgba(255,255,255,.55);background:transparent}
.pcard--n1 .cmp input:checked{background:#fff;border-color:#fff}
.pcard--n1 .cmp input:checked::after{border-color:var(--ink)}
/* Nº 1 dentro del carril de Nº 1 (todos lo son): tratamiento ligero */
.pcard--rank .pcard__bar{background:#fff}
/* Pagado (Patrocinado o Publicidad nativa) */
.pcard--paid{border-color:var(--paid-line)}
.pcard--paid .pcard__body,.pcard--paid .pcard__foot{border-top-color:var(--paid-line)}
.pcard--paid .pcard__kicker{color:var(--paid)}
/* Oferta */
.pcard--offer .price b{color:var(--offer)}
/* Tarjeta de ancho medio (carril de 5 a 1440): «Nº 1» sin categoría (ya está en el kicker) */
@container (max-width:279px){.tag__long{display:none}}
/* Tarjeta estrecha (rejilla de 2 en móvil): se decide por el ancho de la propia tarjeta */
@container (max-width:210px){
  .pcard__bar{height:36px;padding:0 8px}
  .tag__long,.pcard .tag--seg{display:none}
  .pcard__body{padding:10px 10px 0;gap:8px}
  .pcard__title{font-size:14.5px;-webkit-line-clamp:3}   /* red de seguridad: short_title ≤ 32 y títulos pagados ≤ 32 caben en 2 */
  .pcard__desc{display:none}
  .pcard .verdict{font-size:var(--fs-2xs)}
  .pcard__foot{padding:8px 0 10px}
  .pcard .price{flex-direction:column;align-items:flex-start;gap:1px}
  .pcard .price b{font-size:var(--fs-ui)}
  .pcard .price small{font-size:var(--fs-micro)}
  .pcard .price s{display:none}
  .pcard__cta{height:28px;font-size:var(--fs-xs);padding:0 4px 0 8px}
  .pcard .btn--xs{height:28px;padding:0 8px;font-size:var(--fs-xs)}
  .pcard__paidnote{font-size:var(--fs-2xs)}
  .paidbar{padding:0 4px 0 8px;min-height:36px;column-gap:4px}
  .paidbar b{letter-spacing:.05em}
}

/* 17 · Tarjeta compacta (listas, buscador, relacionados) ---------------- */
.pmini{display:grid;grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--rule)}
.pmini__img{display:block;width:88px;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-sm);background:#fff;overflow:hidden}
.pmini__img img{width:100%;height:100%;object-fit:contain}
.pmini__b{min-width:0;display:flex;flex-direction:column;gap:3px}
.pmini__t{font:600 var(--fs-ui)/1.25 var(--sans);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pmini__t a:hover{text-decoration:underline;text-underline-offset:3px}
.pmini__m{display:flex;align-items:center;gap:12px;font-size:var(--fs-meta);color:var(--muted)}
.pmini__m .price b{font-size:14px;color:var(--ink)}
.pmini__m .price small{font-size:var(--fs-xs)}
.pmini__r{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.pmini__r .verdict{font-size:var(--fs-2xs);color:var(--ink-2);font-weight:500}

/* 18 · Carril y rejillas ------------------------------------------------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*16px)/5);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.grid-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* 19 · Cara a cara (lista VS) -------------------------------------------- */
.vslist a{display:grid;grid-template-columns:66px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule)}
.vslist a:last-child{border-bottom:0}
.vslist a:hover .vslist__t{text-decoration:underline;text-underline-offset:3px}
.vslist__th{display:flex}
.vslist__th span{width:38px;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-xs);background:#fff;overflow:hidden;flex:none}
.vslist__th span+span{margin-left:-10px;box-shadow:-2px 0 0 #fff}
.vslist__th img{width:100%;height:100%;object-fit:contain}
.vslist__t{font:600 14px/1.25 var(--sans)}
.vslist__t i{font-style:normal;font-weight:500;color:var(--muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;margin:0 3px}
.vslist__s{display:flex;align-items:center;gap:4px}
.vslist__s .score:first-child{box-shadow:none}

/* 19b · Últimas fichas + Cara a cara (home) */
.latest{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.latest__list{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.latest__list .pmini:nth-last-child(-n+2){border-bottom:0}
.latest__vs .sh{margin-bottom:2px}

/* 20 · Banda de método (el único momento de contraste) ------------------- */
.band-ink{background:var(--ink);color:var(--on-ink-2)}
.method{padding:40px 0}
.method__in{display:grid;grid-template-columns:380px minmax(0,1fr);gap:56px;align-items:start}
.method .kicker{color:var(--on-ink-3)}
.method h2{font:400 36px/1.04 var(--serif);letter-spacing:-.01em;word-spacing:.05em;text-wrap:balance;color:#fff;margin-top:10px}
.method h2 .hl{color:var(--blue-on-ink)}
.method__l p{font-size:var(--fs-ui);line-height:1.55;margin:12px 0 14px;max-width:370px}
.method .link{color:var(--blue-on-ink)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ink-line);padding-bottom:18px}
.facts div{display:flex;flex-direction:column;padding-right:12px}
.facts div+div{padding-left:18px;border-left:1px solid var(--ink-line)}
.facts b{font:600 30px/1 var(--sans);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.facts span{font-size:var(--fs-meta);color:var(--on-ink-3);margin-top:6px}
.princ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:18px}
.princ li{padding-right:18px}
.princ li+li{padding-left:18px;border-left:1px solid var(--ink-line)}
.princ b{display:block;font:600 22px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--blue-on-ink)}
.princ h3{font:600 14.5px/1.25 var(--sans);color:#fff;margin-top:8px}
.princ p{font-size:13px;color:var(--on-ink-3);margin-top:4px;line-height:1.45}
.princ .ic{display:none}

/* 21 · Guías ------------------------------------------------------------- */
.guides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.gcard__img{display:block;aspect-ratio:16/9;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:#fff}
.gcard__img img{width:100%;height:100%;object-fit:contain}
.gcard .kicker{margin-top:12px;color:var(--blue)}
.gcard h3{font:600 var(--fs-h3)/1.28 var(--sans);letter-spacing:-.01em;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gcard h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.gcard__x{font-size:var(--fs-sm);color:var(--muted);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard__by{font-size:var(--fs-meta);color:var(--muted);margin-top:8px}
/* Nativo en el listado de guías */
.gcard--paid .gcard__img{border-color:var(--paid-line);position:relative}
.gcard--paid .kicker{color:var(--paid);display:flex;align-items:center;gap:4px}
.gcard--paid .kicker .paidbar__why{width:20px;height:20px}
.gcard__adk{display:none}
.gcard--paid .gcard__by b{color:var(--ink);font-weight:600}
.gcard__flag{position:absolute;left:0;right:0;top:0}

/* 22 · Publicidad (display) --------------------------------------------- */
/* Sin campaña, PHP no imprime nada. .is-empty (red programática sin anuncio) = display:none. */
.ad{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0 12px}
.ad.is-empty{display:none}
.ad__in{width:max-content;max-width:100%;margin:0 auto}
/* Tres escalones: 970×250 solo desde 1.018 px (970 + 2 × 24), 728×90 de 768 a 1.017 y 300×250 por debajo.
   Cada .ad__in lleva el escalón en que se muestra: --w (≥ 1.018), --t (768–1.017), --wt (≥ 768), --m (< 768). */
@media (max-width:1017.98px){.ad__in--w{display:none}}
@media (min-width:1018px),(max-width:767.98px){.ad__in--t{display:none}}
@media (max-width:767.98px){.ad__in--wt{display:none}}
@media (min-width:768px){.ad__in--m{display:none}}
.ad__head{display:flex;justify-content:space-between;align-items:center;gap:16px;height:18px;margin-bottom:8px}
.ad__sell{font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap}
.ad__sell:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.ad__frame{display:block;position:relative;max-width:100%;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 0 0 1px var(--rule-2);background:#fff}   /* max-width: una creatividad nunca desborda el viewport */
.ad__frame img{display:block}
.ad__why{text-align:right;font-size:var(--fs-2xs);color:var(--muted);margin-top:6px}
.ad__why a{text-decoration:underline;text-underline-offset:2px}
.ad--inline{background:none;border:0;padding:0;margin:28px 0}
.ad__frame--970{width:970px;aspect-ratio:970/250}
.ad__frame--728{width:728px;aspect-ratio:728/90}
.ad__frame--300{width:300px;aspect-ratio:300/250}
.ad__frame--320{width:320px;aspect-ratio:320/100}
.ad--side{position:sticky;top:calc(var(--header-h) + 64px)}
/* La creatividad ficticia de las maquetas vive en proto.css (no pasa al theme). */

/* 23 · Formatos pagados -------------------------------------------------- */
/* Colocación destacada en categoría (máx. 1 por página): banda a todo el ancho tras la primera fila de la rejilla */
.feat{display:grid;grid-template-columns:240px minmax(0,1fr) 220px;border:1px solid var(--paid-line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.feat__meta{display:none}
.feat__flag{grid-column:1/-1}
.feat__img{display:block;background:#fff;border-right:1px solid var(--paid-line);aspect-ratio:4/3}
.feat__img img,.feat__img svg{width:100%;height:100%;object-fit:contain}
.feat__b{padding:14px 20px 16px;min-width:0}
.feat__b .pcard__kicker{color:var(--paid)}
.feat h3{font:600 20px/1.2 var(--sans);letter-spacing:-.01em;margin-top:6px}
.feat__b p:not([class]){font-size:14px;color:var(--ink-2);margin-top:6px}
.spec{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.spec span{font-size:var(--fs-meta);padding:4px 9px;border-radius:var(--r-xs);background:var(--paper-2);color:var(--ink-2)}
.feat__r{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;padding:14px 20px;border-left:1px solid var(--paid-line);background:#FFFBF1}
.feat__r small{font-size:var(--fs-xs);color:var(--paid);line-height:1.35}
/* Banda de comparativa o artículo patrocinado */
.paidband{display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--paid-line);background:var(--paid-bg);color:var(--paid);border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.45}
.paidband b{font:700 var(--fs-micro)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.paidband .ic{flex:none}
.paidband a{text-decoration:underline;text-underline-offset:2px;font-weight:600}

/* 24 · Dónde comprar y caja de precio ------------------------------------ */
.wtb{border:1px solid var(--rule-2);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.wtb__h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:16px 20px 12px;border-bottom:2px solid var(--ink)}
.wtb__h h2,.wtb__h h3{font:400 var(--fs-h2-sm)/1 var(--serif);word-spacing:.05em}
.wtb__h p{font-size:var(--fs-meta);color:var(--muted);text-align:right;line-height:1.4}
.wtb__row{display:grid;grid-template-columns:40px minmax(0,1fr) auto 150px;align-items:center;gap:14px;padding:12px 20px;border-bottom:1px solid var(--rule);position:relative}
.wtb__row:last-child{border-bottom:0}
.wtb__mono{width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--rule);display:grid;place-items:center;font:700 var(--fs-meta)/1 var(--sans);letter-spacing:-.02em;color:var(--ink-2);background:var(--paper-2)}
.wtb__st b{font:600 var(--fs-ui)/1.2 var(--sans);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tag--sm{height:18px;padding:0 6px;font-size:10px;letter-spacing:.06em}   /* etiquetas en línea con el nombre de la tienda */
.wtb__why{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;color:var(--paid);margin-left:-2px}
.wtb__why::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.wtb__why .ic{width:16px;height:16px}
.wtb__st small{display:flex;align-items:center;gap:5px;font-size:var(--fs-meta);color:var(--muted);margin-top:4px}
.wtb__st small .ic{width:14px;height:14px}
.wtb__pr{font:650 19px/1 var(--sans);letter-spacing:-.01em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wtb__pr small{display:block;font-size:var(--fs-2xs);font-weight:500;color:var(--muted);margin-top:4px}
.wtb__row .btn{width:100%}
.wtb__row--best{background:linear-gradient(90deg,var(--blue-50),#fff 70%)}
.wtb__row--best .wtb__pr{color:var(--blue)}
.wtb__row--paid{background:var(--paid-bg);box-shadow:inset 3px 0 0 var(--paid-edge)}
/* Más tiendas: abierto en escritorio (el PHP imprime <details open>); en móvil el JS lo cierra y quedan 3 filas */
.wtb__more>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-top:1px solid var(--rule);font:600 var(--fs-sm)/1 var(--sans);color:var(--blue);cursor:pointer;list-style:none}
.wtb__more>summary::-webkit-details-marker{display:none}
.wtb__more>summary .ic{width:16px;height:16px;transition:transform .15s}
.wtb__more[open]>summary{display:none}
.wtb__more>ol>.wtb__row:first-child{border-top:1px solid var(--rule)}
/* Pie: una línea con la divulgación; el texto completo (orden, desempate, «Patrocinado») se despliega */
.wtb__f{background:var(--paper-2);border-top:1px solid var(--rule);font-size:var(--fs-meta);color:var(--ink-2);line-height:1.45}
.wtb__f>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;cursor:pointer;list-style:none}
.wtb__f>summary::-webkit-details-marker{display:none}
.wtb__f>summary u{text-underline-offset:2px;color:var(--ink)}
.wtb__f>summary>.ic:last-child{margin-left:auto;transition:transform .15s}
.wtb__f[open]>summary>.ic:last-child{transform:rotate(180deg)}
.wtb__f p{padding:0 20px 14px 44px}
.wtb__f .ic{width:16px;height:16px;flex:none;color:var(--muted)}
/* Caja de precio de la ficha */
.pbox{border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:16px 18px 14px;display:grid;grid-template-columns:auto 1fr;gap:12px 18px;align-items:center;background:#fff}
.pbox__p small{display:block;font-size:var(--fs-meta);color:var(--muted)}
.pbox__p b{display:block;font:650 32px/1.05 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.pbox__p span{display:block;font-size:var(--fs-meta);color:var(--muted);margin-top:3px}
.pbox__btns{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.pbox__f{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-meta);color:var(--muted);padding-top:10px;border-top:1px solid var(--rule)}
.pbox__f a{color:var(--blue);font-weight:600}
/* Barra de compra fija (móvil, al pasar la caja de precio) */
.buybar{display:flex;align-items:center;gap:10px;height:64px;padding:0 16px;background:#fff;border-top:1px solid var(--rule);box-shadow:var(--sh-up)}
.buybar .price{flex-direction:column;align-items:flex-start;gap:2px;margin-right:auto}
.buybar .price b{font-size:19px}
.buybar--fixed{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tray);height:auto;min-height:64px;padding-bottom:env(safe-area-inset-bottom)}   /* sobre el indicador de inicio del iPhone */

/* 25 · Bandeja del comparador ------------------------------------------- */
.tray{display:flex;align-items:center;gap:16px;padding:10px 12px 10px 18px;background:var(--ink);color:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-pop)}
.tray--fixed{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(760px,calc(100% - 32px));z-index:var(--z-tray)}
.tray__t{font:600 14px/1.25 var(--sans);white-space:nowrap}
.tray__t small{display:block;font-weight:400;font-size:var(--fs-xs);color:var(--on-ink-3)}
.tray__slots{display:flex;gap:8px;margin-left:auto}
.tray__slot{position:relative;width:64px;height:48px;border-radius:var(--r-sm);background:#fff;flex:none}   /* sin overflow: la zona táctil del × sobresale */
.tray__slot img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.tray__slot button{position:absolute;right:2px;top:2px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(18,21,31,.72);color:#fff;display:grid;place-items:center;padding:0;cursor:pointer}
.tray__slot button .ic{width:12px;height:12px;stroke-width:2.5}
.tray__slot--empty{background:transparent;border:1.5px dashed rgba(255,255,255,.45);display:grid;place-items:center;color:var(--on-ink-3)}
.tray__clear{font-size:13px;color:var(--on-ink-2);text-decoration:underline;text-underline-offset:2px;background:none;border:0;cursor:pointer;white-space:nowrap}

/* 26 · Ficha ------------------------------------------------------------- */
.crumbs{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);flex-wrap:wrap;padding-top:16px}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.crumbs .ic{width:13px;height:13px}
.pp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:16px;align-items:start;padding-bottom:28px}
.pp__img{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:#fff;aspect-ratio:4/3;position:relative}
.pp__img img{width:100%;height:100%;object-fit:contain}
.pp__fig{margin:0}
.pp__fig figcaption{font-size:var(--fs-kicker);color:var(--muted);text-align:right;margin-top:4px}   /* crédito fuera de la foto */
.keyfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.keyfacts div{padding:11px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:#fff}
.keyfacts span{display:block;font:600 var(--fs-micro)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.keyfacts b{display:block;font:600 14px/1.3 var(--sans);margin-top:5px}
.pp__tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pp h1{font:400 var(--fs-h1)/var(--lh-h1) var(--serif);letter-spacing:-.01em;word-spacing:.05em;text-wrap:balance;margin-top:12px}
.pp__tl{font-size:var(--fs-lead);line-height:1.45;color:var(--ink-2);margin-top:10px}
.byline{display:flex;gap:6px 8px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:12px}
.byline b{color:var(--ink);font-weight:600}
.spanel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:center;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule)}
.spanel__v{font:400 30px/1 var(--serif)}
.spanel__m{font-size:13px;color:var(--muted);margin-top:5px}
.spanel .ruler{margin-top:10px}
.pp__crit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin-top:18px}
.pp__more{display:none}
.pp .pbox{margin-top:20px}
.ptabs{position:sticky;top:var(--header-h);z-index:var(--z-tabs);background:#fff;border-bottom:1px solid var(--rule);border-top:1px solid var(--rule)}
.ptabs__in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ptabs__in::-webkit-scrollbar{display:none}
.ptabs a{padding:14px 14px 13px;font-size:14.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;position:relative}
.ptabs a:hover{color:var(--ink)}
.ptabs a[aria-current]{color:var(--ink);font-weight:600}
.ptabs a:focus-visible,.viewtog button:focus-visible{outline-offset:-3px}   /* contorno por dentro: el contenedor recorta */
.ptabs a[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--ink)}
.psec{padding:32px 0 0}
.psec .sh{margin-bottom:16px}
.psec .sh h2{font-size:28px}
.pbuy{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.vsbox{border:1px solid var(--rule);border-radius:var(--r-lg);padding:14px 16px 6px;background:#fff}
.vsbox__h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.vsbox h3{font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.pbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.pbody__main{max-width:760px;min-width:0}
.pbody__aside{position:sticky;top:calc(var(--header-h) + 64px);display:grid;gap:24px}
.prose p{font-size:var(--fs-body);line-height:1.65;color:var(--ink-2)}
.prose p+p,.prose ul+p,.prose p+ul{margin-top:12px}
.prose h2,.prose h3{font:600 var(--fs-h3)/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);margin:22px 0 6px}   /* H2 de the_content(): subtítulo en Outfit, no en serif */
.prose>h2:first-child,.prose>h3:first-child{margin-top:0}
.prose strong{color:var(--ink);font-weight:600}
.prose ul{padding-left:20px;list-style:disc;color:var(--ink-2)}
.prose li+li{margin-top:4px}
.prose table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
.prose th,.prose td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left}
/* Nuestro análisis: entradilla (summary) · texto completo (the_content) · veredicto · ángulos · lo mejor y lo peor */
.an__lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink);margin-bottom:18px}
.an__body{position:relative}
.an__body.is-collapsed{max-height:420px;overflow:hidden}   /* solo en móvil: el JS lo pliega; el texto sigue en el HTML */
.an__body.is-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(rgba(255,255,255,0),#fff 85%);pointer-events:none}
.an__more{margin-top:8px}
.an__more .ic{transition:transform .15s}
/* Cuatro ángulos (ai_analysis sin el veredicto): 4 columnas en escritorio, fila deslizable al 80 % en móvil */
.angles{margin-top:18px}
.angles__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.angles__h h3{font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.angles__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.angle{border:1px solid var(--rule);border-radius:var(--r-md);padding:11px 12px 8px;background:#fff;min-width:0}
.angle h4{display:flex;align-items:center;gap:6px;font:600 var(--fs-sm)/1.2 var(--sans);color:var(--ink)}
.angle h4 .ic{width:16px;height:16px;color:var(--blue)}
.angle p{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2);margin-top:6px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.angle.is-open p{-webkit-line-clamp:unset;display:block}
.angle__more{position:relative;display:inline-flex;align-items:center;min-height:30px;padding:0;border:0;background:none;color:var(--blue);font:600 var(--fs-meta)/1 var(--sans);cursor:pointer}
.angle__more::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.angles__note{display:flex;gap:6px;align-items:flex-start;margin-top:8px;font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.angles__note .ic{width:14px;height:14px;flex:none;margin-top:1px}
.verdictbox{margin-top:18px;padding:16px 18px;border-left:3px solid var(--ink);background:var(--paper-2);border-radius:0 var(--r-md) var(--r-md) 0}
.verdictbox h3{font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.verdictbox p{font-size:15.5px;line-height:1.55;color:var(--ink);margin-top:6px}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.proscons>div{border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 16px}
.proscons h3{display:flex;align-items:center;gap:8px;font:600 var(--fs-ui)/1.2 var(--sans);margin-bottom:8px}
.proscons li{display:grid;grid-template-columns:18px 1fr;gap:8px;padding:6px 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.proscons li .ic{width:18px;height:18px;margin-top:1px}
.proscons .pos .ic{color:var(--pos)} .proscons .neg .ic{color:var(--neg)}
.specs{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.specs details{border-bottom:1px solid var(--rule)}
.specs details:last-child{border-bottom:0}
.specs summary{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;font:600 var(--fs-ui)/1.2 var(--sans);cursor:pointer;list-style:none;background:#fff}
.specs summary::-webkit-details-marker{display:none}
.specs summary .ic{color:var(--muted);transition:transform .15s}
.specs details[open] summary .ic{transform:rotate(180deg)}
.specs dl{display:grid;grid-template-columns:200px minmax(0,1fr);font-size:14px}
.specs dt,.specs dd{padding:8px 16px;border-top:1px solid var(--rule)}
.specs dt{color:var(--muted)}
.specs dd{color:var(--ink)}
.specs dl>:nth-child(4n+1),.specs dl>:nth-child(4n+2){background:var(--paper-2)}
.reviews li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--rule);align-items:center}
.reviews li:last-child{border-bottom:0}
.reviews b{font:600 14.5px/1.2 var(--sans)}
.reviews b a{display:inline-flex;align-items:center;gap:4px}
.reviews b a:hover{text-decoration:underline;text-underline-offset:3px}
.reviews b .ic{width:14px;height:14px;color:var(--muted)}
.reviews p{grid-column:1;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.4}
.reviews .rscore{grid-row:1/3;grid-column:2;font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums;padding:6px 9px;border:1px solid var(--rule-2);border-radius:var(--r-sm);white-space:nowrap}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;font:600 15.5px/1.35 var(--sans);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--muted);flex:none}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq p{font-size:var(--fs-ui);line-height:1.6;color:var(--ink-2);padding:0 0 14px}
.gmini a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule)}
.gmini a:last-child{border-bottom:0}
.gmini span.i{display:block;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-xs);background:#fff;overflow:hidden}
.gmini img{width:100%;height:100%;object-fit:contain}
.gmini small{display:block;font:600 var(--fs-micro)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.gmini b{display:block;font:600 14px/1.3 var(--sans);margin-top:3px}

/* 27 · Categoría (archivo) ----------------------------------------------- */
.ah{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:end;margin-top:14px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.ah__t{display:flex;align-items:center;gap:16px}
.ah h1{font:400 48px/1 var(--serif);letter-spacing:-.01em;word-spacing:.05em}
/* Tableta: columna de título más ancha para que «inteligentes» o «Smartwatches» no se partan */
@media (min-width:768px) and (max-width:1023.98px){.ah{grid-template-columns:minmax(0,1fr) 360px;gap:32px}.ah h1{font-size:38px}}
.ah__d{font-size:15.5px;color:var(--ink-2);margin-top:12px;max-width:600px;line-height:1.5}
.ah__d a{color:var(--blue);font-weight:600;white-space:nowrap}
.ah__d a:hover{text-decoration:underline;text-underline-offset:3px}
.ah__w .wbar{margin-top:10px}
.filters{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);margin-bottom:18px}
.filters__chips{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.filters__sep{width:1px;height:22px;background:var(--rule-2);margin:0 6px}
.filters__r{display:flex;align-items:center;gap:10px;flex:none;font-size:var(--fs-sm);color:var(--muted)}
.sortsel{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 12px;border:1px solid var(--rule-2);border-radius:var(--r-sm);color:var(--ink);font-weight:500;background:#fff;font-size:var(--fs-sm);cursor:pointer}
.sortsel__i{display:none}
.viewtog{display:inline-flex;border:1px solid var(--rule-2);border-radius:var(--r-sm);overflow:hidden}
.viewtog button{width:34px;height:32px;display:grid;place-items:center;border:0;background:#fff;color:var(--muted);cursor:pointer}
.viewtog button[aria-pressed="true"]{background:var(--ink);color:#fff}
.viewtog .ic{width:17px;height:17px}
.archive-grid{margin-top:18px}
/* La colocación destacada va tras la primera fila. En el DOM, tras la 4.ª tarjeta (escritorio, orden de foco correcto);
   con order sube tras la 3.ª en tableta y tras la 2.ª en móvil. Nunca en la posición 1 ni en la fila del Nº 1. */
.archive-grid>.feat{grid-column:1/-1}
.buyguide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}
.buyguide p{font-size:var(--fs-ui);line-height:1.6;color:var(--ink-2)}
.buyguide p+p{margin-top:10px}

/* 28 · Pie --------------------------------------------------------------- */
.site-footer{background:var(--ink);color:var(--on-ink-2);font-size:14px;padding-top:36px}
.site-footer a:hover{color:#fff}
.nl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:32px;align-items:center;padding:18px 22px;border:1px solid var(--ink-line);border-radius:var(--r-md);background:var(--ink-raise)}
.nl h3{font:600 16px/1.2 var(--sans);color:#fff;display:flex;align-items:center;gap:8px}
.nl h3 .ic{color:var(--blue-on-ink)}
.nl p{margin-top:4px;font-size:var(--fs-sm)}
.nl form{display:flex;gap:8px}
.nl input{flex:1;min-width:0;height:44px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);padding:0 14px;color:#fff}
.nl input::placeholder{color:var(--on-ink-3)}
.nl small{grid-column:2;margin-top:-22px;font-size:var(--fs-2xs);color:var(--on-ink-3)}
.nl small a{text-decoration:underline;text-underline-offset:2px}
.ft__main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding:32px 0 28px}
.ft__claim{font:400 28px/1.06 var(--serif);word-spacing:.05em;text-wrap:balance;color:#fff;margin:16px 0 10px}
.ft__claim .hl{color:var(--blue-on-ink);white-space:nowrap}
.ft__about{font-size:var(--fs-sm);line-height:1.55;max-width:320px}
.ft__adv{display:inline-flex;align-items:center;gap:8px;margin-top:16px;height:36px;padding:0 14px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:13px;white-space:nowrap}
.ft__adv b{font-weight:600}
.ft__adv:hover{background:rgba(255,255,255,.06)}
.ft__adv .ic{width:16px;height:16px;color:var(--blue-on-ink)}
.site-footer .logo{color:#fff}
.site-footer .logo__mark{background:#fff}
.site-footer .logo__mark svg{stroke:var(--ink)}
.site-footer .logo em{color:var(--blue-on-ink)}
.ft__h{display:block;font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff}
.ft__col summary{margin-bottom:14px}
.ft__col ul{display:grid;gap:9px}
.ft__col ul.two{grid-template-columns:1fr 1fr;column-gap:20px}
.ft__col details>summary{list-style:none;cursor:default}
.ft__cookies{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.ft__cookies:hover{color:#fff}
.ft__col details>summary::-webkit-details-marker{display:none}
.ft__col summary .ic{display:none}
.ft__disc{display:flex;gap:10px;padding:14px 16px;border:1px solid var(--ink-line);border-radius:var(--r-md);font-size:var(--fs-meta);line-height:1.5;color:var(--on-ink-3)}
.ft__disc .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--on-ink-2)}
.ft__disc b{color:var(--on-ink-2);font-weight:500}
.ft__bot{display:flex;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding:16px 0 24px;font-size:var(--fs-meta);color:var(--on-ink-3)}
.ft__bot a{text-decoration:underline;text-underline-offset:2px}

/* 29 · Páginas estáticas (Anúnciate, Contacto, 404) ---------------------- */
.page-h{padding:28px 0 22px;border-bottom:2px solid var(--ink)}
.page-h h1{font:400 var(--fs-h1)/var(--lh-h1) var(--serif);letter-spacing:-.01em;word-spacing:.05em;margin-top:8px}
.page-h p{font-size:var(--fs-lead);color:var(--ink-2);margin-top:10px;max-width:640px;line-height:1.5}
.page-h p.kicker{font-size:var(--fs-kicker);color:var(--muted);margin-top:0}
.formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fmt{border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden;background:#fff}
.fmt__prev{height:120px;background:var(--paper-2);border-bottom:1px solid var(--rule);display:grid;place-items:center;padding:12px}
.fmt__b{padding:12px 14px 14px}
.fmt__b h3{font:600 var(--fs-ui)/1.25 var(--sans)}
.fmt__b p{font-size:var(--fs-meta);color:var(--muted);margin-top:4px;line-height:1.4}
.fmt__b .kicker{display:block;margin-top:8px;color:var(--ink-2)}
.nosell{border:1.5px solid var(--ink);border-radius:var(--r-lg);padding:16px 18px}
.nosell h3{font:400 26px/1.1 var(--serif);word-spacing:.05em}
.nosell ul{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:10px;font-size:14px;color:var(--ink-2)}
.nosell li{display:flex;gap:8px;align-items:center}
.nosell .ic{width:16px;height:16px;color:var(--neg)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--rule);border-radius:var(--r-md)}
.steps li{padding:14px 16px}
.steps li+li{border-left:1px solid var(--rule)}
.steps b{font:400 26px/1 var(--serif);color:var(--blue)}
.steps h4{font:600 14.5px/1.25 var(--sans);margin-top:6px}
.steps p{font-size:13px;color:var(--muted);margin-top:3px}
.form-card{border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px;background:#fff;display:grid;gap:14px}
.form-card .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.reasons>a,.reasons>div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:1px solid var(--rule)}
.reasons>*>.plate{width:40px;height:40px}
.reasons .ic{color:var(--ink)}
.reasons b{display:block;font:600 var(--fs-ui)/1.25 var(--sans)}
.reasons small{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.4}
.reasons small a{color:var(--blue);font-weight:600}
/* 404: bajo 900 px en escritorio, sin anuncios */
.nf{padding:28px 24px}
.nf h1{font:400 42px/1.02 var(--serif);letter-spacing:-.01em;word-spacing:.05em;max-width:640px;text-wrap:balance}
.nf__cats{margin-top:16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}

/* 30 · Responsive -------------------------------------------------------- */
/* Escalones: ≥ 1.280 completo · 1.200–1.279 buscador de icono · 1.024–1.199 escritorio estrecho (iPad horizontal,
   portátil pequeño) · 768–1.023 tableta · < 768 móvil. Cada escalón se ha comprobado a 1.024, 1.152, 800, 390 y 360. */
@media (max-width:1279.98px){
  :root{--fs-display:46px}
  .ft__claim{font-size:24px}
  .site-nav__item{padding:0 10px}
  .site-header__in{gap:18px}
  /* Buscador de cabecera: botón de icono de 40 (44 táctil) que abre la paleta */
  .site-header__search{flex:none;width:40px;padding:0;justify-content:center;color:var(--ink)}
  .site-header__search span{display:none}
  .site-header__search .ic{width:20px;height:20px}
  .hero__in{grid-template-columns:minmax(0,1fr) 380px;gap:40px}
  .hero__pop-l{display:none}
  .hero__pop-s{display:inline}
}
@media (max-width:1199.98px){
  /* «Cómo puntuamos» vuelve a vivir solo en «Empresa» */
  .site-nav__item--x{display:none}
  /* Megamenú: categorías | Explorar, con el «Destacado» debajo de Explorar */
  .mega__in{grid-template-columns:minmax(0,1fr) 200px;gap:0 24px}
  .mega__in>:first-child{grid-row:1/3}
  .mega__side{grid-column:2;border-left:0;padding:14px 0 18px}
  .mega__side .mega__col-h{display:none}
  .mfeat__b p{display:none}
  .mfeat__row .btn{padding:0 8px}
  /* Categorías: una fila deslizable de tiles de 112 (10 columnas solo caben desde 1.200) */
  .cats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:112px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:-4px calc(-1*var(--gutter));padding:4px var(--gutter);scroll-padding:0 var(--gutter)}
  .cats::-webkit-scrollbar{display:none}
  .ctile{scroll-snap-align:start}
  /* Filtros del archivo en una fila: el recuento ya está en el chip «Todos» */
  .filters__n,.filters__lbl{display:none}
}
@media (max-width:1023.98px){
  .site-nav,.site-header__search,.site-header__adv,.site-header__compare{display:none}
  .site-header__m{display:flex;gap:4px;margin-left:auto}
  /* Hero de una columna con el teaser: en tableta el comparador rápido dejaba una columna de texto de 330 px */
  .hero::before{display:none}
  .hero__in{grid-template-columns:minmax(0,1fr);gap:0;padding-top:22px;padding-bottom:18px}
  .hero h1,.hero__dek{max-width:680px}
  .qc{display:none}
  .qteaser{display:block}
  .rail{grid-auto-columns:calc((100% - 2*16px)/3.3)}
  .grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Chips de filtro en una fila deslizable (tableta y móvil) */
  .filters__chips{flex-wrap:nowrap;overflow-x:auto;flex:1;margin:-4px 0 -4px calc(-1*var(--gutter));padding:4px 4px 4px var(--gutter);scrollbar-width:none}
  .filters__chips::-webkit-scrollbar{display:none}
  /* Colocación destacada tras la 1.ª fila de 3 */
  .archive-grid.has-feat>.feat{order:1}
  .archive-grid.has-feat>:nth-child(4),.archive-grid.has-feat>.feat~*{order:2}
  .method__in{grid-template-columns:minmax(0,1fr);gap:28px}
  .latest{grid-template-columns:minmax(0,1fr)}
  .latest__vs{display:none}
  .guides{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pbody{grid-template-columns:minmax(0,1fr)}
  .pbody__aside{position:static}
  .ft__main{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  :root{--gutter:16px;--header-h:56px;--section:28px;--sh-gap:14px;
    --fs-display:31px;--lh-display:1.05;--fs-h1:32px;--lh-h1:1.04;--fs-h2:26px;--fs-h2-sm:23px;--fs-h3:16px;--fs-title:15px;--fs-lead:15.5px;--fs-body:15.5px;--fs-article:17px}
  .logo{font-size:19px}
  .logo__mark{width:26px;height:26px}
  .site-header__m .iconbtn{border-color:transparent}
  .sh{padding-top:10px}
  .sh__dek,.sh__ctl{display:none}
  /* Hero compacto */
  .hero__in{padding-top:16px;padding-bottom:14px}
  .hero__meta{margin-bottom:10px}
  .hero__meta .trust{display:none}
  .hero h1{max-width:none}
  .hero__dek{margin-top:8px}
  .hsearch{height:54px;margin-top:14px;padding:4px}
  .hsearch__scope{display:none}
  .hsearch>.ic{margin-left:10px}
  .hsearch input{font-size:16px;padding-left:8px}
  .hsearch .btn{padding:0 14px}
  .hero__pop{flex-wrap:nowrap;overflow-x:auto;margin:6px calc(-1*var(--gutter)) -4px;padding:4px var(--gutter);scrollbar-width:none}
  .hero__pop::-webkit-scrollbar{display:none}
  .cats-row{padding:0 0 18px}
  .cats-row__h{margin-bottom:10px}
  .cats{grid-auto-columns:104px}
  .ctile{padding:9px 8px 10px}
  .ctile .plate{width:44px;height:44px}
  .ctile .cat-icon{width:28px;height:28px;--ic-sw:2.1}
  .ctile__t{font-size:13px;margin-top:8px}
  .ctile__m span+span{display:none}
  .rail{grid-auto-columns:62%;gap:12px;margin:-4px calc(-1*var(--gutter));padding:4px var(--gutter);scroll-padding:0 var(--gutter)}
  .grid-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* Colocación destacada tras la 1.ª fila de 2 */
  .archive-grid.has-feat>:nth-child(3){order:2}
  .pmini{grid-template-columns:72px minmax(0,1fr) auto;gap:12px;padding:11px 0}
  .pmini__img{width:72px}
  .latest{grid-template-columns:minmax(0,1fr);gap:0}
  .latest__list{grid-template-columns:minmax(0,1fr)}
  .latest__list .pmini:nth-child(n+5){display:none}
  .latest__list .pmini:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .latest__list .pmini:nth-child(4){border-bottom:0}
  .pmini__t{font-size:14.5px}
  /* Método: H2, una frase, el enlace y los 4 principios como lista 2 × 2 de títulos (las cifras ya están en el hero y el pie) */
  .method{padding:26px 0 24px}
  .method__in{gap:14px}
  .method h2{font-size:27px;margin-top:8px}
  .method__l p{font-size:14.5px;margin:8px 0 10px}
  .facts{display:none}
  .princ{grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:0;padding-top:14px;border-top:1px solid var(--ink-line)}
  .princ li,.princ li+li{padding:0;border:0;display:flex;align-items:center;gap:7px}
  .princ b,.princ p{display:none}
  .princ .ic{display:block;width:16px;height:16px;color:var(--blue-on-ink);flex:none}
  .princ h3{font-size:var(--fs-sm);margin:0;color:var(--on-ink-2);font-weight:500}
  .guides{grid-template-columns:minmax(0,1fr);gap:0}
  .gcard{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;padding:12px 0;border-bottom:1px solid var(--rule);align-content:start}
  .gcard:first-child{padding-top:0}
  .gcard:last-child{border-bottom:0;padding-bottom:0}
  .gcard__img{grid-row:1/4;aspect-ratio:4/3;border-radius:var(--r-sm);align-self:start}
  .gcard .kicker{margin-top:0;font-size:var(--fs-micro)}
  .gcard h3{margin-top:4px}
  .gcard__x,.gcard__by{display:none}
  .gcard:nth-child(4){display:none}
  .gcard:nth-child(3){border-bottom:0;padding-bottom:0}
  /* Nativo de guías: la etiqueta y el anunciante pasan al kicker; nada sobre la imagen */
  .gcard--paid .gcard__flag{display:none}
  .gcard--paid .gcard__adk{display:inline}
  .gcard--paid .gcard__dk{display:none}
  .ad{padding:12px 0 10px}
  /* Colocación destacada: tira de 96 px (etiqueta de 28 + fila de 68) */
  .feat{grid-template-columns:82px minmax(0,1fr) auto;align-items:center;column-gap:12px;border-radius:var(--r-md)}
  .feat__flag{min-height:28px;padding:0 4px 0 10px}
  .feat__img{grid-row:2;align-self:center;width:72px;height:54px;margin:6px 0 6px 10px;border:1px solid var(--paid-line);border-radius:var(--r-xs);aspect-ratio:auto}
  .feat__b{padding:0;min-width:0}
  .feat__b .pcard__kicker,.feat__b>p:not(.feat__meta),.feat .spec{display:none}
  .feat h3{font-size:var(--fs-ui);margin:0;white-space:nowrap;overflow:hidden}
  .feat__meta{display:block;font-size:var(--fs-xs);color:var(--ink-2);margin-top:3px;white-space:nowrap}
  .feat__meta b{font-weight:650;color:var(--ink)}
  .feat__r{grid-row:2;grid-column:3;padding:0 10px 0 0;border:0;background:none}
  .feat__r>:not(.btn){display:none}
  .feat__r .btn{height:36px;padding:0 11px}
  /* Dónde comprar: 3 filas + «Ver 2 tiendas más», etiquetas en línea, sin monograma */
  .wtb__h{flex-direction:column;align-items:flex-start;padding:14px 14px 10px;gap:4px}
  .wtb__h p{text-align:left}
  .wtb__h p br,.wtb__model{display:none}
  .wtb__row{grid-template-columns:minmax(0,1fr) auto 44px;padding:10px 14px;gap:10px}
  .wtb__mono{display:none}
  .wtb__st b{font-size:var(--fs-ui)}
  .wtb__st small{margin-top:3px}
  .wtb__pr{font-size:17px}
  .wtb__row .btn{width:44px;height:44px;padding:0;font-size:0;gap:0}
  .wtb__row .btn .ic{width:17px;height:17px}
  .wtb__row--best,.wtb__row--solo{grid-template-columns:minmax(0,1fr) auto}
  .wtb__row--best .btn,.wtb__row--solo .btn{grid-column:1/-1;width:100%;height:44px;font-size:14.5px;gap:6px;padding:0 14px}
  .wtb__f>summary{padding:0 14px}
  .wtb__f p{padding:0 14px 12px 38px}
  .pbox{grid-template-columns:minmax(0,1fr);padding:14px 16px 12px}
  .pbox__btns{justify-content:stretch}
  .pbox__btns .btn{flex:1}
  .pbox__f{flex-direction:column;gap:4px}
  .pbox__p b{font-size:28px}
  /* «Compáralo con»: fila deslizable de una línea en lugar de 3 filas y botón */
  .vsbox{padding:12px 0 10px;border:0;border-top:1px solid var(--rule);border-radius:0}
  .vsbox__h{border:0;padding-bottom:6px}
  .vsbox .vslist{display:grid;grid-auto-flow:column;grid-auto-columns:82%;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-4px calc(-1*var(--gutter));padding:4px var(--gutter);scroll-padding:0 var(--gutter)}
  .vsbox .vslist::-webkit-scrollbar{display:none}
  .vsbox .vslist a{scroll-snap-align:start;border:1px solid var(--rule);border-radius:var(--r-md);padding:8px 10px;grid-template-columns:62px minmax(0,1fr) auto;gap:10px}
  .vsbox .vslist a:last-child{border-bottom:1px solid var(--rule)}
  .vsbox>.btn{display:none}
  .tray{gap:10px;padding:8px 8px 8px 14px;border-radius:var(--r-md)}
  .tray--fixed{bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 20px)}
  body.has-tray{padding-bottom:76px}
  .tray__t small,.tray__clear,.tray__long{display:none}
  .tray__slot{width:44px;height:33px;border-radius:var(--r-xs)}
  .tray__slot--empty:nth-child(n+3){display:none}
  /* Ficha */
  .crumbs{font-size:var(--fs-meta);padding-top:12px}
  .pp{grid-template-columns:minmax(0,1fr);gap:0;margin-top:10px;padding-bottom:20px}
  .pp__media,.pp__info{display:contents}
  .pp__t{order:1}
  .pp__fig{order:2;margin-top:14px}
  .pp__img{border-radius:var(--r-md)}
  .pp__s{order:3}
  .pp .pbox{order:4;margin-top:16px}
  .keyfacts{order:5;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;scrollbar-width:none;margin:8px calc(-1*var(--gutter)) -4px;padding:4px var(--gutter);scroll-padding:0 var(--gutter);scroll-snap-type:x mandatory}
  .keyfacts::-webkit-scrollbar{display:none}
  .keyfacts div{scroll-snap-align:start;padding:9px 11px}
  .pp__tl{font-size:var(--fs-ui)}
  .byline{font-size:var(--fs-meta);margin-top:10px}
  .spanel{margin-top:14px;padding-top:14px;gap:14px}
  .score--l{width:68px;height:68px;font-size:29px}
  .spanel__v{font-size:27px}
  .pp__crit{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px}
  .pp__crit .crit:nth-child(n+4){display:none}
  .pp__more{display:inline-flex;margin-top:10px}
  .ptabs a{padding:12px 11px 11px;font-size:14px}
  .psec{padding-top:26px}
  .psec .sh h2{font-size:24px}
  .pbuy{grid-template-columns:minmax(0,1fr);gap:14px}
  .an__lead{margin-bottom:14px}
  .prose h2,.prose h3{margin-top:18px}
  .angles__row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-4px calc(-1*var(--gutter));padding:4px var(--gutter);scroll-padding:0 var(--gutter)}
  .angles__row::-webkit-scrollbar{display:none}
  .angle{scroll-snap-align:start}
  .proscons{grid-template-columns:minmax(0,1fr);gap:10px}
  .proscons>div{padding:12px 14px 8px}
  .proscons li{padding:4px 0;font-size:14px}
  .verdictbox{padding:12px 14px}
  .verdictbox p{font-size:var(--fs-ui)}
  .specs dl{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);font-size:var(--fs-sm)}
  .specs dt,.specs dd{padding:8px 12px}
  .specs summary{padding:12px}
  .pbody{gap:0}
  /* Categoría: sin la leyenda de pesos (queda la barra con su aria-label y el enlace); filtros en una fila */
  .ah{grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:14px}
  .ah h1{font-size:34px}
  .ah .plate--64{width:52px;height:52px}
  .ah .plate--64 .cat-icon{width:36px;height:36px}
  .ah__d{font-size:14.5px;margin-top:8px}
  .ah__w .wlegend{display:none}
  .ah__w .wbar{margin-top:8px;height:10px}
  .filters{gap:8px;padding:10px 0;margin-bottom:12px}
  .filters__r{gap:6px}
  .filters__n,.filters__lbl,.sortsel__l,.sortsel>.ic:last-child{display:none}
  .sortsel{width:44px;padding:0;justify-content:center}
  .sortsel__i{display:block;width:18px;height:18px}
  .archive-grid{margin-top:12px}
  .buyguide{grid-template-columns:minmax(0,1fr);gap:18px}
  /* Pie */
  .site-footer{padding-top:20px}
  .nl{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 16px}
  .nl small{grid-column:1;margin-top:-4px}
  .ft__main{grid-template-columns:minmax(0,1fr);gap:0;padding:18px 0 12px}
  .ft__brand{padding-bottom:14px}
  .ft__claim{font-size:25px;margin:12px 0 0}
  .ft__about{display:none}
  .ft__adv{margin-top:14px}
  .ft__col{border-top:1px solid var(--ink-line)}
  .ft__col:last-child{border-bottom:1px solid var(--ink-line)}
  .ft__col details>summary{display:flex;justify-content:space-between;align-items:center;min-height:46px;cursor:pointer;margin:0}
  .ft__col summary .ic{display:block;color:var(--on-ink-3);transition:transform .15s}
  .ft__col details[open] summary .ic{transform:rotate(180deg)}
  .ft__col ul{padding-bottom:14px}
  .ft__disc{padding:10px 12px;font-size:var(--fs-xs);line-height:1.45}
  .ft__bot{flex-direction:column;gap:4px;padding:12px 0 18px}
  /* Estáticas */
  .formats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .nosell ul,.checks,.form-card .row2{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li+li{border-left:0;border-top:1px solid var(--rule)}
  .nf h1{font-size:31px}
  .nf__cats{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:92px;overflow-x:auto;scrollbar-width:none;margin:-4px -24px;padding:4px 24px}
}
/* Menos de 380 px (360 de Android, 375 del iPhone SE): la píldora (346 px completa) pierde «en 10 categorías» para no desbordar */
@media (max-width:379.98px){.fresh__cats{display:none}.sh h2{font-size:24px}}
/* Objetivos táctiles: 44 px de zona útil en puntero grueso (y en cualquier ventana < 768, para que las maquetas lo midan).
   Las zonas crecen con un ::after transparente centrado: el aspecto no cambia. */
@media (pointer:coarse),(max-width:767.98px){
  .cmp,.pcard__cta,.btn--xs,.btn--sm,.chip,.link,.ad__sell,.ad__why a,.crumbs a,.ft__adv,.ft__bot a,.nl small a,.logo,.reviews b a,.pbox__f a{position:relative}   /* el × de la bandeja ya es absolute */
  .cmp::after,.pcard__cta::after,.btn--xs::after,.btn--sm::after,.chip::after,.link::after,.ad__sell::after,.ad__why a::after,.crumbs a::after,.tray__slot button::after,.ft__adv::after,.ft__bot a::after,.nl small a::after,.logo::after,.reviews b a::after,.pbox__f a::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .sortsel,.hsearch .btn{height:44px}
  .viewtog button{width:44px;height:42px}
  .iconbtn{width:44px;height:44px}
  .ft__col ul{gap:0}
  .ft__col li a,.ft__col li .ft__cookies{display:flex;align-items:center;min-height:44px}
  .tray__slot button{width:24px;height:24px;right:-6px;top:-6px}
  .palette__keys>span:first-child{display:none}
}
@media (min-width:768px){.only-m{display:none!important}}
@media (max-width:767.98px){.only-d{display:none!important}}

/* 31 · Movimiento -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}