/* =========================================================================
   ETÉRA HOME — Seções da landing page
   ========================================================================= */

/* -------------------------------------------------------------------------
   Section 1 — Hero
   Figma: 6522:346 (LG 1366) · 6522:426 (SM 360)
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
}

/* ---------- Imagem de fundo + vídeo ---------- */

.hero__media {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 640px;
  overflow: hidden;
}

.hero__media picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Vídeo ---------- */

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Escurecimento radial do centro (Figma: radial 80% preto → transparente) */

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
      66.19% 33.91% at 50% 52.89%,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

/* ---------- Expandir vídeo ---------- */

.hero__video-expand {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto;
  min-width: max-content;
  padding: 8px;
  border: 0;
  background-color: rgba(214, 211, 203, 0.2);
  color: var(--white);
  font-family: var(--font-family-01);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-md);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  translate: -50% -50%;
  transition: background-color 300ms ease;
}

.hero__video-expand img {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  object-fit: contain;
  transition: transform 300ms ease;
}

.hero__video-expand span {
  display: block;
  margin-top: 0.25rem;
}

.hero__video-expand:hover {
  background-color: rgba(214, 211, 203, 0.35);
}

.hero__video-expand:hover img {
  transform: scale(1.15);
}

/* ---------- Título ---------- */

.hero__title {
  position: absolute;
  inset-inline: 0;
  top: 243px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-inline: var(--container-padding);
  color: #ffffff;
  text-align: center;
}

/* Elemento gráfico hachurado atrás do título.
   Máscara em vez de <img> porque aqui ele é branco, e o SVG do handoff vem
   com o traço em #764E47. */

.hero__title-element {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 545.157px;
  height: 131px;
  /* 20% não está na escala de $opacity-level (16% e 24% são os vizinhos) */
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-mask: url("../../Handoff/SVG/svg-element-1.svg") center / 100% 100% no-repeat;
  mask: url("../../Handoff/SVG/svg-element-1.svg") center / 100% 100% no-repeat;
}

.hero__eyebrow,
.hero__kicker {
  position: relative;
  white-space: nowrap;
}

.hero__heading {
  position: relative;
  text-transform: uppercase;
}

.hero__heading-part {
  display: block;
}

/* ---------- Formulário ---------- */

.hero__form {
  position: relative;
  z-index: 4;
  margin-top: 510px;
  padding-block: 64px 56px;
  background-color: var(--brand-color-primary);
}

.hero-form__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-form__title {
  font-family: var(--font-family-02);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  color: var(--white);
  text-transform: uppercase;
}

.hero-form__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 16px do gap + 16px de margem = os 32px do design */

.hero-form__consent {
  margin-top: 16px;
}

/* ---------- LG (Notebook) ---------- */

@media (min-width: 1366px) {
  .hero {
    height: 699px;
  }

  .hero__media {
    inset: 0;
    height: auto;
  }

  .hero__media::after {
    background: radial-gradient(
        42.79% 32.17% at 50% 43.55%,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0) 100%
    );
  }

  .hero__title {
    left: 50%;
    right: auto;
    width: 1049px;
    translate: -50% 0;
    padding-inline: 0;
  }

  .hero__heading {
    white-space: nowrap;
  }

  .hero__heading-part {
    display: inline;
  }

  /* Vão entre os dois trechos do título (no Figma são 7 espaços);
     medido para fechar exatamente os 1049px do bloco no LG.
     Em `em` para acompanhar o corpo do texto no XL. */

  .hero__heading-part + .hero__heading-part {
    margin-inline-start: 3.979em;
  }

  .hero__form {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 221px;
    margin-top: 0;
    /* Recorte diagonal do bg-forms: mesma geometria em px no LG e no XL */
    clip-path: polygon(126.5px 0, 100% 0, 100% 100%, 0 100%, 0 171px);
  }

  .hero-form__inner {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .hero-form__title {
    flex-shrink: 0;
    width: 352px;
    font-family: var(--font-family-01);
    font-size: var(--h3-font-size);
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-md);
    line-height: var(--line-height-md);
  }

  .hero-form__form {
    flex: 1 0 0;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) fit-content(100%);
    column-gap: 8px;
    row-gap: 16px;
  }

  .hero-form__submit {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
  }

  .hero-form__consent {
    grid-column: 1 / span 2;
    grid-row: 2;
    margin-top: 0;
    gap: 8px;
  }
}

/* ---------- XL (Desktop) ----------
   O Figma não tem artboard 1920 desta seção: o layout LG é mantido e só o
   container acompanha o token ($column-grid-xl). */

@media (min-width: 1920px) {
  .hero__title {
    width: var(--container-max);
  }
}

/* -------------------------------------------------------------------------
   Section 2 — O projeto
   Figma: 6527:550 (LG 1366) · 6527:561 (SM 360)
   ------------------------------------------------------------------------- */

.projeto {
  position: relative;
  padding-block: 64px;
  background-color: rgba(214, 211, 203, 0.7); /* $white a 70% */
}

.projeto__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Vídeo ---------- */

.projeto__video {
  position: relative;
  width: 100%;
  height: 219px;
  margin: 0;
  overflow: hidden;
}

.projeto__video picture,
.projeto__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Escurecimento sobre a thumb ($shade-level-1) */

.projeto__video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--shade-level-1);
  pointer-events: none;
}

.projeto__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  translate: -50% -50%;
  display: block;
  width: 96px;
  height: 96px;
  color: var(--white);
  transition: opacity 200ms ease;
}

.projeto__play-icon {
  display: block;
  width: 96px;
  height: 96px;
}

/* Estado de hover não consta no Figma — ver pendência no report */

.projeto__play:hover {
  opacity: var(--opacity-level-semi-opaque);
}

/* ---------- Conteúdo ---------- */

.projeto__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.projeto__eyebrow {
  color: var(--gray-700);
  text-transform: uppercase;
  white-space: nowrap;
}

.projeto__heading {
  /* O CSS soma o tracking depois do último caractere da linha, o Figma não.
     A margem negativa devolve esse espaço para a quebra bater com o design. */
  margin-inline-end: calc(var(--letter-spacing-md) * -1);
  color: var(--gray-900);
  text-transform: uppercase;
}

.projeto__text {
  color: var(--gray-700);
}

/* O Figma separa os parágrafos com uma linha vazia (1 linha de P SM) */

.projeto__text p + p {
  margin-top: 1.4em;
}

/* ---------- Grafismo ---------- */

.projeto__grafismo {
  display: none;
}

/* ---------- LG (Notebook) ---------- */

@media (min-width: 1366px) {
  .projeto__inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }

  .projeto__video {
    flex-shrink: 0;
    width: 544px;
    height: 363px;
  }

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

  /* Faixa lateral direita: ocupa exatamente a margem do container
     (1366 − 1120) / 2 = 123px, como no Figma */

  .projeto__grafismo {
    position: absolute;
    right: 0;
    bottom: 0;
    display: block;
    width: calc((100% - var(--container-max)) / 2);
    height: 100%;
    overflow: hidden;
  }

  .projeto__grafismo-item {
    position: absolute;
    width: 278px;
    height: 67px;
    max-width: none;
  }

  /* Ancorados pela base para não dependerem da altura da seção
     (no Figma, 491px: topo 339 → base 85; topo 424 → base 0) */

  .projeto__grafismo-item--dark {
    bottom: 85px;
    left: 82px;
  }

  .projeto__grafismo-item--warm {
    bottom: 0;
    left: 0;
  }
}

/* ---------- XL (Desktop) ----------
   Sem artboard 1920: as medidas do vídeo vêm do próprio handoff
   (img-thumbnail-xl = 764×510). */

@media (min-width: 1920px) {
  .projeto__video {
    width: 764px;
    height: 510px;
  }
}

/* -------------------------------------------------------------------------
   Section 3 — Etéra UDI Complex
   Figma: 6528:656 (LG 1366, cards colapsados) · 6528:657 (SM 360, expandidos)
   ------------------------------------------------------------------------- */

.complex {
  padding-block: 80px;
  background-color: var(--white);
}

.complex__inner {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.complex__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.complex__header-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.complex__eyebrow,
.complex__heading {
  /* Tracking final: ver comentário em .gallery__eyebrow */
  text-indent: var(--letter-spacing-md);
  text-transform: uppercase;
}

.complex__eyebrow {
  color: rgba(35, 31, 18, 0.7); /* Brand/Secondary + Shade 2 a 70% */
  white-space: nowrap;
}

.complex__heading {
  color: #231f12; /* Brand/Secondary + Shade 2 */
}

.complex__intro {
  color: rgba(35, 31, 18, 0.7);
}

/* ---------- Grid de cards ---------- */

.complex__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, 483px);
  overflow: hidden;
}

.complex-card {
  position: relative;
  overflow: hidden;
}

/* Arte do card: imagem já composta no handoff (campo de cor, barra e faixa
   de foto). Nada disso é redesenhado em CSS. */

.complex-card__art,
.complex-card__art img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No mobile os cards já aparecem expandidos: logo escondido, texto visível */

.complex-card__logo {
  display: none;
}

/* Cada card tem seu próprio deslocamento vertical no Figma — reproduzidos
   um a um em vez de normalizados. */

.complex-card__body {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 220px;
  text-align: center;
}

.complex-card--udi .complex-card__body {
  top: calc(50% - 55.99px);
}

.complex-card--stay .complex-card__body {
  top: calc(50% - 55.6px);
}

.complex-card--work .complex-card__body {
  top: calc(50% - 49.2px);
}

.complex-card__title {
  color: #ffffff;
  text-indent: var(--letter-spacing-md);
  text-transform: uppercase;
}

.complex-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.complex-card__label {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

.complex-card__desc {
  color: rgba(255, 255, 255, 0.7);
  font-weight: var(--font-weight-light);
}

.complex-card__badge {
  width: 100%;
  padding: 10px;
  background-color: #002328;
  color: #776e4e;
  font-family: var(--font-family-02);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
  text-transform: uppercase;
}

.complex-card__cta {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 14px;
  border-bottom: var(--border-width-default) solid #ffffff;
  color: #ffffff;
  font-family: var(--font-family-02);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* O CTA do card UDI usa Sinkin/H3 no Figma, os outros dois usam TT Norms */

.complex-card__cta--serif {
  font-family: var(--font-family-01);
  font-size: var(--h3-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-md);
  text-indent: var(--letter-spacing-md);
}

.complex-card--udi .complex-card__cta {
  top: calc(50% + 142.01px);
  translate: -50% -50%;
}

.complex-card--stay .complex-card__cta {
  bottom: 96.1px;
  width: 222px;
}

.complex-card--work .complex-card__cta {
  bottom: 89.7px;
  width: 222px;
}

/* ---------- LG (Notebook) ----------
   Repouso: três cards iguais (1120/3), só o logo.
   Hover: o card cresce para 3fr de 5 (= 672px) e os outros ficam com 1fr
   (= 224px), revelando texto e CTA. Figma: 6266:219.
   O :focus-within acompanha o :hover para o conteúdo não ficar inacessível
   por teclado. */

@media (min-width: 1366px) {
  .complex__grid {
    display: flex;
    height: 480px;
  }

  .complex-card {
    flex: 1 1 0;
    height: 100%;
    transition: flex-grow 1.6s ease;
  }

  .complex-card:hover,
  .complex-card:focus-within {
    flex-grow: 3;
  }

  /* A arte do LG tem 672×480 e o card colapsado tem 373,33 — recorta pela
     borda onde fica o grafismo de cada card, sem distorcer. */

  .complex-card--udi .complex-card__art img,
  .complex-card--stay .complex-card__art img {
    object-position: left center;
  }

  .complex-card--work .complex-card__art img {
    object-position: right center;
  }

  .complex-card__logo {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 129.6px;
    height: 59.664px;
  }

  .complex-card__logo--udi {
    width: 160px;
    height: 63.907px;
  }

  /* Em repouso, só o logo. Texto e CTA ficam com opacidade 0 em vez de
     display:none para continuarem alcançáveis por teclado — é o Tab no CTA
     que dispara o :focus-within e revela o card. */

  .complex-card__logo,
  .complex-card__body,
  .complex-card__cta {
    transition: opacity 900ms ease;
  }

  .complex-card__body,
  .complex-card__cta {
    opacity: 0;
    pointer-events: none;
  }

  /* Escopado no grid para vencer os offsets por card definidos no mobile */

  .complex__grid .complex-card__body {
    top: 50%;
    width: 360px;
  }

  .complex__grid .complex-card__cta {
    top: auto;
    bottom: 40px;
    width: auto;
    translate: -50% 0;
  }

  /* ----- Card expandido ----- */

  .complex-card:hover .complex-card__logo,
  .complex-card:focus-within .complex-card__logo {
    opacity: 0;
  }

  .complex-card:hover .complex-card__body,
  .complex-card:focus-within .complex-card__body,
  .complex-card:hover .complex-card__cta,
  .complex-card:focus-within .complex-card__cta {
    opacity: 1;
    pointer-events: auto;
  }

  /* No expandido o label vira Label SM e a descrição vira P SM Regular */

  .complex-card:hover .complex-card__label,
  .complex-card:focus-within .complex-card__label {
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-md);
  }

  .complex-card:hover .complex-card__desc,
  .complex-card:focus-within .complex-card__desc {
    font-weight: var(--font-weight-regular);
  }
}

/* -------------------------------------------------------------------------
   Section 6 — Localização
   Figma: 6534:1289 (LG 1366) · 6534:1310 (SM 360)
   ------------------------------------------------------------------------- */

.location {
  position: relative;
  padding-block: 80px;
  background-color: var(--brand-color-primary);
}

/* Fundo já composto no handoff (campo de cor + faixa texturizada em diagonal) */

.location__bg,
.location__bg img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.location__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
}

.location__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.location__eyebrow {
  color: rgba(214, 211, 203, 0.9); /* $white a 90% */
  text-transform: uppercase;
  white-space: nowrap;
}

.location__heading {
  /* Mobile usa Heading 3; o LG sobe para Heading 2 */
  margin-inline-end: calc(var(--letter-spacing-md) * -1);
  color: var(--white);
  font-family: var(--font-family-01);
  font-size: var(--h3-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-md);
  text-transform: uppercase;
}

.location__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  color: var(--white);
}

.location__text p {
  font-weight: var(--font-weight-light);
}

/* O CTA daqui é 46px (py 14 simétrico), não os 39px do $Button do hero */

.location__cta {
  height: auto;
  padding-block: 14px;
  justify-content: center;
}

.location__map {
  margin: 0;
  overflow: hidden;
}

.location__map picture,
.location__map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1366px) {
  .location__inner {
    flex-direction: row;
    align-items: center;
  }

  .location__content {
    flex: 1 0 0;
    min-width: 0;
    justify-content: center;
  }

  .location__heading {
    font-size: var(--h2-font-size);
  }

  .location__cta {
    align-self: flex-start;
  }

  .location__map {
    flex-shrink: 0;
    width: 640px;
    height: 434.817px;
  }
}

/* Sem artboard 1920: a medida do mapa vem do handoff (img-loc-xl = 900×611) */

@media (min-width: 1920px) {
  .location__map {
    width: 900px;
    height: 611px;
  }
}

/* -------------------------------------------------------------------------
   Section 11 — Footer
   Figma: 6567:867 (LG 1366) · 6537:1542 (SM 360) · big numbers em 6567:797
   ------------------------------------------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding-block: 80px 64px;
  background-color: var(--brand-color-primary);
  color: var(--white);
}

.footer__bg {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 630px;
  pointer-events: none;
}

.footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.footer__top,
.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---------- Marca ---------- */

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__eyebrow {
  color: var(--white);
}

.footer__slogan {
  font-family: var(--font-family-01);
  font-size: var(--h2-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-md);
}

/* ---------- Big numbers ----------
   Todos os estados ocupam a mesma célula do grid: o bloco assume a altura do
   maior e a troca não empurra o layout. */

.footer__stats {
  width: 100%;
}

.footer__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding-block: 32px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;

  transition: opacity 600ms ease,
  transform 600ms ease;
}

.footer__stat-value {
  font-family: var(--font-family-01);
  font-size: var(--h2-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-md);
}

.footer__stat-label {
  font-family: var(--font-family-02);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-default);
  text-align: center;
}

.footer__stat.is-leaving {
  opacity: 0;
  transform: translateY(-24px);
}

.footer__stat.is-entering {
  opacity: 0;
  transform: translateY(24px);
  transition: none;
}

/* ---------- Texto institucional ---------- */

.footer__about {
  font-family: var(--font-family-01);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-md);
}

/* O Figma separa os parágrafos com uma linha vazia */

.footer__about p {
  color: #d6d3cb;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 160%;
  letter-spacing: 1.2px;
}

/* ---------- Rodapé legal ---------- */

.footer__divider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--border-width-default) solid rgba(214, 211, 203, 0.24); /* $white · $opacity-level-lighter */
}

.footer__logo img {
  width: 160px;
  height: 64px;
}

.footer__legal {
  color: rgba(209, 207, 200, 0.5);
  font-family: var(--font-family-01);
  font-size: 10px; /* fora da escala de tokens, conforme o design */
  font-weight: var(--font-weight-regular);
  line-height: 1.8;
}

/* ---------- LG (Notebook) ---------- */

@media (min-width: 1366px) {
  .footer__bg {
    height: 410px;
  }

  .footer__top {
    flex-direction: row;
    align-items: center;
  }

  .footer__brand {
    flex-shrink: 0;
  }

  .footer__stats {
    flex-shrink: 0;
    width: 203px;
  }

  .footer__about {
    flex-shrink: 0;
    width: 640px;
  }

  .footer__bottom {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 24px;
    align-items: start;
  }

  .footer__logo {
    grid-column: 1 / span 2;
  }

  .footer__legal {
    grid-column: 3 / span 10;
    padding-inline-start: 32px;
  }
}

/* -------------------------------------------------------------------------
   Section 9 — Implantação
   Figma: 6548:692 (LG 1366) · 6537:1417 (SM 360) · estados em 6331:801
   ------------------------------------------------------------------------- */

.imp {
  padding-block: 64px;
  background-color: rgba(214, 211, 203, 0.7); /* $white a 70% */
}

.imp__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.imp__eyebrow,
.imp__heading {
  /* Tracking final: ver comentário em .gallery__eyebrow */
  text-indent: var(--letter-spacing-md);
  text-align: center;
  text-transform: uppercase;
}

.imp__eyebrow {
  color: rgba(35, 31, 18, 0.7); /* Brand/Secondary + Shade 2 a 70% */
  white-space: nowrap;
}

.imp__heading {
  color: var(--gray-900);
}

/* ---------- Abas de pavimento ---------- */

.imp__tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.imp__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
  border-bottom: var(--border-width-md) solid var(--gray-500);
  color: var(--gray-500);
  font-family: var(--font-family-02);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-default);
  text-transform: uppercase;
  white-space: nowrap;
}

.imp__tab.is-active {
  border-bottom-color: var(--brand-color-primary);
  color: var(--brand-color-primary);
}

/* ---------- Painel: planta + legenda ---------- */

.imp__panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* display: flex sobrescreveria o atributo hidden, que usa display: none */

.imp__panel[hidden] {
  display: none;
}

/* A planta é o contêiner de referência: os pinos usam cqw, então acompanham
   a escala em qualquer largura sem recalcular nada. */

.imp__plan {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 501.682;
}

.imp__plan picture,
.imp__plan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imp__pins {
  position: absolute;
  inset: 0;
}

.imp__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2321cqw; /* 25px sobre 1120 */
  height: 2.2321cqw;
  border: 0.0893cqw solid var(--brand-color-secondary);
  border-radius: var(--border-radius-circular);
  background-color: var(--white);
  color: var(--brand-color-secondary);
  font-family: var(--font-family-01);
  font-size: 1.0714cqw; /* 12px sobre 1120 */
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-md);
}

/* ---------- Legenda ---------- */

.imp__legend {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.imp__legend-col {
  flex: 1 0 0;
  min-width: 0;
  color: var(--gray-900);
}

.imp__legend-title {
  font-family: var(--font-family-01);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-sm);
  line-height: var(--line-height-default);
  text-transform: uppercase;
}

/* ol[class] no reset zera o marcador e tem especificidade maior que a classe
   sozinha — daí o seletor com a tag junto. */

ol.imp__legend-list {
  margin: 0;
  padding-inline-start: 1.5em;
  list-style: decimal;
  font-family: var(--font-family-01);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-sm);
  line-height: var(--line-height-default);
}

.imp__legend-list + .imp__legend-title {
  margin-top: 1.4em;
}

/* ---------- Coordenadas dos pinos (% da caixa 1120 × 501,682) ---------- */

#painel-sub3 .imp__pin:nth-child(1) {
  --x: 64.911%;
  --y: 13.754%;
}

#painel-sub3 .imp__pin:nth-child(2) {
  --x: 61.964%;
  --y: 39.467%;
}

#painel-sub3 .imp__pin:nth-child(3) {
  --x: 54.554%;
  --y: 40.862%;
}

#painel-sub3 .imp__pin:nth-child(4) {
  --x: 80.804%;
  --y: 37.673%;
}

#painel-sub3 .imp__pin:nth-child(5) {
  --x: 9.554%;
  --y: 61.393%;
}

#painel-sub3 .imp__pin:nth-child(6) {
  --x: 62.768%;
  --y: 51.028%;
}

#painel-sub3 .imp__pin:nth-child(7) {
  --x: 67.679%;
  --y: 56.809%;
}

#painel-sub3 .imp__pin:nth-child(8) {
  --x: 55.446%;
  --y: 55.214%;
}

#painel-sub3 .imp__pin:nth-child(9) {
  --x: 54.286%;
  --y: 64.184%;
}

#painel-sub3 .imp__pin:nth-child(10) {
  --x: 63.929%;
  --y: 59.201%;
}

#painel-sub3 .imp__pin:nth-child(11) {
  --x: 39.643%;
  --y: 59.400%;
}

#painel-sub1 .imp__pin:nth-child(1) {
  --x: 77.857%;
  --y: 43.454%;
}

#painel-sub1 .imp__pin:nth-child(2) {
  --x: 73.482%;
  --y: 33.487%;
}

#painel-sub1 .imp__pin:nth-child(3) {
  --x: 77.946%;
  --y: 33.686%;
}

#painel-sub1 .imp__pin:nth-child(4) {
  --x: 82.946%;
  --y: 40.663%;
}

#painel-sub1 .imp__pin:nth-child(5) {
  --x: 72.143%;
  --y: 45.646%;
}

#painel-sub1 .imp__pin:nth-child(6) {
  --x: 47.500%;
  --y: 44.450%;
}

#painel-sub1 .imp__pin:nth-child(7) {
  --x: 5.536%;
  --y: 50.630%;
}

#painel-sub1 .imp__pin:nth-child(8) {
  --x: 33.839%;
  --y: 32.690%;
}

#painel-terreo .imp__pin:nth-child(1) {
  --x: 55.006%;
  --y: 85.371%;
}

#painel-terreo .imp__pin:nth-child(2) {
  --x: 58.811%;
  --y: 67.637%;
}

#painel-terreo .imp__pin:nth-child(3) {
  --x: 78.838%;
  --y: 69.574%;
}

#painel-terreo .imp__pin:nth-child(4) {
  --x: 70.361%;
  --y: 74.194%;
}

#painel-terreo .imp__pin:nth-child(5) {
  --x: 63.351%;
  --y: 46.774%;
}

#painel-terreo .imp__pin:nth-child(6) {
  --x: 61.615%;
  --y: 56.012%;
}

#painel-terreo .imp__pin:nth-child(7) {
  --x: 59.480%;
  --y: 49.157%;
}

#painel-terreo .imp__pin:nth-child(8) {
  --x: 55.941%;
  --y: 50.051%;
}

#painel-terreo .imp__pin:nth-child(9) {
  --x: 43.391%;
  --y: 54.820%;
}

#painel-terreo .imp__pin:nth-child(10) {
  --x: 46.607%;
  --y: 56.411%;
}

#painel-terreo .imp__pin:nth-child(11) {
  --x: 43.482%;
  --y: 72.357%;
}

#painel-terreo .imp__pin:nth-child(12) {
  --x: 55.274%;
  --y: 40.364%;
}

#painel-terreo .imp__pin:nth-child(13) {
  --x: 68.214%;
  --y: 54.816%;
}

#painel-terreo .imp__pin:nth-child(14) {
  --x: 79.973%;
  --y: 37.383%;
}

#painel-terreo .imp__pin:nth-child(15) {
  --x: 62.684%;
  --y: 36.787%;
}

#painel-terreo .imp__pin:nth-child(16) {
  --x: 60.948%;
  --y: 25.759%;
}

#painel-terreo .imp__pin:nth-child(17) {
  --x: 54.205%;
  --y: 14.731%;
}

#painel-terreo .imp__pin:nth-child(18) {
  --x: 48.932%;
  --y: 26.802%;
}

#painel-terreo .imp__pin:nth-child(19) {
  --x: 50.000%;
  --y: 40.960%;
}

#painel-terreo .imp__pin:nth-child(20) {
  --x: 18.224%;
  --y: 82.092%;
}

#painel-terreo .imp__pin:nth-child(21) {
  --x: 43.391%;
  --y: 46.774%;
}

#painel-pav15 .imp__pin:nth-child(1) {
  --x: 57.946%;
  --y: 67.573%;
}

#painel-pav15 .imp__pin:nth-child(2) {
  --x: 49.464%;
  --y: 51.626%;
}

#painel-pav15 .imp__pin:nth-child(3) {
  --x: 59.196%;
  --y: 51.825%;
}

#painel-pav15 .imp__pin:nth-child(4) {
  --x: 67.232%;
  --y: 55.812%;
}

#painel-pav15 .imp__pin:nth-child(5) {
  --x: 88.661%;
  --y: 44.052%;
}

#painel-pav15 .imp__pin:nth-child(6) {
  --x: 81.161%;
  --y: 58.602%;
}

#painel-pav15 .imp__pin:nth-child(7) {
  --x: 83.214%;
  --y: 39.268%;
}

/* ---------- LG (Notebook) ---------- */

@media (min-width: 1366px) {
  .imp__tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .imp__legend {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* -------------------------------------------------------------------------
   Section 10 — Contato
   Figma: 6537:1504 (LG 1366) · 6537:1514 (SM 360)
   ------------------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
  padding: 80px var(--container-padding);
  background-color: var(--white);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact__heading {
  /* Mobile usa Heading 3; o LG sobe para Heading 2 */
  margin-inline-end: calc(var(--letter-spacing-md) * -1);
  color: var(--gray-900);
  font-family: var(--font-family-01);
  font-size: var(--h3-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-md);
  text-transform: uppercase;
}

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact__address {
  color: var(--gray-900);
  font-family: var(--font-family-01);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-sm);
  line-height: var(--line-height-default);
}

.contact__cta {
  height: auto;
  padding: 14px 32px 12px;
  justify-content: center;
}

.contact__grafismo {
  display: none;
}

@media (min-width: 1366px) {
  .contact {
    padding-inline: 0;
  }

  .contact__inner {
    flex-direction: row;
    align-items: flex-start;
    width: 736px;
    margin-inline: auto;
  }

  .contact__heading {
    flex: 1 0 0;
    min-width: 0;
    align-self: center;
    font-size: var(--h2-font-size);
  }

  .contact__aside {
    flex-shrink: 0;
    width: 272px;
  }

  .contact__cta {
    align-self: flex-start;
  }

  /* Faixa lateral esquerda, na largura da margem do container (123px em 1366).
     Espelhada em relação à da Section 2: avermelhado em cima, escuro embaixo. */

  .contact__grafismo {
    position: absolute;
    left: 0;
    top: 50%;
    translate: 0 -50%;
    display: block;
    width: calc((100% - var(--container-max)) / 2);
    height: 299px;
    overflow: hidden;
    scale: -1 1;
  }

  .contact__grafismo-item {
    position: absolute;
    width: 278px;
    height: 67px;
    max-width: none;
  }

  .contact__grafismo-item--warm {
    top: 141px;
    left: 0;
  }

  .contact__grafismo-item--dark {
    top: 226px;
    left: 82px;
  }
}

/* -------------------------------------------------------------------------
   Section 8 — Plantas
   Figma: 6537:1361 (LG 1366) · 6537:1367 (SM 360)
   ------------------------------------------------------------------------- */

.plants {
  padding-block: 80px;
  background-color: rgba(214, 211, 203, 0.7); /* $white a 70% */
}

.plants__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  text-align: center;
}

.plants__eyebrow,
.plants__heading {
  /* Tracking final: ver comentário em .gallery__eyebrow */
  text-indent: var(--letter-spacing-md);
  text-transform: uppercase;
}

.plants__eyebrow {
  color: var(--gray-800);
  white-space: nowrap;
}

.plants__heading {
  color: var(--gray-900);
}

/* ---------- Slide de planta ---------- */

.plant {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  isolation: isolate;
}

.plant__media {
  position: relative;
  z-index: 2;
  height: 230px;
}

.plant__media picture,
.plant__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* O PNG do handoff já vem recortado; contain preserva a proporção 2:1 */
  object-fit: contain;
}

.plant__info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 64px 24px;
  background-color: rgba(214, 211, 203, 0.5); /* $white a 50% */
}

.plant__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-transform: uppercase;
}

.plant__size {
  color: var(--gray-900);
  font-family: var(--font-family-01);
  font-size: var(--h1-font-size);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-md);
  white-space: nowrap;
}

.plant__type {
  color: var(--gray-800);
  font-family: var(--font-family-02);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-default);
  line-height: var(--line-height-default);
}

.plant__desc {
  color: var(--gray-800);
  font-family: var(--font-family-01);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-sm);
  line-height: var(--line-height-default);
}

/* ---------- Carrossel das plantas ---------- */

.carousel--plants {
  --carousel-slide-w: 100cqw;
  --carousel-gap: 0px;
  /* Aqui os botões são 44px nos dois breakpoints, não 19,56 como na galeria */
  --carousel-btn-size: 44px;
  --carousel-icon-size: 20px;
  /* Par de botões de 156px centralizado, como no Figma */
  --carousel-btn-offset: calc(50% - 78px);
}

/* Os botões acompanham a altura toda do slide, não só a da imagem */

.carousel--plants .carousel__nav {
  top: calc(50% - 25.44px);
  bottom: auto;
  translate: 0 -50%;
}

@media (min-width: 1366px) {
  .plant {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .plant__media {
    flex-shrink: 0;
    width: 640px;
    height: 480px;
    /* Sobrepõe o painel de texto, como no design */
    margin-inline-end: -64px;
  }

  .plant__info {
    flex-shrink: 0;
    width: 544px;
    padding: 64px 64px 64px 96px;
  }

  .carousel--plants {
    /* Botões 22px para fora do container (faixa de 1164 sobre 1120) */
    --carousel-btn-offset: -22px;
  }

  .carousel--plants .carousel__nav {
    top: 50%;
  }
}

/* -------------------------------------------------------------------------
   Section 7 — Faixa deslizante
   Figma: 6537:1332 (LG) · 6537:1346 (SM) — o design anota "slider animado
   em loop infinito". A velocidade não está especificada (ver report).
   ------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  padding-block: 16px;
  background-color: var(--brand-color-secondary);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

@keyframes marquee-scroll {
  from {
    translate: 0;
  }

  to {
    translate: -50%;
  }
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 0;
  padding-inline-end: 0;
}

.marquee__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #ffffff;
  font-family: var(--font-family-02);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-default);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Traço vertical de 1×38 entre as frases */

.marquee__item::after {
  content: "";
  flex-shrink: 0;
  width: var(--border-width-default);
  height: 38px;
  margin-inline: 32px;
  background-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   Section 5 — Atributos
   Figma: 6531:1028 (LG 1366) · 6531:1036 (SM 360)
   ------------------------------------------------------------------------- */

.attrs {
  background-color: var(--white);
}

.attrs__header {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 80px 32px;
}

.attrs__header-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.attrs__eyebrow,
.attrs__heading {
  /* Tracking final: ver comentário em .gallery__eyebrow */
  margin-inline-end: calc(var(--letter-spacing-md) * -1);
  text-transform: uppercase;
}

.attrs__eyebrow {
  color: var(--gray-800);
  white-space: nowrap;
}

.attrs__heading {
  color: var(--gray-900);
}

.attrs__intro {
  color: var(--gray-700);
  font-weight: var(--font-weight-light);
}

/* ---------- Abas ---------- */

.attrs__tabs {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-top: 48px;
}

.attrs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
  border-bottom: var(--border-width-md) solid var(--gray-500);
  color: var(--gray-600);
  font-family: var(--font-family-02);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-md);
  line-height: var(--line-height-default);
  text-transform: uppercase;
}

.attrs__tab.is-active {
  border-bottom-color: var(--brand-color-secondary);
  color: var(--brand-color-secondary);
}

/* No mobile a primeira aba tem 93px fixos, a segunda estica e a
   terceira acompanha o conteúdo (Figma 6531:1044) */

.attrs__tab:nth-child(1) {
  flex: 0 0 93px;
}

.attrs__tab:nth-child(2) {
  flex: 1 0 0;
  min-width: 0;
}

/* min-content quebra "Áreas privativas" em duas linhas e faz a aba abraçar
   a palavra mais larga, como no Figma (93 / 119 / 116) */

.attrs__tab:nth-child(3) {
  flex: 0 0 auto;
  width: min-content;
}

/* ---------- Painéis e grade ---------- */

.attrs__panel {
  padding-block: 40px 80px;
}

.attrs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.attr-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 72px por fora com ícone de 40px por dentro: o Figma desenha o traço
   para dentro do frame, então o padding absorve o 1px da borda. */

.attr-item__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 15px;
  border: var(--border-width-default) solid var(--brand-color-secondary);
  border-radius: var(--border-radius-pill);
}

/* Máscara para o SVG do handoff assumir a cor da marca */

.attr-item__icon {
  display: block;
  width: 40px;
  height: 40px;
  background-color: var(--brand-color-secondary);
  -webkit-mask: var(--attr-icon) center / contain no-repeat;
  mask: var(--attr-icon) center / contain no-repeat;
}

.attr-item__label {
  color: var(--gray-900);
}

/* Aba Lazer */

.attr-item--fitness {
  --attr-icon: url("../../Handoff/SVG/ic-gym.svg");
}

.attr-item--piscinas {
  --attr-icon: url("../../Handoff/SVG/ic-pool.svg");
}

.attr-item--spa {
  --attr-icon: url("../../Handoff/SVG/ic-spa.svg");
}

.attr-item--coworking {
  --attr-icon: url("../../Handoff/SVG/ic-coworking.svg");
}

.attr-item--festas {
  --attr-icon: url("../../Handoff/SVG/ic-cheers.svg");
}

.attr-item--playground {
  --attr-icon: url("../../Handoff/SVG/ic-playground.svg");
}

.attr-item--lobby {
  --attr-icon: url("../../Handoff/SVG/ic-lobby.svg");
}

.attr-item--brinquedoteca {
  --attr-icon: url("../../Handoff/SVG/ic-baby.svg");
}

.attr-item--quadra {
  --attr-icon: url("../../Handoff/SVG/ic-sport.svg");
}

.attr-item--pet {
  --attr-icon: url("../../Handoff/SVG/ic-pets.svg");
}

.attr-item--market {
  --attr-icon: url("../../Handoff/SVG/ic-market.svg");
}

.attr-item--delivery {
  --attr-icon: url("../../Handoff/SVG/ic-box.svg");
}

/* Aba Áreas Comuns */

.attr-item--via {
  --attr-icon: url("../../Handoff/SVG/ic-road.svg");
}

.attr-item--acessos {
  --attr-icon: url("../../Handoff/SVG/ic-lock.svg");
}

.attr-item--consultoria {
  --attr-icon: url("../../Handoff/SVG/ic-shield.svg");
}

.attr-item--gerador {
  --attr-icon: url("../../Handoff/SVG/ic-energy.svg");
}

.attr-item--lobby-duplo {
  --attr-icon: url("../../Handoff/SVG/ic-store.svg");
}

.attr-item--clausura {
  --attr-icon: url("../../Handoff/SVG/ic-cam.svg");
}

.attr-item--praca {
  --attr-icon: url("../../Handoff/SVG/ic-park.svg");
}

/* Aba Áreas privativas */

.attr-item--tipologias {
  --attr-icon: url("../../Handoff/SVG/ic-layout.svg");
}

.attr-item--ducha {
  --attr-icon: url("../../Handoff/SVG/ic-bath.svg");
}

.attr-item--aircond {
  --attr-icon: url("../../Handoff/SVG/ic-aircond.svg");
}

.attr-item--monocomando,
.attr-item--monocomando-2 {
  --attr-icon: url("../../Handoff/SVG/ic-shower.svg");
}

.attr-item--lavabo {
  --attr-icon: url("../../Handoff/SVG/ic-towel.svg");
}

/* ---------- LG (Notebook) ---------- */

@media (min-width: 1366px) {
  .attrs__header {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding-block: 80px;
  }

  .attrs__header-title,
  .attrs__intro {
    flex: 1 0 0;
    min-width: 0;
  }

  .attrs__tabs {
    width: 928px;
    margin-inline: auto;
  }

  /* No LG as três abas dividem a largura igualmente, em uma linha */

  .attrs__tab:nth-child(1),
  .attrs__tab:nth-child(2),
  .attrs__tab:nth-child(3) {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }

  .attrs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(4, min-content);
    gap: 32px;
  }

  /* Áreas Comuns e Áreas privativas: 2 colunas com linhas de 72px.
     minmax deixa a linha crescer nos textos mais longos em vez de cortar. */

  .attrs__grid--duplas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(72px, auto);
  }

  /* Posições explícitas: no Figma a ordem visual do LG não segue a ordem
     da lista do mobile, que é a que está no HTML. */

  .attr-item--lobby {
    grid-area: 1 / 1;
  }

  .attr-item--fitness {
    grid-area: 1 / 2;
  }

  .attr-item--piscinas {
    grid-area: 1 / 3;
  }

  .attr-item--spa {
    grid-area: 2 / 1;
  }

  .attr-item--brinquedoteca {
    grid-area: 2 / 2;
  }

  .attr-item--coworking {
    grid-area: 2 / 3;
  }

  .attr-item--festas {
    grid-area: 3 / 1;
  }

  .attr-item--playground {
    grid-area: 3 / 2;
  }

  .attr-item--market {
    grid-area: 3 / 3;
  }

  .attr-item--quadra {
    grid-area: 4 / 1;
  }

  .attr-item--pet {
    grid-area: 4 / 2;
  }

  .attr-item--delivery {
    grid-area: 4 / 3;
  }
}

/* -------------------------------------------------------------------------
   Section 4 — Galeria (Lazer + Áreas privativas)
   Figma: 6528:1024 (LG 1366) · 6528:1023 (SM 360)
   ------------------------------------------------------------------------- */

.gallery {
  background-color: rgba(214, 211, 203, 0.7); /* $white a 70% */
}

.gallery__block {
  padding-block: 80px;
}

.gallery__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 48px;
}

.gallery__eyebrow,
.gallery__title {
  /* Texto centralizado: o CSS soma o tracking depois do último caractere e o
     Figma não. O text-indent devolve o mesmo valor à esquerda e recentraliza. */
  text-indent: var(--letter-spacing-md);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.gallery__eyebrow {
  color: var(--gray-800);
}

.gallery__title {
  color: var(--gray-900);
}