/* =========================================================================
   imani Perú — hoja única.

   El sistema visual sale de las dos webs que dio el fabricante
   (imanibreastpumps.com e imanimalaysia.com), miradas en captura, no leídas:

     · rojo coral como color de marca, no un neutro apagado
     · Poppins en todo — sin serif, que es lo que envejece una página
     · secciones CENTRADAS con antetítulo en versalitas
     · héroe fotográfico a sangre, sin caja ni sombra
     · tarjetas de producto sin borde: manda la foto
     · esquinas muy redondeadas y botones en píldora
   ========================================================================= */

@font-face { font-family: Poppins; src: url(../fonts/poppins-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Poppins; src: url(../fonts/poppins-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
	--coral: #ea4b45;
	--coral-oscuro: #c93a35;
	--coral-suave: #fdecea;
	--rosa: #fce9e8;
	--rosa-claro: #fef5f4;

	--ink: #2c2a2b;
	--ink-soft: #6a6567;
	--ink-faint: #9c9698;
	--line: #ece7e6;
	--bg: #ffffff;
	--gris: #f7f5f4;

	--fuente: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--w: 1240px;
	--w-texto: 760px;
	--r: 16px;
	--r-g: 28px;
	--sombra: 0 4px 24px rgba(44, 42, 43, .07);
	--sombra-alta: 0 12px 40px rgba(44, 42, 43, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--fuente);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--coral-oscuro); text-underline-offset: 3px; }
a:hover { color: var(--coral); }

h1, h2, h3, h4 {
	font-family: var(--fuente);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 .6em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
h3 { font-size: clamp(1.1rem, 1.9vw, 1.3rem); }
h4 { font-size: 1rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }
::selection { background: var(--coral-suave); }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

/* --- layout --------------------------------------------------------- */

.env { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 28px; }
.env-texto { max-width: var(--w-texto); }

.seccion { padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.seccion--gris { background: var(--gris); }
.seccion--rosa { background: var(--rosa-claro); }
.seccion--fina { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }

/* El encabezado de sección va centrado: es la firma visual de imani. */
.encabezado-seccion {
	max-width: 720px;
	margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
	text-align: center;
}
.encabezado-seccion h2 { color: var(--coral); }
.encabezado-seccion p { color: var(--ink-soft); margin: 0; }

.antetitulo {
	display: block;
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 1rem;
}

.saltar { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: .8rem 1.2rem; z-index: 999; }
.saltar:focus { left: 1rem; top: 1rem; }

/* --- botones -------------------------------------------------------- */

.boton,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	font-family: var(--fuente); font-size: .92rem; font-weight: 500; line-height: 1;
	padding: 1.05rem 2.2rem;
	border: 1.5px solid var(--coral);
	border-radius: 999px;
	background: var(--coral);
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.boton:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
	background: var(--coral-oscuro); border-color: var(--coral-oscuro); color: #fff;
}

.boton--linea, .woocommerce a.button.alt.wc-forward {
	background: transparent; color: var(--coral); border-color: var(--coral);
}
.boton--linea:hover { background: var(--coral); color: #fff; }

.boton--blanco { background: #fff; border-color: #fff; color: var(--ink); }
.boton--blanco:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

.boton--pequeno { padding: .75rem 1.5rem; font-size: .85rem; }

.enlace-flecha {
	display: inline-flex; align-items: center; gap: .45rem;
	font-weight: 500; font-size: .92rem; text-decoration: none; color: var(--coral);
}
.enlace-flecha::after { content: "→"; transition: transform .18s ease; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* --- cabecera ------------------------------------------------------- */

.aviso-superior {
	background: var(--coral);
	color: #fff;
	font-size: .78rem;
	font-weight: 400;
	text-align: center;
	padding: .7rem 28px;
	letter-spacing: .01em;
}
.aviso-superior strong { font-weight: 600; }
.aviso-superior a { color: #fff; }

.cabecera {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid var(--line);
}
.cabecera__fila { display: flex; align-items: center; gap: 2rem; min-height: 78px; }

.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.marca__simbolo {
	width: 34px; height: 34px; flex: 0 0 34px;
	background: var(--coral); border-radius: 50% 50% 50% 6px;
	position: relative;
}
.marca__simbolo::after {
	content: ""; position: absolute; inset: 10px 10px auto auto;
	width: 8px; height: 8px; background: #fff; border-radius: 50%;
}
.marca__texto { line-height: 1; }
.marca__nombre { display: block; font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; }
.marca__pais {
	display: block; font-size: .55rem; font-weight: 500;
	letter-spacing: .3em; text-transform: uppercase; color: var(--ink-faint); margin-top: .25rem;
}

.nav-principal { margin: 0 auto; }
.nav-principal ul { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-principal li { margin: 0; position: relative; }
/*
 * Se acota a los enlaces DEL MENÚ, no a todo lo que cuelgue de la navegación.
 *
 * Estaba como `.nav-principal a` y el megamenú vive dentro de un `<li>` del
 * menú, así que esta regla le imponía `display: block`, tipografía de 0,9rem y
 * relleno vertical a sus tres enlaces de categoría. Efecto visible: «Ver toda la
 * tienda» perdía el hueco antes de la flecha, porque `.enlace-flecha` es
 * `inline-flex` con `gap` y en `block` el `gap` no existe.
 *
 * Con el combinador de hijo directo, la regla alcanza el enlace de primer nivel
 * y nada más. El submenú clásico se estiliza aparte, justo debajo.
 */
.nav-principal > ul > li > a {
	font-size: .9rem; font-weight: 400; color: var(--ink);
	text-decoration: none; padding: .5rem 0; display: block;
}
.nav-principal > ul > li > a:hover, .nav-principal .current-menu-item > a { color: var(--coral); }

.nav-principal .sub-menu {
	position: absolute; top: 100%; left: -1.1rem;
	display: none; flex-direction: column;
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--r); box-shadow: var(--sombra);
	padding: .7rem 0; min-width: 250px;
}
.nav-principal li:hover > .sub-menu, .nav-principal li:focus-within > .sub-menu { display: flex; }
/*
 * El submenú clásico trae aquí su estilo completo, no heredado.
 *
 * Antes lo recibía de `.nav-principal a`; al acotar aquella regla a los enlaces
 * de primer nivel —para que dejara de imponerse sobre el megamenú— estos se
 * quedaron con el estilo por defecto del navegador: subrayados y en coral. No lo
 * canta ninguna comprobación de texto, solo se ve.
 */
/*
 * `gap: 0` porque el desplegable es un `<ul>` y hereda el `gap: 2rem` de la barra
 * horizontal, donde sí separa entradas. En vertical añadía 32 px entre cada
 * enlace: el panel medía 289 px para cuatro entradas de 42. Airea sin querer.
 */
.nav-principal .sub-menu { gap: 0; }
.nav-principal .sub-menu a {
	display: block; padding: .55rem 1.3rem;
	font-size: .9rem; font-weight: 400; color: var(--ink);
	text-decoration: none;
}
.nav-principal .sub-menu a:hover { color: var(--coral); }

.acciones-cabecera { display: flex; align-items: center; gap: 1rem; }
.carrito-enlace {
	display: inline-flex; align-items: center; gap: .5rem;
	text-decoration: none; color: var(--ink); font-size: .9rem;
}
.carrito-enlace__bolsa {
	display: inline-grid; place-items: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--coral); color: #fff; font-size: .8rem; font-weight: 600;
}

.abrir-menu { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; font-size: 1.5rem; color: var(--ink); }

/* --- héroe fotográfico a sangre -------------------------------------- */

.heroe {
	position: relative;
	min-height: clamp(420px, 52vw, 620px);
	display: grid;
	align-items: center;
	background: var(--rosa) center/cover no-repeat;
	overflow: hidden;
}
.heroe__foto {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; object-position: 72% center;
}
.heroe::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(96deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.35) 55%, rgba(255,255,255,0) 78%);
}
.heroe__contenido { position: relative; z-index: 2; max-width: 560px; padding: 3rem 0; }
.heroe h1 { margin-bottom: .45em; letter-spacing: -.02em; }
.heroe h1 em { font-style: normal; color: var(--coral); }
.heroe__entrada { font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 2rem; }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }
.heroe__precio { font-size: .88rem; color: var(--ink-soft); margin: 1.4rem 0 0; }
.heroe__precio strong { color: var(--ink); }

/* --- franja de confianza --------------------------------------------- */

.confianza { background: var(--gris); }

/*
 * Cuatro sellos en una fila, cada uno con icono, titular y una línea.
 *
 * Antes eran cuatro frases en versalitas, centradas y apiladas —lo que se veía
 * era una lista de cuatro renglones sueltos—. El problema no era solo que el
 * núcleo apilara las columnas: aunque hubieran ido en fila, cuatro frases largas
 * todas en mayúsculas no forman una franja de confianza, forman un párrafo roto.
 * Ahora cada sello tiene jerarquía propia: icono, dato corto en negrita y la
 * explicación pequeña debajo.
 */
.confianza__rejilla {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
	list-style: none; margin: 0; padding: 0; text-align: center;
}
.confianza__item { margin: 0; }
.confianza__item svg {
	width: 30px; height: 30px; margin: 0 auto .7rem;
	stroke: var(--coral); fill: none; stroke-width: 1.5;
	stroke-linecap: round; stroke-linejoin: round;
}
.confianza__item b {
	display: block; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.confianza__item span {
	display: block; margin-top: .25rem;
	font-size: .82rem; color: var(--ink-faint); line-height: 1.5;
}

/* Un separador fino entre sellos: los ata como una franja en vez de cuatro islas. */
.confianza__item + .confianza__item { border-left: 1px solid var(--line); }

/* --- beneficios alrededor del producto -------------------------------- */

.orbita {
	display: grid;
	grid-template-columns: 1fr minmax(280px, 400px) 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}
.orbita__columna { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.orbita__foto { border-radius: var(--r-g); overflow: hidden; }
.orbita__foto img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.orbita__bloque { text-align: center; }
.orbita__bloque h3 { margin-bottom: .5rem; }
.orbita__bloque p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* --- rejilla de productos -------------------------------------------- */

/*
 * `auto-fill` con TOPE, no `auto-fit` con `1fr`.
 *
 * La diferencia decide cómo se ve una categoría con pocos productos, y aquí las
 * hay de uno. Medido a 1440 px:
 *
 *   auto-fit + 1fr → 4 productos: 286 px cada uno   ✓
 *                    2 productos: 604 px cada uno   ✗
 *                    1 producto: **1240 px**, el ancho entero  ✗✗
 *
 * `auto-fit` colapsa las pistas vacías y reparte todo el espacio entre las que
 * quedan; con `1fr` de máximo, una tarjeta sola se estira hasta el contenedor y
 * la foto de un inserto acaba midiendo metro y medio. `auto-fill` mantiene las
 * pistas vacías, y el tope de 300 px impide que ninguna crezca más de lo que
 * mide una tarjeta: con un producto se ve una tarjeta normal alineada a la
 * izquierda, que es lo que se espera de una tienda.
 *
 * El tope va en `px` y no en `fr` a propósito: una tarjeta de producto tiene un
 * tamaño natural —foto cuadrada, dos líneas de texto y un precio— y estirarla no
 * la mejora, solo la hace rara.
 */
.rejilla-productos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: clamp(1.2rem, 2.4vw, 2rem);
	list-style: none; margin: 0; padding: 0;
}
.ficha-producto { margin: 0; text-align: center; display: flex; flex-direction: column; }
.ficha-producto__media {
	position: relative; display: block;
	border-radius: var(--r); overflow: hidden;
	background: var(--gris);
	margin-bottom: 1.1rem;
}
.ficha-producto__media img {
	width: 100%; aspect-ratio: 1; object-fit: cover;
	transition: transform .4s ease;
}
.ficha-producto:hover .ficha-producto__media img { transform: scale(1.04); }
.ficha-producto__etiqueta {
	position: absolute; top: 12px; left: 12px; z-index: 2;
	background: var(--coral); color: #fff;
	font-size: .68rem; font-weight: 500; letter-spacing: .04em;
	padding: .35rem .8rem; border-radius: 999px;
}
.ficha-producto__titulo { font-size: .95rem; font-weight: 500; line-height: 1.5; margin: 0 0 .5rem; }
.ficha-producto__titulo a { color: var(--ink); text-decoration: none; }
.ficha-producto__titulo a:hover { color: var(--coral); }
.ficha-producto__precio { font-size: 1.05rem; font-weight: 600; color: var(--ink); margin-top: auto; }
.ficha-producto__precio del { color: var(--ink-faint); font-weight: 400; font-size: .9rem; margin-right: .4rem; }
/*
 * `<ins>` viene SUBRAYADO por defecto del navegador, y un precio subrayado en una
 * tarjeta clicable se lee como un enlace. El tachado sí tenía estilo; su pareja
 * no, porque esta rama no se había ejecutado nunca: el catálogo lleva cero
 * ofertas desde que existe. Se vio poniendo una promoción de verdad y mirando la
 * rejilla, no leyendo la hoja de estilos.
 */
.ficha-producto__precio ins { text-decoration: none; background: none; font-weight: 600; }
.price ins, .precio-y-compra ins { text-decoration: none; background: none; }

/* --- bloque descubre: imagen con esquina asimétrica -------------------- */

.descubre {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.descubre__foto { overflow: hidden; border-radius: 0 var(--r-g) 0 clamp(60px, 9vw, 130px); }
.descubre__foto img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; }
.descubre--invertido .descubre__foto { order: 2; border-radius: var(--r-g) 0 clamp(60px, 9vw, 130px) 0; }
.descubre h2 { color: var(--coral); }
.descubre p { color: var(--ink-soft); }

/* --- comparativa ------------------------------------------------------ */

.comparativa {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--r-g); overflow: hidden; box-shadow: var(--sombra);
}
.tabla-comparativa { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-comparativa th, .tabla-comparativa td {
	padding: 1.1rem 1.4rem; text-align: left;
	border-bottom: 1px solid var(--line); vertical-align: top;
}
.tabla-comparativa thead th {
	background: var(--gris); font-size: 1.05rem; font-weight: 600;
	color: var(--ink); text-align: center;
}
.tabla-comparativa thead th:first-child {
	font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
	color: var(--ink-faint); font-weight: 500; text-align: left;
}
.tabla-comparativa thead th span { font-size: .78rem; font-weight: 400; color: var(--ink-soft); }
.tabla-comparativa tbody th { font-weight: 400; color: var(--ink-soft); width: 32%; }
.tabla-comparativa tbody td { text-align: center; }
.tabla-comparativa .destacada { background: var(--rosa-claro); }
.tabla-comparativa tr:last-child td, .tabla-comparativa tr:last-child th { border-bottom: 0; }
.marca-si { color: var(--coral); font-weight: 600; }
.marca-no { color: var(--ink-faint); }
.fila-precio td, .fila-precio th { background: var(--gris); font-weight: 600; }
.fila-precio .destacada { background: var(--rosa); }

/* --- testimonio ------------------------------------------------------- */

.testimonio {
	background: linear-gradient(180deg, var(--rosa) 0%, var(--rosa-claro) 100%);
	text-align: center;
	padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.testimonio__estrellas { color: var(--coral); letter-spacing: .5em; margin-bottom: 1.5rem; font-size: .9rem; }
.testimonio__texto {
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	line-height: 1.55; max-width: 780px; margin: 0 auto 1.8rem; font-weight: 400;
}
.testimonio__autor { font-size: .85rem; font-weight: 600; margin: 0; }
.testimonio__lugar { font-size: .82rem; color: var(--ink-soft); margin: .2rem 0 0; }

/* --- tarjetas genéricas ----------------------------------------------- */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.tarjeta {
	background: #fff; border: 1px solid var(--line);
	border-radius: var(--r); padding: 2rem 1.7rem;
	display: flex; flex-direction: column; gap: .6rem;
}
.tarjeta--enlace { text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.tarjeta--enlace:hover { box-shadow: var(--sombra); transform: translateY(-3px); color: inherit; }
.tarjeta h3 { margin: 0; font-size: 1.05rem; }
.tarjeta p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.tarjeta__pie { margin-top: auto; padding-top: 1rem; font-size: .85rem; font-weight: 500; color: var(--coral); }
.tarjeta--sello { border-color: var(--coral-suave); background: var(--rosa-claro); }

/* --- listas de comprobación ------------------------------------------- */

.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.lista-check li { position: relative; padding-left: 2rem; margin: 0; font-size: .92rem; color: var(--ink-soft); }
.lista-check li::before {
	content: ""; position: absolute; left: 0; top: .5em;
	width: 1.05rem; height: .5rem;
	border-left: 2px solid var(--coral); border-bottom: 2px solid var(--coral);
	transform: rotate(-45deg);
}
.lista-check strong { color: var(--ink); }

/* --- avisos ----------------------------------------------------------- */

.aviso {
	background: var(--rosa-claro);
	border-left: 3px solid var(--coral);
	padding: 1.4rem 1.6rem; border-radius: 0 var(--r) var(--r) 0;
	margin: 2rem 0; font-size: .92rem;
}
.aviso p:last-child { margin-bottom: 0; }
.aviso__titulo { font-weight: 600; display: block; margin-bottom: .4rem; }
.aviso--neutro { border-left-color: var(--ink-faint); background: var(--gris); }

/* --- producto: ficha --------------------------------------------------- */

.producto-cabecera {
	display: grid; grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 4vw, 4rem);
	padding: 2rem 0 3.5rem; align-items: start;
}
.producto-galeria .woocommerce-product-gallery__image img { border-radius: var(--r-g); }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__trigger { display: none; }
.flex-control-thumbs {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem;
	list-style: none; padding: 0; margin: .9rem 0 0;
}
.flex-control-thumbs li { margin: 0; }
.flex-control-thumbs img { border-radius: 10px; cursor: pointer; opacity: .55; transition: opacity .15s ease; }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; }

.producto-sku { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; }
.producto-resumen .product_title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .6rem 0 .8rem; }
.producto-resumen .woocommerce-product-details__short-description { font-size: 1rem; color: var(--ink-soft); margin-bottom: 1.6rem; }
.precio-producto, .producto-resumen .price {
	font-size: 2rem; font-weight: 600; color: var(--coral); display: block; margin: 0 0 .3rem;
}
.nota-precio { font-size: .8rem; color: var(--ink-faint); margin: 0 0 1.8rem; }

.woocommerce div.product form.cart { margin: 0 0 1.8rem; display: block; }
.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: 1.2rem; border-collapse: collapse; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: .3rem 0; text-align: left; display: block; }
.woocommerce div.product form.cart .variations label { font-weight: 500; font-size: .9rem; }
.woocommerce div.product form.cart .quantity { display: inline-block; margin-right: .8rem; }

select, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], textarea {
	font-family: var(--fuente); font-size: .92rem;
	padding: .85rem 1rem; border: 1px solid var(--line);
	border-radius: 10px; background: #fff; color: var(--ink); width: 100%;
}
input[type="number"] { width: 5.5rem; text-align: center; }

.garantias-producto {
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	padding: 1.4rem 0; margin: 1.8rem 0;
	display: grid; gap: .8rem; font-size: .87rem; color: var(--ink-soft); line-height: 1.6;
}
.garantias-producto b { color: var(--ink); font-weight: 600; }

.producto-detalle { padding-bottom: 4.5rem; }

.tabla-specs { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-specs th, .tabla-specs td { padding: .85rem 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabla-specs th { font-weight: 400; color: var(--ink-soft); width: 44%; }
.tabla-specs td { font-weight: 500; }

/* Ocupa el sitio de `.tabla-niveles`, la tabla de vacío retirada el 2026-08-16
   (ver `imani_succion()`). Se pinta como un aparte y no como prosa corrida: lo
   que dice —que un dato no lo publica el fabricante— es fácil de saltar leyendo
   en diagonal, y saltárselo es volver a comparar mmHg con el aparato de al
   lado. */
.succion-declarada {
	margin: 1.8rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--gris);
	border-left: 3px solid var(--coral);
	border-radius: 0 6px 6px 0;
	font-size: .92rem;
}
.succion-declarada p { margin: 0 0 .8rem; }
.succion-declarada p:last-child { margin-bottom: 0; }

/* --- páginas de contenido ---------------------------------------------- */

.pagina-cabecera {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 3vw, 2.8rem);
	background: var(--rosa-claro); text-align: center;
}
.pagina-cabecera h1 { color: var(--coral); margin-bottom: .5rem; }
.pagina-cabecera .entrada { font-size: 1.02rem; color: var(--ink-soft); max-width: 36em; margin: 0 auto; }

.migas { font-size: .78rem; color: var(--ink-faint); margin-bottom: 1.2rem; }
.migas a { color: var(--ink-soft); text-decoration: none; }
.migas a:hover { color: var(--coral); }
.migas span { margin: 0 .45rem; }
.pagina-cabecera .migas { justify-content: center; display: flex; }

.contenido-largo { max-width: var(--w-texto); margin: 0 auto; padding: clamp(2.5rem, 5vw, 3.5rem) 0 4.5rem; }
.contenido-largo h2 { margin-top: 2.8rem; }
.contenido-largo h3 { margin-top: 2rem; }
.contenido-largo > *:first-child { margin-top: 0; }
.contenido-largo img { border-radius: var(--r); margin: 2rem 0; }
.contenido-largo table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: .9rem; }
.contenido-largo th, .contenido-largo td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.contenido-largo thead th { background: var(--gris); font-weight: 600; }
.contenido-largo blockquote { margin: 2rem 0; padding-left: 1.5rem; border-left: 3px solid var(--coral); color: var(--ink-soft); }

.indice { background: var(--gris); border-radius: var(--r); padding: 1.6rem 1.8rem; margin-bottom: 2.5rem; }
.indice h2 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .9rem; font-weight: 500; }
.indice ol { margin: 0; padding-left: 1.2rem; }
.indice li { margin-bottom: .4rem; font-size: .9rem; }


/* --- directorio -------------------------------------------------------- */

.filtros-directorio {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
	background: var(--gris); border-radius: var(--r); padding: 1.4rem 1.6rem; margin-bottom: 2rem;
}
.filtros-directorio label { font-size: .78rem; font-weight: 500; color: var(--ink-soft); display: block; margin-bottom: .4rem; }
.filtros-directorio > div { flex: 1 1 200px; }

.consultora { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 1.8rem; display: flex; flex-direction: column; gap: .5rem; }
.consultora__nombre { font-size: 1.1rem; font-weight: 600; margin: 0; }
.consultora__credencial {
	display: inline-block; align-self: flex-start;
	font-size: .68rem; font-weight: 600; letter-spacing: .06em;
	background: var(--coral-suave); color: var(--coral-oscuro);
	padding: .3rem .7rem; border-radius: 999px;
}
.consultora__meta { font-size: .87rem; color: var(--ink-soft); margin: 0; }
.consultora__meta b { color: var(--ink); font-weight: 600; }

.vacio-directorio {
	border: 1px dashed var(--line); border-radius: var(--r-g);
	padding: 3rem 2rem; text-align: center; color: var(--ink-soft); background: var(--gris);
}

/* --- para tiendas ------------------------------------------------------ */

.bloque-tiendas {
	background: var(--ink); color: #f2eeed;
	border-radius: var(--r-g); padding: clamp(2.5rem, 5vw, 4rem);
	display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 4vw, 3rem); align-items: center;
}
.bloque-tiendas h2 { color: #fff; }
.bloque-tiendas p, .bloque-tiendas .lista-check li { color: #c6bfbe; }
.bloque-tiendas .lista-check li::before { border-color: var(--coral); }
.bloque-tiendas .lista-check strong { color: #fff; }
.bloque-tiendas .antetitulo { color: var(--coral); }

/* --- pie ---------------------------------------------------------------- */

.pie { background: var(--gris); padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; font-size: .88rem; }
.pie__rejilla { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.pie h3 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.1rem; font-weight: 500; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .6rem; }
.pie a { color: var(--ink-soft); text-decoration: none; }
.pie a:hover { color: var(--coral); }
.pie__intro { color: var(--ink-soft); max-width: 30em; }
.pie__legal { padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .8rem; color: var(--ink-faint); }

/* --- woocommerce comunes ------------------------------------------------ */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--rosa-claro); border-left: 3px solid var(--coral);
	border-radius: 0 var(--r) var(--r) 0; padding: 1.1rem 1.4rem; margin: 0 0 1.8rem;
	list-style: none; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
}
.woocommerce-error { border-left-color: #b3413f; }
.woocommerce-message .button, .woocommerce-info .button { margin-left: auto; }

.woocommerce table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 1rem; border-bottom: 1px solid var(--line); text-align: left; }
.woocommerce table.shop_table thead th { background: var(--gris); font-weight: 600; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }

.woocommerce-breadcrumb { font-size: .8rem; color: var(--ink-faint); margin-bottom: 1.2rem; }
.woocommerce ul.products { list-style: none; padding: 0; margin: 0; }

.woocommerce-cart .contenido-largo,
.woocommerce-checkout .contenido-largo,
.woocommerce-account .contenido-largo { max-width: var(--w); }
.woocommerce-cart .pagina-cabecera,
.woocommerce-checkout .pagina-cabecera,
.woocommerce-account .pagina-cabecera { background: transparent; padding-bottom: 0; }

/* --- utilidades ---------------------------------------------------------- */

.solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.centro { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1040px) {
	.orbita { grid-template-columns: 1fr; }
	.orbita__foto { max-width: 380px; margin: 0 auto; order: -1; }
	.orbita__columna { grid-template-columns: 1fr 1fr; display: grid; gap: 2rem; }
	.producto-cabecera, .descubre, .bloque-tiendas { grid-template-columns: 1fr; }
	.descubre--invertido .descubre__foto { order: 0; }
	.producto-galeria { position: static; }
	.confianza__rejilla { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
	.pie__rejilla { grid-template-columns: 1fr 1fr; }
}

/*
 * La cabecera pasa a menú desplegable en 1080 px, no en 860.
 *
 * Estaba en 860 y **la barra de escritorio no cabe por debajo de 1080**: medido,
 * el logotipo acaba en 178, el menú de seis entradas en 1010 y el carrito en
 * 1080. Entre 861 y 1080 la cabecera se salía y la página entera arrastraba
 * barra horizontal — en TODAS las páginas, no solo en las de producto.
 *
 * Es un desborde de los que no se ven mirando: a 1280 está bien y a 860 está
 * bien, y la franja de en medio no es un ancho en el que uno piense. Lo cazó
 * `scripts/desborde.mjs` recorriendo anchos, que es para lo que existe.
 *
 * El número no es redondo a propósito: es lo que mide la cabecera. Si mañana se
 * añade una entrada al menú, volverá a no caber y habrá que volver a medir —
 * elegir 1024 «porque es un ancho típico» sería fijar un umbral por costumbre en
 * vez de por medición.
 */
@media (max-width: 1080px) {
	.abrir-menu { display: block; margin-left: auto; }
	.nav-principal {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--sombra);
		padding: 1rem 28px 1.5rem; margin: 0;
	}
	.nav-principal.abierto { display: block; }
	.nav-principal ul { flex-direction: column; gap: 0; }
	.nav-principal > ul > li { border-bottom: 1px solid var(--line); }
	.nav-principal > ul > li > a { padding: .9rem 0; }
	.nav-principal .sub-menu { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 .6rem 1rem; min-width: 0; }
	.nav-principal .sub-menu a { padding: .5rem 0; font-size: .88rem; color: var(--ink-soft); text-decoration: none; }
}

@media (max-width: 860px) {
	.heroe::after { background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.8) 55%, rgba(255,255,255,.35) 100%); }
	.comparativa { overflow-x: auto; }
	.tabla-comparativa { min-width: 620px; }
}

@media (max-width: 560px) {
	.env { padding: 0 20px; }
	.orbita__columna { grid-template-columns: 1fr; }
	.confianza__rejilla { grid-template-columns: 1fr; }
	.pie__rejilla { grid-template-columns: 1fr; }
	.woocommerce-tabs ul.tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
	.woocommerce-tabs ul.tabs li a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- galería de producto: ajustes finos --------------------------------- */

/*
 * Las fotos de origen están mezcladas: unas son de escena, a sangre, y otras son
 * producto recortado sobre blanco. Sin un fondo detrás, las segundas se ven
 * flotando en un vacío y la columna crece el doble de alto que la de al lado.
 * Un cuadro neutro con la foto contenida las iguala, que es lo que hacen las dos
 * webs de referencia.
 */
.producto-galeria .woocommerce-product-gallery__image {
	background: var(--gris);
	border-radius: var(--r-g);
	overflow: hidden;
}
.producto-galeria .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 6%;
	border-radius: var(--r-g);
}
.flex-control-thumbs { grid-template-columns: repeat(6, 1fr); gap: .55rem; }
.flex-control-thumbs img {
	aspect-ratio: 1; object-fit: cover;
	background: var(--gris); border-radius: 10px;
}

/* --- páginas de contenido: apoyo visual --------------------------------- */

/*
 * Una guía sin una sola imagen es un muro de texto, y da igual lo buena que sea
 * la tipografía. Las dos webs de referencia no tienen ni una página así.
 */
.pagina-foto {
	max-width: var(--w-texto);
	margin: -1px auto 0;
	transform: translateY(clamp(1.5rem, 3vw, 2.5rem));
	border-radius: var(--r-g);
	overflow: hidden;
	box-shadow: var(--sombra-alta);
}
.pagina-foto img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }
.pagina-foto + .env .contenido-largo { padding-top: clamp(3.5rem, 6vw, 5rem); }

/* Cierre de página: el producto del que hablan las guías. */
.cierre-cta {
	display: grid; grid-template-columns: 320px 1fr;
	gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
	background: var(--rosa-claro); border-radius: var(--r-g);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}
.cierre-cta__foto { background: #fff; border-radius: var(--r); overflow: hidden; }
.cierre-cta__foto img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6%; }
.cierre-cta h2 { color: var(--coral); font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.cierre-cta p { color: var(--ink-soft); }

/* --- vídeo del fabricante ------------------------------------------------ */

.video-marca { position: relative; border-radius: var(--r-g); overflow: hidden; background: var(--ink); }
.video-marca video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.video-marca__pie {
	text-align: center; font-size: .8rem; color: var(--ink-faint);
	margin: .9rem 0 0; letter-spacing: .04em;
}

/*
 * La nota de conflictos. Va debajo del vídeo y no dentro de un acordeón: dice
 * en qué no coincide la campaña del fabricante con lo que publica esta ficha, y
 * eso se lee sin tener que abrir nada. Plegado va solo el porqué de cada una.
 */
.video-marca__nota {
	max-width: 62ch; margin: 1.6rem auto 0;
	font-size: .88rem; line-height: 1.6; color: var(--ink-soft);
}
.video-marca__nota-cabecera { margin: 0 0 .8rem; }
.video-marca__nota ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.video-marca__nota li {
	border-left: 2px solid var(--line); padding-left: .9rem;
}
.video-marca__dice { color: var(--ink-faint); }
.video-marca__nuestro { color: var(--ink); }
.video-marca__nota details { margin-top: .25rem; }
.video-marca__nota summary {
	cursor: pointer; font-size: .82rem; color: var(--coral-oscuro);
}
.video-marca__nota details p { margin: .4rem 0 0; color: var(--ink-faint); font-size: .82rem; }

@media (max-width: 860px) {
	.cierre-cta { grid-template-columns: 1fr; text-align: center; }
	.cierre-cta__foto { max-width: 240px; margin: 0 auto; }
	.pagina-foto img { aspect-ratio: 16/9; }
}

/* --- bloques del núcleo de WordPress ------------------------------------- */

/*
 * Se estilan los bloques nativos, no contenedores propios. El contenido lo
 * escribe el cliente en el editor: si el estilo dependiera de un `div.faq` que
 * solo pone nuestro convertidor, un bloque «Detalles» añadido a mano saldría
 * con el triangulito gris del navegador.
 */
.wp-block-details {
	border-bottom: 1px solid var(--line);
	padding: 0;
}
.contenido-largo > .wp-block-details:first-of-type { border-top: 1px solid var(--line); }
.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	padding: 1.4rem 2.5rem 1.4rem 0;
	font-size: 1.02rem;
	font-weight: 500;
	position: relative;
}
.wp-block-details summary::-webkit-details-marker,
.wp-block-details summary::marker { display: none; content: ""; }
.wp-block-details summary::after {
	content: "+";
	position: absolute; right: .3rem; top: 1.05rem;
	font-size: 1.6rem; font-weight: 300; color: var(--coral);
	transition: transform .2s ease;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > *:not(summary) { padding-bottom: .4rem; }
.wp-block-details .wp-block-group { padding: 0 0 1.2rem; background: none; border: 0; }
.wp-block-details p { color: var(--ink-soft); font-size: .92rem; max-width: 62ch; margin-bottom: .8rem; }

.wp-block-table { margin: 2rem 0; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-heading { scroll-margin-top: 110px; }
.wp-block-group.aviso > p:first-child strong { font-weight: 600; }

/* --- catálogo en pirámide ------------------------------------------------ */

/*
 * Los extractores son el producto; los repuestos acompañan. Pintados todos del
 * mismo tamaño, unas bolsas de S/39 compiten visualmente con un extractor de
 * S/799 y el escaparate deja de decir qué vende esta tienda.
 */
.rejilla-productos--destacada {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	max-width: 900px;
	margin: 0 auto;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ficha-producto--destacada .ficha-producto__titulo { font-size: 1.1rem; }
.ficha-producto__resumen {
	font-size: .88rem; color: var(--ink-soft);
	margin: 0 0 .9rem; max-width: 34ch; margin-inline: auto;
}

.catalogo-subtitulo {
	text-align: center;
	margin: clamp(3rem, 5vw, 4rem) 0 1.8rem;
	font-size: .72rem; font-weight: 500;
	letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint);
}

.rejilla-productos--tira {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1.4rem;
}
.rejilla-productos--tira .ficha-producto__titulo { font-size: .85rem; }
.rejilla-productos--tira .ficha-producto__precio { font-size: .95rem; }
.rejilla-productos--tira .ficha-producto__etiqueta { font-size: .62rem; padding: .28rem .6rem; }

/* --- pestañas nativas de WooCommerce ------------------------------------- */

/*
 * Se estila el marcado que pinta Woo (`.wc-tabs`), no uno propio. Así el
 * JavaScript de las pestañas, su accesibilidad y cualquier pestaña que añada
 * una extensión siguen siendo cosa de WooCommerce, y actualizarlo no descuadra
 * el diseño.
 */
.woocommerce-tabs { padding: 1rem 0 4rem; }
.woocommerce-tabs ul.tabs {
	display: flex; gap: .3rem; flex-wrap: wrap; justify-content: center;
	border-bottom: 1px solid var(--line);
	margin: 0 0 2.5rem; padding: 0; list-style: none;
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
	display: block; padding: 1rem 1.3rem; margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-size: .92rem; font-weight: 500; color: var(--ink-faint); text-decoration: none;
}
.woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
.woocommerce-tabs ul.tabs li.active a { color: var(--coral); border-bottom-color: var(--coral); }
.woocommerce-tabs .panel { max-width: var(--w-texto); margin: 0 auto; }
.woocommerce-tabs .panel > h2:first-child { display: none; }
.woocommerce-tabs .panel h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.woocommerce-tabs .panel h2:first-of-type { margin-top: 0; }

.producto-envoltorio { padding-bottom: 0; }

/* --- ficha de producto sobre el marcado nativo de Woo --------------------- */

/*
 * Woo pinta `.woocommerce-product-gallery` y `.summary` como hermanos dentro de
 * `div.product`. Antes esto era una rejilla escrita en una plantilla copiada;
 * ahora es CSS sobre las clases que Woo mantiene.
 */
.single-product div.product {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: start;
	padding: 2rem 0 3.5rem;
}
/*
 * La galería NO va pegada. Se quitó, no se ajustó.
 *
 * En teoría un `sticky` dentro de una rejilla se detiene al acabar su fila, y la
 * fila 1 es galería + resumen: las pestañas van en la fila 2 a ancho completo.
 * Medido en Chrome no se detiene — a 1700 px de scroll la galería seguía en
 * `top=100` pisando la descripción, que es exactamente el fallo reportado.
 *
 * Se podría perseguir con un contenedor intermedio, pero eso pide tocar el
 * marcado de WooCommerce, que aquí se enlaza solo por ganchos. Y una foto pegada
 * no aporta nada a quien está leyendo especificaciones: la decisión ya se tomó
 * arriba, con la foto delante. Sin `sticky` no hay nada que se pueda descuadrar.
 */
.single-product div.product > .summary { margin: 0; }

/* Lo que va a ancho completo se saca de la rejilla. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .seccion,
.single-product div.product > .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.single-product .product_title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .6rem 0 .8rem; }
.single-product div.product p.price,
.single-product div.product span.price {
	font-size: 2rem; font-weight: 600; color: var(--coral); display: block; margin: 0 0 .3rem;
}
.single-product .woocommerce-product-details__short-description {
	font-size: 1rem; color: var(--ink-soft); margin-bottom: 1.6rem;
}

/*
 * La galería NO puede empujar su columna. Dos candados, y hacen falta los dos.
 *
 * El fallo, reproducido: FlexSlider mide al iniciar y escribe anchos EN LÍNEA
 * (`.flex-viewport`, cada `__image`). Al redimensionar la ventana —o al hacer
 * zoom, que es lo mismo para el navegador— no recalcula. Cargando a 1400 px y
 * estrechando a 700 sin recargar, la galería seguía midiendo 844 y la página
 * pasaba a 872 de ancho: **barra horizontal y descripción empujada**. Cargando
 * en frío a cualquier ancho no pasa, que es justo por lo que no se vio antes.
 *
 *  · `min-width: 0` en los hijos de la rejilla: un elemento de grid tiene
 *    `min-width: auto`, así que un hijo ancho ESTIRA su columna en vez de
 *    recortarse. Es la causa de que la columna creciera.
 *  · `max-width: 100%` en la galería y su visor: sin esto, el ancho en línea de
 *    FlexSlider sigue mandando dentro de la columna ya acotada.
 */
.single-product div.product > * { min-width: 0; }
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport { max-width: 100%; }

.woocommerce-product-gallery { background: var(--gris); border-radius: var(--r-g); }
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
	width: 100%; aspect-ratio: 1; object-fit: contain; padding: 6%; border-radius: var(--r-g);
}
/*
 * UNA sola fila que se desplaza, no una rejilla que se parte.
 *
 * Estuvo en `repeat(6, 1fr)` —escrito cuando había seis fotos— y luego en
 * `auto-fill`, que reparte pero **apila**: con ocho miniaturas salían dos filas y
 * con diez, tres. La casa lo pidió en fila única el 2026-08-17.
 *
 * El desplazamiento es nativo con anclaje, así que funciona con el dedo y con el
 * teclado; las flechas las añade el guion y solo aparecen cuando de verdad hay
 * miniaturas fuera de la vista —con cuatro fotos no sobra media pantalla de
 * botones—.
 */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex; gap: .55rem;
	overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none; padding: 0 .8rem .8rem; margin: 0;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 clamp(58px, 17%, 78px); scroll-snap-align: start;
}

/* Envoltorio que el guion pone alrededor de la tira para colgar las flechas. */
.tira-miniaturas { position: relative; }
.tira-miniaturas__flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center;
	width: 30px; height: 30px; padding: 0; z-index: 2;
	background: rgba(255,255,255,.95); color: var(--ink);
	border: 1px solid var(--line); border-radius: 999px;
	box-shadow: var(--sombra); font-size: 1rem; line-height: 1; cursor: pointer;
}
.tira-miniaturas__flecha:hover { color: var(--coral); border-color: var(--coral); }
.tira-miniaturas__flecha--izq { left: .2rem; }
.tira-miniaturas__flecha--der { right: .2rem; }

@media (max-width: 1040px) {
	.single-product div.product { grid-template-columns: 1fr; }
	.single-product div.product > .woocommerce-product-gallery { position: static; }
}

/* --- marca con el símbolo oficial ---------------------------------------- */

/*
 * El símbolo era un círculo dibujado con `border-radius` y un pseudoelemento:
 * se parecía, pero no era el logotipo. Ahora es el archivo del fabricante.
 */
img.marca__simbolo {
	width: 36px; height: auto; flex: 0 0 36px;
	background: none; border-radius: 0;
}
img.marca__simbolo::after { content: none; }
.marca__nombre { font-size: 1.6rem; font-weight: 500; letter-spacing: -.03em; }

/* --- portada hecha de bloques -------------------------------------------- */

/*
 * Las secciones de la portada son patrones con `alignfull`. En un tema clásico
 * eso no hace nada por sí solo: hay que darle el ancho completo aquí y dejar
 * que cada sección ponga su propio `.env` por dentro.
 */
.portada-bloques > .alignfull { width: 100%; max-width: none; }
.portada-bloques > .alignwide { max-width: var(--w); margin-inline: auto; }

/* Los patrones usan la rejilla del núcleo; se le da el contenedor del tema. */
.portada-bloques .seccion > .wp-block-group__inner-container,
.portada-bloques .seccion > .encabezado-seccion,
.portada-bloques .seccion > .wp-block-columns,
.portada-bloques .seccion > .wp-block-shortcode,
.portada-bloques .testimonio > * {
	width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: 28px;
}
.portada-bloques .seccion > .encabezado-seccion { max-width: 720px; }
.portada-bloques .testimonio > .testimonio__texto { max-width: 780px; }

/* El héroe es un bloque de portada: se le devuelve el aire y el degradado. */
.heroe-bloque { position: relative; }
.heroe-bloque .wp-block-cover__inner-container { position: relative; z-index: 2; }
.heroe-bloque__texto {
	max-width: var(--w); margin-inline: auto; padding-inline: 28px;
	color: var(--ink);
}
.heroe-bloque__texto > * { max-width: 560px; }
.heroe-bloque h1 { color: var(--ink); }
.heroe-bloque h1 em { font-style: normal; color: var(--coral); }
.heroe-bloque .wp-block-buttons { gap: .8rem; }

/* --- boletín -------------------------------------------------------------- */

.boletin {
	display: grid; grid-template-columns: 1.1fr .9fr;
	gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.boletin__texto h2 { color: var(--coral); font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.boletin__texto p { color: var(--ink-soft); margin: 0; }
.boletin__texto .antetitulo { margin-bottom: .6rem; }
.boletin__formulario { display: flex; flex-wrap: wrap; gap: .7rem; }
.boletin__formulario input[type="email"] { flex: 1 1 240px; width: auto; }
.boletin__formulario .boton { flex: 0 0 auto; }
.boletin__legal { flex: 1 1 100%; font-size: .78rem; color: var(--ink-faint); margin: .2rem 0 0; }
.boletin__gracias {
	background: var(--rosa-claro); border-left: 3px solid var(--coral);
	padding: 1.1rem 1.3rem; border-radius: 0 var(--r) var(--r) 0; margin: 0; font-size: .95rem;
}

@media (max-width: 860px) { .boletin { grid-template-columns: 1fr; } }

/*
 * El degradado del héroe va en horizontal, que es lo que funciona en escritorio
 * con el producto a la derecha. En móvil la foto queda detrás del texto y la
 * entradilla deja de leerse: hay que girarlo a vertical.
 *
 * El `!important` es necesario y no es pereza: el degradado lo pinta el bloque
 * de portada como estilo en línea, y un estilo en línea no se pisa de otra
 * forma desde una hoja.
 */
@media (max-width: 860px) {
	.heroe-bloque .wp-block-cover__gradient-background {
		background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.55) 100%) !important;
	}
	.heroe-bloque { min-height: 480px !important; }
}

/* Aquí estaban las barras proporcionales de la tabla de vacío. Se fueron con la
   tabla el 2026-08-16 y no se dejan «por si vuelve»: CSS de un componente que ya
   no existe es lo que hace creer, tres sesiones después, que el componente sigue
   ahí. El estilo del bloque que la sustituye está arriba, junto a .tabla-specs. */

/* --- tallas a escala ------------------------------------------------------ */

/*
 * Aros concéntricos de verdad: todos centrados en el mismo punto, con el
 * diámetro proporcional a los milímetros reales. La primera versión los anclaba
 * arriba, así que caían en cascada y las cuatro etiquetas se amontonaban.
 *
 * La etiqueta va al borde DERECHO de cada aro, no arriba: los cuatro diámetros
 * están tan cerca entre sí (17 a 25 mm) que en vertical se pisan, y en
 * horizontal se separan justo por la diferencia que el dibujo quiere enseñar.
 */
.tallas {
	display: grid; grid-template-columns: 280px 1fr;
	gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
	margin: 2.5rem 0; padding: clamp(1.5rem, 3vw, 2.2rem);
	background: var(--gris); border-radius: var(--r-g);
}
.tallas__dibujo { position: relative; width: 240px; height: 240px; margin: 0 auto; }
/* Solo trazo: cuatro rellenos superpuestos oscurecían el centro sin decir nada. */
.tallas__aro {
	position: absolute; top: 50%; left: 50%;
	width: var(--d); aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border: 2px solid var(--coral);
	border-radius: 50%;
}
/* El más pequeño se rellena: es la boca por la que de verdad entra el pezón. */
.tallas__aro:last-child { background: rgba(234, 75, 69, .1); }
.tallas__leyenda { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.tallas__leyenda li { margin: 0; font-size: .92rem; }
.tallas__leyenda b { color: var(--coral-oscuro); }
.tallas__leyenda span { display: block; font-size: .82rem; color: var(--ink-faint); }
.tallas__nota { font-size: .85rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 700px) { .tallas { grid-template-columns: 1fr; } }


/* --- montaje: dos piezas contra seis -------------------------------------- */

/*
 * Las dos columnas comparten altura de fila, así que las dos fichas de imani
 * quedan al lado de las seis del montaje habitual y el hueco vacío ES el
 * argumento: no hace falta ni un icono para verlo.
 *
 * La columna nuestra va en coral y la otra en gris. No es decoración: si las dos
 * se pintaran igual, la comparación quedaría en «mira estos dos montajes» en vez
 * de «este es el nuestro».
 */
.piezas {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 3vw, 2rem);
	margin: 2.5rem 0;
}
.piezas__col {
	padding: clamp(1.2rem, 2.5vw, 1.8rem);
	background: var(--gris); border-radius: var(--r-g);
	border: 2px solid transparent;
}
.piezas__col.es-nuestro { border-color: var(--coral); background: rgba(234, 75, 69, .05); }
.piezas__quien { margin: 0 0 .3rem; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.piezas__cuenta { margin: 0 0 1rem; font-size: .95rem; color: var(--ink-soft); }
.piezas__cuenta b { font-size: 2.4rem; line-height: 1; margin-right: .3rem; color: var(--ink); }
.piezas__col.es-nuestro .piezas__cuenta b { color: var(--coral); }

/* Cada pieza, una ficha. Se cuentan de un vistazo porque son objetos, no comas. */
.piezas__lista { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.piezas__lista li {
	margin: 0; padding: .45rem .75rem;
	font-size: .85rem; background: #fff;
	border: 1px solid var(--line); border-radius: var(--r);
}
.piezas__col.es-nuestro .piezas__lista li { border-color: var(--coral); color: var(--coral-oscuro); }
.piezas__nota { margin: 0; font-size: .85rem; color: var(--ink-soft); }
.piezas figcaption { grid-column: 1 / -1; font-size: .85rem; color: var(--ink-faint); }

@media (max-width: 700px) { .piezas { grid-template-columns: 1fr; } }


/* --- autonomía en sesiones ------------------------------------------------ */

/*
 * Seis tramos iguales, no una barra que se vacía: lo que se cuenta son sesiones
 * enteras, y media sesión no sirve de nada a quien está decidiendo si le llega
 * la batería hasta la tarde.
 */
.autonomia {
	margin: 2.5rem 0; padding: clamp(1.5rem, 3vw, 2.2rem);
	background: var(--gris); border-radius: var(--r-g);
}
.autonomia__barra { display: flex; gap: .35rem; margin-bottom: 1.2rem; }
.autonomia__sesion {
	flex: 1; display: grid; place-items: center;
	height: 3.2rem; border-radius: var(--r);
	background: var(--coral); color: #fff;
	font-size: .95rem; font-weight: 600;
}
/* El tramo abierto: la cifra publicada es «6 o más», y la barra no debe cerrarla. */
.autonomia__mas {
	flex: 0 0 2.6rem; display: grid; place-items: center;
	height: 3.2rem; border-radius: var(--r);
	border: 1.5px dashed var(--coral); color: var(--coral);
	font-size: 1.1rem; font-weight: 600;
}
.autonomia figcaption p { margin: 0 0 .6rem; }
.autonomia__nota { font-size: .85rem; color: var(--ink-soft); }


/* --- carrito lateral ------------------------------------------------------ */

/*
 * Sustituye al aviso «se ha añadido a tu carrito», que ocupaba una franja entera
 * encima del producto y empujaba la ficha hacia abajo.
 *
 * Sin JavaScript el panel llega ya abierto desde el servidor —WooCommerce
 * redirige con `?added-to-cart=`— y se cierra con un enlace que quita ese
 * parámetro. Con JavaScript, la misma clase la pone y la quita el guion. Por eso
 * todo cuelga de `.esta-abierto` y no de `:target` ni de `:checked`: una sola
 * puerta para los dos caminos.
 */
/*
 * `overflow: hidden` no es decorativo: con el panel cerrado, su transformación
 * lo deja en 900..1320 —fuera de la pantalla a propósito—. Hoy no arrastra barra
 * horizontal porque el contenedor es `fixed` y los fijos no crean desplazamiento
 * del documento; el día que alguien lo cambie a `absolute` para cualquier cosa,
 * sí lo haría. Se acota aquí y deja de depender de eso.
 */
.carrito-lateral {
	position: fixed; inset: 0; z-index: 200;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
}
.carrito-lateral.esta-abierto { visibility: visible; pointer-events: auto; }

/*
 * El fondo va DEBAJO del panel, y hay que decirlo.
 *
 * Se pinta después en el marcado —tiene que estarlo, o el lector de pantalla lo
 * anuncia antes que el carrito— y sin `z-index` eso lo dejaba encima: el panel
 * se veía perfecto y **no se podía pulsar nada**, ni cerrar, ni «Finalizar
 * compra», ni quitar una línea. Una captura no lo delata; solo lo vio la prueba
 * que intenta pulsar de verdad.
 */
.carrito-lateral__fondo {
	position: absolute; inset: 0; z-index: 0;
	background: rgba(44, 42, 43, .45);
	opacity: 0; transition: opacity .25s ease;
}
.carrito-lateral.esta-abierto .carrito-lateral__fondo { opacity: 1; }

.carrito-lateral__panel {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 1;
	width: min(420px, 100vw);
	display: flex; flex-direction: column;
	background: #fff;
	box-shadow: var(--sombra-alta);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.carrito-lateral.esta-abierto .carrito-lateral__panel { transform: none; }

/* Quien haya pedido menos movimiento no tiene por qué ver el deslizamiento. */
@media (prefers-reduced-motion: reduce) {
	.carrito-lateral__panel, .carrito-lateral__fondo { transition: none; }
}

.carrito-lateral__cabeza {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line);
}
.carrito-lateral__cabeza h2 {
	margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: .6rem;
}
.carrito-lateral__cuenta {
	display: grid; place-items: center;
	min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem;
	background: var(--coral); color: #fff;
	border-radius: 999px; font-size: .78rem; font-weight: 600;
}
.carrito-lateral__cerrar {
	font-size: 1.8rem; line-height: 1; text-decoration: none;
	color: var(--ink-faint); padding: 0 .3rem;
}
.carrito-lateral__cerrar:hover { color: var(--ink); }

/* La lista es lo único que se desplaza: cabeza y pie quedan siempre a la vista. */
.carrito-lateral__lineas {
	flex: 1; overflow-y: auto;
	list-style: none; margin: 0; padding: .6rem 1.6rem;
}
.carrito-lateral__linea {
	display: grid; grid-template-columns: 64px 1fr auto;
	gap: .9rem; align-items: start;
	padding: 1.1rem 0; margin: 0;
	border-bottom: 1px solid var(--line);
}
.carrito-lateral__linea:last-child { border-bottom: 0; }
.carrito-lateral__foto { display: block; background: var(--gris); border-radius: var(--r); overflow: hidden; }
.carrito-lateral__foto img { width: 100%; height: auto; display: block; }
.carrito-lateral__nombre {
	display: block; font-size: .92rem; font-weight: 500; line-height: 1.35;
	color: var(--ink); text-decoration: none;
}
.carrito-lateral__nombre:hover { color: var(--coral); }
.carrito-lateral__variacion { display: block; font-size: .8rem; color: var(--ink-faint); }
.carrito-lateral__variacion p { margin: 0; }
.carrito-lateral__cantidad { display: block; margin-top: .35rem; font-size: .85rem; color: var(--ink-soft); }
.carrito-lateral__importe { text-align: right; font-size: .92rem; font-weight: 500; white-space: nowrap; }
.carrito-lateral__quitar {
	display: block; margin-top: .4rem;
	font-size: .78rem; font-weight: 400; color: var(--ink-faint); text-decoration: underline;
}
.carrito-lateral__quitar:hover { color: var(--coral); }

.carrito-lateral__pie { padding: 1.3rem 1.6rem 1.6rem; border-top: 1px solid var(--line); }
.carrito-lateral__total {
	display: flex; justify-content: space-between; align-items: baseline;
	margin: 0 0 .3rem; font-size: 1rem;
}
.carrito-lateral__total strong { font-size: 1.35rem; color: var(--coral); }
.carrito-lateral__nota { margin: 0 0 1.1rem; font-size: .8rem; color: var(--ink-faint); }
.carrito-lateral__pie .boton { width: 100%; margin-bottom: .6rem; }
.carrito-lateral__pie .boton:last-child { margin-bottom: 0; }

.carrito-lateral__vacio { flex: 1; display: grid; place-content: center; gap: 1rem; text-align: center; padding: 2rem; }
.carrito-lateral__vacio p { margin: 0; color: var(--ink-soft); }

/* Con el panel abierto, el fondo no se desplaza detrás. */
body.sin-scroll { overflow: hidden; }


/* --- megamenú de la tienda ------------------------------------------------ */

/*
 * Panel COMPACTO: miniatura cuadrada a la izquierda, nombre y línea a la derecha.
 *
 * La primera versión copiaba la estructura del desplegable del fabricante —foto
 * grande arriba, nombre debajo— y con tres categorías ocupaba media pantalla:
 * cada tarjeta medía unos 400×300 y el panel empujaba la página entera hacia
 * abajo al pasar el ratón. Un menú es para elegir rápido, no una portada.
 *
 * Y las tres fotos NO se veían del mismo tamaño aunque la caja lo fuera: con
 * `object-fit: contain`, una foto cuadrada llena la caja y una apaisada deja
 * franjas grises a los lados. Se veía descuadrado sin que nada estuviera mal
 * medido. Ahora la caja es cuadrada y fija —80 px— y el recorte es `cover`: se
 * pierde un poco de borde y a cambio las tres pesan lo mismo en la fila, que es
 * lo que ordena la vista.
 *
 * Se abre con `:hover` Y con `:focus-within` — sin lo segundo, quien navega con
 * el tabulador no llega nunca a las tres categorías. Es la misma razón por la
 * que no lleva JavaScript: aquí no hace falta ninguno.
 */
.nav-principal .tiene-megamenu { position: static; }

.megamenu {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: var(--sombra);
	padding: 1.2rem 0 .9rem;
	opacity: 0; visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-principal .tiene-megamenu:hover > .megamenu,
.nav-principal .tiene-megamenu:focus-within > .megamenu {
	opacity: 1; visibility: visible; transform: none;
}
@media (prefers-reduced-motion: reduce) { .megamenu { transition: none; } }

.megamenu__grupos {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: .6rem;
	list-style: none; margin: 0; padding: 0;
}
.megamenu__grupo { margin: 0; }

/*
 * Fila: miniatura fija + texto. La columna de 80px iguala las tres.
 *
 * El enlace tiene TRES hijos —foto, nombre y pie—, así que con dos columnas el
 * pie caía a una segunda fila debajo de la foto y el texto se estrujaba en una
 * columna de 80px. Se resuelve declarando las dos filas y haciendo que la foto
 * ocupe las dos, en vez de envolver nombre y pie en otro `<span>`: menos
 * marcado, y la relación queda dicha donde se ve.
 */
.megamenu__grupo > a {
	display: grid;
	grid-template-columns: 72px 1fr;
	grid-template-rows: auto auto;
	column-gap: 1rem;
	align-content: center;
	padding: .7rem .9rem;
	border-radius: var(--r);
	text-decoration: none; color: var(--ink);
	transition: background .18s ease;
}
.megamenu__grupo > a:hover { background: var(--rosa-claro); }

.megamenu__foto {
	grid-row: 1 / span 2; align-self: center;
	display: block; width: 72px; height: 72px;
	background: var(--gris); border-radius: 14px; overflow: hidden;
}
.megamenu__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.megamenu__nombre {
	display: block;
	font-size: .98rem; font-weight: 500; line-height: 1.3;
	transition: color .18s ease;
}
.megamenu__grupo > a:hover .megamenu__nombre { color: var(--coral); }
.megamenu__pie {
	display: block; margin-top: .2rem;
	font-size: .82rem; line-height: 1.4; color: var(--ink-faint);
}
.megamenu__todo {
	margin: .8rem 0 0; padding-top: .8rem;
	border-top: 1px solid var(--line); text-align: center;
}
.megamenu__todo .enlace-flecha { font-size: .85rem; color: var(--ink-soft); }
.megamenu__todo .enlace-flecha:hover { color: var(--coral); }
@media (max-width: 1080px) {
	.megamenu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border-top: 0; padding: .4rem 0 .8rem;
	}
	.megamenu__env { padding: 0; }
	.megamenu__grupos { grid-template-columns: 1fr; gap: .1rem; }
	.megamenu__foto { display: none; }
	.megamenu__nombre { text-align: left; border-bottom: 0; padding-bottom: 0; font-size: .9rem; font-weight: 400; }
	.megamenu__pie { display: none; }
	.megamenu__todo { text-align: left; margin-top: .6rem; }
}


/* --- tienda agrupada por categoría ---------------------------------------- */

.tienda-grupo + .tienda-grupo { margin-top: clamp(2.6rem, 5vw, 4rem); }
.tienda-grupo__titulo {
	margin: 0 0 1.4rem;
	padding-bottom: .7rem;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	border-bottom: 1px solid var(--line);
}


/* --- presentación del producto (bajo el héroe) ---------------------------- */

/*
 * Foto arriba, titular, y las cuatro razones debajo en dos columnas.
 *
 * Sustituye a la «órbita» —foto al centro y dos bloques a cada lado—, que se
 * veía bien y leía mal: en una órbita no hay orden de lectura, así que las
 * cuatro razones competían y la primera no destacaba. Esta disposición sí lo
 * tiene: se ve el producto, se lee de qué va, y luego por qué.
 */
.presentacion { text-align: center; }
.presentacion .encabezado-seccion { margin-bottom: clamp(2rem, 4vw, 3rem); }

/*
 * La órbita: el extractor en el centro y las cuatro razones alrededor.
 *
 * Tres columnas —razón, foto, razón— y dos filas. La foto ocupa la columna del
 * medio entera con `grid-row: 1 / 3`, así que las cuatro razones caen en las
 * esquinas y la vista aterriza en el producto.
 *
 * El orden del DOM es 1, 2, foto, 3, 4 —el orden de lectura— y la rejilla los
 * recoloca con `grid-column`. En cuanto la rejilla se deshace (móvil), vuelve a
 * mandar el DOM y sale una secuencia con la foto en medio, que es lo que
 * necesitan el lector de pantalla y una pantalla estrecha.
 *
 * `align-items: start` porque los títulos de una fila tienen que empezar a la
 * misma altura aunque uno ocupe dos líneas; centrados verticalmente quedaban a
 * saltos.
 */
.orbita {
	display: grid;
	grid-template-columns: 1fr minmax(240px, 340px) 1fr;
	gap: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
	max-width: 1100px; margin: 0 auto;
	align-items: start;
}
.orbita__foto { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.orbita__foto img { width: 100%; height: auto; }
.orbita__razon--1 { grid-column: 1; grid-row: 1; text-align: right; }
.orbita__razon--2 { grid-column: 3; grid-row: 1; text-align: left; }
.orbita__razon--3 { grid-column: 1; grid-row: 2; text-align: right; }
.orbita__razon--4 { grid-column: 3; grid-row: 2; text-align: left; }

/*
 * Gutenberg le mete `margin-block-start: 24px` a todos los hijos menos al
 * primero de un grupo `constrained`. En una columna es el espaciado normal; en
 * una rejilla descuadra solo la primera fila. Se vio midiendo las cajas —1283
 * contra 1307—, no mirando: en la captura parecía que un título «caía un poco».
 */
.orbita > * { margin-block-start: 0; }
.orbita__razon h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.orbita__razon p { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }

/*
 * Por debajo de 860 px la órbita deja de serlo: con tres columnas, las laterales
 * bajan de 200 px y las frases se parten en cinco líneas de dos palabras.
 * Columna única, foto en medio por orden de DOM, y todo centrado.
 */
@media (max-width: 860px) {
	.orbita { grid-template-columns: 1fr; gap: 2rem; max-width: 520px; }
	.orbita__foto,
	.orbita__razon--1, .orbita__razon--2, .orbita__razon--3, .orbita__razon--4 {
		grid-column: 1; grid-row: auto; text-align: center;
	}
	.orbita__foto { max-width: 260px; margin: 0 auto; }
}


/* --- carrusel de extractores ---------------------------------------------- */

/*
 * UNA tarjeta a la vez, centrada, y las flechas en los márgenes.
 *
 * La primera versión dejaba asomar la siguiente por el borde para que se notara
 * que hay más de una. Medido a los anchos reales, no funcionaba: a 730 px la
 * segunda tarjeta no «asomaba», se cortaba a media palabra —«imani i2 Plus
 * doble…»— y las flechas quedaban medio fuera del contenedor. Por debajo de 640
 * px, además, se ocultaban del todo y quedaba el recorte sin ningún control.
 *
 * Ahora la pista reserva un margen fijo a cada lado para las flechas y la
 * diapositiva ocupa el resto entero: se ve una tarjeta completa, centrada, y las
 * flechas en su hueco sin pisarla. Es la disposición de la sección equivalente
 * del fabricante.
 *
 * El desplazamiento sigue siendo NATIVO (`overflow-x` + `scroll-snap`): funciona
 * con el dedo, con la rueda y con el teclado sin una línea de guion. Las flechas
 * son mejora encima y ahora se ven **también en móvil**, donde antes se
 * escondían: en una pantalla estrecha es donde más falta hacen.
 */
/*
 * `overflow-x: clip` en el contenedor, además del `auto` de la pista.
 *
 * La pista recorta y desplaza lo suyo, pero el contenedor seguía declarando 664
 * px de contenido en una ventana de 390 y arrastraba la página entera a barra
 * horizontal. Se recorta también aquí: es un carrusel, nada tiene que asomar por
 * los lados.
 *
 * `clip` y no `hidden`: `hidden` crearía un contexto de desplazamiento y
 * rompería el `position: sticky` de la galería en las fichas, además de dejar el
 * contenedor enfocable por teclado sin serlo. `clip` recorta y ya.
 */
.carrusel { position: relative; overflow-x: clip; }

.carrusel__pista {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* El margen es el hueco de las flechas. `scroll-padding` tiene que valer lo
	   mismo o el anclaje deja la tarjeta descentrada al pasar. */
	/* El margen va en la DIAPOSITIVA, no en la pista.
	   Con el relleno en la pista, la diapositiva siguiente se veía dentro de ese
	   margen: un canto vertical de la otra foto pegado al borde. Puesto en la
	   diapositiva, cada una ocupa el 100 % de la pista —la vecina queda entera
	   fuera de pantalla— y el hueco para las flechas lo deja su propio relleno. */
	--hueco: clamp(2.6rem, 6vw, 4rem);
	padding: 0 0 .5rem;
	scrollbar-width: none;
	scroll-behavior: smooth;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista > * {
	flex: 0 0 100%;
	scroll-snap-align: center;
	padding: 0 var(--hueco);
}
@media (prefers-reduced-motion: reduce) { .carrusel__pista { scroll-behavior: auto; } }

/* Con un solo extractor no hay nada que pasar. */
.carrusel--unico .carrusel__pista { --hueco: 0px; justify-content: center; }
.carrusel--unico .carrusel__pista > * { flex-basis: min(520px, 100%); }

.carrusel__flecha {
	position: absolute; top: 38%; transform: translateY(-50%);
	display: grid; place-items: center;
	width: clamp(36px, 8vw, 46px); aspect-ratio: 1; padding: 0;
	background: #fff; color: var(--ink);
	border: 1px solid var(--line); border-radius: 999px;
	box-shadow: var(--sombra);
	font-size: 1.4rem; line-height: 1; cursor: pointer;
	transition: color .18s ease, border-color .18s ease;
	z-index: 2;
}
.carrusel__flecha:hover { color: var(--coral); border-color: var(--coral); }
.carrusel__flecha--izq { left: 0; }
.carrusel__flecha--der { right: 0; }

/* Sin JavaScript no hay quién las escuche: el guion las revela al engancharse. */
.carrusel__flecha { display: none; }
.carrusel.tiene-guion .carrusel__flecha { display: grid; }

/* --- héroe con fondo de vídeo --------------------------------------------- */

/*
 * El vídeo cubre el bloque igual que hacía la foto, y el degradado de la
 * izquierda sigue siendo lo que hace legible el titular encima.
 *
 * `object-fit: cover` va aquí y no en el atributo del bloque: WordPress lo
 * resuelve con JavaScript para navegadores viejos, y sin la regla el vídeo sale
 * deformado el instante que tarda ese guion en cargar.
 */
.heroe-bloque--video .wp-block-cover__video-background {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: 72% 50%;
	z-index: 0;
}
.heroe-bloque--video .wp-block-cover__background { z-index: 1; }
.heroe-bloque--video .wp-block-cover__inner-container { position: relative; z-index: 2; }

/*
 * Quien pidió menos movimiento no ve un vídeo de 90 segundos detrás del texto.
 * Se para en el primer fotograma, que es el cartel: la escena sigue ahí y el
 * movimiento no.
 */
@media (prefers-reduced-motion: reduce) {
	.heroe-bloque--video .wp-block-cover__video-background { display: none; }
	.heroe-bloque--video { background-size: cover; background-position: 72% 50%; }
}


/* --- precio de lista y precio con descuento -------------------------------- */

/*
 * `<del>` e `<ins>` en vez de un tachado por CSS: el marcado ya dice qué es cada
 * uno, así que un lector de pantalla anuncia «suprimido» e «insertado» en vez de
 * leer dos importes seguidos sin decir cuál se cobra.
 */
.precio-lista {
	color: var(--ink-faint); font-weight: 400;
	text-decoration: line-through; margin-right: .4rem;
}
.precio-oferta { color: var(--coral); text-decoration: none; font-weight: 600; }
.heroe__precio { font-size: .9rem; color: var(--ink-soft); margin: .9rem 0 0; }


/* --- comparativa: que se note que sigue a la derecha ----------------------- */

/*
 * La tabla compara dos columnas y en pantalla estrecha la segunda queda fuera.
 * Se podía desplazar, pero **nada lo decía**: se veía una tabla cortada por el
 * borde y ningún control. Dos añadidos, los dos sin JavaScript:
 *
 *  · una sombra en el borde derecho que aparece solo mientras queda tabla por
 *    ver —es un degradado fijado al contenedor con `background-attachment:
 *    local`, el truco clásico de sombras de desplazamiento—;
 *  · una línea debajo que lo dice con palabras, porque una sombra la interpreta
 *    quien ya sabe que las tablas se desplazan.
 */
.comparativa {
	overflow-x: auto;
	background:
		linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 40px 100% no-repeat local,
		linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 40px 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(44,42,43,.14), rgba(0,0,0,0)) left center / 14px 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(44,42,43,.14), rgba(0,0,0,0)) right center / 14px 100% no-repeat scroll,
		#fff;
}
.comparativa__pista {
	display: block; margin: .7rem 0 0;
	font-size: .82rem; color: var(--ink-faint); text-align: center;
}
@media (min-width: 861px) { .comparativa__pista { display: none; } }

.video-marca__accion { margin-top: clamp(1.4rem, 3vw, 2.2rem); }


/* --- respaldo: tres hechos, no un párrafo --------------------------------- */

.respaldo { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 1rem; }
.respaldo li {
	margin: 0; padding-left: 1.5rem; position: relative;
}
.respaldo li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
}
.respaldo b { display: block; font-size: .98rem; font-weight: 600; line-height: 1.35; }
.respaldo span { display: block; margin-top: .15rem; font-size: .85rem; color: var(--ink-faint); line-height: 1.5; }


/* --- cabecera de vídeo en la ficha del extractor -------------------------- */

/*
 * Franja a sangre, corta. No es un héroe: es una entrada al producto, así que se
 * queda en una altura que no empuja la ficha fuera de pantalla — lo que se tiene
 * que ver al llegar es el precio y el botón, no un vídeo a pantalla completa.
 */
.ficha-cabecera {
	width: 100%; overflow: hidden; background: var(--gris);
	height: clamp(180px, 26vw, 320px);
}
.ficha-cabecera video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .ficha-cabecera video { display: none; } }


/* --- control de sonido del héroe ------------------------------------------ */

/*
 * Oculto hasta que el guion lo engancha: sin JavaScript el vídeo se queda mudo y
 * un botón que no apaga ni enciende nada es peor que ninguno.
 *
 * Va abajo a la derecha, sobre la zona sin degradado, donde no pisa el titular.
 */
.heroe__sonido {
	position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
	z-index: 3; display: none;
	padding: .6rem 1.1rem;
	font-family: var(--fuente); font-size: .8rem; font-weight: 500;
	color: var(--ink); background: rgba(255,255,255,.9);
	border: 1px solid var(--line); border-radius: 999px;
	cursor: pointer; backdrop-filter: blur(4px);
	transition: color .18s ease, border-color .18s ease;
}
.heroe__sonido:hover { color: var(--coral); border-color: var(--coral); }
.heroe-bloque--video .heroe__sonido:not([hidden]) { display: block; }


/* --- ficha: acordeón en vez de pestañas ----------------------------------- */

/*
 * Sustituye a la tira horizontal de cinco pestañas, que con cinco títulos no
 * cabía: se partía en dos filas con su propia barra de desplazamiento y dejaba
 * una sola visible sin que se notara que había cuatro más.
 *
 * El abrir y cerrar es del navegador (`<details>`), así que no hay JavaScript
 * que pueda fallar y el buscador ve el contenido aunque esté plegado.
 */
.ficha-acordeon { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }

.ficha-acordeon__seccion { border-bottom: 1px solid var(--line); }
.ficha-acordeon__seccion:first-child { border-top: 1px solid var(--line); }

.ficha-acordeon__seccion > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem 0;
	font-size: clamp(1rem, 1.8vw, 1.15rem); font-weight: 600; color: var(--ink);
	cursor: pointer; list-style: none;
	transition: color .18s ease;
}
.ficha-acordeon__seccion > summary:hover { color: var(--coral); }
.ficha-acordeon__seccion[open] > summary { color: var(--coral); }

/* El marcador propio del navegador fuera, y un signo nuestro que gira al abrir. */
.ficha-acordeon__seccion > summary::-webkit-details-marker { display: none; }
.ficha-acordeon__seccion > summary::marker { content: ""; }
.ficha-acordeon__seccion > summary::after {
	content: "+";
	font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--coral);
	transition: transform .2s ease;
}
.ficha-acordeon__seccion[open] > summary::after { transform: rotate(45deg); }

.ficha-acordeon__cuerpo { padding: 0 0 1.6rem; }
.ficha-acordeon__cuerpo > *:first-child { margin-top: 0; }
.ficha-acordeon__cuerpo > *:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.ficha-acordeon__seccion > summary::after { transition: none; }
}


/* --- precio y botón de compra, en la misma fila ---------------------------- */

/*
 * Entre el importe y el botón había cuatro líneas —la nota de paridad y el resumen
 * del producto—, así que quien ya había decidido tenía que seguir leyendo para
 * encontrar dónde pulsar.
 *
 * La nota de paridad se queda debajo de los dos, ocupando la fila entera: es letra
 * pequeña que acompaña al precio, no algo que deba separarlo del botón.
 */
.precio-y-compra {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 1rem clamp(1rem, 3vw, 2rem);
	margin: .4rem 0 1.2rem;
}
.precio-y-compra .price,
.single-product div.product .precio-y-compra p.price { margin: 0; }
.precio-y-compra form.cart { margin: 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
/* `order` y no solo `flex-basis`: la nota se pinta ENTRE el precio y el
   formulario (prioridad 11 de 10 y 12), así que a ancho completo empujaba el
   botón a la fila siguiente y volvía a separarlos, que es lo que se venía a
   arreglar. Con `order` se dibuja la última sin cambiar el orden del marcado,
   que es el que lee un lector de pantalla. */
.precio-y-compra > .price { order: 1; }
.precio-y-compra > form.cart { order: 2; }
.precio-y-compra .nota-precio { order: 3; flex-basis: 100%; margin: 0; }

/* Con variaciones el formulario trae su selector: ahí ocupa la fila entera. */
.precio-y-compra form.cart.variations_form { flex-basis: 100%; display: block; }

@media (max-width: 560px) {
	.precio-y-compra { gap: .8rem; }
	.precio-y-compra form.cart { width: 100%; }
	.precio-y-compra form.cart .button { flex: 1; }
}


/* --- héroe: que el vídeo se VEA, no solo que esté ------------------------- */

/*
 * El vídeo es 16:9 y la caja del héroe mide 560 px de alto a ancho completo. A
 * 1280 px eso ya recorta un tercio por arriba y por abajo; a 712 px —el ancho
 * real desde el que se revisó— el recorte se come al sujeto y lo que queda en
 * pantalla es una pared. El vídeo estaba reproduciéndose todo el tiempo: lo que
 * no se veía era el CONTENIDO.
 *
 * Dos cambios:
 *
 *  · el encuadre pasa al centro. Estaba en 72 % porque la foto que había antes
 *    tenía el producto a la derecha; el metraje no, y esa herencia era la mitad
 *    del problema.
 *  · por debajo de 900 px el héroe deja de ser texto SOBRE vídeo y pasa a vídeo
 *    ARRIBA y texto debajo. En una pantalla estrecha no caben las dos cosas sin
 *    que una estorbe a la otra: o el texto tapa el vídeo, o el vídeo no deja leer
 *    el texto. Separados, el vídeo se ve entero en su proporción y el texto se
 *    lee sobre blanco.
 */
.heroe-bloque--video .wp-block-cover__video-background { object-position: 50% 50%; }

/*
 * Los selectores llevan `.wp-block-cover` además de la clase propia.
 *
 * Sin eso empatan en especificidad con los del bloque de WordPress —dos clases
 * cada uno— y gana el que se cargue después, que es el del núcleo. Efecto
 * medido: la proporción 16:9 sí se aplicaba y `position: static` no, así que el
 * vídeo seguía en absoluto con el texto encima y sin degradado detrás. Ilegible.
 */
@media (max-width: 900px) {
	.heroe-bloque--video.wp-block-cover {
		display: block; min-height: 0;
		background: #fff;
	}
	/* El degradado sobra cuando ya no hay texto encima del vídeo. */
	.heroe-bloque--video.wp-block-cover > .wp-block-cover__background { display: none; }

	.heroe-bloque--video.wp-block-cover .wp-block-cover__video-background {
		position: static; width: 100%; height: auto;
		aspect-ratio: 16 / 9; object-fit: cover;
	}
	.heroe-bloque--video.wp-block-cover .wp-block-cover__inner-container {
		padding: clamp(1.6rem, 5vw, 2.4rem) 28px clamp(2rem, 6vw, 3rem);
	}
	.heroe-bloque--video .heroe-bloque__texto { color: var(--ink); }
	.heroe__sonido { top: auto; bottom: auto; right: 1rem;
		margin-top: -3.4rem; position: relative; float: right; }
}


/* --- rótulos del vídeo del héroe ------------------------------------------ */

/*
 * Texto SIN fondo, en dos colores, y moviéndose con el plano.
 *
 * Tres versiones ha tenido esto y las dos primeras eran mías: una caja blanca con
 * texto gris, y luego un velo oscuro degradado. La casa las rechazó las dos por
 * la misma razón —«no quiero que el texto tenga algún fondo»— y tiene razón mirando
 * la campaña del fabricante: ellos escriben encima del plano y ya.
 *
 * Sin fondo, la legibilidad la sostienen tres cosas y ninguna es una caja:
 *
 *   1. **la zona**: cada rótulo se coloca donde el plano está más plano y menos
 *      iluminado, medido fotograma a fotograma (ver `contenido/video.php`);
 *   2. **la tinta**: blanca por defecto, y `--oscura` donde no había ninguna zona
 *      oscura en todo el cuadro;
 *   3. **la sombra**: suave y amplia, que separa la letra del fondo sin dibujar
 *      un rectángulo.
 *
 * La caja ocupa el vídeo entero y cada rótulo se ancla a su esquina. Así el texto
 * «acompaña» al plano en vez de aparecer siempre en el mismo sitio.
 */
/*
 * En pantalla ancha la envoltura del vídeo desaparece del layout: el vídeo y los
 * rótulos se colocan contra el bloque de portada como si no existiera. Por
 * debajo de 900 px vuelve a existir, y ahí es donde hace su trabajo.
 */
.heroe__pelicula { display: contents; }

.rotulos-video {
	position: absolute; z-index: 3;
	inset: 0;
	pointer-events: none;
}
.rotulos-video__lista { margin: 0; padding: 0; list-style: none; height: 100%; }

.rotulos-video__rotulo {
	position: absolute;
	margin: 0;
	max-width: min(46ch, 62%);
	font-family: var(--fuente);
	font-size: clamp(1.15rem, 2.3vw, 2.05rem);
	font-weight: 700; line-height: 1.14;
	letter-spacing: -.015em;
	color: #fff;
	text-shadow: 0 2px 22px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35);
}
/* Lo que el fabricante pone en color: la frase en blanco y la promesa en coral. */
.rotulos-video__rotulo b {
	display: block; font-weight: 700;
	color: #ff6b60;
}

/*
 * Donde el plano es claro de punta a punta —la copa sobre fondo rosa— el blanco
 * no se lee por mucha sombra que lleve. Ahí se escribe en tinta y el coral se
 * oscurece al de la marca, que sobre claro sí contrasta.
 */
.rotulos-video__rotulo--oscura {
	color: var(--ink);
	text-shadow: 0 1px 14px rgba(255,255,255,.75), 0 1px 2px rgba(255,255,255,.9);
}
.rotulos-video__rotulo--oscura b { color: var(--coral); }

/* --- dónde se ancla cada uno --------------------------------------------- */

.rotulos-video__rotulo--arriba-izq    { top: 8%;  left: 6%;  text-align: left; }
.rotulos-video__rotulo--arriba-centro { top: 8%;  left: 50%; transform: translateX(-50%); text-align: center; }
.rotulos-video__rotulo--arriba-der    { top: 8%;  right: 6%; text-align: right; }
.rotulos-video__rotulo--centro-izq    { top: 50%; left: 6%;  transform: translateY(-50%); text-align: left; }
.rotulos-video__rotulo--centro        { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.rotulos-video__rotulo--centro-der    { top: 50%; right: 6%; transform: translateY(-50%); text-align: right; }
.rotulos-video__rotulo--abajo-izq     { bottom: 12%; left: 6%;  text-align: left; }
.rotulos-video__rotulo--abajo-centro  { bottom: 12%; left: 50%; transform: translateX(-50%); text-align: center; }
.rotulos-video__rotulo--abajo-der     { bottom: 12%; right: 6%; text-align: right; }

/*
 * La apertura, como la suya: marca, «presenta» en cursiva, el nombre en grande y
 * la descripción debajo. Cuatro alturas, no una frase.
 */
/*
 * La apertura NO va centrada en el cuadro, aunque la suya sí.
 *
 * Ellos pueden centrarla porque su héroe no lleva más texto. El nuestro conserva
 * el <h1>, que ocupa los 560 px de la izquierda, y centrada le caía justo encima
 * —«El extractor que se lleva» y «imani» superpuestos en el primer segundo, que
 * es la peor primera impresión posible—. Se corre a la mitad libre del plano.
 */
.rotulos-video__rotulo--apertura {
	max-width: min(20ch, 86%);
	left: 70%; transform: translate(-50%, -50%);
}
.rotulos-video__marca {
	display: block; font-size: 1.7em; font-weight: 400;
	letter-spacing: .04em; line-height: 1;
}
.rotulos-video__guion {
	display: block; font-family: Georgia, 'Times New Roman', serif;
	font-style: italic; font-weight: 400;
	font-size: .82em; line-height: 1; margin: .1em 0 .35em;
}
.rotulos-video__titulo,
.rotulos-video__titulo-coral { display: block; font-size: 1.45em; font-weight: 700; line-height: 1.02; }
/* La segunda línea del nombre, en coral: lo que este modelo trae y el otro no. */
.rotulos-video__titulo-coral { color: #ff6b60; }
.rotulos-video__rotulo--oscura .rotulos-video__titulo-coral { color: var(--coral); }
.rotulos-video__bajada {
	display: block; font-size: .5em; font-weight: 400;
	line-height: 1.3; margin-top: .5em; opacity: .95;
}

/*
 * Sin guion se ve el primero y no se mueve nada. Un rótulo que aparece y
 * desaparece solo tiene sentido si algo lo gobierna: si el JavaScript no llega,
 * 22 frases apiladas serían un destrozo y una sola frase fija es una leyenda.
 */
.rotulos-video__rotulo + .rotulos-video__rotulo { display: none; }
.rotulos-video.con-guion .rotulos-video__rotulo { display: none; }
.rotulos-video.con-guion .rotulos-video__rotulo.esta { display: block; animation: rotulo-entra .45s ease both; }

@keyframes rotulo-entra {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.rotulos-video.con-guion .rotulos-video__rotulo.esta { animation: none; }
}

/*
 * Por debajo de 900 px el héroe se separa —vídeo arriba, texto debajo— y los
 * rótulos tienen que quedarse DENTRO del vídeo, no al final de la página. La
 * envoltura `.heroe__pelicula` vuelve a existir ahí y mide lo que mide el vídeo,
 * así que `inset: 0` coincide por construcción. Se probó antes deduciendo el alto
 * desde el ancho de la ventana: a 712 px salía una franja de 400 px sobre un
 * vídeo de 383.
 */
@media (max-width: 900px) {
	.heroe__pelicula { display: block; position: relative; }
	.rotulos-video__rotulo { max-width: 88%; font-size: clamp(1rem, 3.6vw, 1.4rem); }
	/* En vertical no hay sitio para nueve anclajes: se reducen a tres alturas y
	   todo centrado, que es lo único que cabe sin partir las frases en columnas. */
	.rotulos-video__rotulo--arriba-izq, .rotulos-video__rotulo--arriba-der,
	.rotulos-video__rotulo--arriba-centro { top: 7%; left: 50%; right: auto; transform: translateX(-50%); text-align: center; }
	.rotulos-video__rotulo--centro-izq, .rotulos-video__rotulo--centro-der,
	.rotulos-video__rotulo--centro { top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); text-align: center; }
	.rotulos-video__rotulo--abajo-izq, .rotulos-video__rotulo--abajo-der,
	.rotulos-video__rotulo--abajo-centro { bottom: 14%; top: auto; left: 50%; right: auto; transform: translateX(-50%); text-align: center; }
}


/* --- ficha: acordeón en vez de pestañas ----------------------------------- */

/*
 * Sustituye a la tira horizontal de cinco pestañas, que con cinco títulos no
 * cabía: se partía en dos filas con su propia barra de desplazamiento y dejaba
 * una sola visible sin que se notara que había cuatro más.
 *
 * El abrir y cerrar es del navegador (`<details>`), así que no hay JavaScript
 * que pueda fallar y el buscador ve el contenido aunque esté plegado.
 */
.ficha-acordeon { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }

.ficha-acordeon__seccion { border-bottom: 1px solid var(--line); }
.ficha-acordeon__seccion:first-child { border-top: 1px solid var(--line); }

.ficha-acordeon__seccion > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: 1.15rem 0;
	font-size: clamp(1rem, 1.8vw, 1.15rem); font-weight: 600; color: var(--ink);
	cursor: pointer; list-style: none;
	transition: color .18s ease;
}
.ficha-acordeon__seccion > summary:hover { color: var(--coral); }
.ficha-acordeon__seccion[open] > summary { color: var(--coral); }

/* El marcador propio del navegador fuera, y un signo nuestro que gira al abrir. */
.ficha-acordeon__seccion > summary::-webkit-details-marker { display: none; }
.ficha-acordeon__seccion > summary::marker { content: ""; }
.ficha-acordeon__seccion > summary::after {
	content: "+";
	font-size: 1.6rem; font-weight: 300; line-height: 1; color: var(--coral);
	transition: transform .2s ease;
}
.ficha-acordeon__seccion[open] > summary::after { transform: rotate(45deg); }

.ficha-acordeon__cuerpo { padding: 0 0 1.6rem; }
.ficha-acordeon__cuerpo > *:first-child { margin-top: 0; }
.ficha-acordeon__cuerpo > *:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.ficha-acordeon__seccion > summary::after { transition: none; }
}


/* --- precio y botón de compra, en la misma fila ---------------------------- */

/*
 * Entre el importe y el botón había cuatro líneas —la nota de paridad y el resumen
 * del producto—, así que quien ya había decidido tenía que seguir leyendo para
 * encontrar dónde pulsar.
 *
 * La nota de paridad se queda debajo de los dos, ocupando la fila entera: es letra
 * pequeña que acompaña al precio, no algo que deba separarlo del botón.
 */
.precio-y-compra {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 1rem clamp(1rem, 3vw, 2rem);
	margin: .4rem 0 1.2rem;
}
.precio-y-compra .price,
.single-product div.product .precio-y-compra p.price { margin: 0; }
.precio-y-compra form.cart { margin: 0; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
/* `order` y no solo `flex-basis`: la nota se pinta ENTRE el precio y el
   formulario (prioridad 11 de 10 y 12), así que a ancho completo empujaba el
   botón a la fila siguiente y volvía a separarlos, que es lo que se venía a
   arreglar. Con `order` se dibuja la última sin cambiar el orden del marcado,
   que es el que lee un lector de pantalla. */
.precio-y-compra > .price { order: 1; }
.precio-y-compra > form.cart { order: 2; }
.precio-y-compra .nota-precio { order: 3; flex-basis: 100%; margin: 0; }

/* Con variaciones el formulario trae su selector: ahí ocupa la fila entera. */
.precio-y-compra form.cart.variations_form { flex-basis: 100%; display: block; }

@media (max-width: 560px) {
	.precio-y-compra { gap: .8rem; }
	.precio-y-compra form.cart { width: 100%; }
	.precio-y-compra form.cart .button { flex: 1; }
}


/* --- héroe: que el vídeo se VEA, no solo que esté ------------------------- */

/*
 * El vídeo es 16:9 y la caja del héroe mide 560 px de alto a ancho completo. A
 * 1280 px eso ya recorta un tercio por arriba y por abajo; a 712 px —el ancho
 * real desde el que se revisó— el recorte se come al sujeto y lo que queda en
 * pantalla es una pared. El vídeo estaba reproduciéndose todo el tiempo: lo que
 * no se veía era el CONTENIDO.
 *
 * Dos cambios:
 *
 *  · el encuadre pasa al centro. Estaba en 72 % porque la foto que había antes
 *    tenía el producto a la derecha; el metraje no, y esa herencia era la mitad
 *    del problema.
 *  · por debajo de 900 px el héroe deja de ser texto SOBRE vídeo y pasa a vídeo
 *    ARRIBA y texto debajo. En una pantalla estrecha no caben las dos cosas sin
 *    que una estorbe a la otra: o el texto tapa el vídeo, o el vídeo no deja leer
 *    el texto. Separados, el vídeo se ve entero en su proporción y el texto se
 *    lee sobre blanco.
 */
.heroe-bloque--video .wp-block-cover__video-background { object-position: 50% 50%; }

/*
 * Los selectores llevan `.wp-block-cover` además de la clase propia.
 *
 * Sin eso empatan en especificidad con los del bloque de WordPress —dos clases
 * cada uno— y gana el que se cargue después, que es el del núcleo. Efecto
 * medido: la proporción 16:9 sí se aplicaba y `position: static` no, así que el
 * vídeo seguía en absoluto con el texto encima y sin degradado detrás. Ilegible.
 */
@media (max-width: 900px) {
	.heroe-bloque--video.wp-block-cover {
		display: block; min-height: 0;
		background: #fff;
	}
	/* El degradado sobra cuando ya no hay texto encima del vídeo. */
	.heroe-bloque--video.wp-block-cover > .wp-block-cover__background { display: none; }

	.heroe-bloque--video.wp-block-cover .wp-block-cover__video-background {
		position: static; width: 100%; height: auto;
		aspect-ratio: 16 / 9; object-fit: cover;
	}
	.heroe-bloque--video.wp-block-cover .wp-block-cover__inner-container {
		padding: clamp(1.6rem, 5vw, 2.4rem) 28px clamp(2rem, 6vw, 3rem);
	}
	.heroe-bloque--video .heroe-bloque__texto { color: var(--ink); }
	.heroe__sonido { top: auto; bottom: auto; right: 1rem;
		margin-top: -3.4rem; position: relative; float: right; }
}


/* --- la primicia de la copa de dos piezas --------------------------------- */

/*
 * La banda que la casa pidió el 2026-08-17, con el tratamiento del fabricante:
 * antetítulo gris en versalitas espaciadas, titular grande en coral, y debajo lo
 * comprobable. Ver el docblock de `patterns/primicia.php` para por qué la frase
 * va repartida en tres alturas y no en un titular a secas.
 *
 * Fondo coral suave para separarla de las secciones blancas de alrededor sin
 * meter otra imagen a sangre: la portada ya tiene vídeo arriba y fotos debajo.
 */
.primicia { background: var(--coral-suave); }
.primicia__caja {
	display: grid; grid-template-columns: 1.15fr .85fr;
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.primicia__texto h2 {
	color: var(--coral);
	font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08;
	margin: .4rem 0 1.1rem;
}
.primicia__comprobable {
	margin: 0 0 1.6rem; color: var(--ink-soft);
	font-size: 1.02rem; line-height: 1.7; max-width: 52ch;
}
.primicia__comprobable strong { color: var(--ink); }
.primicia__foto { margin: 0; }
.primicia__foto img { width: 100%; height: auto; display: block; }

@media (max-width: 860px) {
	.primicia__caja { grid-template-columns: 1fr; text-align: center; }
	.primicia__comprobable { margin-left: auto; margin-right: auto; }
	.primicia__foto { max-width: 320px; margin: 0 auto; }
}


/* --- texto solo para lectores de pantalla --------------------------------- */

/*
 * La utilidad que WordPress y WooCommerce dan por hecha y este tema no tenía.
 *
 * WooCommerce mete «El precio original era: … El precio actual es: …» dentro del
 * precio rebajado, en un `<span class="screen-reader-text">`. Su hoja de estilos
 * lo esconde, pero **en la portada esa hoja no se carga** —ahí no hay bucle de
 * WooCommerce— así que el texto se maquetaba: la tarjeta del carrusel se iba a
 * 664 px de ancho en una ventana de 390 y arrastraba la página entera a scroll
 * horizontal.
 *
 * No se vio hasta hoy porque hacía falta un producto REBAJADO para que ese span
 * existiera, y el catálogo no tenía ninguno hasta que la casa fijó los precios de
 * lista. Es otra vez la novena regla: lo que falta y lo que está se leen igual
 * mientras el estado no cambie.
 *
 * Se recorta con `clip-path` además de `clip`, que es lo que sigue funcionando en
 * los navegadores actuales.
 */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto; height: auto; margin: 0;
	clip: auto; clip-path: none; white-space: normal;
}