/* Botón "Escríbenos" y ventana del formulario de correo (se usan en todas las páginas, ver correo.js) */
.mc-flotante,
.mc-dialogo {
	--mc-azul: #1d2a9e;
	--mc-azul-hondo: #161f7a;
	--mc-naranjo: #df5600;
	--mc-naranjo-hondo: #c24a00;
	--mc-oscuro: #141b4d;
	--mc-texto: #4a5568;
	--mc-suave: #8a93a6;
	--mc-borde: #d9dcea;
}

/* ----- Botón flotante (va sobre el de WhatsApp, abajo a la izquierda) ----- */
a.mc-flotante {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9998;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 30px;
	background: var(--mc-azul);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	color: #fff;
	font-family: "Cabin Condensed", sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s, transform .2s;
}

a.mc-flotante.mc-sobre-whatsapp { bottom: 76px; }

a.mc-flotante:hover,
a.mc-flotante:focus { background: var(--mc-azul-hondo); color: #fff; transform: translateY(-3px); }

a.mc-flotante svg { width: 22px; height: 22px; fill: currentColor; }

@media (max-width: 767px) {
	a.mc-flotante { left: 12px; bottom: 12px; justify-content: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; }
	a.mc-flotante span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	a.mc-flotante.mc-sobre-whatsapp { bottom: 68px; }
}

/* ----- Ventana ----- */
html.mc-abierto { overflow: hidden; }

.mc-dialogo {
	width: min(560px, calc(100% - 32px));
	max-height: calc(100% - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 30px 80px rgba(10, 14, 60, .35);
	color: var(--mc-oscuro);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overflow: auto;
}

.mc-dialogo *, .mc-dialogo *::before, .mc-dialogo *::after { box-sizing: border-box; }
.mc-dialogo::backdrop { background: rgba(10, 14, 46, .55); }
.mc-dialogo[open] { animation: mc-entrar .3s ease; }

/* Navegadores sin <dialog>: la ventana se centra igual */
.mc-dialogo.mc-sin-dialogo { display: none; }
.mc-dialogo.mc-sin-dialogo[open] {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 10000;
	display: block;
	transform: translate(-50%, -50%);
	animation: none;
}

@keyframes mc-entrar {
	from { opacity: 0; transform: translateY(14px) scale(.98); }
	to { opacity: 1; transform: none; }
}

.mc-dialogo .mc-form,
.mc-dialogo .mc-listo {
	position: relative;
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 34px 32px 26px;
	border-top: 4px solid var(--mc-naranjo);
}

.mc-dialogo .mc-form[hidden],
.mc-dialogo .mc-listo[hidden] { display: none; }

.mc-dialogo .mc-cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f3f4fa;
	color: var(--mc-oscuro);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.mc-dialogo .mc-cerrar:hover,
.mc-dialogo .mc-cerrar:focus { background: #e6e8f2; color: var(--mc-oscuro); }

.mc-dialogo .mc-icono {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--mc-azul);
}

.mc-dialogo .mc-icono svg { width: 26px; height: 26px; fill: #fff; }

.mc-dialogo h2 {
	margin: 2px 0 0;
	color: var(--mc-oscuro);
	font-family: "Cabin Condensed", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	text-transform: none;
}

.mc-dialogo p { margin: 0; }
.mc-dialogo .mc-intro { margin-top: -6px; color: var(--mc-texto) !important; font-size: 15px; }

.mc-dialogo .mc-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.mc-dialogo .mc-campo { display: grid; gap: 6px; margin: 0; }
.mc-dialogo .mc-campo > span { color: var(--mc-oscuro); font-size: 14px; font-weight: 600; }
.mc-dialogo .mc-campo em { color: var(--mc-suave); font-style: normal; font-weight: 500; }

.mc-dialogo input,
.mc-dialogo select,
.mc-dialogo textarea {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--mc-borde);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	color: var(--mc-oscuro);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color .2s, box-shadow .2s;
}

.mc-dialogo textarea { min-height: 110px; resize: vertical; }

.mc-dialogo input:focus,
.mc-dialogo select:focus,
.mc-dialogo textarea:focus { border-color: var(--mc-azul); box-shadow: 0 0 0 3px rgba(29, 42, 158, .15); outline: none; }

/* Trampa para robots: fuera de la pantalla */
.mc-dialogo .mc-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; }

.mc-dialogo .mc-enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 4px 0 0;
	padding: 15px 28px;
	border: 0;
	border-radius: 40px;
	background: var(--mc-naranjo);
	box-shadow: 0 8px 20px rgba(223, 86, 0, .25);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background .25s, transform .25s;
}

.mc-dialogo .mc-enviar svg { width: 18px; height: 18px; fill: currentColor; }

.mc-dialogo .mc-enviar:hover,
.mc-dialogo .mc-enviar:focus { background: var(--mc-naranjo-hondo); color: #fff; transform: translateY(-2px); }

.mc-dialogo .mc-enviar:disabled { cursor: wait; opacity: .7; transform: none; }

.mc-dialogo .mc-estado { color: var(--mc-texto) !important; font-size: 14px; }
.mc-dialogo .mc-estado:empty { display: none; }
.mc-dialogo .mc-estado.mc-error { color: #b42318 !important; }
.mc-dialogo .mc-estado a { color: inherit; font-weight: 600; }

.mc-dialogo .mc-privacidad { color: var(--mc-suave) !important; font-size: 13px; text-align: center; }

/* Mensaje de enviado */
.mc-dialogo .mc-listo { justify-items: center; padding: 46px 32px 34px; text-align: center; }
.mc-dialogo .mc-icono-listo { width: 64px; height: 64px; border-radius: 50%; }
.mc-dialogo .mc-icono-listo svg { width: 34px; height: 34px; }
.mc-dialogo .mc-listo-texto { color: var(--mc-texto) !important; font-size: 16px; line-height: 1.6; }

@media (max-width: 560px) {
	.mc-dialogo .mc-fila { grid-template-columns: 1fr; }
	.mc-dialogo .mc-form { padding: 30px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.mc-dialogo[open] { animation: none; }
	a.mc-flotante { transition: none; }
}