/* ws-central inicio: tipografia-delicada */
/* ===== TITULOS DO SITE INTEIRO NA LETRA MANUSCRITA (Great Vibes) ===== */
/* Mesma fonte do titulo da 1a dobra da home */

body h1, body h2, body h3, body h4, body h5, body h6,
body h1.wse-page-title, body h1.wse-post-title, body p.wsep-hero-titulo,
body .wsb-titulo, body .wsec-sug-titulo, body .wsec-titulo, body .wsef-nome,
body .wsef-titulo, body .wsb-cons-mimos-tit, body .wse-modal-horas-tit,
body .entry-title, body .wp-block-heading,
body #wsbs-widget h2, body #wsbs-widget h3, body #wsbs-widget .t,
body .wse-au, body .wsb-portal-titulo, body .wsb-card-nome {
  font-family: "Great Vibes", cursive !important;
  font-weight: 400 !important;
  /* a letra manuscrita nao aceita caixa alta nem letras afastadas */
  text-transform: none !important;
  letter-spacing: normal !important;
  /* espaco extra para as pernas e lacos da letra nao cortarem */
  line-height: 1.35 !important;
}
body #wsbs-widget { --wsbs-font: "Great Vibes", cursive; }

/* A letra manuscrita e menor por natureza: aumenta um pouco os titulos */
body .wsb-titulo, body .wsec-sug-titulo, body h1.wse-page-title,
body h1.wse-post-title, body p.wsep-hero-titulo, body #wsbs-widget h2 {
  font-size: 3rem !important;
}
body .wsec-titulo, body #wsbs-widget h3, body #wsbs-widget .t,
body .wsef-nome, body .wsb-cons-mimos-tit {
  font-size: 2.1rem !important;
}
body .wsef-titulo { font-size: 1.7rem !important; }
body .wsb-card-nome { font-size: 1.15rem !important; }
body .wse-modal-horas-tit { font-size: 1.3rem !important; }

/* ===== Resto do site: leve e delicado, como a linha CONFIANCA QUE TRANSFORMA ===== */

/* Rotulos e kickers: finos e bem espacados */
body .wsb-kicker, body .wsb-cons-rotulo, body .wsb-cap, body .wsec-kicker,
body .wsb-portal-eyebrow {
  font-weight: 400 !important;
  letter-spacing: .22em !important;
}

/* Numeros e detalhes */
body .wsb-cons-num, body .wseh-mais-seta { font-weight: 300 !important; }

/* Botoes e chamadas para acao */
body .wsb-btn, body .wseh-cta, body .wseh-gaveta-cta, body .wsep-botao,
body .wsec-btn, body .wsec-todos, body .wsef-cta, body .wsef-btn,
body .wsb-card-cta, body .wseh-mais-bt, body button, body input[type="submit"] {
  font-weight: 400 !important;
  letter-spacing: .14em !important;
}

/* Menu do topo */
body header nav a, body .wseh-menu a, body .wseh-nav a {
  font-weight: 400 !important;
  letter-spacing: .12em !important;
}

/* Negritos dentro dos textos: destaque mais suave */
body strong, body b, body .wsfa-card__txt strong { font-weight: 500 !important; }

/* Texto corrido um pouco mais arejado */
body p, body li { letter-spacing: .012em; }

/* ===== Celular ===== */
@media (max-width: 782px) {
  body .wsb-titulo, body .wsec-sug-titulo, body h1.wse-page-title,
  body h1.wse-post-title, body p.wsep-hero-titulo,
  body #wsbs-widget h2 { font-size: 2.3rem !important; }
  body .wsec-titulo, body #wsbs-widget h3, body #wsbs-widget .t,
  body .wsef-nome, body .wsb-cons-mimos-tit { font-size: 1.8rem !important; }
  body .wsef-titulo { font-size: 1.5rem !important; }
  body .wsb-kicker, body .wsb-cons-rotulo, body .wsb-cap, body .wsec-kicker,
  body .wsb-portal-eyebrow { letter-spacing: .16em !important; }
  body .wsb-btn, body .wseh-cta, body .wseh-gaveta-cta, body .wsep-botao,
  body .wsec-btn, body .wsec-todos, body .wsef-cta, body .wsef-btn,
  body .wsb-card-cta, body .wseh-mais-bt, body button,
  body input[type="submit"] { letter-spacing: .09em !important; }
}
/* ws-central fim: tipografia-delicada */

/* ws-central inicio: tipografia-delicada-ajuste-cartoes */
/* Nomes dos cartoes de servico: em CAIXA ALTA a letra manuscrita fica ilegivel.
   Deixa em caixa baixa com a primeira letra maiuscula e ajusta o tamanho. */
body .wsb-card-nome {
  text-transform: lowercase !important;
  font-size: 1rem !important;
  line-height: 1.3 !important;
  word-break: normal;
  overflow-wrap: anywhere;
}
body .wsb-card-nome::first-letter { text-transform: uppercase !important; }

/* Mini-titulos dentro dos cartoes (passos 01 02 03 e cartoes de mimos) */
body .wsb-cons-lista li div strong:first-child,
body .wsb-cons-card-txt strong:first-child {
  font-family: "Great Vibes", cursive !important;
  font-weight: 400 !important;
  font-size: 1.45rem !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: block;
}
/* o negrito que aparece no meio da frase continua normal */
body .wsb-cons-lista li div span strong,
body .wsb-cons-card-txt span strong,
body .wsb-cons-card-txt p strong {
  font-family: "Lato", "Montserrat", Arial, sans-serif !important;
  font-size: inherit !important;
  display: inline;
  font-weight: 500 !important;
}

@media (max-width: 782px) {
  body .wsb-card-nome { font-size: .95rem !important; }
  body .wsb-cons-lista li div strong:first-child,
  body .wsb-cons-card-txt strong:first-child { font-size: 1.3rem !important; }
}
/* ws-central fim: tipografia-delicada-ajuste-cartoes */

/* ws-central inicio: tipografia-delicada-widgets */
/* Widgets internos (galeria e sugestoes de leitura) tem fonte propria e regra forte.
   Aqui elas passam a usar a mesma letra manuscrita dos demais titulos. */
#wspg-widget { --wspg-font: "Great Vibes", cursive; }
#wsbs-widget { --wsbs-font: "Great Vibes", cursive; }

html body #wspg-widget h1, html body #wspg-widget h2, html body #wspg-widget h3,
html body #wspg-widget h4, html body #wsbs-widget h1, html body #wsbs-widget h2,
html body #wsbs-widget h3, html body #wsbs-widget h4, html body #wsbs-widget .t,
html body .wse-single h1, html body .wse-single h2, html body .wse-single h3,
html body .wse-single h4, html body .wse-entry h1, html body .wse-entry h2,
html body .wse-entry h3, html body .wse-post-title, html body .wse-page-title {
  font-family: "Great Vibes", cursive !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.35 !important;
}
/* ws-central fim: tipografia-delicada-widgets */

/* ws-central inicio: logo-celular */
@media(max-width:900px){
:root{--ws-logo-h:clamp(58px,15vw,74px)}
}
/* ws-central fim: logo-celular */

/* ws-central inicio: botao-agendar */
html body .wsl-hd-cta,html body .lbh-cta{
  position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
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%}}
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)}
@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: 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 (lesley-beauty/style.css) — 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,#fdfbf6));
  color:var(--lb-ink,var(--brand-ink,#2b2420));
  border:1px solid rgba(176,141,69,.28);border-radius:clamp(14px,2vw,22px);
  box-shadow:0 14px 36px rgba(43,36,32,.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,#2b2420));margin:0 0 12px}
.lbt-meta{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:600;
  color:var(--lb-soft,#8a6d3b);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,#2b2420));
  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,#a37f39)}
.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,#6b6157);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: logo-transparente */
/* LOGO TRANSPARENTE NAO PODE GANHAR FUNDO.
   O script wsls do site mede os cantos da imagem e, quando ela e transparente E
   quadrada, aplica a classe wsls-medalhao — que pinta:
       background: rgba(255,255,255,.95)   <- o circulo branco
       padding: 9%                          <- e ainda encolhe a marca
       box-shadow: 0 8px 22px               <- sombra em volta do quadrado
   Ou seja: quem mandou uma logo com fundo transparente recebia fundo branco de
   volta. Aqui a marca volta a ser o que o arquivo diz que ela e.
   Conferido nesta logo: alfa 0 nos seis pontos medidos, 89%% da imagem transparente. */
html body img.wsls-medalhao{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  object-fit:contain !important;
  animation:none !important;
}
/* ws-central fim: logo-transparente */

/* 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 (lesley .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,#c9a355))));
  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: foto-mimo-inteira */
/* CARD "UM MIMO PERSONALIZADO" — a foto inteira, sem corte
 *
 * A moldura desses cards e deitada (344x248) e a foto do mimo e em pe
 * (576x1024). Com o recorte "cover" do tema, aparecia so uma faixa do meio
 * da foto: o laco e os biscoitos ficavam cortados.
 *
 * Agora a foto entra inteira (contain) e o espaco que sobra dos lados e
 * preenchido por uma copia bem desfocada e clarinha da propria foto — assim
 * nada fica cortado e tambem nao sobra tarja vazia. A altura da moldura nao
 * muda, entao os tres cards seguem alinhados.
 */

.wsb-cons-grade .wsb-cons-card:nth-child(3) .wsb-cons-foto {
  overflow: hidden;
  background: #efe9e1;
}

.wsb-cons-grade .wsb-cons-card:nth-child(3) .wsb-cons-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("https://clinicapadmajaraguadosul.com.br/wp-content/uploads/2026/08/pedido-20260827-194932-IMG_20260708_143234_385-576x1024.webp") center/cover no-repeat;
  filter: blur(26px) saturate(.45) brightness(1.05);
  transform: scale(1.3);
}

.wsb-cons-grade .wsb-cons-card:nth-child(3) .wsb-cons-foto img {
  object-fit: contain !important;
  object-position: center !important;
  z-index: 1;
}
/* ws-central fim: foto-mimo-inteira */

/* ws-central inicio: esconder-conveniencias-rodape */
/* TIRA O BLOCO "PARA O SEU CONFORTO / CONVENIENCIAS" QUE FICAVA DEPOIS DO RODAPE
 *
 * Esse bloco (id="conveniencias", classe wsq-conv) era montado pelo kit e saia
 * no HTML DEPOIS do fechamento do rodape, logo antes do . Por isso
 * aparecia solto la embaixo, abaixo do "Feito com amor por WebSalao".
 *
 * O seletor exige "body >" — ou seja, so pega o bloco que e filho direto do
 * body, que e exatamente o que ficava depois do rodape. A secao "Preparamos
 * tudo para receber voce", que fica dentro do <main>, nao e tocada.
 *
 * Isto aqui e a trava visual; quem tira o bloco do ar de fato e o snippet
 * remover-conveniencias-pos-rodape, que apaga o elemento da pagina.
 */

html body &gt; #conveniencias,
html body &gt; section.wsq-conv,
html body &gt; div.wsq-conv {
  display: none !important;
}
/* ws-central fim: esconder-conveniencias-rodape */

/* ws-central inicio: titulo-tamanho-igual */
/* TITULOS DIVIDIDOS — as duas partes no MESMO tamanho.
   O tema deixa a parte cursiva dourada maior que a segunda
   (ex: "Quando" grande + "abrimos" menor). Aqui as duas ficam iguais,
   nivelando pelo menor. A LETRA cursiva continua: so o tamanho muda.
   wsb-portal-titulo saiu daqui: e o titulo do card do blog, e quem cuida
   dele agora e o bloco blog-cards-fonte. */

/* 1) a parte cursiva herda o tamanho do titulo, em vez de ter o seu proprio */
html body [class*="-script"],
html body [class$="script"],
html body [class*="_script"],
html body :is(h1, h2, h3, h4, p, div, span) [class*="-script"],
html body :is(h1, h2, h3, h4, p, div, span) [class$="script"] {
  font-size: 1em !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  display: inline !important;
  margin: 0 .12em 0 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}

/* 2) nivela os dois grupos de tamanho do tema num valor unico.
      O tema usa 3rem num grupo e 2.1rem no outro; aqui os dois viram o mesmo. */
html body .wsb-titulo.wsb-titulo,
html body .wsec-sug-titulo.wsec-sug-titulo,
html body h1.wse-page-title.wse-page-title,
html body p.wsep-hero-titulo.wsep-hero-titulo,
html body .wsec-titulo.wsec-titulo,
html body .wsef-nome.wsef-nome,
html body .wsb-cons-mimos-tit.wsb-cons-mimos-tit {
  font-size: clamp(1.7rem, 3.4vw, 2.1rem) !important;
}

@media (max-width: 600px) {
  html body .wsb-titulo.wsb-titulo,
  html body .wsec-sug-titulo.wsec-sug-titulo,
  html body .wsec-titulo.wsec-titulo,
  html body p.wsep-hero-titulo.wsep-hero-titulo {
    font-size: 1.65rem !important;
  }
}
/* ws-central fim: titulo-tamanho-igual */

/* ws-central inicio: sem-cursiva */
/* ESTILO DE TITULO — padrao Lesley.
   Mesma fonte serifada e MESMO TAMANHO nas duas partes;
   a palavra de destaque em ITALICO DOURADO.
   Ex.: "*O que* fazemos por voce", "*Sugestoes* de leitura".

   IMPORTANTE: a palavra de destaque e um <span> dentro do titulo.
   Ela leva SO cor, italico e tamanho 1em. Nunca display:block e nunca
   tamanho maior — foi isso que esticou os spans vazios de decoracao
   e quebrou a secao "Preparamos tudo para receber voce". */

html body :is(h1,h2,h3,h4,h5,h6):is(h1,h2,h3,h4,h5,h6),
html body h1.wse-page-title.wse-page-title,
html body h1.wse-post-title.wse-post-title,
html body p.wsep-hero-titulo.wsep-hero-titulo,
html body .wsb-titulo.wsb-titulo,
html body .wsec-sug-titulo.wsec-sug-titulo,
html body .wsec-titulo.wsec-titulo,
html body .wsef-nome.wsef-nome,
html body .wsef-titulo.wsef-titulo,
html body .wsb-cons-mimos-tit.wsb-cons-mimos-tit,
html body .wse-modal-horas-tit.wse-modal-horas-tit,
html body .entry-title.entry-title,
html body .wp-block-heading.wp-block-heading,
html body #wsbs-widget h2, html body #wsbs-widget h3, html body #wsbs-widget .t,
html body .wse-au.wse-au,
html body .wsb-portal-titulo.wsb-portal-titulo,
html body .wsb-card-nome.wsb-card-nome {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: .005em !important;
  line-height: 1.28 !important;
  text-transform: none !important;
}

html body #wsbs-widget {
  --wsbs-font: "Cormorant Garamond", Georgia, serif !important;
}

/* palavra de destaque: italico dourado, no MESMO tamanho, sempre em linha */
html body :is(h1,h2,h3,h4,h5,h6) :is(em, i, b, strong, span),
html body .wsec-titulo :is(em, i, b, strong, span),
html body .wsec-sug-titulo :is(em, i, b, strong, span),
html body .wsb-titulo :is(em, i, b, strong, span),
html body .wsep-hero-titulo :is(em, i, b, strong, span),
html body .wse-page-title :is(em, i, b, strong, span),
html body .wse-post-title :is(em, i, b, strong, span),
html body .wsef-nome :is(em, i, b, strong, span),
html body [class*="-script"],
html body [class$="script"] {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 1em !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: .005em !important;
  line-height: inherit !important;
  text-transform: none !important;
  color: var(--brand-primary, #B19B7D) !important;
}
/* ws-central fim: sem-cursiva */

/* ws-central inicio: rodape-logo-telefone */
/* Rodape: logo e telefone estavam grandes demais.
   ALCANCE ESTREITO: so dentro do rodape (classes wsef-) e, no telefone,
   so o link que comeca com "tel:". Nao alcanca cabecalho, cards nem secoes. */

/* logo do rodape */
html body [class*="wsef"] img {
  max-width: 150px !important;
  max-height: 56px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* telefone do rodape */
html body [class*="wsef"] a[href^="tel:"],
html body [class*="wsef"] a[href^="tel:"] * {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  line-height: 1.5 !important;
}

@media (max-width: 600px) {
  html body [class*="wsef"] img {
    max-width: 120px !important;
    max-height: 46px !important;
  }
  html body [class*="wsef"] a[href^="tel:"],
  html body [class*="wsef"] a[href^="tel:"] * {
    font-size: 1rem !important;
  }
}
/* ws-central fim: rodape-logo-telefone */

/* ws-central inicio: botoes-elegantes */
/* Botao de agendar e icones sociais mais elegantes.
   ALCANCE: so o link do WhatsApp fora do cabecalho, e os icones sociais.
   TIREI as regras de Maps, Waze e Uber: os itens do MENU tambem sao
   links de Maps e Waze, e eles viraram botoes dentro do menu suspenso. */

html body a[href*="wa.me"]:not(.wseh-cta):not(.wseh-gaveta-cta) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5em !important;
  padding: .95em 2em !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background-image: linear-gradient(118deg, #9C8461 0%, #B19B7D 52%, #C7B392 100%) !important;
  color: #FFFDF9 !important;
  font-family: "Jost", system-ui, sans-serif !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-shadow: 0 14px 28px -16px rgba(80, 62, 40, .55) !important;
  transition: transform .45s cubic-bezier(.2,.7,.3,1),
              box-shadow .45s ease,
              filter .45s ease !important;
}

html body a[href*="wa.me"]:not(.wseh-cta):not(.wseh-gaveta-cta):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 36px -16px rgba(80, 62, 40, .6) !important;
  filter: brightness(1.05) !important;
}

/* icones sociais: so o efeito ao passar o mouse, sem mudar o desenho */
html body a[href*="instagram.com"],
html body a[href*="youtube.com"] {
  transition: transform .45s cubic-bezier(.2,.7,.3,1),
              background-color .4s ease, color .4s ease,
              border-color .4s ease !important;
}

html body a[href*="instagram.com"]:hover,
html body a[href*="youtube.com"]:hover {
  transform: translateY(-2px) !important;
  background-color: var(--brand-primary, #B19B7D) !important;
  border-color: var(--brand-primary, #B19B7D) !important;
  color: #FFFDF9 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body a[href*="wa.me"],
  html body a[href*="instagram.com"],
  html body a[href*="youtube.com"] {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 600px) {
  html body a[href*="wa.me"]:not(.wseh-cta):not(.wseh-gaveta-cta) {
    padding: .85em 1.4em !important;
    font-size: .74rem !important;
    letter-spacing: .12em !important;
  }
}
/* ws-central fim: botoes-elegantes */

/* ws-central inicio: blog-cards-fonte */
/* Titulos dos cards do BLOG na serifada, em tamanho de card.
   ATENCAO: .wsb-portal-titulo e usada nos DOIS lugares — nos cards do blog
   e no titulo da primeira dobra. Aqui ela fica no tamanho de card;
   a primeira dobra e tratada a parte, por h1.wsb-portal-titulo. */

html body .wsb-portal-titulo.wsb-portal-titulo,
html body .wsb-card-nome.wsb-card-nome,
html body .wsb-card-nome.wsb-card-nome a {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 1.28rem !important;
  line-height: 1.34 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

/* titulo do post aberto e subtitulos do texto */
html body.single-post h1.wse-post-title.wse-post-title,
html body.single-post .entry-title.entry-title,
html body.single-post h1, html body.single-post h2, html body.single-post h3,
html body.single-post .wp-block-heading.wp-block-heading {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  line-height: 1.3 !important;
}

html body.single-post p, html body.single-post li {
  line-height: 1.75 !important;
  font-size: 1.03rem !important;
}

@media (max-width: 600px) {
  html body .wsb-portal-titulo.wsb-portal-titulo,
  html body .wsb-card-nome.wsb-card-nome { font-size: 1.14rem !important; }
}
/* ws-central fim: blog-cards-fonte */

/* ws-central inicio: hero-titulo-maior */
/* "Beleza que inspira." — primeira dobra.
   .wsb-portal-titulo e usada nos cards do blog E aqui; por isso o alvo
   e h1.wsb-portal-titulo, que so existe na dobra. */

html body h1.wsb-portal-titulo.wsb-portal-titulo,
html body .wsep-hero-titulo.wsep-hero-titulo {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: clamp(2.2rem, 4.6vw, 3rem) !important;
  line-height: 1.18 !important;
  letter-spacing: .005em !important;
  text-transform: none !important;
  animation: wsFadeSobe 1s cubic-bezier(.2,.7,.3,1) both !important;
}

/* palavra de destaque: italico dourado, mesmo tamanho */
html body h1.wsb-portal-titulo.wsb-portal-titulo :is(em, i, b, strong, span),
html body .wsep-hero-titulo.wsep-hero-titulo :is(em, i, b, strong, span) {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 1em !important;
  font-style: italic !important;
  font-weight: 600 !important;
  line-height: inherit !important;
  color: var(--brand-primary, #B19B7D) !important;
}

/* LINHAS DE ROTULO (kickers) — sempre pequenas e espacadas.
   "CONFIANCA QUE TRANSFORMA." fica dentro do titulo e herdava o tamanho
   grande dele; aqui ela passa a ter tamanho proprio.
   Vem depois da regra do destaque, para vencer se houver sobreposicao. */
html body .wsb-cap.wsb-cap,
html body .wsb-kicker.wsb-kicker,
html body .wsb-portal-eyebrow.wsb-portal-eyebrow,
html body .wsec-kicker.wsec-kicker,
html body .wsb-cons-rotulo.wsb-cons-rotulo,
html body h1.wsb-portal-titulo :is(.wsb-cap, .wsb-kicker, [class*="-cap"], [class*="-sub"]) {
  font-family: "Jost", system-ui, -apple-system, sans-serif !important;
  font-size: .74rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  line-height: 1.7 !important;
  text-transform: uppercase !important;
  display: block !important;
}

@keyframes wsFadeSobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* efeito sutil na foto da primeira dobra */
html body [class*="wsb-portal"] img {
  transition: transform 1.4s cubic-bezier(.2,.7,.3,1), filter 1.4s ease !important;
}

html body [class*="wsb-portal"] img:hover {
  transform: scale(1.015) !important;
  filter: saturate(1.04) brightness(1.02) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body h1.wsb-portal-titulo.wsb-portal-titulo,
  html body .wsep-hero-titulo.wsep-hero-titulo,
  html body [class*="wsb-portal"] img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 600px) {
  html body h1.wsb-portal-titulo.wsb-portal-titulo,
  html body .wsep-hero-titulo.wsep-hero-titulo { font-size: 2rem !important; }
}
/* ws-central fim: hero-titulo-maior */

/* ws-central inicio: icone-cards-servicos */
/* ICONE DENTRO DAS PLACAS DE SERVICO ("Escolha o seu momento / O que fazemos por voce")
 *
 * O problema: o simbolo cadastrado e a lotus + P DENTRO de um circulo dourado
 * CHEIO (o fundo do circulo e opaco). Com isso:
 *   - nas placas claras aparecia so uma bolinha dourada — o desenho, com 34px
 *     e traco fino, sumia dentro do proprio circulo;
 *   - nas placas da cor da marca o tema pinta o simbolo de branco usando mask;
 *     como o arquivo tem o circulo inteiro opaco, a mascara cobria tudo e
 *     saia um circulo branco chapado, sem desenho nenhum.
 *
 * A correcao: usar a marca RECORTADA (so a lotus + P, fundo transparente) como
 * mascara nas tres placas, mudando apenas a cor — escura nas claras, branca na
 * dourada — e um pouco maior, para o traco ficar legivel.
 */

.wsb-servicos--joia .wsb-card-link::before {
  background-image: none !important;
  background-color: #6b553d !important;
  -webkit-mask-image: url("https://clinicapadmajaraguadosul.com.br/wp-content/uploads/2026/09/simbolo-padma-marca-limpa.png") !important;
          mask-image: url("https://clinicapadmajaraguadosul.com.br/wp-content/uploads/2026/09/simbolo-padma-marca-limpa.png") !important;
  -webkit-mask-size: contain !important;      mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;   mask-position: center !important;
  height: 40px !important;
  width: 47px !important;
  top: 14px !important;
  opacity: 1 !important;
}

/* placa da cor da marca (a cada tres, a dourada): a marca vira branca */
.wsb-servicos--joia .wsb-card:nth-child(3n) .wsb-card-link::before {
  background-image: none !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

@media (max-width: 640px) {
  .wsb-servicos--joia .wsb-card-link::before {
    height: 34px !important;
    width: 40px !important;
    top: 12px !important;
  }
}
/* ws-central fim: icone-cards-servicos */

/* ws-central inicio: cards-servicos-formato */
/* PLACAS DE SERVICO — so a FORMA, com peso alto de proposito.
   Hipotese: o tema define o arredondamento com !important e a folha dele
   e lida depois da minha. Em empate de peso, quem vem depois vence.
   Por isso os seletores aqui repetem as classes: isso eleva o peso
   acima do que o tema pode ter, sem depender da ordem das folhas.
   Nenhuma cor, nenhum fundo, nenhuma borda — so canto e espaco. */

html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card.wsb-card,
html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card.wsb-card *,
html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card.wsb-card::after,
html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card.wsb-card::before,
html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-link.wsb-card-link,
html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-link.wsb-card-link::after,
html body .wsb-servicos--joia.wsb-servicos--joia a,
html body .wsb-servicos--joia.wsb-servicos--joia li,
html body .wsb-servicos--joia.wsb-servicos--joia article {
  border-radius: 14px !important;
}

/* o icone tem desenho proprio e nao entra na regra de canto */
html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-link.wsb-card-link::before {
  border-radius: 0 !important;
}

/* espaco para o texto nao encostar no icone
   (icone: 14px do topo, 40px de altura) */
html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-link.wsb-card-link {
  padding-top: 68px !important;
  padding-bottom: 20px !important;
}

html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-nome {
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

@media (max-width: 640px) {
  html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card.wsb-card,
  html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card.wsb-card *,
  html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-link.wsb-card-link {
    border-radius: 12px !important;
  }
  html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-link.wsb-card-link::before {
    border-radius: 0 !important;
  }
  html body .wsb-servicos--joia.wsb-servicos--joia .wsb-card-link.wsb-card-link {
    padding-top: 58px !important;
    padding-bottom: 16px !important;
  }
}
/* ws-central fim: cards-servicos-formato */

/* ws-central inicio: hero-subcaps */
/* PRIMEIRA DOBRA: as duas linhas do titulo com tamanhos diferentes.
   ATENCAO: nao usar o sinal de filho direto neste bloco. O CSS Adicional
   do WordPress escapa esse sinal e a regra inteira e descartada pelo
   navegador (foi o que aconteceu nas versoes anteriores deste bloco).
   Aqui so ha seletores de descendente, e o peso vem de repetir a classe. */

/* 1) destaque "Beleza": italico dourado, no tamanho do titulo */
html body h1.wsb-portal-titulo .wse-au.wse-au.wse-au {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
  font-size: 1em !important;
  font-style: italic !important;
  font-weight: 600 !important;
  letter-spacing: .005em !important;
  line-height: inherit !important;
  text-transform: none !important;
  color: var(--brand-primary, #B19B7D) !important;
  display: inline !important;
}

/* 2) "CONFIANCA QUE TRANSFORMA.": rotulo pequeno, em UMA linha so.
      Antes herdava 1em do titulo (48px) e quebrava em 3 linhas. */
html body h1.wsb-portal-titulo .wsb-cap.wsb-cap.wsb-cap {
  font-family: "Jost", system-ui, -apple-system, sans-serif !important;
  font-size: .8rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  line-height: 1.7 !important;
  text-transform: uppercase !important;
  color: var(--brand-primary, #B19B7D) !important;
  display: block !important;
  white-space: nowrap !important;
  margin-top: .6em !important;
}

@media (max-width: 600px) {
  html body h1.wsb-portal-titulo .wsb-cap.wsb-cap.wsb-cap {
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  html body h1.wsb-portal-titulo .wsb-cap.wsb-cap.wsb-cap {
    font-size: .6rem !important;
    letter-spacing: .1em !important;
  }
}
/* ws-central fim: hero-subcaps */

/* ws-central inicio: simbolo-filete-portal */
/* O FILETE DO BLOCO DE ENDERECO (primeira dobra)
 * Antes: simbolo da marca (lotus + P) de 28px a esquerda + um fio dourado
 * ao lado, comecando em 40px para abrir espaco para o simbolo.
 * 17/09 (Natieli): o simbolo sai. Fica so o fio, agora comecando na
 * margem esquerda e ocupando a largura toda do enfeite. */

.wsb-portal--lado .wsb-portal-filete,
.wsb-portal-filete {
  background:
    linear-gradient(90deg, rgba(var(--wse-rgb-ouro),.6) 0%, rgba(var(--wse-rgb-ouro),.08) 100%)
    left center/180px 1px no-repeat !important;
  width: 180px !important;
  height: 26px !important;
}

/* garante que nenhum enfeite extra redesenhe o simbolo */
.wsb-portal--lado .wsb-portal-filete::before,
.wsb-portal--lado .wsb-portal-filete::after,
.wsb-portal-filete::before,
.wsb-portal-filete::after {
  content: none !important;
  background-image: none !important;
}
/* ws-central fim: simbolo-filete-portal */

/* ws-central inicio: card-agendar-legivel */
/* BOTAO "AGENDAR" DAS PLACAS DE SERVICO ("Escolha o seu momento /
   O que fazemos por voce").
   Problema (Natieli, 17/09): passando o mouse na placa aparece a pilula
   branca com "AGENDAR", mas nao dava para ler. Medido ao vivo: fonte de
   8,96px, peso 400, letras afastadas 1,25px, pilula de 64x13px e texto
   cor #786955 sobre branco (contraste 4,9:1). Letra fina e minuscula.
   Aqui o botao ganha tamanho, peso e a mesma cor do titulo da placa.
   NAO mexe no comportamento: a pilula continua aparecendo so no hover,
   porque a opacidade segue sendo do tema.
   NAO usar o sinal de filho direto (o WordPress escapa e invalida a regra). */

html body .wsb-card .wsb-card-cta.wsb-card-cta,
html body .wsb-servicos .wsb-card-cta.wsb-card-cta {
  font-family: "Jost", system-ui, -apple-system, sans-serif !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;

  color: #3a2c22 !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(177, 155, 125, .55) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  box-shadow: 0 2px 8px rgba(58, 44, 34, .12) !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: .45em !important;
  white-space: nowrap !important;
}

/* a setinha acompanha o texto */
html body .wsb-card .wsb-card-cta.wsb-card-cta span {
  font-size: 1.05em !important;
  font-weight: 600 !important;
  color: inherit !important;
  letter-spacing: 0 !important;
}

/* no celular a placa e mais estreita: um pouco menor, ainda legivel */
@media (max-width: 600px) {
  html body .wsb-card .wsb-card-cta.wsb-card-cta,
  html body .wsb-servicos .wsb-card-cta.wsb-card-cta {
    font-size: .72rem !important;
    padding: 8px 14px !important;
    letter-spacing: .08em !important;
  }
}
/* ws-central fim: card-agendar-legivel */

/* ws-central inicio: cards-todos-dourados */
/* PLACAS DE SERVICO — TODAS NA VERSAO DOURADA
 * ("Escolha o seu momento / O que fazemos por voce")
 *
 * O tema alterna: a cada tres placas, uma vem na cor da marca com a letra
 * branca (:nth-child(3n)) e as outras duas vem em bege claro com letra
 * escura. Eram 7 douradas e 15 claras, das 22.
 * 17/09 (Natieli): todas passam a ser a dourada.
 *
 * Os valores abaixo sao exatamente os que o tema ja usava na placa 3n,
 * medidos ao vivo antes da mudanca:
 *   fundo da placa  #f3efea  -&gt;  #b19b7d
 *   simbolo         #6b553d  -&gt;  #ffffff
 *   fio interno     rgba(177,155,125,.30) -&gt; rgba(255,255,255,.45)
 *   brilho do veu   branco .62 -&gt; branco .30 (mais suave, para nao lavar)
 *   titulo          #3a2c22  -&gt;  #ffffff
 *
 * O peso dos seletores repete as classes de proposito: a folha do tema e
 * lida depois desta, entao em empate de peso ela venceria.
 * NAO usar o sinal de filho direto (o WordPress escapa e invalida a regra). */

/* fundo da placa */
html body .wsb-servicos--joia .wsb-card.wsb-card .wsb-card-link.wsb-card-link {
  background-color: #b19b7d !important;
}

/* simbolo da marca: branco em todas */
html body .wsb-servicos--joia .wsb-card.wsb-card .wsb-card-link.wsb-card-link::before {
  background-image: none !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* fio interno da moldura */
html body .wsb-servicos--joia .wsb-card.wsb-card .wsb-card-link.wsb-card-link::after {
  border-color: rgba(255, 255, 255, .45) !important;
}

/* veu de brilho mais suave, como era so na dourada */
html body .wsb-servicos--joia .wsb-card.wsb-card .wsb-card-veu.wsb-card-veu {
  background-image: linear-gradient(112deg,
      rgba(255,255,255,0)   36%,
      rgba(255,255,255,.30) 50%,
      rgba(255,255,255,0)   64%) !important;
}

/* titulo branco */
html body .wsb-servicos--joia .wsb-card.wsb-card .wsb-card-nome.wsb-card-nome,
html body .wsb-servicos--joia .wsb-card.wsb-card .wsb-card-nome.wsb-card-nome a {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* ws-central fim: cards-todos-dourados */

/* ws-central inicio: sugestoes-leitura-titulo-menor */
/* SUGESTOES DE LEITURA — o titulo do artigo sobre a foto
 *
 * Os titulos dos posts sao longos (sao titulos de SEO, com cidade, estado e
 * nome da clinica). Grandes demais, ocupam varias linhas e cobrem o rosto
 * das fotos.
 *
 * 17/09: a versao anterior deste bloco pedia 1,35rem e NAO funcionava.
 * Motivo: os blocos titulo-tamanho-igual e sem-cursiva trazem
 *   html body .wsec-titulo.wsec-titulo { font-size: clamp(1.7rem,3.4vw,2.1rem) }
 * com o MESMO peso de seletor (0,2,2) e vem depois no arquivo — em empate,
 * quem vem depois vence. Media ao vivo: o titulo estava saindo com 33,6px.
 * Aqui o seletor repete a classe tres vezes e acrescenta .wsec-card:
 * peso (0,5,2), acima dos dois, sem depender da ordem.
 *
 * Mexe SO no titulo do card. O rotulo ("Estetica Facial"), o botao
 * ("Saiba mais") e o titulo da secao ficam como estao.
 * NAO usar o sinal de filho direto (o WordPress escapa e invalida a regra). */

html body .wsec-sugestoes .wsec-card .wsec-titulo.wsec-titulo.wsec-titulo,
html body .wsec-card .wsec-titulo.wsec-titulo.wsec-titulo {
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

@media (max-width: 640px) {
  html body .wsec-sugestoes .wsec-card .wsec-titulo.wsec-titulo.wsec-titulo,
  html body .wsec-card .wsec-titulo.wsec-titulo.wsec-titulo {
    font-size: 1.15rem !important;
    -webkit-line-clamp: 3;
  }
}
/* ws-central fim: sugestoes-leitura-titulo-menor */

/* ws-central inicio: logo-header-ficha */
/* CABECALHO E RODAPE: letreiro PADMA ESSENTIAL CLINIC.
 *
 * 24/09 (Natieli): arquivo trocado para
 *   2026/09/galeria-20260924-144326-1.png
 * (versao limpa do letreiro: sem a sombra e sem o defeito no "E" de
 * ESSENTIAL que havia no arquivo anterior).
 *
 * Como nos arquivos anteriores, a arte vem numa tela quadrada de 1563x1563
 * em que o letreiro ocupa so o retangulo x 276..1302 / y 629..962
 * (1026x333, proporcao 3.08). Com background-size:contain o navegador
 * encaixaria a tela inteira na barra e o letreiro sairia minusculo; por
 * isso recortamos pelo background-size + background-position, o que ainda
 * mantem a resolucao alta (nitido em tela retina).
 *
 * Contas de cada caixa (escala = largura da caixa / 1026px de letreiro):
 *   cabecalho      152x54 -&gt; size 231.6px, pos -40.9px -90.9px
 *   cabecalho cel. 118x42 -&gt; size 179.8px, pos -31.7px -70.5px
 *   rodape         170x60 -&gt; size 259.0px, pos -45.7px -101.8px
 *   rodape celular 142x50 -&gt; size 216.3px, pos -38.2px -85.1px
 * O bloco logo-brilho usa os MESMOS numeros na mascara, para a luz correr
 * por cima das proprias letras em vez de desenhar uma segunda marca.
 *
 * NAO usar o sinal de filho direto neste bloco: o CSS Adicional do
 * WordPress escapa esse sinal e invalida a regra inteira. */

/* ---------- cabecalho ---------- */
html body .wse-topo .wseh-marca-img.wseh-marca-img,
html body .wseh-bar .wseh-marca-img.wseh-marca-img {
  background-image: url("https://clinicapadmajaraguadosul.com.br/wp-content/uploads/2026/09/galeria-20260924-144326-1.png") !important;
  background-color: transparent !important;
  background-size: 231.6px auto !important;
  background-position: -40.9px -90.9px !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;

  width: 152px !important;
  height: 54px !important;
  max-width: 152px !important;
  max-height: 54px !important;
  display: inline-block !important;
}

html body .wse-topo .wseh-marca,
html body .wse-topo .wseh-fly-wrap {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

@media (max-width: 780px) {
  html body .wse-topo .wseh-marca-img.wseh-marca-img,
  html body .wseh-bar .wseh-marca-img.wseh-marca-img {
    background-size: 179.8px auto !important;
    background-position: -31.7px -70.5px !important;
    width: 118px !important;
    height: 42px !important;
    max-width: 118px !important;
    max-height: 42px !important;
  }
}

/* ---------- rodape ---------- */
html body .wsef .wsef-marca.wsef-marca {
  background-image: url("https://clinicapadmajaraguadosul.com.br/wp-content/uploads/2026/09/galeria-20260924-144326-1.png") !important;
  background-color: transparent !important;
  background-size: 259.0px auto !important;
  background-position: -45.7px -101.8px !important;
  background-repeat: no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;

  width: 170px !important;
  height: 60px !important;
  max-width: 170px !important;
  max-height: 60px !important;
  display: inline-block !important;
}

html body .wsef .wsef-fly {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

@media (max-width: 600px) {
  html body .wsef .wsef-marca.wsef-marca {
    background-size: 216.3px auto !important;
    background-position: -38.2px -85.1px !important;
    width: 142px !important;
    height: 50px !important;
    max-width: 142px !important;
    max-height: 50px !important;
  }
}
/* ws-central fim: logo-header-ficha */

/* ws-central inicio: logo-brilho */
/* BRILHO DOURADO E MOVIMENTO NA LOGO (cabecalho e rodape)
   1) um facho de luz quente atravessa as letras de tempos em tempos — ele e
      recortado no formato exato da logo (mask), entao brilha so na marca;
   2) a marca flutua de leve e o halo dourado pulsa junto.

   A mascara usa o MESMO arquivo e os MESMOS numeros de recorte do bloco
   logo-header-ficha. Se um dia a logo desenhada e a mascara divergirem, a
   luz acende um desenho por cima do outro e parecem "duas logos" — foi o
   que acontecia em 17/09.
   24/09: arquivo trocado junto com o do cabecalho e do rodape, para
   galeria-20260924-144326-1.png.
   Mudou o tamanho da logo la? Mudar os mesmos numeros aqui. */

.wse-topo .wseh-marca-img,
.wsef .wsef-marca { position: relative !important; }

.wse-topo .wseh-marca-img::after,
.wsef .wsef-marca::after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image: linear-gradient(100deg,
      rgba(255,236,190,0)    38%,
      rgba(255,240,205,.35)  45%,
      rgba(255,252,238,.95)  50%,
      rgba(255,240,205,.35)  55%,
      rgba(255,236,190,0)    62%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: 150% 0;
  -webkit-mask-image: url("https://clinicapadmajaraguadosul.com.br/wp-content/uploads/2026/09/galeria-20260924-144326-1.png");
          mask-image: url("https://clinicapadmajaraguadosul.com.br/wp-content/uploads/2026/09/galeria-20260924-144326-1.png");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: padmaBrilho 4.4s ease-in-out infinite;
}

/* cabecalho: mesmo recorte do bloco logo-header-ficha */
.wse-topo .wseh-marca-img::after {
  -webkit-mask-size: 231.6px auto;          mask-size: 231.6px auto;
  -webkit-mask-position: -40.9px -90.9px;   mask-position: -40.9px -90.9px;
}
@media (max-width: 780px) {
  .wse-topo .wseh-marca-img::after {
    -webkit-mask-size: 179.8px auto;        mask-size: 179.8px auto;
    -webkit-mask-position: -31.7px -70.5px; mask-position: -31.7px -70.5px;
  }
}

/* rodape: mesmo recorte do bloco logo-header-ficha */
.wsef .wsef-marca::after {
  -webkit-mask-size: 259.0px auto;           mask-size: 259.0px auto;
  -webkit-mask-position: -45.7px -101.8px;   mask-position: -45.7px -101.8px;
}
@media (max-width: 600px) {
  .wsef .wsef-marca::after {
    -webkit-mask-size: 216.3px auto;         mask-size: 216.3px auto;
    -webkit-mask-position: -38.2px -85.1px;  mask-position: -38.2px -85.1px;
  }
}

@keyframes padmaBrilho {
  0%   { background-position: 150% 0; opacity: 0; }
  5%   { opacity: 1; }
  32%  { background-position: -50% 0; opacity: 1; }
  38%  { background-position: -50% 0; opacity: 0; }
  100% { background-position: -50% 0; opacity: 0; }
}

/* flutuacao + halo dourado pulsando (troca o voo padrao do tema,
   que girava a marca — numa assinatura o giro atrapalha a leitura) */
.wse-topo .wseh-fly-wrap,
.wsef .wsef-fly {
  animation: padmaFlutua 4.4s ease-in-out infinite !important;
  will-change: transform, filter;
}

@keyframes padmaFlutua {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 5px rgba(190,160,100,.40)) drop-shadow(0 0 14px rgba(177,155,125,.20));
  }
  50% {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 12px rgba(226,196,130,.85)) drop-shadow(0 0 30px rgba(190,160,100,.45));
  }
}

/* quem pediu menos movimento no proprio aparelho continua sem movimento */
@media (prefers-reduced-motion: reduce) {
  .wse-topo .wseh-marca-img::after,
  .wsef .wsef-marca::after { animation: none !important; opacity: 0 !important; }
  .wse-topo .wseh-fly-wrap,
  .wsef .wsef-fly { animation: none !important; }
}
/* ws-central fim: logo-brilho */