/*
 * HCP · Web — portada.
 *
 * Estilo de las secciones de la home (patrones en theme/hcp-theme/patterns/),
 * réplica de tienda.hechoconpixels.com: héroe de las 3 revistas, comparativa de
 * suscripciones, «Los Imprescindibles de MicroHobby», «Ediciones Especiales»,
 * «Láminas de Pixels» y «Puntos de Venta». Todo vive en el tema: el contenido
 * (portadas, precios, textos) se edita en los propios patrones desde el editor,
 * no en el plugin.
 *
 * Títulos — 2 tamaños, nunca un número suelto nuevo (encontrado 20-09-2026:
 * cada bloque se había inventado el suyo — 1.5rem, 1.25rem, 1.1875rem,
 * clamp(20px,7vw,32px)... — para el mismo rol de "título"). Los dos tamaños
 * son los que ya define theme.json para h2/h3, así que un <h2>/<h3> sin
 * clase ya sale bien por sí solo:
 *   - Título de sección (uno por bloque: "Los Imprescindibles...", "Puntos
 *     de Venta", "Láminas de PIXELS"): var(--wp--preset--font-size--x-large)
 *   - Título de tarjeta/ítem (se repite dentro de una cuadrícula: nombre de
 *     revista, de tienda, de "otro título"...): var(--wp--preset--font-size--large)
 */

.hcp-home-section {
	margin: clamp(2rem, 5vw, 3rem) auto;
}

/* ------------------------------------------------------------------ *
 * Héroe: Pixels / MicroHobby / Micromanía
 * ------------------------------------------------------------------ */

/* Markup en HTML plano (no bloques nativos), mismo patrón que
   .hcp-home-destacado (Ediciones Especiales) más abajo — es el que ya
   alinea bien el botón. Hoy solo lo usa el revistero de home-tiendas.php;
   las 3 tarjetas de revista que lo usaban en el bloque de suscripción se
   retiraron en el rediseño 21-09-2026 (ver docblock de
   SubscriptionConfigurator). */
.hcp-hero-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--custom--rev--accent, #7a4d9e);
	color: var(--wp--custom--rev--accent-contrast, #fff);
	border-radius: var(--hcp-radius, 14px);
	padding: 1.5rem;
	box-sizing: border-box;
}

.hcp-hero-cover {
	display: block;
	position: relative;
	z-index: 1;
	margin-bottom: 1rem;
}

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

.hcp-hero-info {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
}

.hcp-hero-title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--large);
	color: inherit;
}

.hcp-hero-title a {
	color: inherit;
	text-decoration: none;
}

.hcp-hero-desc {
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 0 0.75rem;
	color: inherit;
}

.hcp-hero-desc p {
	margin: 0 0 8px;
}

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

/* Titular resaltado sobre la descripción — de .hcp-pt-destacado-desc h5
   (pastilla blanca con el color de la revista), tal cual producción. */
.hcp-hero-desc h5 {
	display: inline-block;
	background-color: #ffffff;
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent, #7a4d9e));
	padding: 3px 10px;
	border-radius: var(--hcp-radius-sm);
	font-size: 14px;
	margin: 0 0 8px 0;
}

/* Botón de contorno, común a todos los patrones HTML de la home — mismo
   radio/tipografía/peso que el sistema de botones de base.css (núcleo +
   WooCommerce), para que un botón de la home y un botón núcleo midan y
   pesen igual. Antes cada patrón tenía su propio padding/radio/peso sin
   relación entre ellos (auditoría de diseño, 20-09-2026). Cada selector
   de abajo solo añade lo que de verdad es distinto: color por defecto,
   layout (ancho completo apilado vs. contenido suelto) y el color de
   :hover cuando no es el genérico. */
.hcp-hero-boton,
.hcp-home-destacado-boton,
.hcp-home-imprescindible-boton,
.hcp-home-extras-boton,
.hcp-quien-boton {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	border: 1.5px solid currentColor;
	border-radius: var(--hcp-radius-sm);
	padding: 0.875rem 1.75rem;
	background-color: transparent;
	transition: background-color .15s ease, color .15s ease;
}

/* Botón de contorno del héroe («Ver producto» del revistero) — el CTA
   «Suscríbete» que vivía aquí se retiró: el bloque de suscripción ya no
   tiene tarjeta destacada propia, ver docblock de SubscriptionConfigurator. */
.hcp-hero-buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}

.hcp-hero-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	border-color: rgba(255, 255, 255, 0.85);
	color: #ffffff;
}

.hcp-hero-boton:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ------------------------------------------------------------------ *
 * Los Imprescindibles de MicroHobby
 * ------------------------------------------------------------------ */

/* Home boxes with their own padding: WordPress's has-global-padding (constrained
   group inside another) resets the side padding to 0 if it isn't restored here. */
.hcp-home-imprescindibles.has-global-padding,
.hcp-home-extras.has-global-padding,
.hcp-home-tiendas-caja.has-global-padding {
	padding-inline: 1.5rem;
}

.hcp-home-imprescindibles {
	background: var(--wp--preset--color--zx-black, #1a181c);
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
	border-radius: var(--hcp-radius, 14px);
	text-align: center;
}

/* Cinta arcoíris diagonal ZX Spectrum, esquina inferior derecha — de
   .hcp-pt-imprescindibles-ribbon (producción). Necesita padding vertical
   real: sin contenido ni altura fija, un <span> vacío no ocupa espacio y
   la cinta no se llega a ver (bug encontrado 20-09-2026: llevaba la clase
   .hcp-zx-ribbon, una franja horizontal fina pensada para otro uso, con
   height:auto pisando la suya — nunca se veía). */
.hcp-home-imprescindibles-ribbon {
	position: absolute;
	bottom: 5px;
	right: -70px;
	width: 210px;
	padding: 20px 0;
	background: linear-gradient(
		0deg,
		#57c2ff 0%, #57c2ff 25%,
		#84bc33 25%, #84bc33 50%,
		#f5f929 50%, #f5f929 75%,
		#e83d23 75%, #e83d23 100%
	);
	transform: rotate(-45deg);
	z-index: 2;
}

.hcp-home-imprescindibles-titulo {
	position: relative;
	z-index: 1;
	font-size: clamp(20px, 7vw, 32px);
	margin: 0;
	color: var(--wp--preset--color--zx-gold, #d3b768);
}

.hcp-home-imprescindibles-titulo .is-a {
	color: #ffffff;
}

.hcp-home-imprescindibles-titulo .is-b {
	color: var(--wp--preset--color--red, #cf2e2e);
}

/* The ribbon (absolute) is the first child: WordPress gives the subtitle the
   24px block gap as if it were the second, and the top ends up bigger than the bottom. */
.hcp-home-imprescindibles > p.hcp-home-imprescindibles-subtitulo {
	margin-block-start: 0;
}

.hcp-home-imprescindibles-subtitulo {
	position: relative;
	z-index: 1;
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
	color: var(--wp--preset--color--zx-gold, #d3b768);
}

.hcp-home-imprescindibles-intro {
	position: relative;
	z-index: 1;
	max-width: none;
	margin: 0.5rem auto 2rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
}

.wp-block-columns.hcp-home-imprescindibles-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, calc(55% - 35px)) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 40px);
	text-align: left;
}

.hcp-home-imprescindibles-grid > .wp-block-column {
	min-width: 0;
	margin: 0;
}

.hcp-home-imprescindibles-grid > .wp-block-column:last-child {
	align-self: start;
}

.hcp-home-imprescindible-destacado {
	display: grid;
	grid-template-columns: 240px 1fr;
	align-items: start;
	gap: 28px;
}

.hcp-home-imprescindible-img {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: var(--hcp-radius-sm);
}

.hcp-home-imprescindible-img img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 667 / 1024;
	object-fit: cover;
	border-radius: var(--hcp-radius-sm);
	border: 1px solid var(--wp--preset--color--zx-gold, #d3b768);
}

.hcp-home-imprescindible-ribbon {
	position: absolute;
	top: 18px;
	left: -42px;
	width: 150px;
	padding: 5px 0;
	background-color: var(--wp--preset--color--zx-gold, #d3b768);
	color: var(--wp--preset--color--zx-black, #1a181c);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
	text-transform: uppercase;
	transform: rotate(-45deg);
	box-shadow: 6px 2px 3px rgba(0, 0, 0, 0.4);
	z-index: 2;
}

.hcp-home-imprescindible-ribbon.is-agotado {
	background-color: var(--wp--preset--color--red, #cf2e2e);
	color: #fff;
}

.hcp-home-imprescindible-info {
	color: #fff;
	display: flex;
	flex-direction: column;
}

.hcp-home-imprescindible-desc {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.hcp-home-imprescindible-desc p {
	margin: 0 0 0.5rem;
}

.hcp-home-imprescindible-desc p:last-child {
	margin-bottom: 0;
}

.hcp-home-imprescindible-boton {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	color: #fff;
	border-color: #fff;
}

.hcp-home-imprescindible-boton: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);
}

.hcp-home-otros-titulos-titulo {
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--zx-gold, #d3b768);
	text-align: center;
}

.hcp-home-otros-titulos-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.5vw, 22px);
}

.hcp-home-otro-titulo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-align: center;
}

.hcp-home-otro-titulo-img {
	display: block;
	box-sizing: border-box;
	width: min(100%, 140px);
	aspect-ratio: 667 / 1024;
	border-radius: var(--hcp-radius-sm);
	border: 1px solid var(--wp--preset--color--zx-gold, #d3b768);
	overflow: hidden;
}

.hcp-home-otro-titulo-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hcp-home-otro-titulo-info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ffffff;
}

.hcp-home-otro-titulo-cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.hcp-home-otro-titulo-agotado {
	display: inline-block;
	padding: 3px 9px;
	background-color: var(--wp--preset--color--red, #cf2e2e);
	color: #ffffff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	border-radius: var(--hcp-radius-sm);
}

.hcp-home-otro-titulo-nombre {
	font-weight: 700;
	font-size: 16px;
	color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Ediciones Especiales
 * ------------------------------------------------------------------ */

.hcp-home-destacado {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 1.5rem;
	border-radius: var(--hcp-radius, 14px);
	box-sizing: border-box;
	height: 100%;
	background-color: var(--wp--custom--rev--accent, #7a4d9e);
	color: var(--wp--custom--rev--accent-contrast, #fff);
}

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

.hcp-home-destacado-img {
	display: block;
	position: relative;
	z-index: 1;
}

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

.hcp-home-destacado-info {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
}

.hcp-home-destacado-info h2 {
	margin: 0 0 0.75rem;
	font-size: 26px;
	color: inherit;
}

.hcp-home-destacado-desc {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: inherit;
}

.hcp-home-destacado-boton {
	display: block;
	margin-top: auto;
	color: inherit;
}

.hcp-home-destacado-boton:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------------------------------ *
 * Láminas de Pixels
 * ------------------------------------------------------------------ */

.hcp-home-extras {
	background-color: var(--wp--preset--color--px, #7a4d9e);
	background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/wp-content/uploads/2025/06/laminas-suscriptores-pixels.jpg');
	background-size: cover;
	background-position: center;
	padding: 1.5rem;
	border-radius: var(--hcp-radius, 14px);
}

.hcp-home-extras-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.hcp-home-extra-producto img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	border-radius: var(--hcp-radius-sm);
	border: 1px solid var(--wp--preset--color--zx-gold, #d3b768);
}

.hcp-home-extras-texto {
	color: #ffffff;
}

.hcp-home-extras-titulo {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	margin: 0 0 0.75rem;
	color: #ffffff;
}

.hcp-home-extras-subtitulo {
	margin: 0 0 1.25rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.hcp-home-extras-boton {
	display: inline-block;
	color: #fff !important;
	border-color: #fff;
}

.hcp-home-extras-texto > .hcp-home-extras-boton {
	margin-block-start: 1rem;
}

.hcp-home-extras-boton:hover {
	background-color: var(--wp--preset--color--zx-black, #1a181c);
	border-color: var(--wp--preset--color--zx-black, #1a181c);
}

/* ------------------------------------------------------------------ *
 * Puntos de venta
 * ------------------------------------------------------------------ */

.hcp-home-tiendas-caja {
	background: var(--wp--preset--color--teal-ink, #2fb3ad);
	padding: 1.5rem;
	border-radius: var(--hcp-radius, 14px);
	box-sizing: border-box;
	color: #ffffff;
}

.hcp-home-tiendas-titulo {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0 0 .5rem;
	color: #ffffff;
}

.hcp-home-tiendas-intro {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
}

.hcp-home-donde {
	display: grid;
	gap: 1.25rem;
	margin-top: 1.25rem;
}

.hcp-home-donde-subtitulo {
	margin: 0 0 .75rem;
	font-size: .85rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #ffffff;
}

.hcp-home-eventos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hcp-home-evento {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: .75rem 1rem;
	background: #ffffff;
	border-radius: var(--hcp-radius-sm);
	color: var(--wp--preset--color--ink);
}

.hcp-home-evento-fecha {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	padding: 6px 8px;
	border-radius: var(--hcp-radius-sm);
	background: var(--wp--preset--color--teal-ink, #2fb3ad);
	color: #ffffff;
	line-height: 1.05;
}

.hcp-home-evento-dia { font-size: 1.35rem; font-weight: 800; }
.hcp-home-evento-mes { font-size: .75rem; font-weight: 700; letter-spacing: .05em; }

.hcp-home-evento-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hcp-home-evento-nombre { font-weight: 700; color: var(--wp--preset--color--teal-ink, #2fb3ad); }
.hcp-home-evento-lugar { font-size: .9rem; color: var(--wp--preset--color--muted); }

.hcp-home-evento-enlace,
.hcp-home-tienda-enlaces a {
	padding: 5px 10px;
	border: 1.5px solid var(--wp--preset--color--teal-ink, #2fb3ad);
	border-radius: var(--hcp-radius-sm);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--teal-ink, #2fb3ad);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.hcp-home-evento-enlace:hover,
.hcp-home-tienda-enlaces a:hover {
	background: var(--wp--preset--color--teal-ink, #2fb3ad);
	color: #ffffff;
}

.hcp-home-eventos-vacio {
	margin: 0;
	padding: 1rem;
	border: 1.5px dashed rgba(255, 255, 255, .6);
	border-radius: var(--hcp-radius-sm);
	color: #ffffff;
}

.hcp-home-tiendas-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.hcp-home-tienda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .85rem;
	padding: .6rem .85rem;
	background: #ffffff;
	border-radius: var(--hcp-radius-sm);
	color: var(--wp--preset--color--ink);
}

.hcp-home-tienda-logo {
	flex: none;
	box-sizing: border-box;
	width: 84px;
	height: 56px;
	padding: 6px 10px;
	object-fit: contain;
	border-radius: var(--hcp-radius-sm);
	background: var(--wp--preset--color--teal-ink, #2fb3ad);
}

.hcp-home-tienda-datos { flex: 1; min-width: 0; }

.hcp-home-tienda-nombre {
	margin: 0;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--wp--preset--color--teal-ink, #2fb3ad);
}

.hcp-home-tienda-lugar {
	margin: 1px 0 0;
	font-size: .9rem;
	color: var(--wp--preset--color--muted);
}

.hcp-home-tienda-enlaces {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 6px;
	margin: 0 0 0 auto;
}


@media (max-width: 700px) {
	.hcp-home-eventos,
	.hcp-home-tiendas-lista { grid-template-columns: minmax(0, 1fr); }
}

/* Sin sitio a la derecha, los botones bajan a una fila propia. */
@media (max-width: 420px) {
	.hcp-home-tienda-enlaces { flex-basis: 100%; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 900px) {
	.hcp-home-imprescindibles {
		padding-bottom: 4rem;
	}

	.wp-block-columns.hcp-home-imprescindibles-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hcp-home-imprescindible-destacado {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.hcp-home-imprescindible-img {
		width: 100%;
		margin: 0 auto;
	}

	.hcp-home-imprescindible-info {
		align-items: center;
	}

	.hcp-home-imprescindible-boton {
		align-self: center;
	}

	.hcp-home-otro-titulo-nombre {
		font-size: 15px;
	}

	.hcp-home-extras-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 700px) {
	.hcp-home-imprescindible-desc {
		width: 100%;
		text-align: left;
	}
}

/* ------------------------------------------------------------------ *
 * Página «¿Qué revista necesitas?» (patterns/pagina-que-revista.php)
 * + banner de enlace en la home (patterns/home-que-revista-banner.php)
 * ------------------------------------------------------------------ */

.hcp-quien-eyebrow {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin: 0 0 0.5rem;
}

.hcp-quien-lead {
	max-width: 60ch;
	color: var(--wp--preset--color--muted, #6b6b6b);
	font-size: 1.0625rem;
}

/* auto-fit en vez de un número fijo de columnas: hoy son 4 tarjetas
   (Pixels/MicroHobby/Micromanía/Última Generación), pero no hace falta un
   breakpoint dedicado si mañana cambia el número — se reordena solo según
   el ancho disponible. */
.hcp-quien-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

.hcp-quien-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
	border-radius: var(--hcp-radius, 14px);
	background-color: var(--wp--custom--rev--accent, #7a4d9e);
	color: var(--wp--custom--rev--accent-contrast, #fff);
}

/* Badge "Próximamente" — Última Generación es una tarjeta más del grid,
   sin tratamiento aparte; esta es su única diferencia visible mientras no
   tenga suscripción propia (a petición de Joaquín, 21-09-2026). */
.hcp-quien-badge {
	align-self: flex-start;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.2);
	color: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hcp-quien-nombre {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	color: inherit;
}

.hcp-quien-tagline {
	margin: -0.5rem 0 0;
	font-style: italic;
	font-weight: 600;
	opacity: 0.9;
}

.hcp-quien-lista {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Recuadro "Ideal si buscas": una veladura oscura sobre el color de la
   tarjeta, no una caja blanca — el blanco de fondo está aparcado (ver
   auditoría 20-09-2026), a la espera de decidirlo. */
.hcp-quien-ideal {
	margin-top: auto;
	padding: 0.875rem 1rem;
	border-left: 3px solid var(--wp--custom--rev--accent-contrast, #fff);
	background: rgba(0, 0, 0, 0.18);
	border-radius: 0 8px 8px 0;
	font-size: 0.875rem;
	line-height: 1.5;
}

.hcp-quien-boton {
	align-self: flex-start;
	margin-top: 0.25rem;
	color: inherit;
}

.hcp-quien-boton:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* Banner y selector de revistas de la home. */
.hcp-quien-banner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	border: 1.5px solid var(--wp--preset--color--line, #e0e0e0);
	border-radius: var(--hcp-radius, 14px);
	background: #fff;
}

.hcp-quien-banner > :not(.hcp-quien-tetriminos) {
	position: relative;
	z-index: 1;
}

.hcp-quien-tetriminos {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}

.hcp-quien-tetrimino {
	position: absolute;
	top: -70px;
	width: var(--hcp-tetro-size);
	height: var(--hcp-tetro-size);
	opacity: 0.45;
	animation: hcp-quien-tetrimino-fall var(--hcp-tetro-duration) steps(var(--hcp-tetro-steps), end) var(--hcp-tetro-delay) infinite;
}

.hcp-quien-tetrimino span {
	position: absolute;
	width: var(--hcp-tetro-cell);
	height: var(--hcp-tetro-cell);
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 2px;
	background: var(--hcp-tetro-color);
}

@keyframes hcp-quien-tetrimino-fall {
	0% { top: -70px; opacity: 0.45; }
	84% { top: calc(100% - var(--hcp-tetro-height)); opacity: 0.45; }
	94% { top: calc(100% - var(--hcp-tetro-height)); opacity: 0.45; }
	100% { top: calc(100% - var(--hcp-tetro-height)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hcp-quien-tetriminos { display: none; }
}

.hcp-quien-banner-texto {
	display: flex;
	align-items: center;
}

.hcp-quien-banner-titulo {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.hcp-quien-banner-sub {
	margin: 0.125rem 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted, #6b6b6b);
}

.hcp-quien-banner-boton {
	flex: 0 0 auto;
	padding: 10px 22px;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--wp--preset--color--red);
	border-radius: var(--hcp-radius-sm);
	transition: background-color .15s ease;
	cursor: pointer;
}

.hcp-quien-banner-boton:hover {
	background: var(--wp--preset--color--red-dark, #a11f1f);
}

.hcp-quien-selector[hidden],
.hcp-quien-selector-resultado[hidden] {
	display: none;
}

.hcp-quien-selector {
	box-sizing: border-box;
	flex: 0 0 100%;
	min-width: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line, #e0e0e0);
}

.hcp-quien-selector-temas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 1rem;
}

.hcp-quien-selector-temas label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line, #e0e0e0);
	border-radius: var(--hcp-radius-sm);
	background: #fff;
	cursor: pointer;
}

.hcp-quien-selector-temas input {
	margin: 0;
	accent-color: var(--wp--preset--color--red);
}

.hcp-quien-selector-temas input:checked + span {
	color: var(--wp--preset--color--red);
	font-weight: 700;
}

.hcp-quien-selector-opciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.hcp-quien-selector-opcion {
	padding: 0.875rem 1rem;
	border: 1.5px solid var(--wp--preset--color--line, #e0e0e0);
	border-radius: var(--hcp-radius-sm);
	background: #fff;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.hcp-quien-selector-opcion[hidden] {
	display: none;
}

.hcp-quien-selector-opcion:hover,
.hcp-quien-selector-opcion[aria-pressed="true"] {
	border-color: var(--wp--preset--color--red);
	background: #fff;
}

.hcp-quien-banner-boton:focus-visible,
.hcp-quien-selector-opcion:focus-visible,
.hcp-quien-selector-resultado a:focus-visible {
	outline: 3px solid var(--wp--preset--color--red);
	outline-offset: 3px;
}

.hcp-quien-selector-resultado {
	margin-top: 1rem;
	padding: 0.875rem 1rem;
	border-left: 4px solid var(--wp--custom--rev--accent, var(--wp--preset--color--red));
	background: var(--wp--custom--rev--halo, #f5f5f5);
	border-radius: 0 var(--hcp-radius-sm) var(--hcp-radius-sm) 0;
}

.hcp-quien-selector-resultado p {
	margin: 0 0 0.5rem;
}

.hcp-quien-selector-resultado h3 {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
}

.hcp-quien-selector-resultado .hcp-quien-selector-tagline {
	font-style: italic;
	font-weight: 600;
}

.hcp-quien-selector-resultado ul {
	margin: 0 0 0.75rem;
	padding-left: 1.25rem;
	line-height: 1.5;
}

.hcp-quien-selector-resultado li + li {
	margin-top: 0.375rem;
}

.hcp-quien-selector-resultado .hcp-quien-selector-ideal {
	margin-bottom: 0.75rem;
}

.hcp-quien-selector-resultado a {
	color: var(--wp--custom--rev--accent-ink, var(--wp--custom--rev--accent));
	font-weight: 700;
}

@media (max-width: 900px) {
	.hcp-quien-banner {
		flex-direction: column;
		text-align: center;
	}

	.hcp-quien-banner-texto {
		flex-direction: column;
	}

	.hcp-quien-selector {
		flex: 0 1 auto;
		width: 100%;
		text-align: left;
	}
}

@media (max-width: 600px) {
	.hcp-quien-selector-opciones {
		grid-template-columns: 1fr;
	}
}