/* Página contacto */

/* El bundle CSS del formulario (Claude Design) trae su propia regla
   body{background:var(--surface-page)} que pisaría el fondo oscuro del
   sitio (se carga despues via helmet dinamico) — forzamos que gane el
   fondo real de la web. Ver notas-clonado.md — "Formulario de presupuesto". */
body {
	background-color: var(--color-gray-bg) !important;
	background-image: url("../assets/ruido-fondo-web.png") !important;
	background-repeat: repeat !important;
}

/* El kit real de Elementor (css/vendor/kit-572.css) pone
   text-transform:uppercase a cualquier <h2> suelto del sitio — afecta
   tambien a los titulos de tarjeta del formulario de presupuesto, que no
   estaban pensados para ir en mayusculas. Se anula solo ahi. */
.contact-hero h2 {
	text-transform: none !important;
}

/* El design system del formulario (_ds/.../tokens/base.css) pone
   a{border-bottom:1px solid naranja} como "subrayado" por defecto de
   cualquier enlace — solo se carga en esta pagina (para los enlaces del
   propio formulario, p.ej. "politica de privacidad"), pero al ser un
   selector `a` a pelo se cuela tambien en el menu y el pie del sitio
   (que son el mismo header/footer reales de las demas paginas, donde
   ese CSS no existe y por tanto no salen subrayados). Se anula fuera
   del formulario para que el menu y el pie salgan siempre igual. */
header a,
footer a {
	border-bottom: none !important;
}

@media (max-width: 600px) {
	.contact-form-title {
		font-size: 2.4rem !important;
	}
}

.contact-hero {
	padding: 20px 0 0;
}

.contact-hero h1 {
	color: var(--color-cream);
	font-size: 44px;
	margin-bottom: 32px;
}

.contact-form {
	display: grid;
	gap: 16px;
	max-width: 560px;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 14px 16px;
	border-radius: var(--radius-btn);
	border: 1px solid var(--color-cream);
	background: transparent;
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: 16px;
}

.contact-form textarea {
	min-height: 140px;
	resize: vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(242, 238, 227, 0.6);
}

.contact-form button {
	justify-self: start;
}

.contact-alt {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid rgba(242, 238, 227, 0.15);
}

.contact-alt h2 {
	color: var(--color-cream);
	font-size: 32px;
}

.contact-alt__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 24px;
}

.contact-alt__item p {
	color: var(--color-cream);
	opacity: 0.85;
	margin-bottom: 8px;
}

.contact-alt__item a.contact-link {
	color: var(--color-orange);
	font-weight: 600;
	font-size: 18px;
}

@media (max-width: 700px) {
	.contact-hero h1 {
		font-size: 32px;
	}
	.contact-alt__grid {
		grid-template-columns: 1fr;
	}
}