/* Estilos do site Dom de Celebrar — usados por index.html e briefing.html */
:root{
  /* Paleta tirada do proprio logo: o marrom #7A5C4C sobre o creme #FCF0E2.
     A tinta e uma versao escura do mesmo marrom, para o texto ficar legivel
     sem sair da familia de cor da marca. */
  --papel:#FCF3E9; --papel-alt:#F4E7D8; --creme:#FFFAF3;
  --tinta:#3A2C24; --tinta-suave:#6B564A; --muted:#7E6959; --fraco:#9C8877;
  --accent:#7A5C4C; --accent-esc:#5B4234; --accent-claro:#C2A38E;
  --zap:#25D366; --zap-esc:#1DA851;
  --borda:rgba(58,44,36,0.14);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Karla',Helvetica,Arial,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:17px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none; transition:color .18s}
a:hover{color:var(--accent-esc)}
::selection{background:#E9D8CF}
h1,h2,h3{font-family:var(--serif); font-weight:500; margin:0; text-wrap:pretty}
@keyframes sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.wrap{max-width:var(--wrap); margin:0 auto; padding-left:32px; padding-right:32px}
.eyebrow{margin:0 0 14px; font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted)}
.h2{font-size:42px; line-height:1.1}
.lead{font-size:18px; font-weight:400; color:var(--tinta-suave)}

/* botoes */
.btn{display:inline-flex; align-items:center; gap:9px; padding:15px 27px; border-radius:999px;
     font-weight:600; font-size:15px; border:1.5px solid transparent; cursor:pointer;
     transition:transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s}
.btn-escuro{background:var(--tinta); color:var(--papel)}
.btn-escuro:hover{background:var(--accent); color:var(--creme)}
/* Botao principal em carvao, a cor do proprio logo. O terracota preenchido puxava
   para laranja e brigava com a marca, que e monocromatica -- ele fica melhor como
   acento de texto (rotulos, links, filetes) do que como fundo de botao. */
.btn-accent{background:var(--tinta); color:var(--creme)}
.btn-accent:hover{background:var(--accent); color:var(--creme)}
.btn-linha{border-color:rgba(58,44,36,.42); border-width:1.5px; color:var(--tinta); font-weight:600}
.btn-linha:hover{border-color:var(--accent); color:var(--accent)}
.btn-sm{padding:12px 22px; font-size:14.5px}

/* header */
header.topo{position:sticky; top:0; z-index:60; background:rgba(252,243,233,.93);
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(58,44,36,.1)}
header.topo .wrap{display:flex; align-items:center; justify-content:space-between; gap:36px; padding-top:12px; padding-bottom:12px}
header.topo img{height:52px; width:auto}
/* O menu repete o tratamento da faixa do logo: caixa alta, tracking largo, corpo
   pequeno. Em sentenca e 14.5px ele nao conversava com a marca. */
nav.menu{display:flex; align-items:center; gap:30px}
nav.menu a{position:relative; font-size:11.5px; font-weight:600; letter-spacing:.17em;
  text-transform:uppercase; color:var(--tinta-suave); padding:6px 0}
nav.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .22s}
nav.menu a:hover{color:var(--tinta)}
nav.menu a:hover::after{transform:scaleX(1)}

/* hero */
#topo{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:end; padding-top:64px; padding-bottom:48px}
#topo .txt{animation:sobe .7s ease both}
#topo .tags{margin:0 0 22px; font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--accent)}
#topo h1{font-size:70px; line-height:1.04; letter-spacing:-.015em}
#topo h1 em{font-style:italic; color:var(--accent)}
#topo .sub{margin:26px 0 0; max-width:46ch; font-size:19px; font-weight:400; color:var(--tinta-suave)}
/* vale para qualquer par de botoes da pagina, nao so o do hero */
.acoes{display:flex; flex-wrap:wrap; gap:12px}
#topo .acoes{margin-top:34px}
#topo .selos{display:flex; flex-wrap:wrap; gap:26px; margin-top:44px; padding-top:24px;
  border-top:1px solid var(--borda); font-size:13.5px; color:var(--fraco)}
.mosaico{display:grid; grid-template-columns:1fr 1fr; gap:13px; animation:sobe .95s ease both}
.mosaico figure{margin:0; border-radius:14px; overflow:hidden; background:var(--papel-alt)}
.mosaico img{width:100%; height:100%; object-fit:cover}
.mosaico .grande{grid-column:1 / -1; aspect-ratio:16/11}
.mosaico .peq{aspect-ratio:1/1}

/* secoes: os fundos alternam para uma nao encostar na outra */
section{padding-top:78px; padding-bottom:78px}
.linha-topo{border-top:1px solid var(--borda)}
.faixa-clara{background:var(--papel)}
.faixa-areia{background:var(--papel-alt); border-top:1px solid rgba(58,44,36,.09);
  border-bottom:1px solid rgba(58,44,36,.09)}

.sobre-grade{display:grid; grid-template-columns:.32fr .68fr; gap:52px}
.tres{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
.tres .num{margin:0; font-family:var(--serif); font-size:32px; color:var(--accent)}
.tres p+p{margin:8px 0 0; font-size:15px; color:var(--muted)}

/* servicos */
#servicos{background:var(--papel); border-top:1px solid rgba(58,44,36,.09)}
.cabeca-flex{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px}
.quatro{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:42px}
.card-serv{background:var(--papel); border:1px solid rgba(58,44,36,.08); border-radius:14px;
  padding:22px; display:flex; flex-direction:column; gap:13px; transition:border-color .18s}
.card-serv:hover{border-color:var(--accent)}
.card-serv .foto{aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--papel-alt)}
.card-serv .foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.card-serv:hover .foto img{transform:scale(1.04)}
.card-serv h3{font-weight:600; font-size:25px; line-height:1.15}
.card-serv p{margin:0; font-size:15px; color:var(--muted)}
.card-serv .inclui{margin:auto 0 0; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.faixa-extra{background:var(--papel); border:1px solid rgba(58,44,36,.08); border-radius:14px;
  padding:26px 24px; margin-top:16px; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:20px}
.faixa-extra h3{font-weight:500; font-size:25px}

/* passos */
.passos{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
.passo{padding:26px 26px 26px 0; border-top:1px solid rgba(58,44,36,.18);
  display:flex; flex-direction:column; gap:12px}
.passo .n{font-family:var(--serif); font-size:15px; letter-spacing:.2em; color:var(--accent)}
.passo h3{font-weight:600; font-size:26px; line-height:1.12}
.passo p{margin:0; font-size:15.5px; color:var(--muted); max-width:32ch}
.passo .prazo{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--fraco)}

/* galeria */
#galeria{background:var(--tinta); color:var(--creme)}
#galeria .eyebrow{color:var(--accent-claro)}
#galeria .h2{color:var(--papel)}
.albuns{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px}
.album{margin:0; background:none; border:0; padding:0; text-align:left; cursor:pointer;
  color:inherit; font:inherit; display:flex; flex-direction:column; gap:14px}
.album .capa{position:relative; aspect-ratio:4/5; border-radius:14px; overflow:hidden; background:#4A382E}
.album .capa img{width:100%; height:100%; object-fit:cover; transition:transform .55s}
.album:hover .capa img{transform:scale(1.05)}
.album .cont{position:absolute; left:14px; bottom:12px; background:rgba(58,44,36,.82);
  color:#DFCBB8; font:11px/1.4 ui-monospace,Menlo,monospace; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 11px; border-radius:999px}
.album h3{font-weight:500; font-size:26px; line-height:1.15; color:var(--papel)}
.album .cat{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-claro)}
.album p{margin:0; font-size:15px; color:#BCA695}
.album .ver{font-size:13.5px; color:var(--accent-claro); border-bottom:1px solid rgba(230,195,174,.4); align-self:flex-start}
#galeria .rodape-nota{margin:30px 0 0; font-size:15px; color:#BCA695}
#galeria .rodape-nota a{color:var(--accent-claro); border-bottom:1px solid rgba(230,195,174,.4)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:200; background:rgba(26,19,15,.96); display:none;
  flex-direction:column; padding:22px}
.lb.on{display:flex}
.lb-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  max-width:1180px; margin:0 auto; width:100%; color:#DFCBB8}
.lb-topo h3{font-size:27px; color:var(--papel); font-weight:400}
.lb-topo .cat{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-claro); margin-bottom:6px}
.lb-fechar{background:none; border:1px solid rgba(228,215,204,.35); color:#DFCBB8; cursor:pointer;
  width:42px; height:42px; border-radius:999px; font-size:20px; line-height:1; flex:none}
.lb-fechar:hover{border-color:var(--accent-claro); color:var(--accent-claro)}
.lb-palco{flex:1; min-height:0; display:flex; align-items:center; gap:16px;
  max-width:1180px; margin:16px auto; width:100%}
.lb-palco img{flex:1; min-width:0; max-height:100%; width:auto; margin:0 auto;
  object-fit:contain; border-radius:12px; cursor:zoom-in}
.lb-nav{background:none; border:1px solid rgba(228,215,204,.35); color:#DFCBB8; cursor:pointer;
  width:46px; height:46px; border-radius:999px; font-size:20px; line-height:1; flex:none}
.lb-nav:hover{border-color:var(--accent-claro); color:var(--accent-claro)}
.lb-pe{max-width:1180px; margin:0 auto; width:100%; color:#BCA695; font-size:15px;
  display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:flex-start}
.lb-pe p{margin:0; max-width:78ch}
.lb-contador{font:12px/1.4 ui-monospace,Menlo,monospace; letter-spacing:.1em; flex:none}

/* faq */
.duvidas-grade{display:grid; grid-template-columns:.34fr .66fr; gap:52px}
.faq-item{border-top:1px solid rgba(58,44,36,.14)}
.faq-bt{width:100%; background:none; border:0; padding:22px 0; display:flex; align-items:center;
  justify-content:space-between; gap:20px; text-align:left; cursor:pointer; font:inherit}
.faq-bt span:first-child{font-family:var(--serif); font-size:24px; line-height:1.2; color:var(--tinta)}
.faq-sinal{font-size:22px; color:var(--accent); line-height:1}
.faq-resp{margin:0 0 24px; max-width:60ch; font-size:16.5px; color:var(--tinta-suave); display:none}
.faq-item.aberto .faq-resp{display:block}

/* orcamento / briefing */
#orcamento{background:var(--papel-alt); border-top:1px solid rgba(58,44,36,.1)}
#orcamento .grade{display:grid; grid-template-columns:.34fr .66fr; gap:48px; align-items:start}
.contatos{display:flex; flex-direction:column; gap:14px; margin-top:32px; padding-top:26px;
  border-top:1px solid rgba(58,44,36,.14); font-size:16px}
.contatos a{color:var(--tinta)}
.contatos a:hover{color:var(--accent)}
.aviso-lat{margin-top:26px; padding:18px 20px; background:var(--papel); border-left:2px solid var(--accent);
  border-radius:0 3px 3px 0; font-size:14.5px; color:var(--muted)}

.campos{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label.campo{display:flex; flex-direction:column; gap:7px; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fraco)}
.campos .full{grid-column:1 / -1}
label.campo input, label.campo select, label.campo textarea{
  border:0; border-bottom:1px solid rgba(58,44,36,.22); background:none; padding:9px 0;
  font-family:var(--sans); font-size:16.5px; letter-spacing:normal; text-transform:none;
  color:var(--tinta); outline:none; width:100%}
label.campo input:focus, label.campo select:focus, label.campo textarea:focus{border-bottom-color:var(--accent)}
label.campo textarea{resize:vertical; line-height:1.5}
label.campo .dica{font-size:12px; letter-spacing:normal; text-transform:none; color:var(--fraco); margin-top:-2px}

/* caixas de multipla escolha */
.opcoes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; grid-column:1 / -1}
.opcoes.tres-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.opc-cx{display:flex; align-items:flex-start; gap:9px; font-size:15px; color:var(--tinta);
  letter-spacing:normal; text-transform:none; cursor:pointer; line-height:1.4}
.opc-cx input{width:17px; height:17px; margin:2px 0 0; accent-color:var(--accent); flex:none; cursor:pointer}
.rotulo-grupo{grid-column:1 / -1; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fraco); margin-bottom:-4px}

.envio{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding-top:22px;
  border-top:1px solid rgba(58,44,36,.14)}
.status{font-size:13.5px; color:var(--fraco); flex-basis:100%}
.status.erro{color:var(--accent-esc)}
.status.ok{color:#4A7A52}

/* instagram */
.insta-grade{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:32px}
.insta-grade a{aspect-ratio:1/1; border-radius:10px; overflow:hidden; display:block; background:var(--papel-alt)}
.insta-grade img{width:100%; height:100%; object-fit:cover; transition:transform .45s, filter .25s}
.insta-grade a:hover img{transform:scale(1.06); filter:brightness(.95)}

/* footer */
footer.pe{background:var(--tinta); color:#C9B4A2}
footer.pe .grade{display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:start;
  padding-top:60px; padding-bottom:32px}
footer.pe img{height:104px; width:auto; margin:-10px 0 0 -10px}
footer.pe p{margin:10px 0 0; max-width:40ch; font-size:15.5px}
footer.pe .links{display:flex; flex-direction:column; gap:11px; font-size:15.5px}
footer.pe .links a{color:var(--accent-claro)}
footer.pe .fim{border-top:1px solid rgba(250,246,240,.14); padding-top:20px; padding-bottom:40px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:13px; color:#9C8877}

@media (max-width:900px){
  .wrap{padding-left:20px; padding-right:20px}
  section{padding-top:56px; padding-bottom:56px}
  nav.menu{display:none}
  header.topo img{height:50px}
  #topo{grid-template-columns:minmax(0,1fr); gap:38px; padding-top:44px}
  #topo h1{font-size:42px}
  .h2{font-size:31px}
  .sobre-grade, .duvidas-grade, #orcamento .grade{grid-template-columns:minmax(0,1fr); gap:28px}
  .tres{grid-template-columns:minmax(0,1fr)}
  .quatro{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .passos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .albuns{grid-template-columns:minmax(0,1fr)}
  .insta-grade{grid-template-columns:repeat(3,minmax(0,1fr))}
    footer.pe .grade{grid-template-columns:minmax(0,1fr)}
  .lb-palco{gap:8px}
  .lb-nav{width:38px; height:38px}
}
@media (max-width:560px){
  .quatro{grid-template-columns:minmax(0,1fr)}
  .passos{grid-template-columns:minmax(0,1fr)}
  #topo h1{font-size:36px}
}

/* ================= chamada do orcamento na home ================= */
.previa{background:var(--papel); border:1px solid rgba(58,44,36,.1); border-radius:5px; padding:26px 28px}
.previa-tit{margin:0 0 16px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent)}
.previa ol{margin:0; padding:0; list-style:none; counter-reset:p}
.previa li{counter-increment:p; padding:12px 0; border-top:1px solid rgba(58,44,36,.1);
  display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:baseline}
.previa li::before{content:counter(p,upper-roman); grid-row:1 / 3; font-family:var(--serif);
  font-size:14px; letter-spacing:.14em; color:var(--accent); min-width:26px}
.previa li b{font-weight:400; font-size:16.5px}
.previa li span{font-size:14px; color:var(--muted)}
.previa-pe{margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(58,44,36,.1);
  font-size:14px; color:var(--muted)}

/* ================= pagina do briefing ================= */
.pagina-briefing .topo-briefing{padding-top:52px; padding-bottom:8px}
.voltar{display:inline-block; margin-bottom:22px; font-size:14px; color:var(--muted)}
.voltar:hover{color:var(--accent)}
.topo-briefing h1{font-family:var(--serif); font-weight:300; font-size:52px; line-height:1.06; margin:6px 0 0}
.topo-briefing .sub{margin:18px 0 0; max-width:52ch; font-size:18px; color:var(--tinta-suave)}
.bloco-form{display:grid; grid-template-columns:1fr .38fr; gap:36px; align-items:start;
  padding-top:38px; padding-bottom:78px}
.ajuda{background:var(--papel-alt); border-radius:5px; padding:26px 28px; position:sticky; top:104px}
.ajuda ol{margin:0; padding:0; list-style:none; counter-reset:a}
.ajuda li{counter-increment:a; padding:12px 0; border-top:1px solid rgba(58,44,36,.12);
  display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:baseline}
.ajuda li::before{content:counter(a); grid-row:1 / 3; font-family:var(--serif); font-size:15px;
  color:var(--accent); min-width:18px}
.ajuda li b{font-weight:400; font-size:16px}
.ajuda li span{font-size:14px; color:var(--muted)}
.ajuda .previa-pe{border-top-color:rgba(58,44,36,.12)}
@media (max-width:900px){
  .previa{padding:22px}
  .topo-briefing h1{font-size:36px}
  .bloco-form{grid-template-columns:minmax(0,1fr); gap:24px; padding-bottom:52px}
  .ajuda{position:static}
}

/* ================= pagina de obrigado ================= */
.recebido{padding-top:76px; padding-bottom:96px; max-width:760px}
.recebido h1{font-family:var(--serif); font-weight:300; font-size:54px; line-height:1.06; margin:6px 0 0}
.recebido .sub{margin:20px 0 0; font-size:18.5px; color:var(--tinta-suave); max-width:54ch}
.prazo-caixa{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:44px;
  padding-top:26px; border-top:1px solid var(--borda)}
.prazo-caixa p{margin:0}
.prazo-caixa b{display:block; font-family:var(--serif); font-weight:400; font-size:27px; color:var(--accent)}
.prazo-caixa span{display:block; margin-top:4px; font-size:15px; color:var(--muted)}
@media (max-width:900px){
  .recebido{padding-top:48px; padding-bottom:60px}
  .recebido h1{font-size:36px}
  .prazo-caixa{grid-template-columns:minmax(0,1fr); gap:16px}
}

/* ================= briefing: itens que abrem ================= */
.bloco-form{align-items:start}
.coluna-form{min-width:0}
/* cada bloco do briefing e um card: o titulo fica claro e um bloco nao encosta no outro */
.grupo{border:1px solid var(--borda); border-radius:8px; background:var(--papel);
  margin:0 0 16px; padding:24px 26px 26px}
.grupo legend{float:left; width:100%; padding:0 0 16px; margin-bottom:20px;
  border-bottom:1px solid rgba(58,44,36,.12); display:flex; align-items:center; gap:12px}
.grupo legend .num{flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--tinta); color:var(--creme); display:flex; align-items:center;
  justify-content:center; font-size:12px; font-weight:500; letter-spacing:.02em}
.grupo legend .tit{font-family:var(--serif); font-size:23px; font-weight:400;
  letter-spacing:.01em; color:var(--tinta); text-transform:none}
.grupo legend + *{clear:both}
.ajuda-grupo{margin:-6px 0 18px; font-size:14.5px; color:var(--muted)}
label.campo .obrig{font-style:normal; font-size:10px; letter-spacing:.1em; color:var(--accent); margin-left:6px}

.itens{display:flex; flex-direction:column; gap:10px}
.item{border:1px solid rgba(58,44,36,.14); border-radius:5px; background:var(--papel);
  transition:border-color .18s, box-shadow .18s}
.item.aberto{border-color:var(--tinta); box-shadow:0 4px 18px rgba(58,44,36,.06)}
.item-toggle{display:flex; align-items:center; gap:13px; padding:15px 18px; cursor:pointer; user-select:none}
.item-toggle input{position:absolute; opacity:0; width:0; height:0}
.item-toggle .check{width:21px; height:21px; flex:none; border:1px solid rgba(58,44,36,.3);
  border-radius:4px; position:relative; transition:all .18s}
.item-toggle .check::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid var(--creme); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .18s}
.item-toggle input:checked + .check{background:var(--tinta); border-color:var(--tinta)}
.item-toggle input:checked + .check::after{transform:rotate(45deg) scale(1)}
.item-toggle input:focus-visible + .check{outline:2px solid var(--accent); outline-offset:2px}
.item-name{font-size:16.5px; color:var(--tinta)}
.item.aberto .item-name{font-weight:500}

.item-detail{padding:4px 18px 20px 52px; display:grid; grid-template-columns:1fr 1fr; gap:16px}
/* o atributo hidden sozinho nao vence o display:grid acima */
.item-detail[hidden]{display:none}
.item-nota{grid-column:1 / -1; margin:0 0 2px; padding:10px 13px; background:var(--papel-alt);
  border-left:2px solid var(--accent); border-radius:0 3px 3px 0; font-size:13.5px; color:var(--muted)}
.item-detail .field{display:flex; flex-direction:column; gap:6px; min-width:0}
.item-detail .field.full{grid-column:1 / -1}
.item-detail .lab{font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--fraco)}
.item-detail input, .item-detail textarea{border:0; border-bottom:1px solid rgba(58,44,36,.22);
  background:none; padding:7px 0; font-family:var(--sans); font-size:15.5px; color:var(--tinta);
  outline:none; width:100%}
.item-detail input:focus, .item-detail textarea:focus{border-bottom-color:var(--accent)}
.item-detail textarea{resize:vertical; line-height:1.5}

/* chips de escolha rapida */
.chips{display:flex; flex-wrap:wrap; gap:7px; padding-top:3px}
.chip{border:1px solid rgba(58,44,36,.22); background:none; color:var(--tinta-suave);
  font-family:var(--sans); font-size:13px; padding:6px 13px; border-radius:999px; cursor:pointer;
  transition:all .16s}
.chip:hover{border-color:var(--tinta-suave); color:var(--tinta)}
.chip.on{background:var(--tinta); border-color:var(--tinta); color:var(--creme)}

/* resumo ao vivo */
.resumo{background:var(--papel-alt); border-radius:5px; padding:24px 26px; position:sticky; top:104px}
.resumo-cab{margin:0 0 14px; font-family:var(--serif); font-size:24px; line-height:1.15; color:var(--tinta)}
.resumo-cab span{display:block; font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fraco); margin-top:5px}
.resumo-vazio{margin:0; font-size:14.5px; color:var(--muted)}
.resumo-lista{list-style:none; margin:0; padding:0}
.resumo-lista li{padding:10px 0; border-top:1px solid rgba(58,44,36,.12)}
.resumo-lista li:first-child{border-top:0}
.resumo-lista b{display:block; font-weight:500; font-size:14.5px; color:var(--tinta)}
.resumo-lista span{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.resumo-lista .vago{font-style:italic; color:var(--fraco)}
.resumo-conta{margin:14px 0 0; padding-top:12px; border-top:1px solid rgba(58,44,36,.12);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}

@media (max-width:900px){
  .item-detail{grid-template-columns:minmax(0,1fr); padding:4px 16px 18px 16px}
  .resumo{position:static; margin-top:8px}
}

/* ================= menu de celular ================= */
/* Abaixo de 900px a navegacao sumia sem substituto: quem entrava pelo telefone
   nao chegava na galeria nem nas duvidas. Este botao abre o painel abaixo. */
.menu-bt{display:none; width:44px; height:44px; flex:none; border:1px solid rgba(58,44,36,.2);
  border-radius:10px; background:none; cursor:pointer; padding:0; align-items:center;
  justify-content:center; flex-direction:column; gap:5px}
.menu-bt span{display:block; width:18px; height:1.5px; background:var(--tinta);
  border-radius:2px; transition:transform .22s, opacity .18s}
.menu-bt[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-bt[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-bt[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu-movel{display:none; position:sticky; top:0; z-index:55; background:var(--papel);
  border-bottom:1px solid var(--borda); box-shadow:0 12px 26px rgba(58,44,36,.08)}
.menu-movel .wrap{display:flex; flex-direction:column; padding-top:6px; padding-bottom:16px}
.menu-movel a{padding:14px 0; border-bottom:1px solid rgba(58,44,36,.1);
  font-size:12px; font-weight:500; letter-spacing:.17em; text-transform:uppercase;
  color:var(--tinta-suave)}
.menu-movel a:last-child{border-bottom:0}
.menu-movel a.destaque{margin-top:14px; border:0; text-align:center; border-radius:999px;
  padding:15px 20px; background:var(--tinta); color:var(--creme); letter-spacing:.14em}
.menu-movel a.destaque.zap{margin-top:9px; background:none; color:var(--tinta);
  border:1px solid rgba(58,44,36,.24)}

@media (max-width:900px){
  .menu-bt{display:flex}
  .menu-movel[data-aberto="1"]{display:block}
  /* o CTA do topo vira item do painel, para o header nao ficar apertado */
  header.topo > .wrap > a.btn{display:none}
}

/* ================= galeria em carrossel ================= */
.carrossel{position:relative; margin-top:38px}
.albuns{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 2px 10px; scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.albuns::-webkit-scrollbar{display:none}
.albuns:focus-visible{outline:2px solid var(--accent-claro); outline-offset:4px; border-radius:4px}
.album{flex:0 0 296px; scroll-snap-align:start; transition:transform .28s, box-shadow .28s}
.album:hover{transform:translateY(-6px)}
.album .capa{box-shadow:0 10px 30px rgba(0,0,0,.28)}

.seta{position:absolute; top:36%; z-index:5; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(246,239,231,.35); background:rgba(58,44,36,.72);
  backdrop-filter:blur(6px); color:var(--creme); font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .18s}
.seta:hover{background:var(--accent); border-color:var(--accent)}
.seta[disabled]{opacity:0; pointer-events:none}
.seta.ant{left:-14px}
.seta.prox{right:-14px}

@media (max-width:900px){
  .album{flex:0 0 78vw}
  .seta{display:none}          /* no celular o dedo arrasta */
  .carrossel{margin-top:26px}
  .albuns{gap:12px}
}

/* ================= botao do WhatsApp ================= */
/* Verde e icone da marca: num site inteiro em tons de marrom, o CTA do WhatsApp
   precisa ser reconhecido de relance como sendo do WhatsApp. */
.btn-zap{background:var(--zap); color:#FFF; border-color:var(--zap); font-weight:600}
.btn-zap:hover{background:var(--zap-esc); border-color:var(--zap-esc); color:#FFF}
.btn-zap svg{width:19px; height:19px; flex:none; fill:currentColor}
.menu-movel a.destaque.zap{background:var(--zap); border-color:var(--zap); color:#FFF;
  display:flex; align-items:center; justify-content:center; gap:9px; font-weight:600}
.menu-movel a.destaque.zap svg{width:18px; height:18px; fill:currentColor}

/* ================= tela cheia dentro do album ================= */
.lb-acoes{display:flex; gap:9px; flex:none}
.lb-acoes button{background:none; border:1px solid rgba(223,203,184,.35); color:#DFCBB8;
  cursor:pointer; width:42px; height:42px; border-radius:999px; display:flex;
  align-items:center; justify-content:center; transition:all .18s}
.lb-acoes button:hover{border-color:var(--accent-claro); color:var(--accent-claro)}
.lb-acoes svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

/* modo foco: a foto ocupa a tela toda, o resto sai da frente */
.lb.foco{padding:0; background:#0E0A08}
.lb.foco .lb-topo, .lb.foco .lb-pe{display:none}
.lb.foco .lb-palco{margin:0; max-width:none; height:100vh; padding:0 8px}
.lb.foco .lb-palco img{max-height:100vh; border-radius:0; cursor:zoom-out}
.lb.foco .lb-sair{display:flex}
.lb-sair{display:none; position:fixed; top:16px; right:16px; z-index:10;
  width:44px; height:44px; border-radius:999px; border:1px solid rgba(223,203,184,.4);
  background:rgba(26,19,15,.7); backdrop-filter:blur(6px); color:#DFCBB8;
  align-items:center; justify-content:center; font-size:20px; cursor:pointer}
.lb-sair:hover{border-color:var(--accent-claro); color:var(--accent-claro)}

/* ================= clicaveis flutuando ================= */
/* Tudo que se clica ganha uma sombra leve e sobe um pouco no hover, para o
   elemento parecer solto da pagina em vez de desenhado nela. */
.btn{box-shadow:0 2px 10px rgba(58,44,36,.10)}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(58,44,36,.18)}
.btn:active{transform:translateY(0); box-shadow:0 2px 8px rgba(58,44,36,.14)}
.btn-zap{box-shadow:0 3px 14px rgba(29,168,81,.38)}
.btn-zap:hover{box-shadow:0 12px 28px rgba(29,168,81,.45)}
.btn-zap svg{stroke:none; fill:currentColor}

/* o icone do WhatsApp sai da moldura fina e ganha corpo */
.btn-zap svg{width:20px; height:20px}
.menu-movel a.destaque.zap{box-shadow:0 3px 14px rgba(29,168,81,.32)}

.card-serv{box-shadow:0 2px 10px rgba(58,44,36,.06)}
.card-serv:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(58,44,36,.14)}
.faq-bt{transition:color .18s}
.faq-bt:hover span:first-child{color:var(--accent)}
.seta{box-shadow:0 4px 14px rgba(0,0,0,.3)}
.seta:hover{transform:scale(1.06)}
.item{box-shadow:0 1px 6px rgba(58,44,36,.05)}
.item:hover{box-shadow:0 6px 18px rgba(58,44,36,.10)}
.chip:hover{transform:translateY(-1px)}
.insta-grade a{box-shadow:0 2px 10px rgba(58,44,36,.08); transition:transform .22s, box-shadow .22s}
.insta-grade a:hover{transform:translateY(-3px); box-shadow:0 12px 24px rgba(58,44,36,.16)}