/****************************************************/
/* LANDINGS */
/****************************************************/

@scope (.post-template-landing-tipo-1, .page-template-page-landing, .post-template-template-libre, .page-template-template-libre) {

	#main .form-content{}

	#main .form-content .gfield input[type="text"],#main .form-content .gfield input[type="email"], #main .form-content .gfield select, #main .form-content textarea, 		#main .form-content .gfield textarea.large{
		padding-inline: 1rem;
		background-color: transparent;
		padding-block: 0;
		font-size: 1rem;
	}

	@media (min-width: 992px){

		.landing-section{
			aspect-ratio: 2;
			width: 100%;
			min-height: 500px;
		}
		#main .form-content:not(.thecontent) {
			background: rgba(0, 0, 0, 0.2);
			background: rgb(255 255 255 / 60%);
			padding: 2rem 2rem 1rem;
			margin: auto;
		}
	}
	#main .container{
		max-width: calc(var(--grid-limit) - 3rem);
	}

	/* Dark form style */
	#main .form-content.form-dark{
		background: rgba(0, 0, 0, 0.75);
		color: #ffffff;
	}
	#main .form-content.form-dark .gfield_label{
		color: #ffffff;
	}
	#main .form-content.form-dark .gfield input[type="text"],
	#main .form-content.form-dark .gfield input[type="email"],
	#main .form-content.form-dark .gfield select,
	#main .form-content.form-dark textarea,
	#main .form-content.form-dark .gfield textarea.large{
		background-color: transparent;
		color: #ffffff;
		border-bottom-color: rgba(255, 255, 255, 0.5);
	}
	#main .form-content.form-dark ::placeholder{
		color: rgba(255, 255, 255, 0.6);
	}
	#main .form-content.form-dark .gfield_consent_label{
		color: #ffffff;
	}
	#main .form-content.form-dark .gfield_consent_label:before{
		border-color: rgba(255, 255, 255, 0.6);
	}
	#main .form-content.form-dark .gfield_description{
		background: rgba(255, 255, 255, 0.15);
		color: #ffffff;
	}
	#main .form-content.form-dark .legal-link a{
		color: rgba(255, 255, 255, 0.8);
	}
	#main .form-content.form-dark label a{
		color: #ffffff;
	}
	#main .form-content.form-dark [aria-invalid=true]+label a{
		color: #ff8a80;
	}

	/* Sticky form layout */
	.landing-form-sticky {
		padding-inline: var(--px);
	}

	@media (min-width: 992px) {
		#main.landing-has-sticky-form {
			display: grid;
			grid-template-columns: minmax(0, 1fr) clamp(22rem, 32%, 30rem);
			align-items: start;
		}
		#main.landing-has-sticky-form .landing-section {
			grid-column: 1 / -1;
			grid-row: 1;
		}
		#main.landing-has-sticky-form .landing-blocks {
			grid-column: 1;
			grid-row: 2;
			min-width: 0;
		}
		#main.landing-has-sticky-form .landing-form-sticky {
			grid-column: 2;
			grid-row: 1 / span 2;
			position: sticky;
			top: calc(var(--header-height) + 1rem);
			align-self: start;
			padding: 2rem var(--px) 2rem 0;
			z-index: 2;
		}
		#main.landing-has-sticky-form .landing-form-sticky .form-content {
			max-width: 500px;
			margin: 0 0 0 auto;
		}
	}

	/* CTA fijo móvil */
	.landing-mobile-cta {
		position: fixed;
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		z-index: 50;
		background-color: var(--color-primary);
		color: var(--text-secondary, #ffffff);
		text-align: center;
		padding: 1rem 1.4rem;
		border-radius: 2rem;
		font-weight: 500;
		font-size: 1rem;
		text-decoration: none;
		box-shadow: 0 0.4rem 1.4rem rgba(0, 0, 0, 0.18);
		transition: transform .25s ease, opacity .25s ease;
	}
	.landing-mobile-cta:hover,
	.landing-mobile-cta:focus {
		transform: translateY(-0.15rem);
		color: var(--text-secondary, #ffffff);
		text-decoration: none;
	}
	@media (min-width: 992px) {
		.landing-mobile-cta { display: none; }
	}

	/* Grid de vehículos cuando sticky está activo: 4 cols solo a partir de 1900px (en lugar de 1400px) */
	@media (min-width: 1400px) {
		#main.landing-has-sticky-form #vehicles > * {
			width: calc(33.3333% - 1.5rem);
		}
	}
	@media (min-width: 1900px) {
		#main.landing-has-sticky-form #vehicles > * {
			width: calc(25% - 1.5rem);
		}
	}

	/* En modo sticky, entre 992 y 1400px la columna de contenido es estrecha:
	   vehículos y propuestas de valor pasan a 2 por fila. */
	@media (min-width: 992px) and (max-width: 1399.98px) {
		#main.landing-has-sticky-form #vehicles > * {
			width: calc(50% - 1.5rem);
		}
		#main.landing-has-sticky-form .features-list > * {
			width: calc(50% - 1rem);
		}
		#main.landing-has-sticky-form .features-list.type2 > * {
			width: calc(50% - 1.5rem);
		}
	}

	/* FAQ en modo sticky: una sola columna hasta 1900px */
	@media (min-width: 992px) and (max-width: 1899.98px) {
		#main.landing-has-sticky-form .faq-block .col-lg-5,
		#main.landing-has-sticky-form .faq-block .col-lg-7 {
			flex: 0 0 100%;
			max-width: 100%;
		}
		#main.landing-has-sticky-form .faq-block .sticky-lg {
			position: static;
		}
		/* Al apilarse en una columna, la cabecera de FAQ (título + descripción) se centra. */
		#main.landing-has-sticky-form .faq-block .col-lg-5 {
			text-align: center;
		}
		/* Las preguntas (triggers del acordeón) también se centran; el padding
		   derecho equilibra el hueco del icono +/- que va a la izquierda. */
		#main.landing-has-sticky-form .faq-block .trigger.plus-trigger {
			text-align: center;
			padding-right: 2.4rem;
		}
	}
}