/* Hotel e Restaurante do Gaúcho: a estadia inteira em uma rolagem */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/playfair-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/playfair-400i-latin.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-700-latin.woff2) format('woff2'); }

:root {
  --marfim: #FAF9F6; --noite: #2C3E50; --noite-2: #1C2835; --verde: #566D29; --vermelho: #D91A1A; --dourado: #C5A880;
  --f-tit: 'Playfair Display', Georgia, serif; --f-txt: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --topo: 72px; --lado: clamp(16px, 5vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; background: var(--marfim); color: var(--noite); font: 400 1.0625rem/1.6 var(--f-txt); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; }

/* ---------- botões ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 28px; border: 2px solid transparent; border-radius: 4px; background: none; font: 700 .8rem/1.1 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s, transform .3s, box-shadow .3s; }
.botao--verde { background: var(--verde); color: #fff; }
.botao--verde:hover { background: var(--vermelho); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(217, 26, 26, .28); }
.botao--linha { border-color: currentColor; }
.botao--linha:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao--cheio { width: 100%; }
.botao svg { width: 22px; height: 22px; flex: none; }

/* ---------- topo ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--topo); display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px, 3vw, 40px); background: var(--marfim); border-bottom: 1px solid rgba(44, 62, 80, .08); }
.topo__logo { flex: none; }
.topo__logo img { width: 170px; height: auto; }
.topo__nav { display: flex; gap: clamp(16px, 2vw, 28px); margin-left: auto; }
.topo__nav a { position: relative; text-decoration: none; font-weight: 700; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.topo__nav a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--vermelho); transition: width .3s; }
.topo__nav a:hover::after { width: 100%; }
.topo__reservar { min-height: 40px; padding: 10px 18px; }
@media (max-width: 1080px) { .topo__nav { display: none; } .topo__reservar { margin-left: auto; } }
@media (max-width: 760px) { :root { --topo: 60px; } .topo__logo img { width: 128px; } }

/* ---------- textos ---------- */
.chapeu { font: 700 .82rem/1.2 var(--f-txt); letter-spacing: .2em; text-transform: uppercase; color: var(--verde); margin-bottom: 14px; }
.chapeu b { font-size: 1.1em; }
.mega { font: 700 clamp(2.6rem, 5.4vw, 5.6rem)/1.02 var(--f-tit); letter-spacing: -.01em; }
.mega span { display: block; }
.mega .l2 { font-style: italic; font-weight: 400; color: var(--verde); }
.titulo { font: 700 clamp(2.2rem, 3.9vw, 3.9rem)/1.08 var(--f-tit); margin-bottom: 18px; }
h3.titulo { font-size: clamp(2rem, 3.2vw, 3.3rem); }
.lead { font-size: clamp(1.15rem, 1.5vw, 1.4rem); margin: 22px 0 30px; max-width: 34em; }
.bloco p + p { margin-top: 12px; }
.nota { font: italic 400 clamp(1.25rem, 1.7vw, 1.6rem)/1.4 var(--f-tit); color: var(--dourado); margin-bottom: 14px; }
.ano { font: 700 clamp(3.4rem, 7vw, 6.4rem)/1 var(--f-tit); color: var(--dourado); margin-bottom: 6px; }
.lista { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 8px; }
.lista li { padding-left: 22px; position: relative; }
.lista li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--dourado); }
.citacao { font: italic 400 clamp(1.4rem, 2.2vw, 2rem)/1.35 var(--f-tit); }
.citacao__cuia { width: 84px; height: 100px; margin-bottom: 18px; }
.vapor { display: none; }

/* ---------- versão parada (sem animação) ---------- */
.cena { position: relative; }
.cena__palco { position: relative; }
.texto { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: calc(var(--topo) + 56px) var(--lado) 40px; }
.bloco + .bloco { margin-top: 44px; }
.estatico { max-width: 1100px; margin: 0 auto; padding: 0 var(--lado) 56px; }
.rolar, .dica, .car, .janela, .elevador { display: none; }
.quarto__acao { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.quarto__acao .botao { min-height: 56px; padding: 16px 30px; font-size: .9rem; }
.quarto__foto { flex: none; width: clamp(120px, 11vw, 160px); aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); background: #ddd; }
.quarto__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.quarto__foto:hover img { transform: scale(1.08); }
.cartao { background: #fff; padding: 8px; border-radius: 10px; box-shadow: 0 16px 36px rgba(28, 40, 53, .22); }
.cartao img { border-radius: 6px; }
.cartao figcaption { font: 700 .72rem/1.2 var(--f-txt); letter-spacing: .12em; text-transform: uppercase; color: var(--noite); padding: 10px 4px 2px; }
.cartao[data-grande] { cursor: zoom-in; transition: box-shadow .3s; }
.cartao[data-grande]:hover { box-shadow: 0 20px 44px rgba(28, 40, 53, .35); }
.cartao--fachada img, .m .cartoes .cartao--fachada img { aspect-ratio: 640 / 414; }
.cartoes--fachada { grid-template-columns: minmax(0, 620px); justify-content: center; }
html:not(.m) .so-animado { display: none; }
.cartoes { max-width: 1100px; margin: 0 auto; padding: 0 var(--lado) 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cartoes img { width: 100%; aspect-ratio: 1; object-fit: cover; }
html:not(.m) #historia, html:not(.m) #restaurante { background: var(--noite-2); color: var(--marfim); }
#restaurante .chapeu, #historia .chapeu { color: var(--dourado); }

/* ---------- carregamento ---------- */
.intro .car { display: flex; position: fixed; inset: 0; z-index: 100; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--marfim); animation: car-fim 0s linear 5.5s forwards; }
@keyframes car-fim { to { opacity: 0; visibility: hidden; } }
.car.sai { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.car__predio { width: min(320px, 72vw); height: auto; overflow: visible; }
.car__linha { fill: none; stroke: var(--noite); stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: car-linha 1s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes car-linha { to { stroke-dashoffset: 0; } }
.car__jan { fill: var(--dourado); opacity: 0; animation: car-jan .3s ease forwards; animation-delay: calc(.55s + var(--i) * 60ms); }
@keyframes car-jan { to { opacity: .9; } }
.car__cuia { opacity: 0; transform: translateY(-190px); }
.car--fim .car__cuia { opacity: 1; transform: none; transition: transform .45s cubic-bezier(.3, 1.45, .55, 1), opacity .2s; }
.car__num { font: 700 1.5rem/1 var(--f-tit); font-variant-numeric: tabular-nums; }
.car__txt { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: #7f8c8d; }

/* ================= com animação (.m) ================= */
.m .estatico, .m .cartoes .cartao:not([data-p]) { display: none; }
.m .janela { display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--marfim); }
.ceu { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.ceu--0 { opacity: 1; background: radial-gradient(circle at 78% 22%, rgba(255, 236, 190, .95) 0 5%, rgba(255, 214, 150, .35) 12%, transparent 30%), linear-gradient(180deg, #EFCB8A 0%, #F4DDB1 38%, #F8EEDD 70%, #FAF9F6 100%); }
.ceu--1 { background: radial-gradient(circle at 80% 58%, rgba(255, 196, 140, .9) 0 4%, rgba(255, 170, 120, .3) 12%, transparent 30%), linear-gradient(180deg, #7F86B0 0%, #C99AA6 40%, #F0BE92 72%, #F7E3CB 100%); }
.ceu--2 { background: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 34% 9%, #fff 50%, transparent), radial-gradient(2px 2px at 58% 22%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 76% 12%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 88% 30%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 22% 36%, #fff 50%, transparent), radial-gradient(circle at 84% 16%, #F4EBD0 0 2.2%, rgba(244, 235, 208, .2) 4%, transparent 9%), linear-gradient(180deg, #111A25 0%, #1C2B3C 50%, #2C3E50 100%); }
.ceu--3 { background: radial-gradient(1.5px 1.5px at 18% 14%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 66% 10%, #fff 50%, transparent), radial-gradient(ellipse at 50% 100%, rgba(217, 80, 40, .55), transparent 60%), linear-gradient(180deg, #121A23 0%, #231F25 55%, #4A2620 100%); }
.ceu--4 { background: radial-gradient(circle at 22% 70%, rgba(255, 226, 170, .95) 0 4%, rgba(255, 210, 150, .35) 12%, transparent 30%), linear-gradient(180deg, #98A6C6 0%, #E3C0B2 42%, #F5DDB4 72%, #FAF3E6 100%); }
.ceu--5 { background: linear-gradient(180deg, #CFE2F0 0%, #E6EFF3 45%, #FAF9F6 100%); }
.ceu--sepia { background: linear-gradient(180deg, #B89D76 0%, #D8C3A0 50%, #EDE1CA 100%); }

.veu { position: absolute; inset: 0 auto 0 0; width: 60vw; pointer-events: none; will-change: opacity; }
.veu--claro { background: linear-gradient(90deg, rgba(250, 249, 246, .92) 0, rgba(250, 249, 246, .78) 50%, rgba(250, 249, 246, 0) 100%); }
.veu--escuro { opacity: 0; background: linear-gradient(90deg, rgba(18, 27, 37, .9) 0, rgba(18, 27, 37, .68) 50%, rgba(18, 27, 37, 0) 100%); }
.palco { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cam { position: absolute; will-change: transform, opacity; }
.cam > img { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; user-select: none; -webkit-user-drag: none; }
.cam > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sil { fill: #121C27; opacity: 0; }
.luz { opacity: 0; }
#c-terreoint, #c-jantar, #c-cafe, #c-terreofx, #c-andar2int, #c-quartos, #c-casa { opacity: 0; visibility: hidden; }
.cam, .cam > img, .cam > svg { pointer-events: none; }
.cam > img.quarto-img { right: auto; bottom: auto; transition: filter .6s ease; }
.quarto-img.apaga { filter: brightness(.38) saturate(.5); }
.q__toque { pointer-events: none; }
.em-quartos .q__toque { pointer-events: all; }
.porta { will-change: transform; }

/* efeitos dos quartos */
.q__toque { fill: transparent; cursor: pointer; outline: none; }
.fx-giro { transform-box: fill-box; transform-origin: 50% 50%; }
.q.apaga .fx-giro { opacity: .3; }
.q.on .fx-giro { animation: giro .45s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.fx-ar path { opacity: 0; }
.q.on .fx-ar path { animation: ar 1.3s ease-in infinite; animation-delay: var(--d); }
@keyframes ar { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(.45px); } }
.fx-tv { opacity: 0; transition: opacity .3s; }
.q.on .fx-tv { opacity: 1; animation: tv 2.4s steps(4) infinite; }
@keyframes tv { 50% { opacity: .82; } }
.fx-bolhas circle { fill: #fff; opacity: 0; }
.q.on .fx-bolhas circle { animation: bolha 1.4s ease-out infinite; animation-delay: var(--d); }
@keyframes bolha { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .95; } 100% { opacity: 0; transform: translateY(-16px) scale(1.1); } }
/* efeitos do térreo */
.fx-brasa circle { fill: #FFB347; opacity: 0; }
.brasa-on .fx-brasa circle { animation: brasa 1.7s ease-out infinite; animation-delay: var(--d); }
@keyframes brasa { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), -46px); } }
.fx-vapor path, .fx-cafe path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.brasa-on .fx-vapor path, .cafe-on .fx-cafe path { animation: vapor 2.6s ease-out infinite; animation-delay: var(--d); }
@keyframes vapor { 0% { opacity: 0; transform: translateY(0); } 35% { opacity: .55; } 100% { opacity: 0; transform: translateY(-28px); } }
.fx-luz { opacity: 0; transition: opacity .8s; }
.brasa-on .fx-luz { opacity: 1; }
/* setas com os pontos fortes do quarto */
.rotulos { position: absolute; inset: 0; pointer-events: none; }
.rotulos__linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rot-linhas line { stroke: var(--noite); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 1.6px #fff) drop-shadow(0 0 1px #fff); }
.rot-linhas { opacity: 0; transition: opacity .25s; }
.rot-linhas.on { opacity: 1; transition: opacity .45s .12s; }
.rot { position: absolute; left: 0; top: 0; will-change: transform; }
.rot b { display: inline-block; padding: 10px 16px; border-radius: 30px; background: var(--noite); color: var(--marfim); font: 700 .92rem/1 var(--f-txt); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .28); border: 2px solid var(--dourado); opacity: 0; transform: scale(.7); transition: opacity .2s, transform .2s; }
.rot--e b { transform-origin: right center; } .rot--d b { transform-origin: left center; }
.rot--e { translate: -100% -50%; } .rot--d { translate: 0 -50%; } .rot--c { translate: -50% 0; }
.rot-grupo.on .rot b { opacity: 1; transform: none; transition: opacity .35s var(--d), transform .45s cubic-bezier(.3, 1.4, .5, 1) var(--d); }

/* painel do elevador */
.m .elevador { display: flex; position: fixed; z-index: 40; left: clamp(12px, 1.8vw, 28px); top: 50%; flex-direction: column; align-items: center; gap: 10px; padding: 14px 9px; border-radius: 16px; background: var(--noite); color: var(--marfim); box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transform: translateY(-50%); }
.m .elevador { transition: opacity .35s; }
.m.fim .elevador, .m.lendo .elevador { opacity: 0; pointer-events: none; }
.elevador__hora { font: 700 .74rem/1 var(--f-txt); letter-spacing: .04em; color: var(--dourado); min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; }
.elevador__andares { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.elevador__andares li { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 700 .95rem/1 var(--f-tit); opacity: .35; transition: opacity .3s, background-color .3s, color .3s; }
.elevador__andares li.on { opacity: 1; background: var(--dourado); color: var(--noite); }
.elevador__cuia { width: 22px; height: 26px; }

/* cenas presas */
.m .cena { height: calc(var(--h) * 1vh); pointer-events: none; background: none; color: inherit; }
.m .cena__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.m .texto { position: absolute; z-index: 2; left: clamp(96px, 8.5vw, 150px); top: var(--topo); bottom: 0; width: min(38vw, 580px); max-width: none; margin: 0; padding: 0; }
.m .bloco { position: absolute; left: 0; right: 0; top: 50%; margin: 0; opacity: 0; visibility: hidden; transform: translate3d(0, -50%, 0); will-change: transform, opacity; }
.m .bloco.ativo { visibility: visible; pointer-events: auto; }
.m .bloco > p:not([class]), .m .lista li { font-size: clamp(1.08rem, 1.3vw, 1.28rem); }
.m [data-tema=noite], .m [data-tema=brasa] { color: var(--marfim); }
.m [data-tema=noite] .chapeu, .m [data-tema=brasa] .chapeu { color: var(--dourado); }
.m [data-tema=noite] .lead, .m [data-tema=brasa] .lead { color: rgba(250, 249, 246, .86); }
.m .mega .l1, .m .mega .l2, .m .bloco--inicio .lead, .m .bloco--inicio .botao { opacity: 0; transform: translateY(26px); }
.m.pronto .mega .l1, .m.pronto .mega .l2, .m.pronto .bloco--inicio .lead, .m.pronto .bloco--inicio .botao { opacity: 1; transform: none; transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.m.pronto .mega .l2 { transition-delay: .25s; }
.m.pronto .bloco--inicio .lead { transition-delay: .45s; }
.m.pronto .bloco--inicio .botao { transition-delay: .6s; }
.m .rolar { display: flex; position: absolute; z-index: 2; left: 50%; bottom: 26px; flex-direction: column; align-items: center; gap: 8px; font: 700 .7rem/1 var(--f-txt); letter-spacing: .2em; text-transform: uppercase; transform: translateX(-50%); }
.m .rolar::after { content: ''; width: 2px; height: 34px; background: linear-gradient(var(--noite), transparent); animation: rolar 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes rolar { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.m .dica { display: block; position: absolute; z-index: 2; right: 96px; bottom: 30px; padding: 10px 16px; border-radius: 30px; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 20px rgba(0, 0, 0, .12); font: 700 .72rem/1 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transition: opacity .4s; }
.em-quartos .m .dica, .m.em-quartos .dica { opacity: 1; }
.m .cartoes { position: absolute; inset: 0; z-index: 1; display: block; max-width: none; padding: 0; margin: 0; }
.m .cartoes .cartao { position: absolute; width: clamp(150px, 15vw, 230px); opacity: 0; will-change: transform, opacity; }
.m .cartoes .cartao { pointer-events: none; }
.m .cartoes .cartao.ativo { pointer-events: auto; }
.m .cartoes [data-p=a] { right: 6vw; top: 16vh; }
.m .cartoes .cartao--fachada { width: clamp(230px, 22vw, 340px); }
.m #inicio .cartao--fachada { top: auto; bottom: 9vh; right: 4vw; }
.m #historia .cartao--fachada { top: 15vh; right: 5vw; }
.m #portas .cartao--fachada { top: auto; bottom: 9vh; right: 4vw; }
.m .cartoes [data-p=b] { right: 22vw; bottom: 9vh; }
.m .cartoes [data-p=c] { right: 4vw; bottom: 12vh; }
.m .cartoes img { aspect-ratio: 1; object-fit: cover; }
.vapor i { position: absolute; bottom: 0; width: 3px; height: 26px; border-radius: 3px; background: rgba(250, 249, 246, .6); animation: vapor2 2.4s ease-out infinite; }
.vapor i:nth-child(2) { left: 12px; animation-delay: .6s; } .vapor i:nth-child(3) { left: 24px; animation-delay: 1.2s; }
@keyframes vapor2 { 0% { opacity: 0; transform: translateY(8px) scaleY(.6); } 40% { opacity: .8; } 100% { opacity: 0; transform: translateY(-26px) scaleY(1.1); } }
.m .contato, .m .rodape { position: relative; z-index: 2; }
.m .zap { z-index: 45; }

/* celular e telas em pé: palco em cima, texto embaixo */
@media (max-width: 899px), (max-aspect-ratio: 21/20) {
  .m .elevador { left: auto; right: 10px; top: calc(var(--topo) + 10px); transform: none; flex-direction: row; gap: 6px; padding: 6px 8px; border-radius: 30px; }
  .m .elevador__andares { flex-direction: row; gap: 3px; }
  .m .elevador__andares li { width: 24px; height: 24px; font-size: .8rem; }
  .m .elevador__cuia { width: 16px; height: 19px; }
  .m .texto { left: 0; right: 0; width: auto; top: 54%; top: 54svh; bottom: 0; }
  .veu { inset: auto 0 0 0; width: auto; height: 50%; height: 50svh; }
  .veu--claro { background: linear-gradient(to bottom, rgba(250, 249, 246, 0), var(--marfim) 10%); }
  .veu--escuro { background: linear-gradient(to bottom, rgba(28, 40, 53, 0), var(--noite-2) 10%); }
  .m .bloco { top: 0; transform: translate3d(0, 0, 0); padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); }
  .m .mega { font-size: clamp(2.2rem, 10.5vw, 3.2rem); }
  .m .titulo { font-size: clamp(1.75rem, 8vw, 2.4rem); margin-bottom: 10px; }
  .m h3.titulo { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
  .m .lead { margin: 12px 0 18px; font-size: 1.08rem; }
  .m .bloco > p:not([class]), .m .lista li { font-size: 1.06rem; line-height: 1.55; }
  .m .ano { font-size: 3.2rem; }
  .m .nota { font-size: 1.2rem; }
  .m .chapeu { margin-bottom: 8px; }
  .m .citacao { font-size: 1.3rem; }
  .m .citacao__cuia { width: 54px; height: 64px; margin-bottom: 10px; }
  .m .quarto__acao { margin-top: 14px; gap: 14px; }
  .m .quarto__foto { width: 92px; }
  .m .quarto__acao .botao { min-height: 50px; padding: 14px 22px; font-size: .82rem; }
  .rot b { padding: 6px 10px; font-size: .68rem; }
  .m .bloco .cartao { display: none; }
  .m .rolar { display: none; }
  .m .dica { right: auto; left: 50%; bottom: auto; top: calc(54svh - 44px); transform: translateX(-50%); white-space: nowrap; }
  .m .cartoes .cartao { width: clamp(96px, 26vw, 150px); padding: 5px; }
  .m .cartoes [data-p=a] { right: 12px; left: auto; top: calc(var(--topo) + 56px); bottom: auto; }
  .m .cartoes [data-p=b] { left: 12px; right: auto; top: calc(var(--topo) + 90px); bottom: auto; }
  .m .cartoes [data-p=c] { right: 20px; left: auto; top: calc(var(--topo) + 170px); bottom: auto; }
  .m .cartoes .cartao--fachada, .m #inicio .cartao--fachada, .m #historia .cartao--fachada, .m #portas .cartao--fachada { width: clamp(140px, 40vw, 200px); left: 12px; right: auto; top: calc(var(--topo) + 56px); bottom: auto; }
}
@media (max-width: 899px) and (max-height: 720px), (max-aspect-ratio: 21/20) and (max-height: 720px) {
  .m .texto { top: 50svh; }
  .m .mega { font-size: 2.05rem; }
  .m .bloco--inicio .lead { font-size: .98rem; margin: 10px 0 14px; }
  .m .bloco > p:not([class]), .m .lista li { font-size: 1rem; }
  .m .ano { font-size: 2.6rem; }
  .m .dica { top: calc(50svh - 40px); }
}
@media (min-width: 600px) and (max-aspect-ratio: 21/20) and (min-height: 721px) {
  .m .texto { top: 58svh; }
  .veu { height: 46svh; }
  .m .bloco { padding: 26px clamp(32px, 7vw, 64px) 26px; }
  .m .mega { font-size: clamp(3.2rem, 8vw, 4.6rem); }
  .m .titulo, .m h3.titulo { font-size: clamp(2.2rem, 5.4vw, 3.2rem); }
  .m .lead { font-size: 1.2rem; }
  .m .bloco > p:not([class]), .m .lista li { font-size: 1.1rem; }
  .m .ano { font-size: 4.4rem; }
  .m .nota { font-size: 1.25rem; }
  .m .citacao { font-size: 1.7rem; }
  .m .quarto__foto { width: 120px; }
  .m .dica { top: calc(58svh - 48px); }
  .m .cartoes .cartao { width: clamp(140px, 22vw, 200px); }
}

/* ---------- Nossas Raízes: leitura calma ---------- */
.leitura { position: relative; z-index: 2; background: var(--noite-2); color: var(--marfim); padding: clamp(72px, 13vh, 150px) var(--lado); }
.leitura__grade { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.leitura .chapeu { color: var(--dourado); }
.leitura__p { font-size: clamp(1.12rem, 1.45vw, 1.35rem); line-height: 1.75; color: rgba(250, 249, 246, .9); }
.leitura__citacao { position: relative; margin: 44px 0; }
.leitura .citacao { font-size: clamp(1.5rem, 2.4vw, 2.2rem); color: var(--marfim); }
.leitura .citacao__cuia { width: 70px; height: 84px; margin-bottom: 14px; }
.leitura .vapor { display: block; position: absolute; left: 24px; top: -40px; width: 40px; height: 50px; }
.leitura__foto { padding: 10px; border-radius: 12px; background: #fff; transform: rotate(1.5deg); }
.leitura__foto img { border-radius: 6px; }
@media (max-width: 860px) { .leitura__grade { grid-template-columns: 1fr; } .leitura__foto { transform: none; } }

/* ---------- contato ---------- */
.contato { position: relative; background: var(--marfim); padding: clamp(64px, 9vw, 120px) var(--lado); }
.contato__grade { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.contato h3 { font: 700 1.8rem/1.15 var(--f-tit); margin-bottom: 12px; }
.contato__cartao { background: #fff; border-top: 4px solid var(--verde); border-radius: 8px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.contato__cartao > p { color: #666; margin-bottom: 24px; }
.contato__dados { list-style: none; padding: 0; margin-top: 26px; display: grid; gap: 12px; }
.contato__dados li { background: var(--marfim); padding: 16px 18px; border-left: 3px solid var(--dourado); border-radius: 0 4px 4px 0; color: #444; overflow-wrap: anywhere; }
.contato__dados strong { color: var(--noite); }
.uteis { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.uteis li { background: #fff; border-radius: 8px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(0, 0, 0, .04); }
.uteis span { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); font-weight: 700; }
.uteis b { font: 700 1.05rem/1.3 var(--f-tit); }
.servicos { margin: 18px 0 0; font-size: .9rem; letter-spacing: .06em; color: #6b7785; }
.mapa { position: relative; margin-top: 22px; min-height: 300px; border-radius: 8px; overflow: hidden; background: #E8E2D6 url(../img/predio-720.webp) center / 82% no-repeat; box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .contato__grade { grid-template-columns: 1fr; } }

/* ---------- rodapé ---------- */
.rodape { background: var(--noite); color: #e0e0e0; border-top: 4px solid var(--verde); }
.rodape__grade { max-width: 1180px; margin: 0 auto; padding: 72px var(--lado) 52px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.rodape__nome { font: 700 1.7rem/1.2 var(--f-tit); color: var(--dourado); }
.rodape__slogan { font: italic 400 1.1rem/1.3 var(--f-tit); margin: 4px 0 14px; }
.rodape p, .rodape li { font-size: .95rem; line-height: 1.8; color: #b0b0b0; }
.rodape h4 { font: 700 1.15rem/1.2 var(--f-tit); color: #fff; margin-bottom: 20px; padding-bottom: 10px; position: relative; }
.rodape h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: var(--vermelho); }
.rodape ul { list-style: none; padding: 0; }
.rodape li strong { color: var(--dourado); font-weight: 400; }
.rodape a { color: #b0b0b0; text-decoration: none; transition: color .3s; }
.rodape a:hover { color: var(--dourado); }
.rodape__base { background: #243342; padding: 26px var(--lado); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.rodape__base p { font-size: .85rem; color: #bbb; line-height: 1.6; }
.clima { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 20px; background: rgba(255, 255, 255, .05); color: var(--dourado) !important; }
.clima__icone { font-size: 1.2rem; }
@media (max-width: 860px) { .rodape__grade { grid-template-columns: 1fr 1fr; } .rodape__marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .rodape__grade { grid-template-columns: 1fr; } }

/* ---------- WhatsApp flutuante ---------- */
.zap { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); transition: transform .3s; }
.zap:hover { transform: scale(1.08); }
.zap svg { width: 32px; height: 32px; }
@media (max-width: 760px) { .zap { width: 50px; height: 50px; right: 14px; bottom: 14px; } .zap svg { width: 28px; height: 28px; } }

/* ---------- galeria de fotos ---------- */
.galeria { width: min(960px, 100vw); max-width: 100vw; max-height: 100svh; padding: 0; border: 0; border-radius: 12px; background: #111; color: #fff; }
.galeria::backdrop { background: rgba(10, 14, 20, .88); }
.galeria__topo, .galeria__base { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.galeria__topo h3 { font: 700 1.3rem/1.2 var(--f-tit); color: var(--dourado); }
.galeria__fechar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.galeria__fechar:hover { background: var(--vermelho); }
.galeria__foto { position: relative; background: #000; }
.galeria__foto img { width: 100%; height: min(70svh, 720px); object-fit: contain; }
.galeria__seta { position: absolute; top: 50%; width: 48px; height: 64px; border: 0; background: rgba(0, 0, 0, .45); font-size: 2rem; cursor: pointer; transform: translateY(-50%); }
.galeria__seta:hover { background: var(--vermelho); }
.galeria__seta--ant { left: 0; border-radius: 0 6px 6px 0; } .galeria__seta--prox { right: 0; border-radius: 6px 0 0 6px; }
#galeria-conta { font-variant-numeric: tabular-nums; color: #bbb; }
.galeria--uma .galeria__seta, .galeria--uma #galeria-conta { visibility: hidden; }
@media (max-width: 760px) { .galeria { border-radius: 0; height: 100svh; } .galeria__foto img { height: calc(100svh - 150px); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }