/*
 * Ficha de producto (Plan 3). Medidas de la web de hoy (Tarea 7). D10: el rosa de acción con texto blanco solo en
 * botones de 19 px en 700; píldora elegida con fondo --rosa-texto (4,58:1 con blanco); texto pequeño rosa en
 * --rosa-texto; texto sobre amarillo en burdeos. Interletrado de −0,2 px (el token del kit) en vez de −1 px: hoy pega
 * las palabras (anexo §8.5, SW-312). Interlineado de 1,2 donde hoy es 10 px y un texto puede partir en dos líneas.
 */
.ficha { padding-bottom: 40px; }
.ficha .woocommerce-breadcrumb { margin: 39px 0 20px; padding: 0 20px; } /* hoy: 174 px, con el texto 20 px por dentro */
.ficha__producto { display: grid; grid-template-columns: 2fr 3fr; column-gap: 80px; }
.ficha__galeria { padding: 10px; }
.ficha__resumen { padding-top: 10px; } /* hoy el logo empieza 10 px por debajo de la columna, como la foto */
/* Selectores con clases de más: el CSS de WooCommerce, que sigue cargado, pesa (0,3,2) y (0,4,1) en la ficha
   (div.product div.images, button.button.alt, p.price…). pruebas/ficha.py lo comprueba con estilos calculados. */
.ficha div.product div.images.woocommerce-product-gallery { float: none; width: 100%; margin: 0; } /* WooCommerce: 48 % */
.ficha .woocommerce-product-gallery img { width: 100%; height: auto; }
.ficha div.product div.images .flex-control-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.ficha div.product div.images .flex-control-thumbs li { width: auto; float: none; }
.ficha .flex-control-thumbs img { cursor: pointer; opacity: .6; }
.ficha .flex-control-thumbs img.flex-active { opacity: 1; }
/* Puntos (blends, cápsulas y cacaos, P12): 10 px, con 24 px de área táctil (WCAG 2.5.8). */
.ficha .flex-control-paging { display: flex; justify-content: center; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.ficha .flex-control-paging a { position: relative; display: block; width: 24px; height: 24px; font-size: 0; cursor: pointer; }
.ficha .flex-control-paging a::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--rosa); }
.ficha .flex-control-paging a.flex-active::after { background: var(--burdeos); }

.ficha__marca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ficha__logo { width: 127px; height: auto; }
.ficha__numero { color: var(--cuerpo); font: 400 60px/50px var(--rotulo); }
.ficha__titulo { margin: 20px 0; color: var(--cuerpo); font: 600 50px/1 var(--letra); text-transform: uppercase; }
.ficha--cacao .ficha__titulo { color: var(--enfasis); }
.ficha__valoracion { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.ficha__cta { margin: 0 0 20px; color: var(--burdeos); font: 400 16px/24px var(--letra); }
.ficha--cacao .ficha__cta { font-size: 15px; }
.deseos--texto .deseos__boton { min-height: 24px; padding: 0; color: var(--rosa-texto); font: 400 16px/1.2 var(--letra); letter-spacing: -.2px; }
.deseos--texto .deseos__boton .icono { width: 16px; height: 16px; }

.ficha__precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 30px 0 20px; }
.ficha div.product .ficha__precio p.price { margin: 0; color: var(--burdeos); font: 800 50px/1 var(--letra); text-transform: uppercase; }
.ficha div.product .ficha__precio p.price .woocommerce-Price-amount { font-size: 40px; font-weight: 700; }
.ficha div.product .ficha__precio p.price .desde { font-size: 18px; font-weight: 600; text-transform: none; }
.ficha__impuestos { color: var(--enfasis); font: 300 14px/1 var(--letra); }

.ficha__eleccion { margin: 0 0 20px; color: var(--enfasis); font: 600 18px/20px var(--letra); letter-spacing: -.2px; }

/* Píldoras. */
.pildoras { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; }
.pildoras[hidden] { display: none; }
.pildoras__titulo { flex-basis: 100%; margin: 0; padding: 0; color: var(--enfasis); font: 700 16px/1.2 var(--letra); letter-spacing: -.2px; text-transform: capitalize; }
.pildora {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 5px 10px;
	border: 2px solid var(--rosa);
	border-radius: 5px;
	background: #fff;
	color: var(--rosa-texto);
	font: 500 14px/1.2 var(--letra);
	cursor: pointer;
}
.pildora__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } /* el radio sigue enfocable */
.pildora:has(.pildora__radio:checked),
.pildora--fija { border-color: var(--rosa-texto); background: var(--rosa-texto); color: #fff; }
.pildora:has(.pildora__radio:focus-visible) { outline: 2px solid var(--burdeos); outline-offset: 2px; }
.pildora:has(.pildora__radio:disabled) { border-color: #ccc; color: var(--gris-texto); text-decoration: line-through; cursor: not-allowed; }
.ficha--capsulas .pildora,
.ficha--infusion .pildora { min-height: 42px; padding: 10px 20px; }

/* Cajas: 5 px de radio y la sombra del kit, como hoy; la de las píldoras, con la textura 2421 al 30 %. */
.ficha__caja { position: relative; margin: 0 0 20px; padding: 15px 10px 10px; border-radius: 5px; box-shadow: var(--sombra); overflow: hidden; }
.ficha__textura { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; pointer-events: none; }
.ficha__opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 60px; }
.ficha__opciones > :not(.ficha__textura) { position: relative; z-index: 1; }

/* El precio de la variación elegida, a la derecha de las píldoras (hoy #precio-personalizado): negro a 60 px, con
   «(Impuestos Incl.)» a 14 px. El de WooCommerce, dentro del formulario, no se pinta, como hoy. */
.ficha div.product .ficha__precio-variacion { margin: 0; color: #000; font: 700 60px/1 var(--letra); }
/* Vacía (sin variación elegida, o sin price_html) sigue en el DOM, porque es la región viva que lee el lector de
   pantalla (ficha.js), pero fuera del flex: no suma el hueco de 60 px de las cajas. Se ve igual que cuando nacía oculta. */
.ficha div.product .ficha__precio-variacion:empty { position: absolute; }
.ficha div.product .ficha__precio-variacion span.price { margin: 0; color: #000; font-size: 60px; }
.ficha div.product .ficha__precio-variacion small { font: 300 14px/1 var(--letra); }
.ficha div.product .single_variation .woocommerce-variation-price { display: none; }
/* Cuántas quedan no se ve hoy en ninguna ficha (capturas de referencia; en las variables lo oculta el tema hijo,
   variaciones-peso.js:149-160). «Sin existencias» sí. */
.ficha div.product p.stock.in-stock { display: none; }

/* Compra: cantidad y botón. Medidas de hoy: título a 15 px del borde de la caja, cantidad y botón 10 px debajo, de
   36 px de alto, y 10 px hasta el final de la caja (sin el margen de 2em que WooCommerce da al formulario). */
.con-pildoras table.variations { display: none; }
.ficha div.product form.cart { margin: 0; }
.ficha div.product form.cart::before,
.ficha div.product form.cart::after { content: none; } /* el clearfix de WooCommerce serían dos huecos en el flex */
.ficha form.cart:not(.variations_form),
.ficha .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ficha__compra-titulo { flex-basis: 100%; margin: 0; color: var(--enfasis); font: 700 18px/20px var(--letra); letter-spacing: -.2px; text-transform: uppercase; }
.ficha form.cart .quantity { float: none; margin: 0; }
.ficha form.cart .qty { width: 60px; height: 36px; padding: 6px 10px; border: 2px solid var(--rosa); border-radius: 5px; color: #000; font: 16px var(--letra); text-align: center; }
.ficha .ficha__compra button.single_add_to_cart_button.button.alt,
.ficha .ficha__compra button.single_add_to_cart_button.button.alt:hover {
	float: none;
	min-height: 36px;
	padding: 8px 16px;
	border: 0;
	border-radius: 3px;
	background: var(--rosa);
	color: #fff;
	font: 700 19px/1 var(--letra); /* hoy 16 px: D10, regla 1 */
	cursor: pointer;
}
.ficha .ficha__compra button.single_add_to_cart_button.button.alt.disabled,
.ficha .ficha__compra button.single_add_to_cart_button.button.alt.disabled:hover { background: var(--amarillo); color: var(--burdeos); opacity: 1; cursor: not-allowed; } /* hoy blanco sobre amarillo, 1,69:1 */
.ficha .stock.out-of-stock { color: #a00; }

@media (max-width: 767px) {
	.ficha .woocommerce-breadcrumb { margin-top: 18px; } /* hoy: 255 px, 18 bajo la cabecera */
	.ficha__producto { grid-template-columns: 1fr; }
	.ficha__resumen { padding: 5px; text-align: center; }
	.ficha .ficha__logo { width: 75%; max-width: 220px; } /* .ficha: el max-width de .woocommerce img (0,1,1) */
	.ficha__marca { row-gap: 0; } /* hoy el número va pegado bajo el logo */
	.ficha__numero { flex-basis: 100%; }
	.ficha__titulo { font-size: clamp(32px, 12vw, 50px); } /* 50 px desborda a 390 con DESCAFEINADO (página de 401 px) */
	.ficha__precio,
	.ficha__opciones,
	.pildoras,
	.ficha form.cart:not(.variations_form),
	.ficha .woocommerce-variation-add-to-cart { justify-content: center; }
	.ficha__eleccion,
	.ficha__compra-titulo { font-size: 16px; }
}

/* Secciones de la ficha (Tarea 8). Medidas de capturas/medidas-plan3/producto-*.json y de las capturas de referencia
   (dónde cae el texto): hoy los títulos tienen 10 px de interlineado, y aquí 1,2 (pueden partir en dos líneas); el
   margen de −6 px deja su centro donde está hoy, 25 px bajo el borde de la caja. */
.ficha__seccion-titulo { margin: -6px 0 13px; color: var(--enfasis); font: 700 19px/1.2 var(--letra); letter-spacing: -.2px; text-transform: uppercase; }
.ficha__seccion-titulo--cuerpo { color: var(--cuerpo); }
.ficha__seccion-titulo--rosa { color: var(--rosa); } /* 19 px en 700 es texto grande: 3,26:1 basta */
.ficha__texto { color: #000; font: 300 16px/23px var(--letra); }
.ficha__texto p { margin: 0 0 12px; }
.ficha__texto > :last-child { margin-bottom: 0; }
/* Cajas de hoy (radio 5 y la sombra del kit, de .ficha__caja), 20 px entre una y otra y 10 px a los lados de la página
   en móvil: descripción, «¿Qué más…?» y la de los datos, que lleva dentro las opiniones (contenedores 21b1b79,
   fe6c02f y b7c2e3d del JSON 896). */
.ficha__caja.contenedor { width: calc(100% - 20px); max-width: 1140px; margin-inline: auto; padding: 20px; }
.ficha__descripcion { margin-top: 20px; }
.ficha__descripcion .ficha__seccion-titulo { margin: 3px 0 14px; } /* hoy su título va 10 px más abajo que los demás */
/* Dentro de las cajas de los datos, cada bloque en su caja (radar, tabla y consejo). */
.ficha__subcaja { border-radius: 5px; box-shadow: var(--sombra); overflow: hidden; }

/* «¿Qué más…?»: texto al 70 % (764 px) y foto cuadrada al 30 % (316), cada uno con 10 px de relleno, como hoy. */
.ficha__caja.ficha__mas { display: grid; grid-template-columns: 7fr 3fr; align-items: start; padding: 10px; }
.ficha__mas-texto,
.ficha__mas-foto { padding: 10px; }
.ficha__mas .ficha__seccion-titulo { margin-bottom: 33px; }
.ficha .ficha__mas-foto { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } /* .ficha: el height: auto de .woocommerce img (0,1,1) */

/* Datos de los cafés: radar a la izquierda e información y tip a la derecha, al 50 %. En infusiones y cacaos (sin
   radar), información y consejo en dos columnas de 512 px, con 30 px de relleno y 40 entre ellas. */
.ficha__datos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
.ficha__datos:not(:has(.ficha__cata)) { padding: 30px; }
.ficha__datos:not(:has(.ficha__cata)) .ficha__columna { display: grid; grid-template-columns: repeat(2, calc(50% - 28px)); column-gap: 40px; align-items: start; grid-column: 1 / -1; } /* 512 + 40 + 512, y 16 px de más a la derecha, como hoy */
.ficha__radar { padding: 10px; }
.ficha__cata .radar { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; overflow: visible; } /* hoy, un lienzo de 500×500 */
/* overflow: visible: «Limpieza» empieza a 1 px del borde del lienzo en escritorio y a 5 fuera de él en móvil (dentro del
   relleno de la caja, como hoy); sin esto el SVG la recorta. */
.radar text { font-family: var(--letra); }
.radar__eje,
.radar__leyenda { fill: #000; font-size: 14px; }
.radar__escala { fill: #000; font-size: 11px; }
.ficha__total { margin: 20px 0 9px; color: var(--cuerpo); font: 600 20px/1.2 var(--letra); text-align: center; }
.ficha__tabla { width: 100%; border-collapse: collapse; }
.ficha__tabla th,
.ficha__tabla td { padding: 10px; vertical-align: top; text-align: left; font-size: 16px; line-height: 1.25; letter-spacing: -.2px; }
.ficha__tabla th { width: 35%; color: #000; font-weight: 600; text-transform: uppercase; }
.ficha__tabla td { color: var(--enfasis); font-weight: 400; }
.ficha__tabla td p { margin: 0 0 8px; }
.ficha__tabla td > :last-child { margin-bottom: 0; }
.ficha__tabla tr:nth-child(odd) > * { background: rgba(204, 110, 131, .14); }
/* El tip, 33 px bajo la tabla (su título tiene hoy 70 px de caja) y en su caja con 15 px de relleno. */
.ficha__cata ~ .ficha__columna .ficha__consejo { margin-top: 39px; }
.ficha__consejo .ficha__seccion-titulo { margin-bottom: 14px; }
.ficha__consejo .ficha__texto { padding: 15px; color: var(--enfasis); }
.ficha--infusion .ficha__tabla td,
.ficha--cacao .ficha__tabla td { font-size: 14px; line-height: 20px; } /* hoy los valores largos van a 14/20 */
/* En infusiones y cacaos, hoy sin filas alternas (0 de sus contenedores con fondo) y la etiqueta al 30 % (154 de 512). */
.ficha--infusion .ficha__tabla tr:nth-child(odd) > *,
.ficha--cacao .ficha__tabla tr:nth-child(odd) > * { background: none; }
.ficha--infusion .ficha__tabla th,
.ficha--cacao .ficha__tabla th { width: 30%; }

/* Opiniones: las de WooCommerce, a lo ancho de la caja de los datos, a 30 px de su borde, como hoy; el centro del
   título, 55 px bajo el radar en los cafés y 65 bajo la tabla en infusiones y cacaos. Las estrellas del formulario, de
   24 px (WCAG 2.5.8). */
.ficha__opiniones { grid-column: 1 / -1; margin-top: 60px; }
.ficha__cata ~ .ficha__opiniones { margin-top: 49px; padding-inline: 10px; }
.ficha .woocommerce-Reviews-title { display: none; } /* el título es el de la sección */
.ficha p.stars a { width: 24px; height: 24px; }
/* La casilla de la cookie del comentario: su etiqueta, en bloque de 24 px de alto (en una línea mide 20: WCAG 2.5.8). */
.ficha .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; }
.ficha .comment-form-cookies-consent label { display: inline-block; min-height: 24px; line-height: 24px; }
/* «Enviar»: el botón rosa del tema (WooCommerce lo pinta gris con #respond input#submit, (1,2,1)). */
.ficha #respond input#submit,
.ficha #respond input#submit:hover { padding: 12px 24px; border: 0; border-radius: 3px; background: var(--rosa); color: #fff; font: 700 19px/1 var(--letra); }

/* Relacionados: el centro del título, 102 px bajo la caja de los datos y 58 sobre la rejilla. */
.ficha__relacionados { margin-top: 84px; }
.ficha__relacionados-titulo { margin: 0 0 40px; color: var(--cuerpo); font: 600 30px/1.2 var(--letra); letter-spacing: -.2px; text-align: center; text-transform: uppercase; }

@media (max-width: 767px) {
	.ficha__caja.ficha__mas,
	.ficha__datos,
	.ficha__datos:not(:has(.ficha__cata)) .ficha__columna { grid-template-columns: 1fr; }
	/* La alineación de hoy en móvil, que cambia de una plantilla a otra: centradas la descripción y «¿Qué más…?» de
	   blends y orígenes, la información y el tip de los blends y las opiniones de todas; lo demás, a la izquierda. */
	.ficha--blend .ficha__descripcion,
	.ficha--origen .ficha__descripcion,
	.ficha--blend .ficha__mas-texto,
	.ficha--origen .ficha__mas-texto,
	.ficha--blend #ficha-informacion,
	.ficha--blend .ficha__consejo .ficha__texto,
	.ficha__opiniones .ficha__seccion-titulo { text-align: center; }
	/* Infusiones y cacaos: cada etiqueta sobre su valor, a todo el ancho. */
	.ficha--infusion .ficha__tabla :is(tr, th, td),
	.ficha--cacao .ficha__tabla :is(tr, th, td) { display: block; width: auto; }
	#ficha-mas { margin: -3px 0 23px; font-size: 20px; line-height: 24px; } /* el interlineado de hoy en móvil */
	.ficha__seccion-titulo--rosa { font-size: 24px; }
	.ficha__cata ~ .ficha__columna { margin-top: 30px; }
	.ficha__datos:not(:has(.ficha__cata)) .ficha__consejo { margin-top: 39px; }
	/* El radar, en un lienzo de 310×350 a 390, como hoy, y en proporción más estrecho (el SVG escala al 62 % a 390).
	   Chart.js encoge hoy el radio hasta ~97 px y deja las etiquetas a ~118 del centro, a ~11,5 px: el gráfico, al 83 %
	   hacia su centro, y las etiquetas, en su grupo, al 93 %. Medido en producto-bouquet-movil.jpg. */
	.ficha__cata .radar { aspect-ratio: 310 / 350; }
	.radar__grafico,
	.radar__ejes { transform-origin: 250px 250px; }
	.radar__grafico { transform: scale(.83); }
	.radar__ejes { transform: scale(.93); }
	.radar__eje { font-size: 20px; }
	.radar__leyenda { font-size: 22px; }
	.radar__escala { font-size: 21px; }
	/* El centro del título de las opiniones, 79 px bajo el tip en los cafés y 89 bajo el consejo en los demás. */
	.ficha__opiniones { margin-top: 66px; }
	.ficha__cata ~ .ficha__opiniones { margin-top: 56px; }
	/* Relacionados: hoy su título tiene interlineado de 20 px (36 en los blends) y el centro queda 109 px bajo la caja
	   de los datos y 70 sobre la rejilla (125 y 86 en los blends). */
	.ficha__relacionados { margin-top: 73px; }
	.ficha__relacionados-titulo { margin-bottom: 34px; }
	.ficha--blend .ficha__relacionados { margin-top: 89px; }
	.ficha--blend .ficha__relacionados-titulo { margin-bottom: 50px; }
}