/*CONFIGURACIÓN GENERAL */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    font-family: "Noto Sans", sans-serif;

}


/* TÍTULOS TAMAÑO*/

h1 {
    font-size: 3em;
}


h2 {
    font-size: 2.5em;
}


h3 {
    font-size: 2em;
}


/*LOGO*/

.logo {

    font-size: 1.5rem;

    font-weight: bold;

    text-decoration: none;

    color: blue;

}


/*BOTONES GENERALES*/

button {

    font-size: 1em;

    font-weight: bold;

    padding: 10px 15px;

    border-radius: 10px;

    border: 1px solid rgba(0,0,0,0.5);

    box-shadow:
        2px 2px 10px rgba(0,0,0,0.5);

    color: white;

    background-color: blue;

}


button:hover {

    background-color: rgb(17,17,121);

}


/* CONTENEDOR */

.container {

    max-width: 1440px;

    margin: auto;

}


/* BARRA SUPERIOR
   Contiene:
   - Teléfono
   - Emergencia
   - Dirección
   - Ayuntamiento
   - Redes sociales */

.barra-superior {

    min-height: 60px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 45px;

    background: white;

    border-top: 2px solid #222;

}


/* INFORMACIÓN DE LA BARRA SUPERIOR
   Todo se mantiene en una sola línea */

.informacion {
    display: flex;
    align-items: center;
}


/* CADA ELEMENTO DE INFORMACIÓN
   Se comporta como un elemento independiente */

.fila-info {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-wrap: nowrap;
}



/* ELEMENTOS DE INFORMACIÓN
   Sirve para:
   - Teléfono
   - Dirección
   - Ayuntamiento */

.info-item {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #222;

    text-decoration: none;

    font-family: "Noto Sans", sans-serif;

    font-size: 14px;

    white-space: nowrap;

}


.info-item i {

    font-size: 17px;

}


/* MENSAJE DE EMERGENCIA */

.mensaje-emergencia {

    display: flex;

    align-items: center;

    gap: 7px;

    font-family: "Noto Sans", sans-serif;

    font-size: 14px;

    color: #222;

    white-space: nowrap;

}


.mensaje-emergencia i {

    font-size: 16px;

}


/* LADO DERECHO */

.lado-derecho {

    display: flex;

    align-items: center;

}


/* REDES SOCIALES */

.redes-sociales {

    display: flex;

    align-items: center;

    gap: 25px;

}


.redes-sociales a {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #222;

    text-decoration: none;

    font-size: 22px;

    transition: all 0.3s ease;

}


/* EFECTO AL PASAR EL MOUSE POR REDES */

.redes-sociales a:hover {

    transform: translateY(-2px);

}


/* X(TWITTER) */

.redes-sociales a:nth-child(1):hover {

    color: #000;

}


/* FACEBOOK */

.redes-sociales a:nth-child(2):hover {

    color: #1877F2;

}


/* MENÚ PRINCIPAL */

.menu-principal {

    position: absolute;

    top: 60px;

    left: 0;

    width: 100%;

    min-height: 55px;

    display: flex;

    align-items: center;

    z-index: 9999;

    background: rgba(0, 0, 0, 0.25);

}


/* ÁREA DESPLAZABLE DEL MENÚ */

.menu-scroll {

    flex: 1;

    min-width: 0;

    overflow-x: auto;

    scrollbar-width: none;

}


.menu-scroll::-webkit-scrollbar {

    display: none;

}


/* OPCIONES PRINCIPALES DEL MENÚ:
   INICIO
   DIRECCIÓN DE POLICÍA VIAL Y MOVILIDAD */

.menu-opciones {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 30px;

    width: max-content;

    min-width: 100%;

    padding: 12px 30px;

}


/* ALINEACIÓN DE INICIO Y DIRECCIÓN */

.menu-opciones > a,
.menu-dropdown,
.menu-link {

    display: flex;

    align-items: center;

}

/* TÍTULO DE LA SECRETARÍA
   Está fuera del menú, pero en la misma altura */

.titulo-secretaria {

    position: absolute;

    top: 60px;
    left: 45px;

    height: 55px;

    display: flex;
    align-items: center;

    color: white;

    font-family: "Noto Sans", sans-serif;

    font-size: 18px;

    font-weight: 900;

    white-space: nowrap;

    z-index: 10000;

}

.titulo-secretaria {
    display: flex;
    align-items: center;
    gap: 12px;
}

.titulo-secretaria img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}


/* LETRA DEL MENÚ */

.menu-principal a { 
 
    font-family: "Noto Sans", sans-serif; 
 
    color: white; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    white-space: nowrap; 
 
}


/* EFECTO HOVER DEL MENÚ */

.menu-principal a:hover {

    color: #dcdcdc;

}


/* DIRECCIÓN */

.menu-dropdown {

    position: relative;

    z-index: 10000;

}


.menu-link {

    cursor: pointer;

}


/* PANEL DESPLEGABLE DE DIRECCIÓN */

.panel-direccion {

    position: absolute;

    top: 100%;

    right: 30px;

    width: 650px;

    max-width: calc(100vw - 40px);

    max-height: 65vh;

    overflow-y: auto;

    padding: 15px;

    background: rgba(0,0,0,0.55);

    border:
        1px solid
        rgba(255,255,255,0.3);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.5);

    z-index: 999999;

    display: none;

}


/* MOSTRAR PANEL */

.panel-direccion.mostrar {

    display: block;

}


/* CATEGORÍAS DEL PANEL */

.categoria-menu {

    margin-bottom: 15px;

    padding-bottom: 15px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.2);

}


.categoria-menu:last-child {

    border-bottom: none;

}


/* TÍTULO "TRÁMITES" */

.categoria-titulo {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: white;

    font-family: "Noto Sans", sans-serif;

    font-size: 16px;

    font-weight: bold;

    padding: 10px;

    cursor: pointer;

}


.categoria-titulo span {

    font-size: 12px;

}


/* LISTA DE TRÁMITES */

.tramites-grid {

    display: none;

    flex-direction: column;

    gap: 4px;

    margin-top: 5px;

}


/* MOSTRAR TRÁMITES AL PASAR EL MOUSE */

/*.categoria-menu:hover .tramites-grid {

    display: flex;

}*/


/* OPCIONES INDIVIDUALES DE TRÁMITES */

.tramites-grid a {

    display: block;

    padding: 10px 14px;

    color: white;

    background:
        rgba(255,255,255,0.05);

    border-radius: 4px;

    font-family: "Noto Sans", sans-serif;

    font-size: 13px;

    line-height: 1.4;

    text-decoration: none;

    white-space: normal;

    transition:
        background 0.2s;

}


/* HOVER DE LOS TRÁMITES */

.tramites-grid a:hover {

    color: white;

    background:
        rgba(255,255,255,0.15);

}


/* CATEGORÍAS SIMPLES
   SERVICIOS
   INFORMACIÓN
   CONTACTO */

.categoria-simple {

    display: block;

    padding: 10px;

    color: white;

    font-family: "Noto Sans", sans-serif;

    font-size: 16px;

}

    .categoria-simple {
        text-transform: none;
    }

/* HOVER CATEGORÍAS */

.categoria-simple:hover {

    background:
        rgba(255,255,255,0.1);

}


/* FLECHAS DEL MENÚ HORIZONTAL */

.menu-flecha {

    display: none;

    flex-shrink: 0;

    width: 40px;

    height: 45px;

    padding: 0;

    border: none;

    border-radius: 0;

    background:
        rgba(0,0,0,0.35);

    color: white;

    font-family: "Noto Sans", sans-serif;

    font-size: 30px;

    font-weight: normal;

    cursor: pointer;

    box-shadow: none;

}


/* HOVER DE LAS FLECHAS */

.menu-flecha:hover {

    background:
        rgba(0,0,0,0.60);

}


/* CARRUSEL PRINCIPAL */

#hero {

    position: relative;

    width: 100%;

    height: 100vh;

    overflow: hidden;

    color: white;

}


/* SLIDES */

.slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.7s ease;

}


/* OSCURECER IMAGEN DEL SLIDE */

.slide::before {

    content: "";

    position: absolute;

    inset: 0;



}


/* SLIDE ACTIVO */

.slide.activo {

    opacity: 1;

    visibility: visible;

    z-index: 1;

}


/* CONTENIDO DEL SLIDE */

.slide-contenido {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;

    padding-left: 4%;
    padding-right: 55%;
    padding-bottom: 190px;
}


 /* TÍTULO DEL SLIDE */

.slide-contenido h1 {

    margin: 0 0 25px;

    font-size:
        clamp(
            30px,
            3.5vw,
            55px
        );

    line-height: 1.05;

    font-weight: 900;

}


/* TEXTO DEL SLIDE */

.slide-contenido p {

    margin: 0 0 30px;

    font-size:
        clamp(
            18px,
            2vw,
            28px
        );

    font-weight: bold;

    line-height: 1.5;

}


/* BOTÓN "CONÓCENOS" */

.slide-contenido button {

    padding: 15px 32px;

    border: none;

    border-radius: 50px;

    background: #2450bd;

    color: white;

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 0.5px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,0.25);

}


/* HOVER DEL BOTÓN */

.slide-contenido button:hover {

    background: #173b91;

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(0,0,0,0.35);

}


/* FLECHAS DEL CARRUSEL */

.carrusel-flecha {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 10;

    width: 55px;

    height: 80px;

    border: none;

    border-radius: 8px;

    background:
        rgba(0,0,0,0.25);

    color: white;

    font-size: 55px;

    font-family: "Noto Sans", sans-serif;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        all 0.25s ease;

}


/* HOVER DE FLECHAS DEL CARRUSEL */

.carrusel-flecha:hover {

    background:
        rgba(0,0,0,0.45);

    transform:
        translateY(-50%)
        scale(1.05);

}


/* POSICIÓN FLECHA IZQUIERDA */

.carrusel-flecha.izquierda {

    left: 0;

}


/* POSICIÓN FLECHA DERECHA */

.carrusel-flecha.derecha {

    right: 0;

}


/* INDICADORES DEL CARRUSEL */

.indicadores {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 10;

    display: flex;

    gap: 12px;

}


/* INDICADOR */

.indicador {

    width: 45px;

    height: 5px;

    background:
        rgba(255,255,255,0.5);

    cursor: pointer;

    transition:
        background 0.3s,
        width 0.3s;

}


/* INDICADOR ACTIVO */

.indicador.activo {

    background: white;

    width: 55px;

}


/* SECCIÓN 1 */

#seccion1 {

    padding: 80px;

}


/* SECCIÓN 2 */

#seccIion2 {

    padding: 80px;

}


/* BOLETÍN */

#boleti {

    min-height: 200px;

}


/* FOOTER */

footer {

    background: #111;

    color: white;

    padding: 20px;

}


footer .container {

    display: flex;

    justify-content: flex-end;

    text-align: right;

}


footer p {

    margin: 0;

}

/* =========================================================
   RESPONSIVE
   Organización por dispositivos:
   - MÓVIL: hasta 767px
   - TABLET: de 768px hasta 990px
   - ESCRITORIO: desde 991px
   ========================================================= */


/* =========================================================
   MÓVIL
   Hasta 767px
   ========================================================= */

@media (max-width: 767px) {

    /* BARRA SUPERIOR */

    .barra-superior {
        position: relative;
        flex-direction: column;
        align-items: center;
        padding: 6px 15px;
        gap: 5px;
    }

    .informacion {
        width: 100%;
        justify-content: center;
    }

    .fila-info {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 12px;
    }

    .info-item,
    .mensaje-emergencia {
        font-size: 11px;
        white-space: normal;
        text-align: center;
    }


    /* REDES SOCIALES */

    .lado-derecho {
        justify-content: center;
    }

    .redes-sociales {
        gap: 15px;
    }

    .redes-sociales a {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }


    /* TÍTULO DE LA SECRETARÍA */

    .titulo-secretaria {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        width: 100%;
        height: auto;
        min-height: 48px;

        padding: 6px 15px;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        font-size: 12px;
        line-height: 1.2;

        white-space: normal;

        background: rgba(0, 0, 0, 0.25);

        z-index: 10;
    }

    .titulo-secretaria img {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
    }


    /* MENÚ PRINCIPAL */

    .menu-principal {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;
        min-height: 50px;

        z-index: 20;
    }

    .menu-opciones {
        justify-content: flex-start;

        min-width: max-content;

        gap: 15px;

        padding: 10px 15px;
    }

    .menu-principal a {
        font-size: 12px;
    }


    /* ÁREA DESLIZABLE DEL MENÚ */

    .menu-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }


    /* PANEL DESPLEGABLE */

    .panel-direccion {
        position: fixed;

        top: 115px;
        left: 10px;
        right: 10px;

        width: auto;
        max-width: none;

        max-height: calc(100vh - 130px);

        z-index: 999999;
    }


    /* TRÁMITES */

    .tramites-grid {
        flex-direction: column;
    }

    .tramites-grid a {
        font-size: 12px;
    }


    /* CARRUSEL */

    #hero {
        height: 100svh;

        padding-left: 0;
        padding-right: 0;
    }

    .slide-contenido {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 110px;
    }

    .slide-contenido h1 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .slide-contenido p {
        font-size: clamp(16px, 4.5vw, 18px);
    }

    .carrusel-flecha {
        width: 40px;
        height: 65px;
        font-size: 40px;
    }

    .indicadores {
        bottom: 18px;
    }

}


/* =========================================================
   TABLET
   De 768px hasta 990px
   ========================================================= */

@media (min-width: 768px) and (max-width: 990px) {

    /* BARRA SUPERIOR */

    .barra-superior {
        flex-wrap: wrap;
        justify-content: center;

        gap: 8px 15px;

        padding: 8px 25px;
    }

    .informacion {
        width: 100%;
        justify-content: center;
    }

    .fila-info {
        justify-content: center;
        flex-wrap: wrap;

        gap: 8px 18px;
    }

    .info-item,
    .mensaje-emergencia {
        font-size: 12px;
    }


    /* REDES SOCIALES */

    .lado-derecho {
        width: 100%;
        justify-content: center;
    }

    .redes-sociales {
        gap: 18px;
    }


    /* TÍTULO DE LA SECRETARÍA */

    .titulo-secretaria {
        left: 25px;
        font-size: 14px;
    }

    .titulo-secretaria img {
        width: 32px;
        height: 32px;
    }


    /* MENÚ */

    .menu-opciones {
        gap: 20px;

        padding-left: 20px;
        padding-right: 25px;
    }

    .menu-principal a {
        font-size: 12px;
    }


    /* PANEL DESPLEGABLE */

    .panel-direccion {
        right: 10px;

        width: calc(100vw - 20px);

        max-height: 70vh;
    }


    /* CARRUSEL */

    .slide-contenido {
        padding-left: 5%;
        padding-right: 35%;
        padding-bottom: 150px;
    }

}


/* =========================================================
   ESCRITORIO
   Desde 991px
   ========================================================= */

@media (min-width: 991px) {

    /*
       Los estilos generales de arriba corresponden al diseño
       de escritorio, por eso no es necesario repetirlos aquí.
    */

}

/* =========================================
   SUBMENÚ DE DIRECCIONES GENERALES
   ========================================= */


/* POLICÍA VIAL */

.categoria-con-submenu {
    position: relative;
}


/* TÍTULO DE POLICÍA VIAL */

.categoria-con-submenu > .categoria-titulo {
    cursor: pointer;
    font-size: 14px;
}


/* =========================================
   SUBMENÚ DE POLICÍA VIAL
   ========================================= */

.categoria-con-submenu {
    position: relative;
}

.submenu-direccion {
    display: none;

    position: relative;

    width: 100%;

    margin: 0;

    padding: 5px 0 5px 15px;

    background: transparent;

    box-sizing: border-box;
}

.submenu-direccion.mostrar {
    display: block;
}


/* MOSTRAR SUBMENÚ */

.submenu-direccion.mostrar {
    display: block;
}


/* =========================================
   TRÁMITES
   ========================================= */

.tramites-categoria {
    position: relative;
    width: 100%;
}

.tramites-categoria > .categoria-titulo {
    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 10px;

    color: white;

    font-size: 14px;

    cursor: pointer;

    background: rgba(255,255,255,0.05);

    border-radius: 4px;
}

.tramites-categoria > .categoria-titulo:hover {
    background: rgba(255,255,255,0.12);
}


/* TÍTULO TRÁMITES */

.tramites-categoria > .categoria-titulo {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: white;

    font-family: "Noto Sans", sans-serif;

    font-size: 15px;

    font-weight: bold;

    padding: 10px;

    cursor: pointer;

    background: rgba(255,255,255,0.05);

    border-radius: 4px;
}


/* HOVER TRÁMITES */

.tramites-categoria > .categoria-titulo:hover {

    background:
        rgba(255,255,255,0.15);

}


/* =========================================
   LISTA DE TRÁMITES
   ========================================= */

/*.tramites-grid {
    display: none;

    flex-direction: column;

    gap: 4px;

    width: 100%;

    margin-top: 5px;

    padding-left: 15px;

    box-sizing: border-box;
}*/

.tramites-grid.mostrar {
    display: flex;
}


.tramites-grid a {
    display: block;

    padding: 9px 12px;

    color: white;

    font-size: 13px;

    line-height: 1.4;

    text-decoration: none;

    background: rgba(255,255,255,0.05);

    border-radius: 4px;

    box-sizing: border-box;
}

.tramites-grid a:hover {
    background: rgba(255,255,255,0.15);
}


/* MOSTRAR TRÁMITES AL DAR CLICK */

.tramites-grid.mostrar {
    display: flex;
}


/* OPCIONES DE TRÁMITES */

.tramites-grid a {

    display: block;

    padding: 10px 14px;

    color: white;

    background:
        rgba(255,255,255,0.05);

    border-radius: 4px;

    font-family: "Noto Sans", sans-serif;

    font-size: 13px;

    line-height: 1.4;

    text-decoration: none;

    white-space: normal;

    transition:
        background 0.2s;
}


/* HOVER DE LOS TRÁMITES */

.tramites-grid a:hover {

    color: white;

    background:
        rgba(255,255,255,0.15);
}


/* =========================================
   DIRECCIONES GENERALES
   ========================================= */

.categoria-simple {

    display: block;

    padding: 10px;

    color: white;

    font-family: "Noto Sans", sans-serif;

    font-size: 14px;

    font-weight: normal;

    text-transform: none;
}


/* HOVER DIRECCIONES */

.categoria-simple:hover {

    background:
        rgba(255,255,255,0.1);
}


/* =========================================
   MÓVIL
   ========================================= */

@media (max-width: 767px) {

    .submenu-direccion {

        position: static;

        width: 100%;

        max-width: none;

        margin-left: 0;

        margin-top: 5px;

    }

}


/* =========================================
   TABLET
   ========================================= */

@media (min-width: 768px) and (max-width: 990px) {

    .submenu-direccion {

        position: static;

        width: 100%;

        max-width: none;

        margin-left: 0;

        margin-top: 5px;

    }

}

/* IGUALAR EL TAMAÑO DE TODAS LAS DIRECCIONES */

.categoria-con-submenu > .categoria-titulo {

    font-size: 14px;

}