/* ==========================================================================
   Componentes editoriales (inc/components.php): solo lo que style.css no cubre.
   Nota, etiquetas, tarjetas, carriles, guías, «Cara a cara» y comparador rápido
   ya están en style.css; aquí van sus variantes nuevas.
   ========================================================================== */

/* Tarjeta: red de seguridad sin puntos suspensivos. El nombre corto (≤ 32) cabe en 2 líneas;
   si una ficha aún no lo tiene y su título pide 3, la tarjeta crece en vez de cortarlo. */
.pcard__title,.pmini__t{-webkit-line-clamp:3}
.gcard h3{-webkit-line-clamp:4}

/* Antetítulo: «Anillos inteligentes» pasa a «Anillos» en la tarjeta estrecha (rejilla de 2 en móvil) */
.pcard__ks{display:none}
@container (max-width:210px){.pcard__kl{display:none}.pcard__ks{display:inline}}
/* …y con varias marcas («Meta / Oakley») solo la primera: el antetítulo cabe en una línea, sin puntos suspensivos */
.pcard__kbrand--first{display:none}
@container (max-width:210px){
  .pcard .pcard__kicker{white-space:nowrap;overflow:hidden}
  .pcard__kicker .pcard__kbrand:has(+ .pcard__kbrand--first){display:none}
  .pcard__kicker .pcard__kbrand--first{display:inline}
}

/* «Comparar» con aspecto de botón fantasma (caja de precio, ficha) */
.cmp.btn{font:600 var(--fs-sm)/1 var(--sans);color:var(--ink);min-height:0}

/* Cabeceras: enlaces de subbloque y del comparador rápido a 13 px (en la maqueta, estilo en línea) */
.sh--sm .link,.qc__h .link{font-size:13px}

/* Criterios (.pp__crit de base.css): variante de 1 columna, tope propio en móvil
   (crits--lim) o todas las filas (crits--all), y «Ver los N criterios» sin JS */
.pp__crit.crits--1{grid-template-columns:minmax(0,1fr)}
.pp__more{cursor:pointer}
.pp__more:has(:focus-visible){outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
.pp__more .ic{transition:transform .15s}
.crits__off{display:none}
@media (max-width:767.98px){
  .pp__crit.crits--all .crit,.pp__crit.crits--lim .crit{display:grid}
  .pp__crit.crits--lim .crit--x{display:none}
  .pp__crit.crits--lim:has(+ .pp__more :checked) .crit--x{display:grid}
  .pp__more:has(:checked) .crits__on{display:none}
  .pp__more:has(:checked) .crits__off{display:inline}
  .pp__more:has(:checked) .ic{transform:rotate(180deg)}
}
/* El porqué de cada nota (why=true): una línea gris bajo cada fila, plegada tras «Por qué cada nota».
   Sin :has() se ve siempre y la casilla no aparece. */
.crit__why{grid-column:1/-1;margin-top:-1px;font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.crits__why{display:none;cursor:pointer;margin-top:12px;font-size:13px}
.crits__why .ic{transition:transform .15s}
@supports selector(:has(*)){
  .crits__why{display:inline-flex}
  .crits__why:has(:focus-visible){outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
  .crits--why .crit__why{display:none}
  .crits--why:has(~ .crits__why :checked){row-gap:14px}
  .crits--why:has(~ .crits__why :checked) .crit__why{display:block}
  .crits__why:has(:checked) .crits__on{display:none}
  .crits__why:has(:checked) .crits__off{display:inline}
  .crits__why:has(:checked) .ic{transform:rotate(180deg)}
}
@media (max-width:767.98px){
  .crits__why{margin-top:10px}
  .pp__more+.crits__why{margin-left:18px}
}

/* Tarjeta compacta: si «desde» y «Comparar» no caben en una línea (columnas estrechas a 1.024), bajan en vez de pisar la nota */
.pmini__m{flex-wrap:wrap;row-gap:4px}

/* Tarjeta compacta ancha: vista de lista del archivo, con la tagline completa y «Ver precio» */
.pmini--wide{grid-template-columns:132px minmax(0,1fr) auto;gap:18px;padding:14px 0;align-items:start}
.pmini--wide .pmini__img{width:132px}
.pmini__d{font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2);margin-top:1px}
.pmini--wide .pmini__m{margin-top:5px;flex-wrap:wrap;row-gap:6px}
.pmini--wide .pmini__m .pcard__cta{margin-left:auto}
.pmini--wide .pmini__r{align-self:start;padding-top:2px}
.pmini--wide .pmini__r .ruler{width:84px}
@media (max-width:767.98px){
  .pmini--wide{grid-template-columns:88px minmax(0,1fr) auto;gap:12px;padding:12px 0}
  .pmini--wide .pmini__img{width:88px}
  .pmini__d{font-size:13px}
  .pmini--wide .pmini__r .ruler,.pmini--wide .pmini__m .pcard__cta{display:none}   /* el título ya lleva a la ficha */
}

/* Tarjeta de guía en fila a cualquier ancho (laterales y listas); en móvil ya lo es en .guides */
.gcard--row{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;align-content:start;padding:12px 0;border-bottom:1px solid var(--rule)}
.gcard--row:last-child{border-bottom:0}
.gcard--row .gcard__img{grid-row:1/4;aspect-ratio:4/3;border-radius:var(--r-sm);align-self:start}
.gcard--row .kicker{margin-top:0;font-size:var(--fs-micro)}
.gcard--row h3{margin-top:4px;font-size:15px}
/* Menos de 4 guías: columnas a su medida en escritorio */
@media (min-width:1024px){
  .guides--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .guides--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guides--1{grid-template-columns:minmax(0,1fr);max-width:420px}
}
/* Tableta (en todas las páginas, no solo la portada): las guías en filas (miniatura + texto) en 2 columnas, como en móvil pero a dos;
   la rejilla de 2 × 2 con imagen 16:9 y extracto medía más de 800 px */
@media (min-width:768px) and (max-width:1023.98px){
  .guides{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:0}
  .guides .gcard{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:14px;padding:14px 0;border-bottom:1px solid var(--rule);align-content:start}
  .guides .gcard:nth-child(-n+2){padding-top:0}
  .guides .gcard:nth-last-child(-n+2):nth-child(odd),.guides .gcard:last-child{border-bottom:0;padding-bottom:0}
  .guides .gcard__img{grid-row:1/4;aspect-ratio:4/3;border-radius:var(--r-sm);align-self:start}
  .guides .gcard .kicker{margin-top:0;font-size:var(--fs-micro)}
  .guides .gcard h3{margin-top:4px;font-size:16px}
  .guides .gcard__x{display:none}
}

/* «Cara a cara» en la ficha de A: «vs B» sin sangría */
.vslist__t i:first-child{margin-left:0}
/* Comparativa patrocinada en «Cara a cara»: «Patrocinada · Marca ⓘ» encima de la fila */
.vslist__paid{border-bottom:1px solid var(--rule)}
.vslist__paid:last-child{border-bottom:0}
.vslist__lbl{display:flex;align-items:center;gap:2px;padding-top:10px}
.vslist__paid>a:last-child{padding-top:6px}
.vslist .vslist__lbl a.paidbar__why{display:inline-grid;grid-template-columns:none;gap:0;padding:0;border:0;border-radius:50%}
.vsbox .vslist__paid{border-bottom:0}

/* Comparador rápido: si un nombre ocupa 2 líneas, las dos notas siguen a la misma altura */
.qc__p figure{align-self:stretch}
.qc__p figcaption{flex:1;justify-content:space-between}
/* Comparador rápido: en una caja estrecha, «6 criterios · hasta 4» baja entero bajo el botón */
.qc__f{flex-wrap:wrap;row-gap:8px}
.qc__f span{white-space:nowrap}

/* Comparativa patrocinada en el comparador rápido: quién la encarga, en ámbar */
.qc__by{font-size:var(--fs-meta);color:var(--paid);margin:4px 0 8px}
.qc--paid .qc__b{padding-top:12px}