/* --------------------------------------------------------------------------
   Aysú · folha da home
   Só o que existe nesta página. O vocabulário comum (tokens, botões, cartões,
   cabeçalho, rodapé) mora em portal.css e é compartilhado com o portal do
   investidor; o que está aqui é a capa e as seções de venda.
   -------------------------------------------------------------------------- */

  /* --- capa -----------------------------------------------------------------
     A foto em fluxo normal, não em overlay absoluto: a tarja de dados no rodapé
     da capa pode quebrar em duas ou três linhas no celular sem nunca subir por
     cima do título.
  --------------------------------------------------------------------------- */

  .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(556px, 92vh, 868px);
  }

  /* Três fotos em fusão, sete segundos cada, com uma deriva de zoom que nunca
     para. Uma capa parada é o que faz site de incorporação parecer folheto; o
     ciclo de 21s é longo de propósito, para o movimento ser notado quando o
     olho volta e não enquanto ele lê o título. */
  .hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 28%;
    opacity: 0;
    /* sem dessaturar: a fachada é o único lugar da página com cor real, e é
       dela que vem a vontade de comprar */
    filter: contrast(1.05) saturate(1.03);
    /* linear, não ease: numa fusão cruzada a curva em S deixa as duas camadas
       abaixo de 1 no meio do caminho e o fundo aparece por um quadro */
    animation: hero-cycle 21s linear infinite both;
  }

  /* As três vêm de origens diferentes e não casavam de fábrica: a estrutura
     tem o céu lavado, o içamento veio com uma virada teal de filtro. A
     correção por quadro é o que faz as três lerem como uma série do mesmo
     canteiro, e não como três buscas num banco de imagens. */
  .hero__img:nth-of-type(1) { animation-delay: -1.5s; }

  .hero__img:nth-of-type(2) {
    object-position: 50% 44%;
    filter: contrast(1.12) saturate(0.86);
    animation-delay: 5.5s;
  }

  .hero__img:nth-of-type(3) {
    object-position: 50% 54%;
    filter: contrast(1.14) saturate(0.68) hue-rotate(-8deg);
    animation-delay: 12.5s;
  }

  /* A que sai só começa a desaparecer depois que a de cima já está opaca: a
     soma das camadas nunca cai abaixo de 1, então não há piscada entre elas.
     O salto de escala em 47→48% acontece com a foto invisível e coberta. */
  @keyframes hero-cycle {
    0%        { opacity: 0; transform: scale(1.12); }
    7%, 40%   { opacity: 1; }
    47%       { opacity: 0; transform: scale(1.02); }
    48%, 100% { opacity: 0; transform: scale(1.12); }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__img { animation: none; transform: scale(1.02); }
    .hero__img:first-of-type { opacity: 1; }
  }

  /* O degradê antigo cobria 96% da base e enterrava o prédio. Este pesa só o
     suficiente para o texto assentar no canto inferior esquerdo e devolve o
     céu e o vidro ao olho. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to top,
        color-mix(in oklab, var(--soot) 86%, transparent) 0%,
        color-mix(in oklab, var(--soot) 58%, transparent) 20%,
        color-mix(in oklab, var(--soot) 22%, transparent) 44%,
        transparent 68%),
      linear-gradient(96deg,
        color-mix(in oklab, var(--soot) 54%, transparent) 0%,
        color-mix(in oklab, var(--soot) 12%, transparent) 42%,
        transparent 68%);
  }

  .hero__in {
    flex: 1;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding: clamp(88px, 13vh, 156px) var(--shell-pad) clamp(30px, 3.6vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-5);
  }

  /* Fora do serifado itálico. A capa é a primeira coisa que se vê e era o
     lugar mais parecido com todos os outros sites de incorporação; a mesma
     grotesca do resto da página, em corpo grande e entreletra fechada, soa
     mais próxima de relatório do que de convite — que é o registro do site.
     O nome próprio se separa do substantivo por peso e brilho, não por
     inclinação: se a Light não estiver instalada, os dois caem em 400 e a
     diferença de cor sozinha ainda sustenta a hierarquia. */
  .hero__title {
    font-family: var(--font-display);
    font-weight: 300;
    color: color-mix(in oklab, var(--warm) 56%, transparent);
    font-size: clamp(42px, 6.6vw, 88px);
    line-height: 1;
    letter-spacing: -0.035em;
    max-width: 13ch;
  }

  .hero__title em { font-style: normal; font-weight: 400; color: var(--warm); }

  .hero .eyebrow { color: color-mix(in oklab, var(--warm) 66%, transparent); }
  .hero__cta { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap; }
  .hero .btn { min-height: 46px; padding: 0 var(--space-6); font-size: var(--text-sm); }
  .hero .btn--solid { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
  .hero .btn--solid:hover {
    background: color-mix(in oklab, var(--signal) 82%, var(--fg));
    border-color: color-mix(in oklab, var(--signal) 82%, var(--fg));
    color: var(--on-signal);
  }

  /* a segunda ação não é um segundo botão: dois botões lado a lado dividem o
     olho em dois e nenhum dos dois vira o caminho principal */
  .hero__link {
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    color: color-mix(in oklab, var(--warm) 82%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--warm) 38%, transparent);
    padding-bottom: 3px;
    transition: color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
  }

  .hero__link:hover { color: var(--fg); border-bottom-color: var(--fg); }

  /* Tarja de identificação no pé da capa, no lugar de mais um parágrafo: é o
     colofão de uma prancha de projeto — quem constrói, quantos pavimentos,
     quantas unidades, quando entrega, sob qual registro. */
  .hero__plaque {
    border-top: 1px solid color-mix(in oklab, var(--warm) 17%, transparent);
    background: color-mix(in oklab, var(--soot) 42%, transparent);
    backdrop-filter: blur(10px);
  }

  .hero__plaque-in {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: var(--space-4) var(--shell-pad);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) clamp(20px, 3.6vw, 56px);
    font-size: var(--text-sm);
    color: color-mix(in oklab, var(--warm) 92%, transparent);
  }

  .hero__plaque-in i {
    display: block;
    font-style: normal;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--warm) 50%, transparent);
    margin-bottom: 4px;
  }

  /* --- oferta: a escassez em tamanho de manchete ---------------------------- */

  .offer {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.3fr);
    gap: clamp(26px, 4vw, 72px);
    /* a elevação é bem mais alta que o número: presas pela base, as duas colunas
       abriam um buraco em cima do 17. Penduradas pelo topo, o rótulo do espelho
       e o coroamento da torre partem da mesma linha e a sobra cai embaixo. */
    align-items: start;
  }

  .offer__no {
    display: block;
    font-family: var(--font-serif);
    font-size: clamp(76px, 10.6vw, 148px);
    font-weight: 300;
    line-height: 0.78;
    letter-spacing: -0.028em;
    color: var(--navy);
    white-space: nowrap;
    /* A entrelinha de 0,78 deixa a caixa de linha menor que o desenho: a tinta
       transborda por cima e o 17 passa a riscar o olho da seção. A folga
       devolve só o que transborda, e vai em em porque o transbordo cresce
       junto com o corpo — em px, o número menor do celular ganharia um vão
       solto. Sem margem embaixo: o algarismo é a manchete inteira agora,
       quem abre o respiro é o filete do parágrafo. */
    padding-top: 0.15em;
  }

  .offer__no sup {
    font-size: 0.2em;
    letter-spacing: 0;
    vertical-align: super;
    color: var(--ink-3);
  }

  .offer__cap { font-size: var(--text-sm); font-weight: 400; line-height: 1.6; color: var(--ink-2); max-width: 32ch; }

  /* A elevação é quase o dobro da altura da manchete, e a coluna da esquerda
     terminava num vão de meia tela. É o único lugar da página onde cabe dizer
     onde o prédio está — o resto da página só diz o que ele tem. Em serifa e
     acima do corpo de texto comum porque não é legenda de nada: é a única
     frase da página escrita para ser lida, e não varrida. */
  .offer__about {
    max-width: 34ch;
    margin-top: clamp(28px, 3.6vw, 52px);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    font-family: var(--font-serif);
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 340;
    line-height: 1.5;
    letter-spacing: -0.008em;
    color: var(--ink-2);
  }

  /* A elevação da torre. Cada linha é um pavimento e cada marca continua sendo
     uma unidade, mas de pé o desenho responde onde as unidades estão — que é a
     pergunta que o comprador faz — e não só quantas sobraram. Deitada, a régua
     quebrava em duas fileiras no meio de um andar e virava código de barras.

     Três colunas: a cota do pavimento, a torre e as notas. As notas entram na
     mesma grade por número de linha, para que a linha de cota comece exatamente
     no meio da torre e termine no último pavimento em vez de ser posicionada no
     olho. Quantas linhas ela cobre vem do JS em --half / --half-2, calculado
     sobre o próprio espelho: se a torre mudar de altura, a cota acompanha.
     --cols é a largura da laje-tipo, e vem do mesmo lugar. */
  .ticks {
    --cota: 20px;
    --sep: clamp(14px, 1.8vw, 24px);
    --cell: clamp(20px, 2.6vw, 34px);
    --half: 4;
    --half-2: 5;
    display: grid;
    grid-template-columns: var(--cota) auto minmax(0, 1fr);
    column-gap: var(--sep);
    row-gap: 2px;
    align-items: center;
  }

  .lvl__n {
    grid-column: 1;
    justify-self: end;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
  }

  .lvl__u {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(var(--cols, 7), var(--cell));
    gap: 2px;
  }

  /* na elevação a marca não varia de altura: são todas apartamentos do mesmo
     pé-direito, e o que distingue é o preenchimento. A altura variável continua
     valendo nas amostras da legenda, que ficam fora de .ticks. */
  .ticks .tick { width: auto; }

  /* o térreo entra com duas marcas só, e é isso mesmo: são os dois gardens nos
     finais 01 e 02, e o resto da laje é hall, salão e bicicletário */

  /* Coroamento e terreno: as duas cotas que fecham a torre. Correm da margem
     esquerda da coluna — a mesma da legenda e dos números logo abaixo — até um
     palmo além da última prumada, como em prancha. É o que impede o desenho de
     parecer recuado por engano só porque a régua de pavimentos vive fora dele. */
  .lvl__u--top { position: relative; }

  .lvl__u--top::before {
    content: '';
    position: absolute;
    top: -5px;
    left: calc(-1 * (var(--cota) + var(--sep)));
    right: -7px;
    border-top: 1px solid var(--ink-3);
  }

  .ticks__ground {
    grid-column: 1 / 3;
    height: 0;
    margin: 5px -7px 0 0;
    border-top: 1px solid var(--ink-3);
  }

  .ticks__note {
    grid-column: 3;
    max-width: 34ch;
    padding-left: clamp(13px, 1.5vw, 19px);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--ink-3);
  }

  .ticks__note b { font-weight: 500; color: var(--ink); }

  /* linha de cota: acompanha os oito pavimentos de cima e termina nos dois
     traços a 45°, a mesma convenção do ícone de medida */
  .ticks__note--dim {
    position: relative;
    grid-row: 1 / span var(--half);
    align-self: stretch;
    display: flex;
    align-items: center;
    border-left: 1px solid var(--navy-line);
  }

  .ticks__note--dim::before,
  .ticks__note--dim::after {
    content: '';
    position: absolute;
    left: -5px;
    width: 11px;
    height: 1px;
    background: var(--navy-line);
    transform: rotate(-45deg);
  }

  .ticks__note--dim::before { top: 0; }
  .ticks__note--dim::after { bottom: 0; }

  .ticks__note--low {
    grid-row-start: var(--half-2);
    grid-row-end: span var(--half);
    align-self: center;
  }

  /* abaixo de 1080 a oferta vira uma coluna só e a torre passa a ter a largura
     inteira à disposição. A prumada tem de acompanhar: presa ao vw ela encolhia
     justamente onde tinha sobrado espaço. */
  @media (max-width: 1080px) {
    .ticks { --cell: clamp(26px, 4.2vw, 46px); }
    .ticks__note { max-width: 40ch; }
  }

  /* no celular não cabem torre e nota lado a lado: as notas descem para baixo
     do desenho e a linha de cota, sem trecho para marcar, vira fio de margem */
  @media (max-width: 620px) {
    .ticks { --cell: clamp(42px, 13vw, 64px); row-gap: 3px; }
    .ticks__note,
    .ticks__note--dim,
    .ticks__note--low {
      grid-column: 1 / -1;
      grid-row: auto;
      max-width: 46ch;
      margin-top: var(--space-4);
      padding-left: var(--space-3);
    }
    .ticks__note--low { margin-top: var(--space-3); border-left: 1px solid var(--rule); }
    .ticks__note--dim::before, .ticks__note--dim::after { display: none; }
  }

  /* Três estados, três pesos, na ordem em que interessam a quem compra:
     disponível cheia de azul, reservada com o mesmo azul lavado e o contorno
     tracejado de quem ainda pode voltar, vendida num cinza que recua. Sem o
     preenchimento, a reservada abria um buraco branco na torre e pesava menos
     que a vendida — o inverso do que ela significa. A altura é igual nos três
     porque na elevação quem varia a altura é o desenho, não o estado. */
  .tick { width: 10px; height: 14px; flex: none; }
  .tick--sold { background: color-mix(in oklab, var(--ink-3) 22%, var(--warm)); }
  .tick--hold {
    background: color-mix(in oklab, var(--navy) 15%, var(--warm));
    border: 1px dashed color-mix(in oklab, var(--navy) 58%, var(--warm));
  }
  .tick--free { background: var(--navy); }

  .ticks__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); }
  .ticks__key span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--ink-3); }
  .ticks__key i { width: 8px; height: 14px; flex: none; }

  .offer__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(22px, 2.6vw, 34px);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-5);
  }

  /* space-between em vez de gap fixo: quando um rótulo quebra em duas linhas, os
     quatro valores continuam assentados na mesma linha de base */
  .fact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-2);
    padding-right: var(--space-4);
    min-width: 0;
  }

  .fact + .fact {
    padding-left: clamp(14px, 1.9vw, 28px);
    border-left: 1px solid var(--rule);
  }

  /* os números de vitrine saem do monoespaçado e vão para a serifa: o
     monoespaçado é a letra do extrato e da planta cotada, e usá-lo também no
     preço fazia a página de venda soar como painel de dados */
  .fact b {
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: clamp(19px, 1.9vw, 25px);
    font-weight: 400;
    letter-spacing: -0.012em;
    color: var(--ink);
    white-space: nowrap;
  }

  /* --- características ------------------------------------------------------
     Três cartões iguais lado a lado é o gabarito que todo mundo usa. Aqui o
     título fica parado numa coluna estreita à esquerda enquanto as
     características correm empilhadas à direita, separadas só por filete — que
     é como uma matéria assinada se organiza.

     Sem numeral à frente: 01/02/03 dava ordem de importância a coisas que não
     competem entre si, e transformava três qualidades do prédio numa
     enumeração. O filete separa; o número classificava.
  --------------------------------------------------------------------------- */

  .tese {
    display: grid;
    grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.52fr);
    gap: clamp(26px, 4.6vw, 88px);
    align-items: start;
  }

  .tese__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: sticky;
    top: clamp(82px, 12vh, 118px);
  }

  .tese__list { display: flex; flex-direction: column; }

  .thesis {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block: clamp(24px, 2.8vw, 38px);
    border-top: 1px solid var(--rule);
    min-width: 0;
  }

  .thesis:first-child { border-top: 0; padding-top: 0; }

  .thesis h3 {
    font-size: clamp(18px, 1.8vw, 23px);
    font-weight: 500;
    letter-spacing: -0.018em;
    line-height: 1.24;
  }

  .thesis dl {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) clamp(20px, 2.8vw, 42px);
    margin-top: var(--space-1);
  }

  .thesis dl div {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--ink-3);
  }

  .thesis dd { margin: 0; color: var(--ink); font-weight: 500; }

  /* --- a vista (capítulo escuro) ------------------------------------------- */

  .vista { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(28px, 4.4vw, 76px); align-items: center; }

  .vista__plan { width: 100%; height: auto; display: block; }

  /* Em tela estreita a implantação inteira encolheria para ~330px e nenhum
     rótulo sobreviveria. Abaixo de 780px entra um segundo desenho, só com a
     laje-tipo e o parque reduzido a uma faixa: menos informação, mas legível. */
  .vista__plan--narrow { display: none; }

  @media (max-width: 780px) {
    .vista__plan--wide { display: none; }
    .vista__plan--narrow { display: block; }
  }

  .v-park   { fill: color-mix(in oklab, var(--success) 17%, var(--night)); }
  .v-lake   { fill: color-mix(in oklab, var(--meta) 26%, var(--night)); }
  .v-tree   { fill: color-mix(in oklab, var(--success) 40%, var(--night)); }
  .v-street { fill: color-mix(in oklab, var(--fg-2) 7%, transparent); }
  .v-curb   { stroke: color-mix(in oklab, var(--fg-2) 18%, transparent); stroke-width: 1; }
  .v-mid    { stroke: color-mix(in oklab, var(--fg-2) 28%, transparent); stroke-width: 1; stroke-dasharray: 10 12; }
  .v-lot    { fill: none; stroke: color-mix(in oklab, var(--fg-2) 26%, transparent); stroke-width: 1; stroke-dasharray: 6 6; }
  .v-sight  { stroke: color-mix(in oklab, var(--sky) 52%, transparent); stroke-width: 1.1; stroke-dasharray: 5 6; fill: none; }
  .v-head   { fill: color-mix(in oklab, var(--sky) 62%, transparent); }
  .v-tower  { fill: color-mix(in oklab, var(--fg-2) 6%, transparent); stroke: color-mix(in oklab, var(--fg-2) 42%, transparent); stroke-width: 1.6; }
  .v-unit   { fill: none; stroke: color-mix(in oklab, var(--fg-2) 22%, transparent); stroke-width: 1; }
  .v-unit--park { fill: color-mix(in oklab, var(--sky) 22%, transparent); stroke: color-mix(in oklab, var(--sky) 66%, transparent); }
  .v-core   { fill: color-mix(in oklab, var(--fg-2) 14%, transparent); }
  .v-north  { fill: none; stroke: color-mix(in oklab, var(--fg-2) 34%, transparent); stroke-width: 1.1; }
  .v-needle { fill: color-mix(in oklab, var(--fg-2) 52%, transparent); }

  .v-lbl {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    fill: var(--on-night-2);
  }

  .v-lbl--mid { text-anchor: middle; }
  .v-lbl--end { text-anchor: end; }
  .v-lbl--sky { fill: color-mix(in oklab, var(--sky) 84%, transparent); }

  .v-no {
    font-family: var(--font-mono);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    fill: var(--on-night);
    text-anchor: middle;
  }

  .v-no--park { fill: var(--sky); }
  .v-ar { font-family: var(--font-mono); font-size: 10.5px; fill: var(--on-night-2); text-anchor: middle; }

  .faces { display: flex; flex-direction: column; margin-top: clamp(22px, 2.6vw, 32px); }

  .faces li {
    display: grid;
    grid-template-columns: 11px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-top: 1px solid var(--night-line);
    font-size: var(--text-sm);
  }

  .faces i { width: 11px; height: 11px; border-radius: 3px; transform: translateY(1px); }
  .faces i.park { background: color-mix(in oklab, var(--sky) 62%, transparent); }
  .faces i.city { background: color-mix(in oklab, var(--fg-2) 22%, transparent); }
  .faces b { font-family: var(--font-mono); font-weight: 500; color: var(--on-night); white-space: nowrap; }
  .faces small { display: block; font-size: var(--text-xs); color: var(--on-night-2); margin-top: 2px; }

  /* --- plantas ------------------------------------------------------------- */

  /* A tipologia perdeu a caixa. Um desenho de arquitetura dentro de um cartão
     cinza com quina arredondada vira ilustração de site; assentado direto no
     papel, sob um filete, vira prancha de catálogo. */
  .typo {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ink);
    min-width: 0;
  }

  .typo__plan { padding-block: var(--space-3) var(--space-1); }

  .plan { width: 100%; height: auto; display: block; }
  .plan__wall { fill: none; stroke: color-mix(in oklab, var(--ink) 82%, var(--warm)); stroke-width: 2.2; stroke-linejoin: round; }
  .plan__part { fill: none; stroke: color-mix(in oklab, var(--ink) 32%, var(--warm)); stroke-width: 1.2; }
  .plan__var { fill: color-mix(in oklab, var(--navy) 11%, var(--warm)); stroke: none; }

  .plan__lbl {
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: 0.08em;
    fill: var(--ink-3);
    text-anchor: middle;
  }

  .typo__price {
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: clamp(24px, 2.2vw, 30px);
    font-weight: 400;
    letter-spacing: -0.014em;
    color: var(--ink);
  }

  .typo__rows { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }

  .typo__rows div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--ink-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule-soft);
  }

  .typo__rows b { font-weight: 500; color: var(--ink-2); }

  /* --- obra ---------------------------------------------------------------- */

  .prog { display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; }

  .prog__big {
    font-family: var(--font-serif);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: clamp(52px, 6.4vw, 78px);
    font-weight: 300;
    line-height: 0.84;
    letter-spacing: -0.028em;
    color: var(--navy);
  }

  .prog__big sup { font-size: 0.3em; color: var(--ink-3); vertical-align: super; letter-spacing: 0; }

  .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .step { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }

  .step__track {
    height: 3px;
    background: var(--paper-2);
    overflow: hidden;
    margin-bottom: var(--space-2);
  }

  .step__track i { display: block; height: 100%; background: var(--navy); }
  .step__pct { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
  .step--todo .step__pct { color: var(--ink-3); }

  /* --- track record ---------------------------------------------------------
     Histórico é uma lista cronológica, não três cartões: em linha, o ano puxa
     a leitura e os três empreendimentos se comparam de relance.
  --------------------------------------------------------------------------- */

  .recs { display: flex; flex-direction: column; }

  .rec {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-2) clamp(16px, 2.2vw, 34px);
    padding-block: clamp(16px, 1.9vw, 24px);
    border-top: 1px solid var(--rule);
  }

  .rec:last-child { border-bottom: 1px solid var(--rule); }

  .rec__year {
    font-family: var(--font-serif);
    font-variant-numeric: lining-nums;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink-3);
  }

  .rec__body b { display: block; font-size: clamp(16px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.014em; }
  .rec__body small { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-top: 3px; }
  .rec__note { font-size: var(--text-xs); color: var(--ink-2); text-align: right; }
  .rec--now .rec__note { color: var(--navy-deep); font-weight: 600; }

  /* --- procedência ----------------------------------------------------------
     O único lugar da página de venda onde o número volta ao monoespaçado. É
     deliberado: aqui ele não é vitrine, é registro conferível — cada linha diz
     o valor, de que documento ele saiu e de quanto em quanto tempo é refeito.
     A letra de instrumento avisa que a leitura mudou de natureza.
  --------------------------------------------------------------------------- */

  .ledger { display: flex; flex-direction: column; }

  .led {
    display: grid;
    grid-template-columns: minmax(0, 196px) minmax(0, 132px) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-2) clamp(14px, 1.9vw, 28px);
    padding-block: clamp(15px, 1.7vw, 21px);
    border-top: 1px solid var(--rule);
  }

  .led:last-child { border-bottom: 1px solid var(--rule); }

  .led__n { font-size: var(--text-sm); font-weight: 500; line-height: 1.35; }

  /* a marca entra na linha do nome, a 8px dele como no resto da página, e não
     numa coluna própria a 28px — de longe ela lia como enfeite de margem.
     Fica em fluxo inline de propósito: dentro de uma grade alinhada pela linha
     de base, um .ic-row (flex, align-items:center) faria a célula sintetizar a
     base pela borda de baixo e o nome subiria em relação ao valor. */
  .led__n .ic {
    display: inline-block;
    vertical-align: -2px;
    margin-right: var(--space-2);
  }

  .led__v {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--navy-deep);
    white-space: nowrap;
  }

  .led__s { font-size: var(--text-xs); color: var(--ink-2); line-height: 1.55; }

  .led__w {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    text-align: right;
    white-space: nowrap;
  }

  /* --- fechamento ---------------------------------------------------------- */

  .closer { position: relative; isolation: isolate; overflow: hidden; }

  .closer__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    filter: grayscale(0.62) contrast(1.12);
    opacity: 0.3;
    z-index: -2;
  }

  .closer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(96deg,
      var(--night) 0%,
      color-mix(in oklab, var(--night) 82%, transparent) 44%,
      color-mix(in oklab, var(--night) 46%, transparent) 100%);
  }

  .closer__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }
  .closer h2 { max-width: 17ch; }

  @media (max-width: 1080px) {
    .vista { grid-template-columns: minmax(0, 1fr); }
    .offer { grid-template-columns: minmax(0, 1fr); align-items: start; }
    /* empilhado, o cabeçalho da tese não tem mais coluna para acompanhar a
       rolagem: preso, ele ficaria colado no topo por toda a seção */
    .tese { grid-template-columns: minmax(0, 1fr); }
    .tese__head { position: static; }
  }

  /* A procedência perde as colunas antes de perder a legibilidade: valor sobe
     para a linha do nome, fonte e cadência descem, e nada encolhe abaixo do
     corpo mínimo. */
  @media (max-width: 980px) {
    .led { grid-template-columns: minmax(0, 1fr) auto; }
    .led__v { text-align: right; }
    .led__s, .led__w { grid-column: 1 / -1; }
    .led__w { text-align: left; }
  }

  @media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 620px) {
    .offer__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
    .fact:nth-child(odd) { padding-left: 0; border-left: 0; }
    .rec { grid-template-columns: 62px minmax(0, 1fr); }
    .rec__note { grid-column: 2; text-align: left; }
  }

  @media (max-width: 560px) {
    .steps { grid-template-columns: minmax(0, 1fr); }
    .closer .btn { flex: 1; }
    .tick { width: 8px; }
    .fact { padding-right: var(--space-4); }
    .fact + .fact { padding-left: var(--space-4); }
  }

/* --- barra de garantias ----------------------------------------------------
   Colada na capa porque é aí que o comprador novo decide, em dois segundos, se
   o site é sério. Não são logotipos: logotipo é confiança emprestada de outra
   marca. O que este empreendimento tem para mostrar é documento — registro,
   afetação, financiamento contratado, duas entregas no prazo.

   auto-fit em vez de contagem fixa: de cinco colunas a uma, sem media query e
   sem o filete vertical que sempre sobra na primeira coluna da linha de baixo.
--------------------------------------------------------------------------- */

.trust {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

.trust__in {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(18px, 2vw, 26px) var(--shell-pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: var(--space-5) clamp(20px, 3vw, 44px);
}

.trust__i { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 0; }
.trust__i > span { min-width: 0; }
.trust__i .ic { margin-top: 2px; color: var(--navy); }

.trust__i i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 3px;
}

.trust__i b { display: block; font-size: var(--text-xs); font-weight: 600; line-height: 1.35; color: var(--ink); }

/* --- localização -----------------------------------------------------------
   O mapa não é cartografia, é diagrama: três anéis de caminhada e seis pontos
   numerados. Um mapa de verdade obrigaria a acertar cada esquina para provar
   uma coisa só — que dá para ir a pé. O anel prova isso sozinho, e a numeração
   casa desenho e lista sem repetir nenhum nome nos dois lugares.
--------------------------------------------------------------------------- */

.local {
  display: grid;
  grid-template-columns: minmax(0, 1.46fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 52px);
  align-items: start;
}

.local__map {
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  background: var(--card);
  padding: clamp(10px, 1.4vw, 18px);
}

.mapa { display: block; width: 100%; height: auto; }
.mapa__grid { fill: none; stroke: var(--rule); stroke-width: 1; }
.mapa__ave { fill: none; stroke: var(--rule); stroke-width: 4; }
.mapa__park { fill: color-mix(in oklab, var(--navy) 13%, var(--warm)); }
.mapa__water { fill: color-mix(in oklab, var(--sky) 24%, var(--warm)); }
.mapa__ring { fill: none; stroke: var(--navy-line); stroke-width: 1; stroke-dasharray: 3 5; }
.mapa__rl { font-size: 10px; letter-spacing: 0.06em; fill: var(--ink-3); }
.mapa__pk { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--navy-deep); }
.mapa__poi circle { fill: var(--card); stroke: var(--navy); stroke-width: 1.3; }
.mapa__poi text { font-size: 11px; font-weight: 600; fill: var(--navy-deep); text-anchor: middle; }
.mapa__you circle { fill: var(--card); }
.mapa__you rect { fill: var(--navy); }
.mapa__you text { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; fill: var(--ink); }

.pois { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }

.poi {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}

.poi__n {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--navy);
  text-align: center;
}

.poi__t { font-size: var(--text-sm); color: var(--ink); min-width: 0; }

.poi__m {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs);
  color: var(--ink-2);
  white-space: nowrap;
}

/* --- simulação -------------------------------------------------------------
   A seção que este público abre primeiro. Controle à esquerda em papel,
   resultado à direita em grafite: a troca de superfície é o que diz qual dos
   dois lados é a resposta. Nenhum número aqui é digitado — todos saem do mesmo
   espelho de vendas que pinta a torre e a grade de disponibilidade.
--------------------------------------------------------------------------- */

.sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}

.sim__ctl {
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  background: var(--card);
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 32px);
}

.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg > legend { padding: 0; }

.seg__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  overflow: hidden;
  margin-top: var(--space-3);
}

.seg__o { position: relative; min-width: 0; }

/* o input cobre a célula inteira em vez de sumir num sr-only: assim a área de
   toque é a etiqueta que se vê, e não um alvo de 16px escondido atrás dela */
.seg__o input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

.seg__o span {
  display: block;
  padding: 9px 4px 10px;
  text-align: center;
  background: var(--card);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.seg__o + .seg__o span { border-left: 1px solid var(--rule); }
.seg__o span small { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; color: var(--ink-3); }
.seg__o input:checked + span { background: var(--navy); color: var(--card); }
.seg__o input:checked + span small { color: color-mix(in oklab, var(--card) 70%, var(--navy)); }
.seg__o input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--navy-line); }
.seg__o input:disabled + span { color: var(--ink-3); background: var(--paper-2); cursor: not-allowed; }
.seg__o input:disabled + span small { text-decoration: line-through; }

.rail__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }

.rail__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.rng { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: var(--space-3) 0 0; background: transparent; cursor: pointer; }
.rng::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--paper-2); }
.rng::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; border: 4px solid var(--card);
  background: var(--navy); box-shadow: 0 0 0 1px var(--navy);
}
.rng::-moz-range-track { height: 4px; border-radius: 2px; background: var(--paper-2); }
.rng::-moz-range-thumb {
  width: 13px; height: 13px;
  border-radius: 50%; border: 4px solid var(--card);
  background: var(--navy); box-shadow: 0 0 0 1px var(--navy);
}
.rng:focus-visible { outline: none; }
.rng:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--navy), var(--focus-ring); }
.rng:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--navy), var(--focus-ring); }

.rail__ends { display: flex; justify-content: space-between; margin-top: 2px; }

.sim__unit { display: flex; flex-wrap: wrap; gap: var(--space-4) clamp(18px, 2.4vw, 34px); border-top: 1px solid var(--rule); padding-top: var(--space-5); margin-top: auto; }
.sim__unit div { min-width: 0; }
.sim__unit b { display: block; margin-top: 3px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 500; color: var(--ink); }

.sim__out {
  border-radius: var(--edge);
  background: var(--night);
  color: var(--on-night);
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
}

.sim__line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--night-line); }
.sim__line span { min-width: 0; font-size: var(--text-xs); color: var(--on-night-2); }
.sim__line span em { display: block; font-style: normal; font-size: 11px; color: color-mix(in oklab, var(--warm) 40%, var(--night)); margin-top: 2px; }

.sim__line b {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--on-night);
  white-space: nowrap;
}

.sim__line--hero { padding-top: 0; align-items: flex-end; }
.sim__line--hero b { font-size: clamp(27px, 3.1vw, 40px); }
.sim__line--last { border-bottom: 0; }

/* a composição do negócio numa tira só: quanto sai agora, quanto sai até a
   chave, quanto fica para o banco. É a pergunta real de quem tem 30 anos. */
.mix { display: flex; height: 8px; margin-top: clamp(18px, 2.2vw, 26px); border-radius: var(--edge-2); overflow: hidden; background: color-mix(in oklab, var(--warm) 10%, transparent); }
.mix i { display: block; height: 100%; transition: width var(--motion-base) var(--ease-standard); }
.mix__a { background: var(--signal); }
.mix__b { background: color-mix(in oklab, var(--signal) 44%, var(--night)); }
.mix__c { background: color-mix(in oklab, var(--warm) 20%, transparent); }

.mix__key { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: 11px; color: var(--on-night-2); }
.mix__key span { display: inline-flex; align-items: center; gap: 6px; }
.mix__key i { width: 8px; height: 8px; border-radius: 2px; }

.sim__foot { margin-top: auto; padding-top: var(--space-5); }

.terms { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: clamp(20px, 2.4vw, 30px); }

/* --- comparativo -----------------------------------------------------------
   Passado contra passado, nunca promessa: o que a tabela desta obra já fez
   desde o lançamento, ao lado do que o CDI e a poupança fizeram no mesmo
   intervalo. Projeção de rentabilidade em página de incorporação é o tipo de
   número que só existe para ser desmentido depois.
--------------------------------------------------------------------------- */

.cmp {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(28px, 3.4vw, 50px);
  padding-top: clamp(24px, 2.8vw, 38px);
  border-top: 1px solid var(--rule);
}

.cmp__list { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 22px); }
.cmpr { min-width: 0; }
.cmpr__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: 7px; }
.cmpr__n { font-size: var(--text-sm); color: var(--ink-2); }
.cmpr__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }
.cmpr__bar { height: 10px; border-radius: var(--edge-2); background: var(--paper-2); overflow: hidden; }
.cmpr__bar i { display: block; height: 100%; background: var(--ink-3); }
.cmpr__s { display: block; margin-top: 6px; font-size: 11px; color: var(--ink-3); }
.cmpr--lead .cmpr__n, .cmpr--lead .cmpr__v { font-weight: 600; color: var(--navy-deep); }
.cmpr--lead .cmpr__bar i { background: var(--navy); }

/* --- fotos do canteiro -----------------------------------------------------
   Render vende, foto datada prova. Vão cruas de propósito: o dia em que estas
   virarem imagem tratada, param de servir para a única coisa que fazem aqui.
--------------------------------------------------------------------------- */

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }

.shot {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  background: var(--card);
  text-decoration: none;
}

.shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: contrast(1.06) saturate(0.9); transition: transform var(--motion-base) var(--ease-standard); }
.shot:hover img { transform: scale(1.035); }

.shot__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(26px, 4vw, 38px) var(--space-4) var(--space-4);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-night);
  background: linear-gradient(to top, color-mix(in oklab, var(--soot) 84%, transparent), transparent);
}

/* --- perguntas -------------------------------------------------------------
   <details> nativo: abre sem javascript, entra na busca da página com Ctrl+F
   e já vem com o estado certo no leitor de tela. Uma pergunta por filete.
--------------------------------------------------------------------------- */

.faq { max-width: 82ch; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }

.qa > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: clamp(16px, 1.8vw, 22px) 0;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 500;
  color: var(--ink);
  transition: color var(--motion-fast) var(--ease-standard);
}

.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--navy-deep); }

.qa > summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--motion-fast) var(--ease-standard);
}

.qa[open] > summary { color: var(--navy-deep); }
.qa[open] > summary::after { transform: translateY(2px) rotate(225deg); border-color: var(--navy); }
.qa p { max-width: 64ch; padding-bottom: clamp(16px, 1.8vw, 22px); font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2); }

/* --- formulário de contato -------------------------------------------------
   Três campos. O quarto campo é o que faz alguém fechar a aba, e telefone já
   é o canal: quem responde de verdade responde no WhatsApp.
--------------------------------------------------------------------------- */

.lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-content: start; min-width: 0; }
.lead__f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lead__f--wide { grid-column: 1 / -1; }
.lead__f > span { font-size: 9.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-night-2); }

.lead input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--night-line);
  border-radius: var(--edge);
  background: color-mix(in oklab, var(--warm) 7%, transparent);
  color: var(--on-night);
  font: inherit;
  font-size: var(--text-sm);
}

.lead input::placeholder { color: color-mix(in oklab, var(--warm) 32%, transparent); }
.lead input:focus-visible { outline: none; border-color: var(--signal); box-shadow: var(--focus-ring); }

.lead__go { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }
.lead__note { grid-column: 1 / -1; font-size: 11px; color: var(--on-night-2); }
.lead .btn--solid { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.lead .btn--solid:hover { background: color-mix(in oklab, var(--signal) 82%, var(--fg)); border-color: color-mix(in oklab, var(--signal) 82%, var(--fg)); color: var(--on-signal); }

.lead__ok {
  border: 1px solid color-mix(in oklab, var(--signal) 46%, transparent);
  border-radius: var(--edge);
  background: color-mix(in oklab, var(--signal) 9%, transparent);
  padding: clamp(18px, 2.2vw, 26px);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--on-night);
}

/* O fechamento deixa de ser "manchete + dois botões" e passa a ser
   "manchete + formulário". Vira grade e não flex: com wrap, o formulário
   caía inteiro para baixo assim que faltavam 20px, e a página terminava
   com dois blocos empilhados sem relação visível entre eles. */
.closer__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* --- WhatsApp fixo ---------------------------------------------------------
   Grafite com o glifo no acento, não a pílula verde inteira: uma bolha verde
   flutuando é o elemento mais copiado da internet e derrubaria sozinha o
   registro do resto da página. O canal precisa estar sempre à mão; não
   precisa gritar.
--------------------------------------------------------------------------- */

.wa {
  position: fixed;
  z-index: 40;
  right: clamp(14px, 2.2vw, 26px);
  bottom: clamp(14px, 2.2vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid color-mix(in oklab, var(--signal) 36%, transparent);
  border-radius: var(--radius-pill);
  background: var(--night);
  color: var(--on-night);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 12px 28px color-mix(in oklab, var(--soot) 30%, transparent);
  transition: background var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard);
}

.wa:hover { background: color-mix(in oklab, var(--night) 88%, var(--signal)); border-color: var(--signal); }
.wa svg { flex: none; width: 17px; height: 17px; fill: var(--signal); }

/* --- respiro da grade nova ------------------------------------------------ */

@media (max-width: 860px) {
  .closer__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .sim { grid-template-columns: minmax(0, 1fr); }
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .local { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a terceira foto ocupa a linha inteira em vez de deixar meia coluna vazia */
  .shots .shot:last-child { grid-column: 1 / -1; }
  .shots .shot:last-child img { aspect-ratio: 21 / 9; }
}

@media (max-width: 560px) {
  .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg__o:nth-child(odd) span { border-left: 0; }
  .seg__o:nth-child(n + 3) span { border-top: 1px solid var(--rule); }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .shots .shot:last-child img { aspect-ratio: 4 / 3; }
  .wa { height: 52px; width: 52px; padding: 0; justify-content: center; }
  .wa span { display: none; }
  .wa svg { width: 21px; height: 21px; }
  /* o rodapé precisa acabar acima da pílula, ou o CNPJ fica embaixo dela */
  .site-foot { padding-bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .shot:hover img { transform: none; }
  .mix i { transition: none; }
}