/* Boletín — propuesta E ("solo correo que se expande").
   El HTML de los campos lo genera Contact Form 7 con la plantilla de
   tareas/omega-home-widgets/CF7-BOLETIN.md; acá se le aplica el diseño del home.
   Selectores con .omega-hw-boletin .wpcf7-form para ganarle a los estilos de
   formularios del tema Martfury. */
.omega-hw-boletin {
	--omega-hw-boletin-boton: #0369A1;
	--omega-hw-boletin-boton-hover: #0C3D7D;
	--omega-hw-boletin-error: #B3122E;
	--omega-hw-boletin-ease: cubic-bezier(0.23, 1, 0.32, 1);
	display: grid;
	/* minmax(0,1fr): el texto de la izquierda cede espacio sin quedar aplastado. */
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
	padding: 22px 4px; /* sin líneas arriba/abajo (pedido del usuario, 2026-09-24) */
}

.omega-hw-boletin-eyebrow {
	font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: #0369A1;
}
.omega-hw-boletin-titulo {
	margin: 4px 0 2px;
	font-size: clamp(18px, 1.9vw, 22px); font-weight: 900; line-height: 1.1; text-transform: uppercase;
	color: #0B1B33;
}
.omega-hw-boletin-texto { margin: 0; font-size: 13.5px; line-height: 1.6; color: #51627A; }

.omega-hw-boletin-zona { position: relative; }
/* Solo para lectores de pantalla (visualmente oculto). */
.omega-hw-boletin-anuncio {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* CF7 envuelve las líneas de la plantilla en <p> (autop): se "disuelven" para
   que no rompan la fila flexible. */
/* El tema pone los formularios de CF7 en display:flex en fila (confirmado en vivo):
   se neutraliza para que la fila de campos y el consentimiento queden apilados. */
.omega-hw-boletin .wpcf7-form { display: block; }
.omega-hw-boletin .wpcf7-form p { margin: 0; display: contents; }
.omega-hw-boletin .wpcf7-form br { display: none; }

.omega-hw-boletin .omega-hw-boletin-fila { display: flex; gap: 10px; align-items: flex-start; }

/* margin 0: el tema le pone 30px abajo a cada campo de CF7 (confirmado en vivo). */
.omega-hw-boletin .wpcf7-form-control-wrap { display: block; position: relative; margin: 0; }

.omega-hw-boletin .wpcf7-form input.wpcf7-text,
.omega-hw-boletin .wpcf7-form input.wpcf7-email {
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 16px;
	font-size: 15px; font-weight: 500;
	color: #0B1B33;
	background: #fff;
	border: 1.5px solid #D5DEE9;
	border-radius: 8px;
	box-shadow: none;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}
.omega-hw-boletin .wpcf7-form input.wpcf7-text::placeholder,
.omega-hw-boletin .wpcf7-form input.wpcf7-email::placeholder { color: #8A97A8; }
.omega-hw-boletin .wpcf7-form input.wpcf7-text:focus,
.omega-hw-boletin .wpcf7-form input.wpcf7-email:focus {
	border-color: #0369A1;
	box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.15);
}
.omega-hw-boletin .wpcf7-form input.wpcf7-not-valid {
	border-color: var(--omega-hw-boletin-error);
	box-shadow: 0 0 0 3px rgba(179, 18, 46, 0.12);
}
.omega-hw-boletin .wpcf7-not-valid-tip {
	display: block; margin-top: 6px;
	font-size: 12px; font-weight: 500; color: var(--omega-hw-boletin-error);
}

/* El nombre arranca plegado (ancho 0) y se despliega cuando el formulario recibe
   foco (.is-abierto lo pone boletin.js). Sigue en el orden de tabulación: llegar
   con Tab también lo despliega. */
.omega-hw-boletin .omega-hw-boletin-nombre {
	flex: 0 0 0;
	max-width: 0;
	min-width: 0;
	opacity: 0;
	overflow: hidden;
	margin-right: -10px; /* compensa el gap mientras está plegado */
	transition: flex-basis 350ms var(--omega-hw-boletin-ease), max-width 350ms var(--omega-hw-boletin-ease), opacity 200ms ease, margin-right 350ms var(--omega-hw-boletin-ease);
}
.omega-hw-boletin.is-abierto .omega-hw-boletin-nombre {
	flex-basis: 200px;
	max-width: 200px;
	opacity: 1;
	margin-right: 0;
	overflow: visible; /* deja ver el mensaje de error debajo */
}
.omega-hw-boletin .omega-hw-boletin-correo { flex: 0 0 280px; min-width: 0; }

.omega-hw-boletin .wpcf7-form input.wpcf7-submit {
	height: 52px;
	margin: 0;
	padding: 0 28px;
	border: 0;
	border-radius: 8px;
	background: var(--omega-hw-boletin-boton);
	color: #fff;
	font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 160ms ease, transform 160ms var(--omega-hw-boletin-ease), opacity 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
	.omega-hw-boletin .wpcf7-form input.wpcf7-submit:hover { background: var(--omega-hw-boletin-boton-hover); }
}
.omega-hw-boletin .wpcf7-form input.wpcf7-submit:active { transform: scale(0.97); }
.omega-hw-boletin .wpcf7-form input.wpcf7-submit:focus-visible { outline: 3px solid #0EA5E9; outline-offset: 2px; }
/* Mientras CF7 envía: el botón se atenúa y no acepta otro clic. */
.omega-hw-boletin .wpcf7-form.submitting input.wpcf7-submit { opacity: 0.7; pointer-events: none; cursor: progress; }
.omega-hw-boletin .wpcf7-spinner { display: none; }

/* Consentimiento: aparece al desplegar. */
.omega-hw-boletin .omega-hw-boletin-consent {
	/* width 0 + min-width 100%: el texto largo no "empuja" el ancho de la columna
	   (confirmado en vivo: sin esto el formulario tomaba 997px y aplastaba el título);
	   ocupa solo lo que mide la fila de campos y se acomoda en varias líneas. */
	width: 0;
	min-width: 100%;
	max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
	font-size: 12.5px; line-height: 1.5; color: #51627A;
	transition: max-height 300ms var(--omega-hw-boletin-ease), opacity 200ms ease, margin-top 300ms var(--omega-hw-boletin-ease);
}
.omega-hw-boletin.is-abierto .omega-hw-boletin-consent { max-height: 90px; opacity: 1; margin-top: 10px; }
.omega-hw-boletin .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.omega-hw-boletin .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.omega-hw-boletin .wpcf7-acceptance input[type="checkbox"] {
	margin: 2px 0 0; width: 18px; height: 18px; flex: none;
	accent-color: #C3002F; cursor: pointer;
}
.omega-hw-boletin .omega-hw-boletin-consent a { color: #0369A1; font-weight: 600; }

/* Aviso general de CF7 (error de envío, spam...): se muestra sobrio debajo.
   En el éxito se oculta (lo reemplaza el mensaje propio del widget) y en
   "invalid" también: los errores ya aparecen debajo de cada campo. */
.omega-hw-boletin .wpcf7-form .wpcf7-response-output {
	margin: 10px 0 0; padding: 10px 14px;
	border: 1px solid var(--omega-hw-boletin-error); border-radius: 8px;
	font-size: 13px; color: var(--omega-hw-boletin-error);
}
.omega-hw-boletin .wpcf7-form.init .wpcf7-response-output,
.omega-hw-boletin .wpcf7-form.sent .wpcf7-response-output,
.omega-hw-boletin .wpcf7-form.invalid .wpcf7-response-output,
.omega-hw-boletin .wpcf7-form .wpcf7-response-output:empty { display: none; }

/* Éxito: el formulario se desvanece y entra el mensaje con un check que se dibuja. */
.omega-hw-boletin-exito {
	display: none; align-items: center; gap: 14px;
	padding: 18px 20px; border-radius: 10px;
	background: rgba(30, 123, 79, 0.08); border: 1px solid rgba(30, 123, 79, 0.25);
	color: #1E7B4F; font-weight: 600; font-size: 15px;
	opacity: 0; transform: translateY(8px);
	transition: opacity 300ms ease 80ms, transform 400ms var(--omega-hw-boletin-ease) 80ms;
}
.omega-hw-boletin-exito svg { width: 28px; height: 28px; flex: none; }
.omega-hw-boletin-exito small { display: block; margin-top: 2px; font-weight: 500; font-size: 13px; color: #51627A; }
.omega-hw-boletin-check { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 450ms var(--omega-hw-boletin-ease) 250ms; }
.omega-hw-boletin.is-enviado .wpcf7 { display: none; }
.omega-hw-boletin.is-enviado .omega-hw-boletin-exito { display: flex; }
.omega-hw-boletin.is-enviado.is-exito-visible .omega-hw-boletin-exito { opacity: 1; transform: none; }
.omega-hw-boletin.is-enviado.is-exito-visible .omega-hw-boletin-check { stroke-dashoffset: 0; }

@media (max-width: 900px) {
	.omega-hw-boletin { grid-template-columns: 1fr; gap: 18px; }
	.omega-hw-boletin .omega-hw-boletin-correo { flex: 1 1 auto; }
	.omega-hw-boletin.is-abierto .omega-hw-boletin-nombre { flex-basis: 40%; max-width: 40%; }
}
/* Celular: campos apilados. El nombre se pliega en alto (no en ancho), así no
   depende de que -10px + gap + 100% sumen exacto en una misma fila. */
@media (max-width: 560px) {
	.omega-hw-boletin .omega-hw-boletin-fila { flex-direction: column; align-items: stretch; }
	.omega-hw-boletin .omega-hw-boletin-nombre,
	.omega-hw-boletin.is-abierto .omega-hw-boletin-nombre {
		flex: none; max-width: none; margin-right: 0;
		transition: max-height 350ms var(--omega-hw-boletin-ease), opacity 200ms ease, margin-bottom 350ms var(--omega-hw-boletin-ease);
	}
	.omega-hw-boletin .omega-hw-boletin-nombre { max-height: 0; margin-bottom: -10px; }
	.omega-hw-boletin.is-abierto .omega-hw-boletin-nombre { max-height: 90px; margin-bottom: 0; }
	.omega-hw-boletin .omega-hw-boletin-correo { flex: none; }
	.omega-hw-boletin .wpcf7-form input.wpcf7-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.omega-hw-boletin .omega-hw-boletin-nombre,
	.omega-hw-boletin .omega-hw-boletin-consent,
	.omega-hw-boletin-exito,
	.omega-hw-boletin-check { transition: opacity 200ms ease; }
	.omega-hw-boletin .wpcf7-form input.wpcf7-submit:active { transform: none; }
}