/*
 * Landing pública (web/aapolo/base.html.twig: home, fixture, discover,
 * experience). Overrides propios sobre custom.css del CDN, que es una plantilla
 * comercial de 625 KB que no controlamos.
 *
 * Nota: bundles/app/css/fix-style.css hace lo mismo pero vive en una carpeta
 * horneada en la imagen; lo nuevo va aquí, que se sirve en vivo desde static/.
 */

/* ------------------------------------- caret del selector de idioma -- */
/*
 * custom.css dibuja el caret con la fuente de iconos dripicons-v2 y content:'T'
 * (en esa fuente la T es un chevron). La fuente se sirve desde S3 SIN cabeceras
 * CORS y la web va en otro dominio, así que el navegador la rechaza y se ve la
 * letra literal. Se dibuja con bordes: sin fuentes, sin peticiones y sin CORS.
 *
 * El color sale de currentColor para que el :hover de custom.css siga valiendo,
 * y la rotación al abrir se mantiene.
 */
.dropdown-lang .dropdown-toggle:after {
	content: '';
	display: inline-block !important;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	border-bottom: 0;
	margin: 0 0 0 10px;
	vertical-align: middle;
	line-height: normal;
	transition: transform .3s ease-in-out;
}

.dropdown-lang.show .dropdown-toggle:after {
	transform: rotate(180deg);
}

/* ------------------------------------------- tarjeta de suscripción -- */
/*
 * La misma tarjeta se pinta en dos sitios con CSS distinto: aquí (.panel-suscripcion
 * dentro del slider) y en /subscribe (.landing .subscriptions, en web.css). El ancho
 * se mantiene igual en los dos: si se cambia, cambiar también --card-width en web.css.
 */
:root {
	--card-width: 420px;
}

.panel-suscripcion {
	width: 100%;
	max-width: var(--card-width);
	margin-left: auto;
	margin-right: auto;
}

/*
 * El carrusel muestra dos tarjetas (landing.js). Sin acotarlo, en pantallas muy
 * anchas cada hueco se estira y las tarjetas quedan perdidas con medio metro de
 * separación: se limita al ancho de dos tarjetas más su aire y se centra.
 */
.slider-contenidos {
	max-width: calc(var(--card-width) * 2 + 120px);
	margin-left: auto;
	margin-right: auto;
}

/*
 * En móvil ocupa todo el ancho disponible. El aire lateral lo da el padding del
 * .slider-item y el del contenedor: la tarjeta nunca toca el borde de la pantalla.
 */
@media all and (max-width: 630px) {
	.panel-suscripcion {
		max-width: 100%;
	}
}

/*
 * Cabeceras de página (fotos nuevas 2026): el custom.css del CDN las ancla con
 * background-position top center y el recorte del cover se come la parte baja,
 * donde está la acción. Centrada en vertical se ve el motivo de la foto.
 */
.slide-home {
	background-position: center center;
}