@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;800&display=swap');

:root{
   --red:#0042f7;
   --orange:#f39c12;
   --orange2:#000000f6;
   --blue:#0080f7;
   --black:#333;
   --white:#fff;
   --light-bg:#f5f5f5;
   --light-color:#666;
   --border:.1rem solid var(--light-color);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
   font-family: 'Nunito', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   transition: .2s linear; 
}

::-webkit-scrollbar{
   width: 1rem;
   height: .5rem;
}

::-webkit-scrollbar-track{
   background-color: transparent;
}

::-webkit-scrollbar-thumb{
   background-color: var(--red);
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 7rem;
}

body{
   background: var(--light-bg);
}

section{
   padding:2rem;
   margin:0 auto;
   max-width: 1200px;
}

.heading{
   text-align: center;
   margin-bottom: 2rem;
   font-size: 4rem;
   color:var(--black);
   text-transform: uppercase;
}

.boton{
   display: block;
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 2rem;
   color:var(--white);
   background-color: var(--red);
   cursor: pointer;
   text-transform: capitalize;
   text-align: center;
}

.boton:hover{
   background-color:var(--black);
}

.message{
   position: sticky;
   top:0;
   max-width: 1200px;
   margin:0 auto;
   background-color: var(--light-bg);
   padding:2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1.5rem;
   z-index: 10000;
}

.message span{
   font-size: 2rem;
   color:var(--black);
}

.message i{
   font-size: 2.5rem;
   cursor: pointer;
   color:var(--red);
}

.message i:hover{
   color:var(--black);
}

.empty{
   padding:1.5rem;
   background: var(--white);
   color:var(--red);
   border-radius: .5rem;
   border:var(--border);
   font-size: 2rem;
   text-align: center;
   box-shadow: var(--box-shadow);
   text-transform: capitalize;
}

.header{
   position:sticky;
   top:0; left:0; right:0;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   z-index: 1000;
}

.header .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
}

.header .flex .logo{
   font-size: 2.5rem;
   color:var(--black);
}

.header .flex .logo span{
   color: var(--red);
}

.header .flex .navbar a{
   margin:0 1rem;
   font-size: 2.2rem;
   color:var(--black);
}

.header .flex .navbar a:hover{
   text-decoration: underline;
   color:var(--red);
}

.header .flex .icons div{
   font-size: 2.5rem;
   color:var(--light-color);
   cursor: pointer;
   margin-left: 1.7rem;
}

.header .flex .icons div:hover{
   color:var(--red);
}

.header .flex .icons div span{
   font-size: 2rem;
}

@keyframes fadeLeft{
   0%{
      transform: translateX(5rem);
   }
}

@keyframes fadeRight{
   0%{
      transform: translateX(-5rem);
   }
}

.home-bg{
   background:url(../img/wallpaper_blue.png) no-repeat;
   background-size: cover;
   background-position: center;
   padding-top: 4rem;
   overflow-x: hidden;
}

.home-bg .home .slide-container .slide{
   display: none;
   align-items: center;
   gap:1.5rem;
   flex-wrap: wrap;
}

.home-bg .home .slide-container .slide.active{
   display: flex;
}

.home-bg .home .slide-container .slide .image{
   flex:1 1 40rem;
   animation: fadeRight .4s linear;
}

.home-bg .home .slide-container .slide .image img{
   width: 50%;
}
.home-bg .home .slide-container .slide .content{
   flex:1 1 40rem;
   text-align: center;
   animation: fadeLeft .4s linear;
}

.home-bg .home .slide-container .slide .content h3{
   color:var(--blue);
   margin-bottom: 3rem;
   text-transform: capitalize;
   font-size: 4.5rem;
   text-shadow: var(--box-shadow);
   line-height: 1;
   text-align: center;
}

.home-bg .home .slide-container .slide .content span{
   color:var(--orange2);
   margin-bottom: 3rem;
   text-transform: capitalize;
   font-size: 6.5rem;
   text-shadow: var(--box-shadow);
   line-height: 1;
   text-align: center;
}

.home-bg .home .slide-container .slide .content .fa-angle-left,
.home-bg .home .slide-container .slide .content .fa-angle-right{
   height: 5rem;
   width: 5rem;
   line-height: 4.8rem;
   font-size: 2rem;
   color:var(--black);
   background-color: var(--white);
   margin:0 .5rem;
   box-shadow: var(--box-shadow);
   cursor: pointer;
   border-radius: .5rem;
}

.home-bg .home .slide-container .slide .content .fa-angle-left:hover,
.home-bg .home .slide-container .slide .content .fa-angle-right:hover{
   background-color: var(--red);
   color:var(--white);
}


.product-card {
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
   padding: 15px;
   transition: transform .2s ease;
}

.product-card:hover {
   transform: translateY(-3px);
}

.product-img {
   width: 40%;
   height: 40px;
   object-fit: cover;
   border-radius: 10px;
}

.price {
   font-size: 1.3rem;
   font-weight: bold;
   color: #198754;
}

.about{
   display:flex;
   align-items:center;
   justify-content:center;
}

.about .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.about .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
   text-align: center;
   box-shadow: var(--box-shadow);
}

.about .box-container .box img{
   width: 100%;
   margin-bottom: 2rem;
}

.about .box-container .box h3{
   font-size: 2.5rem;
   color:var(--black);
}

.about .box-container .box p{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   color:var(--light-color);
}

.reviews .slide{
   padding:2rem;
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
   border:var(--border);
   margin-bottom: 5rem;
   user-select: none;
}

.reviews .slide img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   margin-bottom: .5rem;
}

.reviews .slide p{
   padding:1rem 0;
   line-height: 2;
   font-size: 2.5rem;
   color:var(--black);
   font-weight: bold;
}

.reviews .slide .stars{
   display: inline-block;
   margin-bottom: 1rem;
   background-color: var(--light-bg);
   padding:1rem 1.5rem;
   border-radius: .5rem;
}

.reviews .slide .stars i{
   margin:0 .3rem;
   font-size: 1.7rem;
   color:var(--orange);
}

.reviews .slide h2{
   font-size: 2rem;
   color:var(--orange);
}

.reviews .slide span{
   font-size: 2rem;
   color:var(--orange);
}

.menu .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.menu .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
   text-align: center;
   box-shadow: var(--box-shadow);
   position: relative;
}

.menu .box-container .box img{
   width: 100%;
   margin-bottom: 1rem;
}

.menu .box-container .box .price{
   background-color: var(--black);
   border-radius: .5rem;
   padding:.5rem 1rem;
   font-size: 1.7rem;
   color:var(--white);
   position: absolute;
   top:1rem; left:1rem;
}

.menu .box-container .box .price span{
   font-size: 2.5rem;
}

.menu .box-container .box .name{
   font-size: 8rem;
   color:var(--black);
   margin:.5rem 0;
}

.menu .box-container .box form{
   display: flex;
   gap:1rem;
}

.menu .box-container .box form .qty{
   width: 8rem;
   border:var(--border);
   padding:1rem;
   margin-top: 1rem;
   border-radius: .5rem;
   font-size: 6.8rem;
   color:var(--black);
}

.event .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
}

.event .row .image{
   flex:1 1 40rem;
}

.event .row .image img{
   width: 100%;
}

.event .row .content{
   flex:1 1 40rem;
}

.event .row .content h3{
   font-size: 3rem;
   color:var(--black);
   font-family: Sweet Salty-Regular, sans-serif;
}

.event .row .content h2{
   font-size: 2rem;
   color:var(--black);
   font-family: Sweet Salty-Regular, sans-serif;
}

.event .row .content a{
   font-size: 2rem;
}

.event .row .content p{
   line-height: 2;
   font-size: 1.5rem;
   color:var(--black);
   padding:1rem 0;
}

.event .row .content .btn{
   display: inline-block;
   width: auto;
}

.faq .accordion-container{
   max-width: 70rem;
   margin:0 auto;
}

.faq .accordion-container .accordion{
   margin:1.5rem 0;
   box-shadow: var(--box-shadow);
}

.faq .accordion-container .accordion .accordion-heading{
   padding:1.5rem;
   background: var(--black);
   color:var(--white);
   cursor: pointer;
   font-size: 2rem;
   align-items: center;
   justify-content: space-between;
   gap:1.5rem;
}

.faq .accordion-container .accordion .accrodion-content{
   padding:2rem;
   background-color: var(--white);
   line-height: 2;
   color:var(--light-color);
   font-size: 1.6rem;
   display: none;
}


.faq .accordion-container .accordion.active .accordion-heading{
   background: var(--red);
}

.faq .accordion-container .accordion.active .accordion-heading i{
   transform: rotate(180deg);
}

.footer .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.footer .box-container .box{
   padding:2rem;
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.footer .box-container .box i{
   height: 6rem;
   width: 6rem;
   line-height: 6rem;
   font-size: 2rem;
   color:var(--white);
   background-color: var(--red);
   border-radius: 50%;
   margin-bottom: .5rem;
}

.footer .box-container .box a{
   height: 6rem;
   width: 6rem;
   line-height: 6rem;
   font-size: 2rem;
   color:var(--white);
   margin-bottom: .5rem;
}

.footer .box-container .box h3{
   margin:1rem 0;
   color:var(--black);
   text-transform: capitalize;
   font-size: 2rem;
}

.footer .box-container .box p{
   line-height: 2;
   font-size: 1.6rem;
   color:var(--light-color);
}


.footer .credit{
   text-align: center;
   margin-top: 3rem;
   padding:1rem 0;
   padding-top: 3rem;
   border-top: var(--border);
   font-size: 2rem;
   color:var(--black);
   /* padding-bottom: 8rem; */
}

.footer .credit span{
   color: var(--red);
}

tbody{
   color: var(--black);
   font-weight: bold;
}
tr td{
   color: var(--black);
   font-weight: bold;
}

#textarea{
   width: 100%;
   padding:1.4rem;
   font-size: 2rem;
   font-weight: bold;
   color:var(--black);
   border: 1px solid black;
   border-radius: .5rem;
   border:var(--border);
   background-color: var(--light-bg);
   margin:1rem 0;
}

/* CONTENEDOR */
.contact-container{
    background:#ffffff;
    border-radius:20px;
    padding:50px;
    width:100%;
    max-width:750px;
    box-shadow:0 20px 40px rgba(0,0,0,0.2);
}

/* TITULO */
.titulo{
    text-align:center;
    font-weight:700;
    margin-bottom:40px;
    letter-spacing:2px;
}

/* ITEMS */
.contact-item{
    display:flex;
    align-items:center;
    padding:20px;
    border-radius:12px;
    transition:0.3s;
    height:100%;
}

/* Hover */
.contact-item:hover{
    background:#f4f6ff;
    transform:translateY(-5px);
}

/* ICONOS */
.icon{
    font-size:26px;
    color:#2f6df6;
    width:45px;
}

/* TEXTOS */
.label{
    font-weight:700;
    margin-bottom:3px;
}

.value{
    margin:0;
    font-size:16px;
    font-weight:500;
}

/* ANIMACIÓN SCROLL */
.scroll-animate{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

.scroll-animate.show{
    opacity:1;
    transform:translateY(0);
}

/* TITULO */
.titulo-carrera{
    margin-top:60px;
    margin-bottom:50px;
    font-size:48px;
    font-weight:700;
    text-align:center;
}

/* CARDS */
.card-carrera{
    background:#b8c0f3;
    border-radius:30px;
    padding:40px 20px;
    text-align:center;
    transition:0.3s ease;
}

.card-carrera:hover{
    transform:translateY(-5px);
}

.card-carrera img{
    width:130px;
    margin-bottom:20px;
}

.card-carrera h3{
    font-weight:700;
    margin-bottom:10px;
}

.card-carrera p{
    font-weight:600;
}

.new-slider {
   padding: 2rem 9%;
   text-align: center;
}

.new-slider .heading {
   margin-bottom: 3rem;
   font-size: 3rem;
   color: #333;
}

.new-slider .swiper-slide {
   position: relative;
   text-align: center;
   background: #fff;
   border-radius: .5rem;
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
   padding-bottom: 2rem;
   margin-bottom: 4rem;
   /* Space for pagination */
}

.new-slider .swiper-slide img {
   width: 100%;
   height: 300px;
   /* Adjust as needed */
   object-fit: cover;
   border-top-left-radius: .5rem;
   border-top-right-radius: .5rem;
}

.new-slider .swiper-slide .text-content {
   padding: 1.5rem;
}

.new-slider .swiper-slide .text-content h3 {
   font-size: 2rem;
   color: #333;
   margin-bottom: 1rem;
}

.new-slider .swiper-slide .text-content p {
   font-size: 1.6rem;
   color: #666;
   line-height: 1.8;
}

.new-slider .swiper-pagination-bullet {
   background: var(--main-color);
   /* Use your theme's main color */
}

.new-slider .swiper-pagination-bullet-active {
   background: var(--main-color);
}

/* Estilos para el nuevo slider de imágenes */
.image-slider {
   width: 100%;
   overflow: hidden;
}

.image-slider .swiper-slide img {
   width: 100%;
   height: auto;
   display: block;
}

/* RESPONSIVE */
@media(max-width:576px){
    .contact-container{
        padding:25px 15px;
    }

    .label{
        font-size:13px;
    }

    .value{
        font-size:13px;
    }

    /* Email aún más pequeño */
    .email-text{
        font-size:11px;
        word-break:break-all;
    }
}

@media (max-width:991px){

   html{
      font-size: 55%;
   }
   
}

@media (max-width:768px){

   #menu-btn{
      display: inline-block;
   }

   .header .flex .navbar{
      position: absolute;
      top:99%; left:0; right:0;
      background-color: var(--white);
      border-top: var(--border);
      border-bottom: var(--border);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .flex .navbar.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }

   .header .flex .navbar a{
      display: block;
      margin:2rem;
   }

   .home-bg .home .slide-container .slide .content h3{
      font-size: 4rem;
   }

   .order form .flex .inputBox{
      width: 100%;
   }

}

@media (max-width:450px){

   html{
      font-size: 50%;
   }

   .heading{
      font-size: 3rem;
   }

   .my-orders{
      width: 100%;
      border-left: 0;
   }

   .shopping-cart{
      width: 100%;
      border-left: 0;
   }

   .about .box-container{
      grid-template-columns: 1fr;
   }

   .menu .box-container{
      grid-template-columns: 1fr;
   }

}