@layer components {

  .skip {
    position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 1000;
    background: var(--ink); color: var(--white); padding: .8rem 1.2rem; border-radius: 999px;
    text-decoration: none; font-size: .85rem; transition: inset-block-start .25s var(--ease-out);
  }
  .skip:focus { inset-block-start: 1rem; }
  .hp { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }

  /* content-visibility foi testado e REMOVIDO: numa página de ~10 telas com
     imagens grandes, o custo de renderizar a seção inteira no frame em que
     ela entra na viewport supera a economia. Medido: 50% de frames perdidos
     com, 17% sem (mediana de 5 execuções, CPU 4x lenta). */

  .sechead--row {
    grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  }
  @media (max-width: 55rem) { .sechead--row { grid-template-columns: minmax(0,1fr); } }

  /* ============ BOTÃO REDONDO ============ */
  .rnd {
    inline-size: 2.9rem; block-size: 2.9rem; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    font-size: 1rem; line-height: 1;
    color: var(--tx-strong);
    box-shadow: inset 0 0 0 1px var(--rule);
    transition: background-color .3s var(--ease-out), color .3s, box-shadow .3s, transform .3s var(--ease-out);
  }
  .rnd:hover { background: var(--ember); color: var(--white); box-shadow: inset 0 0 0 1px transparent; transform: translateY(-2px); }
  .rnd[disabled] { opacity: .3; pointer-events: none; }

  /* ============ TRILHO HORIZONTAL ============ */
  .hsec { padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); overflow: clip; }
  .hsec__head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--gap); align-items: end;
    padding-block-end: clamp(1.6rem, 3vw, 2.6rem);
  }
  .hsec__head .h2 { max-inline-size: 16ch; padding-block-start: .8rem; }
  .hsec__aside { display: grid; gap: 1.1rem; justify-items: start; }
  .hsec__aside p { font-size: .9rem; color: var(--tx-mute); max-inline-size: 34ch; }
  .hsec__nav { display: flex; gap: .6rem; }
  @media (max-width: 62rem) { .hsec__head { grid-template-columns: minmax(0,1fr); } }

  .hs {
    display: flex; gap: clamp(1rem, 2vw, 1.8rem);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--pad-x);
    padding-inline: var(--pad-x);
    padding-block-end: 1.2rem;
    list-style: none; margin: 0;
    scrollbar-width: none;
  }
  .hs::-webkit-scrollbar { display: none; }
  .hs:focus-visible { outline: 2px solid var(--ember-tx); outline-offset: 4px; }

  .hs__i { flex: 0 0 min(58vw, 46rem); scroll-snap-align: start; display: grid; gap: 1.1rem; }
  /* No celular sobravam 24px do card seguinte: a essa altura ele não lê como
     "tem mais ao lado", lê como foto cortada na borda. Menos largura e mais
     respiro entre os cards devolvem a fresta — 46px num aparelho de 375.
     O .hs--cards fica de fora do gap: vive dentro de .shell--wide, tem menos
     espaço e já foi calibrado à parte logo abaixo. */
  @media (max-width: 62rem) {
    .hs__i { flex-basis: min(76vw, 34rem); }
    .hs:not(.hs--cards) { gap: 1.5rem; }
  }

  .hs__i .fig img { transition: transform .8s var(--ease-out); }
  .hs__i:hover .fig img { transform: scale(1.035); }

  .hs__cap { display: grid; gap: .45rem; max-inline-size: 46ch; }
  .hs__cap h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 400; letter-spacing: -.02em; color: var(--tx-strong); }
  .hs__cap p { font-size: .92rem; color: var(--tx-mute); line-height: 1.5; }
  .hs__cap b { color: var(--tx-on-dark, var(--tx-strong)); font-weight: 600; }
  .hs__n { font-size: .7rem; font-weight: 600; letter-spacing: .16em; color: var(--tx-mute); }

  .hs__bar { block-size: 2px; background: var(--rule); position: relative; overflow: clip; margin-block-start: .4rem; }
  .hs__bar i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 22%; background: var(--ember); }
  @supports (animation-timeline: scroll()) {
    .hs__bar i { transform-origin: 0 50%; }
  }

  .hs--cards { align-items: stretch; }
  .hs--cards .hs__i { flex-basis: min(84vw, 26rem); align-content: start; }
  /* este trilho vive dentro de .shell--wide, então 84vw não deixa sobrar
     nada do card seguinte e as três tipologias parecem uma só. 76vw
     devolve a fresta que sinaliza "arrasta" — a mesma que já funciona
     no trilho da área externa, que é full-bleed. */
  @media (max-width: 62rem) { .hs--cards .hs__i { flex-basis: min(76vw, 26rem); } }
  /* no desktop as três tipologias cabem lado a lado: vira grade e o trilho
     (setas e barra de progresso) some sozinho, porque não há transbordo. */
  @media (min-width: 62.01rem) {
    .hs--cards {
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
      overflow: visible; scroll-snap-type: none; padding-block-end: 0;
    }
    .hs--cards .hs__i { flex-basis: auto; }
  }

  /* ============ INFOGRÁFICO DO EDIFÍCIO ============ */
  /* a coluna do desenho cresceu junto com o campo do SVG: as chamadas
     ocupam um terço da largura, e sem isso o prédio encolheria. */
  .tower { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
  @media (max-width: 62rem) { .tower { grid-template-columns: minmax(0,1fr); } .tower__viz { max-inline-size: min(100%, 21rem); } }

  .tower__svg { inline-size: 100%; block-size: auto; }
  /* elevação decalcada do PDF: contorno grosso, malha fina, faixa de destaque */
  .tower__outline rect { fill: none; stroke: var(--tx-strong); stroke-width: 1.6; }
  .tower__lines path { fill: none; stroke: color-mix(in oklab, var(--ink) 34%, transparent); stroke-width: .7; }
  .tower__band { fill: transparent; transition: fill .4s var(--ease-out);
                 pointer-events: all; cursor: pointer; }

  /* ---- CHAMADAS DA ELEVAÇÃO ----
     As faixas de 4º e 3º pavimento têm 14 a 16px de altura na tela: como
     alvo de toque, não existem. Os pinos vivem numa coluna à direita, com
     folga vertical entre si, e cada um carrega um alvo invisível de 46px.
     A linha pontilhada é que faz a ligação com o pavimento — é a mesma
     convenção de chamada usada em memorial de arquitetura. */
  .tower__pin { cursor: pointer; }
  .tower__hit { fill: transparent; pointer-events: all; }
  .tower__lead {
    fill: none; stroke: color-mix(in oklab, var(--ink) 30%, transparent);
    stroke-width: .9; stroke-dasharray: 3.5 3;
    transition: stroke .35s var(--ease-out);
  }
  .tower__ring {
    fill: var(--bone); stroke: var(--ember); stroke-width: 1.7;
    transition: fill .35s var(--ease-out);
  }
  .tower__mais {
    fill: none; stroke: var(--ember); stroke-width: 1.9; stroke-linecap: round;
    transition: stroke .35s var(--ease-out);
  }
  .tower__rot {
    fill: var(--tx-strong); font-family: var(--f-sans);
    font-size: 12px; font-weight: 600; letter-spacing: -.01em;
    dominant-baseline: middle;
  }
  .tower__pin.is-on .tower__ring { fill: var(--ember); }
  .tower__pin.is-on .tower__mais { stroke: var(--ink); }
  .tower__pin.is-on .tower__lead { stroke: var(--ember); }
  @media (hover: hover) {
    .tower__pin:hover .tower__ring { fill: var(--ember); }
    .tower__pin:hover .tower__mais { stroke: var(--ink); }
  }
  .tower__band.is-on { fill: color-mix(in oklab, var(--ember) 30%, transparent); }
  .tower__lv > rect {
    fill: color-mix(in oklab, var(--ink) 5%, transparent);
    stroke: color-mix(in oklab, var(--ink) 26%, transparent); stroke-width: 1;
    transition: fill .4s var(--ease-out), stroke .4s;
  }
  .tower__hint { fill: none; stroke: color-mix(in oklab, var(--ink) 20%, transparent);
                 stroke-width: 2.5; stroke-linecap: round; transition: stroke .4s; }
  .tower__win rect { fill: color-mix(in oklab, var(--ink) 14%, transparent); transition: fill .4s var(--ease-out); }
  .tower__lv.is-on > rect { fill: color-mix(in oklab, var(--ember) 14%, transparent); stroke: var(--ember); }
  .tower__lv.is-on .tower__hint { stroke: var(--ember); }
  .tower__lv.is-on .tower__win rect { fill: color-mix(in oklab, var(--ember) 52%, transparent); }

  .tower__list { display: grid; list-style: none; padding: 0; margin: 0; }
  .tower__row { border-block-start: 1px solid var(--rule); }
  .tower__row:last-child { border-block-end: 1px solid var(--rule); }
  .tower__row button {
    inline-size: 100%; text-align: start; cursor: pointer;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    grid-template-areas: "lvl nome zoom" "lvl itens zoom" "lvl cta zoom";
    gap: .15rem 1.2rem; align-items: center;
    padding-block: clamp(.85rem, 1.8vw, 1.2rem);
    transition: padding-inline-start .4s var(--ease-out);
  }
  .tower__lvl { grid-area: lvl; }
  .tower__name { grid-area: nome; }
  .tower__items { grid-area: itens; }
  .tower__cta {
    grid-area: cta; font-size: .72rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ember-tx);
    opacity: 0; transform: translateY(-.2rem);
    transition: opacity .3s, transform .35s var(--ease-out);
    padding-block-start: .3rem;
  }
  .tower__row:hover .tower__cta, .tower__row.is-on .tower__cta,
  .tower__row button:focus-visible .tower__cta { opacity: 1; transform: none; }
  /* No toque não há hover: sem isto, 4 das 5 linhas do edifício não anunciam
     que abrem planta — e abrir planta é o clique de maior intenção da página.
     Mesmo padrão já aprovado em .planta__reveal. */
  @media (hover: none), (max-width: 62rem) {
    .tower__cta { opacity: 1; transform: none; }
  }
  .tower__zoom {
    grid-area: zoom; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    box-shadow: inset 0 0 0 1px var(--rule); color: var(--tx-mute);
    transition: background-color .3s var(--ease-out), color .3s, box-shadow .3s, transform .35s var(--ease-out);
  }
  .tower__zoom svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none;
                     stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .tower__row:hover .tower__zoom, .tower__row button:focus-visible .tower__zoom {
    background: var(--ember); color: var(--white); box-shadow: none; transform: scale(1.06);
  }
  .tower__row:hover button, .tower__row.is-on button { padding-inline-start: .7rem; }
  /* o posicionamento vem de grid-template-areas; grid-row aqui sobrescrevia a área */
  .tower__lvl { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
                color: var(--tx-mute); align-self: start; padding-block-start: .45em; transition: color .3s; }
  .tower__name { font-size: clamp(1.05rem, .95rem + .55vw, 1.5rem); font-weight: 400; letter-spacing: -.018em; color: var(--tx-strong); }
  .tower__items { font-size: .86rem; color: var(--tx-mute); line-height: 1.5; }
  .tower__row.is-on .tower__lvl { color: var(--ember-tx); }
  @media (max-width: 40rem) {
    .tower__row button {
      grid-template-columns: minmax(0,1fr) auto;
      grid-template-areas: "lvl zoom" "nome zoom" "itens itens" "cta cta";
    }
  }

  /* ============ LIGHTBOX DAS PLANTAS ============ */
  .rnd--sm { inline-size: 2.4rem; block-size: 2.4rem; font-size: .9rem; }
  /* no toque as setas do trilho passam a alvo de 44px */
  @media (max-width: 55rem) { .rnd--sm { inline-size: 2.75rem; block-size: 2.75rem; } }

  .plano {
    /* explícito de propósito: qualquer regra que devolva position: relative
       a este elemento faz a página saltar ao abrir o modal. */
    position: fixed; inset: 0;
    inline-size: min(100% - 2rem, 78rem); max-block-size: 92svh;
    margin: auto;                       /* o display:grid do [open] anula o centro padrão */
    padding: 0; border: 0; border-radius: 0;
    background: var(--ink); color: var(--tx-on-dark-mute);
    --tx-strong: var(--white); --tx-mute: var(--tx-on-dark-mute); --rule: var(--rule-dark);
    --ember-tx: var(--ember-open);
    overflow: clip;
  }
  .plano::backdrop { background: color-mix(in oklab, #000 76%, transparent); backdrop-filter: blur(6px); }
  .plano[open] { display: grid; grid-template-rows: auto 1fr auto; }

  .plano__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: clamp(.9rem, 2vw, 1.3rem) clamp(1rem, 2.4vw, 1.8rem);
    border-block-end: 1px solid var(--rule);
  }
  .plano__t { font-size: .74rem; font-weight: 600; letter-spacing: .18em;
              text-transform: uppercase; color: var(--tx-strong); }
  .plano__c { color: var(--ember-tx); margin-inline-start: .5em; }
  .plano__nav { display: flex; gap: .5rem; }

  .plano__stage { overflow-y: auto; overscroll-behavior: contain; }
  .plano__p { margin: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,15rem);
              gap: clamp(1rem, 2.5vw, 2rem);
              padding: clamp(1rem, 2.4vw, 1.8rem); }
  .plano__p[hidden] { display: none; }
  /* as plantas têm fundo transparente: ficam sobre papel, como no memorial */
  .plano__img { position: relative; background: var(--bone); padding: clamp(.5rem, 1.6vw, 1.1rem); }
  .plano__img img { inline-size: auto; max-inline-size: 100%; block-size: auto;
                    max-block-size: 60svh; display: block; margin-inline: auto; }
  .plano__leg { display: grid; gap: .1rem; list-style: none; padding: 0; margin-block-start: .8rem; }
  .plano__leg li { display: grid; grid-template-columns: 2.1rem minmax(0,1fr);
                   font-size: .84rem; padding-block: .38rem; border-block-start: 1px solid var(--rule); }
  .plano__leg .num { font-size: .7rem; font-weight: 600; letter-spacing: .1em;
                     color: var(--tx-strong); padding-block-start: .22em; }
  .plano__ori { font-size: .74rem; line-height: 1.6; color: var(--tx-mute);
                padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.8rem);
                border-block-start: 1px solid var(--rule); }
  .plano__ori b { color: var(--tx-strong); font-weight: 600; }

  /* rosa dos ventos decalcada do projeto */
  /* a rosa fica sobre a planta, que é clara: contraste tem que ser escuro */
  .rosa { position: absolute; inset-block-end: 1rem; inset-inline-start: 1rem;
          inline-size: 4.6rem; block-size: auto; }
  .rosa circle { fill: color-mix(in oklab, var(--white) 92%, transparent);
                 stroke: var(--charcoal); stroke-width: 1.4; }
  .rosa polygon { fill: var(--charcoal); stroke: var(--charcoal); stroke-width: .6; }
  .rosa text { fill: var(--charcoal); font-family: var(--f-sans); font-size: 18px;
               font-weight: 700; letter-spacing: .04em; }

  @media (max-width: 62rem) {
    .plano__p { grid-template-columns: minmax(0,1fr); }
    .plano { max-block-size: 94svh; }

    /* As plantas de PAVIMENTO são panorâmicas (de 2,1:1 a 2,74:1). Coubessem
       na largura do celular, sairiam com ~128px de altura: os números 01–09
       impressos sobre o desenho ficam com 2px e a legenda abaixo aponta para
       algo que ninguém localiza. Aqui elas passam a ser desenhadas em altura
       legível e o desenho corre na horizontal, contido para não virar gesto
       de "voltar". As de unidade são quase quadradas e ficam como estão. */
    .plano__p[data-plan="atico"]  .plano__img,
    .plano__p[data-plan="subsolo"] .plano__img,
    .plano__p[data-plan^="pav"]   .plano__img {
      overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    }
    .plano__p[data-plan="atico"]  .plano__img::-webkit-scrollbar,
    .plano__p[data-plan="subsolo"] .plano__img::-webkit-scrollbar,
    .plano__p[data-plan^="pav"]   .plano__img::-webkit-scrollbar { display: none; }
    .plano__p[data-plan="atico"]  .plano__img img,
    .plano__p[data-plan="subsolo"] .plano__img img,
    .plano__p[data-plan^="pav"]   .plano__img img {
      max-inline-size: none; inline-size: auto;
      block-size: 34svh; max-block-size: none; margin-inline: 0;
    }
    /* a rosa dos ventos é anotação, não protagonista: a 4,6rem ela cobria
       mais de um terço da altura do desenho. */
    .rosa { inline-size: 2.8rem; inset-block-end: .6rem; inset-inline-start: .6rem; }
    /* devolve altura ao desenho */
    .plano__ori { padding-block: .7rem; }
  }

  /* ============ MENU LATERAL COM IMAGEM ============ */
  .picker { display: grid; grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
  @media (max-width: 62rem) {
    /* no celular a imagem vem primeiro: tocar num item da lista não pode
       mandar o resultado para fora da tela. */
    .picker { grid-template-columns: minmax(0,1fr); }
    /* A imagem vem antes da lista. Sem sticky, tocar do 8º item em diante
       troca uma foto que já saiu da tela — 5 dos 12 ambientes, entre eles
       pet care, lavanderia e locker, que são os que fecham venda para
       quem compra 30 a 46 m². Sticky resolve sem uma linha de JS. */
    .picker__stage { order: -1; }
  }

  .picker__list { display: grid; }
  .picker__list li { border-block-start: 1px solid var(--rule); }
  .picker__list li:last-child { border-block-end: 1px solid var(--rule); }
  .picker__list button {
    inline-size: 100%; text-align: start;
    display: grid; grid-template-columns: 2.4rem minmax(0,1fr) 1.2rem; align-items: center; gap: .6rem;
    padding-block: .82rem; color: var(--tx-mute);
    font-size: .96rem; letter-spacing: -.008em;
    transition: color .3s var(--ease-out), padding-inline-start .4s var(--ease-out);
  }
  .picker__list .num { font-size: .68rem; font-weight: 600; letter-spacing: .12em; color: color-mix(in oklab, currentColor 82%, transparent); }
  .picker__list i { font-style: normal; opacity: 0; transform: translateX(-.4rem); transition: opacity .3s, transform .4s var(--ease-out); color: var(--ember-tx); }
  .picker__list button:hover { color: var(--tx-strong); padding-inline-start: .55rem; }
  .picker__list button[aria-selected="true"] { color: var(--tx-strong); padding-inline-start: .55rem; }
  .picker__list button[aria-selected="true"] i { opacity: 1; transform: none; }
  .picker__list button[aria-selected="true"] .num { color: var(--ember-tx); }

  .picker__stage { position: relative; aspect-ratio: 3/2; overflow: clip; background: color-mix(in oklab, var(--white) 5%, transparent); }
  /* visibility (e não display) permite o crossfade e ainda tira o painel
     inativo da árvore de acessibilidade. */
  .picker__p {
    position: absolute; inset: 0; margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .45s var(--ease-out), visibility 0s .45s;
  }
  .picker__p.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
  .picker__p picture, .picker__p img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .picker__p figcaption {
    position: absolute; inset-block-end: 0; inset-inline: 0;
    padding: clamp(1rem, 2vw, 1.6rem);
    font-size: .88rem; color: var(--white);
    background: linear-gradient(0deg, color-mix(in oklab, var(--ink) 86%, transparent), transparent);
  }

  /* ============ PLANTAS ============ */
  .planta { display: grid; gap: .9rem; align-content: start; }

  .planta__card {
    display: block; inline-size: 100%; padding: 0; text-align: start; cursor: pointer;
  }
  .planta__card .fig { display: block; position: relative; }
  .planta__card img { transition: transform .9s var(--ease-out); }
  .planta__card:hover img, .planta__card:focus-visible img { transform: scale(1.045); }

  .planta__badge {
    position: absolute; inset-block-start: .8rem; inset-inline-start: .8rem; z-index: 2;
    padding: .42em .85em; border-radius: 999px;
    background: var(--ember); color: var(--white);
    font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }

  /* a ficha técnica vive escondida sobre a foto: a face do card fica limpa */
  .planta__reveal {
    /* superfície escura dentro de seção clara: sem isto herda o laranja
       de fundo claro e reprova sobre o próprio degradê. */
    --ember-tx: var(--ember-open);
    position: absolute; inset: 0; z-index: 1;
    display: grid; align-content: end; gap: .9rem;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    color: var(--white);
    background: linear-gradient(0deg,
      color-mix(in oklab, var(--ink) 92%, transparent),
      color-mix(in oklab, var(--ink) 62%, transparent) 52%,
      color-mix(in oklab, var(--ink) 8%, transparent));
    opacity: 0;
    transition: opacity .42s var(--ease-out);
  }
  .planta__spec { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
  .planta__spec li {
    font-size: .86rem; line-height: 1.4; padding-block: .5rem;
    border-block-start: 1px solid color-mix(in oklab, var(--white) 22%, transparent);
    transform: translateY(.5rem); opacity: 0;
    transition: transform .5s var(--ease-out), opacity .4s var(--ease-out);
  }
  .planta__spec li:nth-child(2) { transition-delay: .05s; }
  .planta__spec li:nth-child(3) { transition-delay: .1s; }
  .planta__ver {
    display: inline-flex; align-items: center; gap: .5em;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ember-tx);
    transform: translateY(.5rem); opacity: 0;
    transition: transform .5s var(--ease-out) .14s, opacity .4s var(--ease-out) .14s;
  }
  .planta__ver i { font-style: normal; transition: transform .4s var(--ease-out); }

  @media (hover: hover) {
    .planta__card:hover .planta__reveal,
    .planta__card:focus-visible .planta__reveal { opacity: 1; }
    .planta__card:hover .planta__spec li, .planta__card:focus-visible .planta__spec li,
    .planta__card:hover .planta__ver,     .planta__card:focus-visible .planta__ver {
      opacity: 1; transform: none;
    }
    .planta__card:hover .planta__ver i { transform: translateX(.3em); }
  }
  /* Sem hover (toque) ou em tela estreita, a ficha fica sempre à vista — não
     dá para "passar o mouse" num celular. Mas, sempre aberta sobre a foto
     inteira, ela cobria ~70% da imagem com degradê escuro. Aqui ela vira uma
     faixa na base: os três itens numa linha corrida e o convite logo abaixo.
     A foto volta a aparecer, e a informação continua lá. */
  @media (hover: none), (max-width: 62rem) {
    .planta__reveal {
      opacity: 1; inset-block-start: auto; gap: .5rem;
      padding: 2.4rem .95rem .85rem;
      background: linear-gradient(0deg,
        color-mix(in oklab, var(--ink) 90%, transparent),
        color-mix(in oklab, var(--ink) 72%, transparent) 58%,
        transparent);
    }
    .planta__spec { display: flex; flex-wrap: wrap; gap: .15rem .45rem; }
    .planta__spec li { opacity: 1; transform: none; border: 0; padding: 0;
                       font-size: .8rem; line-height: 1.35; }
    /* o primeiro item ("01 quarto e 01 banheiro social") repete o título que
       vem logo abaixo do card: no celular ele sai e a faixa perde uma linha */
    .planta__spec li:first-child { display: none; }
    /* separador no FIM do item: se a linha quebrar, o ponto fica no fim da
       primeira linha em vez de abrir a segunda */
    .planta__spec li:nth-child(2):not(:last-child)::after { content: "·"; margin-inline-start: .45rem; opacity: .6; }
    .planta__reveal { padding-block-start: 2rem; }
    .planta__ver { opacity: 1; transform: none; font-size: .7rem; }
    .planta__badge { font-size: .7rem; }
  }

  .planta__head { display: grid; gap: .35rem; }
  .planta__m2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 200; letter-spacing: -.04em; color: var(--tx-strong); line-height: 1; }
  .planta__m2 small { font-size: max(.4em, .72rem); font-weight: 500; letter-spacing: 0; color: var(--tx-mute); margin-inline-start: .35em; }
  .planta--hi .fig { box-shadow: 0 0 0 1px var(--ember); }

  /* faixa de disponibilidade — uma linha, no fim da seção */
  .dispo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem 2rem;
    margin-block-start: clamp(1.6rem, 3.5vw, 2.6rem);
    padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.8rem);
    background: var(--ink); color: var(--tx-on-dark-mute);
  }
  .dispo__t { font-size: .9rem; line-height: 1.5; max-inline-size: 68ch; }
  .dispo__t b { color: var(--white); font-weight: 600; }
  @media (max-width: 40rem) { .dispo .btn { inline-size: 100%; justify-content: center; } }

  /* ============ LOCALIZAÇÃO ============ */
  .orbit { display: grid; grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  @media (max-width: 62rem) {
    .orbit { grid-template-columns: minmax(0,1fr); }
  }

  /* ---------- LEGIBILIDADE NO CELULAR ----------
     No desktop estes blocos são texto de apoio e o tamanho menor cria
     hierarquia. Num aparelho na mão, a mesma redução vira esforço de
     leitura — sobretudo a lista do edifício e a legenda das plantas,
     que é onde o interessado procura cômodo e medida. Só sobe o piso;
     a proporção com os títulos continua a mesma. */
  @media (max-width: 55rem) {
    .hsec__aside p { font-size: .95rem; }
    .tower__items  { font-size: .95rem; line-height: 1.55; }
    .plano__leg li { font-size: .92rem; }
    .plano__ori    { font-size: .82rem; }
  }

  /* ---- MAPA ----
     Desenhado de dados do OpenStreetMap por tools/build_map.py: posição
     geográfica real de cada ponto. O fundo (ruas, anéis, escala) é um SVG
     externo carregado sob demanda; os pinos ficam inline para responder
     aos cartões. Os dois dividem o mesmo viewBox e se sobrepõem. */
  .orbit__viz {
    position: relative; inline-size: 100%; aspect-ratio: 1000 / 1043;
    border: 1px solid var(--rule);
    background: color-mix(in oklab, var(--white) 3%, transparent);
    overflow: clip;
  }
  .mapa__base, .mapa__pinos { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
  .mapa__alvo { fill: transparent; pointer-events: all; }
  .orbit__dot { cursor: pointer; }
  .mapa__pino {
    fill: var(--ink); stroke: color-mix(in oklab, var(--white) 88%, transparent); stroke-width: 5;
    transition: fill .3s var(--ease-out), stroke .3s var(--ease-out);
  }
  .mapa__nome, .mapa__fora text, .mapa__vg text {
    font-family: var(--f-sans); font-weight: 600; font-size: 31px;
    fill: color-mix(in oklab, var(--white) 82%, transparent);
    /* contorno na cor do fundo: o nome continua legível passando sobre ruas */
    paint-order: stroke; stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round;
    pointer-events: none;
  }
  .mapa__vg circle:first-child { fill: color-mix(in oklab, var(--white) 14%, transparent); }
  .mapa__vg circle + circle { fill: var(--white); }
  .mapa__vg text { font-size: 36px; font-weight: 700; fill: var(--white); letter-spacing: .04em; }
  .mapa__fora path { fill: none; stroke: color-mix(in oklab, var(--white) 70%, transparent); stroke-width: 5;
                     stroke-linecap: round; stroke-linejoin: round; }
  .mapa__rua { fill: none; stroke: transparent; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
               transition: stroke .3s var(--ease-out); pointer-events: none; }
  /* ativo = laranja: o pino e o cartão são clicáveis e acendem juntos */
  .orbit__dot.is-on .mapa__pino { fill: var(--ember-open); stroke: var(--white); }
  .orbit__dot.is-on .mapa__nome, .mapa__fora.is-on text { fill: var(--white); }
  .mapa__fora.is-on path { stroke: var(--ember-open); }
  .mapa__rua.is-on { stroke: color-mix(in oklab, var(--ember-open) 85%, transparent); }
  @media (max-width: 40rem) {
    /* o mapa encolhe junto com a tela: no celular o tipo sobe para não
       cair abaixo de ~11px */
    .mapa__nome, .mapa__fora text { font-size: 38px; }
    .mapa__vg text { font-size: 42px; }
  }

  .orbit__list { display: grid; list-style: none; padding: 0; margin: 0;
                 grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); }
  @media (max-width: 40rem) { .orbit__list { grid-template-columns: minmax(0,1fr); } }
  .orbit__list li {
    display: grid; gap: .18rem; padding-block: clamp(.7rem, 1.6vw, 1rem);
    border-block-start: 1px solid var(--rule);
    transition: padding-inline-start .4s var(--ease-out);
    cursor: default;
  }
  .orbit__list li.is-on { padding-inline-start: .6rem; }
  .orbit__d { font-size: clamp(1.25rem, 1rem + 1.3vw, 1.85rem); font-weight: 200; letter-spacing: -.04em; color: var(--tx-strong); line-height: 1; }
  .orbit__l { font-size: .84rem; color: var(--tx-mute); }
  .orbit__t { font-size: .72rem; letter-spacing: .08em; color: var(--ember-tx); font-weight: 600; }

  .iconrail {
    display: flex; gap: clamp(1rem, 2.4vw, 2rem);
    overflow-x: auto; scrollbar-width: none;
    list-style: none; padding: 0; margin-block-start: clamp(2rem, 5vw, 3.5rem);
    border-block-start: 1px solid var(--rule); padding-block-start: clamp(1.5rem, 3vw, 2.2rem);
  }
  .iconrail::-webkit-scrollbar { display: none; }
  /* sem conter, o swipe que chega ao fim do trilho vira gesto de "voltar"
     no iOS e o visitante perde a página. Os trilhos .hs já contêm. */
  .iconrail { overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .iconrail li { scroll-snap-align: start; }
  .iconrail li { flex: 0 0 auto; inline-size: 11rem; display: grid; gap: .35rem; align-content: start; }
  .iconrail svg { inline-size: 1.6rem; block-size: 1.6rem; fill: none; stroke: var(--tx-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; margin-block-end: .35rem; }
  .iconrail b { font-size: .9rem; font-weight: 500; color: var(--tx-strong); }
  .iconrail span { font-size: .78rem; color: var(--tx-mute); }

  /* ============ POR QUE AGORA ============ */
  /* Ícones em tom de texto, não em laranja: são informação, e na página o
     laranja é reservado para o que recebe clique. */
  .ico { display: block; fill: none; stroke: var(--tx-strong); stroke-width: 1.7;
         stroke-linecap: round; stroke-linejoin: round; block-size: auto; }

  .avenida { display: grid; gap: 1rem; margin-block-end: var(--gap); }
  .avenida__lista { list-style: none; margin: 0; padding: 0;
                    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .avenida__i { display: grid; justify-items: start; align-content: start; gap: 1rem;
                padding: clamp(1.3rem, 2.6vw, 2rem); border: 1px solid var(--rule);
                background: color-mix(in oklab, var(--tx-strong) 3%, transparent); }
  .avenida__i .ico { inline-size: clamp(3.2rem, 2.4rem + 2.6vw, 4.6rem); }
  .avenida__i b { font-size: clamp(1.02rem, .92rem + .45vw, 1.28rem); font-weight: 600;
                  line-height: 1.2; color: var(--tx-strong); }

  .agora__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap); align-items: stretch;
  }
  .vcard { display: grid; gap: .8rem; align-content: start;
           padding: clamp(1.3rem, 2.6vw, 2rem); border: 1px solid var(--rule); }
  .ico--card { inline-size: clamp(3rem, 2.4rem + 1.8vw, 4rem); margin-block-end: .4rem; }
  .ico--sm { inline-size: 2.2rem; }

  .checks { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .6rem; }
  .checks li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem;
               color: var(--tx-body); line-height: 1.45; }
  .checks li::before { content: ""; inline-size: 1.05rem; block-size: .55rem; margin-block-start: .35em;
                       border: solid var(--tx-strong); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }

  .vocacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-block-start: .3rem; }
  .vocacao__i { display: grid; gap: .45rem; align-content: start; padding: 1rem;
                background: color-mix(in oklab, var(--tx-strong) 5%, transparent); }
  .vocacao__i b { font-weight: 600; color: var(--tx-strong); line-height: 1.25; }
  .vocacao__i span { font-size: .88rem; color: var(--tx-mute); line-height: 1.4; }

  .cenario { grid-column: 1 / -1;
             padding: clamp(1.3rem, 2.6vw, 2rem);
             border: 1px solid var(--rule);
             background: color-mix(in oklab, var(--tx-strong) 3%, transparent);
             display: grid; gap: 1.3rem; align-content: start; }
  .cenario__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .6rem 1.5rem; }
  .cenario__taxa { margin: 0; font-size: .82rem; color: var(--tx-mute); }
  .cenario__taxa b { margin-inline-start: .35em; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
                     font-weight: 300; letter-spacing: -.03em; color: var(--tx-strong); }
  .cenario__graf { display: grid; gap: .8rem; }
  .cenario__barra { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: 1rem; }
  /* largura em escala real: --v é o valor dividido pelo maior */
  .cenario__bar { display: flex; align-items: center; inline-size: calc(var(--v) * 100%);
                  min-block-size: clamp(2.8rem, 2.2rem + 1.8vw, 3.8rem); padding-inline: 1rem;
                  background: color-mix(in oklab, var(--tx-strong) 14%, transparent); }
  .cenario__bar strong { font-size: clamp(1.15rem, .95rem + .9vw, 1.7rem); font-weight: 300;
                         letter-spacing: -.03em; line-height: 1; color: var(--tx-strong); white-space: nowrap; }
  .cenario__bar small { font-size: .55em; font-weight: 500; letter-spacing: 0; }
  .is-peak .cenario__bar { background: var(--ink); }
  .is-peak .cenario__bar strong { color: var(--white); }
  .cenario__note { font-size: .74rem; line-height: 1.6; color: var(--tx-mute);
                   border-block-start: 1px solid var(--rule); padding-block-start: .9rem; }
  .cenario__note b { color: var(--tx-strong); font-weight: 600; }

  @media (max-width: 40rem) {
    .agora__grid { grid-template-columns: minmax(0,1fr); }
    /* três ícones grandes lado a lado ainda cabem: o rótulo é curto */
    .avenida__lista { gap: .5rem; }
    .avenida__i { justify-items: center; text-align: center; padding: 1rem .5rem; gap: .7rem; }
    .avenida__i .ico { inline-size: 2.9rem; }
    .avenida__i b { font-size: .86rem; }
    .vocacao__i { padding: .85rem; }
    .cenario__barra { grid-template-columns: 2.9rem minmax(0, 1fr); gap: .7rem; }
    .cenario__bar { padding-inline: .8rem; }
  }

  /* ============ CTA FINAL ============ */
  .fale { position: relative; padding-block: clamp(4rem, 2rem + 7vw, 8rem); background: var(--ink);
          color: var(--tx-on-dark-mute); isolation: isolate;
          --tx-strong: var(--white); --tx-mute: var(--tx-on-dark-mute); --rule: var(--rule-dark);
          --ember-tx: var(--ember-open); }
  .fale__bg { position: absolute; inset: 0; z-index: -1; overflow: clip; }
  .fale__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; opacity: .28; filter: grayscale(.35); }
  .fale__bg::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, var(--ink) 26%, color-mix(in oklab, var(--ink) 76%, transparent) 64%, color-mix(in oklab, var(--ink) 46%, transparent)); }
  .fale__in { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,25rem); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  @media (max-width: 62rem) { .fale__in { grid-template-columns: minmax(0,1fr); } }
  .fale__txt { display: grid; gap: 1.1rem; align-content: start; }
  .fale__txt .h2 { max-inline-size: 16ch; }
  .fale__pts { display: grid; padding-block-start: .4rem; }
  .fale__pts li { padding-block: .62rem; border-block-start: 1px solid var(--rule); font-size: .88rem; }
  .fale__pts li:last-child { border-block-end: 1px solid var(--rule); }
  .fale__pts b { color: var(--white); font-weight: 600; }
  .fale__direct { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-block-start: .4rem; }
  .fale__form { padding: clamp(1.4rem, 3vw, 2.2rem);
                background: color-mix(in oklab, var(--white) 6%, transparent);
                border: 1px solid var(--rule); backdrop-filter: blur(8px); }
  .fale__form .btn { justify-content: center; margin-block-start: .4rem; }

  /* ============ RODAPÉ ============ */
  .foot { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.8rem, 3vw, 2.5rem); border-block-start: 1px solid var(--rule); }
  .foot__top { display: grid; grid-template-columns: minmax(0,1.2fr) repeat(3, minmax(0,1fr));
               gap: clamp(1.6rem, 3.5vw, 2.6rem); padding-block-end: clamp(1.8rem, 3.5vw, 2.6rem); }
  @media (max-width: 62rem) { .foot__top { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 40rem) { .foot__top { grid-template-columns: minmax(0,1fr); } }
  .foot__col, .foot__brand { display: grid; gap: .7rem; align-content: start; font-size: .84rem; line-height: 1.6; }
  .foot__col b { color: var(--tx-strong); font-weight: 600; }
  /* o amarelo do logo competia com o laranja da marca do empreendimento;
     em PB ele se comporta como assinatura, não como segundo destaque. */
  .foot__logo { inline-size: min(100%, 14rem); block-size: auto;
                filter: grayscale(1) brightness(1.08); }
  .foot__legal { font-size: .7rem; line-height: 1.6; color: color-mix(in oklab, var(--tx-on-dark-mute) 88%, transparent);
                 border-block-start: 1px solid var(--rule); padding-block-start: 1.3rem; max-inline-size: 96ch; }

  /* ============================================================
     AJUSTES DE CELULAR QUE PRECISAM VENCER A CASCATA
     As declarações base destes componentes aparecem depois dos blocos
     de media query acima. Com a mesma especificidade, quem vem por
     último vence — então estes overrides moram aqui, no fim do layer.
     ============================================================ */
  @media (max-width: 62rem) {
    /* A imagem do Lazer vem antes da lista. Sem sticky, tocar do 8º item
       em diante troca uma foto que já saiu da tela — 5 dos 12 ambientes,
       entre eles pet care, lavanderia e locker, que são justamente os
       que fecham venda para quem compra de 30 a 46 m². */
    .picker__stage { position: sticky; inset-block-start: var(--nav-h); z-index: 2; }

    /* ---- LOCALIZAÇÃO EM DUAS COLUNAS ----
       Em coluna única a lista empurrava o diagrama para fora da tela e a
       relação entre os dois se perdia: o gráfico acende um ponto que o
       visitante não vê mais. Duas colunas de cartões trazem os seis
       destinos e o diagrama para o mesmo campo de visão. */
    .orbit__list { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
    .orbit__list li {
      border-block-start: 0;
      border: 1px solid var(--rule);
      padding: .6rem .7rem;
      min-block-size: 3.5rem;
      align-content: center;
      cursor: pointer;
      transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
    }
    /* o deslocamento do hover não faz sentido num cartão com borda */
    .orbit__list li.is-on {
      padding-inline-start: .7rem;
      border-color: var(--ember-tx);
      background: color-mix(in oklab, var(--ember-tx) 12%, transparent);
    }
    .orbit__d { font-size: 1.05rem; }
    .orbit__l { font-size: .74rem; }
    .orbit__t { font-size: .7rem; }

    /* ---- RESPIRO ENTRE CABEÇALHO E TRILHO ----
       Eram 26px entre a seta de navegação (agora com 44px) e a primeira
       imagem: as duas coisas se encostavam. */
    .hsec__head { padding-block-end: 2.4rem; }
  }
}