/* Paleta de colores basados en la identidad visual del sitio */
:root {
	--bs-primary-rgb: #02A8CE;
    --blue-hcd: #00bcd4; /* Celeste institucional del título */
    --navy-footer: #1a2b4c; /* Azul oscuro del pie de página */
	--bs-link-decoration: none;
	--bs-btn-color: #00bcd4;
}
.btn-outline-primary {
	--bs-btn-border-color: #00bcd4;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #00bcd4;
	--bs-btn-hover-border-color: #00bcd4;
	--bs-btn-focus-shadow-rgb: 13, 110, 253;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #00bcd4;
	--bs-btn-active-border-color: #00bcd4;
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color: #00bcd4;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #00bcd4;
	--bs-gradient: none;
}
a {
	text-decoration: none;
}
.text-primary, .text-secondary {
	color: var(--bs-primary-rgb)!important;
}
/* Ajustes del Banner Principal */
.hero-section {
    max-height: 450px;
    overflow: hidden;
}
.hero-img {
    object-fit: cover;
    height: 450px;
    filter: brightness(60%); /* Oscurece un poco la foto trasera para resaltar el logo */
}

/* Detalle visual de la sección noticias */
.linea-separadora {
    width: 60px;
    height: 3px;
    background-color: var(--bs-primary-rgb);
}

/* Estilo del pie de página */
.bg-navy {
    background-color: var(--navy-footer) !important;
}
.hov-white:hover {
    color: #ffffff !important;
    transition: color 0.2s ease-in-out;
}

/* Sutil efecto de elevación para las tarjetas */
.card-noticia {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-noticia:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.fab {
	color: #04519a!important;
}
/* CONCEJALES */
/* Color celeste institucional del banner */
.bg-info-hcd {
    background-color: #00a8e1 !important; /* Ajustar el hexadecimal exacto si es necesario */
}

.text-info-hcd {
    color: #00a8e1 !important;
}

/* Tracking del subtítulo */
.tracking-wider {
    letter-spacing: 2px;
}

/* Caja contenedora del Avatar / Bloque Gris */
.avatar-container {
    width: 100%;
    max-width: 150px; /* Controla el ancho máximo en pantallas grandes */
    aspect-ratio: 1 / 1; /* Fuerza a que sea perfectamente cuadrado */
    overflow: hidden;
    background-color: #d1d5db; /* Color gris placeholder de la maqueta */
    border-radius: 4px; /* Un sutil suavizado en las esquinas */
}

/* Ajuste de imagen interna */
.gray-box {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Si vas a usar imágenes reales fijas en escala de grises hasta el hover, podés usar: */
    /* filter: grayscale(100%); transition: filter 0.3s ease; */
}

/* Estilo tipográfico interno */
.info-concejal h5 {
    font-size: 0.95rem;
}
.info-concejal p {
    font-size: 0.82rem;
}
.info-concejal span {
    font-size: 0.78rem;
    font-style: italic;
}
/* FIN CONCEJALES */