/* ════════════════════════════════════════════════════
   PÁGINA DE CONTACTO
   Estilo del formulario (Contact Form 7, bloque nativo) + las filas
   de datos de contacto/redes sociales que van debajo, ambas armadas
   con bloques nativos de Gutenberg (Group + Social Icons) - ver el
   post_content de la página Contacto (ID 38).
════════════════════════════════════════════════════ */

/* ── Formulario ──
   .wp-block-contact-form-7-contact-form-selector es la clase que el
   bloque nativo de CF7 ya genera en el HTML real (no hace falta
   agregar ninguna clase a mano) - va dentro de la columna con fondo
   oscuro (has-palette-color-4-background-color), así que el
   formulario hereda ese fondo y solo hace falta estilar los campos. */
.wp-block-contact-form-7-contact-form-selector .fp-form-row {
	margin-bottom: 16px;
}

/* CF7 envuelve cada campo en un <p> (wpautop) - el <p> de la fila de
   2 columnas es el que necesita ser flex, no el div contenedor. */
.wp-block-contact-form-7-contact-form-selector .fp-form-row-2 p {
	display: flex;
	gap: 14px;
	margin: 0;
}

.wp-block-contact-form-7-contact-form-selector .fp-form-row-2 > p > span.wpcf7-form-control-wrap {
	flex: 1;
}

.wp-block-contact-form-7-contact-form-selector .fp-form-row p {
	margin: 0;
}

.wp-block-contact-form-7-contact-form-selector input[type="text"],
.wp-block-contact-form-7-contact-form-selector input[type="tel"],
.wp-block-contact-form-7-contact-form-selector input[type="email"],
.wp-block-contact-form-7-contact-form-selector textarea {
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	padding: 13px 16px;
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .15s ease;
}

.wp-block-contact-form-7-contact-form-selector textarea {
	min-height: 110px;
	resize: vertical;
}

.wp-block-contact-form-7-contact-form-selector input:focus,
.wp-block-contact-form-7-contact-form-selector textarea:focus {
	border-color: var(--theme-palette-color-1, #FA0000);
	outline: none;
}

.wp-block-contact-form-7-contact-form-selector ::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.wp-block-contact-form-7-contact-form-selector input.wpcf7-not-valid,
.wp-block-contact-form-7-contact-form-selector textarea.wpcf7-not-valid {
	border-color: var(--theme-palette-color-1, #FA0000);
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-submit {
	width: 100%;
	background: var(--theme-palette-color-1, #FA0000);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 16px;
	font-family: 'Fjalla One', sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .15s ease;
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-submit:hover {
	opacity: .85;
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-spinner {
	display: none; /* CF7 ya centra el spinner al lado del botón por defecto - queda bien sin tocarlo, se deja explícito por si el tema lo oculta con display:none global */
}

.wp-block-contact-form-7-contact-form-selector .wpcf7-response-output {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.3) !important;
	border-radius: 8px;
	margin: 16px 0 0;
}

@media (max-width: 600px) {
	.wp-block-contact-form-7-contact-form-selector .fp-form-row-2 p {
		flex-direction: column;
	}
}

/* ── Datos de contacto en horizontal (bloque Group nativo,
   .fp-contact-info es una clase adicional agregada al bloque desde el
   panel Avanzado del editor, no HTML escrito a mano) ── */
/* display:flex explícito (no solo el soporte de layout de Gutenberg) -
   así se ve en horizontal sin depender de que WordPress regenere las
   clases/CSS de layout exactamente igual que si se hubiera armado a
   mano en el editor visual (este bloque se insertó por script). */
.fp-contact-info {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 40px !important;
	margin: 50px 0 !important;
	text-align: center;
}

.fp-contact-info .fp-contact-item {
	min-width: 200px;
}

.fp-contact-info .fp-contact-item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.fp-contact-info .fp-contact-item strong {
	display: block;
	margin-bottom: 4px;
	font-family: 'Fjalla One', sans-serif;
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1, #FA0000);
}

/* ── Redes sociales en horizontal (bloque Social Icons nativo) ── */
.fp-contact-socials {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	list-style: none !important;
	margin: 0 0 50px !important;
	padding: 0 !important;
	gap: 12px;
}

.fp-contact-socials .wp-social-link a {
	background: #1a1a1a;
	color: #ffffff;
}

.fp-contact-socials .wp-social-link:hover a {
	background: var(--theme-palette-color-1, #FA0000);
}

@media (max-width: 600px) {
	.fp-contact-info {
		gap: 24px !important;
	}
}