/* =========================================================
   CTA FINAL - ESPAÇAMENTO COM FOOTER
========================================================= */

.site-footer {
    position: relative;

    width: 100%;
	margin-top: -85px;

    padding:
        54px
        clamp(28px, 5vw, 80px)
        28px;

    background: #edf1ee;
    color: #111111;
}

/* =========================================================
   CONTAINER
========================================================= */

.footer-container {
    width: 100%;
    max-width: 1440px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 50px;
}

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

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.footer-logo a {
    display: inline-flex;

    text-decoration: none;
}

.footer-logo img {
    display: block;

    width: 82px;
    height: auto;

    object-fit: contain;
}

/* =========================================================
   MENU
========================================================= */

.footer-menu {
    display: flex;

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

    gap: clamp(22px, 2.4vw, 42px);
}

.footer-menu a {
    position: relative;

    display: inline-block;

    color: #111111;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 0.08em;

    text-decoration: none;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

/* DETALHE VERDE */

.footer-menu a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: #365c4d;

    transition: width 0.25s ease;
}

.footer-menu a:hover {
    color: #365c4d;
}

.footer-menu a:hover::after {
    width: 100%;
}

/* =========================================================
   SOCIAL
========================================================= */

.footer-social {
    display: flex;

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

    gap: 10px;
}

.footer-social a {
    width: 42px;
    height: 42px;

    display: inline-flex;

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

    border: 1px solid rgba(17, 17, 17, 0.14);
    border-radius: 50%;

    color: #111111;

    font-size: 16px;

    text-decoration: none;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.footer-social a:hover {
    background: #365c4d;
    border-color: #365c4d;

    color: #ffffff;

    transform: translateY(-2px);
}

/* =========================================================
   PARTE INFERIOR
========================================================= */

.footer-bottom {
    width: 100%;
    max-width: 1440px;

    margin:
        42px
        auto
        0;

    padding-top: 22px;

    border-top: 1px solid rgba(17, 17, 17, 0.10);

    display: flex;

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

    gap: 30px;
}

.footer-bottom p,
.footer-signature {
    margin: 0;

    color: #77736f;

    font-size: 11px;
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: 0.02em;
}

.footer-signature {
    color: #365c4d;
}

/* =========================================================
   WHATSAPP FLUTUANTE - EN DESIGN
========================================================= */

.endesign-whatsapp-float{
    position:fixed;

    right:28px;
    bottom:28px;

    z-index:9999;

    display:flex;
    align-items:center;

    gap:12px;

    color:#ffffff;

    text-decoration:none;
}


/* =========================================================
   TEXTO
========================================================= */

.endesign-whatsapp-label{
    display:flex;
    align-items:center;

    min-height:46px;

    padding:0 18px;

    border-radius:999px;

    background:#111111;

    font-size:11px;
    font-weight:700;

    letter-spacing:.06em;
    text-transform:uppercase;

    opacity:0;

    transform:translateX(12px);

    pointer-events:none;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.14);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


/* =========================================================
   ÍCONE
========================================================= */

.endesign-whatsapp-icon{
    position:relative;

    width:58px;
    height:58px;

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

    border-radius:50%;

    background:#111111;

    color:#ffffff;

    font-size:23px;

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.20);

    transition:
        transform .3s ease,
        background .3s ease;
}


/* DETALHE VERDE */

.endesign-whatsapp-icon::after{
    content:"";

    position:absolute;

    top:5px;
    right:5px;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#405c4c;

    border:2px solid #111111;
}

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

.endesign-whatsapp-float:hover
.endesign-whatsapp-label{
    opacity:1;

    transform:translateX(0);
}

.endesign-whatsapp-float:hover
.endesign-whatsapp-icon{
    background:#405c4c;

    transform:translateY(-3px);
}

.endesign-whatsapp-float:hover
.endesign-whatsapp-icon::after{
    background:#ffffff;

    border-color:#405c4c;
}

.footer-partner {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

.footer-partner a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.footer-partner a:hover {
    opacity: 0.65;
}

/* =========================================================
   FOOTER - MOBILE
========================================================= */

@media (max-width: 767px) {

  .site-footer{
    padding:
      42px
      22px
      28px;
  }


  /* =======================================================
     CONTAINER
  ======================================================= */

  .footer-container{
    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:28px;
  }


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

  .footer-logo{
    margin:0;
  }

  .footer-logo img{
    width:82px;
    height:auto;

    display:block;
  }


  /* =======================================================
     MENU
  ======================================================= */

  .footer-menu{
    width:100%;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:18px 12px;

    align-items:center;
  }

  .footer-menu a{
    display:block;

    padding:0;

    text-align:center;

    font-size:15px;
    font-weight:600;

    line-height:1.2;
  }


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

  .footer-social{
    display:flex;

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

    gap:14px;
  }

  .footer-social a{
    width:52px;
    height:52px;

    display:flex;

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

    border-radius:50%;

    font-size:21px;
  }


  /* =======================================================
     PARTE INFERIOR
  ======================================================= */

  .footer-bottom{
    width:100%;

    margin-top:34px;

    padding-top:24px;

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:12px;

    text-align:center;
  }

  .footer-bottom p{
    margin:0;

    font-size:13px;
    line-height:1.5;
  }

}