/************************************************************
    Estilos de plasticosalianza.com.mx
*************************************************************/

* { margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 60px; /* Espacio para navbar */
}

/************************************************************
    Navbar Fija 
*************************************************************/
.navbar {
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 60px;
    background-color: cornflowerblue; color: white;
    display: flex; 
    /* justify-content: space-between; Linea original */ 
    justify-content: space-around; /* Linea modificada JC */
    align-items: center; 
    padding: 0 20px; 
    z-index: 1000;
    
    /* Agregadas pot JC */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold; 
    font-size: 1.3rem;
}

.logo_top img {
    width: 80px;
    height: auto;
    border-radius: 20%;
}

.nav_menu { 
    display: flex; 
    list-style: none; 
}

.nav_menu a { 
    text-decoration: none; 
    color: white; 
    padding: 10px; 
    display: block; 
}

.nav_menu a:hover {
    background-color: lightblue; 
    color: blue;
    border-radius: 10%;
    /*
    text-decoration: none;  
    padding: 10px; 
    display: block; 
    */
}


/************************************************************
    Estilos de los submenus
*************************************************************/

.dropdown { 
    position: relative; 
}

.submenu { 
    display: none; 
    position: absolute;
    width: max-content;
    list-style: none;
    padding-left: 20px; /* <--- ESTO IDENTA LOS SUBMENÚS */
    background-color: cornflowerblue; 
}

.submenu:hover { 
    color: blue;
    list-style: none;
}

.dropdown:hover .submenu { 
    display: block; 
}


/************************************************************
    Estilos del Contenido principal de la página
*************************************************************/

.content { 
    flex: 1; /* quitar esta linea, se sobreescribe con "display: flex;" mas adelante - por JC */
    padding: 20px; 

/* agergados por JC - INI */
    display: flex;
    flex-direction: column;
    align-items: center;
/* agergados por JC - FIN */
}


/* agergados por JC - INI */

.subtitulos {
    width: 80%;
    height: auto;
    text-align: center;
    font-size: xx-large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    color: darkblue;
    background-color: lightblue;
}

.subtitulos_2 {
    width: 080%;
    height: auto;
    text-align: center;
    font-size: xx-large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    color: darkblue;
    background-color: lightgrey;
}

.imagen_flotante {
    max-width: 250px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantiene la proporción */
    border-radius: 10%;
}

.parrafos {
    width: 80%;
    height: auto;
    font-size: x-large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.agrupar {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}
/* agergados por JC - FIN */


/************************************************************
    Estilos del Catálogo de Productos
*************************************************************/

.cat_prod {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: baseline;
}

.info_prod {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    font-size: x-large;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.img_prod {
    max-width: 300px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantiene la proporción */
}

.img_prod:hover {
    max-width: 320px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantiene la proporción */
}

.pedido {
    display:inline-block; 
    background-color:#25d366; 
    color:#FFF; 
    padding:10px 20px; 
    border-radius:5px; 
    text-align:center; 
    text-decoration:none; 
    font-size:26px;
}

.info_contacto {
    display: flex;
    justify-content: left;
    align-items: center;
    margin-left: 10px;
    font-size: medium;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.img_contacto {
    max-width: 60px; /* Ajusta el tamaño de la imagen */
    height: auto; /* Mantiene la proporción */
    border-radius: 40%;
}


/************************************************************
    Estilos del pie de página
*************************************************************/

.footer { 
    background-color: cornflowerblue; 
    color: white; 
    text-align: center; 
    padding: 20px; 

    /* Agregadas pot JC */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold; 
    font-size: 1.3rem;
}


/************************************************************
    Estilos RESPONSIVOS de la página
*************************************************************/

.menu_toggle, .hamburger { 
    display: none; 
}
@media (max-width: 768px) {
    .hamburger { 
        display: block; 
        cursor: pointer; 
    }
    .nav_menu { 
        display: none; 
        flex-direction: column; 
        position: absolute; 
        top: 60px; 
        left: 0; 
        width: 100%; 
        background: cornflowerblue; 
    }
    .menu_toggle:checked ~ .nav_menu { 
        display: block; 
    }
    .submenu { 
        position: static; 
    }
}