/* ============================================================
   ESTILO — Roseli Bordieri Arquiteta · Paraty/RJ
   Paleta: verdes da Mata Atlântica + terracota + amarelo gema
   Para mudar uma cor do site inteiro, edite só as variáveis abaixo.
   ============================================================ */

:root{
  /* --- Paleta --- */
  --verde-escuro:  #1E4436;   /* mata densa — fundos escuros, títulos */
  --verde-medio:   #2F7455;   /* folhagem — botões, links */
  --verde-suave:   #DCE9DD;   /* clareira — detalhes claros */
  --terracota:     #A64B28;   /* barro de Paraty — destaques, ícones, eyebrows */
  --terracota-claro:#F7E8DF;  /* barro lavado — fundo de seção */
  --terracota-suave:#E9A883;  /* barro claro — texto sobre fundo escuro */
  --amarelo-gema:  #F0B429;   /* gema — acentos sutis (sublinhados, ícones) */
  --areia:         #F7F3EA;   /* areia clara — fundo alternativo */
  --branco:        #FDFBF7;   /* branco quente — fundo base */
  --texto:         #33413A;   /* verde-grafite — texto corrido */
  --texto-suave:   #66736B;
  --borda:         #E6E0D3;

  /* --- Fontes --- */
  --fonte-logo:    'Impact', 'Anton', 'Franklin Gothic Bold', sans-serif;
  --fonte-titulo:  'Lora', Georgia, serif;
  --fonte-corpo:   'Manrope', 'Helvetica Neue', sans-serif;

  --raio: 16px;
  --raio-g: 26px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{ background:var(--branco); color:var(--texto); font-family:var(--fonte-corpo); line-height:1.65; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }
section{ padding:96px 0; }
h2{ font-family:var(--fonte-titulo); font-weight:500; font-size:40px; line-height:1.15; color:var(--verde-escuro); margin-bottom:16px; }
h3{ font-family:var(--fonte-corpo); font-weight:700; }
.so-desktop{ display:inline; }

/* Frisinho amarelo-gema sob os títulos: alegria em dose sutil */
h2::after{
  content:""; display:block; width:56px; height:4px; border-radius:99px;
  background:var(--amarelo-gema); margin-top:14px;
}
.centro h2::after{ margin-left:auto; margin-right:auto; }

.eyebrow{
  display:block; font-size:12.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--terracota); margin-bottom:10px;
}
.eyebrow.claro{ color:var(--terracota-suave); }

/* ---------- Logotipo (reproduz o logo em fonte Impact) ---------- */
.logo{ font-family:var(--fonte-logo); line-height:.95; display:inline-flex; flex-direction:column; text-decoration:none; }
.logo-arquiteta{ letter-spacing:.06em; text-transform:uppercase; }
.logo-roseli{ color:#8a8a8a; font-size:.8em; } /* "Roseli" 20% menor que "Bordieri" */
.logo-bordieri{ color:#1c1c1c; }

/* ---------- Cabeçalho fixo ---------- */
.topo{
  position:sticky; top:0; z-index:60;
  background:rgba(253,251,247,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--borda);
}
/* logo ocupando quase toda a altura da barra, para não ficar miúdo perto do resto do site */
.barra{ display:flex; align-items:center; justify-content:space-between; padding-top:9px; padding-bottom:9px; }
.logo-menu .logo-arquiteta{ font-size:14px; color:var(--verde-medio); text-align:right; }
.logo-menu .logo-nomes{ font-size:32px; }
.topo nav{ display:flex; align-items:center; gap:26px; }
.topo nav a{ font-size:14px; font-weight:600; text-decoration:none; color:var(--texto); }
.topo nav a:hover{ color:var(--verde-medio); }
/* o botão do menu é verde escuro: texto sempre branco */
.topo nav a.btn, .topo nav a.btn:hover{ color:#fff; }
.menu-toggle{ display:none; background:none; border:none; font-size:26px; color:var(--verde-escuro); cursor:pointer; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fonte-corpo); font-weight:700; font-size:14px;
  background:var(--verde-medio); color:#fff; text-decoration:none;
  border:none; border-radius:999px; padding:13px 26px; cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{ background:var(--verde-escuro); }
.btn-mini{ padding:9px 18px; font-size:13px; }
.btn-cheio{ width:100%; }

/* ---------- Hero (Home) ---------- */
.hero{
  min-height:92vh; padding:0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; position:relative;
  background:
    linear-gradient(180deg, rgba(20,45,34,.28) 0%, rgba(20,45,34,.55) 100%),
    url('../imagens/banner.jpg') center/cover no-repeat,
    linear-gradient(160deg, #2F7455 0%, #1E4436 55%, #143024 100%);
}
.hero-conteudo{ padding:40px 24px; max-width:820px; }
.logo-hero .logo-arquiteta{ font-size:clamp(17.6px, 2.86vw, 28.6px); color:var(--amarelo-gema); text-align:right; margin-bottom:2px; }
.logo-hero .logo-nomes{ font-size:clamp(44px, 8vw, 84px); }
.logo-hero .logo-roseli{ color:#d9d9d9; }
.logo-hero .logo-bordieri{ color:#ffffff; }
.hero-frase{
  font-family:var(--fonte-titulo); font-weight:400;
  font-size:clamp(18px, 2.4vw, 24px); line-height:1.5;
  color:#F3EFE4; margin:28px auto 44px; max-width:640px;
}
.hero-rolar{
  display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  color:#F8E7B0; text-decoration:none; font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.hero-rolar svg{ width:22px; height:22px; animation:flutuar 1.6s ease-in-out infinite; }
@keyframes flutuar{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* ---------- Quem somos / O Estúdio ---------- */
/* Coluna de texto centralizada (a frase cursiva já era centralizada) */
.estudio-texto{ text-align:center; }
.estudio-texto h2{ text-wrap:balance; }
.estudio-texto h2::after{ margin-left:auto; margin-right:auto; }
.estudio-texto .frase-destaque{ margin-left:auto; margin-right:auto; }

.grade-2{ display:grid; grid-template-columns:0.85fr 1fr; gap:56px; align-items:center; }
/* Texto curto: fonte maior e linhas soltas, para a coluna respirar sem parecer vazia */
.quem-somos p{
  color:var(--texto-suave);
  font-size:clamp(15px, 1.45vw, 19.5px);   /* 15% menor */
  line-height:1.5;                          /* linhas mais próximas */
  max-width:38ch;
  margin:0 auto;
}
.foto-quem-somos{
  aspect-ratio:4/5; border-radius:var(--raio-g); overflow:hidden;
  background:
    url('../imagens/o-estudio.jpg') center/cover no-repeat,
    linear-gradient(150deg, var(--verde-suave), var(--terracota-claro));
  box-shadow:12px 12px 0 var(--terracota-claro);
}
.quem-somos .frase-destaque{
  font-family:'Caveat', cursive; font-weight:600;
  font-size:clamp(30px, 2.9vw, 38px); line-height:1.3; color:var(--terracota);
  margin-top:46px; max-width:38ch; text-align:center;
}

/* ---------- Seções de portfólio ---------- */
.alt-areia{ background:var(--areia); }
.alt-terracota{ background:var(--terracota-claro); }
.cabeca-secao{ max-width:600px; margin-bottom:44px; }
.cabeca-secao.centro{ margin-left:auto; margin-right:auto; text-align:center; }
.cabeca-secao p{ color:var(--texto-suave); }

.grade-projetos{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cartao{
  border-radius:var(--raio); overflow:hidden; background:#fff;
  border:1px solid var(--borda); cursor:pointer; text-align:left;
  padding:0; font:inherit; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cartao:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(30,68,54,.14); }
.cartao-capa{
  height:210px; position:relative;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.cartao-capa.sem-foto{
  background:linear-gradient(140deg, var(--verde-suave), #EAF0E4 55%, var(--terracota-claro));
}
.cartao-capa.sem-foto::after{
  content:"fotos em breve"; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--verde-medio); background:rgba(255,255,255,.75); padding:7px 14px; border-radius:999px;
}
.cartao-info{ padding:16px 18px 18px; }
.cartao-info h3{ font-family:var(--fonte-titulo); font-weight:600; font-size:20px; color:var(--verde-escuro); }
.cartao-info span{ font-size:12.5px; color:var(--texto-suave); }
.cartao-info .ver{
  display:inline-block; margin-top:8px; font-size:12.5px; font-weight:800;
  color:var(--terracota);
}

/* ---------- Outros serviços ---------- */
.grade-servicos{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.servico{ background:#fff; border:1px solid var(--borda); border-radius:var(--raio); padding:28px 22px; text-align:center; }
.servico-icone{
  width:46px; height:46px; border-radius:50%; margin:0 auto 16px;
  background:var(--verde-suave); color:var(--verde-escuro);
  display:flex; align-items:center; justify-content:center;
}
.servico-icone svg{ width:22px; height:22px; }
.servico h3{ font-size:16.5px; margin-bottom:6px; color:var(--verde-escuro); }
.servico p{ font-size:14px; color:var(--texto-suave); }

/* ---------- Contato ---------- */
.contato{ background:var(--verde-escuro); color:#fff; }
.contato h2{ color:#fff; }
/* Grade da seção: título em cima (esquerda) e, na linha de baixo,
   os canais de contato e o formulário — que começam e terminam juntos. */
.contato .wrap{
  display:grid;
  grid-template-columns:0.85fr 1fr;
  grid-template-rows:auto 1fr;
  column-gap:56px;
}
.contato-intro{ grid-column:1; grid-row:1; }
.contato-canais{ grid-column:1; grid-row:2; }
.contato .form-contato{ grid-column:2; grid-row:2; }
.contato-texto{ color:#CFDDD2; margin-bottom:30px; max-width:46ch; }
.contato-canais{ display:flex; flex-direction:column; gap:14px; }
.contato-canais .canal{ flex:1; }   /* os cartões esticam para casar com a altura do formulário */
.canal{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--raio); padding:13px 16px;
}
a.canal:hover{ background:rgba(255,255,255,.12); }
.canal-icone{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  background:var(--terracota); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.canal-icone svg{ width:19px; height:19px; }
.canal small{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#A9C3B2; }
.canal span:last-child{ font-weight:600; font-size:15px; }
.form-contato{ background:var(--branco); border-radius:var(--raio-g); padding:32px; color:var(--texto); }
.campo{ margin-bottom:16px; }
.campo label{ display:block; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--texto-suave); margin-bottom:6px; }
.campo input, .campo textarea{
  width:100%; border:1px solid var(--borda); border-radius:10px;
  background:#fff; padding:12px 14px; font-size:14px; font-family:var(--fonte-corpo); color:var(--texto);
}
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--terracota); }
.campo textarea{ min-height:110px; resize:vertical; }
/* Armadilha anti-robô: fora da tela, mas sem sumir para leitores de tela mal-humorados */
.campo-oculto{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Aviso depois do envio do formulário */
.aviso-form{
  border-radius:12px; padding:14px 16px; margin-bottom:18px;
  font-size:14.5px; font-weight:600; line-height:1.45;
}
.aviso-form[hidden]{ display:none; }
.aviso-form.ok{ background:var(--verde-suave); color:var(--verde-escuro); }
.aviso-form.falhou{ background:#F7E1D8; color:var(--terracota); }

/* ---------- Rodapé (2/3 arquiteta | 1/3 desenvolvedora) ---------- */
.rodape{ background:#142D22; color:#B9CCC0; padding:34px 0; text-align:center; }
.rodape .wrap{ position:relative; }
.rodape-marca{ text-align:center; }
.logo-rodape{ margin-bottom:12px; }
.logo-rodape .logo-arquiteta{ font-size:14px; color:var(--amarelo-gema); text-align:right; }
.logo-rodape .logo-nomes{ font-size:32px; }
.logo-rodape .logo-roseli{ color:#93a39a; }
.logo-rodape .logo-bordieri{ color:#fff; }
.rodape p{ font-size:16px; margin-bottom:8px; }
.rodape small{ font-size:12px; color:#7E948A; }
/* Link discreto para a política de privacidade */
.link-politica{
  display:block; width:fit-content; margin:10px auto 0;
  font-size:11px; color:#7E948A; text-decoration:none;
  border-bottom:1px solid rgba(126,148,138,.45);
}
.link-politica:hover, .link-politica:focus-visible{ color:#CFDDD2; border-bottom-color:#CFDDD2; }

/* ---------- Créditos da desenvolvedora (E-Loja) ---------- */
/* Atalho de WhatsApp no rodapé, à esquerda dos créditos */
.whats-rodape{
  position:absolute; right:200px; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:var(--amarelo-gema); color:var(--verde-escuro);
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.whats-rodape svg{ width:30px; height:30px; }
.whats-rodape:hover, .whats-rodape:focus-visible{
  transform:translateY(-50%) scale(1.08); box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.whats-rodape:focus-visible{ outline:3px solid var(--amarelo-gema); outline-offset:3px; }

/* Encostado no canto direito do rodapé, sem empurrar o bloco da arquiteta */
.creditos{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.creditos-rotulo{
  font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#6D8578;
}
/* Fundo azul-marinho da marca, com cantos arredondados — é um link para o site da E-Loja */
.creditos-marca{
  display:block;
  width:132px; height:48px; border-radius:10px;
  background:#030F2E url('../imagens/logo-eloja.png') center/76% auto no-repeat;
  transition:transform .18s ease, box-shadow .18s ease;
}
.creditos-marca:hover, .creditos-marca:focus-visible{
  transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.3);
}
.creditos-marca:focus-visible{ outline:2px solid var(--amarelo-gema); outline-offset:3px; }

/* ---------- Botão flutuante de WhatsApp ---------- */
.whats-flutuante{
  position:fixed; right:22px; bottom:22px; z-index:55;
  width:60px; height:60px; border-radius:50%;
  background:var(--amarelo-gema); color:var(--verde-escuro);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(30,68,54,.28);
  transition:transform .18s ease, box-shadow .18s ease;
}
.whats-flutuante svg{ width:34px; height:34px; }
.whats-flutuante:hover, .whats-flutuante:focus-visible{
  transform:scale(1.08); box-shadow:0 12px 28px rgba(30,68,54,.36);
}
.whats-flutuante:focus-visible{ outline:3px solid var(--verde-escuro); outline-offset:3px; }
/* pulso suave, para o botão não passar despercebido */
.whats-flutuante::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--amarelo-gema); opacity:.55; z-index:-1;
  animation:pulso-whats 2.6s ease-out infinite;
}
@keyframes pulso-whats{
  0%{ transform:scale(1); opacity:.5; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .whats-flutuante::before{ animation:none; }
  .hero-rolar svg{ animation:none; }
}
@media (max-width: 600px){
  .whats-flutuante{ right:16px; bottom:16px; width:54px; height:54px; }
  .whats-flutuante svg{ width:30px; height:30px; }
}

/* ---------- Lightbox (fotos do projeto) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(16,30,24,.86); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:24px;
}
.lightbox.aberto{ display:flex; }
.lightbox-caixa{
  background:var(--branco); border-radius:var(--raio-g); overflow:hidden;
  width:min(920px, 100%); position:relative;
}
.lb-fechar{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(20,45,34,.65); color:#fff; font-size:16px;
}
.lb-fechar:hover{ background:var(--terracota); }
.lb-foto-area{ position:relative; background:#0f1f18; }
#lb-foto{ width:100%; height:min(62vh, 560px); object-fit:contain; }
#lb-video{ width:100%; height:min(62vh, 560px); background:#0f1f18; display:block; }
#lb-video[hidden]{ display:none; }
.lb-seta{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(253,251,247,.9); color:var(--verde-escuro); font-size:26px; line-height:1;
}
.lb-seta:hover{ background:var(--amarelo-gema); }
.lb-ant{ left:14px; } .lb-prox{ right:14px; }
.lb-rodape{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px; }
.lb-rodape h3{ font-family:var(--fonte-titulo); font-weight:600; font-size:22px; color:var(--verde-escuro); }
.lb-rodape span{ display:block; font-size:13px; color:var(--texto-suave); }
/* Nome da foto — cursiva em verde escuro, logo acima do local */
.lb-rodape #lb-legenda{
  font-family:'Caveat', cursive; font-weight:600;
  font-size:24px; line-height:1.15; color:var(--verde-escuro);
  margin:2px 0 1px;
}
.lb-rodape #lb-legenda[hidden]{ display:none; }
.lb-bolinhas{ display:flex; gap:8px; }
.lb-bolinhas i{ width:9px; height:9px; border-radius:50%; background:var(--borda); }
.lb-bolinhas i.ativa{ background:var(--terracota); }

/* ---------- Responsivo (celular e tablet) ---------- */
@media (max-width: 960px){
  section{ padding:72px 0; }
  h2{ font-size:32px; }
  .so-desktop{ display:none; }
  .menu-toggle{ display:block; }
  .topo nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--branco); border-bottom:1px solid var(--borda); padding:8px 28px 20px;
  }
  .topo nav.aberto{ display:flex; }
  .topo nav a{ padding:11px 0; width:100%; }
  .grade-2{ grid-template-columns:1fr; gap:36px; }
  .grade-projetos{ grid-template-columns:1fr 1fr; }
  .grade-servicos{ grid-template-columns:1fr 1fr; }
  /* Contato empilha: título, canais e formulário, um sob o outro */
  .contato .wrap{ grid-template-columns:1fr; grid-template-rows:auto auto auto; row-gap:30px; }
  .contato-intro, .contato-canais, .contato .form-contato{ grid-column:1; grid-row:auto; }
  .contato-canais .canal{ flex:initial; }
}
@media (max-width: 600px){
  .grade-projetos{ grid-template-columns:1fr; }
  .grade-servicos{ grid-template-columns:1fr; }
  .numeros{ gap:24px; }
  .lb-rodape{ flex-direction:column; align-items:flex-start; }
  /* Rodapé volta a empilhar: não cabe lado a lado em tela estreita */
  .whats-rodape{ position:static; transform:none; margin:24px auto 0; }
  .whats-rodape:hover{ transform:scale(1.08); }
  .creditos{
    position:static; transform:none; margin-top:26px;
    padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
  }
  .logo-rodape .logo-nomes{ font-size:28px; }
}