/* ===========================================================
   JuntoCompra — Ficha completa de producto
   (DISEÑO/FICHA COMPLETA DE PRODUCTO/Pagina de producto.ai)

   El diseño es una pila de tarjetas blancas sobre el fondo claro,
   con el bloque de preguntas en oscuro para cortar el ritmo. Móvil
   primero: en pantalla estrecha todo va en una columna y la compra
   queda justo debajo de la galería, que es el orden en que se mira.
   =========================================================== */

/* ── Armazón ───────────────────────────────────────────── */
.fp{padding-block:calc(var(--header-h) + var(--s7)) var(--s10)}

.fp-sec{
  background:var(--white);
  border-radius:var(--r-xl);
  padding:clamp(22px,3.4vw,44px);
  margin-bottom:var(--s6);
}
.fp-sec--dark{
  background:var(--ink);color:var(--white);
  padding-block:clamp(30px,4vw,56px);
}
.fp-sec__h{
  font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:800;
  letter-spacing:var(--track-heading);line-height:1.15;
}
.fp-sec__lead{
  color:var(--ink-60);font-size:var(--fs-body);
  margin-top:var(--s2);
}

/* ── Migas ─────────────────────────────────────────────── */
.fp-migas{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:var(--fs-sm);color:var(--ink-40);
  margin-bottom:var(--s5);
}
.fp-migas a{color:var(--ink-60);text-decoration:none}
.fp-migas a:hover{color:var(--red);text-decoration:underline}
.fp-migas span[aria-current]{color:var(--ink)}

/* ═══ ARRIBA: galería + compra ═════════════════════════════ */
.fp-top{
  display:grid;gap:var(--s6);
  margin-bottom:var(--s6);
}
@media (min-width:980px){
  /* La columna de compra no se estira: pasado cierto ancho la tabla
     de tramos se vuelve ilegible de tan separada. */
  .fp-top{grid-template-columns:minmax(0,1fr) 400px;gap:clamp(24px,3vw,48px)}
}

.fp-top__izq{align-self:start;min-width:0}

/* — Galería — */
.fp-gal{
  position:relative;
  background:var(--white);
  border-radius:var(--r-xl);
  padding:var(--s5);
  overflow:hidden;
}
/* La zona de la foto manda sobre la altura: cuadrada en móvil y algo
   más baja en pantalla grande, para que quepa el bloque de compra al
   lado sin dejar un hueco enorme debajo. */
.fp-gal__marco{
  position:relative;
  aspect-ratio:1/1;
  border-radius:var(--r-lg);
  overflow:hidden;
}
@media (min-width:980px){
  .fp-gal__marco{aspect-ratio:4/3.4}
}
.fp-gal__marco .pcard__track{height:100%}
.fp-gal__marco .pcard__slide{height:100%}
.fp-gal__marco .pcard__img{
  width:100%;height:100%;
  object-fit:contain;
  padding:clamp(16px,4vw,48px);
}
.fp-gal__marco .pcard__img--placeholder{
  display:grid;place-items:center;
  font-size:clamp(76px,16vw,150px);
  line-height:1;
}

/* El reloj y el anillo flotan sobre la foto, como en el diseño.

   Los dos componentes vienen de la tarjeta, donde van en
   position:absolute sobre la foto. Aquí ya los coloca su envoltorio,
   así que se devuelven a estático: un absoluto dentro de otro absoluto
   sin tamaño mide 0 de ancho, y el texto se partía en cada espacio
   («30h» arriba, «23m» abajo). */
.fp-gal__reloj{
  position:absolute;top:var(--s5);left:var(--s5);z-index:2;
}
.fp-gal__reloj .pcard__timer{
  position:static;
  gap:8px;
  font-size:var(--fs-body);font-weight:500;color:var(--ink);
  white-space:nowrap;
}
.fp-gal__reloj .pcard__timer::before{width:7px;height:7px;flex:none}
.fp-gal__anillo{
  position:absolute;top:var(--s4);right:var(--s4);z-index:2;
}
.fp-gal__anillo .pcard__save{position:static;transform:scale(1.18);transform-origin:top right}

/* Puntos y acciones en la base de la foto */
.fp-gal__pie{
  position:absolute;bottom:var(--s4);left:var(--s5);right:var(--s5);z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  pointer-events:none;
}
.fp-gal__pie > *{pointer-events:auto}
.fp-gal__acciones{display:flex;gap:var(--s2)}
.fp-gal__accion{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:var(--surface);color:var(--ink);
  cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast);
}
.fp-gal__accion:hover{background:var(--surface-2);transform:translateY(-1px)}
.fp-gal__accion svg{width:18px;height:18px}
/* Marcado como favorito. Se apoya en aria-pressed, igual que el
   corazón de la tarjeta: el estado vive en el atributo que además lo
   anuncia el lector de pantalla, no en una clase paralela. */
.fp-gal__accion[aria-pressed="true"]{background:var(--red);color:var(--white)}
.fp-gal__accion[aria-pressed="true"] svg{fill:currentColor}

/* — Miniaturas —
   Van borde con borde con la foto grande, como en el diseño: medidas
   sobre el .ai, cuatro miniaturas de 110px y tres huecos de 9px suman
   467px, justo el ancho de la tarjeta. De ahí salen las proporciones:
   hueco ≈1,9% del ancho (12px aquí), separación con la foto ≈3,7%
   (24px) y miniatura de 6:5.

   Siempre 4 por fila: es el estándar de fotos por producto (ver la
   cabecera de data.js). Con 4 fotos la tira cuadra exacta con la foto
   grande; con más, se ven 4 y el resto se alcanza deslizando. */
.fp-miniaturas{
  --por-fila:4;
  --hueco:var(--s3);
  position:relative;            /* referencia para desplazar la tira */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--por-fila) - 1) * var(--hueco)) / var(--por-fila));
  gap:var(--hueco);
  margin-top:var(--s6);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  container-type:inline-size;
}
.fp-miniaturas::-webkit-scrollbar{display:none}
.fp-mini{
  aspect-ratio:6/5;
  display:grid;place-items:center;
  border:2px solid transparent;border-radius:var(--r-lg);
  background:var(--white);
  font-size:32px;line-height:1;
  cursor:pointer;
  overflow:hidden;
  scroll-snap-align:start;
  transition:border-color var(--t-fast);
}
/* El emoji crece con la miniatura. Va aparte con @supports: una
   declaración con var() que el navegador no entiende no cae a la de
   arriba, se queda sin valor. */
@supports (font-size:1cqi){
  .fp-mini{font-size:calc(28cqi / var(--por-fila))}
}
/* El anillo de foco va por dentro. Por fuera lo recortaría el
   desplazamiento de la tira, y darle relleno a la tira para evitarlo
   descuadraría los bordes con la foto grande, que es justo lo que se
   quiere alineado. */
.fp-mini:focus-visible{outline:2px solid var(--ink);outline-offset:-6px}
.fp-mini img{width:100%;height:100%;object-fit:contain;padding:10%}
.fp-mini[aria-current="true"]{border-color:var(--red)}

/* ═══ Columna de compra ════════════════════════════════════ */
.fp-buy__estado{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);font-weight:700;color:var(--red);
}
/* Late igual que el punto del reloj: misma animación (`pulse`, en
   components.css), mismo ritmo, así los dos van acompasados. Solo el
   punto, no el texto, que tiene que poder leerse sin esperar.
   Quien tenga activado «reducir movimiento» lo ve quieto: lo para la
   regla global de tokens.css. */
.fp-buy__estado::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:currentColor;
  flex:none;
  animation:pulse 1.9s var(--ease) infinite;
}
/* Cerrada no late: un punto que parpadea dice «en directo», y ya no lo está. */
.fp-buy__estado--cerrado{color:var(--ink-40)}
.fp-buy__estado--cerrado::before{animation:none}

.fp-buy__cat{
  display:block;
  margin-top:var(--s4);
  font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-40);
}
.fp-buy__h1{
  font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:800;
  letter-spacing:var(--track-heading);line-height:1.1;
  margin:var(--s2) 0 var(--s3);
}
.fp-buy__desc{color:var(--ink-60);line-height:1.6}

.fp-buy__nota{
  display:flex;align-items:center;gap:6px;
  margin-top:var(--s4);
  font-size:var(--fs-sm);color:var(--ink-60);
}
.fp-buy__nota b{color:var(--red)}
.fp-buy__nota svg{width:13px;height:13px;color:var(--red)}

.fp-buy .tiers{
  background:var(--surface);
  border-radius:var(--r-lg);
  padding:var(--s5);
  margin-top:var(--s5);
}

/* — Caja de precio — */
.fp-precio{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--s4);
  margin-top:var(--s5);
  padding:var(--s5);
  border-radius:var(--r-lg);
  background:var(--ink);color:var(--white);
}
.fp-precio__ahora{
  font-size:clamp(1.9rem,4vw,2.4rem);font-weight:800;
  letter-spacing:-.035em;line-height:1;
}
.fp-precio__antes{
  margin-left:var(--s2);
  font-size:var(--fs-body);font-weight:500;
  color:var(--red);text-decoration:line-through;
}
/* Sobre fondo oscuro la píldora tinta no se ve: aquí es de cristal. */
.fp-precio__ahorro{
  display:block;width:max-content;
  margin-top:10px;
  padding:5px 11px;
  border-radius:var(--r-xs);
  background:var(--glass-strong);color:var(--white);
  font-size:11px;font-weight:800;
  white-space:nowrap;
}
.fp-precio .btn{flex:0 0 auto}
.fp-precio__cerrado{
  width:100%;
  font-size:var(--fs-sm);color:rgba(255,255,255,.72);
}

.fp-buy__fino{
  margin-top:var(--s3);
  font-size:var(--fs-xs);color:var(--ink-40);
  line-height:1.5;
}

/* — Protección de pedidos — */
.fp-prot{
  margin-top:var(--s6);
  padding-top:var(--s6);
  border-top:1px solid var(--ink-15);
}
.fp-prot__h{
  font-size:var(--fs-body);font-weight:800;
  margin-bottom:var(--s4);
}
.fp-prot__item{
  display:grid;grid-template-columns:34px 1fr;gap:var(--s3);
  padding-block:var(--s3);
}
.fp-prot__icono{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1.5px solid var(--ink-15);border-radius:50%;
  color:var(--ink-60);
}
.fp-prot__icono svg{width:16px;height:16px}
.fp-prot__item b{display:block;font-size:var(--fs-sm);margin-bottom:3px}
.fp-prot__item p{font-size:var(--fs-xs);color:var(--ink-60);line-height:1.55}
.fp-prot__item a{color:var(--ink-60);text-decoration:underline;text-underline-offset:2px}
.fp-prot__item a:hover{color:var(--red)}

/* ═══ Descripción ══════════════════════════════════════════ */
.fp-desc{display:grid;gap:var(--s6)}
@media (min-width:980px){
  .fp-desc{grid-template-columns:minmax(0,1fr) 330px;gap:clamp(28px,3.4vw,56px)}
}
.fp-desc__nombre{
  color:var(--red);font-weight:800;font-size:1.05rem;
  margin:var(--s4) 0 var(--s3);
}
.fp-desc__corta{color:var(--ink-60);line-height:1.6}
.fp-desc__largo > p{
  margin-top:var(--s4);
  line-height:1.7;color:var(--ink-80);
}

/* — Lo mejor de… — */
.fp-mejor{
  align-self:start;
  border-radius:var(--r-lg);
  padding:var(--s5);
  background:var(--ink);color:var(--white);
}
.fp-mejor__h{
  font-size:1.3rem;font-weight:400;line-height:1.15;
  letter-spacing:var(--track-heading);
  text-transform:uppercase;
  margin-bottom:var(--s4);
}
.fp-mejor__h b{font-weight:800}
.fp-mejor ul{
  list-style:none;
  border-radius:var(--r-md);
  padding:var(--s4);
  background:var(--glass);
}
.fp-mejor li{
  display:grid;grid-template-columns:18px 1fr;gap:10px;
  font-size:var(--fs-sm);line-height:1.45;
}
.fp-mejor li + li{margin-top:var(--s3)}
.fp-mejor li i{
  width:18px;height:18px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--red);color:var(--white);
}
.fp-mejor li svg{width:10px;height:10px}

/* ═══ Ficha técnica ════════════════════════════════════════ */
.fp-tabs{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin:var(--s5) 0;
}
.fp-tab{
  padding:6px 15px;
  border:1.5px solid var(--ink-15);border-radius:var(--r-pill);
  background:transparent;color:var(--ink);
  font-family:inherit;font-size:var(--fs-sm);font-weight:500;
  cursor:pointer;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.fp-tab:hover{border-color:var(--ink-40)}
.fp-tab[aria-selected="true"]{
  background:var(--red);border-color:var(--red);color:var(--white);
  font-weight:600;
}
.fp-tec{
  border-radius:var(--r-lg);
  padding:var(--s5);
  background:var(--ink);color:var(--white);
}
.fp-tec__cols{display:grid;gap:var(--s4)}
@media (min-width:760px){
  .fp-tec__cols{grid-template-columns:1fr 1fr;gap:var(--s5)}
}
.fp-tec__tabla{
  display:grid;grid-template-columns:auto 1fr;
  border-radius:var(--r-md);
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
/* La etiqueta lleva su propio fondo, más claro, como en el diseño:
   dos bloques en vez de una rejilla de líneas. */
.fp-tec__et{
  padding:var(--s3) var(--s4);
  background:var(--glass);
  font-size:var(--fs-sm);font-weight:700;
}
.fp-tec__val{
  padding:var(--s3) var(--s4);
  text-align:right;
  font-size:var(--fs-sm);color:rgba(255,255,255,.88);
}

/* ═══ Valoraciones ═════════════════════════════════════════ */
/* Cabecera: el título y, a su lado, «Añadir valoración». En móvil el
   botón baja debajo del título y ocupa el ancho, que es donde se pulsa. */
.fp-val-cab{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--s3) var(--s4);
}
@media (max-width:559px){
  .fp-val-cab .btn{width:100%}
}
/* Lo que la Directiva Ómnibus pide decir junto a las opiniones. */
.fp-val-nota{
  margin-top:var(--s2);
  font-size:var(--fs-sm);color:var(--ink-60);line-height:1.5;
}
.fp-val-muestra{
  margin-top:var(--s4);
  padding:var(--s3) var(--s4);
  border:1.5px dashed var(--red);border-radius:var(--r-md);
  background:var(--red-soft);color:var(--ink);
  font-size:var(--fs-sm);
}
.fp-val-ok{
  margin-top:var(--s5);
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
  background:var(--red-soft);color:var(--ink);
  font-size:var(--fs-sm);font-weight:600;
}

/* — Resumen: la tarjeta oscura del diseño — */
.fp-val{
  display:grid;gap:var(--s5);
  border-radius:var(--r-lg);
  padding:var(--s5);
  margin-top:var(--s5);
  background:var(--ink);color:var(--white);
}
@media (min-width:700px){
  .fp-val{grid-template-columns:180px 1fr;gap:var(--s7);align-items:center}
}
.fp-val__nota{
  display:grid;place-items:center;
  border:1px solid var(--glass-border);border-radius:var(--r-md);
  padding:var(--s5);
  background:var(--glass);
  text-align:center;
}
.fp-val__cifra{font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.fp-val__estrellas{display:flex;gap:3px;margin:var(--s3) 0 var(--s2);color:var(--white)}
.fp-val__estrellas svg{width:19px;height:19px}
.fp-val__total{font-size:var(--fs-xs);font-weight:600;color:var(--white)}

.fp-val__barras{display:grid;gap:12px}
.fp-barra{
  display:grid;grid-template-columns:34px 1fr 28px;
  align-items:center;gap:var(--s3);
  font-size:var(--fs-xs);font-weight:700;
}
.fp-barra__pista{
  height:6px;border-radius:var(--r-pill);
  background:var(--white);
  overflow:hidden;
}
.fp-barra__fill{display:block;height:100%;background:var(--red);border-radius:var(--r-pill)}
.fp-barra span:last-child{text-align:right}

/* Estrella apagada: la misma, a baja opacidad, para que las cinco
   ocupen siempre lo mismo y no bailen de ancho según la nota. */
.fp-estrella{display:inline-flex;opacity:.28}
.fp-estrella.is-on{opacity:1}

/* — Opiniones —
   Sin líneas entre ellas, como en el diseño: las separa el aire. */
.fp-resena{margin-top:var(--s7)}
.fp-resena:focus{outline:none}
.fp-resena:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:var(--r-xs)}
.fp-resena__quien{display:grid;grid-template-columns:40px 1fr;gap:var(--s3);align-items:center}
.fp-resena__avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--red);
  display:grid;place-items:center;
  color:var(--white);font-weight:800;font-size:var(--fs-sm);
}
/* Alternan rojo y tinta, como los dos círculos del diseño. */
.fp-resena__avatar--ink{background:var(--ink)}
.fp-resena__nombre{font-size:1.05rem;font-weight:700;line-height:1.2}
.fp-resena__meta{font-size:var(--fs-xs);color:var(--ink-60)}
.fp-resena__estrellas{display:flex;gap:2px;margin-top:4px;color:var(--red)}
.fp-resena__estrellas svg{width:18px;height:18px}
.fp-resena__texto{margin-top:var(--s4);line-height:1.65;color:var(--ink)}
.fp-resena__sello{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:var(--s4);
  font-size:var(--fs-xs);font-weight:600;color:var(--ink);
}
.fp-resena__sello i{
  width:15px;height:15px;border-radius:50%;
  background:var(--red);color:var(--white);
  display:grid;place-items:center;
}
.fp-resena__sello svg{width:9px;height:9px}
.fp-resena__sello--ejemplo{
  padding:3px 10px;
  border:1.5px dashed var(--red);border-radius:var(--r-pill);
  color:var(--red);
  text-transform:uppercase;letter-spacing:var(--track-label);
}

.fp-val-mas{display:flex;justify-content:center;margin-top:var(--s7)}

.fp-vacio{
  border-radius:var(--r-md);
  padding:var(--s5);
  margin-top:var(--s5);
  background:var(--surface);
  color:var(--ink-60);line-height:1.6;
  font-size:var(--fs-body);
}

/* — Formulario para valorar — */
.fp-val-form{
  display:grid;gap:var(--s4);
  margin-top:var(--s5);
  padding:var(--s5);
  border:1.5px solid var(--ink-15);border-radius:var(--r-lg);
  background:var(--white);
}
.fp-val-form fieldset{border:0;padding:0;margin:0;min-width:0}
.fp-val-form legend,
.fp-val-form__campo > span{
  display:block;margin-bottom:var(--s2);
  font-size:var(--fs-sm);font-weight:700;color:var(--ink);
}
.fp-estrellas{display:flex;gap:4px}
.fp-estrellas__op{
  display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:var(--r-sm);
  color:var(--ink-15);
  cursor:pointer;
  transition:color var(--t-fast), transform var(--t-fast);
}
.fp-estrellas__op svg{width:30px;height:30px}
.fp-estrellas__op.is-on{color:var(--red)}
.fp-estrellas__op:hover{transform:scale(1.08)}
/* El radio está oculto: el foco se enseña en su estrella, y solo al
   navegar con teclado. Con :focus-within salía también al abrir el
   formulario con el ratón, y parecía una estrella marcada de más. */
.fp-estrellas__op input:focus-visible + svg{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}

.fp-val-form__campo{display:block}
.fp-val-form__campo textarea,
.fp-val-form__campo input{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--ink-15);border-radius:var(--r-md);
  background:var(--white);color:var(--ink);
  font:inherit;font-size:var(--fs-body);line-height:1.5;
  transition:border-color var(--t-fast);
}
.fp-val-form__campo textarea{resize:vertical;min-height:110px}
.fp-val-form__campo textarea:focus,
.fp-val-form__campo input:focus{outline:none;border-color:var(--ink)}
.fp-val-form__cuenta{
  display:block;margin-top:4px;text-align:right;
  font-size:var(--fs-xs);color:var(--ink-40);
}
.fp-val-form__legal{font-size:var(--fs-xs);color:var(--ink-60);line-height:1.5}
.fp-val-form__legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.fp-val-form__legal a:hover{color:var(--red)}
.fp-val-form__msg{
  padding:var(--s3) var(--s4);
  border-radius:var(--r-md);
  background:var(--red-soft);color:var(--ink);
  font-size:var(--fs-sm);
}
.fp-val-form__botones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s3)}

/* ═══ Preguntas ════════════════════════════════════════════ */
.fp-faq__h{
  text-align:center;
  font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;
  letter-spacing:var(--track-display);
  margin-bottom:var(--s6);
}
.fp-faq__h i{color:var(--red);font-style:normal}
.fp-faq__lista{display:grid;gap:var(--s3)}
.fp-faq__lista details{
  border-radius:var(--r-lg);
  background:var(--glass);
  overflow:hidden;
}
.fp-faq__lista summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);
  font-size:var(--fs-lead);font-weight:500;
  cursor:pointer;
  list-style:none;
}
.fp-faq__lista summary::-webkit-details-marker{display:none}
/* El aspa y el más son el mismo glifo girado: así no hay dos iconos
   que puedan quedar descuadrados entre sí. */
.fp-faq__lista summary::after{
  content:'+';
  flex:0 0 auto;
  font-size:1.5rem;font-weight:400;line-height:1;
  color:var(--red);
  transition:transform var(--t-fast);
}
.fp-faq__lista details[open] summary::after{transform:rotate(45deg)}
.fp-faq__lista p{
  padding:0 var(--s5) var(--s5);
  margin-top:calc(-1 * var(--s2));
  font-size:var(--fs-body);line-height:1.7;
  color:rgba(255,255,255,.76);
}

/* ═══ Relacionados ═════════════════════════════════════════ */
.fp-rel__grid{
  display:grid;gap:var(--s5);
  margin-top:var(--s5);
}
@media (min-width:700px){ .fp-rel__grid{grid-template-columns:1fr 1fr} }
@media (min-width:1040px){ .fp-rel__grid{grid-template-columns:repeat(3,1fr)} }

/* ═══ No encontrado ════════════════════════════════════════ */
.fp-404{
  text-align:center;
  padding-block:var(--s10);
}
.fp-404 h1{
  font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:800;
  letter-spacing:var(--track-heading);
  margin-bottom:var(--s3);
}
.fp-404 p{color:var(--ink-60);margin-bottom:var(--s6)}