/* =========================================================================
   Producan — hoja de estilo del tema
   -------------------------------------------------------------------------
   Los tokens (color, tipografía, espaciado) están en theme.json y llegan aquí
   como variables --wp--preset--*. Aquí solo va lo que theme.json no cubre:
   cabecera, tarjetas, galería de producto, checkout y los patrones propios.
   ========================================================================= */

/*
 * WordPress no aplica border-box a los elementos que creamos nosotros dentro de bloques HTML,
 * y eso hacía que el envoltorio del hero sumase su padding al 100 % y desbordase en móvil.
 */
*, *::before, *::after { box-sizing: border-box; }

:root {
	--pc-borde: var(--wp--preset--color--borde);
	--pc-radio: 10px;
	--pc-radio-sm: 6px;
	--pc-transicion: 180ms cubic-bezier(0.2, 0, 0.1, 1);
	--pc-cabecera-alto: 72px;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--pc-cabecera-alto) + 1rem);
}

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

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

img, video { max-width: 100%; height: auto; }

/* Foco visible y consistente. Sin esto la web no se puede recorrer con teclado. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--naranja);
	outline-offset: 2px;
	border-radius: 3px;
}

.pc-salto-contenido {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--grafito);
	color: #fff;
	text-decoration: none;
}
.pc-salto-contenido:focus { left: 1rem; top: 1rem; }

/* -------------------------------------------------------------------------
   Cabecera
   ---------------------------------------------------------------------- */

.pc-cabecera {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	border-bottom: 1px solid var(--pc-borde);
}

/*
 * El desenfoque va en un pseudoelemento, no en la propia cabecera.
 *
 * backdrop-filter convierte al elemento en bloque contenedor de sus descendientes con
 * position: fixed. Como el menú desplegable de móvil es justo eso, se quedaba encerrado
 * dentro de la cabecera: se abría como una franja de 72 px en vez de ocupar la pantalla.
 * Poniéndolo en ::before el efecto se ve igual y la cabecera deja de atrapar al menú.
 */
.pc-cabecera::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: saturate(180%) blur(12px);
	pointer-events: none;
}

.pc-cabecera__barra > .wp-block-group {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--pc-cabecera-alto);
}

/* La navegación ocupa el espacio libre del centro y no se parte en dos líneas. */
.pc-cabecera .wp-block-navigation {
	flex: 1 1 auto;
	justify-content: flex-end;
}
.pc-cabecera .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(0.9rem, 0.3rem + 1.4vw, 1.9rem);
}
.pc-cabecera .wp-block-navigation-item__content { white-space: nowrap; }

/* Con seis entradas en el menú la cabecera va justa entre los 600 px del menú
   desplegable y el ancho completo, así que aprieta en dos pasos antes de romperse. */
@media (max-width: 1180px) {
	.pc-cabecera .wp-block-navigation__container { gap: 0.9rem; }
	.pc-cabecera .wp-block-navigation { font-size: 0.875rem; }
}

.pc-marca {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	flex-shrink: 0;
}
.pc-marca:hover { text-decoration: none; }

/*
 * La marca son dos trazados calcados del logotipo del cliente (scripts/logo.mjs), no texto.
 * Los dos llevan fill="currentColor", así que el color se decide aquí una sola vez y el pie
 * lo cambia a blanco sin necesitar otro fichero.
 */
.pc-marca {
	color: var(--wp--preset--color--grafito);
}

.pc-marca__isotipo {
	width: 34px;
	height: auto;
	flex-shrink: 0;
}

.pc-marca__grupo {
	display: block;
	min-width: 0;
}

/*
 * La palabra va a la altura que tenía cuando era texto en Archivo 800 (1,375rem), para que la
 * cabecera no cambie de proporciones. El ancho es automático: el viewBox manda.
 */
.pc-marca__texto {
	display: block;
	height: 1.375rem;
	width: auto;
}

.pc-pie .pc-marca {
	color: #fff;
}

.pc-marca__marca {
	display: block;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acero-medio);
	margin-top: 3px;
}

/* Navegación */
.pc-cabecera .wp-block-navigation {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}
.pc-cabecera .wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--grafito);
	padding-block: 0.4rem;
	border-bottom: 2px solid transparent;
	transition: border-color var(--pc-transicion), color var(--pc-transicion);
}
.pc-cabecera .wp-block-navigation a:hover,
.pc-cabecera .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--naranja);
	border-bottom-color: var(--wp--preset--color--naranja);
}

/* Teléfono y carrito */
.pc-cabecera__acciones {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
}

.pc-tel {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--grafito);
	text-decoration: none;
	white-space: nowrap;
}
.pc-tel:hover { color: var(--wp--preset--color--naranja); }
.pc-tel svg { flex-shrink: 0; }

/* El número escrito es lo primero que sobra: el icono sigue llamando igual, y son los
   60 px que necesita la navegación para no empujar el carrito fuera de la pantalla. */
@media (max-width: 1160px) {
	.pc-tel__numero { display: none; }
	/* Igual que el número de teléfono: el globo terráqueo se entiende solo y son ~55 px
	   que la cabecera necesita. La lista desplegada sigue diciendo los nombres enteros. */
	.pc-idiomas__nombre { display: none; }
}

/* Conmutador de idiomas.
   Es un <details> nativo: se abre y se cierra sin JavaScript y el teclado ya lo entiende.
   El desplegable va en posición absoluta para que no ensanche la cabecera al abrirse. */
.pc-idiomas { position: relative; }

.pc-idiomas__actual {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--grafito);
	white-space: nowrap;
	cursor: pointer;
	/* Sin esto los navegadores pintan su propio triangulito delante. */
	list-style: none;
}
.pc-idiomas__actual::-webkit-details-marker { display: none; }
.pc-idiomas__actual:hover { color: var(--wp--preset--color--naranja); }
.pc-idiomas__actual svg { flex-shrink: 0; }

/* La flecha se dibuja aquí y no en el PHP: es decoración, no contenido. */
.pc-idiomas__actual::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}
.pc-idiomas[open] .pc-idiomas__actual::after { transform: translateY(1px) rotate(-135deg); }

.pc-idiomas__lista {
	position: absolute;
	top: calc(100% + 0.4rem);
	right: 0;
	z-index: 30;
	min-width: 9.5rem;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	background: #fff;
	border: 1px solid var(--wp--preset--color--borde);
	border-radius: 0.5rem;
	box-shadow: 0 12px 28px rgba(18, 24, 29, 0.16);
}
.pc-idiomas__lista li { margin: 0; }
.pc-idiomas__lista a {
	display: block;
	padding: 0.5rem 0.6rem;
	border-radius: 0.35rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--grafito);
	text-decoration: none;
	white-space: nowrap;
}
.pc-idiomas__lista a:hover { background: var(--wp--preset--color--hueso); }
/* El idioma en el que ya estás se marca, para no hacer clic en él pensando que cambia algo. */
.pc-idiomas__lista a[aria-current] {
	font-weight: 700;
	color: var(--wp--preset--color--naranja);
}

/* El menú desplegable, antes de los 600 px de WordPress.
   Con la marca, seis entradas, el teléfono y el carrito, la cabecera necesita unos 1.120 px
   para caber entera. WordPress pasa al botón ☰ a los 600, así que entre medias la navegación
   pedía 460 px que no existían y empujaba el carrito fuera de la pantalla: hasta 250 px de
   desbordamiento lateral a 700 px de ancho. Esto adelanta el cambio al punto en el que de
   verdad deja de caber. Son las mismas reglas que aplica el núcleo por debajo de 600 px. */
@media (max-width: 1160px) {
	.pc-cabecera .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.pc-cabecera .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Botones
   ---------------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color var(--pc-transicion), transform var(--pc-transicion), box-shadow var(--pc-transicion);
	line-height: 1.2;
}
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button__link:active { transform: translateY(0); }

/* Botón secundario: contorno sobre fondo claro */
.is-style-contorno .wp-block-button__link,
.wp-block-button.is-style-contorno .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--grafito);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--grafito);
}
.is-style-contorno .wp-block-button__link:hover {
	background: var(--wp--preset--color--grafito);
	color: #fff;
}

/* Sobre fondo oscuro (hero) */
.pc-sobre-oscuro .is-style-contorno .wp-block-button__link {
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.pc-sobre-oscuro .is-style-contorno .wp-block-button__link:hover {
	background: #fff;
	color: var(--wp--preset--color--grafito);
}

/* -------------------------------------------------------------------------
   Piezas reutilizables
   ---------------------------------------------------------------------- */

/* Antetítulo naranja en versalitas */
.pc-antetitulo {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.75rem !important;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--naranja);
	margin-bottom: 0.75rem;
}
.pc-sobre-oscuro .pc-antetitulo { color: #FFB067; }

/* En theme.json todos los encabezados van en azul acero, que sobre el grafito de las secciones
   oscuras casi no se lee. Aquí heredan el color de la propia sección en vez de forzar el blanco,
   para que siga valiendo si algún día se cambia el color de una de ellas. */
.pc-sobre-oscuro :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* Distintivo pequeño */
.pc-distintivo {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--wp--custom--radio--pill, 999px);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
}
.pc-distintivo--verde { background: var(--wp--preset--color--verde-suave); color: var(--wp--preset--color--verde); }
.pc-distintivo--naranja { background: var(--wp--preset--color--naranja-suave); color: #A85200; }
.pc-distintivo--acero { background: var(--wp--preset--color--acero-claro); color: var(--wp--preset--color--acero-oscuro); }

/* La píldora de la patente, bajo el titular de «Cómo funciona». Un poco más grande que un
   distintivo de tarjeta, porque aquí no acompaña a nada: va sola. */
.pc-patente {
	margin: 0.5rem 0 0;
	padding: 0.4rem 0.9rem;
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * La franja de datos, entre el hero y los modelos
 *
 * Esto ha sido tres cosas: cinco renglones de 14 px en una barra fina; una sección de 459 px con
 * cuatro cifras enormes y cinco sellos, que leía mejor pero repetía ocho de sus nueve datos más
 * abajo en la misma portada; y cuatro datos con iconito de 22 px separados por filetes verticales.
 * La tercera decía lo justo, pero se veía pobre: 13 px de texto y unas rayas de 1 px debajo de una
 * foto a sangre, en una portada donde todo lo demás son tarjetas.
 *
 * Ahora son cuatro tarjetas blancas que se montan sobre el borde de abajo del hero. No es adorno:
 *
 *  - Cosen un corte que estaba mal. Entre la foto del hero y esta franja había 32 px de blanco que
 *    no ponía el tema: es el margen que WordPress le da a todo bloque de primer nivel
 *    (--wp--style--block-gap). La franja flotaba entre la foto y los modelos sin ser de ninguno.
 *  - Y salen gratis de alto. Con ese margen fuera, la portada mide 10.599 px en vez de 10.601: los
 *    32 px de costura pagan las tarjetas enteras.
 *
 * Cuánto se montan: 4 rem de 64 rem para arriba. El hero deja 128 px de foto oscura por debajo de
 * sus botones, y ese hueco no depende del alto de la ventana —el hero lo marca su contenido, mide
 * 740 px lo mismo a 900 que a 660 px de alto—, así que quedan 64 px de aire entre los botones y
 * las tarjetas en cualquier pantalla. En el móvil no se montan: allí el hero va justo.
 *
 * Las columnas siguen escritas a mano y no con auto-fit. Antes era por el filete vertical, que ya
 * no está; ahora es porque con auto-fit las cuatro se parten en 3 + 1 en cuanto la ventana cae en
 * el sitio equivocado, y una tarjeta suelta en la segunda fila queda fatal.
 *
 * No llevan efecto al pasar el ratón, al revés que .pc-tarjeta: aquellas contienen enlaces y estas
 * no se pulsan. Levantar algo que no lleva a ningún sitio es prometer un clic que no existe.
 *
 * Todo esto es CSS: patterns/confianza.php no se toca. El recuadro del icono se pinta sobre el
 * propio <svg> en vez de envolverlo en un <span>, y así el HTML servido no cambia ni un byte. Eso
 * deja fuera la caché de patrones, el ciclo de traducciones y revisar.mjs, que en :634 busca
 * <ul class="pc-franja__lista"> literal —con esa clase y ninguna más— y cuenta 4 <strong> dentro.
 * ---------------------------------------------------------------------- */

.pc-franja {
	/* Cuánto suben las tarjetas por encima del borde del hero. */
	--pc-monta: 0rem;

	position: relative;
	z-index: 1;

	/* flow-root, y no otra cosa: sin él, el margen negativo de la lista se fusiona con el borde
	   superior de la sección y lo que sube es la sección entera, fondo hueso incluido, tapando la
	   foto justo donde queremos que se vea. */
	display: flow-root;

	margin-block-start: 0;
	border-bottom: 1px solid var(--pc-borde);
	background: var(--wp--preset--color--hueso);
}
.pc-franja__lista {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	margin-top: calc(-1 * var(--pc-monta));
	/* El aire de arriba es solo para el móvil, donde no se montan y la primera tarjeta quedaría
	   pegada a la foto. En cuanto se montan se quita: ese hueco ya lo pone el salto sobre el hero. */
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
}
.pc-franja__dato {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: 0.85rem;
	align-items: start;
	padding: var(--wp--preset--spacing--20);
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio);
	background: var(--wp--preset--color--blanco);
	box-shadow: var(--wp--preset--shadow--sutil);
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--wp--preset--color--acero-medio);
}
.pc-franja__dato strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--acero-oscuro);
}

/* El recuadro del icono va sobre el propio <svg>, que llega con width y height de 22 en el atributo
   desde producan_icono_sello(): el CSS gana y el dibujo se reescala solo con su viewBox. */
.pc-franja__dato svg {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.65rem;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radio--md);
	background: var(--wp--preset--color--naranja-suave);
	/* El naranja de .pc-distintivo--naranja: el de la paleta no contrasta sobre naranja-suave. */
	color: #a85200;
}

/* En cuanto hay sitio, dos por fila, el icono encima del texto y ya montadas sobre el hero. */
@media (min-width: 34rem) {
	.pc-franja {
		--pc-monta: 2.5rem;
	}
	.pc-franja__lista {
		padding-top: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}
	.pc-franja__dato {
		display: block;
		padding: var(--wp--preset--spacing--30);
		box-shadow: var(--wp--preset--shadow--elevada);
		font-size: 0.9375rem;
	}
	.pc-franja__dato strong { margin-bottom: 0.25rem; font-size: 1rem; }
	.pc-franja__dato svg { width: 2.875rem; height: 2.875rem; margin-bottom: 0.85rem; }
}

/* Y las cuatro en una fila. */
@media (min-width: 64rem) {
	.pc-franja { --pc-monta: 4rem; }
	.pc-franja__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */

/*
 * La portada arranca a sangre: el hero pega con la cabecera, sin franja blanca en medio.
 *
 * WordPress separa los hijos de .wp-site-blocks —cabecera, main y pie— con el blockGap del
 * theme.json, que son 2 rem. En el resto de plantillas no se nota, porque el <main> lleva su
 * propio relleno arriba y debajo hay fondo claro. Aquí sí se veía: el hero es oscuro y va a
 * sangre, así que esos 32 px salían como una banda blanca entre el menú y la imagen.
 *
 * Se ata al hero y no a la clase .home para que valga si algún día la cabecera se usa en otra
 * página, y para que una plantilla normal siga teniendo su separación.
 */
main#contenido:has(> .pc-hero:first-child) {
	margin-block-start: 0;
}

.pc-hero {
	position: relative;
	isolation: isolate;
	overflow: clip;
	min-height: min(84vh, 46rem);
	display: flex;
	align-items: center;
}

.pc-hero__medio,
.pc-hero__medio picture {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: block;
}
.pc-hero__medio img,
.pc-hero__medio video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% 62%;
}
/*
 * El vídeo se coloca encima de la foto, no en su lugar: la foto sigue siendo el póster, lo que
 * se ve en móvil y el respaldo con «reducir movimiento». Va después en el HTML, así que pinta
 * por delante sin necesidad de z-index. Lo enseña hero-video.js quitándole el «hidden», y solo
 * cuando el vídeo ha empezado a reproducirse de verdad: si la reproducción automática está
 * bloqueada, se queda la foto y no se nota nada.
 */
.pc-hero__medio video {
	position: absolute;
	inset: 0;
}
.pc-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(18,24,29,0.42) 0%, rgba(18,24,29,0.20) 40%, rgba(18,24,29,0.78) 100%),
		linear-gradient(95deg, rgba(18,24,29,0.90) 0%, rgba(18,24,29,0.62) 38%, rgba(18,24,29,0.05) 78%);
}

/*
 * Botón para parar el vídeo de fondo. Lo crea hero-video.js, no está en el HTML.
 *
 * No es un adorno: algo que se mueve solo y dura más de cinco segundos tiene que poder pararse
 * (WCAG 2.2.2). Es el mismo criterio que el «Parar el giro» del visor 3D de más abajo, y que
 * los controles que conserva el vídeo de «cómo funciona».
 *
 * Va discreto —el mismo tratamiento que .pc-boton--contorno pero en pequeño— porque compite
 * con las tres llamadas a la acción del hero y no debe ganarles. El foco de teclado se lo pone
 * la regla global de :focus-visible.
 */
.pc-hero__pausa {
	position: absolute;
	right: var(--wp--preset--spacing--30);
	/*
	 * Los 6rem no son un capricho: la franja de datos que va debajo se sube por encima del hero
	 * —unos 4rem— para que las tarjetas monten sobre la foto. Pegado al borde inferior, el botón
	 * quedaba a la misma altura que las tarjetas y parecía que se chocaban. Desde aquí queda
	 * claramente dentro de la cabecera.
	 */
	bottom: 6rem;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.8rem;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1;
	color: #fff;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	transition: background 0.15s ease, color 0.15s ease;
}
.pc-hero__pausa:hover {
	background: #fff;
	color: var(--wp--preset--color--grafito);
}

.pc-hero__envoltorio {
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
	.pc-hero { min-height: 0; }
	.pc-hero__envoltorio { padding-inline: var(--wp--preset--spacing--30); }
	.pc-hero__contenido { padding-block: 3.5rem 3rem; }
	/*
	 * Con dos botones bastaba con repartirse la fila. Con tres elementos y white-space:nowrap
	 * rompía en un 2+1 descuadrado, y el reparto dependía de lo largo que fuera cada texto.
	 * Apilados es predecible y no hay que revisarlo cada vez que cambia una palabra.
	 */
	.pc-hero__botones { flex-direction: column; align-items: stretch; }
}

.pc-hero__contenido {
	position: relative;
	padding-block: clamp(4.5rem, 3rem + 9vw, 8rem);
	max-width: 38rem;
	color: #fff;
}

.pc-hero__titular {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 800;
	font-size: clamp(2.375rem, 1.55rem + 3.4vw, 4.25rem);
	line-height: 1.03;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.pc-hero__entrada {
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.88);
	margin-block: 1.35rem 2.1rem;
	max-width: 33rem;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
}

.pc-hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Botones propios: dentro de un bloque HTML no llegan las clases de los botones de WordPress. */
.pc-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.95rem 1.75rem;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--pc-transicion), color var(--pc-transicion), transform var(--pc-transicion);
}
.pc-boton:hover { transform: translateY(-1px); text-decoration: none; }
.pc-boton--principal { background: var(--wp--preset--color--naranja); color: #fff; }
.pc-boton--principal:hover { background: #9C4700; color: #fff; }
.pc-boton--contorno {
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(4px);
}
.pc-boton--contorno:hover { background: #fff; color: var(--wp--preset--color--grafito); }

/*
 * Tercer nivel del hero: enlace, no botón. Con tres cajas del mismo peso la vista no sabe cuál
 * pulsar, así que "Cómo funciona" —que es informarse, no comprar— se queda sin caja.
 * pc-boton--linea no vale aquí: es grafito y sobre la foto oscura no se vería.
 * El padding vertical es el mismo que el de .pc-boton para que la fila cuadre por el centro, y
 * lleva text-shadow como la entradilla porque va sobre foto, sin caja que lo separe del fondo.
 */
.pc-hero__enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.95rem 0.5rem;
	color: #fff;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.28);
	transition: color var(--pc-transicion);
}
.pc-hero__enlace:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.pc-hero__enlace span { transition: transform var(--pc-transicion); }
.pc-hero__enlace:hover span { transform: translateX(3px); }

/* Aquí vivía .pc-hero__chips, cuatro píldoras con los datos clave. Tres de los cuatro se repetían
   en la franja de justo debajo, que es donde están ahora (.pc-franja). */

/* -------------------------------------------------------------------------
   Tarjetas
   ---------------------------------------------------------------------- */

.pc-tarjeta {
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio);
	background: #fff;
	overflow: hidden;
	transition: border-color var(--pc-transicion), transform var(--pc-transicion), box-shadow var(--pc-transicion);
	height: 100%;
}
.pc-tarjeta:hover {
	border-color: var(--wp--preset--color--acero-medio);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(18, 24, 29, 0.08);
}

/* Las dos tarjetas de modelo, una al lado de otra hasta que no caben. */
.pc-modelos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/* Tarjeta de modelo en la portada */
.pc-modelo { display: flex; flex-direction: column; }

/*
 * La foto va en una caja con proporción propia y la rellena con object-fit.
 *
 * Antes esto era una rejilla con `display: contents` en el <picture> y `max-height: 100%`
 * en la imagen. Al desaparecer el <picture>, la imagen pasaba a ser ítem de rejilla, y ahí
 * ese porcentaje se resuelve contra el área de rejilla: como la fila era de tamaño
 * automático, nunca llegaba a resolverse. La imagen se dibujaba a su alto real —unos 780 px
 * dentro de una caja de 317— y se pintaba encima del cuerpo de la tarjeta. El precio y las
 * ventajas quedaban tapados y el botón de comprar no se podía ni pulsar.
 *
 * Las dos fotos salen ya en 4:3 de scripts/recortes-modelos.mjs, así que a `contain` no le
 * queda nada que encajar: la imagen ocupa la caja entera y las dos tarjetas quedan calcadas.
 */
.pc-modelo__figura {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #fff;
	border-bottom: 1px solid var(--pc-borde);
}
/* El <a> hereda el alto igual que el <picture>: es exactamente la cadena de alturas que rompió
   la última vez, y romperla otra vez volvería a dibujar la imagen a su tamaño real encima del
   precio y del botón. */
.pc-modelo__figura a,
.pc-modelo__figura picture { display: block; height: 100%; }
.pc-modelo__figura img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* De dónde saca la corriente, que es lo que decide el modelo (no lo único que cambia: el P3
   también cuesta más y trae batería y cargador dentro). */
.pc-modelo__alimentacion {
	margin: 0;
	align-self: flex-start;
	gap: 0.5rem;
	padding: 0.45rem 0.85rem;
	font-size: 0.9375rem;
}
.pc-modelo__alimentacion svg { flex-shrink: 0; }
.pc-modelo__cuerpo {
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	flex: 1;
}
.pc-modelo__titulo {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0;
	color: var(--wp--preset--color--acero-oscuro);
}
.pc-modelo__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--acero-medio);
}
.pc-modelo__lista li {
	display: grid;
	grid-template-columns: 1.15rem 1fr;
	gap: 0.55rem;
	align-items: start;
	line-height: 1.45;
}
.pc-modelo__lista svg { color: var(--wp--preset--color--verde); margin-top: 0.2em; }
/* -------------------------------------------------------------------------
 * Elegir versión y comprar, sin salir de la portada
 *
 * Todo con radios de verdad y selectores hermanos: ni una línea de JavaScript. Los radios
 * están fuera de flujo y sin ver, pero siguen recibiendo el foco y respondiendo a las
 * flechas del teclado, que es como se espera que funcione un grupo de opciones.
 * ---------------------------------------------------------------------- */

.pc-comprar {
	position: relative;
	margin-top: auto;
	padding-top: 0.35rem;
	display: grid;
	gap: 0.85rem;
}

.pc-comprar__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pc-comprar__opciones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--pc-borde);
	border-radius: 999px;
	background: var(--wp--preset--color--hueso);
}
.pc-comprar__opciones label {
	display: grid;
	place-items: center;
	padding: 0.5rem 0.4rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--acero-medio);
	cursor: pointer;
	transition: background var(--pc-transicion), color var(--pc-transicion);
}
.pc-comprar__opciones label:hover { color: var(--wp--preset--color--acero-oscuro); }

/* La opción marcada se pinta y enseña su precio; la otra se esconde. */
.pc-comprar__radio:nth-of-type(1):checked ~ .pc-comprar__opciones label:nth-of-type(1),
.pc-comprar__radio:nth-of-type(2):checked ~ .pc-comprar__opciones label:nth-of-type(2) {
	background: #fff;
	color: var(--wp--preset--color--acero-oscuro);
	box-shadow: 0 1px 3px rgba(18, 24, 29, 0.14);
}
.pc-comprar__radio:nth-of-type(1):checked ~ .pc-comprar__paneles .pc-comprar__panel--b,
.pc-comprar__radio:nth-of-type(2):checked ~ .pc-comprar__paneles .pc-comprar__panel--a {
	display: none;
}

/* El radio no se ve, así que el foco de teclado lo enseña su etiqueta. */
.pc-comprar__radio:nth-of-type(1):focus-visible ~ .pc-comprar__opciones label:nth-of-type(1),
.pc-comprar__radio:nth-of-type(2):focus-visible ~ .pc-comprar__opciones label:nth-of-type(2) {
	outline: 2px solid var(--wp--preset--color--naranja);
	outline-offset: 2px;
}

.pc-comprar__panel { display: grid; gap: 0.7rem; }

.pc-comprar__precio {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 1.625rem;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wp--preset--color--grafito);
}
.pc-comprar__precio s {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--acero-medio);
}
.pc-comprar__precio small {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--acero-medio);
}
.pc-comprar__panel .pc-boton { width: 100%; }

/* Era un enlace gris de 14 px justo debajo del botón naranja, y al lado de esa masa de color no
   se veía. Ahora es el botón secundario del tema (.pc-boton--linea), a todo el ancho de la
   tarjeta y con la misma altura que el de comprar. */
.pc-comprar__ficha {
	width: 100%;
	gap: 0.4rem;
	font-size: 1rem;
}
.pc-comprar__ficha span { transition: transform var(--pc-transicion); }
.pc-comprar__ficha:hover span { transform: translateX(3px); }

/* Tarjetas del blog.
   Varias fotos del cliente son verticales: recortadas a 16:9 por el centro se quedan en chapa
   lisa y no se reconoce nada. Subiendo el encuadre entran el logo y la parte de arriba. */
.pc-entradas .wp-block-post-featured-image img { object-position: center 30%; }

/*
 * El modelo 3D de la portada.
 *
 * Aquí había una rejilla de dos columnas —el modelo estrecho a la izquierda y el vídeo de YouTube
 * ancho a la derecha— y el reparto salía 336 px contra 864: al lado del vídeo, el producto parecía
 * una miniatura. El vídeo se ha bajado a «Somos el taller» y el modelo se ha quedado solo y
 * centrado, que es lo que pidió el cliente.
 *
 * El tope de alto es el que manda, porque el modelo es vertical (662x960): ver .pc-visor3d más
 * abajo. Aquí solo se sube, de 34rem a 44rem, con un tope en vh para que en un portátil bajo no
 * haya que hacer scroll para ver el comedero entero. Salen unos 485 px de ancho.
 */
.pc-modelo3d { margin: 0; }
.pc-modelo3d .pc-visor3d { --pc-visor3d-alto: min(46rem, 76vh); }

/*
 * El conmutador de una boca o dos.
 *
 * Es el mismo invento que .pc-comprar__opciones —radios escondidos, etiquetas encima y :checked
 * pintando la elegida—, con dos diferencias. Va sobre grafito, así que la pista es un blanco al 8 %
 * en vez del hueso de la portada y la píldora elegida es blanca del todo. Y se centra al ancho del
 * visor, que aquí no es el de la columna: el modelo mide unos 470 px y un conmutador de 1200 px
 * encima parecería de otra sección.
 *
 * Los radios tienen que seguir siendo los primeros hijos del <figure>: las reglas van con «~».
 */
.pc-modelo3d__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.pc-modelo3d__opciones {
	max-width: calc(min(46rem, 76vh) * 662 / 960);
	margin: 0 auto var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
}
.pc-modelo3d__opciones label {
	display: grid;
	place-items: center;
	padding: 0.5rem 0.4rem;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: background var(--pc-transicion), color var(--pc-transicion);
}
.pc-modelo3d__opciones label:hover { color: #fff; }

.pc-modelo3d__radio:nth-of-type(1):checked ~ .pc-modelo3d__opciones label:nth-of-type(1),
.pc-modelo3d__radio:nth-of-type(2):checked ~ .pc-modelo3d__opciones label:nth-of-type(2) {
	background: #fff;
	color: var(--wp--preset--color--grafito);
}

/* El radio no se ve, así que el foco de teclado lo enseña su etiqueta. */
.pc-modelo3d__radio:nth-of-type(1):focus-visible ~ .pc-modelo3d__opciones label:nth-of-type(1),
.pc-modelo3d__radio:nth-of-type(2):focus-visible ~ .pc-modelo3d__opciones label:nth-of-type(2) {
	outline: 2px solid var(--wp--preset--color--naranja);
	outline-offset: 2px;
}

.pc-videos__yt figcaption {
	margin-top: 0.7rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	text-align: center;
}
.pc-videos__yt figcaption a { color: #fff; text-underline-offset: 0.15em; }

/*
 * La ficha tecnica del modelo.
 *
 * En pantalla ancha va a la derecha del comedero, que es donde antes no habia nada: el visor mide
 * unos 470 px y la seccion 78 rem, asi que sobraba medio ancho a cada lado. En pantalla estrecha
 * cae debajo, centrada y con el mismo ancho que el modelo.
 *
 * La columna del modelo se fija con el mismo calculo que .pc-modelo3d__opciones —el alto del visor
 * por la proporcion 662/960— en vez de dejarla en auto. Con auto, model-viewer no declara un ancho
 * intrinseco util y la rejilla se reparte a ojo.
 */
.pc-ficha3d {
	margin: var(--wp--preset--spacing--40) auto 0;
	max-width: calc(min(46rem, 76vh) * 662 / 960);
}
.pc-ficha3d__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pc-ficha3d__fila:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.pc-ficha3d dt {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.68);
}
.pc-ficha3d dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	/* Los pesos y las medidas quedan uno debajo de otro: con cifras de ancho fijo no bailan. */
	font-variant-numeric: tabular-nums;
}

/* De los dos valores que cambian con la version solo se enseña el elegido. Mismas reglas que el
   conmutador de arriba: los radios son los primeros hijos del <figure> y esto va con «~». */
.pc-ficha3d__v { display: none; }
.pc-modelo3d__radio:nth-of-type(1):checked ~ .pc-ficha3d .pc-ficha3d__v:nth-of-type(1),
.pc-modelo3d__radio:nth-of-type(2):checked ~ .pc-ficha3d .pc-ficha3d__v:nth-of-type(2) {
	display: inline;
}

@media (min-width: 62rem) {
	.pc-modelo3d {
		display: grid;
		grid-template-columns: calc(min(46rem, 76vh) * 662 / 960) minmax(15rem, 21rem);
		grid-template-rows: auto 1fr;
		justify-content: center;
		column-gap: var(--wp--preset--spacing--60);
	}
	.pc-modelo3d__opciones { grid-column: 1; grid-row: 1; }
	.pc-modelo3d .pc-visor3d { grid-column: 1; grid-row: 2; }
	.pc-ficha3d {
		grid-column: 2;
		grid-row: 2;
		align-self: center;
		margin: 0;
		max-width: none;
	}
}

/* La miniatura de YouTube: es un botón, no una imagen decorativa. Vive en patterns/prueba-social.php
   desde que el vídeo se bajó ahí; las clases se llaman pc-videos__* porque las comparte el JS
   (assets/js/youtube.js) y el comprobador (scripts/revisar.mjs), y renombrarlas no arreglaría nada. */
.pc-videos__fachada {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	border-radius: var(--pc-radio);
	overflow: hidden;
	cursor: pointer;
}
.pc-videos__fachada img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: opacity var(--pc-transicion);
}
.pc-videos__fachada:hover img { opacity: 0.85; }

/* El reproductor que sustituye a la miniatura al pulsar. */
.pc-videos__marco {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--pc-radio);
	background: #000;
}

/* En pantalla estrecha el tope en rem sobra: manda el ancho, y 72vh dejaría el comedero cortado
   por arriba y por abajo en un móvil apaisado. */
@media (max-width: 48rem) {
	.pc-modelo3d .pc-visor3d { --pc-visor3d-alto: 34rem; }
	.pc-modelo3d__opciones { max-width: calc(34rem * 662 / 960); }
}

/* -------------------------------------------------------------------------
   El visor 3D
   -------------------------------------------------------------------------
   Sirve para tres sitios con fondos distintos —el grafito de la portada, el
   claro de la página de dos perros y el de la ficha de producto—, así que el
   lienzo es transparente y los textos heredan el color de donde caigan.
   ---------------------------------------------------------------------- */

/*
 * El modelo es vertical, así que lo que hay que limitar es el alto y no el ancho: en la portada
 * cae en una columna de 21rem y se porta, pero en la página de dos perros la columna es el ancho
 * entero del texto y, con la proporción 662/960, un visor de 44rem de ancho mediría 64rem de alto.
 * Se fija el alto máximo y el ancho sale de ahí. Mismo criterio que el visor 360 de fotos.
 */
.pc-visor3d {
	--pc-visor3d-alto: 34rem;
	max-width: calc(var(--pc-visor3d-alto) * 662 / 960);
	margin: 0 auto;
}

.pc-visor3d__lienzo {
	display: block;
	width: 100%;
	/*
	 * El height:auto no sobra. model-viewer trae en su propio :host el alto por defecto de un
	 * elemento reemplazado —300x150 px—, y con una altura explícita el navegador ignora el
	 * aspect-ratio: el visor salía de 336x150 y el comedero aparecía como un sello. Los estilos
	 * del documento ganan a los de :host, así que basta con devolver la altura a auto.
	 *
	 * Por eso el shortcode original llevaba style="height:600px": un alto fijo en píxeles esquiva
	 * el problema, pero no se adapta. Con la proporción del póster (662x960) sí.
	 */
	height: auto;
	aspect-ratio: 662 / 960;
	background: transparent;
	--poster-color: transparent;
	--progress-bar-color: var(--wp--preset--color--naranja);
	cursor: grab;
}
.pc-visor3d__lienzo:active { cursor: grabbing; }

.pc-visor3d__mandos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.85rem;
	margin: 0.7rem 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

/*
 * El botón solo aparece si hay JavaScript. No es una precaución de más: model-viewer ES
 * JavaScript, así que sin él no hay nada que parar y el botón sería un adorno muerto.
 * La clase pc-js la pone functions.php en el <html>, antes de pintar nada.
 */
.pc-visor3d__pausa { display: none; }
.pc-js .pc-visor3d__pausa {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8125rem;
	line-height: 1.4;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity var(--pc-transicion);
}
.pc-js .pc-visor3d__pausa:hover { opacity: 1; }

.pc-visor3d__ayuda { opacity: 0.7; }

/* En la ficha de producto va dentro de la galería, de última diapositiva. Sus reglas están abajo,
   con las de la galería (.pc-galeria__3d). */

/* Caso de uso: foto a sangre con texto encima */
.pc-caso {
	position: relative;
	border-radius: var(--pc-radio);
	overflow: hidden;
	min-height: 22rem;
	display: flex;
	align-items: flex-end;
	background: var(--wp--preset--color--acero-oscuro);
}
.pc-caso img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 420ms cubic-bezier(0.2, 0, 0.1, 1);
}
.pc-caso::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(18,24,29,0) 32%, rgba(18,24,29,0.55) 62%, rgba(18,24,29,0.90) 100%);
}
.pc-caso:hover img { transform: scale(1.04); }
.pc-caso__texto {
	position: relative;
	z-index: 2;
	padding: var(--wp--preset--spacing--40);
	color: #fff;
}
.pc-caso__titulo {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 0.35rem;
	color: #fff;
}
.pc-caso__texto p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

/* -------------------------------------------------------------------------
   Tabla de especificaciones
   ---------------------------------------------------------------------- */

.pc-especificaciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 0 var(--wp--preset--spacing--50);
	margin: 0;
}
.pc-especificaciones div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: baseline;
	padding-block: 0.85rem;
	border-bottom: 1px solid var(--pc-borde);
}
.pc-especificaciones dt {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--acero-medio);
}
.pc-especificaciones dd {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
	text-align: right;
	color: var(--wp--preset--color--grafito);
}

/* Comparativa metal / plástico */
.pc-comparativa {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.pc-comparativa th,
.pc-comparativa td {
	padding: 0.9rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--pc-borde);
	vertical-align: top;
}
.pc-comparativa thead th {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--acero-oscuro);
	border-bottom-width: 2px;
	border-bottom-color: var(--wp--preset--color--acero-oscuro);
}
.pc-comparativa tbody th {
	font-weight: 500;
	color: var(--wp--preset--color--acero-medio);
}
.pc-comparativa .pc-col-destacada {
	background: var(--wp--preset--color--naranja-suave);
	font-weight: 600;
	color: var(--wp--preset--color--grafito);
}
.pc-comparativa thead .pc-col-destacada {
	background: var(--wp--preset--color--naranja);
	color: #fff;
	border-bottom-color: var(--wp--preset--color--naranja);
	border-radius: var(--pc-radio-sm) var(--pc-radio-sm) 0 0;
}

@media (max-width: 640px) {
	/*
	 * Encajada a la fuerza en 375 px la tabla queda en columnas de una palabra y la del
	 * plástico se corta. Se le pone un ancho mínimo legible y se deja que el envoltorio la
	 * desplace, que es más fácil de leer que descifrarla.
	 */
	.pc-comparativa { font-size: 0.875rem; min-width: 32rem; }
	.pc-comparativa th, .pc-comparativa td { padding: 0.7rem 0.6rem; }
}

/* -------------------------------------------------------------------------
   Preguntas frecuentes
   ---------------------------------------------------------------------- */

.pc-faq { border-top: 1px solid var(--pc-borde); }
.pc-faq details {
	border-bottom: 1px solid var(--pc-borde);
}
.pc-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--acero-oscuro);
}
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary::after {
	content: '';
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--wp--preset--color--naranja);
	border-bottom: 2px solid var(--wp--preset--color--naranja);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--pc-transicion);
}
.pc-faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pc-faq details > *:not(summary) {
	margin: 0 0 1.15rem;
	max-width: 46rem;
	color: var(--wp--preset--color--acero-medio);
	font-size: 0.9688rem;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   WooCommerce · rejilla de tienda
   ---------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}
/*
 * WooCommerce mete un clearfix con ::before/::after en la lista de productos. Al pasarla a
 * grid, esos pseudoelementos cuentan como celdas y dejaban la primera fila desplazada.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none !important; display: none !important; }

ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio);
	overflow: hidden;
	background: #fff;
	transition: border-color var(--pc-transicion), transform var(--pc-transicion), box-shadow var(--pc-transicion);
}
ul.products li.product:hover {
	border-color: var(--wp--preset--color--acero-medio);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(18, 24, 29, 0.08);
}

ul.products li.product a img {
	margin: 0;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--hueso);
	border-bottom: 1px solid var(--pc-borde);
	padding: 1rem;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--titulares) !important;
	font-size: 1.0625rem !important;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--acero-oscuro);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0.4rem !important;
	margin: 0;
}
ul.products li.product .price {
	padding: 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--wp--preset--color--grafito);
	margin-bottom: 0.9rem;
}
ul.products li.product .price del { color: var(--wp--preset--color--acero-medio); font-weight: 400; font-size: 0.875em; }
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .star-rating { margin: 0 var(--wp--preset--spacing--30) 0.6rem; color: var(--wp--preset--color--naranja); font-size: 0.8em; }

ul.products li.product .button {
	margin: auto var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	text-align: center;
}

.woocommerce span.onsale {
	background: var(--wp--preset--color--verde);
	color: #fff;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.7rem;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
}

/*
 * Y la colocación, aparte y con selectores largos a propósito.
 *
 * WooCommerce coloca la insignia con `.woocommerce ul.products li.product .onsale`, que es
 * 0-4-2 de especificidad y trae `top:0; right:0; margin:-.5em -.5em 0 0`: la saca media línea
 * fuera de la tarjeta por arriba y por la derecha. Como la tarjeta lleva `overflow:hidden`
 * (más arriba, para que la foto respete el redondeo), la etiqueta salía cortada por dos lados
 * —y en móvil, casi ilegible—.
 *
 * El bloque de aquí arriba no podía ganarle: `.woocommerce span.onsale` es 0-2-1. Así que la
 * posición va en su propio bloque con un selector de 0-4-3. Si alguien lo «simplifica» a
 * `.onsale`, la etiqueta se vuelve a cortar sin que nada avise.
 */
.woocommerce ul.products li.product span.onsale,
.woocommerce div.product > span.onsale {
	top: 0.75rem;
	inset-inline-start: 0.75rem;
	inset-inline-end: auto;
	margin: 0;
}

.woocommerce-result-count,
.woocommerce-ordering { font-size: 0.9375rem; color: var(--wp--preset--color--acero-medio); }

/* -------------------------------------------------------------------------
   WooCommerce · ficha de producto
   ---------------------------------------------------------------------- */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	align-items: start;
}
/*
 * WooCommerce maqueta la ficha con floats y anchos en porcentaje sobre `div.images` y
 * `.summary`. Sus selectores tienen más especificidad que los nuestros, así que aquí hace
 * falta forzar: si no, las dos columnas se quedan en un tercio del ancho disponible.
 */
.woocommerce div.product .woocommerce-product-gallery.images,
.woocommerce div.product .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1 / span 2;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}
.woocommerce div.product .summary.entry-summary,
.woocommerce div.product .summary {
	grid-column: 2;
	grid-row: 1;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

/* En pantalla estrecha, la ficha pasa a una sola columna. */
@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.woocommerce div.product .woocommerce-product-gallery.images,
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary.entry-summary,
	.woocommerce div.product .summary {
		grid-column: 1;
		grid-row: auto;
	}
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { grid-column: 1 / -1; }

/* Galería con raíl de miniaturas: es lo que pidió el cliente ("un carrusel tipo Amazon") */
.woocommerce div.product .woocommerce-product-gallery {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	min-width: 0;
	gap: var(--wp--preset--spacing--30);
	position: relative;
	opacity: 1 !important;
}

/*
 * El marco va en blanco, no en hueso: los recortes de producto vienen sobre blanco y, con el
 * fondo crema, se veía un rectángulo blanco flotando dentro de otro. En blanco el recorte se
 * funde con el marco, igual que en las tarjetas de la portada.
 */
.woocommerce-product-gallery__wrapper {
	grid-column: 2;
	margin: 0;
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio);
	overflow: hidden;
	background: #fff;
	/*
	 * El margen blanco alrededor de la foto vive AQUÍ y no en la diapositiva ni en la <img>, y no es
	 * una preferencia: es lo único que deja el zoom cuadrado.
	 *
	 * assets/js/galeria.js engancha jQuery.zoom a la diapositiva, y jQuery.zoom mete su copia a
	 * tamaño completo posicionada en absoluto con top:0 left:0. Un elemento absoluto se coloca
	 * desde la caja de RELLENO de su contenedor, y la caja de relleno empieza por fuera del
	 * relleno: con 20 px de relleno en la diapositiva, la copia arranca 20 px por encima y 20 a la
	 * izquierda de la foto que viene a sustituir, y al pasar el ratón la imagen da un salto. Medido:
	 * 22 px arriba y 21 a la izquierda. Con la diapositiva sin relleno, el salto es de 2 px, que es
	 * el desplazamiento propio del zoom.
	 *
	 * Aquí llegó a probarse el relleno, para dejar un paspartú blanco entre el borde y la foto. Se
	 * quitó por dos motivos: WooCommerce lo pisa desde su propia hoja, y sobre todo porque el
	 * encargo era que sobrara MENOS blanco, no más. Los recortes de producto ya vienen con su aire
	 * dentro del fichero.
	 */
}
/*
 * Una diapositiva cada vez.
 *
 * Cuando no hay carrusel suyo, WooCommerce reparte las imágenes de la segunda en adelante en
 * una rejilla de cuatro columnas. Aquí las lleva assets/js/galeria.js, que enseña una sola y
 * esconde las demás con el atributo `hidden`. Los selectores repiten los de WooCommerce para
 * poder ganarles por especificidad, sin recurrir a !important.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(n+2) {
	display: block;
	width: 100%;
	/*
	 * El cuadrado se declara AQUÍ, en la diapositiva, y no en la <img>, que es donde estaba: así el
	 * marco lo pone la caja y la foto se coloca dentro, sea vertical o apaisada, en vez de depender
	 * de la proporción del fichero. La diapositiva no lleva relleno a propósito; el porqué está en
	 * .woocommerce-product-gallery__wrapper, unas líneas más arriba.
	 *
	 * El cuadrado es un compromiso, y conviene saber cuál antes de cambiarlo: los recortes del
	 * comedero y las fotos de un perro son verticales (3:4) y las de dos perros son apaisadas
	 * (4:3). Con esa mezcla, un marco cuadrado es el que menos blanco deja en el peor caso; uno
	 * vertical dejaría el doble en la foto de los dos perros. Recortar para llenarlo no es opción:
	 * en un recorte de producto cortaría el producto.
	 */
	aspect-ratio: 1 / 1;
	/*
	 * Y el recorte importa: si la diapositiva no recorta la copia del zoom, esta se sale de la
	 * pantalla. En un móvil de 390 px eso son 253 px de desplazamiento horizontal en toda la
	 * ficha. Antes lo tapaba FlexSlider, que ponía `position: relative; overflow: hidden` en cada
	 * diapositiva por estilo en línea; al quitarlo, hay que decirlo aquí.
	 */
	position: relative;
	overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image[hidden],
.woocommerce div.product div.images .woocommerce-product-gallery__image[hidden]:nth-child(n+2) {
	display: none;
}
/*
 * La imagen llena el marco y se centra dentro. Decirlo así —y no con un aspect-ratio sobre la
 * propia <img>, que es como estaba— hace que el centrado no dependa de la proporción del fichero:
 * la caja la pone el marco y la foto se coloca dentro, sea vertical o apaisada.
 *
 * El height:100% no sobra, y los selectores largos tampoco: WooCommerce trae un
 * `.woocommerce div.product div.images img { height: auto }` que gana por especificidad a
 * cualquier selector corto. Sin repetirle el prefijo, la foto se sale del marco por abajo.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__image a { display: block; height: 100%; }
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/*
 * El raíl.
 *
 * Va como celda de la rejilla, con un alto máximo pensado para que coincida con la imagen
 * principal (que es cuadrada y ocupa el resto del ancho). Si hay más miniaturas de las que
 * caben, el raíl hace scroll en lugar de crecer y descuadrar la ficha.
 */
.woocommerce div.product .pc-galeria__rail {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 31rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--borde) transparent;
}
/*
 * Flexslider reparte las miniaturas en fila y les escribe el ancho en el atributo style.
 * Como aquí el raíl es vertical, hay que ignorarlo: si no, siete miniaturas se reparten
 * los 96 px de la columna y quedan de trece píxeles.
 */
.woocommerce div.product .pc-galeria__rail li { margin: 0; }
.woocommerce div.product .pc-galeria__mini {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	/*
	 * `position: relative` para que el texto oculto de dentro se ancle al propio botón.
	 * Si no, se ancla a la galería, se escapa del recorte del raíl y arrastra el ancho de
	 * la página: en un móvil de 390 px eran 253 px de desplazamiento horizontal.
	 */
	position: relative;
}
.woocommerce div.product .pc-galeria__mini img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
	padding: 6px;
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio-sm);
	opacity: 1;
	cursor: pointer;
	transition: border-color var(--pc-transicion), background var(--pc-transicion);
}
.woocommerce div.product .pc-galeria__mini:hover img {
	border-color: var(--wp--preset--color--acero-medio);
	background: #fff;
}
.woocommerce div.product .pc-galeria__mini[aria-selected="true"] img {
	border-color: var(--wp--preset--color--naranja);
	box-shadow: 0 0 0 1px var(--wp--preset--color--naranja);
}
.woocommerce div.product .pc-galeria__mini:focus-visible img {
	outline: 2px solid var(--wp--preset--color--naranja);
	outline-offset: 2px;
}

/*
 * La etiqueta de versión sobre la foto.
 *
 * Solo la llevan las fotos que son de UNA versión concreta (las tres en las que salen dos perros
 * comiendo a la vez). Cumple dos papeles: dice de qué versión es la foto, y es lo único que queda
 * de todo esto cuando no hay JavaScript, porque entonces no se esconde nada y la etiqueta es la
 * que evita que se lea como un error.
 *
 * En grafito y no en naranja a propósito: informa, no se pulsa. El naranja está reservado a lo que
 * responde al dedo.
 *
 * Y abajo a la izquierda, que es la única esquina libre: arriba a la izquierda está la insignia
 * de «¡Oferta!» de la ficha (línea 2268, desplazada para esquivar el raíl de miniaturas) y arriba
 * a la derecha, el botón de zoom. Puestas las dos arriba se pisaban: se leía «¡Oferta!» encima de
 * «…rros». Abajo, además, funciona mejor: se lee como el pie de la foto, que es lo que es.
 */
.pc-galeria__version {
	position: absolute;
	bottom: 0.75rem;
	inset-inline-start: 0.75rem;
	z-index: 2;
	background: rgba(18, 24, 29, 0.88);
	color: #fff;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 0.25rem 0.7rem;
	pointer-events: none;
}

/*
 * Y la miniatura que el filtro deja fuera.
 *
 * El navegador ya esconde lo que lleva `hidden`, pero aquí el raíl es un contenedor flex y sus
 * hijos reciben ancho por otro sitio: más vale decirlo que fiarse del orden de la cascada.
 */
.woocommerce div.product .pc-galeria__rail li[hidden] { display: none; }

@media (max-width: 640px) {
	.woocommerce div.product .woocommerce-product-gallery { grid-template-columns: 1fr; }
	.woocommerce-product-gallery__wrapper { grid-column: 1; }
	.woocommerce div.product .pc-galeria__rail {
		grid-column: 1;
		grid-row: 2;
		max-height: none;
		flex-direction: row;
		overflow-x: auto;
		overflow-y: hidden;
		padding-bottom: 0.25rem;
	}
	.woocommerce div.product .pc-galeria__rail li { width: 72px; flex-shrink: 0; }
}

/* Botón de zoom */
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 5;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--pc-borde);
	font-size: 0;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(18, 24, 29, 0.10);
}
.woocommerce-product-gallery__trigger::after {
	content: '';
	width: 15px;
	height: 15px;
	border: 2px solid var(--wp--preset--color--grafito);
	border-radius: 50%;
	box-shadow: 7px 7px 0 -5px var(--wp--preset--color--grafito);
	transform: translate(-2px, -2px);
}
.woocommerce-product-gallery__trigger:hover { border-color: var(--wp--preset--color--naranja); }

/*
 * El modelo 3D, de última diapositiva de la galería.
 *
 * Deja de ser cuadrada. Las fotos sí lo son, pero el comedero mide 662x960: en un cuadrado se
 * quedaría en 501 px de alto con la mitad del ancho vacía a los lados, y con su proporción son
 * 501x727, más de lo que medía en la sección que había antes debajo del resumen (352x510). No
 * descuadra nada, porque la columna de la galería mide 501 px de alto y la del texto 1317: crece
 * hacia un hueco que ya estaba vacío. En móvil, donde el raíl va debajo, lo que hace es bajarlo
 * 139 px mientras el 3D está elegido.
 *
 * El selector es tan largo como el de .woocommerce-product-gallery__image porque tiene que ganarle,
 * y ese lleva `div.product` delante para poder con los estilos de WooCommerce.
 */
.woocommerce div.product div.images .woocommerce-product-gallery__image.pc-galeria__3d {
	aspect-ratio: auto;
	/* El envoltorio no lleva relleno a propósito —ver más arriba: la copia del zoom saltaba 22 px—,
	   así que el aire de los mandos lo pone la diapositiva. */
	padding-bottom: 0.6rem;
}

/* Manda el alto y el ancho sale de él, igual que en .pc-modelo3d de la portada. El 100 % es el tope
   de verdad en cualquier pantalla normal; el min() solo evita que en un monitor enorme el visor se
   estire hasta el doble de lo que miden las fotos. */
.pc-galeria__3d .pc-visor3d {
	--pc-visor3d-alto: min(46rem, 78vh);
	max-width: min(100%, calc(var(--pc-visor3d-alto) * 662 / 960));
}
/* Centrados, y con el texto centrado además: en un móvil el botón y la ayuda no caben en la misma
   línea, y la segunda quedaría pegada a la izquierda dentro de una caja centrada. */
.pc-galeria__3d .pc-visor3d__mandos {
	justify-content: center;
	text-align: center;
	padding: 0 0.75rem;
}
.pc-galeria__3d-nota {
	margin: 0.25rem 0.75rem 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: var(--wp--preset--color--acero-medio);
}

/*
 * El distintivo de la miniatura. Sin él es una imagen del comedero como las otras cuatro y nadie la
 * pulsa: es lo que hacía el botón de play de la diapositiva de vídeo. Va sobre el botón, que ya es
 * `position: relative` por el texto oculto que lleva dentro.
 */
.woocommerce div.product .pc-galeria__mini--3d::after {
	content: '3D';
	position: absolute;
	right: 4px;
	bottom: 4px;
	z-index: 2;
	background: rgba(18, 24, 29, 0.88);
	color: #fff;
	border-radius: var(--pc-radio-sm);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	padding: 0.2rem 0.3rem;
	pointer-events: none;
}

/*
 * Con el 3D delante no hay lupa. El visor a pantalla completa de WooCommerce solo lista las
 * diapositivas que llevan <img>, y de esa lista no se puede ni quitar ni añadir nada: pulsarla
 * estando en el modelo abriría una foto cualquiera. La clase la pone assets/js/galeria.js.
 */
.pc-galeria--sin-lupa .woocommerce-product-gallery__trigger { display: none; }

/* El botón de play redondo. Lo compartían el vídeo de la galería —que el cliente ha quitado de las
   dos fichas— y la miniatura de YouTube de «Somos el taller», que sigue en pie. */
.pc-videos__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 66px;
	height: 66px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--wp--preset--color--grafito);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: transform var(--pc-transicion), background var(--pc-transicion);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}
.pc-videos__fachada:hover .pc-videos__play { transform: scale(1.06); background: #fff; }

/* Resumen del producto */
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 700;
	letter-spacing: -0.028em;
	line-height: 1.15;
	margin: 0 0 0.75rem;
	color: var(--wp--preset--color--acero-oscuro);
}

.woocommerce div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	font-size: 0.875rem;
}
.woocommerce .star-rating { color: var(--wp--preset--color--naranja); }
.woocommerce-review-link { color: var(--wp--preset--color--acero-medio); }

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.875rem;
	font-weight: 700;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--grafito);
	margin-bottom: 1.25rem;
}
.woocommerce div.product p.price del { color: var(--wp--preset--color--acero-medio); font-weight: 400; font-size: 0.6em; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--wp--preset--color--acero-medio);
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--pc-borde);
}

/* Selector de variante */
.woocommerce div.product form.cart .variations {
	width: 100%;
	margin-bottom: 1.25rem;
	border-collapse: collapse;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { display: block; padding: 0; text-align: left; }
.woocommerce div.product form.cart .variations .label {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acero-medio);
	margin-bottom: 0.5rem;
}
.woocommerce div.product form.cart .variations .label label { font-weight: inherit; }
.woocommerce div.product form.cart .variations select {
	width: 100%;
	padding: 0.8rem 2.5rem 0.8rem 0.9rem;
	border: 1.5px solid var(--pc-borde);
	border-radius: var(--pc-radio-sm);
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6670' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 1rem center / 12px;
	appearance: none;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	color: var(--wp--preset--color--grafito);
	cursor: pointer;
}
.woocommerce div.product form.cart .variations select:hover { border-color: var(--wp--preset--color--acero-medio); }
.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--acero-medio);
}

.woocommerce div.product form.cart .single_variation_wrap .woocommerce-variation-price { margin-bottom: 1rem; }

/* Cantidad + añadir al carrito */
.woocommerce div.product form.cart { display: block; }
.woocommerce div.product form.cart::after { content: ''; display: table; clear: both; }
.woocommerce div.product form.cart .quantity {
	float: none;
	display: inline-flex;
	margin: 0 0.75rem 0 0;
	vertical-align: top;
}
.woocommerce div.product form.cart .quantity .qty {
	width: 5rem;
	padding: 0.85rem 0.5rem;
	border: 1.5px solid var(--pc-borde);
	border-radius: var(--pc-radio-sm);
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button {
	background: var(--wp--preset--color--naranja);
	color: #fff;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 1.0625rem;
	font-weight: 600;
	padding: 0.95rem 2rem;
	border-radius: var(--pc-radio-sm);
	min-width: 14rem;
	transition: background var(--pc-transicion), transform var(--pc-transicion);
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover { background: #9C4700; transform: translateY(-1px); }

/* Bloque de garantías junto al botón de compra */
.pc-garantias {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--pc-borde);
	display: grid;
	gap: 0.75rem;
	list-style: none;
	padding-left: 0;
}
.pc-garantias li {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: 0.7rem;
	align-items: start;
	font-size: 0.9063rem;
	line-height: 1.45;
	color: var(--wp--preset--color--acero-medio);
}
.pc-garantias strong { color: var(--wp--preset--color--grafito); font-weight: 600; }
.pc-garantias svg { color: var(--wp--preset--color--verde); margin-top: 0.15em; }

/* Pestañas */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--pc-borde);
	list-style: none;
	flex-wrap: wrap;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.85rem 1.15rem;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--acero-medio);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--grafito);
	border-bottom-color: var(--wp--preset--color--naranja);
}
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; max-width: 52rem; }
.woocommerce div.product .woocommerce-tabs .panel > h2:first-child { display: none; }

/* Productos relacionados */
.woocommerce div.product .related > h2,
.woocommerce div.product .up-sells > h2 {
	font-size: var(--wp--preset--font-size--xl);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
   WooCommerce · carrito y checkout
   ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce table.shop_table th {
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acero-medio);
	background: var(--wp--preset--color--hueso);
	padding: 1rem;
}
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--pc-borde); }
.woocommerce table.shop_table img { width: 64px; border-radius: var(--pc-radio-sm); border: 1px solid var(--pc-borde); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3 { font-size: var(--wp--preset--font-size--xl); }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1.5px solid var(--pc-borde);
	border-radius: var(--pc-radio-sm);
	font-family: inherit;
	font-size: 1rem;
	background-color: #fff;
	height: auto;
}
.woocommerce form .form-row label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--acero-oscuro);
	margin-bottom: 0.35rem;
}
.woocommerce form .form-row { margin-bottom: 1.15rem; }

.woocommerce #payment {
	background: var(--wp--preset--color--hueso);
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio);
}
.woocommerce #payment ul.payment_methods { border-bottom: 1px solid var(--pc-borde); }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--wp--preset--color--naranja);
	color: #fff;
	border-radius: var(--pc-radio-sm);
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 600;
	font-size: 0.9688rem;
	padding: 0.8rem 1.4rem;
	line-height: 1.3;
	transition: background var(--pc-transicion), transform var(--pc-transicion);
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #9C4700; color: #fff; transform: translateY(-1px); }

.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt { background: var(--wp--preset--color--naranja); }

.woocommerce #respond input#submit.disabled,
.woocommerce a.button.disabled,
.woocommerce button.button.disabled { background: var(--wp--preset--color--acero-medio); opacity: 0.6; }

/* Avisos */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--wp--preset--color--verde);
	background: var(--wp--preset--color--verde-suave);
	border-radius: var(--pc-radio-sm);
	padding: 1rem 1.25rem;
	font-size: 0.9375rem;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-info { border-left-color: var(--wp--preset--color--acero-oscuro); background: var(--wp--preset--color--acero-claro); }
.woocommerce-error { border-left-color: #B3261E; background: #FDECEA; }

/*
 * Los avisos de las plantillas de bloques usan otro marcado
 * (.wc-block-components-notice-banner) y traen su propio borde, que no es el de la marca.
 * Se les da el mismo aspecto que a los avisos clásicos: filete de color a la izquierda.
 */
.wc-block-components-notice-banner {
	border: 1px solid var(--pc-borde);
	border-left: 3px solid var(--wp--preset--color--acero-oscuro);
	border-radius: var(--pc-radio-sm);
	background: var(--wp--preset--color--acero-claro);
	color: var(--wp--preset--color--grafito);
	font-size: 0.9375rem;
}
.wc-block-components-notice-banner.is-success {
	border-color: #C6DDD1;
	border-left-color: var(--wp--preset--color--verde);
	background: var(--wp--preset--color--verde-suave);
}
.wc-block-components-notice-banner.is-error {
	border-color: #F3C9C4;
	border-left-color: #B3261E;
	background: #FDECEA;
}
.wc-block-components-notice-banner.is-success > svg { background: var(--wp--preset--color--verde); }
.wc-block-components-notice-banner.is-error > svg { background: #B3261E; }
.wc-block-components-notice-banner a { color: inherit; }

/* -------------------------------------------------------------------------
   Barra de compra fija en móvil
   ---------------------------------------------------------------------- */

.pc-barra-movil {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem var(--wp--preset--spacing--30);
	padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--pc-borde);
	box-shadow: 0 -4px 20px rgba(18, 24, 29, 0.08);
}
.pc-barra-movil__texto { flex: 1; min-width: 0; font-size: 0.8125rem; line-height: 1.3; color: var(--wp--preset--color--acero-medio); }
.pc-barra-movil__texto strong { display: block; font-size: 0.9375rem; color: var(--wp--preset--color--grafito); }
.pc-barra-movil .pc-boton {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 1.1rem;
	border-radius: var(--pc-radio-sm);
	background: var(--wp--preset--color--naranja);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 780px) {
	.pc-barra-movil { display: flex; }
	body { padding-bottom: 4.5rem; }
}

/* -------------------------------------------------------------------------
   Pie
   ---------------------------------------------------------------------- */

.pc-pie {
	background: var(--wp--preset--color--grafito);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9063rem;
}
.pc-pie :is(h2, h3, h4, h5, h6) { color: #fff; }
.pc-pie a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.pc-pie a:hover { color: #fff; text-decoration: underline; }
.pc-pie .wp-block-heading {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.48);
	margin-bottom: 1rem;
}
.pc-pie__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--wp--preset--spacing--30);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
}
.pc-pie__pendiente {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	background: rgba(238, 115, 4, 0.18);
	color: #FFB067;
	font-size: 0.75rem;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Infografía SVG del mecanismo
   ---------------------------------------------------------------------- */

.pc-infografia { width: 100%; height: auto; display: block; }
.pc-infografia text { font-family: var(--wp--preset--font-family--texto); }
.pc-infografia .pc-infografia__cifra {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* -------------------------------------------------------------------------
   Utilidades
   ---------------------------------------------------------------------- */

.pc-oculto-visual {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.pc-borde-superior { border-top: 1px solid var(--pc-borde); }
.pc-borde-inferior { border-bottom: 1px solid var(--pc-borde); }

/* -------------------------------------------------------------------------
   Formulario de contacto
   ---------------------------------------------------------------------- */

.pc-formulario__campos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 0 var(--wp--preset--spacing--40);
}
.pc-formulario__campos p { margin: 0 0 1.1rem; }
.pc-formulario__ancho { grid-column: 1 / -1; }

.pc-formulario label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--acero-oscuro);
}
.pc-formulario__opcional { font-weight: 400; color: var(--wp--preset--color--acero-medio); }
.pc-formulario label span[aria-hidden] { color: var(--wp--preset--color--naranja); }

.pc-formulario :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border: 1.5px solid var(--pc-borde);
	border-radius: var(--pc-radio-sm);
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--grafito);
	transition: border-color var(--pc-transicion);
}
.pc-formulario :is(input, textarea):hover { border-color: var(--wp--preset--color--acero-medio); }
.pc-formulario :is(input, textarea):focus { border-color: var(--wp--preset--color--naranja); }
.pc-formulario textarea { resize: vertical; min-height: 8rem; line-height: 1.55; }
.pc-formulario ::placeholder { color: #97A2AA; }

.pc-formulario__trampa { position: absolute; left: -9999px; }

.pc-formulario__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 0.4rem !important;
}
.pc-formulario__pie span { font-size: 0.8125rem; color: var(--wp--preset--color--acero-medio); }

.pc-formulario__consentimiento {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-top: 0.4rem !important;
}
.pc-formulario__consentimiento input {
	width: auto;
	margin: 0.15rem 0 0;
	flex: none;
	accent-color: var(--wp--preset--color--naranja);
}
.pc-formulario__consentimiento label {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wp--preset--color--acero-medio);
	text-transform: none;
	letter-spacing: 0;
}
.pc-formulario__consentimiento a { color: inherit; }

.pc-formulario__aviso {
	padding: 0.9rem 1.1rem;
	border-radius: var(--pc-radio-sm);
	border-left: 3px solid;
	font-size: 0.9375rem;
	margin: 0 0 1.5rem;
}
.pc-formulario__aviso--ok { border-color: var(--wp--preset--color--verde); background: var(--wp--preset--color--verde-suave); color: #0F4E33; }
.pc-formulario__aviso--error { border-color: #B3261E; background: #FDECEA; color: #8C1D18; }

/* -------------------------------------------------------------------------
   Alineación dentro de las secciones
   ---------------------------------------------------------------------- */

/*
 * Nota de maquetación: el layout "constrained" de WordPress centra a sus hijos con margin
 * auto, así que cualquier bloque con max-width propio queda flotando en el centro y
 * desalineado del titular. Por eso los patrones envuelven esos bloques en un grupo de flujo
 * normal ("layout":{"type":"default"}), donde el max-width alinea a la izquierda sin pelear
 * con la cascada.
 */

/* La tabla de especificaciones dentro de la ficha va a una sola columna: la caja es estrecha. */
.pc-especificaciones--ficha {
	grid-template-columns: 1fr;
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-top: 1px solid var(--pc-borde);
}
.pc-especificaciones--ficha div:last-child { border-bottom: 0; }

/* -------------------------------------------------------------------------
   Carrito de la cabecera
   ---------------------------------------------------------------------- */

.pc-carrito {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.7rem;
	border-radius: var(--pc-radio-sm);
	color: var(--wp--preset--color--grafito);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--pc-transicion), color var(--pc-transicion);
}
.pc-carrito:hover {
	background: var(--wp--preset--color--acero-claro);
	color: var(--wp--preset--color--naranja);
	text-decoration: none;
}
/*
 * El align-items es lo que impide que el svg, que tiene alto fijo, se pegue arriba en cuanto el
 * contenedor mide más que él. Esta caja es además la que ancla el contador naranja.
 */
.pc-carrito__icono { position: relative; display: inline-flex; align-items: center; }

/* El carrito era el único icono de la cabecera sin esto; .pc-tel svg ya lo tenía. */
.pc-carrito svg { display: block; flex-shrink: 0; }

/*
 * Cinturón. El arreglo de verdad está en inc/carrito-cabecera.php, que devuelve el marcado en una
 * sola línea para que wpautop no meta <br>. Si alguna vez volvieran, en display:none no son ítems
 * flex y no generan hueco.
 */
.pc-carrito br { display: none; }
.pc-carrito__contador {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -8px;
	min-width: 17px;
	height: 17px;
	padding-inline: 4px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--wp--preset--color--naranja);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pc-carrito__texto {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
/* El importe de WooCommerce viene envuelto en <bdi>, que desalinea la base del texto. */
.pc-carrito__texto bdi { display: inline-flex; align-items: center; }
.pc-carrito .woocommerce-Price-amount { font-weight: 600; }

/* El grupo de la cabecera estira a sus hijos si no se le dice lo contrario. */
.pc-cabecera__acciones { align-items: center; flex-shrink: 0; }

/* El párrafo que envuelve al shortcode dentro del grupo de la cabecera sobra. */
.pc-cabecera__acciones > p { margin: 0; display: contents; }

@media (max-width: 700px) {
	.pc-carrito__texto { display: none; }
}

/* El icono de "mi cuenta" que WooCommerce inserta solo en la navegación. */
.pc-cabecera .wc-block-customer-account { display: inline-flex; align-items: center; }
.pc-cabecera .wc-block-customer-account svg { width: 20px; height: 20px; }

/* Botonera propia, para los bloques HTML donde no llegan las clases de WordPress. */
.pc-botonera { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pc-boton--linea {
	color: var(--wp--preset--color--grafito);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--grafito);
	background: transparent;
}
.pc-boton--linea:hover { background: var(--wp--preset--color--grafito); color: #fff; }

/* -------------------------------------------------------------------------
   Cabecera en pantallas estrechas
   -------------------------------------------------------------------------
   Con la marca, el menú, la cuenta, el teléfono y el carrito, a 375 px no cabe
   todo. Se van quitando piezas por orden de importancia.
   ---------------------------------------------------------------------- */

@media (max-width: 620px) {
	.pc-cabecera__barra > .wp-block-group { gap: 0.5rem; }
	.pc-marca { min-width: 0; gap: 0.45rem; }
	/* La bajada «Comederos automáticos» es el elemento más ancho de la cabecera: con la
	   letra espaciada mide más de 160 px. Sin ella caben el menú y el carrito. */
	.pc-marca__marca { display: none; }
	/* Cada pieza con su medida: la cabeza es casi cuadrada y la palabra es apaisada, así que
	   una regla común sobre `.pc-marca svg` aplastaría la segunda. */
	.pc-marca__isotipo { width: 28px; }
	.pc-marca__texto { height: 1.1875rem; }
	.pc-cabecera .wp-block-navigation { flex: 0 0 auto; }
	.pc-cabecera__acciones { gap: 0.25rem; }
	.pc-tel { padding: 0.4rem; }
	.pc-carrito { padding: 0.4rem; gap: 0.35rem; }
	.pc-idiomas__actual { padding: 0.4rem 0.25rem; gap: 0.25rem; }
}

@media (max-width: 400px) {
	/*
	 * En pantallas estrechas solo caben dos acciones junto al menú. Producan vende por
	 * teléfono, así que el que se queda es el teléfono: "Mi cuenta" sigue estando en el
	 * pie y en el proceso de compra, que es donde de verdad hace falta.
	 */
	.pc-cabecera .wp-block-woocommerce-customer-account { display: none; }
}

/* -------------------------------------------------------------------------
   Testimonios
   ---------------------------------------------------------------------- */

.pc-testimonios {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.pc-testimonio {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--pc-borde);
	border-radius: var(--pc-radio);
	background: var(--wp--preset--color--hueso);
}

.pc-testimonio__estrellas {
	color: var(--wp--preset--color--naranja);
	font-size: 1rem;
	letter-spacing: 0.14em;
	line-height: 1;
}

.pc-testimonio__texto { margin: 0; border: 0; padding: 0; }
.pc-testimonio__texto p {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--wp--preset--color--grafito);
}
/* Comillas tipográficas: el texto va literal, así que las pone el diseño. */
.pc-testimonio__texto p::before { content: '\201C'; }
.pc-testimonio__texto p::after { content: '\201D'; }

.pc-testimonio__pie {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--pc-borde);
	font-size: 0.875rem;
	line-height: 1.4;
}
.pc-testimonio__pie strong { display: block; color: var(--wp--preset--color--acero-oscuro); }
.pc-testimonio__pie span { color: var(--wp--preset--color--acero-medio); }

/* -------------------------------------------------------------------------
 * Precio con una fila por versión (inc/precios.php)
 *
 * Sale en la rejilla de la tienda, en los relacionados y en la venta cruzada del carrito, o sea
 * que tiene que caber tanto en una tarjeta de 20 rem como a ancho completo. Por eso es una rejilla
 * de dos columnas con la primera al contenido: la etiqueta manda el ancho y el importe se alinea
 * solo.
 *
 * En la cabecera de la ficha ya no sale: ahí el único precio es el total de encima del botón (ver
 * inc/precios.php). Las reglas de `.summary` de más abajo siguen valiendo para los accesorios, que
 * son producto simple y sí llevan su precio debajo del título.
 * ---------------------------------------------------------------------- */

.pc-precios {
	display: grid;
	gap: 0.2rem;
	font-family: var(--wp--preset--font-family--titulares);
}

.pc-precios__fila {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 0 0.6rem;
}

.pc-precios__version {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--acero-medio);
	white-space: nowrap;
}

.pc-precios__importe {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--grafito);
}

/* El precio anterior, más pequeño y apagado; el rebajado, sin el subrayado que trae <ins>. */
.pc-precios__importe del {
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 400;
	font-size: 0.8125em;
	color: var(--wp--preset--color--acero-medio);
	margin-inline-end: 0.3rem;
}
.pc-precios__importe ins {
	text-decoration: none;
	background: none;
	color: inherit;
}

/*
 * En la ficha el precio va a tamaño de titular. Acotado a `.summary`: la propia ficha lleva
 * debajo el bloque de «También te recomendamos…», que son tarjetas de rejilla dentro del mismo
 * `div.product`, y con un selector más suelto salían con el precio a tamaño de titular.
 */
.woocommerce div.product .summary p.price .pc-precios__importe {
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}
.woocommerce div.product .summary p.price .pc-precios__version {
	font-size: 0.9375rem;
}

/* Y en la venta cruzada del carrito, que es la tarjeta más estrecha de todas. */
.wc-block-product-template .pc-precios__version { font-size: 0.75rem; }
.wc-block-product-template .pc-precios__importe { font-size: 0.9375rem; }

/* -------------------------------------------------------------------------
 * Tarjetas de versión de la ficha (inc/precios.php + assets/js/variaciones.js)
 *
 * Sustituyen al desplegable «Elige una opción», que no decía nada de cada versión hasta que se
 * elegía. Cada tarjeta es un enlace de verdad a ?attribute_version=…, así que funcionan sin
 * JavaScript; el JS solo evita la recarga.
 *
 * Van debajo del título, en el hueco donde antes estaba el precio por versión, así que aquí ya no
 * hay importe: solo el nombre de la versión y la frase que la explica. Y por eso llevan margen por
 * arriba, que antes no hacía falta porque venían pegadas al formulario de compra.
 * ---------------------------------------------------------------------- */

.pc-versiones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
	gap: 0.6rem;
	margin: var(--wp--preset--spacing--30) 0;
}

.pc-versiones__opcion {
	display: grid;
	align-content: start;
	gap: 0.25rem;
	padding: 0.9rem 1rem;
	border: 1.5px solid var(--pc-borde);
	border-radius: var(--pc-radio);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--pc-transicion), background var(--pc-transicion);
}
.pc-versiones__opcion:hover {
	border-color: var(--wp--preset--color--acero-medio);
	text-decoration: none;
}
.pc-versiones__opcion:focus-visible {
	outline: 3px solid var(--wp--preset--color--naranja);
	outline-offset: 2px;
}

/*
 * La elegida. El relleno naranja muy claro y el borde de color hacen el trabajo que hacía el
 * radio marcado del conmutador de la portada; aria-current dice lo mismo para quien no ve.
 */
.pc-versiones__opcion.es-activa {
	border-color: var(--wp--preset--color--naranja);
	background: var(--wp--preset--color--naranja-suave);
}

.pc-versiones__nombre {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--acero-oscuro);
}

.pc-versiones__nota {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--acero-medio);
}

/*
 * El desplegable de WooCommerce solo sobra cuando el cambio de versión es instantáneo, o sea
 * cuando hay JavaScript. La clase la pone un <script> de una línea en el <head> (functions.php).
 * Sin ella el desplegable se queda a la vista, que es justo lo que hace falta: es el único
 * camino con el que WooCommerce sabe comprar una variación sin su script.
 */
.pc-js .woocommerce div.product form.variations_form .variations {
	display: none;
}

/*
 * La descripción de la variación, que WooCommerce pinta encima del precio total, sí se ve.
 *
 * Estaba escondida porque repetía la frase de la tarjeta elegida, treinta píxeles más arriba. Ya no:
 * las tarjetas se han subido debajo del título y el bloque de compra se ha quedado a más de mil
 * píxeles de ellas, sin nada que diga qué versión se está a punto de meter en el carrito. Esta
 * frase lo dice, la escribe WooCommerce sola al cambiar de versión y no repite ningún precio.
 */
.woocommerce div.product .woocommerce-variation-description p {
	margin: 0 0 0.6rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--wp--preset--color--acero-medio);
}

/*
 * El distintivo de oferta se coloca respecto a la galería, así que por defecto cae encima
 * del raíl de miniaturas. Se desplaza para que quede sobre la imagen principal.
 */
.woocommerce div.product > span.onsale {
	inset-inline-start: calc(96px + var(--wp--preset--spacing--30) + 0.75rem);
	z-index: 4;
}

@media (max-width: 640px) {
	.woocommerce div.product > span.onsale { inset-inline-start: 0.75rem; }
}

/* -------------------------------------------------------------------------
 * Filtro de categorías de la tienda
 * ---------------------------------------------------------------------- */

.pc-barra-tienda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 var(--wp--preset--spacing--40);
}

.pc-filtro-tienda {
  margin: 0;
}

/* El desplegable de orden nativo no se puede estilar por dentro: se le da la misma
   cápsula que a los filtros y se le quita la flecha del sistema. */
.pc-orden-tienda form.woocommerce-ordering {
  margin: 0;
  float: none;
}

.pc-orden-tienda select {
  appearance: none;
  padding: 0.5rem 2.4rem 0.5rem 0.95rem;
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 999px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235A6670' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  color: var(--wp--preset--color--acero-oscuro);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.pc-orden-tienda select:hover,
.pc-orden-tienda select:focus-visible {
  border-color: var(--wp--preset--color--acero-oscuro);
}

.pc-filtro-tienda ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pc-filtro-tienda a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--wp--preset--color--borde);
  border-radius: 999px;
  color: var(--wp--preset--color--acero-oscuro);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pc-filtro-tienda a span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--wp--preset--color--acero-medio);
  font-variant-numeric: tabular-nums;
}

.pc-filtro-tienda a:hover,
.pc-filtro-tienda a:focus-visible {
  border-color: var(--wp--preset--color--acero-oscuro);
  background: var(--wp--preset--color--acero-claro);
}

.pc-filtro-tienda a.es-actual {
  background: var(--wp--preset--color--acero-oscuro);
  border-color: var(--wp--preset--color--acero-oscuro);
  color: #fff;
}

.pc-filtro-tienda a.es-actual span {
  color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------------------
 * Venta cruzada del carrito (bloque product-collection)
 *
 * El bloque trae la rejilla pero ninguna caja: los productos salían sueltos sobre el fondo,
 * con la imagen diminuta y el título centrado a mucha distancia. Se les da la misma tarjeta
 * que en la tienda para que se lean como productos y no como restos de maquetación.
 * ---------------------------------------------------------------------- */

.wp-block-woocommerce-product-collection > .wp-block-heading {
  font-family: var(--wp--preset--font-family--titulares);
  font-size: 1.125rem;
  font-weight: 700;
  margin: var(--wp--preset--spacing--50) 0 1rem;
}

.wc-block-product-template {
  gap: var(--wp--preset--spacing--30);
}

.wc-block-product-template .wc-block-product {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem;
  border: 1px solid var(--pc-borde);
  border-radius: var(--pc-radio);
  background: #fff;
  transition: border-color var(--pc-transicion);
}

.wc-block-product-template .wc-block-product:hover {
  border-color: var(--wp--preset--color--acero-medio);
}

.wc-block-product-template .wc-block-components-product-image {
  margin: 0;
}

.wc-block-product-template .wc-block-components-product-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--wp--preset--color--hueso);
  border-radius: var(--pc-radio-sm);
}

/* El título del producto de venta cruzada es un core/post-title, no el título de WooCommerce. */
.wc-block-product-template .wp-block-post-title {
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--titulares) !important;
  font-size: 0.9375rem !important;
  font-weight: 600;
  line-height: 1.3;
  text-align: left !important;
}

.wc-block-product-template .wp-block-woocommerce-product-price {
  margin: 0 !important;
  text-align: left !important;
  font-size: 0.9375rem !important;
  font-weight: 700;
  color: var(--wp--preset--color--grafito);
}

.wc-block-product-template .wp-block-woocommerce-product-price del {
  font-weight: 400;
  color: var(--wp--preset--color--acero-medio);
}

.wc-block-product-template .wc-block-components-product-button {
  margin: auto 0 0 !important;
  padding-top: 0.4rem;
  text-align: left !important;
}

.wc-block-product-template .wc-block-components-product-button .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
}

/* La etiqueta de oferta se superpone a la foto, como en la tienda. */
.wc-block-product-template .wc-block-components-product-image {
  position: relative;
}

.wc-block-product-template .wc-block-components-product-sale-badge {
  position: absolute;
  top: 0.5rem;
  inset-inline-start: 0.5rem;
  inset-inline-end: auto;
  margin: 0;
  padding: 0.2rem 0.55rem;
  border: 0;
  border-radius: 999px;
  background: var(--wp--preset--color--verde);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------------------
 * Menú desplegable en móvil
 *
 * Abierto ocupa la pantalla entera. Sin estas reglas hereda la alineación de la barra
 * superior y los enlaces se apilan pegados al borde derecho, con el dedo justo encima del
 * botón de cerrar.
 * ---------------------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 5.5rem 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: 1.375rem;
	font-weight: 700;
	color: #fff;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--naranja-suave);
}

.wp-block-navigation__responsive-container-close {
	top: 1.35rem;
	right: 1.5rem;
	color: #fff;
}

/* Envoltorio de la tabla comparativa. */
.pc-tabla-envoltorio { overflow-x: auto; min-width: 0; }
.pc-tabla-aviso { display: none; }

@media (max-width: 720px) {
	.pc-tabla-aviso {
		display: block;
		position: sticky;
		left: 0;
		margin: 0 0 0.75rem;
		font-size: 0.8125rem;
		color: var(--wp--preset--color--acero-medio);
	}
}

/* -------------------------------------------------------------------------
 * Tablas de especificaciones de las páginas de contenido
 *
 * Los datos técnicos van en una tabla de HTML y no en una infografía a propósito: una tabla la lee
 * un lector de pantalla, la lee un buscador y la puede citar un asistente; una imagen con los
 * mismos datos dentro no la lee nadie.
 *
 * El envoltorio con scroll horizontal no es un adorno: la comparativa de tres columnas no cabe en
 * 360 px, y sin esto el que se desplaza es el cuerpo de la página entera.
 * ---------------------------------------------------------------------- */

.pc-tabla-especificaciones { overflow-x: auto; margin: 2rem 0; }

.pc-tabla-especificaciones table {
	border-collapse: collapse;
	width: 100%;
	min-width: 30rem;
	font-size: 0.95rem;
}

.pc-tabla-especificaciones th,
.pc-tabla-especificaciones td {
	border: 0;
	border-bottom: 1px solid var(--pc-borde);
	padding: 0.7rem 0.9rem;
	text-align: left;
	vertical-align: top;
}

.pc-tabla-especificaciones thead th {
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--acero-medio);
	border-bottom-width: 2px;
}

.pc-tabla-especificaciones tbody th[scope="row"] {
	font-weight: 600;
	color: var(--wp--preset--color--acero-oscuro);
	white-space: nowrap;
}

.pc-tabla-especificaciones tbody tr:last-child th,
.pc-tabla-especificaciones tbody tr:last-child td { border-bottom: 0; }