/* Chapter28 Residence : identidade local
   Mantém o esqueleto do styles.css (Scenario design system) e veste com a paleta
   da marca DO EMPREENDIMENTO (color-pick por pixel no book oficial) + a camada de
   interação do ÚNICCO: textura grain, marquee, molduras com hover-zoom e reveal
   on-scroll. Tudo escopado em body.chapter-28.

   PALETA (book do Chapter28, lida por pixel):
     bordô/marrom-vinho #3b201f  = cor do logotipo "Chapter28 RESIDENCE" (capa, p.1)
     carmim             #b7172f  = cor das headlines e das réguas do book (p.2, 8, 12...)
     creme              #f2efe8  = fundo de todas as páginas editoriais (p.2, 44)
   O navy #2b388f é da MARCA-MÃE Grupo Pugen (p.44), não do produto: NÃO usar como
   cor da LP. Aqui o bordô ocupa o slot --navy (seções escuras/ink) e o carmim o
   slot --champagne (acento), que é como a base distribui as variáveis.

   OBS de produto: torre vertical única ENTREGUE (pronto para morar) na Rua Moacir,
   2554, Centro de Capão da Canoa/RS. Status confirmado pelo dono (16/07/2026): o
   book é peça de lançamento (mar/2024) e não declara "pronto"; a tabela declara
   "Previsão de entrega Março/2026" e está vigente em julho/2026. Preço via tabela
   oficial 2026-07 (governado pelo master, nunca aqui). Imagens = perspectivas de
   lançamento (não há foto real do prédio pronto no material; decisão do dono).
*/

body.chapter-28 {
  /* Paleta Chapter28 (color-pick por pixel, Book Digital Chapter.pdf p.1, 2 e 44) */
  --navy:        #3B201F;
  --navy-2:      #58322F;
  --navy-deep:   #2A1615;
  --champagne:   #B7172F;
  --champagne-2: #D8465C;
  --champagne-deep: #8C0F22;
  --bg:          #F2EFE8;
  --bg-deep:     #E7E2D7;
  --paper:       #FAF8F3;
  --ink:         var(--navy);
  --ink-2:       var(--navy-2);
  --muted:       #6E5A54;
  --line:        rgba(59, 32, 31, 0.16);
  --line-2:      rgba(59, 32, 31, 0.08);
  --wood:        var(--champagne);

  background: var(--bg);
  color: var(--ink);
}

/* ACENTO NAS SEÇÕES ESCURAS. O book é 100% creme: o carmim #b7172f é acento de
   headline SOBRE CLARO e não tem contraste sobre o bordô. Nas seções escuras o
   acento vira o mesmo carmim clareado (rosé), que é o par legível do bordô.
   Como as variáveis são herdadas, tudo que usa var(--champagne*) dentro delas
   (lead, h-section, botões, régua do secnav) se ajusta sozinho. */
body.chapter-28 .top,
body.chapter-28 .hero,
body.chapter-28 .club,
body.chapter-28 .location,
body.chapter-28 .contato,
body.chapter-28 footer,
body.chapter-28 .cd-scta,
body.chapter-28 #cd-consent,
body.chapter-28 .cd-prefs {
  --champagne:      #E9A79B;
  --champagne-2:    #F4CFC7;
  --champagne-deep: #C97A6C;
}

/* ============================================================
   GRAIN : textura sutil de ruído (do ÚNICCO) sobre seções escuras
   ============================================================ */
body.chapter-28 .grain { position: relative; overflow: hidden; }
body.chapter-28 .grain::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body.chapter-28 .grain > .container,
body.chapter-28 .contato.grain .contato-inner,
body.chapter-28 footer.grain .row,
body.chapter-28 footer.grain .legal { position: relative; z-index: 2; }
body.chapter-28 .hero.grain .stack,
body.chapter-28 .hero.grain .top-meta,
body.chapter-28 .hero.grain .scroll-cue { position: relative; z-index: 2; }

/* ============================================================
   HERO : perspectiva do acesso (16:9 nativo), scrim bordô
   ============================================================ */
body.chapter-28 .hero.empreendimento { min-height: 92vh; min-height: 92svh; }
/* a perspectiva do acesso é diurna e MUITO clara (céu azul + fachada branca):
   o scrim padrão (que só escurece o rodapé) deixaria o h1 sem contraste. Aqui ele
   cobre a altura inteira, com peso decrescente. */
body.chapter-28 .hero.empreendimento .scrim {
  background: linear-gradient(to top,
    rgba(42,22,21,.90) 0%, rgba(42,22,21,.80) 18%, rgba(42,22,21,.66) 38%,
    rgba(42,22,21,.52) 58%, rgba(42,22,21,.42) 78%, rgba(42,22,21,.38) 100%);
}
body.chapter-28 .hero .stack .eyebrow { color: var(--champagne-2); letter-spacing: 0.34em; }
body.chapter-28 .hero h1 em { font-style: italic; color: var(--champagne-2); }

/* ============================================================
   MARQUEE : faixa de diferenciais rolando (do ÚNICCO)
   ============================================================ */
body.chapter-28 .gl-marquee {
  background: var(--navy);
  color: #EFD9D0;
  border-top: 1px solid rgba(183, 23, 47, 0.3);
  border-bottom: 1px solid rgba(183, 23, 47, 0.3);
  overflow: hidden;
  padding: 16px 0;
  position: relative;
}
body.chapter-28 .gl-marquee .track {
  display: inline-flex; align-items: center; gap: 26px;
  white-space: nowrap;
  will-change: transform;
  animation: ch28-marquee 40s linear infinite;
}
body.chapter-28 .gl-marquee span {
  font-family: var(--sans); font-weight: 300;
  font-size: 13px; letter-spacing: 0.26em; text-transform: uppercase;
}
body.chapter-28 .gl-marquee .dot { color: var(--champagne-2); opacity: 0.9; }
@keyframes ch28-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.chapter-28 .gl-marquee .track { animation: none; }
}

/* ============================================================
   MOLDURAS COM HOVER-ZOOM
   ============================================================ */
body.chapter-28 .gl-figrow {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: clamp(32px, 4vw, 56px);
}
body.chapter-28 .frame {
  position: relative; overflow: hidden; margin: 0;
  background: var(--bg-deep);
  aspect-ratio: 4/3; cursor: zoom-in;
}
body.chapter-28 .frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.6,.2,1);
}
body.chapter-28 .frame:hover img { transform: scale(1.06); }
body.chapter-28 .frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(42,22,21,0.78) 100%);
  opacity: 0; transition: opacity .4s ease; pointer-events: none;
}
body.chapter-28 .frame:hover::after { opacity: 1; }
body.chapter-28 .frame figcaption {
  position: absolute; left: 20px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  color: var(--paper);
  transform: translateY(8px); opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
}
body.chapter-28 .frame:hover figcaption { transform: none; opacity: 1; }
body.chapter-28 .frame figcaption .s {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.85;
}
body.chapter-28 .frame figcaption .n {
  font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.1;
}

/* CONCEITO : a fachada do book é RETRATO 4:5 (gotcha do caso Anita: moldura larga
   corta a torre). Ela manda na altura da linha; o hall (paisagem) acompanha com
   height:100% no lugar de aspect-ratio. */
body.chapter-28 .gl-figrow.mix {
  grid-template-columns: 0.78fr 1.22fr;
  align-items: stretch;
}
body.chapter-28 .frame.retrato { aspect-ratio: 4/5; }
body.chapter-28 .frame.alto { aspect-ratio: auto; height: 100%; min-height: 0; }
@media (max-width: 760px) {
  body.chapter-28 .gl-figrow,
  body.chapter-28 .gl-figrow.mix { grid-template-columns: 1fr; }
  body.chapter-28 .frame.alto { aspect-ratio: 4/3; height: auto; }
  body.chapter-28 .frame figcaption { opacity: 1; transform: none; }
}

/* LOCALIZAÇÃO : a fotomontagem aérea é 16:9 nativo, moldura larga full-bleed */
body.chapter-28 .frame.aerea {
  aspect-ratio: 16/9;
  margin-top: clamp(32px, 4vw, 56px);
}
@media (max-width: 560px) {
  body.chapter-28 .frame.aerea { aspect-ratio: 4/3; }
  body.chapter-28 .frame.aerea img { object-position: center 40%; }
}

/* ============================================================
   BENTO DO ROOFTOP : 6 células (a base assume exatamente 6 spans c1..c6)
   ============================================================ */
body.chapter-28 .club-grid .cell,
body.chapter-28 .esp-grid .cell {
  transition: transform .6s cubic-bezier(.2,.6,.2,1), filter .5s ease;
}
body.chapter-28 .club-grid .cell:hover,
body.chapter-28 .esp-grid .cell:hover { transform: scale(1.012); filter: brightness(1.04); }
body.chapter-28 .club-grid .cell .cap,
body.chapter-28 .esp-grid .cell .cap {
  transform: translateY(6px); opacity: 0.92;
  transition: transform .4s ease, opacity .4s ease;
}
body.chapter-28 .club-grid .cell:hover .cap,
body.chapter-28 .esp-grid .cell:hover .cap { transform: none; opacity: 1; }
/* o janelão da academia é o assunto da imagem: puxa o crop pro alto */
body.chapter-28 .club-grid .cell.c6 .cell-img { object-position: center 35%; }

/* ============================================================
   APARTAMENTOS : painel único com o living 21:9 nativo (o único arquivo do
   material no aspect da moldura larga)
   ============================================================ */
body.chapter-28 .esp-grid.solo { grid-template-columns: 1fr; }
body.chapter-28 .esp-grid.solo .cell { aspect-ratio: 21/9; }
@media (max-width: 760px) {
  body.chapter-28 .esp-grid.solo .cell { aspect-ratio: 4/3; }
}

/* ============================================================
   PLANTAS : o raster foi achatado no hex da seção (--bg #f2efe8), padrão de
   planta arquitetônica da casa , nada de placa branca destoando.
   ============================================================ */
body.chapter-28 .plantas-nota-metrica {
  margin: clamp(28px, 3vw, 40px) 0 0;
  max-width: 78ch;
  padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.7; color: var(--muted);
}

/* ============================================================
   LOCALIZAÇÃO : lista numerada + mapa embaixo (o .map-embed da base já ocupa
   a linha inteira do grid)
   ============================================================ */
body.chapter-28 .loc-grid.loc-grid-solo { grid-template-columns: 1fr; }

/* ============================================================
   COMERCIALIZAÇÃO : CTA band
   ============================================================ */
body.chapter-28 .gl-cta-band {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 28px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
/* botão sólido SOBRE CLARO: carmim com texto creme (a base pinta o texto de
   var(--navy), que aqui é bordô: dois escuros um sobre o outro). Nas seções
   escuras o botão segue a base, com o carmim clareado do bloco de acento acima. */
body.chapter-28 .gl-cta-band .btn.solid,
body.chapter-28 .gl-cta-band .btn.solid:hover {
  background: var(--champagne); color: var(--paper); border-color: var(--champagne);
}
body.chapter-28 .gl-cta-band .btn.solid:hover { background: var(--champagne-deep); border-color: var(--champagne-deep); }
body.chapter-28 .gl-cta-band p {
  margin: 0; max-width: 56ch;
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
}
@media (max-width: 760px) {
  body.chapter-28 .gl-cta-band { grid-template-columns: 1fr; }
}

/* ============================================================
   BRAND : selo da marca-mãe Costa Dorata sobre o bordô do empreendimento
   ============================================================ */
body.chapter-28 .top .brand .selo,
body.chapter-28 footer .brand-foot .selo {
  background: #1c2b3c url("../../assets/selo-cd.webp") center/84% no-repeat;
  border-radius: 50%; border: none; clip-path: none;
  box-shadow: 0 0 0 1px rgba(183, 23, 47, 0.4);
}
body.chapter-28 .top .brand .selo::before,
body.chapter-28 footer .brand-foot .selo::before { content: none; }

body.chapter-28 footer { background: var(--navy-deep); }
body.chapter-28 footer .brand-foot small { color: var(--champagne-2); }

/* contato : imagem de fundo (piscina do rooftop, com o mar no horizonte) */
body.chapter-28 .contato .bg {
  background: url("assets/piscina.webp") center 42%/cover no-repeat;
  transform: scale(1.04);
}

/* CD-CONTATO-BG:start , gerado por scripts/build_contato_bg.py, nao edite a mao */
@media (max-width: 480px) and (max-resolution: 1.99dppx) { body.chapter-28 .contato .bg { background-image: url("assets/piscina-480.webp"); } }
@media (max-width: 480px) and (min-resolution: 2dppx) { body.chapter-28 .contato .bg { background-image: url("assets/piscina-960.webp"); } }
@media (min-width: 481px) and (max-width: 760px) { body.chapter-28 .contato .bg { background-image: url("assets/piscina-960.webp"); } }
/* CD-CONTATO-BG:end */

/* CD-FRAME-MAP:start , gerado por scripts/build_frame_map.py, nao edite a mao */
/* CD-FRAME-MAP:end */