/* ==========================================================================
   Portada (front-page.php, DESIGN §8): solo lo que style.css no cubre.
   Hero, categorías, carril, «Últimas fichas», método y guías ya están allí.
   ========================================================================== */

/* Ancla «Los Nº 1» (pie y menú): justo bajo la cabecera fija. html ya reserva
   --header-h + 56 px (las pestañas fijas de la ficha); aquí se descuentan esos 56. */
#los-n1{scroll-margin-top:-56px}

/* Categorías: el kicker de la cabecera va en tinta */
.cats-row__h .kicker{color:var(--ink)}

/* Ámbito del buscador del hero: <select> nativo con el aspecto del botón «Todo ▾».
   El relleno de la etiqueta pasa al select: su anillo de foco rodea texto y flecha sin pisarlos. */
.hsearch__scope{position:relative;flex:none;padding-left:0;padding-right:2px}
.hsearch__scope select{appearance:none;-webkit-appearance:none;height:100%;border:0;background:transparent;font:inherit;color:inherit;padding:0 29px 0 10px;cursor:pointer;outline:0;max-width:150px;field-sizing:content;text-overflow:ellipsis}
.hsearch__scope select:focus-visible{outline:2px solid var(--blue);outline-offset:-4px;border-radius:var(--r-xs)}
.hsearch__scope .ic{position:absolute;right:12px;top:50%;margin-top:-7.5px;pointer-events:none}

/* Chips: el enlace ocupa su caja (la fila no parte en tableta y escritorio: ver home.js) */
.hero__pop .chip{flex:none}

/* Escritorio estrecho (1.024–1.199): con «Cara a cara» al lado, las columnas de .pmini
   quedaban en 290 px (antetítulo y título en 2 líneas y «Comparar» debajo del precio).
   La lista usa todo el ancho y «Cara a cara» pasa debajo, en 3 columnas. */
@media (min-width:1024px) and (max-width:1199.98px){
  .latest{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .latest__vs .vslist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .latest__vs .vslist a,.latest__vs .vslist__paid{border-bottom:0}
  .latest__vs .vslist a{padding:8px 0 4px}
}

/* «Últimas fichas» sin «Cara a cara»: la lista ocupa todo el ancho */
@media (min-width:1024px){
  .latest--solo{grid-template-columns:minmax(0,1fr)}
  .latest--solo .latest__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .latest--solo .latest__list .pmini:nth-last-child(-n+3){border-bottom:0}
}

/* Tableta: 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}
}

/* Tableta: dos columnas (texto | principios en 2 × 2) y sin la fila de cifras, que ya están
   en la píldora del hero y en el pie, como en móvil. En una columna la banda medía 522 px. */
@media (min-width:768px) and (max-width:1023.98px){
  .method__in{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:36px}
  .method .facts{display:none}
  .method .princ{grid-template-columns:1fr 1fr;row-gap:22px;margin-top:4px}
  .method .princ li:nth-child(odd){padding-left:0;border-left:0}
}

/* 360 (Android): sin la lupa, el texto de ejemplo del buscador cabe entero; en el teaser,
   2 px menos de hueco y la línea «Cara a cara · 9,4 vs 9,2 · 6 criterios» no parte */
@media (max-width:379.98px){
  .hsearch>.ic{display:none}
  .hsearch input{padding-left:12px}
  .qteaser__row{gap:10px;padding-left:10px;padding-right:10px}
  .qteaser__row small{text-wrap:balance}
}