/*
 * Pulso Médico · Hoja base
 *
 * Archivo: wp-content/themes/Educa-Med/assets/css/pulso-base.css
 * Versión: 1.3.1
 *
 * Contiene tokens, tipografía, patrón de sección y utilidades compartidas
 * por todos los bloques del sistema. No pinta ningún componente.
 *
 * NOTA DELIBERADA: aquí no hay ningún reset por selector de atributo del tipo
 * [class*="pulso-"] ul[class]. En el proyecto FIDYS ese patrón dejó listas sin
 * margen cuatro veces. El box-sizing se acota a .pulso-raiz y las listas se
 * neutralizan con la clase explícita .pulso-lista.
 *
 * Changelog
 * 1.3.1 — El retrato de firma se fija por alto y ancho, no por proporción de
 *         la imagen: con destacadas no cuadradas salía ovalado.
 * 1.3.0 — Estilo «firma»: retrato circular, autor y titular en cursiva.
 * 1.2.0 — Acción de pie de la tarjeta y estilo «formacion».
 * 1.1.0 — Estilos compartidos de tarjeta, encabezado de sección y aviso.
 * 1.0.1 — Token de tipografía de interfaz fijado a Avenir (400 y 700).
 * 1.0.0 — Versión inicial.
 */

/* =========================================================================
 * 1. Tipografía autoalojada · Source Serif 4 (SIL OFL 1.1)
 *    Subconjunto latin + latin-ext. Rutas relativas a assets/css/.
 *
 *    AVISO LiteSpeed: si se activa la combinación de CSS y las rutas se
 *    rompen, excluir este archivo de la combinación o activar la reescritura
 *    de URLs en el módulo de optimización.
 * ====================================================================== */

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-it.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* =========================================================================
 * 2. Tokens
 * ====================================================================== */

:root {

	/* --- Paleta FIDYS -------------------------------------------------- */
	--pulso-color-primario: #003b5c;
	--pulso-color-primario-oscuro: #002a42;
	--pulso-color-secundario: #235779;
	--pulso-color-acento: #47799e;          /* 4,67:1 sobre blanco */
	--pulso-color-tinte: #dcf0ff;
	--pulso-color-superficie: #f0f5fa;
	--pulso-color-blanco: #ffffff;
	--pulso-color-hueso: #fcfcfc;
	--pulso-color-tinta: #111111;
	--pulso-color-tinta-fuerte: #00040a;

	/* Filetes y textos secundarios */
	--pulso-color-linea: #d6e0ea;
	--pulso-color-linea-suave: #e4eff7;
	--pulso-color-linea-oscura: #1a5175;    /* filete sobre fondo primario */
	--pulso-color-apagado: #5a6b7a;         /* 4,96:1 sobre superficie */
	--pulso-color-claro: #a8c4d8;           /* 6,56:1 sobre primario */

	/* Co-branding heredado del ecosistema */
	--pulso-color-semergen: #1f695d;
	--pulso-color-naranja: #ff7600;
	--pulso-color-oro: #b18442;
	--pulso-color-oro-oscuro: #8d662f;

	/* --- Tipografía ---------------------------------------------------- */

	/* Editorial: titulares, entradillas, citas y cuerpo. */
	--pulso-fuente-editorial: "Source Serif 4", Georgia, "Times New Roman", serif;

	/* Interfaz: antetítulos, meta, navegación, botones y píldoras.
	   Avenir está subida al sitio con dos variantes: 400 y 700. El sistema
	   no usa ningún otro peso en esta familia, así que no habrá sintéticos. */
	--pulso-fuente-ui: "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, Helvetica, Arial, sans-serif;

	/* Escala. Suelo de 12 px en etiquetas y 16 px en cuerpo: el diseño
	   original bajaba a 8, 9, 10 y 11 px. */
	--pulso-texto-micro: 12px;              /* franja institucional, meta menor */
	--pulso-texto-etiqueta: 13px;           /* antetítulos, navegación, píldoras */
	--pulso-texto-menor: 14px;
	--pulso-texto-base: 16px;
	--pulso-texto-entradilla: 18px;
	--pulso-texto-titular-s: 20px;
	--pulso-texto-titular-m: 24px;
	--pulso-texto-titular-l: 28px;
	--pulso-texto-titular-xl: 34px;
	--pulso-texto-apertura: clamp(34px, 4.4vw, 56px);

	--pulso-interlineado-titular: 1.14;
	--pulso-interlineado-apertura: 1.06;
	--pulso-interlineado-cuerpo: 1.5;

	--pulso-tracking-titular: -0.02em;
	--pulso-tracking-etiqueta: 0.14em;
	--pulso-tracking-nav: 0.1em;

	/* --- Espaciado (base 4) -------------------------------------------- */
	--pulso-esp-4: 4px;
	--pulso-esp-8: 8px;
	--pulso-esp-12: 12px;
	--pulso-esp-16: 16px;
	--pulso-esp-20: 20px;
	--pulso-esp-24: 24px;
	--pulso-esp-32: 32px;
	--pulso-esp-40: 40px;
	--pulso-esp-56: 56px;

	/* --- Trazado ------------------------------------------------------- */
	--pulso-max: 1240px;
	--pulso-gutter: 28px;
	--pulso-filete: 1px solid var(--pulso-color-linea);

	/* Altura de la cabecera de Astra cuando está fijada. La escribe
	   view.js del bloque de cabecera midiendo la posición computada real. */
	--pulso-desplazamiento: 0px;
}

/* =========================================================================
 * 3. Raíz de bloque
 *    box-sizing acotado, nunca global.
 * ====================================================================== */

.pulso-raiz,
.pulso-raiz *,
.pulso-raiz *::before,
.pulso-raiz *::after {
	box-sizing: border-box;
}

.pulso-raiz {
	font-family: var(--pulso-fuente-ui);
	color: var(--pulso-color-primario);
	-webkit-font-smoothing: antialiased;
}

.pulso-raiz img {
	max-width: 100%;
	height: auto;
}

/* =========================================================================
 * 4. Patrón de sección
 *    .pulso-seccion aporta el sangrado lateral y el fondo a ancho completo.
 *    .pulso-seccion__interior limita el ancho y centra.
 * ====================================================================== */

.pulso-seccion {
	padding-inline: var(--pulso-gutter);
}

.pulso-seccion__interior {
	max-width: var(--pulso-max);
	margin-inline: auto;
}

/* =========================================================================
 * 5. Utilidades compartidas
 * ====================================================================== */

/* Lista sin viñetas. Clase explícita: nunca por selector de atributo. */
.pulso-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Texto solo para lectores de pantalla. Réplica del patrón de WordPress
   para no depender de que Astra encole el suyo. */
.pulso-oculto-visual {
	position: absolute !important; /* Compite con la cascada del tema. */
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Antetítulo de sección: mayúsculas espaciadas en tipografía de interfaz. */
.pulso-antetitulo {
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-etiqueta);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	color: var(--pulso-color-acento);
	margin: 0;
}

/* Foco visible propio, por si el tema lo suprime. */
.pulso-raiz a:focus-visible,
.pulso-raiz button:focus-visible,
.pulso-raiz input:focus-visible {
	outline: 2px solid var(--pulso-color-acento);
	outline-offset: 2px;
}

/* =========================================================================
 * 5 bis. Tarjeta de entrada
 *
 * La pinta educa_pulso_tarjeta(). Aquí va lo común a todos los estilos; lo
 * propio de cada bloque, en su hoja.
 * ====================================================================== */

.pulso-tarjeta {
	display: flex;
	flex-direction: column;
	gap: var(--pulso-esp-12);
}

.pulso-tarjeta__medio {
	display: block;
	line-height: 0;
	background-color: var(--pulso-color-linea-suave);
}

.pulso-tarjeta__imagen {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.pulso-tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--pulso-esp-8);
}

.pulso-tarjeta__antetitulo {
	margin: 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-etiqueta);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pulso-color-acento);
}

.pulso-tarjeta__titular {
	margin: 0;
	font-family: var(--pulso-fuente-editorial);
	font-weight: 600;
	letter-spacing: var(--pulso-tracking-titular);
	line-height: var(--pulso-interlineado-titular);
	color: var(--pulso-color-primario);
}

.pulso-tarjeta__enlace {
	color: inherit;
	text-decoration: none;
}

.pulso-tarjeta__enlace:hover,
.pulso-tarjeta__enlace:focus-visible {
	color: var(--pulso-color-acento);
}

.pulso-tarjeta__entradilla {
	margin: 0;
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-entradilla);
	line-height: var(--pulso-interlineado-cuerpo);
	color: var(--pulso-color-apagado);
}

.pulso-tarjeta__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pulso-esp-8);
	margin: 0;
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--pulso-color-apagado);
}

.pulso-tarjeta__separador {
	color: var(--pulso-color-linea);
}

/* --- Acción de pie --- */

.pulso-tarjeta__accion {
	margin: 0;
}

.pulso-tarjeta__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--pulso-esp-8);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pulso-color-acento);
}

.pulso-tarjeta__cta:hover,
.pulso-tarjeta__cta:focus-visible {
	color: var(--pulso-color-primario);
}

.pulso-tarjeta__flecha {
	transition: transform 0.15s ease;
}

.pulso-tarjeta__cta:hover .pulso-tarjeta__flecha {
	transform: translateX(3px);
}

/* --- Estilo formacion: la acción se pega al pie de la tarjeta --- */

.pulso-tarjeta--formacion .pulso-tarjeta__cuerpo {
	flex: 1 1 auto;
}

.pulso-tarjeta--formacion .pulso-tarjeta__titular {
	font-size: var(--pulso-texto-titular-s);
}

.pulso-tarjeta--formacion .pulso-tarjeta__entradilla {
	font-size: var(--pulso-texto-base);
}

/* --- Tamaños de titular por estilo --- */

.pulso-tarjeta--apertura .pulso-tarjeta__titular {
	font-size: var(--pulso-texto-apertura);
	line-height: var(--pulso-interlineado-apertura);
}

.pulso-tarjeta--foto .pulso-tarjeta__titular,
.pulso-tarjeta--apaisada .pulso-tarjeta__titular {
	font-size: var(--pulso-texto-titular-m);
}

.pulso-tarjeta--retrato .pulso-tarjeta__titular,
.pulso-tarjeta--titular .pulso-tarjeta__titular {
	font-size: var(--pulso-texto-titular-s);
}

/* --- Estilo firma: retrato circular a la izquierda --- */

.pulso-tarjeta--firma {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--pulso-esp-16);
}

/*
 * El círculo se fija con alto y ancho en el contenedor, y la imagen lo rellena
 * al 100 % en ambos ejes. Confiar en aspect-ratio sobre la imagen no basta:
 * con una destacada no cuadrada, el contenedor crecía en vertical y el
 * border-radius del 50 % daba un óvalo.
 */
.pulso-tarjeta--firma .pulso-tarjeta__medio {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	background-color: var(--pulso-color-linea-suave);
}

.pulso-tarjeta--firma .pulso-tarjeta__imagen {
	width: 100%;
	height: 100%;
	/* En un retrato, la cara suele estar en la mitad superior. */
	object-position: center top;
	aspect-ratio: auto;
}

.pulso-tarjeta--firma .pulso-tarjeta__cuerpo {
	gap: var(--pulso-esp-4);
}

.pulso-tarjeta--firma .pulso-tarjeta__antetitulo {
	font-size: var(--pulso-texto-micro);
	letter-spacing: 0.1em;
	color: var(--pulso-color-primario);
}

.pulso-tarjeta--firma .pulso-tarjeta__titular {
	font-size: var(--pulso-texto-titular-s);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
}

/* --- Estilo apaisada: imagen a la izquierda --- */

@media (min-width: 641px) {

	.pulso-tarjeta--apaisada {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--pulso-esp-24);
	}
}

/* =========================================================================
 * 5 ter. Encabezado de sección
 * ====================================================================== */

.pulso-encabezado {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pulso-esp-12);
	padding-bottom: var(--pulso-esp-12);
	border-bottom: 2px solid var(--pulso-color-primario);
	margin-bottom: var(--pulso-esp-24);
}

.pulso-encabezado__titulo {
	margin: 0;
	font-family: var(--pulso-fuente-editorial);
	font-size: var(--pulso-texto-titular-m);
	font-weight: 600;
	letter-spacing: var(--pulso-tracking-titular);
	line-height: 1.2;
	color: var(--pulso-color-primario);
}

.pulso-encabezado__enlace {
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-micro);
	font-weight: 700;
	letter-spacing: var(--pulso-tracking-etiqueta);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pulso-color-acento);
}

.pulso-encabezado__enlace:hover,
.pulso-encabezado__enlace:focus-visible {
	text-decoration: underline;
}

/* =========================================================================
 * 5 quater. Aviso del editor
 * ====================================================================== */

.pulso-aviso {
	padding: var(--pulso-esp-16);
	border: 1px dashed var(--pulso-color-linea);
	font-family: var(--pulso-fuente-ui);
	font-size: var(--pulso-texto-menor);
	color: var(--pulso-color-apagado);
}

/* =========================================================================
 * 6. Preferencias del usuario
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {

	.pulso-raiz *,
	.pulso-raiz *::before,
	.pulso-raiz *::after {
		transition-duration: 0.01ms !important; /* Anula transiciones del tema. */
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}