/* ==========================================================================
   Visage by Cris · estilos do site
   Tudo fica dentro da classe .vbc, para não vazar para o tema do WordPress.

   PALETA
   #000000  texto e botões
   #ffffff  fundo principal
   #edece7  areia (faixas claras, hero das páginas de serviço)
   #f1f0ec  névoa (faixas claras alternadas)
   #fafafa  cinza muito claro
   #2b2724  café (faixas escuras)
   #1b1714  noite (hero da Home e chamada final)
   #14110f  quase preto (cabeçalho e rodapé)

   FONTES
   Títulos: Cormorant 400 (Google Fonts)
   Texto:   "Helvetica Neue", Helvetica, Inter, Arial
   ========================================================================== */

html{scroll-behavior:smooth;interpolate-size:allow-keywords}

.vbc,.vbc *{box-sizing:border-box}
.vbc{background:#fff;color:#000;font-family:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.vbc a{color:inherit}
.vbc a:hover{color:inherit}
.vbc h1,.vbc h2,.vbc h3,.vbc p,.vbc ul,.vbc ol,.vbc figure,.vbc blockquote,.vbc dl,.vbc dd{margin:0}
.vbc ul,.vbc ol{padding:0;list-style:none}
.vbc a:focus-visible,.vbc summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Tipografia e layout ---------- */
.vbc .serif{font-family:Cormorant,"Cormorant Garamond",Georgia,serif;font-weight:400;letter-spacing:-.01em;line-height:1.05;text-wrap:balance}
.vbc .wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.vbc .sec{padding-block:clamp(72px,9vw,128px)}
.vbc .lab{font-size:12px;letter-spacing:.18em;text-transform:uppercase;line-height:1.5}
.vbc .mut{color:rgba(0,0,0,.68)}
.vbc .h2{font-size:clamp(38px,4.2vw,60px)}
.vbc .g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:48px clamp(32px,6vw,96px)}
.vbc .g3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:56px 28px}
.vbc .g4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:40px 0}

/* ---------- Botões e links ---------- */
.vbc .btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 6px 0 26px;border-radius:999px;border:1px solid #000;background:#000;color:#fff;font-size:15px;letter-spacing:.3px;text-decoration:none;white-space:nowrap}
.vbc .btn:hover{color:#fff}
.vbc .btn .dot{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:#fff;color:#000;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.vbc .btn:hover .dot{transform:translateX(4px) rotate(-45deg)}
.vbc .btn.light{background:#fff;border-color:#fff;color:#000}
.vbc .btn.light:hover{color:#000}
.vbc .btn.light .dot{background:#000;color:#fff}
.vbc .btn.line{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.vbc .btn.line .dot{background:#fff;color:#000}
.vbc .btn.ghost{background:transparent;color:#000}
.vbc .btn.ghost:hover{color:#000}
.vbc .btn.ghost .dot{background:#000;color:#fff}
.vbc .lk{text-decoration:none;padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s cubic-bezier(.2,.7,.2,1)}
.vbc .lk:hover{background-size:100% 1px}
.vbc .go{display:inline-flex;align-items:center;gap:10px;font-size:15px;text-decoration:none}
.vbc .go svg{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.vbc .go:hover svg{transform:translateX(6px)}
.vbc .tag{display:inline-flex;align-items:center;min-height:26px;padding:0 11px;border:1px solid currentColor;border-radius:999px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Cabeçalho e menus ---------- */
.vbc .hd{position:sticky;top:0;z-index:20;background:#14110f;color:#fff}
.vbc .nav{display:flex;gap:34px;align-items:center;font-size:15px}
.vbc .dd{position:relative;padding:26px 0}
.vbc .ddm{position:absolute;top:100%;left:-24px;min-width:290px;background:#fff;color:#000;padding:10px;display:grid;gap:2px;box-shadow:0 24px 60px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s}
.vbc .dd:hover .ddm,.vbc .dd:focus-within .ddm{opacity:1;visibility:visible;transform:none}
.vbc .ddm a{padding:11px 14px;text-decoration:none;font-size:15px;transition:background .2s}
.vbc .ddm a:hover{background:#f1f0ec}
.vbc .mnav{display:none;position:relative}
.vbc .mnav summary{list-style:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;cursor:pointer}
.vbc .mnav summary::-webkit-details-marker{display:none}
.vbc .mpan{position:absolute;right:0;top:60px;width:min(86vw,340px);background:#fff;color:#000;padding:12px;display:grid;gap:2px;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.vbc .mpan a{padding:13px 14px;text-decoration:none}

/* ---------- Espaços de foto (trocar por <img> ou <video>) ---------- */
.vbc .ph{position:relative;display:flex;align-items:flex-end;width:100%;height:100%;background-color:#d9d3c8;background-image:repeating-linear-gradient(135deg,rgba(43,39,36,.08) 0 1px,transparent 1px 16px);color:#2b2724}
.vbc .ph.t2{background-color:#cbc2b4}
.vbc .ph.t3{background-color:#e7e2d9}
.vbc .ph.dk{background-color:#39322d;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 16px);color:#f1f0ec}
.vbc .ph>span{margin:18px;padding:7px 11px;border:1px solid currentColor;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.45}
.vbc .phw{overflow:hidden;position:relative}
.vbc .phw>.ph{position:absolute;inset:0;width:auto;height:auto}
.vbc .phw>img,.vbc .phw>video,.vbc .cmp .lay>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vbc .phw>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Vimeo em modo fundo (vídeos verticais 9:16): cobre a moldura, centralizado; sem clique para não travar os cards */
.vbc .phw>.vid{position:absolute;inset:0;overflow:hidden}
.vbc .phw>.vid iframe{position:absolute;left:0;top:50%;width:100%;height:auto;aspect-ratio:9/16;transform:translateY(-50%);border:0;pointer-events:none}

/* ---------- Cards ---------- */
.vbc .card{display:flex;flex-direction:column;gap:18px;text-decoration:none}
.vbc .card .ph,.vbc .card .phw>img,.vbc .card .phw>video,.vbc .card .phw>.vid{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.vbc .card:hover .ph,.vbc .card:hover .phw>img,.vbc .card:hover .phw>video,.vbc .card:hover .phw>.vid{transform:scale(1.06)}
.vbc .card .go svg{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.vbc .card:hover .go svg{transform:translateX(6px)}
.vbc .card:hover .lk{background-size:100% 1px}
.vbc .bk{padding:32px;background:#fff;display:flex;flex-direction:column;gap:16px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.vbc .bk:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.1)}

/* ---------- Passos, listas e linhas de opções ---------- */
.vbc .step{padding:6px 28px 6px 28px;border-left:1px solid rgba(0,0,0,.2);display:flex;flex-direction:column;gap:14px}
.vbc .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) auto;gap:10px 40px;align-items:baseline;padding:26px 0;border-top:1px solid rgba(0,0,0,.16);transition:padding .4s cubic-bezier(.2,.7,.2,1),background .4s}
.vbc .row:hover{padding-inline:18px;background:#f6f5f1}
.vbc .row:last-child{border-bottom:1px solid rgba(0,0,0,.16)}
.vbc .ck li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(0,0,0,.14)}
.vbc .ck svg{flex:none;margin-top:5px}
.vbc .ar li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid rgba(0,0,0,.14);font-size:16px}
.vbc .ar li span:last-child{white-space:nowrap;color:rgba(0,0,0,.68);font-size:14px}
.vbc .todo{font-style:italic;color:rgba(0,0,0,.68)}

/* ---------- Faixa de serviços em movimento ---------- */
.vbc .mqw{overflow:hidden;background:#fff;border-bottom:1px solid rgba(0,0,0,.12);padding:22px 0}
.vbc .mq{display:flex;width:max-content;animation:vbc-mq 40s linear infinite}
.vbc .mqw:hover .mq{animation-play-state:paused}
.vbc .mq>div{display:flex;gap:48px;padding-right:48px;align-items:center}
.vbc .mq span{font-family:Cormorant,"Cormorant Garamond",Georgia,serif;font-size:30px;font-style:italic;white-space:nowrap;line-height:1.3}

/* ---------- Antes e depois ---------- */
.vbc .cmp{position:relative;aspect-ratio:16/10;overflow:hidden;user-select:none}
.vbc .cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.vbc .cmp .lay{position:absolute;inset:0}
.vbc .cmp .hl{position:absolute;top:0;bottom:0;width:1px;background:#fff;z-index:2}
.vbc .cmp .kn{position:absolute;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 6px 24px rgba(0,0,0,.2)}
.vbc .cmp input:focus-visible~.kn{outline:2px solid #000;outline-offset:3px}

/* ---------- Perguntas frequentes ---------- */
.vbc .faq details{border-top:1px solid rgba(0,0,0,.16)}
.vbc .faq details:last-child{border-bottom:1px solid rgba(0,0,0,.16)}
.vbc .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:Cormorant,"Cormorant Garamond",Georgia,serif;font-size:26px;line-height:1.2}
.vbc .faq summary::-webkit-details-marker{display:none}
.vbc .faq .pm{flex:none;width:36px;height:36px;border:1px solid #000;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:transform .4s,background .3s,color .3s}
.vbc .faq details[open] .pm{transform:rotate(45deg);background:#000;color:#fff}
.vbc .faq details p{padding:0 60px 26px 0;max-width:720px}
.vbc .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .45s cubic-bezier(.2,.7,.2,1),content-visibility .45s allow-discrete}
.vbc .faq details[open]::details-content{block-size:auto}

/* ---------- Botão fixo no celular ---------- */
.vbc .bar{display:none}

/* ---------- Animações ---------- */
@keyframes vbc-rise{
from{opacity:0;transform:translateY(36px)}
to{opacity:1;transform:none}
}
@keyframes vbc-wipe{
from{clip-path:inset(0 0 100% 0)}
to{clip-path:inset(0 0 0 0)}
}
@keyframes vbc-mq{
to{transform:translateX(-50%)}
}
@keyframes vbc-kb{
from{transform:scale(1.14)}
to{transform:scale(1)}
}
/* Surgir ao rolar: o visage.js coloca data-in="a" quando o bloco entra na tela */
.vbc [data-in="a"]{animation:vbc-rise 1s cubic-bezier(.2,.7,.2,1) backwards}
.vbc [data-in="a"][data-d="1"]{animation-delay:.1s}
.vbc [data-in="a"][data-d="2"]{animation-delay:.2s}
.vbc [data-in="a"][data-d="3"]{animation-delay:.3s}
.vbc [data-in="a"][data-d="4"]{animation-delay:.4s}
.vbc [data-in="a"][data-d="5"]{animation-delay:.5s}
/* Entrada do hero ao carregar a página */
.vbc .ld{animation:vbc-rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.vbc .ld1{animation-delay:.14s}
.vbc .ld2{animation-delay:.28s}
.vbc .ld3{animation-delay:.42s}
.vbc .ld4{animation-delay:.56s}
.vbc .ldw{animation:vbc-wipe 1.4s cubic-bezier(.7,0,.2,1) .15s both}
.vbc .kb{animation:vbc-kb 9s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Responsivo ---------- */
@media (max-width:900px){
.vbc .nav{display:none}
.vbc .mnav{display:block}
}
@media (max-width:760px){
.vbc .row{grid-template-columns:1fr}
.vbc .bar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;justify-content:center}
.vbc .hd .btn{display:none}
.vbc .bar .btn{width:100%;justify-content:space-between;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.vbc .step{border-left:0;border-top:1px solid rgba(0,0,0,.2);padding:24px 0 0}
.vbc .faq details p{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
.vbc *{animation:none!important;transition:none!important}
}