/*///////////////////////////////// NAVBAR///////////////////////////////// */
.nav {
    background-color: transparent;
    position: absolute;
    z-index: 1000;
}

.linksTexts {
    color: white;
    position: relative;
    display: inline-block;
    padding: 8px 16px; /* Padding horizontal y vertical para más área */
    font-size: 1.125rem;
    margin-bottom: -8px;
    transition: all 0.3s ease; /* Transición suave */
}

/* Rectángulo amarillo con bordes laterales - forma de pestaña MÁS ALTO */
.linksTexts::before {
    content: '';
    position: absolute;
    width: calc(100% + 28px); /* Más ancho que el elemento */
    height: 30px; /* Alto del rectangulo*/
    top: -40px; /* Para que quede al borde de la pantalla */
    left: -16px; /* Centrado para que se extienda a ambos lados */
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 0 0 15px 15px; /* Bordes redondeados en la parte inferior */
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: none; /* Sin borde inferior para crear la forma de U */
    transition: all 0.3s ease;
    z-index: 2;
}

/* Estilos para el texto en hover y activo */
.linksTexts:hover,
.linksTexts:focus,
.linksTexts:active,
.linksTexts.active {
    color: #e9f104; /* Texto amarillo */
    font-weight: bold; /* Texto en negrita */
}

/* Mostrar la pestaña amarilla en hover, focus, active y cuando está activo */
.linksTexts:hover::before,
.linksTexts:focus::before,
.linksTexts:active::before,
.linksTexts.active::before {
    color: #e9f104;
    background-color: #e9f104; /* Fondo amarillo */
    border-top: 2px solid #e9f104; /* Borde superior amarillo */
    border-left: 2px solid #e9f104; /* Borde izquierdo amarillo */
    border-right: 2px solid #e9f104; /* Borde derecho amarillo */
}

/* Eliminar el pseudo-elemento ::after ya que no lo necesitamos */
.linksTexts::after {
    display: none;
}

/* RESPONSIVE STYLES - Tablet */
@media (min-width: 768px) and (max-width: 1535px) {
    .nav {
        padding: 1rem;
    }
}

/* RESPONSIVE STYLES - Mobile y pantallas hasta 2xl (1535px) */
@media (max-width: 1535px) {
    /* Quitar el rectángulo amarillo de arriba en móvil */
    #mobile-menu-items .linksTexts::before {
        display: none !important;
    }
    
    /* Quitar las líneas de abajo en móvil */
    #mobile-menu-items .linksTexts {
        width: fit-content;
        border-bottom: none; /* Eliminar línea de abajo */
        padding-bottom: 8px; /* Mantener padding normal */
        margin-bottom: 0;
    }
    
    /* Mantener solo el efecto de color en hover/active para móvil */
    #mobile-menu-items .linksTexts:hover,
    #mobile-menu-items .linksTexts:focus,
    #mobile-menu-items .linksTexts:active,
    #mobile-menu-items .linksTexts.active {
        color: #e9f104;
        font-weight: bold;
    }
}

@media (max-width: 1535px) {
    /* Quitar el rectángulo amarillo de arriba en móvil */
    #mobile-menu-items-alt .linksTexts::before {
        display: none !important;
    }
    
    /* Quitar las líneas de abajo en móvil */
    #mobile-menu-items-alt .linksTexts {
        width: fit-content;
        border-bottom: none; /* Eliminar línea de abajo */
        padding-bottom: 8px; /* Mantener padding normal */
        margin-bottom: 0;
    }
    
    /* Mantener solo el efecto de color en hover/active para móvil */
    #mobile-menu-items-alt .linksTexts:hover,
    #mobile-menu-items-alt .linksTexts:focus,
    #mobile-menu-items-alt .linksTexts:active,
    #mobile-menu-items-alt .linksTexts.active {
        color: #e9f104;
        font-weight: bold;
    }
}
/* ------------------------------ */
.projects {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    position: relative;
    top: -60px;
    z-index: 1000;
}

.gradientBG {
    background: rgb(38, 163, 90);
    background: radial-gradient(circle, rgba(38, 163, 90, 1) 0%, rgba(23, 100, 52, 1) 100%);
}

.gradientBG2 {
    background: rgb(23, 100, 52);
    background: linear-gradient(0deg, rgba(23, 100, 52, 1) 31%, rgba(38, 163, 90, 1) 62%);
}

.gradientBG3 {
    background: rgb(38, 163, 90);
    background: linear-gradient(0deg, rgba(38, 163, 90, 1) 8%, rgba(23, 100, 52, 1) 57%);
}

.textYellow {
    color: #e9f104;
}

/* ------------------------------ */
/*///////////////////////////////// HERO ///////////////////////////////// */
.btnBorder {
    border: 1px solid white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.btnBorder:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn {
    background-color: #084c08;
    color: white;
    border-radius: 8px;
    width: max-content;
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 24px;
}

.btnBorder {
    /* border:  2px solid white ;
    color: white; */
    border-radius: 8px;
    width: max-content;
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 24px;
    transition: all 0.3s ease;

}

/* NOTICIAS */
.newsCard {
    position: relative;
    /* background: #f0f0f0; Color de fondo del contenedor */
    border-radius: 8px;
    /* Aseguramos que no haya otros bordes */
}

.cutout {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background: #f0f0f0;
    /*Coincide con el fondo*/
    border-top-right-radius: 100px;
    /* Crea el radio "hacia adentro" */
    z-index: 1;
}


/*///////////////////////////////// TELETURISMO///////////////////////////////// */
.textGreen {
    color: #015c22;

}

.bgGreen {
    background-color: #015c22;

}

/*///////////////////////////////// MUNICIPALIDAD///////////////////////////////// */
.bgImage {
    background: linear-gradient(rgba(5, 82, 18, 0.7), rgba(5, 82, 18, 0.7)), url("/images/fondoMuni.jpg");
}

.textGreen2 {
    color: #055212;
}

.btnYellow {

    background-color: #e9f104;
    color: #055212;
    
}

.btnGreen {

    background-color: #055212;
    color: #e9f104;
    border-radius: 8px;
    width: max-content;
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 24px;
    padding-right: 24px;
}


.bgYellow {
    background-color: #e9f104;

}

.gover {
    z-index: 1000;
}

/*///////////////////////////////// PMDM///////////////////////////////// */
.bgImage2 {
    background: linear-gradient(rgba(5, 82, 18, 0.7), rgba(5, 82, 18, 0.7)), url("/images/fondoPmdm.png");
    background-size: cover;
    background-position: center;
}
.pdmBgColor{
    background-color: #007b3d;
}
.pdmBgLightColor{
    background-color: #39B54A;
}
/*///////////////////////////////// GOBIERNO DIGITAL ///////////////////////////////// */


.btnWhite {
    background-color: white;
    color: #015c22;
    border-radius: 8px;
    width: max-content;
    display: inline-block;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
}

.consult {
    z-index: 1000;

}


.bgImg {
    background: linear-gradient(rgba(5, 82, 18, 0.7), rgba(5, 82, 18, 0.7)), url("/images/traFondo2.png");
    /* background: linear-gradient(rgba(5, 82, 18, 0.7), rgba(5, 82, 18, 0.7)), url("/images/traFondo.png"); */
}

 
/*///////////////////////////////// servicios ///////////////////////////////// */
.greenBG{
    background-color: #009345;
}

.textYellow{
    color: #e9f104;
}
.patternBG {
  /* background: url("/images/light-pattern.png"); */
  background: url("/images/light-pattern.webp");
  background-repeat: no-repeat;
  background-size: cover; 
  background-position: center;
}



.footerBG {
    /* background: url("/images/footerBG.png"); */
    background: url("/images/footerBG.jpg");
    background-size: cover;
    background-position: center;
}

.homeStartBG {
    /* background: url("/images/inicio-start.png"); */
    background:linear-gradient(rgba(0, 66, 25, 0.8), rgba(0, 66, 25, 0.8))
 , url("/images/inicio-start.jpg");
    background-size: cover;
    background-position: center;
}
.coorBG {
    /* background: url("/images/coorPattern.svg"); */
    /* background: url("/images/coorPattern.png"); */
    background: url("/images/coorPattern.webp");
    background-size: cover;
    background-position: center;
}

.misVisBG {
    /* background: url("/images/misVis.png"); */
    background: url("/images/misVis.jpg");
    background-size: cover;
    background-position: center;
}
.teleinBG {
    /* background: url("/images/teleinBanner.png"); */
    background:linear-gradient(rgba(0, 66, 25, 0.8), rgba(0, 66, 25, 0.8))
 , url("/images/teleinBanner.jpg");
    background-size: cover;
    background-position: center;
}
.MuniBG {
    background: linear-gradient(rgba(0, 66, 25, 0.9), rgba(0, 66, 25, 0.9))
 ,url("/images/muniBanner.jpg");
    background-size: cover;
    background-position: center;
}
.gobBG {
    /* background: url("/images/gobBanner.png"); */
    background: linear-gradient(rgba(0, 66, 25, 0.8), rgba(0, 66, 25, 0.8))
, url("/images/gobBanner.jpg");
    background-size: cover;
    background-position: center;
}
.infoBG {
    /* background: url("/images/infoBanner.png"); */
    background: linear-gradient(rgba(0, 66, 25, 0.8), rgba(0, 66, 25, 0.8))
, url("/images/infoBanner.jpg");
    background-size: cover;
    background-position: center;
}
.patternGreenBG {
    background: url("/images/patterngreen.jpg");
    background-size: cover;
    background-position: center;
}
.homeOneBG {
    background: url("/images/casa1.png");
    background-size: cover;
    background-position: center;
}
.homeTwoBG {
    background: url("/images/casa2.jpg");
    background-size: cover;
    background-position: center;
}


.darkGreenBG{
    background-color: #006837;
   
}

.CoopExBG {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/images/coop-banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.coopExRequisitosBG {
    background: linear-gradient(rgba(0, 66, 25, 0.8), rgba(0, 66, 25, 0.8))
, url("/images/requisitos.jpg");
    background-size: cover;
    background-position: center;
}
.desHumImgBG {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("/images/servicios-ofrece.jpg");
    background-size: cover;
    background-position: center;
}