/* ========================================
   CTA BANNER
   Banda de fondo negro a ancho completo (#middle ocupa el 100%)
   con titulo, texto y boton centrados dentro del .container
   ======================================== */

.cta-banner {
	display: block;
	width: 100%;
	/* Mismo espaciado superior que el resto de bloques (144px).
	   Va como margin y no como padding para que la banda negra no crezca:
	   en los demas bloques el padding-top queda sobre fondo transparente. */
	margin-top: 144px;
	padding: 96px 0;
	background-color: #000;
	text-align: center;
}

.cta-banner .container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Titulo. Mismas medidas que .media-press-split__title en todos los breakpoints */
.cta-banner__title {
	display: block;
	margin: 0 0 32px 0;
	font-family: 'Plaax 6 Ney Heavy';
	font-size: 40px;
	line-height: 1.2em;
	font-weight: 700;
	color: #ffffff;
	text-transform: uppercase;
	text-align: center;
}

/* Descripcion */
.cta-banner__description {
	margin: 0 0 48px 0;
	max-width: 700px;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}

.cta-banner__description p {
	margin: 0 0 16px 0;
	color: inherit;
}

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

/* Boton solido blanco, mismo estilo que media-press-split */
.cta-banner__button {
	display: inline-flex;
	margin: 0 auto;
	padding: 14px 40px;
	font-size: 16px;
	background-color: #ffffff;
	color: #000000;
	border: none;
	cursor: pointer;
	text-decoration: none;
}

/* ========================================
   RESPONSIVE
   Mismos breakpoints que media-press-split: 992px / 768px / 480px
   ======================================== */

@media (max-width: 992px) {

	.cta-banner {
		padding: 64px 0;
	}

	.cta-banner__title {
		margin-bottom: 24px;
		font-size: 40px;
		line-height: 1.3em;
	}

	.cta-banner__description {
		margin-bottom: 40px;
		font-size: 15px;
		line-height: 1.5;
	}
}

@media (max-width: 768px) {

	.cta-banner__title {
		margin-bottom: 20px;
		font-size: 32px;
		line-height: 1.3em;
	}

	.cta-banner__description {
		margin-bottom: 35px;
		font-size: 14px;
	}
}

@media (max-width: 480px) {

	.cta-banner {
		padding: 48px 0;
	}

	.cta-banner__title {
		margin-bottom: 18px;
		font-size: 26px;
		line-height: 1.2em;
	}

	.cta-banner__description {
		margin-bottom: 30px;
		font-size: 13px;
		line-height: 1.5;
	}
}