:root {
  --bh-footer: calc(45px + env(safe-area-inset-bottom, 0px));
}

#rodape {
  position: fixed;
  z-index: 25;
  inset: auto 0 0;
  height: var(--bh-footer);
  display: block;
  padding: 0;
  isolation: isolate;
  background: #21170f;
  color: #fff4e4;
  box-shadow: inset 0 1px #e0c3a166;
}

#rodape .footer-art,
#rodape canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#rodape .footer-content {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px)
    max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(90deg, #18110ef5, #18110e99 23%, #18110e70 43%, #18110efa 67%);
}

#rodape .footer-name {
  margin: 0;
  color: inherit;
  font: 500 clamp(21px, 1.85vw, 28px)/1 Cormorant, Georgia, serif;
  letter-spacing: .02em;
  white-space: nowrap;
}

#rodape :is(.footer-links, .footer-contact-links, .footer-actions) {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 15px);
}

#rodape .footer-links :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  font: 600 13px/1.2 Manrope, Arial, sans-serif;
  text-shadow: 0 1px 3px #100b07;
  text-decoration: none;
  white-space: nowrap;
}

#rodape .footer-links [hidden],
#rodape .footer-links .footer-contact-trigger,
#rodape[data-panel] .footer-top { display: none; }

#rodape .footer-links :is(a, button):hover { text-decoration: underline; text-underline-offset: 3px; }
#rodape .footer-links :is(a, button):focus-visible { outline: 2px solid #e1c9a5; outline-offset: -2px; }
#rodape .footer-links svg { width: 18px; height: 18px; flex-shrink: 0; }
#rodape .footer-top svg { transform: rotate(-90deg); }
#rodape .footer-links :is(.footer-top, #footer-orientation) { min-width: 44px; }
#rodape #footer-orientation[aria-pressed="true"] { color: #f4ce8d; }
#rodape .footer-links button:disabled { opacity: .65; cursor: default; }

#rodape .footer-motion-status {
  position: absolute;
  inset: auto 12px calc(100% + 8px) auto;
  max-width: min(280px, calc(100vw - 24px));
  margin: 0;
  padding: 8px 10px;
  background: #241b13;
  color: #f8eee1;
  font: 600 13px/1.4 Manrope, Arial, sans-serif;
}

#brand-contact .brand-contact-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-block: 8px;
}

#brand-contact .brand-contact-methods a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

body:is([data-immersive="active"], [data-immersive="loading"]) #rodape .footer-content { visibility: hidden; }
body[data-catalogue-embedded] #rodape { display: none; }
body[data-catalogue-embedded] { --bh-footer: 0px; }

@media (max-width: 700px) {
  #rodape .footer-content {
    padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
    background: linear-gradient(90deg, #18110efa, #18110ed1 42%, #18110e85 66%, #18110ed6);
  }

  #rodape .footer-name {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
  }

  #rodape .footer-links { width: 100%; justify-content: space-between; }
  #rodape .footer-actions { gap: 0; }
  #rodape .footer-links .footer-contact-links > a,
  #rodape .footer-actions > [data-brand-contact],
  #rodape [data-tilt-label] { display: none; }

  #rodape .footer-links .footer-contact-trigger {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 1px;
    padding: 0 1px;
    font-size: 12px;
    line-height: 1.25;
  }
}