/* ==========================================================================
   PRIMOR Empreendimentos — identidade visual da marca
   Usado por: / (home), /paraiso-da-enseada/, /paraiso-da-lagoa/
   NAO usado por /ilhabela/ (mantem a paleta propria do empreendimento).

   Proporcao da marca: a logo e ~90% preto e ~10% vermelho (so o hexagono).
   O site segue a mesma proporcao. Vermelho e acento — CTA, filete, tag de
   "em vendas", hover. Nunca superficie grande.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Marca */
  --preto:        #0e0e0e;
  --preto-puro:   #000000;
  --vermelho:     #d92b20;  /* CONFIRMAR contra o arquivo original da logo */
  --vermelho-vivo:#e8443a;  /* hover */
  --vermelho-fundo:#a31c16; /* faceta escura do hexagono */

  /* Neutros */
  --branco:     #ffffff;
  --cinza-50:   #fafafa;
  --cinza-100:  #f2f2f2;
  --cinza-200:  #e4e4e4;
  --cinza-500:  #7a7a7a;
  --cinza-600:  #5c5c5c;
  --cinza-700:  #3d3d3d;
  --linha:      rgba(14, 14, 14, .11);
  --linha-clara:rgba(255, 255, 255, .16);

  --fonte: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gutter: 20px;
  --maxw: 1180px;
  --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--preto);
  font-family: var(--fonte);
  font-size: 16.5px;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--fonte);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vermelho);
  margin: 0 0 18px;
}
.eyebrow-claro { color: var(--vermelho-vivo); }

/* --- Marcador de dado nao confirmado -------------------------------------
   Visivel de proposito. Nada com esta classe pode ir ao ar.                 */
.pendente {
  background: #fff3cd;
  border-bottom: 2px dotted #b8860b;
  color: #6b4e00;
  padding: 0 3px;
}

/* --- Marca ---------------------------------------------------------------
   O lockup da PRIMOR e quase quadrado (hexagono acima do wordmark), nao
   horizontal. Por isso o header e mais alto que o padrao: num header de 70px
   a logo caberia com ~55px de largura e "PRIMOR" ficaria ilegivel.
   ------------------------------------------------------------------------- */
.marca { display: inline-flex; text-decoration: none; line-height: 0; }
.marca img { height: 76px; width: auto; }
.rodape .marca img { height: 78px; }
@media (max-width: 640px) { .marca img { height: 58px; } }

/* --- Header ----------------------------------------------------------------
   104px porque a logo e um lockup quadrado: abaixo de ~76px de altura o
   "PRIMOR" vira borrao e o "EMPREENDIMENTOS" some.                           */
.topo {
  position: sticky; top: 0; z-index: 50;
  /* Fundo opaco, sem backdrop-filter: com o header encolhendo, o blur
     recompoe a cada quadro e deixa um fantasma da logo no tamanho antigo.
     A 93% de branco o efeito de vidro nem aparecia, e custava GPU em todo
     quadro de scroll. */
  background: #fff;
  border-bottom: 1px solid var(--linha);
}
.topo .wrap { display: flex; align-items: center; justify-content: space-between; height: 104px; gap: 16px; }
.topo nav { display: flex; align-items: center; gap: 28px; }

/* :not(.btn) e obrigatorio: sem isso este seletor (0,2,1) vence .btn-primario
   (0,1,0) e o texto do botao sai cinza em cima do vermelho. */
.topo nav a:not(.btn) {
  font-size: 13.5px; text-decoration: none; color: var(--cinza-600); font-weight: 500;
}
.topo nav a:not(.btn):hover { color: var(--vermelho); }
@media (max-width: 660px) { .topo nav a.oculta-mobile { display: none; } }
@media (max-width: 640px) { .topo .wrap { height: 84px; } }

/* --- Botoes ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  font-family: var(--fonte); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primario { background: var(--vermelho); color: #fff; }
.btn-primario:hover { background: var(--vermelho-vivo); }
.btn-preto { background: var(--preto); color: #fff; }
.btn-preto:hover { background: var(--vermelho); }
.btn-secundario { border-color: var(--preto); color: var(--preto); }
.btn-secundario:hover { background: var(--preto); color: #fff; }
.btn-inverso { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-inverso:hover { background: #fff; color: var(--preto); }
.btn-compacto { padding: 10px 18px; font-size: 13px; }

/* --- Tags de status -------------------------------------------------------- */
.tag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 2px;
}
.tag-vendas   { background: var(--vermelho); color: #fff; }
.tag-entregue { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.tag-entregue-claro { background: var(--cinza-100); color: var(--cinza-600); border: 1px solid var(--linha); }

/* --- Depoimentos (prova social) -------------------------------------------- */
/* align-items:start e necessario: sem isso todo card estica ate a altura do
   maior e o depoimento curto fica com um vao enorme acima do rodape. */
.depoimentos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; align-items: start;
}
.depoimento {
  /* <figure> carrega margin: 1em 40px do user-agent — sem este reset o card
     encolhe 80px e desalinha da coluna do grid. */
  margin: 0;
  background: var(--branco); border: 1px solid var(--linha);
  border-top: 3px solid var(--vermelho);
  padding: 30px 28px 26px; border-radius: var(--radius);
  display: flex; flex-direction: column;
}
.depoimento blockquote {
  margin: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--cinza-700);
  quotes: "\201C" "\201D";
}
.depoimento blockquote::before { content: open-quote; color: var(--vermelho); font-weight: 700; }
.depoimento blockquote::after  { content: close-quote; color: var(--vermelho); font-weight: 700; }
.depoimento footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--linha); }
.depoimento cite { font-style: normal; font-weight: 600; font-size: 14.5px; display: block; }
.depoimento .origem {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinza-500); margin-top: 4px; font-weight: 500;
}

/* --- Rodape institucional -------------------------------------------------- */
.rodape { background: var(--preto); color: rgba(255,255,255,.66); padding: 62px 0 38px; font-size: 13.5px; }
.rodape a { color: rgba(255,255,255,.66); }
.rodape-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px;
  padding-bottom: 38px; border-bottom: 1px solid var(--linha-clara);
}
@media (max-width: 780px) { .rodape-grid { grid-template-columns: 1fr; gap: 30px; } }
.rodape h4 {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin: 0 0 15px; font-weight: 600;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 10px; }
.rodape li a { text-decoration: none; }
.rodape li a:hover { color: var(--vermelho-vivo); }
.rodape-legal { padding-top: 28px; font-size: 11.5px; line-height: 1.7; color: rgba(255,255,255,.38); }
.rodape-legal p { margin: 0 0 9px; }

/* --- Utilidades ------------------------------------------------------------ */
.secao { padding: 92px 0; }
@media (max-width: 780px) { .secao { padding: 60px 0; } }
.secao-cinza { background: var(--cinza-50); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.filete { width: 42px; height: 3px; background: var(--vermelho); border: 0; margin: 0 0 20px; }
.titulo-secao { font-size: clamp(27px, 3.7vw, 40px); }

/* ==========================================================================
   MOVIMENTO
   Tudo aqui depende da classe .motion no <html>, colocada por um script
   inline no <head>. Sem JavaScript a classe nunca entra e a pagina aparece
   inteira, estatica — nunca invisivel esperando um script que falhou.
   ========================================================================== */

/* --- Transicao entre paginas ----------------------------------------------
   Duas linhas fazem a navegacao entre /, /paraiso-da-enseada/ e
   /paraiso-da-lagoa/ deixar de piscar em branco. Navegador sem suporte
   simplesmente navega como antes.                                           */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-sai .2s ease both; }
::view-transition-new(root) { animation: vt-entra .3s ease both; }
@keyframes vt-sai   { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(10px); } }

/* --- Entrada no scroll -----------------------------------------------------
   So opacity e transform: o navegador desenha as duas na placa de video,
   sem recalcular o layout da pagina a cada quadro.                          */
/* A lista precisa estar no CSS, nao num atributo posto pelo JS: o script so
   roda depois do parse, e o elemento apareceria por um instante antes de
   sumir. Nada do hero entra aqui — animar o que ja esta na tela ao abrir
   atrasa o LCP, a medida que o Google usa em ranqueamento e no Ads.         */
/* :where() nao soma especificidade. Sem ele, ".motion .secao .filete"
   (0,3,0) venceria ".motion .visivel" (0,2,0) e o elemento receberia a
   classe mas continuaria invisivel — foi exatamente o que aconteceu. */
.motion :where(
  .secao .filete,
  .titulo-secao,
  .marco,
  .card,
  .depoimento,
  .ficha > div,
  .texto-institucional p,
  .sobre-grid > div,
  .galeria-item,
  .cta-ilhabela h2,
  .cta-ilhabela p,
  .cta-ilhabela .btn,
  .secao-cinza > .wrap > p,
  .cadastro-caixa
) {
  opacity: var(--rv-opacidade, 0);
  transform: translateY(var(--rv-deslocamento, 14px));
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--atraso, 0) * 60ms);
}
.motion .visivel { opacity: 1; transform: none; }
/* O que ja esta na tela quando a pagina abre aparece sem animar. */
.motion .instantaneo { transition: none; }

/* --- Header que encolhe ----------------------------------------------------
   Unica excecao a regra de so animar transform/opacity: a altura do header
   muda o layout de verdade e nao ha como falsear isso com transform sem
   deixar uma faixa vazia. E um elemento so, uma vez por mudanca de direcao
   do scroll — o custo e pontual, nao por quadro numa lista.                 */
.motion .topo .wrap,
.motion .marca img { transition: height .3s cubic-bezier(.4, 0, .2, 1); }
.motion .topo { transition: box-shadow .3s ease; }
.motion .topo.compacto .wrap { height: 72px; }
.motion .topo.compacto .marca img { height: 50px; }
.motion .topo.compacto { box-shadow: 0 2px 18px rgba(14, 14, 14, .09); }
@media (max-width: 640px) {
  .motion .topo.compacto .wrap { height: 64px; }
  .motion .topo.compacto .marca img { height: 44px; }
}

/* --- Microinteracoes -------------------------------------------------------- */
.card { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card .card-foto img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.card:hover .card-foto img { transform: scale(1.04); }
.card .card-link { transition: gap .2s ease; }
.btn { transition: background .18s ease, color .18s ease, border-color .18s ease,
                   transform .18s ease; }
.btn:active { transform: translateY(1px); }

/* --- Acessibilidade ---------------------------------------------------------
   O sistema operacional tem "reduzir movimento", usado por quem tem
   enxaqueca vestibular, epilepsia fotossensivel ou enjoa com animacao.
   Aqui todo o movimento e desligado, e o conteudo aparece inteiro.          */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Variavel herdada: desliga a entrada na raiz e todo o grupo nasce
     visivel, sem precisar repetir a lista de seletores nem usar
     !important, que quebraria transforms legitimos (hover dos cards,
     centralizacao do hexagono no CTA).                                  */
  .motion { --rv-opacidade: 1; --rv-deslocamento: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* O lightbox usa a mesma API de transicao das paginas. Sem isto, a animacao
   de troca de pagina rodaria junto e a pagina inteira piscaria ao abrir uma
   foto — so a miniatura deve se mover. */
html.vt-lightbox::view-transition-old(root),
html.vt-lightbox::view-transition-new(root) { animation: none; }
::view-transition-group(foto-ativa) { animation-duration: .35s; }

/* Evita o pulo lateral quando o lightbox tira a barra de rolagem. */
html { scrollbar-gutter: stable; }

/* --- Formulario de cadastro ------------------------------------------------ */
.cadastro-caixa {
  background: var(--branco); border: 1px solid var(--linha);
  border-top: 3px solid var(--vermelho); border-radius: var(--radius);
  padding: 38px 38px 34px; max-width: 620px;
}
@media (max-width: 560px) { .cadastro-caixa { padding: 26px 22px 24px; } }

.campo { margin-bottom: 18px; }
.campo label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cinza-600); margin-bottom: 7px;
}
.campo label .opcional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--cinza-500); }
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"] {
  width: 100%; padding: 13px 15px;
  font-family: var(--fonte); font-size: 15.5px; color: var(--preto);
  background: var(--cinza-50); border: 1px solid var(--cinza-200);
  border-radius: var(--radius); transition: border-color .18s ease, background .18s ease;
}
.campo input:focus {
  outline: none; background: var(--branco);
  border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(217, 43, 32, .12);
}
.campo input[aria-invalid="true"] { border-color: var(--vermelho); }
.campo .erro { display: none; font-size: 12.5px; color: var(--vermelho); margin-top: 6px; font-weight: 500; }
.campo input[aria-invalid="true"] ~ .erro { display: block; }

.consentimento { display: flex; gap: 11px; align-items: flex-start; margin: 22px 0 24px; }
.consentimento input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--vermelho); flex: none; }
.consentimento label { font-size: 13.5px; color: var(--cinza-600); line-height: 1.55; }
.consentimento[data-invalido="true"] label { color: var(--vermelho); }

/* Armadilha de robo: invisivel para gente, preenchida por script automatico.
   Fora da tela em vez de display:none, que alguns robos detectam. */
.armadilha {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0;
}

.cadastro-estado { margin-top: 16px; font-size: 14px; font-weight: 500; min-height: 1.2em; }
.cadastro-estado[data-tipo="erro"] { color: var(--vermelho); }
.cadastro-estado[data-tipo="ok"] { color: #1f8a4c; }

.cadastro-caixa button[type="submit"] { width: 100%; justify-content: center; }
.cadastro-caixa button[disabled] { opacity: .6; cursor: progress; }

.cadastro-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .cadastro-grid { grid-template-columns: 1fr; gap: 30px; } }
.cadastro-grid p { color: var(--cinza-600); font-size: 16px; margin: 0; }