/* style.css , Oceano Barra Norte (nasceu em 06/11/2026). Embutido no index.html por
   tools/embute_css.py (raiz do repo): editou aqui, rode o embute. /obrigado/, /privacidade/ e 404 pedem
   este arquivo com ?v=AAAAMMDD: subir a data a cada mudanca (cache da zona).

   Desenho: a pagina e um percurso pelo condominio (chegada, agua, orla, pavilhao) e as grandes faixas em
   onda da capa do book costuram as secoes.
   Cores tiradas do book. --mar e a faixa da capa servem para forma: texto claro sobre elas nao passa de 3,5:1:
   texto corrido so sobre --fundo (4,5:1 com a --espuma) ou --marinho (9:1). As ondas tonais de ondas.svg
   evitam campo chapado; o marinho fica para o rodape. */
:root {
  --marinho: #1f3a54;
  --marinho-fundo: #182e43;
  --fundo: #3f7680;
  --mar: #5b9297;
  --areia: #e9e3d0;
  --espuma: #f6f2e6;
  --texto: #203445;
  --suave: #4c5f6b;
  --linha: rgba(31, 58, 84, .2);
  --linha-clara: rgba(233, 227, 208, .28);
  --titulo: 'Josefin Sans', 'Century Gothic', 'Avenir Next', sans-serif;
  --corpo: 'Hanken Grotesk', 'Segoe UI', Roboto, Arial, sans-serif;
  --lado: clamp(20px, 5.5vw, 88px);
  --pausa: clamp(64px, 9vw, 128px);
  --onda: clamp(18px, 3.2vw, 50px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

h2 {
  font-family: var(--titulo);
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: 1.06;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.miolo { width: min(100%, 1240px); margin-inline: auto; padding-inline: var(--lado); }
.legenda { font-size: 13.5px; line-height: 1.45; }

/* botoes */
.botao {
  display: inline-block;
  padding: 16px 30px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.botao-claro { color: var(--marinho); background: var(--areia); }
.botao-claro:hover { background: var(--espuma); }
.botao-marinho { color: var(--areia); background: var(--marinho); }
.botao-marinho:hover { background: var(--marinho-fundo); }

/* a onda: uma faixa entre duas cores. O fundo do bloco e a cor de cima e o traco, a de baixo */
.onda { display: block; width: 100%; height: var(--onda); fill: var(--baixo); }
.onda.vira { transform: scaleX(-1); }
.corte { background: var(--cima); }

/* ============ topo ============ */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; gap: 24px;
  padding: 12px var(--lado);
  color: var(--areia);
  transition: background-color .25s ease;
}
.topo.solido { background: rgba(63, 118, 128, .96); }
.topo .marca { margin-right: auto; opacity: 0; transition: opacity .25s ease; }
.topo.solido .marca { opacity: 1; }
.topo .marca img { width: 136px; }
.menu { display: flex; gap: 26px; font-size: 15px; }
.menu a { text-decoration: none; }
.menu a:hover { text-decoration: underline; text-underline-offset: 5px; }
.topo-cta {
  padding: 9px 18px 8px; border: 1px solid var(--areia); border-radius: 999px;
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.topo-cta:hover { color: var(--marinho); background: var(--areia); }

/* ============ abertura ============ */
.abre {
  position: relative; isolation: isolate;
  min-height: clamp(460px, 74vh, 740px); min-height: clamp(460px, 74svh, 740px);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(72px, 10vh, 104px) var(--lado) calc(var(--onda) + 28px);
  text-align: center; color: var(--espuma);
  background: var(--marinho);
  overflow: hidden;
}
.abre-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; }
.abre::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24, 46, 67, .6) 0%, rgba(24, 46, 67, .34) 42%, rgba(24, 46, 67, 0) 62%);
}
.abre-logo { width: min(100%, 470px); height: auto; animation: sobe 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.abre h1 {
  margin-top: clamp(14px, 2.2vh, 24px);
  font-family: var(--titulo); font-weight: 300;
  font-size: clamp(27px, 3vw, 42px); line-height: 1.12;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(24, 46, 67, .5);
}
.abre-sub { max-width: 58ch; text-wrap: balance; margin-top: 8px; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.35; text-shadow: 0 1px 14px rgba(24, 46, 67, .7); }
.abre .botao { margin-top: clamp(14px, 2.2vh, 22px); }
.abre-frase { margin-top: 10px; font-size: 13.5px; text-shadow: 0 1px 10px rgba(24, 46, 67, .7); }
.abre-onda { position: absolute; inset: auto 0 -1px; --baixo: var(--fundo); }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============ numeros: o 422 e a peca maior depois da abertura ============ */
.numeros {
  padding-block: clamp(12px, 1.8vw, 26px) clamp(22px, 3vw, 44px);
  color: var(--espuma);
  background: var(--fundo) url('/assets/img/ondas.svg') center / cover no-repeat;
}
.numeros .miolo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(18px, 3vw, 48px); }
.n-gigante { font-family: var(--titulo); font-weight: 300; font-size: clamp(112px, 17vw, 236px); line-height: .92; letter-spacing: -.03em; margin-bottom: -.1em; }
.n-lado { flex: 1 1 260px; }
.n-lotes { font-family: var(--titulo); font-weight: 300; font-size: clamp(27px, 3vw, 44px); line-height: 1.08; }
.n-lotes span { display: block; }
.n-status { margin-top: 6px; font-size: 14px; }

/* ============ poster: foto de tela inteira, uma frase so ============ */
.poster { position: relative; isolation: isolate; min-height: min(86vh, 58vw); min-height: min(86svh, 58vw); display: flex; color: var(--espuma); background: var(--marinho); overflow: hidden; }
.poster-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.poster .onda { position: absolute; inset-inline: 0; z-index: 2; }
.poster .onda-cima { top: -1px; }
.poster .onda-baixo { bottom: -1px; }
.poster-texto { width: 100%; padding-inline: var(--lado); }
.poster h2 { max-width: 9.5em; font-size: clamp(44px, 6.8vw, 112px); line-height: 1; text-shadow: 0 2px 40px rgba(24, 46, 67, .45); }
.poster p { max-width: 34ch; margin-top: 16px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; text-shadow: 0 1px 14px rgba(24, 46, 67, .7); }
.poster-agua { align-items: flex-end; }
.poster-agua .poster-texto { padding-bottom: calc(var(--onda) + clamp(20px, 3vw, 44px)); }
.poster-agua::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 72% at 12% 96%, rgba(31, 58, 84, .84) 26%, rgba(31, 58, 84, .5) 60%, rgba(31, 58, 84, 0) 100%); }
.poster-orla { align-items: flex-start; }
.poster-orla .poster-texto { padding-top: calc(var(--onda) + clamp(16px, 2.4vw, 36px)); }
.poster-orla::before { content: ""; position: absolute; inset: 0 0 45%; z-index: -1; background: linear-gradient(180deg, rgba(31, 58, 84, .3), rgba(31, 58, 84, 0)); }
.poster-inset { display: none; }
@media (min-width: 900px) {
  .poster-inset { display: block; position: absolute; z-index: 1; right: var(--lado); bottom: calc(var(--onda) + 28px); width: 26vw; }
  .poster-inset img { width: 100%; border: 6px solid var(--espuma); }
}

/* ============ pecas: tamanhos diferentes de proposito ============ */
.pecas { padding-block: clamp(24px, 4vw, 56px) calc(var(--onda) + 24px); color: var(--texto); background: var(--areia) url('/assets/img/ondas-areia.svg') center / cover no-repeat; }
.pecas .miolo { display: grid; gap: 24px; }
.pecas h2 { color: var(--marinho); font-size: clamp(36px, 4.6vw, 66px); line-height: 1.02; }
.peca-titulo p { margin-top: 12px; font-size: clamp(17px, 1.4vw, 20px); }
.peca-grande img, .peca-pequena img { width: 100%; }
.peca-pequena { width: 62%; justify-self: end; }
.peca-pequena figcaption { margin-top: 8px; font-size: 15px; line-height: 1.3; }
@media (min-width: 900px) {
  .pecas .miolo { grid-template-columns: 7fr 4fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
  .peca-grande { grid-row: 1 / span 2; margin-left: calc(var(--lado) * -1); }
  .peca-pequena { width: 88%; justify-self: start; }
}

/* ============ valores: o preco e o titulo da secao ============ */
.valores-sec { padding-block: clamp(20px, 3vw, 44px) clamp(32px, 4vw, 60px); color: var(--espuma); background: var(--fundo) url('/assets/img/ondas.svg') center / cover no-repeat; }
.valores-sec .miolo { display: grid; gap: clamp(26px, 4vw, 56px); }
.invisivel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.preco-nome { font-size: clamp(17px, 1.6vw, 22px); }
.preco-valor { font-family: var(--titulo); font-weight: 300; font-size: clamp(54px, 10vw, 150px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.preco + .preco { justify-self: end; text-align: right; }
.condicao { font-family: var(--titulo); font-weight: 400; font-size: clamp(28px, 4vw, 56px); line-height: 1.1; }
.preco-nota { max-width: 70ch; font-size: 13.5px; line-height: 1.45; }

/* ============ localizacao: o mapa e o protagonista ============ */
.local { padding-block: clamp(24px, 3vw, 44px) clamp(36px, 5vw, 64px); color: var(--texto); background: var(--areia); }
.local h2 { color: var(--marinho); font-size: clamp(44px, 7vw, 110px); line-height: 1; }
.mapa { margin-top: clamp(18px, 3vw, 36px); }
.mapa img { width: 100%; mix-blend-mode: multiply; }
.tempos { display: flex; flex-wrap: wrap; gap: 18px clamp(32px, 7vw, 110px); margin-top: clamp(20px, 3vw, 36px); font-size: 16px; line-height: 1.25; }
.tempos strong { display: block; font-family: var(--titulo); font-weight: 300; font-size: clamp(44px, 6vw, 88px); line-height: 1; color: var(--marinho); }
.local-nota { margin-top: 18px; font-size: 13.5px; color: var(--suave); }

/* ============ de onde vem: DeMello e bairro ============ */
.origem { padding-block: clamp(16px, 3vw, 40px) clamp(36px, 5vw, 64px); color: var(--areia); background: var(--fundo); }
.origem .miolo { display: grid; gap: 24px; }
.demello-logo { width: 170px; margin-bottom: 20px; }
.origem h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; }
.link-bairro { display: inline-block; margin-top: 18px; font-weight: 600; text-underline-offset: 5px; }
.obra img { width: 100%; }
.obra figcaption { margin-top: 8px; font-size: 15px; }
.obra-pequena { width: 62%; }
@media (min-width: 900px) {
  .origem .miolo { grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
  .obra-grande { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-direction: column; height: 100%; }
  .obra-grande img { flex: 1; min-height: 0; object-fit: cover; }
  .obra-pequena { grid-column: 1; width: 78%; }
}

/* ============ cadastro ============ */
.cadastro-sec { position: relative; isolation: isolate; padding-block: calc(var(--onda) + 28px) calc(var(--onda) + 44px); color: var(--espuma); background: var(--fundo); }
.cadastro-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; }
.cadastro-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, rgba(47, 92, 101, .92) 24%, rgba(63, 118, 128, .62)); }
.cadastro-sec > .onda { position: absolute; inset: -1px 0 auto; }
.cadastro-sec > .onda.onda-baixo { inset: auto 0 -1px; }
.cadastro-sec .miolo { display: grid; gap: 34px; }
.cadastro-sec h2 { color: var(--espuma); font-size: clamp(42px, 6vw, 92px); line-height: 1; }
.cadastro-nota { margin-top: 18px; font-size: 14.5px; color: rgba(246, 242, 230, .86); }
@media (min-width: 960px) { .cadastro-sec .miolo { grid-template-columns: 6fr 6fr; gap: clamp(48px, 6vw, 96px); align-items: center; } }

.cartao-form {
  padding: clamp(22px, 3vw, 34px);
  color: var(--texto); background: var(--espuma);
  border-radius: 6px 44px 6px 44px;
}

/* formulario: padrao aprovado (playbook). Classes lidas pelo lead-form.js: nao renomear */
.lead-form label { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--marinho); }
.lead-form input[type=text], .lead-form input[type=tel], .lead-form input[type=email] {
  display: block; width: 100%; margin-top: 5px; padding: 12px 13px;
  font: 400 16px var(--corpo); color: var(--texto);
  background: #fff; border: 1px solid rgba(31, 58, 84, .32); border-radius: 6px;
}
.lead-form input::placeholder { color: #7b8892; }
.lead-form input:focus { outline: none; border-color: var(--fundo); box-shadow: 0 0 0 3px rgba(47, 92, 101, .2); }
.lead-form input:user-invalid { border-color: #b4472a; }
.lf-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lf-perfil { margin-bottom: 12px; }
.lf-perfil-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--marinho); }
.lf-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lead-form label.lf-pill {
  position: relative; margin: 0; padding: 10px 12px; cursor: pointer;
  background: #fff; border: 1px solid rgba(31, 58, 84, .32); border-radius: 6px;
}
.lf-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.lf-pill-t { font-size: 14px; font-weight: 600; color: var(--texto); }
.lf-pill-d { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; font-weight: 400; color: var(--suave); }
.lead-form label.lf-pill:hover { border-color: var(--fundo); }
.lf-pills.lf-falta .lf-pill { border-color: #b4472a; background: #fbf1ee; }
.lead-form label.lf-consent.lf-falta { color: #9c3b1e; }
.lead-form label.lf-consent.lf-falta input { outline: 2px solid #b4472a; outline-offset: 1px; }
.lead-form label.lf-pill.is-checked { border-color: var(--fundo); background: #e5eeee; }
.lf-pill:focus-within { box-shadow: 0 0 0 3px rgba(47, 92, 101, .2); }
.lead-form label.lf-consent { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; font-size: 13.5px; line-height: 1.4; font-weight: 400; color: var(--suave); }
.lf-consent input { margin: 2px 0 0; accent-color: var(--fundo); flex: 0 0 auto; }
.lf-consent a { color: var(--marinho); text-underline-offset: 2px; }
.lf-submit {
  display: block; width: 100%; padding: 15px 18px; border: 0; border-radius: 999px;
  font: 600 16px var(--corpo); color: var(--areia); background: var(--marinho); cursor: pointer;
  transition: background-color .2s ease;
}
.lf-submit:hover { background: var(--marinho-fundo); }
.lf-submit:disabled { opacity: .6; cursor: progress; }
.lf-submit:focus-visible { outline: 2px solid var(--marinho); outline-offset: 2px; }
.lf-msg { margin: 9px 0 0; min-height: 1em; font-size: 13.5px; line-height: 1.4; color: #9c3b1e; }
@media (max-width: 400px) { .lf-2col, .lf-pills { grid-template-columns: 1fr; } }

/* ============ duvidas ============ */
.duvidas { padding-block: clamp(32px, 5vw, 60px) var(--pausa); color: var(--texto); background: var(--espuma); }
.duvidas h2 { color: var(--marinho); }
.perguntas { max-width: 860px; margin-top: clamp(26px, 4vw, 44px); border-bottom: 1px solid var(--linha); }
.pergunta { border-top: 1px solid var(--linha); }
.pergunta summary {
  position: relative; padding: 17px 38px 16px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 17.5px; line-height: 1.35; color: var(--marinho);
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: ""; position: absolute; right: 6px; top: 25px; width: 12px; height: 12px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease;
}
.pergunta[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.pergunta p { max-width: 68ch; padding-bottom: 18px; }
.duvidas-mais { margin-top: 24px; }

/* ============ rodape ============ */
.rodape { padding: clamp(40px, 6vw, 64px) var(--lado) calc(40px + env(safe-area-inset-bottom)); color: var(--areia); background: var(--marinho-fundo); }
.rodape-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.rodape-logos .l-oc { width: 180px; }
.rodape-logos .l-dm { width: 150px; }
.insta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px; border: 1px solid var(--linha-clara); border-radius: 999px;
  font-size: 14.5px; text-decoration: none;
}
.insta svg { width: 18px; height: 18px; }
.insta:hover { border-color: var(--areia); }
.rodape-insta { margin-left: auto; }
.legal { max-width: 1120px; margin-top: 28px; font-size: 13px; line-height: 1.6; color: rgba(233, 227, 208, .76); }
.legal p + p { margin-top: 9px; }
@media (max-width: 760px) { .rodape-insta { margin-left: 0; } }

/* ============ botao fixo no celular ============ */
.fixo { display: none; }
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .fixo {
    position: fixed; z-index: 25;
    left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
    display: block; padding: 15px 16px 14px; border-radius: 999px;
    font-weight: 600; font-size: 16px; text-align: center; text-decoration: none;
    color: var(--marinho); background: var(--areia);
    box-shadow: 0 6px 20px rgba(31, 58, 84, .28);
    transition: transform .25s ease, opacity .25s ease;
  }
  .fixo.escondido { transform: translateY(160%); opacity: 0; pointer-events: none; }
  .menu { display: none; }
  .topo { padding-block: 10px; }
  .topo .marca { opacity: 1; }
  .topo .marca img { width: 118px; }
  .abre { min-height: clamp(460px, 72vh, 620px); min-height: clamp(460px, 72svh, 620px); }
  .poster { min-height: 78vh; min-height: 78svh; }
  .topo:not(.solido) .marca { opacity: 0; }
  /* celular: texto sobre o ceu, foto embaixo; o topo da foto se dissolve no azul do ceu */
  .abre { background: linear-gradient(180deg, #24466a, #3e6488 52%, #6d7f92); }
  .abre::before { display: none; }
  .abre-foto { inset: auto 0 0; height: 58%; object-position: 24% 74%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%); mask-image: linear-gradient(180deg, transparent 0, #000 26%); }
  .abre-logo { width: min(100%, 300px); }
  .rodape { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}