/* ==========================================================================
   Capa comercial (inc/monetization.php): solo lo que style.css no cubre.
   Display, tarjetas pagadas, colocación destacada, «Dónde comprar», caja de
   precio y barra de compra ya están en style.css (§22–24); aquí van sus
   estados nuevos y las redes de seguridad para anchos intermedios.
   ========================================================================== */

/* Display ---------------------------------------------------------------- */
/* La creatividad llena su marco: el marco tiene el tamaño nominal del escalón
   (970, 728, 300, 320) aunque la imagen se suba al doble para pantallas retina. */
.ad__frame img{width:100%;height:100%;object-fit:cover}
.ad__frame--300x600{width:300px;aspect-ratio:300/600}
/* Un anunciante largo pasa a 2 líneas en vez de cortarse ni montarse sobre «Anúnciate aquí» */
.ad__head{height:auto;min-height:18px}
.ad__head .adlabel{line-height:1.25}
/* Código de red: ancho del mayor tamaño del slot, nunca más que su contenedor */
.ad__in--html{width:min(100%,var(--ad-w,970px))}
/* Un ancho sin creatividad propia no enseña la banda (0 px, sin etiqueta ni margen) */
@media (min-width:1018px){.ad--no-w{display:none}}
@media (min-width:768px) and (max-width:1017.98px){.ad--no-t{display:none}}
@media (max-width:767.98px){.ad--no-m{display:none}}
/* Regla de colapso 2: una red sin anuncio no deja banda (AdSense aquí; GPT con .is-empty desde PHP) */
.ad:has(ins.adsbygoogle[data-ad-status="unfilled"]){display:none}

/* Piezas pagadas ---------------------------------------------------------- */
/* A 360–379 px la barra de la tira destacada no cabe en una línea: se queda «PATROCINADO … Marca ⓘ» */
@media (max-width:379.98px){.paidbar__tail{display:none}}
/* Nombre del «Destacado» del megamenú: párrafo, no encabezado (el menú no debe abrir el esquema con un H4);
   mismo aspecto que tenía el h4 y visible también donde .mfeat__b p se oculta */
.mfeat__b .mfeat__t{display:block;font:600 var(--fs-ui)/1.25 var(--sans);color:var(--ink)}
.feat h3 a:hover,.mfeat__b h4 a:hover,.mfeat__b .mfeat__t a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pcard__paidnote b{font-weight:600}
/* Nativo de guías en escritorio: la barra va sobre la imagen; la imagen baja para que nada la tape */
@media (min-width:768px){.gcard--paid .gcard__img>img{padding-top:40px}}
/* Tira destacada de 96 px: el nombre en 2 líneas como máximo y el precio nunca cortado */
@media (max-width:767.98px){
  .feat__b{overflow:hidden}
  .feat h3{white-space:normal;font-size:14px;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .feat__meta{white-space:normal}
  .feat__meta b{white-space:nowrap}
}
/* Por debajo de 420 px el botón de la tira es solo el icono (su nombre va en aria-label) */
@media (max-width:419.98px){
  .feat__r .btn{width:44px;padding:0;font-size:0;gap:0}
  .feat__r .btn .ic{width:18px;height:18px}
}

/* «Dónde comprar» --------------------------------------------------------- */
.wtb{container-type:inline-size}
.wtb__pr--na{font-size:14px;font-weight:500;color:var(--muted)}
/* Mejor precio y patrocinada a la vez: el ámbar marca lo pagado; precio y botón siguen en azul */
.wtb__row--best.wtb__row--paid{background:var(--paid-bg)}
/* «Ver N tiendas más» / «Ver menos»: abierto en móvil el resumen sigue a la vista (no se pierde el foco) */
.wtb__more-c{display:none}
.wtb__more[open] .wtb__more-o{display:none}
.wtb__more[open] .wtb__more-c{display:inline}
.wtb__more[open]>summary .ic{transform:rotate(180deg)}
@media (max-width:767.98px){.wtb__more[open]>summary{display:flex}}
/* La fila principal crece si el botón es largo («Ver precio en Amazon», «Ver en El Corte Inglés») */
@media (min-width:768px){.wtb__row--best,.wtb__row--solo,.wtb__row--main{grid-template-columns:40px minmax(0,1fr) auto minmax(150px,max-content)}}
/* La única fila con precio entre varias (sin «Mejor precio») lleva el botón como la mejor */
@media (max-width:767.98px){
  .wtb__row--main{grid-template-columns:minmax(0,1fr) auto}
  .wtb__row--main .btn{grid-column:1/-1;width:100%;height:44px;font-size:14.5px;gap:6px;padding:0 14px}
}
/* En una columna estrecha (tableta con «Compáralo con» al lado, laterales) se usa la fila móvil */
@container (max-width:519.98px){
  .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__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,.wtb__row--main{grid-template-columns:minmax(0,1fr) auto}
  .wtb__row--best .btn,.wtb__row--solo .btn,.wtb__row--main .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}
}

/* Caja de precio y barra de compra ---------------------------------------- */
.pbox__f a{display:inline-flex;align-items:center;gap:4px}
.pbox__f a .ic{width:14px;height:14px}
/* «Comparar» del contrato de core.js con aspecto de botón: la casilla real queda
   oculta pero enfocable; el estado lo enseña el propio botón y el texto «Añadido». */
.cmp.cmp--btn{height:44px;min-height:0;padding:0 18px;gap:8px;font:600 var(--fs-ui)/1 var(--sans);color:var(--ink)}
.cmp--btn input,.cmp--icon input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.cmp--btn .ic{width:16px;height:16px}
.cmp--btn:has(input:checked){border-color:var(--ink);background:var(--paper-2)}
.cmp--btn:has(input:focus-visible),.cmp--icon:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.cmp.cmp--icon{justify-content:center;gap:0;min-height:0;padding:0;color:var(--ink)}
.cmp--icon:has(input:checked){background:var(--ink);border-color:var(--ink);color:#fff}
.cmp--icon .cmp__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.buybar .price{min-width:0}
/* Hasta 429 px: «Comparar» y el botón de la tienda siguen en una fila («Ver precio en Amazon» incluido) */
@media (max-width:429.98px){
  .pbox__btns{flex-wrap:nowrap;gap:6px}
  .pbox__btns .btn{padding:0 12px}
  .pbox__btns .cmp--btn{gap:6px}
  .pbox__btns .btn--buy{flex:1 1 auto;white-space:nowrap}
}
/* Por debajo de 390 px, «Comparar» queda en su icono de 44 px; el nombre sigue para lectores de pantalla y el estado se ve en el botón */
@media (max-width:389.98px){
  .pbox__btns .cmp--btn{flex:0 0 44px;width:44px;padding:0}
  .pbox__btns .cmp--btn .cmp__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
/* La barra fija es solo de móvil: product.js la enseña al pasar la caja de precio */
@media (min-width:768px){.buybar--fixed{display:none!important}}