@font-face{
    font-family: LeagueSpartan;
    src: url(../views/fonts/League_Spartan/LeagueSpartan-VariableFont_wght.ttf);
}


:root{
    --primary-color:#004eaa;
    --secondary-color:#ffffff;
    --words:#793E87;
    --backgrounds-cards:white;
}



body{
    min-height: 100vh;
    border: 1px solid black;
    font-family: LeagueSpartan;
    
    
}
nav{
    position: fixed;
    width: 100%;
    min-height: 100px;
    background: var(--primary-color); 
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4% 0 4%;
    box-shadow: 0px 2px 8px rgb(0,0,0,40%);
    z-index: 10000;
    
}
.menu{
    padding: 0;
    & ul {
        display: flex;
        list-style: none;
        color: white;
        padding: 0;
        
        gap: 10px;
        & li a{
            padding: 0px;
            color: white;
            text-decoration: none;
            text-transform: uppercase;
            font-family: LeagueSpartan;
            font-size: 20px;
            transition: color 0.3s ease;
            
        }
        & li a:hover{
            color: var(--secondary-color);
        }
        & li:first-child{
            font-weight: bold;
        }
    }
}

.navbar .dropdown-toggle::after { display: none; } 
    .navbar .nav-link { color: #242424; }  
    .navbar .nav-link:hover { color: #8AB6E1; } 

    .dropdown-menu {
      border: none;
      border-radius: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      padding: .5rem;
    }
    .dropdown-menu .dropdown-item {
      color: #707070; 
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dropdown-menu .dropdown-item:hover {
      background-color: #8AB6E1; 
      color: #fff;
    }

    /* Navbar sticky y con sombra */
.navbar {
  position: fixed;
  top: 0;
  z-index: 1030;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



nav .logo img{
    width: 204px;
}

/* ? HEROSECCTION START*/
.hero
{
    height: 633px;
    /*border: 1px solid lightgreen;*/
    background: var(--secondary-color);
    
    display: flex;
    gap: 15%;
    
    
}
.hero .title
{
    /*border: 1px solid blueviolet;*/
    max-width: 65%;
    justify-self: center;
    
}
.hero .description
{
    /*border: 1px solid blueviolet;*/
    max-width: 65%;
    justify-self: center;
    
}

.hero .description p
{
    max-width: 50%;
    font-weight: 400;
    font-size: 20px;
    color: var(--words);
    padding: 0;
    margin: 0;
    line-height: 1.1;
    font-family: LeagueSpartan;
  
    
}
.text-content{

    max-width: 50%;
    position: relative;
    height: fit-content;
    top:200px;
    & h1{
        font-family: LeagueSpartan;
        font-weight:800;
        font-size: 52px;
        color: var(--words);
        opacity: 0; transform: translateY(40px);
        animation: revealUp .8s ease-out forwards;

        
         

    }
}

.hero figure{
    margin-top: 10%;

}

.hero figure img{
    width: 500px;
}

@media (max-width: 1400px){
    
.text-content{
    & h1{
        font-size: 45px;

    }
    
}

}

@media (max-width: 1300px){
    
.text-content{
    & h1{
        font-size: 40px;

    }
    
}

}

@media (max-width: 1200px){
    
.text-content{
    & h1{
        font-size: 30px;

    }
    
}

}

@media (max-width: 1150px){
    
.hero
{
   
    
    display: flex;
    flex-direction: column;
    gap: 15%;
    height: auto;
    
}
.text-content{
    max-width: 100%;
    top: 140px;
    & h1{
        font-size: 50px;

    }
}
.hero .description p{
    max-width: 100%;
}
.hero figure img{
    max-width: 100%;
    margin-top: 20%;
}

}


@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  20%{ transform: translateY(-4px); }
  40%{ transform: translateY(0); }
  60%{ transform: translateY(-2px); }
  80%,100%{ transform: translateY(0); }
}
    


/* ? HEROSECCTION END*/



/* ? carrosel start*/
.carrosel{
    background: var(--primary-color);
    min-height: 100vh;
    display: flex;
    
    justify-content: center;
    align-content: center;
    align-items: center;
}

.container-carrosel{
    min-height: 667px;
    max-width: 1000px;

}

.container-carrosel .carousel {
  border-radius: 18px;      /* ajusta el radio a tu gusto */
  overflow: hidden;         /* recorta hijos (img, captions, controles) */
  box-shadow: 0 8px 24px rgba(0,0,0,.15); /* opcional */
}

.container-carrosel .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%;
}


.carousel-caption{
    background: rgb(0, 0, 0, .35);
    border-radius: 12px;
}

/* ? carrosel end*/

/* ?SECCTION NOSOTROS START*/

.nosotros{
    min-height: 100vh;
    background: var(--secondary-color);
    display: grid;
    grid-template-rows: 100px 400px 100px 400px;
    grid-auto-rows: 200px;
    grid-template-areas: 
    "nosotrosTitle nosotrosTitle nosotrosTitle nosotrosTitle"
    "nosotrosCardMision nosotrosCardMision nosotrosCardVision nosotrosCardVision "
    "nosotrosTitle2 nosotrosTitle2 nosotrosTitle2 nosotrosTitle2"
    "nosotrosPrograma1 nosotrosPrograma2 nosotrosPrograma3 nosotrosPrograma4";
    padding-left: 10%;
    padding-right: 10%;
   


}
/*.nosotros >div{
    border: 1px solid black;
}*/
.nosotros-title{
    grid-area: nosotrosTitle;
    display: flex;
    justify-content: center;
    align-items: center;
    & h1{
        color: var(--words);
        font-weight: 800;
        font-size: 64px;
    }
}
.nosotros-cardmision{
    grid-area: nosotrosCardMision;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nosotros-cardvision{
    grid-area: nosotrosCardVision;
     display: flex;
    justify-content: center;
    align-items: center;
}
.nosotros .card {
    
    width:80%;
    height: 100%;
    margin: 0;
    border-radius: 15px;
    background: var(--backgrounds-cards);
    border: 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
}

.nosotros .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.nosotros .card h5{
    display: flex;
    justify-content: center;
   
    font-weight: 800;
    color: var(--words);
    font-size: 48px;

}
.nosotros .card p{
    color: black;
    font-size: 20px;
    line-height: 1.2;
    padding-left: 5%;
    padding-right: 5%;
}


.nosotros-title2{
    grid-area: nosotrosTitle2;
    display: flex;
    justify-content: center;
    align-items: center;
     & h1{
        color: var(--words);
        font-weight: 800;
        font-size: 64px;
    }
}
.nosotros-programa1{
    grid-area: nosotrosPrograma1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.nosotros-programa2{
    grid-area: nosotrosPrograma2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.nosotros-programa3{
    grid-area: nosotrosPrograma3;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.nosotros-programa4{
    grid-area: nosotrosPrograma4;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    & ul li{
        list-style: none;
        line-height: 1.2;
    }
}
.nosotros img{
    width: 150px;
}
.title-programs{
    color: var(--words);
    font-size:32px ;
    font-weight: 700;
    
    max-width: 40%;
    text-align: center;
}
.nosotros ul li{
    color: var(--words);
    font-size: 20px;
    font-weight: 400;
}
.nosotros-programa1, .nosotros-programa2, .nosotros-programa3{
    border-right: 5px solid var(--words);
    
}

.nosotros-programa1 img,
.nosotros-programa2 img,
.nosotros-programa3 img,
.nosotros-programa4 img{
  display: block;
  width: auto;            
  height: 160px;          
  object-fit: contain;    
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
  
}
.nosotros-programa1 img:hover,
.nosotros-programa2 img:hover,
.nosotros-programa3 img:hover,
.nosotros-programa4 img:hover{
  transform: scale(1.1);
}


@media (max-width: 1180px) {
    .nosotros .card p{
        font-size: 18px;
        
    }
    .title-programs{
        font-size:25px ;

    }
    
}

@media (max-width: 990px){
    .nosotros .card p{
        font-size: 16px;
        
    }
    .title-programs{
        font-size:22px ;

    }
}



/* Cada bloque (1–4) como columna centrada */




/* ?SECCTION NOSOTROS END*/


/*? SECCTION CAROUSEL NOTICIAS START*/
.carousel-noticias{
    
    background: var(--secondary-color);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 50vh;
    
}
.title-noticias{
    font-size: 48px;
    font-weight: 800;
    color: var(--words);
}

#noticiasCarousel .card-body{
    background: var(--secondary-color);
    color: #3D3040;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
}

#noticiasCarousel{
    /*border: 1px solid black;*/
    max-width: 80%;
    display: flex;
    justify-content: center;
    
}

.object-fit-cover > img { object-fit: cover; }
.card-img-top { height: 220px; object-fit: cover; }

/* Opcional: flechas más separadas */
.carousel-control-prev, .carousel-control-next {
  width: 4rem;
  z-index: 10000 !important;
  color: violet !important;
}
#noticiasCarousel .carousel-control-prev,
#noticiasCarousel .carousel-control-next{
  width: 4rem;          /* más área clickeable */
  opacity: 1;           /* por si BS los baja al 0.5 */
  z-index: 10;          /* por encima de tarjetas/overlays */
}
#noticiasCarousel{
  --bs-carousel-control-color: #6f2dbd !important;   /* morado */
  --bs-carousel-control-opacity: 1;       /* 100% opacidad */
  --bs-carousel-control-hover-opacity: 1;
}

/*? SECCTION CAROUSEL NOTICIAS END*/


/*? SECCTION CATALOGO y CONVOCATORIAS */

.catalogo-piezas-convocatorias{
    min-height: 100vh;
    display: grid;
    
   grid-template-areas: "CatalogoPiezas Convocatorias";
    background: var(--primary-color);
    padding-left: 10%;
    padding-right: 10%;
}




.catalogo-piezas-convocatorias img{
    width: 200px;
}
.btn-primary{
    background-color: var(--words);
    border: #6f2dbd;
    transition: all 0.3s ease;
}
.btn-primary:hover
{
    background-color: #954fe6 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.div-catalogo-piezas h1, .div-convocatorias h1{
    font-size: 48px;
    font-weight: 800;
    color: white;

}
.div-catalogo-piezas P, .div-convocatorias p{
    font-size: 24px;
    font-weight: 600;
    color: white;
    
    max-width: 40%; 
    text-align: center;
    line-height: 1.1;

}
.div-catalogo-piezas, .div-convocatorias{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2%;
}
.div-catalogo-piezas{
    grid-area: CatalogoPiezas;
}
.div-convocatorias{
    grid-area: Convocatorias;
}

.catalogo-piezas-convocatorias img{
        display: block;
        width: auto;            
        height: 400px;          
        object-fit: contain;    
        border-radius: 15px;
        box-shadow: 5px 5px 10px black;
}

.section-sucursales{
    background: var(--secondary-color);
    min-height: 100vh;
    display: grid;
    grid-template-rows: 100px 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
    "SecursalesTitle SecursalesTitle SecursalesTitle SecursalesTitle"
    "Map Map SucursalCihu SucursalJuarez"
    "Map Map SucursalParral SucursalCreel";
    gap: 20px;
    padding: 20px;
    
}


.section-sucursales-title{
    grid-area: SecursalesTitle;
    display: flex;
    justify-content: center;
    align-items: center;
    & h1{
        font-size: 48px;
        font-weight: 800;
        color: var(--words);
    }
}
.map{
    grid-area: Map;
}
.sucursal-chih-heroes{
    grid-area: SucursalCihu;
}
.sucursal-chih-heroes,
 .sucursal-juarez,
 .sucursal-parral,
 .sucursal-creel{
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.sucursal-chih-heroes .card,
 .sucursal-juarez .card,
 .sucursal-parral .card,
 .sucursal-creel .card
 {
    width: 90%;
    height: fit-content;
    background: var(--primary-color);
    border-radius: 15px;
    border: 0;
    box-shadow: 5px 5px 10px var(--primary-color);
}
.sucursal-chih-heroes .card-body p, 
.sucursal-juarez .card-body p,
.sucursal-parral .card-body p,
.sucursal-creel .card-body p

{
    color: white;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}
.sucursal-chih-heroes .card-body, 
.sucursal-juarez .card-body,
.sucursal-parral .card-body,
.sucursal-creel .card-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}




.sucursal-chih-heroes h5, 
.sucursal-juarez h5,
.sucursal-parral h5,
.sucursal-creel h5
{
    color: white;
    text-align: center;

}
.sucursal-juarez{
    grid-area: SucursalJuarez;
}
.sucursal-parral{
    grid-area: SucursalParral;
}
.sucursal-creel{
    grid-area: SucursalCreel;
}

.section-sucursales img{
    display: block;
    width: 90%;
    height: 200px;
    object-fit: contain;
    border-radius: 10% !important;
    margin: 0;
    
    

}
.map{
    padding: 8%;
}
#map{
    border: 10px solid var(--primary-color);
    border-radius: 50px;
}





footer{
    background: var(--primary-color);
    color: white;
}

.whatsapp-btn{
    position: absolute;
   top: 0;
   right: 0;
    z-index: 1000;
}


@media (max-width: 950px){
    .nosotros{
        display: grid;
       row-gap: 2%;

        grid-template-rows: 100px 1fr 1fr 100px 1fr 1fr 1fr 1fr;


        grid-template-areas: 
            "nosotrosTitle "
            "nosotrosCardMision"
            "nosotrosCardVision"
            "nosotrosTitle2"
            "nosotrosPrograma1"
            "nosotrosPrograma2"
            "nosotrosPrograma3"
            "nosotrosPrograma4";
            
        }
        .nosotros-title2{
            text-align: center;
        }
   

    .nosotros-programa1, .nosotros-programa2, .nosotros-programa3{
    border-right: 0;
    
    }

    .catalogo-piezas-convocatorias{
    min-height: 100vh;
    display: grid;
    
    grid-template-rows: 1fr 1fr;
    
   grid-template-areas: 
   "CatalogoPiezas"
   "Convocatorias";
    background: var(--primary-color);
    
}
.section-sucursales{
    background: var(--secondary-color);
    min-height: 100vh;
    display: grid;
    grid-template-rows: 100px 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "SecursalesTitle"
    "Map"
    "SucursalCihu"
    "SucursalJuarez"
    "SucursalParral"
    "SucursalCreel";
    
}
.catalogo-piezas-convocatorias img{
        
        width: 100%;            
        height: auto;          
          
}
.container-carrosel {
    min-height: auto;
}
.carrosel{
    min-height: auto;
    padding: 5%;
}

    
}