/* Paleta de Colores:
 * Principal (Fondo): #001F3F (Azul Marino)
 * Énfasis/CTA: #FFDC00 (Amarillo Vibrante)
 * Fuente Primaria: #343a40 (Gris Oscuro)
 */

:root {
    --color-primary: #001F3F;
    --color-accent: #FFDC00;
    --color-text-dark: #343a40;
    --color-text-light: #F5F5F5;
}

body {
    font-family: 'Arial', sans-serif;
    color: var(--color-text-dark);
}

/* -------------------- Navbar -------------------- */
#mainNav {
    background-color: var(--color-primary);
    transition: background-color 0.3s ease;
}

/* Estilo para los links en la barra de navegación */
#mainNav .navbar-nav .nav-item .nav-link {
    font-size: 0.9em;
    font-weight: 600;
    padding: 0.75em 0;
    letter-spacing: 0.0625em;
    color: var(--color-text-light);
}

#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: var(--color-accent);
}

/* -------------------- Masthead (Hero) -------------------- */
.masthead {
    text-align: center;
    color: white;
    background-image: url('https://i.ibb.co/8LJSgJVY/Gemini-Generated-Image-epkalpepkalpepka.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    padding-top: 10rem;
    padding-bottom: 6rem;
}

.masthead-subheading {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
}

.masthead-heading {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 25px;
}

/* CTA General */
.btn-xl {
    padding: 1rem 2rem;
    font-size: 1.25rem;
    font-weight: 700;
}

/* -------------------- Secciones Generales -------------------- */
.page-section {
    padding: 8rem 0;
}

.section-heading {
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--color-primary);
}

/* -------------------- Servicios -------------------- */
.service-icon-box {
    color: var(--color-primary);
}

.icon-large {
    font-size: 4rem;
    color: var(--color-accent); /* Icono en color de énfasis */
    display: block;
    margin-bottom: 10px;
}

/* -------------------- Autoridad (Logos) -------------------- */
.authority-logo {
    opacity: 0.7;
    transition: opacity 0.3s;
}

.authority-logo:hover {
    opacity: 1;
}

/* -------------------- Contacto / Footer -------------------- */
#contacto {
    background-color: var(--color-primary);
}

.map-placeholder {
    background-color: #343a40;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.footer {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    font-size: 0.9rem;
}


/* Media Queries para Responsive */
@media (min-width: 992px) {
    .masthead {
        padding-top: 15rem;
        padding-bottom: 10rem;
    }
    .masthead-heading {
        font-size: 4.5rem;
    }
}