/*
 * Portada clásica — los únicos ajustes sobre la hoja de 2025.
 *
 * `style.min.css` es copia literal del tema de la primera edición y no se toca:
 * lo que necesita un retoque va aquí, para que se vea de un vistazo en qué se
 * separa el clon del original.
 *
 * 1. La composición de figuras de Cádiz iba inline como SVG (5 MB con las fotos
 *    incrustadas) y ahora se sirve como WebP. Un SVG inline sin ancho toma el de
 *    su caja, que allí la marcaba el logotipo (máximo 800 px, o 1100 en
 *    pantallas grandes); una <img> no hace eso y se estiraba a toda la columna,
 *    con lo que el hero salía al doble de alto. Estas dos reglas devuelven al
 *    bloque exactamente la medida que tenía en 2025.
 * 2. El cierre servía su imagen dentro de un <picture>; al servirla como <img>
 *    suelto hay que repetirle el encaje.
 * 3. El H1 del hero es solo para lectores de pantalla. En 2025 lo escondía una
 *    hoja de WordPress que aquí no se carga, y sin ella ocupaba dos líneas de
 *    texto blanco sobre blanco: invisible, pero empujaba el hero 200 px.
 */

.mwm-section-home-header__media {
	max-width: 800px;
}

.mwm-section-home-header__media-figures img {
	display: block;
	width: 100%;
}

@media (min-width: 1600px) {
	.mwm-section-home-header__media {
		max-width: 68.75rem;
	}
}

.mwm-section-cta__media img {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/*
 * Tema claro dentro del bloque oscuro.
 *
 * La portada cuelga todas sus secciones de un contenedor marcado como oscuro, y
 * la hoja de 2025 solo define variables para ese caso: nunca las devuelve al
 * valor claro. En la web original no se notaba porque cada sección clara traía
 * sus colores escritos a mano, pero en cuanto una sección clara se apoya en la
 * herencia —el titular de las convocatorias, la tarjeta de Showcase— el texto
 * sale blanco sobre blanco.
 *
 * Esto devuelve la tinta a cualquier sección clara anidada. Las reglas propias
 * del tema (la tarjeta azul de la izquierda, que sí lleva su texto en blanco)
 * son más específicas y siguen mandando.
 */

/*
 * El bloque de patrocinadores pide `data-bg-section="lightgray"`, un valor que
 * la hoja de 2025 nunca llegó a implementar: solo define `light` y `dark`. Sin
 * color propio, la sección heredaba el azul del bloque que la envuelve y su
 * texto —azul, por ser sección clara— quedaba invisible.
 */
[data-bg-section="lightgray"] {
	background-color: #eef0ff;
}

[data-theme-section="dark"] [data-theme-section="light"] {
	--mwm-color-text: var(--mwm-color-dark);
	--mwm-color-border: var(--mwm-color-dark);

	color: var(--mwm-color-dark);
}

[data-theme-section="dark"] [data-theme-section="light"] :is(h1, h2, h3, h4, h5) {
	color: var(--mwm-color-dark);
}

/*
 * Sección del vídeo de 2025 — no existía en aquel tema, así que su caja se
 * define aquí. Va dentro del bloque que el tema marca como oscuro, y de ahí
 * heredaba el texto en blanco: sobre su fondo claro salía invisible. Por eso lo
 * primero que hace es devolverse el color de tinta.
 *
 * El vídeo es vertical (9:16): manda el alto, no el ancho. La columna de texto
 * se alinea con su borde superior en lugar de centrarse, que dejaba un hueco
 * grande arriba y el botón flotando en mitad de la sección.
 */

.mwm-section-echo25 {
	--mwm-color-text: var(--mwm-color-dark);
	--mwm-color-border: var(--mwm-color-dark);
}

.mwm-section-echo25.mwm-section-echo25 :is(h2, h3, p) {
	color: var(--mwm-color-dark);
}

.mwm-section-echo25 .mwm-btn.outline {
	border-color: var(--mwm-color-dark);
	color: var(--mwm-color-dark);
}

/* El espaciado entre el titular y el contenido lo fija cada sección en el tema
   original; ésta se calca del bloque de cifras, que es su vecino. */
/*
 * Bloque centrado en la página: el vídeo y su texto van juntos en mitad del
 * ancho, no uno pegado al margen izquierdo y otro a media calle. La cabecera se
 * centra con ellos para que la sección se lea como una sola pieza.
 */
.mwm-section-echo25 .mwm-row-title {
	--columns: 1;

	justify-content: center;
	padding-bottom: calc(var(--row-gap) * 3);
	text-align: center;
}

/* El ancho de las columnas lo calcula el tema con su propia `--columns`, que
   no se deja cambiar desde la fila: se les da el ancho directamente para que el
   titular y la entradilla se apilen centrados. */
.mwm-section-echo25 .mwm-row-title > .mwm-col {
	align-items: center;
	flex: 0 0 100%;
	margin: 0 auto;
	max-width: none;
	width: 100%;
}

/* El ancho de línea se limita en el texto, no en la columna: si se limita la
   columna, las dos caben en la misma línea y vuelven a quedar una a cada lado. */
.mwm-section-echo25 .mwm-row-title p {
	margin: 0 auto;
	max-width: 52ch;
}

.mwm-section-echo25 .mwm-row-title .mwm-col-title h2 {
	margin-bottom: 0.75rem;
}

.mwm-section-echo25 .mwm-row-echo25 {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--col-gap) * 1.2);
	justify-content: center;
}

.mwm-section-echo25 .mwm-col-echo25-media {
	flex: 0 0 340px;
	max-width: 340px;
	width: 340px;
}

.mwm-section-echo25 .mwm-col-echo25-texto {
	align-items: flex-start;
	display: flex;
	flex: 0 1 460px;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 460px;
	width: 460px;
}

.mwm-section-echo25 .group-tags {
	gap: 0.5em;
	width: auto;
}

.mwm-section-echo25 .echo25-titular {
	font-size: calc(var(--mwm-title-size) * 0.22);
	line-height: 1.1;
}

.mwm-section-echo25 .echo25-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.mwm-section-echo25 .echo25-botones .mwm-btn {
	flex: none;
}

@media (max-width: 860px) {
	.mwm-section-echo25 .mwm-row-echo25 {
		--columns: 1;
	}

	.mwm-section-echo25 .mwm-col-echo25-media {
		max-width: 340px;
	}

	.mwm-section-echo25 .echo25-video {
		margin: 0 auto;
		max-width: 340px;
	}

	.mwm-section-echo25 .mwm-col-echo25-texto {
		max-width: none;
	}
}

/*
 * Rótulo de cada grupo dentro de la parrilla de marcas (organiza / promueve /
 * colabora). El tema ya usa este registro para los niveles de patrocinio; se
 * replica aquí para que los tres grupos se distingan sin meter tres secciones.
 */

/* Los grupos (organiza / promueve / colabora) van en fila: cada uno con su
   rótulo y sus logotipos debajo. Apilados ocupaban tres pantallas. */
.mwm-section-brands .si25-grupos {
	display: grid;
	gap: calc(var(--col-gap) * 1.2);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	width: 100%;
}

.mwm-section-brands .si25-grupo {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Solo cuando la parrilla va en columnas: la hilera única conserva el centrado
   y el aire que traía el tema. */
.mwm-section-brands .si25-grupo .mwm-col-row-logos {
	justify-content: flex-start;
	padding-top: 0;
}

.mwm-section-brands .si25-grupo .boxed-logo {
	height: auto;
	width: 100%;
}

/* El encaje del logotipo dentro de su tarjeta vale para los dos formatos. */
.mwm-section-brands .boxed-logo__wrapper {
	align-items: center;
	aspect-ratio: 16 / 10;
	display: flex;
	justify-content: center;
	padding: 1.25rem;
	padding-bottom: 1.25rem;
	width: 100%;
}

.mwm-section-brands .boxed-logo img {
	height: auto;
	max-height: 72px;
	max-width: 100%;
	object-fit: contain;
	position: static;
	transform: none;
	width: auto;
}

/*
 * El tema da la proporción a la tarjeta con padding-bottom y centra el logotipo
 * en posición absoluta al 100 % de ancho. Con logotipos apaisados (UpAndalus)
 * eso los sacaba por el borde: aquí la tarjeta usa aspect-ratio y el logotipo
 * vuelve al flujo, encajado dentro y con un alto máximo común.
 */
.mwm-section-brands .si25-grupo .boxed-logo__wrapper {
	align-items: center;
	aspect-ratio: 16 / 10;
	display: flex;
	justify-content: center;
	padding: 1.25rem;
	padding-bottom: 1.25rem;
	width: 100%;
}

.mwm-section-brands .si25-grupo .boxed-logo img {
	height: auto;
	max-height: 72px;
	max-width: 100%;
	object-fit: contain;
	position: static;
	transform: none;
	width: auto;
}

.mwm-section-brands .si25-rotulo {
	/* La tinta la pone la variable del tema: blanca en las secciones azules,
	   azul en las claras. Sin esto salía azul sobre azul. */
	color: var(--mwm-color-text);
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	width: 100%;
}

/* El pie ahora nombra a la entidad organizadora antes del logotipo de quien
   promueve, así que necesita su propio renglón. */
.mwm-footer__entidad {
	font-weight: 500;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

/*
 * Marquesina: el color de las palabras lo decide el fondo de su propia sección,
 * no la cascada.
 *
 * La hoja de 2025 lo resuelve con `[data-theme-section=…] .mwm-marquee__content
 * span`, y como la portada entera cuelga de un bloque marcado como oscuro, esa
 * regla gana siempre por orden y pinta las palabras en azul aunque la sección
 * pida lo contrario: sobre el fondo azul quedaban invisibles.
 */

.mwm-section-marquee[data-bg-section="dark"] .mwm-marquee__content span {
	color: var(--mwm-color-light);
}

.mwm-section-marquee[data-bg-section="dark"] .mwm-marquee__content svg path {
	stroke: var(--mwm-color-light);
}

.mwm-section-marquee[data-bg-section="light"] .mwm-marquee__content span {
	color: var(--mwm-color-dark);
}

.mwm-section-marquee[data-bg-section="light"] .mwm-marquee__content svg path {
	stroke: var(--mwm-color-dark);
}

/* ─────────────────────────────────────────────────────────────────────────
   Convocatorias: tres cajas en vez de dos (oct-2026)
   La retícula base del tema ya reparte en tres, pero la sección fuerza dos
   con `.mwm-section-home-tickets .grid{--columns:2}`. Se devuelve a tres solo
   en escritorio: por debajo de 720px el tema baja a dos y ahí no se toca.
   ───────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 721px) {
	.mwm-section-home-tickets .mwm-row-audience {
		--columns: 3;
	}
}

/* Llamada a la acción al cierre de «¿Por qué asistir?». La sección no tenía
   ninguna acción y es donde el visitante acaba de leer los motivos. */
.mwm-row-why-cta {
	padding-top: calc(var(--row-gap) * 2);
}

.mwm-row-why-cta .mwm-col {
	display: flex;
	justify-content: center;
}

/* Las tarjetas de esta sección son blancas con el borde también blanco, así que
   sobre el fondo claro no se leían como tarjetas: solo se veía su contenido.
   Se les devuelve el contorno a las que no son la destacada, que sí tiene su
   propio fondo. */
.mwm-section-home-tickets .mwm-row-audience .mwm-card:has(.mwm-btn.outline) {
	border-color: var(--mwm-color-border);
}

/*
 * Logotipos cuadrados (el sello de UCA Emprende). Con el alto máximo común de
 * la parrilla ocupan la mitad de ancho que los apaisados y se leen como si
 * pesaran menos, así que se les deja crecer en alto hasta igualar el bloque.
 * El `min()` es lo que evita que en móvil, donde la tarjeta mide bastante
 * menos, el sello la desborde y descuadre su fila.
 */
.mwm-section-brands .boxed-logo--cuadrado img {
	max-height: min(86px, 100%);
}