/* Página de Contacto - layout de 2 columnas (card oscura con el
   formulario + sidebar clara con redes/datos de contacto), copiando
   la paleta real de ref_residencial (post-7.css, kit de Elementor):
   --e-global-color-primary #FA0000, secondary #AD0000, text #202020,
   accent #000000, b581dcf #FFFFFF. Mismos colores, mismo layout
   (65%/35%, radius 10px, padding 40px); el marcado es HTML plano
   propio (no hay Elementor en este sitio) y los íconos SVG inline son
   los mismos que ya usa el footer del plugin Prefooter. */

.fp-contact-wrap {
	display: flex;
	gap: 20px;
	align-items: stretch;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.fp-contact-form-card {
	flex: 0 0 65%;
	background: #202020;
	border-radius: 10px;
	padding: 40px;
}

.fp-contact-side-card {
	flex: 1;
	background: #f5f5f5;
	border-radius: 10px;
	padding: 40px;
}

.fp-contact-logo {
	width: 180px;
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 20px;
}

.fp-contact-form-title {
	color: #ffffff;
	margin: 0 0 12px;
}

.fp-contact-form-text {
	color: #ffffff;
	margin: 0 0 24px;
}

/* ── Formulario (Contact Form 7) ── */
.fp-contact-form-card .fp-form-row {
	margin-bottom: 14px;
}

/* CF7 envuelve el contenido del formulario en <p> automáticamente
   (wpautop) - el <p> dentro de cada fila de 2 columnas es el que
   necesita ser flex, no el div contenedor. El <br> que CF7 mete entre
   los dos campos no afecta el layout (queda como ítem flex vacío). */
.fp-contact-form-card .fp-form-row-2 p {
	display: flex;
	gap: 14px;
	margin: 0;
}

.fp-contact-form-card .fp-form-row-2 > p > span.wpcf7-form-control-wrap {
	flex: 1;
}

.fp-contact-form-card .fp-form-row p {
	margin: 0;
}

.fp-contact-form-card .wpcf7-form-control-wrap {
	display: block;
}

.fp-contact-form-card input[type="text"],
.fp-contact-form-card input[type="tel"],
.fp-contact-form-card input[type="email"],
.fp-contact-form-card select,
.fp-contact-form-card textarea {
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.4;
}

.fp-contact-form-card textarea {
	min-height: 90px;
	resize: vertical;
}

/* select propio: Blocksy pone su ícono de flecha nativo a TODOS los
   <select> del sitio (regla global "select{...}" en main.min.css) -
   sin !important acá, esa regla del tema puede terminar ganando el
   background-image (y con eso, el padding-inline-end que reserva el
   espacio para su propia flecha) según el orden real de carga, dejando
   dos flechas superpuestas y el texto pisado/cortado. También se fija
   min-height explícito porque appearance:none en Chrome/Edge no
   siempre reserva solo con line-height el alto real de una sola línea. */
.fp-contact-form-card select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-height: 48px;
	padding-inline-end: 40px !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 18px !important;
}

.fp-contact-form-card select option {
	background: #202020;
	color: #ffffff;
}

.fp-contact-form-card ::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.fp-contact-form-card input.wpcf7-not-valid,
.fp-contact-form-card textarea.wpcf7-not-valid {
	border-color: #fa0000;
}

.fp-contact-form-card .wpcf7-submit {
	width: 100%;
	background: #ad0000;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 16px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease;
}

.fp-contact-form-card .wpcf7-submit:hover {
	background: #8f0000;
}

.fp-contact-form-card .wpcf7-response-output {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.3) !important;
	border-radius: 10px;
	margin: 14px 0 0;
}

/* ── Sidebar (redes / datos de contacto / visítanos) ── */
.fp-contact-side-title {
	color: #202020;
	margin: 0 0 16px;
}

.fp-contact-side-card h3.fp-contact-side-title:not(:first-child) {
	margin-top: 32px;
}

a.fp-contact-row,
div.fp-contact-row {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 12px;
	text-decoration: none;
	color: inherit;
}

.fp-contact-icon {
	flex: 0 0 auto;
	width: 41px;
	height: 41px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #202020;
	color: #ffffff;
	border-radius: 10px;
	padding: 10px;
}

.fp-contact-icon svg {
	width: 100%;
	height: 100%;
}

.fp-contact-text {
	display: flex;
	flex-direction: column;
}

.fp-contact-label {
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #000000;
}

.fp-contact-value {
	font-size: 14px;
	color: #202020;
}

a.fp-contact-row:hover .fp-contact-label {
	text-decoration: underline;
}

/* ── Mapa a todo el ancho de la ventana ──
   No dependemos de la clase "alignfull" del tema (su implementación
   usa una variable CSS --has-wide cuyo valor final no se pudo
   verificar sin inspeccionar en el navegador) - en su lugar, el
   truco clásico y determinista: 100vw + márgenes negativos para que
   rompa el contenedor centrado sin importar el ancho máximo del
   tema. overflow-x:hidden en <body> evita el scroll horizontal que
   causaría el 100vw si hay scrollbar vertical visible. */
.fp-contact-map-full {
	margin-top: 30px;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

body {
	overflow-x: hidden;
}

.fp-contact-map-full iframe {
	width: 100%;
	height: 450px;
	display: block;
}

@media (max-width: 900px) {
	.fp-contact-wrap {
		flex-direction: column;
	}

	.fp-contact-form-card,
	.fp-contact-side-card {
		flex: 1 1 auto;
	}

	.fp-contact-form-card .fp-form-row-2 {
		flex-direction: column;
	}
}