/* ============================================================================
   AVA Residences , LP de uma dobra. CSS proprio e enxuto.

   Por que nao reaproveitamos o styles.css do portal Costa Dorata: aquele arquivo tem
   93 KB e cobre 40 modulos (blog, FAQ, plantas, bento, marquee, valorizacao). Esta
   pagina usa cinco. Escrever o proprio custa menos byte e menos manutencao , e a
   pagina inteira precisa caber numa tela sem rolagem no desktop.

   As cores NAO vieram da LP do portal: foram extraidas do PDF vetorial da marca
   (6. Logos/AVA-Logotipo e Decod-RGB.pdf), uma pagina por cor institucional.
   ============================================================================ */

:root{
  /* paleta oficial da marca */
  --marrom:#542611;
  --marrom-2:#6B3418;
  --marrom-deep:#341709;
  --agua:#889CA4;
  --areia:#DBBA9E;
  --creme:#F6EDDE;
  --branco:#FFFFFF;

  --ink:#2A1A12;
  --muted:#7A6857;
  --linha:rgba(84,38,17,.16);

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --raio:3px;
  --sombra:0 24px 60px rgba(20,9,4,.28);

  /* usada pelo JS de altura real da janela no celular (barra de endereco) */
  --vh:1vh;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:var(--marrom-deep);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* ---------------------------------------------------------------- estrutura */

.lp{
  position:relative;
  min-height:100svh;          /* svh = altura da janela SEM contar a barra do navegador
                                 que some ao rolar. Com 100vh o rodape ficava escondido
                                 atras da barra do Safari no iPhone. */
  display:flex;
  overflow:hidden;
}

/* ------------------------------------------------------- fundo / carrossel */

.fundo{position:absolute;inset:0;z-index:0}
.slides{position:absolute;inset:0}

.slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.1s ease-in-out;
  will-change:opacity;
}
.slide.is-ativo{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;object-position:center}

/* Escurece a foto o suficiente para o texto branco passar em contraste AA sem
   apagar a imagem. Duas camadas: uma vertical (protege topo e rodape) e uma
   lateral vinda da direita, onde fica o cartao do formulario. */
.scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(20,9,4,.62) 0%, rgba(20,9,4,.28) 34%, rgba(20,9,4,.34) 62%, rgba(20,9,4,.78) 100%),
    linear-gradient(90deg, rgba(20,9,4,.58) 0%, rgba(20,9,4,.18) 46%, rgba(20,9,4,.42) 100%);
  pointer-events:none;
}

.pontos{
  position:absolute;
  right:clamp(16px,3vw,36px);
  bottom:clamp(14px,2.4vw,26px);
  z-index:3;
  display:flex;gap:9px;
}
.pontos button{
  width:9px;height:9px;padding:0;
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.pontos button:hover{background:rgba(255,255,255,.5)}
.pontos button[aria-current]{background:var(--branco);transform:scale(1.18)}
.pontos button:focus-visible{outline:2px solid var(--branco);outline-offset:3px}

/* ------------------------------------------------------------- conteudo */

.conteudo{
  position:relative;z-index:2;
  width:100%;
  /* min-width:0 e obrigatorio aqui: em flex e grid o padrao e min-width:auto, que
     impede o item de encolher abaixo do seu conteudo mais largo. Como o .lp tem
     overflow:hidden, o excesso nao virava barra de rolagem , virava texto cortado
     pela direita no celular, sem nenhum sinal de que algo estava errado. */
  min-width:0;
  display:flex;flex-direction:column;
  /* Teto de largura + centralizacao: sem isso, em monitor largo a coluna de texto e o
     cartao do formulario iam para cantos opostos da tela e o meio ficava vazio. O teto
     segura os dois numa area lida de uma vez so. */
  max-width:1560px;
  margin:0 auto;
  padding:clamp(20px,2.4vw,34px) clamp(26px,5vw,88px);
  gap:clamp(14px,2vw,24px);
  color:var(--branco);
}

.topo{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.topo .logo{width:clamp(86px,8vw,124px);height:auto}

.tarja{
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:6px 12px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:100px;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
}

.dobra{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(360px,32vw,430px);
  gap:clamp(24px,4vw,64px);
  align-items:center;
}

/* --------------------------------------------------------------- pitch */

.pitch{max-width:640px;min-width:0}

.eyebrow{
  margin:0 0 14px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--areia);
}

h1{
  margin:0 0 16px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,5.1vw,62px);
  line-height:1.05;
  letter-spacing:-.01em;
  text-shadow:0 2px 22px rgba(20,9,4,.5);
}
h1 em{font-style:italic;color:var(--areia)}

.sub{
  margin:0 0 22px;
  max-width:47ch;
  font-size:clamp(14px,1.25vw,16px);
  line-height:1.6;
  color:rgba(255,255,255,.88);
}
.sub strong{font-weight:500;color:var(--branco)}

.numeros{
  list-style:none;margin:0 0 20px;padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:rgba(255,255,255,.2);      /* as "bordas" da grade sao o fundo aparecendo */
  border:1px solid rgba(255,255,255,.2);
}
.numeros li{
  min-width:0;
  background:rgba(20,9,4,.34);
  backdrop-filter:blur(2px);
  padding:11px 13px;
  font-size:12px;line-height:1.35;
  color:rgba(255,255,255,.82);
}
/* Numeros em Outfit, nao no serifado. O Cormorant Garamond usa algarismos de estilo
   antigo (oldstyle): o "1" sai sem barra e com serifa em cima e embaixo, entao
   "1.000 m" era lido como "I.000 m". Bonito num titulo, ruim num dado. */
.numeros b{
  display:block;
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(19px,1.9vw,24px);
  line-height:1.15;
  letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--branco);
  margin-bottom:3px;
}

.preco{
  margin:0 0 22px;
  font-size:clamp(15px,1.5vw,18px);
  color:rgba(255,255,255,.9);
}
.preco b{font-weight:500;color:var(--areia)}
.preco span{
  display:block;margin-top:3px;
  font-size:12px;color:rgba(255,255,255,.66);
}

/* ------------------------------------------------------------ contador */

/* O contador e o motor de urgencia da pagina, entao ele nao pode competir de igual
   para igual com o resto: ganha caixa propria, fundo escurecido e uma barra de cor
   que muda conforme a fase aperta. */
.countdown{
  display:inline-block;
  padding:clamp(12px,1.4vw,16px) clamp(16px,1.8vw,22px);
  border:1px solid rgba(255,255,255,.16);
  border-left:3px solid var(--areia);
  border-radius:var(--raio);
  background:rgba(20,9,4,.42);
  backdrop-filter:blur(3px);
  transition:border-color .4s ease, background .4s ease;
}
.countdown[data-nivel="atencao"]{border-left-color:#E0A66A}
.countdown[data-nivel="urgente"]{
  border-left-color:#D2703E;
  background:rgba(58,20,8,.5);
}
.countdown[data-nivel="aberto"]{border-left-color:var(--agua)}

.cd-faltam{
  margin:0 0 7px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--areia);
}
.countdown[data-nivel="urgente"] .cd-faltam{color:#F0A87C}

.cd-grade{display:flex;gap:clamp(10px,1.4vw,18px);align-items:flex-start}
.cd-grade span{display:flex;flex-direction:column;align-items:center;min-width:0}
.cd-grade b{
  /* Outfit, nao o serifado: aqui os digitos trocam a cada segundo e precisam ser
     inequivocos. tabular-nums trava a largura de cada algarismo, senao o bloco
     inteiro treme quando o "1" (estreito) vira "2". */
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(34px,4.2vw,52px);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--branco);
  font-variant-numeric:lining-nums tabular-nums;
}
.cd-grade i{
  font-style:normal;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-top:6px;
}

.cd-rotulo{
  margin:11px 0 0;
  font-size:13.5px;font-weight:400;
  color:var(--branco);
}
.cd-selo{
  margin:0;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(26px,3.2vw,38px);
  letter-spacing:-.01em;
  color:var(--branco);
}
.cd-apoio{
  margin:4px 0 0;
  font-size:12px;line-height:1.5;
  color:rgba(255,255,255,.66);
  max-width:44ch;
}

/* ------------------------------------------------------------- cadastro */

.cadastro{
  min-width:0;
  background:rgba(251,246,236,.97);
  color:var(--ink);
  border-radius:var(--raio);
  box-shadow:var(--sombra);
  padding:clamp(20px,2vw,28px);
  align-self:center;
}

.cadastro h2{
  margin:0 0 6px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(21px,2.1vw,26px);
  line-height:1.15;
  color:var(--marrom);
}
.cadastro-sub{
  margin:0 0 18px;
  font-size:12.5px;line-height:1.5;
  color:var(--muted);
}

.lead-form label{
  display:block;
  margin-bottom:11px;
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}

.lead-form input[type=text],
.lead-form input[type=tel],
.lead-form input[type=email]{
  display:block;width:100%;
  margin-top:5px;
  padding:10px 12px;
  font-family:var(--sans);font-size:14.5px;font-weight:300;
  color:var(--ink);
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--raio);
  text-transform:none;letter-spacing:normal;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.lead-form input::placeholder{color:#B6A796}
.lead-form input:focus{
  outline:none;
  border-color:var(--marrom);
  box-shadow:0 0 0 3px rgba(84,38,17,.12);
}
.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:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
}
.lf-pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lf-pill{
  margin:0;
  position:relative;
  border:1px solid var(--linha);
  border-radius:var(--raio);
  padding:9px 10px;
  cursor:pointer;
  background:var(--branco);
  transition:border-color .18s ease, background .18s ease;
}
.lf-pill input{position:absolute;opacity:0;width:0;height:0}
.lf-pill-t{
  font-size:12.5px;font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--ink);
}
.lf-pill:hover{border-color:var(--areia)}
.lf-pill.is-checked{border-color:var(--marrom);background:#F7EFE3}
.lf-pill:focus-within{box-shadow:0 0 0 3px rgba(84,38,17,.12)}

/* `.lead-form label` (0,1,1) e MAIS especifico que `.lf-consent` (0,1,0), entao a
   versao curta perdia e o aviso de LGPD saia todo em CAIXA ALTA com tracking de
   rotulo , ilegivel num paragrafo de duas linhas. Qualificar com o elemento empata a
   especificidade e a ordem no arquivo decide, que e o que queremos. */
.lead-form label.lf-consent{
  display:flex;gap:8px;align-items:flex-start;
  margin-bottom:14px;
  font-size:11px;line-height:1.45;letter-spacing:normal;text-transform:none;
  color:var(--muted);
}
.lf-consent input{margin:1px 0 0;accent-color:var(--marrom);flex:0 0 auto}
.lf-consent a{color:var(--marrom);text-underline-offset:2px}

.lf-submit{
  width:100%;
  padding:13px 18px;
  font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:.04em;
  color:var(--creme);
  background:var(--marrom);
  border:1px solid var(--marrom);
  border-radius:var(--raio);
  cursor:pointer;
  transition:background .2s ease, transform .12s ease;
}
.lf-submit:hover{background:var(--marrom-2)}
.lf-submit:active{transform:translateY(1px)}
.lf-submit:disabled{opacity:.6;cursor:progress}
.lf-submit:focus-visible{outline:2px solid var(--marrom);outline-offset:2px}

.lf-msg{
  margin:9px 0 0;
  min-height:1em;                 /* reserva a linha: a mensagem de erro nao pode
                                     empurrar o cartao e mexer no layout */
  font-size:12px;line-height:1.4;
  color:#9C3B1E;
}

/* --------------------------------------------------------------- rodape */

.rodape{
  flex:0 0 auto;
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  padding-top:clamp(10px,1.4vw,16px);
  border-top:1px solid rgba(255,255,255,.16);
}
.legal{font-size:9.5px;line-height:1.5;color:rgba(255,255,255,.5)}
.legal p{margin:0}
.legal a{color:rgba(255,255,255,.72);text-underline-offset:2px}

/* =========================================================== responsivo */

/* Notebook baixo: a dobra fica apertada, entao encolhemos o respiro e a grade
   de numeros vira 2 colunas em vez de 3. */
@media (max-height:760px) and (min-width:921px){
  .numeros li{padding:8px 11px;font-size:11px}
  .numeros b{font-size:20px}
  .sub{margin-bottom:14px}
  .preco{margin-bottom:14px}
  h1{font-size:clamp(30px,4vw,46px)}
}

/* Tablet e celular: empilha. O formulario vem DEPOIS do texto, porque a pessoa
   precisa saber o que esta pedindo antes de ver o campo , mas o contador fica
   colado nele, que e o par urgencia + acao. */
@media (max-width:920px){
  .lp{min-height:auto}
  .conteudo{
    min-height:100svh;
    padding:20px 24px 26px;
    gap:18px;
  }
  .fundo{position:fixed}          /* a foto fica parada enquanto o conteudo rola */
  .dobra{
    /* minmax(0,1fr) e nao 1fr: "1fr" vale "minmax(auto,1fr)", e o `auto` deixa a coluna
       crescer ate o conteudo mais largo em vez de encolher. No celular isso estourava a
       tela , o h1 e o paragrafo saiam cortados pela direita (o .lp tem overflow:hidden,
       entao nem barra de rolagem aparecia para denunciar). */
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    align-items:start;
  }
  .pitch{max-width:none}
  /* o rotulo do topo quebrava em "MAQUINE /" + "RS"; encolher o tracking o faz caber
     numa linha so nas telas de 360 px para cima */
  .eyebrow{font-size:10px;letter-spacing:.13em}
  h1{font-size:clamp(28px,7.6vw,42px)}
  /* a quebra escrita a mao serve ao desktop; no celular ela cria uma 2a linha longa
     demais para caber, entao aqui o texto quebra sozinho onde couber */
  h1 br{display:none}
  .sub{max-width:none}
  .numeros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cadastro{align-self:stretch}
  .pontos{
    position:static;
    justify-content:center;
    margin-top:2px;
  }
  .rodape{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (max-width:400px){
  .lf-2col{grid-template-columns:1fr}
  .cd-grade{gap:14px}
}

/* Quem pediu menos movimento no sistema nao ve o crossfade nem transicao alguma. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}