/* ═══════════════════════════════════════════════════════
   MAIN — Casttini · Coleção Elementi
   Seções e componentes. Todas as proporções derivam do
   canvas de 1500px do Figma (node 3432:37), convertidas
   para percentuais do container.
   ═══════════════════════════════════════════════════════ */

/* ══════════════ HEADER ══════════════
   Figma: 1500×89, fundo branco, logo x=88, ações à direita
   com margem equivalente.                                  */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  background-color: var(--color-bg);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: min(100%, var(--container));
  min-height: var(--header-height);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 5.87vw, 5.5rem); /* x=88 @1500 */
}

.header__logo {
  display: block;
  flex-shrink: 0;
}

.header__logo img {
  width: clamp(7.5rem, 11.5vw, 10.8125rem); /* 173px @1500 */
  height: auto;
  color: var(--color-ink-strong);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.9vw, var(--space-10));
}

.header__icon {
  display: grid;
  place-items: center;
  padding: var(--space-2);
  color: var(--color-ink-strong);
  transition: opacity var(--transition-fast);
}

.header__icon:hover {
  opacity: 0.55;
}

/* O header recolhe ao descer e volta ao subir — classe posta por main.js */
.header {
  transition: transform var(--transition-base);
}

.header.is-hidden {
  transform: translateY(-100%);
}

/* ══════════════ HERO ══════════════
   Figma: imagem 1500×872 logo abaixo do header.
   Play centralizado; lettering a 69,8% da altura.          */

.hero {
  position: relative;
  margin-block-start: var(--header-height);
  overflow: hidden;
}

/* O banner ocupa a tela inteira ao carregar: 100vh menos a faixa do
   header fixo (que fica por cima, então esse espaço não pode contar
   duas vezes). `svh` evita o salto quando a barra de endereço do
   celular aparece/some durante o scroll; `vh` fica como fallback para
   navegadores sem suporte a unidades pequenas de viewport. */
.hero__media {
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  min-height: 26rem; /* piso para telas muito baixas, ex. celular deitado */
}

/* Véu discreto: o lettering é branco e a foto tem áreas claras */
.hero__media::after {
  position: absolute;
  /* inset: 0; */
  content: "";
  background: linear-gradient(
    to bottom,
    transparent 40%,
    var(--color-scrim) 100%
  );
  pointer-events: none;
}
.hero__media::after {
  content: "";
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(180deg, rgba(217, 217, 217, 0) -2.78%, #000 100%);
  mix-blend-mode: multiply;
}

.hero__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 9.6vw, 9rem); /* 144px @1500 */
  aspect-ratio: 1;
  color: #ecebe3;
  transform: translate(-50%, -50%);
}

.hero__play img {
  width: 100%;
  height: 100%;
  transition: opacity var(--transition-base);
  max-width: 90px;
}

.hero__play:hover img {
  opacity: 0.78;
}

.hero__titulo {
  position: absolute;
  inset-block-end: 17%;
  inset-inline: 0;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  padding-inline: var(--section-padding-x);
}

.hero__lettering {
  width: clamp(15rem, 37.8vw, 35.5rem); /* 568px @1500 */
  height: auto;
  color: #ffffff;
}

/* ══════════════ CONCEITO ══════════════
   Figma: fundo #3F4856, y=982→1766.
   Parágrafo x=450 w=600 (30% → 40%).
   Eixos: barra x=453 w=213 | texto x=719 w≈320.            */

.conceito {
  padding-block: clamp(var(--space-16), 8.7vw, 8.125rem)
    clamp(var(--space-20), 11.9vw, 11.125rem);
}

.conceito__abertura {
  max-width: 40%; /* 600/1500 */
  margin-inline: auto;
  color: var(--color-taupe-texto);
}

.conceito__eixos {
  display: grid;
  gap: clamp(var(--space-8), 4.1vw, 3.875rem);
  max-width: var(--container-text); /* 711/1500 */
  margin-block-start: clamp(var(--space-12), 8vw, 7.5rem);
  margin-inline: auto;
}

/* [barra] [texto] — a barra alinha pelo topo da primeira linha do texto */
.conceito__eixo {
  display: grid;
  grid-template-columns: 29.9% 1fr; /* 213/711 */
  gap: clamp(var(--space-5), 7.5%, 3.3125rem);
  align-items: start;
}

.conceito__texto {
  color: var(--color-taupe-texto);
}

/* As três barras. Espessuras exatas do Figma: 26 / 16,5 / 7,25 px.
   box-shadow inset reproduz a sombra interna do design — em em, para
   acompanhar a espessura de cada barra.                     */
.conceito__barra {
  display: block;
  width: 100%;
  margin-block-start: 0.45em; /* alinha ao centro da 1ª linha */
  background-color: var(--color-taupe);
  box-shadow: inset 0 0.15em 0.2em rgb(47 38 31 / 0.45);
  border-radius: var(--radius-full);
  transform-origin: left center;
}

.conceito__barra--materia {
  height: clamp(0.75rem, 1.74vw, 1.625rem);
} /* 26px   */
.conceito__barra--cor {
  height: clamp(0.5rem, 1.1vw, 1.03125rem);
} /* 16,5px */
.conceito__barra--essencia {
  height: clamp(0.25rem, 0.48vw, 0.453125rem);
} /* 7,25px */

/* ══════════════ ACABAMENTOS ══════════════
   Figma: fundo #DFDFDF, y=1766→2984.
   Grade x=391→1102 (711px), 5 colunas de 134 + gap 10.      */

.acabamentos {
  padding-block: clamp(var(--space-16), 6vw, 5.625rem) /* 90px  */
    clamp(var(--space-12), 6.8vw, 6.375rem); /* 102px */
}

.acabamentos__headline {
  max-width: 33.2%; /* 498/1500 */
  margin-inline: auto;
  color: var(--color-marrom);
}

.acabamentos__grade {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 58px entre o fim do texto de uma linha e a amostra da seguinte;
     10px entre colunas — ambos medidos no Figma */
  gap: clamp(var(--space-8), 3.87vw, 3.625rem)
    clamp(var(--space-2), 0.67vw, 0.625rem);
  max-width: var(--container-text); /* 711/1500 */
  margin-block-start: clamp(var(--space-10), 5.27vw, 4.9375rem); /* 79px */
  margin-inline: auto;
}

.amostra {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.amostra__img {
  display: block;
  width: 100%;
  aspect-ratio: 134 / 201;
  box-shadow: var(--shadow-sample);
}

.amostra__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amostra__nome {
  margin-block-start: clamp(var(--space-3), 1.47vw, 1.375rem); /* 22px */
  color: var(--color-marrom);
}

.amostra__descritor {
  margin-block-start: 0.15em;
  color: var(--color-marrom);
}

.amostra__spec {
  margin-block-start: 0.6em;
  color: var(--color-marrom);
  letter-spacing: var(--tracking-wide);
}

/* Faixa gráfica — mesma largura da grade */
.acabamentos__faixa {
  width: var(--container-text);
  height: auto;
  margin-block-start: clamp(var(--space-10), 5.93vw, 5.5625rem); /* 89px */
  margin-inline: auto;
  color: var(--color-marrom);
}

.acabamentos__fecho {
  max-width: 30.6%; /* 458/1500 */
  margin-block-start: clamp(var(--space-6), 2.87vw, 2.6875rem); /* 43px */
  margin-inline: auto;
  color: var(--color-marrom);
}

/* ══════════════ AMBIENTES ══════════════
   Figma: fundo #BBA691, y=2928→8450.

   Cada ambiente é um "palco": um container relative com
   aspect-ratio travado no canvas de 1500px do Figma. Todo
   filho posicionado (foto lateral, amostras, título, texto,
   vetor) usa position:absolute com left/top/width em %,
   copiados direto das coordenadas do node no Figma.

   Por quê não grid+margin: a versão anterior empilhava
   margin-block-start calculados à mão por cima de rows
   implícitas do grid, e as margens não compunham de forma
   previsível — o resultado divergia do Figma (às vezes um
   vão enorme, às vezes elementos somem da tela). Com
   left/top em %, cada elemento aponta direto pra sua
   coordenada, sem depender de onde o anterior parou. */

.ambientes {
  padding-block-start: clamp(var(--space-16), 11.9vw, 11.125rem);
  padding-block-end: clamp(var(--space-20), 14.1vw, 13.1875rem); /* 211px */
}

.ambientes__abertura {
  display: grid;
  place-items: center;
  padding-block-end: clamp(var(--space-16), 7.9vw, 7.375rem);
}

.ambientes__frase {
  width: clamp(17rem, 41.4vw, 38.8125rem); /* 621px @1500 */
  height: auto;
  color: var(--color-ardosia);
}

/* ~105px entre o fim de um ambiente e a foto do seguinte (Figma) */
.ambiente + .ambiente {
  margin-block-start: clamp(var(--space-12), 7vw, 6.5625rem);
}

/* ─── Bloco de texto (comum a todos os ambientes) ─── */

.ambiente__titulo {
  position: absolute;
  color: var(--color-marrom-sobre-taupe);
  text-wrap: balance;
}

.ambiente__texto {
  position: absolute;
  color: var(--color-marrom-sobre-taupe);
}

/* Larguras exatas do Figma — impedem o texto de esbarrar nas amostras */
.ambiente__texto {
  width: 20.867%;
} /* 313px — ambientes 1 e 2 */
.ambiente--esquerda .ambiente__texto {
  width: 25.467%;
} /* 382px — ambiente 3 */
.ambiente--texto-esquerda .ambiente__texto {
  width: 18.4%;
} /* 276px — ambiente 4 */
.ambiente--office .ambiente__texto {
  width: 16.6%;
} /* 249px — ambiente 5 */

/* ─── Par de amostras — invade a borda inferior da foto ───
   É o gesto de composição mais característico do projeto: o
   material sai do plano da imagem. O container só precisa de
   left/top (o próprio, não cada .par) — os dois ficam lado a
   lado em flex com o gap exato do Figma entre eles.          */

.ambiente__amostras {
  position: absolute;
  display: flex;
  gap: clamp(var(--space-2), 0.8vw, 0.75rem);
  pointer-events: none;
}

.par {
  width: clamp(3.75rem, 6.6vw, 6.1875rem); /* 99px @1500 */
  margin: 0;
}

/* Nos ambientes a amostra é mais alongada que na grade — 99×192 no
   Figma, contra 134×201. O recorte vem do object-fit. */
.par picture,
.par img {
  display: block;
  width: 100%;
  aspect-ratio: 99 / 192;
  object-fit: cover;
}

.par figcaption {
  margin-block-start: 0.9em;
  color: var(--color-marrom-sobre-taupe);
  letter-spacing: var(--tracking-wide);
}

.ambiente__vetor {
  position: absolute;
  height: auto;
}

/* ─── Ambientes 1 e 4 — foto full-bleed ───
   A foto ocupa a largura inteira da TELA (fora do container);
   o "corpo" com amostras/título/texto mora dentro do container
   de 1500px e sobe para sobrepor a foto no valor exato medido
   no Figma — que não é o mesmo nos dois ambientes (74px no 1,
   70px no 4). A altura do corpo também é a real do Figma: o
   espaço do início das amostras até o fim do texto.           */

.ambiente--full .ambiente__media {
  aspect-ratio: 1500 / 817;
}

/* Ambiente 1 — corpo de 294px, overlap de 74px */
.ambiente--full .ambiente__corpo {
  position: relative;
  aspect-ratio: 1500 / 294;
  margin-block-start: -4.9333%; /* -74px @1500 — escala com a largura */
}

.ambiente--full .ambiente__amostras {
  left: 25.667%;
  top: 0;
}
.ambiente--full .ambiente__titulo {
  left: 41.067%;
  top: 50.68%;
  width: 8%;
}
.ambiente--full .ambiente__texto {
  left: 53.467%;
  top: 52.38%;
}

/* Ambiente 4 (closet) — corpo de 310px, overlap de 70px.
   Mesma estrutura do ambiente 1, sobrescrita aqui porque
   ambos compartilham a classe base .ambiente--full.          */
.ambiente--texto-esquerda .ambiente__corpo {
  aspect-ratio: 1500 / 310;
  margin-block-start: -4.6667%; /* -70px @1500 */
}

.ambiente--texto-esquerda .ambiente__amostras {
  left: 57.733%;
  top: 0;
}
.ambiente--texto-esquerda .ambiente__titulo {
  left: 23.8%;
  top: 46.77%;
  width: 8%;
}
.ambiente--texto-esquerda .ambiente__texto {
  left: 36.2%;
  top: 48.39%;
}

/* ─── Ambientes 2, 3 e 5 — foto lateral ───
   O palco é o ambiente inteiro (não há full-bleed aqui); a
   altura do aspect-ratio é a altura total do ambiente no
   Figma, do topo da foto até o fim do último texto.          */

.ambiente__grade {
  position: relative;
}

/* Ambiente 2 — dormitório: foto à direita, palco 1500×743 */
.ambiente--direita .ambiente__grade {
  aspect-ratio: 1500 / 743;
}

.ambiente--direita .ambiente__media {
  position: absolute;
  left: 33.2%;
  top: 0;
  width: 66.8%;
  height: 77.79%;
  aspect-ratio: auto;
}

.ambiente--direita .ambiente__vetor--bemviver {
  left: 13.133%;
  top: 24.23%;
  width: clamp(8rem, 14.163vw, 13.3125rem); /* 213px @1500 */
  color: var(--color-marrom-sobre-taupe);
}

.ambiente--direita .ambiente__amostras {
  left: 79.867%;
  top: 70.39%;
}
.ambiente--direita .ambiente__titulo {
  left: 42.933%;
  top: 83.18%;
  width: 8%;
}
.ambiente--direita .ambiente__texto {
  left: 55.333%;
  top: 83.85%;
}

/* Ambiente 3 — sala de estar: foto à esquerda, palco 1500×815 */
.ambiente--esquerda .ambiente__grade {
  aspect-ratio: 1500 / 815;
}

.ambiente--esquerda .ambiente__media {
  position: absolute;
  left: 0;
  top: 0;
  width: 45.6%;
  height: 100%;
  aspect-ratio: auto;
}

.ambiente--esquerda .ambiente__amostras {
  left: 47.8%;
  top: 24.05%;
}

.ambiente--esquerda .ambiente__vetor--palavras {
  left: 68.133%;
  top: 24.05%;
  width: clamp(9rem, 17.313vw, 16.25rem); /* 260px @1500 */
  color: var(--color-marrom-sobre-taupe);
}

/* Título e texto ficam na mesma coluna neste ambiente (diferente dos
   demais, onde ficam lado a lado) — por isso, em vez de cada um levar
   sua própria posição absoluta, os dois dividem um wrapper único
   (.ambiente__conteudo) posicionado no lugar que era do título. Dentro
   dele voltam ao fluxo normal: se o título quebrar em mais linhas numa
   tela estreita, o texto desce junto por conta própria, em vez de ficar
   numa posição fixa que o título passaria por cima. */
.ambiente--esquerda .ambiente__conteudo {
  position: absolute;
  left: 47.8%;
  top: 74.29%;
  width: 9.267%;
}

.ambiente--esquerda .ambiente__conteudo .ambiente__titulo {
  position: static;
  width: auto;
}

.ambiente--esquerda .ambiente__conteudo .ambiente__texto {
  position: static;
  width: 274.9%; /* 25.467% do stage ÷ 9.267% do wrapper — mesma largura de antes */
  margin-block-start: clamp(
    1rem,
    2.53vw,
    2.375rem
  ); /* 38px @1500, medido do Figma */
}

/* Ambiente 5 — home office: foto à direita + coluna gráfica, palco 1500×870 */
.ambiente--office .ambiente__grade {
  aspect-ratio: 1500 / 870;
}

.ambiente--office .ambiente__media {
  position: absolute;
  left: 54.4%;
  top: 0;
  width: 45.6%;
  height: 100%;
  aspect-ratio: auto;
}

.ambiente--office .ambiente__vetor--coluna {
  left: 15.401%;
  top: 0;
  width: clamp(3.5rem, 8.524vw, 8rem); /* 128px @1500 */
  height: 100%;
  color: var(--color-marrom);
  opacity: 0.55;
}

.ambiente--office .ambiente__amostras {
  left: 32.8%;
  top: 16.44%;
}

/* Mesma coluna para título e texto — mesmo tratamento do ambiente 3
   (ver comentário acima de .ambiente--esquerda .ambiente__conteudo). */
.ambiente--office .ambiente__conteudo {
  position: absolute;
  left: 32.8%;
  top: 67.36%;
  width: 10.467%;
}

.ambiente--office .ambiente__conteudo .ambiente__titulo {
  position: static;
  width: auto;
}

.ambiente--office .ambiente__conteudo .ambiente__texto {
  position: static;
  width: 158.6%; /* 16.6% do stage ÷ 10.467% do wrapper — mesma largura de antes */
  margin-block-start: clamp(
    1.25rem,
    3.53vw,
    3.3125rem
  ); /* 53px @1500, medido do Figma */
}

/* ══════════════ RODAPÉ ══════════════ */

/* Figma: 150px de respiro acima do conteúdo e 145px abaixo da barra legal */
.footer {
  padding-block: clamp(var(--space-16), 10vw, 9.375rem)
    clamp(var(--space-12), 9.7vw, 9.0625rem);
  font-size: var(--text-md);
  color: var(--color-ink);
}

/* No Figma o rodapé recua x=90 de cada lado (1320 de área útil) */
.footer .container {
  padding-inline: clamp(var(--space-5), 6vw, 5.625rem);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: clamp(var(--space-10), 6vw, var(--space-24));
}

.footer__logo {
  width: clamp(4rem, 7.7vw, 7.1875rem); /* 115px @1500 */
  height: auto;
  color: var(--color-ink-strong);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-block-start: var(--space-10);
  color: var(--color-ink-strong);
}

.footer__social a {
  display: grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  transition: opacity var(--transition-fast);
}

.footer__social a:hover {
  opacity: 0.55;
}

.footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-16));
}

.footer__titulo {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}

.footer__titulo--solto {
  margin-block-start: clamp(var(--space-8), 3.9vw, var(--space-14));
}

.footer__lista {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}

.footer__lista--solta {
  margin-block-start: clamp(var(--space-6), 2.7vw, var(--space-10));
}

.footer__lista a {
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

.footer__lista a:hover {
  color: var(--color-ink);
}

/* A coluna institucional é toda em negrito no design */
.footer__lista--forte {
  gap: var(--space-6);
  margin-block-start: 0;
  font-weight: var(--font-bold);
}

.footer__lista--forte a {
  color: var(--color-ink);
}

.footer__lista--forte a:hover {
  color: var(--color-gray-400);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) clamp(var(--space-6), 4.5vw, var(--space-20));
  margin-block-start: clamp(
    var(--space-16),
    11.9vw,
    11.125rem
  ); /* 178px @1500 */
  font-size: var(--text-md);
  justify-content: center;
}

.footer__legal a {
  color: var(--color-gray-400);
  transition: color var(--transition-fast);
}

.footer__legal a:hover {
  color: var(--color-ink);
}

/* ══════════════ MENU OVERLAY ══════════════ */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  justify-items: end;
  background-color: rgb(63 72 86 / 0.45);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nav-overlay[hidden] {
  display: none;
}

.nav-overlay.is-open {
  opacity: 1;
}

.nav-overlay__painel {
  position: relative;
  width: min(30rem, 100%);
  height: 100%;
  padding: clamp(var(--space-16), 9vw, var(--space-24))
    clamp(var(--space-6), 5vw, var(--space-16));
  overflow-y: auto;
  color: var(--color-taupe-texto);
  background-color: var(--color-ardosia);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-signature);
}

.nav-overlay.is-open .nav-overlay__painel {
  transform: translateX(0);
}

.nav-overlay__fechar {
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline-end: var(--space-6);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-taupe-texto);
  transition: opacity var(--transition-fast);
}

.nav-overlay__fechar:hover {
  opacity: 0.6;
}

.nav-overlay__label {
  margin-block-end: var(--space-5);
  color: var(--color-taupe-texto);
  opacity: 0.6;
}

.nav-overlay__label + .nav-overlay__lista {
  margin-block-end: clamp(var(--space-10), 6vw, var(--space-16));
}

.nav-overlay__lista {
  display: grid;
  gap: var(--space-4);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.nav-overlay__lista--sec {
  font-size: var(--text-md);
}

.nav-overlay__lista a {
  display: inline-block;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-base);
}

.nav-overlay__lista a:hover {
  opacity: 0.65;
  transform: translateX(0.375rem);
}

/* ══════════════ MODAL DE VÍDEO ══════════════ */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--section-padding-x);
  background-color: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.video-modal[hidden] {
  display: none;
}

.video-modal.is-open {
  opacity: 1;
}

.video-modal__painel {
  position: relative;
  width: min(72rem, 100%);
}

.video-modal__quadro {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--color-taupe-texto);
  background-color: var(--color-ardosia);
  box-shadow: var(--shadow-modal);
}

.video-modal__quadro iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__aviso {
  max-width: 26ch;
  padding: var(--space-6);
  text-align: center;
  text-wrap: balance;
}

.video-modal__fechar {
  position: absolute;
  inset-block-end: calc(100% + var(--space-4));
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-bg);
  transition: opacity var(--transition-fast);
}

.video-modal__fechar:hover {
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVO — mobile-first a partir do desktop normativo.
   Breakpoints: 1440 / 1024 / 768 / 320
   ═══════════════════════════════════════════════════════ */

/* ─── ≤ 1024px — o layout ainda é o do Figma, só mais apertado ─── */
@media (max-width: 1024px) {
  .conceito__abertura {
    max-width: 62%;
  }
  .conceito__eixos {
    max-width: 74%;
  }
  .acabamentos__headline {
    max-width: 58%;
  }
  .acabamentos__grade {
    max-width: 82%;
  }
  .acabamentos__faixa {
    width: 82%;
  }
  .acabamentos__fecho {
    max-width: 56%;
  }
  .ambientes__frase {
    width: 62vw;
  }

  /* Ambientes: uma coluna, na ordem de leitura.
     O layout absoluto do desktop (left/top copiados do Figma)
     assume larguras de texto que só cabem sem quebrar demais a
     partir de ~1024px — abaixo disso o título e o texto podem
     crescer em altura além do que o palco (aspect-ratio fixo)
     reserva, e colidir com a foto ao lado. Empilhar aqui evita
     isso de forma honesta, em vez de forçar uma escala que o
     design de 1500px não previu.

     Cada seletor abaixo repete o mesmo par de classes da regra
     base: precisa da MESMA especificidade pra sobrescrever
     left/top/width/height de verdade.                          */
  .ambiente__grade,
  .ambiente--full .ambiente__corpo,
  .ambiente--texto-esquerda .ambiente__corpo {
    position: static;
    aspect-ratio: auto;
    margin-block-start: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .ambiente__media,
  .ambiente--direita .ambiente__media,
  .ambiente--esquerda .ambiente__media,
  .ambiente--office .ambiente__media {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    order: -1;
  }

  .ambiente--esquerda .ambiente__media,
  .ambiente--office .ambiente__media {
    aspect-ratio: 3 / 4;
  }

  /* Neutraliza todo o posicionamento absoluto do desktop */
  .ambiente__amostras,
  .ambiente__titulo,
  .ambiente__texto,
  .ambiente__vetor,
  .ambiente--full .ambiente__amostras,
  .ambiente--full .ambiente__titulo,
  .ambiente--full .ambiente__texto,
  .ambiente--texto-esquerda .ambiente__amostras,
  .ambiente--texto-esquerda .ambiente__titulo,
  .ambiente--texto-esquerda .ambiente__texto,
  .ambiente--direita .ambiente__amostras,
  .ambiente--direita .ambiente__titulo,
  .ambiente--direita .ambiente__texto,
  .ambiente--esquerda .ambiente__amostras,
  .ambiente--esquerda .ambiente__titulo,
  .ambiente--esquerda .ambiente__texto,
  .ambiente--office .ambiente__amostras,
  .ambiente--office .ambiente__titulo,
  .ambiente--office .ambiente__texto {
    position: static;
    left: auto;
    top: auto;
    margin-block-start: 0;
  }

  .ambiente__texto,
  .ambiente--esquerda .ambiente__texto,
  .ambiente--texto-esquerda .ambiente__texto,
  .ambiente--office .ambiente__texto {
    width: 100%;
  }

  /* .ambiente__titulo tem width:8% fixado no desktop (ver AMBIENTES) —
     precisa da mesma especificidade para virar 100% aqui. */
  .ambiente--full .ambiente__titulo,
  .ambiente--texto-esquerda .ambiente__titulo,
  .ambiente--direita .ambiente__titulo {
    width: 100%;
  }

  /* Os wrappers dos ambientes 3 e 5 (ver desktop, em AMBIENTES)
     também saem do posicionamento absoluto, e o texto perde a
     largura calculada em % do wrapper estreito — em pilha ele já
     ocupa 100% sozinho. */
  .ambiente--esquerda .ambiente__conteudo,
  .ambiente--office .ambiente__conteudo {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
  }

  .ambiente--esquerda .ambiente__conteudo .ambiente__texto,
  .ambiente--office .ambiente__conteudo .ambiente__texto {
    width: 100%;
    margin-block-start: var(--space-3);
  }

  .ambiente__amostras {
    justify-content: flex-start;
    margin-block-start: var(--space-4);
  }

  .par {
    width: clamp(4.5rem, 22vw, 6.5rem);
  }

  .ambiente__vetor--bemviver,
  .ambiente__vetor--palavras {
    width: 52%;
    margin-block-start: var(--space-4);
  }

  /* A coluna gráfica do home office não cabe em pilha */
  .ambiente--office .ambiente__vetor--coluna {
    display: none;
  }
}

/* ─── ≤ 768px — ajustes finos de tipografia e grade;
       os ambientes já empilharam no breakpoint de 1024px.      */
@media (max-width: 768px) {
  :root {
    --header-height: 68px;
  }

  /* A regra base já calcula 100svh − header-height, e --header-height
     muda para 68px logo acima — nada extra a fazer aqui. */

  .conceito__abertura {
    max-width: 100%;
  }
  .conceito__eixos {
    max-width: 100%;
  }

  /* Barra sobre o texto, não ao lado */
  .conceito__eixo {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .conceito__barra {
    width: 60%;
    margin-block-start: 0;
  }

  .acabamentos__headline,
  .acabamentos__fecho {
    max-width: 100%;
  }

  .acabamentos__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-12) var(--space-6);
    max-width: 100%;
  }

  .acabamentos__faixa {
    width: 100%;
  }

  .ambientes__frase {
    width: 100%;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }

  .footer__nav {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .footer__legal {
    gap: var(--space-3);
    margin-block-start: var(--space-12);
  }

  .nav-overlay__painel {
    width: 100%;
  }

  .video-modal__fechar {
    inset-block-end: calc(100% + var(--space-2));
  }
}

/* ─── ≤ 420px ─── */
@media (max-width: 420px) {
  .acabamentos__grade {
    gap: var(--space-10) var(--space-4);
  }

  .amostra__descritor {
    text-wrap: pretty;
  }

  .footer__social {
    gap: var(--space-5);
  }
}

/* ─── Ponteiro grosso: sem efeitos dependentes de cursor ─── */
@media (pointer: coarse) {
  .hero__play {
    transform: translate(-50%, -50%) !important;
  }
}
.t-flow > * + * {
  margin-top: 0;
}
.mb-20 {
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .ambiente--full .ambiente__titulo {
    width: 100%;
  }
  .ambiente--direita .ambiente__titulo {
    width: 100%;
  }
  .ambiente--texto-esquerda .ambiente__titulo {
    width: 100%;
  }
  .container.ambiente__corpo {
    margin-top: 20px;
  }
  .mb-20 {
    margin-bottom: 15px;
  }
}