/* ------------------------------------------------------------------ *
 * Portada de la home (diapositiva "Agentes de IA de IMADEXA").
 * La imagen se muestra COMPLETA y lleva encima tres botones invisibles
 * (logo + los dos "Ingresar"). Ver includes/class-home.php.
 * ------------------------------------------------------------------ */

:root{
	--iia-cover-max: 1400px;   /* ancho máximo de la portada */
	--iia-cover-gap: 64px;     /* aire inferior para que la onda no tape la imagen */
	--iia-cover-orange: #ec6a1c;
}

/* La diapositiva deja de usar la imagen de fondo recortada. */
.et_pb_slide.iia-cover-slide{
	background-image: none !important;
	background-color: #05070c !important;
}

/* Anulamos el relleno que Divi da a la descripción de la diapositiva: la
   portada es la imagen, no un bloque de texto. */
.iia-cover-slide .et_pb_slide_description,
.et_pb_slider_fullwidth_off .iia-cover-slide .et_pb_slide_description{
	padding: 0 !important;
	width: 100% !important;
	float: none !important;
	text-align: center;
	animation: none !important;
}

/* El botón de Divi ("Ingresar al portal") ya no hace falta: la imagen tiene
   sus propios botones. */
.iia-cover-slide .et_pb_button_wrapper{ display: none !important; }

/* El aire inferior (para que la onda del divisor no tape la imagen) va en el
   contenedor exterior: si fuera padding de .iia-cover desplazaría los botones,
   que se posicionan en % de la caja de la imagen; y si fuera margin, Divi no lo
   contaría al calcular el alto del carrusel y recortaría la portada. */
.iia-cover-wrap{
	padding-bottom: var(--iia-cover-gap);
}

.iia-cover{
	position: relative;
	display: block;
	width: 100%;
	max-width: var(--iia-cover-max);
	margin: 0 auto;
	line-height: 0;
}

.iia-cover img{
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

/* Botón invisible sobre la imagen. */
.iia-cover .iia-hot{
	position: absolute;
	display: block;
	border-radius: 100px;
	background-color: transparent;
	box-shadow: none;
	transition: background-color .15s ease, box-shadow .15s ease;
	/* El texto solo existe para lectores de pantalla. */
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}
.iia-cover .iia-hot:hover,
.iia-cover .iia-hot:focus-visible{
	background-color: rgba(236, 106, 28, .16);
	box-shadow: 0 0 0 2px var(--iia-cover-orange);
	outline: none;
}
.iia-cover .iia-hot--logo{ border-radius: 14px; }

/* Botones reales bajo la imagen: solo en móvil (ver home.js). En escritorio la
   portada se pulsa directamente sobre la imagen. */
.iia-cover-actions{ display: none; }

@media (max-width: 980px){
	:root{ --iia-cover-gap: 80px; }
}

@media (max-width: 767px){
	/* Espacio suficiente para que la onda blanca del divisor no pise los botones. */
	:root{ --iia-cover-gap: 110px; }

	.iia-cover-actions{
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 14px 16px 0;
		max-width: 420px;
		margin: 0 auto;
	}
	.iia-cover-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 46px;
		padding: 0 18px;
		border: 2px solid var(--iia-cover-orange);
		border-radius: 100px;
		color: #fff !important;
		font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none !important;
		background-color: rgba(236, 106, 28, .12);
	}
	.iia-cover-btn:hover,
	.iia-cover-btn:focus{
		background-color: var(--iia-cover-orange);
		color: #fff !important;
	}
}