/* ============================================================================
   FICHA DE PRODUCTO — Mis Amigos Los Animalitos
   La página donde se decide la compra. Se encola sola en `is_product()`
   (inc/assets.php, handle `ma-ficha`, dependiente de `ma-tienda`).

   QUÉ RESUELVE
   ------------
   Medido con el medidor del proyecto sobre la ficha antes de este rediseño:
   «Añadir al carrito» empezaba en y=4273 dentro de una ventana de 900 px. La
   causa no era la maqueta de WooCommerce, era su ORDEN: la descripción corta de
   este catálogo es la ficha técnica entera (`.summary` medía 4053 px) y
   WooCommerce la imprime antes del formulario de compra.

   Aquí los mandos de compra van arriba, en una columna propia, y todo el texto
   largo baja debajo.

   LA TRAMPA DE ESPECIFICIDAD, OTRA VEZ
   ------------------------------------
   `woocommerce-layout.css` sirve en TODAS las superficies de WooCommerce:

     .woocommerce img, .woocommerce-page img { height: auto; max-width: 100% }   (0,1,1)

   Una regla del tema con una sola clase pierde contra esa aunque se cargue
   después, porque no hay empate que desempatar. Por eso TODA regla de este
   archivo que fija el tamaño de una imagen o el ancho de una celda lleva el
   ancla `.ma-ficha` y, cuando hace falta ganar a las reglas por columnas,
   `.woocommerce-page` de más:

     .woocommerce-page .ma-ficha .ma-ficha__galeria img    (0,3,1)

   Nada de `!important`: aquí se gana por especificidad, que es como se arregló
   la cabecera en el carrito y el checkout.

   PROHIBIDO EN ESTE ARCHIVO
   -------------------------
   `!important`, estilos en línea, `linear`/`ease-in-out`, colores escritos a
   mano (solo tokens `--ma-*`) y emojis como iconos. Las fotos del catálogo ya
   vienen sobre blanco: aquí no se pinta nada de color detrás.
   ========================================================================== */

/* ============================================================================
   1. LA CABECERA DE LA FICHA
   El `<h1>` es de la plantilla (single-product.php), no del resumen de
   WooCommerce: la ficha tiene que tener su encabezado de nivel 1 con el nombre
   real del producto.
   ========================================================================== */
.ma-ficha__cabecera {
	padding-block: clamp(0.9rem, 2vw, 1.4rem) clamp(0.6rem, 1.4vw, 1rem);
}

.ma-ficha__cabecera-fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem clamp(1rem, 3vw, 2.5rem);
	flex-wrap: wrap;
}

.ma-ficha__titulo {
	/* Sin `text-wrap: balance` a este tamaño: parte el nombre en dos líneas
	   cortas y empuja los mandos de compra hacia abajo. */
	text-wrap: pretty;
	max-width: 46ch;
}

.ma-ficha__cabecera-valoracion {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
}

/* ============================================================================
   2. LA ZONA DE COMPRA: GALERÍA Y BLOQUE DE COMPRA
   Escritorio: dos columnas, la galería a la izquierda y la compra a la derecha.
   Móvil: una columna, la foto primero y la compra inmediatamente después (nunca
   al revés: es la queja literal del cliente).
   ========================================================================== */
/*
 * `width: 100%` Y `align-items` SON LA DIFERENCIA ENTRE UNA COLUMNA DE 384 px Y
 * UNA DE 184 px.
 *
 * Medido con el navegador: con `align-items: start` en este contenedor, la
 * columna de compra —y con ella el panel, el formulario y los botones— salía a
 * 184 px dentro de una pista de rejilla de 384 px, con los textos partidos. La
 * causa NO era el ancho de la pista: era que en una rejilla un ítem con
 * `align-self` distinto de `stretch` se dimensiona por `fit-content`. El
 * `width: 100%` de las reglas de abajo NO basta por sí solo —también se midió—:
 * el ítem hay que dejar que estire.
 *
 * Solución: el contenedor NO lleva `align-items: start` (que aplicaría a los dos
 * hijos) y el que de verdad no debe estirar a lo alto —la galería— lo pide para
 * sí con `align-self: start`. Comprobado en el navegador: pista 384 px, panel
 * 384 px, botones 384 px, y la rejilla sin desbordar (scrollWidth 1422 =
 * ventana).
 */
.ma-ficha__compra-zona {
	display: grid;
	width: 100%;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2.5vw, 2rem);
}

@media (min-width: 60rem) {
	.ma-ficha__compra-zona {
		/* 1fr + 24rem: la columna de compra se queda en un ancho de lectura
		   cómodo y la foto se lleva el resto. */
		grid-template-columns: minmax(0, 1fr) 24rem;
		gap: clamp(1.5rem, 3.5vw, 4rem);
	}
}

/* --- 2.1 La galería ------------------------------------------------------ */
.ma-ficha__galeria {
	display: grid;
	/* La galería no se estira a lo alto: manda su contenido. La columna de
	   compra sí estira, y por eso `align-items: start` NO está en el
	   contenedor (ver la nota de `__compra-zona`). */
	align-self: start;
	gap: clamp(0.6rem, 1.4vw, 0.9rem);
	min-width: 0;
}

.ma-ficha__galeria-principal {
	margin: 0;
	/* El ancho de la foto se acota: si la imagen llenara la columna entera
	   mediría ~700 px de alto a 1440 de ancho y empujaría los botones fuera de
	   la primera pantalla. Acotada, la foto queda cuadrada, centrada en su
	   columna y con los mandos de compra visibles sin scroll. */
	width: min(100%, clamp(20rem, 38vw, 38rem));
	margin-inline: auto;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r);
	overflow: hidden;
}

.woocommerce-page .ma-ficha .ma-ficha__galeria img,
.ma-ficha .ma-ficha__galeria-principal img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	/* `aspect-ratio` junto a `width`/`height` de la etiqueta: el hueco queda
	   reservado con la proporción real y no hay salto al cargar (CLS). */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: var(--ma-paper);
}

.ma-ficha__miniaturas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	width: min(100%, clamp(20rem, 38vw, 38rem));
	margin-inline: auto;
}

.ma-ficha__miniatura {
	flex: 0 0 auto;
}

.ma-ficha__miniatura-enlace {
	display: grid;
	place-items: center;
	width: 4.25rem;
	height: 4.25rem;
	padding: 0.3rem;
	background: var(--ma-paper);
	border: var(--ma-line);
	border-radius: var(--ma-r-sm);
	transition: border-color var(--ma-t-fast) var(--ma-ease);
}

.ma-ficha__miniatura-enlace:hover,
.ma-ficha__miniatura-enlace:focus-visible {
	border-color: var(--ma-teal-300);
}

.woocommerce-page .ma-ficha .ma-ficha__miniatura-imagen,
.ma-ficha .ma-ficha__miniatura-imagen {
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* Sin foto: nunca un hueco mudo. */
.ma-ficha__galeria-vacia {
	display: grid;
	justify-items: center;
	gap: 0.8rem;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
	background: var(--ma-mist);
	border: var(--ma-line);
	border-radius: var(--ma-r);
	width: min(100%, clamp(20rem, 38vw, 38rem));
	margin-inline: auto;
}

.ma-ficha__galeria-vacia-icono {
	color: var(--ma-ink-200);
}

.ma-ficha__galeria-vacia-texto {
	font-size: var(--ma-fs-sm);
	color: var(--ma-ink-500);
	max-width: 34ch;
}

/* --- 2.2 El resumen: donde viven los mandos ------------------------------
   El resumen es el `<div class="summary entry-summary">` de WooCommerce, así
   que conserva su contrato (y sus hooks). Aquí solo se maqueta.
   ------------------------------------------------------------------------ */
/*
 * ESTE ES EL SELECTOR MÁS IMPORTANTE DEL ARCHIVO. Con una sola clase no basta.
 *
 * `woocommerce-layout.css` trae, con (0,3,3) y en TODAS las superficies de la
 * tienda:
 *
 *   .woocommerce div.product div.summary { float: right; width: 48%; clear: none }
 *
 * Y las dos propiedades sobreviven dentro de la rejilla. El `float` impide que
 * el ítem estire —se queda en su `fit-content`— y el `width: 48%` fija el ancho
 * a la mitad de la pista. Medido con el navegador sobre la ficha, en este orden:
 *
 *   sin tocar nada              → 184 px  (48 % de la pista de 384 px)
 *   width: 300px                → 300 px  (un ancho explícito sí manda)
 *   width: 100%  + float:none   → 384 px  ← la pista completa
 *
 * Por eso el panel, el formulario y los dos botones medían 184 px con los textos
 * partidos. El `width: 100%` de `.ma-ficha__resumen` (0,1,0) PIERDE contra
 * (0,3,3); el `float: none` de (0,3,0) también perdía. Aquí van las dos cosas
 * juntas y con clases de sobra:
 *
 *   .ma-ficha .ma-ficha__compra-zona .summary.ma-ficha__resumen → (0,5,1)
 *
 * Gana a (0,3,3) sin `!important`, que está prohibido, y sin tocar el orden de
 * las hojas. Es el mismo remedio que se usó con la cabecera en el carrito y el
 * checkout.
 */
.ma-ficha .ma-ficha__compra-zona .summary.ma-ficha__resumen {
	float: none;
	width: 100%;
	clear: none;
}

.ma-ficha__resumen {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(0.6rem, 1.4vw, 0.8rem);
}

/* Pegajoso: mientras se miran las fotos, los botones siguen a la vista.
   `top` deja hueco a la cabecera pegajosa del tema (124 px medidos). */
@media (min-width: 60rem) {
	.woocommerce-page .ma-ficha .ma-ficha__resumen {
		position: sticky;
		top: 8.5rem;
	}
}

/* El título del resumen no se usa: el `<h1>` lo pone la plantilla. Si
   WooCommerce lo repusiera, no se imprime a medias: se retira del flujo. */
.ma-ficha .summary > .product_title {
	display: none;
}

.ma-ficha .summary .woocommerce-product-rating {
	margin: 0;
	font-size: var(--ma-fs-sm);
}

/* ============================================================================
   3. EL BLOQUE DE COMPRA
   ========================================================================== */
.ma-ficha__compra {
	display: block;
}

/* --- 3.1 Precio ---------------------------------------------------------- */
.ma-ficha__precio {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 0.7rem;
	margin: 0;
}

.ma-ficha__precio-actual {
	font-family: var(--ma-font-display);
	font-size: clamp(1.75rem, 3.4vw, 2.35rem);
	font-weight: 800;
	line-height: var(--ma-lh-tight);
	letter-spacing: -0.02em;
	color: var(--ma-price);
	font-variant-numeric: tabular-nums;
}

.ma-ficha__precio-antes {
	font-size: var(--ma-fs-base);
	color: var(--ma-ink-400);
	font-variant-numeric: tabular-nums;
}

.ma-ficha__descuento {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem;
	border-radius: var(--ma-pill);
	background: var(--ma-warm-50);
	color: var(--ma-ink-900);
	font-size: var(--ma-fs-xs);
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* --- 3.2 Disponibilidad --------------------------------------------------
   El punto de color es el mismo lenguaje que la tarjeta
   (`.ma-tarjeta-producto__entrega::before`): verde si hay, gris si no.
   ------------------------------------------------------------------------ */
.ma-ficha__disponibilidad {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: var(--ma-fs-sm);
	font-weight: 600;
	color: var(--ma-ink-500);
}

.ma-ficha__disponibilidad::before {
	content: "";
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	flex: none;
	background: var(--ma-price);
}

.ma-ficha__disponibilidad.is-ultimas {
	color: var(--ma-ink-700);
}

.ma-ficha__disponibilidad.is-ultimas::before {
	background: var(--ma-warm-500);
}

.ma-ficha__disponibilidad.is-agotado {
	color: var(--ma-ink-400);
}

.ma-ficha__disponibilidad.is-agotado::before {
	background: var(--ma-ink-400);
}

/* --- 3.3 El formulario --------------------------------------------------
   La cantidad se lee como una etiqueta y un control, no como un campo suelto:
   «Cantidad» a la izquierda, el `− 1 +` de WooCommerce a la derecha.
   ------------------------------------------------------------------------ */
.woocommerce-page .ma-ficha .ma-ficha__form,
.ma-ficha .ma-ficha__form {
	display: flex;
	flex-direction: column;
	gap: clamp(0.55rem, 1.2vw, 0.75rem);
	margin: 0;
}

.woocommerce-page .ma-ficha .ma-ficha__cantidad,
.ma-ficha .ma-ficha__cantidad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.woocommerce-page .ma-ficha .ma-ficha__cantidad::before,
.ma-ficha .ma-ficha__cantidad::before {
	content: "Cantidad";
	font-size: var(--ma-fs-sm);
	font-weight: 700;
	color: var(--ma-ink-700);
}

.woocommerce-page .ma-ficha .quantity,
.ma-ficha .quantity {
	display: inline-flex;
	align-items: stretch;
	flex: none;
	margin: 0;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-ink-200);
	border-radius: var(--ma-pill);
	overflow: hidden;
}

.woocommerce-page .ma-ficha .quantity .qty,
.ma-ficha .quantity .qty {
	width: 2.6rem;
	min-height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--ma-ink-900);
	font-family: var(--ma-font-ui);
	font-size: var(--ma-fs-md);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	/* Sin flechas de `number`: la ficha lleva sus dos botones y las flechas
	   nativas duplican el control y se comen el ancho. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.woocommerce-page .ma-ficha .quantity .qty::-webkit-outer-spin-button,
.woocommerce-page .ma-ficha .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce-page .ma-ficha .quantity .qty:focus,
.ma-ficha .quantity .qty:focus {
	outline: none;
}

.woocommerce-page .ma-ficha .quantity .qty:focus-visible,
.ma-ficha .quantity .qty:focus-visible {
	outline: 2px solid var(--ma-teal-500);
	outline-offset: -3px;
}

/* Los dos botones de la cantidad.
   ==========================================================================
   ANTES ESTAS REGLAS APUNTABAN A `input.minus` / `input.plus`, Y NO EXISTÍAN.
   Medido en la ficha real con WooCommerce 11.1.2: dentro de `.quantity` solo hay
   un `<label>` y un `<input type="number">` — `input.minus, input.plus` = 0
   elementos. Su plantilla `global/quantity-input.php` (versión 10.1.0) dejó de
   imprimirlos, así que todo este bloque se aplicaba a cero elementos y el mando
   de cantidad se veía como una pastilla con un «1» suelto.

   Ahora los pinta la plantilla desde los ganchos
   `woocommerce_before_quantity_input_field` / `..._after_quantity_input_field`,
   como `<button>` con el icono del tema dentro.

   `:not([hidden])` NO ES DECORACIÓN. Los botones nacen con el atributo `hidden`
   —para que sin JavaScript no aparezcan dos botones que no hacen nada—, y un
   `display: grid` a secas en este selector (0,3,1) GANARÍA al `[hidden]` del
   navegador (0,1,0): el atributo dejaría de ocultarlos y volveríamos a los
   botones muertos. Con `:not([hidden])` la regla solo existe cuando el JS ya
   los ha destapado. */
.woocommerce-page .ma-ficha .quantity .minus:not([hidden]),
.woocommerce-page .ma-ficha .quantity .plus:not([hidden]),
.ma-ficha .quantity .minus:not([hidden]),
.ma-ficha .quantity .plus:not([hidden]) {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	background: var(--ma-teal-50);
	border: 0;
	color: var(--ma-teal-700);
	cursor: pointer;
	transition: background-color var(--ma-t-fast) var(--ma-ease);
}

.woocommerce-page .ma-ficha .quantity .minus:hover,
.woocommerce-page .ma-ficha .quantity .plus:hover,
.ma-ficha .quantity .minus:hover,
.ma-ficha .quantity .plus:hover {
	background: var(--ma-teal-100);
}

.woocommerce-page .ma-ficha .quantity .minus:focus-visible,
.woocommerce-page .ma-ficha .quantity .plus:focus-visible,
.ma-ficha .quantity .minus:focus-visible,
.ma-ficha .quantity .plus:focus-visible {
	outline: 2px solid var(--ma-teal-500);
	outline-offset: -3px;
}

.ma-ficha .quantity .minus .ma-icon,
.ma-ficha .quantity .plus .ma-icon {
	width: 15px;
	height: 15px;
	stroke-width: 2.4;
}

/* --- 3.4 Las dos acciones ------------------------------------------------
   VARIANTE I · INVERTIDA TONAL, la que eligió el cliente:
     · «Añadir al carrito»  → secundaria, relleno suave turquesa, sin sombra.
     · «Comprar ahora»      → dominante, turquesa sólido con su sombra.
   Una sola acción dominante. La jerarquía es el punto: dos botones con el mismo
   peso obligan a decidir, y decidir cuesta ventas.
   ------------------------------------------------------------------------ */
.ma-ficha__acciones {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.woocommerce-page .ma-ficha .ma-ficha__anadir,
.ma-ficha .ma-ficha__anadir {
	width: 100%;
	min-height: 2.85rem;
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
	border: 0;
	box-shadow: none;
}

.woocommerce-page .ma-ficha .ma-ficha__anadir:hover,
.ma-ficha .ma-ficha__anadir:hover {
	background: var(--ma-teal-100);
	color: var(--ma-teal-800);
}

.woocommerce-page .ma-ficha .ma-ficha__comprar,
.ma-ficha .ma-ficha__comprar {
	width: 100%;
	min-height: 2.85rem;
	background: var(--ma-teal-600);
	color: var(--ma-paper);
	box-shadow: 0 12px 26px -14px rgba(0, 122, 153, .8);
	cursor: pointer;
}

.woocommerce-page .ma-ficha .ma-ficha__comprar:hover,
.ma-ficha .ma-ficha__comprar:hover {
	background: var(--ma-teal-700);
	color: var(--ma-paper);
}

/* El icono viaja en la pastilla, a la derecha del texto, igual que en la
   tarjeta de la rejilla. */
.ma-ficha__comprar .ma-boton__ico {
	order: 2;
}

.ma-ficha__anadir .ma-icon,
.ma-ficha__comprar .ma-icon {
	width: 13px;
	height: 13px;
	stroke-width: 2.2;
}

/* El botón que WooCommerce añade tras el AJAX («Ver carrito»), si algún día
   vuelve a la ruta AJAX, se queda sin su icono de fuente. */
.ma-ficha .ma-ficha__acciones a.added::after {
	display: none;
}

/* ============================================================================
   4. SEÑALES DE CONFIANZA
   Datos reales del negocio: envío gratis desde $200.000, envío el mismo día en
   Manizales, recogida en Villa María y Manizales, y los métodos de pago activos
   (hoy ninguno, así que esa fila no se imprime).
   ========================================================================== */
.ma-ficha__confianza {
	display: grid;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: clamp(0.7rem, 1.6vw, 0.9rem) 0 0;
	border-top: var(--ma-line-soft);
}

.ma-ficha__confianza-item {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: var(--ma-fs-sm);
	color: var(--ma-ink-700);
	line-height: 1.45;
}

.ma-ficha__confianza-icono {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	border-radius: 50%;
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
	margin-top: 0.05rem;
}

/* --- 4.1 Referencia (SKU) ------------------------------------------------ */
.ma-ficha__referencia {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	margin: 0;
	padding-top: clamp(0.6rem, 1.4vw, 0.8rem);
	border-top: var(--ma-line-soft);
	font-size: var(--ma-fs-xs);
}

.ma-ficha__referencia-etiqueta {
	color: var(--ma-ink-400);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}

.ma-ficha__referencia-valor {
	color: var(--ma-ink-700);
	font-variant-numeric: tabular-nums;
}

/* ============================================================================
   5. ESTADO AGOTADO
   Nada de un botón gris que no lleva a ninguna parte: se dice que no hay y se
   dan salidas de verdad.
   ========================================================================== */
.ma-ficha__agotado {
	display: grid;
	gap: 0.75rem;
}

.ma-ficha__agotado-aviso {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	padding: 0.8rem 0.9rem;
	background: var(--ma-warm-50);
	border-radius: var(--ma-r-sm);
	font-size: var(--ma-fs-sm);
	line-height: 1.5;
	color: var(--ma-ink-800);
}

.ma-ficha__agotado-icono {
	flex: none;
	color: var(--ma-warm-500);
	margin-top: 0.1rem;
}

.ma-ficha__agotado-acciones {
	display: grid;
	gap: 0.5rem;
}

/* ============================================================================
   6. DESCRIPCIÓN Y ESPECIFICACIONES
   Siempre DEBAJO de la compra. Es lo que WooCommerce imprimía arriba y lo que
   convertía la ficha en cinco pantallas de scroll.
   ========================================================================== */
.ma-ficha__info {
	display: grid;
	/* Mismo motivo que en `__compra-zona`: sin el 100 %, esta sección se encoge
	   a su contenido y la descripción queda en una columna de 649 px. */
	width: 100%;
	gap: clamp(2rem, 4vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: var(--ma-line);
}

.ma-ficha__seccion-titulo {
	font-size: var(--ma-fs-xl);
	margin-bottom: clamp(0.8rem, 1.8vw, 1.2rem);
}

.ma-ficha__descripcion {
	max-width: 70ch;
}

.ma-ficha__extracto,
.ma-ficha__texto {
	color: var(--ma-ink-700);
}

.ma-ficha__extracto > * + *,
.ma-ficha__texto > * + * {
	margin-top: 0.85em;
}

.ma-ficha__extracto ul,
.ma-ficha__extracto ol,
.ma-ficha__texto ul,
.ma-ficha__texto ol {
	padding-left: 1.2rem;
}

.ma-ficha__extracto li + li,
.ma-ficha__texto li + li {
	margin-top: 0.5em;
}

.ma-ficha__extracto img,
.ma-ficha__texto img {
	height: auto;
	max-width: 100%;
	border-radius: var(--ma-r-sm);
}

/* --- 6.1 Especificaciones: `<details>` nativo, sin JavaScript ------------ */
.ma-ficha__especificaciones {
	margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
	background: var(--ma-mist);
	border: var(--ma-line-soft);
	border-radius: var(--ma-r);
	overflow: hidden;
}

.ma-ficha__especificaciones-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.9rem clamp(1rem, 2vw, 1.35rem);
	cursor: pointer;
	font-weight: 700;
	color: var(--ma-ink-800);
	list-style: none;
	transition: background-color var(--ma-t-fast) var(--ma-ease);
}

.ma-ficha__especificaciones-cabecera::-webkit-details-marker {
	display: none;
}

.ma-ficha__especificaciones-cabecera:hover {
	background: var(--ma-teal-50);
}

.ma-ficha__especificaciones-flecha {
	display: grid;
	place-items: center;
	flex: none;
	color: var(--ma-teal-700);
	transition: transform var(--ma-t-base) var(--ma-ease);
}

.ma-ficha__especificaciones[open] .ma-ficha__especificaciones-flecha {
	transform: rotate(180deg);
}

.ma-ficha__especificaciones-lista {
	margin: 0;
	padding: 0 clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.35rem);
}

.ma-ficha__especificaciones-fila {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr);
	gap: 0.35rem 1rem;
	padding-block: 0.6rem;
	border-top: var(--ma-line-soft);
	font-size: var(--ma-fs-sm);
}

.ma-ficha__especificaciones-clave {
	font-weight: 700;
	color: var(--ma-ink-500);
}

.ma-ficha__especificaciones-valor {
	margin: 0;
	color: var(--ma-ink-800);
}

@media (max-width: 34rem) {
	.ma-ficha__especificaciones-fila {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.15rem;
	}
}

/* --- 6.2 Valoraciones ----------------------------------------------------
   EL FORMULARIO DE RESEÑAS NO TENÍA NI UNA REGLA EN TODO EL TEMA.
   Medido: en `assets/css/` no hay una sola coincidencia de `comment-form`,
   `#respond`, `commentform` ni `.stars`. Así que cada ficha terminaba con los
   campos nativos del navegador —sin tipografía, sin bordes ni radios del
   sistema— y un botón «Enviar» gris de sistema: la única pieza de la página que
   no seguía el diseño. Y no es una pieza menor, porque es la que sostiene el
   «Sé el primero en valorar», que en este catálogo sale en TODAS las fichas
   (0 valoraciones en 780 productos).

   Todo va anclado a `.ma-ficha__valoraciones` para no tocar el formulario de
   comentarios del blog, que es otra superficie y no es de esta tarea.
   ------------------------------------------------------------------------ */
.ma-ficha__valoraciones {
	max-width: 70ch;
}

.ma-ficha__valoraciones .comment-form {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}

.ma-ficha__valoraciones .comment-form p {
	margin: 0;
}

.ma-ficha__valoraciones .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--ma-fs-sm);
	font-weight: 700;
	color: var(--ma-ink-700);
}

.ma-ficha__valoraciones .comment-form input[type="text"],
.ma-ficha__valoraciones .comment-form input[type="email"],
.ma-ficha__valoraciones .comment-form input[type="url"],
.ma-ficha__valoraciones .comment-form textarea,
.ma-ficha__valoraciones .comment-form select {
	width: 100%;
	max-width: 34rem;
	padding: 0.7rem 0.9rem;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-ink-200);
	border-radius: var(--ma-r-sm);
	color: var(--ma-ink-900);
	font-family: var(--ma-font-ui);
	font-size: var(--ma-fs-base);
	line-height: 1.4;
	transition: border-color var(--ma-t-fast) var(--ma-ease);
}

.ma-ficha__valoraciones .comment-form textarea {
	max-width: 46rem;
	resize: vertical;
}

.ma-ficha__valoraciones .comment-form input:focus-visible,
.ma-ficha__valoraciones .comment-form textarea:focus-visible,
.ma-ficha__valoraciones .comment-form select:focus-visible {
	outline: 2px solid var(--ma-teal-500);
	outline-offset: 1px;
	border-color: var(--ma-teal-400);
}

/* El botón de enviar, con el mismo peso y la misma pastilla que el resto de
   acciones del tema. Es la acción dominante de este bloque, así que va en
   turquesa sólido.

   AQUÍ NO SE PUEDE GANAR CON CLASES: HAY QUE ENTRAR CON IDs.
   `woocommerce.css` trae, para el botón del formulario de reseñas:

     .woocommerce:where(…) #respond input#submit { background-color:#e9e6ed;
       color:#515151; border:0; border-radius:3px; padding:.618em 1em; … }

   Ese selector lleva DOS IDs —`#respond` y `#submit`—, así que es (2,1,1) y
   NINGUNA regla solo con clases puede ganarle por muchas clases que acumule: el
   número de IDs se compara antes que nada. Medido, no supuesto: con
   `.ma-ficha__valoraciones .comment-form .submit` (0,3,0) el botón seguía
   saliendo gris —`background rgb(233,230,237)`— y con `border-radius: 3px`,
   mientras que el `cursor: pointer` y la tipografía sí entraban: la prueba de
   que la regla se aplicaba y perdía solo en lo que WooCommerce pisaba.
   Con `#respond input#submit.submit` (2,2,1) gana por una clase de más, y sin
   un solo `!important`, que está prohibido en este proyecto. */
.ma-ficha__valoraciones #respond input#submit.submit {
	min-height: 2.85rem;
	padding: 0.65rem 1.6rem;
	background: var(--ma-teal-600);
	background-image: none;
	color: var(--ma-paper);
	border: 0;
	border-radius: var(--ma-pill);
	font-family: var(--ma-font-ui);
	font-size: var(--ma-fs-md);
	font-weight: 700;
	line-height: 1.2;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: background-color var(--ma-t-fast) var(--ma-ease);
}

.ma-ficha__valoraciones #respond input#submit.submit:hover {
	background: var(--ma-teal-700);
	color: var(--ma-paper);
}

/* Los textos de ayuda, en el gris del sistema y más pequeños. */
.ma-ficha__valoraciones .comment-notes,
.ma-ficha__valoraciones .comment-form-cookies-consent,
.ma-ficha__valoraciones .logged-in-as {
	font-size: var(--ma-fs-sm);
	color: var(--ma-ink-500);
}

.ma-ficha__valoraciones .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.ma-ficha__valoraciones .comment-form-cookies-consent input {
	flex: none;
	margin-top: 0.25rem;
}

.ma-ficha__valoraciones .comment-form-cookies-consent label {
	margin: 0;
	font-weight: 500;
	color: var(--ma-ink-500);
}

/* ============================================================================
   7. PRODUCTOS RELACIONADOS
   Reutilizan la rejilla y la tarjeta del tema (`ma_tarjeta_producto()`): ni una
   maqueta nueva. Aquí solo se ajusta la retícula a cinco columnas, que es lo
   que devuelve el filtro de la plantilla.
   ========================================================================== */
.ma-ficha__relacionados {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: var(--ma-line);
}

/* ============================================================================
   8. CIERRE
   ========================================================================== */
.ma-ficha__cierre {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: var(--ma-line);
	max-width: 46rem;
}

.ma-ficha__cierre-texto {
	color: var(--ma-ink-500);
}

.ma-ficha__cierre-acciones {
	margin-top: clamp(1rem, 2vw, 1.35rem);
}

.ma-ficha__cierre-buscador {
	margin-top: clamp(1rem, 2vw, 1.35rem);
	max-width: 40rem;
}

/* ============================================================================
   9. MÓVIL: LA COMPRA, INMEDIATAMENTE DESPUÉS DE LA FOTO
   A un solo carril, lo único que hay entre la foto y el botón es el precio.
   Los mandos suben a 48 px de alto, que es lo mínimo cómodo con el pulgar.

   LA FOTO SE ACOTA EN ALTO, Y ES A PROPÓSITO.
   Medido con el viewport exacto de 390×844 (iPhone 14), que es el que de verdad
   usa la gente: la caja de la foto medía 320 px de alto y «Comprar ahora» —el
   botón dominante, el que da dinero— empezaba en y=869 y terminaba en y=917,
   o sea COMPLETAMENTE por debajo de la primera pantalla. El cliente pidió justo
   lo contrario («demasiado scroll para empezar a ver productos»).

   `--alto-foto-movil` recorta la caja del medio para que la compra quepa entera.
   La foto NO se recorta ni se deforma: la caja se acorta y dentro la imagen sigue
   cuadrada y centrada con `object-fit: contain`, y como las fotos del catálogo
   vienen sobre blanco, el aire de los lados no se ve. `width`/`height` de la
   etiqueta siguen ahí, así que el hueco queda reservado y no hay salto de
   maquetación.

   OJO CON LA MEDICIÓN A 390 px, QUE AQUÍ TAMBIÉN SE FALLÓ.
   ------------------------------------------------------------------
   `_auditoria/tools/medir.mjs` lanza Chrome con `--window-size=390,900`, pero
   Chrome en Windows no baja de ~500 px de ventana: medido, el viewport real salía
   de 504 px y todo lo que se dio por «medido a 390» estaba medido a 504. Para la
   comprobación de móvil de verdad está
   `_auditoria/capturas/ficha/_medir-movil.mjs`, que usa
   `Emulation.setDeviceMetricsOverride` y fija 390×844 exactos. Los números de
   arriba salen de ahí.

   Los tres recortes que hacen que quepa, todos medidos a 390×844:
     · la caja de la foto, 320 → 264 px (‑56)
     · las migas, que partían en DOS líneas (45 px) y pasan a una (‑19). En móvil
       se quedan «Inicio › producto»: el nombre del producto ya está en el `<h1>`
       justo debajo, así que las migas intermedias solo gastaban pantalla.
     · el margen inferior de la cabecera, 24 → 12 px, y sus rellenos (‑15)
   ========================================================================== */
@media (max-width: 37.5rem) {
	.ma-ficha__galeria-principal,
	.ma-ficha__miniaturas,
	.ma-ficha__galeria-vacia {
		width: 100%;
	}

	/* Las migas, a una sola línea: se retiran los tramos intermedios y quedan el
	   primer y el último. El `margin-bottom` de 24 px de `.ma-cabecera-pagina`
	   también se aprieta. Los dos selectores llevan `.ma-ficha` delante para
	   ganar por especificidad a layout.css, que es donde viven esas reglas. */
	.ma-ficha__cabecera .ma-migas__item:not(:first-child):not(:last-child) {
		display: none;
	}

	.ma-ficha .ma-ficha__cabecera {
		padding-block: 0.5rem 0.6rem;
		margin-bottom: 0.75rem;
	}

	.ma-ficha__galeria-principal {
		max-height: min(40vh, 16.5rem);
	}

	/* El hueco entre la foto (con sus miniaturas) y el panel se aprieta: en móvil
	   el ancho del viewport no dice nada del espacio vertical disponible, y ese
	   `2.5vw` resolvía a 10 px de los que no sobra ni uno. */
	.ma-ficha__compra-zona {
		gap: 0.5rem;
	}

	.ma-ficha__resumen {
		gap: 0.5rem;
	}

	.woocommerce-page .ma-ficha .ma-ficha__acciones,
	.ma-ficha .ma-ficha__acciones {
		gap: 0.4rem;
	}

	.woocommerce-page .ma-ficha .ma-ficha__galeria-principal img,
	.ma-ficha .ma-ficha__galeria-principal img {
		height: 100%;
		max-height: min(40vh, 16.5rem);
	}

	.ma-ficha__precio-actual {
		font-size: clamp(1.6rem, 7.5vw, 2rem);
	}

	.woocommerce-page .ma-ficha .ma-ficha__anadir,
	.ma-ficha .ma-ficha__anadir,
	.woocommerce-page .ma-ficha .ma-ficha__comprar,
	.ma-ficha .ma-ficha__comprar {
		min-height: 3rem;
		font-size: var(--ma-fs-md);
	}

	.woocommerce-page .ma-ficha .quantity .qty,
	.ma-ficha .quantity .qty,
	.woocommerce-page .ma-ficha .quantity .minus:not([hidden]),
	.woocommerce-page .ma-ficha .quantity .plus:not([hidden]),
	.ma-ficha .quantity .minus:not([hidden]),
	.ma-ficha .quantity .plus:not([hidden]) {
		min-height: 3rem;
	}

	.ma-ficha__miniatura-enlace {
		width: 3.75rem;
		height: 3.75rem;
	}
}

/* ============================================================================
   10. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.ma-ficha__miniatura-enlace,
	.ma-ficha__especificaciones-cabecera,
	.ma-ficha__especificaciones-flecha,
	.ma-ficha .quantity .minus,
	.ma-ficha .quantity .plus {
		transition: none;
	}

	.ma-ficha__especificaciones[open] .ma-ficha__especificaciones-flecha {
		transform: none;
	}
}

/* ============================================================================
   PESTAÑAS DE INFORMACIÓN: descripción · especificaciones · reseñas
   ============================================================================

   FALLO QUE ESTO ARREGLA
   ----------------------
   La primera versión eran tres botones con fondo TRANSPARENTE y un subrayado
   fino en el activo. El cliente lo dijo claro: "3 botones feos sin padding con
   el contenido, ni estilo acorde a la web".

   Y tenía razón: en esta web todo lo que se pulsa es una PASTILLA —borde
   redondeado, fondo blanco, relleno teal al activarse—. Tres textos subrayados
   no se parecían a nada del resto del sitio. Aquí se copian los tokens de
   `.ma-portada__rottab`, que es la pastilla que el diseño aprobado ya usaba.

   La cabecera NO lleva línea inferior: con pastillas separadas, una raya debajo
   sobra y hace que parezca un menú de otra web.
   ========================================================================== */

/*
 * `min-width: 0` ES OBLIGATORIO AQUÍ, NO UN ADORNO.
 *
 * FALLO QUE ESTO ARREGLA (medido a 390 px)
 * ----------------------------------------
 * La ficha desbordaba horizontalmente: `clientWidth` 390 pero `innerWidth` 441.
 * La página entera se ensanchaba 51 px por culpa de este bloque.
 *
 *   SECTION.ma-ficha__tabs   ancho 425   (viewport 390)
 *
 * CAUSA: un ítem de flex o de grid tiene `min-width: auto` por defecto, que
 * significa "no me encojas por debajo de mi contenido". La cabecera de pestañas
 * lleva `flex-wrap: nowrap` + `overflow-x: auto` en móvil, así que su contenido
 * mide más que el hueco. En vez de encogerse y dejar que el `overflow-x` haga
 * scroll, el bloque CRECIÓ a 425 px y arrastró al padre y a toda la página.
 *
 * Con `min-width: 0` el bloque acepta encogerse, el `overflow-x: auto` entra en
 * juego y las pastillas se deslizan DENTRO en vez de empujar la página.
 *
 * Es la misma trampa que apareció al principio del proyecto con `min-height: 0`
 * en los hijos de flex del hero: sin el `0`, el mínimo automático gana.
 */
.ma-ficha__tabs {
	min-width: 0;
	max-width: 100%;
	margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
}

.ma-ficha__tabs-cabecera {
	min-width: 0;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}

.ma-ficha__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	appearance: none;
	background: var(--ma-paper);
	border: 1.5px solid var(--ma-ink-200);
	border-radius: var(--ma-pill);
	/* 0.7rem 1.35rem son 46 px de alto: área táctil cómoda y aire de sobra
	   dentro. El primer intento llevaba 11,2 × 16 px y se veía apretado. */
	padding: 0.7rem 1.35rem;
	font-family: var(--ma-font-ui);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ma-ink-700);
	cursor: pointer;
	transition:
		border-color var(--ma-t-fast) var(--ma-ease),
		background-color var(--ma-t-fast) var(--ma-ease),
		color var(--ma-t-fast) var(--ma-ease);
}

.ma-ficha__tab:hover {
	border-color: var(--ma-teal-300);
	background: var(--ma-teal-50);
	color: var(--ma-teal-700);
}

/*
 * Pestaña activa: rellena, como la pastilla activa del resto de la web.
 * El color es `--ma-teal-600` con texto blanco = 4,8:1, que pasa AA. NO vale
 * `--ma-teal-500`: 3,9:1 y este proyecto ya falló 18 nodos por contraste.
 */
.ma-ficha__tab.is-activa,
.ma-ficha__tab[aria-selected="true"] {
	border-color: var(--ma-teal-600);
	background: var(--ma-teal-600);
	color: var(--ma-paper);
}

.ma-ficha__tab.is-activa:hover {
	border-color: var(--ma-teal-700);
	background: var(--ma-teal-700);
	color: var(--ma-paper);
}

.ma-ficha__tab:focus-visible {
	outline: 2px solid var(--ma-teal-500);
	outline-offset: 2px;
}

/*
 * EL PANEL TENÍA CERO DE PADDING.
 *
 * El contenido quedaba pegado a las pastillas y a los bordes, que es la mitad
 * de por qué se veía sin acabar. Ahora lleva aire arriba y a los lados.
 */
.ma-ficha__panel {
	min-width: 0;
	max-width: 100%;
	padding: clamp(1.1rem, 2.2vw, 1.6rem) clamp(1rem, 2vw, 1.5rem);
	background: var(--ma-mist);
	border: var(--ma-line);
	border-radius: var(--ma-r);
	/* El foco programático del panel —al cambiar de pestaña con el teclado— no
	   debe pintar un aro alrededor de todo el bloque. */
	outline: none;
}

.ma-ficha__panel[hidden] {
	display: none;
}

/* La descripción se lee, no se escanea: algo más estrecha que el resto. */
.ma-ficha__panel .ma-ficha__extracto,
.ma-ficha__panel .ma-ficha__texto {
	max-width: 68ch;
}

/* La primera línea del extracto, con algo más de cuerpo: es el resumen. */
.ma-ficha__panel .ma-ficha__extracto p:first-child {
	font-size: 1.02rem;
	color: var(--ma-ink-700);
}

/* El formulario de reseñas vive dentro del panel: no necesita su propio fondo
   claro, que dentro del panel se vería como una caja dentro de otra. */
.ma-ficha__panel.ma-ficha__valoraciones {
	background: var(--ma-paper);
}

@media (max-width: 47.99rem) {
	.ma-ficha__tabs-cabecera {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Sin esto, el `overflow-x` recorta el aro de foco de las pastillas. */
		padding-bottom: 0.4rem;
	}

	.ma-ficha__tabs-cabecera::-webkit-scrollbar {
		display: none;
	}

	.ma-ficha__tab {
		white-space: nowrap;
		/* Área táctil cómoda: por debajo de 44 px se falla al pulsar. */
		min-height: 44px;
	}
}

/* El título "Reseñas" ahora lo da la pestaña: no se repite dos veces. */
.ma-ficha__valoraciones .woocommerce-Reviews-title {
	display: none;
}