@import url(reset.css);

/* =========================================================
   RODAPÉ
========================================================= */

/* =========================================================
   RODAPÉ
========================================================= */

.rodape {
    position: relative;

    width: 100%;

    padding: 50px 7% 0;

    background-color: #dee1e5;

    display: grid;

    grid-template-columns: 1.8fr 1fr 1.2fr 1fr 1.2fr;

    column-gap: 45px;
    row-gap: 40px;

    box-sizing: border-box;

    z-index: 1;
}


/* =========================================================
   ELEMENTOS
========================================================= */

.rodape > * {
    position: relative;

    z-index: 1;
}


/* =========================================================
   LOGO
========================================================= */

.rodape .logo {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.rodape .logo > img {
    width: 160px;
    height: auto;

    display: block;

    margin-bottom: 8px;
}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.rodape .logo > ul {
    padding: 0;
    margin: 0 0 20px;

    list-style: none;
}

.rodape .logo > ul p {
    margin: 0;

    color: var(--corPrincipal);

    font-size: var(--esp-6);
    font-weight: var(--peso-2);

    white-space: nowrap;
}


/* =========================================================
   REDES SOCIAIS
========================================================= */

.rodape .redes-sociais {
    display: flex;

    align-items: center;

    gap: 8px;
}

.rodape .redes-sociais a {
    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    background-color: var(--corPrincipal);

    border-radius: 50%;

    text-decoration: none;

    transition: .3s ease;
}

.rodape .redes-sociais a img {
    width: 12px;
    height: 12px;

    display: block;

    filter: brightness(0) invert(1);
}

.rodape .redes-sociais a:hover {
    transform: translateY(-3px);
}

.rodape .redes-sociais-mobile {
    display: none !important;
}


/* =========================================================
   COLUNAS
========================================================= */

.rodape .explora {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* =========================================================
   TÍTULO DAS COLUNAS
========================================================= */

.rodape .explora h2 {
    position: relative;

    width: 100%;

    margin: 0 0 5px;

    padding: 0 0 2px;

    color: var(--corPrincipal);

    font-size: 0.95rem;

    font-weight: var(--peso-2);
}


/* =========================================================
   LINHA DO TÍTULO
========================================================= */

.rodape .explora h2::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 25px;
    height: 1px;

    background-color: var(--corPrincipal);
}


/* =========================================================
   LISTA DE LINKS
========================================================= */

.rodape .explora ul {
    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 0;
    margin: 0;

    list-style: none;
}


/* =========================================================
   ITEM
========================================================= */

.rodape .explora ul li {
    margin: 0;
    padding: 0;
}


/* =========================================================
   LINKS
========================================================= */

.rodape .explora ul li a {
    display: flex;

    align-items: center;

    gap: 6px;

    color: var(--corPrincipal);

    font-size: 0.8rem;

    font-weight: var(--peso-3);

    text-decoration: none;

    transition: .3s ease;
}


/* =========================================================
   SETAS — NAVEGAÇÃO / ATENDIMENTO / LEGAL
========================================================= */

.rodape .explora ul li a img {
    width: 7px;
    height: 7px;

    padding: 0;

    display: block;

    background: transparent;

    border-radius: 0;

    filter: none;

    flex-shrink: 0;
}


/* =========================================================
   CONTACTO — ÍCONES CIRCULARES
========================================================= */

/*
   Apenas a coluna Contacto recebe círculos
   nos ícones.
*/

.icone-contacto {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--corPrincipal);

    border-radius: 50%;

    flex-shrink: 0;
}

.icone-contacto img {
    width: 15px;
    height: 15px;

    display: block;

    filter: brightness(0) invert(1) !important;
}

/* =========================================================
   HOVER DOS LINKS
========================================================= */

.rodape .explora ul li a:hover {
    transform: translateX(4px);
}

/* =========================================================
   FOOTER INFERIOR
========================================================= */

.rodape .footer {
    grid-column: 1 / -1;

    width: 100vw;

    margin-left: calc(-7vw);

    min-height: 45px;

    padding: 10px 7%;

    box-sizing: border-box;

    background-color: rgba(17, 34, 64, 0.10);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 30px;
}


/* =========================================================
   CONTEÚDO DO FOOTER
========================================================= */

.rodape .reserva,
.rodape .politica {
    display: flex;

    align-items: center;
}


/* =========================================================
   RESERVA
========================================================= */

.rodape .reserva {
    color: var(--corPrincipal);
    font-size: 0.72rem;

    font-weight: var(--peso-2);
}


/* =========================================================
   POLÍTICA
========================================================= */

.rodape .politica ul {
    display: flex;

    align-items: center;

    padding: 0;
    margin: 0;

    list-style: none;
}

.rodape .politica ul li {
    margin: 0;
    padding: 0;
}

.rodape .politica ul li a {
    color: var(--corPrincipal);

    font-size: 0.72rem;

    font-weight: var(--peso-2);

    text-decoration: none;

    transition: .3s ease;
}


/* =========================================================
   SEPARADOR |
========================================================= */

.rodape .politica ul li a::before {
    content: "|";

    margin-right: 8px;

    color: var(--corPrincipal);
}


/* =========================================================
   HOVER
========================================================= */

.rodape .politica ul li a:hover {
    opacity: .7;
}