/**
 * Estilos de la cabecera del sitio.
 *
 * Barra superior de redes sociales, menú principal y botón de acción.
 * Solo se usan las variables CSS globales del tema.
 */

/* ==========================================================================
   Barra superior de redes sociales.boton-cabecera
   ========================================================================== */

.barra-superior {
	background: var(--color-principal);
	color: var(--color-secundario);
	font-family: var(--fuente-encabezado);
	font-size: 0.875rem;
	font-weight: var(--peso-encabezado);
	letter-spacing: var(--espaciado-letras);
	line-height: 1.2;
}

.barra-superior__inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 40px;
	padding-block: 6px;
}

.barra-superior__lista {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.barra-superior__lista::-webkit-scrollbar {
	display: none;
}

.barra-superior__item {
	position: relative;
	display: flex;
	align-items: center;
}

/* Separador vertical entre ítems (sin elementos extra en el HTML). */
.barra-superior__item + .barra-superior__item {
	margin-left: 0.55rem;
	padding-left: 0.55rem;
}

.barra-superior__item + .barra-superior__item::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 16px;
	margin-top: -8px;
	background: var(--color-secundario);
}

.barra-superior__enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--color-secundario);
	font-weight: var(--peso-encabezado);
	text-decoration: none;
}

.barra-superior__enlace svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.barra-superior__enlace:hover,
.barra-superior__enlace:focus {
	color: var(--color-secundario);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.barra-superior :focus-visible {
	outline-color: var(--color-secundario);
}

/* ==========================================================================
   Cabecera principal
   ========================================================================== */

.cabecera-principal {
	background: var(--color-secundario);
	color: #ffffff;
}

.cabecera-principal__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	min-height: 88px;
	padding-block: 0.75rem;
}

.cabecera-principal__marca {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.cabecera-principal .logo-sitio img {
	width: auto;
	max-height: 56px;
}

.cabecera-principal .titulo-sitio {
	margin: 0;
}

.cabecera-principal .titulo-sitio a {
	color: #ffffff;
	text-decoration: none;
}

.cabecera-principal .titulo-sitio a:hover,
.cabecera-principal .titulo-sitio a:focus {
	color: var(--color-principal);
}

/* ==========================================================================
   Menú principal
   ========================================================================== */

.nav-principal {
	display: flex;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
}

.cabecera-principal .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem clamp(1rem, 2vw, 1.75rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabecera-principal .menu > li {
	position: relative;
}

/* Ítems del menú y de los submenús: Light, con espaciado y en mayúsculas.
   Las mayúsculas son solo visuales (text-transform), el texto real y el
   contenido de la base de datos se mantienen tal cual. */
.cabecera-principal .menu a {
	display: inline-block;
	padding: 0.5rem 0;
	color: #ffffff;
	font-family: var(--fuente-encabezado);
	font-size: 1rem;
	font-weight: var(--peso-encabezado);
	letter-spacing: var(--espaciado-letras);
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.cabecera-principal .menu a:hover,
.cabecera-principal .menu a:focus-visible,
.cabecera-principal .menu .current-menu-item > a,
.cabecera-principal .menu .current_page_item > a,
.cabecera-principal .menu .current-menu-ancestor > a,
.cabecera-principal .menu .current-menu-parent > a {
	color: var(--color-principal);
}

/* Submenús desplegables con CSS, accesibles con teclado. */
.cabecera-principal .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	display: block;
	min-width: 220px;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--color-secundario);
	border-top: 2px solid var(--color-principal);
	opacity: 0;
	pointer-events: none;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.cabecera-principal .menu > li:hover > .sub-menu,
.cabecera-principal .menu > li:focus-within > .sub-menu {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.cabecera-principal .sub-menu a {
	display: block;
	padding: 0.55rem 1.1rem;
	white-space: nowrap;
}

/* ==========================================================================
   Botón de acción
   ========================================================================== */

.cabecera-principal__accion {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.boton-cabecera {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 30px;
	border-radius: var(--radio);
	background: var(--color-principal);
	color: var(--color-secundario);
	font-family: var(--fuente-encabezado);
	font-size: 1rem;
	font-weight: var(--peso-encabezado);
	letter-spacing: var(--espaciado-letras);
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, filter 0.2s ease;
}

/* Se repite el fondo para que la clase .boton (usada también en el banner y
   en la tarjeta) no lo cambie al color secundario en el hover. */
.boton-cabecera:hover,
.boton-cabecera:focus {
	background: var(--color-principal);
	color: var(--color-secundario);
	filter: brightness(0.9);
}

@supports (background: color-mix(in srgb, red 50%, black)) {
	.boton-cabecera:hover,
	.boton-cabecera:focus {
		background: color-mix(in srgb, var(--color-principal) 85%, #000);
		filter: none;
	}
}

.boton-cabecera:focus-visible {
	outline-color: #ffffff;
}

/* ==========================================================================
   Botón hamburguesa
   ========================================================================== */

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border-radius: var(--radio);
	background: transparent;
	color: #ffffff;
}

.menu-toggle:hover,
.menu-toggle:focus {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.menu-toggle__icono {
	position: relative;
	display: block;
	width: 24px;
	height: 18px;
}

.menu-toggle__icono span {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle__icono span:nth-child(1) {
	top: 0;
}

.menu-toggle__icono span:nth-child(2) {
	top: 8px;
}

.menu-toggle__icono span:nth-child(3) {
	top: 16px;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__icono span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__icono span:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__icono span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   Móvil
   ========================================================================== */

@media (max-width: 991px) {
	.cabecera-principal__inner {
		flex-wrap: wrap;
		gap: 0.5rem 1rem;
		min-height: 64px;
		padding-block: 0.6rem;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.cabecera-principal .logo-sitio img {
		max-height: 44px;
	}

	.nav-principal {
		order: 3;
		flex: 1 0 100%;
		display: none;
		justify-content: flex-start;
		padding-top: 0.25rem;
	}

	.nav-principal[data-abierto='true'],
	html:not(.js) .nav-principal {
		display: block;
	}

	.cabecera-principal .menu {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
	}

	.cabecera-principal .menu > li {
		border-top: 1px solid rgba(255, 255, 255, 0.16);
	}

	.cabecera-principal .menu a {
		display: block;
		padding: 0.8rem 0.25rem;
	}

	.cabecera-principal .sub-menu {
		position: static;
		min-width: 0;
		padding: 0.25rem 0 0.5rem 0.9rem;
		background: transparent;
		border-top: 0;
		box-shadow: none;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	.cabecera-principal .sub-menu a {
		padding: 0.55rem 0.25rem;
	}

	.cabecera-principal__accion {
		order: 4;
		flex: 1 0 100%;
		display: none;
		padding-bottom: 0.4rem;
	}

	.cabecera-principal[data-menu-abierto='true'] .cabecera-principal__accion,
	html:not(.js) .cabecera-principal__accion {
		display: flex;
	}

	.boton-cabecera {
		width: 100%;
	}

	/* Barra superior: solo iconos, en una sola línea. */
	.barra-superior {
		font-size: 0.75rem;
	}

	.barra-superior__inner {
		min-height: 36px;
		padding-block: 4px;
	}

	.barra-superior__item + .barra-superior__item {
		margin-left: 0.3rem;
		padding-left: 0.3rem;
	}

	.barra-superior__item + .barra-superior__item::before {
		height: 12px;
		margin-top: -6px;
	}

	.barra-superior__enlace {
		gap: 0;
	}

	.barra-superior__enlace svg {
		width: 16px;
		height: 16px;
	}

	/* Texto oculto de forma accesible: sigue disponible para lectores. */
	.barra-superior__texto {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

@media (max-width: 480px) {
	.barra-superior__item + .barra-superior__item {
		margin-left: 0.2rem;
		padding-left: 0.2rem;
	}

	/* En pantallas muy pequeñas se quitan los separadores para evitar
	   desbordamiento horizontal manteniendo la barra en una línea. */
	.barra-superior__item + .barra-superior__item::before {
		display: none;
	}

	.barra-superior__enlace svg {
		width: 15px;
		height: 15px;
	}
}

/* ==========================================================================
   Portada: sin relleno superior (el banner va pegado a la cabecera)
   ========================================================================== */

.sitio-principal--portada {
	padding-block: 0;
}

/* ==========================================================================
   Banner principal
   ========================================================================== */

.banner {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 520px;
	min-height: max(520px, 85vh);
	overflow: hidden;
	background: var(--color-secundario);
	color: #ffffff;
}

@supports (height: 1svh) {
	.banner {
		min-height: max(520px, 80svh);
	}
}

.banner__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.banner__fondo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.banner__media-picture {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Video de fondo compartido (banner y call to action): invisible hasta que
   empieza a reproducirse, para que se vea la imagen que tiene detrás. */
.video-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.video-fondo--visible {
	opacity: 1;
}

.banner__capa {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--banner-oscurecer, 0.4));
}

.banner__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 441px) minmax(0, 611px);
	align-items: start;
	justify-content: space-between;
	gap: clamp(2rem, 4vw, 4rem);
	padding-block: clamp(3rem, 6vw, 5rem);
}

.banner__texto {
	max-width: 441px;
}

.banner__titulo {
	margin: 0;
	font-family: var(--fuente-principal);
	font-weight: 400;
	line-height: 1;
}

.banner__subtitulo,
.banner__principal {
	display: block;
	font-size: clamp(2.5rem, 9vw, 3.5rem);
	line-height: 1;
}

.banner__subtitulo {
	color: #ffffff;
	font-weight: 400;
}

.banner__principal {
	color: var(--color-principal);
	font-style: italic;
	font-weight: 400;
}

/* Divisor reutilizable (banner y "Sobre nosotros"). */
.divisor {
	display: block;
	width: 120px;
	height: 5px;
	background: var(--color-principal);
}

/* Modificador del divisor para encabezados centrados. */
.divisor--centrado {
	margin-inline: auto;
}

.banner__divisor {
	margin-block: clamp(1.25rem, 2.5vw, 2rem);
}

.banner__boton {
	margin-top: 0.25rem;
}

@media (min-width: 992px) {
	.banner__subtitulo,
	.banner__principal {
		font-size: 80px;
	}
}

@media (max-width: 991px) {
	.banner__inner {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.banner__texto {
		max-width: 100%;
	}
}

/* ==========================================================================
   Tarjeta del evento destacado
   ========================================================================== */

.banner__tarjeta {
	min-width: 0;
	width: 100%;
}

.tarjeta-evento {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	max-width: 611px;
	min-height: 320px;
	overflow: hidden;
	border-radius: var(--radio);
	background: rgba(0, 0, 0, 0.25);
	color: #ffffff;
}

.tarjeta-evento__etiqueta {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: var(--radio);
	background: var(--color-principal);
	color: var(--color-secundario);
	font-family: var(--fuente-encabezado);
	font-size: 0.75rem;
	font-weight: var(--peso-encabezado);
	letter-spacing: var(--espaciado-letras);
	line-height: 1.5;
	text-transform: uppercase;
}

.tarjeta-evento__media {
	position: relative;
	min-height: 200px;
	background: rgba(255, 255, 255, 0.08);
}

.tarjeta-evento__media picture {
	position: absolute;
	inset: 0;
	display: block;
}

.tarjeta-evento__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tarjeta-evento__contenido {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* ==========================================================================
   Efecto de vidrio reutilizable
   --------------------------------------------------------------------------
   Fondo negro semitransparente con desenfoque. Lo usan la tarjeta del
   evento del banner y el contenedor de "Misión y visión".
   ========================================================================== */

.efecto-vidrio {
	background: rgb(255 255 255 / 25%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
	.efecto-vidrio {
		background: rgba(0, 0, 0, 0.55);
	}
}

.tarjeta-evento__titulo {
	margin: 0;
	color: #ffffff;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
}

.tarjeta-evento__dato {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: #ffffff;
	font-size: 0.95rem;
	line-height: 1.4;
}

.tarjeta-evento__dato svg {
	flex: 0 0 auto;
}

.tarjeta-evento__boton {
	align-self: flex-start;
	margin-top: 0.5rem;
}

@media (max-width: 575px) {
	.tarjeta-evento {
		grid-template-columns: 1fr;
	}

	.tarjeta-evento__media {
		min-height: 220px;
	}
}

@media (min-width: 992px) {
	.banner__tarjeta {
		justify-self: end;
	}

	.tarjeta-evento {
		margin-top: 300px;
	}
}

/* ==========================================================================
   Etiquetas de estado del evento (front-end)
   ========================================================================== */

.evento-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--radio);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
	text-transform: uppercase;
}

.evento-badge--proximo {
	background: var(--color-principal);
	color: #ffffff;
}

.evento-badge--finalizado {
	background: #eef0f2;
	color: var(--color-secundario);
}

/* ==========================================================================
   Página del evento
   ========================================================================== */

.evento-individual {
	margin-bottom: 2rem;
}

.evento-individual__cabecera {
	margin-bottom: 1.5rem;
}

.evento-individual__estado {
	margin: 0 0 0.75rem;
}

.evento-individual__fecha {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	color: var(--color-secundario);
	font-size: 1.05rem;
}

.evento-individual__media {
	margin: 0 0 2rem;
	overflow: hidden;
	border-radius: var(--radio);
	background: #f2f3f5;
}

.evento-individual__media img {
	width: 100%;
	height: auto;
}

.evento-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 1rem 2rem;
	margin: 0 0 2rem;
}

.evento-datos__fila {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e6e8eb;
}

.evento-datos dt {
	color: #5c6673;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.evento-datos dd {
	margin: 0.25rem 0 0;
	color: var(--color-secundario);
	font-size: 1.1rem;
}

.evento-individual__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.evento-individual__volver {
	margin: 0;
	font-size: 0.95rem;
}

.boton--secundario {
	border: 1px solid var(--color-secundario);
	background: transparent;
	color: var(--color-secundario);
}

.boton--secundario:hover,
.boton--secundario:focus {
	border-color: var(--color-secundario);
	background: var(--color-secundario);
	color: #ffffff;
}

/* ==========================================================================
   Archivo de eventos (/eventos): reutiliza la sección y los tickets de la portada
   ========================================================================== */

/* La banda oscura llega hasta el pie, sin hueco blanco debajo. */
.sitio-principal--sin-pie {
	padding-bottom: 0;
}

/* Selector de vista Lista | Calendario, arriba a la derecha. */
.vista-toggle {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 25px;
}

.vista-toggle .boton {
	width: auto;
}

.vista-toggle .vista-toggle__enlace {
	border: 1px solid #ffffff;
	background: #ffffff;
	color: #000000;
}

.vista-toggle .vista-toggle__enlace:hover,
.vista-toggle .vista-toggle__enlace:focus {
	background: #000000;
	color: var(--color-principal);
	filter: none;
}

/* Subtítulo blanco sobre el fondo oscuro (el compartido es negro). */
.archivo-eventos .encabezado-seccion__subtitulo {
	color: var(--color-secundario);
}

/* Paginación sobre el fondo oscuro. */
.archivo-eventos .pagination .page-numbers {
	border-color: rgba(255, 255, 255, 0.3);
	color: #ffffff;
}

.archivo-eventos__vacio,
.calendario__aviso {
	margin: 0;
	color: #ffffff;
	font-family: var(--fuente-parrafos);
}

/* ==========================================================================
   Calendario de eventos
   ========================================================================== */

/* Tarjeta blanca sobre el fondo de la sección; detalles en colores de marca. */
.calendario {
	padding: clamp(15px, 3vw, 30px);
	border-radius: var(--radio);
	background: #ffffff;
}

.calendario .calendario__aviso {
	color: var(--color-texto);
}

.calendario__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 20px;
}

.calendario__barra .boton {
	width: auto;
}

.calendario .calendario__mes {
	margin: 0;
	color: var(--color-secundario);
	font-size: clamp(24px, 3vw, 34px);
	text-align: center;
}

/* Solo la inicial del mes en mayúscula ("Noviembre de 2026"). */
.calendario .calendario__mes::first-letter {
	text-transform: uppercase;
}

.calendario__tabla {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.calendario__tabla th,
.calendario__tabla td {
	padding: 6px;
	border: 1px solid #e6e8eb;
	color: var(--color-secundario);
	font-family: var(--fuente-principal);
	font-size: 18px;
	text-align: center;
}

/* Cabecera de los días con el color secundario. */
.calendario__tabla th {
	border-color: var(--color-secundario);
	background: var(--color-secundario);
	color: #ffffff;
}

.calendario__tabla th abbr {
	text-decoration: none;
}

.calendario__tabla td {
	height: 64px;
}

/* Día de hoy: borde con el color principal. */
.calendario__tabla .calendario__hoy {
	outline: 2px solid var(--color-principal);
	outline-offset: -2px;
}

/* Día con eventos: botón con el color principal. */
.calendario .calendario__dia {
	width: 100%;
	height: 100%;
	min-height: 44px;
	padding: 0;
	background: var(--color-principal);
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: 18px;
}

.calendario .calendario__dia:hover,
.calendario .calendario__dia:focus,
.calendario .calendario__dia[aria-pressed='true'] {
	background: var(--color-secundario);
	color: #ffffff;
}

.calendario__detalle {
	margin-top: 25px;
}

.calendario .calendario__dia-titulo {
	margin: 0 0 10px;
	color: var(--color-secundario);
	font-size: 26px;
}

.calendario__lista {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.calendario__lista a {
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: 20px;
	text-underline-offset: 0.2em;
}

.calendario__datos {
	display: block;
	color: var(--color-texto);
	font-family: var(--fuente-principal);
	letter-spacing: var(--espaciado-letras);
}

@media (max-width: 575px) {
	.calendario__tabla th,
	.calendario__tabla td {
		padding: 2px;
		font-size: 16px;
	}

	.calendario__tabla td {
		height: 48px;
	}
}

/* ==========================================================================
   Archivo de aliados (/aliados)
   ========================================================================== */

.aliados-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.card-aliado {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid #e6e8eb;
	border-radius: var(--radio);
	background: #ffffff;
}

/* Caja del logo: proporción fija para no provocar saltos de diseño. */
.card-aliado__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 25px;
	background: #f2f3f5;
}

.card-aliado__media picture {
	display: contents;
}

.card-aliado__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.card-aliado__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 25px;
}

.card-aliado .card-aliado__titulo {
	margin: 0 0 0.5rem;
	color: var(--color-secundario);
	font-size: 26px;
	line-height: 1.15;
}

.card-aliado__texto {
	margin-bottom: 20px;
}

.card-aliado__texto p:last-child {
	margin-bottom: 0;
}

.card-aliado .card-aliado__boton {
	align-self: flex-start;
	width: auto;
	margin-top: auto;
}

.aliados-mas {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.aliados-mas .boton {
	width: auto;
}

@media (max-width: 991px) {
	.aliados-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* ==========================================================================
   Animación fade up reutilizable
   --------------------------------------------------------------------------
   Solo anima opacity y transform (no provoca reflow). El estado inicial se
   define en el keyframe, así que si el navegador no soporta animaciones el
   contenido se ve igualmente.
   ========================================================================== */

@keyframes capirunners-fade-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.anim-fade-up {
	animation: capirunners-fade-up 0.7s ease-out both;
	animation-delay: var(--retraso, 0s);
}

@media (prefers-reduced-motion: reduce) {
	.anim-fade-up {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Cajas de iconos
   ========================================================================== */

.cajas-iconos {
	padding-block: 50px;
	background: var(--color-secundario);
	color: #ffffff;
}

.cajas-iconos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.caja-icono {
	padding-top: 20px;
	padding-bottom: 20px;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	min-width: 0;
}

.caja-icono__media {
	display: flex;
	flex: 0 0 auto;
	align-items: flex-start;
	justify-content: center;
	width: 57px;
	height: 57px;
	color: var(--color-principal);
}

.caja-icono__media svg,
.caja-icono__media img {
	display: block;
	width: 57px;
	height: 57px;
	object-fit: contain;
}

.caja-icono__media picture {
	display: block;
}

.caja-icono__texto {
	min-width: 0;
}

.caja-icono__titulo {
	margin: 0 0 0.35rem;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
}

.caja-icono__descripcion {
	margin: 0;
	color: var(--color-texto);
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 991px) {
	.cajas-iconos__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ==========================================================================
   Sobre nosotros
   ========================================================================== */

/*
 * Se recorta el desbordamiento horizontal del documento: la sección puede
 * romper el contenedor de contenido (100vw + márgenes negativos) y así se
 * evita la barra horizontal que provoca el ancho del viewport. `clip` no
 * crea un contenedor de scroll, por lo que no afecta a elementos sticky.
 */
body {
	overflow-x: clip;
}

.sobre-nosotros {
	position: relative;
	overflow: hidden;
	padding-block: clamp(50px, 7vw, 80px);
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

.sobre-nosotros__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.sobre-nosotros__fondo picture {
	position: absolute;
	inset: 0;
	display: block;
}

.sobre-nosotros__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sobre-nosotros__capa {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--sn-oscurecer, 0.4));
}

.sobre-nosotros__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 50px);
	align-items: center;
}

.sobre-nosotros__columna {
	min-width: 0;
}

.sobre-nosotros__izquierda {
	display: flex;
	flex-direction: column;
}

/* Texto con brillo: única excepción que usa la fuente de párrafos en blanco. */
.sobre-nosotros__brillo {
	margin: 0 0 clamp(1rem, 2.5vw, 1.75rem);
	color: #ffffff;
	font-family: var(--fuente-parrafos);
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 500;
	line-height: 1.35;
	text-shadow:
		0 0 6px var(--color-principal),
		0 0 14px var(--color-principal),
		0 0 28px var(--color-principal);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.sobre-nosotros__brillo {
		text-shadow:
			0 0 6px color-mix(in srgb, var(--color-principal) 85%, transparent),
			0 0 14px color-mix(in srgb, var(--color-principal) 60%, transparent),
			0 0 28px color-mix(in srgb, var(--color-principal) 40%, transparent);
	}
}

/* Bloque de imágenes superpuestas con proporción fija (sin CLS). */
.sobre-nosotros__imagenes {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.sobre-nosotros__img {
	position: absolute;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radio);
	background: var(--color-secundario);
}

.sobre-nosotros__img picture {
	display: block;
	width: 100%;
	height: 100%;
}

.sobre-nosotros__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sobre-nosotros__img--grande {
	top: 0;
	right: 0;
	z-index: 2;
	width: 75%;
	height: 75%;
}

.sobre-nosotros__img--pequena {
	left: 0;
	bottom: 0;
	width: 50%;
	height: 50%;
}

.sobre-nosotros__imagenes--individual .sobre-nosotros__img {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.sobre-nosotros__subtitulo {
	margin: 0 0 0.4rem;
	color: #000000;
	font-family: var(--fuente-principal);
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.2;
}

.sobre-nosotros .sobre-nosotros__titulo {
	margin: 0;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: clamp(36px, 4.2vw, 50px);
	font-weight: 700;
	line-height: 1.05;
}

.sobre-nosotros__divisor {
	margin-block: clamp(1.25rem, 2vw, 1.75rem);
}

.sobre-nosotros .sobre-nosotros__descripcion {
	margin-bottom: 1.5rem;
	font-size: 16px;
	line-height: 1.6;
}

.sobre-nosotros__descripcion p:last-child {
	margin-bottom: 0;
}

.sobre-nosotros .sobre-nosotros__boton {
	margin-top: 0.25rem;
	text-decoration: none;
}

@media (max-width: 991px) {
	.sobre-nosotros__inner {
		grid-template-columns: 1fr;
	}

	.sobre-nosotros__imagenes {
		margin-top: 1.5rem;
	}
}

/*
 * Shortcode dentro del contenido de una página: las secciones rompen el
 * contenedor de lectura y ocupan el ancho de la ventana. El recorte
 * horizontal del body evita la barra de desplazamiento.
 */
.contenido-texto .sobre-nosotros,
.contenido-texto .mision-y-vision,
.contenido-texto .ofrecemos,
.contenido-texto .ritmo,
.contenido-texto .proximos,
.contenido-texto .testimonios,
.contenido-texto .entrenador,
.contenido-texto .cta,
.contenido-texto .novedades,
.contenido-texto .contacto,
.contenido-texto .contacto-mapa {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   Misión y visión: franja de cifras
   ========================================================================== */

.cifras {
	position: relative;
	z-index: 1;
	padding-top: 60px;
	padding-bottom: 100px;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

.cifras__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.cifra {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cifra__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	margin-bottom: 14px;
	border-radius: var(--radio);
	background: var(--color-principal);
	color: var(--color-secundario);
}

.cifra__icono svg,
.cifra__icono img {
	display: block;
	width: 26px;
	height: 26px;
	object-fit: contain;
}

.cifra__icono picture {
	display: block;
}

.cifra__numero {
	margin: 0 0 10px;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(40px, 5vw, 50px);
	font-weight: 700;
	line-height: 1;
}

.cifra__mas {
	color: var(--color-principal);
}

.cifra__descripcion {
	max-width: 420px;
	margin: 0;
	color: var(--color-texto);
	font-size: 16px;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.cifras {
		padding-top: 50px;
		padding-bottom: 90px;
	}

	.cifras__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ==========================================================================
   Misión y visión: sección con imagen y tarjetas
   ========================================================================== */

.mision {
	position: relative;
	/* flow-root evita que el margen negativo del panel colapse con la
	   sección: la imagen de fondo empieza en el borde de la sección y solo
	   el contenedor sube 80 px por encima. */
	display: flow-root;
	padding-bottom: 80px;
	background: var(--color-secundario);
}

.mision__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.mision__fondo picture {
	position: absolute;
	inset: 0;
	display: block;
}

.mision__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mision__panel {
	position: relative;
	z-index: 2;
	margin-top: -80px;
	padding: 30px;
	border-radius: var(--radio);
}

/* Sin franja de cifras no hay nada que superponer. */
.mision__panel--sin-solape {
	margin-top: 0;
}

.mision__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.tarjeta-mision {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 320px;
	padding: 30px;
	overflow: hidden;
	border-radius: var(--radio);
	background: rgba(0, 0, 0, 0.45);
}

.tarjeta-mision__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.tarjeta-mision__fondo picture {
	position: absolute;
	inset: 0;
	display: block;
}

.tarjeta-mision__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tarjeta-mision__capa {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, var(--capa-tarjeta, 0.2));
}

.tarjeta-mision__contenido {
	position: relative;
	z-index: 2;
}

.tarjeta-mision__titulo {
	margin: 0 0 0.6rem;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: clamp(30px, 3.4vw, 36px);
	font-weight: 700;
	line-height: 1.1;
}

.tarjeta-mision__descripcion {
	color: var(--color-texto);
	font-size: 16px;
	line-height: 1.6;
}

.tarjeta-mision__descripcion p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.mision__panel {
		padding: 20px;
	}

	.mision__grid {
		grid-template-columns: 1fr;
	}

	.tarjeta-mision {
		min-height: 260px;
		padding: 24px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.pie-sitio {
	flex-shrink: 0;
	background: var(--color-footer);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

.pie-sitio__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-block: 80px;
	text-align: center;
}

.pie-sitio__marcas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 30px;
}

.pie-sitio__marca {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 170px;
	height: 125px;
}

.pie-sitio__marca picture {
	display: block;
	width: 100%;
	height: 100%;
}

.pie-sitio__marca img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pie-sitio .menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pie-sitio .menu a {
	display: inline-block;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: 1rem;
	font-weight: var(--peso-encabezado);
	letter-spacing: var(--espaciado-letras);
	text-decoration: none;
	text-transform: uppercase;
	transition: color 0.2s ease;
}

.pie-sitio .menu a:hover,
.pie-sitio .menu a:focus-visible,
.pie-sitio .menu .current-menu-item > a {
	color: var(--color-principal);
}

/* Franja de copyright */

.copyright {
	background: var(--color-principal);
	color: var(--color-secundario);
	font-family: var(--fuente-parrafos);
	font-size: 14px;
	line-height: 1.5;
}

.copyright__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 20px;
	padding-block: 12px;
}

.copyright__inner--solo-derecha {
	justify-content: flex-end;
}

.copyright__inner--solo-derecha .copyright__derechos {
	margin-left: auto;
}

.copyright__extra,
.copyright__derechos {
	margin: 0;
}

@media (max-width: 767px) {
	.copyright__inner {
		flex-direction: column;
		align-items: center;
		gap: 4px;
		text-align: center;
	}

	.copyright__inner--solo-derecha {
		justify-content: center;
	}

	.copyright__inner--solo-derecha .copyright__derechos {
		margin-left: 0;
	}
}

/* ==========================================================================
   Aliados
   ========================================================================== */

.aliados {
	padding-block: 60px;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

.aliados__titulo {
	margin: 0;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(34px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

.aliados__divisor {
	margin: 20px auto 30px;
}

/* Carrusel */

.aliados__track {
	position: relative;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
	list-style: none;
}

.aliados__track::-webkit-scrollbar {
	display: none;
}

.aliados__track:focus-visible {
	outline: 3px solid var(--color-principal);
	outline-offset: 6px;
}

.aliados__track--centrado {
	justify-content: center;
}

.aliados__track--arrastrando {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
	user-select: none;
}

.aliado-item {
	flex: 0 0 calc((100% - 80px) / 5);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: grab;
	scroll-snap-align: start;
}

.aliado-item__caja {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	padding: 10px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--radio);
}

.aliado-item__caja picture {
	display: block;
	width: 100%;
	height: 100%;
}

.aliado-item__caja img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: var(--opacidad-aliado, 0.6);
	transition: opacity 0.2s ease;
}

.aliado-item:hover .aliado-item__caja img,
.aliado-item:focus-visible .aliado-item__caja img {
	opacity: 1;
}

@media (hover: none) {
	.aliado-item__caja img {
		opacity: 0.9;
	}
}

@media (max-width: 991px) {
	.aliado-item {
		flex-basis: calc((100% - 60px) / 4);
	}
}

@media (max-width: 767px) {
	.aliados {
		padding-block: 40px;
	}

	.aliado-item {
		flex-basis: calc((100% - 40px) / 3);
	}
}

@media (max-width: 575px) {
	.aliado-item {
		flex-basis: calc((100% - 20px) / 2);
	}
}

/* Ventana emergente */

.aliado-modal {
	width: min(92%, 560px);
	max-width: 560px;
	margin: auto;
	padding: 30px;
	border: 0;
	border-radius: var(--radio);
	background: #ffffff;
	color: var(--color-texto);
}

.aliado-modal::backdrop {
	background: rgba(0, 0, 0, 0.65);
}

.aliado-modal[open] {
	animation: aliado-modal-entrada 0.25s ease-out;
}

@keyframes aliado-modal-entrada {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aliado-modal[open] {
		animation: none;
	}
}

html.aliado-modal-abierto {
	overflow: hidden;
}

.aliado-modal__caja {
	position: relative;
}

.aliado-modal__cerrar {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--radio);
	background: transparent;
	color: var(--color-secundario);
	cursor: pointer;
}

.aliado-modal__cerrar:hover,
.aliado-modal__cerrar:focus-visible {
	background: rgba(0, 0, 0, 0.06);
	color: var(--color-secundario);
}

.aliado-modal__contenido {
	display: block;
}

.aliado-popup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.aliado-popup__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 220px;
	height: 120px;
}

.aliado-popup__logo picture {
	display: block;
	width: 100%;
	height: 100%;
}

.aliado-popup__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.aliado-popup__titulo {
	margin: 0;
	color: var(--color-secundario);
	font-family: var(--fuente-principal);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
}

.aliado-popup__descripcion {
	color: var(--color-texto);
	font-size: 16px;
	line-height: 1.6;
}

.aliado-popup__descripcion p:last-child {
	margin-bottom: 0;
}

.aliado-popup__boton {
	text-decoration: none;
}

@media (max-width: 575px) {
	.aliado-modal {
		padding: 20px;
	}
}

/* ==========================================================================
   Qué ofrecemos
   ========================================================================== */

.ofrecemos {
	position: relative;
	padding-block: 80px;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

.ofrecemos__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.ofrecemos__fondo picture {
	position: absolute;
	inset: 0;
	display: block;
}

.ofrecemos__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ofrecemos__panel {
	position: relative;
	z-index: 1;
	padding: 25px;
	border-radius: var(--radio);
}

.ofrecemos__cabecera {
	margin-bottom: 25px;
}

.ofrecemos__subtitulo {
	margin: 0 0 0.4rem;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.2;
}

.ofrecemos .ofrecemos__titulo {
	margin: 0;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: clamp(36px, 4.2vw, 50px);
	font-weight: 700;
	line-height: 1.05;
}

.ofrecemos__divisor {
	margin-block: clamp(1rem, 2vw, 1.5rem);
}

.ofrecemos__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.ofrecemos-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radio);
}

.ofrecemos-card__media {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 520 / 250;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.2);
}

.ofrecemos-card__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.ofrecemos-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ofrecemos-card__cuerpo {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 25px;
	background: var(--color-secundario);
}

.ofrecemos .ofrecemos-card__titulo {
	margin: 0 0 0.5rem;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.ofrecemos__texto {
	margin-bottom: 20px;
	color: #ffffff;
	font-family: var(--fuente-parrafos);
	font-size: 16px;
	line-height: 1.6;
}

.ofrecemos__texto p:last-child {
	margin-bottom: 0;
}

.ofrecemos .ofrecemos-card__boton {
	align-self: flex-start;
	margin-top: auto;
	text-decoration: none;
}

@media (max-width: 767px) {
	.ofrecemos {
		padding-block: 50px;
	}

	.ofrecemos__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Ritmo de carrera
   ========================================================================== */

.ritmo {
	padding-block: 80px;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
	text-align: left;
}

.ritmo .ritmo__titulo {
	margin: 0;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: clamp(36px, 4.2vw, 50px);
	font-weight: 700;
	line-height: 1.05;
}

.ritmo .ritmo__descripcion {
	margin: 0.75rem 0 0;
	color: #ffffff;
	font-family: var(--fuente-parrafos);
	font-size: 16px;
	line-height: 1.6;
}

.ritmo__divisor {
	margin-block: clamp(1rem, 2vw, 1.5rem) 30px;
}

.ritmo__campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.ritmo__grupo {
	display: grid;
	gap: 15px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

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

.ritmo__grupo--tiempo {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ritmo__leyenda {
	margin-bottom: 15px;
	padding: 0;
	color: #ffffff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
}

.ritmo__campo {
	min-width: 0;
}

.ritmo__campo label {
	display: block;
	margin-bottom: 6px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
}

.ritmo__campo input,
.ritmo__campo select {
	height: 46px;
	color: var(--color-secundario);
	font-size: 18px;
}

.ritmo__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 30px;
}

.ritmo .ritmo__borrar {
	border: 1px solid #ffffff;
	background: transparent;
	color: #ffffff;
}

.ritmo .ritmo__borrar:hover,
.ritmo .ritmo__borrar:focus {
	background: #ffffff;
	color: var(--color-secundario);
	filter: none;
}

.ritmo__error {
	margin: 25px 0 0;
	padding: 12px 15px;
	border-left: 4px solid var(--color-principal);
	border-radius: var(--radio);
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-family: var(--fuente-parrafos);
	font-size: 16px;
	line-height: 1.5;
}

.ritmo__resultado {
	margin-top: 25px;
	padding: 20px 25px;
	border-radius: var(--radio);
	background: rgba(255, 255, 255, 0.1);
}

.ritmo .ritmo__resultado-etiqueta {
	margin: 0;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.2;
}

.ritmo .ritmo__resultado-valor {
	margin: 0.25rem 0 0;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: clamp(44px, 5vw, 60px);
	font-weight: 700;
	line-height: 1;
}

.ritmo__resultado-unidad {
	color: #ffffff;
	font-size: 0.45em;
	font-weight: 400;
}

@media (max-width: 991px) {
	.ritmo__campos {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.ritmo {
		padding-block: 50px;
	}
}

@media (max-width: 575px) {
	.ritmo__grupo--distancia {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ritmo__campo--selector {
		grid-column: 1 / -1;
	}

	.ritmo__acciones .boton {
		flex: 1 1 100%;
	}
}

/* ==========================================================================
   Próximos eventos: sección y encabezado
   ========================================================================== */

.proximos {
	position: relative;
	padding-block: 80px;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

/* Fondo con imagen y capa, compartido con "Entrenador", "Call to action" y "Novedades". */
.proximos__fondo,
.entrenador__fondo,
.cta__fondo,
.novedades__fondo,
.banner-secundario__fondo,
.contacto__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.proximos__fondo picture,
.entrenador__fondo picture,
.cta__fondo picture,
.novedades__fondo picture,
.banner-secundario__fondo picture,
.contacto__fondo picture {
	position: absolute;
	inset: 0;
	display: block;
}

.proximos__fondo img,
.entrenador__fondo img,
.cta__fondo img,
.novedades__fondo img,
.banner-secundario__fondo img,
.contacto__fondo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La opacidad llega en línea desde el ajuste del panel. */
.proximos__capa,
.entrenador__capa,
.cta__capa,
.novedades__capa,
.banner-secundario__capa,
.contacto__capa {
	position: absolute;
	inset: 0;
	background: #000000a9;
}

.proximos__inner,
.entrenador__inner,
.novedades__inner,
.banner-secundario__inner,
.contacto__inner {
	position: relative;
	z-index: 1;
}

.proximos__cabecera {
	margin-bottom: 40px;
	text-align: center;
}

.proximos .proximos__subtitulo {
	margin: 0 0 0.4rem;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.2;
}

.proximos .proximos__titulo {
	margin: 0;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: clamp(36px, 4.2vw, 50px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.05;
}

.proximos__divisor {
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* ==========================================================================
   Próximos eventos: tickets
   ========================================================================== */

.tickets {
	display: grid;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Ticket de tres columnas: imagen, datos y talón.
 *
 * --ticket-muesca: radio de las muescas.
 * --ticket-talon:  ancho del talón (en móvil, su alto).
 *
 * Las muescas son huecos reales hechos con máscara: se ve el fondo a través.
 * Cada capa de la máscara cubre media tarjeta y recorta un solo círculo, así
 * que no hace falta mask-composite. El +1px centra el hueco en la línea
 * punteada de 2px. La máscara también recortaría una box-shadow, y un
 * drop-shadow en el contenedor es costoso, por eso el ticket no lleva sombra.
 */
.ticket {
	--ticket-muesca: 12px;
	--ticket-talon: 20%;
	display: grid;
	grid-template-columns: 40% minmax(0, 1fr) var(--ticket-talon);
	min-height: 190px;
	overflow: hidden;
	border-radius: var(--radio);
	-webkit-mask-image:
		radial-gradient(circle var(--ticket-muesca) at calc(100% - var(--ticket-talon) + 1px) 0, transparent calc(100% - 0.5px), #000000 100%),
		radial-gradient(circle var(--ticket-muesca) at calc(100% - var(--ticket-talon) + 1px) 100%, transparent calc(100% - 0.5px), #000000 100%);
	mask-image:
		radial-gradient(circle var(--ticket-muesca) at calc(100% - var(--ticket-talon) + 1px) 0, transparent calc(100% - 0.5px), #000000 100%),
		radial-gradient(circle var(--ticket-muesca) at calc(100% - var(--ticket-talon) + 1px) 100%, transparent calc(100% - 0.5px), #000000 100%);
	-webkit-mask-position: top, bottom;
	mask-position: top, bottom;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 50.5%;
	mask-size: 100% 50.5%;
}

/* Sin soporte de máscaras: ticket sin muescas, solo con la línea punteada. */
@supports not ((mask-image: radial-gradient(#000, #000)) or (-webkit-mask-image: radial-gradient(#000, #000))) {
	.ticket {
		--ticket-muesca: 0px;
	}
}

/* Columna izquierda: imagen de contenido o icono de respaldo. */
.ticket__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	background: var(--color-secundario);
	color: var(--color-principal);
}

.ticket__media picture {
	position: absolute;
	inset: 0;
	display: block;
}

.ticket__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Columna central: título y datos del evento. */
.ticket__datos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 25px;
	background: var(--color-secundario);
}

.proximos .ticket__titulo {
	margin: 0 0 12px;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.ticket__lista {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ticket__dato {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: 16px;
	letter-spacing: var(--espaciado-letras);
	line-height: 1.25;
}

.ticket__dato svg {
	flex: 0 0 auto;
	color: var(--color-principal);
}

.ticket__dato a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ticket__dato a:hover,
.ticket__dato a:focus {
	color: var(--color-principal);
}

/* Columna derecha: talón con la línea de perforación. */
.ticket__talon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 15px;
	border-left: 2px dashed rgba(0, 0, 0, 0.3);
	border-left-color: color-mix(in srgb, var(--color-secundario) 40%, transparent);
	background: #ffffff;
}

/* El talón es angosto: el botón ocupa todo su ancho con menos padding lateral
   y el texto puede partirse en dos líneas en lugar de desbordarse. */
.ticket__talon .ticket__boton {
	width: 100%;
	padding-inline: 12px;
	text-align: center;
	white-space: normal;
}

/* El foco blanco del botón no se vería sobre el talón blanco. */
.ticket__talon .ticket__boton:focus-visible {
	outline-color: var(--color-secundario);
}

/* Móvil: columna única, con la perforación en horizontal y las muescas a los lados. */
@media (max-width: 767px) {
	.proximos {
		padding-block: 50px;
	}

	.ticket {
		--ticket-talon: 76px;
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		-webkit-mask-image:
			radial-gradient(circle var(--ticket-muesca) at 0 calc(100% - var(--ticket-talon) + 1px), transparent calc(100% - 0.5px), #000000 100%),
			radial-gradient(circle var(--ticket-muesca) at 100% calc(100% - var(--ticket-talon) + 1px), transparent calc(100% - 0.5px), #000000 100%);
		mask-image:
			radial-gradient(circle var(--ticket-muesca) at 0 calc(100% - var(--ticket-talon) + 1px), transparent calc(100% - 0.5px), #000000 100%),
			radial-gradient(circle var(--ticket-muesca) at 100% calc(100% - var(--ticket-talon) + 1px), transparent calc(100% - 0.5px), #000000 100%);
		-webkit-mask-position: left, right;
		mask-position: left, right;
		-webkit-mask-size: 50.5% 100%;
		mask-size: 50.5% 100%;
	}

	.ticket__media {
		height: 160px;
	}

	/* Alto fijo para que la máscara sepa dónde está la perforación. */
	.ticket__talon {
		height: var(--ticket-talon);
		border-top: 2px dashed rgba(0, 0, 0, 0.3);
		border-top-color: color-mix(in srgb, var(--color-secundario) 40%, transparent);
		border-left: 0;
	}
}

/* ==========================================================================
   Testimonios: sección y encabezado
   ========================================================================== */

.testimonios {
	padding-block: 80px;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

/* Dos columnas 40/60: a cada una se le resta la mitad del hueco de 50px. */
.testimonios__grid {
	display: grid;
	grid-template-columns: minmax(0, calc(40% - 25px)) minmax(0, calc(60% - 25px));
	gap: 50px;
	align-items: start;
}

.testimonios__grid--sin-cabecera {
	grid-template-columns: minmax(0, 1fr);
}

.testimonios .testimonios__subtitulo {
	margin: 0 0 0.4rem;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.2;
}

.testimonios .testimonios__titulo {
	margin: 0;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(36px, 4.2vw, 50px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.05;
}

.testimonios__divisor {
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

.testimonios .testimonios__texto {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	color: #ffffff;
	font-family: var(--fuente-parrafos);
	font-size: 16px;
	line-height: 1.6;
	white-space: pre-line;
}

/* ==========================================================================
   Testimonios: lista de citas
   ========================================================================== */

.testimonios__lista {
	display: grid;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.testimonios__item {
	margin: 0;
}

.testimonios__item + .testimonios__item {
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.testimonio {
	position: relative;
	margin: 0;
}

/* Anula el estilo global de blockquote. Las comillas las pone el CSS, y
   pre-line respeta los saltos de línea que se escribieron en el panel. */
.testimonios .testimonio__texto {
	margin: 0;
	padding: 0;
	border: 0;
	color: #ffffff;
	font-family: var(--fuente-parrafos);
	font-size: 16px;
	line-height: 1.7;
	quotes: '“' '”';
	white-space: pre-line;
}

.testimonio__texto::before {
	content: open-quote;
}

.testimonio__texto::after {
	content: close-quote;
}

/* El autor siempre es tan alto como el icono y le deja hueco a la derecha,
   así el icono nunca pisa el texto, aunque no haya foto. */
.testimonio__autor {
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 64px;
	margin-top: 20px;
	padding-right: 79px;
}

.testimonio__foto {
	display: block;
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	overflow: hidden;
	border-radius: var(--radio);
}

.testimonio__foto picture {
	display: block;
	width: 100%;
	height: 100%;
}

.testimonio__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonio__nombre {
	min-width: 0;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

/* Icono decorativo: se posiciona respecto a .testimonio. */
.testimonio .icono--comillas {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 64px;
	height: 64px;
	color: var(--color-principal);
}

@media (max-width: 991px) {
	.testimonios__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 767px) {
	.testimonios {
		padding-block: 50px;
	}
}

@media (max-width: 575px) {
	.testimonio__autor {
		min-height: 48px;
		padding-right: 58px;
	}

	.testimonio__nombre {
		font-size: 22px;
	}

	.testimonio .icono--comillas {
		width: 48px;
		height: 48px;
	}
}

/* ==========================================================================
   Encabezado de sección reutilizable: subtítulo, título y divisor
   ========================================================================== */

.encabezado-seccion--centrado {
	text-align: center;
}

.encabezado-seccion__subtitulo {
	margin: 0 0 0.4rem;
	color: #000000;
	font-family: var(--fuente-principal);
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.2;
}

.encabezado-seccion__titulo {
	margin: 0;
	color: var(--color-principal);
	font-family: var(--fuente-principal);
	font-size: clamp(36px, 4.2vw, 50px);
	font-style: normal;
	font-weight: 700;
	line-height: 1.05;
}

.encabezado-seccion__divisor {
	margin-top: clamp(1rem, 2vw, 1.5rem);
}

/* ==========================================================================
   Entrenador
   ========================================================================== */

.entrenador {
	position: relative;
	padding-block: 80px;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

.entrenador__cabecera {
	margin-bottom: 40px;
}

/* Dos columnas (560 + 40 + 560 = 1160) desde 992 px. */
.entrenador__columnas {
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

/* Con una sola columna: el texto ocupa todo el ancho o la imagen se centra. */
.entrenador__columnas--sin-imagen,
.entrenador__columnas--sin-texto {
	grid-template-columns: minmax(0, 1fr);
}

.entrenador__columnas--sin-texto {
	justify-items: center;
}

/* Caja de 560 x 600 que mantiene la proporción al encogerse. */
.entrenador__media {
	width: 100%;
	max-width: 560px;
	aspect-ratio: 560 / 600;
	overflow: hidden;
	border-radius: var(--radio);
}

.entrenador__media picture {
	display: block;
	width: 100%;
	height: 100%;
}

.entrenador__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entrenador__contenido {
	min-width: 0;
}

.entrenador__texto {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	color: #ffffff;
	font-family: var(--fuente-parrafos);
	font-size: 16px;
	line-height: 1.6;
}

.entrenador__texto p:last-child {
	margin-bottom: 0;
}

/* Los enlaces heredan el color: sobre la foto el color de enlace no se leería. */
.entrenador__texto a,
.entrenador__texto a:hover,
.entrenador__texto a:focus {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Alineado a la izquierda: anula el ancho completo de .boton-cabecera en móvil. */
.entrenador .entrenador__boton {
	width: auto;
	margin-top: 25px;
}

/* Una columna por debajo de 992 px: imagen centrada arriba y texto debajo. */
@media (max-width: 991px) {
	.entrenador__columnas {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
	}

	.entrenador__contenido {
		justify-self: stretch;
	}
}

@media (max-width: 767px) {
	.entrenador {
		padding-block: 50px;
	}
}

/* ==========================================================================
   Call to action
   ========================================================================== */

.cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	padding-block: 100px;
	overflow: hidden;
	background: var(--color-secundario);
	color: #ffffff;
	font-family: var(--fuente-principal);
}

/* Contenido centrado por encima del fondo. */
.cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cta .cta__titulo {
	color: #ffffff;
}

/* Frase destacada, no un párrafo descriptivo: usa la fuente del encabezado.
   pre-line respeta los saltos de línea escritos en el panel. */
.cta .cta__texto {
	max-width: 800px;
	margin: 12px 0 0;
	color: #ffffff;
	font-family: var(--fuente-encabezado);
	font-size: clamp(24px, 3vw, 35px);
	font-weight: var(--peso-encabezado);
	letter-spacing: var(--espaciado-letras);
	line-height: 1.3;
	white-space: pre-line;
}

.cta__divisor {
	margin-block: 25px;
}

/* Sin botón debajo, el divisor no añade un hueco inferior. */
.cta__divisor:last-child {
	margin-bottom: 0;
}

/* Anula el ancho completo de .boton-cabecera en móvil para seguir centrado. */
.cta .cta__boton {
	width: auto;
}

/* Fondo que solo existe en móvil: en escritorio queda el color secundario. */
@media (min-width: 768px) {
	.cta__fondo--solo-movil {
		display: none;
	}
}

@media (max-width: 767px) {
	.cta {
		padding-block: 60px;
	}
}

/* ==========================================================================
   Novedades
   ========================================================================== */

/* La fuente se fija aquí porque el shortcode puede ir dentro de .texto-descriptivo. */
.novedades {
	position: relative;
	padding-block: 80px;
	font-family: var(--fuente-principal);
	text-align: center;
}

/* Capa leve para el contraste; la de las tarjetas es más fuerte por el texto blanco. */
.novedades__capa {
	opacity: 0.15;
}

.novedades__capa--tarjeta {
	opacity: 0.45;
}

.novedades .encabezado-seccion__subtitulo,
.novedades .encabezado-seccion__titulo {
	margin-top: 0;
	color: #000000;
}

.novedades__tarjetas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	margin-top: 40px;
}

/* Sin imagen destacada, la tarjeta usa el color secundario. */
.novedades__tarjeta {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 320px;
	padding: 1.5rem;
	overflow: hidden;
	border-radius: var(--radio);
	background: var(--color-secundario);
}

.novedades__tarjeta-contenido {
	position: relative;
	z-index: 1;
}

.novedades .novedades__tarjeta-titulo {
	margin: 0 0 1rem;
	color: #ffffff;
	overflow-wrap: anywhere;
}

.novedades .novedades__tarjeta-titulo a {
	color: inherit;
	text-decoration: none;
}

/* Evita el subrayado de los enlaces cuando va dentro del contenido de una página. */
.novedades .boton {
	text-decoration: none;
}

.novedades__accion {
	margin-top: 40px;
}

/* Una columna por debajo de 992 px. */
@media (max-width: 991px) {
	.novedades__tarjetas {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.novedades {
		padding-block: 50px;
	}
}

/* ==========================================================================
   Banner de páginas secundarias (todas excepto la portada)
   ========================================================================== */

/* Altura fija; el color secundario es el respaldo sin imagen. */
.banner-secundario {
	position: relative;
	display: flex;
	align-items: center;
	height: 300px;
	overflow: hidden;
	background: var(--color-secundario);
	text-align: center;
}

.banner-secundario__capa {
	opacity: 0.8;
}

/* Títulos largos: máximo 3 líneas para respetar la altura fija. */
.banner-secundario .banner-secundario__titulo {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #ffffff;
	font-family: var(--fuente-principal);
	font-size: clamp(36px, 5vw, 60px);
	font-style: normal;
	line-height: 1.05;
	overflow-wrap: anywhere;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.banner-secundario__divisor {
	margin-top: 20px;
}

/* ==========================================================================
   Contacto
   ========================================================================== */

/* La fuente se fija aquí porque el shortcode puede ir dentro de .texto-descriptivo. */
.contacto {
	position: relative;
	padding-block: 80px;
	background: var(--color-secundario);
	font-family: var(--fuente-principal);
}

.contacto__columnas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}

.contacto__columnas--sin-formulario {
	grid-template-columns: minmax(0, 1fr);
}

/* Formulario sobre vidrio (.efecto-vidrio); el botón conserva el estilo del plugin. */
.contacto__formulario {
	padding: clamp(20px, 4vw, 40px);
	border-radius: 35px;
}

.contacto .encabezado-seccion__subtitulo,
.contacto .encabezado-seccion__titulo {
	margin-top: 0;
	color: #000000;
}

.contacto .contacto__descripcion {
	margin: 20px 0 0;
	color: var(--color-texto);
	font-size: 16px;
}

/* Cajas de icono: dos en fila, negras y con radio de 35 px. */
.contacto__cajas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.contacto__caja {
	padding: 30px;
	border-radius: 35px;
	background: #000000;
}

.contacto__caja-icono img {
	width: 50px;
	height: 50px;
	object-fit: contain;
}

.contacto .contacto__caja-titulo {
	margin: 15px 0 0;
	color: var(--color-principal);
	font-size: 26px;
}

.contacto .contacto__caja-texto {
	margin: 10px 0 0;
	color: #ffffff;
	font-size: 16px;
}

/* Mapa a todo el ancho, sin capas encima. */
.contacto-mapa iframe {
	display: block;
	width: 100%;
	height: 500px;
	border: 0;
}

/* Una columna por debajo de 992 px; cajas apiladas en móvil. */
@media (max-width: 991px) {
	.contacto__columnas {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575px) {
	.contacto {
		padding-block: 50px;
	}

	.contacto__cajas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   Novedades (blog): filtro, tarjetas, entrada y barra lateral
   ========================================================================== */

/* Filtro de categorías en pastillas con .boton y .boton--secundario. */
.filtro-categorias__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

/* La tarjeta reutiliza .entrada; el botón queda al pie. */
.card-post {
	display: flex;
	flex-direction: column;
}

.card-post .card-post__boton {
	align-self: flex-start;
	margin-top: auto;
}

.card-post .entrada__resumen {
	margin: 0 0 1rem;
}

/* Entrada: contenido 80 % y barra lateral 20 %. */
.entrada-layout {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
	gap: 40px;
	padding: 20px 0px;
	align-items: start;
}

.sidebar-post {
	position: sticky;
	top: 20px;
	display: grid;
	gap: 30px;
}

.sidebar-post .sidebar-post__titulo {
	margin: 0;
	font-size: 22px;
}

.sidebar-post__divisor {
	width: 60px;
	margin: 10px 0 15px;
}

/* Tarjeta compacta: miniatura y título en la barra lateral. */
.card-compacta {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 15px;
}

.card-compacta__media {
	flex: 0 0 64px;
	overflow: hidden;
	border-radius: var(--radio);
}

.card-compacta__media img {
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.card-compacta__texto {
	min-width: 0;
}

.card-compacta .card-compacta__titulo {
	margin: 0;
	font-size: 18px;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.card-compacta__titulo a {
	color: var(--color-secundario);
	text-decoration: none;
}

.card-compacta__titulo a:hover,
.card-compacta__titulo a:focus {
	color: var(--color-principal);
}

.card-compacta__fecha {
	display: block;
	color: #5c6673;
	font-size: 15px;
}

/* Por debajo de 992 px la barra lateral pasa debajo del contenido. */
@media (max-width: 991px) {
	.entrada-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.sidebar-post {
		position: static;
	}
}