/*
 * HCP · Web — estilos base.
 *
 * Complementan a theme.json: ritmo de página, utilidades de tarjeta/contenedor,
 * y una capa fina para que WooCommerce (botones, precios, avisos, formularios)
 * hable el mismo idioma que el tema. Los componentes grandes (hero de portada,
 * cabecera de archivo por revista, panel de soporte, ficha) llegan con sus
 * plantillas en fases posteriores.
 */

/* ------------------------------------------------------------------ *
 * Fundamentos
 * ------------------------------------------------------------------ */

:root {
	--hcp-wrap: var(--wp--custom--wrap, 1200px);
	--hcp-radius: var(--wp--custom--radius, 14px);
	/* Radio pequeño: imágenes, botones, cajas sueltas dentro de una tarjeta —
	   ya era el valor más repetido con diferencia (encontrado 20-09-2026: 8px
	   en la inmensa mayoría, pero también 3/4/6/10px sueltos para el mismo
	   tipo de elemento). Solo 3 radios en todo el tema: este, el de tarjeta
	   (--hcp-radius) y el de píldora (--hcp-radius-pill). */
	--hcp-radius-sm: 8px;
	--hcp-radius-pill: var(--wp--custom--radius-pill, 999px);
	--hcp-card-padding: var(--wp--custom--card-padding, clamp(12.5px, 4vw, 36px));
}

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

/*
 * Red de seguridad: los bloques `core/image` ya vienen acotados por el propio
 * WordPress (`.wp-block-image img{max-width:100%}`), pero las tarjetas de la
 * home (y otras piezas a medida) escriben `<img>` sueltos dentro de bloques
 * HTML — sin esto, una imagen se renderiza a su tamaño real y desborda la
 * tarjeta (visible sobre todo en móvil, donde el ancho disponible es menor
 * que la imagen). Cada tarjeta puede seguir afinando tamaño/recorte encima.
 */
img {
	max-width: 100%;
	height: auto;
}

/* El atributo `hidden` nativo solo gana si nada más fija `display` en ese
   mismo elemento — un simple `.tarjeta { display: flex; }` (origen autor)
   pisa el `[hidden]{display:none}` del navegador (origen user-agent), que
   siempre pierde frente al autor aunque sea el mismo elemento. Encontrado
   21-09-2026 en el configurador de suscripciones: `.hcp-susc-card`,
   `.hcp-susc-pie` y `.hcp-susc-check-combinado` fijan su propio `display`
   y se toggean con `.hidden = true/false` en JS — sin esta regla, nunca
   se llegan a ocultar de verdad pase lo que pase con el atributo. Regla
   global para que ningún componente nuevo vuelva a caer en esto. */
[hidden] {
	display: none !important;
}

/* Texto solo para lectores de pantalla (convención estándar de WordPress
   — ningún tema base la trae puesta aquí, hay que declararla). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

a {
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

/* Foco visible y coherente en toda la tienda. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--custom--rev--accent, var(--wp--preset--color--red));
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ *
 * Utilidades del tema
 * ------------------------------------------------------------------ */

.hcp-wrap {
	max-width: var(--hcp-wrap);
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2rem);
}

/* Nombre de la editorial en rojo de marca (pie de página). */
.pixels-rojo {
	color: var(--wp--preset--color--red);
}

/* El pie tiene fondo casi negro (--footer-bg): el color de enlace global
   (--rev--accent-ink, casi negro también) es invisible ahí. Los enlaces del
   pie usan el mismo blanco que el resto de su texto. */
.hcp-site-footer a {
	color: var(--wp--preset--color--white);
}
.hcp-site-footer a:hover {
	text-decoration: underline;
}

/* Tarjeta blanca: el contenedor recurrente de todo el sistema. */
.hcp-card,
.wp-block-group.is-style-hcp-card {
	background: var(--wp--preset--color--paper);
	border-radius: var(--hcp-radius);
	padding: var(--hcp-card-padding);
	box-sizing: border-box;
}

/* WordPress's `has-global-padding` (constrained groups) resets the side padding
   to 0 when the card sits inside <main>: the card keeps its own. */
.hcp-card.has-global-padding {
	padding-inline: var(--hcp-card-padding);
}

.hcp-card + .hcp-card {
	margin-top: 1rem;
}

/* Banda a sangre completa dentro de un layout «constrained». */
.hcp-bleed {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

/* ------------------------------------------------------------------ *
 * Cabecera del sitio (parts/header.html)
 * ------------------------------------------------------------------ *
 * Logo a la izquierda, menú + iconos de WooCommerce a la derecha, como
 * en producción (21-09-2026). El grupo raíz usa `justifyContent: left`
 * en el bloque (ver header.html) en vez de `space-between`: con 4 hijos
 * directos —logo, navegación, e icono de cuenta y de carrito que
 * WooCommerce inyecta solo en el render, no están en el HTML del
 * patrón— `space-between` los repartía sueltos por toda la fila en vez
 * de agrupar navegación + iconos a la derecha. `margin-left: auto` en
 * el propio bloque de navegación empuja a la derecha tanto la
 * navegación como todo lo que WooCommerce añada después.
 *
 * El grupo interno llevaba `align: wide` (1320px, `settings.layout.
 * wideSize` en theme.json) mientras el resto de la web usa el ancho de
 * contenido normal (1200px, `contentSize`) — en pantallas grandes el
 * logo y los iconos quedaban pegados a los bordes del navegador, sin el
 * margen que sí tiene el resto de la página (Joaquín, 21-09-2026:
 * "quiero que el contenido de la cabecera quede contenido con el ancho
 * de contenido de la web"). Se quita `align: wide` en header.html; el
 * CSS que genera WordPress para el layout `constrained` del `<header>`
 * ya debería limitar y centrar solo a los hijos directos sin alinear,
 * pero para no depender de esa generación automática ("cómo centramos
 * eso", Joaquín, misma conversación) se fija explícito aquí con el
 * mismo ancho que usa el resto del sitio (`--hcp-wrap`, `.hcp-wrap` en
 * home.css/base.css). */
.hcp-site-header > .wp-block-group {
	max-width: var(--hcp-wrap);
	margin-inline: auto;
}

.hcp-site-header .wp-block-navigation {
	margin-left: auto;
	align-items: center;
}

/* El bloque núcleo de navegación mete su propio relleno vertical en
   cada enlace (`0.5em 1em` por defecto) — con eso, aunque la fila entera
   esté centrada (`verticalAlignment: center` en el grupo raíz), el texto
   del menú acababa más abajo que el logo y los iconos de WooCommerce,
   que no llevan ese relleno (Joaquín, 21-09-2026: "el menú no está
   alineado verticalmente, queda por debajo del logo y de los botones").
   Se fuerza `align-items: center` en cada nivel del propio bloque y se
   quita el relleno vertical del enlace, para que centre por el texto en
   sí, no por una caja con aire desigual alrededor. */
.hcp-site-header .wp-block-navigation__container {
	align-items: center;
}

.hcp-site-header .wp-block-navigation-item {
	display: flex;
	align-items: center;
}

/* Texto del menú en mayúsculas y negrita, como el `.main-navigation a`
   de producción (GeneratePress) — el núcleo de WordPress no pone
   ningún tratamiento de mayúsculas por defecto. */
.hcp-site-header .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.hcp-site-header .wp-block-navigation-item__content:hover,
.hcp-site-header .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

/* Iconos de cuenta y carrito (bloques `woocommerce/customer-account` y
   `woocommerce/mini-cart`) — WooCommerce los inyecta solos en cabeceras
   de tema de bloques sin ellos, sin estilo de marca propio. Con el
   icono de cuenta ya no hace falta el enlace de texto «Mi cuenta» en el
   menú (retirado de header.html). El `<button>` del mini-carrito trae
   relleno/borde de botón por defecto que lo desalinea del resto de la
   cabecera (Joaquín, 21-09-2026: "los botones que añade woocommerce
   están desalineados") — se resetea a caja sin decoración, centrada por
   flex igual que el resto de hijos de la cabecera. */
.hcp-site-header .wp-block-woocommerce-customer-account,
.hcp-site-header .wp-block-woocommerce-mini-cart {
	display: flex;
	align-items: center;
}

.hcp-site-header .wc-block-customer-account__link,
.hcp-site-header .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	color: var(--wp--preset--color--ink);
}

.hcp-site-header .wc-block-customer-account__account-icon,
.hcp-site-header .wc-block-mini-cart__icon {
	display: block;
	width: 1.375rem;
	height: 1.375rem;
}

/* ------------------------------------------------------------------ *
 * Menú móvil (bloque wp:navigation, overlayMenu:"mobile")
 * ------------------------------------------------------------------ *
 * WordPress no trae ningún estilo de marca para el overlay — solo la
 * mecánica (posición, apertura/cierre). Sin esto se ve la superposición
 * en blanco y negro por defecto del núcleo (encontrado 20-09-2026,
 * nunca se había vestido este menú).
 */

.wp-block-navigation__responsive-container-open .wp-block-navigation__responsive-container-open-icon,
.wp-block-navigation__responsive-container-open svg {
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--paper, #fff);
}

.wp-block-navigation__responsive-dialog {
	padding: 0;
}

.wp-block-navigation__responsive-container-close {
	position: absolute;
	top: calc(1rem + env(safe-area-inset-top, 0px));
	right: 1rem;
	color: var(--wp--preset--color--ink);
}

/* Este relleno es solo para el modal a pantalla completa del móvil (deja
   sitio para el botón de cerrar) — sin `.is-menu-open` delante se
   aplicaba también al menú horizontal de escritorio (el mismo elemento
   existe siempre en el DOM, el modal solo cambia de aspecto), empujando
   el texto del menú ~72px hacia abajo y dejándolo fuera de línea con el
   logo y los iconos (encontrado por Joaquín con las herramientas de
   desarrollo del navegador, 21-09-2026 — el verdadero motivo de los 5
   mensajes anteriores intentando centrar por flexbox algo que en
   realidad tenía el padding equivocado). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 1.5rem 2rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line, #e5e0d8);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	padding: 1rem 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--red);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Botones (núcleo + WooCommerce) → una sola apariencia
 * ------------------------------------------------------------------ *
 * 2 variantes en todo el sitio, nunca una tercera inventada aparte:
 *   - Sólido (por defecto): fondo de acento, texto de contraste.
 *   - Contorno (`.is-style-outline` en bloques núcleo; `.hcp-*-boton` en
 *     los patrones HTML de la home usa el mismo radio/tipografía, ver
 *     home.css): transparente, borde de currentColor.
 * Mismo `border-radius` (--hcp-radius-sm), tipografía y peso en ambas —
 * antes cada botón de patrón HTML (home.css) tenía su propio padding/
 * radio/peso, sin relación con este bloque ni entre ellos (encontrado en
 * la auditoría de diseño, 20-09-2026).
 * ------------------------------------------------------------------ */

.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-components-button {
	--wc-btn-bg: var(--wp--custom--rev--accent, var(--wp--preset--color--red));
	background-color: var(--wc-btn-bg);
	color: var(--wp--custom--rev--accent-contrast, #fff);
	border: none;
	border-radius: var(--hcp-radius-sm);
	padding: 0.875rem 1.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
	opacity: 0.9;
	color: var(--wp--custom--rev--accent-contrast, #fff);
}

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-hcp-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--custom--rev--accent, var(--wp--preset--color--red));
	border: 1px solid currentColor;
}

/* ------------------------------------------------------------------ *
 * WooCommerce — coherencia mínima (la ficha y el escaparate se rehacen)
 * ------------------------------------------------------------------ */

.woocommerce {
	font-family: var(--wp--preset--font-family--body);
}

.woocommerce .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--wp--preset--color--paper);
	border-radius: var(--hcp-radius);
	padding: 1rem;
	box-sizing: border-box;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 700;
	padding-top: 0.5rem;
}

.woocommerce ul.products li.product img {
	border-radius: calc(var(--hcp-radius) - 4px);
}

/* Avisos de WooCommerce con la paleta del tema. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--hcp-radius);
	border-top: none;
	font-family: var(--wp--preset--font-family--body);
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	background: var(--wp--preset--color--success-bg);
	box-shadow: inset 4px 0 0 var(--wp--preset--color--success);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--wp--custom--rev--accent, var(--wp--preset--color--red));
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: #ffebee;
	box-shadow: inset 4px 0 0 var(--wp--preset--color--red);
}

/* Campos de formulario (checkout, mi cuenta, comentarios). */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
#comments textarea,
#comments input[type="text"],
#comments input[type="email"] {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hcp-radius-sm);
	background: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------------ *
 * Comentarios (usados en las entradas de vídeo Pixels)
 * ------------------------------------------------------------------ */

.wp-block-comments,
.comments-area {
	background: var(--wp--preset--color--paper);
	border-radius: var(--hcp-radius);
	padding: clamp(1rem, 4vw, 1.5rem);
	max-width: var(--hcp-wrap);
	margin-inline: auto;
}

.comment-reply-title,
.comments-title {
	color: var(--wp--custom--rev--accent-ink, var(--wp--preset--color--px));
}