/* ==========================================================================
   Ficha de producto (single-product.php): solo lo que style.css no cubre.
   Hero, pestañas, «Dónde comprar», análisis, ficha técnica, crítica y
   preguntas ya están en style.css §24 y §26; aquí van sus variantes y los
   estilos en línea de la maqueta (product.html).
   ========================================================================== */

/* Hero -------------------------------------------------------------------- */
.pp__paid{margin-top:12px;padding:8px 12px;gap:8px;align-items:flex-start;font-size:var(--fs-meta);line-height:1.4}
.pp__paid .ic{width:16px;height:16px;margin-top:1px}
/* Aviso de disponibilidad («Aún no se vende en España»): nota neutra, nunca en ámbar (reservado a lo pagado) */
.pp__notice{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper-2);color:var(--ink);font-size:var(--fs-meta);line-height:1.4}
.pp__notice .ic{flex:none;width:16px;height:16px;margin-top:1px;color:var(--ink-2)}
.pp__notice--wtb{margin:0 0 14px}
.spanel__m .link{font-size:13px}
.pp__paid a{white-space:nowrap}
.spanel__m .link:hover{text-decoration:underline;text-underline-offset:3px}
@media (min-width:768px){
  /* Datos clave: tantas columnas como datos (normalmente 4) */
  .keyfacts{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
}
/* Tableta: imagen y datos clave (2 × 2) a la izquierda, título y nota a la derecha, y la caja de precio
   a lo ancho debajo, con su distribución de escritorio (en una columna de 350 px no cabía y dejaba
   un hueco de 400 px bajo los datos clave) */
@media (min-width:768px) and (max-width:1023.98px){
  .pp{grid-template-areas:"media t" "media s" "box box";row-gap:0}
  .pp__info{display:contents}
  .pp__media{grid-area:media}
  .pp__t{grid-area:t}
  .pp__s{grid-area:s}
  .pp .pbox{grid-area:box;margin-top:24px}
  .keyfacts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Alternativas: desde 1.024 caben las 5 tarjetas y las flechas sobran (como en la maqueta) */
@media (min-width:1024px){#alternativas .sh__ctl{display:none}}

/* Pestañas: el enlace activo se ve entero al desplazar la fila */
.ptabs__in{scroll-padding:0 var(--gutter)}

/* Firma: cada tramo lleva su «·» delante y la franja de 16 px de la izquierda se recorta (patrón de blog.css):
   al partirse en dos líneas el «·» queda al inicio de la segunda, oculto, y no colgando al final de la primera. */
.pp .byline{column-gap:0;margin-left:-16px;clip-path:inset(-8px -8px -8px 11px)}
.pp .byline>span::before{content:"·";display:inline-block;width:16px;text-align:center}

/* «Dónde comprar» ------------------------------------------------------------ */
.pbuy--solo{grid-template-columns:minmax(0,1fr)}
.vsbox>.btn{margin:8px 0 10px}
.vsbox>.btn .ic{width:16px;height:16px}

/* Cuerpo ----------------------------------------------------------------- */
.pbody--solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .pbody__aside{padding-top:32px}   /* a la altura del filete de «Nuestro análisis» */
  /* Lateral más alto que la ventana (robapáginas 300 × 600 y guías): deja de ser fijo para que las guías se lean (product.js) */
  .pbody__aside.is-static{position:static}
}
/* El robapáginas solo va en el lateral de escritorio: en tableta y móvil quedaría pegado a la banda product_inline */
@media (max-width:1023.98px){.pbody__ad{display:none}}
@media (min-width:768px){
  .angles__row{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
}
.angles__note{margin-top:10px}
.proscons{margin-top:18px}
.specs__src{font-size:13px;color:var(--muted);text-align:right}
.reviews__lang{white-space:nowrap}
.faq summary .ic{transition:transform .15s}

/* Banda product_inline ----------------------------------------------------- */
.pp-inline{margin-top:36px}

@media (max-width:767.98px){
  .specs__src{font-size:var(--fs-xs)}
  .pp-inline{margin-top:28px}
}

/* ==========================================================================
   Bloques del estándar de experto (sep-2026). Cada uno sale solo si la ficha
   tiene sus datos: justificación de cada criterio, galería, versiones y
   precios, «Para quién es», fuentes, rivales, datos medidos y «Lo que
   conviene saber».
   ========================================================================== */

/* Galería: miniaturas 4:3 blancas bajo la foto (a su derecha, el crédito). Nada encima de las fotos. */
.pp__fig{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start}
.pp__img,.pp__fig figcaption{grid-column:1/-1}
.pp__thumbs{grid-column:1;display:flex;gap:8px;margin-top:10px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:3px;margin-left:-3px;margin-bottom:-3px}
.pp__thumbs::-webkit-scrollbar{display:none}
.pp__thumbs+figcaption{grid-column:2;align-self:end;margin-top:0;padding-bottom:1px}
.pp__thumb{flex:none;width:64px;aspect-ratio:4/3;padding:0;border:1px solid var(--rule);border-radius:var(--r-sm);background:#fff;overflow:hidden;cursor:pointer;transition:border-color .15s}
.pp__thumb img{display:block;width:100%;height:100%;object-fit:contain}
.pp__thumb:hover{border-color:var(--rule-3)}
.pp__thumb[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}

/* Versiones y precios (bajo «Dónde comprar», en la columna de la lista): una celda por versión */
.pbuy__main{display:grid;gap:16px;align-content:start;min-width:0}
.pver{border:1px solid var(--rule-2);border-radius:var(--r-lg);background:#fff;overflow:hidden}
.pver>summary{display:flex;align-items:center;gap:6px 12px;min-height:44px;padding:0 20px;cursor:pointer;list-style:none}
.pver>summary::-webkit-details-marker{display:none}
.pver__h{font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pver__src,.pver__from{margin-left:auto;font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}
.pver__from b{font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
.pver[open] .pver__from,.pver:not([open]) .pver__src{display:none}
.pver>summary>.ic{flex:none;width:16px;height:16px;color:var(--muted);transition:transform .15s}
.pver[open]>summary>.ic{transform:rotate(180deg)}
/* Filetes con el hueco de 1 px de la rejilla; ::after rellena de blanco lo que sobra de la última fila */
.pver__l{display:grid;grid-template-columns:repeat(var(--c,4),minmax(0,1fr));gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.pver__l::after{content:"";grid-column-end:-1;margin-top:-1px;background:#fff}
.pver__l li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 20px 12px;background:#fff}
.pver__n{font-size:var(--fs-sm);color:var(--ink-2)}
.pver__p{font:650 17px/1.2 var(--sans);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pver__na{font:500 var(--fs-meta)/1.2 var(--sans);color:var(--muted)}
.pver__note{font-size:var(--fs-xs);line-height:1.35;color:var(--muted)}

/* Para quién es: Sí / No en una caja partida */
.forwhom{margin-top:18px}
.forwhom__h{margin-bottom:10px;font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.forwhom__cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-radius:var(--r-md);background:var(--paper-2)}
.forwhom__cols>div{padding:12px 16px 8px}
.forwhom__cols>div+div{border-left:1px solid var(--rule)}
.forwhom h4{display:flex;align-items:center;gap:6px;margin-bottom:2px;font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.forwhom h4 .ic{display:none}
.forwhom__yes h4{color:var(--pos)}
.forwhom__no h4{color:var(--neg)}
.forwhom li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:8px;padding:4px 0;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.forwhom li .ic{width:16px;height:16px;margin-top:2px}
.forwhom__yes .ic{color:var(--pos)}
.forwhom__no .ic{color:var(--neg)}

/* Fuentes: plegado al final del análisis, agrupado por tipo */
.srcs{margin-top:18px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.srcs>summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-size:var(--fs-sm);color:var(--ink)}
.srcs>summary::-webkit-details-marker{display:none}
.srcs>summary>.ic{flex:none;width:16px;height:16px;color:var(--muted)}
.srcs>summary>.ic:last-child{margin-left:auto;transition:transform .15s}
.srcs[open]>summary>.ic:last-child{transform:rotate(180deg)}
.srcs__t{font-weight:600;white-space:nowrap}
.srcs__t small{margin-left:2px;font-size:var(--fs-2xs);font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.srcs__d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-meta);color:var(--muted)}
.srcs__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 24px;padding:2px 0 16px}
.srcs h4{margin-bottom:4px;font:600 var(--fs-micro)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.srcs li{padding:3px 0;font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
.srcs li a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-3);text-underline-offset:2px}
.srcs li a:hover{text-decoration-color:currentColor}
.srcs li a .ic{width:12px;height:12px;margin-left:2px;vertical-align:-1px;color:var(--muted)}
.srcs li small{font-size:var(--fs-xs);color:var(--muted)}

/* Frente a sus rivales: 2-3 tarjetas; fila deslizable en móvil */
.rivals{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.rcard{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-md);background:#fff}
/* Cabecera: miniatura a la izquierda; a su lado, el nombre y debajo la nota XS con su veredicto */
.rcard__h{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 10px;min-width:0}
.rcard__img{grid-row:1/3;width:64px;aspect-ratio:4/3;border:1px solid var(--rule);border-radius:var(--r-xs);background:#fff;overflow:hidden}
.rcard__img img{display:block;width:100%;height:100%;object-fit:contain}
.rcard h3{grid-column:-2;min-width:0;font:600 var(--fs-ui)/1.25 var(--sans);align-self:end}
.rcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.rcard__s{grid-column:-2;display:flex;align-items:center;gap:6px;align-self:start}
.rcard__h--solo{grid-template-columns:minmax(0,1fr)}
.rcard p{padding-left:10px;border-left:2px solid var(--rule-2);font-size:var(--fs-sm);line-height:1.45;color:var(--ink-2)}
.rcard p b{font-weight:600;color:var(--ink)}
.rcard p.rcard__this{border-left-color:var(--ink)}
.rcard__cmp{align-self:flex-start;margin-top:auto;font-size:13px}

/* Datos medidos: el dato en azul (DESIGN §2, «dato medido»), con su contexto y su fuente */
.measured{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:8px}
.measured li{display:flex;flex-direction:column;gap:3px;min-width:0;padding:11px 12px 10px;border:1px solid var(--rule);border-radius:var(--r-md);background:#fff}
.measured__l{font-size:var(--fs-meta);line-height:1.3;color:var(--ink-2)}
.measured__v{font:650 20px/1.15 var(--sans);letter-spacing:-.01em;color:var(--blue);font-variant-numeric:tabular-nums}
/* Escritorio: el contexto bajo el dato y la fuente al pie de la tarjeta (el <small> no pinta caja) */
.measured__c{display:contents}
.measured__ctx{font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
.measured__sep{display:none}
.measured__s{align-self:flex-start;margin-top:auto;padding-top:4px;font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
a.measured__s{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-3);text-underline-offset:2px}
a.measured__s:hover{color:var(--ink);text-decoration-color:currentColor}
.measured__s .ic{width:12px;height:12px;margin-left:1px;vertical-align:-1px}
.measured__note{margin-top:10px}
.measured__more{display:none;cursor:pointer;margin-top:10px}

/* Lo que conviene saber (encabeza «Ficha técnica») */
.kinfo{margin-bottom:12px;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.kinfo>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 16px;cursor:pointer;list-style:none}
.kinfo>summary::-webkit-details-marker{display:none}
.kinfo>summary .ic{color:var(--muted);transition:transform .15s}
.kinfo[open]>summary .ic{transform:rotate(180deg)}
.kinfo__h{font:600 var(--fs-kicker)/1.2 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.kinfo dl{border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.kinfo dl>div{min-width:0;padding:9px 16px 10px;border-top:1px solid var(--rule)}
.kinfo dl>div:nth-child(-n+2){border-top:0}
.kinfo dl>div:nth-child(2n){border-left:1px solid var(--rule)}
.kinfo dl>div:last-child:nth-child(odd){grid-column:1/-1}
.kinfo dt{font-size:var(--fs-meta);color:var(--muted)}
.kinfo dd{margin-top:2px;font-size:14px;line-height:1.4;color:var(--ink)}

@media (min-width:768px) and (max-width:1023.98px){
  .measured{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767.98px){
  .pp__thumbs{gap:6px;margin-top:8px}
  .pp__thumb{width:60px}
  .pver>summary{padding:0 14px}
  .pver[open]>summary{flex-wrap:wrap;padding-top:10px;padding-bottom:8px}
  .pver[open]>summary>.ic{margin-left:auto}
  .pver[open] .pver__src{order:3;flex-basis:100%;margin-left:0}
  .pver__l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pver__l li{padding:9px 14px 10px}
  .pver__p{font-size:16px}
  .forwhom__cols{grid-auto-flow:row}
  .forwhom__cols>div{padding:10px 14px 6px}
  .forwhom__cols>div+div{border-left:0;border-top:1px solid var(--rule)}
  .forwhom li{font-size:14px;padding:3px 0}
  .srcs__d{display:none}
  .srcs__groups{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px}
  .rivals{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:10px;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)}
  .rivals::-webkit-scrollbar{display:none}
  .rcard{scroll-snap-align:start}
  .measured{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
  .measured li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;align-items:baseline;border:0;border-top:1px solid var(--rule);border-radius:0;padding:8px 12px}
  .measured li:first-child{border-top:0}
  .measured__v{font-size:16px;text-align:right}
  @supports selector(:has(*)){
    .measured--lim .measured__x{display:none}
    .measured--lim:has(~ .measured__more :checked) .measured__x{display:grid}
    .measured__more{display:inline-flex}
    .measured__more:has(:focus-visible){outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-xs)}
    .measured__more:has(:checked) .crits__on{display:none}
    .measured__more:has(:checked) .crits__off{display:inline}
    .measured__more .ic{transition:transform .15s}
    .measured__more:has(:checked) .ic{transform:rotate(180deg)}
  }
  .measured__c{display:block;grid-column:1/-1;font-size:var(--fs-xs);line-height:1.4;color:var(--muted)}
  .measured__sep{display:inline}
  .measured__s{display:inline;margin:0;padding:0}
  .kinfo dl{grid-template-columns:minmax(0,1fr)}
  .kinfo dl>div{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:12px;padding:8px 12px;border-top:1px solid var(--rule)!important;border-left:0!important}
  .kinfo dl>div:first-child{border-top:0!important}
  .kinfo dd{margin-top:0;font-size:var(--fs-sm)}
  .kinfo dt{font-size:var(--fs-sm)}
  .kinfo>summary{min-height:44px;padding:0 12px}
}