*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

/* Visível pra leitor de tela e pra qualquer rastreador que leia o HTML puro
   (a maioria dos bots de IA não roda JavaScript), invisível na tela — sem
   isso o <h1> real da página (o cabeçalho visual é só a logo, uma imagem)
   não existiria em lugar nenhum. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Conteúdo real dos empreendimentos renderizado no servidor, pra quem lê o
   HTML sem executar JavaScript. js/main.js substitui isso pelos painéis
   interativos assim que a página carrega — ver renderEmpreendimentosContent
   em server/public/render.js. */
.panel-fallback {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px;
}
.panel-fallback img { border-radius: 12px; margin-bottom: 16px; }

.panel__toggle:focus-visible,
.panel__form-row input:focus-visible,
.panel__form-submit:focus-visible,
.panel__saibamais:focus-visible,
.modal__close:focus-visible,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible,
.plantas__thumb:focus-visible,
.plantas__variant-btn:focus-visible,
.carousel__nav:focus-visible,
.diferenciais__tab:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

:root {
  --color-ink: #111111;
  --color-bg: #ffffff;
  --color-cream: #f8f3eb;
  --color-gray-light: #d9d9d9;
  --color-gray-mid: #7c7c7c;
  --color-gray-dark: #676767;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body {
  font-family: var(--font-mono);
  color: var(--color-ink);
  background: var(--color-bg);
}

.showcase {
  display: flex;
  flex-direction: row;
  height: 90vh;
  max-height: 1920px;
  width: 100%;
  overflow: hidden;
}

.panel {
  position: relative;
  flex: 0 0 20%;
  overflow: hidden;
  transition: flex-basis 0.6s ease;
  cursor: pointer;
}

.panel.is-active {
  flex-basis: 72%;
}

.panel.is-collapsed {
  flex-basis: 7%;
}

.panel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.panel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.72) 0%, rgba(20, 18, 15, 0.5) 40%, rgba(20, 18, 15, 0.78) 100%);
  z-index: 1;
  transition: opacity 0.5s ease;
}

.panel:hover .panel__overlay {
  opacity: 0.32;
}

.panel.is-active .panel__overlay {
  opacity: 0.14;
}

.panel__toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: none;
  border: none;
  padding: 88px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  color: var(--color-cream);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.panel__numero {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  transition: transform 0.35s ease;
}

.panel__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  transition: opacity 0.3s ease, transform 0.35s ease;
}

.panel:hover .panel__numero {
  transform: scale(1.12);
}

.panel:hover .panel__label {
  transform: rotate(180deg) scale(1.12);
}

.panel.is-active .panel__label,
.panel.is-active .panel__toggle .panel__numero {
  opacity: 0;
}

.panel.is-collapsed .panel__numero {
  font-size: 1rem;
}

.panel.is-collapsed .panel__label {
  font-size: 0.75rem;
}

.panel__expanded-content {
  position: absolute;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  z-index: 3;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: 18px;
  max-width: 380px;
  max-height: calc(100% - 64px);
  overflow-y: auto;
  background: rgba(15, 14, 12, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-cream);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease 0.15s, visibility 0s linear 0.55s;
}

.panel.is-active .panel__expanded-content {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease 0.15s, visibility 0s linear 0s;
}

.panel__close {
  position: sticky;
  top: 0;
  align-self: flex-end;
  flex-shrink: 0;
  background: var(--color-ink);
  color: var(--color-cream);
  border: none;
  width: 36px;
  height: 36px;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  transition: opacity 0.2s ease;
}

.panel__close:hover {
  opacity: 0.85;
}

.panel__expanded-numero {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(248, 243, 235, 0.55);
  letter-spacing: 0.1em;
}

.panel__titulo {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.25rem);
  margin: 0;
  line-height: 1.05;
}

.panel__logo {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin: 4px 0;
}

.panel__logo--isa-brooklin {
  max-height: 112px;
}

.panel__bairro {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0;
}

.panel__frase {
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 42ch;
  margin: 0;
}

.panel__specs {
  display: flex;
  gap: 24px;
  margin: 6px 0;
}

.panel__specs div {
  display: flex;
  flex-direction: column;
}

.panel__specs dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.panel__specs dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
}

.panel__diferenciais {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.9rem;
  font-family: var(--font-mono);
}

.panel__diferenciais li::before {
  content: '— ';
  color: rgba(248, 243, 235, 0.5);
}

.panel__status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(248, 243, 235, 0.6);
  color: var(--color-cream);
  width: fit-content;
}

.panel__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  max-width: 340px;
}

.panel__form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel__form-row label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.panel__form-row input {
  background: rgba(245, 243, 238, 0.12);
  border: 1px solid rgba(245, 243, 238, 0.4);
  color: var(--color-cream);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: var(--font-mono);
}

.panel__form-row input::placeholder {
  color: rgba(245, 243, 238, 0.5);
}

.panel__form-submit {
  position: relative;
  margin-top: 10px;
  padding: 12px 22px;
  background: none;
  color: var(--color-cream);
  text-shadow: none;
  border: 1px solid rgba(248, 243, 235, 0.6);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  width: fit-content;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.panel__form-submit:hover {
  background: rgba(248, 243, 235, 0.12);
  border-color: var(--color-cream);
}

.panel__form-confirmation {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-cream);
}

.panel__form-error {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #e07856;
  margin-top: 8px;
}

.panel__form-field-error {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #e07856;
  margin: 2px 0 0;
}

.panel__form-row input.is-invalid {
  border-color: #e07856;
}

@media (max-width: 768px) {
  .showcase {
    flex-direction: column;
  }

  .panel {
    flex-basis: 20%;
  }

  .panel.is-active {
    flex-basis: 68%;
  }

  .panel.is-collapsed {
    flex-basis: 8%;
  }

  .panel__label {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .panel__toggle {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    padding: 76px 20px 16px;
  }

  .panel__expanded-content {
    top: 50%;
    left: 16px;
    right: 16px;
    transform: translateY(-50%);
    padding: 24px;
    max-width: none;
    max-height: calc(100% - 32px);
    gap: 14px;
  }

  /* The floating centered box above is too small to show the whole card
     comfortably on a phone (see the mobile UX report). When active, it
     takes over the full screen instead — same idea as the "Saiba mais"
     modal, with its own scrollable area and a visible close button. */
  .panel.is-active .panel__expanded-content {
    position: fixed;
    inset: 0;
    transform: none;
    /* Above the cookie banner (90, so its own content like the lead
       form's submit button is never hidden behind it) and below the
       "Saiba mais" modal (100, which opens on top of this sheet). */
    z-index: 95;
    max-width: none;
    max-height: none;
    padding: 32px 20px 40px;
    justify-content: flex-start;
  }

  .panel__specs {
    gap: 20px;
  }

  .panel__logo {
    max-height: 44px;
  }

  .panel__logo--isa-brooklin {
    max-height: 88px;
  }
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 20px 32px;
  background: transparent;
  transition: background 0.3s ease, padding 0.3s ease;
}

.site-header--solid {
  background: var(--color-gray-light);
  padding: 12px 32px;
}

.site-header__logo {
  height: 26px;
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  background: var(--color-bg);
  color: var(--color-ink);
}

.site-footer__logo {
  height: 28px;
  max-width: 100%;
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-gray-dark);
  margin: 0;
}

.panel__saibamais {
  position: relative;
  margin-top: 4px;
  padding: 10px 18px;
  background: #b23b3b;
  border: 1px solid #8f2e2e;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.panel__saibamais:hover {
  background: #8f2e2e;
}

.panel__saibamais-icon {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
}

.panel__saibamais::before,
.panel__saibamais::after,
.panel__form-submit::before,
.panel__form-submit::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-color: inherit;
}

.panel__saibamais::before,
.panel__form-submit::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--color-cream);
  border-left: 1px solid var(--color-cream);
}

.panel__saibamais::after,
.panel__form-submit::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--color-cream);
  border-right: 1px solid var(--color-cream);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 9, 8, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.modal {
  background: var(--color-bg);
  color: var(--color-ink);
  width: min(920px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  position: relative;
  padding: 48px;
}

.modal__close {
  position: sticky;
  top: 0;
  float: right;
  margin-top: -24px;
  margin-right: -24px;
  background: var(--color-ink);
  color: var(--color-cream);
  border: none;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.modal__header {
  margin-bottom: 32px;
}

.modal__logo {
  max-height: 44px;
  width: auto;
  margin-bottom: 8px;
}

.modal__titulo {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin: 0 0 4px;
}

.modal__bairro {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
  margin: 0;
}

.modal__section {
  margin-bottom: 40px;
}

.modal__section:last-child {
  margin-bottom: 0;
}

.modal__section-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--color-gray-mid);
  margin: 0 0 16px;
  letter-spacing: 0.1em;
}

.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__slide {
  flex: 0 0 auto;
  width: min(380px, 78%);
  scroll-snap-align: start;
}

.carousel__slide img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}

.carousel__slide img:hover {
  opacity: 0.85;
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: var(--color-bg);
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel__nav:hover {
  background: var(--color-gray-light);
}

.carousel__nav--prev {
  left: -8px;
}

.carousel__nav--next {
  right: -8px;
}

@media (max-width: 640px) {
  .carousel__nav {
    width: 34px;
    height: 34px;
  }

  .carousel__slide {
    width: 82%;
  }

  .carousel__slide img {
    height: 200px;
  }
}

.plantas__intro {
  font-size: 0.9rem;
  color: var(--color-gray-dark);
  margin: 0 0 20px;
}

.plantas__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 32px;
}

.plantas__thumb {
  position: relative;
  width: 108px;
  padding: 8px 8px 10px;
  background: var(--color-bg);
  border: 1px solid rgba(20, 18, 15, 0.12);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
}

.plantas__thumb img {
  width: 100%;
  height: 84px;
  object-fit: contain;
}

.plantas__thumb span {
  font-size: 0.75rem;
  color: var(--color-gray-dark);
}

.plantas__thumb.is-active {
  border-color: var(--color-ink);
}

.plantas__thumb.is-active::before,
.plantas__thumb.is-active::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
}

.plantas__thumb.is-active::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--color-ink);
  border-left: 1px solid var(--color-ink);
}

.plantas__thumb.is-active::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--color-ink);
  border-right: 1px solid var(--color-ink);
}

.plantas__stage {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.plantas__variants {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.plantas__variant-btn {
  position: relative;
  width: 120px;
  padding: 12px 16px;
  background: var(--color-bg);
  border: 1px solid rgba(20, 18, 15, 0.15);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-dark);
  cursor: pointer;
  text-align: left;
}

.plantas__variant-btn.is-active {
  background: var(--color-gray-light);
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.plantas__display {
  flex: 1;
  min-width: 0;
}

.plantas__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray-mid);
  margin: 0 0 8px;
  text-align: center;
}

.plantas__metragem-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 20px;
}

.plantas__image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}

.plantas__image:hover {
  opacity: 0.85;
}

@media (max-width: 640px) {
  .plantas__stage {
    flex-direction: column;
  }

  .plantas__variants {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .plantas__variant-btn {
    flex: 1;
    min-width: 90px;
  }
}

.modal__ficha {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal__ficha div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20, 18, 15, 0.1);
}

.modal__ficha dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.modal__ficha dd {
  margin: 0;
  font-size: 0.95rem;
}

.modal__video {
  position: relative;
  padding-top: 56.25%;
  background: var(--color-ink);
}

.modal__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.modal__tour360 iframe {
  width: 100%;
  height: 480px;
  border: none;
}

/* .panel__form and friends were built for the dark panel (cream-on-transparent);
   the modal is light (ink-on-white), so this section overrides every color to
   match while reusing the exact same form markup/classes. */
.modal__lead-intro {
  font-size: 0.95rem;
  color: var(--color-gray-mid);
  margin: 0 0 16px;
  max-width: 480px;
}

.modal__lead-section .panel__form {
  max-width: 420px;
  margin-top: 0;
}

.modal__lead-section .panel__form-row input {
  background: var(--color-bg);
  border: 1px solid var(--color-gray-light);
  color: var(--color-ink);
}

.modal__lead-section .panel__form-row input::placeholder {
  color: var(--color-gray-mid);
}

.modal__lead-section .panel__form-row input.is-invalid {
  border-color: #e07856;
}

/* WhatsApp-style green, not neon — deliberately a shade darker than the
   brand's own #25D366 so white button text keeps proper contrast; the
   pulse ring below still uses the bright #25D366 for the "look here" cue. */
.modal__lead-section .panel__form-submit {
  background: #12a350;
  color: #ffffff;
  border: 1px solid #0d7a3c;
  animation: modal-lead-cta-pulse 2.2s ease-out infinite;
}

.modal__lead-section .panel__form-submit:hover {
  background: #0d7a3c;
  animation-play-state: paused;
}

.modal__lead-section .panel__form-submit::before {
  border-top-color: var(--color-bg);
  border-left-color: var(--color-bg);
}

.modal__lead-section .panel__form-submit::after {
  border-bottom-color: var(--color-bg);
  border-right-color: var(--color-bg);
}

@keyframes modal-lead-cta-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .modal__lead-section .panel__form-submit {
    animation: none;
  }
}

.modal__lead-section .panel__form-confirmation {
  color: var(--color-ink);
  font-weight: 600;
  max-width: 420px;
}

@media (max-width: 640px) {
  .modal {
    padding: 28px 20px;
    max-height: 92vh;
  }

  .modal__close {
    margin-top: -4px;
    margin-right: -4px;
  }

  .modal__ficha div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5, 5, 4, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.lightbox__figure img {
  max-width: min(1100px, 88vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__figure figcaption {
  color: var(--color-cream);
  font-size: 0.85rem;
  opacity: 0.8;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(245, 243, 238, 0.4);
  color: var(--color-cream);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: none;
  border: 1px solid rgba(245, 243, 238, 0.4);
  color: var(--color-cream);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox__nav--prev {
  left: 24px;
}

.lightbox__nav--next {
  right: 24px;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(245, 243, 238, 0.12);
}

@media (max-width: 640px) {
  .lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
  }

  .lightbox__close {
    top: 12px;
    right: 12px;
  }

  .lightbox__nav--prev {
    left: 8px;
  }

  .lightbox__nav--next {
    right: 8px;
  }
}

.diferenciais__tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid rgba(20, 18, 15, 0.15);
  margin-bottom: 32px;
}

.diferenciais__tab {
  padding: 12px 24px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gray-mid);
  cursor: pointer;
}

.diferenciais__tab.is-active {
  background: var(--color-ink);
  color: var(--color-bg);
}

.diferenciais__lazer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 32px 16px;
}

.diferenciais__lazer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.diferenciais__icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-ink);
}

.diferenciais__lazer-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-dark);
}

.diferenciais__emp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 36px 24px;
}

.diferenciais__emp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.diferenciais__check {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-ink);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.diferenciais__emp-text {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--color-gray-dark);
  max-width: 24ch;
  margin: 0;
}

@media (max-width: 640px) {
  .diferenciais__tab {
    padding: 10px 16px;
    font-size: 0.7rem;
  }

  .diferenciais__lazer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 12px;
  }

  .diferenciais__emp-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.page-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 80px;
  font-family: var(--font-mono);
  color: var(--color-ink);
}

.page-content h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 32px;
}

.page-content p {
  line-height: 1.7;
  margin: 0 0 20px;
  font-size: 0.95rem;
}

.site-footer__links {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  margin: 0;
}

.site-footer__links a {
  color: var(--color-gray-dark);
}

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Below the "Saiba mais" modal (100) AND the mobile full-screen panel
     sheet (95) — a full-screen takeover's own content, like a lead
     form's submit button, must never end up hidden behind this banner. */
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--color-ink);
  color: var(--color-bg);
}

.cookie-banner__text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 640px;
}

.cookie-banner__text a {
  color: var(--color-bg);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 10px 18px;
  border-radius: 4px;
  border: 1px solid var(--color-bg);
  cursor: pointer;
}

.cookie-banner__btn--accept {
  background: var(--color-bg);
  color: var(--color-ink);
}

.cookie-banner__btn--reject {
  background: transparent;
  color: var(--color-bg);
}

@media (max-width: 640px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__actions {
    justify-content: flex-end;
  }
}