/* ===================================================================
   NEWSLETTER LANDING PAGE - ESTILOS ESPECÍFICOS
   ===================================================================
   Archivo: newsletter-landing.css
   Propósito: Estilos exclusivos para el formulario de newsletter en la
              landing page (formato vertical y centrado)
   IMPORTANTE: Todos los selectores usan prefijo "body.newsletter" para
              evitar afectar home u otras páginas
   NOMENCLATURA: BEM con prefijo "newsletter-form"
   ================================================================ */

/* ===================================================================
   1. FORMULARIO DE NEWSLETTER - FORMATO VERTICAL Y CENTRADO
   ================================================================ */

/* Contenedor de título y subtítulo - centrado */
body.newsletter #newsletterSec .newsletter-form__header {
	text-align: center;
}

/* Filas del formulario - layout vertical */
body.newsletter #newsletterSec {
	padding-bottom: 8px;
}
body.newsletter #newsletterSec .row.wow {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* Grupos de formulario - ancho completo y centrado */
body.newsletter #newsletterSec .form-group {
	margin: 0 0 20px 0;
	width: 100%;
	max-width: 650px;
}

/* Campos de entrada - ancho completo */
body.newsletter #newsletterSec .form-group .form-control {
	width: 100%;
}

/* Checkbox GDPR */
body.newsletter #newsletterSec .form-group .form-check {
	margin-top: 30px;
	margin-bottom: 30px;
}

/* Contenedor del botón */
body.newsletter #newsletterSec .form-group .button_su {
	display: inline-flex;
	margin-top: 20px;
}

/* ===================================================================
   2. RESPONSIVE - TABLET/MOBILE (< 992px)
   ================================================================ */

@media (max-width: 992px) {
	body.newsletter #newsletterSec .form-group {
		max-width: 100%;
	}

	body.newsletter #newsletterSec .form-group .form-check {
		margin-top: 25px;
		margin-bottom: 25px;
	}
}

/* ===================================================================
   3. RESPONSIVE - DESKTOP SMALL (992px - 1920px)
   ================================================================ */

@media (min-width: 992px) and (max-width: 1920px) {
	body.newsletter #newsletterSec .form-group {
		max-width: 650px;
	}
}

/* ===================================================================
   4. RESPONSIVE - DESKTOP LARGE (> 1920px)
   ================================================================ */

@media (min-width: 1921px) {
	body.newsletter #newsletterSec .form-group {
		max-width: 700px;
		margin-bottom: 25px;
	}
}

/* ===================================================================
   FIN DEL ARCHIVO
   ================================================================ */