/*
Theme Name: Astra Child
Template: astra
Version: 0.9.0
Text Domain: blog-audiologia
*/

/* =========================================================
   Estilo global (S01). Colores: solo var(--token) de assets/css/tokens.css (docs/paleta.json, reglas 1–9 y
   zonas). Tipografía (D41), escala y componentes: maqueta/sitio/assets/css/maqueta.css (H12).
   La tipografía base, los colores de enlace y botón y la paleta global los fija functions.php en Astra.
   ========================================================= */

@font-face {
	font-family: "Lora";
	src: url("assets/fonts/lora-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lora";
	src: url("assets/fonts/lora-latin-wght-italic.woff2") format("woff2");
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("assets/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

/* Caras de reserva (S10, tarea 1): Arial y Georgia ajustadas a las métricas de Source Sans 3 y de Lora 700, para que el
   texto no salte cuando llega la fuente web (CLS). Medidas en Chromium con un párrafo de muestra: size-adjust = ancho
   de la fuente web / ancho de la de reserva; ascent y descent de la fuente web, divididos por size-adjust. */
@font-face {
	font-family: "Source Sans 3 reserva";
	src: local("Arial"), local("ArialMT");
	font-weight: 200 500;
	size-adjust: 92.5%;
	ascent-override: 110.27%;
	descent-override: 43.24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Source Sans 3 reserva";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 900;
	size-adjust: 92.5%;
	ascent-override: 110.27%;
	descent-override: 43.24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Lora reserva";
	src: local("Georgia");
	font-weight: 400 500;
	size-adjust: 92.42%;
	ascent-override: 109.28%;
	descent-override: 29.21%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Lora reserva";
	src: local("Georgia Bold"), local("Georgia-Bold");
	font-weight: 600 700;
	size-adjust: 92.42%;
	ascent-override: 109.28%;
	descent-override: 29.21%;
	line-gap-override: 0%;
}

:root {
	--esp-1: 4px;
	--esp-2: 8px;
	--esp-3: 16px;
	--esp-4: 24px;
	--esp-5: 32px;
	--esp-6: 48px;
	--esp-7: 64px;
	--contenedor: 1200px;
	--lectura: 70ch;
	--radio: 6px;
	--f-titulos: "Lora", "Lora reserva", Georgia, "Times New Roman", serif;
	--f-texto: "Source Sans 3", "Source Sans 3 reserva", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Movimiento reducido (S10, tarea 3; maqueta.css): sin transiciones ni animaciones y sin desplazamiento suave.
   !important para ganarle a Astra, que anima todos los enlaces (0,2 s). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Texto (regla 1: texto largo y titulares en tinta) ---------- */
body {
	background-color: var(--papel);
	color: var(--tinta);
}

strong,
b {
	font-weight: 600;
}

.ba-chico {
	font-size: 15px;
}

/* Columna de lectura en entradas y páginas. */
.single .entry-content,
.page .entry-content {
	max-width: var(--lectura);
}

/* ---------- Enlaces (regla 2): magenta profundo; en párrafos, subrayados; hover en primario sin subrayado ---------- */
a {
	color: var(--magenta-profundo);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--primario);
}

p a,
.entry-content li a,
.entry-meta a {
	text-decoration: underline;
}

p a:hover,
.entry-content li a:hover,
.entry-meta a:hover {
	text-decoration: none;
}

/* ---------- Foco (regla 6): 2 px en magenta profundo con 2 px de separación, sin cambiar el fondo ---------- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.ba-foco-forzado {
	outline: 2px solid var(--magenta-profundo);
	outline-offset: 2px;
}

/* "Ir al contenido" (S03-5, S10-2): Astra lo muestra al enfocarlo, pero con sus propios colores; aquí, los de la
   paleta (enlace en magenta profundo sobre papel, regla 2). */
.skip-link.screen-reader-text:focus {
	background-color: var(--papel);
	color: var(--magenta-profundo);
}

/* ---------- Botón: fondo primario, texto papel; hover magenta profundo; radio 6 px ---------- */
.wp-block-button .wp-block-button__link {
	background-color: var(--primario);
	color: var(--papel);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	padding: 12px 22px;
	border: 0;
	border-radius: var(--radio);
	text-decoration: none;
}

.wp-block-button .wp-block-button__link:hover {
	background-color: var(--magenta-profundo);
	color: var(--papel);
}

/* ---------- Citas y bloques destacados: fondo nieve rosa ---------- */
.entry-content .wp-block-quote {
	margin: var(--esp-5) 0;
	padding: var(--esp-4) var(--esp-5);
	background-color: var(--nieve-rosa);
	border: 0;
	border-left: 4px solid var(--primario);
	border-radius: 0 var(--radio) var(--radio) 0;
}

/* WordPress (estilos de bloques, en línea) pone un filete gris de 5 px con este selector: se vuelve al primario (S04). */
.entry-content .wp-block-quote:not(.has-text-align-right):not(.has-text-align-center) {
	border-left: 4px solid var(--primario);
}

.entry-content .wp-block-quote p {
	margin: 0;
	font-family: var(--f-titulos);
	font-size: 21px;
	font-style: italic;
	line-height: 1.45;
}

.entry-content .ba-destacado {
	margin: var(--esp-4) 0;
	padding: var(--esp-3) var(--esp-4);
	background-color: var(--nieve-rosa);
	border-radius: var(--radio);
	font-size: 15px;
}

.entry-content .ba-destacado > :last-child {
	margin-bottom: 0;
}

/* ---------- Separadores decorativos en malva; bordes de campos en neutro (regla 7) ---------- */
hr,
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--malva);
}

label {
	color: var(--neutro);
}

input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"]),
select,
textarea {
	border: 1px solid var(--neutro);
	border-radius: var(--radio);
	background-color: var(--papel);
	color: var(--tinta);
}

/* Astra, al enfocar un campo, cambia el borde a su azul por defecto y quita el contorno: se vuelve a la regla 6. */
input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"]):focus,
select:focus,
textarea:focus {
	border-color: var(--neutro);
	color: var(--tinta);
}

input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--magenta-profundo);
	outline-offset: 2px;
}

/* ---------- Zona pie (fondo tinta, reglas 8–9 y zonas.pie). El pie real se arma en S03 ---------- */
.ba-zona-pie {
	background-color: var(--tinta);
	color: var(--papel);
}

.ba-zona-pie a {
	color: var(--nieve-rosa);
}

.ba-zona-pie a:hover {
	color: var(--papel);
}

.ba-zona-pie .ba-secundario {
	color: var(--rosa-polvo);
}

.ba-zona-pie :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--nieve-rosa);
}

/* =========================================================
   Cabecera y menú (S03; D22, D42 zona cabecera; maqueta/sitio/assets/css/maqueta.css). Móvil y tablet: ≤ 921 px.
   Sombras: color derivado de un token (S03-4), única forma permitida por lint:colores.
   ========================================================= */
.ba-cabecera {
	background-color: var(--papel);
	border-bottom: 1px solid var(--malva);
}

.ba-cabecera__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-3) var(--esp-4);
	padding-block: var(--esp-4);
}

.ba-marca {
	display: flex;
	flex-direction: column;
	color: var(--tinta);
	text-decoration: none;
}

.ba-marca:hover {
	color: var(--tinta);
}

.ba-marca__nombre {
	font-family: var(--f-titulos);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
}

.ba-marca__titulo {
	font-size: 15px;
	color: var(--neutro);
}

.ba-menu-boton {
	display: none;
	align-items: center;
	gap: var(--esp-2);
	padding: var(--esp-2) var(--esp-3);
	font: inherit;
	font-weight: 600;
	color: var(--tinta);
	background: none;
	border: 1px solid var(--neutro);
	border-radius: var(--radio);
	cursor: pointer;
}

/* Astra pinta los botones con su propio fondo y una sombra: se vuelve al botón de la maqueta. */
.ba-menu-boton,
.ba-sub-boton {
	box-shadow: none;
}

.ba-menu-boton:hover,
.ba-menu-boton:focus {
	color: var(--tinta);
	background: none;
}

.ba-nav__lista {
	display: flex;
	align-items: center;
	gap: var(--esp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-nav a {
	color: var(--tinta);
	font-weight: 600;
	text-decoration: none;
}

.ba-nav a:hover {
	color: var(--magenta-profundo);
}

/* Página actual ("page") o sección actual ("true": Blog cuando se ve una entrada, S04). */
.ba-nav a[aria-current="page"],
.ba-nav a[aria-current="true"] {
	color: var(--magenta-profundo);
	box-shadow: inset 0 -2px 0 var(--primario);
}

.ba-nav .menu-item-has-children {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Botón ▾ del submenú: área de al menos 24 × 24 px (S03-2). */
.ba-sub-boton {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	color: var(--tinta);
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.ba-sub-boton:hover,
.ba-sub-boton:focus {
	color: var(--magenta-profundo);
	background: none;
}

.ba-sub-boton svg {
	transition: transform 0.15s;
}

.ba-sub-boton[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.ba-submenu {
	position: absolute;
	top: calc(100% + 12px);
	left: -16px;
	z-index: 5;
	display: none;
	min-width: 260px;
	margin: 0;
	padding: var(--esp-2) 0;
	list-style: none;
	background-color: var(--papel);
	border: 1px solid var(--malva);
	border-radius: var(--radio);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--tinta) 12%, transparent);
}

.ba-submenu.abierto {
	display: block;
}

.ba-submenu a {
	display: block;
	padding: var(--esp-2) var(--esp-3);
	font-weight: 400;
}

/* "Agenda tu hora": botón primario (regla 4: un solo acento por bloque). */
.ba-nav .ba-menu-cta > a,
.ba-nav .ba-menu-cta > a[aria-current="page"] {
	padding: 10px 18px;
	color: var(--papel);
	background-color: var(--primario);
	border-radius: var(--radio);
	box-shadow: none;
}

.ba-nav .ba-menu-cta > a:hover {
	color: var(--papel);
	background-color: var(--magenta-profundo);
}

/* LinkedIn: al final del menú en escritorio; junto al nombre en ≤ 921 px. Área de al menos 24 × 24 px. */
.ba-nav__linkedin a,
.ba-cabecera-linkedin {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	min-height: 24px;
	color: var(--tinta);
}

.ba-nav__linkedin a:hover,
.ba-cabecera-linkedin:hover {
	color: var(--magenta-profundo);
}

.ba-cabecera-linkedin {
	display: none;
}

@media (max-width: 921px) {
	/* La fila nombre · LinkedIn · Menú nunca se parte; el menú se despliega superpuesto debajo. */
	.ba-cabecera__fila {
		position: relative;
		flex-wrap: nowrap;
		justify-content: flex-start;
	}

	.ba-marca {
		flex: 0 1 auto;
		min-width: 0;
	}

	.ba-cabecera-linkedin {
		display: inline-grid;
		flex: none;
		margin-left: calc(var(--esp-2) * -1);
		padding: 6px;
	}

	.ba-menu-boton {
		display: inline-flex;
		flex: none;
		margin-left: auto;
	}

	.ba-nav {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 6;
		display: none;
		padding-inline: inherit;
		padding-bottom: var(--esp-3);
		background-color: var(--papel);
		border-bottom: 1px solid var(--malva);
		box-shadow: 0 12px 24px color-mix(in srgb, var(--tinta) 10%, transparent);
	}

	.ba-nav.abierta {
		display: block;
	}

	.ba-nav__lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid var(--malva);
	}

	.ba-nav__lista > li {
		border-bottom: 1px solid var(--malva);
	}

	.ba-nav__lista > li > a {
		display: flex;
		padding: 12px 0;
	}

	.ba-nav .menu-item-has-children {
		flex-wrap: wrap;
		gap: 0;
	}

	.ba-nav .menu-item-has-children > a {
		flex: 1;
	}

	.ba-sub-boton {
		min-width: 40px;
		min-height: 40px;
	}

	.ba-submenu {
		position: static;
		flex-basis: 100%;
		min-width: 0;
		padding: 0 0 var(--esp-2) var(--esp-3);
		border: 0;
		box-shadow: none;
	}

	.ba-nav .ba-menu-cta {
		border-bottom: 0;
	}

	.ba-nav .ba-menu-cta > a {
		display: inline-block;
		margin-block: var(--esp-3);
	}

	.ba-nav__linkedin {
		display: none;
	}
}

@media (max-width: 544px) {
	.ba-cabecera__fila {
		column-gap: var(--esp-3);
	}

	.ba-marca__nombre {
		font-size: 22px;
	}

	.ba-menu-boton {
		padding: 10px;
	}

	/* "Menú" queda visualmente oculto y sigue siendo el nombre accesible del botón. */
	.ba-menu-boton__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* =========================================================
   Pie (S03; D42 zona pie: fondo tinta, texto papel, secundario rosa polvo, enlaces y foco nieve rosa)
   ========================================================= */
.ba-pie {
	margin-top: var(--esp-7);
	padding-block: var(--esp-6);
}

.ba-pie__fila {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--esp-5);
}

.ba-pie__contenedor {
	display: block;
}

.ba-pie__nombre {
	margin-bottom: var(--esp-3);
	font-family: var(--f-titulos);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--papel);
}

/* Astra da a los párrafos 1,75 em de margen inferior; la maqueta, 16 px. */
.ba-pie__titulo {
	margin-bottom: var(--esp-3);
	font-size: 15px;
}

.ba-pie__enlaces {
	display: grid;
	gap: var(--esp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-pie a {
	text-decoration: underline;
}

.ba-pie a:hover {
	text-decoration: none;
}

.ba-pie__legal {
	margin: var(--esp-5) 0 0;
	padding-top: var(--esp-4);
	font-size: 15px;
	color: var(--rosa-polvo);
	border-top: 1px solid var(--malva);
}

/* =========================================================
   Entrada (S04; D49; maqueta/sitio/entrada.html): columna principal + barra lateral de 320 px; en ≤ 921 px, una
   columna con la barra lateral debajo. Marcado: single-post.php e inc/entrada.php.
   ========================================================= */
/* Migas de pan (S09, tarea 5; maqueta.css .migas): primeras en entradas y material, antes del título en las páginas de
   tema. Marcado: inc/migas.php. */
.ba-migas {
	font-size: 15px;
	color: var(--neutro);
	padding-block: var(--esp-4) 0;
}

.ba-migas ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2);
	margin: 0;
	padding: 0;
}

.ba-migas li + li::before {
	content: "›";
	margin-right: var(--esp-2);
}

.ba-migas a {
	color: var(--neutro);
}

/* Con migas, en páginas de tema y material las migas van justo bajo la cabecera, sin el espacio que Astra deja sobre
   #primary (60 px en escritorio en temas; 4em en material), y el H1 queda 24 px bajo ellas (maqueta/sitio/tema.html,
   .cab-pagina). El espacio inferior sigue como en S05 y S06. */
.ast-plain-container.ast-no-sidebar #primary:has(.ba-migas),
.ast-separate-container #primary:has(.ba-migas) {
	margin-block-start: 0;
	padding-block-start: 0;
}

.ba-migas + .entry-header,
.ba-migas + .ba-ficha {
	padding-block-start: var(--esp-4);
}

/* Astra deja 60–72 px sobre y bajo #primary en entradas y en el blog. En la maqueta, el contenido empieza 24 px bajo la
   cabecera (relleno de .ba-migas, .ba-entrada y .ba-cab-pagina) y el pie trae su propio margen. */
.single-post.ast-plain-container.ast-no-sidebar #primary,
.blog.ast-plain-container.ast-no-sidebar #primary,
.blog.ast-separate-container #primary {
	margin-block: 0;
	padding-block: 0;
}

/* S10-3: la ficha de material y el listado /material/ pasan al contenedor normal de Astra (margen lateral de 20 px,
   como el resto); su espacio vertical sigue como en S06, el de la "caja" de Astra (4em). La ficha empieza con las
   migas pegadas a la cabecera (S09). */
.post-type-archive-material.ast-plain-container.ast-no-sidebar #primary {
	margin-block: 0;
	padding-block: 4em;
}

.single-material.ast-plain-container.ast-no-sidebar #primary {
	margin-block: 0;
	padding-block: 0 4em;
}

.ba-entrada {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--esp-6);
	align-items: start;
	padding-block: var(--esp-4) 0;
}

.ba-articulo {
	min-width: 0;
}

.ba-etiqueta-tema {
	margin: 0 0 var(--esp-1);
	font-size: 15px;
	font-weight: 600;
	color: var(--magenta-profundo);
}

.ba-etiqueta-tema a,
.ba-etiqueta-tema a:hover {
	color: var(--magenta-profundo);
	text-decoration: none;
}

.ba-etiqueta-tema a:hover {
	text-decoration: underline;
}

.ba-destacada {
	margin: var(--esp-2) 0 var(--esp-4);
}

.ba-destacada img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radio);
}

.ba-destacada figcaption,
.ba-contenido figcaption {
	margin-top: var(--esp-2);
	font-size: 15px;
	color: var(--neutro);
	text-align: left;
}

.ba-titulo {
	margin: 0 0 var(--esp-3);
}

/* Metadatos entre filetes malva (decorativos). */
.ba-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-2) var(--esp-4);
	margin-bottom: var(--esp-5);
	padding-block: var(--esp-3);
	font-size: 15px;
	color: var(--neutro);
	border-block: 1px solid var(--malva);
}

.ba-compartir-grupo {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-2);
}

.ba-compartir {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Enlaces para compartir: componente interactivo con borde neutro (regla 7). */
.ba-compartir a {
	display: inline-block;
	padding: 2px 12px;
	color: var(--tinta);
	text-decoration: none;
	border: 1px solid var(--neutro);
	border-radius: 999px;
}

.ba-compartir a:hover {
	color: var(--magenta-profundo);
	border-color: var(--magenta-profundo);
}

/* Contenido (columna de lectura de 70ch). La cita destacada usa .entry-content .wp-block-quote (S01). */
.ba-contenido {
	max-width: var(--lectura);
}

.ba-contenido h2 {
	margin-top: var(--esp-5);
	font-size: 26px;
}

.ba-contenido :is(ul, ol):not(.ba-referencias) {
	margin: 0 0 var(--esp-3);
	padding-left: 1.2em;
}

.ba-contenido li {
	margin-bottom: var(--esp-2);
}

.ba-contenido figure {
	margin: var(--esp-5) 0;
}

.ba-contenido .wp-block-image img {
	border-radius: var(--radio);
}

/* Referencias (tarea 4): la clase la pone inc/contenido.php a todo H2 "Referencias" y a la lista siguiente. */
.ba-contenido h2.ba-referencias {
	font-size: 22px;
}

.ba-contenido .ba-referencias:is(ul, ol) {
	margin: 0 0 var(--esp-3);
	padding: 0;
	font-size: 15px;
	color: var(--neutro);
	list-style: none;
}

.ba-contenido .ba-referencias li {
	margin-bottom: var(--esp-2);
	padding-left: 2em;
	text-indent: -2em;
	overflow-wrap: anywhere;
}

.ba-contenido .ba-referencias a {
	color: var(--magenta-profundo);
}

/* Video de YouTube (D7, S04-1, S04-8): fachada propia (sitio-core/assets/js/youtube.js). Recuadro tinta (o la
   miniatura local) con el botón primario de la maqueta; el triángulo es un clip-path sobre papel. Al clic, el botón
   sale y queda el iframe. */
.ba-video {
	margin: var(--esp-5) 0;
}

.ba-video .ba-youtube {
	position: relative;
	display: block;
	max-width: 880px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--tinta);
	background-position: center;
	background-size: cover;
	border-radius: var(--radio);
}

.ba-video .ba-youtube:focus-within {
	outline: 2px solid var(--magenta-profundo);
	outline-offset: 2px;
}

.ba-video .ba-youtube__boton,
.ba-video .ba-youtube__boton:hover,
.ba-video .ba-youtube__boton:focus {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

/* El foco se ve en el contorno del video (.ba-youtube:focus-within), fuera de su recorte. */
.ba-video .ba-youtube__boton:focus-visible {
	outline: none;
}

.ba-video .ba-youtube__boton::before {
	content: "";
	grid-area: 1 / 1;
	width: 72px;
	height: 72px;
	background-color: var(--primario);
	border-radius: 50%;
}

.ba-video .ba-youtube__boton::after {
	content: "";
	grid-area: 1 / 1;
	width: 24px;
	height: 28px;
	margin-left: 6px;
	background-color: var(--papel);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.ba-video .ba-youtube__boton:hover::before,
.ba-video .ba-youtube__boton:focus-visible::before {
	background-color: var(--magenta-profundo);
}

.ba-video .ba-youtube > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ba-youtube__texto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Avisos: el médico con filete malva; el de apoyo IA como bloque destacado nieve rosa (tarea 3). */
.ba-aviso,
.ba-aviso-ia {
	max-width: var(--lectura);
	margin: var(--esp-4) 0 0;
	padding: var(--esp-3) var(--esp-4);
	font-size: 15px;
	border-radius: var(--radio);
}

.ba-aviso-medico {
	border: 1px solid var(--malva);
}

.ba-aviso-ia {
	background-color: var(--nieve-rosa);
}

.ba-aviso-ia p {
	margin: 0;
}

/* Caja de autora. */
.ba-autora {
	display: flex;
	align-items: center;
	gap: var(--esp-4);
	margin-block: var(--esp-5);
	padding-block: var(--esp-5);
	border-block: 1px solid var(--malva);
}

.ba-autora p {
	margin: 0;
}

.ba-autora__nombre {
	font-family: var(--f-titulos);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
}

.ba-autora .ba-autora__titulo {
	margin-bottom: var(--esp-2);
	font-size: 15px;
	color: var(--neutro);
}

.ba-enlace-accion {
	font-weight: 600;
	text-decoration: underline;
}

.ba-enlace-accion:hover {
	text-decoration: none;
}

/* Llamada a agendar (patrón sincronizado "Llamada a agendar"; regla 4: el botón es el único acento). */
.ba-cta-agendar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--esp-4);
	padding: var(--esp-5);
	background-color: var(--nieve-rosa);
	border-radius: var(--radio);
}

.ba-cta-agendar > * {
	margin-block: 0;
}

.ba-cta-agendar h2 {
	margin: 0 0 var(--esp-2);
	font-size: 26px;
}

.ba-cta-agendar p {
	margin: 0;
}

/* Barra lateral (solo en entradas, D49). */
.ba-lateral {
	display: grid;
	gap: var(--esp-6);
}

.ba-lateral h2 {
	margin: 0 0 var(--esp-4);
	padding-bottom: var(--esp-2);
	font-size: 22px;
	border-bottom: 2px solid var(--primario);
}

.ba-minis {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ba-mini {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--esp-3);
	margin-bottom: var(--esp-4);
	padding-bottom: var(--esp-4);
	border-bottom: 1px solid var(--malva);
}

.ba-mini:not(:has(img)) {
	grid-template-columns: minmax(0, 1fr);
}

.ba-mini:last-child {
	margin-bottom: 0;
	border-bottom: 0;
}

.ba-mini img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radio);
}

.ba-mini h3 {
	margin: 0 0 var(--esp-1);
	font-size: 17px;
	line-height: 1.3;
}

.ba-mini h3 a {
	color: var(--tinta);
	text-decoration: none;
}

/* Toda la mini es clicable con el enlace del título. */
.ba-mini h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ba-mini:hover h3 a {
	color: var(--magenta-profundo);
}

.ba-mini:focus-within {
	outline: 2px solid var(--magenta-profundo);
	outline-offset: 2px;
}

.ba-mini a:focus-visible {
	outline: none;
}

.ba-mini p {
	margin: 0;
	font-size: 15px;
}

.ba-mini .ba-mini__fecha {
	margin-bottom: var(--esp-1);
	color: var(--neutro);
}

.ba-mini__extracto,
.ba-tarjeta__extracto {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ba-mas-visto ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ba-visto;
}

.ba-mas-visto li {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: var(--esp-2);
	margin: 0;
	padding-block: var(--esp-3);
	border-bottom: 1px solid var(--malva);
	counter-increment: ba-visto;
}

.ba-mas-visto li:last-child {
	border-bottom: 0;
}

.ba-mas-visto li::before {
	content: counter(ba-visto);
	font-family: var(--f-titulos);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: var(--primario);
}

.ba-mas-visto a {
	font-weight: 600;
	line-height: 1.35;
	color: var(--tinta);
	text-decoration: none;
}

.ba-mas-visto a:hover {
	color: var(--magenta-profundo);
}

.ba-mas-visto__tema {
	display: block;
	font-size: 15px;
	color: var(--neutro);
}

/* =========================================================
   Tarjeta de entrada y listado del blog (S04, tarea 6 y S04-4; maqueta/sitio/index.html): grilla 4 / 2 / 1.
   ========================================================= */
.ba-cab-pagina {
	padding-block: var(--esp-4) var(--esp-5);
}

.ba-cab-pagina .ba-titulo {
	margin: 0;
}

.ba-grilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--esp-5) var(--esp-4);
}

.ba-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
}

.ba-tarjeta__imagen {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: var(--esp-3);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radio);
}

.ba-tarjeta .ba-tarjeta__tema {
	margin: 0 0 var(--esp-1);
	font-size: 15px;
	font-weight: 600;
	color: var(--magenta-profundo);
}

.ba-tarjeta__titulo {
	margin: 0 0 var(--esp-2);
	font-size: 21px;
}

.ba-tarjeta__titulo a {
	color: var(--tinta);
	text-decoration: none;
}

/* Toda la tarjeta es clicable con el único enlace, el del título. */
.ba-tarjeta__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ba-tarjeta:hover .ba-tarjeta__titulo a {
	color: var(--magenta-profundo);
}

.ba-tarjeta:focus-within {
	outline: 2px solid var(--magenta-profundo);
	outline-offset: 4px;
}

.ba-tarjeta a:focus-visible {
	outline: none;
}

.ba-tarjeta .ba-tarjeta__extracto {
	margin: 0;
	font-size: 16px;
}

.ba-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2) var(--esp-3);
	margin-top: var(--esp-6);
}

@media (max-width: 921px) {
	.ba-entrada {
		grid-template-columns: minmax(0, 1fr);
	}

	.ba-grilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 544px) {
	.ba-grilla {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================
   Páginas de tema e índice /temas/ (S05; maqueta/sitio/tema.html e index.html). La zona fija y el bloque ba/temas
   ocupan todo el contenedor; la intro y lo que agregue la Editora siguen en la columna de lectura.
   ========================================================= */
.page .entry-content:has(> .ba-tema-fijo),
.page .entry-content:has(> .wp-block-ba-temas) {
	max-width: none;
}

/* Astra centra cada bloque de primer nivel del contenido (margin: auto): aquí van alineados al título. */
.page .entry-content:has(> .ba-tema-fijo) > *,
.page .entry-content:has(> .wp-block-ba-temas) > * {
	margin-inline: 0;
}

.page .entry-content:has(> .ba-tema-fijo) > :not(.ba-tema-fijo, .ba-video),
.page .entry-content:has(> .wp-block-ba-temas) > :not(.wp-block-ba-temas) {
	max-width: var(--lectura);
}

/* Astra da relleno a los grupos de primer nivel: la zona fija va sin él. */
.page .entry-content > .ba-tema-fijo {
	max-width: none;
	padding: 0;
}

/* Entre secciones, solo su propio relleno (sin el espacio entre bloques de WordPress), como la maqueta. */
.page .entry-content .ba-tema-fijo > * {
	margin-block: 0;
}

.ba-seccion {
	padding-block: var(--esp-6);
}

.ba-seccion > .wp-block-query {
	margin-top: 0;
}

/* Astra subraya los enlaces del contenido: los títulos de las tarjetas van sin subrayado, como la maqueta. */
.entry-content .ba-tarjeta .ba-tarjeta__titulo a,
.entry-content .ba-material .ba-material__titulo a,
.entry-content .ba-tema .ba-tema__nombre a {
	text-decoration: none;
}

.ba-seccion .ba-seccion__titulo {
	margin: 0 0 var(--esp-5);
	padding-bottom: var(--esp-2);
	border-bottom: 1px solid var(--malva);
}

/* El Query Loop es una lista: la grilla va sobre ella, sin viñetas. */
.wp-block-post-template.ba-grilla {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-post-template.ba-grilla > li {
	margin: 0;
}

.ba-seccion .wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2) var(--esp-3);
	margin-top: var(--esp-6);
}

/* Estado vacío (maqueta: .vacio). */
.entry-content .ba-vacio {
	margin: 0;
	padding: var(--esp-4);
	background-color: var(--nieve-rosa);
	border-radius: var(--radio);
}

/* Tarjeta de material (S05-1; maqueta: .material). */
.ba-material {
	position: relative;
	display: flex;
	gap: var(--esp-3);
	align-items: flex-start;
	padding: var(--esp-4);
	background-color: var(--papel);
	border: 1px solid var(--malva);
	border-radius: var(--radio);
}

.ba-material__icono {
	display: grid;
	flex: none;
	place-items: end center;
	width: 44px;
	height: 56px;
	padding-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--papel);
	background-color: var(--primario);
	border-radius: 4px;
}

.ba-material .ba-material__titulo {
	margin: 0 0 var(--esp-1);
	font-size: 19px;
}

.ba-material__titulo a {
	color: var(--tinta);
	text-decoration: none;
}

.ba-material__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ba-material:hover .ba-material__titulo a {
	color: var(--magenta-profundo);
}

.ba-material:focus-within {
	outline: 2px solid var(--magenta-profundo);
	outline-offset: 2px;
}

.ba-material a:focus-visible {
	outline: none;
}

/* Tarjeta de tema (bloque ba/temas; maqueta: .tema). */
.ba-tema {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--esp-4);
	background-color: var(--nieve-rosa);
	border-radius: var(--radio);
}

.ba-tema .ba-tema__nombre {
	margin: 0 0 var(--esp-2);
	font-size: 21px;
}

.ba-tema__nombre a {
	color: var(--tinta);
	text-decoration: none;
}

.ba-tema__nombre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ba-tema:hover .ba-tema__nombre a {
	color: var(--magenta-profundo);
}

.ba-tema .ba-tema__descripcion {
	margin: 0 0 var(--esp-3);
	font-size: 16px;
}

.ba-tema__mas {
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--magenta-profundo);
}

.ba-tema:focus-within {
	outline: 2px solid var(--magenta-profundo);
	outline-offset: 2px;
}

.ba-tema a:focus-visible {
	outline: none;
}

/* =========================================================
   Ficha y listado de material (S06; §7 "Ficha de material"). La ficha va en la columna de lectura y "Otros
   materiales", en la grilla. El botón de descarga es el botón primario del sitio (sitio-core/inc/material.php).
   ========================================================= */
.ba-ficha > :not(.ba-otros-materiales) {
	max-width: var(--lectura);
}

.ba-ficha .ba-titulo {
	margin: 0 0 var(--esp-3);
}

.ba-ficha .ba-ficha__intro {
	margin: 0 0 var(--esp-4);
}

.ba-descarga {
	margin-block: var(--esp-4);
}

/* Astra subraya los enlaces del contenido: el botón va sin subrayado. */
.entry-content .ba-descarga .wp-block-button__link {
	text-decoration: none;
}

.ba-material .ba-material__meta {
	margin: 0;
	font-size: 15px;
	color: var(--neutro);
}

/* =========================================================
   Portada (S07; maqueta/sitio/index.html). La zona fija ocupa todo el contenedor, como las páginas de tema.
   ========================================================= */
.page .entry-content:has(> .ba-portada) {
	max-width: none;
}

.page .entry-content:has(> .ba-portada) > * {
	margin-inline: 0;
}

.page .entry-content > .ba-portada {
	max-width: none;
	padding: 0;
}

.page .entry-content .ba-portada > * {
	margin-block: 0;
}

/* Astra subraya los enlaces del contenido: ningún botón va subrayado. */
.entry-content .wp-block-button .wp-block-button__link {
	text-decoration: none;
}

/* Perfil profesional (hero): foto o marcador de 160 px, "JA" de 48 px (120 / 36 px en móvil, S02-4). */
.ba-perfil {
	--ba-foto-tam: 160px;
	--ba-foto-letra: 48px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-5);
	align-items: center;
	padding-block: var(--esp-7) var(--esp-6);
}

.ba-perfil .ba-perfil__nombre {
	margin: 0 0 var(--esp-2);
}

.ba-perfil .ba-perfil__titulo {
	margin: 0 0 var(--esp-4);
	font-size: 20px;
	color: var(--neutro);
}

.ba-perfil__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-3) var(--esp-4);
	align-items: center;
}

/* Variante de página (Sobre mí, S08-10): el H1 es el de la página; el nombre es un párrafo del tamaño de un H2. */
.ba-perfil.ba-perfil--pagina {
	padding-block: var(--esp-4) var(--esp-5);
}

.ba-perfil--pagina .ba-perfil__nombre {
	font-family: "Lora", Georgia, "Times New Roman", serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tinta);
}

@media (max-width: 544px) {
	.ba-perfil--pagina .ba-perfil__nombre {
		font-size: 26px;
	}
}

/* "Pasos para agendar" suelto en una página (Agenda tu hora, S08): la sección ocupa todo el contenedor, alineada con el
   título y sin el relleno que Astra da a los grupos (como en S05 y S07); el resto sigue en la columna de lectura. El
   espacio vertical es el de las demás secciones de página (.ba-seccion). */
/* S13: el bloque de Vidaintegra (Agenda tu hora) usa el mismo ancho que el de Dávila; si no, queda encajonado en la
   columna de lectura y los dos recorridos se ven distintos. */
.page .entry-content:has(> :is(.ba-pasos-agendar, .ba-pasos-vidaintegra)) {
	max-width: none;
}

.page .entry-content:has(> :is(.ba-pasos-agendar, .ba-pasos-vidaintegra)) > * {
	margin-inline: 0;
}

.page .entry-content:has(> :is(.ba-pasos-agendar, .ba-pasos-vidaintegra)) > :not(.ba-pasos-agendar, .ba-pasos-vidaintegra) {
	max-width: var(--lectura);
}

.page .entry-content > :is(.ba-pasos-agendar, .ba-pasos-vidaintegra) {
	max-width: none;
	padding: var(--esp-6) 0;
}

/* Cabecera de sección con su enlace "Ver…" a la derecha (maqueta: .seccion__cab). */
.ba-seccion__cab {
	display: flex;
	flex-wrap: wrap;
	gap: var(--esp-2) var(--esp-3);
	align-items: baseline;
	justify-content: space-between;
	margin: 0 0 var(--esp-5);
	padding-bottom: var(--esp-2);
	border-bottom: 1px solid var(--malva);
}

.ba-seccion__cab .ba-seccion__titulo {
	margin: 0;
	padding: 0;
	border: 0;
}

.ba-seccion__cab .ba-seccion__mas {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

/* Franja nieve rosa de ancho completo (maqueta: .seccion--suave). El color se extiende con una sombra recortada, sin
   agregar scroll horizontal. */
.ba-franja {
	padding-block: var(--esp-6);
	background-color: var(--nieve-rosa);
	box-shadow: 0 0 0 100vmax var(--nieve-rosa);
	clip-path: inset(0 -100vmax);
}

/* Pasos para agendar (maqueta: .pasos): números en círculos primarios; 3 columnas en escritorio, 1 en ≤ 921 px. */
.entry-content .ba-pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--esp-5);
	margin: 0 0 var(--esp-5);
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.entry-content .ba-pasos > li {
	margin: 0;
	counter-increment: paso;
}

.entry-content .ba-pasos > li::before {
	content: counter(paso);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--esp-2);
	font-weight: 700;
	color: var(--papel);
	background-color: var(--primario);
	border-radius: 50%;
}

@media (max-width: 921px) {
	.entry-content .ba-pasos {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--esp-4);
	}
}

@media (max-width: 544px) {
	.ba-perfil {
		--ba-foto-tam: 120px;
		--ba-foto-letra: 36px;
		padding-block: var(--esp-6) var(--esp-5);
	}
}

/* ---------- Guía de estilo (fixture, S01) ---------- */
.ba-muestras {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--esp-3);
	margin: 0 0 var(--esp-5);
	padding: 0;
	list-style: none;
}

.ba-muestra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--esp-2);
}

.ba-muestra__color {
	width: 48px;
	height: 48px;
	border: 1px solid var(--malva);
	border-radius: var(--radio);
}

.ba-guia-zona {
	margin: var(--esp-4) 0;
	padding: var(--esp-4);
	border-radius: var(--radio);
}

.ba-guia-zona > :last-child {
	margin-bottom: 0;
}

/* ---------- Selección de texto (S13) ----------
   Astra pinta la selección con su color de acento y deja el texto oscuro encima: no se lee lo seleccionado.
   Se usa el mismo par que los botones, primario con texto papel (5,9:1). La paleta prohíbe texto sobre
   nieve rosa en fondo blanco (regla 3), así que no se usa ese color aquí. */
::selection {
	background-color: var(--primario);
	color: var(--papel);
}

::-moz-selection {
	background-color: var(--primario);
	color: var(--papel);
}