/* J Peixer Imobiliária (#246): casa enxaimel de Blumenau. N3, sem efeito nenhum.
   As vigas são o gap e o padding da grade (fundo vermelho), os vãos são as células brancas.
   Cavilhas: ponto escuro no cruzamento de cima à esquerda de cada vão. Mão-francesa e cruz de santo andré: degradês em CSS. */
:root {
  --fundo: #f3f3f2;
  --tinta: #1c1a1a;
  --suave: #5b5756;
  --marca: #a8110f;
  --marca-2: #8c1515;
  --viga: #8c1515;
  --viga-escura: #5e0c0c;
  --cavilha: #4a0909;
  --vao: #ffffff;
  --linha: #cfcbc8;
  --cartao: #ffffff;
  --preto: #202020;
  --pedra-junta: #e4e1dd;
  --fonte-titulo: "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --fonte-texto: "Sofia Sans", system-ui, sans-serif;
  --raio: 0px;
  --v: 12px;
  --wa-cor: var(--marca);
}
body { background: var(--fundo); color: var(--tinta); }
.nw { white-space: nowrap; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.01em; }

/* ---------- Botões: retos, como a madeira ---------- */
.botao { border-radius: 2px; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; padding: .85em 1.3em; }
.botao--escuro { --b-fundo: var(--tinta); }
.botao--pequeno { font-size: .95rem; padding: .7em 1em; }
.link-ficha { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--marca-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.link-ficha:hover { color: var(--tinta); }

/* ---------- Cabeçalho na cor da placa do logo ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--preto); color: #f2f2f2; }
.topo__linha { display: flex; align-items: center; gap: 28px; width: min(1320px, 100%); margin-inline: auto; padding: 8px clamp(16px, 3vw, 24px); min-height: 72px; }
.topo__logo img { height: 54px; width: auto; }
.topo__menu { display: flex; gap: 24px; margin-left: auto; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }
.topo__menu a { padding-block: 6px; border-bottom: 2px solid transparent; }
.topo__menu a:hover { border-bottom-color: var(--marca); }
.topo__wa { flex: none; }
.topo__menu-botao { display: none; }

/* ---------- A casa ---------- */
.casa { width: min(1320px, 100%); margin: 0 auto; padding: clamp(0px, 2.4vw, 32px) clamp(0px, 3vw, 40px) 0; }
.quadro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--v); padding: var(--v) var(--v) 0; background: var(--viga); }
.quadro--abre { padding-top: var(--v); }
.vao { position: relative; min-width: 0; background: var(--vao); }
.vao::before { content: ""; position: absolute; left: calc(var(--v) / -2); top: calc(var(--v) / -2); width: 6px; height: 6px; border-radius: 50%; background: var(--cavilha); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
.vao--cruz, .vao--mao { min-height: 120px; }
/* tesoura: duas diagonais que sobem dos cantos de baixo e se encontram no meio do frechal (não é X de canto a canto) */
.vao--cruz {
  background:
    linear-gradient(to bottom right, transparent calc(50% - 6px), var(--viga) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px)) left top / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - 6px), var(--viga) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px)) right top / 50% 100% no-repeat,
    var(--vao);
}
/* mão-francesa: uma diagonal só */
.vao--mao { background: linear-gradient(to bottom right, transparent calc(50% - 6px), var(--viga) calc(50% - 6px) calc(50% + 6px), transparent calc(50% + 6px)), var(--vao); }

/* Fachada */
.quadro--abre { grid-template-rows: minmax(230px, auto) minmax(230px, auto) auto; }
.vao--titulo { grid-column: 1 / span 6; grid-row: 1 / span 2; padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.vao--titulo h1 { font-size: clamp(3rem, 6.2vw, 6rem); line-height: .92; letter-spacing: -0.02em; }
.abre__texto { font-size: 1.12rem; color: var(--tinta); max-width: 38ch; }
.abre__ig { color: var(--suave); max-width: 40ch; padding-left: 14px; border-left: 4px solid var(--viga); }
.abre__acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.vao--foto { margin: 0; overflow: hidden; }
.vao--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vao--foto figcaption { position: absolute; left: 0; bottom: 0; z-index: 1; background: var(--vao); padding: 6px 12px 6px 10px; font-size: .82rem; font-weight: 600; }
.vao--foto figcaption a:hover { text-decoration: underline; }
.vao--foto-a { grid-column: 7 / span 4; grid-row: 1 / span 2; }
.vao--cruz-a { grid-column: 11 / span 2; grid-row: 1; }
.vao--foto-b { grid-column: 11 / span 2; grid-row: 2; }

/* Busca nos vãos da fila de baixo */
.busca { display: contents; }
.vao--campo { padding: 14px 18px 16px; border: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.vao--campo > span, .vao--campo legend, .vao--codigo label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.vao--campo legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; }
.vao--pret { grid-column: 1 / span 3; }
.vao--quartos { grid-column: 4 / span 2; }
.vao--valor { grid-column: 6 / span 3; }
.vao--buscar { grid-column: 9 / span 2; }
.vao--codigo { grid-column: 11 / span 2; }
.pret { display: flex; gap: 8px; clear: both; }
.pret label { flex: 1; position: relative; cursor: pointer; }
.pret input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pret span { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: 8px 12px; border: 2px solid var(--tinta); font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.15rem; }
.pret input:checked + span { background: var(--tinta); color: #fff; }
.pret input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 2px; }
.vao--campo select, .vao--codigo input {
  width: 100%; min-height: 44px; padding: 6px 28px 6px 0; border: 0; border-bottom: 2px solid var(--tinta); border-radius: 0; background: transparent; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.3rem; appearance: none; -webkit-appearance: none;
}
.vao--campo select { background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%); background-position: calc(100% - 11px) 55%, calc(100% - 4px) 55%; background-size: 7px 7px; background-repeat: no-repeat; }
.vao--buscar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: var(--marca); color: #fff; font-family: var(--fonte-titulo); cursor: pointer; padding: 12px; }
.vao--buscar span { font-size: 1.9rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.vao--buscar small { font-family: var(--fonte-texto); font-size: .78rem; opacity: .85; }
.vao--buscar:hover { background: var(--viga-escura); }
.codigo__linha { display: flex; gap: 8px; align-items: flex-end; }
.codigo__linha input { flex: 1; min-width: 0; padding-right: 4px; }
.codigo__linha button { flex: none; min-width: 48px; min-height: 44px; border: 2px solid var(--tinta); background: var(--vao); font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.codigo__linha button:hover { background: var(--tinta); color: #fff; }
.codigo__aviso { font-size: .85rem; color: var(--suave); }
.codigo__aviso:empty { display: none; }
.codigo__aviso a { text-decoration: underline; }

/* Cabeças de seção dentro dos vãos */
.vao--cabeca { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.vao--cabeca h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: .95; }
.vao--cabeca p { color: var(--suave); max-width: 60ch; }
.quadro--lista .vao--cabeca { grid-column: span 9; }
.quadro--lista .vao--mao { grid-column: span 3; }

/* Imóvel: preço primeiro, como nas legendas do Instagram */
.vao--imovel { grid-column: span 3; display: flex; flex-direction: column; }
.imovel__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.imovel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imovel__reservado { position: absolute; top: 10px; left: 10px; padding: 4px 10px; background: var(--preto); color: #fff; font-family: var(--fonte-titulo); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.imovel__texto { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.imovel__linha { font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.12rem; line-height: 1.25; }
.imovel__linha b { font-weight: 800; font-size: 1.55rem; letter-spacing: -0.01em; white-space: nowrap; }
.imovel__linha .barra { color: var(--viga); font-weight: 800; margin-inline: 2px; }
.imovel__onde { font-size: .9rem; color: var(--suave); }
.imovel__corretor { font-size: .84rem; color: var(--suave); }
.imovel__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 8px; }

/* Tenho interesse */
.vao--interesse { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); padding: clamp(24px, 3vw, 40px); }
.interesse__cabeca h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 10px; }
.interesse__cabeca p { color: var(--suave); }

/* Locação */
.quadro--aluga .vao--cabeca { grid-column: span 3; }
.vao--aluga { grid-column: span 3; display: flex; flex-direction: column; }
.aluga__foto { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #ddd; }
.aluga__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aluga__texto { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; flex: 1; }
.aluga__rotulo { font-family: var(--fonte-titulo); font-weight: 800; font-size: .8rem; letter-spacing: .12em; color: var(--marca-2); }
.vao--aluga .imovel__linha { font-size: 1.02rem; }
.vao--aluga .imovel__linha b { font-size: 1.3rem; }

/* Equipe */
.quadro--equipe .vao--cabeca { grid-column: span 2; padding: 22px; }
.quadro--equipe .vao--cabeca h2 { font-size: 2.2rem; }
.vao--pessoa { grid-column: span 2; padding: 22px 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 140px; }
.pessoa__nome { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.3rem; line-height: 1.1; }
.pessoa__cargo, .pessoa__creci { font-size: .9rem; color: var(--suave); }

/* Última fila: fatos, a nota do Google é um deles */
.quadro--fatos { padding-bottom: var(--v); }
.vao--fato { grid-column: span 3; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.fato__grande { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.6rem; line-height: 1.05; }
.vao--fato p:not(.fato__grande) { font-size: .9rem; color: var(--suave); }
.vao--fato a { text-decoration: underline; text-underline-offset: 3px; color: var(--marca-2); }

/* Frechal e embasamento de pedra */
.frechal { height: 24px; background: radial-gradient(circle, var(--cavilha) 3px, transparent 3.6px) 20px 50% / 80px 24px repeat-x, var(--viga-escura); }
.embasamento {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); padding: clamp(20px, 3vw, 40px);
  background-color: var(--pedra-junta);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='72'%3E%3Crect width='200' height='72' fill='%23e4e1dd'/%3E%3Crect x='3' y='3' width='94' height='30' fill='%23c9c5c1'/%3E%3Crect x='103' y='3' width='94' height='30' fill='%23b8b3ad'/%3E%3Crect x='-47' y='39' width='94' height='30' fill='%23beb9b4'/%3E%3Crect x='53' y='39' width='94' height='30' fill='%23cdc9c5'/%3E%3Crect x='153' y='39' width='94' height='30' fill='%23beb9b4'/%3E%3C/svg%3E");
  background-size: 200px 72px;
}
.pedido { background: var(--vao); padding: clamp(20px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.pedido h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.pedido > p { color: var(--suave); }

/* Formulários */
.form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; width: 100%; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo span { font-size: .85rem; font-weight: 600; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 0; background: #fff; color: var(--tinta); font-size: 1rem; }
.campo textarea { resize: vertical; min-height: 92px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--marca); outline-offset: 0; border-color: var(--marca); }
[data-form-ok] { width: 100%; border-radius: 0; }

/* Rodapé */
.rodape { background: var(--preto); color: #e9e7e6; padding: clamp(36px, 5vw, 64px) 0 calc(28px + env(safe-area-inset-bottom)); }
.rodape__grade { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); }
.rodape__marca { display: flex; flex-direction: column; gap: 8px; font-size: .95rem; }
.rodape__marca img { width: 220px; height: auto; margin-bottom: 8px; }
.rodape__contato, .rodape__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
.rodape__contato a, .rodape__links a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; }
.rodape__form h2 { font-size: 2.2rem; margin-bottom: 14px; color: #fff; }
.rodape__form .campo span { color: #e9e7e6; }
.rodape__form [data-form-ok] { color: #f2f2f2; }
.rodape__form [data-form-ok] a { color: #fff; }
.rodape__nota { width: min(1240px, 100% - 2 * clamp(16px, 4vw, 48px)); margin: 36px auto 0; padding-top: 16px; border-top: 1px solid #3a3838; font-size: .85rem; color: #b9b6b4; }

/* WhatsApp: na cor da marca também no desktop */
.wa-flutuante { background: var(--marca); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .topo__menu { gap: 16px; font-size: 1rem; }
  .topo__wa span { display: none; }
  .quadro { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .quadro--abre { grid-template-rows: auto; }
  .vao--titulo { grid-column: 1 / -1; grid-row: auto; }
  .vao--foto-a { grid-column: 1 / span 4; grid-row: auto; min-height: 300px; }
  .vao--cruz-a { grid-column: 5 / span 2; grid-row: auto; }
  .vao--foto-b { grid-column: 5 / span 2; grid-row: auto; min-height: 150px; }
  .vao--pret { grid-column: 1 / span 3; }
  .vao--quartos { grid-column: 4 / span 3; }
  .vao--valor { grid-column: 1 / span 3; }
  .vao--buscar { grid-column: 4 / span 3; min-height: 96px; }
  .vao--codigo { grid-column: 1 / -1; }
  .quadro--lista .vao--cabeca { grid-column: 1 / span 4; }
  .quadro--lista .vao--mao { grid-column: 5 / span 2; }
  .vao--imovel, .vao--aluga, .quadro--aluga .vao--cabeca { grid-column: span 3; }
  .vao--interesse { grid-template-columns: 1fr; }
  .quadro--equipe .vao--cabeca, .vao--pessoa { grid-column: span 2; }
  .vao--fato { grid-column: span 3; }
}

/* ---------- Celular ---------- */
@media (max-width: 700px) {
  :root { --v: 8px; }
  .casa { padding: 0; }
  .topo__linha { gap: 12px; min-height: 64px; padding-inline: 12px; }
  .topo__logo img { height: 44px; }
  .topo__wa { display: none; }
  .topo__menu { position: fixed; top: 0; left: 0; right: 0; height: 100dvh; z-index: 49; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 32px 24px; background: var(--preto); font-size: 2rem; transform: translateY(-100%); visibility: hidden; transition: transform .4s ease, visibility 0s .4s; }
  .menu-aberto .topo__menu { transform: none; visibility: visible; transition: transform .4s ease, visibility 0s; }
  .topo__menu-botao { position: relative; z-index: 51; display: grid; place-content: center; gap: 7px; width: 48px; height: 48px; margin-left: auto; border: 2px solid #f2f2f2; border-radius: 2px; background: transparent; cursor: pointer; }
  .topo__menu-botao span { display: block; width: 20px; height: 2px; background: #f2f2f2; transition: transform .3s; }
  .menu-aberto .topo__menu-botao span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-aberto .topo__menu-botao span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

  .quadro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vao::before { width: 5px; height: 5px; }
  .vao--cruz, .vao--mao { min-height: 56px; }
  .vao--cruz, .vao--mao { background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2756%27 viewBox=%270 0 64 56%27%3E%3Cpath d=%27M-2 58 L32 -2 L66 58%27 fill=%27none%27 stroke=%27%238c1515%27 stroke-width=%278%27/%3E%3C/svg%3E") center / auto 100% repeat-x, var(--vao); }
  /* a busca vem primeiro, como no site atual */
  .vao--pret { grid-column: 1 / -1; order: 1; }
  .vao--quartos { grid-column: 1; order: 2; }
  .vao--valor { grid-column: 2; order: 3; }
  .vao--buscar { grid-column: 1 / -1; order: 4; min-height: 72px; flex-direction: row; gap: 12px; }
  .vao--buscar span { font-size: 1.5rem; }
  .vao--codigo { grid-column: 1 / -1; order: 5; }
  .vao--titulo { grid-column: 1 / -1; order: 6; padding: 26px 18px; gap: 14px; }
  .vao--titulo h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .vao--foto-a { grid-column: 1 / -1; order: 7; min-height: 0; aspect-ratio: 4 / 3; }
  .vao--cruz-a { grid-column: 1; order: 8; min-height: 0; }
  .vao--foto-b { grid-column: 2; order: 9; min-height: 0; aspect-ratio: 1; }
  .vao--campo { padding: 12px 14px 14px; }
  .vao--campo select, .vao--codigo input { font-size: 1.15rem; }
  .abre__acoes .botao { flex: 1 1 100%; }
  .vao--foto figcaption { font-size: .78rem; padding: 0; }
  .vao--foto figcaption a { display: flex; align-items: center; min-height: 44px; padding: 4px 12px 4px 10px; }

  .quadro--lista .vao--cabeca, .quadro--aluga .vao--cabeca, .quadro--equipe .vao--cabeca { grid-column: 1 / -1; padding: 22px 18px; }
  .quadro--lista .vao--mao { grid-column: 1 / -1; }
  .vao--imovel, .vao--interesse, .vao--aluga, .vao--fato { grid-column: 1 / -1; }
  .imovel__texto { padding: 14px 16px 16px; }
  .vao--interesse { padding: 22px 16px; }
  /* locação em linha compacta: foto à esquerda */
  .vao--aluga { flex-direction: row; }
  .aluga__foto { flex: 0 0 112px; aspect-ratio: auto; min-height: 112px; }
  .aluga__texto { padding: 10px 12px 10px 14px; }
  .vao--aluga .imovel__linha { font-size: .98rem; }
  .vao--aluga .imovel__linha b { font-size: 1.15rem; }
  .vao--aluga .link-ficha { min-height: 44px; }
  .vao--pessoa { grid-column: span 1; min-height: 0; padding: 16px 14px; }
  .vao--pessoa:last-child { grid-column: 1 / -1; }
  .vao--fato { padding: 16px 18px; }
  .frechal { height: 18px; background-size: 64px 18px; }
  .embasamento { grid-template-columns: 1fr; padding: 16px 8px; }
  .pedido { padding: 22px 16px; }
  .campos { grid-template-columns: 1fr; }
  .form .botao { width: 100%; }
  .rodape__grade { grid-template-columns: 1fr; }
  .link-ficha { min-height: 44px; }
}