/* Éclissée: luz controlada, a cortina que desce (LEITURA.md). Branco de mármore, cinza de pedra, preto de tecido. */
:root {
  --fundo: #f6f6f4; --pedra: #ebe9e5; --tinta: #171615; --suave: #57534e; --marca: #141414; --marca-2: #b8a08c; --taupe: #74635a;
  --linha: #d6d2cc; --cartao: #ffffff; --tecido: #141414; --raio: 2px;
  --alu: linear-gradient(180deg, #ececea 0%, #c4c4c1 45%, #9a9a97 100%);
  --fonte-titulo: "Epilogue", system-ui, sans-serif; --fonte-texto: "Golos Text", system-ui, sans-serif; --fonte-marca: "Cinzel", Georgia, serif;
}
body { background: var(--fundo); }
.rotulo { font: 600 .78rem/1.2 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); margin: 0 0 1rem; }
h2 { font-weight: 600; font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -.03em; }
.botao { --b-fundo: var(--marca); border-radius: var(--raio); font-family: var(--fonte-texto); font-weight: 600; letter-spacing: .01em; min-height: 48px; }
.botao--claro { --b-fundo: #fff; --b-tinta: var(--tecido); }

/* logotipo da marca (Cinzel espaçada, como o do site atual) */
.logotipo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--tinta); }
.logotipo__nome { font: 400 1.32rem/1 var(--fonte-marca); letter-spacing: .42em; text-transform: uppercase; margin-right: -.42em; }
.logotipo__sub { font: 500 12px/1 var(--fonte-texto); letter-spacing: .26em; text-transform: uppercase; color: var(--taupe); margin-top: .5em; margin-right: -.26em; }

/* tubo de alumínio da cortina */
.tubo { display: block; height: 10px; border-radius: 5px; background: var(--alu); box-shadow: 0 2px 3px rgb(0 0 0 / .18); position: relative; z-index: 2; }
.tubo--grosso { height: 16px; border-radius: 8px; }

/* cabeçalho */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); }
.topo__linha { display: flex; align-items: center; gap: 2rem; min-height: 72px; }
.topo__marca { display: inline-flex; padding: 8px 0; }
.topo__nav { display: flex; gap: 1.6rem; margin-left: auto; font-weight: 500; font-size: .95rem; }
.topo__nav a { padding: 12px 0; border-bottom: 1px solid transparent; }
.topo__nav a:hover { border-color: currentColor; }
.topo__cta { padding: .8em 1.2em; }

/* hero */
.abre { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px); }
.abre__texto { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.abre h1 { font-weight: 600; font-size: clamp(42px, 6.2vw, 98px); letter-spacing: -.045em; line-height: .96; }
.abre__lado { display: grid; gap: 1.4rem; justify-items: start; padding-bottom: .5rem; }
.abre__sub { color: var(--suave); font-size: 1.05rem; }
.janelao { position: relative; aspect-ratio: 21 / 9; background: #cfd3d3; overflow: hidden; }
.janelao__foto { margin: 0; position: absolute; inset: -6% 0; }
.janelao__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.cortina { position: absolute; top: 0; right: 4%; width: 33%; height: 100%; display: flex; flex-direction: column; z-index: 2; }
.cortina__vao { flex: 1; overflow: hidden; margin: 0 6px; }
.cortina__pano { --desce: 0; height: 88%; background: var(--tecido); color: #f3f1ee; display: flex; flex-direction: column; padding: clamp(18px, 2.2vw, 34px) clamp(18px, 2.2vw, 34px) 0; transform: translateY(calc(var(--desce) * -100%)); box-shadow: 0 18px 30px -18px rgb(0 0 0 / .6); background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 5px); }
.cortina__rotulo { font: 600 .78rem/1 var(--fonte-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--marca-2); margin-bottom: 1rem; }
.cortina__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.cortina__lista a { display: block; padding: .8rem 0; border-top: 1px solid rgb(255 255 255 / .16); font: 500 clamp(15px, 1.35vw, 21px)/1.25 var(--fonte-titulo); letter-spacing: -.01em; min-height: 44px; }
.cortina__lista a:hover { color: var(--marca-2); }
.cortina__barra { margin: auto calc(-1 * clamp(18px, 2.2vw, 34px)) 0; padding: .55rem clamp(18px, 2.2vw, 34px); background: var(--alu); color: #2b2a28; display: flex; justify-content: space-between; gap: .6rem; font: 600 .8rem/1.3 var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 0 rgb(255 255 255 / .6); min-height: 44px; align-items: center; }
.cortina__barra:hover { text-decoration: underline; text-underline-offset: 3px; }
.cortina__cordao { position: absolute; right: -10px; top: 8px; width: 1px; height: 56%; background: rgb(255 255 255 / .7); }
.cortina__cordao::after { content: ""; position: absolute; left: -3px; bottom: -6px; width: 7px; height: 7px; border-radius: 50%; background: #e9e7e3; }
html[data-nivel="4"] .cortina__pano, html[data-nivel="5"] .cortina__pano { transition: transform 1.5s cubic-bezier(.65,.02,.25,1) .35s; }
html.js-cortina .cortina:not(.descida) .cortina__pano { --desce: .62; }

/* dor e cadeia em escada */
.dor { padding: clamp(64px, 9vw, 140px) 0; border-top: 1px solid var(--linha); }
.dor__titulo { max-width: 15ch; margin-bottom: clamp(36px, 5vw, 72px); }
.cadeia { font: 500 clamp(22px, 2.5vw, 38px)/1.2 var(--fonte-titulo); letter-spacing: -.02em; display: grid; gap: .5em; }
.cadeia__linha { white-space: nowrap; margin-left: calc(var(--x, 0) * 1px); }
.cadeia__linha:nth-child(2) { --x-padrao: 2; } .cadeia__linha:nth-child(3) { --x-padrao: 4; }
.cadeia b { font-weight: 700; }
.cadeia__elo { position: relative; }
.cadeia__elo::after { content: ""; position: absolute; left: 0; right: .2em; bottom: -.16em; height: 3px; background: var(--tecido); }
.cadeia__linha:last-child .cadeia__elo::after { background: var(--marca-2); }
.dor__nota { margin-top: clamp(40px, 5vw, 64px); max-width: 52ch; color: var(--suave); }

/* locação */
.locacao { background: var(--pedra); padding: clamp(64px, 8vw, 128px) 0; }
.cabeca { margin-bottom: clamp(32px, 4vw, 56px); max-width: 860px; }
.janelas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.janela { display: grid; align-content: start; gap: .8rem; }
.janela__svg { width: 100%; max-width: 230px; }
.janela h3 { font-weight: 600; font-size: clamp(18px, 1.5vw, 23px); letter-spacing: -.02em; line-height: 1.15; min-height: 2.3em; }
.janela__link { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; font-size: .92rem; min-height: 44px; border-bottom: 1px solid var(--linha); justify-self: start; }
.janela__link svg { width: 1.1em; height: 1.1em; }
.janela__link:hover { border-color: currentColor; }
.locacao__pe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(56px, 7vw, 104px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--linha); }
.linhas { list-style: none; margin: 0; padding: 0; }
.linhas li { padding: .85rem 0; border-bottom: 1px solid var(--linha); font-weight: 500; }
.profissoes { font: 500 clamp(22px, 2.3vw, 34px)/1.35 var(--fonte-titulo); letter-spacing: -.02em; margin: 0; }
.profissoes span:not(:last-child)::after { content: " ·"; color: var(--marca-2); }
.profissoes__fim { color: var(--suave); margin-top: .8rem; }

/* consultórios */
.consultorios { padding: clamp(64px, 8vw, 128px) 0; }
.sala { margin-top: clamp(48px, 6vw, 96px); }
.sala__faixa { position: relative; }
.sala__faixa .tubo { margin: 0 -6px; }
.sala__tecido { background: var(--tecido); color: #f3f1ee; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: clamp(22px, 3vw, 44px) clamp(20px, 3vw, 48px); margin: 0 4px; transform-origin: 50% 0; background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 5px); }
.sala__tecido h3 { font-weight: 600; font-size: clamp(30px, 4vw, 60px); letter-spacing: -.04em; }
html.js-desce [data-desce]:not(.descida) .sala__tecido { clip-path: inset(0 0 100% 0); }
html.js-desce [data-desce] .sala__tecido { transition: clip-path 1.1s cubic-bezier(.65,.02,.25,1); clip-path: inset(0 0 0 0); }
.sala__corpo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); padding: clamp(24px, 3vw, 40px) 4px 0; }
.sala--dir .sala__corpo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sala--dir .sala__midia { order: 2; }
.sala__midia { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: auto 1fr; gap: 10px; align-items: start; }
.foto { display: block; overflow: hidden; background: var(--pedra); }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.foto:hover img { transform: scale(1.03); }
.sala__capa { grid-row: span 2; aspect-ratio: 9 / 16; }
.sala__video { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; color: #fff; }
.sala__video img, .sala__video video { width: 100%; height: 100%; object-fit: cover; }
.sala__play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1rem; background: var(--tecido); font-weight: 600; font-size: .9rem; min-height: 44px; }
.sala__play svg { width: 1.1em; height: 1.1em; }
.sala__mais { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.sala__mais .foto { aspect-ratio: 3 / 4; }
.sala__abre { font: 500 clamp(19px, 1.6vw, 24px)/1.4 var(--fonte-titulo); letter-spacing: -.015em; margin-bottom: 2rem; }
.na-sala { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.na-sala li { padding: .8rem 0; border-bottom: 1px solid var(--linha); display: grid; gap: .2rem; }
.na-sala__fundo { padding-left: 1.4rem !important; position: relative; }
.na-sala__fundo::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .7rem; height: .7rem; background: var(--tecido); }
.na-sala__fundo small { color: var(--suave); font-size: .9rem; }

/* estrutura */
.estrutura { background: #fff; padding: clamp(64px, 8vw, 128px) 0; }
.estrutura__cabeca { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); }
.estrutura__cabeca .rotulo { grid-column: 1 / -1; }
.estrutura__cabeca h2 { font-size: clamp(28px, 3vw, 46px); }
.estrutura__texto { display: grid; gap: 1rem; color: var(--suave); align-content: end; }
.estrutura__lista { font-weight: 500; margin-bottom: 1.2rem; }
.galeria { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: 10px; }
.galeria .foto { height: 100%; }
.galeria .g-alta { grid-row: span 2; }
.galeria .g-larga { grid-column: span 2; }
.galeria { grid-auto-flow: dense; }

/* visita: o preto desce de vez */
.visita { position: relative; background: var(--tecido); color: #f3f1ee; padding: 0 0 clamp(64px, 8vw, 120px); background-image: repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 2px, transparent 2px 5px); }
.visita__tubo { border-radius: 0; height: 18px; }
.visita__porta { margin: clamp(40px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); aspect-ratio: 21 / 8; overflow: hidden; }
.visita__porta img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.visita__grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: clamp(28px, 4vw, 64px); }
.visita__chamada { display: grid; gap: 1.2rem; justify-items: start; }
.visita__chamada h2 { color: #fff; max-width: 14ch; }
.visita__chamada p { color: #cfcac4; max-width: 42ch; }
.visita .rotulo { color: var(--marca-2); margin: 0 0 .6rem; }
.visita__dado p { margin-bottom: 1.4rem; color: #e7e3de; }
.visita__dado a[data-wa], .visita__dado a[data-email] { display: inline-block; padding: .35rem 0; }
.visita__link { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 1px solid rgb(255 255 255 / .4); font-weight: 600; }

/* rodapé */
.rodape { background: var(--pedra); padding: 48px 0 calc(48px + env(safe-area-inset-bottom)); font-size: .92rem; color: var(--suave); }
.rodape__in { display: grid; gap: .7rem; justify-items: center; text-align: center; }
.logotipo--rodape { margin-bottom: .8rem; }
.rodape__contato a { display: inline-block; padding: .5rem 0; }
.rodape__miudo { font-size: .8rem; }

@media (max-width: 1100px) {
  .topo__nav { display: none; }
  .topo__cta { margin-left: auto; }
}
@media (max-width: 900px) {
  .abre__texto { grid-template-columns: 1fr; }
  .janelao { aspect-ratio: auto; overflow: visible; background: none; }
  .janelao__foto { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .janelao__foto img { position: absolute; inset: -6% 0; height: 112%; }
  .cortina { position: relative; right: auto; width: auto; height: auto; margin-top: -8px; }
  .cortina__pano { height: auto; transform: none !important; padding-top: 22px; }
  .cortina__lista { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .cortina__cordao { display: none; }
  .janelas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .locacao__pe, .estrutura__cabeca, .visita__grade { grid-template-columns: 1fr; }
  .sala__corpo, .sala--dir .sala__corpo { grid-template-columns: 1fr; }
  .sala--dir .sala__midia { order: 0; }
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .cadeia__linha { white-space: normal; margin-left: calc(var(--x-padrao, 0) * .6em) !important; }
}
@media (max-width: 560px) {
  .topo__cta span { display: none; }
  .topo__cta { width: 48px; height: 48px; padding: 0; }
  .logotipo__nome { font-size: 1.1rem; letter-spacing: .32em; margin-right: -.32em; }
  .logotipo__sub { letter-spacing: .14em; margin-right: -.14em; }
  .cortina__lista { grid-template-columns: 1fr; }
  .sala__midia { grid-template-columns: 1fr 1fr; }
  .sala__capa { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 5; }
  .sala__video { grid-column: 1 / -1; }
  .sala__mais { grid-column: 1 / -1; }
  .sala__tecido { padding: 22px 18px; }
  .cortina__barra { flex-direction: column; align-items: flex-start; gap: 0; padding-block: .6rem; }
  .visita__porta { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .cortina__pano { transition: none !important; transform: none !important; }
  html.js-desce [data-desce] .sala__tecido { clip-path: none !important; transition: none !important; }
}