/* Variables de css*/
:root {
    --color-primary: #a68160;
    --color-secondary: #f2f2f2;
    --color-white: white;
    --color-black: black;
}


footer {
    background-color: var(--color-primary);
    height: 100%;
    margin-top: 5vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    color: var(--color-secondary);
    text-align: center;





    /*contenedor 1 footer */
    & .sobre-nosotros {
        display: grid;
        gap: 1em;
        padding: 2em;
        align-items: center;
        justify-content: center;

        & h2 {
            font-size: clamp(1em, 2.7vw, 12em);
            height: 100%;
        }

        & .sobre-nosotros-contenido {
            display: grid;

            & a {
                color: var(--color-secondary);
                text-decoration: none;
                font-weight: 500;
                font-size: clamp(1em, 1.6vw, 12em);
            }
        }


    }

    /*contenedor 2 footer */
    & .sta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2em;

        .contenedor-logo-footer {
            & i {
                color: var(--color-secondary);
                font-size: clamp(1em, 2.7vw, 12em);

            }
        }

        & h2 {
            font-size: clamp(1em, 2.7vw, 12em);
        }

    }

    /*contenedor 3 footer */
    & .atencion-cliente {
        display: grid;
        gap: 1em;
        padding: 2em;
        justify-content: center;

        & h2 {
            font-size: clamp(1em, 2.7vw, 12em);
        }

        & .redes {
            display: flex;
            gap: 2vw;
            text-align: center;
            justify-content: center;

            a {
                color: var(--color-secondary);
                text-decoration: none;
                font-weight: 500;

                & i {
                    font-size: clamp(1em, 2.5vw, 12em);
                }
            }

            .correo {
                display: none;
            }

        }
    }
}

@media (max-width: 1024px) {
    footer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        grid-template-areas:
            "centro centro"
            "izquierda derecha";
        text-align: center;
        gap: 1em;
        color: white;
        padding: 1em;

        & .sobre-nosotros {
            grid-area: izquierda;
            padding: 0em 0em;
            text-align: center;
        }

        & .sta {
            grid-area: centro;
            padding: 0em 0em;
            text-align: center;
            align-items: center;
            justify-content: center;
        }

        & .atencion-cliente {
            grid-area: derecha;
            padding: 0em 0em;
        }
    }
}

@media (max-width: 750px) {


    footer {
        & .sobre-nosotros {
            & h2 {
                font-size: clamp(1em, 3.2vh, 12em);
            }

            & .sobre-nosotros-contenido {
                & a {
                    font-size: clamp(1em, 2.8vh, 12em);
                }
            }
        }

        & .sta {
            .contenedor-logo-footer {
                & i {
                    font-size: clamp(1em, 4.5vh, 12em);
                }
            }

            & h2 {
                font-size: clamp(1em, 3.4vh, 12em);
            }

        }

        & .atencion-cliente {
            & h2 {
                font-size: clamp(1em, 3.2vh, 12em);
            }

            & .redes {
                a {
                    & i {
                        font-size: clamp(1em, 4vh, 12em);
                    }
                }
            .correo {
                display: flex;
            }
            .correo-pc{
                display: none;
            }

            }
        }
    }
}