/* ==================================================================
   SANGRIA — como um bloco alcanca as bordas da tela

   Ate aqui os blocos de largura total usavam margin:calc(50% - 50vw).
   A conta parece certa e nao e: o "50%" mede a area de CONTEUDO, que
   exclui a barra de rolagem, e o "50vw" mede a JANELA, que a inclui.
   Num navegador com barra classica (a maioria dos computadores com
   Windows, e o Mac com "mostrar sempre" ligado) os dois valores nao
   batem, e cada bloco sobra meia barra para fora dos dois lados. O
   resultado e a pagina rolando de lado alguns pixels e os blocos
   desalinhados do cabecalho — o hero parecendo torto.

   Aqui a conta deixa de depender da janela. A sangria e exatamente o
   respiro do container (26px) para quem esta dentro dele, e zero para
   quem ja e filho de um elemento de largura total. Sem vw, sem barra de
   rolagem na conta, sem desalinho.
   ================================================================== */
:root{ --wse-respiro:26px; }
body{ --wse-sangria:0px; }
.wse-container{ --wse-sangria:calc(-1 * var(--wse-respiro)); }

/* a textura floral e gerada em inc/cores.php, nas cores da marca */

/*
 * rodape.css — cabecalho e rodape das paginas internas + rodape da home.
 *
 * Este arquivo carrega em TODAS as paginas, inclusive na home. Por isso ele
 * NAO pode conter nenhum seletor global (*, html, body, a, img): esses ficam
 * so no style.css, que continua fora da home para nao mexer no que voce montou.
 *
 * A barra (.wseh-*) e a mesma que voce fez no bloco #lb-header da home, com o
 * escopo trocado de "#lb-header" para ".wse-topo".
 */

/* o cabecalho do plugin ws-hero-header some nas internas: quem manda e a sua
   barra. Na home ele ja era escondido pelo ws-page-override. */
body:not(.home) .wshh-bar,
body:not(.home) .wshh-luxo{ display:none !important; }

/* e na home tambem, quando a Ficha pede (ws_kit_esconder_header_plugin) */
body.wse-sem-header-plugin .wshh-bar,
body.wse-sem-header-plugin .wshh-luxo,
body.wse-sem-header-plugin .wshh-topbar{ display:none !important; }

/* ===================== SUA BARRA NAS PAGINAS INTERNAS ===================== */
.wse-topo .wseh-bar{background:linear-gradient(90deg,var(--wse-claro-1) 0%,var(--wse-claro-2) 38%,var(--wse-claro-3) 72%,var(--wse-claro-4) 100%);
      display:flex; align-items:center; justify-content:center;
      gap:24px; padding:12px 34px;
      border-bottom:1px solid rgba(var(--wse-rgb-acento-med),.28);}
.wse-topo .wseh-marca{display:block; flex:0 0 auto;}
.wse-topo .wseh-fly-wrap{display:inline-block;
      filter:drop-shadow(0 0 7px rgba(var(--wse-rgb-acento-cla),.85)) drop-shadow(0 0 18px rgba(var(--wse-rgb-acento-cla),.45));
      animation:wseFly 3.6s ease-in-out infinite;}
.wse-topo .wseh-marca-img{display:block !important; width:96px !important; height:96px !important;
      opacity:1 !important; visibility:visible !important;
      background:var(--wse-simbolo) center/contain no-repeat !important;}
.wse-topo .wseh-nav{display:flex; align-items:center; justify-content:center; flex:0 1 auto;
      gap:6px 22px; flex-wrap:wrap;}
.wse-topo .wseh-nav a{color:var(--wse-acento-txt); text-decoration:none; text-transform:uppercase;
      font-size:.74rem; letter-spacing:.18em; font-weight:600;
      padding:6px 2px; border-bottom:1px solid transparent;
      transition:color .2s ease, border-color .2s ease;}
.wse-topo .wseh-nav a:hover{color:var(--wse-tinta-esc); border-bottom-color:var(--wse-acento-med);}
.wse-topo .wseh-cta{flex:0 0 auto; display:inline-block; padding:12px 30px; border-radius:999px;
      background:linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc)); color:#fff !important;
      text-decoration:none !important; text-transform:uppercase; font-size:.74rem;
      letter-spacing:.16em; font-weight:700;
      box-shadow:0 4px 14px rgba(var(--wse-rgb-acento-esc),.45), 0 0 16px rgba(var(--wse-rgb-acento-cla),.65);
      animation:wseGlow 2.8s ease-in-out infinite;
      transition:transform .2s ease, filter .2s ease;}
.wse-topo .wseh-cta:hover{transform:translateY(-2px); filter:brightness(1.08);}

/* Nota: as regras de empilhar a barra (flex-direction:column / order:3) ficam
   SOMENTE dentro do @media (max-width:900px) la embaixo. Elas ja estiveram
   soltas aqui por engano e deixavam o cabecalho empilhado em qualquer largura. */

@keyframes wseFly{
      0%,100%{ transform:translateY(0) rotate(0deg); }
      25%{ transform:translateY(-3px) rotate(-2.5deg); }
      50%{ transform:translateY(-5px) rotate(0deg); }
      75%{ transform:translateY(-2px) rotate(2.5deg); }
    }
@keyframes wseGlow{
      0%,100%{ box-shadow:0 4px 14px rgba(var(--wse-rgb-acento-esc),.45), 0 0 12px rgba(var(--wse-rgb-acento-cla),.5); }
      50%{ box-shadow:0 4px 14px rgba(var(--wse-rgb-acento-esc),.5), 0 0 24px rgba(var(--wse-rgb-acento-cla),.9); }
    }
/* ==================================================================
   MENU: LINHA, "MAIS" E GAVETA

   O cabecalho tinha doze links em duas linhas. Agora ficam a vista os
   que fazem a visitante escolher, e o resto vai para "Mais" — uma lista
   que desce. No celular a barra some inteira e vira tres tracos: la a
   tela e curta e cada link a mais custa meia dobra de rolagem.
   ================================================================== */

.wse-topo .wseh-links{
  display:flex; align-items:center; justify-content:center;
  gap:6px 22px; flex-wrap:wrap;
}

/* ---------- o "Mais" ---------- */
.wseh-mais{ position:relative; display:inline-flex; }
.wseh-mais-bt{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer;
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  color:var(--wse-acento-txt); text-transform:uppercase;
  font-size:.74rem; letter-spacing:.18em; font-weight:600;
  padding:6px 2px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.wseh-mais-bt:hover{ color:var(--wse-tinta-esc); border-bottom-color:var(--wse-acento-med); }
.wseh-mais-seta{
  width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform .2s ease;
}
.wseh-mais.esta-aberto .wseh-mais-seta{ transform:rotate(-135deg) translateY(-2px); }

.wseh-mais-lista{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  z-index:120; min-width:216px;
  display:flex; flex-direction:column; gap:2px;
  padding:12px 10px;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.34);
  border-radius:16px;
  box-shadow:0 20px 44px rgba(var(--wse-rgb-tinta),.16);
}
/* a setinha que prende a lista ao botao */
.wseh-mais-lista::before{
  content:''; position:absolute; top:-6px; left:50%; margin-left:-6px;
  width:11px; height:11px; transform:rotate(45deg);
  background:var(--wse-cartao);
  border-left:1px solid rgba(var(--wse-rgb-ouro),.34);
  border-top:1px solid rgba(var(--wse-rgb-ouro),.34);
}
.wse-topo .wseh-mais-lista a{
  text-align:left; padding:9px 12px; border-bottom:0; border-radius:9px;
  letter-spacing:.14em;
}
.wse-topo .wseh-mais-lista a:hover{ background:var(--wse-papel); color:var(--wse-tinta-esc); }
.wseh-mais-lista[hidden]{ display:none; }

/* ---------- os tres tracos ---------- */
.wseh-burger{
  display:none; flex:0 0 auto;
  width:44px; height:44px; padding:11px 10px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.wseh-burger span{
  display:block; height:1.5px; width:100%; border-radius:2px;
  background:var(--wse-acento-txt);
  transition:transform .25s ease, opacity .2s ease;
}
.wseh-burger.esta-aberto span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.wseh-burger.esta-aberto span:nth-child(2){ opacity:0; }
.wseh-burger.esta-aberto span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

/* ---------- a gaveta ---------- */
.wseh-gaveta{
  position:fixed; inset:0; z-index:9998;
  background:rgba(var(--wse-rgb-tinta),.42);
  backdrop-filter:blur(2px);
  display:flex; justify-content:flex-end;
}
.wseh-gaveta[hidden]{ display:none; }
.wseh-gaveta-caixa{
  width:min(86vw, 340px); height:100%;
  background:linear-gradient(180deg,var(--wse-claro-1) 0%,var(--wse-papel) 100%);
  border-left:1px solid rgba(var(--wse-rgb-ouro),.30);
  box-shadow:-18px 0 44px rgba(var(--wse-rgb-tinta),.22);
  padding:22px 22px 30px;
  display:flex; flex-direction:column;
  overflow-y:auto;
  animation:wsehEntra .22s ease-out;
}
@keyframes wsehEntra{ from{ transform:translateX(18px); opacity:.4; } to{ transform:none; opacity:1; } }

.wseh-gaveta-fecha{
  align-self:flex-end; width:38px; height:38px; margin-bottom:6px;
  background:none; border:0; cursor:pointer;
  font-size:1.7rem; line-height:1; color:var(--wse-acento-txt);
}
.wseh-gaveta-nav{ display:flex; flex-direction:column; }
.wse-topo .wseh-gaveta-nav a,
.wseh-gaveta-nav a{
  display:block; padding:14px 4px;
  border-bottom:1px solid rgba(var(--wse-rgb-ouro),.22) !important;
  color:var(--wse-acento-txt); text-decoration:none;
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  text-transform:uppercase; font-size:.78rem; letter-spacing:.16em; font-weight:600;
}
.wseh-gaveta-nav a:last-child{ border-bottom:0 !important; }
.wseh-gaveta-cta{
  display:block; margin-top:20px; text-align:center;
  padding:15px 22px; border-radius:999px;
  background:linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc));
  color:#fff !important; text-decoration:none !important;
  text-transform:uppercase; font-size:.74rem; letter-spacing:.16em; font-weight:700;
}

@media (max-width:900px){
      /* a barra volta a ser uma linha so: marca, botao, tres tracos */
      .wse-topo .wseh-bar{ flex-direction:row; justify-content:space-between; gap:12px; padding:12px 18px; }
      .wse-topo .wseh-nav{ display:none; }
      .wseh-burger{ display:flex; }
      .wse-topo .wseh-marca-img{ width:64px !important; height:64px !important; }
      body.wse-marca-larga .wse-topo .wseh-marca-img{ width:132px !important; height:52px !important; }
      .wse-topo .wseh-cta{ padding:11px 20px; font-size:.68rem; letter-spacing:.12em; }
}
@media (max-width:380px){
      .wse-topo .wseh-cta{ display:none; }   /* na tela mais estreita, o botao vive na gaveta */
}

/* ==================================================================
   RODAPE NOVO (.lbf) — 27/07/2026
   Espelha a identidade do cabecalho montado na home pelo ws-page-builder
   (bloco #lb-header): mesmo degrade nude->dourado na faixa, mesmo painel
   suave do hero, mesma borboleta com brilho e voo, mesmas fontes e o
   mesmo botao dourado em pilula com glow pulsante.
   ================================================================== */

.wsef{
  /* largura total SEM usar 100vw: com margem negativa dos dois lados e
     width:auto o bloco preenche exatamente a largura da tela. O 100vw
     pode ser maior que a area visivel em alguns navegadores de celular,
     e era o que fazia a pagina balancar para o lado. */
  width:auto; max-width:none;
  margin-left:var(--wse-sangria); margin-right:var(--wse-sangria);
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif); color:var(--wse-tinta);
}
.wsef *{ box-sizing:border-box; }

/* ---------- painel principal (mesmo degrade do hero da home) ---------- */
.wsef-painel{
  background:linear-gradient(160deg,var(--wse-painel-1) 0%,var(--wse-painel-2) 55%,var(--wse-painel-3) 100%);
  border-top:1px solid rgba(var(--wse-rgb-acento-med),.28);
  padding:64px 34px 56px;
}
.wsef-inner{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.15fr .85fr 1fr; gap:52px; align-items:start;
}

/* ---------- coluna da marca ---------- */
.wsef-fly{
  display:inline-block; margin-bottom:14px;
  filter:drop-shadow(0 0 7px rgba(var(--wse-rgb-acento-cla),.85)) drop-shadow(0 0 18px rgba(var(--wse-rgb-acento-cla),.45));
  animation:wsefFly 3.6s ease-in-out infinite;
}
.wsef-marca{
  display:block !important; width:84px !important; height:84px !important;
  opacity:1 !important; visibility:visible !important;
  background:var(--wse-simbolo) center/contain no-repeat !important;
}
@keyframes wsefFly{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  25%{ transform:translateY(-3px) rotate(-2.5deg); }
  50%{ transform:translateY(-5px) rotate(0deg); }
  75%{ transform:translateY(-2px) rotate(2.5deg); }
}
.wsef-nome{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:2.1rem; line-height:1.1; color:var(--wse-tinta); margin:0 0 10px;
}
.wsef-nome em{ font-style:italic; color:var(--wse-acento-pro); }
.wsef-kicker{
  text-transform:uppercase; letter-spacing:.3em; font-size:.68rem; font-weight:600;
  color:var(--wse-acento-pro); border-bottom:1px solid rgba(var(--wse-rgb-acento-pro),.4);
  padding-bottom:8px; margin:0 0 18px; display:inline-block;
}
.wsef-tag{ font-size:.95rem; font-weight:300; line-height:1.8; color:var(--wse-suave); margin:0 0 16px; }
.wsef-addr{ font-size:.9rem; font-weight:300; line-height:1.85; color:var(--wse-suave); margin:0; }
.wsef-addr strong{ font-weight:600; color:var(--wse-tinta); }

/* ---------- titulos das colunas ---------- */
.wsef-titulo{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:1.5rem; color:var(--wse-tinta); margin:0 0 4px;
}
.wsef-sub{
  display:block; text-transform:uppercase; letter-spacing:.22em;
  font-size:.66rem; font-weight:600; color:var(--wse-acento-pro); margin-bottom:20px;
}

/* ---------- horarios ---------- */
.wsef-hrow{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid rgba(var(--wse-rgb-acento-med),.25);
  font-size:.88rem;
}
.wsef-hday{ font-weight:300; color:var(--wse-suave); }
.wsef-hval{ font-weight:600; color:var(--wse-tinta); white-space:nowrap; }
.wsef-fechado{ color:var(--wse-acento-pro); font-weight:500; font-style:italic; }
.wsef-nota{
  margin:16px 0 0; font-size:.76rem; font-weight:300; font-style:italic; color:var(--wse-acento-txt);
}

/* ---------- botao dourado (igual ao CTA do header da home) ---------- */
.wsef-cta{
  display:inline-block; padding:14px 32px; border-radius:999px;
  background:linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc)); color:#fff !important;
  text-decoration:none !important; text-transform:uppercase;
  font-size:.74rem; letter-spacing:.16em; font-weight:700; text-align:center;
  box-shadow:0 4px 14px rgba(var(--wse-rgb-acento-esc),.45), 0 0 16px rgba(var(--wse-rgb-acento-cla),.65);
  animation:wsefGlow 2.8s ease-in-out infinite;
  transition:transform .2s ease, filter .2s ease;
  margin-bottom:20px;
}
.wsef-cta:hover{ transform:translateY(-2px); filter:brightness(1.08); }
@keyframes wsefGlow{
  0%,100%{ box-shadow:0 4px 14px rgba(var(--wse-rgb-acento-esc),.45), 0 0 12px rgba(var(--wse-rgb-acento-cla),.5); }
  50%{ box-shadow:0 4px 14px rgba(var(--wse-rgb-acento-esc),.5), 0 0 24px rgba(var(--wse-rgb-acento-cla),.9); }
}

/* ---------- botoes de contorno ---------- */
.wsef-btns{ display:flex; flex-wrap:wrap; gap:10px; }
/*
 * OS ATALHOS DO RODAPE
 *
 * Eram pilulas com emoji dentro. Emoji nao e desenho da marca: ele vem
 * colorido do sistema, muda de forma entre iPhone, Android e Windows, e
 * ao lado de um dourado sobrio parece um adesivo. Aqui o icone e mascara
 * — pega a cor da casa e e o mesmo em todo aparelho.
 */
.wsef-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:999px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(var(--wse-rgb-ouro),.34);
  color:var(--wse-tinta) !important; text-decoration:none !important;
  font-size:.72rem; letter-spacing:.1em; font-weight:600;
  text-transform:uppercase;
  transition:background .22s ease, border-color .22s ease,
             transform .22s ease, box-shadow .22s ease;
}
.wsef-btn:hover{
  background:#fff;
  border-color:rgba(var(--wse-rgb-ouro),.85);
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(var(--wse-rgb-tinta),.10);
}
.wsef-ico{
  flex:0 0 auto; width:15px; height:15px;
  background:var(--wse-ouro-txt);
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  transition:background .22s ease;
}
.wsef-btn:hover .wsef-ico{ background:var(--wse-ouro); }

.wsef-ico--maps  { -webkit-mask-image:var(--wse-svg-maps);   mask-image:var(--wse-svg-maps); }
.wsef-ico--waze  { -webkit-mask-image:var(--wse-svg-waze);   mask-image:var(--wse-svg-waze); }
.wsef-ico--insta { -webkit-mask-image:var(--wse-svg-insta);  mask-image:var(--wse-svg-insta); }
.wsef-ico--yt    { -webkit-mask-image:var(--wse-svg-yt);     mask-image:var(--wse-svg-yt); }
.wsef-ico--star  { -webkit-mask-image:var(--wse-svg-star);   mask-image:var(--wse-svg-star); }
.wsef-ico--blog  { -webkit-mask-image:var(--wse-svg-blog);   mask-image:var(--wse-svg-blog); }
.wsef-ico--loja  { -webkit-mask-image:var(--wse-svg-loja);   mask-image:var(--wse-svg-loja); }
.wsef-ico--face  { -webkit-mask-image:var(--wse-svg-face);   mask-image:var(--wse-svg-face); }
.wsef-ico--tiktok{ -webkit-mask-image:var(--wse-svg-tiktok); mask-image:var(--wse-svg-tiktok); }

/* ---------- faixa inferior (mesmo degrade da barra do header) ---------- */
.wsef-barra{
  background:linear-gradient(90deg,var(--wse-claro-1) 0%,var(--wse-claro-2) 38%,var(--wse-claro-3) 72%,var(--wse-claro-4) 100%);
  border-top:1px solid rgba(var(--wse-rgb-acento-med),.28);
  padding:22px 34px 26px;
}
.wsef-nav{
  display:flex; justify-content:center; align-items:center;
  flex-wrap:wrap; gap:8px 26px; margin-bottom:16px;
}
.wsef-nav a{
  color:var(--wse-acento-txt); text-decoration:none; text-transform:uppercase;
  font-size:.72rem; letter-spacing:.18em; font-weight:600;
  padding:6px 2px; border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.wsef-nav a:hover{ color:var(--wse-tinta-esc); border-bottom-color:var(--wse-acento-med); }
.wsef-legal{ text-align:center; }
.wsef-copy{ margin:0 0 4px; font-size:.76rem; font-weight:500; color:var(--wse-tinta-esc); }
.wsef-assinatura{
  margin:0 0 8px; font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-style:italic; font-size:1rem; color:var(--wse-acento-txt);
}
.wsef-credito{ margin:0; font-size:.7rem; font-weight:300; color:var(--wse-acento-txt); }
.wsef-credito a{ color:var(--wse-tinta-esc); text-decoration:none; border-bottom:1px solid rgba(var(--wse-rgb-acento-med),.6); }
.wsef-credito a:hover{ color:#000; }

/* ---------- responsivo ---------- */
@media(max-width:980px){
  .wsef-inner{ grid-template-columns:1fr 1fr; gap:40px; }
  .wsef-col-marca{ grid-column:1 / -1; }
}
@media(max-width:640px){
  .wsef-painel{ padding:48px 22px 40px; }
  .wsef-inner{ grid-template-columns:1fr; gap:36px; }
  .wsef-nome{ font-size:1.8rem; }
  .wsef-cta{ display:block; width:100%; }
  .wsef-barra{ padding:20px 20px 24px; }
  .wsef-nav{ gap:6px 16px; }
  .wsef-nav a{ font-size:.68rem; letter-spacing:.14em; }
}

/* respeita quem prefere menos animacao */
@media(prefers-reduced-motion:reduce){
  .wsef-fly, .wsef-cta{ animation:none; }
}
.wsef-mail{ margin:10px 0 0; font-size:.85rem; font-weight:300; }
.wsef-mail a{ color:var(--wse-acento-txt); text-decoration:none; border-bottom:1px solid rgba(var(--wse-rgb-acento-med),.5); }
.wsef-mail a:hover{ color:var(--wse-tinta-esc); }

/* ==================================================================
   CARDS DE ARTIGO (.lbc) — 27/07/2026
   Composicao da referencia enviada: foto ocupando o card, veu em
   degrade subindo de baixo, titulo em caixa alta, subtitulo e botao
   em pilula. Cores da marca (nude/dourado).

   >>> PARA USAR O ROSA DA REFERENCIA: troque as duas cores de
   --wsec-veu-1 e --wsec-veu-2 abaixo (ex.: rgba(244,114,182,.72) e
   rgba(236,72,153,.96)) e --wsec-pill. Nada mais precisa mudar.
   ================================================================== */

.wsec-grid{
  --wsec-veu-1: rgba(var(--wse-rgb-acento-esc),.55);
  --wsec-veu-2: rgba(var(--wse-rgb-acento-esc),.96);
  --wsec-pill : linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc));
  display:grid; gap:26px; grid-template-columns:repeat(3,1fr);
  max-width:1180px; margin:0 auto;
}
.wsec-grid-todos{ grid-template-columns:repeat(3,1fr); }

.wsec-card{
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio:5/7; background:var(--wse-painel-1);
  box-shadow:0 12px 30px rgba(var(--wse-rgb-tinta),.16);
  transition:transform .28s ease, box-shadow .28s ease;
}
.wsec-card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(var(--wse-rgb-tinta),.26); }
.wsec-link{ position:absolute; inset:0; display:block; text-decoration:none !important; color:#fff !important; }

.wsec-img{
  position:absolute; inset:0; display:block;
  background-size:cover; background-position:center;
  transition:transform .5s ease;
}
.wsec-card:hover .wsec-img{ transform:scale(1.05); }

/* sem foto destacada: fundo em degrade da marca, para o card nao ficar vazio */
.wsec-sem-foto{ background:linear-gradient(160deg,var(--wse-painel-1) 0%,var(--wse-painel-2) 55%,var(--wse-painel-3) 100%); }

.wsec-veu{
  position:absolute; inset:0; display:block;
  background:linear-gradient(180deg,
     rgba(var(--wse-rgb-tinta),0) 28%,
     var(--wsec-veu-1) 58%,
     var(--wsec-veu-2) 100%);
}
.wsec-txt{
  position:absolute; left:0; right:0; bottom:0; display:block;
  padding:26px 24px 24px;
}
.wsec-titulo{
  display:block;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:600;
  text-transform:uppercase; letter-spacing:.03em; line-height:1.14;
  font-size:clamp(1.25rem,1.9vw,1.6rem); color:#fff;
  text-shadow:0 2px 10px rgba(var(--wse-rgb-tinta),.4);
  margin-bottom:8px;
}
.wsec-sub{
  display:block; font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  font-size:.76rem; font-weight:300; letter-spacing:.06em;
  color:rgba(255,255,255,.92); margin-bottom:16px;
}
.wsec-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 24px; border-radius:999px;
  background:var(--wsec-pill); color:#fff;
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  text-transform:uppercase; font-size:.68rem; letter-spacing:.16em; font-weight:700;
  box-shadow:0 4px 14px rgba(var(--wse-rgb-tinta),.3);
  transition:transform .2s ease, filter .2s ease;
}
.wsec-card:hover .wsec-btn{ transform:translateX(3px); filter:brightness(1.08); }
.wsec-seta{ font-size:.9rem; line-height:1; }

/* ---------- bloco de sugestoes (home + post) ---------- */
.wsec-sugestoes{
  width:auto; max-width:none;
  margin-left:var(--wse-sangria); margin-right:var(--wse-sangria);
  background:linear-gradient(160deg,var(--wse-claro-1) 0%,var(--wse-papel) 60%,var(--wse-claro-2) 100%);
  border-top:1px solid rgba(var(--wse-rgb-acento-med),.22);
  padding:64px 34px 68px;
}
.wsec-sug-inner{ max-width:1180px; margin:0 auto; text-align:center; }
.wsec-sug-titulo{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.6rem); color:var(--wse-tinta); margin:0 0 6px;
}
.wsec-sug-sub{
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif); font-style:italic;
  font-size:.9rem; font-weight:300; color:var(--wse-acento-pro); margin:0 0 34px;
}
.wsec-todos{
  display:inline-block; margin-top:34px; padding:14px 34px; border-radius:999px;
  background:#fff; border:1px solid rgba(var(--wse-rgb-acento-med),.55);
  color:var(--wse-acento-txt) !important; text-decoration:none !important;
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  text-transform:uppercase; font-size:.72rem; letter-spacing:.16em; font-weight:600;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.wsec-todos:hover{ background:var(--wse-claro-1); border-color:var(--wse-acento-med); transform:translateY(-2px); }

/* o bloco "Voce tambem pode gostar" do ws-blog-suggest sai de cena:
   estas sugestoes o substituem, com o estilo novo. Para traze-lo de
   volta, remova esta regra. */
#wsbs-widget{ display:none !important; }

/* ---------- responsivo dos cards ---------- */
@media(max-width:900px){
  .wsec-grid, .wsec-grid-todos{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .wsec-sugestoes{ padding:52px 22px 56px; }
}
@media(max-width:600px){
  .wsec-grid, .wsec-grid-todos{ grid-template-columns:1fr; gap:22px; }
  .wsec-card{ aspect-ratio:4/5; }
  .wsec-txt{ padding:22px 20px 20px; }
}

/* titulos em duas cores tambem nos blocos que aparecem na home */
.wsec-sug-titulo .wse-au,
.wsef-nome em{ color:var(--wse-acento-esc); }

/* ==================================================================
   CARROSSEL DE VIDEOS (plugin ws-video-gallery) — 27/07/2026

   O plugin monta o fundo com um degrade que termina em
   color-mix(--ws-kit-dark), e essa variavel esta em var(--wse-acento-med) no site.
   Resultado: o bloco descia para um marrom sujo, destoando de tudo.

   Aqui ele passa a usar o mesmo painel claro do bloco de sugestoes.
   Precisa de "html body" + !important porque o plugin injeta o
   <style> dele no corpo da pagina, depois desta folha.
   ================================================================== */

html body .wsvg-widget{
  --ws-kit-primary:var(--wse-acento);
  background:linear-gradient(160deg,var(--wse-claro-1) 0%,var(--wse-papel) 58%,var(--wse-claro-2) 100%) !important;
}

/*
 * Largura total.
 * O plugin trava o bloco em "max-width:1200px !important" numa regra
 * html body .wsvg-widget (especificidade 0,1,2) — por isso sobravam as
 * faixas claras dos lados. Acrescentando o "section" a especificidade
 * sobe para 0,1,3 e a nossa regra passa a valer.
 * O miolo (.wsvg-c) continua limitado a 1100px e centralizado: quem
 * passa a ocupar a tela toda e o fundo, como no bloco de sugestoes.
 */
html body section.wsvg-widget{
  width:auto !important;
  max-width:none !important;
  margin-left:var(--wse-sangria) !important;
  margin-right:var(--wse-sangria) !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:1px solid rgba(var(--wse-rgb-acento-med),.22) !important;
  border-bottom:1px solid rgba(var(--wse-rgb-acento-med),.22) !important;
  box-shadow:none !important;
  padding-left:26px !important;
  padding-right:26px !important;
}
@media(max-width:680px){
  html body section.wsvg-widget{
    padding-left:14px !important; padding-right:14px !important;
    border-radius:0 !important; margin-top:0 !important;
  }
}
/* o brilho radial em cima do degrade tambem sujava o fundo */
html body .wsvg-widget::before{ background:none !important; }

html body .wsvg-widget h3{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif) !important;
  font-weight:500 !important; color:var(--wse-tinta) !important;
}
html body .wsvg-widget .wsvg-h .wsvg-sub,
html body .wsvg-widget .wsvg-sub{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif) !important;
  font-style:italic !important; color:var(--wse-acento-pro) !important;
}
html body .wsvg-widget .wsvg-h::after{
  background:var(--wse-acento) !important; opacity:.55 !important;
}

/* cards do carrossel: mesma pegada dos cards de artigo */
html body .wsvg-widget .wsvg-item{
  border-radius:16px !important;
  box-shadow:0 8px 22px rgba(var(--wse-rgb-tinta),.12) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
html body .wsvg-widget .wsvg-item:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 16px 34px rgba(var(--wse-rgb-tinta),.2) !important;
}
html body .wsvg-widget .wsvg-cap{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif) !important;
  color:var(--wse-tinta) !important; background:var(--wse-cartao) !important;
}
html body .wsvg-widget .wsvg-play{ background:rgba(var(--wse-rgb-tinta),.5) !important; }
html body .wsvg-widget .wsvg-item:hover .wsvg-play{ background:rgba(var(--wse-rgb-acento-esc),.88) !important; }

/* setas de navegacao na cor da marca */
html body .wsvg-widget .wsvg-nav button,
html body .wsvg-widget .wsvg-prev,
html body .wsvg-widget .wsvg-next{
  background:#fff !important; color:var(--wse-acento-esc) !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.5) !important;
}
html body .wsvg-widget .wsvg-nav button:hover,
html body .wsvg-widget .wsvg-prev:hover,
html body .wsvg-widget .wsvg-next:hover{
  background:linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc)) !important;
  color:#fff !important; border-color:var(--wse-acento-esc) !important;
}


/* ==================================================================
   TEXTURA DO HERO DA HOME — 27/07/2026

   Camada floral suave, tom sobre tom, atras do texto do hero — a mesma
   ideia da referencia enviada, mas em nude/dourado da marca em vez do rosa.

   Como funciona:
   - vai num ::before de #lb-header .wseh-hero, que o seu bloco nao usa
     (ele so define .wseh-photo:before), entao nao conflita com nada;
   - fica em z-index:0, abaixo da borboleta (.wseh-fly, z-index:1) e do
     texto (.wseh-hero-inner, z-index:2);
   - some para a direita com mask-image, para nao competir com a foto;
   - e um SVG embutido no proprio CSS: nenhuma requisicao a mais, e nao
     depende de upload de imagem nenhuma.

   Para tirar, basta apagar este bloco. O bloco do ws-page-builder
   continua exatamente como voce montou.
   ================================================================== */

#lb-header .wseh-hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background-image:var(--wse-textura);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:auto 118%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 78%);
          mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 78%);
}

/* no celular o texto fica centralizado sobre o fundo: deixa mais fraca */
@media(max-width:900px){
  #lb-header .wseh-hero::before{
    background-size:auto 100%;
    opacity:.55;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 70%);
  }
}

@media(prefers-reduced-motion:reduce){
  #lb-header .wseh-hero::before{ opacity:.7; }
}

/* Reforco: o bloco "Voce tambem pode gostar" do ws-blog-suggest.
   O plugin nao pode ser desativado pelo bridge (o endpoint responde ok
   mas nao desativa), entao ele fica escondido por CSS com a maior
   especificidade possivel, para vencer qualquer regra do proprio plugin. */
html body section#wsbs-widget,
html body #wsbs-widget,
html body [data-ws-section="blog-suggest"]{
  display:none !important;
  visibility:hidden !important;
  height:0 !important; overflow:hidden !important;
}

/* ==================================================================
   BOTAO FLUTUANTE DE WHATSAPP (plugin ws-floating-actions) — 27/07/2026

   Dois problemas resolvidos aqui:

   1) Nao aparecia na HOME. O ws-page-override esconde
      ".wsfa-fab, .wsfa-trigger, .floating-action, .ws-fab, .whatsapp-float"
      com display:none !important (especificidade 0,1,0). Acrescentando o
      elemento — html body button.wsfa-trigger — subimos para 0,1,3 e ele volta.

   2) O painel abria quase preto. O plugin pinta o fundo com
      var(--ws-kit-light) e essa variavel esta em var(--wse-papel) no site (a paleta
      do kit esta trocada: "light" escuro e "dark" dourado). Aqui as
      variaveis sao corrigidas so dentro do widget.
   ================================================================== */

/* volta a aparecer na home */
html body button.wsfa-trigger,
html body .wsfa-trigger{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* paleta certa dentro do widget */
html body .wsfa-trigger,
html body .wsfa-modal,
html body .wsfa-modal__sheet{
  --ws-kit-primary:var(--wse-acento);
  --ws-kit-dark:var(--wse-tinta);
  --ws-kit-light:var(--wse-papel);
  --ws-kit-muted:var(--wse-suave-2);
  --ws-kit-surface:var(--wse-cartao);
}

/* botao flutuante nas cores da marca */
html body button.wsfa-trigger{
  background:linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc)) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 6px 20px rgba(var(--wse-rgb-acento-esc),.45) !important;
}
html body button.wsfa-trigger::before{ background:var(--wse-acento) !important; opacity:.28 !important; }
html body button.wsfa-trigger::after{ box-shadow:0 0 0 0 rgba(var(--wse-rgb-acento),.6) !important; }
html body button.wsfa-trigger svg{ color:#fff !important; }

/* painel: fundo claro da marca, no lugar do quase-preto */
html body .wsfa-modal{ background:rgba(var(--wse-rgb-tinta),.45) !important; }
html body .wsfa-modal__sheet{
  background:linear-gradient(160deg,var(--wse-claro-1) 0%,var(--wse-papel) 58%,var(--wse-claro-2) 100%) !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.3) !important;
}
html body .wsfa-name{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif) !important;
  color:var(--wse-tinta) !important; font-weight:600 !important;
}
html body .wsfa-tagline{ color:var(--wse-acento-pro) !important; }
html body .wsfa-logo-wrap{
  background:var(--wse-cartao) !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.35) !important;
  box-shadow:0 6px 18px rgba(var(--wse-rgb-tinta),.10) !important;
}
html body .wsfa-status{
  background:var(--wse-cartao) !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.4) !important;
  color:var(--wse-suave) !important;
}

/* cards da lista */
html body .wsfa-card{
  background:var(--wse-cartao) !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.28) !important;
}
html body .wsfa-card:hover{
  border-color:var(--wse-acento-med) !important;
  box-shadow:0 10px 26px rgba(var(--wse-rgb-tinta),.12) !important;
}
html body .wsfa-card__txt strong{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif) !important;
  color:var(--wse-tinta) !important; font-size:1.05rem !important; font-weight:600 !important;
}
html body .wsfa-card__txt span{ color:var(--wse-suave-2) !important; }
html body .wsfa-card::after{ color:var(--wse-acento-esc) !important; }
html body .wsfa-modal__close{
  background:rgba(var(--wse-rgb-tinta),.06) !important; color:var(--wse-acento-txt) !important;
}
html body .wsfa-modal__close:hover{ background:rgba(var(--wse-rgb-tinta),.12) !important; }

/* ==================================================================
   ANTI-BALANCO NO CELULAR — 27/07/2026

   Na home o style.css do tema pai nao carrega (de proposito, para nao
   mexer no que voce montou). Acontece que e nele que fica a regra
   global "*{box-sizing:border-box}". Sem ela, os meus blocos de largura
   total ficavam com 100vw MAIS o padding — ou seja, mais largos que a
   tela. Isso cria rolagem horizontal, e a pagina "balanca" ao rolar
   no celular.

   Aqui cada bloco meu recebe o box-sizing explicitamente, sem usar
   seletor global. E o overflow-x:clip no body e a rede de seguranca,
   caso algum outro elemento passe da largura.
   ================================================================== */

.wsef, .wsef *,
.wsec-sugestoes, .wsec-sugestoes *,
.wsec-grid, .wsec-grid *,
.wsec-card, .wsec-card *,
.wse-topo, .wse-topo *,
.wsep-hero, .wsep-hero *,
.wseh-bar, .wseh-bar *{
  box-sizing:border-box;
}

/* garante que o padding fique DENTRO dos 100vw */
html body .wsef,
html body .wsec-sugestoes,
html body .wsep-hero,
html body section.wsvg-widget{
  box-sizing:border-box !important;
  overflow-x:hidden;
}

/* rede de seguranca: nada gera rolagem lateral.
   overflow-x:clip (e nao hidden) nao cria um container de rolagem,
   entao nao quebra position:sticky de nada que exista na pagina. */
html, body{ overflow-x:clip; }
@supports not (overflow:clip){
  html, body{ overflow-x:hidden; }
}

/* Os blocos que voce montou no ws-page-builder trazem width:100vw no
   atributo style. Aqui eles passam para width:auto — a margem negativa
   que ja esta neles continua dando a largura total, sem o risco do 100vw. */
html body .ws-pb-html [style*="100vw"],
html body .ws-pb-html[style*="100vw"]{
  width:auto !important;
  max-width:none !important;
}

/* no celular, o carrossel de video precisa poder rolar na horizontal
   por dentro — o clip acima e no body, nao nele */
html body .wsvg-widget .wsvg-track{ overflow-x:auto !important; }

@media(max-width:600px){
  /* margens laterais menores, para nada encostar na borda */
  html body .wsec-sugestoes{ padding-left:16px !important; padding-right:16px !important; }
  html body .wsef .wsef-painel{ padding-left:18px !important; padding-right:18px !important; }
  html body .wsep-hero{ padding-left:16px !important; padding-right:16px !important; }
  /* imagens nunca passam da largura do pai */
  html body .wsef img, html body .wsec-card img, html body .wsep-hero img{ max-width:100%; height:auto; }
}

/* ---------- modal do WhatsApp: logo, fechar e leitura no celular ---------- */

/* a logo estava estourando o circulo e quase invisivel */
html body .wsfa-logo-wrap{
  background:var(--wse-cartao) !important;
  overflow:hidden !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.35) !important;
}
html body .wsfa-logo-wrap img{
  width:100% !important; height:100% !important;
  object-fit:contain !important;
  padding:16px !important; box-sizing:border-box !important;
  display:block !important; margin:0 !important;
}

/* o botao de fechar sumia ao rolar o painel no celular:
   agora fica preso na tela, grande o suficiente para o dedo */
html body .wsfa-modal__close{
  width:44px !important; height:44px !important;
  background:var(--wse-cartao) !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.45) !important;
  color:var(--wse-tinta) !important; font-size:20px !important;
  box-shadow:0 4px 14px rgba(var(--wse-rgb-tinta),.18) !important;
  z-index:100000 !important;
}
@media(max-width:680px){
  html body .wsfa-modal__close{
    position:fixed !important;
    top:14px !important; right:14px !important;
    width:48px !important; height:48px !important;
    font-size:24px !important;
    background:var(--wse-tinta) !important; color:#fff !important;
    border-color:rgba(255,255,255,.3) !important;
    box-shadow:0 6px 20px rgba(0,0,0,.4) !important;
  }
  /* espaco no fim, para o ultimo card nao ficar escondido */
  html body .wsfa-modal__sheet{ padding-bottom:34px !important; }
}

/* O plugin ignora a opcao ws_kit_logo_url e continua puxando logo.png,
   que e a versao clara demais — quase invisivel dentro do circulo.
   Aqui a borboleta dourada (a mesma do cabecalho e do rodape) entra
   como fundo do circulo, centralizada e no tamanho certo. */
html body .wsfa-logo-wrap{
  background:var(--wse-cartao) var(--wse-simbolo) center/78% no-repeat !important;
}
html body .wsfa-logo-wrap img{ display:none !important; }

/* ---------- modal no celular: dava para rolar so para baixo ----------
   O painel e centralizado verticalmente (align-items:center) dentro de um
   container fixo. Quando o conteudo fica mais alto que a tela, o topo sai
   para fora e nao ha como alcanca-lo — era por isso que a pilula do horario
   ficava inacessivel. Aqui o painel passa a comecar do topo e quem rola e o
   modal inteiro, entao da para subir ate o inicio. */
@media(max-width:680px){
  html body .wsfa-modal{
    align-items:flex-start !important;
    justify-content:center !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:76px 12px 28px !important;
  }
  html body .wsfa-modal__sheet{
    max-height:none !important;
    overflow-y:visible !important;
    margin:0 auto !important;
  }
}

/* ==================================================================
   MODAL DO WHATSAPP: balanco lateral no celular — 27/07/2026

   Duas causas, as duas classicas:

   1) FLEXBOX SEM min-width:0
      Cada card e um flex (icone + texto). O subtitulo usa
      white-space:nowrap — e um item de flex com texto sem quebra NAO
      encolhe abaixo do tamanho do conteudo, a menos que receba
      min-width:0. O endereco do Google Maps ("Praça Raul Leme, 200,
      complemento, bairro, cidade...") e longo e empurrava o
      card para fora do painel. Dai a rolagem lateral.

   2) FALTA DE box-sizing
      Na home o style.css do tema nao carrega, e e nele que fica o
      "*{box-sizing:border-box}". Sem ele, o painel com width:100%
      MAIS o padding interno fica mais largo que a tela.
   ================================================================== */

html body .wsfa-modal,
html body .wsfa-modal *{ box-sizing:border-box !important; }

html body .wsfa-modal{ overflow-x:hidden !important; }

html body .wsfa-modal__sheet{
  /* No celular o painel tem que caber na tela (era o balanco lateral).
     No computador ele e um PAINEL, nao uma pagina: sem o limite ele se
     esticava de ponta a ponta e ficava com cara de erro. O min() resolve
     os dois casos com uma linha. */
  max-width:min(100%, 430px) !important;
  overflow-x:hidden !important;
}

/* o texto do card volta a poder encolher e cortar com reticencias */
html body .wsfa-card{ min-width:0 !important; max-width:100% !important; }
html body .wsfa-card__txt{
  min-width:0 !important;
  flex:1 1 auto !important;
  overflow:hidden !important;
}
html body .wsfa-card__txt strong,
html body .wsfa-card__txt span{
  display:block !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
/* o icone nunca encolhe */
html body .wsfa-card__icon{ flex:0 0 auto !important; }

/* o nome longo do salao tambem podia estourar */
html body .wsfa-name,
html body .wsfa-tagline,
html body .wsfa-status{
  max-width:100% !important;
  overflow-wrap:break-word !important;
  word-break:break-word !important;
}

/* ---------- menu vindo de Aparencia -> Menus ----------
   Quando o cliente monta o proprio menu, o WordPress devolve uma <ul>.
   Aqui ela some visualmente e os links ficam iguais aos do fallback,
   que sao <a> soltos. Vale para o cabecalho e para o rodape. */
.wse-topo .wseh-nav ul,
.wsef-nav ul{
  display:contents; list-style:none; margin:0; padding:0;
}
.wse-topo .wseh-nav li,
.wsef-nav li{ display:contents; list-style:none; margin:0; padding:0; }

/* ==================================================================
   RODAPES DUPLICADOS

   O tema traz o proprio rodape (.wsef). Alguns sites tambem tem o
   plugin ws-smart-footer ligado, que imprime OUTRO rodape logo acima —
   dois rodapes empilhados, com os mesmos telefones repetidos.

   O plugin nao pode ser desligado pelo bridge (o endpoint responde
   "ok" e nao desativa), entao ele fica escondido aqui, com seletor de
   elemento para vencer as regras do proprio plugin. Nada se perde: os
   mesmos links estao no rodape do tema, tirados da Ficha Tecnica.

   Se um dia o plugin for desativado no wp-admin, esta regra vira
   inofensiva — nao ha nada para esconder.
   ================================================================== */
html body footer#wssf-footer,
html body footer.wssf-footer,
html body [data-ws-section="footer"]:not(.wsef){
  display:none !important;
  visibility:hidden !important;
  height:0 !important; overflow:hidden !important;
}

/* ==================================================================
   BLOG MONTADO PELO PLUGIN (ws-blog-page)

   Em sites onde a pagina /blog/ e desenhada pelo plugin, e ele que
   manda — o tema so acerta o que destoa:

   1) o quadro da foto fica em branco quando o artigo nao tem imagem
      destacada; sem foto ele simplesmente sai da frente;
   2) as cores vem do plugin; aqui passam a ser as da marca.
   ================================================================== */
html body .wsbp-img-c:not(:has(img)){ display:none !important; }
html body .wsbp-img-c:empty{ display:none !important; }

html body #wsbp-blog .wsbp-card{
  background:var(--wse-cartao) !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.16) !important;
  box-shadow:0 10px 26px rgba(var(--wse-rgb-tinta),.07) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
html body #wsbp-blog .wsbp-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 18px 38px rgba(var(--wse-rgb-tinta),.13) !important;
}
html body #wsbp-blog .wsbp-title{ color:var(--wse-tinta) !important; }
html body #wsbp-blog .wsbp-sub{ color:var(--wse-acento-pro) !important; }
html body #wsbp-blog .wsbp-desc{ color:var(--wse-suave-2) !important; }
html body #wsbp-blog .wsbp-post-title{ color:var(--wse-tinta) !important; }
html body #wsbp-blog .wsbp-excerpt{ color:var(--wse-suave-2) !important; }
html body #wsbp-blog .wsbp-meta strong{ color:var(--wse-acento-pro) !important; }
html body #wsbp-blog .wsbp-icon svg{ fill:var(--wse-acento-med) !important; }
html body #wsbp-blog .page-numbers.current,
html body #wsbp-blog .wsbp-pag .current{
  background:var(--wse-acento-med) !important; border-color:var(--wse-acento-med) !important;
  color:#fff !important;
}

/* ---------- card de artigo sem foto destacada ----------
   Sem imagem o card virava um retangulo cinza com o titulo la embaixo e
   um vazio enorme em cima. Aqui o espaco recebe a textura floral da
   marca — a mesma do hero, ja nas cores do cliente — e o veu comeca
   mais alto, entao o titulo sobe e o card fica equilibrado. */
.wsec-card.wsec-sem-foto .wsec-veu{
  background:var(--wse-textura), linear-gradient(180deg,
      rgba(var(--wse-rgb-tinta),0) 0%,
      rgba(var(--wse-rgb-tinta),.10) 30%,
      rgba(var(--wse-rgb-acento-esc),.62) 62%,
      rgba(var(--wse-rgb-acento-esc),.88) 100%);
  background-size:150% auto, auto;
  background-position:center top, center;
  background-repeat:no-repeat, no-repeat;
}
.wsec-card.wsec-sem-foto .wsec-txt{ justify-content:flex-end; }

/* ---------- modal do WhatsApp: marca no lugar do endereco do site ----------
   O plugin so escreve o nome do cliente quando alguem preencheu esse
   campo nas opcoes dele; sem isso ele mostra o endereco do site
   ("meusalao.com.br"), que e a primeira coisa que a cliente le ao abrir
   o modal. Aqui o nome vem da Ficha Tecnica pela variavel --wse-nome.

   O texto original nao e removido do HTML — continua la para leitores de
   tela e para o dia em que o campo do plugin for preenchido; ele so
   deixa de ocupar espaco na tela. */
html body .wsfa-name{
  font-size:0 !important; line-height:0 !important;
  margin-bottom:0 !important;
}
html body .wsfa-name::after{
  content:var(--wse-nome, "");
  display:block;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif) !important;
  font-size:1.5rem !important; line-height:1.25 !important;
  font-weight:500 !important; letter-spacing:.01em;
  color:var(--wse-tinta) !important;
  margin-bottom:6px;
}

/* Selo redondo com o simbolo da marca, quando o plugin nao traz logo.
   O :not(:has(...)) evita dois selos em sites onde ele traz. */
html body .wsfa-modal__sheet:not(:has(.wsfa-logo-wrap)) .wsfa-head::before{
  content:"";
  display:block; width:92px; height:92px; margin:2px auto 14px;
  border-radius:50%;
  background:var(--wse-cartao) var(--wse-simbolo) center/70% no-repeat;
  border:1px solid rgba(var(--wse-rgb-acento-med),.35);
  box-shadow:0 6px 18px rgba(var(--wse-rgb-tinta),.10);
}

/* ---------- cabecalho sempre por cima do hero ----------
   O hero sobe 52px com margem negativa para encostar no cabecalho (e o
   que tira a faixa clara entre os dois). No computador o cabecalho tem
   uma linha so e sobra espaco; no celular ele vira tres linhas — marca,
   botao e menu — e o hero, que vem depois no HTML e e position:relative,
   passava por cima justamente da linha do menu: os links existiam, eram
   clicaveis pelo teclado, mas ninguem os via.

   Com a pilha declarada, o cabecalho fica na frente em qualquer largura
   e o encaixe dos 52px continua igual. */
.wse-topo{ position:relative; z-index:3; }

/* ---------- cabecalho na home ----------
   Na home o style.css nao carrega (ele tem regras globais que mudariam
   o fundo e a fonte do que voce monta no page builder), entao a barra
   precisa das medidas dela aqui. Sao as mesmas do resto do site — so
   estao repetidas neste arquivo, que carrega em todas as paginas. */
body.home .wse-topo{ position:relative; z-index:3; }
body.home .wse-topo .wseh-bar{ margin:0; }
body.home .wse-home-main{ display:block; }

/* ---------- foto do salao tambem no hero das paginas internas ----------
   Mesma ideia da home: em vez de um painel liso, o lugar aparece por
   tras do titulo, com o mesmo veu de creme segurando a leitura.
   Sem foto na Ficha a variavel vem "none" e o degrade de sempre assume. */
.wsep-hero{
  background:
    linear-gradient(160deg,
        rgba(var(--wse-rgb-papel, 237,232,213),.93) 0%,
        rgba(var(--wse-rgb-papel, 237,232,213),.80) 52%,
        rgba(var(--wse-rgb-papel, 237,232,213),.90) 100%),
    var(--wse-hero-bg) center/cover no-repeat,
    linear-gradient(160deg,var(--wse-painel-1) 0%,var(--wse-painel-2) 55%,var(--wse-painel-3) 100%);
}

/* ---------- detalhes em dourado nas internas ---------- */
.wsep-rotulo{ color:var(--wse-ouro-txt) !important; }
.wsef-sub{ color:var(--wse-ouro-txt) !important; }
.wsef-kicker{ color:var(--wse-ouro-txt) !important; }

/* fio dourado separando o rodape do conteudo */
.wsef-painel{ border-top:1px solid rgba(var(--wse-rgb-ouro),.4); }

/* ==================================================================
   PAGINA SOBRE NOS
   ================================================================== */

.wsp-sobre{ padding-bottom:20px; }

.wsp-abertura{ max-width:760px; margin:0 auto 12px; text-align:center; }
.wsp-kicker{
  display:block; text-transform:uppercase; letter-spacing:.26em;
  font-size:.68rem; font-weight:600; color:var(--wse-ouro-txt);
  margin-bottom:14px;
}
.wsp-prosa{
  font-size:1.02rem; line-height:1.9; font-weight:300;
  color:var(--wse-suave-2); margin:0 0 18px;
}
/* o primeiro paragrafo abre maior: guia a leitura para dentro do texto */
.wsp-prosa--guia{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:1.32rem; line-height:1.7; color:var(--wse-tinta); font-weight:400;
}

.wsp-bloco{ max-width:1100px; margin:64px auto 0; }
.wsp-titulo{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.15;
  color:var(--wse-tinta); text-align:center; margin:0 0 30px;
}
.wsp-titulo .wse-au{ color:var(--wse-acento-med); font-style:italic; }
/* mesmo filete dourado das secoes da home */
.wsp-titulo::after{
  content:""; display:block; width:118px; height:8px; margin:16px auto 0;
  background:var(--wse-ouro); opacity:.9;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 8'><rect x='0' y='3.6' width='46' height='0.8'/><rect x='72' y='3.6' width='46' height='0.8'/><path d='M59 0.6 L62.4 4 L59 7.4 L55.6 4 Z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 8'><rect x='0' y='3.6' width='46' height='0.8'/><rect x='72' y='3.6' width='46' height='0.8'/><path d='M59 0.6 L62.4 4 L59 7.4 L55.6 4 Z'/></svg>") center/contain no-repeat;
}

/* ---------- servicos em lista ---------- */
.wsp-servicos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px 22px;
}
.wsp-servicos li{
  position:relative; padding:11px 0 11px 22px;
  font-size:.97rem; color:var(--wse-suave-2); font-weight:300;
  border-bottom:1px solid rgba(var(--wse-rgb-ouro),.22);
}
.wsp-servicos li::before{
  content:""; position:absolute; left:2px; top:calc(50% - 3px);
  width:6px; height:6px; transform:rotate(45deg);
  background:var(--wse-ouro);
}

/* ---------- mosaico de fotos ---------- */
.wsp-mosaico{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;
}
.wsp-foto{
  display:block; padding:0; border:0; cursor:zoom-in;
  border-radius:16px; overflow:hidden; background:var(--wse-cartao);
  box-shadow:0 10px 26px rgba(var(--wse-rgb-tinta),.12);
  transition:transform .28s ease, box-shadow .28s ease;
}
.wsp-foto:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(var(--wse-rgb-tinta),.20); }
.wsp-foto-img{
  display:block; width:100%; height:auto;
  aspect-ratio:1/1; object-fit:cover;
}

/* ---------- visita ---------- */
.wsp-visita-grade{
  display:grid; grid-template-columns:1fr 1fr; gap:44px;
  max-width:860px; margin:0 auto;
}
@media(max-width:760px){ .wsp-visita-grade{ grid-template-columns:1fr; gap:30px; } }
.wsp-visita-col{ text-align:center; }
.wsp-hora{
  display:flex; justify-content:space-between; gap:16px;
  margin:0; padding:11px 0;
  border-bottom:1px solid rgba(var(--wse-rgb-ouro),.22);
  font-size:.95rem; color:var(--wse-suave-2); font-weight:300;
}
.wsp-hora strong{ color:var(--wse-tinta); font-weight:500; }
.wsp-visita-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.wsp-visita-cta{ text-align:center; margin-top:36px; }

/* os botoes .wsep-botao ja existem no style.css, que carrega nas internas */
.wsp-sobre .wsep-botao--linha{ padding:11px 22px; font-size:.68rem; }

.wsp-editor{ max-width:760px; }

/* ==================================================================
   O BOTAO "AGENDAR" DO CABECALHO

   E o botao mais importante do site — o unico que aparece em todas as
   paginas — e estava igual a qualquer outro. Aqui ele ganha o dourado
   da marca: fio dourado em volta, texto em dourado claro e um brilho
   que atravessa a pilula devagar, como a luz correndo num metal.

   Por que o texto e dourado CLARO e o fundo continua verde escuro: o
   dourado cheio como fundo, com letra branca por cima, nao tem
   contraste que preste. Invertendo — verde no fundo, dourado claro na
   letra — a leitura fica confortavel e o botao fica mais elegante do
   que era.

   O brilho respeita quem pediu menos movimento no sistema.
   ================================================================== */

.wse-topo .wseh-cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg, var(--wse-acento-esc), var(--wse-tinta)) !important;
  color:var(--wse-ouro-cla) !important;
  border:1px solid rgba(var(--wse-rgb-ouro),.55) !important;
  box-shadow:
    0 6px 18px rgba(var(--wse-rgb-tinta),.22),
    inset 0 0 0 1px rgba(var(--wse-rgb-ouro),.16) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

/* o brilho: uma faixa clara inclinada que atravessa de tempos em tempos */
.wse-topo .wseh-cta::after{
  content:"";
  position:absolute; top:-60%; left:-120%;
  width:55%; height:220%;
  transform:rotate(18deg);
  pointer-events:none;
  background:linear-gradient(90deg,
      rgba(var(--wse-rgb-ouro),0) 0%,
      rgba(var(--wse-rgb-ouro),.30) 45%,
      rgba(255,255,255,.34) 52%,
      rgba(var(--wse-rgb-ouro),.30) 60%,
      rgba(var(--wse-rgb-ouro),0) 100%);
  animation:wseBrilho 5.5s ease-in-out infinite;
}
@keyframes wseBrilho{
  0%, 62%   { left:-120%; }
  92%, 100% { left:190%; }
}

.wse-topo .wseh-cta:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--wse-rgb-ouro),.9) !important;
  box-shadow:
    0 12px 26px rgba(var(--wse-rgb-tinta),.28),
    0 0 22px rgba(var(--wse-rgb-ouro),.30),
    inset 0 0 0 1px rgba(var(--wse-rgb-ouro),.3) !important;
}

@media(prefers-reduced-motion:reduce){
  .wse-topo .wseh-cta::after{ animation:none; opacity:0; }
  .wse-topo .wseh-cta{ transition:none !important; }
  .wse-topo .wseh-cta:hover{ transform:none; }
}

/* ---------- o telefone no rodape ---------- */
.wsef-fone{ margin:14px 0 0; }
.wsef-fone a{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:1.35rem; font-weight:500; letter-spacing:.01em;
  color:var(--wse-tinta); text-decoration:none;
  border-bottom:1px solid rgba(var(--wse-rgb-ouro),.45);
  padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.wsef-fone a:hover{ color:var(--wse-acento-txt); border-bottom-color:var(--wse-ouro); }
.wsef-fone-ico{ font-size:1.05rem; color:var(--wse-ouro-txt); }

/* ---------- respiro entre o hero e o conteudo ----------
   O hero sobe 52px com margem negativa para encostar no cabecalho. Quem
   vem depois dele precisa devolver esse espaco, senao o texto nasce
   colado na borda do hero — era o que acontecia na pagina "Sobre nos". */
.wsp-sobre{ padding-top:52px; }

/* ==================================================================
   IMAGENS DENTRO DOS ARTIGOS

   As fotos dos posts sao de celular, em pe: 720x1600. Na largura do
   texto (778px) cada uma virava 1728px de altura — quase duas telas de
   rolagem por foto, e o artigo sumia entre elas.

   O limite de altura resolve sem deformar nada: a largura acompanha em
   proporcao (width:auto), a foto centraliza e o texto volta a mandar na
   pagina. Foto deitada nao chega perto do limite e nao muda.
   ================================================================== */
.wse-single .wse-feat img,
.wse-single .wp-caption img,
.wse-single figure img,
.wse-single .wse-entry img,
.wse-entry img{
  max-height:600px;
  width:auto !important;
  max-width:100%;
  height:auto;
  display:block;
  margin-left:auto; margin-right:auto;
  border-radius:14px;
}
@media(max-width:640px){
  .wse-single .wse-feat img,
  .wse-single .wp-caption img,
  .wse-single figure img,
  .wse-single .wse-entry img,
  .wse-entry img{ max-height:440px; }
}

/* a legenda acompanha a largura da foto, nao a da coluna */
.wse-single .wp-caption{ width:auto !important; max-width:100% !important; margin-left:auto; margin-right:auto; }
.wse-single .wp-caption-text{ text-align:center; }
.wse-single .wse-feat{ text-align:center; }

/* ==================================================================
   GALERIA DO FIM DO ARTIGO (plugin ws-post-gallery)

   O plugin fixa cada foto em 260x325 — quase quadrado. As fotos dos
   artigos sao de celular, em pe (720x1600), entao ele jogava fora dois
   tercos da imagem e o que sobrava parecia esticado. Aqui a moldura
   passa a 3/4, que e perto do formato em que as fotos foram tiradas, e
   o bloco entra nas cores da marca.
   ================================================================== */

html body #wspg-widget{
  background:var(--wse-cartao) !important;
  border:1px solid rgba(var(--wse-rgb-ouro),.24) !important;
  border-radius:20px !important;
}
html body #wspg-widget h3{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif) !important;
  color:var(--wse-tinta) !important;
}
html body #wspg-widget .sub{ color:var(--wse-ouro-txt) !important; }

html body #wspg-widget .item{
  flex:0 0 270px !important;
  width:270px !important;
  height:360px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 10px 26px rgba(var(--wse-rgb-tinta),.12) !important;
}
html body #wspg-widget .item img{
  width:100% !important; height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  border-radius:0 !important;
  margin:0 !important;
}

@media(max-width:768px){
  html body #wspg-widget .item{ flex:0 0 240px !important; width:240px !important; height:320px !important; }
}
@media(max-width:480px){
  html body #wspg-widget .item{ flex:0 0 220px !important; width:220px !important; height:293px !important; }
}

/* Rede de seguranca: se por qualquer motivo a caixa da foto ficar com
   proporcao diferente da imagem, o "contain" encaixa a foto inteira
   dentro dela em vez de esticar. Melhor uma sobra transparente do que
   uma cliente com o rosto achatado. */
.wse-single .wse-entry img,
.wse-single .wse-feat img{ object-fit:contain !important; }

/* ==================================================================
   MODAL DO WHATSAPP: pilula de status e a semana

   O texto e o estado vem do servidor (ver wse_ajusta_modal). Aqui so a
   aparencia: verde quando esta aberto, neutro quando esta fechado, e a
   semana em linhas finas com o dia de hoje puxado pelo dourado.
   ================================================================== */

/* no computador o painel volta a ficar centralizado na vertical */
@media(min-width:681px){
  html body .wsfa-modal{
    align-items:center !important;
    padding:32px 16px !important;
  }
  html body .wsfa-modal__sheet{
    max-height:calc(100vh - 64px) !important;
    overflow-y:auto !important;
  }
}

html body .wsfa-status.wse-aberto{
  color:var(--wse-acento-txt) !important;
  border-color:rgba(var(--wse-rgb-acento-med),.45) !important;
}
html body .wsfa-status.wse-fechado{
  color:var(--wse-suave-2) !important;
  border-color:rgba(var(--wse-rgb-ouro),.35) !important;
}

.wse-modal-horas{
  margin:2px 0 16px;
  padding:14px 16px;
  border-radius:14px;
  background:var(--wse-papel);
  border:1px solid rgba(var(--wse-rgb-ouro),.28);
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
}
.wse-modal-horas-tit{
  display:block; text-align:center;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:.6rem; font-weight:600; color:var(--wse-ouro-txt);
  margin-bottom:10px;
}
.wse-modal-hora{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:6px 2px;
  border-bottom:1px solid rgba(var(--wse-rgb-ouro),.16);
}
.wse-modal-hora:last-child{ border-bottom:0; }
.wse-modal-hora span{ font-size:.78rem; font-weight:400; color:var(--wse-suave-2); }
.wse-modal-hora strong{
  font-size:.84rem; font-weight:600; color:var(--wse-tinta); white-space:nowrap;
}
.wse-modal-hora.esta-fechado strong{ font-weight:400; font-style:italic; color:var(--wse-suave-2); }
.wse-modal-hora.e-hoje{
  background:rgba(var(--wse-rgb-ouro),.10);
  border-radius:8px; padding-left:8px; padding-right:8px;
}
.wse-modal-hora.e-hoje span{ color:var(--wse-tinta); font-weight:600; }

/* ==================================================================
   MARCA LARGA — assinatura no lugar de selo

   Quando a marca do cliente e uma assinatura (largura bem maior que a
   altura), os selos redondos do cabecalho, do rodape e do modal viram
   faixas. Quem liga a classe e o proprio tema, medindo o arquivo — ver
   wse_logo_proporcao(), no inc/cores.php.
   ================================================================== */

body.wse-marca-larga .wse-topo .wseh-marca-img{
  width:186px !important; height:74px !important;
  background-position:center !important;
}
body.wse-marca-larga .wsef-marca{
  width:190px !important; height:76px !important;
}
/* a assinatura ja tem movimento proprio no traco: o voo e o brilho
   ficam para os simbolos, aqui atrapalhariam a leitura */
body.wse-marca-larga .wseh-fly-wrap,
body.wse-marca-larga .wsef-fly{
  animation:none !important;
  filter:none !important;
}

/* o circulo do modal vira uma faixa */
body.wse-marca-larga .wsfa-modal__sheet:not(:has(.wsfa-logo-wrap)) .wsfa-head::before{
  width:200px !important; height:80px !important;
  border-radius:0 !important;
  background:var(--wse-simbolo) center/contain no-repeat !important;
  border:0 !important; box-shadow:none !important;
  margin-bottom:8px !important;
}
body.wse-marca-larga .wsfa-logo-wrap{
  width:auto !important; min-width:180px !important;
  border-radius:12px !important;
  background:var(--wse-cartao) var(--wse-simbolo) center/82% no-repeat !important;
}

@media(max-width:640px){
  body.wse-marca-larga .wse-topo .wseh-marca-img{ width:158px !important; height:64px !important; }
  body.wse-marca-larga .wsef-marca{ width:164px !important; height:66px !important; }
}

/* ==================================================================
   MARCA CHEIA NO CABECALHO (ws_kit_header_logo = completa)

   O topo passa a mostrar a marca inteira em vez do simbolo. A largura
   sai da proporcao do proprio arquivo (--wse-logo-prop), entao nenhuma
   assinatura chega esticada ou achatada — a altura manda, a largura
   acompanha.
   ================================================================== */
body.wse-marca-cheia .wse-topo .wseh-marca-img{
  background-image:var(--wse-logo) !important;
  height:86px !important;
  width:calc(86px * var(--wse-logo-prop, 2.4)) !important;
  max-width:min(300px, 48vw) !important;
}
/* o rodape acompanha o topo: a mesma marca, do mesmo jeito, em todas
   as paginas — home e internas usam este mesmo rodape */
body.wse-marca-cheia .wsef-marca{
  background-image:var(--wse-logo) !important;
  height:86px !important;
  width:calc(86px * var(--wse-logo-prop, 2.4)) !important;
  max-width:min(300px, 64vw) !important;
}
/* o voo e o brilho sao do simbolo; na assinatura eles borram o traco */
body.wse-marca-cheia .wse-topo .wseh-fly-wrap,
body.wse-marca-cheia .wsef-fly{
  animation:none !important;
  filter:none !important;
}
@media(max-width:900px){
  body.wse-marca-cheia .wse-topo .wseh-marca-img{
    height:56px !important;
    width:calc(56px * var(--wse-logo-prop, 2.4)) !important;
  }
}
@media(max-width:640px){
  body.wse-marca-cheia .wse-topo .wseh-marca-img{
    height:46px !important;
    width:calc(46px * var(--wse-logo-prop, 2.4)) !important;
  }
  body.wse-marca-cheia .wsef-marca{
    height:74px !important;
    width:calc(74px * var(--wse-logo-prop, 2.4)) !important;
  }
}


/* ==================================================================
   TITULO EM CAIXA ALTA COM DESTAQUE MANUSCRITO

   Liga com ws_kit_titulo_estilo = caixa. O desenho tem duas vozes: a
   frase em maiusculas, grossa e apertada, e a palavra que carrega o
   sentimento escrita a mao ao lado dela.

   Por que a manuscrita fica MAIOR que a caixa alta: script tem a altura
   de x pequena e muita perna, entao no mesmo corpo ela parece menor e
   some ao lado da maiuscula. Em 1,55x as duas pesam igual na linha.
   ================================================================== */
body.wse-titulo-caixa .wsb-titulo,
body.wse-titulo-caixa .wsep-hero-titulo,
body.wse-titulo-caixa .wsb-portal-titulo,
body.wse-titulo-caixa .wse-post-title{
  font-family:var(--wse-fonte-corpo,'Lato',Arial,sans-serif);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.25;
  font-size:clamp(1.34rem, 2.3vw, 1.86rem);
}
body.wse-titulo-caixa .wsb-titulo .wse-au,
body.wse-titulo-caixa .wsep-hero-titulo .wse-au,
body.wse-titulo-caixa .wsb-portal-titulo .wse-au,
body.wse-titulo-caixa .wsep-hero-titulo em,
body.wse-titulo-caixa .wse-post-title .wse-au{
  font-family:var(--wse-fonte-destaque,'Great Vibes',cursive);
  font-weight:400;
  font-style:normal;
  text-transform:none;
  letter-spacing:0;
  font-size:1.55em;
  line-height:1;
  /* a manuscrita tem perna comprida: sem esta folga ela encosta na
     linha de baixo quando o titulo quebra */
  padding-right:.06em;
  /*
   * inline-block para o trecho manuscrito nao se partir no meio.
   * Como texto normal ele quebrava assim: "...VOCE MERECE Um" numa
   * linha e "momento so seu" na seguinte — a frase escrita a mao virava
   * duas metades soltas. Como bloco em linha ela desce inteira.
   */
  display:inline-block;
  max-width:100%;
  /*
   * O dourado CHEIO, e nao o escurecido que o resto do site usa em
   * texto: aqui a manuscrita e grande, e em corpo grande o tom cheio
   * tem contraste de sobra — e e assim que a marca escreve.
   */
  color:var(--wse-ouro);
}
/* o filete de losango pesa demais embaixo de um titulo em caixa alta;
   ele fica mais curto e mais claro */
body.wse-titulo-caixa .wsb-titulo::after{ width:84px; opacity:.7; margin-top:14px; }

/*
 * A largura da linha muda com a caixa alta.
 *
 * O limite de 14ch foi medido num serifado de caixa baixa. Maiuscula
 * ocupa mais por caractere, e "ch" conta o zero, nao a media — com o
 * mesmo numero a frase quebra em cinco linhas e a dobra vira uma
 * coluna de palavras soltas.
 */
body.wse-titulo-caixa .wsb-portal--lado .wsb-portal-titulo{ max-width:19ch; }
body.wse-titulo-caixa .wsep-hero-titulo{ max-width:20ch; }


/* ==================================================================
   OS ICONES DA MARCA, EM UM LUGAR SO

   Cada desenho vira uma variavel aqui, e quem precisa dele so aponta.
   Antes o mesmo SVG estava escrito duas vezes por icone (a versao com
   prefixo e a sem) e so no blocos.css — que nao carrega nas paginas
   internas. Era por isso que o rodape usava emoji: nao tinha desenho
   disponivel ali. Agora tem, em todas as paginas.
   ================================================================== */
:root{
  --wse-svg-zap:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 00-8.7 14.9L2 22l5.3-1.3A10 10 0 1012 2zm5.5 12.4c-.3-.1-1.7-.8-2-1-.3-.1-.5-.2-.7.2s-.8 1-1 1.2c-.2.2-.4.2-.7.1-.3-.1-1.3-.5-2.5-1.5-1-.8-1.6-1.9-1.8-2.2-.2-.3 0-.5.1-.6l.5-.5c.2-.2.2-.3.3-.5.1-.2.1-.4 0-.5l-1-2.3c-.3-.7-.5-.6-.7-.6h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1.1-1.1 2.6 0 1.5 1.1 3 1.3 3.2.2.2 2.2 3.3 5.4 4.6.7.3 1.3.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.7-.4z'/></svg>");
  --wse-svg-maps:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 00-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1112 6.5a2.5 2.5 0 010 5z'/></svg>");
  --wse-svg-waze:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.7 11.2 12.8 2.3a1.1 1.1 0 00-1.6 0L2.3 11.2a1.1 1.1 0 000 1.6l8.9 8.9c.4.4 1.1.4 1.6 0l8.9-8.9c.4-.5.4-1.2 0-1.6zM10 15.5v-7l6 3.5-6 3.5z'/></svg>");
  --wse-svg-insta:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2 0 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c0 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2 0-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.3-.1-1.7-.1-4.9s0-3.6.1-4.9c0-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.9-.1zm0 5.7a4.1 4.1 0 100 8.2 4.1 4.1 0 000-8.2zm0 6.8a2.7 2.7 0 110-5.4 2.7 2.7 0 010 5.4zm5.3-7a.97.97 0 11-1.94 0 .97.97 0 011.94 0z'/></svg>");
  --wse-svg-yt:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.6 7.2a2.5 2.5 0 00-1.75-1.77C18.25 5 12 5 12 5s-6.25 0-7.85.43A2.5 2.5 0 002.4 7.2C2 8.82 2 12 2 12s0 3.18.4 4.8a2.5 2.5 0 001.75 1.77C5.75 19 12 19 12 19s6.25 0 7.85-.43A2.5 2.5 0 0021.6 16.8C22 15.18 22 12 22 12s0-3.18-.4-4.8zM10 15.2V8.8l5.2 3.2-5.2 3.2z'/></svg>");
  --wse-svg-star:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14l-5-4.87 6.91-1.01L12 2z'/></svg>");
  --wse-svg-loja:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 4h10l1 3H6l1-3zm-2.5 5h15l-1.2 11.2a1.5 1.5 0 01-1.5 1.3H7.2a1.5 1.5 0 01-1.5-1.3L4.5 9zm4 3v5h1.5v-5H8.5zm5.5 0v5h1.5v-5H14z'/></svg>");
  --wse-svg-blog:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.7 5.6l-2.3-2.3a1.4 1.4 0 00-2 0L4 15.7V20h4.3L20.7 7.6a1.4 1.4 0 000-2zM8 18H6v-2l8.4-8.4 2 2L8 18zM3 22h18v-1.6H3z'/></svg>");
  --wse-svg-face:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7A10 10 0 0022 12z'/></svg>");
  --wse-svg-tiktok:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.5 2h-2.9v13.2a2.6 2.6 0 11-2.2-2.6V9.6a5.7 5.7 0 105 5.6V9a6.9 6.9 0 004 1.3V7.4a4 4 0 01-3.9-4V2z'/></svg>");
}