/* ==========================================================================
   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}}

/* ---- Dónde comprar: pestañas por versión, ejemplo y mínimo de 30 días (feeds de precios, nov-2026) ---- */
.wtb__sample{display:flex;align-items:center;gap:8px;margin:0;padding:8px 20px;background:var(--paid-bg);border-bottom:1px solid var(--paid-line);font-size:var(--fs-meta);color:var(--paid);line-height:1.35}
.wtb__vs{position:relative;display:flex;gap:8px;padding:12px 20px;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
.wtb__v{position:relative;flex:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-height:44px;min-width:88px;padding:7px 12px;border:1px solid var(--rule-2);border-radius:var(--r-md);background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.wtb__v:hover{border-color:var(--rule-3);background:var(--paper-2)}
.wtb__vn{font:600 var(--fs-sm)/1.15 var(--sans);color:var(--ink);white-space:nowrap}
.wtb__v small{font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.wtb__v:has(input:checked){border-color:var(--ink);background:var(--ink)}
.wtb__v:has(input:checked) .wtb__vn{color:#fff}
.wtb__v:has(input:checked) small{color:var(--on-ink-2)}
.wtb__v:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.wtb__vh{margin:0;padding:10px 20px 0;font-size:var(--fs-meta);color:var(--muted);line-height:1.4}
.wtb__vh b{color:var(--ink);font-weight:600}
.wtb__panel>.num:first-of-type>.wtb__row:first-child{margin-top:2px}
/* Con :has, solo el panel de la versión marcada; sin :has se ven todos, cada uno con su título. */
/* Sin :has, la tira de pestañas no haría nada: se oculta y se ven todos los paneles con su título. */
.wtb--v .wtb__vs{display:none}
@supports selector(:has(*)){
  .wtb--v .wtb__vs{display:flex}
  .wtb--v .wtb__panel{display:none}
  .wtb--v:has(.wtb__vs>:nth-child(1) input:checked) .wtb__panels>:nth-child(1),
  .wtb--v:has(.wtb__vs>:nth-child(2) input:checked) .wtb__panels>:nth-child(2),
  .wtb--v:has(.wtb__vs>:nth-child(3) input:checked) .wtb__panels>:nth-child(3),
  .wtb--v:has(.wtb__vs>:nth-child(4) input:checked) .wtb__panels>:nth-child(4),
  .wtb--v:has(.wtb__vs>:nth-child(5) input:checked) .wtb__panels>:nth-child(5),
  .wtb--v:has(.wtb__vs>:nth-child(6) input:checked) .wtb__panels>:nth-child(6),
  .wtb--v:has(.wtb__vs>:nth-child(7) input:checked) .wtb__panels>:nth-child(7),
  .wtb--v:has(.wtb__vs>:nth-child(8) input:checked) .wtb__panels>:nth-child(8),
  .wtb--v:has(.wtb__vs>:nth-child(9) input:checked) .wtb__panels>:nth-child(9),
  .wtb--v:has(.wtb__vs>:nth-child(10) input:checked) .wtb__panels>:nth-child(10),
  .wtb--v:has(.wtb__vs>:nth-child(11) input:checked) .wtb__panels>:nth-child(11),
  .wtb--v:has(.wtb__vs>:nth-child(12) input:checked) .wtb__panels>:nth-child(12),
  .wtb--v:has(.wtb__vs>:nth-child(13) input:checked) .wtb__panels>:nth-child(13),
  .wtb--v:has(.wtb__vs>:nth-child(14) input:checked) .wtb__panels>:nth-child(14),
  .wtb--v:has(.wtb__vs>:nth-child(15) input:checked) .wtb__panels>:nth-child(15),
  .wtb--v:has(.wtb__vs>:nth-child(16) input:checked) .wtb__panels>:nth-child(16),
  .wtb--v:has(.wtb__vs>:nth-child(17) input:checked) .wtb__panels>:nth-child(17),
  .wtb--v:has(.wtb__vs>:nth-child(18) input:checked) .wtb__panels>:nth-child(18),
  .wtb--v:has(.wtb__vs>:nth-child(19) input:checked) .wtb__panels>:nth-child(19),
  .wtb--v:has(.wtb__vs>:nth-child(20) input:checked) .wtb__panels>:nth-child(20),
  .wtb--v:has(.wtb__vs>:nth-child(21) input:checked) .wtb__panels>:nth-child(21),
  .wtb--v:has(.wtb__vs>:nth-child(22) input:checked) .wtb__panels>:nth-child(22),
  .wtb--v:has(.wtb__vs>:nth-child(23) input:checked) .wtb__panels>:nth-child(23),
  .wtb--v:has(.wtb__vs>:nth-child(24) input:checked) .wtb__panels>:nth-child(24){display:block}
}
.wtb__hist{display:flex;align-items:center;gap:12px;margin:0;padding:10px 20px;border-top:1px solid var(--rule);font-size:var(--fs-meta);color:var(--ink-2);line-height:1.35}
.wtb__hist b{color:var(--ink);font-variant-numeric:tabular-nums}
.wtb__spark{flex:none;overflow:visible}
.wtb__spark polyline{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.wtb__spark circle{fill:var(--blue)}
@media (max-width:767.98px){
  .wtb__sample{padding:8px 14px}
  .wtb__vs{padding:10px 14px;gap:6px}
  .wtb__v{min-width:76px;padding:6px 10px}
  .wtb__vh{padding:8px 14px 0}
  .wtb__hist{padding:10px 14px;gap:10px}
  .wtb__spark{width:96px;height:26px}
}
/* Vista de ejemplo: lo que falta para tener precios reales (solo socio y administradores). */
.wtb__todo{border-bottom:1px solid var(--paid-line);background:#FFFBF0}
.wtb__todo>summary{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 20px;cursor:pointer;list-style:none;font-size:var(--fs-sm);color:var(--paid)}
.wtb__todo>summary::-webkit-details-marker{display:none}
.wtb__todo>summary .ic{width:17px;height:17px}
.wtb__todo p{margin:0;padding:0 20px 8px;font-size:var(--fs-meta);color:var(--ink-2);line-height:1.45}
.wtb__todo ol{list-style:none;margin:0;padding:0 20px 12px;display:grid;gap:6px}
.wtb__todo li{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-meta);line-height:1.4;color:var(--ink)}
.wtb__todo li .ic{flex:none;width:16px;height:16px;margin-top:1px}
.wtb__todo li em{font-style:normal;font-weight:600;white-space:nowrap}
.wtb__todo li.is-todo .ic,.wtb__todo li.is-todo em{color:var(--paid)}
.wtb__todo li.is-done{color:var(--muted)}
.wtb__todo li.is-done .ic,.wtb__todo li.is-done em{color:var(--pos)}
@media (max-width:767.98px){.wtb__todo>summary,.wtb__todo p,.wtb__todo ol{padding-left:14px;padding-right:14px}}