/*
 * Estilos propios de parts/header.html y parts/footer.html: todo lo que
 * theme.json no puede expresar (disposición de la barra superior y el panel
 * compacto, submenús con flecha, filete bajo cabecera, grid alfabético del
 * pie). El resto —color, tipografía, espaciado del resto del tema— sale de
 * theme.json y de los bloques de core.
 */

/*
 * theme.json mete un margin-block-start de --wp--preset--spacing--40 (28px)
 * entre cualquier bloque de primer nivel de una plantilla (regla de WordPress,
 * :where(.wp-site-blocks) > *, especificidad cero por el :where). Justo
 * después de <header> sobra siempre: cada plantilla ya trae su propio
 * padding-top explícito para el primer contenido (36px en el hero, 34px en
 * archive/category, 36px en page*, etc.) — sumarle 28px más no está en el
 * diseño. Se anula solo esa transición concreta (header → lo que sea que
 * venga después), no el espaciado entre el resto de bloques de la plantilla.
 */
.wp-site-blocks > header + * {
	margin-block-start: 0;
}

.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;
}

/*
 * Envoltorio semántico (<article>) alrededor de cada tarjeta/entrada de
 * listado, añadido sin alterar el layout: casi todas viven dentro de una
 * rejilla o flex (grid-template-columns, display:flex) cuyas reglas de
 * tamaño e items apuntan al hijo directo (normalmente el <a> de la tarjeta).
 * `display:contents` saca el <article> de la caja de layout — sus hijos
 * pasan a comportarse como si fueran hijos directos del contenedor, así que
 * la rejilla/flex sigue viendo exactamente los mismos items que antes de
 * añadir este envoltorio.
 */
.estar-tarjeta-articulo {
	display: contents;
}

/*
 * <article> de single.html (envoltorio semántico añadido sobre la cabecera +
 * columnas del artículo, sin tocar el ancho): necesita su propia clase
 * is-layout-constrained (por eso lleva layout:"constrained" en el bloque)
 * para que WordPress siga tratando a .estar-articulo-columnas (align:"wide")
 * como hijo de un contenedor constrained y le dé sus 1180px — esa regla de
 * WordPress exige que el PADRE directo también sea is-layout-constrained
 * (ver "Peculiaridad de WordPress 7.1" en CLAUDE.md). Pero como <main> ya es
 * is-layout-constrained por su cuenta, si el propio <article> generara caja
 * quedaría marcado como hijo "normal" (no alineado) de <main> y se
 * encogería él solo a los 760px de ancho de contenido — que es exactamente
 * el bug que se vio en pantalla. display:contents dejaba también sin efecto
 * el mecanismo de las tarjetas más arriba; aquí hace lo mismo: sin caja
 * propia no hay nada que encoger, pero la clase is-layout-constrained sigue
 * ahí para que el selector seleccione bien a sus hijos.
 */
.estar-articulo-envoltorio {
	display: contents;
}

/* ---------- Barra superior (sitios del movimiento) ---------- */

.estar-barra-superior {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 24px;
	padding: 9px 20px;
}

.estar-barra-superior a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--negro-enlace);
	text-decoration: none;
}

.estar-barra-superior a:hover,
.estar-barra-superior a:focus-visible {
	color: var(--wp--preset--color--negro-texto);
}

/* ---------- Cabecera ---------- */

/*
 * padding-left/right:40px aquí replica el has-global-padding que WordPress le
 * da a .estar-hero (su "margen de seguridad" mínimo): sin esto,
 * .estar-cabecera-interior (abajo) centra su max-width:1180px dentro de TODO
 * el ancho de ventana en vez de dentro de ventana-menos-80px como hace
 * .estar-hero-grid, y por debajo de ~1260px el logo se sale hacia la
 * izquierda respecto al contenido. 28px/20px en los @media de abajo, igual
 * que --wp--style--root--padding-left/right a esos anchos (ver theme.json:
 * ese valor responsive vive en el `css` crudo, no en styles.spacing.padding
 * — la sintaxis "@tablet"/"@mobile" de nivel raíz no es válida en WordPress,
 * solo dentro de styles.blocks.<bloque>, y se ignoraba en silencio).
 */
.estar-cabecera {
	padding-top: 34px;
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}

/*
 * .estar-cabecera (grupo "align":"wide") no tiene un ancestro is-layout-
 * constrained (vive directo bajo <header>), así que WordPress nunca lo limita
 * a 1180px a sí mismo — igual que le pasa a .estar-hero bajo <main>. El
 * centrado real de .estar-hero lo hace su HIJO .estar-hero-grid, con
 * max-width:1180px + margin:auto propios (sin padding extra). Replicamos
 * exactamente ese mismo mecanismo aquí en vez de fiarnos del is-layout-
 * constrained que WordPress inyecta a .estar-cabecera-interior — ese target
 * es poco fiable con marcado propio anidado (aterrizó en el div equivocado
 * más de una vez durante las pruebas) y, al ser esta caja un flex propio,
 * el margin:auto que WordPress fuerza sobre sus hijos directos (logo, menú)
 * se comporta como alineación de flex, no como centrado de bloque, y
 * descolocaba todo. `.estar-cabecera .estar-cabecera-interior` (dos clases)
 * gana siempre a `.has-global-padding` (una clase) sin depender del orden
 * de carga de las hojas de estilo.
 */
.estar-cabecera .estar-cabecera-interior {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	max-width: 1180px;
	margin-inline: auto;
	padding-left: 0;
	padding-right: 0;
}

.estar-cabecera-interior > .estar-logo,
.estar-cabecera-interior > .estar-cabecera-derecha {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.estar-logo img {
	display: block;
	width: 196px;
	height: 64px;
	object-fit: contain;
}

.estar-cabecera-derecha {
	display: flex;
	align-items: center;
	gap: 22px;
}

.estar-nav {
	display: flex;
	align-items: center;
	gap: 22px;
}

.estar-nav a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-2);
	text-decoration: none;
	white-space: nowrap;
}

.estar-nav a:hover,
.estar-nav a:focus-visible {
	color: var(--wp--preset--color--tinta);
}

.estar-nav-item {
	position: relative;
}

.estar-nav-disparador {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	padding: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--texto-2);
	cursor: pointer;
}

.estar-nav-item:hover .estar-nav-disparador,
.estar-nav-disparador:focus-visible {
	color: var(--wp--preset--color--tinta);
}

.estar-nav-flecha {
	flex: none;
}

/*
 * `top: 100%` sin margin-top: el panel empieza justo pegado al disparador, a
 * propósito — con un margin-top (probado antes) queda un hueco entre el
 * botón y el panel que no forma parte de ninguno de los dos, así que al
 * bajar el ratón en diagonal hacia el desplegable se sale del área de
 * :hover antes de llegar y se cierra solo. El aire visual que daba el
 * margin-top ahora es el padding-top de dentro del propio panel.
 */
.estar-nav-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	display: none;
	flex-direction: column;
	min-width: 220px;
	margin: 0;
	padding: 14px 0 10px;
	list-style: none;
	background: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--preset--color--filete);
}

/*
 * Ya no depende de :focus-within: con el foco quieto en el botón después de
 * cerrar con Escape (el foco vuelve ahí a propósito), :focus-within seguiría
 * siendo cierto y el submenú no llegaría a cerrarse nunca. `.esta-abierto` es
 * el estado real que gestiona el toggle de cabecera.js; :hover se conserva
 * aparte como comodidad de ratón, no como vía de apertura por teclado.
 */
.estar-nav-item:hover .estar-nav-submenu,
.estar-nav-item.esta-abierto .estar-nav-submenu {
	display: flex;
}

.estar-nav-submenu a {
	display: block;
	padding: 8px 18px;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 13px;
}

.estar-suscribete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--azul);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	white-space: nowrap;
}

.estar-suscribete:hover,
.estar-suscribete:focus-visible {
	color: var(--wp--preset--color--azul-oscuro);
	border-color: var(--wp--preset--color--azul-oscuro);
}

.estar-buscador {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 150px;
	border-bottom: 1px solid #c9c3b8;
	padding: 0 2px 5px;
}

.estar-buscador input[type="search"] {
	width: 100%;
	border: none;
	outline: none;
	background: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	color: var(--wp--preset--color--tinta);
}

.estar-buscador input[type="search"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--azul);
	outline-offset: 2px;
}

/*
 * padding-top, no margin-top: el margen de un <hr> sin hermanos, dentro de un
 * grupo sin padding/borde propios, colapsa con el grupo y desaparece del todo
 * (confirmado con offsetTop=0 en DevTools) en vez de crear hueco real. El
 * padding en el grupo envolvente nunca colapsa.
 */
.estar-filete-cabecera-envoltorio {
	padding-top: 22px;
}

.estar-filete-cabecera {
	border: none;
	border-top: 1px solid var(--wp--preset--color--tinta);
}

/* ---------- Botón Menú (compacto) ---------- */

.estar-boton-menu {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	background: none;
	border: 1px solid var(--wp--preset--color--filete);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
	cursor: pointer;
}

/* ---------- Panel compacto ---------- */

.estar-panel-movil {
	display: none;
	flex-direction: column;
	gap: 34px;
	padding: 26px 0 34px;
	border-top: 1px solid var(--wp--preset--color--filete);
}

.estar-panel-movil.esta-abierto {
	display: flex;
}

.estar-panel-movil .estar-nav,
.estar-panel-movil .estar-nav-item {
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}

.estar-panel-movil .estar-nav a,
.estar-panel-movil .estar-nav-disparador {
	min-height: 44px;
	align-items: center;
}

/*
 * Sin `display: flex` fijo: antes el submenú del panel móvil quedaba
 * siempre visible mientras aria-expanded se quedaba en "false" (no hay
 * :hover táctil que lo active). Ahora hereda el mismo toggle de
 * .estar-nav-item.esta-abierto que el desplegable de escritorio -- arranca
 * cerrado y aria-expanded coincide con lo que se ve.
 */
.estar-panel-movil .estar-nav-submenu {
	position: static;
	margin: 10px 0 0;
	border: none;
	padding: 0 0 0 4px;
}

.estar-panel-movil .estar-suscribete {
	width: 100%;
}

.estar-panel-movil .estar-buscador {
	width: 100%;
}

.estar-panel-epigrafe {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-panel-movimiento ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.estar-panel-movimiento a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	color: var(--wp--preset--color--texto-2);
	text-decoration: none;
}

@media (max-width: 1023px) {
	.estar-barra-superior {
		display: none;
	}

	.estar-cabecera {
		padding-top: 30px;
		padding-left: 28px;
		padding-right: 28px;
	}

	.estar-cabecera-interior {
		align-items: center;
	}

	.estar-cabecera-derecha .estar-nav,
	.estar-cabecera-derecha .estar-suscribete,
	.estar-cabecera-derecha .estar-buscador {
		display: none;
	}

	.estar-boton-menu {
		display: inline-flex;
	}
}

@media (max-width: 719px) {
	.estar-cabecera {
		padding-top: 26px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.estar-logo img {
		width: 150px;
		height: 50px;
	}
}

/* ---------- Pie ---------- */

/*
 * El filete y el espaciado van en .estar-pie-columnas, no en .estar-pie: el
 * grupo exterior (align:"wide") es de nivel superior dentro de <footer>, sin
 * ancestro is-layout-constrained (parts/footer.html no lo tiene), así que no
 * se limita solo a 1180px — se expande a casi todo el ancho del <body> (ver
 * "Peculiaridad de WordPress 7.1" en CLAUDE.md). El centrado real de verdad
 * lo recibe .estar-pie-columnas, su hijo directo sin alinear, vía la regla
 * que WordPress genera por instancia. Un border-top en .estar-pie se dibuja
 * a lo ancho de esa caja casi completa (de pantalla a pantalla); puesto en
 * .estar-pie-columnas se dibuja con el ancho de contenido correcto.
 */
.estar-pie-columnas {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: 32px 72px;
	margin-top: 52px;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--filete);
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--wp--preset--color--texto-2);
}

.estar-pie-columnas a {
	color: var(--wp--preset--color--texto-2);
	text-decoration: none;
}

.estar-pie-columnas a:hover,
.estar-pie-columnas a:focus-visible {
	color: var(--wp--preset--color--tinta);
	text-decoration: underline;
}

.estar-pie-identidad {
	font-style: normal;
}

.estar-pie-identidad p {
	margin: 0 0 10px;
}

.estar-pie-nombre {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px;
	color: var(--wp--preset--color--tinta);
	margin: 0 0 10px;
}

.estar-pie-epigrafe {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-pie-secciones ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, auto);
	column-gap: 24px;
	row-gap: 10px;
}

.estar-pie-secciones .es-activa a {
	color: var(--wp--preset--color--tinta);
	font-weight: 500;
}

.estar-pie-revista ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.estar-linea-legal {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 8px 22px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	color: var(--wp--preset--color--meta);
}

.estar-linea-legal-enlaces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.estar-linea-legal-enlaces a {
	color: var(--wp--preset--color--pie);
	text-decoration: none;
}

.estar-linea-legal-enlaces a:hover,
.estar-linea-legal-enlaces a:focus-visible {
	color: var(--wp--preset--color--tinta);
}

.estar-copyright a {
	color: inherit;
	text-decoration: none;
}

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

@media (max-width: 1023px) {
	.estar-pie-columnas {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"identidad revista"
			"secciones secciones";
	}

	.estar-pie-identidad {
		grid-area: identidad;
	}

	.estar-pie-revista {
		grid-area: revista;
	}

	.estar-pie-secciones {
		grid-area: secciones;
		padding-top: 26px;
		border-top: 1px solid var(--wp--preset--color--filete);
	}

	.estar-pie-secciones ul {
		grid-template-rows: repeat(7, auto);
	}
}

@media (max-width: 719px) {
	.estar-pie-columnas {
		grid-template-columns: 1fr;
		grid-template-areas:
			"identidad"
			"revista"
			"secciones";
	}

	.estar-pie-secciones ul {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}

	.estar-linea-legal {
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	.estar-copyright {
		width: 100%;
	}
}

/* ---------- Artículo: rejilla ---------- */

.estar-articulo-columnas.wp-block-columns {
	gap: 56px;
	align-items: start;
	padding-top: 36px;
}

/*
 * WordPress envuelve el `wp:template-part` de "explorar" en un
 * `.wp-block-template-part` sin altura propia (auto, del tamaño de su
 * contenido) entre la columna (el hermano flex real de la columna del
 * artículo) y `.estar-explorar` (el sticky). Con `align-items:start` arriba,
 * ni la columna ni ese envoltorio se estiran para igualar la altura del
 * artículo — el sticky se queda sin "contra qué pegarse" porque su
 * containing block real es ese div corto, no la fila flex completa.
 * `display:contents` lo saca de la caja (sin tocar el DOM) para que
 * `.estar-explorar` quede efectivamente pegado a la columna, que sí conserva
 * la altura completa de la fila flex a efectos de containing block aunque su
 * caja pintada sea corta — el patrón estándar de sticky-sidebar en flexbox.
 */
.estar-articulo-columnas .wp-block-column .wp-block-template-part {
	display: contents;
}

@media (max-width: 1023px) {
	.estar-articulo-columnas.wp-block-columns {
		flex-direction: column;
	}

	.estar-articulo-columnas.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

@media (max-width: 719px) {
	.estar-articulo-columnas.wp-block-columns {
		padding-top: 28px;
	}
}

/* ---------- Artículo: cabecera ---------- */

.estar-miga-de-pan {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--meta);
	margin: 0 0 20px;
}

.estar-miga-de-pan ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.estar-miga-de-pan a {
	color: inherit;
}

.estar-seccion-articulo {
	margin: 0 0 14px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--tinta);
}

/* ---------- Página estática: cabecera ---------- */

/*
 * El <main> de page.html/page-formulario.html está a 1180px (alineado al
 * logo, como el resto de plantillas) pero el "esqueleto común" del handoff
 * (miga de pan, filete, H1) es una columna de 760px — capado aquí, sin
 * margin:auto, para que cuelgue del borde IZQUIERDO igual que el buscador
 * grande de search.html/404.html, no centrado dentro del 1180.
 */
.pagina-generica .estar-miga-de-pan,
.pagina-formulario .estar-miga-de-pan,
.pagina-generica .estar-filete-pagina,
.pagina-formulario .estar-filete-pagina,
.pagina-generica .wp-block-post-title,
.pagina-formulario .wp-block-post-title {
	max-width: 760px;
}

/* El cuerpo del artículo también es de 760px en la genérica; en
 * page-formulario.html el formulario SÍ quiere el ancho completo (1180),
 * ya lo envuelve su propio grupo align:"wide" en la plantilla. */
.pagina-generica .entry-content {
	max-width: 760px;
}

.estar-filete-pagina {
	margin: 0 0 22px;
	border: none;
	border-top: 1px solid var(--wp--preset--color--tinta);
}

.estar-seccion-articulo a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.estar-firma {
	display: flex;
	align-items: baseline;
	gap: 6px 14px;
	margin: 10px 0 26px;
}

.estar-firma-autor {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px;
	color: var(--wp--preset--color--tinta);
}

.estar-firma-autor a {
	color: inherit;
	text-decoration: none;
}

.estar-firma-autor a:hover,
.estar-firma-autor a:focus-visible {
	text-decoration: underline;
}

.estar-firma-separador {
	width: 1px;
	height: 12px;
	background: var(--wp--preset--color--filete);
}

.estar-firma-fecha {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	color: var(--wp--preset--color--meta);
}

.estar-figura-apertura figcaption {
	margin-top: 9px;
	max-width: 70ch;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	color: var(--wp--preset--color--pie);
}

/* ---------- Artículo: lateral "Explorar" ---------- */

.estar-explorar {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	border-left: 1px solid var(--wp--preset--color--filete);
	padding-left: 32px;
}

/*
 * Pegajoso solo en escritorio: en tablet/móvil las columnas se apilan
 * (.estar-articulo-columnas más arriba) y el lateral pasa a ir debajo del
 * artículo — ahí pegarlo taparía la lectura en vez de acompañarla.
 */
@media (max-width: 1023px) {
	.estar-explorar {
		position: static;
		max-height: none;
		overflow-y: visible;
	}
}

.estar-explorar-titulo {
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--epigrafe);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.estar-explorar-campo + .estar-explorar-campo {
	margin-top: 22px;
}

.estar-explorar-etiqueta {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

.estar-explorar-control {
	display: flex;
	gap: 8px;
}

.estar-explorar-control .estar-select {
	width: auto;
	flex: 1;
	min-width: 0;
}

.estar-select {
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid #c9c3b8;
	border-radius: 0;
	appearance: none;
	background-color: var(--wp--preset--color--papel);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	color: var(--wp--preset--color--tinta);
}

.estar-explorar-ir {
	flex: none;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--azul);
	background: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
	cursor: pointer;
}

.estar-explorar-ir:hover,
.estar-explorar-ir:focus-visible {
	background: var(--wp--preset--color--azul);
	color: var(--wp--preset--color--negro-texto);
}

@media (max-width: 1023px) {
	.estar-explorar {
		position: static;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--filete);
		padding-left: 0;
		padding-top: 28px;
	}
}

/* ---------- Artículo: pie ---------- */

.estar-etiquetas-epigrafe,
.estar-compartir-epigrafe,
.estar-relacionados-seccion {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-etiquetas ul,
.estar-compartir ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.estar-etiquetas {
	margin: 34px 0 0;
}

.estar-etiquetas a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	color: var(--wp--preset--color--azul);
	border-bottom: 1px solid var(--wp--preset--color--filete);
	padding-bottom: 2px;
	text-decoration: none;
}

.estar-compartir {
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--filete);
}

.estar-compartir a,
.estar-copiar-enlace {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.estar-navegacion-articulo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 34px;
	padding-top: 22px;
	border-top: 1px solid var(--wp--preset--color--tinta);
}

/*
 * <nav class="estar-navegacion-articulo"> lleva la clase is-layout-constrained
 * de WordPress (mismo aterrizaje impredecible en marcado propio anidado ya
 * documentado en CLAUDE.md), que trae consigo una regla genérica de
 * espaciado: margin-block-start en todo hijo directo que no sea el primero.
 * "Siguiente" (el segundo hijo) se lleva ese margen y "Anterior" no —
 * bajándolo respecto al otro. Se anula aquí; el espacio entre columnas ya lo
 * da el grid, no hace falta ningún margen extra.
 */
.estar-navegacion-articulo > .wp-block-post-navigation-link {
	margin-block-start: 0;
}

.estar-navegacion-articulo .wp-block-post-navigation-link {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-navegacion-articulo .wp-block-post-navigation-link a {
	display: block;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 21px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wp--preset--color--tinta);
}

.estar-navegacion-articulo .post-navigation-link-next {
	text-align: right;
	padding-left: 40px;
	border-left: 1px solid var(--wp--preset--color--filete-lista);
}

.estar-relacionados {
	margin-top: 52px;
}

.estar-relacionados-titulo {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--tinta);
	font-size: var(--wp--preset--font-size--titular-m);
}

.estar-relacionados-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 24px;
}

.estar-relacionados-tarjeta {
	display: block;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
	text-decoration: none;
}

.estar-relacionados-imagen {
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	margin-bottom: 14px;
}

.estar-relacionados-titulo-tarjeta {
	margin: 6px 0 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

@media (max-width: 719px) {
	.estar-navegacion-articulo {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.estar-navegacion-articulo .post-navigation-link-next {
		text-align: left;
		padding-left: 0;
		border-left: none;
		padding-top: 22px;
		border-top: 1px solid var(--wp--preset--color--filete-lista);
	}

	.estar-relacionados-rejilla {
		grid-template-columns: 1fr;
	}
}

/* ---------- Búsqueda ---------- */

.estar-buscador-grande-epigrafe {
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-buscador-grande.wp-block-search {
	max-width: 760px;
}

.estar-buscador-grande .wp-block-search__inside-wrapper {
	border: none;
	border-bottom: 2px solid var(--wp--preset--color--tinta);
	border-radius: 0;
	gap: 12px;
}

.estar-buscador-grande .wp-block-search__input {
	border: none;
	background: none;
	padding: 0 0 12px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 32px;
	color: var(--wp--preset--color--tinta);
}

.estar-buscador-grande .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 4px 12px;
	background: none;
	border: none;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
}

.estar-buscador-grande .wp-block-search__button svg {
	width: 17px;
	height: 17px;
}

@media (max-width: 719px) {
	.estar-buscador-grande .wp-block-search__input {
		font-size: 24px;
	}

	.estar-buscador-grande .wp-block-search__button-text {
		display: none;
	}
}

.estar-busqueda-cabecera {
	margin-top: 52px;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--tinta);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 8px 24px;
}

.estar-busqueda-titulo {
	font-size: clamp(30px, 3.4vw, 40px);
}

.estar-busqueda-entradilla {
	grid-column: 1 / -1;
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	color: var(--wp--preset--color--texto-2);
}

.estar-busqueda-recuento {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	color: var(--wp--preset--color--meta);
}

.estar-busqueda-orden {
	display: flex;
	align-items: center;
	gap: 8px;
}

.estar-busqueda-recuento .estar-explorar-control .estar-select {
	min-width: 160px;
}

.estar-resultados {
	margin-top: 30px;
	display: flex;
	flex-direction: column;
}

.estar-paginacion {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--filete);
}

.estar-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 8px;
}

.estar-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 6px;
	border: 1px solid var(--wp--preset--color--filete);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
}

.estar-paginacion .page-numbers.current {
	border-color: var(--wp--preset--color--tinta);
	color: var(--wp--preset--color--tinta);
}

.estar-paginacion .page-numbers.next,
.estar-paginacion .page-numbers.prev {
	border: none;
	min-width: 0;
	padding: 0 4px;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.estar-tarjeta-archivo {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
	text-decoration: none;
}

.estar-tarjeta-archivo-imagen {
	display: block;
	width: 100%;
	max-height: 150px;
	object-fit: cover;
}

.estar-tarjeta-archivo-epigrafe {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-tarjeta-archivo-titulo {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 23px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.estar-tarjeta-archivo-entradilla {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15.5px;
	color: var(--wp--preset--color--texto-2);
}

.estar-tarjeta-archivo-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

.estar-tarjeta-archivo mark {
	background: var(--wp--preset--color--papel-2);
	color: inherit;
	padding: 0;
}

@media (max-width: 719px) {
	.estar-busqueda-cabecera {
		margin-top: 44px;
		grid-template-columns: 1fr;
	}

	.estar-busqueda-recuento {
		flex-direction: column;
		align-items: flex-start;
	}

	.estar-tarjeta-archivo {
		grid-template-columns: 1fr;
		padding: 22px 0;
	}

	.estar-tarjeta-archivo-titulo {
		font-size: 21px;
	}
}

/* ---------- Salidas: "Ir a una sección" + "Lo último publicado" ---------- */

.estar-salidas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 40px;
}

.estar-salidas-titulo {
	font-size: var(--wp--preset--font-size--titular-s);
}

.estar-salidas-secciones ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 24px;
}

.estar-salidas-secciones a {
	display: block;
	padding: 4px 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14.5px;
	line-height: 1.9;
	color: var(--wp--preset--color--azul);
	text-decoration: none;
}

.estar-salidas-recientes {
	border-left: 1px solid var(--wp--preset--color--filete-lista);
	padding-left: 40px;
}

.estar-salidas-recientes ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.estar-salidas-recientes li + li {
	margin-top: 0;
}

.estar-salidas-recientes a {
	display: block;
	padding-top: 16px;
	margin-top: 16px;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
	text-decoration: none;
}

.estar-salidas-recientes li:first-child a {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.estar-salidas-titulo-articulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
}

.estar-salidas-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 1023px) {
	.estar-salidas {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.estar-salidas-recientes {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--filete-lista);
		padding-left: 0;
		padding-top: 28px;
	}
}

/* ---------- 404 ---------- */

.pagina-404 .estar-404-epigrafe {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.pagina-404 .estar-404-titulo {
	margin: 10px 0 0;
	font-size: clamp(44px, 5.2vw, 62px);
}

.pagina-404 .estar-404-entradilla {
	max-width: 52ch;
	margin-top: 18px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	color: var(--wp--preset--color--texto-2);
}

.pagina-404 .estar-salidas {
	grid-template-columns: minmax(0, 1fr) 400px;
}

.pagina-404 .estar-salidas-secciones,
.pagina-404 .estar-salidas-recientes {
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--tinta);
}

.pagina-404 .estar-salidas-recientes {
	border-left: none;
	padding-left: 0;
}

@media (max-width: 719px) {
	.pagina-404 .estar-salidas {
		grid-template-columns: 1fr;
	}
}

/* ---------- Bloque de suscripción ---------- */

.estar-suscripcion {
	margin-top: 64px;
	max-width: 1180px;
	margin-inline: auto;
}

.estar-suscripcion-grid {
	max-width: 100%;
	display: grid;
	grid-template-columns: 1.2fr minmax(0, 1fr);
	align-items: center;
	gap: 24px 48px;
}

.estar-suscripcion-epigrafe {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--negro-epigrafe);
}

.estar-suscripcion-frase {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(22px, 2.5vw, 27px);
	line-height: 1.3;
	color: var(--wp--preset--color--negro-texto);
}

.estar-suscripcion-apoyo {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	color: var(--wp--preset--color--negro-segundo);
}

.estar-suscripcion-boton {
	display: inline-block;
	padding: 16px 30px;
	background: var(--wp--preset--color--negro-texto);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.estar-suscripcion-boton:hover,
.estar-suscripcion-boton:focus-visible {
	background: var(--wp--preset--color--negro-segundo);
	color: var(--wp--preset--color--tinta);
}

@media (max-width: 1023px) {
	.estar-suscripcion.is-style-negro {
		padding: 38px 34px !important;
	}

	.estar-suscripcion-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

@media (max-width: 719px) {
	.estar-suscripcion.is-style-negro {
		padding: 32px 24px !important;
	}
}

/* ---------- Archivo (category / tag / author / date) ---------- */

.estar-archivo-cabecera {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 8px 24px;
}

.estar-archivo-epigrafe {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-archivo-titulo {
	margin: 6px 0 0;
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1.04;
}

.estar-archivo-descripcion {
	max-width: 54ch;
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(16px, 1.6vw, 17.5px);
	color: var(--wp--preset--color--texto-2);
}

.estar-archivo-recuento {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	color: var(--wp--preset--color--meta);
	white-space: nowrap;
}

.estar-archivo-destacado {
	display: grid;
	grid-template-columns: 480px minmax(0, 1fr);
	gap: 48px;
	margin-top: 32px;
	padding-top: 26px;
	border-top: 1px solid var(--wp--preset--color--tinta);
	text-decoration: none;
}

.estar-archivo-destacado-imagen {
	display: block;
	width: 100%;
	max-height: 400px;
	object-fit: cover;
}

.estar-archivo-destacado-titulo {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(27px, 3.1vw, 38px);
	font-weight: 400;
	line-height: 1.12;
	color: var(--wp--preset--color--tinta);
}

.estar-archivo-destacado-entradilla {
	max-width: 56ch;
	margin: 0 0 14px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(16.5px, 1.6vw, 18px);
	color: var(--wp--preset--color--texto-2);
}

.estar-archivo-destacado-firma {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	color: var(--wp--preset--color--meta);
}

.estar-archivo-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 40px;
	margin-top: 56px;
	padding-top: 38px;
	border-top: 1px solid var(--wp--preset--color--filete);
}

.estar-archivo-tarjeta {
	display: block;
	text-decoration: none;
}

.estar-archivo-tarjeta-imagen {
	display: block;
	width: 100%;
	max-height: 260px;
	object-fit: cover;
	margin-bottom: 16px;
}

.estar-archivo-tarjeta-titulo {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 23px;
	font-weight: 400;
	line-height: 1.16;
	color: var(--wp--preset--color--tinta);
}

.estar-archivo-tarjeta-entradilla {
	max-width: 56ch;
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15.5px;
	color: var(--wp--preset--color--texto-2);
}

.estar-archivo-tarjeta-fecha {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 1023px) {
	.estar-archivo-cabecera {
		grid-template-columns: 1fr;
	}

	.estar-archivo-destacado {
		grid-template-columns: 1fr;
	}

	.estar-archivo-destacado-imagen {
		max-width: 520px;
	}

	.estar-archivo-rejilla {
		grid-template-columns: 1fr 1fr;
		gap: 36px 28px;
	}

	.estar-archivo-tarjeta-imagen {
		max-height: 240px;
	}

	.estar-archivo-tarjeta-titulo {
		font-size: 21px;
	}
}

@media (max-width: 719px) {
	.estar-archivo-recuento {
		white-space: normal;
	}

	.estar-archivo-rejilla {
		grid-template-columns: 1fr;
		gap: 34px;
	}
}

/* ---------- Sección: disposición "lista" ---------- */

.estar-seccion-lista {
	margin-top: 56px;
	padding-top: 38px;
	border-top: 1px solid var(--wp--preset--color--filete);
}

.estar-seccion-fila {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
	text-decoration: none;
}

/*
 * Antes era `.estar-seccion-fila:first-child` — dejó de funcionar al envolver
 * cada fila en <article class="estar-tarjeta-articulo"> (regla 2026-09-01,
 * <article> + encabezado en tarjetas): el <a> pasó a ser el único hijo de su
 * propio <article>, así que `:first-child` le daba `true` a las CATORCE
 * filas (cada una es "el primer hijo" de su envoltorio individual), no solo
 * a la primera de la lista. display:contents no cambia esto — afecta al
 * layout, no a qué cuenta como hermano para el selector. Se engancha ahora
 * al envoltorio, que sí conserva su posición real entre hermanos.
 */
.estar-seccion-lista > .estar-tarjeta-articulo:first-child .estar-seccion-fila {
	border-top: none;
	padding-top: 0;
}

.estar-seccion-fila-imagen {
	display: block;
	width: 100%;
	max-height: 150px;
	object-fit: cover;
}

.estar-seccion-fila-rubrica {
	margin: 0 0 7px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--meta);
}

.estar-seccion-fila-titulo {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.estar-seccion-fila-entradilla {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15.5px;
	color: var(--wp--preset--color--texto-2);
}

.estar-seccion-fila-fecha {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 719px) {
	.estar-seccion-fila {
		grid-template-columns: 1fr;
		padding-top: 22px;
	}
}

/* =========================================================
 * Portada
 * ========================================================= */

.estar-portada-seccion {
	margin-top: 64px;
	padding-left: 40px;
	padding-right: 40px;
	box-sizing: border-box;
}

@media (max-width: 1023px) {
	.estar-portada-seccion {
		padding-left: 28px;
		padding-right: 28px;
	}
}

@media (max-width: 719px) {
	.estar-portada-seccion {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.estar-portada-seccion-titulo {
	margin: 0;
	font-size: clamp(26px, 2.8vw, 32px);
}

.estar-portada-seccion-titulo a {
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

/* ---------- Destacado de enlace único (reutilizado) ---------- */

.estar-portada-destacado {
	display: block;
	text-decoration: none;
}

.estar-portada-destacado-imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 18px;
}

.estar-portada-destacado-titulo {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(23px, 2.2vw, 26px);
	font-weight: 400;
	line-height: 1.14;
	color: var(--wp--preset--color--tinta);
}

.estar-portada-destacado-entradilla {
	margin: 0 0 10px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15.5px;
	color: var(--wp--preset--color--texto-2);
}

.estar-portada-destacado-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

/* ---------- Entrada horizontal (reutilizada) ---------- */

.estar-portada-entrada-horizontal {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
	text-decoration: none;
}

.estar-portada-entrada-horizontal:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 28px;
}

.estar-portada-entrada-horizontal-imagen {
	flex: none;
	display: block;
	width: 74px;
	height: 100px;
	object-fit: cover;
}

.estar-portada-entrada-horizontal-titulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18.5px;
	font-weight: 400;
	line-height: 1.2;
	min-height: 2.4em;
	color: var(--wp--preset--color--tinta);
}

.estar-portada-entrada-horizontal-fecha {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

/* ---------- Hero ---------- */

.estar-hero {
	padding-top: 36px;
}

.estar-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 56px;
	align-items: start;
}

/*
 * .estar-hero-epigrafe es un <p> normal, no un encabezado: es metadato de
 * contexto (número + fecha + enlace a "Editorial"), no un título. El h1 de
 * verdad de la portada es el titular del editorial (.estar-hero-titulo,
 * decisión del diseñador tras revisar la jerarquía completa) — patrón
 * estándar de portada editorial: la pieza destacada es el h1 de esa página.
 */
.estar-hero-epigrafe {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
}

.estar-hero-epigrafe-filete {
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--filete);
}

.estar-hero-epigrafe a {
	font-weight: 500;
	color: var(--wp--preset--color--meta);
}

.estar-hero-titulo {
	margin: 0 0 24px;
}

.estar-hero-titulo a {
	display: block;
	max-width: 24ch;
	font-size: clamp(32px, 5vw, 55px);
	line-height: 1.06;
	letter-spacing: -0.018em;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.estar-hero-imagen {
	display: block;
	width: 100%;
	max-height: 400px;
	object-fit: cover;
	margin-bottom: 24px;
}

.estar-hero-pie {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 36px;
}

.estar-hero-pie-entradilla {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(17px, 1.7vw, 19px);
	line-height: 1.5;
	color: var(--wp--preset--color--texto-3);
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.estar-hero-pie-autor {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px;
	color: var(--wp--preset--color--tinta);
}

.estar-hero-pie-autor a {
	color: inherit;
	text-decoration: none;
}

.estar-hero-pie-autor a:hover,
.estar-hero-pie-autor a:focus-visible {
	text-decoration: underline;
}

.estar-hero-pie-enlace {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--azul);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.estar-hero-lateral {
	border-left: 1px solid var(--wp--preset--color--filete);
	padding-left: 32px;
}

.estar-hero-lateral-epigrafe {
	margin: 0 0 4px;
	padding-bottom: 14px;
	font-size: 11.5px;
	border-bottom: 1px solid var(--wp--preset--color--tinta);
}

.estar-hero-lateral-epigrafe a {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.estar-hero-lateral-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.estar-hero-lateral-lista li {
	padding: 18px 0;
	border-bottom: 1px solid var(--wp--preset--color--filete-lista);
}

.estar-hero-lateral-lista li:last-child {
	border-bottom: none;
}

.estar-hero-lateral-lista a {
	text-decoration: none;
}

.estar-hero-lateral-primero {
	padding: 20px 0 !important;
}

.estar-hero-lateral-primero .estar-hero-lateral-titulo {
	font-size: 25px;
}

.estar-hero-lateral-titulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.estar-hero-lateral-cita {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 15.5px;
	color: var(--wp--preset--color--texto-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.estar-hero-lateral-autor {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 1023px) {
	.estar-hero-grid {
		grid-template-columns: 1fr;
	}

	.estar-hero-lateral {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--filete);
		padding-left: 0;
		padding-top: 28px;
	}
}

/* ---------- Primera plana ---------- */

.estar-primera-plana .estar-portada-destacado {
	display: grid;
	grid-template-columns: 312px minmax(0, 1fr);
	gap: 48px;
	margin-top: 24px;
}

.estar-primera-plana .estar-portada-destacado-imagen {
	max-width: 420px;
	margin-bottom: 0;
}

.estar-primera-plana-lista {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
	margin: 32px 0 0;
	padding: 0;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--tinta);
	list-style: none;
}

.estar-primera-plana-lista li {
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--filete-lista);
}

.estar-primera-plana-lista a {
	text-decoration: none;
}

.estar-primera-plana-lista-titulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
}

.estar-primera-plana-lista-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 719px) {
	.estar-primera-plana .estar-portada-destacado {
		grid-template-columns: 1fr;
	}

	.estar-primera-plana-lista {
		grid-template-columns: 1fr;
	}
}

/* ---------- Nuestro carisma ---------- */

.estar-nuestro-carisma-primero.estar-portada-destacado {
	display: grid;
	grid-template-columns: 224px minmax(0, 1fr);
	gap: 24px;
	margin-top: 24px;
}

.estar-nuestro-carisma-primero .estar-portada-destacado-titulo {
	font-size: clamp(26px, 2.6vw, 30px);
}

.estar-nuestro-carisma-primero .estar-portada-destacado-entradilla {
	font-size: 17px;
}

.estar-nuestro-carisma-segundo.estar-portada-destacado {
	display: grid;
	grid-template-columns: 224px minmax(0, 1fr);
	gap: 24px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
}

.estar-nuestro-carisma-segundo .estar-portada-destacado-titulo {
	font-size: 22px;
}

.estar-nuestro-carisma-segundo .estar-portada-destacado-entradilla {
	font-size: 16px;
}

@media (max-width: 719px) {
	.estar-nuestro-carisma-primero.estar-portada-destacado,
	.estar-nuestro-carisma-segundo.estar-portada-destacado {
		grid-template-columns: 1fr;
	}
}

/* ---------- Testigos y maestros ---------- */

.estar-testigos-rejilla {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin-top: 24px;
}

.estar-testigos-tarjeta {
	display: block;
	text-decoration: none;
}

.estar-testigos-imagen {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 14px;
}

.estar-testigos-titulo {
	min-height: 3.4em;
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.estar-testigos-meta {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 719px) {
	.estar-testigos-rejilla {
		grid-template-columns: 1fr;
	}
}

/* ---------- Saber mirar + Educar en la vida ---------- */

.estar-saber-educar-grid {
	display: grid;
	grid-template-columns: 1.35fr minmax(0, 1fr);
	gap: 56px;
	max-width: 1180px;
	margin-inline: auto;
}

/* WordPress a veces inyecta has-global-padding en esta columna en vez de en
 * el grupo exterior (peculiaridad documentada en CLAUDE.md); anula el
 * relleno que le añadiría de más. */
.estar-saber-mirar {
	padding-left: 0;
	padding-right: 0;
}

.estar-saber-mirar .estar-portada-destacado {
	margin-top: 24px;
}

.estar-saber-mirar-destacado .estar-portada-destacado-imagen {
	margin-bottom: 14px;
}

.estar-saber-mirar-lista {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
	margin-top: 24px;
}

.estar-saber-mirar-lista-entrada {
	display: block;
	text-decoration: none;
}

.estar-saber-mirar-lista-titulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--tinta);
}

.estar-saber-mirar-lista-fecha {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

.estar-educar-vida .estar-portada-destacado {
	margin-top: 24px;
}

.estar-educar-vida-destacado .estar-portada-destacado-imagen {
	max-width: 330px;
	margin-inline: 0;
}

.estar-educar-vida-lista {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.estar-educar-vida-lista li {
	padding: 14px 0;
	border-top: 1px solid var(--wp--preset--color--filete-lista);
}

.estar-educar-vida-lista a {
	display: block;
	text-decoration: none;
}

.estar-educar-vida-lista-titulo {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 19px;
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
}

.estar-educar-vida-lista-fecha {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 1023px) {
	.estar-saber-educar-grid {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}
}

/* ---------- Trío: texto ---------- */

.estar-trio-texto-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	max-width: 1180px;
	margin-inline: auto;
}

/* Misma peculiaridad de WordPress que .estar-saber-mirar: anula el
 * has-global-padding mal colocado en la columna. */
.estar-trio-texto-columna {
	padding-left: 0;
	padding-right: 0;
}

.estar-trio-texto-entrada {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--filete-lista);
	font-family: var(--wp--preset--font-family--serif);
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
}

.estar-trio-texto-primero {
	font-size: 20px;
	padding-top: 20px;
}

.estar-trio-texto-segundo {
	font-size: 18px;
}

.estar-trio-texto-titulo {
	margin: 0;
	font: inherit;
	color: inherit;
}

@media (max-width: 1023px) {
	.estar-trio-texto-grid {
		gap: 28px;
	}
}

@media (max-width: 719px) {
	.estar-trio-texto-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Trío: horizontal ---------- */

.estar-trio-horizontal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	max-width: 1180px;
	margin-inline: auto;
}

/* Misma peculiaridad de WordPress que .estar-saber-mirar: anula el
 * has-global-padding mal colocado en la columna, y el margen automático de
 * bloque (is-layout-constrained) que añadiría de más entre cada artículo. */
.estar-trio-horizontal-columna {
	padding-left: 0;
	padding-right: 0;
}

.estar-trio-horizontal-columna > * {
	margin-block-start: 0;
}

@media (max-width: 719px) {
	.estar-trio-horizontal-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Banda: Pódcast + Artículos ampliados ---------- */

.estar-banda-formatos {
	margin-top: 64px;
	max-width: 1180px;
	margin-inline: auto;
}

.estar-banda-formatos-contenedor {
	max-width: 100%;
}

.estar-banda-formatos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

.estar-podcast {
	padding-right: 44px;
}

.estar-ampliados {
	border-left: 1px solid var(--wp--preset--color--filete-crema);
	padding-left: 44px;
}

/* El filete de is-style-seccion va siempre ANTES del título (border-top),
 * pero pegado al borde superior de la banda crema queda demasiado apretado;
 * aquí lo movemos a DESPUÉS del título en vez de tocar la variación
 * compartida (afectaría al resto de la portada). */
.estar-podcast .wp-block-group.is-style-seccion,
.estar-ampliados .wp-block-group.is-style-seccion {
	border-top: none;
	padding-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--tinta);
	padding-bottom: 14px;
}

.estar-podcast-lista,
.estar-ampliados-lista {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.estar-podcast-lista li {
	padding: 15px 0;
	border-top: 1px solid var(--wp--preset--color--filete-crema);
}

.estar-podcast-lista li:first-child {
	border-top: none;
	padding-top: 0;
}

.estar-podcast-lista li a {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-decoration: none;
}

.estar-podcast-icono {
	margin-top: 7px;
}

.estar-podcast-icono {
	flex: none;
}

.estar-podcast-texto {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.estar-podcast-titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
}

.estar-podcast-fecha {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

.estar-ampliados-lista li {
	padding: 15px 0;
	border-top: 1px solid var(--wp--preset--color--filete-crema);
}

.estar-ampliados-lista li:first-child {
	border-top: none;
	padding-top: 0;
}

.estar-ampliados-lista a {
	display: block;
	text-decoration: none;
}

.estar-ampliados-lista-titulo {
	margin: 0 0 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 19px;
	font-weight: 400;
	color: var(--wp--preset--color--tinta);
}

.estar-ampliados-lista-fecha {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 11.5px;
	color: var(--wp--preset--color--meta);
}

@media (max-width: 1023px) {
	.estar-banda-formatos-grid {
		grid-template-columns: 1fr;
	}

	.estar-ampliados {
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--filete-crema);
		padding-left: 0;
		padding-top: 30px;
		margin-top: 30px;
	}
}