/* >>> ws-central: logo-redonda */
.custom-logo, img.custom-logo, .site-logo img, .wsl-logo img, .lbf-logo img, .lbh-logo img, header .logo img, a.logo img, img.logo, .brand img, .site-header img[src*="logo"], .ws-logo img { border-radius: 50% !important; object-fit: cover !important; aspect-ratio: 1 / 1 !important; }
/* <<< ws-central: logo-redonda */

/* >>> ws-central: logo-redonda */
.custom-logo, img.custom-logo, .site-logo img, .wsl-logo img, .lbf-logo img, .lbh-logo img, header .logo img, a.logo img, img.logo, .brand img, .ws-logo img { border-radius: 50% !important; object-fit: cover !important; aspect-ratio: 1 / 1 !important; }
.wsl-selo, .wsl-selo-logo { overflow: hidden !important; }
.wsl-selo-logo img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; aspect-ratio: 1 / 1 !important; }
/* <<< ws-central: logo-redonda */

/* ws-central inicio: logo-celular */
@media(max-width:900px){
/* A logo no celular estava presa em 46px: a regra era clamp(46px,10vw,60px) e
   10vw nunca chega perto do minimo num celular (39px numa tela de 390), entao
   ela ficava sempre no piso, do mesmo tamanho em qualquer aparelho.
   Com 15vw ela sobe para 58px numa tela de 390 e acompanha telas maiores. */
:root{--ws-logo-h:clamp(58px,15vw,74px)}
}
/* ws-central fim: logo-celular */

/* ws-central inicio: botao-agendar */
/* Efeito no botao Agendar do cabecalho: o do celular (.wsl-hd-cta, injetado
   junto dos atalhos de Waze e Maps) e o do computador (.lbh-cta). */
html body .wsl-hd-cta,html body .lbh-cta{
  position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}

/* brilho que atravessa o botao de tempos em tempos, chamando o olho sem piscar */
html body .wsl-hd-cta::after,html body .lbh-cta::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);
  animation:wslBrilhoTopo 4.2s ease-in-out 1.5s infinite;
  pointer-events:none}
@keyframes wslBrilhoTopo{0%{left:-60%}34%,100%{left:140%}}

/* resposta ao toque e ao passar o mouse */
html body .wsl-hd-cta:active,html body .lbh-cta:active{transform:scale(.96)}
html body .wsl-hd-cta:hover,html body .lbh-cta:hover{box-shadow:0 8px 20px rgba(0,0,0,.18)}

/* quem pediu menos animacao no aparelho nao ve o brilho */
@media(prefers-reduced-motion:reduce){
  html body .wsl-hd-cta::after,html body .lbh-cta::after{animation:none;opacity:0}
}
/* ws-central fim: botao-agendar */

/* ws-central inicio: menu-celular */
@media(max-width:900px){
html body .lbh-nav,html body .lbh-nav *{box-sizing:border-box!important}
html body .lbh-nav.lbh-nav.lbh-nav{padding:54px 24px 24px!important;
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;justify-content:flex-start!important;
  flex-wrap:nowrap!important;gap:0!important;text-align:left!important;
  overflow-x:clip!important;overflow-y:auto!important}
html body .lbh-nav.lbh-nav .wsq-cc{text-align:left!important}
html body .lbh-nav .wsq-cc{width:100%!important;display:block!important}
html body .lbh-nav.lbh-nav .wsq-cc-menu{display:flex!important;flex-direction:column!important;
  align-items:stretch!important;width:100%!important;
  position:static!important;transform:none!important;
  background:transparent!important;box-shadow:none!important;border:0!important;
  min-width:0!important;opacity:1!important;visibility:visible!important}
html body .lbh-nav.lbh-nav .wsq-cc-menu::before{display:none!important}
html body .lbh-nav .wsq-cc a{display:flex!important;align-items:center!important;width:100%!important}
html body .wsq-cc-menu a{white-space:normal!important;border-bottom:0!important}
html body.wsl-menu-on .wsl-burger{position:fixed!important;top:14px!important;right:16px!important}
html body .lbh-nav a{padding:14px 2px!important;font-size:16px!important;letter-spacing:.18em;
  border-bottom:0!important;transition:padding-left .2s,color .2s}
/* No toque so o deslocamento e a transparencia: cor de marca nao serve de retorno
   visual porque --brand-primary tanto pode ser escura (clinicasaojose, #542326)
   quanto clara (salaoestelamaris, #e8bdb6) — no segundo caso o link sumiria. */
html body .lbh-nav a:active{padding-left:9px!important;opacity:.65}

html body .lbh-nav .wsq-cc{padding-bottom:16px!important;border-bottom:1px solid rgba(0,0,0,.07)!important}
html body .lbh-nav .wsq-cc a{border-bottom:0!important}
html body .wsq-cc-menu{padding:2px 0 6px 16px!important}
html body .wsq-cc-menu a{padding:9px 0!important;font-size:14px!important;opacity:.8}
body.wsl-menu-on .lbh-nav a,body.wsl-menu-on .lbh-nav .wsq-cc{animation:wslEntra .4s cubic-bezier(.2,.7,.3,1) both}
body.wsl-menu-on .lbh-nav a:nth-of-type(1){animation-delay:.06s}
body.wsl-menu-on .lbh-nav a:nth-of-type(2){animation-delay:.12s}
body.wsl-menu-on .lbh-nav a:nth-of-type(3){animation-delay:.18s}
body.wsl-menu-on .lbh-nav a:nth-of-type(4){animation-delay:.24s}
body.wsl-menu-on .lbh-nav a:nth-of-type(5){animation-delay:.30s}
body.wsl-menu-on .lbh-nav .wsq-cc{animation-delay:.36s}
body.wsl-menu-on .lbh-nav .wsl-nav-cta{animation-delay:.42s}
@keyframes wslEntra{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
html body .lbh-nav.lbh-nav .wsl-nav-cta{display:flex!important;align-items:center!important;
  justify-content:center!important;width:100%!important;border-radius:999px!important}
html body .lbh-nav .wsl-nav-cta{position:relative;overflow:hidden;margin-top:20px!important;
  margin-bottom:0!important;padding:18px 20px!important;font-size:13px!important;
  box-shadow:0 12px 26px -12px var(--brand-secondary);transition:transform .18s,box-shadow .18s}
html body .lbh-nav .wsl-nav-cta::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
body.wsl-menu-on .wsl-nav-cta::after{animation:wslBrilho 2.8s ease-in-out 1s infinite}
@keyframes wslBrilho{0%{left:-60%}42%,100%{left:135%}}
html body .lbh-nav .wsl-nav-cta:active{transform:scale(.97)}
/* O hamburguer fica sobre a BARRA, nao sobre o papel — e a barra muda de cliente
   para cliente (aqui e um vinho quase igual a --brand-ink, e as tres linhas sumiam).
   Adivinhar a cor da barra nao tem como em CSS, entao o botao passa a trazer a
   propria superficie: a mesma bolinha clara dos vizinhos (carinha e localizacao),
   com as linhas na tinta. Assim ele para de depender da cor da barra. Em barra
   clara a bolinha se funde ao fundo e as linhas escuras continuam legiveis. */
html body .wsl-burger{width:48px!important;height:48px!important;border-radius:50%;
  transition:background .2s,transform .2s,box-shadow .2s;
  background:var(--brand-paper,#fff)!important;
  box-shadow:0 2px 10px rgba(0,0,0,.12)!important}
html body .wsl-burger span{background:var(--brand-ink,#2a2a2a)!important}
html body.wsl-menu-on .wsl-burger{background:#fff!important;box-shadow:0 2px 10px rgba(0,0,0,.12)}
html body.wsl-menu-on .wsl-burger:active{transform:scale(.9)}
html body .wsl-menu-fundo{background:rgba(0,0,0,.45)!important}
}
body.wsl-menu-on .wshh-fab,
body.wsl-menu-on .wsfa-widget,
body.wsl-menu-on .wsfa-trigger,
body.wsl-menu-on .wsfa-modal,
body.wsl-menu-on .wsfa-halo,
body.wsl-menu-on .wsfa-ring,
body.wsl-menu-on #ht-ctc-chat,
body.wsl-menu-on .ht-ctc-chat,
body.wsl-menu-on .ht-ctc-cta,
body.wsl-menu-on .ht-ctc{display:none!important}
html body:has(.wsl-menu-fundo:not([hidden])) .wsfa-trigger,
html body:has(.wsl-menu-fundo:not([hidden])) .wsfa-modal,
html body:has(.wsl-menu-fundo:not([hidden])) .wsfa-widget,
html body:has(.wsl-menu-fundo:not([hidden])) .wshh-fab,
html body:has(.wsl-menu-fundo:not([hidden])) #ht-ctc-chat,
html body:has(.wsl-menu-fundo:not([hidden])) .ht-ctc-chat,
html body:has(.wsl-menu-fundo:not([hidden])) .ht-ctc-cta,
html body:has(.wsl-menu-fundo:not([hidden])) .ht-ctc{display:none!important}
/* ws-central fim: menu-celular */

/* ws-central inicio: logo-rodape */
/* O logo do rodape tem que ficar igual ao do topo.
   O tema gera as duas regras, mas com uma diferenca:
     topo   -> background-size:cover  (a marca preenche o circulo)
     rodape -> background-size:72%    (a marca encolhe e sobra anel branco)
   Aqui o rodape passa a usar cover, e ganha o mesmo anel dourado do topo.
   Nao repito border-radius nem background-color: o tema ja poe os dois. */
html body .lbf-marca{
  background-size:cover !important;
  background-position:center !important;
  box-shadow:0 0 0 3px #fff,0 0 0 4px var(--lb-gold,var(--brand-primary,#e8bdb6)),0 6px 16px rgba(0,0,0,.14) !important;
}
/* ws-central fim: logo-rodape */

/* ws-central inicio: blog-post */
/* Post do blog. O template do tema escreve .lbt-single / .lbt-entry, mas quem define
   essas classes e a folha do tema pai (style.css do tema) — e ela nao e carregada
   em nenhum site da frota. Resultado: o post saia sem estilo nenhum, texto de ponta a
   ponta da tela. Isto repoe o essencial do desenho original, com as variaveis do proprio
   cliente e recuo para o --brand-* quando o --lb-* nao existir.

   LARGURA: as margens sao clamp(), nao valores fixos com um @media no meio. Com o
   corte em 640px havia um degrau feio — em 640px o texto ocupava 90% da tela e em
   641px caia para 79%, porque a margem pulava de 14+18 para 26+40 de uma vez. Agora
   ela cresce junto com a tela e nao ha degrau nenhum. Medido no navegador de 320px a
   1600px: o texto ficou mais largo em todas as larguras e em nenhuma aparece rolagem
   lateral. */
.lbt-content{padding:clamp(24px,5vw,52px) 0 clamp(30px,6vw,60px)}
.lbt-container{max-width:100%;margin:0 auto;padding:0 clamp(6px,1.6vw,26px)}
.lbt-single{max-width:960px;margin:0 auto;
  background:var(--lb-card,var(--brand-paper,#fbf9f5));
  color:var(--lb-ink,var(--brand-ink,#33302a));
  border:1px solid rgba(137, 127, 122, .28);border-radius:clamp(14px,2vw,22px);
  box-shadow:0 14px 36px rgba(51, 48, 42, .12);
  padding:clamp(20px,4vw,44px) clamp(14px,3vw,40px) clamp(24px,4.4vw,46px)}
.lbt-post-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;
  font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.18;
  color:var(--lb-ink,var(--brand-ink,#33302a));margin:0 0 12px}
.lbt-meta{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:600;
  color:var(--lb-soft,#675f5c);margin-bottom:22px}
.lbt-meta a{color:inherit;text-decoration:none}
.lbt-feat{border-radius:16px;overflow:hidden;margin-bottom:26px}
.lbt-entry{color:var(--lb-ink,var(--brand-ink,#33302a));
  font-size:1.02rem;line-height:1.85;overflow-wrap:break-word}
.lbt-entry p{margin:0 0 18px}
.lbt-entry h1{font-size:clamp(1.9rem,3.8vw,2.7rem);margin:42px 0 16px}
.lbt-entry h2{font-size:clamp(1.6rem,3.2vw,2.25rem);margin:40px 0 14px}
.lbt-entry h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin:32px 0 12px}
.lbt-entry h1:first-child,.lbt-entry h2:first-child,.lbt-entry h3:first-child{margin-top:0}
.lbt-entry ul,.lbt-entry ol{margin:0 0 18px;padding-left:22px}
.lbt-entry li{margin:0 0 8px}
.lbt-entry a{color:var(--lb-gold-d,#897f7a)}
.lbt-entry img{max-width:100%;width:auto;height:auto;display:block;margin:20px auto;border-radius:14px}
/* emoji e svg sem dimensao esticam se pegarem a regra de imagem acima */
.lbt-entry img.emoji{width:1em!important;height:1em!important;max-width:1em!important;
  display:inline!important;margin:0 .05em!important;box-shadow:none!important;border-radius:0!important}
.lbt-entry iframe,.lbt-entry video{width:100%;max-width:860px;aspect-ratio:16/9;height:auto;
  display:block;margin:22px auto;border-radius:14px;border:0}
.lbt-entry .wp-caption-text,.wp-caption-text{font-size:.86rem;line-height:1.5;
  color:var(--lb-soft,#6a635a);text-align:center;margin:10px auto 0;font-style:italic}
@media(max-width:640px){.lbt-entry{font-size:1.04rem;line-height:1.8}}
/* ws-central fim: blog-post */

/* ws-central inicio: efeitos-agendar */
/* Todo botao de AGENDAR do site com efeito, mesmo sem mouse (celular): um feixe de luz
   atravessa o botao a cada 4s e um pulso na cor da marca sai da borda; no toque ele
   encolhe. Vale para o cabecalho dos dois kits (tema .lbh-cta/.wsl-hd-cta e wshh
   .wshh-luxo-cta), a gaveta (.wsl-nav-cta/.mc-cta) e os botoes das secoes do painel
   (.ws*-cta, .wssg-btn) e qualquer botao de WhatsApp com classe de cta/btn.
   Desliga com prefers-reduced-motion. Os botoes redondos de icone (Waze, avaliar, Uber)
   ficam de fora. */
html body .wshh-luxo-cta:not(.cta-waze):not(.cta-review):not(.cta-uber):not(.cta-maps),
html body .lbh-cta,html body .wsl-hd-cta,html body .wsl-nav-cta,html body .mc-cta,html body .lbf-cta,
html body .wsvc-cta,html body .wsrv-cta,html body .wsmn-cta,html body .wspf-cta,html body .wsfx-cta,html body .wssg-btn,
html body a[href*="wa.me"][class*="cta"],html body a[href*="wa.me"][class*="btn"],
html body a[href*="whatsapp"][class*="cta"],html body a[href*="whatsapp"][class*="btn"]{
  position:relative;overflow:hidden;isolation:isolate;
  --ws-cta-glow:var(--ma,var(--brand-primary,var(--lb-gold,var(--wse-acento,#e2d1c9))));
  outline:0 solid transparent;
  animation:wsCtaPulsa 3.6s ease-in-out infinite;
  transition:transform .18s ease,box-shadow .18s ease}
html body .wshh-luxo-cta:not(.cta-waze):not(.cta-review):not(.cta-uber):not(.cta-maps)::before,
html body .lbh-cta::before,html body .wsl-hd-cta::before,html body .wsl-nav-cta::before,html body .mc-cta::before,html body .lbf-cta::before,
html body .wsvc-cta::before,html body .wsrv-cta::before,html body .wsmn-cta::before,html body .wspf-cta::before,html body .wsfx-cta::before,html body .wssg-btn::before,
html body a[href*="wa.me"][class*="cta"]::before,html body a[href*="wa.me"][class*="btn"]::before,
html body a[href*="whatsapp"][class*="cta"]::before,html body a[href*="whatsapp"][class*="btn"]::before{
  content:"";display:block!important;position:absolute;top:-20%;bottom:-20%;left:-70%;width:42%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:wsCtaFeixe 4.2s ease-in-out 1.2s infinite;
  pointer-events:none;z-index:1;border-radius:0}
/* o brilho antigo do tema (::after) sai: agora e um so, o de cima */
html body .wsl-hd-cta::after,html body .lbh-cta::after,html body .wsl-nav-cta::after{display:none!important;animation:none!important}
html body .wshh-luxo-cta:not(.cta-waze):not(.cta-review):active,html body .lbh-cta:active,html body .wsl-hd-cta:active,html body .wsl-nav-cta:active,html body .mc-cta:active,
html body .wsvc-cta:active,html body .wsrv-cta:active,html body .wsmn-cta:active,html body .wspf-cta:active,html body .wsfx-cta:active,html body .wssg-btn:active{transform:scale(.96)!important}
@keyframes wsCtaFeixe{0%{left:-70%}40%,100%{left:150%}}
@keyframes wsCtaPulsa{0%,100%{outline:0 solid color-mix(in srgb,var(--ws-cta-glow) 65%,transparent)}60%{outline:8px solid color-mix(in srgb,var(--ws-cta-glow) 0%,transparent)}}
/* A LOGO do cabecalho: o invólucro do tema (.lbh-marca / .lbh-fly-wrap) corta com
   overflow:hidden — o brilho (drop-shadow) e o pe da logo saiam podados ("cortado no
   rodape da logo", Major, 02/09). Solto o corte nos dois kits. */
html body .lbh-marca:not(#ws-nao):not(#ws-nao2),html body .lbh-fly-wrap:not(#ws-nao):not(#ws-nao2),html body .wshh-luxo-brand:not(#ws-nao):not(#ws-nao2),html body .wshh-luxo-logo:not(#ws-nao):not(#ws-nao2),html body .lbh-logo:not(#ws-nao):not(#ws-nao2){overflow:visible!important}
html body .lbh-marca-img:not(#ws-nao):not(#ws-nao2),html body .wshh-luxo-logo img{overflow:visible!important}
@media(prefers-reduced-motion:reduce){
  html body .wshh-luxo-cta,html body .lbh-cta,html body .wsl-hd-cta,html body .wsl-nav-cta,html body .mc-cta,html body .lbf-cta,html body .wsvc-cta,html body .wsrv-cta,html body .wsmn-cta,html body .wspf-cta,html body .wsfx-cta,html body .wssg-btn{animation:none!important}
  html body .wshh-luxo-cta::before,html body .lbh-cta::before,html body .wsl-hd-cta::before,html body .wsl-nav-cta::before,html body .mc-cta::before,html body .lbf-cta::before,html body .wsvc-cta::before,html body .wsrv-cta::before,html body .wsmn-cta::before,html body .wspf-cta::before,html body .wsfx-cta::before,html body .wssg-btn::before{animation:none!important;opacity:0}
}

/* ws-central fim: efeitos-agendar */

/* ws-central inicio: hero-single-central */
/* Central WebSalao — hero do single "hs-estetica".
   Bloco gravado pelo botao "Aplicar nas paginas internas agora" (clube de modelos do hero).
   Reaplicar troca este bloco inteiro; remover_estilo hero-single-central devolve o desenho do tema. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Great+Vibes&display=swap');
html body .wsl-bhero1,html body .wsl-bhero2,html body .wsl-bhero3{background:linear-gradient(180deg,rgba(14,12,13,.72),rgba(14,12,13,.58) 55%,rgba(14,12,13,.8)),url("https://bellaessenzafoziguacu.com.br/wp-content/uploads/2026/08/galeria-20260831-145426-WhatsApp-Image-2026-08-20-at-11.14.26.jpeg") center/cover no-repeat!important}
html body section.wsl-bhero3 .wsl-bhero3-olho{font-family:inherit!important;color:rgba(255,255,255,.72)!important;letter-spacing:.22em!important}
html body section.wsl-bhero3 .wsl-bhero3-t{font-family:'Playfair Display',Georgia,serif!important;color:rgba(255,255,255,.96)!important}
html body section.wsl-bhero3 .wsl-bhero3-s{color:rgba(255,255,255,.84)!important;font-family:inherit}
html body section.wsl-bhero3 .wsl-bh3-btn{position:relative!important;background-repeat:no-repeat!important;background-position:left center!important;background-size:0% 100%!important;transition:background-size .45s cubic-bezier(.2,.7,.2,1),transform .3s,color .3s,border-color .3s!important}
html body section.wsl-bhero3 .wsl-bh3-btn:hover{background-size:100% 100%!important;transform:translateY(-2px)!important}
html body section.wsl-bhero3 .wsl-bh3-btn-cheio{background-color:#eaded8!important;background-image:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22))!important;color:#14100f!important;border-color:#eaded8!important}
html body section.wsl-bhero3 .wsl-bh3-btn-cheio:hover{color:#14100f!important}
html body section.wsl-bhero3 .wsl-bh3-btn-linha{border:1px solid rgba(255,255,255,.3)!important;color:rgba(255,255,255,.96)!important;background-color:transparent!important;background-image:linear-gradient(#eaded8,#eaded8)!important}
html body section.wsl-bhero3 .wsl-bh3-btn-linha:hover{color:#14100f!important;border-color:#eaded8!important}
@media(prefers-reduced-motion:reduce){.wsl-bh3-btn{transition:none!important}}
html body .lbt-page-title{font-family:'Playfair Display',Georgia,serif!important}
html body .lbt-headrule{background:#eaded8!important;height:1px}
html body section.wsl-bhero3 .wsl-bhero3-t em{font-family:'Great Vibes',cursive!important;font-style:normal!important;font-weight:400!important;color:#eaded8!important;font-size:1.3em!important}
html body section.wsl-bhero3 .wsl-bh3-btn{border-radius:10px!important}
/* ws-central fim: hero-single-central */