:root {
  --fundo: #fbf7f2;
  --fundo-2: #f3ece3;
  --cartao: #ffffff;
  --texto: #2a211b;
  --suave: #6b5d52;
  --madeira: #8a5a35;
  --madeira-escura: #6f4526;
  --linha: #e6dccf;
  --zap: #1f9d55;
  --zap-escuro: #188146;
  --sombra: 0 1px 2px rgba(42, 33, 27, .06), 0 10px 30px rgba(42, 33, 27, .08);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.miolo { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

/* topo */
.topo { position: sticky; top: 0; z-index: 10; background: rgba(251, 247, 242, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marca { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; letter-spacing: -.01em; text-decoration: none; }
.marca span { color: var(--madeira); }
.menu { display: flex; align-items: center; gap: 22px; font-size: .95rem; }
.menu a { text-decoration: none; color: var(--suave); }
.menu a:hover { color: var(--texto); }
.menu a.botao-zap, .menu a.botao-zap:hover { color: #fff; }
@media (max-width: 720px) { .menu .link-texto { display: none; } }

/* botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: background .2s, transform .2s, border-color .2s; }
.botao:active { transform: scale(.98); }
.botao svg { width: 20px; height: 20px; flex: none; }
.botao-zap { background: var(--zap); color: #fff; }
.botao-zap:hover { background: var(--zap-escuro); }
.botao-claro { border: 1.5px solid var(--linha); background: var(--cartao); color: var(--texto); }
.botao-claro:hover { border-color: var(--madeira); }
.botao-pequeno { min-height: 42px; padding: 0 18px; font-size: .95rem; }

/* abertura */
.abertura { padding: 56px 0 40px; }
.abertura .miolo { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.selo { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--madeira); margin-bottom: 14px; }
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 18px; text-wrap: balance; }
.abertura p { font-size: 1.12rem; color: var(--suave); margin: 0 0 28px; max-width: 34em; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.foto-abertura { border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); background: var(--fundo-2); aspect-ratio: 4 / 5; }
.foto-abertura img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .abertura { padding-top: 32px; }
  .abertura .miolo { grid-template-columns: 1fr; gap: 28px; }
  .foto-abertura { aspect-ratio: 4 / 3; }
}

/* vantagens */
.vantagens { padding: 24px 0 8px; }
.vantagens ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vantagens li { background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; padding: 20px; display: grid; gap: 6px; }
.vantagens svg { width: 28px; height: 28px; color: var(--madeira); }
.vantagens strong { font-size: 1.02rem; }
.vantagens span { color: var(--suave); font-size: .93rem; line-height: 1.45; }
@media (max-width: 900px) { .vantagens ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .vantagens ul { grid-template-columns: 1fr; } }

/* seções */
.secao { padding: 64px 0; }
h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.015em; margin: 0 0 10px; text-wrap: balance; }
.secao .intro { color: var(--suave); margin: 0 0 30px; max-width: 40em; }

/* ambientes */
.ambientes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ambiente { background: var(--cartao); border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; }
.ambiente .moldura { aspect-ratio: 3 / 4; background: var(--fundo-2); }
.ambiente img { width: 100%; height: 100%; object-fit: contain; }
.ambiente p { margin: 0; padding: 12px 16px 14px; font-weight: 600; }
@media (max-width: 900px) { .ambientes { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* visita */
.visita { background: var(--fundo-2); }
.visita .miolo { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.dados { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 16px; }
.dados li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.dados svg { width: 24px; height: 24px; color: var(--madeira); margin-top: 3px; }
.dados small { display: block; color: var(--suave); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.cartao-visita { background: var(--cartao); border: 1px solid var(--linha); border-radius: 24px; padding: 28px; box-shadow: var(--sombra); }
.cartao-visita h3 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 8px; }
.cartao-visita p { color: var(--suave); margin: 0 0 20px; }
.redes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 860px) { .visita .miolo { grid-template-columns: 1fr; } }

/* rodapé */
.rodape { padding: 32px 0 40px; font-size: .9rem; color: var(--suave); border-top: 1px solid var(--linha); }
.rodape .miolo { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.rodape a { color: var(--suave); }

/* texto simples (política) */
.texto { max-width: 46em; padding: 48px 0 64px; }
.texto h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.texto h2 { font-size: 1.3rem; margin-top: 32px; }
.texto p, .texto li { color: #3d332c; }

a:focus-visible, .botao:focus-visible { outline: 3px solid var(--madeira); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .botao { transition: none; } }