/*-----------------------------------------------------*/
/*------------APLICABLE A TODAS LAS PÁGINAS------------*/

header{background-color: #2B1B10;padding: 20px;justify-content: space-between;display: flex;}
header img{width: 110px;border-radius: 10px;}
body{background-color: #ECD6BE;margin: 0%;font-family: "Inter", sans-serif;}
footer{padding: 10px;text-align: center;font-family: "Inter", sans-serif;background-color: #2B1B10;color: white;}
nav ul{font-family: "Inter", sans-serif;list-style-type: none;display: flex;justify-content: right;margin-right: 40px;color: white;}
.nav-link{color: white;text-align: center;padding: 14px 16px;text-decoration: none;font-weight: bold;font-size: 18px;}
a:hover:not(.active){color: #FF6B1A;transition: color 0.5s;}
a.active{color: #F4B624;}
a{color: #dddddd;text-decoration: none;transition: color 0.5s;}
.footer-content{display:flex;justify-content: space-between;margin-left: 200px;margin-right: 200px;}
.carrito-link{position: relative;text-decoration: none;font-size: 1.2rem;}
.carrito-link .badge {position: absolute;top: -5px;right: -8px;width: 8px;height: 8px;background-color: #e67e22;border-radius: 50%;}
/*-----------------------------------------------------*/





/*-----------JOSE SANTIAGO ARREDONDO ORTIZ-------------*/
/*-----------------------------------------------------*/
/*-----------------------LOGIN-------------------------*/
#login-text{margin: 40px;}
/*Estilos para el formulario*/
.login-form{color: white;font-family: "Inter", sans-serif;font-size: 16px;background-color: #2B1B10;text-align: left;width: 370px;margin: 0px auto;border-radius: 15px;padding: 45px 45px 45px;box-shadow: 0 2px 8px rgba(0, 0, 0, .5);margin-bottom: 30px;}
/*Estilos para los inputs*/
.inputr{font-family: "Inter", sans-serif;font-size: 14px;border-radius: 10px;width: 343px;height: 25px;border-style:solid;border-color: #F4B624;margin-top: 5px;padding-left: 20px;padding-bottom: 1.5%;padding-top: 1.5%;}
/*Estilos para el botón de inicio de sesión*/
.login-form .btn-ordenar{margin: 0 auto;width: fit-content;display: block;border-radius: 20px;border-color: #F4B624;border-style: solid;border-width: 1px;padding-left: 145px;padding-right: 145px;font-weight: bold;}
/*Estilos para el formulario de registro*/
.register{background-color: #53381a;padding: 10px;border-radius: 10px;display: flex;margin: 0 auto;gap: 20px;margin-top: 20px;font-family: "Inter", sans-serif;border-color: #F4B624;border-style: solid;border-width: 1px;justify-content: center;align-items: center;}
/*Estilos para el botón de registro*/
.register .bton-ordenar{text-align: center;background-color:#F4B624;color: black;border-radius: 15px;border-color: #F4B624;border-style: solid;border-width: 1px;padding: 8px 15px;box-shadow: 0 2px 8px rgba(0, 0, 0, .5);font-weight: bold;cursor: pointer;transition: background-color 0.5s;}
.register .bton-ordenar:hover{background-color: #b28b30;}
/*Estilo para el texto del formulario de registro*/
.register p{margin: 0;padding: 1px 1px;}
.forgot{display: block;margin: 0 auto;width: fit-content;text-align: center;text-decoration: underline;}
.accion{display:flex;justify-content: center;align-items: center;gap:40px;}
/*-----------------------------------------------------*/





/*---------------------EQUIPO---------------------------*/
/*-----------------------------------------------------*/
/*----------------------INICIO------------------------*/
.contenedor{display:flex;margin: 30px;margin-left: 60px;}
.imagen_inicio{justify-content: center;}
.contenedor img{border-radius: 10px;width: 60%;margin: auto 130px;}
.contenedor button{margin: 100px auto 0;width: fit-content;justify-content: center;align-items: center;display: flex;font-weight: bold;}
.contenido h1{margin-bottom: 1px;}
.ventajas{font-family: "Inter", sans-serif;padding: 14px 20px;display: flex;margin: 50px auto;justify-content: space-between;background-color: #2B1B10;color: white;}
.ven{display: flex;}
.imgn{display: flex;justify-content: center;align-items: center;}
.imgn img{border-radius: 100%; width: 60%; border-color: #F4B624; border-style: solid; border-width: 2px}
#title{color: #FF6B1A;font-style:bold;margin-top: 0;font-family: "Inter", sans-serif;}
#descripcion{font-size: 24px;font-style: bold;font-family: "Inter", sans-serif;margin: 20px;} 
/*-----------------------------------------------------*/





/*---------------VALERIA RAMIREZ ALVAREZ---------------*/  
/*-----------------------------------------------------*/
/*------------------------MENÚ-------------------------*/
.botones{text-align: center;gap: 30px;display: flex;justify-content: center;margin-bottom: 70px;}
.botones button{font-family: "Inter", sans-serif;background-color: white;color: black;border: none;padding: 10px 15px;border-radius: 10px;cursor: pointer;width: 300px;height: 50px;}
.botones button:hover{background-color: #796d6d;}
.botones button:active{background-color: #FF0000;color: white;}
.productos_menu{font-family: "Inter", sans-serif;display: grid;align-items: center;grid-template-columns: repeat(3, 250px);justify-content: center;gap: 50px;margin: 40px;}
.menu-card{align-items: center;justify-content: center;background-color: white;color: black;padding: 20px;border-radius: 8px;width: 220px;text-align: center;border-color: #2B1B10;box-shadow: 0 2px 8px rgba(0, 0, 0, .2);}
.menu-card button{background-color: #FF0000;color: white;border: none;padding: 10px 15px;border-radius: 10px;font-family: "Inter", sans-serif;font-weight: bold;cursor: pointer;width: fit-content;}
.menu-card button:hover{background-color: #CC0000;}
.precio{color:#CC0000;font-weight: bold;font-size: 18px;}
.card-img{align-items: center;width: 80%;border-radius: 10px;border-color: #2B1B10;}
/*-----------------------------------------------------*/





/*--------------JESUS GAEL COLLI GONGORA---------------*/
/*-----------------------------------------------------*/
/*--------------------PROMOCIONES----------------------*/
.promociones{justify-content: center;display: grid;gap: 20px;grid-template-columns: repeat(2, 1fr);max-width: 1000px;margin: 40px auto;padding: 20px;}
.contenedor_principal{display: flex;justify-content: space-between;background-color: #2B1B10;color: white;font-family: "Inter", sans-serif;border-radius: 10px;padding: 20px;align-items: center;box-sizing: border-box;}
.descripcion{text-align: left;width: 55%; padding-left: 10px;}
.promo-title {font-size: 1.5rem;font-weight: bold;color: #ffffff;margin-bottom: 10px;}
.promo-price{font-size: 1.4rem;font-weight: bold;color: #F4B624;margin-top: 10px;margin-bottom: 15px;}
.imagen{width: 50%; padding: 20px 20px 20px 20px;}
.imagen img{width: 100%;max-width: 190px;height: 140px;object-fit: cover;border-radius: 10px;}
/*-----------------------------------------------------*/





/*------------DANNA ESTEFANIA PEREZ UITZIL-------------*/
/*-----------------------------------------------------*/
/*----------------------CONTACTO-----------------------*/
/*contenedor principal del contacto*/
.contenedor-contacto{display: flex;justify-content: center;align-items: flex-start;gap: 40px;margin: 30px;width: 90%;}
/*bloque de la clase resumen*/
.resumen{background-color:#2B1B10;color:rgb(255, 255, 255);width:350px;padding:30px;border-radius:15px;text-align: left;margin-top: 20px;}
.resumen h2{margin-bottom: 40px;}
.resumen button:hover{background-color: #CC0000;transform: scale(1.1);}
.resumen button{transition: background-color .3s, transform .3s;}
.resumen button:active{background-color: #FF0000;}
/*modifica los datos del formulario*/
.datos{background-color: #2B1B10;color: white;width: 350px;padding: 20px;border-radius: 15px;margin-bottom: 20px;}
/*parte del contacto*/
.contacto{display:flex;flex-direction:column;align-items: center;}
/*etiquetas del contacto NUEVO*/
.contacto label{width: 80%;text-align: left;margin-top: 10px;margin-bottom: 5px;display: block;}
/*modifica el tamaño de los campos de respuesta NUEVO*/
.contacto input{width: 80%;padding:10px;border:solid;border-color: #F4B624;border-width: 2px;border-radius: 10px;font-size: 14px;}
/*color a los bordes NUEVO*/
.contacto input,
.contacto select {transition: all 0.3s ease;}
.contacto input:focus,
.contacto select:focus {outline: none;border: 3px solid #FF6B1A;box-shadow: 0 0 12px rgba(255, 107, 26, 0.8);transform: scale(1.02);transition: all 0.3s ease;}
#aviso{margin: 8px;} 
/*caja del motivo (despegable) NUEVO*/
.contacto select{width: 86%;padding: 10px;border: solid;border-color: #F4B624;border-width: 2px;border-radius: 10px;font-size: 14px;margin-bottom: 15px;background-color: white;}
/*modifica el boton NUEVO*/
.contacto button{background-color: #FF0000;color: white;border: none;padding: 12px 25px;font-size: 1rem;border-radius: 8px;cursor: pointer;transition: background-color .3s, transform .3s;text-align: center;display: block;margin: 0 auto;}
.contacto button:hover{background-color: #CC0000;transform: scale(1.1);}
.contacto button:active{background-color: #FF0000;}
/*-----------------------------------------------------*/





/*-------------JONATHAN ALVARADO MORALES---------------*/
/*-----------------------------------------------------*/
/*----------------------CARRITO------------------------*/
.contenedor-carrito{display: flex; /* Activa flexbox para alinear elementos en fila */
    justify-content: center; /* Centra horizontalmente los elementos */
    gap: 40px; /* Espacio entre columnas o elementos hijos */
    align-items: flex-start; /* Alinea los elementos arriba (inicio del eje vertical) */
    margin: 30px; /* Espacio exterior alrededor del contenedor */
}
/* Estilo de cada producto dentro del carrito */
.producto_carrito{
    background:#f5f5f5; /* Color de fondo gris claro */
    color:black; /* Color del texto negro */
    padding:18px; /* Espaciado interno */
    margin:15px 0px; /* Margen arriba y abajo */
    border-radius:15px; /* Bordes redondeados */
    display: flex; /* Flexbox para organizar contenido interno */
    justify-content: space-between; /* Separa nombre y botón */
    align-items: center; /* Centra verticalmente los elementos */
    transition: transform .3s ease; /* Animación suave al hacer hover */
 
}
.nombre-producto{
    font-weight: bold; /* Texto en negrita */
    font-size: 18px; /* Tamaño de fuente más grande */
}
/* Efecto cuando el mouse pasa sobre un producto */
.producto_carrito:hover{
    transform: scale(1.03); /* Aumenta ligeramente el tamaño */
}
.eliminar{
    color:#ffe5e5; /* Color rojo del texto (sobrescribe el anterior color) */
    border:none; /* Sin borde */
    color:#ff4d4d; /* Tamaño del icono o texto */
    font-size:20px; /* Bordes redondeados */
    border-radius:10px; /* Espaciado interno */
    padding: 8px; /* Espaciado interno */
    cursor: pointer; /* Cursor tipo mano al pasar encima */
    transition: background-color .3s; /* Animación suave de fondo */
}
/* Efecto hover del botón eliminar */
.eliminar:hover{
    background: #ff4d4d; /* Fondo rojo al pasar el mouse */
    color: white; /* Texto blanco */
    transform: scale(1.2); /* Agranda el botón */
}
/* Contenedor del formulario de envío */
.envio{
    text-align: center; /* Centra el texto */
    margin-bottom: 25px; /* Espacio inferior */
    font-size: 1.3rem; /* Tamaño de texto relativo */
    background-color:#2B1B10; /* Fondo café oscuro */
    color:white; /* Texto blanco */
    width:350px; /* Ancho fijo */
    padding:30px; /* Espaciado interno */
    border-radius:20px; /* Bordes redondeados */
    box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* Sombra suave */
    transition: transform 0.3s; /* Animación al moverlo */
}
 
/* Efecto hover del contenedor de envío */

/* Formulario dentro del contenedor de envío */
.envio form{
    display:flex; /* Activa flexbox */
    flex-direction:column; /* Coloca los elementos en columna */

    transition: trasnform 0.3s; /* ERROR: "trasnform" está mal escrito */
}
.envio input{
    padding:12px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    transition: all 0.3s ease; /* Animación suave */
    border:solid;border-color: #F4B624;border-width: 2px;
}
.envio label{
    align-items: left;
    text-align: left;
}
/* Botón centrado de envío */
.envio input:focus{
    border-color: #ff3b30;  /* Borde rojo */
    box-shadow: 0 0 10px rgba(255, 59,48,0.5); /* Sombra roja */
}
/* Botón centrado de envío */
.btn-enviar{
    display:block;  /* Lo convierte en bloque */
    margin:20px auto;/* Centrado horizontal */
}

 
/* Resumen del carrito */
.resumen_carrito{
    text-align: center; /* Centra texto */
    background-color:#2B1B10; /* Fondo café oscuro */
    color:white; /* Texto blanco */
    width:350px; /* Ancho fijo */
    padding:30px; /* Espaciado interno */
    margin-bottom: 25px; /* Separación inferior */
    font-size: 1.3rem; /* Tamaño de texto */
    border-radius:20px; /* Bordes redondeados */
    box-shadow: 0 8px 20px rgba(0,0,0,0.25); /* Sombra */
    transition: transform 0.3s; /* Animación */
}
 
 
/* Botón personalizado */
.envio .bt{
    width: 150px; /* Ancho */
    height: 50px; /* Alto */
    display: block; /* Bloque */
    margin: 20px auto; /* Centrado */
    background-color: #FF0000; /* Rojo */
    color:white; /* Texto blanco */
    font-size: 20px; /* Tamaño */
    font-family: "Inter", sans-serif; /* Fuente */
    font-weight: bold; /* Negrita */
    border-radius: 12px; /* Bordes redondeados */
    border: none; /* Sin borde */
    cursor: pointer; /* Mano */
    transition: all 0.3s ease; /* Animación */
}
 
/* Hover del botón */
.envio .bt:hover{
    background-color: #CC0000; /* Rojo más oscuro */
    transform: scale(1.2); /* Aumenta tamaño */
    box-shadow: 0 8px 15px rgba(255,59,48,0.4); /* Sombra */
}
/*-----------------------------------------------------*/





/*-----------------------------------------------------*/
/*--------------------COMPLEMENTOS---------------------*/
.logo_com{display: flex;gap:15px;align-items: center;}
.logo-text{display: flex;flex-direction: column;line-height: 1;}
/* Estilo para la palabra "Byte" */
#text-byte {color: #ffffff;font-size: 32px;font-weight: 500;}
/* Estilo para la palabra "Burger" */
#text-burger {color: #f4a261;font-size: 32px;font-weight: 500;}
h1{margin: 20px;font-family: "Inter", sans-serif;}
h2{color: white;text-align: center;}
.bt{background-color: #FF0000;color:white;font-size: 14px;font-family: "Inter", sans-serif;font-weight: bold;border-radius: 10px;border: none;padding: 1.75%;width: 110px;margin-left:130px;cursor: pointer;}
.bt:hover{background-color: #CC0000}
.btn-ordenar{font-family: "Inter", sans-serif;background-color: #FF0000;color: white;border: none;padding: 10px 15px;border-radius: 10px;font-size: 14px;cursor: pointer;width: fit-content;transition: background-color 0.5s;}
.btn-ordenar:hover{background-color: #CC0000;}
/*-----------------------------------------------------*/




/*-----------------------------------------------------*/
/*--------------------DIMENSIONES----------------------*/



/*-----------------------------------------------------*/
/*------------APLICABLE A TODAS LAS PÁGINAS------------*/
@media (max-width: 768px){
    header{display:flex;flex-direction: column;align-items: flex-start;padding: 15px 0 0;width: 100%;}
    .logo_com{margin-left: 10px;}
    nav{display: flex;width: 90%;overflow-x: auto;gap: 20px;padding: 10px 15px;-ms-overflow-style: none;}
    nav a{flex: 0 0 auto;white-space: nowrap;}
    /* Estilos para las secciones del pie de página */
    .footer-content{align-items: center;flex-direction: column;width: 100%;margin:0;gap: 5px;}

    /*-----------------------------------------------------*/
    /*-----------------------------------------------------*/
    /*--------------------PROMOCIONES----------------------*/
	.promociones{grid-template-columns: 1fr;padding: 20px;}
    .contenedor_principal{flex-direction: column-reverse;text-align: center;}
    .descripcion, .imagen{width: 100%;}
    .imagen{width: 100%;display: flex;justify-content: center;margin-bottom: 1px;padding: 20px;}
    .imagen img{width: 80%;max-width: 300px;height: auto;border-radius: 10px;}
    /*-----------------------------------------------------*/



    /*------------JOSE SANTIAGO ARREDONDO ORTIZ------------*/
    /*-----------------------------------------------------*/
    /*------------------------LOGIN------------------------*/    
    .login-text{align-items: center;text-align: center;}
    /* Estilos para el formulario de inicio de sesión */
    .login-form{color: white;font-family: "Inter", sans-serif;font-size: 16px;background-color: #2B1B10;text-align: left;width: 240px;margin: 50px auto;border-radius: 10px;padding: 45px 45px 30px;}
    .login-form .btn-ordenar{margin: 0 auto;width: fit-content;display: block;border-radius: 20px;border-color: #F4B624;border-style: solid;border-width: 1px;padding-left: 80px;padding-right: 80px;font-weight: bold;}
    /* Estilos para el input del formulario */
    .inputr{font-family: "Inter", sans-serif;border-radius: 10px;padding-left: 20px;padding-right: 20px;width: 200px;height: 30px;}
    /* Estilos para el botón de inicio de sesión */
    .bt{display: block;width: fit-content;margin: 0px auto;width: 110px;}
    /*-----------------------------------------------------*/




    /*-----------------------------------------------------*/
    /*-----------------------------------------------------*/
    /*------------------------MENÚ-------------------------*/
    .productos_menu{display:flex;flex-direction: column;}
    .botones{overflow-x: auto;justify-content: left;margin-left: 20px;margin-right: 20px;border-color: #F4B624;border-style: solid;border-width: 2px;border-radius: 10px;}



    /*----------------------EQUIPO-------------------------*/
    /*-----------------------------------------------------*/
    /*-----------------------INICIO------------------------*/ 
    #title{margin: 0px 15px 15px 15px;}
    section h1{margin: 15px 15px 0px 15px;}
    .contenedor{text-align: center;}
    .contenedor img{width: 80%;border-radius: 10px;}
    .contenedor button{margin: 10px auto 0;width: fit-content;}
    .ventajas{font-family: "Inter", sans-serif;padding: 14px 16px;display: flex;gap: 20px;margin: 20px;justify-content: space-between;background-color: #2B1B10;color: white;border-radius: 10px;}
    #title{color: #FF6B1A;font-style:bold;font-family: "Inter", sans-serif;}#descripcion{font-size: 24px;font-style: bold;font-family: "Inter", sans-serif;margin: 20px;} 
    /*-----------------------------------------------------*/




    /*------------------------DANNA-------------------------*/
    /*------------------------------------------------------*/
    /*----------------------CONTACTO------------------------*/
    .contenedor-contacto{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 40px;margin: 30px;width: 85%;}
    .resumen{width: 85%;}
    .datos{width: 90%;}
    /*-----------------------------------------------------*/




    /*-----------------------JONATHAN------------------------*/
    /*------------------------------------------------------*/
    /*-----------------------CARRITO-----------------------*/
    .contenedor-carrito{display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 40px;margin:30px;width: 85%;}
    .resumen_carrito{width: 80%;}
    .envio{width: 80%;}


    /*-----------COMPLEMENTOS-----------*/
    .btn-ordenar{margin: 10px auto 0;width: 100%;}
    .btn-ordenar:hover{background-color: #CC0000;}
    h1{text-align: center;font-family: "Inter", sans-serif;}
}