/* =========================================================================
 * Página de Contacto (/contacto/).
 * Solo estilos del formulario de Contact Form 7, que es el único bloque que
 * no se puede resolver desde los controles de Elementor (lo renderiza el
 * shortcode). El resto del layout — anchos, columnas, tipografías y colores —
 * sale de los widgets nativos y de los globales del kit, que ya apuntan a los
 * tokens del sitio.
 * ====================================================================== */

/* El shortcode se renderiza dentro de un widget que se ajusta al contenido:
   sin esto el formulario queda más angosto que su columna. */
.wpcf7,
.wpcf7 form {
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Grilla de campos.
 * CF7 aplica wpautop, así que envuelve cada campo en su propio `<p>`:
 *   form > fieldset.hidden-fields-container
 *        > p (Nombre) > p (Email) > p (Asunto) > p (Mensaje) > p (botón)
 *        > div.wpcf7-response-output
 * Los `<p>` son los hijos de la grilla, por eso el layout se resuelve por CSS
 * y no hace falta tocar la plantilla del formulario.
 * ---------------------------------------------------------------------- */
.wpcf7 form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.wpcf7 form > p {
	margin: 0;
}
/* Nombre (1) y Email (2) quedan uno en cada columna por orden natural.
   El resto ocupa la fila completa. El `fieldset` de campos ocultos y el
   contenedor de mensajes de CF7 también, o si no consumen una celda suelta. */
.wpcf7 form > fieldset.hidden-fields-container,
.wpcf7 form > p:nth-of-type(3),
.wpcf7 form > p:nth-of-type(4),
.wpcf7 form > p:nth-of-type(5),
.wpcf7 form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

/* Móvil: una sola columna. */
@media (max-width: 767px) {
	.wpcf7 form {
		grid-template-columns: 1fr;
	}
}

/* La etiqueta va arriba del campo (el `<br>` que mete CF7 hace el salto). */
.wpcf7 .cosmetica-form__row {
	display: block;
	font-family: var(--fuente-texto);
	color: var(--color-primario);
}

/* Inputs: borde 1px primario, radius 8px, tipografía de texto del sitio. */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 14px 16px;
	background: var(--color-fondo-1);
	border: 1px solid var(--color-primario);
	border-radius: 8px;
	font-family: var(--fuente-texto);
	font-size: 16px;
	color: var(--color-primario);
}
.wpcf7 textarea {
	min-height: 160px;
	resize: vertical;
}

/* El botón es un `<button class="cosmetica-btn">` en la plantilla de CF7, así
   que toma el estilo global del sitio entero — pastilla, borde, tipografía,
   círculo con la flecha y hover — sin una sola declaración propia acá. Se deja
   `width: max-content` para que la celda de la grilla (que ocupa la fila
   completa) no lo estire a todo el ancho. */
/* `align-items:center` para que el spinner de CF7 (agregado a mano al lado del
   botón, porque `[submit]` ya no lo pone) quede alineado con el botón. El
   spinner usa `visibility:hidden` — no `display:none` — así que reserva su
   lugar siempre; es el comportamiento normal de CF7. */
.wpcf7 form > p:nth-of-type(5) {
	display: flex;
	align-items: center;
}
.wpcf7 button.cosmetica-btn {
	width: max-content;
}

/* Hover: neutraliza la capa de reset.css de hello, no crea estilo nuevo.
   Al ser `type="submit"` el botón matchea `[type="submit"]:hover` de reset.css
   (fondo #cc3366 + texto blanco), que es (0,2,0) — EMPATE con el
   `.cosmetica-btn:hover` global, también (0,2,0). Hoy gana el global solo
   porque style.css carga después que reset.css; con que algo reordene o
   concatene el CSS, el botón pasaría a rosa chillón con texto blanco en hover.
   Se repiten los MISMOS valores del global a (0,3,1) para que gane por
   especificidad y deje de depender del orden. Mismo criterio que el fix del
   color del botón de Elementor. */
.wpcf7 button.cosmetica-btn:hover,
.wpcf7 button.cosmetica-btn:focus {
	background: var(--color-secundario);
	color: var(--color-primario);
}
.wpcf7 button.cosmetica-btn:hover::after,
.wpcf7 button.cosmetica-btn:focus::after {
	background: var(--color-primario);
}
.wpcf7 button.cosmetica-btn:hover::before,
.wpcf7 button.cosmetica-btn:focus::before {
	border-color: var(--color-secundario);
}