/* VARIABLES */
:root{
     --color-primario: #FCB03B;
     --color-secundario: #E92F3D;
     --color-backgroud-sombra: #E92F3D30;
     --color-background: #EFF6F5;
     --color-texto: #A1A5A6;
     --text-defaul: 'Open Sans';
}


/* GENERALES */
*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: var(--text-defaul);
}


html{
     scroll-behavior: smooth;
}

body{
     background: var(--color-background);
}

.titulos{
     font-size: 40px;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: 600;
}

.subtitulos{
     font-size: 25px;
     font-weight: 400;
     text-align: center;
     text-transform: uppercase;
     color: var(--color-primario);
}


.btn{
     text-decoration: none;
     text-transform: uppercase;
     font-size: 14px;
     color: #FFF;
     background: var(--color-primario);
     font-weight: 700;
     padding: 14px 28px;
     border-radius: 30px; /*  más moderno */
     border: none;
     cursor: pointer;
     display: inline-block;
     transition: all 0.3s ease;
     box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.btn span{
     padding-left: 8px;
}


/* nuevo LGSS */
.btn:active{
     transform: scale(0.97);
}

.btn:hover{
     transform: translateY(-3px);
     box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}



/* MENU PRINCIPAL */
.menu-principal{
     width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 75px;
     padding: 0 30px;
     margin-top: 10px;
     background: var(--color-background);    
     z-index: 1;
}


.logo img{     
     width: 83px;
     height: auto;
     cursor: pointer;
}

.menu-bar{
     display: flex;
     width: 100%;
     justify-content: space-between;
}

.menu-bar .enlaces ul li{
     display: inline-block;
     padding: 0 10px;
}

.menu-bar .enlaces ul li a{
     font-size: 14px;
     /*text-transform: uppercase;*/
     text-transform: none;
     text-decoration: none;
     color: var(--color-texto);
     font-weight: 600;
     background: linear-gradient(currentColor, currentColor);
     background-position: 100% 100%;
     background-repeat: no-repeat;
     background-size: 0% 2px;
     transition: all 0.5s;
}

.menu-bar .enlaces ul li a:hover{
     color: var(--color-secundario);
     background-size: 50% 2px;
}

.menu-bar .sociales a{
     font-size: 16px;
     text-transform: uppercase;
     padding: 0 10px;
     font-weight: 700;
     text-decoration: none;
     color: var(--color-texto);
     transition: all 0.5s;
}

.menu-bar .sociales a:hover{
     color: var(--color-secundario);
}

.menu-principal i{
     cursor: pointer;
     color: var(--color-texto);
     font-size: 30px;
     float: right;
     display: none;
     transition: all 0.5s;
}

.menu-principal i:hover{
     color: var(--color-secundario);
}


/* SLIDER DE PRODUCTOS */
#menu-productos .contenedor-principal{
     display: flex;
     align-items: center;
     position: relative;
     z-index: 0;
}



.contenedor-principal #btn-izquierda,
.contenedor-principal #btn-derecha{
     position: absolute;
     height: 10%;
     width: 50px;
     border: none;
     background: transparent;
     cursor: pointer;
     font-size: 40px;
     margin: 0 15px;
     color: var(--color-secundario);
     z-index: 500;
     outline: none;
     transition: all 0.3s;
}

.contenedor-principal #btn-izquierda:hover,
.contenedor-principal #btn-derecha:hover{
     background: var(--color-backgroud-sombra);
     transform: translateY(5px);
}


.contenedor-principal #btn-izquierda{
     left: 0;
}


.contenedor-principal #btn-derecha{
     right: 0;
}

.slider{
     display: flex;
     overflow: hidden;
     /*min-height: calc(100vh - 80px);*/
     height: calc(100vh - 80px);
     scroll-behavior: smooth;
}

.container-productos{
     display: flex;
     justify-content: center;
     align-items: center;
     flex-basis: 100%;
     flex-shrink: 0;
     
}

.descripcion-productos{
     width: 30%;
}



.descripcion-productos h1{
     font-size: clamp(32px, 4vw, 48px);
     line-height: 1.2;
     letter-spacing: -0.5px; 
}

/* ------------nuevo */
.highlight{
  position: relative;
  color: var(--color-primario);
}
.highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 5px;
  background: var(--color-primario);
  opacity: 0.7;      /* más suave */
  border-radius: 4px;

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

/* animación automática */
.highlight::after{
  animation: underline 1s ease forwards;
}

@keyframes underline{
  from{
    transform: scaleX(0);
  }
  to{
    transform: scaleX(1);
  }
}




/*------- fin de HIGHLINGHT  */
.descripcion-productos h2{
     text-transform: lowercase;
     font-size: 2.2vw;
     font-weight: 100;
}



.descripcion-productos p{
  color: #555; /* un poco más oscuro */
  font-style: normal;
  margin-top: 15px;
  line-height: 1.6;
  font-size: 16px;
}


.imagen-productos{
     width: 50%;
     display: flex;
     justify-content: center;
}

.imagen-productos img{
     width: 85%;
     transform: scale(1.1);
     transition: all 0.3s;
}

.container-productos:hover .imagen-productos img{
     transform: scale(1.15);
}



/* SECCION SERVICIOS */
#servicios{
     min-height: 100vh;
     background: #FFF;
     padding: 60px 20px;
     padding-top: 80px;
     /*padding: 40px;*/
}

.servicios-titulos{
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
}

.servicios-container{
     margin-top: 30px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, auto);
     grid-gap: 30px;
     grid-template-areas:     "ingredientes  imagen    rapidez"
                              "calidad       imagen    delivery";
}

.calidad{
     grid-row: calidad;
     grid-column: calidad;
}

.ingredientes{
     grid-row: ingredientes;
     grid-column: ingredientes;
}

.rapidez{
     grid-row: rapidez;
     grid-column: rapidez;
}

.delivery{
     grid-row: delivery;
     grid-column: delivery;
}

.imagen-central{

     grid-row: imagen;
     grid-column: imagen;
     transition: all 0.5s;
}

/* ojo */
.imagen-central img{
    width: clamp(200px, 25vw, 350px);
    /*width: 300px;    ajusta aquí */
    height: auto;
}

.imagen-central:hover{
     transform: scale(1.1);
}

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

.items span{
     width: 95px;
     font-size: 40px;
     color: var(--color-secundario);
     padding: 20px;
     border: 5px double #dedede;
     border-radius: 50%;
     text-align: center;
     transition: all 0.5s;
}

.items span:hover{
     background: var(--color-secundario);
     color: #FFF;
}

.ingredientes span, 
.calidad span{
     color: var(--color-primario);
}

.ingredientes span:hover, 
.calidad span:hover{
     background: var(--color-primario);
     color: #FFF;
}

.items .titulo-item{
     text-transform: uppercase;
     font-size: 15px;
     font-weight: 700;
     text-align: center;
}

.items .texto-item{
     font-size: 14px;
     color: var(--color-texto);
     text-align: center;
     font-style: italic;
     padding: 0 20px;
}

/* SECCION CURSO */
#curso{
     min-height: 100vh;
     background: #FFF;
     height: auto;
     padding: 60px 20px;
     padding-top: 80px;
   
}
.cursos-container{
     margin-top: 30px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     /* grid-template-columns: repeat(3, 1fr);*/
     grid-template-rows: repeat(2, auto);
     grid-gap: 25px;
     padding: 20px;
    
}


.curso-card{
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.curso-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.curso-icon{
    font-size: 35px;
    color: #2563eb;
    margin-bottom: 15px;
}

.curso-card h3{
    font-size: 20px;
    margin-bottom: 10px;
}

.horario{
    color: #555;
    font-weight: 500;
}

.detalle{
    margin-top: 10px;
    color: #777;
}

.destacado{
    border: 2px solid #2563eb;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}
/* FIN CURSO */

/* SECCION NOSOTROS */
#nosotros{
     min-height: 100vh;
     background: linear-gradient(135deg, #EFF6F5, #ffffff);
     height: auto;
     padding: 60px 20px;
     padding-top: 80px;

     /*padding: 70px 20px;*/
     text-align: center;
}



/* CONTENEDOR */
.nosotros-wrapper {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 40px;
     align-items: center;
     margin-top: 40px;
}

/* TEXTO */
.nosotros-texto h3 {
     color: var(--color-secundario);
     margin-top: 20px;
     margin-bottom: 10px;
}

.nosotros-texto p {
     color: var(--color-texto);
     line-height: 1.6;
}

/* VALORES */
.nosotros-valores {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
}

.valor-card {
     background: #fff;
     padding: 20px;
     border-radius: 15px;
     text-align: center;
     box-shadow: 0 5px 15px rgba(0,0,0,0.08);
     transition: all 0.3s ease;
}

.valor-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.valor-card i {
     font-size: 30px;
     color: var(--color-primario);
     margin-bottom: 10px;
}

.valor-card h4 {
     font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .sucursal-info{
        padding: 20px;
    }
     .nosotros-wrapper {
          grid-template-columns: 1fr;
     }

     .nosotros-valores {
          grid-template-columns: 1fr 1fr;
     }
      #btnWhatsapp{
        width: 100%;
        justify-content: center;
    }
}


/* FIN SECCION NOSOTROS */

/* SECCION DE TESTIMONIO */

#testimonios{
     min-height: 100vh;
     background: linear-gradient(135deg, #ffffff, #EFF6F5);
     height: auto;
     padding: 60px 20px;
     padding-top: 80px;
     /*padding: 70px 20px;*/
     text-align: center;
}

/* CONTENEDOR */
.testimonios-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 25px;
     margin-top: 40px;
}

/* TARJETA */
.testimonio-card {
     background: #fff;
     padding: 25px;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0,0,0,0.08);
     transition: all 0.3s ease;
     position: relative;
}

.testimonio-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* DESTACADO */
.testimonio-card.destacado {
     border: 2px solid var(--color-primario);
}

/* TEXTO */
.testimonio-texto p {
     font-style: italic;
     color: var(--color-texto);
     margin-bottom: 20px;
}

/* USUARIO */
.testimonio-user {
     display: flex;
     align-items: center;
     gap: 10px;
}

.testimonio-user img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     object-fit: cover;
}

.testimonio-user h4 {
     margin: 0;
     font-size: 14px;
}

.testimonio-user span {
     font-size: 12px;
     color: gray;
}


/* FIN SECCION DE TESTIMONIO */



/* SECCION CONTACTO */
#contacto{
     min-height: 100vh;
     height: auto;
     padding: 60px 20px;
     padding-top: 80px;
    /* padding: 60px;*/
     position: relative;
}

#formulario{
     width: 100%;
     margin: 0;
}

.two-fiels{
     display: flex;
     justify-content: space-between;
}

.input-text, .input-email, .textarea{
     border: 1px solid #b4b4b4;
     color: #888;
     background: #fff;
     outline: none;
     padding: 15px 60px;
     height: 45px;
     font-size: 16px;
     margin-bottom: 20px;
     transition: all 0.5s;
}

.textarea{
     width: 100%;
     height: 150px;
     resize:none;
}

.input-text, .input-email{
     width: 100%;
}

.inputConIcon{
     position: relative;
     width: 48%;
}

.inputConIcon i{
     position: absolute;
     left: 0;
     padding: 14px 15px;
     background: #888;
     color: #fff;
     transition: all 0.5s;
}


.textareaIcon{
     width: 100%;
}

.textareaIcon i{
     background: transparent;
     color: #888;
     padding: 0;
     font-size: 25px;
     left: 17px;
     top: 13px;
     transition: all 0.5s;
}

.inputConIcon input:focus,
.inputConIcon textarea:focus{
     border: 1px solid var(--color-primario);
}


.inputConIcon input:focus + i{
     background: var(--color-primario);
}

.inputConIcon textarea:focus + i{
     color: var(--color-primario);
}


.fiels-btn{
     width: 100%;
     display: flex;
     justify-content: flex-end;
}

.btn-input{
     padding: 15px 50px;
}

.btn-input:hover{
     padding: 15px 65px;
}



/* lo nuevo */
.contacto-wrapper{
    width: 80%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.contacto-info p{
    font-size: 15px;
    color: #555;
    margin-bottom: 10px;
}

.contacto-info span.fas{
    color: var(--color-secundario);
    margin-right: 8px;
}



/* BOTON UBICACION */
.ubicacion-toggle{
    background: transparent;
    border: none;
    color: var(--color-secundario);
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s;
}

.ubicacion-toggle:hover{
    color: var(--color-primario);
    text-decoration: underline;
}

/* MAPA */
.mapa-oculto{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.mapa-oculto.activo{
    max-height: 300px;
    opacity: 1;
    margin-top: 20px;
}

.mapa-oculto iframe{
    width: 100%;
    height: 250px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/*SECCION DE SUCURSAL */
/* SUCURSALES */
#sucursales{
    padding: 60px 20px;
    background: #fff;
    padding-top: 80px;
}

.sucursales-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.sucursal-card{
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.sucursal-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

.sucursal-card h3{
    margin-bottom: 10px;
    color: var(--color-secundario);
}

.sucursal-card p{
    color: #555;
    margin-bottom: 10px;
}

.sucursal-card iframe{
    width: 100%;
    height: 200px;
    border: none;
    border-radius: 10px;
    margin: 15px 0;
}

/* ===== NUEVO DISEÑO PRO SUCURSALES ===== */

.sucursales-wrapper{
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 30px;
    margin-top: 40px;
}

.sucursales-list{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sucursal-btn{
    padding: 15px;
    border: none;
    border-radius: 10px;
    background: #eee;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.sucursal-btn.active,
.sucursal-btn:hover{
    background: var(--color-primario);
    color: #fff;
}

.sucursal-info{
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    overflow: hidden;
}

.sucursal-info iframe{
    width: 100%;
    height: 220px;
    border-radius: 10px;
    margin: 10px 0;
    border: none;
    flex-shrink: 0;
}

#btnWhatsapp{
    margin-top: 10px;
    align-self: center;
    display: inline-flex;
}

/* RESPONSIVE */
@media(max-width: 768px){
    .sucursales-wrapper{
        grid-template-columns: 1fr;
    }

    .sucursales-list{
        flex-direction: row;
        justify-content: center;
    }
}






/* RESPONSIVE */
@media (max-width: 768px){
    .contacto-wrapper{
        grid-template-columns: 1fr;
    }
}



/* ALERTAS */
.alertas{
     display: flex;
     justify-content: center;
     align-items: center;
}

.alert{
     width: 60%;
     padding: 20px 60px;
     position: fixed;
     top: 0;
     transition: all 0.5s;
}

.alert.show{
     transform: translateY(50%);
}

.alert.hide{
     transform: translateY(-100%); 
}

.alert .icono-alert{
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 30px;
}

.alert .msg{
     padding: 0 20px;
     font-size: 18px;
}


#alertError{
     background: #f8d7da;
     border-right: 4px solid #da3748;
}

#alertError .icono-alert{
     color: #da3748;
}

#alertError .msg{
     color: #721c24;
}



#alertSuccess{
     background: #d4edda;
     border-right: 4px solid #279e43;
}

#alertSuccess .icono-alert{
     color: #279e43;
}

#alertSuccess .msg{
     color: #155724;
}


/* FOOTER */
footer{
     display: flex;
     margin-top: -100px;
}

.sociales-metodo{
     width: 25%;
     height: 100px;
     background: #333;
     color: #fff;
     position: relative;
     text-align: center;
     overflow: hidden;
}

.sociales-metodo i{
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     font-size: 30px;
     line-height: 100px;
     transition: all 0.5s;
}

.sociales-metodo span{
     position: absolute;
     width: 100%;
     left: 0;
     bottom: 0;
     padding: 10px 0;
     font-size: 12px;
     background: var(--color-primario);
     color: #fff;
     letter-spacing: 1px;
     font-weight: 700;
     transform: translateY(60px);
     transition: all 0.5s;
}

.sociales-metodo i:hover + span{
     transform: translateY(0px);
}

.sociales-metodo i:hover{
     transform: translateY(-20px);
}



/* BOTON DE IR ARRIBA */
#btn-top{
     width: 50px;
     height: 50px;
     background: var(--color-primario);
     cursor: pointer;
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 1;
     transform: translateY(200%);
     transition: all 0.5s;
}

#btn-top.show{
     transform: translateY(0);
}

#btn-top.scrollFinal{
     transform: translateY(-250%);
}

#btn-top span{
     color: #fff;
     font-size: 25px;
     width: 100%;
     text-align: center;
     line-height: 50px;
     transition: all 0.5s;
}

#btn-top:hover{
     background: #d89127;
}

#btn-top:hover span{
     transform: translateY(-3px);
}

/* WHAPAPP */

.whatsapp-float{
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    left: 20px; /* lado izquierdo (no choca con tu botón top) */
    background: #25D366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover{
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* animación suave */
.whatsapp-float{
    animation: float 2s ease-in-out infinite;
}

@keyframes float{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-5px); }
    100%{ transform: translateY(0); }
}


/* MEDIA QUERYS */
@media screen and (max-width: 850px){
     /* SLIDER PRODUCTOS */
     .container-productos{
          flex-direction: column;
          gap: 20px;
     }

     .descripcion-productos{
          width: 70%;
          order: 1;
     }

     .descripcion-productos .btn{
          padding: 10px 20px;
     }

     .descripcion-productos .btn:hover{
          padding: 10px 30px;
     }


     /* SECCION SERVICIOS */
     .servicios-container{
          margin-top: 50px;
          grid-template-columns: repeat(2, 1fr);
          grid-template-areas:     "ingredientes  rapidez"
                                   "calidad       delivery";
     }

     .imagen-central{
          display: none;
     }
}





@media screen and (max-width: 650px){
     /* MENU PRINCIPAL */
     .menu-principal{
          position: fixed;
          top: 0;
          margin-top: 0;
     }

     .menu-principal i{
          display: block;
     }

     .menu-bar{
          justify-content: space-around;
          align-items: center;
          flex-direction: column;
          width: 50%;
          height: 100vh;
          position: fixed;
          right: 0;
          top: 0;
          z-index: 1000;
          background: #333;          
          transition: all 0.5s;
          transform: translateX(100%);
     }

     .menu-bar.active{
          transform: translateX(0%);
     }

     .menu-bar i{
          position: absolute;
          right: 50px;
          top: 50px;
     }

     .menu-bar .enlaces ul li{
          display: block;
          padding: 20px 10px;
          text-align: center;
     }

     .menu-bar .enlaces ul li a,
     .menu-bar .sociales a{
          font-size: 20px;
     }


     /* SLIDER PRODUCTOS */
     .slider{
          height: calc(100vh - 0px);
          
     }

     .imagen-productos{
          width: 65%;
     }

     .descripcion-productos h1{
          font-size: 7vw;
     }

     .descripcion-productos h2{
          font-size: 3vw;
     }


     /* INGREDIENTES */
     .info-ingre .txt-ingre{
          display: none;
     }


     /* CONTACTOS */
     #formulario{
          width: 100%;
     }

     .two-fiels{
          flex-direction: column;
     }

     .inputConIcon{
          width: 100%;
     }


     /* ALERTAS */
     .alert{
          width: 100%;
     }

     .alert.show{
          transform: translateY(150%);
     }


     /* FOOTER */
     footer{
          flex-wrap: wrap;
          margin-top: 0px;
     }

     .sociales-metodo{
          width: 50%;
     }


     /* BOTON DE IR ARRIBA */
     #btn-top{
          display: none;
     }
}