/**
 * Página de Contacto: datos, redes y mapa.
 */

/*
 * Arriba se recorta el espacio para que los datos y el mapa entren sin
 * scroll en una pantalla de escritorio estándar. El aire de abajo se mantiene.
 */
.hbg-contacto {
	margin-top: var(--hbg-e3);
	padding-block: var(--hbg-e3) var(--hbg-e6);
}

/*
 * El relleno superior propio se sacó: ahora el espacio bajo la línea verde lo
 * fija una sola regla global en `base.css` para todo el sitio. Cuando convivían
 * las dos, Contacto quedaba con 32px contra los 16px del resto.
 */
.hbg-pagina-contacto .site-content .ast-container {
	padding-block-start: 0;
}

.hbg-pagina-contacto .entry-header,
.hbg-pagina-contacto .ast-single-entry-title {
	margin-block-end: var(--hbg-e3);
}

.hbg-pagina-contacto .entry-content {
	margin-block-start: 0;
}

.hbg-contacto__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--hbg-e6);
	max-width: var(--hbg-ancho-max);
	margin-inline: auto;
}

@media (min-width: 900px) {
	.hbg-contacto__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		align-items: start;
		gap: var(--hbg-e7);
	}
}

.hbg-contacto__titulo {
	margin: 0 0 var(--hbg-e5);
	font-family: var(--hbg-fuente-titulo);
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	color: var(--hbg-texto);
}

/* =========================================================================
   DATOS
   ========================================================================= */

.hbg-datos {
	list-style: none;
	margin: 0 0 var(--hbg-e6);
	padding: 0;
	display: grid;
	gap: var(--hbg-e4);
}

.hbg-dato {
	display: flex;
	align-items: flex-start;
	gap: var(--hbg-e3);
	padding: var(--hbg-e4);
	background: var(--hbg-superficie-1);
	border: 1px solid var(--hbg-borde);
	/* Bordes rectos, como el resto del sitio. */
	border-radius: 0;
	transition: border-color var(--hbg-transicion);
}

.hbg-dato:hover {
	border-color: var(--hbg-neon);
}

.hbg-dato__emoji {
	flex: 0 0 auto;
	font-size: 1.4rem;
	line-height: 1.2;
}

.hbg-dato__cuerpo {
	min-width: 0;
}

.hbg-dato__rotulo {
	display: block;
	margin-bottom: 2px;
	color: var(--hbg-texto-tenue);
	font-family: var(--hbg-fuente-titulo);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hbg-dato__valor {
	display: inline-block;
	color: var(--hbg-texto);
	font-size: 1rem;
	line-height: 1.45;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color var(--hbg-transicion);
}

.hbg-dato__valor:hover {
	color: var(--hbg-neon);
}

/* Los datos que no son enlace (el horario) no cambian de color al pasar por
   encima: prometería un click que no existe. */
.hbg-dato__valor--fijo,
.hbg-dato__valor--fijo:hover {
	color: var(--hbg-texto);
	cursor: default;
}

/* =========================================================================
   REDES
   ========================================================================= */

.hbg-redes {
	display: flex;
	gap: var(--hbg-e3);
}

/*
 * Colores oficiales de cada red: la baldosa lleva el color de marca y el glifo
 * va en blanco, que es como se reconocen. Antes heredaban el verde del sitio y
 * perdían identidad.
 */
.hbg-red {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	color: #ffffff;
	border: none;
	border-radius: 0;
	transition: transform var(--hbg-transicion), filter var(--hbg-transicion);
}

.hbg-red--wa {
	background: #25D366;
}

/* Degradé oficial de Instagram, de abajo-izquierda a arriba-derecha. */
.hbg-red--ig {
	background: radial-gradient(circle at 30% 107%,
		#fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Hover sutil: sólo escala y brillo, el color de marca no se toca. */
.hbg-red:hover,
.hbg-red:focus-visible {
	transform: scale(1.08);
	filter: brightness(1.12) drop-shadow(0 0 12px rgba(255, 255, 255, 0.28));
}

@media (prefers-reduced-motion: reduce) {
	.hbg-red:hover,
	.hbg-red:focus-visible {
		transform: none;
	}
}
/* =========================================================================
   MAPA
   ========================================================================= */

.hbg-contacto__mapa {
	position: relative;
	/* Relación fija: el iframe se adapta sin saltos de layout. */
	aspect-ratio: 4 / 3;
	border: 1px solid var(--hbg-borde);
	border-radius: 0;
	overflow: hidden;
	background: var(--hbg-superficie-1);
}

@media (min-width: 900px) {
	.hbg-contacto__mapa {
		aspect-ratio: 16 / 11;
	}
}

.hbg-contacto__mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	/* Google entrega el mapa en claro; se lo acerca a la paleta oscura sin
	   volverlo ilegible. */
	filter: invert(0.92) hue-rotate(180deg) saturate(0.7) contrast(0.92);
}

/* =========================================================================
   ENTRADA
   ========================================================================= */

/*
 * Aparición suave al cargar: opacidad + un empujón corto hacia arriba.
 * Sin JS ni librerías, y con un retardo por bloque (`--hbg-retardo`) para que
 * entren escalonados en vez de todos juntos.
 */
.hbg-revelar {
	opacity: 0;
	transform: translateY(14px);
	animation: hbg-entrada 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
	animation-delay: var(--hbg-retardo, 0ms);
}

@keyframes hbg-entrada {
	to {
		opacity: 1;
		transform: none;
	}
}

/* Con movimiento reducido el contenido aparece igual, sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
	.hbg-revelar {
		animation: none;
		opacity: 1;
		transform: none;
	}
}