:root {
    --primary-color: #FE5000;
    --secondary-color: #f7941d;
    --dark-color: #333;
    --light-color: #f9f9f9;
}


.footer {
    background: var(--primary-color);
    padding: .5rem 0 2rem;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: var(--light-color);
}

        .container {
            max-width: 1345px;
            margin: 0 auto;
        }
    

            .footer-columns {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                gap: 0;
                margin: 5rem 8.2rem;
                
            }

                .footer-col {
                    width: auto;
                }

                    .footer-col label a {
                        color: var(--light-color);
                    }

                .social-media {
                    width: auto;
                    padding: 0;
                    /* border: 1px solid yellow; */
                    text-align: center;
                }
               

                    .footer-title {
                        margin-bottom: .6rem;
                        
                    }

                    .footer-title.italic {
                        font-style: italic;
                    }

                    .footer-col ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    .footer-col ul li {
                        margin-bottom: 0rem;
                    }

                    .footer-col ul li a {
                        text-decoration: none;
                        color: var(--light-color);
                    }

                    .footer-col ul li a:hover {
                        text-decoration: underline;
                    }

                    .footer-col p {
                        line-height: 1;
                        display: flex;
                    }

                    .footer-col p a{
                        color: var(--light-color);
                    }

                    .social-links{
                        display: flex;
                        gap: 0.5rem;
                    }

                    .social-links a {
                        display: flex;
                        align-items: center;
                        text-decoration: none;
                        color: #333;
                    }
                    .social-links a svg{
                        height: 23px;
                        width: 20px;
                        margin: 10px 4px 4px 4px;
                    }
                    
                    .social-links img {
                        width: 20px;
                        margin-right: 8px;
                    }

                    .footer-bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        gap: 1rem;
                    margin: 0 8.2rem;
                    }
                    .footer-bottom > div {
                        flex: 1; /* Ocupa 50% */
                    }
                    .derechos-reservados {
                        text-align: left;
                    }
                    .footer-bottom-right {
                        
                        text-align: center; /* Centra el contenido dentro de cada div */
                        /* border: 1px solid green; */
                    }


                    /* Cambiar a grid cuando el viewport sea <= 1200px */
                    @media (max-width: 1200px) {
                        .footer-columns {
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            grid-template-rows: auto auto;
                            gap: 1.5rem;
                            margin: 3rem 4rem; /* opcional para ajustar margen */
                        }

                        /* Posicionar el 4to elemento en fila 2 columna 1 */
                        .footer-columns > div:nth-child(4) {
                            grid-column: 1;
                            grid-row: 2;
                        }

                        /* Posicionar el 5to elemento en fila 2 columna 2 */
                        .footer-columns > div:nth-child(5) {
                            grid-column: 2;
                            grid-row: 2;
                        }
                        .social-media {
                            text-align: left;
                        }

                        /* Para que los otros 3 elementos queden en fila 1 (automático) */
                    }

                    @media screen and (max-width: 768px) {
                        .footer-columns {
                            flex-direction: column;
                            /* margin: 2rem 1.5rem; */
                            gap: 2rem;
                            align-items: start; /* Centra los items */
                            text-align: center;   /*  Centra el texto */
                        }

                        .footer-col {
                            width: 100%;
                        }

                        .footer-bottom {
                            flex-direction: column;
                            margin: 1rem;
                            text-align: center; /* Centra todo el contenido */
                            align-items: center;
                        }

                        .footer-bottom > div {
                            flex: none;
                            width: 100%;
                        }

                        .derechos-reservados,
                        .footer-bottom-right {
                            text-align: center; /* Centra los textos individuales */
                        }

                        .social-links {
                            justify-content: center; /* Centra los íconos */
                            flex-wrap: wrap;
                        }

                        .social-links a {
                            margin: 5px;
                        }

                        .footer-col p,
                        .footer-col ul li,
                        .footer-col label {
                            justify-content: center;
                        }
                        .social-media {
                            text-align: center;
                        }
                    }

                    /* 600px o menos: una columna */
                    @media (max-width: 690px) {

                        .footer-columns {
                            flex-direction: column;
                            grid-template-columns: 1fr;
                            gap: 1rem;
                            
                        }

                        .footer-columns > div {
                            width: 100% !important;
                            max-width: 100% !important;
                            box-sizing: border-box; /* para que padding no aumente ancho */
                        }

                        .footer-col {
                            margin-bottom: 1rem;
                        }
                    }

                    @media (max-width: 600px) {

                        .footer-columns {
                            flex-direction: column;
                            grid-template-columns: 1fr;
                            gap: 1rem;
                        }

                        .footer-columns > div {
                            width: 100% !important;
                            max-width: 100% !important;
                            box-sizing: border-box; /* para que padding no aumente ancho */
                        }
                    }
                    @media (max-width: 560px) {
                        .footer-columns {
                            display: block;
                            grid-template-columns: 1fr;
                            /* gap: 1rem; */
                            margin: 2rem 2rem;
                        }

                        .footer-columns > div {
                            width: 100% !important;
                            max-width: 100% !important;
                            box-sizing: border-box;
                        }

                        .social-media {
                            text-align: center;
                            margin-bottom: 2rem;
                        }

                        .footer-col {
                            margin-bottom: 2rem;
                        }
                    }