/*
 * Estilos del módulo Storefront (hcp-web): calendario, árbol Pixels,
 * banner de cookies, aviso de cierre estival, widgets de ranking,
 * configurador de suscripciones. El PHP que genera este markup vive en
 * src/Storefront/ y src/Support/Ranking/ — aquí solo el CSS, nada de lógica.
 */

/* ---------- Configurador de suscripciones ([gestion_hcp_suscripciones_lite]) ---------- *
 * Porta el CSS de hcp-suscripciones (variante "lite"). Los colores por
 * revista NO se duplican por cabecera como en el original — se apoyan en
 * las mismas variables --wp--custom--rev--* que pinta .hcp-rev-{px,mh,mm,zx}
 * en skins.css (una sola definición de color por revista en todo el tema).
 */

.hcp-susc-vacio {
	color: #999;
	margin: 0;
}

/* Oculta el avatar estándar de WordPress (el avatar del dashboard HCP tiene otro marcado). */
img.avatar.avatar-48.photo {
	display: none !important;
}

/* Una sola tarjeta por revista: portada + nombre + eslogan + "ideal si
   buscas" + edición + enlaces secundarios. Ya no hay tarjeta destacada ni
   recomendador aparte — esa información vive dentro de esta misma
   tarjeta (rediseño 21-09-2026). Fondo en el tono "halo" de cada piel
   (veladura clara, no el acento sólido ni blanco, respeta el color blanco
   pendiente de decidir aparte).
   Filas horizontales, no rejilla de columnas (decisión 21-09-2026, 3ª
   vuelta: "las tarjetas no miden lo mismo, desorden total, las portadas
   se cortan horizontalmente" — el intento de 2 columnas + portada
   estirada al alto del texto fallaba porque comparaba el alto de 2
   tarjetas distintas lado a lado. En una sola columna cada fila es
   independiente — nada con lo que desalinearse). Ver
   `.hcp-susc-card-cover img` más abajo para la portada en sí — a
   proporción fija, no estirada al alto de la fila. */
.hcp-susc-matrix {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hcp-susc-card {
	display: flex;
	align-items: stretch;
	gap: 1.25rem;
	padding: 1.25rem;
	border-radius: var(--hcp-radius, 14px);
	background: var(--wp--custom--rev--halo, #f2ecf7);
	transition: box-shadow .2s ease;
}

.hcp-susc-card.activa {
	box-shadow: 0 0 0 1.5px var(--wp--custom--rev--accent);
}

.hcp-susc-card.is-resaltada {
	box-shadow: 0 0 0 2px var(--wp--custom--rev--accent);
}

/* Badge de Última Generación en su tarjeta (misma .hcp-susc-card que las
   otras 3, a petición de Joaquín 21-09-2026: "que se vea como las
   otras") — recuerda que de momento solo hay edición Papel, sin quitarle
   la píldora real de añadir al carrito. */
.hcp-susc-card-badge {
	flex: 0 0 auto;
	align-self: center;
	padding: 3px 10px;
	border-radius: var(--hcp-radius-pill, 999px);
	background: rgba(255, 255, 255, 0.6);
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent));
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* Portada a proporción fija (600:850), no estirada al alto de la fila
   (rediseño 21-09-2026, 8ª vuelta y último — historial completo en el
   docblock de la clase: al alto real sin recortar se disparaba de
   tamaño; con tope de ancho y `object-fit: contain` quedaba mal
   centrada y sin bordes redondeados visibles; con `object-fit: cover` a
   ancho fijo se recortaba por los lados en cuanto la fila crecía, p.ej.
   al sustituir «Comprar/Atrasados» por las ventajas — "al aumentar el
   alto de la fila la imagen se recorta lateralmente y no queda bien").
   Cada variante de "igualar el alto de la fila" tenía su propio defecto
   visual; a proporción fija no tiene ninguno — el contenedor sí ocupa el
   alto de la fila (`align-self: stretch` en .hcp-susc-card-cover, imagen
   arriba del todo), pero la imagen en sí no se deforma ni se recorta
   nunca, solo deja veladura de la tarjeta debajo cuando la fila es más
   alta que la portada. */
.hcp-susc-card-cover {
	display: block;
	flex: 0 0 auto;
	align-self: stretch;
	width: clamp(100px, 18vw, 160px);
}

.hcp-susc-card-cover img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 600 / 850;
	border-radius: var(--hcp-radius-sm);
}

.hcp-susc-card-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.hcp-susc-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
}

.hcp-susc-card-nombre {
	margin: 0;
	font-size: 26px;
}

.hcp-susc-card-nombre a {
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent));
	text-decoration: none;
}

/* Editorial real del número vigente (`_hcp_texto_home`, restaurada a
   petición de Joaquín — se había perdido al fusionar la tarjeta destacada
   en la fila de la matriz). Ancho completo de la tarjeta, no una columna
   estrecha, para que se lea bien. Sin recortar a N líneas — "es marca de
   la casa" (Joaquín, 21-09-2026): el texto sale completo, cueste el alto
   que cueste; el problema de scroll se resuelve por otro lado. */
.hcp-susc-card-desc {
	margin: 0.5rem 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

.hcp-susc-card-desc p {
	margin: 0 0 4px;
}

.hcp-susc-card-desc p:last-child {
	margin-bottom: 0;
}

/* Titular resaltado sobre la editorial — mismo tratamiento que llevaba en
   la tarjeta destacada (pastilla blanca con el color de la revista). */
.hcp-susc-card-desc h5,
.hcp-ultima-suelta-desc h5 {
	display: inline-block;
	background-color: #ffffff;
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent));
	padding: 5px 11px;
	border-radius: var(--hcp-radius-sm);
	font-size: 14px;
	margin: 0 0 8px 0;
}

.hcp-susc-row-desde {
	font-size: 1rem;
	color: var(--wp--preset--color--muted, #6b6b6b);
	white-space: nowrap;
}

.hcp-susc-row-precio {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.hcp-susc-row-pildoras {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.hcp-susc-row-titular,
.hcp-susc-row-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.hcp-susc-row-titular {
	column-gap: 0.25rem;
}

/* El texto de entrada a la suscripción queda en la misma línea que el precio. */
.hcp-susc-row-suscribete {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent));
	white-space: nowrap;
}

.hcp-susc-chip {
	box-sizing: border-box;
	text-align: center;
	border: 1.5px solid var(--wp--custom--rev--accent);
	background: #ffffff;
	color: var(--wp--custom--rev--accent);
	font-size: 14px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--hcp-radius-pill, 999px);
	cursor: pointer;
	font-family: inherit;
	transition: background .15s ease, color .15s ease;
}

.hcp-susc-chip:hover {
	background: var(--wp--custom--rev--halo, #f2ecf7);
}

.hcp-susc-chip.activo,
.hcp-susc-chip.activo:hover {
	background: var(--wp--custom--rev--accent);
	color: var(--wp--custom--rev--accent-contrast, #fff);
}

/* Pie de la tarjeta: enlaces secundarios (número suelto, atrasados). */
.hcp-susc-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.125rem;
	font-size: 14px;
}

.hcp-susc-card-foot a {
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent));
	opacity: 0.8;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hcp-susc-card-foot a:hover {
	opacity: 1;
}

.hcp-susc-card-foot span[aria-hidden] {
	opacity: 0.4;
}

/* Ventajas de la edición, debajo de los chips cuando se selecciona una
   variante. La portada mantiene su proporción al abrir este detalle. */
.hcp-susc-ventajas {
	margin-top: 0.25rem;
	padding: 0.75rem 1rem;
	border-radius: var(--hcp-radius-sm);
	background: rgba(255, 255, 255, 0.6);
}

.hcp-susc-ventajas-titulo {
	margin: 0 0 0.375rem;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent));
}

.hcp-susc-ventajas-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1rem;
}

.hcp-susc-ventajas-lista li {
	font-size: 0.8125rem;
	color: rgba(0, 0, 0, 0.35);
}

.hcp-susc-ventajas-lista li.on {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.hcp-susc-ventajas-lista li.on::before {
	content: '✓ ';
}

/* Ya solo envuelve el "+ Revista" en flujo normal (envío combinado y
   notas viven en la barra fija, .hcp-susc-pie-total, ver más abajo) — sin
   caja oscura propia: esa caja ahora vive en `.hcp-susc-pie-add:not(:empty)`,
   condicionada a que de verdad tenga botones dentro, para no dejar un
   rectángulo vacío en desktop (donde el "+ Revista" no se ve nunca) ni en
   móvil cuando no hay ninguna tarjeta desactivada que ofrecer. */
.hcp-susc-pie {
	margin-top: 1.5rem;
}

/* Dentro de la barra fija (.hcp-susc-pie-total), no de .hcp-susc-pie — ver
   docblock del shortcode(). Ya no hace falta el truco de márgenes
   negativos para sangrar hasta el borde de la caja oscura: aquí sangra al
   borde real del viewport, como una franja de aviso justo encima del
   total y el botón. */
.hcp-susc-check-combinado {
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: baseline;
	padding: 10px 24px;
	background: var(--wp--preset--color--red, #cf2e2e);
	font-size: 18px;
	color: #ffffff;
	text-align: left;
	cursor: pointer;
}

.hcp-susc-check-combinado input[type=checkbox] {
	accent-color: #ffffff;
	flex-shrink: 0;
	margin-top: 2px;
}

.hcp-susc-pie-add:not(:empty) {
	display: none;
	gap: 8px;
	justify-content: center;
	padding: 16px;
	background-color: var(--wp--preset--color--footer-bg, #0d141a);
	border-radius: var(--hcp-radius, 14px);
	box-sizing: border-box;
}

.hcp-susc-pie-add button {
	flex: 1;
	max-width: 200px;
	background: #ffffff;
	color: var(--wp--preset--color--footer-bg, #0d141a);
	border: none;
	border-radius: var(--hcp-radius-sm);
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

/* Barra fija inferior con el total, el CTA, el aviso de envío combinado y
   las notas — a petición de Joaquín, 21-09-2026: "el bloque Total hoy...
   puede hacerse como una barra fija inferior? porque al seleccionar una
   edición no lo veo claro hasta que no bajo", y después, con el mismo
   motivo, "el envío combinado queda debajo... no se ve" y "esta info va a
   ese bloque" (las notas). Solo el "+ Revista" se queda en flujo normal,
   debajo de las tarjetas (.hcp-susc-pie) — todo lo demás que hace falta
   ver nada más elegir una edición vive aquí. Sigue dentro de #gr-susc-pie
   a propósito: su [hidden] ya oculta también a los descendientes
   position:fixed, sin tocar el JS. */
.hcp-susc-pie-total {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	background-color: var(--wp--preset--color--footer-bg, #0d141a);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .25);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.hcp-susc-pie-total-inner {
	max-width: var(--hcp-wrap, 1200px);
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 28px;
	padding: 14px 24px;
	text-align: center;
}

/* En móvil, total y botón en líneas distintas a propósito (no por falta de
   sitio) — el botón a ancho completo pesa más visualmente y es más fácil
   de pulsar que uno estrecho centrado junto al precio. */
@media (max-width: 480px) {
	.hcp-susc-pie-total-inner {
		flex-direction: column;
		gap: 10px;
	}

	.hcp-susc-pie-total-inner .hcp-susc-boton {
		width: 100%;
	}
}

/* Hueco al final de la página mientras la barra está a la vista, para que
   no tape el pie del sitio (lo activa recalcular() con una clase en el
   body, no CSS puro: más fiable que depender de :has() en todo navegador). */
body.hcp-susc-pie-fija-activa {
	padding-bottom: 130px;
}

/* Con envío combinado visible, la barra suma la franja roja de aviso
   encima del total — algo más de hueco para que tampoco quede tapada. */
body.hcp-susc-pie-fija-activa:has(#gr-susc-envio-box:not([hidden])) {
	padding-bottom: 175px;
}

@media (max-width: 480px) {
	/* En pantallas estrechas el total, el botón, las notas y el aviso de
	   envío combinado (si está) pueden partirse en más líneas dentro de
	   la barra — algo más de hueco para no taparlas. Total y botón ya
	   van siempre en dos líneas aquí a propósito (ver
	   .hcp-susc-pie-total-inner), así que la barra es más alta de por
	   sí, no solo por posible partición de texto. */
	body.hcp-susc-pie-fija-activa {
		padding-bottom: 210px;
	}
	body.hcp-susc-pie-fija-activa:has(#gr-susc-envio-box:not([hidden])) {
		padding-bottom: 280px;
	}
}

.hcp-susc-total {
	font-size: 1.3em;
	font-weight: 700;
	color: #ffffff;
}

.hcp-susc-total-nota {
	font-size: .65em;
	font-weight: 400;
	color: rgba(255, 255, 255, .65);
}

/* CTA final del configurador, deliberadamente más grande que el botón
   sólido estándar (0.9375rem/base.css) — es el paso de "comprometerse",
   no un enlace más; misma familia (rojo, radio pequeño), un escalón por
   encima a propósito. */
.hcp-susc-boton {
	background: var(--wp--preset--color--red, #cf2e2e) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--body, 'Fira Sans', sans-serif);
	font-weight: 600;
	font-size: 18px;
	padding: 12px 36px;
	border: none;
	border-radius: var(--hcp-radius-sm);
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.hcp-susc-boton:hover {
	filter: brightness(0.85);
}

.hcp-susc-boton:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Dentro de la barra fija, debajo del total (Joaquín, 21-09-2026: "esta
   info va a ese bloque" — se habían quedado en flujo normal, debajo de la
   barra fija, sin verse). Formato compacto en línea con separadores, sin
   viñetas ni lista aparte: son avisos cortos junto al botón, de paso, no
   contenido que haga falta leer con calma. */
.hcp-susc-notas {
	width: 100%;
	margin: 0;
	padding: 0 24px 10px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, .65);
	text-align: center;
	box-sizing: border-box;
}

.hcp-susc-notas li {
	margin: 0;
}

.hcp-susc-notas li:not(:first-child)::before {
	content: "· ";
	opacity: .6;
}

@media (max-width: 520px) {
	.hcp-susc-card {
		flex-direction: column;
	}

	/* Apilada, ya no hay una "fila" horizontal a la que igualar el alto —
	   vuelve a un tamaño fijo, como una portada suelta encima del texto. */
	.hcp-susc-card-cover {
		align-self: center;
		width: 130px;
		margin: 0 auto;
	}

	.hcp-susc-card-cover img {
		height: auto;
		width: 100%;
	}

	.hcp-susc-card-head {
		justify-content: center;
		text-align: center;
	}

	.hcp-susc-card-badge {
		align-self: center;
	}

	.hcp-susc-card-desc {
		text-align: left;
	}

	.hcp-susc-row-titular,
	.hcp-susc-row-chips {
		justify-content: center;
	}

	.hcp-susc-card-foot {
		justify-content: center;
	}
}

@media (max-width: 700px) {
	.hcp-susc-pie-add:not(:empty) {
		display: flex;
	}
}

/* ---------- Prueba A/B: portada suelta (inspirada en gamestribune.com) ---------- *
 * 21-09-2026. Bloque aparte, no toca ninguna regla de arriba — para
 * revertir basta con borrar esto (o quitar la clase
 * "hcp-susc-matrix--portada-libre" del PHP, ver shortcode() en
 * SubscriptionConfigurator). En gamestribune.com la portada no comparte
 * fila con el texto: tiene su propio tamaño fijo y generoso, sin
 * estirarse ni encogerse según lo que mida la editorial de al lado. Aquí
 * se prueba lo mismo: la portada deja de `align-self: stretch` (ya no
 * ocupa el alto de la fila, ni deja veladura debajo en filas altas) y
 * sube de tamaño (antes clamp(110px,18vw,170px), ahora más grande) —
 * texto y portada, cada uno a su aire. */
.hcp-susc-matrix--portada-libre .hcp-susc-card {
	align-items: center;
}

/* A partir de 521px, la fila sigue en horizontal (portada + texto en
   columnas) — por debajo, la tarjeta ya se apila en vertical
   (`@media (max-width: 520px)` más abajo) y ese ancho fijo mayor no
   pinta nada ahí; sin el `min-width` de aquí, esta regla (2 clases)
   ganaría por especificidad a la de esa media query (1 clase) y
   pisaría el tamaño ya pensado para apilada. */
@media (min-width: 521px) {
	.hcp-susc-matrix--portada-libre .hcp-susc-card-cover {
		align-self: auto;
		width: clamp(150px, 24vw, 230px);
	}
}

/* Portada: las tres revistas periódicas comparten una fila en escritorio. */
.hcp-susc-matrix--portada-libre {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 2rem;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card {
	position: relative;
	overflow: hidden;
	min-width: 0;
	flex-direction: column;
	align-items: stretch;
	gap: 15px;
	padding: 24px;
	color: #fff;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card.hcp-rev-px {
	--hcp-susc-accent: #7a4d9e;
	background: #7a4d9e;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card.hcp-rev-mh {
	--hcp-susc-accent: #E21A1A;
	background: #E21A1A;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card.hcp-rev-mm {
	--hcp-susc-accent: #0693e3;
	background: #0693e3;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card.activa,
.hcp-susc-matrix--portada-libre .hcp-susc-card.is-resaltada {
	box-shadow: inset 0 0 0 3px #fff;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card-cover {
	align-self: center;
	width: 100%;
	margin-inline: auto;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card-cover img {
	display: block;
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: var(--hcp-cover-ratio, auto);
	object-fit: contain;
}

.hcp-susc-card-ribbon {
	position: absolute;
	top: 27px;
	left: -60px;
	z-index: 2;
	width: 210px;
	padding: 7px 0;
	background: #000;
	color: #fff;
	box-shadow: 9px 3px 3px rgba(0, 0, 0, .5);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .8px;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	transform: rotate(-45deg);
}

.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-card-nombre a,
.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-card-desc,
.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-row-suscribete,
.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-row-desde,
.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-row-precio,
.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-card-foot a {
	color: #fff;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-card-nombre a:hover,
.hcp-ultima-suelta-body h2 a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-card-desc h5,
.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-ventajas-titulo {
	color: var(--hcp-susc-accent);
}

.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-chip {
	border-color: #fff;
	background: #fff;
	color: var(--hcp-susc-accent);
}

.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-chip:hover {
	background: #f5f5f5;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-chip.activo,
.hcp-susc-matrix--portada-libre .hcp-susc-card .hcp-susc-chip.activo:hover {
	background: #000;
	border-color: #000;
	color: #fff;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card-body {
	width: 100%;
}

.hcp-susc-matrix--portada-libre .hcp-susc-row-pildoras {
	margin-top: auto;
}

.hcp-susc-matrix--portada-libre .hcp-susc-card-foot {
	margin-top: 0;
	padding-top: .5rem;
}

/* Última Generación se compra como número suelto, fuera del configurador. */
.hcp-ultima-suelta {
	position: relative;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	align-items: start;
	gap: clamp(1rem, 3vw, 2rem);
	margin-top: 1.5rem;
	padding: 24px;
	border-radius: var(--hcp-radius, 14px);
	overflow: hidden;
	background: #008953;
	color: #ffffff;
}

.hcp-ultima-suelta .hcp-susc-card-ribbon {
	top: 40px;
	left: auto;
	right: -55px;
	transform: rotate(45deg);
	box-shadow: -9px 3px 3px rgba(0, 0, 0, .5);
}

.hcp-ultima-suelta-cover {
	display: block;
	width: 100%;
}

.hcp-ultima-suelta-cover img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: var(--hcp-radius-sm);
}

.hcp-ultima-suelta-body {
	align-self: stretch;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.hcp-ultima-suelta-body h2 {
	margin: 0;
	font-size: 26px;
}

.hcp-ultima-suelta-body h2 a {
	color: #ffffff;
	text-decoration: none;
}

.hcp-ultima-suelta-desc {
	margin: 0.5rem 0;
	font-size: 15px;
	line-height: 1.5;
	color: #ffffff;
}

.hcp-ultima-suelta-desc h5 {
	color: #008953;
}

.hcp-ultima-suelta-desc p {
	margin: 0 0 4px;
}

.hcp-ultima-suelta-desc p:last-child {
	margin-bottom: 0;
}

.hcp-ultima-suelta-link {
	align-self: flex-start;
	margin-top: 0.5rem;
	color: #ffffff;
}

.hcp-ultima-suelta-link:hover {
	background-color: var(--wp--preset--color--zx-gold, #d3b768);
	border-color: var(--wp--preset--color--zx-gold, #d3b768);
	color: var(--wp--preset--color--zx-black, #1a181c);
}

@media (max-width: 1040px) {
	.hcp-susc-matrix--portada-libre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.hcp-susc-matrix--portada-libre {
		grid-template-columns: minmax(0, 1fr);
	}

	.hcp-ultima-suelta .hcp-susc-card-ribbon {
		top: 35px;
		left: -55px;
		right: auto;
		transform: rotate(-45deg);
		box-shadow: 9px 3px 3px rgba(0, 0, 0, .5);
	}

	.hcp-ultima-suelta {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 15px;
	}

	.hcp-ultima-suelta-cover {
		align-self: center;
		width: 100%;
		margin-inline: auto;
	}

	.hcp-ultima-suelta-link {
		display: inline-block;
	}
}

@media (max-width: 520px) {
	.hcp-ultima-suelta-body h2 {
		text-align: center;
	}

	.hcp-ultima-suelta-desc {
		text-align: left;
	}

	.hcp-ultima-suelta-link {
		align-self: center;
	}
}

/* ---------- Calendario ([hcp_calendario]) ---------- */

.hcp-calendario {
	display: flex;
	flex-direction: column;
	gap: 1em;
	width: 100%;
	box-sizing: border-box;
}
.hcp-cal-revista {
	display: flex;
	gap: 1em;
	align-items: stretch;
	border: 1px solid var(--hcp-line, #e0e0e0);
	border-radius: var(--hcp-radius-sm);
	overflow: hidden;
	background: var(--hcp-paper, #fff);
	box-sizing: border-box;
}
.hcp-cal-foto { flex: 0 0 120px; }
.hcp-cal-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hcp-cal-datos { flex: 1; min-width: 0; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; }
.hcp-cal-titulo { font-weight: 700; font-size: 1.1em; margin-bottom: 4px; }
.hcp-cal-fila { display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: 3px 0; border-top: 1px solid #eee; line-height: 1.3; }
.hcp-cal-fila:first-child { border-top: none; }
.hcp-cal-etiqueta { text-transform: uppercase; font-weight: 700; color: var(--hcp-red, #cf2e2e); font-size: .7em; letter-spacing: .02em; }
.hcp-cal-fecha { font-weight: 600; font-size: .85em; white-space: nowrap; }
.hcp-cal-fila.pasada { opacity: .45; }
.hcp-cal-fila.pasada .hcp-cal-etiqueta { color: #999; }
.hcp-cal-vacio { color: #999; margin: 0; }
.hcp-cal-foto a, .hcp-cal-titulo a { color: inherit; text-decoration: none; }
.hcp-cal-titulo a:hover { text-decoration: underline; }

/* ---------- Banner de cookies ---------- */

.hcp-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	background: #1f1f1f;
	color: #fff;
	padding: 16px 20px;
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, .2);
}
.hcp-cookie-banner__inner {
	max-width: var(--hcp-wrap, 1200px);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	justify-content: space-between;
}
.hcp-cookie-banner__text { flex: 1; min-width: 220px; }
.hcp-cookie-banner__link { color: var(--hcp-red, #cf2e2e); text-decoration: underline; }
.hcp-cookie-banner__actions { display: flex; gap: 10px; }
.hcp-cookie-banner__btn {
	padding: 8px 16px;
	border-radius: var(--hcp-radius-sm);
	cursor: pointer;
	font-size: 14px;
	border: 1px solid #fff;
}
.hcp-cookie-banner__btn--ghost { background: transparent; color: #fff; }
.hcp-cookie-banner__btn--solid { background: var(--hcp-red, #cf2e2e); color: #fff; border-color: var(--hcp-red, #cf2e2e); }

.hcp-politica-cookies h2 { margin-top: 1.5em; }
.hcp-politica-cookies ul { padding-left: 1.2em; }

/* ---------- Aviso de cierre estival ---------- */

.hcp-summer-banner {
	background: var(--hcp-warning, #e65100);
	color: #fff;
	text-align: center;
	padding: 10px 20px;
	font-size: .9em;
}
.hcp-summer-banner__inner { max-width: var(--hcp-wrap, 1200px); margin: 0 auto; }
.hcp-summer-banner__inner p { margin: 0; }

/* ---------- Ranking (avatares, consolas, insignias) ---------- */
/* Los shortcodes de Support\Ranking emiten HTML "sin estilos, el tema los
   pone" — este es ese CSS. */

.hcp-avatar-ranking .avatars,
.hcp-avatar-ranking .numbers,
.hcp-console-wars,
.hcp-badge-ranking {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hcp-avatar-ranking li,
.hcp-console-wars li,
.hcp-badge-ranking li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--hcp-line, #e0e0e0);
}
.hcp-avatar-ranking img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.hcp-avatar-ranking .name,
.hcp-console-wars .name,
.hcp-badge-ranking .name { font-weight: 700; }
.hcp-console-wars .pct { margin-left: auto; color: var(--hcp-muted, #6b6b6b); }
.hcp-badge-ranking .description { color: var(--hcp-muted, #6b6b6b); font-size: .85em; }
.hcp-badge-ranking .total { margin-left: auto; color: var(--hcp-muted, #6b6b6b); font-size: .8em; }
.hcp-ranking-empty { color: var(--hcp-muted, #6b6b6b); }

/* ---------- Árbol Pixels ([hcp_arbol_pixels]) ---------- */

.hcp-ap-wrap {
	background: #17151a;
	color: #f5f5f5;
	padding: 24px 0 28px;
	overflow: hidden;
}
.hcp-ap-intro {
	width: 100%;
	margin: 0 0 20px;
	padding: 0 24px;
	text-align: center;
}
.hcp-ap-intro h2 {
	font-size: 1.4rem;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	background: linear-gradient(90deg, #57c2ff, #84bc33, #f5f929, #e83d23);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.hcp-ap-intro p {
	color: #c9c9c9;
	line-height: 1.45;
	margin: 0;
	font-size: 0.85rem;
}

.hcp-ap-track {
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 8vw 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #57c2ff #262329;
	cursor: grab;
}
.hcp-ap-track:active { cursor: grabbing; }
.hcp-ap-track::-webkit-scrollbar { height: 6px; }
.hcp-ap-track::-webkit-scrollbar-track { background: #262329; }
.hcp-ap-track::-webkit-scrollbar-thumb { background: #57c2ff; border-radius: 4px; }

.hcp-ap-content {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 26px;
	width: max-content;
}

.hcp-ap-linea {
	position: absolute;
	left: 0;
	right: 0;
	top: 29px;
	height: 3px;
	background: linear-gradient(90deg, #57c2ff, #84bc33, #f5f929, #e83d23);
	z-index: 0;
}
.hcp-ap-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.hcp-ap-stop {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hcp-ap-grupo-personas {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: repeat(var(--hcp-ap-cols, 1), 150px);
	grid-auto-rows: min-content;
	gap: 8px;
}
.hcp-ap-grupo-personas .hcp-ap-card {
	width: 150px;
}
.hcp-ap-columna-revista {
	font-size: 0.62rem;
	font-weight: 700;
	color: #84bc33;
	text-align: center;
	margin: -4px 0 8px;
}

/* Cabecera (año + punto) con altura fija: así el punto queda siempre
   en la misma fila horizontal, sin importar cuántas tarjetas cuelguen
   debajo, y las líneas de conexión nunca cruzan por encima de ellas. */
.hcp-ap-header,
.hcp-ap-header-spacer {
	height: 34px;
	flex: none;
}
.hcp-ap-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	margin-bottom: 10px;
}
.hcp-ap-stop-year {
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: #f5f929;
	margin-bottom: 4px;
}
.hcp-ap-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #17151a;
	border: 2px solid #f5f929;
	flex: none;
}
.hcp-ap-dot.hcp-ap-hub {
	width: 12px;
	height: 12px;
	border-color: #fff;
}

/* Tarjeta horizontal de persona: foto izquierda, nombre+rol derecha */
.hcp-ap-card {
	display: flex;
	align-items: center;
	gap: 7px;
	width: 168px;
	background: #221f26;
	border: 1px solid #3a3640;
	border-radius: var(--hcp-radius-sm);
	padding: 6px 8px 6px 6px;
	text-align: left;
	opacity: 0;
	transform: translateY(14px) scale(0.96);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.hcp-ap-card.hcp-ap-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}
.hcp-ap-card.hcp-ap-repetido {
	border-color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-foto {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	background: #33303a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	border: 2px solid #57c2ff;
}
.hcp-ap-card.hcp-ap-repetido .hcp-ap-foto {
	border-color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hcp-ap-info {
	min-width: 0;
}
.hcp-ap-nombre {
	font-weight: 700;
	font-size: 0.68rem;
	line-height: 1.15;
}
.hcp-ap-card.hcp-ap-repetido .hcp-ap-nombre {
	color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-rol {
	font-size: 0.58rem;
	color: #9d9d9d;
	margin-top: 1px;
	line-height: 1.2;
}

/* Tarjetas de portada (Hobby Consolas nº1, Pixels, MicroHobby, Micromanía) */
.hcp-ap-card-portada {
	display: block;
	width: 132px;
	padding: 10px 8px;
	text-align: center;
}
.hcp-ap-portada-img {
	width: 88px;
	aspect-ratio: 5 / 7;
	margin: 0 auto;
	background: linear-gradient(135deg, #2a1f33, #221f26);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--hcp-radius-sm);
	overflow: hidden;
}
.hcp-ap-portada-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--hcp-radius-sm);
}
.hcp-ap-portada-placeholder {
	font-size: 0.62rem;
	color: #9d9d9d;
	text-align: center;
	line-height: 1.4;
	padding: 4px;
}
.hcp-ap-portada-revista {
	font-weight: 700;
	font-size: 0.68rem;
	color: #f5f929;
	margin-top: 8px;
	line-height: 1.25;
}
.hcp-ap-portada-editorial {
	font-size: 0.58rem;
	color: #9d9d9d;
	margin-top: 2px;
}
.hcp-ap-portada-personas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hcp-ap-portada-personas li {
	border-top: 1px solid #3a3640;
	padding-top: 4px;
}
.hcp-ap-portada-personas li.hcp-ap-repetido {
	border-top-color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-portada-nombre {
	display: block;
	font-weight: 700;
	font-size: 0.62rem;
	line-height: 1.2;
}
.hcp-ap-portada-personas li.hcp-ap-repetido .hcp-ap-portada-nombre {
	color: var(--hcp-ap-color, #57c2ff);
}
.hcp-ap-portada-rol {
	display: block;
	font-size: 0.56rem;
	color: #9d9d9d;
}

@media (max-width: 640px) {
	.hcp-ap-content { gap: 16px; }
	.hcp-ap-card { width: 148px; }
	.hcp-ap-grupo-personas { grid-template-columns: repeat(var(--hcp-ap-cols, 1), 138px); }
	.hcp-ap-grupo-personas .hcp-ap-card { width: 138px; }
	.hcp-ap-card-portada { width: 116px; }
	.hcp-ap-portada-img { width: 76px; }
}

/* ---------- Catálogo genérico ([hcp_catalogo_nativo], archivos que no son
 * de revista con plantilla propia: láminas, extras, cintas, etc. Antes sin
 * estilo propio (`.hcp-product-card`/`.hcp-catalogo-cabecera` sin CSS). El
 * `:has()` en `ul.products` evita tocar el grid de relacionados en la ficha
 * de producto, que usa el mismo selector base. ---------- */

.hcp-catalogo-cabecera {
	max-width: var(--hcp-wrap);
	margin: 0 auto 28px;
	padding: 0 16px;
	text-align: center;
}

.hcp-catalogo-cabecera .page-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 8px;
}

ul.products:has(.hcp-product-card) {
	max-width: var(--hcp-wrap);
	margin: 0 auto;
	padding: 0 16px;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 24px;
}

/* !important: `.woocommerce(-page) ul.products li.product` del propio
 * plugin WooCommerce carga después (woocommerce-layout.css) y fija
 * float/width/margin con más especificidad — mismo motivo que los
 * !important de .hcp-pp-relacionados más abajo. */
.hcp-product-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: center;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.hcp-product-card > a:first-child {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.hcp-product-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--hcp-radius-sm);
	box-shadow: 0 5px 14px #17110d14;
	transition: transform .2s ease;
}

.hcp-product-card > a:first-child:hover img {
	transform: translateY(-3px);
}

@media (max-width: 960px) and (min-width: 601px) {
	ul.products:has(.hcp-product-card) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	ul.products:has(.hcp-product-card) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hcp-product-card > a:first-child:hover img { transform: none; }
}

/* ---------- Ficha de producto (single-product) ---------- *
 * Porta `hcp-plantilla-producto`. Usa la piel de la revista ya puesta en el
 * <body> por functions.php (`hcp-rev-px|mh|mm|zx`) en vez de recalcular
 * colores por SKU en PHP — los tokens --wp--custom--rev--* ya existen en
 * skins.css. Sin la caja "Suscríbete a la colección" de Los Imprescindibles
 * (decisión de Joaquín, 21-09-2026: se queda fuera, igual que en el legacy). */

.hcp-pp-inner {
	max-width: var(--hcp-wrap, 1200px);
	margin: 40px auto 0 auto;
}

.hcp-pp-card,
.hcp-pp-descripcion,
.hcp-pp-relacionados {
	max-width: var(--hcp-wrap, 1200px);
	margin: 0 auto 16px auto;
	box-sizing: border-box;
	padding: 36px;
	background-color: var(--wp--preset--color--paper, #fff);
	border-radius: var(--hcp-radius, 14px);
}

.hcp-pp-layout {
	display: grid;
	grid-template-columns: calc(48% - 20px) calc(52% - 20px);
	gap: 40px;
	align-items: start;
}

.hcp-pp-card .hcp-pp-col-info > .summary.entry-summary {
	width: 100% !important;
	max-width: 100%;
	float: none !important;
}

/* Imagen única, sin galería */
.hcp-pp-card .woocommerce-product-gallery {
	display: none !important;
}
.hcp-pp-imagen-unica img {
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--line, #e5e5e5);
	border-radius: var(--hcp-radius-sm);
	display: block;
}

/* Formato: etiqueta + chips en vez del <select> nativo */
.hcp-pp-card table.variations th.label {
	display: none;
}
.hcp-pp-card table.variations:before {
	content: "Selecciona Edición";
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}
.hcp-pp-card .reset_variations {
	display: none !important;
}
.hcp-pp-var-thumb {
	width: 120px;
	height: auto;
	border-radius: var(--hcp-radius-sm);
	margin: 4px 0;
	display: none;
}
.hcp-pp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.hcp-pp-chip {
	padding: 10px 20px;
	border-radius: var(--hcp-radius-pill, 999px);
	border: 1.5px solid var(--wp--custom--rev--accent, #2fb3ad);
	background-color: #fff;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent, #2fb3ad));
	font-family: inherit;
}
.hcp-pp-chip.activo {
	background-color: var(--wp--custom--rev--accent, #2fb3ad);
	color: var(--wp--custom--rev--accent-contrast, #fff);
	border-color: var(--wp--custom--rev--accent, #2fb3ad);
}

/* Precio */
.hcp-pp-card p.price,
.hcp-pp-card .woocommerce-variation-price .price {
	font-size: 22px;
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	margin-bottom: 24px;
}

/* Cantidad: botones creados por assets/product-quantity.js sobre el campo de WooCommerce. */
.hcp-pp-card .quantity.hcp-pp-qty {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0 !important;
	width: fit-content;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--wp--preset--color--line, #e0e0e0);
	border-radius: var(--hcp-radius-pill, 999px);
	background: #fff;
	box-shadow: none;
}
.hcp-pp-card .quantity.hcp-pp-qty input.qty {
	background-color: #fff;
	-moz-appearance: textfield;
	appearance: textfield;
	box-sizing: border-box;
	flex: 0 0 3.5rem;
	width: 3.5rem;
	min-width: 0;
	height: 44px;
	padding: 0 4px;
	margin: 0;
	border: 0;
	border-inline: 1px solid var(--wp--preset--color--line, #e0e0e0);
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	font: inherit;
	text-align: center;
}
.hcp-pp-card .quantity.hcp-pp-qty input.qty::-webkit-inner-spin-button,
.hcp-pp-card .quantity.hcp-pp-qty input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.hcp-pp-card .hcp-pp-qty-btn {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0 !important;
	flex: 0 0 auto;
	border: 0;
	box-shadow: none;
	appearance: none;
	background-color: #fff;
	color: var(--wp--preset--color--ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.hcp-pp-card .hcp-pp-qty-btn:disabled {
	opacity: .45;
	cursor: default;
}
.hcp-pp-qty-minus {
	border-radius: var(--hcp-radius-pill, 999px) 0 0 var(--hcp-radius-pill, 999px);
}
.hcp-pp-qty-plus {
	border-radius: 0 var(--hcp-radius-pill, 999px) var(--hcp-radius-pill, 999px) 0;
}
/* Oculta SKU, categorías y etiquetas que WooCommerce agrupa en product_meta. */
.hcp-pp-card .product_meta {
	display: none !important;
}

.hcp-pp-card .woocommerce-variation-add-to-cart,
.hcp-pp-card form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}
.hcp-pp-card .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	float: none !important;
	box-sizing: border-box;
	min-height: 46px;
	margin: 0 !important;
	padding: 0 24px;
	border-radius: var(--hcp-radius-pill, 999px) !important;
	background-color: var(--wp--custom--rev--accent, var(--wp--preset--color--red)) !important;
	color: var(--wp--custom--rev--accent-contrast, #fff) !important;
	border: none;
}

/* Descripción */
.hcp-pp-descripcion h2 {
	display: inline-block;
	font-size: 24px !important;
	background-color: var(--wp--custom--rev--accent, #2fb3ad);
	color: var(--wp--custom--rev--accent-contrast, #fff);
	padding: 10px;
	border-radius: var(--hcp-radius-sm);
}
/* MicroHobby: parallelogramo (misma firma que .hcp-ribbon en skins.css). */
.hcp-rev-mh .hcp-pp-descripcion h2 {
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
	padding: 12px 32px 12px 18px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
/* Micromanía: el h2 "cinta de casete" ya existe en skins.css para
   `.hcp-rev-mm .hcp-rev-desc h2` — `.hcp-pp-descripcion` lleva esa clase
   (ver ProductPage::abrir_descripcion()), no hace falta repetir CSS aquí. */
.hcp-pp-desc-primera-img {
	display: block;
	width: calc(100% + 72px);
	height: auto;
	margin: -36px -36px 24px -36px;
	border-radius: var(--hcp-radius, 14px) var(--hcp-radius, 14px) 0 0;
	max-width: none;
}
.hcp-pp-descripcion p:has(> .hcp-pp-desc-primera-img),
.hcp-pp-descripcion figure:has(> .hcp-pp-desc-primera-img) {
	margin: 0;
}
.hcp-pp-descripcion img:not(.hcp-pp-desc-primera-img) {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--hcp-radius, 14px);
}
.hcp-pp-descripcion h2.hcp-pp-desc-img-h2 {
	display: block;
	background: none;
	color: inherit;
	padding: 0;
	margin: 0 0 16px 0;
	border-radius: 0;
	text-transform: none;
	font-style: normal;
	letter-spacing: normal;
	text-shadow: none;
	clip-path: none;
	width: auto;
}
.hcp-pp-descripcion h2.hcp-pp-desc-img-h2::before,
.hcp-pp-descripcion h2.hcp-pp-desc-img-h2::after {
	content: none;
}

.hcp-pp-relacionados h2 {
	margin-top: 0;
}
.hcp-pp-relacionados {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.hcp-pp-relacionados .related.products {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.hcp-pp-relacionados .woocommerce ul.products li.product,
.hcp-pp-relacionados .woocommerce-page ul.products li.product,
.hcp-pp-relacionados .related.products ul.products li.product {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.hcp-pp-relacionados .related.products ul.products li.product a img {
	/* Conservar la proporción de width/height del HTML: sizes="auto"
	 * usa 1500px de alto si se anula con aspect-ratio: auto. */
	width: 220px !important;
	height: auto !important;
	max-width: 100%;
	max-height: none;
	margin-inline: auto;
	border-radius: var(--hcp-radius, 14px) !important;
	object-fit: contain !important;
}
.hcp-pp-relacionados .related.products ul.products li.product {
	text-align: center;
}
.hcp-pp-relacionados .related.products ul.products li.product > .button {
	display: block;
	width: 220px;
	max-width: 100%;
	box-sizing: border-box;
	margin-inline: auto;
	text-align: center;
}

/* Sin pestañas de navegación (solo queda descripción) */
.hcp-pp-descripcion .woocommerce-tabs ul.tabs,
.hcp-pp-descripcion .woocommerce-tabs .tabs,
.hcp-pp-descripcion ul.tabs.wc-tabs {
	display: none;
}

@media (max-width: 768px) {
	.hcp-pp-layout {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.hcp-pp-card,
	.hcp-pp-descripcion,
	.hcp-pp-relacionados {
		margin-top: 16px;
		padding: 12.5px;
	}
	.hcp-pp-relacionados {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.hcp-pp-desc-primera-img {
		width: calc(100% + 25px);
		margin: -12.5px -12.5px 24px -12.5px;
	}
	.hcp-pp-imagen-unica {
		margin: -12.5px -12.5px 0 -12.5px;
		width: calc(100% + 25px);
	}
	.hcp-pp-imagen-unica img {
		border-radius: var(--hcp-radius, 14px) var(--hcp-radius, 14px) 0 0;
		border-bottom: none;
	}
	.hcp-pp-card .product_title {
		font-size: 28px;
		line-height: 1.3;
	}
	.hcp-pp-card .quantity.hcp-pp-qty {
		margin-right: 20px;
		margin-bottom: 14px;
	}
	.hcp-pp-inner .related.products ul.products {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.hcp-pp-relacionados .related.products ul.products li.product > .button {
		padding-inline: 4px;
	}
	.hcp-pp-inner .related.products ul.products::before,
	.hcp-pp-inner .related.products ul.products::after {
		content: none;
	}
	.hcp-pp-inner .related.products ul.products li.product {
		min-width: 0;
		width: 100%;
		margin: 0;
	}
}