/* ==========================================================================================================
   Sección contacto (fondo de cielo): acciones directas, datos en tarjetas de vidrio, formulario que arma un correo,
   mapa estilizado con una lente sobre el pin (el de Google se carga solo si lo pides) y una banda final de llamada.
   ========================================================================================================== */

/* Revelado "enfoque" sin repintar: la pieza que está por enfocarse (servicios-comun.js le pone .enfoque-cerca) tiene
   capa propia mientras main.js le anima opacidad, desenfoque y posición; al quedar .enfocado la suelta. */
#contacto .enfoque-cerca:not(.enfocado) { will-change: opacity, filter, transform; }

/* ---------- Acciones de la cabecera ------------------------------------------------------------------------ */
.contacto__acciones { margin-top: 10px; }
.contacto__boton-icono { display: inline-grid; flex: none; width: 20px; height: 20px; margin-left: -4px; }
.contacto__boton-icono:empty { display: none; }
.contacto__boton-icono svg,
.contacto__red-icono svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 3.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Rejilla: datos + mapa a la izquierda, formulario a la derecha ---------------------------------- */
.contacto__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	grid-template-areas:
		"datos form"
		"mapa form";
	gap: clamp(14px, 1.6vw, 22px);
}
.contacto__datos {
	grid-area: datos;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.contacto__form { grid-area: form; }
.contacto__mapa { grid-area: mapa; }

/* Pieza de vidrio común: datos, formulario y mapa */
.contacto__dato,
.contacto__form,
.contacto__mapa {
	--mx: -600px;
	--my: -600px;
	position: relative;
	border-radius: var(--radio-l);
	border: 1px solid var(--borde);
	box-shadow: var(--brillo-vidrio), var(--sombra);
	isolation: isolate;
}
.contacto__dato,
.contacto__form {
	background:
		radial-gradient(420px circle at var(--mx) var(--my), rgba(46, 155, 255, 0.07), transparent 45%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.84));
}
/* Canto brillante que sigue al puntero */
.contacto__dato::after {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(220px circle at var(--mx) var(--my), rgba(46, 155, 255, 0.7), rgba(46, 155, 255, 0) 70%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s;
}
@media (hover: hover) and (pointer: fine) {
	.contacto__dato:hover::after { opacity: 1; }
}

/* ---------- Datos ------------------------------------------------------------------------------------------ */
.contacto__dato {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	padding: clamp(20px, 2.2vw, 28px);
}
.contacto__dato h3 {
	margin-top: 10px;
	font-size: var(--t-mini);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--texto-3);
}
.contacto__dato p { color: var(--texto); font-weight: 500; }
.contacto__valor { display: grid; justify-items: start; gap: 8px; }
.contacto__dato .enlace { overflow-wrap: anywhere; }
.contacto__grande { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; }
.contacto__icono {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: var(--azul-marca);
	background:
		radial-gradient(circle at 50% 118%, rgba(46, 155, 255, 0.28), rgba(46, 155, 255, 0) 62%),
		radial-gradient(circle at 36% 26%, #ffffff 0%, #f1f6ff 58%, #e3edfd 100%);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 1px rgba(20, 55, 230, 0.09), 0 10px 22px -12px rgba(20, 60, 150, 0.55), inset 0 -7px 12px rgba(46, 155, 255, 0.14);
}
.contacto__icono::after {
	content: "";
	position: absolute;
	inset: 3px 7px 52%;
	z-index: 2;
	border-radius: 999px 999px 45% 45% / 999px 999px 30% 30%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.08));
}
.contacto__icono svg {
	position: relative;
	z-index: 1;
	width: 30px;
	height: 30px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.contacto__redes { display: flex; flex-wrap: wrap; gap: 8px; }
.contacto__redes a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px 0 12px;
	border-radius: 999px;
	border: 1px solid var(--borde);
	background: linear-gradient(180deg, #ffffff, #f1f6ff);
	box-shadow: var(--brillo-vidrio), 0 4px 10px -6px rgba(20, 60, 150, 0.35);
	color: var(--azul-hondo);
	font-size: var(--t-chico);
	font-weight: 650;
	transition: border-color 0.25s, transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.contacto__redes a:hover { border-color: rgba(20, 55, 230, 0.3); transform: translateY(-1px); }
.contacto__red-icono { display: inline-grid; width: 20px; height: 20px; }

/* ---------- Formulario ------------------------------------------------------------------------------------- */
.contacto__form {
	display: grid;
	align-content: start;
	gap: 18px;
	padding: clamp(24px, 3vw, 38px);
}
.contacto__form-cabeza { display: grid; gap: 8px; }
.contacto__form h3 { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); letter-spacing: -0.03em; }
.contacto__aviso { font-size: var(--t-chico); color: var(--texto-2); }
.contacto__motivo { min-width: 0; margin: 0; padding: 0; border: 0; }
.contacto__motivo legend,
.contacto__campo label { padding: 0; margin-bottom: 8px; font-size: 0.925rem; font-weight: 650; color: var(--texto); }
.contacto__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.contacto__opcion { position: relative; display: inline-flex; }
.contacto__opcion input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.contacto__opcion span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--borde);
	background: var(--vidrio-fuerte);
	box-shadow: var(--brillo-vidrio);
	color: var(--texto-2);
	font-size: var(--t-chico);
	font-weight: 600;
	transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.35s var(--ease-out);
}
.contacto__opcion:hover span { color: var(--texto); border-color: var(--borde-fuerte); }
.contacto__opcion input:checked + span {
	color: #fff;
	border-color: transparent;
	background: linear-gradient(180deg, #4a70ff 0%, var(--azul-marca) 60%, #102ecb 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -10px rgba(20, 55, 230, 0.8);
}
.contacto__opcion input:focus-visible + span { outline: 2px solid var(--azul-marca); outline-offset: 3px; }

.contacto__campo { display: grid; }
.contacto__opcional { font-weight: 500; color: var(--texto-3); }
.contacto__campo input,
.contacto__campo textarea {
	width: 100%;
	min-height: 52px;
	padding: 13px 16px;
	border-radius: 14px;
	border: 1px solid var(--borde-fuerte);
	background: rgba(255, 255, 255, 0.92);
	box-shadow: inset 0 1px 2px rgba(10, 23, 51, 0.06);
	color: var(--texto);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.2s, box-shadow 0.25s var(--ease-out), background-color 0.2s;
}
.contacto__campo textarea { min-height: 128px; resize: vertical; }
.contacto__campo input:hover,
.contacto__campo textarea:hover { border-color: rgba(14, 42, 92, 0.3); }
.contacto__campo input:focus-visible,
.contacto__campo textarea:focus-visible {
	outline: none;
	border-color: var(--azul-marca);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(20, 55, 230, 0.14), inset 0 1px 2px rgba(10, 23, 51, 0.06);
}
.contacto__campo [aria-invalid="true"] { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(224, 5, 16, 0.1); }
.contacto__error {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: var(--t-chico);
	font-weight: 600;
	color: var(--rojo);
}
.contacto__error[hidden] { display: none; }
.contacto__error::before {
	content: "!";
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rojo);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 800;
}
.contacto__enviar { justify-self: start; }
.contacto__estado:empty { display: none; }
.contacto__estado {
	display: grid;
	gap: 6px;
	padding: 16px 18px;
	border-radius: 16px;
	font-size: var(--t-chico);
	color: var(--texto);
	background: linear-gradient(180deg, #f0fbf7, #e6f7f1);
	border: 1px solid rgba(18, 168, 119, 0.25);
	box-shadow: var(--brillo-vidrio);
}
.contacto__estado strong { font-size: 0.95rem; }
.contacto__estado--error { background: linear-gradient(180deg, #fff6f6, #fdeeee); border-color: rgba(224, 5, 16, 0.22); }

/* ---------- Mapa ------------------------------------------------------------------------------------------- */
.contacto__mapa {
	display: grid;
	grid-template-rows: minmax(250px, 1fr) auto;
	overflow: hidden;
	background: #fff;
}
.contacto__mapa-lienzo,
.contacto__mapa-iframe { grid-area: 1 / 1; min-width: 0; }
.contacto__mapa-lienzo { position: relative; overflow: hidden; background: #eef4fb; }
.contacto__mapa-lienzo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.contacto__mapa-iframe { width: 100%; height: 100%; min-height: 250px; border: 0; background: #eef4fb; }
.contacto__mapa-nota {
	grid-area: 1 / 1;
	align-self: end;
	justify-self: start;
	z-index: 1;
	max-width: calc(100% - 24px);
	margin: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: var(--t-mini);
	font-weight: 600;
	color: var(--texto-2);
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: var(--sombra-s);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.contacto__mapa--cargado .contacto__mapa-nota { display: none; }
.contacto__mapa-barra {
	grid-area: 2 / 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	flex-wrap: wrap;
	padding: 14px 14px 14px 20px;
	border-top: 1px solid var(--borde);
	background: linear-gradient(180deg, #ffffff, #f6f9ff);
}
.contacto__mapa-texto { display: grid; font-size: var(--t-chico); color: var(--texto-2); line-height: 1.4; }
.contacto__mapa-texto strong { font-size: 1rem; color: var(--texto); }
.contacto__mapa-barra .boton { flex: none; --alto: 44px; } /* objetivo táctil ≥ 44 px */

/* Pulso del pin: anillos que se abren (solo con el mapa en pantalla y sin movimiento reducido). Son elementos HTML
   entre los dos SVG del mapa, para que la animación (transform y opacidad) la corra el compositor. contacto.js pone
   el centro y la escala del viewBox (--pulso-x, --pulso-y, --pulso-e); dentro va el mismo <circle r="16" stroke-width="2">
   de antes en un SVG de 36 unidades, así que mide exactamente lo mismo. */
.contacto__pulso {
	--e: var(--pulso-e, 1);
	position: absolute;
	left: var(--pulso-x, 50%);
	top: var(--pulso-y, 55%);
	width: calc(36px * var(--e));
	height: calc(36px * var(--e));
	margin: calc(-18px * var(--e)) 0 0 calc(-18px * var(--e));
	opacity: 0;
	pointer-events: none;
}
.contacto__mapa-lienzo.activo .contacto__pulso { animation: contacto-pulso 2.8s var(--ease-out) infinite; }
.contacto__mapa-lienzo.activo .contacto__pulso--2 { animation-delay: 1.4s; }
@keyframes contacto-pulso {
	0% { transform: scale(0.4); opacity: 0.55; }
	100% { transform: scale(2.4); opacity: 0; }
}

/* ---------- Banda final ------------------------------------------------------------------------------------ */
.contacto__cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 28px 40px;
	margin-top: clamp(56px, 7vw, 104px);
	padding: clamp(36px, 5vw, 76px) clamp(26px, 5vw, 76px);
	border-radius: var(--radio-xl);
	background:
		radial-gradient(70% 140% at 0% 0%, #dcebff 0%, rgba(220, 235, 255, 0) 62%),
		radial-gradient(50% 120% at 100% 100%, #dff5fc 0%, rgba(223, 245, 252, 0) 62%),
		linear-gradient(180deg, #ffffff, #f3f8ff);
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 1px var(--borde), var(--brillo-vidrio), var(--sombra-l);
	overflow: hidden;
	isolation: isolate;
}
.contacto__cta-titulo {
	position: relative;
	z-index: 1;
	max-width: 17ch;
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.035em;
	text-wrap: balance;
	color: var(--texto);
}
.contacto__cta-titulo em { font-style: normal; color: var(--azul-marca); }
.contacto__cta-boton { position: relative; z-index: 1; --alto: 58px; padding: 0 30px; font-size: 1.05rem; }
/* Burbujas de vidrio que flotan en la banda (las crea contacto.js) */
.contacto__burbuja {
	position: absolute;
	z-index: 0;
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.98) 0 12%, rgba(255, 255, 255, 0.4) 30%, rgba(127, 207, 255, 0.1) 62%, rgba(46, 155, 255, 0.28) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 -8px 18px rgba(46, 155, 255, 0.18), 0 10px 24px -14px rgba(20, 60, 150, 0.45);
	pointer-events: none;
}
.contacto__cta.activa .contacto__burbuja { animation: contacto-flota var(--t) ease-in-out var(--r) infinite alternate; }
@keyframes contacto-flota {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(var(--dx), var(--dy), 0); }
}

/* ---------- Tableta ---------------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.contacto__rejilla {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "datos" "form" "mapa";
	}
}

/* ---------- Teléfono --------------------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.contacto__acciones .boton { flex: 1 1 auto; }
	.contacto__datos { grid-template-columns: minmax(0, 1fr); }
	.contacto__mapa { grid-template-rows: minmax(250px, 1fr) auto; }
	.contacto__mapa-nota { border-radius: 14px; }
	.contacto__mapa-barra .boton { width: 100%; }
	.contacto__cta { flex-direction: column; align-items: flex-start; }
	.contacto__cta-boton { width: 100%; padding: 0 20px; }
	.contacto__burbuja--escritorio { display: none; }
	.contacto__burbuja--grande { --s: 120px !important; left: 74% !important; top: -12% !important; }
}

@media (prefers-reduced-motion: reduce) {
	.contacto__pulso,
	.contacto__burbuja { animation: none !important; }
}