:root {
  --background: #000;
  --paragraphs: rgba(230, 230, 230, .6);
  --light: #e6e6e6;
  --border: rgba(230, 230, 230, .2);
  --dark: #191819;
  --glass: rgba(45, 44, 45, .5);
  --ease: cubic-bezier(.25, .46, .45, .94);
}

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

html { height: 100%; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--paragraphs);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.8em;
}

h1, h2, .gallery-title { margin: 0; color: var(--light); font-weight: 700; }
h1 { font-size: 3.82em; line-height: 1.14em; }
h2 { font-size: 3.17em; line-height: 1.18em; }
.gallery-title { font-size: .94em; line-height: 1.37em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
/* The pages set width/height on every photo (so the browser reserves its space while it loads);
   height: auto keeps the proportions wherever the CSS sets only the width */
img { height: auto; }

/* Light weight of the main font for the second part of headings */
.text-span { font-weight: 300; }

/* ---------- Logo + nav (fixed) ---------- */
.logo {
  position: fixed;
  z-index: 700;
  top: 1.52em;
  left: 1.52em;
  mix-blend-mode: difference;
}
.brand { display: flex; align-items: center; padding: 1em .7em; }
.image-logo { height: 1.2em; }

.navbar {
  position: fixed;
  z-index: 500;
  top: 1.52em;
  right: 1.52em;
}
.nav-menu { display: flex; }
.nav-link {
  padding: .95em 1.1em;
  color: rgba(230, 230, 230, .7);
  font-size: .82em;
  font-weight: 600;
  line-height: 1.1em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
  transition: color .3s var(--ease);
}
.nav-link:hover, .nav-link.is-current { color: #fff; }

.menu-button {
  display: none;
  width: 2.6em;
  height: 2.6em;
  padding: 0;
  border: 0;
  border-radius: 100%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: var(--light);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transition: background-color .3s var(--ease);
}
.menu-button span {
  display: block;
  width: 1em;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--ease);
}

/* ---------- Horizontal scroll section ---------- */
/* The tall section creates the vertical scroll distance; the sticky child stays
   on screen while JS converts that scroll into a horizontal translation. */
.section-hero-horizontal { position: relative; height: 650vh; }
.hero-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.frame {
  display: flex;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}
.frame-100, .frame-50 {
  flex: none;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .7em;
}
.frame-100 { width: 100vw; flex-direction: column; }
.frame-50 { width: 50vw; }
/* "Sobre nós": a column of text next to the hero, the full height of the screen and the width
   of one quarter column of the old layout ((90vw - 3 gaps) / 4), then a full-height card two
   columns wide. Each panel has the regular .7em padding, so the gaps match the other cards. */
:root { --about-col: calc((90vw - 93px) / 4); --about-gap: 31px; }
.frame-about-col {
  flex: none;
  width: calc(20.5em + 9.8em); /* text 20.5em wide: the heading breaks in 3 lines on every screen */
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* heading and text sit at the bottom, 40px above the screen's edge */
  --about-space: 2.5em; /* heading -> text and table -> "Saiba mais" */
  padding: .7em 4.9em 40px 4.9em; /* 4x the gap between cards on both sides (4.9em + the cards' .7em) */
}
/* Same size and weight as this heading on the About page (.heading-section) */
.frame-about-col .frame-about-heading { width: 100%; margin: 0; }
.frame-about-col .frame-about-text { margin-top: var(--about-space); }
.frame-about-col .frame-about-facts { margin-top: 1em; }
/* Short desktop screens: show the shorter text (as on phones) so the heading still fits,
   and on very short ones tighten the spacing too */
@media (min-width: 992px) and (max-height: 860px) {
  .frame-about-more { display: none; }
}
@media (min-width: 992px) and (max-height: 680px) {
  .frame-about-col { --about-space: 1.4em; }
  .frame-about-facts th, .frame-about-facts td { padding: .3em 0; }
}
.frame-about-text {
  color: var(--paragraphs);
  font-size: .84em;
  font-weight: 500; /* a bit heavier than the body (400), since the text is small and gray */
  line-height: 1.6;
}
.frame-wide {
  flex: none;
  width: calc(2 * var(--about-col) + var(--about-gap) + 1.4em);
  height: 100vh;
  padding: .7em;
}
.frame-about-text strong { color: var(--light); font-weight: 700; }
/* Key facts below the text: only a thin line between rows */
.frame-about-facts {
  width: 100%;
  border-collapse: collapse;
  color: var(--paragraphs);
  font-size: .84em;
  font-weight: 500;
  line-height: 1.6;
}
.frame-about-facts th { padding: .55em 0; color: var(--light); font-weight: 700; text-align: left; }
.frame-about-facts td { padding: .55em 0; text-align: right; }
.frame-about-facts tr + tr { border-top: 1px solid var(--border); }
.frame-about-col .frame-about-link { align-self: flex-start; margin-top: calc(var(--about-space) / .84 - .5em); font-size: .84em; } /* same visible space as heading -> text */
.frame-about-link { color: var(--light); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
.frame-about-link::after { content: " →"; }
.frame-portrait {
  flex: none;
  width: calc((100vh - 1.4em) * .66 + 1.4em); /* portrait card, ~2:3 */
  height: 100vh;
  display: flex;
  padding: .7em;
}
.padding-0 { padding: 0; }
/* Phone-only carousel that stands in for a card (see "Conheça a casa" in the mobile rules) */
.house-carousel-block { display: none; }
/* Cards after the "Criamos eventos" heading (build.py, cards_heading): on larger screens the
   wrapper adds no box and the heading is hidden; on phones the cards stack (mobile rules) */
.track-cards { display: contents; }
.cards-heading, .track-extras { display: none; }

/* Hero: the first card's video plays behind the title, inside a full-screen card with the
   same .7em margin and rounded corners as the other cards (so the gap to the next card
   matches the gap between all cards), dimmed so the title reads */
.hero-panel { position: relative; overflow: hidden; clip-path: inset(.7em round .94em); } /* the "veja mais" glow ends with the card */
.hero-card { position: absolute; inset: .7em; overflow: hidden; border-radius: .94em; background: var(--dark); }
.hero-card::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55); pointer-events: none; }
.hero-bg-video { width: 100%; height: 100%; object-fit: cover; }
.hero-panel .hero-horizontal { position: relative; z-index: 2; }

/* Hero */
.hero-horizontal {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8em 0 6em 12%;
}
.block-hero-horizontal {
  max-width: 50vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5em;
}
.heading-hero-large { font-size: 6.17vw; line-height: 1.04em; }
.paragraph-hero { max-width: 20em; font-size: 1.06em; line-height: 1.72em; }

.block-circle-hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 0;
}
.text-circle {
  position: relative;
  z-index: 1;
  margin-right: 7vw;
  color: var(--light);
  font-size: .92em;
  font-weight: 600;
  line-height: 1.4em;
}
.circle-hero {
  position: absolute;
  right: -8vw;
  mix-blend-mode: difference;
  transition: transform .8s var(--ease);
}
.yellow-circle-hero, .yellow-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  mix-blend-mode: color-dodge;
  background-image: linear-gradient(150deg, #e3d026 10%, #e32626 90%);
  animation: glow 8s ease-in-out infinite alternate;
}
.yellow-circle-hero { width: 16vw; height: 16vw; filter: blur(35px); }
.blue-circle-hero, .blue-circle {
  width: 60%;
  height: 60%;
  border-radius: 100%;
  mix-blend-mode: color-dodge;
  background-image: linear-gradient(150deg, #5ecfff 10%, #006ded 90%);
}
@keyframes glow {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(180deg) scale(1.08); }
}

/* Project cards */
.lightbox-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .94em;
  background: var(--dark);
  cursor: pointer;
}
.background-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .94em;
  transition: transform 1s var(--ease);
}

.block-project-text {
  position: absolute;
  z-index: 30;
  left: .95em;
  bottom: .95em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .12em;
  padding: .9em 2.5em .9em 1.1em;
  border-radius: .76em;
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
.subheading-project { color: rgba(230, 230, 230, .5); font-size: .82em; line-height: 1.4em; }

.grid-2-lightbox {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.4em;
  width: 100%;
  height: 100%;
}

/* CTA + footer (last panel) */
.block-cta-full {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 6.5em 12% 3em;
}
.link-cta-full { position: relative; max-width: 50vw; }
.heading-cta-full { font-size: 6.17vw; line-height: 1.05em; }
.circle {
  position: absolute;
  right: -7%;
  bottom: 0;
  mix-blend-mode: difference;
  transition: transform .8s var(--ease);
}
.link-cta-full:hover .circle { transform: translate(-1.5vw, -1vw) scale(1.15); }
.yellow-circle { width: 9vw; height: 9vw; filter: blur(20px); }

.footer {
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.6em 1.8em;
  padding-right: 104px; /* keep the houses menu clear of the WhatsApp button */
}
.block-footer { display: flex; justify-content: center; align-items: center; gap: .8em; }
.link-footer {
  flex: none;
  padding: 1em;
  color: rgba(230, 230, 230, .5);
  font-size: .59em;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.link-footer:hover { color: var(--light); }
.link-footer-soon { cursor: default; }
.link-footer-soon:hover { color: rgba(230, 230, 230, .5); }

/* ---------- Intro animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(1.5em);
  animation: reveal 1.2s var(--ease) forwards;
}
.reveal-delay { animation-delay: .3s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ---------- Video lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4vw;
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox video { max-height: 100%; border-radius: .94em; }
.lightbox-close {
  position: absolute;
  top: 1.2em;
  right: 1.2em;
  width: 2.6em;
  height: 2.6em;
  border: 0;
  border-radius: 100%;
  background: var(--glass);
  color: var(--light);
  font-size: 1em;
  cursor: pointer;
}

/* ---------- Tablet: stack vertically ---------- */
@media (max-width: 991px) {
  h1 { font-size: 3.2em; }
  h2 { font-size: 2.6em; }

  .section-hero-horizontal { height: auto; }
  .hero-sticky { position: relative; height: auto; }
  .frame { flex-direction: column; transform: none !important; }
  .frame-100, .frame-50 { width: 100%; height: auto; }

  .hero-horizontal { flex-direction: column; min-height: auto; padding: 14em 8% 0; }
  .block-hero-horizontal { max-width: 60vw; align-items: center; text-align: center; }
  .heading-hero-large { font-size: 8vw; }
  .block-circle-hero { margin-top: 8em; text-align: center; }
  .circle-hero { top: 8vw; right: auto; }
  .yellow-circle-hero { filter: blur(30px); }
  .text-circle { margin: 0 0 2em; }

  .frame-100 > .lightbox-link { height: 54vw; }
  .frame-about-col, .frame-wide { width: 100%; height: auto; }
  .frame-about-col { padding: 2em 1.1em; }
  .frame-about-text { font-size: .88em; }
  .frame-wide > .lightbox-link { height: 54vw; }
  .grid-2-lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .grid-2-lightbox .lightbox-link { height: 30vw; }

  .block-cta-full { min-height: 40vh; padding: 3em 8%; }
  .heading-cta-full { font-size: 8vw; }
  .link-cta-full { max-width: 62vw; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  body { font-size: 16px; }
  h1 { font-size: 2.8em; }
  h2 { font-size: 2.2em; }

  .navbar {
    top: 0;
    left: 0;
    right: 0;
    padding: 1.52em;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .menu-button { display: flex; }
  .navbar.is-open .menu-button { background: rgba(45, 44, 45, .8); }
  .navbar.is-open .menu-button span:first-child { transform: translateY(2.75px) rotate(45deg); }
  .navbar.is-open .menu-button span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
  .nav-menu {
    display: none;
    flex-direction: column;
    align-self: stretch;
    margin: 1em .6em 0;
    padding: .35em;
    border-radius: .76em;
    background: var(--glass);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
  }
  .navbar.is-open .nav-menu { display: flex; }
  .nav-link { padding: 1.3em; }

  .grid-2-lightbox { grid-template-columns: 1fr; }
  .grid-2-lightbox .lightbox-link { height: 54vw; }

  .hero-horizontal { padding-top: 10em; }
  .circle-hero { top: 3em; }
  .block-circle-hero { margin-top: 6em; }
  .yellow-circle { filter: blur(12px); }
  .block-cta-full { min-height: auto; padding: 7em 8%; }
  .footer { flex-direction: column; gap: .75em; padding-right: 1.8em; padding-bottom: 6em; }
}

@media (max-width: 479px) {
  h1 { font-size: 2.2em; }
  h2 { font-size: 1.7em; }
  .heading-project { font-size: .8em; }
  .logo { top: 1.1em; left: 1em; }
  .navbar { padding: 1.1em 1em; }
  .frame-100, .frame-50 { padding-top: .35em; padding-bottom: .35em; }
  .grid-2-lightbox { gap: .7em; }
  .block-project-text { left: .4em; bottom: .4em; gap: 0; padding: .8em 2em .8em .9em; }
  .subheading-project { font-size: .7em; }
  .yellow-circle-hero { width: 20vw; height: 20vw; filter: blur(20px); }
  .block-cta-full { padding-top: 4.2em; padding-bottom: 4.2em; }
  .footer { gap: 1.75em; }
  .block-footer { flex-direction: column; gap: .5em; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .yellow-circle-hero, .yellow-circle { animation: none; }
}

.image-logo-finca { height: 2em; width: auto; }

/* ---------- Instagram post cards ---------- */
.heading-project { margin: 0; color: var(--light); font-size: .94em; font-weight: 700; line-height: 1.37em; }
.post-card-open { position: absolute; inset: 0; z-index: 20; }
.post-card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.post-card-badge {
  position: absolute;
  z-index: 30;
  top: .95em;
  right: .95em;
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .45em .8em;
  border-radius: .76em;
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: var(--light);
  font-size: .76em;
  font-weight: 600;
  line-height: 1.2em;
  pointer-events: none;
}
.post-card-badge svg { width: 1.1em; height: 1.1em; }
.post-card .block-project-text { pointer-events: none; }

/* Client review set as lettering, taking a card's slot in the home track */
.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text sits at the bottom, like the other cards' titles */
  gap: 1.2em;
  margin: 0;
  padding: clamp(1.4em, 4vw, 3.2em);
  cursor: default;
}
.quote-card-text {
  margin: 0;
  padding: 0;
  border: 0; /* overrides the about page's blockquote style */
  color: var(--light);
  font-size: clamp(1.15em, 2.3vw, 2.15em);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.quote-card-text strong { font-weight: 700; }
/* Opening quote mark in its own column, two text lines tall (2 × 1.3 line-height),
   so all lines of the review start aligned */
.quote-card-text { display: flex; align-items: flex-start; gap: .15em; }
.quote-card-mark {
  flex: none;
  margin-left: -.04em;
  font-size: 2.6em; /* its 1em-tall box equals two text lines */
  font-style: normal;
  font-weight: 700;
  line-height: 1;
}
.quote-card-author { color: var(--paragraphs); font-size: .82em; letter-spacing: .04em; }

/* Present in the HTML for search engines and screen readers, not shown on the card */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Gallery ---------- */
.gallery {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  grid-template-columns: 4em 1fr 4em;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: 4.5em 1em 1.5em;
  background: rgba(0, 0, 0, .94);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.gallery.is-open { opacity: 1; visibility: visible; }
.gallery-stage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.gallery-image {
  max-width: 100%;
  max-height: calc(100vh - 12em);
  border-radius: .94em;
  object-fit: contain;
  transition: opacity .25s var(--ease);
}
.gallery-image.is-loading { opacity: 0; }
.gallery-image[hidden], .gallery-video[hidden], .gallery-text[hidden] { display: none; }
.gallery-video { max-width: 100%; max-height: calc(100vh - 12em); border-radius: .94em; background: #000; }

/* Last slide: the Instagram caption card, plus one card per external link */
.gallery-text {
  width: min(46em, 100%);
  max-height: calc(100vh - 12em);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .8em;
}
.gallery-text .post-text { padding: 2em 2.2em; border-radius: .94em; background: var(--dark); }
.post-text { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; }
.post-text-logo { align-self: center; width: auto; max-width: 9em; height: 2.2em; margin: .2em 0 .6em; object-fit: contain; }
.post-text-title { margin: 0 0 .2em; color: var(--light); font-size: 1.6em; font-weight: 700; line-height: 1.2em; }
.post-text-title span { display: block; color: var(--paragraphs); font-size: .7em; font-weight: 500; }
.post-text p { font-size: .94em; line-height: 1.6em; }
.post-links { display: flex; flex-direction: column; gap: .8em; margin: 0; padding: 0; list-style: none; }
.post-link-card {
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: .6em;
  border-radius: .94em;
  background: var(--dark);
  transition: background-color .3s var(--ease);
}
.post-link-card:hover { background: #242324; }
.post-link-thumb { flex: none; width: 7.5em; aspect-ratio: 16 / 9; border-radius: .6em; object-fit: cover; }
.post-link-body { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.post-link-source {
  color: rgba(230, 230, 230, .5);
  font-size: .7em;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.post-link-title { color: var(--light); font-weight: 700; line-height: 1.3em; }
.post-link-author { color: var(--paragraphs); font-size: .82em; }
.post-text-instagram {
  display: inline-block;
  color: var(--light);
  font-weight: 600;
  font-size: .94em;
  transition: opacity .3s var(--ease);
}
.post-text-instagram:hover { opacity: .6; }
.post-text-instagram { color: var(--paragraphs); font-size: .82em; }
.post-text-actions { display: flex; flex-wrap: wrap; gap: .4em 1.6em; margin-top: .5em; }
.gallery-nav, .gallery-close {
  width: 2.6em;
  height: 2.6em;
  border: 0;
  border-radius: 100%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: var(--light);
  font-size: 1em;
  cursor: pointer;
  transition: background-color .3s var(--ease);
}
.gallery-nav:hover, .gallery-close:hover { background: rgba(80, 80, 80, .6); }
.gallery-nav { justify-self: center; }
.gallery-nav[hidden] { visibility: hidden; }
.gallery-close { position: absolute; top: 1.2em; right: 1.2em; }
.gallery-info {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  padding-top: 1.2em;
}
.gallery-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2em; flex: none; font-size: .82em; }
.gallery-count { color: var(--light); font-weight: 600; }
.gallery-link { transition: color .3s var(--ease); }
.gallery-link:hover { color: var(--light); }

@media (max-width: 767px) {
  .gallery { grid-template-columns: 1fr; padding: 4.5em .7em 1em; }
  .gallery-stage { grid-column: 1; }
  .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .gallery-prev { left: .7em; }
  .gallery-next { right: .7em; }
  .gallery-info { grid-column: 1; flex-direction: column; align-items: flex-start; gap: .8em; }
  .gallery-meta { align-items: flex-start; }
}
.block-footer { flex-wrap: wrap; }
.grid-2-lightbox-single { grid-template-rows: 1fr; }
@media (max-width: 991px) {
  .frame-portrait { width: 100%; height: auto; justify-content: center; }
  .frame-portrait > .lightbox-link { width: min(100%, 32em); height: auto; aspect-ratio: 2 / 3; }
  .grid-2-lightbox-single { grid-template-columns: 1fr; }
  .grid-2-lightbox-single .lightbox-link { height: 54vw; }
}

/* ---------- Hero kicker (main SEO heading) ---------- */
.hero-kicker {
  margin-bottom: -1.2em;
  color: var(--paragraphs);
  font-size: 1.06em;
  font-weight: 500;
  line-height: 1.4em;
}

/* ---------- Client logo appears in the middle of the card on hover ---------- */
/* The badge stays visible; the photo dims slightly so the white logo reads on any image */
.lightbox-link:has(.card-logo)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.card-logo {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 50%;
  width: min(34%, 10em);
  height: 22%;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.94);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events: none;
}
/* Card without a client (house photos): gallery icon and a short label instead of a logo */
.card-hover-label {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6em;
  color: #fff;
  font-size: .92em;
  font-weight: 600;
  white-space: nowrap;
}
.card-hover-label svg { width: 2.6em; height: 2.6em; }
.lightbox-link:hover::after,
.lightbox-link:focus-within::after { opacity: 1; }
.lightbox-link:hover .card-logo,
.lightbox-link:focus-within .card-logo { opacity: 1; transform: translate(-50%, -50%); }
/* Touch screens have no hover: no logo overlay */
@media (hover: none) {
  .card-logo, .lightbox-link:has(.card-logo)::after { display: none; }
}

/* ---------- About page ---------- */
h3 { margin: 0; color: var(--light); font-size: 2.47em; font-weight: 700; line-height: 1.21em; }
h4 { margin: 0; color: var(--light); font-size: 1.76em; font-weight: 700; line-height: 1.23em; }
blockquote {
  margin: 1.5em 0 1.5em .9em;
  padding: .2em 0 .2em 1.2em;
  border-left: 1px solid var(--border);
  color: var(--light);
  font-weight: 300;
  font-size: 1.29em;
  line-height: 1.59em;
}
.section-thin { padding: .7em; }
.block-img-large-a, .block-img-large-b {
  width: 100%;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 1.17em;
  background-color: var(--dark);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.block-img-large-a {
  padding: 8em 7%;
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url("https://img.gruposh.co/finca5062/img/sobre/fachada-finca-5062-espaco-eventos-morumbi-e5bc8db3-1084.webp");
  background-position: 50% 100%;
  background-attachment: scroll; /* anchor the photo to the block so its bottom stays visible */
}
.heading-large { margin-bottom: .2em; font-size: 10vw; line-height: 1.14em; }
.content {
  width: 100%;
  max-width: 65em;
  display: flex;
  flex-direction: column;
  gap: 7.8em;
  margin: 8em auto;
  padding: 0 1em;
}
.grid-content { display: grid; grid-template-columns: 1fr 4fr; gap: 0 1em; }
.heading-content { font-weight: 300; line-height: 1.18em; }
.block-content { display: flex; flex-direction: column; gap: 4em; }
.block-lists { display: flex; flex-direction: column; align-items: flex-start; gap: .9em; }
.rich-text-block p { margin-bottom: 1.4em; }
.rich-text-block h3 { margin: .9em 0 .5em; }
.text-info-content {
  color: rgba(230, 230, 230, .5);
  font-size: .59em;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.section-call-to-action { position: relative; display: flex; align-items: center; padding: 9vw 7%; }
.link-cta { display: flex; align-items: center; }
.heading-cta { font-size: 3.7vw; }
.circle-cta { position: absolute; left: -4vw; mix-blend-mode: difference; transition: transform .8s var(--ease); }
.link-cta:hover .circle-cta { transform: translateX(2vw) scale(1.15); }
.yellow-circle-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 8vw;
  height: 8vw;
  border-radius: 100%;
  filter: blur(30px);
  mix-blend-mode: color-dodge;
  background-image: linear-gradient(150deg, #e3d026 10%, #e32626 90%);
  animation: glow 8s ease-in-out infinite alternate;
}
.blue-circle-cta {
  width: 60%;
  height: 60%;
  border-radius: 100%;
  mix-blend-mode: color-dodge;
  background-image: linear-gradient(150deg, #5ecfff 10%, #006ded 90%);
}

/* Fade in when scrolled into view */
.fade-in { opacity: 0; transition: opacity 1.2s var(--ease); }
.fade-in.is-visible { opacity: 1; }

@media (max-width: 991px) {
  h3 { font-size: 2em; }
  h4 { font-size: 1.4em; }
  .block-img-large-a, .block-img-large-b { min-height: 60vh; }
  .heading-large { font-size: 14vw; }
  .content { margin: 5.5em auto; }
  .section-call-to-action { padding-top: 12vw; padding-bottom: 12vw; }
  .yellow-circle-cta { filter: blur(20px); }
  .heading-cta { font-size: 5vw; }
}
@media (max-width: 767px) {
  h3 { font-size: 1.7em; }
  h4 { font-size: 1.3em; }
  .yellow-circle-cta { filter: blur(12px); }
  .heading-cta { font-size: 6.5vw; }
}
@media (max-width: 479px) {
  h3 { font-size: 1.3em; }
  h4 { font-size: 1.1em; }
  .content { gap: 6em; }
  .grid-content { grid-template-columns: 1fr; gap: 3em; }
  .section-call-to-action { padding-top: 16vw; padding-bottom: 16vw; }
}
@media (hover: none), (max-width: 991px) {
  /* Fixed backgrounds are unsupported/janky on mobile */
  .block-img-large-a, .block-img-large-b { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transition: none; }
}

/* ---------- Contact lines under the call to action ---------- */
.cta-contact {
  display: flex;
  flex-direction: column;
  gap: .15em;
  margin-top: 1.6em;
  color: rgba(230, 230, 230, .45);
  font-size: .82em;
  line-height: 1.6em;
}
.cta-contact a { transition: color .3s var(--ease); }
.cta-contact a:hover { color: var(--light); }
.block-cta-full { flex-direction: column; align-items: flex-start; justify-content: center; }
.section-call-to-action { flex-direction: column; align-items: flex-start; }
/* Plus Jakarta light is wider than the old serif: give the headings more room */
@media (min-width: 992px) {
  .block-hero-horizontal { max-width: 64vw; }
  .link-cta-full { max-width: 66vw; }
}

/* ---------- Hero address (home) ---------- */
.hero-address {
  margin-top: -1.2em;
  font-style: normal;
  color: var(--paragraphs);
  font-size: .94em;
  line-height: 1.6em;
}

/* ---------- Floating WhatsApp button (same as gruposh.co) ---------- */
.whatsapp-float {
  position: fixed;
  z-index: 900;
  right: 24px;
  bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  transition: transform .3s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.05); }
.whatsapp-float svg { width: 28px; height: 28px; }
@media (max-width: 767px) { .whatsapp-float { bottom: 17px; } }
@media (max-width: 479px) {
  .gallery-text .post-text { padding: 1.6em; }
  .post-link-thumb { width: 6.5em; }
}

/* Discreet scrollbar inside the caption slide */
.gallery-text {
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 230, 230, .18) transparent;
}
.gallery-text::-webkit-scrollbar { width: 6px; }
.gallery-text::-webkit-scrollbar-track { background: transparent; }
.gallery-text::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(230, 230, 230, .18); }
.gallery-text::-webkit-scrollbar-thumb:hover { background: rgba(230, 230, 230, .32); }

/* ---------- About page: sections ---------- */
.hero-eyebrow { margin-bottom: 1.2em; color: var(--light); font-size: .82em; font-weight: 500; letter-spacing: .04em; text-align: center; }
.heading-hero-sobre { max-width: 14em; font-size: 5.4vw; line-height: 1.1em; text-align: center; }
.hero-subtitle { margin-top: .8em; color: var(--light); font-size: 1.52vw; font-weight: 300; line-height: 1.3em; text-align: center; }
p.heading-content { margin: 0; color: var(--light); font-size: 1.76em; line-height: 1.18em; }
.heading-section { margin: 0 0 .6em; color: var(--light); font-size: 2.47em; font-weight: 700; line-height: 1.21em; }
.heading-card { margin: 0 0 .5em; color: var(--light); font-size: 1.3em; font-weight: 700; line-height: 1.3em; }
.text-lead { color: var(--light); font-size: 1.12em; font-weight: 300; line-height: 1.7em; }
.rich-text-block > :last-child { margin-bottom: 0; }
.grid-content > *, .block-content > * { min-width: 0; } /* let wide children (table) scroll instead of stretching the grid */
.rich-text-block a, .faq a { color: var(--light); text-decoration: underline; text-underline-offset: .2em; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin: 0; padding: 0; list-style: none; }
.feature-card { padding: 1.6em; border-radius: .94em; background: var(--dark); }
.feature-card p { font-size: .94em; line-height: 1.7em; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; margin: 0; }
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stat { display: flex; flex-direction: column-reverse; gap: .2em; padding-top: 1.1em; border-top: 1px solid var(--border); }
.stat dt { color: rgba(230, 230, 230, .5); font-size: .59em; font-weight: 600; line-height: 1.4em; letter-spacing: .13em; text-transform: uppercase; }
.stat dd { margin: 0; color: var(--light); font-size: 2.2em; font-weight: 300; line-height: 1.2em; white-space: nowrap; }

.block-img-conceito { background-image: url("https://img.gruposh.co/finca5062/img/sobre/vista-piscina-finca-5062-espaco-eventos-a748bf64-1600.webp"); }
.block-img-final { background-image: url("https://img.gruposh.co/finca5062/img/sobre/palestra-evento-corporativo-auditorio-externo-finca-5062-ecb97107-1600.webp"); }

.space { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2em; align-items: center; }
.space-img { width: 100%; aspect-ratio: 4 / 3; border-radius: .94em; object-fit: cover; background: var(--dark); }
.space-text p { margin-bottom: 1.2em; }
.tags { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.tags li { padding: .45em 1em; border: 1px solid var(--border); border-radius: 2em; color: var(--light); font-size: .76em; line-height: 1.4em; }
.tags-large li { font-size: .88em; }
.badge-soon {
  display: inline-block;
  margin-left: .5em;
  padding: .3em .8em;
  border-radius: 2em;
  background: var(--glass);
  color: var(--light);
  font-size: .55em;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

.list-columns { columns: 3; column-gap: 2em; margin: 0; padding: 0; list-style: none; }
.list-columns li, .service-col li { break-inside: avoid; padding: .55em 0; border-bottom: 1px solid var(--border); color: var(--light); font-size: .94em; line-height: 1.5em; }

.service-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.service-col { padding: 1.6em; border-radius: .94em; background: var(--dark); }
.service-col h3 { margin: 0 0 .8em; }
.service-col ul { margin: 0; padding: 0; list-style: none; }
.service-col li { font-size: .88em; }
.service-col li:last-child { border-bottom: 0; }

.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: .7em; margin: .7em 0 0; padding: 0; list-style: none; }
.photo-grid a { display: block; overflow: hidden; border-radius: .94em; background: var(--dark); }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); }
.photo-grid a:hover img { transform: scale(1.04); }
.photo-grid li:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.photo-grid li:nth-child(6n + 4) { grid-column: 2 / span 2; grid-row: span 2; } /* alternate the large photo's side */

.tour-banner { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; min-height: 17em; margin-top: 3em; padding: 2em; overflow: hidden; border-radius: .94em; background: var(--dark); }
.tour-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tour-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .1)); }
.tour-banner:hover img { transform: scale(1.03); }
.tour-banner-text, .tour-banner .button { position: relative; z-index: 1; }
.tour-banner-text { display: flex; flex-direction: column; gap: .4em; }
.tour-banner-title { color: var(--light); font-size: 2.2em; font-weight: 700; line-height: 1.15em; }
.tour-banner:hover .button { background: transparent; color: var(--light); }

.back-to-top {
  position: fixed;
  z-index: 900;
  right: 28px;
  bottom: 93px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--light);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: rgba(80, 78, 80, .7); }
.back-to-top svg { width: 22px; height: 22px; }
@media (max-width: 767px) { .back-to-top { bottom: 85px; } }

.photo-viewer { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 4em 5em; border: 0; background: rgba(0, 0, 0, .94); }
.photo-viewer[open] { display: flex; justify-content: center; align-items: center; }
.photo-viewer::backdrop { background: transparent; }
.photo-viewer img { max-width: 100%; max-height: 100%; border-radius: .6em; object-fit: contain; }
.photo-viewer button {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.8em;
  height: 2.8em;
  border: 0;
  border-radius: 50%;
  background: var(--glass);
  color: var(--light);
  font: inherit;
  cursor: pointer;
}
.photo-viewer-close { top: 1.2em; right: 1.2em; }
.photo-viewer-prev { left: 1.2em; top: 50%; transform: translateY(-50%); }
.photo-viewer-next { right: 1.2em; top: 50%; transform: translateY(-50%); }

.table-wrap { overflow-x: auto; border-radius: .94em; background: var(--dark); }
.capacity-table { width: 100%; min-width: 38em; border-collapse: collapse; font-size: .88em; }
.capacity-table th, .capacity-table td { padding: .9em 1.1em; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
.capacity-table thead th { color: rgba(230, 230, 230, .5); font-size: .7em; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.capacity-table tbody th { color: var(--light); font-weight: 600; text-align: left; }
.capacity-table tbody th small { display: block; color: rgba(230, 230, 230, .5); font-size: .8em; font-weight: 400; }
.capacity-table tbody tr:last-child > * { border-bottom: 0; }

.plan-img { display: block; overflow: hidden; padding: 1em; border-radius: .94em; background: #fff; }
.button-row { display: flex; flex-wrap: wrap; gap: .7em; }
.button {
  display: inline-flex;
  align-items: center;
  padding: .85em 1.6em;
  border: 1px solid var(--light);
  border-radius: 2em;
  background: var(--light);
  color: var(--background);
  font-size: .88em;
  font-weight: 600;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.button:hover { background: transparent; color: var(--light); }
.button-outline { background: transparent; border-color: var(--border); color: var(--light); }
.button-outline:hover { border-color: var(--light); }

.map { overflow: hidden; border-radius: .94em; background: var(--dark); }
.map iframe { display: block; width: 100%; height: 26em; border: 0; filter: grayscale(1) invert(.92) contrast(.9); }

.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 1.3em 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--light); font-size: 1.5em; font-weight: 300; transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary h3 { font-size: 1.12em; line-height: 1.4em; }
.faq details p { margin-bottom: 1.2em; }

.house-list { display: flex; flex-wrap: wrap; gap: .5em; margin: 1em 0 0; padding: 0; list-style: none; }
.house-list a, .house-list li > span {
  display: inline-flex;
  align-items: center;
  padding: .6em 1.2em;
  border: 1px solid var(--border);
  border-radius: 2em;
  color: var(--light);
  font-size: .88em;
  transition: border-color .3s var(--ease);
}
.house-list a:hover { border-color: var(--light); }
.house-list a[aria-current] { background: var(--light); color: var(--background); }
.house-list .badge-soon { font-size: .6em; }

.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7em; margin: 1em 0 0; padding: 0; list-style: none; }
.logo-grid li { display: flex; justify-content: center; align-items: center; aspect-ratio: 16 / 9; padding: 1.1em; border-radius: .76em; background: var(--dark); }
.logo-grid img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .75; }

@media (max-width: 991px) {
  .heading-hero-sobre { font-size: 7vw; }
  .hero-subtitle { font-size: 2.4vw; }
  p.heading-content { font-size: 1.4em; }
  .heading-section { font-size: 2em; }
  .feature-grid, .service-columns { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.6em 1em; }
  .space { grid-template-columns: 1fr; gap: 1.2em; }
  .list-columns { columns: 2; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid li:nth-child(6n + 1), .photo-grid li:nth-child(6n + 4) { grid-column: span 2; grid-row: auto; }
  .tour-banner { flex-direction: column; align-items: flex-start; min-height: 15em; padding: 1.5em; }
  .tour-banner-title { font-size: 1.6em; }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .photo-viewer { padding: 4em 1em; }
}
@media (max-width: 767px) {
  .grid-content { grid-template-columns: 1fr; gap: 1.2em; }
  .heading-section { font-size: 1.7em; }
  .stat dd { font-size: 1.8em; }
  .map iframe { height: 20em; }
}
@media (max-width: 479px) {
  .heading-hero-sobre { font-size: 9vw; }
  .hero-subtitle { font-size: 3.68vw; }
  .heading-section { font-size: 1.45em; }
  .stats-3 { grid-template-columns: 1fr 1fr; }
  .list-columns { columns: 1; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Events page (grid like the Obsidian work page) ---------- */
.section-events { padding: 7.6em 1.52em 1.52em; }
.grid-events { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.9em 1.9em; }
.event-card { position: relative; }
.event-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: .94em; background: var(--dark); }
.event-card-media .post-card-media, .event-card-hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event-card-media .post-card-media { z-index: 1; transition: opacity .6s var(--ease); }
.event-card-media .post-card-badge { z-index: 2; opacity: 0; transition: opacity .5s var(--ease); }
.event-card:hover .post-card-badge, .event-card:focus-within .post-card-badge { opacity: 1; }
@media (hover: none) { .event-card-media .post-card-badge { opacity: 1; } }
@media (hover: hover) {
  .event-card:has(.event-card-hover):hover .post-card-media { opacity: 0; }
}
.event-card-text { margin-top: 1em; }
.heading-project-work { margin: 0; color: var(--light); font-size: .94em; font-weight: 700; line-height: 1.37em; }
.subheading-project-work { margin: 0; color: rgba(230, 230, 230, .5); font-size: .82em; line-height: 1.4em; }
@media (max-width: 991px) {
  .grid-events { grid-template-columns: repeat(2, 1fr); gap: 2.4em 1.2em; }
}
@media (max-width: 767px) {
  .section-events { padding: 6.5em 1em 1em; }
  .grid-events { grid-template-columns: 1fr; gap: 2.4em; }
}

/* ---------- Card title and description ---------- */
/* Shown in the bottom-left corner on phones and touch screens; on desktop the client
   logo on hover takes its place */
@media (hover: hover) and (min-width: 768px) {
  .lightbox-link .block-project-text { display: none; }
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 767px) {
  /* Header: logo 10% smaller, menu button vertically centered with it (the logo's
     center sits 13px lower than the button's with equal top offsets) */
  .image-logo-finca { height: 1.8em; }
  .navbar { padding-top: calc(1.52em + 13px); }

  /* Hero: title at 80% of the screen width, kicker below it on a single line */
  .block-hero-horizontal { max-width: 80vw; width: 80vw; }
  .heading-hero-large { order: 1; font-size: 9.5vw; white-space: nowrap; } /* longest line = 80% of the width */
  .heading-hero-large .text-span { display: block; }
  .hero-kicker { order: 2; margin: -1.4em 0 0; font-size: 3.9vw; white-space: nowrap; }
  .hero-address { order: 3; }
  .text-circle { margin-bottom: .6em; } /* "veja mais" closer to the video */

  /* The video card fills the whole screen (svh: the height with the browser's bars showing,
     so nothing is hidden behind them); title centered, "veja mais" at the bottom */
  .hero-panel { height: 100vh; height: 100svh; }
  .hero-panel .hero-horizontal { height: 100%; justify-content: center; padding: 0 8%; }
  /* "veja mais" and its glow centered by spanning the full width (not by translate on a
     shrink-to-fit box, which iPhones placed off-center) */
  .hero-panel .block-circle-hero { position: absolute; left: 0; right: 0; bottom: 2.2em; margin: 0; justify-content: center; }
  .hero-panel .circle-hero { left: 0; right: 0; display: flex; justify-content: center; }

  /* "Sobre nós": shorter text, with more room before the cards */
  .frame-about-col { padding: 3.5em 1.1em 3em; }
  .frame-about-more { display: none; }
  /* Large heading, at least 4 lines; its words start dim and light up one by one as the
     page scrolls (js/main.js) */
  .frame-about-col .frame-about-heading { font-size: 13.4vw; line-height: 1.05; letter-spacing: -.01em; }
  /* The text below it as large, tight-leaded lettering in full white, first line indented */
  .frame-about-col .frame-about-text { font-size: 5.4vw; font-weight: 500; line-height: 1.22; letter-spacing: -.01em; color: var(--light); }
  .frame-about-col .frame-about-text p { margin: 0; text-indent: 24%; }
  .frame-about-col .frame-about-facts { margin-top: 2.6em; }
  .scroll-word { opacity: .15; transition: opacity .25s linear; }

  /* "Conheça a casa": title, text and 3:4 photo carousel in place of the house card
     (build.py, mobile_carousel); the card itself only shows on larger screens */
  .house-carousel-block { display: block; margin: 0 -.7em; padding: 1.5em 0 6em; }
  .house-carousel-block + .post-card { display: none; }
  .house-carousel-title { margin: 0 .55em .4em; /* 1.1em and .8em at the text size */ color: var(--light); font-size: 2em; font-weight: 700; line-height: 1.2; }
  .house-carousel {
    display: flex;
    gap: .7em;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.1em;
    scroll-padding: 0 1.1em;
    scrollbar-width: none;
  }
  .house-carousel::-webkit-scrollbar { display: none; }
  .house-carousel-slide { flex: 0 0 86%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: .94em; background: var(--dark); scroll-snap-align: start; }
  .house-carousel-slide img { width: 100%; height: 100%; object-fit: cover; }
  .house-carousel-text { margin: 0 1.25em 1.4em; /* 1.1em and 1.2em at the block's size */ color: var(--paragraphs); font-size: .88em; font-weight: 500; line-height: 1.6; }

  /* "Criamos eventos corporativos inesquecíveis": same large heading and word-by-word effect as
     the "Sobre nós" one, aligned right, with "ver todos" below; then the cards stack: each one
     sticks below the header and the next slides over it. The panels around the cards add no
     box here, so every card is a sibling inside .track-cards and can stick all the way down. */
  .hero-sticky { overflow: clip; } /* hidden would turn it into the cards' scroll box and stop them from sticking */
  .track-cards { display: block; padding-bottom: 2em; }
  .cards-heading { display: flex; flex-direction: column; align-items: flex-end; padding: 0 1.1em 2.5em; text-align: right; }
  .cards-heading-title { margin: 0; font-size: 13.4vw; line-height: 1.05; letter-spacing: -.01em; }
  .cards-heading .frame-about-link { margin-top: 1.4em; font-size: .84em; }
  .track-cards .frame-100, .track-cards .frame-50, .track-cards .grid-2-lightbox, .track-cards .frame-portrait { display: contents; }
  .track-cards .lightbox-link { position: sticky; top: 5.6em; width: auto; margin: 0 .7em 1.4em; box-shadow: 0 -.6em 2em rgba(0, 0, 0, .55); }
  .track-cards .frame-portrait > .lightbox-link { width: auto; } /* overrides the portrait panel's 100% */
  /* On these cards the client's logo (or the card's icon and label) sits in the middle over a
     dimmed photo, always visible, in place of the title box */
  .track-cards .block-project-text { display: none; }
  .track-cards .lightbox-link:has(.card-logo)::after { display: block; opacity: 1; background: rgba(0, 0, 0, .35); }
  .track-cards .card-logo { display: block; opacity: 1; transform: translate(-50%, -50%); width: 35.7%; height: 22.1%; }
  .track-cards .card-hover-label { display: flex; width: auto; height: auto; opacity: 1; transform: translate(-50%, -50%); }
  .track-extras .card-hover-label { height: auto; opacity: 1; }

  /* The link cards (menus, 360º tour) leave the stack: build.py repeats them below it, square,
     each sliding up into view; their own look (large text in the top-left corner, broken over
     at least 3 lines, no icon) sets them apart from the event cards */
  .track-cards .link-card { display: none; }
  .track-extras { display: block; padding: 4em .7em 2.6em; }
  .track-extras .link-card { height: auto; aspect-ratio: 1; margin-bottom: 1.4em; }
  .track-extras .link-card:last-child { margin-bottom: 0; }
  .track-extras .link-card.fade-in { transform: translateY(3em); transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .track-extras .link-card.fade-in.is-visible { transform: none; }
  .track-extras .block-project-text { display: none; }
  .track-extras .link-card::after { display: block; opacity: 1; background: linear-gradient(160deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 60%); }
  .track-extras .card-hover-label {
    top: 1.2rem;
    left: 1.2rem;
    display: block;
    width: 55%;
    transform: none;
    font-size: 9vw;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
    white-space: normal;
  }
  .track-extras .card-hover-label svg { display: none; }

  /* Every card the same size as the regular small cards */
  .frame-portrait > .lightbox-link { width: 100%; height: 54vw; aspect-ratio: auto; }

  /* The client review card is desktop only */
  .quote-card { display: none; }
}
@media (max-width: 479px) {
  .navbar { padding-top: calc(1.1em + 13px); }
}

/* ---------- Grupo SH section (end of the home, not a card) ---------- */
/* A full-height column with the list of experiences (one --about-col wide), then the group block
   two columns wide: group text and houses side by side, top-aligned, with the client logos below
   in 6 columns. The block sits at the bottom of the panel like the "Sobre nós" column. */
.frame-experiences {
  flex: none;
  width: calc(var(--about-col) + 4.2em);
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--group-top, 7.5em) 2.1em 40px;
}
.frame-experiences .group-experiences { flex: 1; min-height: 0; }
.group-experiences-toggle { display: none; } /* phones only */
.group-experiences-intro { margin: 0 0 1.4em; color: var(--paragraphs); font-size: .84em; font-weight: 500; line-height: 1.6; } /* same as the group text */
.frame-group {
  flex: none;
  width: calc(2 * var(--about-col) + var(--about-gap) + 4.2em);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2.4em;
  padding: .7em 2.1em 40px;
}
/* minmax(0, 1fr), min-width: 0 and a 100% sized image keep the logo's natural size from widening
   its column or stretching its tile; WebKit (Safari and every iPhone browser) sized the columns
   by each image's width, so only 3 uneven tiles fit on a phone and overflowed the screen. */
.group-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45em; margin: 0; padding: 0; list-style: none; }
.group-logos li { display: flex; justify-content: center; align-items: center; min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; padding: .7em; border-radius: .6em; background: var(--dark); }
.group-logos img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .75; }
.group-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--about-gap); align-items: start; }
.group-about { color: var(--paragraphs); font-size: .84em; font-weight: 500; line-height: 1.6; }
/* same size as .heading-section on the About page; line-height 1 so its top lines up with "Nossas casas" */
.group-about .heading-section { margin: 0 0 .5em; font-size: calc(2.47em / .84); line-height: 1; }
.group-about p { margin: 0; }
.group-stats { display: flex; gap: 2em; margin: 1.6em 0 0; padding: 0; list-style: none; }
.group-stats strong { display: block; color: var(--light); font-size: 2.1em; font-weight: 700; line-height: 1.1; }
.group-stats span { font-size: .9em; }
.group-list h3 { margin: 0 0 .8em; color: var(--light); font-size: .76em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.group-list h3 a { text-decoration: none; }
.group-list h3 a::after { content: " ↗\FE0E"; }
.group-houses, .group-experiences { margin: 0; padding: 0; list-style: none; font-size: .84em; font-weight: 500; line-height: 1.4; }
.group-houses li, .group-experiences li { padding: .55em 0; }
.group-houses li + li, .group-experiences li + li { border-top: 1px solid var(--border); }
.group-houses a, .group-experiences a { color: var(--paragraphs); text-decoration: none; transition: color .3s var(--ease); }
.group-houses a:hover, .group-experiences a:hover { color: var(--light); }
.group-houses > li > span, .group-experiences > li > span { color: var(--paragraphs); }
/* Experiences: plain list that scrolls on its own */
.group-experiences {
  overflow-y: auto;
  padding-right: .6em;
  scrollbar-width: thin;
  scrollbar-color: rgba(230, 230, 230, .18) transparent;
}
.group-experiences::-webkit-scrollbar { width: 6px; }
.group-experiences::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(230, 230, 230, .18); }
/* Short desktop screens: flatter logo tiles and tighter spacing so the block clears the header */
@media (min-width: 992px) and (max-height: 760px) {
  .frame-group { gap: 1.2em; }
  .group-logos li { aspect-ratio: 3 / 1; padding: .45em; }
  .group-stats { margin-top: .9em; }
  .group-stats strong { font-size: 1.7em; }
}
@media (max-width: 991px) {
  .frame-group { width: 100%; height: auto; padding: 3em 1.1em; gap: 2.4em; }
  .frame-experiences { width: 100%; height: auto; padding: 3em 1.1em 0; }
  .group-columns { grid-template-columns: 1fr; gap: 2.4em; }
  .group-experiences { max-height: 50vh; }
  .group-about .heading-section { font-size: calc(2em / .84); }
}
@media (max-width: 767px) {
  .group-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .group-about .heading-section { font-size: calc(1.7em / .84); }
  /* "Serviços e experiências" as large as "Conheça a casa"; the list starts closed and the
     button below the text opens it (js/main.js) */
  .frame-experiences h3 { margin-bottom: .4em; font-size: 2em; letter-spacing: 0; text-transform: none; line-height: 1.2; }
  .frame-experiences h3 a::after { content: none; } /* iPhones draw the ↗ as an emoji */
  /* The button stands out as a full-width bar with a round +/− on the right */
  .group-experiences-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    width: 100%;
    margin: 2em 0 1em;
    padding: 1.1em 1.1em 1.1em 1.3em;
    border: 1px solid rgba(230, 230, 230, .35);
    border-radius: .94em;
    background: var(--dark);
    color: var(--light);
    font: inherit;
    font-size: 1.05em;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .group-experiences-toggle::after {
    content: "+";
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    background: var(--light);
    color: #000;
    font-size: 1.1em;
    line-height: 1;
  }
  .group-experiences-toggle[aria-expanded="true"]::after { content: "−"; }
  .frame-experiences .group-experiences { display: none; max-height: none; }
  .frame-experiences.is-open .group-experiences { display: block; }
  /* The experiences intro like the "Sobre nós" text: large, tight-leaded, full white, first line indented */
  .group-experiences-intro { font-size: 5.4vw; font-weight: 500; line-height: 1.22; letter-spacing: -.01em; color: var(--light); text-indent: 24%; }
  .frame-group { padding-top: 7.1em; } /* twice the space above "Grupo SH" */
  /* Client logos between the group text and "Nossas casas" */
  .group-columns { display: contents; }
  .group-about { order: 1; }
  .group-logos { order: 2; }
  .frame-group .group-list { order: 3; }
  /* The houses are listed in the Grupo SH section above, so the footer keeps only the group link */
  .footer nav.block-footer { display: none; }
}
@media (max-width: 479px) {
  .group-about .heading-section { font-size: calc(1.45em / .84); }
}