@import url(reset.css);

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

.rodape {
    position: relative;
    width: 100%;
    padding: 45px 7% 10px;

    background-color: var(--corSegundaria);

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1fr;

    column-gap: 70px;
    row-gap: 45px;
    z-index: 1;
}

/* =========================================================
   DEGRADÊ INFERIOR
========================================================= */

.rodape::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;
    height: 200px;

    background:
        radial-gradient(
            ellipse at 20% 100%,
            rgba(134, 113, 80, 0.35),
            transparent 65%
        ),
        radial-gradient(
            ellipse at 80% 100%,
            rgba(134, 113, 80, 0.35),
            transparent 65%
        );

    pointer-events: none;
    z-index: 0;
}

.rodape > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   1ª COLUNA — LOGO
========================================================= */

.rodape .logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

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

    display: block;

    margin-bottom: 38px;
}


/* =========================================================
   FUNÇÕES
========================================================= */

.rodape .logo > ul {
    display: flex;
    align-items: center;

    list-style: none;

    padding: 0;
    margin: 0 0 12px;
   
}

.rodape .logo > ul li {
    color: var(--corBranca);

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

    white-space: nowrap;
 
}


/* ponto somente entre os itens */
.rodape .logo > ul li:not(:first-child)::before {
    content: "";

    width: 4px;
    height: 4px;

    display: inline-block;

    margin: 0 9px;

    background-color: var(--corBranca);

    border-radius: 50%;

    vertical-align: middle;
}


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

.rodape .redes-sociais {
    display: flex;

    align-items: center;

    gap: 7px;

    flex-shrink: 0;
}


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

    display: flex;

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

    background-color: var(--corPrincipal);

    border-radius: 50%;

    text-decoration: none;

    transition: .3s ease;
}


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

    display: block;
}


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


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

.rodape .explora {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    width: 100%;
}


/* =========================================================
   TÍTULO
========================================================= */

.rodape .explora h2 {
    position: relative;

    width: 100%;

    margin: 0 0 10px;
    padding: 0 0 8px;

    color: var(--corPrincipal);

    font-size: var(--esp-4);
    font-weight: var(--peso-4);
}


/* linha fina completa */
.rodape .explora h2::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 0.5px;

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


/* linha grossa curta no início */
.rodape .explora h2::before {
    content: "";

    position: absolute;

    left: 3px;
    bottom: -3px;

    width: 25px;
    height: 3px;
    border-radius: 20px;

    background-color: var(--corPrincipal);

    z-index: 2;
}


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

.rodape .explora ul {
    display: flex;

    flex-direction: column;

    gap: 4px;

    list-style: none;

    padding: 0;
    margin: 0;
}


/* =========================================================
   LINK
========================================================= */

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


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

    align-items: center;

    gap: 3px;

    color: var(--corBranca);

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

    text-decoration: none;

    transition: .3s ease;
}


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

    display: block;

    flex-shrink: 0;
}


/* hover */
.rodape .explora ul li a:hover {
    color: var(--corPrincipal);

    transform: translateX(4px);
}


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

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

    width: 100%;

    padding: 8px 0;

    border-top: 0.5px solid var(--corPrincipal);

    display: flex;

    align-items: center;

    justify-content: space-between;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.rodape .reserva {
    color: var(--corBranca);

    font-size: var(--esp-7);
    font-weight: var(--peso-4);
}


/* =========================================================
   POLÍTICAS
========================================================= */

.rodape .politica ul {
    display: flex;

    align-items: center;

    list-style: none;

    padding: 0;
    margin: 0;
}


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


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

    font-size: var(--esp-7);
    font-weight:var(--peso-4);

    text-decoration: none;

    transition: .3s ease;
}


/* ponto entre os links */
.rodape .politica ul li:not(:first-child)::before {
    content: "";

    width: 4px;
    height: 4px;

    display: inline-block;

    margin: 0 0 0 10px;

    background-color: var(--corBranca);

    border-radius: 50%;

    vertical-align: middle;
}


/* hover */
.rodape .politica ul li a:hover {
    color: var(--corPrincipal);
}