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

.site-footer {
  background: #02020e;

  border-top:
    1px solid var(--line);

  padding:
    0 var(--page-padding);
}


/* =====================================================
   FOOTER CTA
   READY WHEN YOU ARE
   CENTERED LAYOUT
===================================================== */

.footer-cta {
  min-height: 430px;

  padding:
    85px 30px;

  margin-left:
    calc(var(--page-padding) * -1);

  margin-right:
    calc(var(--page-padding) * -1);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  gap: 0;

  background: #F4F5E8;

  color: #040315;

  border-bottom:
    1px solid rgba(4, 3, 21, 0.14);
}


.footer-cta .eyebrow::before {
  display: none;
}


.footer-cta .eyebrow {
  margin:
    0 0 24px;

  color:
    rgba(4, 3, 21, 0.52);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.footer-cta h2 {
  width: 100%;

  max-width: 900px;

  margin: 0;

  color: #040315;

  font-size:
    clamp(46px, 5vw, 72px);

  line-height: 0.98;

  letter-spacing: -0.05em;

  text-align: center;
}


.footer-cta h2 em {
  display: block;

  font-style: normal;

  color: #7d8200;
}


.footer-cta-button {
  margin-top: 40px;

  flex:
    0 0 auto;

  min-width: 210px;

  min-height: 50px;

  padding:
    0 28px;

  border-radius: 999px;

  background: #040315;

  color: #fdf9fa;

  display: inline-flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  gap: 18px;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.04em;

  box-shadow:
    0 10px 24px rgba(4, 3, 21, 0.16);

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


.footer-cta-button span {
  font-size: 19px;

  transition:
    transform 0.25s ease;
}


.footer-cta-button:hover {
  background: #ecf401;

  color: #040315;

  transform:
    translateY(-3px);
}


.footer-cta-button:hover span {
  transform:
    translateX(4px);
}


/* =====================================================
   FOOTER MAIN
===================================================== */

.footer-main {
  display: grid;

  grid-template-columns:
    1.5fr 0.8fr 0.9fr 1.1fr;

  gap: 60px;

  width: 100%;

  padding:
    70px 0;

  align-items: start;
}


/* =====================================================
   BRAND
===================================================== */

.footer-brand {
  min-width: 0;
}


.footer-brand img {
  width: 270px;

  max-height: 110px;

  object-fit: contain;

  object-position:
    left center;
}


.footer-brand p {
  margin:
    18px 0 12px;

  color: var(--accent);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.04em;
}


.footer-brand>span {
  display: block;

  max-width: 340px;

  color:
    rgba(253, 249, 250, 0.58);

  font-size: 13px;

  line-height: 1.7;
}


/* =====================================================
   COLUMNS
===================================================== */

.footer-column {
  display: flex;

  flex-direction: column;

  gap: 13px;

  min-width: 0;
}


.footer-column h4 {
  margin:
    0 0 14px;

  color: #fdf9fa;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.footer-column a {
  color:
    rgba(253, 249, 250, 0.68);

  font-size: 14px;

  line-height: 1.5;

  transition:
    color 0.2s ease;
}


.footer-column a:hover {
  color: var(--accent);
}


/* =====================================================
   CONTACT
===================================================== */

.footer-contact .footer-phone {
  color: #fdf9fa;

  font-size: 18px;

  font-weight: 700;
}


.footer-contact .footer-email {
  color:
    rgba(253, 249, 250, 0.72);

  font-size: 14px;

  overflow-wrap: anywhere;
}


.footer-contact .footer-email:hover {
  color: var(--accent);
}


.footer-location {
  margin:
    5px 0 0;

  color:
    rgba(253, 249, 250, 0.56);

  font-size: 13px;

  line-height: 1.65;
}


.footer-whatsapp {
  margin: 0;

  color:
    rgba(253, 249, 250, 0.42);

  font-size: 12px;
}


/* =====================================================
   FOOTER BOTTOM
===================================================== */

.footer-bottom {
  width: 100%;

  min-height: 78px;

  border-top:
    1px solid var(--line);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  color:
    rgba(253, 249, 250, 0.52);

  font-size: 11px;
}


.footer-copyright {
  flex:
    0 1 auto;
}


.footer-legal {
  display: flex;

  align-items: center;

  gap: 26px;

  margin-left: auto;
}


.footer-legal a {
  color:
    rgba(253, 249, 250, 0.52);

  font-size: 11px;
}


.footer-legal a:hover {
  color: var(--accent);
}


/* =====================================================
   FLOATING BACK TO TOP BUTTON
===================================================== */

.floating-back-top {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 999;

  width: 52px;
  height: 52px;

  display: flex;

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

  padding: 0;

  border:
    1px solid rgba(253, 249, 250, 0.16);

  border-radius: 50%;

  background: #040315;

  color: #fdf9fa;

  font-size: 24px;

  font-weight: 500;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 8px 24px rgba(4, 3, 21, 0.24);

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


.floating-back-top:hover {
  background: #ecf401;

  color: #040315;

  border-color: #ecf401;

  transform:
    translateY(-4px);

  box-shadow:
    0 12px 28px rgba(236, 244, 1, 0.14);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

  .footer-cta {
    min-height: 390px;

    padding:
      75px 24px;

    align-items: center;

    justify-content: center;

    text-align: center;
  }


  .footer-cta .eyebrow {
    margin-bottom: 22px;

    font-size: 11px;
  }


  .footer-cta h2 {
    max-width: 760px;

    font-size:
      clamp(42px, 7vw, 58px);

    line-height: 1;
  }


  .footer-cta h2 em {
    display: block;
  }


  .footer-cta-button {
    margin-top: 36px;

    min-width: 195px;

    min-height: 49px;

    padding:
      0 25px;

    font-size: 13px;
  }


  .footer-main {
    grid-template-columns:
      1.2fr 1fr 1fr;

    gap: 40px;

    padding:
      60px 0;
  }


  .footer-brand {
    grid-column:
      1 / -1;
  }


  .footer-brand img {
    width: 250px;
  }


  .footer-contact {
    grid-column: auto;
  }


  .footer-bottom {
    display: flex;

    flex-direction: row;

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

    gap: 16px;

    min-height: 74px;

    font-size: 10px;
  }


  .footer-copyright {
    max-width: 58%;
  }


  .footer-legal {
    margin-left: auto;

    gap: 16px;

    white-space: nowrap;
  }


  .footer-legal a {
    font-size: 10px;
  }


  .floating-back-top {
    right: 20px;
    bottom: 20px;

    width: 50px;
    height: 50px;

    font-size: 23px;
  }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

  .footer-cta {
    min-height: 360px;

    padding:
      65px 18px;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 0;
  }


  .footer-cta .eyebrow {
    margin-bottom: 20px;

    font-size: 10px;
  }


  .footer-cta h2 {
    width: 100%;

    max-width: 100%;

    font-size: 42px;

    line-height: 1;
  }


  .footer-cta h2 em {
    display: block;
  }


  .footer-cta-button {
    margin-top: 32px;

    min-width: 185px;

    min-height: 48px;

    padding:
      0 24px;

    font-size: 13px;
  }


  .footer-main {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap:
      42px 26px;

    width: 100%;

    padding:
      55px 0;
  }


  .footer-brand {
    grid-column:
      1 / -1;
  }


  .footer-brand img {
    width: 220px;
  }


  .footer-contact {
    grid-column:
      1 / -1;
  }


  .footer-bottom {
    width: 100%;

    min-height: 72px;

    padding:
      20px 0;

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    font-size: 9px;
  }


  .footer-copyright {
    max-width: 55%;

    line-height: 1.4;
  }


  .footer-legal {
    margin-left: auto;

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

    white-space: nowrap;
  }


  .footer-legal a {
    font-size: 9px;
  }


  .floating-back-top {
    right: 16px;
    bottom: 16px;

    width: 48px;
    height: 48px;

    font-size: 22px;
  }
}

/* =====================================================
   FOOTER LOGO — LARGER + TOP ALIGNED WITH COLUMNS
===================================================== */
.footer-main {
  align-items: start;
}

.footer-brand {
  align-self: start;
}

.footer-brand img {
  width: 300px;
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
  object-position: left top;
  display: block;
  margin: -8px 0 0;
}

@media (max-width: 900px) {
  .footer-brand img {
    width: 270px;
    margin-top: -6px;
  }
}

@media (max-width: 600px) {
  .footer-brand img {
    width: 245px;
    margin-top: -4px;
  }
}