/**
 * Componentes reutilizables.
 *
 * Una clase por componente, modificadores con doble guion. No se anidan
 * selectores de elemento bajo clases de sección: un componente debe verse
 * igual esté donde esté.
 */

/* ==========================================================================
   Botones
   ========================================================================== */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2xs);
	min-height: var(--objetivo-minimo);
	min-width: var(--objetivo-minimo);
	padding: var(--e-2xs) var(--e-md);
	font-family: var(--fuente-institucional);
	font-size: var(--fs-300);
	font-weight: var(--peso-fuerte);
	line-height: var(--interlinea-apretada);
	text-align: center;
	text-decoration: none;
	border: var(--borde-grueso) solid transparent;
	border-radius: var(--radio-pildora);
	cursor: pointer;
	transition: background-color var(--transicion-rapida), color var(--transicion-rapida), border-color var(--transicion-rapida);
}

.boton--primario {
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
}

.boton--primario:hover,
.boton--primario:focus-visible {
	background-color: var(--color-acento-oscuro);
	color: var(--color-acento-texto);
}

.boton--secundario {
	background-color: var(--color-acento-secundario);
	color: var(--color-acento-secundario-texto);
}

.boton--secundario:hover,
.boton--secundario:focus-visible {
	background-color: var(--color-acento-secundario-oscuro);
	color: var(--color-acento-secundario-texto);
}

.boton--contorno {
	background-color: transparent;
	color: var(--color-azul-enlace);
	border-color: currentColor;
}

.boton--contorno:hover,
.boton--contorno:focus-visible {
	background-color: var(--color-azul-enlace);
	color: var(--color-texto-inverso);
}

.boton--claro {
	background-color: var(--color-fondo);
	color: var(--color-navy);
}

.boton--claro:hover,
.boton--claro:focus-visible {
	background-color: var(--color-celeste);
	color: var(--color-navy);
}

.boton--bloque {
	width: 100%;
}

/* ==========================================================================
   Píldoras y etiquetas
   ========================================================================== */

.pildora {
	display: inline-block;
	padding: var(--e-3xs) var(--e-xs);
	background-color: var(--color-rosado);
	color: var(--color-navy);
	font-size: var(--fs-200);
	font-weight: var(--peso-medio);
	border-radius: var(--radio-pildora);
}

.pildora--acento {
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
}

.pildora--celeste {
	background-color: var(--color-celeste);
}

/* ==========================================================================
   Tarjetas
   ========================================================================== */

.tarjeta {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--color-fondo);
	border-radius: var(--radio-md);
	overflow: hidden;
}

.tarjeta--enmarcada {
	background-color: var(--color-fondo-alterno);
	border-radius: var(--radio-lg);
}

.tarjeta__imagen {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radio-md);
	background-color: var(--color-fondo-alterno);
}

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

.tarjeta__cuerpo {
	display: flex;
	flex-direction: column;
	gap: var(--e-2xs);
	padding-block: var(--e-sm);
	flex: 1 1 auto;
}

.tarjeta--enmarcada .tarjeta__cuerpo {
	padding: var(--e-md);
}

/* En los talleres el nombre va centrado bajo la fotografía, no alineado a la
   izquierda como en las demás tarjetas. */
.tarjeta--taller .tarjeta__titulo,
.tarjeta--taller .tarjeta__meta {
	text-align: center;
}

.tarjeta__titulo {
	font-size: var(--fs-500);
	margin: 0;
}

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

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

.tarjeta__meta {
	font-size: var(--fs-200);
	color: var(--color-texto-suave);
}

.tarjeta__texto {
	max-width: none;
	color: var(--color-texto-suave);
}

/* ==========================================================================
   Rejillas que se adaptan a la cantidad de elementos publicados
   ========================================================================== */

.rejilla {
	display: grid;
	gap: var(--e-md);
	grid-template-columns: 1fr;
}

/* Un elemento de rejilla tiene min-width: auto, de modo que un hijo con un
   ancho intrínseco grande —una tabla, una imagen, una palabra muy larga—
   ensancha la columna y arrastra la página entera. Anularlo aquí evita esa
   clase completa de desbordamiento horizontal. */
.rejilla > * {
	min-width: 0;
}

@media (min-width: 30em) {
	.rejilla--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48em) {
	.rejilla--2,
	.rejilla--3,
	.rejilla--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.rejilla--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

/* Con pocos elementos la rejilla se centra en lugar de dejar un hueco a la
   derecha: publicar tres talleres no debe verse como un error. */
.rejilla--centrada {
	justify-content: center;
}

/* ==========================================================================
   Carrusel: desplazamiento manual, nunca automático
   ========================================================================== */

.carrusel {
	position: relative;
}

/* Las pistas se declaran con un ancho fijo y no con minmax(0, …): un mínimo de
   cero permite que la rejilla comprima todos los elementos para que quepan, y
   entonces ocho talleres se ven a 127 px en lugar de tres a tamaño completo con
   desplazamiento. Con un ancho fijo, la pista desborda y se desplaza, que es el
   comportamiento que se busca. */
.carrusel__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(16rem, 78%);
	gap: var(--e-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block-end: var(--e-2xs);
	overscroll-behavior-x: contain;
}

.carrusel__pista > * {
	scroll-snap-align: start;
}

@media (min-width: 48em) {
	.carrusel__pista {
		grid-auto-columns: calc((100% - var(--e-md)) / 2);
	}
}

@media (min-width: 64em) {
	.carrusel__pista {
		grid-auto-columns: calc((100% - var(--e-md) * 2) / 3);
	}
}

/* Los botones solo se muestran si su guion está operativo. Sin él, la pista
   sigue siendo desplazable con el dedo, con la rueda y con el teclado, porque
   es un contenedor con desbordamiento y foco propio. */
.carrusel__controles {
	display: none;
	justify-content: center;
	gap: var(--e-sm);
	margin-top: var(--e-md);
}

[data-carrusel-listo] .carrusel__controles {
	display: flex;
}

.carrusel__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--objetivo-minimo);
	height: var(--objetivo-minimo);
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
	border: var(--borde-grueso) solid transparent;
	border-radius: 50%;
	cursor: pointer;
}

.carrusel__control:hover:not([disabled]),
.carrusel__control:focus-visible {
	background-color: var(--color-acento-oscuro);
}

.carrusel__control[disabled] {
	opacity: 0.45;
	cursor: default;
}

.carrusel__control svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

/* ==========================================================================
   Acordeón: preguntas frecuentes y menú en teléfono
   ========================================================================== */

.acordeon {
	display: flex;
	flex-direction: column;
	gap: var(--e-xs);
}

.acordeon__elemento {
	background-color: var(--color-fondo-alterno);
	border-radius: var(--radio-lg);
	overflow: hidden;
}

.acordeon__encabezado {
	margin: 0;
	font-size: var(--fs-400);
}

.acordeon__disparador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-sm);
	width: 100%;
	min-height: var(--objetivo-minimo);
	padding: var(--e-xs) var(--e-md);
	background: transparent;
	color: var(--color-texto);
	font-family: inherit;
	font-size: var(--fs-400);
	font-weight: var(--peso-fuerte);
	text-align: left;
	border: 0;
	cursor: pointer;
}

.acordeon__disparador:hover {
	background-color: var(--color-celeste);
}

.acordeon__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	background-color: var(--color-acento-secundario);
	color: var(--color-acento-secundario-texto);
	border-radius: 50%;
	transition: transform var(--transicion-media);
}

.acordeon__marca svg {
	width: 1rem;
	height: 1rem;
	fill: currentColor;
}

.acordeon__disparador[aria-expanded="true"] .acordeon__marca {
	transform: rotate(180deg);
}

.acordeon__panel {
	padding: 0 var(--e-md) var(--e-md);
}

/* El panel se pliega desde el primer fotograma, en función del estado ARIA
   del disparador que lo gobierna. El selector :has() es necesario porque el
   botón está dentro del encabezado y no es hermano directo del panel. Si un
   navegador no lo admitiera, la degradación es la correcta: las respuestas se
   muestran abiertas en lugar de quedar inalcanzables. */
.con-guion .acordeon__encabezado:has( .acordeon__disparador[aria-expanded="false"] ) + .acordeon__panel {
	display: none;
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.formulario {
	display: flex;
	flex-direction: column;
	gap: var(--e-md);
	max-width: var(--ancho-lectura);
}

.campo {
	display: flex;
	flex-direction: column;
	gap: var(--e-3xs);
}

.campo__etiqueta {
	font-weight: var(--peso-medio);
}

.campo__obligatorio {
	color: var(--color-error);
	font-weight: var(--peso-fuerte);
}

.campo__control {
	min-height: var(--objetivo-minimo);
	padding: var(--e-2xs) var(--e-xs);
	background-color: var(--color-fondo);
	color: var(--color-texto);
	border: var(--borde-grueso) solid var(--color-borde-fuerte);
	border-radius: var(--radio-sm);
	width: 100%;
}

textarea.campo__control {
	min-height: 8rem;
	resize: vertical;
}

.campo__ayuda {
	font-size: var(--fs-200);
	color: var(--color-texto-suave);
	max-width: none;
}

/* El error no se señala solo con color: lleva texto y un símbolo. */
.campo--error .campo__control {
	border-color: var(--color-error);
	background-color: var(--color-error-fondo);
}

.campo__error {
	display: flex;
	align-items: flex-start;
	gap: var(--e-3xs);
	font-size: var(--fs-200);
	font-weight: var(--peso-medio);
	color: var(--color-error);
	max-width: none;
}

.campo__error::before {
	content: "\26A0";
	font-size: var(--fs-300);
	line-height: 1;
}

/* Campo trampa contra envíos automáticos: invisible y fuera del recorrido de
   teclado, nunca con display:none, que algunos robots detectan. */
.campo--trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aviso {
	padding: var(--e-sm) var(--e-md);
	border-radius: var(--radio-sm);
	border-left: var(--e-3xs) solid transparent;
}

.aviso p {
	max-width: none;
}

.aviso--exito {
	background-color: var(--color-exito-fondo);
	border-left-color: var(--color-exito);
	color: var(--color-exito);
}

.aviso--error {
	background-color: var(--color-error-fondo);
	border-left-color: var(--color-error);
	color: var(--color-error);
}

.aviso--informativo {
	background-color: var(--color-fondo-alterno);
	border-left-color: var(--color-acento-secundario);
}

/* ==========================================================================
   Migas de pan
   ========================================================================== */

.migas {
	padding-block: var(--e-xs);
	font-size: var(--fs-200);
}

.migas__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-3xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

.migas__separador {
	color: var(--color-texto-suave);
}

.migas__actual {
	color: var(--color-texto-suave);
}

/* ==========================================================================
   Paginación
   ========================================================================== */

.paginacion {
	margin-top: var(--e-xl);
}

.paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--e-2xs);
}

.paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--objetivo-minimo);
	min-height: var(--objetivo-minimo);
	padding: 0 var(--e-2xs);
	border: var(--borde-grueso) solid var(--color-borde);
	border-radius: var(--radio-sm);
	text-decoration: none;
}

.paginacion .page-numbers.current {
	background-color: var(--color-acento-secundario);
	border-color: var(--color-acento-secundario);
	color: var(--color-acento-secundario-texto);
}

/* ==========================================================================
   Redes sociales
   ========================================================================== */

.redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

.redes__enlace {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--objetivo-minimo);
	height: var(--objetivo-minimo);
	background-color: var(--color-fondo);
	color: var(--color-navy);
	border: var(--borde-grueso) solid transparent;
	border-radius: 50%;
}

.redes__enlace:hover,
.redes__enlace:focus-visible {
	background-color: var(--color-celeste);
	color: var(--color-navy);
}

.redes__enlace svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

.redes--sobre-oscuro .redes__enlace {
	background-color: transparent;
	color: var(--color-texto-inverso);
	border-color: currentColor;
}

.redes--sobre-oscuro .redes__enlace:hover,
.redes--sobre-oscuro .redes__enlace:focus-visible {
	background-color: var(--color-texto-inverso);
	color: var(--color-navy);
}

/* ==========================================================================
   Enlace externo
   ========================================================================== */

.enlace-externo__marca {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.3em;
	vertical-align: baseline;
	fill: currentColor;
}

/* ==========================================================================
   Mapa
   ========================================================================== */

.mapa {
	position: relative;
	min-height: 16rem;
	background-color: var(--color-fondo-alterno);
	border-radius: var(--radio-sm);
	overflow: hidden;
}

/* El mapa reutiliza la fachada de carga diferida de los videos, pero no su
   proporción: combinar aspect-ratio 16/9 con min-height 16rem le fija un ancho
   mínimo de 455 px y produce desplazamiento horizontal por debajo de 480 px.
   El mapa se rige solo por su altura mínima. */
.mapa.video {
	aspect-ratio: auto;
}

.mapa iframe {
	width: 100%;
	height: 100%;
	min-height: 16rem;
	border: 0;
}

.mapa__aviso {
	padding: var(--e-md);
	text-align: center;
	color: var(--color-texto-suave);
}

/* ==========================================================================
   Video incrustado con carga diferida
   ========================================================================== */

.video {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--color-navy);
	border-radius: var(--radio-sm);
	overflow: hidden;
}

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

/* Sin guion, el botón de activación no serviría de nada: en su lugar se
   muestra un enlace directo al video o al mapa. */
.video__activar {
	display: none;
}

[data-video-listo] .video__activar {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e-2xs);
	width: 100%;
	padding: var(--e-md);
	background-color: var(--color-navy);
	color: var(--color-texto-inverso);
	font-family: var(--fuente-institucional);
	font-weight: var(--peso-fuerte);
	border: 0;
	cursor: pointer;
	text-align: center;
}

.video__respaldo {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--e-md);
	background-color: var(--color-navy);
	color: var(--color-texto-inverso);
	font-family: var(--fuente-institucional);
	font-weight: var(--peso-fuerte);
	text-align: center;
}

.video__respaldo:hover,
.video__respaldo:focus-visible {
	background-color: var(--color-navy-claro);
	color: var(--color-texto-inverso);
}

[data-video-listo] .video__respaldo {
	display: none;
}

.video__activar:hover,
.video__activar:focus-visible {
	background-color: var(--color-navy-claro);
}

.video__activar svg {
	width: 3rem;
	height: 3rem;
	fill: currentColor;
}

.video__aviso {
	font-family: var(--fuente-base);
	font-size: var(--fs-200);
	font-weight: var(--peso-normal);
	max-width: 28rem;
}

/* ==========================================================================
   Transcripción de videos
   ========================================================================== */

.transcripcion {
	margin-block: var(--e-md);
	border: var(--borde-fino) solid var(--color-borde);
	border-radius: var(--radio-sm);
	background-color: var(--color-fondo-suave);
}

.transcripcion__titulo {
	padding: var(--e-sm) var(--e-md);
	font-family: var(--fuente-institucional);
	font-weight: var(--peso-fuerte);
	color: var(--color-texto);
	cursor: pointer;
	/* El área de pulsación llega al mínimo de 44 píxeles sin depender del
	   largo del texto. */
	min-height: 2.75rem;
	display: flex;
	align-items: center;
}

.transcripcion__cuerpo {
	padding: 0 var(--e-md) var(--e-md);
}