/* ==========================================================================
   The Lab Room · ficha de producto
   Encima de piezas.css. Los estilos de WooCommerce se dejan cargados a
   propósito, porque son los que hacen funcionar variaciones y cantidades:
   aquí solo se les cambia el aspecto.

   REHECHA el 23 de septiembre de 2026 al estilo oakessentials.com (plan en
   .planning/PLAN-ficha-2026-09-23.md). De Oak y de monchomoreno.com se copian
   estructura, orden, proporciones, tamaños y comportamiento; la piel es la de
   The Lab Room (Zodiak, Archivo, hueso, tinta, salvia). Móvil primero: todo lo
   de escritorio va en `@media(min-width:1025px)`. La versión anterior está en
   producto.css.bak-oak-20260923.

   Trampas conocidas que esta hoja evita a propósito:
   - rejilla sin `min-width:0` desborda: todas las columnas van en minmax(0,…);
   - acordeón que no colapsa su relleno: el relleno va en el hijo;
   - `aspect-ratio` con `min-height` ensancha: la tira móvil usa alto fijo;
   - un comentario mal cerrado se come la regla siguiente: todos cerrados.
   ========================================================================== */

/* ---------- migas (solo escritorio) y avisos ---------- */
.ficha-migas{
  display:none;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  gap:.6rem;flex-wrap:wrap;margin:.9rem auto .7rem;
}
.ficha-migas a:hover{color:var(--verde-texto)}
.ficha-migas span{opacity:.45}

.ficha-avisos{padding-block:.6rem}
.ficha-avisos:empty{display:none}
.ficha-avisos .woocommerce-message,
.ficha-avisos .woocommerce-error,
.ficha-avisos .woocommerce-info{
  background:var(--bone-2);border:1px solid var(--line);border-radius:3px;
  padding:1rem 1.3rem;list-style:none;font-size:.95rem;color:var(--ink);
}

body.tlr-ficha{background:var(--bone)}

/* ---------- retícula: una columna en móvil ---------- */
.ficha-cuerpo{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  padding-bottom:clamp(2.5rem,6vw,4.5rem);align-items:start;
}
.ficha-galeria,.ficha-info{min-width:0}

/* ---------- galería, móvil: foto a sangre, flechas, miniaturas debajo ---------- */
.ficha-galeria{display:flex;flex-direction:column}
.ficha-foto{display:none}
.ficha-carrusel-caja{
  order:1;position:relative;margin-inline:calc(-1 * var(--pad));
  background:var(--card);
}
.ficha-carrusel{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ficha-carrusel::-webkit-scrollbar{display:none}
.ficha-carrusel:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
/* Oak: 390 × 468 a 390 (5:6). Alto fijo y no `aspect-ratio`, para que en una
   tableta la foto no pase de la pantalla. */
.ficha-carrusel__slide{
  flex:0 0 100%;scroll-snap-align:start;margin:0;
  height:min(120vw,78vh);display:grid;place-items:center;overflow:hidden;
}
.ficha-carrusel__slide img{width:100%;height:100%;object-fit:contain;display:block;transform:scale(calc(var(--tlr-zoom,1) * 1.12))}
.ficha-carrusel__slide img.es-ambiental,
.ficha-carrusel__slide video{object-fit:cover;transform:none;width:100%;height:100%;display:block}
/* Flechas pegadas al borde y centradas en vertical, como Oak. 44 y no 40: es
   el mínimo táctil. No dan la vuelta: en la primera no hay "anterior" y en la
   última no hay "siguiente". */
.ficha-carrusel__flecha{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border:0;border-radius:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.88);display:grid;place-items:center;
}
.ficha-carrusel__flecha::after{
  content:"";width:9px;height:9px;border-right:1.5px solid var(--ink);border-top:1.5px solid var(--ink);
}
.ficha-carrusel__sig{right:0}
.ficha-carrusel__sig::after{transform:rotate(45deg);margin-left:-4px}
.ficha-carrusel__ant{left:0}
.ficha-carrusel__ant::after{transform:rotate(-135deg);margin-left:4px}
.ficha-carrusel__flecha[hidden]{display:none}
.ficha-carrusel__flecha:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
.ficha-carrusel__num{
  position:absolute;right:var(--pad);bottom:.7rem;z-index:2;
  font-size:.66rem;letter-spacing:.12em;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  /* Fondo como el de las flechas: sobre fotos oscuras el texto no se leía. */
  padding:3px 8px;line-height:18px;background:rgba(255,255,255,.88);
}

/* [MM1] Volver: la caja blanca de Moncho (26 de alto, radio 6, a x16 y12.5)
   dentro de un enlace de 44 de alto, que es lo que se toca con el dedo. */
.ficha-volver{
  position:absolute;top:0;left:16px;z-index:3;
  min-height:44px;display:flex;align-items:center;
  color:var(--ink);text-decoration:none;
}
.ficha-volver__caja{
  display:inline-flex;align-items:center;gap:8px;
  height:26px;padding:0 12px;border-radius:6px;background:#FFFFFF;
  font-family:var(--sans);font-size:.625rem;line-height:1;letter-spacing:.04em;text-transform:uppercase;
}
.ficha-volver:focus-visible .ficha-volver__caja{outline:2px solid var(--ink);outline-offset:2px}

/* Insignia (Oak 02: 48 × 27, relleno 4 12 5, 11/18). Solo con etiqueta manual;
   en el móvil va debajo del Volver para no pisarlo. */
.ficha-sello{
  position:absolute;z-index:3;top:56px;left:16px;
  display:inline-flex;align-items:center;padding:4px 12px 5px;
  background:var(--bone-2);color:var(--ink);
  font-family:var(--sans);font-size:.6875rem;line-height:18px;letter-spacing:.04em;
}

/* Miniaturas debajo, en fila y con scroll lateral (Oak: 48 × 57.6, hueco 8). */
.ficha-miniaturas{
  order:2;display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:8px var(--pad) 0;margin-inline:calc(-1 * var(--pad));
  scrollbar-width:none;
}
.ficha-miniaturas::-webkit-scrollbar{display:none}
.ficha-mini{
  flex:0 0 auto;width:48px;height:57.6px;padding:0;position:relative;
  border:1px solid transparent;border-radius:0;background:var(--card);cursor:pointer;overflow:hidden;
  transition:border-color .3s;
}
.ficha-mini img{width:100%;height:100%;object-fit:cover;display:block}
.ficha-mini:hover{border-color:rgba(27,26,23,.25)}
.ficha-mini.es-actual{border-color:var(--ink)}
.ficha-mini:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ficha-play{position:absolute;inset:0;display:grid;place-items:center}
.ficha-play::before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.88);transform:translate(-50%,-50%)}
.ficha-play::after{content:"";position:relative;width:0;height:0;margin-left:2px;
  border-left:8px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ---------- galería, escritorio: foto grande y tira vertical ---------- */
.ficha-foto img{width:100%;height:100%;object-fit:contain;padding:2%;transform:scale(var(--tlr-zoom,1));transition:opacity 220ms ease,transform 1.2s cubic-bezier(.22,1,.36,1)}
.ficha-foto img.esta-cambiando{opacity:0}
.ficha-foto:hover img:not(.es-ambiental){transform:scale(calc(var(--tlr-zoom,1) * 1.03))}
.ficha-foto img.es-ambiental{object-fit:cover;padding:0;transform:none}
.ficha-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.ficha-video[hidden]{display:none}

/* ---------- columna de compra, en el orden en que se lee ---------- */
.ficha-info{padding-top:1rem}
.ficha-antetitulo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1rem}
.ficha-antetitulo .eyebrow{margin:0;font-size:.66rem;letter-spacing:.16em;color:var(--ink-soft)}
/* 16 oct: fuera el antetítulo y su enlace a la categoría (reunión); en la fila
   solo queda la etiqueta "Bestseller". */
.eyebrow--reclamo{color:var(--verde-texto)!important;font-weight:600}
/* 14 oct, Melissa: "Bestseller" se perdía entre tanto texto; "tal vez con el
   tono verde". Etiqueta con el verde clarito de la marquesina y texto en tinta
   (el verde oscuro sobre el clarito no llega a contraste legible). */
.ficha-antetitulo .eyebrow--reclamo{background:var(--eucalyptus);color:var(--ink)!important;padding:.4rem .65rem .35rem;border-radius:2px}
/* 17 oct, Dani (img 30): "Bestseller" a la derecha, en la fila de arriba como
   estaba. Sin el antetítulo a su izquierda, el space-between lo dejaba solo a
   la izquierda, encima del nombre. */
.ficha-antetitulo{justify-content:flex-end}

/* Oak 03: título 32/40 en una línea, línea en versales 11/20 con 1.32 de
   tracking, precio 14/20 en versales y estrellas de 14. */
/* 5 oct 2026 (Mónica, captura 3283 y "prefiero mayúsculas en el nombre del
   producto en toda la tienda"): el nombre va en MAYÚSCULAS por CSS, sin tocar
   el dato. Antes `none` y 32 px con tracking negativo; en versales ese tamaño
   gritaba, así que baja a 26 y el tracking pasa a positivo. */
.ficha h1.ficha-titulo{
  font-family:var(--serif);font-weight:400;text-transform:uppercase;
  font-size:1.625rem;line-height:1.25;letter-spacing:.04em;color:var(--ink);
  margin:.5rem 0 0;text-wrap:balance;
}
.ficha-titulo em{font-style:italic;font-weight:401}
.ficha-lema{
  margin:.5rem 0 .75rem;font-family:var(--sans);font-size:.6875rem;line-height:20px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  text-wrap:balance; /* sin una palabra suelta en la segunda línea ("LABIOS", 24 sep) */
}
.ficha-precio{
  display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.3rem 1rem;
  margin:0 0 .25rem;font-family:var(--sans);font-size:.875rem;line-height:20px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.ficha-precio .woocommerce-Price-amount{font-weight:400}
.ficha-precio del{opacity:.45}
.ficha-precio ins{text-decoration:none;color:var(--clay)}
.ficha-tam{color:var(--ink-soft)}
.ficha-precio__stock{font-size:.66rem;letter-spacing:.12em;color:var(--verde-texto);font-weight:500}
/* 14 oct, Melissa: "Hay existencias" pesaba demasiado; la web actual no lo
   enseña. Se queda, pero en gris, más pequeño y sin negrita. */
.ficha-precio .ficha-precio__stock{font-size:.6rem;letter-spacing:.1em;color:var(--ink-soft);opacity:.6;font-weight:400}

/* Estrellas + "N reseñas", que baja a las reseñas. 44 de alto para el dedo,
   con margen negativo para que el ritmo visual siga siendo el de Oak (28). */
.ficha-valoracion{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:-8px 0 -4px;
  color:var(--ink-soft);text-decoration:none;align-self:flex-start;
}
.ficha-valoracion__n{font-size:.8125rem;text-decoration:underline;text-underline-offset:3px}
.ficha-valoracion:hover .ficha-valoracion__n{color:var(--ink)}
.ficha-estrellas{
  font-size:14px;line-height:1;letter-spacing:3px;white-space:nowrap;
  background:linear-gradient(90deg,var(--amber) var(--nota,100%),rgba(27,26,23,.16) var(--nota,100%));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ficha-estrellas--grande{font-size:24px;letter-spacing:4px}

/* [MM2] "Lo que más valoran" (Moncho 03: caja 358 × 116, relleno 8, radio 2). */
.ficha-valoran{
  display:flex;align-items:flex-start;gap:10px;margin:.75rem 0 .25rem;padding:8px 10px;
  background:var(--card);border-radius:2px;
}
.ficha-valoran__icono{flex:0 0 16px;margin-top:3px;color:var(--amber)}
.ficha-valoran__texto{margin:0;font-size:.875rem;line-height:1.55;color:var(--ink)}
.ficha-valoran__tit{color:var(--ink-soft);margin-right:.2rem}
.ficha-valoran__tema{display:inline-block}

/* Oak 04: párrafo de venta 14/22, 16 por debajo de las estrellas. */
.ficha-resumen{margin:1rem 0 0;font-size:.875rem;line-height:22px;color:var(--ink);max-width:60ch}
.ficha-resumen p{margin:0 0 .6rem}
.ficha-resumen p:last-child{margin-bottom:0}
.ficha-resumen strong,.ficha-resumen b{font-weight:400}

/* [MM3] Lista con ✓ (Moncho 04: check 16 × 12, 10 hasta el texto, paso 27). */
.ficha-checks{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:8px}
.ficha-checks li{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:.8125rem;line-height:19.2px;color:var(--ink)}
.ficha-checks svg{flex:0 0 16px;margin-top:3.6px;color:var(--ink)}
/* Ingredientes clave (5 oct): una línea corta bajo los beneficios, sin recuadros. */
.ficha-clave{margin:1.1rem 0 0;font-size:.8125rem;line-height:19.2px;color:var(--ink)}
.ficha-clave__tit{display:block;margin-bottom:2px;font-size:.6875rem;line-height:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.ficha-clave__lista{display:block}

.ficha-datos{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin:1.4rem 0 0;padding:1rem 0;border-block:1px solid var(--line)}
.ficha-datos li{display:flex;flex-direction:column;gap:.1rem}
.ficha-dato__cifra{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--ink)}
.ficha-dato__que{font-size:.8rem;color:var(--ink-soft)}
.ficha-dato__nota{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- bloque de compra ---------- */
.ficha-compra{margin:1.75rem 0 0}

/* [MM4] Recuadros de fragancia (Moncho 05: etiqueta 12 con tracking 2 y el
   valor elegido en 600; recuadros con borde 1 que se oscurece al elegir). A
   44 de alto por el mínimo táctil. */
.ficha-opciones{margin:0 0 1.75rem;border:0;padding:0}
.ficha-opciones[hidden]{display:none}
.ficha-opciones__etq{margin:0 0 8px;font-size:.75rem;line-height:19.2px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ficha-opciones__valor{font-weight:600;margin-left:4px}
.ficha-opciones__fila{display:flex;flex-wrap:wrap;gap:8px}
.ficha-opcion{
  min-height:44px;padding:0 16px;border:1px solid rgba(27,26,23,.15);border-radius:2px;
  background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .3s,background-color .3s;
}
.ficha-opcion:hover{border-color:rgba(27,26,23,.3)}
.ficha-opcion[aria-pressed="true"]{border-color:var(--ink)}
.ficha-opcion:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* El selector de WooCommerce sigue ahí (lo manejan los recuadros), fuera de la
   vista pero no fuera del formulario. */
.ficha-compra:has(.ficha-opciones:not([hidden])) table.variations,
.ficha-compra:has(.ficha-opciones:not([hidden])) .reset_variations{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.ficha-compra table.variations{width:100%;border:0;margin:0 0 .6rem}
.ficha-compra table.variations th,.ficha-compra table.variations td{border:0;padding:.3rem 0;vertical-align:middle;text-align:left}
.ficha-compra table.variations select{width:100%;min-height:48px;padding:0 1rem;border:1px solid var(--line);border-radius:2px;background:transparent;font-family:var(--sans)}
.ficha-compra .woocommerce-variation-price{margin:0 0 .8rem;font-size:.875rem;letter-spacing:.08em}
.ficha-compra .woocommerce-variation-availability{font-size:.8rem;color:var(--ink-soft)}
.ficha-compra .woocommerce-variation-description:empty{display:none}

/* El aviso de existencias va en la fila del precio; el de WooCommerce se deja
   para el lector de pantalla. Agotado sí se ve. */
.ficha-compra .stock{margin:0 0 .6rem;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--verde-texto)}
.ficha-compra .stock.in-stock{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ficha-compra .stock.out-of-stock{color:var(--clay)}

/* [MM5] Sin cantidad (Dani, 24 sep, como Oak): el botón a todo el ancho de la
   columna al alto de Oak (56; 59 en escritorio). La cantidad es un campo oculto
   con valor 1; su envoltorio no se ve nunca, ni cuando el guion de variaciones
   de WooCommerce le pone display en línea con .show(). Los campos de la
   tarjeta regalo suben encima del botón. */
.ficha-compra form.cart:not(.variations_form),
.ficha-compra .woocommerce-variation-add-to-cart{
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px;align-items:stretch;margin:0;
}
.ficha-compra form.cart:not(.variations_form) > *,
.ficha-compra .woocommerce-variation-add-to-cart > *{grid-column:1 / -1;min-width:0}
.ficha-compra form.cart .pdf-coupon-fields{order:-1}
.ficha-compra form.cart .pdf-coupon-fields:empty{display:none}
.ficha-compra form.cart .quantity{display:none!important}
.ficha-compra .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Con `form.cart` delante: la regla de "todo a la fila entera" de arriba pesa
   más que una clase suelta y mandaba el botón a la línea de abajo. */
.ficha-compra form.cart .single_add_to_cart_button{
  grid-column:1 / -1;min-height:56px;padding:0 1rem;margin:0;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--sans);font-size:.72rem;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  border-radius:999px;border:1px solid var(--eucalyptus,#CCD5C6);background:var(--eucalyptus,#CCD5C6);color:var(--ink);cursor:pointer;
  transition:background .35s,border-color .35s,color .35s;
}
/* 5 de octubre de 2026. Mónica: "¿podemos poner el botón de añadir al carrito en
   nuestro verde?". La salvia del pie con letra en tinta, como el botón de pagar
   (design-system.css): tinta sobre salvia mide 11,52:1. Al pasar el ratón va a
   tinta con la letra en hueso, igual que allí. Antes: tinta en reposo. */
/* Con `form.cart`, como la regla base: sin él, el ratón no ganaba y el botón no cambiaba (ya pasaba antes). */
.ficha-compra form.cart .single_add_to_cart_button:hover{background:var(--ink);border-color:var(--ink);color:#F3EDE3}
.ficha-compra .single_add_to_cart_button.disabled,
.ficha-compra .single_add_to_cart_button:disabled{opacity:.4;cursor:not-allowed}
.ficha-compra .pdf-coupon-fields .form-row{margin:0 0 .8rem}
.ficha-compra .pdf-coupon-fields label{display:block;margin-bottom:.35rem;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ficha-compra .pdf-coupon-fields input,
.ficha-compra .pdf-coupon-fields textarea{width:100%;min-height:44px;padding:.6rem .9rem;border:1px solid var(--line);border-radius:2px;background:var(--bone);font-family:var(--sans);font-size:.95rem}

/* Oak 05: la línea de envío, 12/20 centrada y a 10 del botón. */
.ficha-envio{margin:10px 0 0;text-align:center;font-size:.75rem;line-height:20px;letter-spacing:.03em;color:var(--ink)}

/* "Completa tu rutina" de arriba (`.ficha-par`) quitado el 5 oct 2026 a
   petición de Mónica: queda "Completa el ritual" de abajo. */

/* ---------- acordeones (Oak 07 + Moncho 08) ----------
   Cabecera de 59 (18 + 22 + 18 + 1), todos cerrados, uno a la vez, + → −.
   El relleno va en `.ficha-plegable__cuerpo`, DENTRO de lo que se pliega: así
   un acordeón cerrado mide exactamente su cabecera. */
.ficha-plegables{margin-top:2rem;border-bottom:1px solid var(--line)}
.ficha-plegable{border-top:1px solid var(--line)}
.ficha-plegable > summary{
  list-style:none;cursor:pointer;min-height:44px;padding:18px 0;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-family:var(--sans);font-size:.875rem;line-height:22px;letter-spacing:.02em;color:var(--ink);
}
.ficha-plegable > summary::-webkit-details-marker{display:none}
.ficha-plegable > summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ficha-mas{position:relative;width:12px;height:12px;flex:0 0 12px}
.ficha-mas::before,.ficha-mas::after{content:"";position:absolute;background:var(--ink);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.ficha-mas::before{left:0;top:5.5px;width:12px;height:1px}
.ficha-mas::after{left:5.5px;top:0;width:1px;height:12px}
.ficha-plegable[open] .ficha-mas::after,
.pdp-faq__item[open] .ficha-mas::after{transform:scaleY(0)}
.ficha-plegable__cuerpo{padding:6px 0 28px;font-size:.875rem;line-height:22px;color:var(--ink-soft)}
.ficha-plegable__cuerpo p{margin:0 0 .8rem}
.ficha-plegable__cuerpo p:last-child{margin-bottom:0}
.ficha-plegable__cuerpo a:not(.ficha-ideal a){color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.ficha-plegable__cuerpo a.link-underline{padding-top:17px;margin-top:-17px}
.ficha-plegable__sub{margin:1.2rem 0 .5rem!important;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.ficha-plegable__lead{font-family:var(--serif);font-size:1.15rem;line-height:1.3;color:var(--ink)}
.ficha-plegable__lead em{font-style:italic;font-weight:401}
.ficha-plegable__lista{margin:.8rem 0 0;padding-left:1.1rem}

/* "Leer más" de la descripción, dentro de Beneficios. 44 de alto. */
.ficha-leermas > summary{
  display:inline-flex;align-items:center;min-height:44px;cursor:pointer;list-style:none;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;
}
.ficha-leermas > summary::-webkit-details-marker{display:none}
.ficha-leermas > summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Dentro de Ingredientes: el INCI completo en letra pequeña. Los activos ya no
   van en recuadros eucalipto (5 oct, Mónica): suben a la ficha, `.ficha-clave`. */
.ficha-inci{font-size:.8rem;line-height:1.6}

/* Dentro de Cómo usarlo: los usos, numerados. */
.ficha-usos{list-style:none;margin:.8rem 0 0;padding:0;counter-reset:uso;display:grid;gap:.9rem}
.ficha-usos li{counter-increment:uso;display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 .4rem}
.ficha-usos li::before{content:counter(uso,decimal-leading-zero);grid-row:1 / span 2;font-family:var(--serif);color:var(--clay);font-size:1rem;line-height:22px}
.ficha-uso__nombre{color:var(--ink);font-weight:500}

/* Dentro de Ideal para: enlaces a cada rutina, 44 de alto. */
.ficha-ideal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.ficha-ideal a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 1rem;border:1px solid var(--line);border-radius:999px;
  font-size:.75rem;letter-spacing:.06em;color:var(--ink);text-decoration:none;
}
.ficha-ideal a:hover{border-color:var(--ink)}

/* Dentro de Beneficios: los premios. */
.ficha-premios{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ficha-premios li{display:flex;flex-wrap:wrap;gap:.1rem .6rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.ficha-premios li:last-child{border-bottom:0;padding-bottom:0}
.ficha-premio__nombre{font-family:var(--serif);color:var(--ink);font-size:1rem}
.ficha-premio__anyo{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);align-self:center}
.ficha-premio__que{flex:1 1 100%}

/* La apertura anima la altura, no salta. Sin `::details-content` (navegadores
   viejos) se abre de golpe, como antes. */
:root{interpolate-size:allow-keywords}
.ficha-plegable::details-content,
.pdp-faq__item::details-content,
.ficha-leermas::details-content,
.ficha-opinar-plegable::details-content{
  block-size:0;overflow:hidden;opacity:0;
  transition:block-size .4s cubic-bezier(.22,1,.36,1),opacity .28s ease,content-visibility .4s allow-discrete;
}
.ficha-plegable[open]::details-content,
.pdp-faq__item[open]::details-content,
.ficha-leermas[open]::details-content,
.ficha-opinar-plegable[open]::details-content{block-size:auto;opacity:1}

/* ==========================================================================
   SECCIONES AMPLIADAS (solo con datos-ficha.php; hoy el Wonder Balm)
   Resultados (Oak 08), Ingredientes clave (Oak 10, foto a la derecha) y
   Preguntas (Oak 11, foto a la izquierda).
   ========================================================================== */
.pdp-eyebrow{font-family:var(--sans);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .6rem}
.pdp-titulo{
  font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.1;letter-spacing:-.015em;
  margin:0;color:var(--ink);text-wrap:balance;
}
.pdp-titulo em{font-style:italic;font-weight:401}
.pdp-parrafo{margin:1.25rem 0 0;font-size:.875rem;line-height:22px;color:var(--ink-soft);max-width:52ch}

/* Resultados: rectángulo limpio con el título dentro. Hasta el 5 oct 2026 el
   título era una pestaña a sangre sobre el panel; Mónica (captura 3262): "no me
   gustan estas pestañas, me gusta el rectángulo limpio". */
.pdp-res{padding-top:3.75rem;background:var(--bone)}
.pdp-pestana{
  margin:0 0 1.25rem;padding:0;
  font-size:.8125rem;line-height:26px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
}
.pdp-res__panel{background:var(--card);padding:2rem 0}
.pdp-cifras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pdp-cifra{display:flex;flex-direction:column;gap:4px;min-width:0}
.pdp-cifra__n{
  position:relative;display:inline-block;white-space:nowrap;align-self:flex-start;
  font-family:var(--serif);font-weight:400;font-size:2.125rem;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums;
}
.pdp-cifra__cuenta{position:absolute;left:0;top:0}
.pdp-cifras.cuenta .pdp-cifra__fin{color:transparent}
.pdp-cifra__pc{font-size:.6em;margin-left:.08em;color:var(--ink-soft)}
.pdp-cifra__que{font-size:.75rem;line-height:20px;letter-spacing:.02em;color:var(--ink-soft)}
.pdp-nota{margin:.75rem 0 0;font-size:.75rem;line-height:20px;color:var(--ink-soft)}

/* Ingredientes clave. En el móvil la foto va pequeña junto al título (Oak:
   126 × 126). */
.pdp-clave{background:var(--bone)}
.pdp-clave__texto{padding:2.5rem var(--pad);min-width:0}
.pdp-clave__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.pdp-clave__mini{flex:0 0 126px;width:126px;height:126px;object-fit:cover;display:block}
.pdp-clave__foto{display:none}
.pdp-activos{list-style:none;margin:2rem 0 0;padding:0}
.pdp-activos li{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.2rem 1rem;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.pdp-activos li:first-child{border-top:1px solid var(--line)}
.pdp-activo__nombre{font-size:.875rem;line-height:22px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.pdp-activo__que{font-size:.875rem;line-height:22px;color:var(--ink-soft);text-align:right}

/* Preguntas: todas cerradas, una a la vez. La foto no sale por debajo de 768. */
.pdp-faq{background:var(--bone)}
.pdp-faq__foto{display:none}
.pdp-faq__texto{padding:2.5rem var(--pad);min-width:0;display:flex;flex-direction:column;gap:2rem}
.pdp-faq__lista{border-bottom:1px solid var(--line)}
.pdp-faq__item{border-top:1px solid var(--line)}
.pdp-faq__item > summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:44px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:.875rem;line-height:22px;font-weight:500;color:var(--ink);
}
.pdp-faq__item > summary::-webkit-details-marker{display:none}
.pdp-faq__item > summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pdp-faq__cuerpo{padding:0 0 20px}
.pdp-faq__cuerpo p{margin:0;font-size:.875rem;line-height:22px;color:var(--ink-soft);max-width:60ch}

/* ---------- reseñas (Oak 13), sin firma ---------- */
.ficha-resenas{background:var(--card);padding:2.5rem 0 3rem}
.ficha-resenas__titulo{font-family:var(--serif);font-weight:400;font-size:1.75rem;line-height:1.15;text-align:center;margin:0 0 1rem;color:var(--ink)}
.ficha-resenas__resumen{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-bottom:.4rem}
.ficha-media{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ficha-resenas__nota{text-align:center;margin:0 0 .5rem;font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft)}
/* Carrusel lateral (Dani, 23 sep): el desplazamiento va solo dentro de la pista.
   390: tarjeta al 85 % del ancho útil y la siguiente asoma; 768: dos; ≥1025: tres.
   Misma altura por la fila flex; min-width:0 para que una palabra larga no
   ensanche la tarjeta. */
.ficha-resenas .resenas{
  --res-gap:12px;
  display:flex;gap:var(--res-gap);margin-top:1.5rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.ficha-resenas .resenas::-webkit-scrollbar{display:none}
.ficha-resenas .resenas:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.resena{background:var(--bone);border-radius:3px;padding:22px}
.ficha-resenas .resena{flex:0 0 85%;min-width:0;scroll-snap-align:start;overflow-wrap:break-word}
.resenas-flechas,.resenas-flechas[hidden]{display:none}
.resenas-flecha{
  width:44px;height:44px;padding:0;border:1px solid var(--ink);border-radius:50%;
  background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  transition:background .3s,color .3s,opacity .3s;
}
.resenas-flecha::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor}
.resenas-flecha--sig::after{transform:rotate(45deg);margin-left:-4px}
.resenas-flecha--ant::after{transform:rotate(-135deg);margin-left:4px}
.resenas-flecha:not(:disabled):hover{background:var(--ink);color:var(--bone)}
.resenas-flecha:disabled{opacity:.3;cursor:default}
.resenas-flecha:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* Sin reseñas: sin título ni caja, solo el enlace para escribir la primera. */
.ficha-resenas--vacia{background:transparent;padding:1rem 0 2rem}
.ficha-resenas--vacia .ficha-opinar-plegable{margin-top:0}
.resena-cab{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.7rem}
.resena-nota{color:var(--amber);letter-spacing:.1em;font-size:.875rem}
.resena-fecha{font-size:.75rem;color:var(--ink-soft)}
.resena-texto{color:var(--ink);font-size:.875rem;line-height:1.6}
.resena-texto p{margin:0 0 .6rem}
.resena-texto p:last-child{margin-bottom:0}
/* 9 oct: la firma ("Vanesa V. · Compra verificada"), en la voz de la fecha. */
.resena-firma{margin:.9rem 0 0;font-size:.75rem;letter-spacing:.02em;color:var(--ink-soft)}

/* El formulario de reseña, plegado detrás de un enlace de 44 de alto. */
.ficha-opinar-plegable{margin-top:2rem;text-align:center}
.ficha-opinar-plegable > summary{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--ink);
  text-decoration:underline;text-underline-offset:5px;
}
.ficha-opinar-plegable > summary::-webkit-details-marker{display:none}
.ficha-opinar-plegable > summary::after{content:"+";font-size:1rem;line-height:1;font-weight:400}
.ficha-opinar-plegable[open] > summary::after{content:"\2212"}
.ficha-opinar-plegable > summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ficha-opinar{margin:1.5rem auto 0;padding-top:1.5rem;border-top:1px solid var(--line);max-width:640px;text-align:left}
.ficha-opinar__titulo{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.12;color:var(--ink);margin:0 0 .6rem}
.ficha-opinar__nota{font-size:.82rem;color:var(--ink-soft);margin:0 0 1.4rem;max-width:52ch}
.ficha-opinar .comment-form{display:flex;flex-direction:column;gap:1.1rem}
.ficha-opinar p{margin:0}
.ficha-opinar label{display:block;margin-bottom:.45rem;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ficha-opinar .required{color:var(--clay)}
.ficha-opinar input[type="text"],
.ficha-opinar input[type="email"],
.ficha-opinar select,
.ficha-opinar textarea{width:100%;min-height:44px;padding:.8rem 1rem;background:var(--bone);border:1px solid var(--line);border-radius:3px;font-family:var(--sans);font-size:.95rem;color:var(--ink)}
.ficha-opinar textarea{resize:vertical;min-height:130px;line-height:1.6}
.ficha-opinar input:focus,.ficha-opinar select:focus,.ficha-opinar textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(91,107,85,.22)}
.ficha-opinar .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.8rem;color:var(--ink-soft)}
/* La etiqueta crece a 44+ con relleno SIN margen negativo: con -12 tapaba los 13 px
   de abajo del campo de correo (arreglo 2). La casilla baja los mismos 12 px. */
.ficha-opinar .comment-form-cookies-consent input{width:auto;flex:0 0 auto;margin-top:calc(.25rem + 12px);accent-color:var(--ink)}
.ficha-opinar .comment-form-cookies-consent label{margin:0;padding-block:12px;text-transform:none;letter-spacing:0;font-weight:400;font-size:.8rem;color:var(--ink-soft)}
.ficha-opinar .form-submit{margin:0}
.ficha-opinar .form-submit button,
.ficha-opinar input[type="submit"]{
  width:100%;min-height:48px;padding:1rem 2.2rem;cursor:pointer;
  background:var(--eucalyptus);color:var(--ink);border:1px solid var(--eucalyptus);border-radius:999px;
  font-family:var(--sans);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .35s,border-color .35s;
}
.ficha-opinar .form-submit button:hover,
.ficha-opinar input[type="submit"]:hover{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.ficha-opinar .form-submit button .qodef-m-text{color:inherit;font:inherit;letter-spacing:inherit}
/* Dos juegos de estrellas (tema y WooCommerce): se queda el de WooCommerce. */
.ficha-opinar p.stars.qodef-comment-form-ratings{display:none}
.ficha-opinar p.stars{display:flex;gap:.35rem;margin:0;line-height:1}
.ficha-opinar p.stars span{display:flex;gap:.35rem}
.ficha-opinar p.stars a{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;text-indent:0;font-size:0;color:var(--amber);border:0;text-decoration:none}
.ficha-opinar p.stars a::before{content:"\2606";font-size:26px;line-height:1;color:var(--line)}
.ficha-opinar p.stars:hover a::before{content:"\2605";color:var(--amber)}
.ficha-opinar p.stars a:hover ~ a::before{content:"\2606";color:var(--line)}
.ficha-opinar p.stars.selected a.active::before,
.ficha-opinar p.stars.selected a.active ~ a::before{content:"\2606";color:var(--line)}
.ficha-opinar p.stars.selected a.active::before{content:"\2605";color:var(--amber)}
.ficha-opinar p.stars a:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
.no-js .ficha-opinar #rating{display:block !important}

/* ---------- barra de compra fija (aprobada; se queda como estaba) ---------- */
.ficha-barra{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background:var(--bone);border-top:1px solid var(--line);
  box-shadow:0 -10px 30px -18px rgba(27,26,23,.5);
  opacity:0;transform:translateY(100%);
  transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1);
}
.ficha-barra[hidden]{display:none}
.ficha-barra.se-ve{opacity:1;transform:none}
.ficha-barra__texto{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.ficha-barra__nombre{font-family:var(--serif);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);/* mayúsculas 5 oct */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha-barra__precio{font-size:.8rem;color:var(--ink-soft)}
.ficha-barra__precio .woocommerce-Price-amount{font-size:.8rem}
.ficha-barra__boton{
  flex:0 0 auto;min-height:44px;padding:.85rem 1.6rem;border:1px solid var(--eucalyptus,#CCD5C6);border-radius:999px;
  background:var(--eucalyptus,#CCD5C6);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:background .3s,border-color .3s,color .3s;
}
/* 5 oct: en el verde, como el botón de la ficha (ver .single_add_to_cart_button). */
.ficha-barra__boton:hover{background:var(--ink);border-color:var(--ink);color:#F3EDE3}
.ficha-barra__boton:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ficha-barra__boton::after{content:"\2192";margin-left:.5rem;display:inline-block;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.ficha-barra__boton:hover::after{transform:translateX(5px)}
.ficha-barra__foto{flex:0 0 auto;display:block;width:52px;height:52px;border-radius:3px;overflow:hidden;background:var(--card)}
.ficha-barra__foto img{width:100%;height:100%;object-fit:contain;padding:5%;display:block}
.ficha-barra__boton-precio{opacity:.72;font-weight:500}

@media(max-width:700px){
  .ficha-barra{flex-wrap:wrap;gap:.5rem .8rem;padding:.7rem var(--pad) .8rem}
  .ficha-barra__foto{display:none}
  .ficha-barra__texto{flex:1 1 100%;max-width:none}
  .ficha-barra__nombre{font-size:1rem;line-height:1.2}
  .ficha-barra__precio{display:none}
  .ficha-barra__boton{flex:1 1 100%;margin-left:0;justify-content:center}
  body.tlr-ficha{padding-bottom:104px} /* la barra de dos filas mide 100 px */
}

/* ---------- tableta: más aire, misma columna ---------- */
@media(min-width:768px){
  .ficha-resenas .resena{flex-basis:calc((100% - var(--res-gap)) / 2)}
  .resenas-flechas{display:flex;justify-content:center;gap:12px;margin-top:1.5rem}
  .resenas-flechas[hidden]{display:none}
  .pdp-faq.tiene-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .pdp-faq__foto{display:block;min-height:0}
  .pdp-faq__foto img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
  .pdp-faq.tiene-foto .pdp-faq__texto{padding:clamp(2.5rem,4.2vw,3.75rem);justify-content:center}
}

/* ---------- escritorio (≥1025): dos columnas como Oak ---------- */
@media(min-width:1025px){
  .ficha-migas{display:flex}
  .ficha-compra form.cart .single_add_to_cart_button{min-height:59px}
  .ficha-cuerpo{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,4vw,4rem);
    padding-top:.3rem;
  }
  /* Galería pegajosa: la tira de miniaturas en columna a la izquierda (Oak:
     96 × 115, hueco 8) y la foto a su lado en 5:6. La tira no pasa del alto de
     la foto (Mónica, 17 sep) y se desliza por dentro. */
  .ficha-galeria{
    position:sticky;top:90px;align-self:start;container-type:inline-size;
    display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;
  }
  .ficha-carrusel-caja{display:none}
  .ficha-foto{
    display:grid;place-items:center;position:relative;overflow:hidden;
    grid-column:2;grid-row:1;aspect-ratio:5/6;width:100%;background:var(--card);
  }
  .ficha-galeria:not(:has(.ficha-miniaturas)) .ficha-foto{grid-column:1 / -1}
  .ficha-sello{top:20px;left:20px}
  .ficha-miniaturas{
    grid-column:1;grid-row:1;flex-direction:column;gap:8px;margin:0;padding:0 0 2px;
    overflow-x:hidden;overflow-y:auto;max-height:calc((100cqw - 112px) * 1.2);
  }
  .ficha-mini{width:96px;height:115px}

  /* 5 de octubre de 2026. Mónica: "quiero fondo blanco". La columna de compra pasa
     de #F7F6F4 a blanco; la foto de al lado sigue en su baldosa gris, como en su web. */
  .ficha-info{padding:clamp(2rem,3.2vw,3rem) clamp(1.8rem,3vw,2.8rem);background:#FFFFFF;border-radius:3px}
  .ficha h1.ficha-titulo{margin-top:.6rem}

  .pdp-res{padding-top:3.75rem}
  .pdp-res__panel{padding:2.5rem 0}
  .pdp-cifras{gap:60px}
  .pdp-cifra{flex-direction:row;align-items:center;gap:20px}
  .pdp-cifra__n{font-size:3.75rem;line-height:1.2;align-self:center}
  .pdp-cifra__que{font-size:.875rem;line-height:22px;max-width:195px}
  .pdp-nota{margin-top:1rem}

  .pdp-titulo{font-size:2.5rem;line-height:1.25}
  .pdp-clave.tiene-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .pdp-clave__texto{padding:3.75rem clamp(2rem,4.2vw,3.75rem)}
  .pdp-clave__mini{display:none}
  .pdp-clave__foto{display:block}
  .pdp-clave__foto img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}
  .pdp-activos{margin-top:3.25rem}

  .ficha-resenas{padding:4.5rem 0 4.9rem}
  .ficha-resenas--vacia{padding:1.5rem 0 3rem}
  .ficha-resenas__titulo{font-size:2.4rem}
  .ficha-resenas .resenas{--res-gap:clamp(1rem,2vw,2rem);margin-top:2.2rem}
  .ficha-resenas .resena{flex-basis:calc((100% - 2 * var(--res-gap)) / 3)}
  .resena{padding:1.8rem}

  .ficha-barra{padding:1.1rem var(--pad);gap:1.4rem;justify-content:flex-start}
  .ficha-barra__texto{flex:0 1 auto;max-width:44ch;gap:.15rem}
  .ficha-barra__nombre{font-size:1.125rem;line-height:1.2}
  .ficha-barra__precio{font-size:.92rem}
  .ficha-barra__boton{margin-left:auto;min-height:56px;padding:1rem 2.8rem;font-size:.78rem}
  .ficha-barra__foto{width:62px;height:62px}
}

/* "Ver toda la tienda" de "Completa el ritual" mide 26 de alto: se agranda a 46
   con relleno arriba y se devuelve con margen negativo. Solo arriba para que la
   raya de debajo no se mueva (24 sep). */
.ficha-ritual .sec-head a{display:inline-block;padding-top:20px;margin-top:-20px;position:relative;z-index:1}
/* 14 oct, Melissa: "Completa el ritual" demasiado grande. Usaba el título de
   sección de la portada (hasta 4,6rem); ahora mide como "Lo que dicen". */
.ficha-ritual .sec-head h2{font-size:1.75rem;line-height:1.15}
@media(min-width:1025px){.ficha-ritual .sec-head h2{font-size:2.4rem}}

/* "Completa el ritual" en móvil (Dani, 24 sep: "deslizar hacia la izquierda,
   los tres en la misma fila"). Por debajo de 768 la rejilla de dos pasa a una
   fila que se desliza, calcada de `.rail` (piezas.css): rejilla en columna y no
   flex, porque Safari viejo se come el relleno derecho de un flex que desplaza.
   Cada tarjeta mide el 70 % del ancho útil (el relleno derecho deja la caja de
   contenido igual al ancho del título) y la segunda asoma. La pista sangra hasta
   el borde derecho con el mismo `var(--pad)` de `.wrap`, así que nunca desborda
   la página. Se queda con la clase `.grid`: conserva `min-width:0` en las
   tarjetas y el hueco de 1rem de móvil. overflow-y:hidden para que no salga un
   desplazamiento vertical invisible que se trague el dedo; como ese overflow
   recorta por los cuatro lados, la pista gana 4 px de relleno arriba, abajo e
   izquierda (devueltos con margen negativo y scroll-padding) para que el anillo
   de foco de "Añadir" no se corte y la tarjeta siga alineada con el título.
   A 768 y más, igual. */
.ficha-ritual .grid:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:767.98px){
  .ficha-ritual .grid{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70%;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    margin:-4px calc(-1 * var(--pad)) -4px -4px;
    padding:4px var(--pad) 4px 4px;
    scroll-padding-left:4px;
    scrollbar-width:none;
  }
  .ficha-ritual .grid::-webkit-scrollbar{display:none}
  .ficha-ritual .grid>.card{scroll-snap-align:start}
}

@media(prefers-reduced-motion:reduce){
  .ficha-barra{transition:opacity .2s linear;transform:none}
  .ficha-foto:hover img:not(.es-ambiental){transform:scale(var(--tlr-zoom,1))!important}
  .ficha-barra__boton:hover::after{transform:none!important}
  .ficha-mas::before,.ficha-mas::after{transition:none}
  .resenas-flecha{transition:none}
}

/* ---------- Pago exprés de Stripe (Apple Pay / Google Pay), 2 oct ----------
   Stripe lo pinta justo después del formulario de compra
   (`woocommerce_after_add_to_cart_form`). Producción lo tiene activo en ficha
   y carrito: aquí solo se le da el mismo ancho que el botón de compra y el
   separador "o" con la letra de la casa. El botón en sí es un iframe de
   Stripe y no se puede vestir por dentro. */
.ficha-info #wc-stripe-express-checkout-wrapper,
.ficha-info #wc-stripe-payment-request-wrapper{width:100%;margin:12px 0 0;padding:0;clear:both}
.ficha-info #wc-stripe-express-checkout-element,
.ficha-info #wc-stripe-payment-request-button{width:100%;min-height:48px}
/* 5 oct 2026 (Mónica, captura 3249): Apple Pay y Google Pay justo debajo de
   "Añadir al carrito". Stripe 10.8.5 y 11 pintan `#wc-stripe-express-checkout-element`
   (con `margin-top:1em` y `display:none` en línea, que su guion quita si el
   dispositivo puede pagar) en el gancho `woocommerce_after_add_to_cart_form`,
   prioridad 1, que sale del formulario de compra dentro de `.ficha-compra`. El
   margen se iguala al hueco de 12 px del botón; la línea de envío va debajo. */
.ficha-info #wc-stripe-express-checkout-element{margin-top:12px!important}
.ficha-info #wc-stripe-express-checkout-button-separator,
.ficha-info #wc-stripe-payment-request-button-separator{display:block;text-align:center;margin:12px 0 0 !important;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}

/* ---------- El ritual: un paso, una foto (14 oct, opción B de Dani) ----------
   Vuelve a la vista lo que Oak pasó al desplegable (Mónica, audio del 13).
   Cuatro columnas a 768 y más; por debajo, fila que se desliza calcada de
   "Completa el ritual" (70 % por tarjeta, la siguiente asoma). Las fotos van
   en 4:5 con padding-bottom, no aspect-ratio (ver memoria del 768). */
.ficha-pasos{padding-block:3.75rem}
.ficha-pasos__cab{margin-bottom:2rem}
.ficha-pasos__fila{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ficha-pasos__fila>li{min-width:0}
.ficha-pasos__fila:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.ficha-pasos__foto{position:relative;padding-bottom:125%;overflow:hidden;background:var(--card);margin-bottom:1rem}
.ficha-pasos__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ficha-pasos__n{display:block;font-family:var(--serif);font-size:1rem;line-height:22px;color:var(--clay);font-variant-numeric:tabular-nums}
.ficha-pasos h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.2;margin:.35rem 0 .5rem;color:var(--ink);text-transform:none}
.ficha-pasos p{margin:0;font-size:.875rem;line-height:22px;color:var(--ink-soft)}
@media(max-width:767.98px){
  .ficha-pasos{padding-block:2.75rem}
  .ficha-pasos__fila{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70%;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:-4px calc(-1 * var(--pad)) -4px -4px;padding:4px var(--pad) 4px 4px;scroll-padding-left:4px;
    scrollbar-width:none}
  .ficha-pasos__fila::-webkit-scrollbar{display:none}
  .ficha-pasos__fila>li{scroll-snap-align:start}
}

/* ---------- Ingredientes activos (14 oct, ficha de bestseller de muestra) ----------
   Estructura de Omorovicza (cabecera a dos lados y cuatro baldosas) con la piel de
   la copia. Dos columnas en móvil, cuatro a 768 y más. Fotos 4:5 con padding-bottom. */
.ficha-activos{background:var(--card);padding-block:3.75rem}
.ficha-activos__cab{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;margin-bottom:2rem}
.ficha-activos__cab .pdp-parrafo{margin:0}
.ficha-activos__rej{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1rem}
.ficha-activos__rej>li{min-width:0}
.ficha-activos__foto{position:relative;padding-bottom:125%;overflow:hidden;background:#fff;margin-bottom:1rem}
.ficha-activos__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ficha-activos h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.2;margin:0 0 .25rem;color:var(--ink);text-transform:none}
.ficha-activos__inci{margin:0 0 .5rem;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.ficha-activos__txt{margin:0;font-size:.875rem;line-height:22px;color:var(--ink-soft)}
@media(min-width:768px){
  .ficha-activos__cab{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
  .ficha-activos__rej{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.75rem}
}

/* ---------- Bloques alternos foto / texto (15 oct, los rellena Mónica) ----------
   Como la maqueta aprobada: apilados en móvil; desde 768 dos columnas iguales y la
   foto cambia de lado en cada bloque. min-width:0 en las dos celdas (memoria del
   grid) y la foto 4:5 con padding-bottom, no aspect-ratio. */
.ficha-bloques{background:var(--bone,#fff);padding-block:3.75rem}
.ficha-bloques__fila{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;align-items:center}
.ficha-bloques__fila+.ficha-bloques__fila{margin-top:3rem}
.ficha-bloques__foto{position:relative;padding-bottom:125%;overflow:hidden;background:var(--card);min-width:0}
.ficha-bloques__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ficha-bloques__texto{min-width:0}
.ficha-bloques__texto .pdp-parrafo{max-width:46ch}
.ficha-bloques__texto .pdp-parrafo+.pdp-parrafo{margin-top:1em}
@media(min-width:768px){
  .ficha-bloques__fila{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
  .ficha-bloques__fila+.ficha-bloques__fila{margin-top:4.5rem}
  .ficha-bloques__fila--rev .ficha-bloques__foto{order:2}
  .ficha-bloques__texto{padding-inline:clamp(0px,3vw,48px)}
  /* 19 oct, Mónica (vídeo): "que vaya a ras", "estos espacios los veo extraños". En escritorio
     las filas van pegadas (damero) y la foto es cuadrada: con 4:5 y 4,5rem entre filas quedaba
     mucho blanco junto a textos cortos, y las fotos apaisadas se recortaban hasta un dedo. */
  .ficha-bloques__fila+.ficha-bloques__fila{margin-top:0}
  .ficha-bloques__foto{padding-bottom:100%}
  .ficha-como+.ficha-bloques{padding-top:0}
}

/* ---------- Cómo usarlo, bestsellers (16 oct, reunión; lo rellenan ellas) ----------
   Westman Atelier en la piel de la ficha: foto o vídeo a un lado y, al otro, los
   pasos numerados en Zodiak arcilla (como el ritual) y "Qué vas a notar" en una
   caja eucalipto con la misma marca de las ✓ de la compra. Apilado en móvil;
   desde 768 dos columnas. Medio 4:5 con padding-bottom, no aspect-ratio, y
   min-width:0 en las celdas (memorias del 768 y del grid). */
.ficha-como{padding-block:3.75rem}
.ficha-como__rej{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
.ficha-como__medio{position:relative;padding-bottom:125%;overflow:hidden;background:var(--card);min-width:0}
.ficha-como__medio img,.ficha-como__medio video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ficha-como__texto{min-width:0}
.ficha-como__pasos{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1.1rem;max-width:46ch}
.ficha-como__pasos li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);align-items:baseline;margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink)}
.ficha-como__n{font-family:var(--serif);font-size:1rem;color:var(--clay);font-variant-numeric:tabular-nums}
.ficha-como__notar{margin-top:2rem;padding:1.4rem 1.5rem 1.5rem;border-radius:3px;max-width:46ch;
  background:var(--eucalyptus);background:color-mix(in srgb,var(--eucalyptus) 45%,#fff)}
.ficha-como__notar .pdp-eyebrow{color:var(--verde-texto);font-weight:600;margin-bottom:.8rem}
.ficha-como__notar ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ficha-como__notar li{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:.875rem;line-height:1.4;color:var(--ink)}
.ficha-como__notar svg{flex:0 0 16px;margin-top:3px;color:var(--verde-texto)}
@media(max-width:767.98px){
  .ficha-como{padding-block:2.75rem}
}
@media(min-width:768px){
  .ficha-como__rej{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,5vw,5rem)}
}

/* ==========================================================================
   18 oct, tipografía A (Oak), la de toda la web desde hoy
   (.planning/feedback/2026-10-17-dani/DIRECCION-diseno-referencias.md).
   Solo tipografía: tamaño, peso, color y espaciado de letra. Tokens de
   design-system.css con su valor de reserva. FUERA a propósito: precio,
   existencias, valoración de arriba, todo .ficha-compra (opciones, cantidad,
   botón de añadir, envío), las tarjetas de "Completa el ritual" (piezas.css),
   el formulario de reseña, la miga de pan y la frase de debajo del nombre
   (.ficha-lema, ya en la voz de Oak). Los títulos solo cambian peso (y tamaño
   los de sección): el atajo `font:` borraría la cursiva de los <em>.
   ========================================================================== */
/* títulos: el H1 conserva su tamaño; los de sección, 46 px a 1440 y 34 en móvil */
.ficha h1.ficha-titulo{font-weight:var(--tlr-t-titulo-peso,300)}
.ficha-titulo em,.pdp-titulo em{font-weight:301}
.pdp-titulo,.ficha-ritual .sec-head h2,.ficha-resenas__titulo{
  font-weight:var(--tlr-t-titulo-peso,300);font-size:clamp(34px,1.4rem + 1.65vw,46px)}
.ficha-pasos h3,.ficha-pasos__n,.ficha-como__n,.ficha-plegable__lead,.ficha-premio__nombre,
.pdp-cifra__fin,.pdp-cifra__cuenta,.pdp-cifra__pc{font-weight:var(--tlr-t-titulo-peso,300)}
/* texto corrido: Archivo 300, 14,5 px, 1,75, tinta suave */
.ficha-resumen,.ficha-checks li,.ficha-clave__lista,.ficha-valoran__texto,
.ficha-plegable__cuerpo p,.ficha-plegable__cuerpo li,.ficha-premio__que,
.ficha-pasos p,.ficha-como__pasos li,.ficha-como__notar li,
.pdp-parrafo,.pdp-cifra__que,.pdp-activo__que,.pdp-faq__cuerpo p,.resena-texto{
  font:var(--tlr-t-cuerpo,300 14.5px/1.75 'Archivo',sans-serif);color:var(--tlr-ink-soft,#3A382F)}
.ficha-resumen p{max-width:60ch}
/* etiquetas: Archivo 600, 11,5 px, versal, +0,16 em. p.pdp-eyebrow y p.ficha-plegable__sub llevan
   la etiqueta delante y van DESPUÉS del texto corrido: son <p> dentro de .ficha-pasos y
   .ficha-plegable__cuerpo, y `.ficha-pasos p` les ganaba por especificidad. */
.ficha-antetitulo .eyebrow--reclamo,.ficha-clave__tit,p.ficha-plegable__sub,.ficha-plegable__cuerpo h5,
.ficha-premio__anyo,p.pdp-eyebrow,.pdp-pestana,.pdp-activo__nombre,.ficha-media{
  font:var(--tlr-t-etiqueta,600 11.5px/1.3 'Archivo',sans-serif);
  letter-spacing:var(--tlr-t-etiqueta-ls,.16em);text-transform:uppercase}
/* enlace de acción secundario: voz de etiqueta subrayada */
.ficha-ritual .sec-head a{font:var(--tlr-t-etiqueta,600 11.5px/1.3 'Archivo',sans-serif);
  letter-spacing:var(--tlr-t-etiqueta-ls,.16em);text-transform:uppercase;text-decoration:underline;text-underline-offset:4px}