/* ============================================================
   Ávalos y Asociados — Página CONTACTO (Figma node 1-3)
   CSS mínimo scoped a .avalos-contact — solo lo que el widget
   Form de Elementor y el Image widget no cubren nativamente.
   ============================================================ */

/* El tema añade margen a los <p>: neutralizar dentro de la página
   (los espaciados los controlan los widgets/containers de Elementor) */
.avalos-contact .elementor-widget-text-editor p {
	margin: 0;
}

/* Iconos de contacto: tamaño natural lógico (PNG @2x).
   _css_classes cae en el wrapper del widget → apuntar al img interno. */
.avalos-contact .ct-ico {
	margin-top: 4px;
}
.avalos-contact .ct-ico img {
	height: auto;
}
.avalos-contact .ct-ico-1 img { width: 16px; }
.avalos-contact .ct-ico-2 img { width: 18px; }
.avalos-contact .ct-ico-3 img { width: 20px; }
.avalos-contact .ct-ico-4 img { width: 20px; }

/* Iconos sociales: caja 40x40 (PNG @2x con borde incluido) */
.avalos-contact .ct-social img {
	width: 40px;
	height: auto;
}

/* Altura y padding de inputs (48px, padding 18px según Figma) */
.avalos-contact .elementor-field-group .elementor-field {
	height: 48px;
	padding: 0 18px;
}

/* Textarea: 145px de alto, padding 14/18 (mayor especificidad) */
.avalos-contact .elementor-field-group textarea.elementor-field {
	height: 145px;
	padding: 14px 18px;
}

/* Placeholder #6B7280 (gris Figma) */
.avalos-contact .elementor-field::placeholder {
	color: #6B7280;
	opacity: 1;
}

/* El diseño no muestra asteriscos de obligatorio */
.avalos-contact .elementor-field-required .elementor-field-label:after {
	display: none;
}

/* Separación textarea → botón (40px según Figma; row_gap aporta 24) */
.avalos-contact .e-form__buttons {
	margin-top: 16px;
}

/* Botón: 48px de alto, padding horizontal 32px */
.avalos-contact .elementor-button[type="submit"] {
	height: 48px;
	padding: 0 32px;
}

/* Hover del botón: dorado oscuro (no existe control nativo para hover bg) */
.avalos-contact .elementor-button[type="submit"]:hover {
	background-color: #B0872A;
}

/* Caret del select: chevron fino como en Figma (reemplaza el caret sólido) */
.avalos-contact .elementor-select-wrapper select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.avalos-contact .select-caret-down-wrapper i {
	display: none;
}
.avalos-contact .select-caret-down-wrapper:after {
	content: "";
	display: block;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid #6B7280;
	border-bottom: 1.5px solid #6B7280;
	transform: rotate(45deg);
	margin: 0 12px 2px 0;
}

/* ============================================================
   RESPONSIVE OVERRIDES — Tablet (≤1024px)
   ============================================================ */

@media (max-width: 1024px) {

	/* Subtitle: 640px custom width → full width on tablet */
	.elementor-386 .elementor-element.elementor-element-wsub0001 {
		width: 100% !important;
	}

	/* Header margin-bottom: 56px → 40px on tablet */
	.elementor-386 .elementor-element.elementor-element-cthead01 {
		--margin-bottom: 40px;
		margin-bottom: 40px;
	}

	/* Columns container gap when stacked */
	.elementor-386 .elementor-element.elementor-element-ctcols01 {
		--gap: 0 20px;
		gap: 0 20px;
	}

	/* Sidebar row gap: 42px → 32px on tablet */
	.elementor-386 .elementor-element.elementor-element-ctleft01 {
		--gap: 0 32px;
		gap: 0 32px;
	}

	/* Contact text containers: 224px fixed → auto on tablet */
	.elementor-386 .elementor-element.elementor-element-ctxt001,
	.elementor-386 .elementor-element.elementor-element-ctxt002,
	.elementor-386 .elementor-element.elementor-element-ctxt003,
	.elementor-386 .elementor-element.elementor-element-ctxt004 {
		width: auto !important;
	}

	/* Info/social card padding on tablet */
	.elementor-386 .elementor-element.elementor-element-ctinf001,
	.elementor-386 .elementor-element.elementor-element-ctred001 {
		padding: 28px;
	}
}

/* ============================================================
   RESPONSIVE OVERRIDES — Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {

	/* Header margin-bottom → 32px on mobile */
	.elementor-386 .elementor-element.elementor-element-cthead01 {
		--margin-bottom: 32px;
		margin-bottom: 32px;
	}

	/* Columns container gap → tighter on mobile */
	.elementor-386 .elementor-element.elementor-element-ctcols01 {
		--gap: 0 16px;
		gap: 0 16px;
	}

	/* Sidebar row gap: 42px → 24px on mobile */
	.elementor-386 .elementor-element.elementor-element-ctleft01 {
		--gap: 0 24px;
		gap: 0 24px;
	}

	/* Contact text containers → full width on mobile */
	.elementor-386 .elementor-element.elementor-element-ctxt001,
	.elementor-386 .elementor-element.elementor-element-ctxt002,
	.elementor-386 .elementor-element.elementor-element-ctxt003,
	.elementor-386 .elementor-element.elementor-element-ctxt004 {
		width: auto !important;
	}

	/* Contact items icon-text gap → 12px on mobile */
	.elementor-386 .elementor-element.elementor-element-citm001,
	.elementor-386 .elementor-element.elementor-element-citm002,
	.elementor-386 .elementor-element.elementor-element-citm003,
	.elementor-386 .elementor-element.elementor-element-citm004 {
		--gap: 0 12px;
		gap: 0 12px;
	}

	/* Info/social card padding on mobile */
	.elementor-386 .elementor-element.elementor-element-ctinf001,
	.elementor-386 .elementor-element.elementor-element-ctred001 {
		padding: 20px;
	}

	/* Form row_gap: 24px → 16px on mobile */
	.elementor-386 .elementor-element.elementor-element-wform001 .elementor-form-fields-wrapper {
		--form-row-gap: 16px;
		row-gap: 16px;
		--form-column-gap: 16px;
		column-gap: 16px;
	}

	/* Banner image: object-fit cover for mobile */
	.elementor-386 .elementor-element.elementor-element-wband001 img {
		width: 100%;
		height: auto;
		max-height: 300px;
		object-fit: cover;
	}
}

/* ============================================================
   EXISTING STYLES — Form fields (unchanged)
   ============================================================ */

/* Responsive mobile: campos apilados */
@media (max-width: 767px) {
	.avalos-contact .elementor-field-group .elementor-field {
		height: 46px;
	}
	.avalos-contact .elementor-field-group textarea.elementor-field {
		height: 120px;
	}
	.avalos-contact .elementor-button[type="submit"] {
		width: 100%;
	}
}