/**
 * Formulario público `[reveex_contact_form]`. Tokens tomados de
 * `/docs/PALETA.md` (verde principal, verde oscuro, vino, rosa) y de los
 * inputs/botones ya existentes en `reveex-elementor.css` (radios, bordes,
 * tamaños de fuente).
 *
 * Tipografía: se declara acá "Plus Jakarta Sans" explícitamente (la fuente
 * de marca real del tema, ver `reveex-elementor.css` → `@font-face`) en vez
 * de `font-family: inherit` — heredar del contenedor de Elementor donde se
 * inserte el shortcode no es confiable (el widget/columna puede traer su
 * propia fuente con más especificidad, y de hecho la traía). El tema ya
 * carga el `@font-face` globalmente, así que no hace falta declararlo de
 * nuevo acá, sólo referenciar el nombre.
 *
 * Prefijo obligatorio `reveex-contact-form__*` (§7). Independiente del tema:
 * este archivo sólo se carga cuando el shortcode está presente (§20).
 */

.reveex-contact-form {
	--rcf-green: #276c27;
	--rcf-green-dark: #1e311d;
	--rcf-wine: #6b204a;
	--rcf-pink: #c475a3;
	--rcf-ink: #111111;
	--rcf-muted: #6b7a70;
	--rcf-border: #e4eae2;
	--rcf-surface: #ffffff;
	--rcf-error: #a8384a;
	--rcf-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	font-family: var(--rcf-font);
	position: relative;
}

.reveex-contact-form * {
	font-family: inherit;
}

/* Salvaguarda general (cualquier página, no sólo /registro/): si el
   contenedor de Elementor donde se pega el shortcode es un flex en fila
   sin variante mobile propia (el bug real de /registro/, ver CAMBIOS.md),
   esto evita que el widget se achique a un tercio del ancho junto a sus
   hermanos — no fuerza el apilado prolijo de esa página (eso depende de
   cómo esté armada cada página en Elementor), pero al menos impide que el
   formulario quede inusable. La forma correcta de evitar esto en una
   página nueva sigue siendo usar una columna simple de ancho completo para
   el shortcode. */
.elementor-widget-shortcode:has(.reveex-contact-form) {
	min-width: min(100%, 320px);
	flex: 1 1 480px;
}

.reveex-contact-form__form {
	background: var(--rcf-surface);
	border: 1px solid var(--rcf-border);
	border-radius: 18px;
	padding: 34px 32px;
	box-shadow: 0 1px 2px rgba(20, 30, 20, 0.05), 0 20px 40px -24px rgba(20, 30, 20, 0.18);
}

.reveex-contact-form__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--rcf-wine);
	margin: 0 0 8px;
}

.reveex-contact-form__title {
	font-size: 21px;
	font-weight: 800;
	color: var(--rcf-ink);
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.reveex-contact-form__description {
	font-size: 13px;
	color: var(--rcf-muted);
	line-height: 1.55;
	margin: 0 0 22px;
}

.reveex-contact-form__message {
	font-size: 12.5px;
	font-weight: 600;
	padding: 10px 14px;
	border-radius: 10px;
	margin: 0 0 18px;
	background: #fbeef2;
	color: var(--rcf-error);
}

.reveex-contact-form__fields {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 14px;
}

.reveex-contact-form--paired .reveex-contact-form__fields {
	grid-template-columns: 1fr 1fr;
}

.reveex-contact-form--paired .reveex-contact-form__field--full {
	grid-column: 1 / -1;
}

.reveex-contact-form__field {
	margin-bottom: 16px;
}

.reveex-contact-form__label {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--rcf-ink);
	margin-bottom: 6px;
}

.reveex-contact-form__required {
	color: var(--rcf-wine);
}

.reveex-contact-form__optional {
	color: var(--rcf-muted);
	font-weight: 500;
	font-size: 11px;
}

.reveex-contact-form__input {
	width: 100%;
	border: 1.5px solid var(--rcf-border);
	border-radius: 10px;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--rcf-ink);
	background: var(--rcf-surface);
}

textarea.reveex-contact-form__input {
	min-height: 96px;
	resize: vertical;
}

.reveex-contact-form__input:focus {
	outline: none;
	border-color: var(--rcf-green);
}

.reveex-contact-form__field.is-invalid .reveex-contact-form__input {
	border-color: var(--rcf-error);
}

.reveex-contact-form__error {
	color: var(--rcf-error);
	font-size: 11.5px;
	margin: 5px 0 0;
	font-weight: 600;
}

.reveex-contact-form__radio-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.reveex-contact-form__radio {
	flex: 1;
	min-width: 120px;
	border: 1.5px solid var(--rcf-border);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--rcf-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.reveex-contact-form__radio input {
	accent-color: var(--rcf-green);
}

.reveex-contact-form__radio:has(input:checked),
.reveex-contact-form__radio.is-selected {
	border-color: var(--rcf-green);
	background: #f6f8f5;
}

.reveex-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.reveex-contact-form__check-row {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-bottom: 14px;
}

.reveex-contact-form__check-row input {
	margin-top: 3px;
	accent-color: var(--rcf-green);
	flex: none;
}

.reveex-contact-form__check-row label {
	font-size: 12px;
	line-height: 1.55;
	color: var(--rcf-muted);
	font-weight: 500;
}

.reveex-contact-form__check-row a {
	color: var(--rcf-green);
	font-weight: 700;
	text-decoration: none;
}

.reveex-contact-form__check-row.is-invalid label {
	color: var(--rcf-error);
}

.reveex-contact-form__submit {
	width: 100%;
	border: 0;
	background: var(--rcf-wine);
	color: #ffffff;
	font-weight: 700;
	font-size: 13.5px;
	padding: 13px 18px;
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	margin-top: 4px;
	transition: background 0.15s ease;
}

.reveex-contact-form__submit:hover:not(:disabled) {
	background: var(--rcf-pink);
	color: var(--rcf-green-dark);
}

.reveex-contact-form__submit:disabled {
	opacity: 0.65;
	cursor: default;
}

.reveex-contact-form__disabled {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	color: var(--rcf-muted, #6b7a70);
	font-size: 13.5px;
	padding: 20px;
}

/* Popup de registro exitoso — no reemplaza el formulario, lo superpone (§8).
   `display:flex` es un estilo de autor y le gana al `[hidden]{display:none}`
   nativo del navegador aunque tengan la misma especificidad (el origen
   "autor" siempre prioriza sobre el origen "user agent") — sin la regla de
   abajo, el popup queda visible aunque JS le ponga el atributo `hidden`, y
   "cerrar" tampoco funciona porque nunca se oculta realmente. */
.reveex-contact-form__popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba(17, 36, 23, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 10;
	border-radius: 18px;
}

.reveex-contact-form__popup-overlay[hidden] {
	display: none !important;
}

.reveex-contact-form__popup {
	background: #ffffff;
	border-radius: 18px;
	padding: 38px 34px 32px;
	max-width: 380px;
	width: 100%;
	text-align: center;
	position: relative;
	box-shadow: 0 24px 64px -20px rgba(17, 36, 23, 0.45);
}

.reveex-contact-form__popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 0;
	background: #f6f8f5;
	color: var(--rcf-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.reveex-contact-form__popup-close:hover {
	background: var(--rcf-border);
	color: var(--rcf-ink);
}

.reveex-contact-form__popup-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #eef6ea;
	color: var(--rcf-green);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	font-size: 24px;
}

.reveex-contact-form__popup-title {
	font-size: 19px;
	font-weight: 800;
	color: var(--rcf-ink);
	margin: 0 0 8px;
}

.reveex-contact-form__popup-message {
	font-size: 13px;
	color: var(--rcf-muted);
	line-height: 1.6;
	margin: 0;
}

.reveex-contact-form__popup-ok {
	width: 100%;
	border: 0;
	background: var(--rcf-green);
	color: #ffffff;
	font-weight: 700;
	font-size: 13.5px;
	padding: 12px 18px;
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	margin-top: 22px;
}

.reveex-contact-form__popup-ok:hover {
	background: var(--rcf-green-dark);
}

@media (max-width: 480px) {
	.reveex-contact-form--paired .reveex-contact-form__fields {
		grid-template-columns: 1fr;
	}

	.reveex-contact-form__form {
		padding: 26px 20px;
	}
}

/* Parche puntual para /registro/ (post 1192): el contenedor de Elementor
   que agrupa las 3 columnas de esa página (25%/50%/25%) tiene cada columna
   con su propia variante "mobile" a 100%, pero el contenedor que las
   agrupa nunca cambia de flex-direction:row a column en mobile — sin esto,
   las 3 columnas se aprietan una al lado de la otra al 33% cada una en vez
   de apilarse, y el formulario queda comprimido a un tercio del ancho real
   en pantallas ≤767px (breakpoint mobile de Elementor en este sitio).
   Corregido acá por CSS, sin tocar `_elementor_data` de la página (no hay
   acceso al MCP de Elementor en esta sesión para hacerlo por esa vía, y
   escribir esa tabla a mano ya causó incidentes reales en este proyecto).
   Selector por `data-id` (estable) en vez de la clase atómica generada
   (`e-34b3fdf`), que Elementor podría reasignar/compartir con otros
   elementos si la página se vuelve a guardar. Si el problema reaparece,
   revisar el `data-id` real del contenedor exterior del shortcode en esa
   página — puede haber cambiado. */
@media (max-width: 767px) {
	[data-id="7cfd12d"] {
		flex-direction: column !important;
	}
}