/* ==================================================================
   BLOCOS DA HOME — ws-editorial

   Servicos, sobre, videos e depoimentos. Toda cor vem das variaveis
   --wse-*, calculadas a partir da cor da marca do cliente: nenhum valor
   de cor aparece aqui.

   Os blocos vao em largura total sem usar 100vw. O 100vw inclui a barra
   de rolagem, e em alguns navegadores de celular fica alguns pixels
   maior que a area visivel — era o que fazia a pagina balancar para o
   lado. width:auto com margem negativa dos dois lados da exatamente a
   largura da tela.
   ================================================================== */

.wsb{
  width:auto; max-width:none;
  margin-left:var(--wse-sangria); margin-right:var(--wse-sangria);
  padding:78px 0 84px;
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  color:var(--wse-tinta);
  position:relative;
}
.wsb-inner{ max-width:1220px; margin:0 auto; padding:0 24px; }

/* faixas alternadas, para as secoes nao virarem um bloco unico */
.wsb-servicos{ background:var(--wse-papel); }
.wsb-sobre{    background:var(--wse-cartao); }
.wsb-videos{
  background:linear-gradient(160deg,var(--wse-painel-1) 0%,var(--wse-painel-2) 60%,var(--wse-painel-3) 100%);
}
.wsb-depo{ background:var(--wse-papel); }

/* ---------- cabecalho de secao ---------- */
.wsb-topo{ text-align:center; margin-bottom:44px; }
.wsb-kicker{
  display:block; text-transform:uppercase; letter-spacing:.26em;
  font-size:.68rem; font-weight:600; color:var(--wse-acento-pro);
  margin-bottom:12px;
}
.wsb-titulo{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); line-height:1.15;
  color:var(--wse-tinta); margin:0;
}
.wsb-titulo .wse-au{ color:var(--wse-acento-med); font-style:italic; }

.wsb-rodape-bloco{ text-align:center; margin-top:36px; }


/* ==================================================================
   CARROSSEL

   Rolagem horizontal com encaixe (scroll-snap). Funciona no dedo sem
   JavaScript nenhum; as setas so empurram a rolagem, e somem quando
   nao ha para onde ir.
   ================================================================== */

.wsb-carrossel{ position:relative; }

.wsb-trilho{
  display:flex; gap:20px;
  list-style:none; margin:0; padding:4px 24px 18px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--wse-rgb-acento-med),.45) transparent;
  /* o padding lateral acompanha a largura do miolo */
  margin-left:calc(50% - 610px); margin-right:calc(50% - 610px);
}
@media(max-width:1268px){
  .wsb-trilho{ margin-left:0; margin-right:0; }
}
.wsb-trilho::-webkit-scrollbar{ height:6px; }
.wsb-trilho::-webkit-scrollbar-thumb{
  background:rgba(var(--wse-rgb-acento-med),.4); border-radius:999px;
}
.wsb-trilho::-webkit-scrollbar-track{ background:transparent; }

.wsb-trilho > li{ scroll-snap-align:start; flex:0 0 auto; }

/* setas */
.wsb-seta{
  position:absolute; top:calc(50% - 26px); z-index:2;
  width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem; line-height:1; cursor:pointer;
  background:var(--wse-cartao); color:var(--wse-acento-txt);
  border:1px solid rgba(var(--wse-rgb-acento-med),.35);
  box-shadow:0 6px 18px rgba(var(--wse-rgb-tinta),.12);
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.wsb-seta:hover{ background:var(--wse-papel); transform:scale(1.06); }
.wsb-seta--ant{ left:6px; }
.wsb-seta--prox{ right:6px; }
.wsb-seta[hidden]{ display:none; }
@media(max-width:760px){
  /* no dedo a rolagem ja resolve, e as setas atrapalhavam os cards */
  .wsb-seta{ display:none; }
}


/* ==================================================================
   CARD DE SERVICO
   ================================================================== */

.wsb-card{ width:268px; }
@media(max-width:520px){ .wsb-card{ width:78vw; max-width:300px; } }

.wsb-card-link{
  position:relative; display:block; height:340px;
  border-radius:20px; overflow:hidden;
  text-decoration:none; color:inherit;
  background:var(--wse-cartao);
  box-shadow:0 12px 30px rgba(var(--wse-rgb-tinta),.10);
  transition:transform .28s ease, box-shadow .28s ease;
}
a.wsb-card-link:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 44px rgba(var(--wse-rgb-tinta),.17);
}

.wsb-card-foto{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transition:transform .5s ease;
}
a.wsb-card-link:hover .wsb-card-foto{ transform:scale(1.06); }

/* sem foto na biblioteca: entra a textura floral da marca */
.wsb-card--sem-foto .wsb-card-foto{
  background:var(--wse-textura),
             linear-gradient(160deg,var(--wse-painel-1) 0%,var(--wse-painel-2) 55%,var(--wse-painel-3) 100%);
  background-size:170% auto, auto;
  background-position:center top, center;
  background-repeat:no-repeat, no-repeat;
}

.wsb-card-veu{
  position:absolute; inset:0;
  background:linear-gradient(180deg,
      rgba(var(--wse-rgb-tinta),0) 34%,
      rgba(var(--wse-rgb-acento-esc),.55) 66%,
      rgba(var(--wse-rgb-acento-esc),.92) 100%);
}

.wsb-card-txt{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 20px 24px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.wsb-card-nome{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:1.28rem; line-height:1.25; font-weight:500;
  color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.28);
}
.wsb-card-cta{
  display:inline-block; padding:9px 20px; border-radius:999px;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  background:rgba(255,255,255,.94); color:var(--wse-acento-txt);
  transition:background .2s ease, transform .2s ease;
}
a.wsb-card-link:hover .wsb-card-cta{ background:#fff; transform:translateY(-1px); }


/* ==================================================================
   SOBRE
   ================================================================== */

.wsb-sobre-grade{
  display:grid; grid-template-columns:1fr 1.02fr; gap:60px; align-items:center;
}
.wsb-sobre-grade--so-texto{ grid-template-columns:1fr; max-width:760px; margin:0 auto; text-align:center; }
@media(max-width:900px){
  .wsb-sobre-grade{ grid-template-columns:1fr; gap:36px; }
}

.wsb-colagem{ display:grid; gap:16px; }
.wsb-colagem--1{ grid-template-columns:1fr; }
.wsb-colagem--2{ grid-template-columns:1fr 1fr; }
.wsb-colagem--3,
.wsb-colagem--4{ grid-template-columns:1fr 1fr; }
.wsb-colagem img{
  /* o height:auto anula o atributo height do HTML: desde que a colagem
     passou a sair com srcset, o navegador usava a altura do arquivo
     (682px, 1024px...) e a moldura 4/5 ia embora */
  width:100%; height:auto; display:block; border-radius:18px;
  aspect-ratio:4/5; object-fit:cover; object-position:center 28%;
  box-shadow:0 16px 36px rgba(var(--wse-rgb-tinta),.18);
  transition:transform .3s ease;
}
/*
 * Foto unica: retrato, nao paisagem.
 *
 * O 4/3 servia quando a foto unica era do espaco. Quando ela e a
 * profissional, a moldura deitada corta a pessoa na altura do peito e
 * sobra parede dos dois lados. Em pe ela ocupa o quadro, e ao lado de
 * uma coluna de texto as duas alturas se acompanham.
 */
.wsb-colagem--1 img{ aspect-ratio:4/5; object-position:center 22%; }
/* na colagem de 3, a primeira ocupa a linha inteira */
.wsb-colagem--3 img:first-child{ grid-column:1 / -1; aspect-ratio:16/9; }
.wsb-colagem img:hover{ transform:translateY(-4px); }

.wsb-sobre-txt .wsb-topo{ text-align:left; }
.wsb-sobre-grade--so-texto .wsb-sobre-txt{ text-align:center; }
.wsb-sobre-txt .wsb-kicker{ text-align:inherit; }
.wsb-sobre-txt .wsb-titulo{ text-align:inherit; margin-bottom:20px; }
.wsb-prosa{
  font-size:1.02rem; line-height:1.85; color:var(--wse-suave-2);
  font-weight:300; margin:0 0 16px;
}
.wsb-sobre-txt .wsep-botao{ margin-top:12px; }


/* ==================================================================
   VIDEOS
   ================================================================== */

.wsb-trilho--videos{ gap:18px; }

.wsb-video{ width:300px; }
@media(max-width:520px){ .wsb-video{ width:80vw; max-width:320px; } }

.wsb-video-btn{
  position:relative; display:block; width:100%; padding:0; border:0;
  aspect-ratio:9/16; border-radius:20px; overflow:hidden; cursor:pointer;
  background:var(--wse-tinta);
  box-shadow:0 12px 30px rgba(var(--wse-rgb-tinta),.20);
  transition:transform .28s ease, box-shadow .28s ease;
}
.wsb-video-btn:hover{ transform:translateY(-5px); box-shadow:0 20px 44px rgba(var(--wse-rgb-tinta),.28); }

.wsb-video-capa{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.wsb-video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; padding-left:5px;
  background:rgba(255,255,255,.93); color:var(--wse-acento-txt);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  transition:transform .2s ease, background .2s ease;
}
.wsb-video-btn:hover .wsb-video-play{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }

/* quando o player entra, ele substitui a capa dentro da mesma caixa */
.wsb-video iframe{
  width:100%; aspect-ratio:9/16; border:0; border-radius:20px; display:block;
  box-shadow:0 12px 30px rgba(var(--wse-rgb-tinta),.20);
}


/* ==================================================================
   DEPOIMENTOS

   O widget e desenhado por um plugin, com cores proprias. Aqui ele
   entra na paleta da marca, sem mexer no plugin.
   ================================================================== */

.wsb-depo-zona{ display:flex; justify-content:center; }

.wsb-depo .wsrf-real{
  background:var(--wse-cartao) !important;
  max-width:640px !important;
  border:1px solid rgba(var(--wse-rgb-acento-med),.16) !important;
  box-shadow:0 12px 30px rgba(var(--wse-rgb-tinta),.08) !important;
}
.wsb-depo .wsrf-real-num,
.wsb-depo .wsrf-name,
.wsb-depo .wsrf-real-totaltext strong{ color:var(--wse-tinta) !important; }
.wsb-depo .wsrf-real-totaltext,
.wsb-depo .wsrf-text{ color:var(--wse-suave-2) !important; }
.wsb-depo .wsrf-card{
  background:var(--wse-papel) !important;
  box-shadow:0 6px 18px rgba(var(--wse-rgb-tinta),.07) !important;
}
.wsb-depo .wsrf-avatar{ background:var(--wse-acento-med) !important; }
.wsb-depo .wsrf-nav button{
  background:var(--wse-papel) !important;
  border-color:rgba(var(--wse-rgb-acento-med),.35) !important;
  color:var(--wse-acento-txt) !important;
}
.wsb-depo .wsrf-link{ color:var(--wse-acento-txt) !important; }


/* ==================================================================
   MOVIMENTO REDUZIDO
   ================================================================== */
@media(prefers-reduced-motion:reduce){
  .wsb-trilho{ scroll-behavior:auto; }
  .wsb-card-link, .wsb-card-foto, .wsb-video-btn,
  .wsb-colagem img, .wsb-seta{ transition:none !important; }
  a.wsb-card-link:hover, .wsb-video-btn:hover,
  .wsb-colagem img:hover{ transform:none !important; }
}

/* ==================================================================
   BOTOES DENTRO DOS BLOCOS

   O style.css nao entra na home de proposito (ele tem regras globais
   que mudariam o fundo e a fonte do que voce monta no page builder).
   Como os botoes .wsep-botao sao definidos la, eles chegavam aqui sem
   estilo nenhum — texto azul sublinhado. Aqui eles ganham a mesma
   aparencia, so que valendo apenas dentro de .wsb.
   ================================================================== */

.wsb .wsep-botao,
.wsb .wsb-botao{
  display:inline-block; padding:14px 34px; border-radius:999px;
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  text-decoration:none !important;
  background:linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc));
  color:#fff !important;
  border:1px solid transparent;
  box-shadow:0 8px 22px rgba(var(--wse-rgb-acento-esc),.28);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wsb .wsep-botao:hover,
.wsb .wsb-botao:hover{
  transform:translateY(-2px); filter:brightness(1.07);
  box-shadow:0 14px 30px rgba(var(--wse-rgb-acento-esc),.34);
}
.wsb .wsep-botao--linha{
  background:transparent; color:var(--wse-acento-txt) !important;
  border-color:rgba(var(--wse-rgb-acento-med),.45);
  box-shadow:none;
}
.wsb .wsep-botao--linha:hover{
  background:rgba(var(--wse-rgb-acento-med),.08);
  box-shadow:none;
}

/* ---------- card de servico: nome mais legivel ----------
   Sem foto o card e quase todo textura, e o nome ficava pequeno no meio
   dela. Com o veu subindo mais e o nome maior, da para ler de longe. */
.wsb-card-nome{ font-size:1.42rem; }
.wsb-card--sem-foto .wsb-card-veu{
  background:linear-gradient(180deg,
      rgba(var(--wse-rgb-tinta),0) 20%,
      rgba(var(--wse-rgb-acento-esc),.50) 52%,
      rgba(var(--wse-rgb-acento-esc),.93) 100%);
}
.wsb-card--sem-foto .wsb-card-txt{ padding-bottom:26px; }

/* ==================================================================
   HERO DA HOME (bloco .fluir-* do ws-page-builder)

   Esse hero e conteudo seu, escrito a mao no page builder, e eu nao
   consigo edita-lo pelo bridge. Mas ele foi escrito com variaveis de
   cor proprias (--verde, --fundo-topo, --fundo-base), e variavel a
   gente redefine de fora. Entao aqui ele passa a usar a paleta da
   Ficha Tecnica, como o resto do site: some o verde acinzentado do
   fundo e entra o creme da marca.

   Nada e apagado. Se um dia voce editar o bloco no page builder, e so
   tirar este trecho e ele volta a mandar sozinho.
   ================================================================== */

html body .fluir-header{
  --verde:        var(--wse-acento-txt);
  --verde-medio:  var(--wse-acento-med);
  --verde-salvia: var(--wse-acento-cla);
  --fundo-topo:   var(--wse-cartao);
  --fundo-base:   var(--wse-papel);
  --linha:        rgba(var(--wse-rgb-acento-med),.24);
}

/* o clarao do topo tambem era verde */
html body .fluir-header .fluir-palco{
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, var(--wse-cartao) 0%, var(--wse-papel) 100%) !important;
}

/* ---------- a lotus de fundo estava cortada ----------
   Ela e um SVG largo (400x260) com largura em vh. Numa tela baixa, ou
   quando a secao encolhe, a altura calculada passava da secao e o
   .fluir-header, que tem overflow:hidden, cortava as petalas de baixo.
   Limitando a ALTURA, e nao so a largura, ela sempre cabe inteira. */
html body .fluir-header .fluir-lotus-fundo{
  width:min(88vw, 880px) !important;
  max-width:88% !important;
  max-height:66% !important;
  height:auto !important;
  stroke:var(--wse-acento-med) !important;
  opacity:.11 !important;
}

/* ---------- a marca no topo do hero ----------
   O hero abria direto no "CAMPINAS - SAO PAULO", sem a marca. Aqui ela
   entra acima do texto, tirada da Ficha (--wse-logo), sem tocar no
   HTML do bloco. */
html body .fluir-header .fluir-conteudo::before{
  content:"";
  display:block;
  width:min(340px, 74vw); height:120px;
  margin:0 auto 26px;
  background:var(--wse-logo) center/contain no-repeat;
}
@media(max-width:640px){
  html body .fluir-header .fluir-conteudo::before{ height:92px; margin-bottom:20px; }
}

/* ---------- os circulos de rede social estavam vazios ----------
   O bloco usa icones do Font Awesome (<i class="fab fa-instagram">) e
   o Font Awesome nao esta carregado no site — por isso os tres circulos
   apareciam em branco. Em vez de carregar uma biblioteca inteira por
   causa de tres icones, cada circulo recebe aqui o desenho proprio,
   recortado em mascara para acompanhar a cor da marca. */
html body .fluir-rede i{ display:none !important; }
html body .fluir-rede::after{
  content:""; display:block;
  width:19px; height:19px;
  background:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
}
html body .fluir-rede:has(.fa-instagram)::after{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 5.68a4.16 4.16 0 100 8.32 4.16 4.16 0 000-8.32zm0 6.86a2.7 2.7 0 110-5.4 2.7 2.7 0 010 5.4zm5.3-7.02a.97.97 0 11-1.94 0 .97.97 0 011.94 0z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16zm0 5.68a4.16 4.16 0 100 8.32 4.16 4.16 0 000-8.32zm0 6.86a2.7 2.7 0 110-5.4 2.7 2.7 0 010 5.4zm5.3-7.02a.97.97 0 11-1.94 0 .97.97 0 011.94 0z'/></svg>");
}
html body .fluir-rede:has(.fa-youtube)::after{
  -webkit-mask-image: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>");
  mask-image: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>");
}
html body .fluir-rede:has(.fa-star)::after{
  -webkit-mask-image: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>");
  mask-image: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>");
}
html body .fluir-rede{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  color:var(--wse-acento-txt) !important;
}

/* o link do menu leva ate a secao; a folga evita o titulo colado no topo */
.wsb{ scroll-margin-top:18px; }

/* ==================================================================
   GALERIA DE TRABALHO
   ================================================================== */

/* Uma secao por categoria. As faixas alternam para os blocos nao
   virarem uma mancha so quando vem quatro seguidos. */
.wsb-galeria--impar{ background:var(--wse-cartao); }
.wsb-galeria--par{   background:var(--wse-papel); }

/* Entre duas galerias seguidas o espaco de 84+78px ficava grande demais
   e parecia buraco. Como a faixa ja muda de cor, o respiro pode encolher. */
.wsb-galeria + .wsb-galeria{ padding-top:56px; }
.wsb-galeria + .wsb-galeria .wsb-topo{ margin-bottom:34px; }

/* ---------- abas ---------- */
.wsb-abas{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:0 0 34px;
}
.wsb-aba{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:999px; cursor:pointer;
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--wse-acento-txt);
  background:var(--wse-papel);
  border:1px solid rgba(var(--wse-rgb-acento-med),.28);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.wsb-aba:hover{ transform:translateY(-1px); border-color:rgba(var(--wse-rgb-acento-med),.5); }
.wsb-aba.esta-ativo{
  background:linear-gradient(135deg,var(--wse-acento),var(--wse-acento-esc));
  color:#fff; border-color:transparent;
  box-shadow:0 8px 20px rgba(var(--wse-rgb-acento-esc),.26);
}
.wsb-aba-conta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  font-size:.62rem; letter-spacing:0;
  background:rgba(var(--wse-rgb-acento-med),.14); color:inherit;
}
.wsb-aba.esta-ativo .wsb-aba-conta{ background:rgba(255,255,255,.22); }

/* no modo empilhado cada galeria leva o nome em cima */
.wsb-galeria-nome{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:1.6rem; color:var(--wse-tinta);
  text-align:center; margin:44px 0 20px;
}
.wsb-galeria-nome:first-of-type{ margin-top:0; }

/* ---------- foto ---------- */
.wsb-trilho--galeria{ gap:16px; }

.wsb-foto{ width:270px; }
@media(max-width:520px){ .wsb-foto{ width:74vw; max-width:300px; } }

.wsb-foto-btn{
  position:relative; display:block; width:100%; padding:0; border:0; cursor:zoom-in;
  border-radius:18px; overflow:hidden; background:var(--wse-papel);
  box-shadow:0 10px 26px rgba(var(--wse-rgb-tinta),.12);
  transition:transform .28s ease, box-shadow .28s ease;
}
.wsb-foto-btn:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(var(--wse-rgb-tinta),.20); }

/* as fotos vem em formatos diferentes — retrato do celular e paisagem
   da camera. A moldura fixa deixa a fileira alinhada e o object-fit
   cuida do enquadramento, sem deformar nenhuma. */
.wsb-foto-img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/4; object-fit:cover;
  transition:transform .5s ease;
}
.wsb-foto-btn:hover .wsb-foto-img{ transform:scale(1.05); }

.wsb-foto-lupa{
  position:absolute; right:12px; bottom:12px;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; line-height:1;
  background:rgba(255,255,255,.92); color:var(--wse-acento-txt);
  opacity:0; transform:translateY(4px);
  transition:opacity .2s ease, transform .2s ease;
}
.wsb-foto-btn:hover .wsb-foto-lupa{ opacity:1; transform:translateY(0); }

/* ==================================================================
   LUPA (foto ampliada)
   ================================================================== */

.wsb-lupa{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(var(--wse-rgb-tinta),.93);
  opacity:0; transition:opacity .22s ease;
}
.wsb-lupa.esta-ativo{ opacity:1; }

.wsb-lupa img{
  max-width:min(94vw, 1100px); max-height:86vh;
  width:auto; height:auto; display:block;
  border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5);
}

.wsb-lupa-btn{
  position:absolute; z-index:2;
  width:52px; height:52px; border-radius:50%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; line-height:1;
  background:rgba(255,255,255,.94); color:var(--wse-tinta);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease;
}
.wsb-lupa-btn:hover{ transform:scale(1.07); background:#fff; }
.wsb-lupa-fecha{ top:20px; right:20px; font-size:1.7rem; }
.wsb-lupa-ant{ left:20px; top:50%; margin-top:-26px; }
.wsb-lupa-prox{ right:20px; top:50%; margin-top:-26px; }

.wsb-lupa-conta{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif); font-size:.74rem;
  letter-spacing:.16em; color:rgba(255,255,255,.82);
}

@media(max-width:640px){
  .wsb-lupa{ padding:12px; }
  .wsb-lupa-btn{ width:44px; height:44px; }
  .wsb-lupa-ant{ left:8px; }
  .wsb-lupa-prox{ right:8px; }
  .wsb-lupa-fecha{ top:12px; right:12px; }
}

@media(prefers-reduced-motion:reduce){
  .wsb-foto-btn, .wsb-foto-img, .wsb-aba, .wsb-lupa, .wsb-lupa-btn{ transition:none !important; }
  .wsb-foto-btn:hover{ transform:none !important; }
  .wsb-foto-btn:hover .wsb-foto-img{ transform:none !important; }
}

/* ---------- pe da galeria: texto e botao de agendar ----------
   Fica logo abaixo do carrossel, centralizado e estreito: linha longa
   demais cansa a leitura, e o objetivo aqui e explicar em duas frases
   e levar ao botao. */
.wsb-galeria-pe{
  max-width:640px; margin:30px auto 0; text-align:center;
}
.wsb-galeria-texto{
  font-size:1rem; line-height:1.8; font-weight:300;
  color:var(--wse-suave-2); margin:0 0 22px;
}
.wsb-galeria-pe .wsep-botao{ margin:0; }

@media(max-width:640px){
  .wsb-galeria-pe{ margin-top:24px; }
  .wsb-galeria-texto{ font-size:.95rem; margin-bottom:20px; }
  /* o nome da categoria dentro do botao pode ser comprido */
  .wsb-galeria-pe .wsep-botao{ display:block; padding-left:18px; padding-right:18px; }
}

/* ---------- moldura unica por galeria ----------
   Dentro de um bloco TODAS as fotos tem a mesma moldura: fileira
   desalinhada parece defeito, nao variedade. O que muda e qual moldura,
   e quem decide sao as proprias fotos (ver wse_galeria_formato).

   O quadrado e para a galeria misturada, como a do espaco: corta um
   pouco dos dois lados em vez de arrasar metade das fotos. */
.wsb-fmt-retrato  .wsb-foto{ width:270px; }
.wsb-fmt-retrato  .wsb-foto-img{ aspect-ratio:3/4; }

.wsb-fmt-quadrado .wsb-foto{ width:330px; }
.wsb-fmt-quadrado .wsb-foto-img{ aspect-ratio:1/1; }

.wsb-fmt-paisagem .wsb-foto{ width:430px; }
.wsb-fmt-paisagem .wsb-foto-img{ aspect-ratio:3/2; }

@media(max-width:520px){
  .wsb-fmt-retrato  .wsb-foto{ width:74vw; max-width:300px; }
  .wsb-fmt-quadrado .wsb-foto{ width:80vw; max-width:340px; }
  .wsb-fmt-paisagem .wsb-foto{ width:86vw; max-width:420px; }
}

/* ---------- servico sem foto: a marca no lugar ----------
   Enquanto nao ha foto do servico, o card mostra a lotus pequena sobre
   a textura da marca — em vez de um retangulo de textura sozinho. Assim
   que uma foto com o nome do servico entrar na Biblioteca de Midia, ela
   assume e a marca sai. */
.wsb-card--sem-foto .wsb-card-foto{
  background:
    var(--wse-simbolo) center 24%/58px no-repeat,
    var(--wse-textura) center top/170% auto no-repeat,
    linear-gradient(160deg,var(--wse-painel-1) 0%,var(--wse-painel-2) 55%,var(--wse-painel-3) 100%);
}
@media(max-width:520px){
  .wsb-card--sem-foto .wsb-card-foto{ background-size:52px, 170% auto, auto; }
}

/* ==================================================================
   DETALHES EM DOURADO

   O dourado da placa da recepcao entra no site em fio, nao em bloco:
   um filete abaixo do titulo com um losango no meio, o rotulo em caixa
   alta e a borda das setas. Dourado chapado cansa a vista e some no
   creme; em traco fino ele faz o que se espera dele.

   O tom vem da Ficha (ws_kit_color_gold). Sem o campo, --wse-ouro cai
   na cor da marca e nada disto destoa — o ornamento continua existindo,
   so que verde.
   ================================================================== */

.wsb-topo{ position:relative; }

/* Filete com losango, abaixo do titulo da secao.
   O desenho e uma mascara: a COR vem de var(--wse-ouro), entao o
   ornamento acompanha a Ficha de cada cliente em vez de ficar com um
   dourado cravado no arquivo. */
.wsb-titulo::after{
  content:"";
  display:block;
  width:118px; height:8px;
  margin:18px 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;
}


/* ---------- a marca pequena ao lado do titulo da secao ----------
   Liga com ws_kit_logo_titulos = sim. O tamanho e em "em": ela cresce e
   diminui junto com o titulo, entao continua pequena em qualquer tela
   sem precisar de uma medida por breakpoint. A largura sai da proporcao
   do proprio arquivo (--wse-logo-prop) — assinatura nenhuma chega
   esticada. */
body.wse-marca-titulos .wsb-titulo::before{
  content:'';
  display:inline-block; vertical-align:-0.22em;
  /*
   * 1.05em, e nao menos: abaixo disso o nome escrito dentro da marca
   * deixa de ser leitura e vira uma mancha — pequeno demais nao le como
   * discreto, le como defeito de imagem.
   */
  height:1.05em; width:calc(1.05em * var(--wse-logo-prop, 2.4));
  margin-right:.42em;
  background:var(--wse-logo) center/contain no-repeat;
  transform-origin:50% 80%;
  animation:wseMarcaFlutua 4.2s ease-in-out infinite;
}
@keyframes wseMarcaFlutua{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  30%    { transform:translateY(-4px) rotate(-1.8deg); }
  62%    { transform:translateY(-2px) rotate(1.8deg); }
}
@media(prefers-reduced-motion:reduce){
  body.wse-marca-titulos .wsb-titulo::before{ animation:none; }
}
@media(max-width:640px){
  /* no celular o titulo ja quebra em duas linhas; a marca menor evita
     que ele quebre numa terceira */
  body.wse-marca-titulos .wsb-titulo::before{
    height:.92em; width:calc(.92em * var(--wse-logo-prop, 2.4));
    margin-right:.34em;
  }
}

.wsb-kicker{ color:var(--wse-ouro-txt); }

/* no bloco de videos o fundo e mais escuro; o dourado claro le melhor */
.wsb-videos .wsb-kicker{ color:var(--wse-ouro-txt); }

/* setas do carrossel com fio dourado */
.wsb-seta{ border-color:rgba(var(--wse-rgb-ouro),.42); color:var(--wse-ouro-txt); }
.wsb-seta:hover{ border-color:rgba(var(--wse-rgb-ouro),.75); }

/* contador de fotos na aba */
.wsb-aba{ border-color:rgba(var(--wse-rgb-ouro),.34); }
.wsb-aba:hover{ border-color:rgba(var(--wse-rgb-ouro),.6); }

/* fio dourado no alto de cada bloco de galeria, separando as faixas */
.wsb-galeria + .wsb-galeria::before{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(1120px, 86%); height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--wse-rgb-ouro),.45) 30%, rgba(var(--wse-rgb-ouro),.45) 70%, transparent);
}

/* ==================================================================
   FOTO DO SALAO NO FUNDO DO HERO DA HOME

   Antes o hero era creme com a lotus vazada por tras: a marca aparecia,
   o lugar nao. Com uma foto do salao atras do texto, a cliente responde
   em meio segundo a pergunta que ela faz antes de agendar — "como e la
   dentro?".

   O veu de creme por cima e o que mantem o texto legivel: sem ele, o
   titulo escuro cai em cima de moveis claros e some. As paradas do
   degrade sao mais fechadas embaixo, onde ficam os botoes.

   Se nao houver foto, --wse-hero-bg vem "none" e o hero fica exatamente
   como estava.
   ================================================================== */

html body .fluir-header .fluir-palco{
  background:
    /* clarao no miolo: e ele que segura a leitura do titulo */
    radial-gradient(ellipse 62% 50% at 50% 44%,
        rgba(var(--wse-rgb-papel, 237,232,213),.88) 0%,
        rgba(var(--wse-rgb-papel, 237,232,213),.52) 52%,
        rgba(var(--wse-rgb-papel, 237,232,213),.10) 80%),
    /* veu geral, leve, so para a foto nao competir com o texto */
    linear-gradient(180deg,
        rgba(var(--wse-rgb-cartao, 247,245,236),.44) 0%,
        rgba(var(--wse-rgb-cartao, 247,245,236),.20) 38%,
        rgba(var(--wse-rgb-papel, 237,232,213),.46) 100%),
    var(--wse-hero-bg) center/cover no-repeat,
    linear-gradient(180deg, var(--wse-cartao) 0%, var(--wse-papel) 100%) !important;
}

/* a lotus vazada continua, so que mais discreta: com a foto atras ela
   nao precisa mais segurar o fundo sozinha */
html body .fluir-header .fluir-lotus-fundo{ opacity:.07 !important; }

/* o texto ganha um respiro de sombra para nao competir com a foto */
html body .fluir-header .fluir-palco h1,
html body .fluir-header .fluir-palco h2,
html body .fluir-header .fluir-palco p{
  text-shadow:0 1px 2px rgba(255,255,255,.55);
}

/* os dois botoes da secao "sobre" na home, lado a lado */
.wsb-sobre-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:14px; }
.wsb-sobre-grade--so-texto .wsb-sobre-btns{ justify-content:center; }
@media(max-width:520px){
  .wsb-sobre-btns{ flex-direction:column; }
  .wsb-sobre-btns .wsep-botao{ display:block; text-align:center; }
}

/* ==================================================================
   SEMANA — a secao de horarios
   ================================================================== */

.wsb-horarios{ background:var(--wse-cartao); }

.wsb-semana{
  list-style:none; margin:0 auto; padding:0;
  max-width:680px;
}
.wsb-dia{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:15px 6px;
  border-bottom:1px solid rgba(var(--wse-rgb-ouro),.24);
}
.wsb-dia:last-child{ border-bottom:0; }

.wsb-dia-nome{
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  font-size:.95rem; font-weight:400; color:var(--wse-suave-2);
  display:flex; align-items:center; gap:10px;
}
.wsb-dia-hora{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:1.24rem; font-weight:500; color:var(--wse-tinta);
  letter-spacing:.01em; white-space:nowrap;
}
.wsb-dia--fechado .wsb-dia-hora{
  font-style:italic; font-weight:400; color:var(--wse-suave-2); font-size:1.08rem;
}

/* o dia de hoje: fio dourado a esquerda e a etiqueta */
.wsb-dia--hoje{
  position:relative;
  background:linear-gradient(90deg, rgba(var(--wse-rgb-ouro),.10), transparent 62%);
  border-radius:10px 0 0 10px;
  padding-left:16px;
}
.wsb-dia--hoje::before{
  content:""; position:absolute; left:0; top:9px; bottom:9px;
  width:2px; background:var(--wse-ouro); border-radius:2px;
}
.wsb-dia--hoje .wsb-dia-nome{ color:var(--wse-tinta); font-weight:500; }
.wsb-dia-hoje{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  background:var(--wse-ouro); color:#fff;
}

.wsb-semana-nota{
  max-width:680px; margin:20px auto 0; text-align:center;
  font-size:.9rem; font-style:italic; font-weight:300; color:var(--wse-suave-2);
}

@media(max-width:520px){
  .wsb-dia{ padding:13px 4px; gap:12px; }
  .wsb-dia-nome{ font-size:.88rem; }
  .wsb-dia-hora{ font-size:1.1rem; }
  .wsb-dia-hoje{ font-size:.54rem; padding:2px 7px; }
}

/* ==================================================================
   HORARIOS EM DUAS COLUNAS

   A semana de um lado, os atalhos do outro. Quem chega nesta secao
   esta decidindo se vem — e a pergunta seguinte a "que horas abre?" e
   sempre "como chego?" ou "como falo com voces?". Deixar as duas
   respostas na mesma tela evita a rolagem ate o rodape.
   ================================================================== */

.wsb-hor-grade{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px;
  max-width:1060px; margin:0 auto; align-items:start;
}
@media(max-width:900px){
  .wsb-hor-grade{ grid-template-columns:1fr; gap:38px; }
}

.wsb-hor-col .wsb-semana{ max-width:none; }
.wsb-hor-col .wsb-semana-nota{ text-align:left; margin-left:6px; }

/* endereco acima dos atalhos */
.wsb-hor-end{
  font-size:.92rem; line-height:1.7; font-weight:300;
  color:var(--wse-suave-2); margin:0 0 14px; padding-left:2px;
}

/* ---------- os botoes ---------- */
.wsb-atalhos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:520px){ .wsb-atalhos{ grid-template-columns:1fr; } }

.wsb-acao{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:14px;
  text-decoration:none;
  background:var(--wse-papel);
  border:1px solid rgba(var(--wse-rgb-ouro),.30);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wsb-acao:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--wse-rgb-ouro),.65);
  box-shadow:0 10px 24px rgba(var(--wse-rgb-tinta),.10);
}

/* o de agendar ocupa a linha inteira e vem no verde da marca */
.wsb-acao--destaque{
  margin-bottom:14px; padding:18px 20px;
  background:linear-gradient(135deg, var(--wse-acento-esc), var(--wse-tinta));
  border-color:rgba(var(--wse-rgb-ouro),.55);
  box-shadow:0 8px 22px rgba(var(--wse-rgb-tinta),.20);
}
.wsb-acao--destaque .wsb-acao-txt strong{ color:var(--wse-ouro-cla); font-size:1.02rem; }
.wsb-acao--destaque .wsb-acao-txt span{ color:rgba(255,255,255,.7); }
.wsb-acao--destaque .wsb-acao-seta{ color:var(--wse-ouro-cla); }
.wsb-acao--destaque:hover{ box-shadow:0 14px 30px rgba(var(--wse-rgb-tinta),.28), 0 0 20px rgba(var(--wse-rgb-ouro),.22); }

.wsb-acao-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.wsb-acao-txt strong{
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  font-size:.86rem; font-weight:600; color:var(--wse-tinta); line-height:1.25;
}
.wsb-acao-txt span{
  font-size:.74rem; font-weight:300; color:var(--wse-suave-2); line-height:1.3;
}
.wsb-acao-seta{
  flex:0 0 auto; font-size:.95rem; color:var(--wse-ouro-txt);
  transition:transform .2s ease;
}
.wsb-acao:hover .wsb-acao-seta{ transform:translateX(3px); }

/* ---------- icones, desenhados em mascara para pegarem a cor da marca ---------- */
.wsb-acao-ico{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:rgba(var(--wse-rgb-ouro),.14);
  position:relative;
}
.wsb-acao-ico::before{
  content:""; position:absolute; inset:0; margin:auto;
  width:17px; height:17px;
  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;
}
.wsb-acao--destaque .wsb-acao-ico{ background:rgba(var(--wse-rgb-ouro),.22); }
.wsb-acao--destaque .wsb-acao-ico::before{ background:var(--wse-ouro-cla); width:19px; height:19px; }

.wsb-ico-zap::before{
  -webkit-mask-image:var(--wse-svg-zap);
          mask-image:var(--wse-svg-zap);
}
.wsb-ico-maps::before{
  -webkit-mask-image:var(--wse-svg-maps);
          mask-image:var(--wse-svg-maps);
}
.wsb-ico-waze::before{
  -webkit-mask-image:var(--wse-svg-waze);
          mask-image:var(--wse-svg-waze);
}
.wsb-ico-insta::before{
  -webkit-mask-image:var(--wse-svg-insta);
          mask-image:var(--wse-svg-insta);
}
.wsb-ico-yt::before{
  -webkit-mask-image:var(--wse-svg-yt);
          mask-image:var(--wse-svg-yt);
}
.wsb-ico-star::before{
  -webkit-mask-image:var(--wse-svg-star);
          mask-image:var(--wse-svg-star);
}
.wsb-ico-loja::before{
  -webkit-mask-image:var(--wse-svg-loja);
          mask-image:var(--wse-svg-loja);
}

.wsb-ico-blog::before{
  -webkit-mask-image:var(--wse-svg-blog);
          mask-image:var(--wse-svg-blog);
}

@media(prefers-reduced-motion:reduce){
  .wsb-acao, .wsb-acao-seta{ transition:none !important; }
  .wsb-acao:hover{ transform:none !important; }
}

/* ==================================================================
   DEPOIMENTOS

   Os cartoes sao desenhados pelo tema, com os dados lidos do Google no
   servidor. Antes eles vinham prontos de um script de terceiros, com
   cores proprias e sujeitos a nao aparecer.
   ================================================================== */

/* ---------- a nota, acima do carrossel ---------- */
.wsb-nota{
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap; margin:-16px 0 34px;
}
.wsb-nota-num{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:2.6rem; line-height:1; font-weight:500; color:var(--wse-tinta);
}
.wsb-nota-txt{ font-size:.86rem; font-weight:300; color:var(--wse-suave-2); }

/* ---------- estrelas, desenhadas em mascara ---------- */
.wsb-estrelas{ display:inline-flex; gap:3px; align-items:center; }
.wsb-estrela{
  width:16px; height:16px; display:block;
  background:var(--wse-ouro);
  -webkit-mask: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>") center/contain no-repeat;
  mask: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>") center/contain no-repeat;
}
.wsb-estrela--vazia{ background:rgba(var(--wse-rgb-ouro),.26); }
.wsb-nota .wsb-estrela{ width:22px; height:22px; }

/* ---------- cartao ---------- */
.wsb-trilho--depo{ gap:18px; align-items:stretch; }

.wsb-depo-item{ width:340px; display:flex; }
@media(max-width:520px){ .wsb-depo-item{ width:82vw; max-width:340px; } }

.wsb-depo-card{
  display:flex; flex-direction:column; gap:12px;
  width:100%; padding:22px 22px 24px;
  border-radius:18px;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.26);
  box-shadow:0 10px 26px rgba(var(--wse-rgb-tinta),.08);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wsb-depo-item:hover .wsb-depo-card{
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(var(--wse-rgb-tinta),.14);
}

.wsb-depo-topo{ display:flex; align-items:center; gap:12px; }
.wsb-depo-foto{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  object-fit:cover; display:block;
  border:1px solid rgba(var(--wse-rgb-ouro),.4);
}
.wsb-depo-foto--letra{
  display:flex; align-items:center; justify-content:center;
  background:var(--wse-acento-med); color:#fff;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-size:1.3rem; font-weight:500;
}
.wsb-depo-quem{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.wsb-depo-quem strong{
  font-size:.92rem; font-weight:600; color:var(--wse-tinta); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.wsb-depo-quem span{ font-size:.74rem; font-weight:300; color:var(--wse-suave-2); }

/* o G do Google, desenhado, para o cartao dizer de onde veio a avaliacao */
.wsb-depo-google{
  flex:0 0 auto; width:19px; height:19px; opacity:.9;
  background:
    conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.35 11.1H12v2.98h5.35c-.23 1.4-1.66 4.1-5.35 4.1a5.9 5.9 0 010-11.8c1.9 0 3.16.8 3.88 1.5l2.5-2.4C16.9 3.9 14.7 3 12 3a9 9 0 100 18c5.2 0 8.65-3.65 8.65-8.8 0-.6-.06-1.05-.15-1.5z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21.35 11.1H12v2.98h5.35c-.23 1.4-1.66 4.1-5.35 4.1a5.9 5.9 0 010-11.8c1.9 0 3.16.8 3.88 1.5l2.5-2.4C16.9 3.9 14.7 3 12 3a9 9 0 100 18c5.2 0 8.65-3.65 8.65-8.8 0-.6-.06-1.05-.15-1.5z'/></svg>") center/contain no-repeat;
}

.wsb-depo-texto{
  margin:0; font-size:.94rem; line-height:1.75; font-weight:300;
  color:var(--wse-suave-2);
}

@media(prefers-reduced-motion:reduce){
  .wsb-depo-card{ transition:none !important; }
  .wsb-depo-item:hover .wsb-depo-card{ transform:none !important; }
}

/* A seta ficava por cima do texto do primeiro depoimento. Nas galerias
   ela pousa sobre a foto e funciona como sobreposicao; aqui o cartao e
   texto, e texto tapado nao se le. O trilho abre espaco para elas. */
@media(min-width:761px){
  .wsb-trilho--depo{
    padding-left:62px; padding-right:62px;
    /* scroll-padding, e nao so padding: com scroll-snap "mandatory" o
       navegador encaixa o primeiro item na borda do container e come a
       folga do padding. O scroll-padding entra nessa conta e o encaixe
       passa a respeitar o espaco das setas. */
    scroll-padding-left:62px; scroll-padding-right:62px;
  }
}

/* ==================================================================
   ABERTURA DA HOME
   ================================================================== */

.wsb-abertura{
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, var(--wse-cartao) 0%, transparent 70%),
    linear-gradient(180deg, var(--wse-cartao) 0%, var(--wse-papel) 100%);
  padding:74px 0 78px;
  text-align:center;
}
.wsb-abertura-inner{ max-width:720px; }

/* a marca em tamanho de abertura: grande, mas sem gritar */
.wsb-abertura-marca{
  display:block;
  width:min(420px, 76vw);
  aspect-ratio:var(--wse-marca-prop, 2);
  margin:6px auto 4px;
  background:var(--wse-logo) center/contain no-repeat;
}

.wsb-abertura-tag{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-style:italic; font-size:1.28rem; line-height:1.5;
  color:var(--wse-acento-txt);
  margin:14px 0 0;
}
/* filete dourado abaixo da frase da marca */
.wsb-abertura-tag::after{
  content:""; display:block; width:118px; height:8px; margin:20px 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;
}

.wsb-abertura-txt{ margin:26px auto 30px; max-width:640px; }
/*
 * O texto da dobra sai na serifada dos titulos, nao na Montserrat do
 * corpo. Pedido da cliente — e faz sentido: esta e a unica dobra em que
 * o paragrafo E a mensagem, entao ele pode falar com a voz editorial.
 * O primeiro paragrafo, maior; o segundo (as 700 noivas) em italico,
 * como quem confidencia.
 */
.wsb-abertura-txt p{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:1.38rem; line-height:1.62; font-weight:500;
  color:var(--wse-tinta); margin:0 0 14px;
}
.wsb-abertura-txt p + p{
  font-style:italic; font-weight:400;
  font-size:1.22rem; color:var(--wse-suave-2);
}
.wsb-abertura-txt p:last-child{ margin-bottom:0; }

/* ==================================================================
   ICONES DE NOIVA

   Fio dourado, nunca bloco. Eles entram no lugar onde estava a marca e
   dizem "noiva" antes de a visitante ler qualquer palavra — que e o que
   um icone tem de fazer. O tracinho vertical entre um e outro segura o
   conjunto: sem ele os quatro desenhos boiam.
   ================================================================== */

.wsb-icones{
  display:flex; align-items:center; justify-content:center;
  gap:22px; color:var(--wse-ouro-txt);
  margin:6px auto 14px; max-width:420px;
}
.wsb-icones span{ width:44px; display:block; }
.wsb-icones .wse-ico-noiva{ width:100%; height:auto; display:block; }
.wsb-icones i{ width:1px; height:24px; background:currentColor; opacity:.34; flex:0 0 auto; }
@media(max-width:520px){
  .wsb-icones{ gap:16px; }
  .wsb-icones span{ width:36px; }
}

/* ==================================================================
   O RECORTE E O ARCO

   A foto de estudio vinha com um cinza chapado atras — dentro de uma
   pagina perolada, parecia um adesivo colado. Recortada, ela precisa de
   um fundo proprio: um arco em perola com a textura floral da marca e
   um fio dourado na borda. A pessoa passa a estar DENTRO da identidade.

   O recorte nao e cortado por moldura nenhuma (object-fit:contain) e
   fica encostado no chao do arco, com uma sombra baixa: e o que faz o
   corpo parecer apoiado ali e nao flutuando por acidente.
   ================================================================== */

.wsb-abertura-foto.wsb-abertura-foto--recorte{ position:relative; display:flex; align-items:flex-end; }
.wsb-abertura-arco{
  position:absolute; left:0; right:0; bottom:0; top:6%;
  border-radius:999px 999px 26px 26px;
  background:
    var(--wse-textura) center 18%/150% auto no-repeat,
    radial-gradient(ellipse 70% 46% at 50% 26%, rgba(255,255,255,.85) 0%, transparent 70%),
    linear-gradient(180deg, var(--wse-branco, #fff) 0%, var(--wse-perola, var(--wse-papel)) 100%);
  border:1px solid rgba(var(--wse-rgb-ouro),.34);
  box-shadow:0 22px 48px rgba(var(--wse-rgb-tinta),.10);
}
.wsb-abertura-foto.wsb-abertura-foto--recorte img{
  position:relative; z-index:1;
  width:100%; height:auto; display:block;
  aspect-ratio:auto; object-fit:contain;
  border-radius:0; box-shadow:none;
  filter:drop-shadow(0 18px 22px rgba(var(--wse-rgb-tinta),.20));
}

/* ==================================================================
   FLUTUAR

   As fotos sobem e descem alguns pixels, em tempos diferentes, para a
   dobra respirar em vez de ficar parada. O movimento e pequeno de
   proposito: acima de uns 8px vira animacao de banner.

   Quem pediu menos movimento no sistema (prefers-reduced-motion) nao ve
   nada disso — para quem tem labirintite ou enxaqueca vestibular, uma
   pagina que balanca e uma pagina que nao da para usar.
   ================================================================== */

@keyframes wsbFlutua{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-9px); }
}

.wsb-abertura-foto--esq{ animation:wsbFlutua 7.5s ease-in-out infinite; }
.wsb-abertura-foto--dir-1{ animation:wsbFlutua 8.5s ease-in-out .8s infinite; }
.wsb-abertura-foto--dir-2{ animation:wsbFlutua 9.5s ease-in-out 1.6s infinite; }
.wsb-abertura-duo figure:first-child{ animation:wsbFlutua 8s   ease-in-out .4s infinite; }
.wsb-abertura-duo figure:last-child { animation:wsbFlutua 9s   ease-in-out 1.2s infinite; }

/* o toque: a foto sobe e a sombra abre um pouco */
.wsb-abertura-duo img,
.wsb-abertura-foto img{ transition:transform .45s ease, box-shadow .45s ease; }
.wsb-abertura-duo figure:hover img,
.wsb-abertura-foto:hover img{
  transform:translateY(-4px) scale(1.012);
  box-shadow:0 26px 52px rgba(var(--wse-rgb-tinta),.20);
}
.wsb-abertura-foto.wsb-abertura-foto--recorte:hover img{ box-shadow:none; transform:translateY(-4px); }

/* dentro do portico de tres fotos, o recorte enche a coluna inteira mas
   continua apoiado no chao do arco — sem esticar, porque contain nunca
   deforma; o que muda e onde a imagem encosta */
/*
 * O recorte nao estica com a coluna: quem manda na altura dele e a
 * propria imagem. Esticado, sobrava meio arco vazio acima da cabeca e
 * ela parecia pequena la dentro — o arco tem de vestir a pessoa, nao
 * hospeda-la.
 */
/* as duas classes juntas no seletor: a regra do portico vem depois no
   arquivo e, com a mesma forca, ganharia por ordem */
.wsb-abertura--fotos-3 .wsb-abertura-foto--esq.wsb-abertura-foto--recorte{ align-self:center; }
.wsb-abertura--fotos-3 .wsb-abertura-foto--esq.wsb-abertura-foto--recorte img{
  height:auto; min-height:0; object-fit:contain; object-position:center bottom;
}

@media (prefers-reduced-motion: reduce){
  .wsb-abertura-foto--esq,
  .wsb-abertura-foto--dir-1,
  .wsb-abertura-foto--dir-2,
  .wsb-abertura-duo figure:first-child,
  .wsb-abertura-duo figure:last-child{ animation:none; }
  .wsb-abertura-duo figure:hover img,
  .wsb-abertura-foto:hover img{ transform:none; }
}

/* ---------- o par de noivas no meio da dobra ----------

   Duas fotos entre a assinatura e a frase. Com elas no centro, a marca
   encolhe: duas coisas grandes uma sobre a outra brigam, e quem tem de
   ganhar essa briga e a noiva, nao o logotipo — que ja esta no
   cabecalho, logo acima.

   As molduras sao mais baixas que as das laterais (4/5 contra a altura
   cheia) para a frase, o texto e o botao continuarem cabendo na
   primeira tela. */

.wsb-abertura-duo{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  max-width:520px; margin:6px auto 20px;
}
.wsb-abertura-duo figure{ margin:0; }
.wsb-abertura-duo img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/5; object-fit:cover; object-position:center 24%;
  border-radius:16px;
  box-shadow:0 16px 34px rgba(var(--wse-rgb-tinta),.14);
}
.wsb-abertura--duo .wsb-abertura-marca{ width:min(210px, 52vw); margin-bottom:2px; }

/* ---------- abertura com fotos: o portico ----------

   Com duas fotos a abertura deixa de ser uma coluna centrada e vira um
   portico: uma foto de cada lado, o texto no meio. O texto continua
   centrado e com a mesma medida de leitura de antes — quem muda de
   lugar sao as bordas da secao, nao a linha do texto.

   No celular nao ha lados: as fotos descem para baixo do botao, lado a
   lado, e a abertura volta a ser a coluna que sempre foi. */

.wsb-abertura--fotos .wsb-abertura-inner{
  max-width:1180px;
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.4fr) minmax(0,.62fr);
  grid-template-rows:auto auto;
  gap:0 34px;
  align-items:center;
}
/* no computador as duas metades do texto ficam uma sobre a outra, na
   coluna do meio, e cada foto atravessa as duas linhas */
.wsb-abertura--fotos .wsb-abertura-topo,
.wsb-abertura--fotos .wsb-abertura-corpo{ grid-column:2; min-width:0; }
.wsb-abertura--fotos .wsb-abertura-topo{  grid-row:1; }
.wsb-abertura--fotos .wsb-abertura-corpo{ grid-row:2; }
.wsb-abertura--fotos .wsb-abertura-foto--esq{ grid-column:1; grid-row:1 / span 2; }
.wsb-abertura--fotos .wsb-abertura-foto--dir{ grid-column:3; grid-row:1 / span 2; }

.wsb-abertura--fotos-1 .wsb-abertura-inner{
  grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);
}

/*
 * TRES FOTOS: uma inteira a esquerda, duas empilhadas a direita.
 *
 * A da esquerda atravessa as duas linhas e estica ate a altura do
 * conjunto — por isso ela perde a moldura fixa e ganha height:100%.
 * As duas da direita mantem a moldura em pe. A dobra fica assimetrica
 * de proposito: tres molduras iguais lado a lado viram catalogo, e o
 * que se quer aqui e uma composicao.
 */
.wsb-abertura--fotos-3 .wsb-abertura-foto--esq{
  grid-row:1 / span 2; align-self:stretch;
  transform:none;
}
.wsb-abertura--fotos-3 .wsb-abertura-foto--esq img{
  height:100%; aspect-ratio:auto; min-height:440px;
}
.wsb-abertura--fotos-3 .wsb-abertura-foto--dir-1{ grid-column:3; grid-row:1; align-self:end; transform:none; }
.wsb-abertura--fotos-3 .wsb-abertura-foto--dir-2{ grid-column:3; grid-row:2; align-self:start; transform:none; }
.wsb-abertura--fotos-3 .wsb-abertura-foto--dir img{ aspect-ratio:4/5; }
.wsb-abertura--fotos-3 .wsb-abertura-foto--dir-1{ margin-bottom:9px; }
.wsb-abertura--fotos-3 .wsb-abertura-foto--dir-2{ margin-top:9px; }
.wsb-abertura--fotos-1 .wsb-abertura-topo,
.wsb-abertura--fotos-1 .wsb-abertura-corpo{ grid-column:2; }
.wsb-abertura-topo,
.wsb-abertura-corpo{ min-width:0; }

.wsb-abertura-foto{ margin:0; min-width:0; }
.wsb-abertura-foto img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/5; object-fit:cover; object-position:center 26%;
  border-radius:20px;
  box-shadow:0 18px 40px rgba(var(--wse-rgb-tinta),.16);
}
/*
 * As duas molduras do portico tem a MESMA medida, mesmo quando uma foto
 * e deitada e a outra em pe. Na primeira prova cada uma seguiu a
 * orientacao do arquivo: a deitada saiu com 196px de altura ao lado de
 * uma de 348 e a secao ficou pendendo para um lado. Numa abertura, as
 * duas bordas precisam ter o mesmo peso.
 *
 * O que muda na foto deitada e so o ponto do corte: mais para o centro,
 * porque nela o assunto nao esta no alto como num retrato.
 */
.wsb-abertura-foto--deitada img{ object-position:center 42%; }
/* uma sobe, a outra desce: a assimetria tira o ar de catalogo */
.wsb-abertura-foto--esq{ transform:translateY(-16px); }
.wsb-abertura-foto--dir{ transform:translateY(16px); }

@media(max-width:900px){
  .wsb-abertura--fotos .wsb-abertura-inner,
  .wsb-abertura--fotos-1 .wsb-abertura-inner{
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  /*
   * No celular a ordem e: marca, fotos, texto. A cliente ve de quem e o
   * site, ve o trabalho e so entao le — a foto convence antes do texto
   * numa tela em que rolar custa caro.
   */
  .wsb-abertura--fotos .wsb-abertura-topo,
  .wsb-abertura--fotos .wsb-abertura-corpo,
  .wsb-abertura--fotos-1 .wsb-abertura-topo,
  .wsb-abertura--fotos-1 .wsb-abertura-corpo{ grid-column:1 / -1; grid-row:auto; }
  .wsb-abertura--fotos .wsb-abertura-foto--esq,
  .wsb-abertura--fotos .wsb-abertura-foto--dir{ grid-column:auto; grid-row:auto; }
  .wsb-abertura-topo{ order:1; margin-bottom:18px; }
  .wsb-abertura-foto--esq{ order:2; }
  .wsb-abertura-foto--dir-1{ order:3; }
  .wsb-abertura-foto--dir-2{ order:4; }
  .wsb-abertura-corpo{ order:5; margin-top:18px; }
  .wsb-abertura-foto--esq,
  .wsb-abertura-foto--dir{ transform:none; align-self:auto; }
  .wsb-abertura--fotos-1 .wsb-abertura-foto--esq{ grid-column:1 / -1; }
  .wsb-abertura-foto img{ aspect-ratio:4/5; }

  /* com tres, a primeira abre a fileira inteira e as outras duas
     fecham lado a lado — a mesma composicao do computador, deitada */
  .wsb-abertura--fotos-3 .wsb-abertura-foto--esq{
    grid-column:1 / -1; grid-row:auto; align-self:auto;
  }
  .wsb-abertura--fotos-3 .wsb-abertura-foto--esq img{
    height:auto; aspect-ratio:16/11; min-height:0;
  }
  /* o recorte nao vira faixa deitada no celular: a cupula ficaria
     achatada e a pessoa, minuscula no meio dela */
  .wsb-abertura--fotos-3 .wsb-abertura-foto--esq.wsb-abertura-foto--recorte{
    grid-column:1 / -1; max-width:226px; margin:0 auto;
  }
  .wsb-abertura--fotos-3 .wsb-abertura-foto--esq.wsb-abertura-foto--recorte img{
    aspect-ratio:auto; height:auto;
  }
  .wsb-abertura--fotos-3 .wsb-abertura-foto--dir-1,
  .wsb-abertura--fotos-3 .wsb-abertura-foto--dir-2{
    grid-column:auto; grid-row:auto; margin:0;
  }

  /*
   * A MARCA SAI NO CELULAR
   *
   * Ela ja esta no cabecalho, a dois centimetros dali. Repetida em
   * tamanho grande, empurrava a foto e o texto para fora da primeira
   * tela — e primeira tela no celular e quase tudo o que a visitante
   * ve antes de decidir se continua. O nome nao se perde: continua no
   * cabecalho, no rodape e no titulo da aba.
   */
  /* no celular o par do meio sai: a dobra ja tem tres fotos */
  .wsb-abertura-duo{ display:none; }
  .wsb-abertura--fotos .wsb-abertura-marca{ display:none; }
  /* sem a marca, a frase passa a ser a primeira linha da dobra —
     entao ela cresce e assume o papel de titulo */
  .wsb-abertura--fotos .wsb-abertura-tag{
    margin-top:10px;
    font-size:1.42rem; line-height:1.35;
  }
}

@media(max-width:640px){
  .wsb-abertura{ padding:56px 0 60px; }
  .wsb-abertura-tag{ font-size:1.14rem; }
  .wsb-abertura-txt p{ font-size:1rem; }
}

/* ==================================================================
   PACOTES

   Cartoes de conteudo, nao de preco. Por isso o peso visual esta na
   LISTA do que esta incluso, e o botao fecha o cartao levando a
   conversa — e ali que o valor aparece.
   ================================================================== */

.wsb-pacotes{
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, var(--wse-cartao) 0%, transparent 72%),
    var(--wse-papel);
}

/* o rotulo dos blocos de noiva sai no rosa da papelaria dela */
.wsb-kicker--rosa{ color:var(--wse-rosa-txt) !important; }
.wsb-pacotes .wsb-titulo::after{ background:var(--wse-rosa); }

.wsb-pac-intro{
  max-width:640px; margin:-16px auto 40px; text-align:center;
  font-size:1.02rem; line-height:1.85; font-weight:300; color:var(--wse-suave-2);
}

.wsb-pac-grade{
  display:grid; gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  align-items:start;
  max-width:960px; margin:0 auto;
}
.wsb-pac-grade--1{ max-width:520px; }

.wsb-pac{
  display:flex; flex-direction:column;
  padding:34px 30px 32px;
  border-radius:20px;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.26);
  box-shadow:0 12px 30px rgba(var(--wse-rgb-tinta),.07);
}
/* o pacote em destaque ganha o fio rosa e um degrade discreto */
.wsb-pac--destaque{
  border-color:rgba(var(--wse-rgb-rosa),.55);
  background:linear-gradient(180deg, var(--wse-cartao) 0%, rgba(var(--wse-rgb-rosa),.07) 100%);
  box-shadow:0 18px 40px rgba(var(--wse-rgb-tinta),.10);
}

.wsb-pac-topo{ text-align:center; margin-bottom:22px; }
.wsb-pac-nome{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:1.85rem; line-height:1.15; color:var(--wse-tinta); margin:0;
}
/* fio dourado curto abaixo do nome do pacote */
.wsb-pac-nome::after{
  content:""; display:block; width:54px; height:1px; margin:14px auto 0;
  background:var(--wse-ouro); opacity:.75;
}
.wsb-pac-resumo{
  font-size:.92rem; line-height:1.7; font-weight:300;
  color:var(--wse-suave-2); margin:14px 0 0;
}

.wsb-pac-itens{
  list-style:none; margin:0 0 4px; padding:0;
  display:flex; flex-direction:column; gap:2px;
}
.wsb-pac-itens li{
  position:relative; padding:10px 0 10px 26px;
  font-size:.95rem; line-height:1.6; font-weight:300; color:var(--wse-suave-2);
  border-bottom:1px solid rgba(var(--wse-rgb-ouro),.16);
}
.wsb-pac-itens li:last-child{ border-bottom:0; }
/* losango dourado, o mesmo do ornamento dos titulos */
.wsb-pac-itens li::before{
  content:""; position:absolute; left:4px; top:17px;
  width:6px; height:6px; transform:rotate(45deg);
  background:var(--wse-ouro);
}

.wsb-pac-grupo{
  display:block; margin:22px 0 6px;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:.62rem; font-weight:600; color:var(--wse-rosa-txt);
}
.wsb-pac-itens--extra li::before{ background:var(--wse-rosa); }

.wsb-pac-nota{
  margin:20px 0 0; padding:12px 14px;
  border-radius:10px;
  background:rgba(var(--wse-rgb-ouro),.08);
  font-size:.84rem; line-height:1.6; font-weight:300;
  color:var(--wse-suave-2); text-align:center;
}

.wsb-pac-btn{ margin-top:auto; align-self:center; margin-top:26px; }

/* ---------- extras ---------- */
.wsb-extras{
  max-width:880px; margin:46px auto 0;
  padding:30px 32px 26px;
  border-radius:18px;
  border:1px solid rgba(var(--wse-rgb-ouro),.24);
  background:var(--wse-cartao);
}
.wsb-extras-tit{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif); font-weight:500;
  font-size:1.5rem; color:var(--wse-tinta); text-align:center; margin:0 0 20px;
}
.wsb-extras-lista{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:6px 24px;
}
.wsb-extras-lista li{
  position:relative; padding:9px 0 9px 22px;
  font-size:.93rem; font-weight:300; color:var(--wse-suave-2);
  border-bottom:1px solid rgba(var(--wse-rgb-rosa),.22);
}
.wsb-extras-lista li::before{
  content:""; position:absolute; left:2px; top:calc(50% - 3px);
  width:6px; height:6px; transform:rotate(45deg); background:var(--wse-rosa);
}

.wsb-pac-rodape{
  max-width:700px; margin:34px auto 0; text-align:center;
  font-size:.9rem; line-height:1.75; font-style:italic;
  font-weight:300; color:var(--wse-suave-2);
}

@media(max-width:640px){
  .wsb-pac{ padding:28px 22px 26px; }
  .wsb-pac-nome{ font-size:1.6rem; }
  .wsb-extras{ padding:24px 20px 20px; }
}

/* ==================================================================
   PACOTE COM FOTOS — a faixa larga

   O pacote do hotel nao cabe numa coluna estreita: ele vende um lugar,
   e lugar se mostra. Quando a Ficha traz fotos naquele pacote, o cartao
   atravessa a grade inteira e se divide em dois — mosaico de um lado, o
   que esta incluso do outro.

   Os outros pacotes nao mudam de tamanho: a grade passa a empacotar
   denso (wsb-pac-grade--com-duo), entao os cartoes estreitos sobem e
   preenchem a linha de cima em vez de deixar um vazio ao lado da faixa.

   O mosaico tem altura 100% e linhas iguais: ele estica junto com o
   texto ao lado, sem sobra em baixo, seja qual for o tamanho da lista
   de itens. As fotos entram com object-fit:cover, entao nenhuma delas e
   deformada para caber — o corte acontece nas bordas.
   ================================================================== */

.wsb-pac-grade--com-duo{
  /* duas colunas fixas: com tres o par de cartoes estreitos deixava uma
     coluna vazia a direita, e a faixa larga logo abaixo denunciava o
     buraco. Em duas eles dividem a largura da faixa exatamente ao meio. */
  grid-template-columns:repeat(2, minmax(280px, 1fr));
  grid-auto-flow:dense;
  max-width:1180px;
}
@media(max-width:760px){
  .wsb-pac-grade--com-duo{ grid-template-columns:1fr; }
}

/* o cartao estreito que sobrou impar: no meio, na largura de um cartao */
.wsb-pac--sozinho{
  grid-column:1 / -1;
  max-width:560px;
  justify-self:center;
  width:100%;
}

.wsb-pac--duo{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(280px, .92fr) 1.08fr;
  gap:30px;
  align-items:stretch;
  padding:26px;
}
.wsb-pac--duo .wsb-pac-corpo{
  display:flex; flex-direction:column;
  /* texto curto ao lado de um mosaico alto: centralizado ele parece
     escolha; encostado em cima parece que faltou conteudo */
  justify-content:center;
  padding:8px 6px 6px;
}
.wsb-pac--duo .wsb-pac-topo{ text-align:left; }
.wsb-pac--duo .wsb-pac-nome::after{ margin-left:0; }
.wsb-pac--duo .wsb-pac-btn{ align-self:flex-start; }

/*
 * A faixa espelhada: texto na esquerda, fotos na direita.
 * O HTML nao muda de ordem — quem le com leitor de tela continua
 * ouvindo o nome do pacote antes das fotos, em todas elas. Quem
 * troca de lugar e o desenho, com order, e a coluna larga acompanha
 * o texto para as duas versoes terem a mesma medida de leitura.
 */
.wsb-pac--espelho{ grid-template-columns:1.08fr minmax(280px, .92fr); }
.wsb-pac--espelho .wsb-pac-fotos-caixa{ order:2; }
.wsb-pac--espelho .wsb-pac-corpo{ order:1; }

/* ---------- o mosaico ----------

   O truque da altura: a lista de fotos e ABSOLUTA dentro de uma caixa
   relativa. Assim ela nao empurra a altura da faixa — quem manda na
   altura e a coluna de texto ao lado, e o mosaico se estica para
   acompanhar. Sem isso as cinco fotos em pe, com 1024px de altura cada,
   faziam a secao passar de tres mil pixels.

   Com numero impar de fotos a primeira ocupa duas linhas: vira uma foto
   em pe, do formato em que ela foi tirada, e o mosaico fecha certinho
   sem sobrar buraco na ultima fileira. */

.wsb-pac-fotos-caixa{ position:relative; min-height:340px; }
/*
 * A ALTURA MINIMA DO MOSAICO
 *
 * Esticar o mosaico ate a altura do texto so funciona enquanto o texto e
 * comprido. Num pacote de cinco linhas com cinco fotos, as tres fileiras
 * tinham 147px cada e as fotos, todas em pe, entravam por uma fresta —
 * cortava a cabeca das meninas.
 *
 * Este espacador invisivel da o piso: metade da largura por fileira, que
 * em duas colunas e exatamente a celula QUADRADA. Uma foto em pe cortada
 * em quadrado ainda mostra rosto e ombros. Se o texto ao lado for maior
 * que isso, a linha da grade estica a caixa e o mosaico acompanha — o
 * piso nunca vira teto.
 */
.wsb-pac-fotos-caixa::before{
  content:''; display:block;
  padding-top:calc(50% * var(--wsb-linhas, 2));
}

.wsb-pac-fotos{
  position:absolute; inset:0;
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:10px;
}
.wsb-pac-fotos--impar > li:first-child{ grid-row:span 2; }

.wsb-pac-foto{ position:relative; overflow:hidden; border-radius:14px; min-height:0; }
.wsb-pac-foto-btn{
  display:block; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:zoom-in;
  position:relative; overflow:hidden;
}
.wsb-pac-foto-img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 22%;
  display:block;
  transition:transform .5s ease;
}
.wsb-pac-foto-btn:hover .wsb-pac-foto-img{ transform:scale(1.05); }

@media(max-width:900px){
  /* numa coluna so nao ha lado: a foto abre o pacote em todas as faixas */
  .wsb-pac--duo,
  .wsb-pac--espelho{ grid-template-columns:1fr; gap:24px; padding:22px; }
  .wsb-pac--espelho .wsb-pac-fotos-caixa{ order:1; }
  .wsb-pac--espelho .wsb-pac-corpo{ order:2; }
  .wsb-pac-fotos-caixa{ min-height:0; }
  .wsb-pac-fotos-caixa::before{ display:none; }
  .wsb-pac-fotos{ position:static; grid-auto-rows:auto; }
  .wsb-pac-fotos > li{ aspect-ratio:4/5; }
  .wsb-pac-fotos--impar > li:first-child{ grid-row:auto; grid-column:1 / -1; aspect-ratio:16/11; }
  .wsb-pac--duo .wsb-pac-corpo{ padding:0 4px; }
}

/* ---------- secao de avaliacao no modo convite ---------- */
.wsb-depo--convite .wsb-inner{ max-width:720px; text-align:center; }
.wsb-depo-convite{
  max-width:560px; margin:6px auto 18px;
  font-size:1.02rem; line-height:1.85; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-depo--convite .wsb-estrelas{ justify-content:center; margin-bottom:6px; }
.wsb-depo--convite .wsb-rodape-bloco{ margin-top:22px; }

/* ---------- a marca como marca d'agua da abertura ----------

   A logo entra atras do texto em tamanho grande e opacidade baixissima.
   Nao e para ser lida — a logo legivel ja esta em cima, no lugar dela.
   E textura de papel timbrado: de longe a pessoa percebe que aquele
   espaco pertence a alguem, sem conseguir dizer o que viu. Acima de uns
   8% de opacidade ela para de ser fundo e comeca a atrapalhar a
   leitura, entao o valor aqui e baixo de proposito. */
.wsb-abertura{ overflow:hidden; }
.wsb-abertura::after{
  content:''; position:absolute; z-index:0;
  left:-4%; top:46%; transform:translateY(-50%);
  /* bem maior que a secao: so entram na tela pedacos do traco, e o
     nome nao chega a ser lido duas vezes. Na primeira prova a marca
     coube inteira no fundo e dava para ler "Vitoriano" atras do texto —
     parecia erro de montagem, nao papel timbrado. */
  width:min(2200px, 210%);
  aspect-ratio:var(--wse-marca-prop, 2);
  background:var(--wse-logo) center/contain no-repeat;
  opacity:.05;
  pointer-events:none;
}
.wsb-abertura > .wsb-inner{ position:relative; z-index:1; }

/* ==================================================================
   AS SUITES, EM ABAS

   Vitrine unica para as suites que os pacotes do hotel dividem. E um
   cartao de largura inteira dentro da grade dos pacotes, com as
   mesmas pilulas de aba das galerias — quem ja usou uma, sabe usar a
   outra. O carrossel e o mesmo das galerias, entao a lupa, as setas e
   as molduras vem de graca.
   ================================================================== */

.wsb-pac--suites{
  grid-column:1 / -1;
  display:block;
  padding:34px 30px 30px;
}
.wsb-pac--suites .wsb-pac-topo{ text-align:center; margin-bottom:26px; }
.wsb-pac--suites .wsb-pac-nome::after{ margin-left:auto; }

.wsb-suite-painel[hidden]{ display:none; }

.wsb-suite-texto{
  max-width:720px; margin:24px auto 0; text-align:center;
  font-size:.98rem; line-height:1.85; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-suite-nota{
  max-width:640px; margin:26px auto 0; text-align:center;
  font-size:.85rem; font-style:italic; font-weight:300;
  color:var(--wse-suave-2);
}
@media(max-width:640px){
  .wsb-pac--suites{ padding:26px 18px 24px; }
}

/* ---------- as suites dentro do cartao do pacote ---------- */
.wsb-suites-caixa{
  grid-column:1 / -1; order:3;
  margin-top:28px; padding-top:26px;
  border-top:1px solid rgba(var(--wse-rgb-ouro),.22);
}
.wsb-suites-rotulo{ display:block; text-align:center; margin-bottom:18px; }
.wsb-suites-caixa .wsb-abas{ margin-bottom:22px; }
.wsb-suites-caixa .wsb-suite-texto{ font-size:.92rem; }

/* ---------- a janela das suites ----------
   Abre por cima da pagina quando um cartao chama. Uma janela so para
   os tres pacotes do hotel: as suites sao as mesmas, e quem compara
   pacotes ve o quarto e volta para onde estava, sem perder o lugar. */

.wsb-pac-btns{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-top:auto; padding-top:26px;
}
.wsb-pac-btns .wsb-pac-btn{ margin-top:0; align-self:auto; }
.wsb-pac--duo .wsb-pac-btns{ justify-content:flex-start; }
.wsb-suites-bt{ cursor:pointer; }

.wsb-suites-modal{
  position:fixed; inset:0; z-index:99990;
  background:rgba(var(--wse-rgb-tinta),.46);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.wsb-suites-modal[hidden]{ display:none; }

.wsb-suites-janela{
  position:relative;
  width:min(1080px, 100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.30);
  border-radius:22px;
  box-shadow:0 30px 80px rgba(var(--wse-rgb-tinta),.35);
  padding:34px 30px 34px;
  animation:wsbSobe .22s ease-out;
}
@keyframes wsbSobe{ from{ transform:translateY(14px); opacity:.5; } to{ transform:none; opacity:1; } }

/* dentro da janela, o bloco perde a moldura de cartao: a janela ja e o cartao */
.wsb-suites-janela .wsb-pac--suites{
  padding:0; border:0; box-shadow:none; background:none;
}

.wsb-suites-fecha{
  position:sticky; top:0; float:right; z-index:5;
  width:40px; height:40px; margin:-8px -6px 0 0;
  background:var(--wse-papel); border:1px solid rgba(var(--wse-rgb-ouro),.34);
  border-radius:50%; cursor:pointer;
  font-size:1.5rem; line-height:1; color:var(--wse-acento-txt);
}
.wsb-suites-fecha:hover{ background:var(--wse-branco, #fff); }

@media(max-width:640px){
  .wsb-suites-modal{ padding:10px; }
  .wsb-suites-janela{ padding:24px 16px 26px; max-height:calc(100vh - 20px); }
}

/* ---------- prosa rica: o texto como hierarquia ----------
   Negrito na cor da tinta para as frases que carregam a mensagem,
   italico dourado para a palavra que merece brilho, e a citacao com o
   fio dourado a esquerda — a mesma gramatica visual da referencia. */

/*
 * O peso do negrito e cravado de proposito.
 *
 * O <strong> do navegador vale "bolder", que e RELATIVO: dentro de um
 * paragrafo de peso 300 ele vira 400, e a frase que devia saltar fica
 * igual ao resto. Foi o que aconteceu no texto do Nail designer.
 */
.wsb-prosa strong, .wsb-abertura-txt strong,
.wsb-pac-intro strong, .wsb-suite-texto strong, .wsb-depo-convite strong,
.wsb-galeria-texto strong, .wsb-gal-texto strong{
  font-weight:600; color:var(--wse-tinta);
}
.wsb-prosa em, .wsb-pac-intro em,
.wsb-suite-texto em, .wsb-depo-convite em,
.wsb-galeria-texto em, .wsb-gal-texto em{
  font-style:italic; color:var(--wse-ouro-txt);
}
.wsb-abertura-txt em{ color:var(--wse-ouro-txt); }

.wse-citacao{
  margin:24px 0 4px; padding:8px 0 8px 22px;
  border-left:2px solid var(--wse-ouro);
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-style:italic; font-weight:500;
  font-size:1.22rem; line-height:1.6;
  color:var(--wse-suave);
}
.wsb-sobre-grade--so-texto .wse-citacao,
.wsb-abertura .wse-citacao{
  border-left:0; padding-left:0; text-align:center;
}
.wsb-abertura .wse-citacao{ margin:20px auto 4px; max-width:560px; }

/* ==================================================================
   GALERIA LADO A LADO — o carrossel pequeno com texto ao lado

   Num salao com quatro especialidades, quatro carrosseis largos
   empilhados viram rolagem sem fim e nenhum deles explica o que faz.
   Aqui cada especialidade e uma faixa: carrossel pequeno de um lado,
   titulo e texto do outro, alternando o lado a cada faixa.

   O carrossel encosta na borda da tela do proprio lado — foto cortada
   na margem e o que diz "tem mais, arrasta". Fila que termina certinha
   dentro da coluna parece que acabou.
   ================================================================== */

.wsb-galeria--lado{ padding:62px 0 64px; }
.wsb-galeria--lado + .wsb-galeria--lado{ padding-top:34px; }

.wsb-gal-duo{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:40px;
  max-width:1220px;
}
.wsb-galeria--espelho .wsb-gal-duo{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.wsb-galeria--espelho .wsb-gal-carrossel{ order:2; }
.wsb-galeria--espelho .wsb-gal-texto{ order:1; }

/*
 * O trilho comum e desenhado para atravessar a pagina inteira: ele tem
 * margem negativa calculada para o miolo de 1220px. Dentro de uma
 * coluna isso o fazia invadir o texto ao lado. Aqui ele volta a ser um
 * trilho normal, preso na coluna, e continua rolando na horizontal.
 */
.wsb-gal-carrossel{ min-width:0; overflow:hidden; }
.wsb-galeria--lado .wsb-trilho{
  margin-left:0; margin-right:0;
  padding-left:6px; padding-right:6px;
  scroll-padding-inline:6px;
}
.wsb-gal-texto{ min-width:0; }
.wsb-gal-texto .wsb-kicker{ text-align:left; }
.wsb-gal-texto .wsb-titulo{ text-align:left; font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:16px; }
.wsb-gal-texto .wsb-titulo::after{ margin-left:0; }
.wsb-gal-texto .wsb-prosa{ margin-bottom:22px; }

/* molduras menores: aqui o carrossel divide a largura com o texto */
.wsb-galeria--lado .wsb-fmt-retrato .wsb-foto{ width:220px; }
.wsb-galeria--lado .wsb-fmt-quadrado .wsb-foto{ width:236px; }
.wsb-galeria--lado .wsb-fmt-paisagem .wsb-foto{ width:300px; }
.wsb-galeria--lado .wsb-seta{ width:38px; height:38px; font-size:.9rem; }

@media(max-width:900px){
  .wsb-gal-duo,
  .wsb-galeria--espelho .wsb-gal-duo{ grid-template-columns:1fr; gap:26px; }
  /* no celular o texto abre e o carrossel vem embaixo, em todas elas:
     ler o que e, depois ver — na tela estreita a ordem importa mais */
  .wsb-gal-texto,
  .wsb-galeria--espelho .wsb-gal-texto{ order:1; text-align:center; }
  .wsb-gal-carrossel,
  .wsb-galeria--espelho .wsb-gal-carrossel{ order:2; }
  .wsb-gal-texto .wsb-kicker,
  .wsb-gal-texto .wsb-titulo{ text-align:center; }
  .wsb-gal-texto .wsb-titulo::after{ margin-left:auto; }
  .wsb-galeria--lado{ padding:48px 0 46px; }
  .wsb-galeria--lado .wsb-fmt-retrato .wsb-foto{ width:64vw; max-width:250px; }
  .wsb-galeria--lado .wsb-fmt-quadrado .wsb-foto{ width:68vw; max-width:270px; }
  .wsb-galeria--lado .wsb-fmt-paisagem .wsb-foto{ width:78vw; max-width:330px; }
}

/* ==================================================================
   SERVICOS NO MODO FINO — a carta

   Terceira tentativa, e a que ficou. As duas primeiras erravam no mesmo
   ponto: mantinham a CAIXA. Vinte e duas caixas iguais em fila sao vinte
   e duas caixas, por menores que fiquem.

   Aqui a caixa some. Fica um fio dourado no alto de cada item — os fios
   em fila formam uma regua continua atravessando a secao, como a pauta
   de uma carta de menu — e embaixo dele o nome do servico na serifada,
   com ar em volta. O que separa um item do outro e o espaco, nao a
   borda. Isso e o que uma casa cara faz: tira o contorno e confia no
   espaco.
   ================================================================== */

.wsb-servicos--fino .wsb-card{ width:206px; }
.wsb-servicos--fino .wsb-trilho{ gap:0; padding-top:10px; }

.wsb-servicos--fino .wsb-card-link{
  height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:0; padding:26px 20px 20px;
  background:none; border:0; border-radius:0; box-shadow:none;
  position:relative;
}
/* o fio dourado: a pauta da carta */
.wsb-servicos--fino .wsb-card-link::before{
  content:''; position:absolute; left:14px; right:14px; top:0;
  height:1px; background:rgba(var(--wse-rgb-ouro),.45);
  transition:background .25s ease, left .25s ease, right .25s ease;
}
/* o losango so no item sob o mouse: ele marca onde voce esta */
.wsb-servicos--fino .wsb-card-link::after{
  content:''; position:absolute; top:-4px; left:50%; margin-left:-4px;
  width:8px; height:8px; transform:rotate(45deg) scale(0);
  background:var(--wse-ouro);
  transition:transform .25s ease;
}
.wsb-servicos--fino a.wsb-card-link:hover{ transform:none; box-shadow:none; }
.wsb-servicos--fino a.wsb-card-link:hover::before{ left:6px; right:6px; background:var(--wse-ouro); }
.wsb-servicos--fino a.wsb-card-link:hover::after{ transform:rotate(45deg) scale(1); }

.wsb-servicos--fino .wsb-card-foto,
.wsb-servicos--fino .wsb-card-veu{ display:none; }

.wsb-servicos--fino .wsb-card-txt{
  position:static; padding:0; gap:14px; justify-content:flex-start;
}
.wsb-servicos--fino .wsb-card-nome{
  color:var(--wse-tinta); text-shadow:none;
  font-size:1.08rem; line-height:1.34; font-weight:500;
  transition:color .25s ease;
}
.wsb-servicos--fino a.wsb-card-link:hover .wsb-card-nome{ color:var(--wse-ouro-txt); }

.wsb-servicos--fino .wsb-card-cta{
  background:none; border:0; padding:0;
  color:var(--wse-ouro-txt);
  font-size:.58rem; letter-spacing:.22em;
  opacity:0; transform:translateY(-4px);
  transition:opacity .25s ease, transform .25s ease;
}
.wsb-servicos--fino a.wsb-card-link:hover .wsb-card-cta{
  background:none; opacity:1; transform:none;
}

/* as setas descem para nao brigar com a regua dourada */
.wsb-servicos--fino .wsb-seta{ width:38px; height:38px; font-size:.9rem; }

@media(max-width:520px){
  .wsb-servicos--fino .wsb-card{ width:56vw; max-width:210px; }
  .wsb-servicos--fino .wsb-card-link{ height:142px; }
  /* no toque nao ha hover: o convite fica sempre visivel */
  .wsb-servicos--fino .wsb-card-cta{ opacity:1; transform:none; }
}

/* ==================================================================
   PORTAL — a primeira dobra

   Foto do salao ao fundo, veu da marca por cima, e no meio a marca, a
   cidade, a frase e os botoes. O veu nao e cinza: e a propria cor do
   papel do cliente em camadas, entao a foto some dentro da identidade
   em vez de ficar por baixo de um filtro qualquer.
   ================================================================== */

.wsb-portal{
  position:relative; overflow:hidden;
  padding:88px 0 84px;
  text-align:center;
  background:var(--wse-hero-bg, none), linear-gradient(180deg,var(--wse-claro-1) 0%,var(--wse-papel) 100%);
  background-size:cover, auto;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
}
/* o veu: papel da casa, denso no meio para o texto pousar */
/*
 * A foto do fundo entra com um desfoque leve e um pouco dessaturada.
 * Ela e AMBIENTE: se ela disputa a atencao com a marca e com a frase,
 * a dobra passa a ter dois assuntos e nenhum deles vence.
 */
.wsb-portal::before{
  content:''; position:absolute; inset:-14px; z-index:0; pointer-events:none;
  background:inherit; background-attachment:scroll;
  filter:blur(3px) saturate(.82);
}
.wsb-portal-veu{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    var(--wse-textura),
    radial-gradient(ellipse 58% 54% at 50% 46%, rgba(var(--wse-rgb-papel),.95) 0%, rgba(var(--wse-rgb-papel),.78) 56%, rgba(var(--wse-rgb-papel),.34) 100%),
    linear-gradient(180deg, rgba(var(--wse-rgb-cartao),.52) 0%, rgba(var(--wse-rgb-papel),.44) 45%, rgba(var(--wse-rgb-papel),.86) 100%);
  background-size:150% auto, auto, auto;
  background-position:center top, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
.wsb-portal-inner{
  position:relative; z-index:2;
  max-width:760px;
  display:flex; flex-direction:column; align-items:center;
}

.wsb-portal-marca{
  display:block;
  width:min(340px, 74vw);
  aspect-ratio:var(--wse-marca-prop, 1);
  background:var(--wse-logo) center/contain no-repeat;
  margin-bottom:26px;
}
.wsb-portal-rotulo{
  font-family:var(--wse-fonte-corpo,'Montserrat',Arial,sans-serif);
  font-size:.7rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--wse-ouro-txt); margin:0 0 16px;
}
.wsb-portal-titulo{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-weight:500; font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.22;
  color:var(--wse-tinta); margin:0 0 14px; max-width:18ch;
}
.wsb-portal-titulo .wse-au{ color:var(--wse-ouro-txt); font-style:italic; }
.wsb-portal-sub{
  font-size:1.04rem; font-weight:300; line-height:1.7;
  color:var(--wse-suave-2); margin:0; max-width:42ch;
}

/* o filete com o simbolo da casa no meio */
.wsb-portal-filete{
  display:block; width:210px; height:26px; margin:30px 0 22px;
  background:
    var(--wse-simbolo) center/24px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(var(--wse-rgb-ouro),.55) 18%, rgba(var(--wse-rgb-ouro),.55) 38%, transparent 40%, transparent 60%, rgba(var(--wse-rgb-ouro),.55) 62%, rgba(var(--wse-rgb-ouro),.55) 82%, transparent 100%) center/100% 1px no-repeat;
}

.wsb-portal-end{
  font-size:.92rem; font-weight:300; line-height:1.7;
  color:var(--wse-suave-2); margin:0 0 26px; max-width:44ch;
}
.wsb-portal-btns{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.wsb-portal-redes{ display:flex; gap:12px; margin-top:26px; }
.wsb-portal-rede{
  width:42px; height:42px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(var(--wse-rgb-cartao),.9);
  border:1px solid rgba(var(--wse-rgb-ouro),.34);
  transition:transform .2s ease, border-color .2s ease;
}
.wsb-portal-rede:hover{ transform:translateY(-2px); border-color:rgba(var(--wse-rgb-ouro),.7); }
.wsb-portal-rede .wsb-acao-ico{ width:20px; height:20px; background:none; }
.wsb-portal-rede .wsb-acao-ico::before{ background:var(--wse-ouro-txt); width:18px; height:18px; }

@media(max-width:640px){
  .wsb-portal{ padding:62px 0 58px; }
  .wsb-portal-marca{ width:min(240px, 66vw); margin-bottom:20px; }
  .wsb-portal-filete{ width:170px; margin:24px 0 18px; }
  .wsb-portal-btns{ width:100%; }
  .wsb-portal-btns .wsep-botao{ flex:1 1 auto; text-align:center; }
}

/* ---------- PORTAL COM RETRATO AO LADO ----------
   Sem foto no fundo, sem veu: fundo limpo, texto encostado a esquerda
   e o retrato do lado. Quando a foto e a pessoa que atende, ela e o
   assunto da dobra — poe-la atras de um degrade seria escondê-la.

   No celular a coluna vira uma so, e o retrato entra ENTRE a frase e
   os botoes: quem chega ve o texto, ve o rosto e ja tem o botao na
   mao, sem precisar rolar tres telas. */
.wsb-portal--lado{
  padding:70px 0 66px;
  text-align:left;
  background:#fff;
}
.wsb-portal--lado::before{ content:none; }

.wsb-portal-duo{
  position:relative; z-index:2;
  max-width:1140px;
  display:grid;
  grid-template-columns:1fr;
  grid-template-areas:"txt" "foto" "pe";
  gap:22px 54px;
  align-items:center;
}
.wsb-portal-txt{ grid-area:txt; display:flex; flex-direction:column; align-items:flex-start; }
.wsb-portal-pe { grid-area:pe;  display:flex; flex-direction:column; align-items:flex-start; }

/*
 * A moldura acompanha a foto, nao a coluna. Esticada ate a altura do
 * texto ela sobrava fundo vazio embaixo do retrato — a moldura ficava
 * maior que a pessoa dentro dela.
 */
.wsb-portal-foto{
  grid-area:foto; margin:0; align-self:center;
  border-radius:18px; overflow:hidden;
  background:var(--wse-claro-1);
  box-shadow:0 18px 44px rgba(var(--wse-rgb-tinta),.10);
}
.wsb-portal-foto img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover; object-position:center 18%;
}

/* o filete centralizado nao serve numa coluna encostada a esquerda */
.wsb-portal--lado .wsb-portal-filete{
  width:180px; height:22px; margin:24px 0 16px;
  background:
    var(--wse-simbolo) left center/20px no-repeat,
    linear-gradient(90deg, rgba(var(--wse-rgb-ouro),.6) 0%, rgba(var(--wse-rgb-ouro),.08) 100%) 32px center/148px 1px no-repeat;
}
.wsb-portal--lado .wsb-portal-titulo{ max-width:14ch; margin-bottom:16px; }
.wsb-portal--lado .wsb-portal-sub{ max-width:38ch; }
.wsb-portal--lado .wsb-portal-end{ max-width:38ch; margin-bottom:22px; }
.wsb-portal--lado .wsb-portal-btns{ justify-content:flex-start; }
.wsb-portal--lado .wsb-portal-redes{ margin-top:20px; }
/* a marca aqui divide a coluna com o titulo: grande demais, ela empurra
   os botoes para fora da primeira tela */
.wsb-portal--lado .wsb-portal-marca{ width:min(230px, 58vw); margin-bottom:18px; }

@media(min-width:900px){
  .wsb-portal--lado{ padding:64px 0 60px; }
  .wsb-portal-duo{
    grid-template-columns:1.06fr .74fr;
    grid-template-areas:"txt foto" "pe foto";
    gap:0 64px;
  }
  .wsb-portal-txt{ align-self:end; }
  .wsb-portal-pe { align-self:start; }
}
@media(max-width:640px){
  .wsb-portal--lado{ padding:54px 0 52px; }
  .wsb-portal-duo{ gap:20px; }
  .wsb-portal-foto img{ aspect-ratio:1/1; }
  .wsb-portal--lado .wsb-portal-btns{ width:100%; }
}

/* ---------- retrato recortado, sem moldura ----------
   O mesmo tratamento do hero das paginas internas: a pessoa apoiada na
   base da faixa, com sombra projetada seguindo o contorno dela. Moldura
   e recorte nao combinam — a moldura pede um retangulo para preencher,
   e o recorte justamente nao tem um. */
.wsb-portal-foto--recorte{
  background:none; box-shadow:none;
  border-radius:0; overflow:visible;
  align-self:end;
}
.wsb-portal-foto--recorte img{
  aspect-ratio:auto; object-fit:contain;
  max-height:none;
  filter:drop-shadow(0 24px 40px rgba(var(--wse-rgb-tinta),.22));
}
/* sem espaco embaixo: o recorte encosta no fim da faixa */
@media(min-width:900px){
  .wsb-portal--recorte{ padding-bottom:0; }
  .wsb-portal--recorte .wsb-portal-duo{ align-items:end; }
  .wsb-portal--recorte .wsb-portal-txt,
  .wsb-portal--recorte .wsb-portal-pe{ padding-bottom:18px; }
  .wsb-portal--recorte .wsb-portal-foto--recorte img{ max-height:520px; }
}
@media(max-width:899px){
  /* no celular ele fica no meio da coluna, e ai a sombra embaixo do
     recorte encosta no texto seguinte se nao houver folga */
  .wsb-portal-foto--recorte img{ max-height:420px; margin:0 auto; width:auto; max-width:100%; }
}

/* ---------- lista dentro da prosa ----------
   Especialidades, itens inclusos, o que for. O marcador e o losango
   dourado da casa, do mesmo tamanho do que abre os cartoes — assim a
   lista pertence ao site, e nao ao editor de texto de onde ela veio. */
.wse-lista{
  list-style:none; margin:0 0 18px; padding:0;
  display:grid; gap:9px;
}
.wse-lista li{
  position:relative; padding-left:20px;
  font-size:.98rem; line-height:1.7; font-weight:300;
  color:var(--wse-suave-2);
}
.wse-lista li::before{
  content:''; position:absolute; left:2px; top:.62em;
  width:7px; height:7px; transform:rotate(45deg);
  background:var(--wse-ouro); opacity:.9;
}
.wsb-sobre-grade--so-texto .wse-lista{ max-width:520px; margin-left:auto; margin-right:auto; text-align:left; }
@media(min-width:760px){
  /* sete especialidades em coluna unica fazem a secao esticar sem
     necessidade; em duas colunas elas cabem ao lado das fotos */
  .wse-lista{ grid-template-columns:1fr 1fr; gap:9px 22px; }
}

/* NOTA: o bloco do titulo em caixa alta mora no rodape.css, que entra em
   TODAS as paginas. Aqui ele so valia na home — e o hero das internas
   ficava com o titulo gigante em caixa baixa. */



/* ==================================================================
   A CONSULTA

   Tres partes numa faixa so: o texto do que esperar, os passos de
   preparo numerados ao lado, e embaixo os cuidados que a casa prepara.

   No computador texto e passos ficam lado a lado — sao leituras
   diferentes (uma corrida, outra em lista) e uma embaixo da outra
   viraria uma parede. No celular empilham, com os passos primeiro
   depois do texto.
   ================================================================== */

.wsb-consulta{ background:var(--wse-papel); }

.wsb-cons-duo{
  display:grid; grid-template-columns:1fr; gap:34px;
  max-width:1080px; margin:0 auto;
}
.wsb-cons-texto p{ margin:0 0 16px; }
.wsb-cons-texto p:last-child{ margin-bottom:0; }

/* ---------- os passos ---------- */
.wsb-cons-passos{
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.28);
  border-radius:16px;
  padding:26px 26px 22px;
}
.wsb-cons-rotulo{
  display:block; text-transform:uppercase; letter-spacing:.22em;
  font-size:.66rem; font-weight:600; color:var(--wse-ouro-txt);
  margin-bottom:16px;
}
.wsb-cons-lista{ list-style:none; margin:0; padding:0; }
.wsb-cons-lista li{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  padding:13px 0;
  border-top:1px solid rgba(var(--wse-rgb-ouro),.20);
}
.wsb-cons-lista li:first-child{ border-top:0; padding-top:0; }
.wsb-cons-num{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:1.1rem; font-weight:600; line-height:1.2;
  color:var(--wse-ouro); min-width:2ch;
}
/*
 * Titulo do passo: so o <strong> filho direto do <div> do item. Sem o
 * ">", qualquer negrito escrito no meio do texto virava um bloco e
 * quebrava a frase em tres linhas.
 */
.wsb-cons-lista li > div > strong{
  display:block; font-size:.98rem; font-weight:600;
  color:var(--wse-tinta); margin-bottom:3px;
}
.wsb-cons-lista li > div > span{
  display:block; font-size:.92rem; font-weight:300; line-height:1.65;
  color:var(--wse-suave-2);
}
.wsb-cons-lista li > div > span strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-cons-lista li > div > span em{ font-style:italic; color:var(--wse-ouro-txt); }

/* ---------- os cuidados ---------- */
.wsb-cons-mimos{ margin-top:52px; }
.wsb-cons-mimos-tit{
  text-align:center; margin:0 0 26px;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-weight:500; font-size:clamp(1.25rem,2.2vw,1.6rem);
  color:var(--wse-tinta);
}
.wsb-cons-grade{
  display:grid; grid-template-columns:1fr; gap:20px;
  max-width:1080px; margin:0 auto;
}
.wsb-cons-card{
  background:var(--wse-cartao);
  border-radius:16px; overflow:hidden;
  box-shadow:0 10px 26px rgba(var(--wse-rgb-tinta),.07);
  display:flex; flex-direction:column;
}
.wsb-cons-foto{ position:relative; }
/*
 * O espacador quadrado segura a altura da moldura ANTES de a foto
 * carregar. Sem ele a fileira pula quando as imagens chegam, e no
 * mosaico dos pacotes isso ja tinha cortado cabeca de gente.
 */
.wsb-cons-foto::before{ content:''; display:block; padding-top:72%; }
.wsb-cons-foto img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
.wsb-cons-card-txt{ padding:18px 20px 22px; }
.wsb-cons-card-txt strong{
  display:block; font-size:1rem; font-weight:600;
  color:var(--wse-tinta); margin-bottom:6px;
}
.wsb-cons-card-txt p{
  margin:0; font-size:.92rem; font-weight:300; line-height:1.65;
  color:var(--wse-suave-2);
}

@media(min-width:860px){
  .wsb-cons-duo{ grid-template-columns:1.06fr .94fr; gap:48px; align-items:start; }
  .wsb-cons-grade{ grid-template-columns:repeat(3, 1fr); gap:24px; }
  .wsb-cons-passos{ padding:30px 30px 26px; }
}


/* ==================================================================
   SERVICOS EM PLACAS (ws_kit_services_estilo = joia)

   Cartao pequeno, sem foto, com o simbolo da casa pequeno no alto e o
   nome do procedimento em caixa alta. O fundo alterna entre TRES tons
   que ja existem na identidade — o claro do cartao, o do papel e a cor
   da marca — para uma fileira de vinte itens nao virar uma parede de
   retangulos iguais.

   Por que caixa alta pequena e nao a serifada grande: nome de
   procedimento e etiqueta, nao titulo. Em corpo grande ele compete com
   o titulo da secao; pequeno e espacado ele se comporta como indice.
   ================================================================== */

.wsb-servicos--joia .wsb-card{ width:186px; }
.wsb-servicos--joia .wsb-trilho{ gap:14px; padding-top:6px; }

.wsb-servicos--joia .wsb-card-link{
  height:126px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:16px 16px 15px;
  border-radius:14px;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.30);
  box-shadow:none; position:relative; overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/*
 * O simbolo. Ele estava a 24px e com 55% de opacidade, e o traco desta
 * marca e fino: nesse tamanho as folhas da lotus sumiam e sobrava uma
 * mancha. Maior e quase opaco, ele volta a ser um desenho.
 */
.wsb-servicos--joia .wsb-card-link::before{
  content:''; position:absolute; top:15px; left:0; right:0; margin:0 auto;
  /*
   * A largura acompanha a proporcao do arquivo. Num simbolo quadrado
   * nada muda; num grafismo largo e baixo — um traco, uma assinatura —
   * o quadrado de 34px o espremia a uma risquinha de nada. Agora a
   * altura manda e a largura segue, com teto para nao encostar nas
   * bordas da placa.
   */
  height:34px;
  width:min(calc(34px * var(--wse-marca-prop, 1)), 78%);
  background:var(--wse-simbolo) center/contain no-repeat;
  opacity:.95;
  transition:transform .3s ease;
}
.wsb-servicos--joia a.wsb-card-link:hover::before{ transform:translateY(-2px) scale(1.06); }

/*
 * A MOLDURA INTERNA — o detalhe de papelaria.
 *
 * Um fio a seis pixels da borda, como num convite impresso. No hover
 * ele se aproxima da borda e escurece: a placa "respira" sem precisar
 * mudar de cor nem crescer, que seria o efeito barato.
 */
.wsb-servicos--joia .wsb-card-link::after{
  content:''; position:absolute; inset:6px;
  border:1px solid rgba(var(--wse-rgb-ouro),.30);
  border-radius:9px; pointer-events:none;
  transition:inset .3s ease, border-color .3s ease;
}
.wsb-servicos--joia a.wsb-card-link:hover::after{
  inset:4px; border-color:rgba(var(--wse-rgb-ouro),.68);
}

.wsb-servicos--joia a.wsb-card-link:hover{
  transform:translateY(-4px);
  border-color:rgba(var(--wse-rgb-ouro),.75);
  box-shadow:0 14px 28px rgba(var(--wse-rgb-tinta),.13);
}

.wsb-servicos--joia .wsb-card-foto{ display:none; }

/*
 * O BRILHO QUE ATRAVESSA.
 *
 * O elemento do veu ja existe no HTML de todo cartao; aqui ele deixa de
 * ser um veu e vira a luz que corre pela placa no hover — o reflexo de
 * uma superficie acetinada. Sai da esquerda e some na direita, uma vez
 * so, devagar. Enfeite que pisca vira propaganda; este passa e acaba.
 */
.wsb-servicos--joia .wsb-card-veu{
  display:block; position:absolute; inset:0; z-index:1;
  pointer-events:none; border-radius:inherit;
  background:linear-gradient(112deg,
      rgba(255,255,255,0) 30%,
      rgba(255,255,255,.62) 50%,
      rgba(255,255,255,0) 70%);
  transform:translateX(-130%);
  transition:transform 1.05s cubic-bezier(.28,.55,.35,1);
}
.wsb-servicos--joia a.wsb-card-link:hover .wsb-card-veu{ transform:translateX(130%); }
/* na placa da cor da marca o brilho e mais discreto: sobre fundo escuro
   o mesmo branco vira um claro chapado */
.wsb-servicos--joia .wsb-card:nth-child(3n) .wsb-card-veu{
  background:linear-gradient(112deg,
      rgba(255,255,255,0) 36%,
      rgba(255,255,255,.30) 50%,
      rgba(255,255,255,0) 64%);
}

@media(prefers-reduced-motion:reduce){
  .wsb-servicos--joia .wsb-card-veu{ display:none; }
  .wsb-servicos--joia a.wsb-card-link:hover{ transform:none; }
  .wsb-servicos--joia a.wsb-card-link:hover::before{ transform:none; }
}

.wsb-servicos--joia .wsb-card-txt{
  position:relative; z-index:2;      /* acima do brilho que atravessa */
  padding:0; gap:9px; justify-content:flex-end;
}
.wsb-servicos--joia .wsb-card-nome{
  font-family:var(--wse-fonte-corpo,'Lato',Arial,sans-serif);
  font-size:.74rem; font-weight:700; line-height:1.38;
  text-transform:uppercase; letter-spacing:.07em;
  color:var(--wse-tinta); text-shadow:none;
}
.wsb-servicos--joia .wsb-card-cta{
  background:none; border:0; padding:0;
  color:var(--wse-ouro-txt);
  font-size:.56rem; letter-spacing:.2em;
  opacity:0; transform:translateY(-3px);
  transition:opacity .22s ease, transform .22s ease;
}
.wsb-servicos--joia a.wsb-card-link:hover .wsb-card-cta{ opacity:1; transform:none; }

/* ---------- os tres tons da identidade ---------- */
.wsb-servicos--joia .wsb-card:nth-child(3n+2) .wsb-card-link{
  background:var(--wse-papel);
}
.wsb-servicos--joia .wsb-card:nth-child(3n) .wsb-card-link{
  background:var(--wse-ouro);
  border-color:transparent;
}
/* na placa da cor da marca o texto vira claro, senao ele some */
.wsb-servicos--joia .wsb-card:nth-child(3n) .wsb-card-nome{ color:#fff; }
.wsb-servicos--joia .wsb-card:nth-child(3n) .wsb-card-cta{ color:rgba(255,255,255,.92); }
/* a moldura interna dourada sobre fundo dourado nao existe: vira clara */
.wsb-servicos--joia .wsb-card:nth-child(3n) .wsb-card-link::after{
  border-color:rgba(255,255,255,.45);
}
.wsb-servicos--joia .wsb-card:nth-child(3n) a.wsb-card-link:hover::after{
  border-color:rgba(255,255,255,.8);
}
.wsb-servicos--joia .wsb-card:nth-child(3n) .wsb-card-link::before{
  /* o simbolo dourado sobre dourado nao aparece: aqui ele vira branco */
  background:none;
  -webkit-mask:var(--wse-simbolo) center/contain no-repeat;
          mask:var(--wse-simbolo) center/contain no-repeat;
  background-color:#fff;
  opacity:.96;
}
.wsb-servicos--joia .wsb-card:nth-child(3n) a.wsb-card-link:hover{
  border-color:rgba(var(--wse-rgb-tinta),.25);
}

.wsb-servicos--joia .wsb-seta{ width:38px; height:38px; font-size:.9rem; }

@media(max-width:520px){
  .wsb-servicos--joia .wsb-card{ width:48vw; max-width:176px; }
  .wsb-servicos--joia .wsb-card-link{ height:120px; }
  .wsb-servicos--joia .wsb-card-cta{ opacity:1; transform:none; }
}


/* ==================================================================
   SOBRE: LINHA DE FORMACAO E CREDENCIAIS
   ================================================================== */

.wsb-sobre-papel{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-style:italic; font-size:1.14rem; line-height:1.4;
  color:var(--wse-ouro-txt);
  margin:-6px 0 20px;
}

/*
 * As credenciais em duas colunas. Cada uma e um par: o que ela e, e
 * onde isso foi feito. O fio dourado a esquerda amarra a coluna sem
 * precisar de caixa — caixa em volta de seis itens vira tabela, e
 * tabela num site de estetica parece formulario.
 */
.wsb-sobre-creds{
  list-style:none; margin:26px 0 4px; padding:0;
  display:grid; grid-template-columns:1fr; gap:14px 26px;
}
.wsb-sobre-creds li{
  padding-left:14px; position:relative;
  border-left:1px solid rgba(var(--wse-rgb-ouro),.45);
}
.wsb-sobre-creds strong{
  display:block;
  font-size:.94rem; font-weight:600; line-height:1.3;
  color:var(--wse-tinta);
}
.wsb-sobre-creds span{
  display:block; margin-top:2px;
  font-size:.78rem; font-weight:300; line-height:1.45;
  letter-spacing:.02em;
  color:var(--wse-suave-2);
}
@media(min-width:600px){
  .wsb-sobre-creds{ grid-template-columns:1fr 1fr; }
}


/* ==================================================================
   VOCE SE IDENTIFICA?

   A lista de sinais e o coracao da secao. Ela nao e decoracao: cada
   linha e uma frase que a pessoa ja disse para si mesma, e o tique
   dourado marca o reconhecimento.
   ================================================================== */

.wsb-identifica{ background:var(--wse-cartao); }

.wsb-ident-intro{
  max-width:56ch; margin:-16px auto 34px; text-align:center;
  font-size:1.04rem; line-height:1.8; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-ident-intro strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-ident-intro em{ font-style:italic; color:var(--wse-ouro-txt); }

.wsb-ident-duo{
  display:grid; grid-template-columns:1fr; gap:32px;
  max-width:1080px; margin:0 auto; align-items:center;
}

/* ---------- a lista de sinais ---------- */
.wsb-ident-lista{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
/*
 * O cartao carrega a cor de apoio da marca, nao um cinza claro. O fundo
 * e uma lavagem do tom secundario com o dourado por cima, e a barra da
 * esquerda e a cor da marca — assim a fileira tem cor propria mesmo
 * parada, sem depender do hover para existir.
 */
.wsb-ident-lista li{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start;
  background:
    linear-gradient(103deg,
      rgba(var(--wse-rgb-suave),.20) 0%,
      rgba(var(--wse-rgb-ouro),.13) 100%),
    var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.34);
  border-left:3px solid var(--wse-acento-med);
  border-radius:13px;
  padding:14px 16px;
  font-size:.97rem; line-height:1.5; font-weight:500;
  color:var(--wse-tinta);
  transition:border-color .22s ease, transform .22s ease,
             box-shadow .22s ease, background .22s ease;
}
.wsb-ident-lista li:hover{
  background:
    linear-gradient(103deg,
      rgba(var(--wse-rgb-suave),.34) 0%,
      rgba(var(--wse-rgb-ouro),.22) 100%),
    var(--wse-cartao);
  border-color:rgba(var(--wse-rgb-ouro),.7);
  border-left-color:var(--wse-ouro);
  transform:translateX(4px);
  box-shadow:0 10px 22px rgba(var(--wse-rgb-tinta),.10);
}
/* o tique fica na cor da marca, com o risco em creme: sobre o cartao
   colorido um tique dourado claro se perderia */
.wsb-ident-tique{
  flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  border-radius:50%;
  background:var(--wse-acento-med);
  position:relative;
  transition:background .22s ease;
}
.wsb-ident-lista li:hover .wsb-ident-tique{ background:var(--wse-ouro-txt); }
.wsb-ident-tique::before{
  content:''; position:absolute; inset:0; margin:auto;
  width:14px; height:14px;
  background:var(--wse-papel);
  -webkit-mask:var(--wse-svg-check) center/contain no-repeat;
          mask:var(--wse-svg-check) center/contain no-repeat;
}

/* ---------- os casos antes e depois ---------- */
.wsb-ident-casos{ display:grid; gap:20px; }
.wsb-ident-caso{ margin:0; }
.wsb-ident-par{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  background:var(--wse-papel);
  border:1px solid rgba(var(--wse-rgb-ouro),.26);
  border-radius:16px; padding:8px;
}
.wsb-ident-lado{ position:relative; border-radius:11px; overflow:hidden; }
.wsb-ident-lado::before{ content:''; display:block; padding-top:118%; }
.wsb-ident-lado img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.wsb-ident-rotulo{
  position:absolute; left:8px; bottom:8px;
  background:rgba(var(--wse-rgb-tinta),.72);
  color:#fff; border-radius:999px;
  padding:4px 11px;
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.wsb-ident-caso figcaption{
  margin-top:9px; text-align:center;
  font-size:.84rem; font-weight:300; color:var(--wse-suave-2);
}

/* ---------- a nota do fim ---------- */
.wsb-ident-nota{
  max-width:820px; margin:40px auto 0;
  background:var(--wse-papel);
  border-left:3px solid var(--wse-ouro);
  border-radius:0 14px 14px 0;
  padding:22px 26px;
}
/*
 * So o strong FILHO DIRETO da nota e o titulo dela. Sem o ">", o
 * negrito de dentro do paragrafo virava bloco e partia a frase em tres
 * pedacos — "...esse quadro" / "tem diagnostico e tratamento" / ". A
 * Marcela pode ajudar".
 */
.wsb-ident-nota > strong{
  display:block; margin-bottom:8px;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:1.22rem; font-weight:600; line-height:1.3;
  color:var(--wse-tinta);
}
.wsb-ident-nota p strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-ident-nota p em{ font-style:italic; color:var(--wse-ouro-txt); }
.wsb-ident-nota p{
  margin:0; font-size:.96rem; line-height:1.8; font-weight:300;
  color:var(--wse-suave-2);
}

@media(min-width:900px){
  .wsb-ident-duo{ grid-template-columns:.92fr 1.08fr; gap:44px; }
  .wsb-ident-casos{ grid-template-columns:1fr; }
  /*
   * Sem os casos, quem se divide em duas colunas e a LISTA, nao o
   * container: dividir o container deixaria a lista de um lado e meia
   * secao vazia do outro.
   */
  .wsb-ident-duo--so-lista{ grid-template-columns:1fr; }
  .wsb-ident-duo--so-lista .wsb-ident-lista{ grid-template-columns:1fr 1fr; gap:12px 18px; }
}


/* ==================================================================
   TRATAMENTOS

   Duas formas na mesma faixa: um cartao grande para o protocolo da
   casa, e etiquetas pequenas para as condicoes tratadas. Peso visual
   diferente porque o peso da informacao e diferente.
   ================================================================== */

.wsb-trat{ background:var(--wse-papel); }

.wsb-trat-intro{
  max-width:60ch; margin:-16px auto 38px; text-align:center;
  font-size:1.04rem; line-height:1.8; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-trat-intro strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-trat-intro em{ font-style:italic; color:var(--wse-ouro-txt); }

/* ---------- o cartao do protocolo ---------- */
.wsb-trat-destaque{
  max-width:1060px; margin:0 auto;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.34);
  border-radius:20px;
  padding:30px 28px 32px;
  box-shadow:0 18px 40px rgba(var(--wse-rgb-tinta),.07);
  position:relative; overflow:hidden;
}
/* o simbolo da casa, grande e quase invisivel, no canto */
.wsb-trat-destaque::before{
  content:''; position:absolute; top:-30px; right:-26px;
  width:190px; height:190px;
  background:var(--wse-simbolo) center/contain no-repeat;
  opacity:.07; pointer-events:none;
}
.wsb-trat-cabeca{ position:relative; z-index:1; margin-bottom:22px; }
.wsb-trat-rotulo{
  display:inline-block; margin-bottom:12px;
  padding:6px 14px; border-radius:999px;
  background:rgba(var(--wse-rgb-ouro),.16);
  border:1px solid rgba(var(--wse-rgb-ouro),.4);
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--wse-ouro-txt);
}
.wsb-trat-nome{
  margin:0;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-weight:600; font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.15;
  color:var(--wse-tinta);
}
.wsb-trat-nome-sub{
  margin:4px 0 0;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-style:italic; font-size:1.1rem;
  color:var(--wse-ouro-txt);
}

.wsb-trat-corpo{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:26px;
}
.wsb-trat-texto p{ margin:0 0 14px; }
.wsb-trat-texto p:last-child{ margin-bottom:0; }

.wsb-trat-rotulo-mini{
  display:block; margin-bottom:10px;
  font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--wse-ouro-txt);
}
.wsb-trat-quem{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:8px; }
.wsb-trat-quem li{
  position:relative; padding-left:18px;
  font-size:.95rem; line-height:1.5; color:var(--wse-tinta); font-weight:400;
}
.wsb-trat-quem li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:7px; height:7px; transform:rotate(45deg);
  background:var(--wse-ouro);
}
.wsb-trat-objetivo{
  background:var(--wse-papel);
  border-left:3px solid var(--wse-ouro);
  border-radius:0 12px 12px 0;
  padding:16px 18px;
}
.wsb-trat-objetivo p{
  margin:0; font-size:.94rem; line-height:1.7; font-weight:300;
  color:var(--wse-suave-2);
}

/* ---------- as etiquetas das especialidades ---------- */
.wsb-trat-esps{ max-width:1060px; margin:44px auto 0; text-align:center; }
.wsb-trat-esp-tit{
  margin:0 0 8px;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-weight:500; font-size:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--wse-tinta);
}
.wsb-trat-esp-intro{
  max-width:54ch; margin:0 auto 24px;
  font-size:.98rem; line-height:1.75; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-trat-grade{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.wsb-trat-grade li{ display:block; }
.wsb-trat-grade li > *,
.wsb-trat-grade li{
  font-size:.85rem; line-height:1.3;
}
.wsb-trat-grade a,
.wsb-trat-grade li{
  color:var(--wse-tinta); text-decoration:none;
}
.wsb-trat-grade a{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px; border-radius:999px;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.32);
  transition:border-color .22s ease, transform .22s ease,
             box-shadow .22s ease, background .22s ease;
}
.wsb-trat-grade a:hover{
  background:#fff;
  border-color:rgba(var(--wse-rgb-ouro),.8);
  transform:translateY(-2px);
  box-shadow:0 9px 20px rgba(var(--wse-rgb-tinta),.09);
}
.wsb-trat-losango{
  width:7px; height:7px; flex:0 0 auto;
  transform:rotate(45deg);
  background:var(--wse-ouro);
}

@media(min-width:900px){
  .wsb-trat-destaque{ padding:36px 38px 38px; }
  .wsb-trat-corpo{ grid-template-columns:1.15fr .85fr; gap:40px; }
  .wsb-trat-lado{
    border-left:1px solid rgba(var(--wse-rgb-ouro),.28);
    padding-left:34px;
  }
}


/* ==================================================================
   FAIXA ESCURA (ws_kit_secoes_escuras)

   A secao inteira passa para o verde profundo da marca, com o texto em
   creme. Nada aqui e cor cravada: tudo sai de --wse-escuro e da familia
   do ouro, entao a mesma faixa serve para uma marca verde, vinho ou
   marinho sem tocar no CSS.

   O que muda: o fundo, a tinta, as bordas e o peso do dourado. Sobre
   creme o dourado escurecido le melhor; sobre verde profundo quem le e
   o dourado CHEIO — o escurecido some.
   ================================================================== */

.wsb--escura{
  background:linear-gradient(165deg,
      var(--wse-escuro) 0%,
      var(--wse-escuro-2) 100%) !important;
  color:var(--wse-papel);
  position:relative; overflow:hidden;
}
/* o simbolo da casa, grande e discreto, atras de tudo */
.wsb--escura::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  top:-90px; left:-70px; width:420px; height:420px;
  background:var(--wse-simbolo) center/contain no-repeat;
  opacity:.05;
}
.wsb--escura > .wsb-inner{ position:relative; z-index:1; }

.wsb--escura .wsb-titulo,
.wsb--escura .wsb-trat-nome,
.wsb--escura .wsb-trat-esp-tit,
.wsb--escura .wsb-ident-nota > strong{ color:var(--wse-papel); }

.wsb--escura .wsb-kicker,
.wsb--escura .wsb-trat-rotulo-mini,
.wsb--escura .wsb-trat-nome-sub,
.wsb--escura .wse-au{ color:var(--wse-ouro-cla) !important; }

.wsb--escura .wsb-prosa,
.wsb--escura .wsb-trat-intro,
.wsb--escura .wsb-trat-esp-intro,
.wsb--escura .wsb-ident-intro,
.wsb--escura .wsb-trat-objetivo p,
.wsb--escura p{ color:rgba(var(--wse-rgb-papel),.82); }

.wsb--escura .wsb-prosa strong,
.wsb--escura .wsb-trat-intro strong,
.wsb--escura .wsb-trat-objetivo p strong,
.wsb--escura .wsb-trat-quem li{ color:var(--wse-papel); }
.wsb--escura .wsb-prosa em,
.wsb--escura .wsb-trat-intro em{ color:var(--wse-ouro-cla); }

/* o filete de losango do titulo */
.wsb--escura .wsb-titulo::after{ background:var(--wse-ouro-cla); opacity:.85; }

/* ---------- as pecas de dentro ---------- */
.wsb--escura .wsb-trat-destaque,
.wsb--escura .wsb-ident-lista li,
.wsb--escura .wsb-trat-grade a{
  background:rgba(255,255,255,.055);
  border-color:rgba(var(--wse-rgb-ouro),.42);
  box-shadow:none;
}
.wsb--escura .wsb-trat-grade a{ color:var(--wse-papel); }
.wsb--escura .wsb-trat-grade a:hover{
  background:rgba(255,255,255,.13);
  border-color:var(--wse-ouro-cla);
  box-shadow:none;
}
.wsb--escura .wsb-trat-rotulo{
  background:rgba(var(--wse-rgb-ouro),.24);
  border-color:rgba(var(--wse-rgb-ouro),.55);
  color:var(--wse-ouro-cla);
}
.wsb--escura .wsb-trat-objetivo,
.wsb--escura .wsb-ident-nota{
  background:rgba(0,0,0,.16);
  border-left-color:var(--wse-ouro-cla);
}
.wsb--escura .wsb-trat-quem li::before,
.wsb--escura .wsb-trat-losango{ background:var(--wse-ouro-cla); }
.wsb--escura .wsb-trat-lado{ border-left-color:rgba(var(--wse-rgb-ouro),.34); }
.wsb--escura .wsb-ident-tique{ background:rgba(var(--wse-rgb-ouro),.24); }
.wsb--escura .wsb-ident-tique::before{ background:var(--wse-ouro-cla); }
.wsb--escura .wsb-trat-destaque::before{ opacity:.10; }

/* o botao cheio some no fundo escuro: aqui ele vira dourado */
.wsb--escura .wsep-botao{
  background:linear-gradient(135deg,var(--wse-ouro),var(--wse-ouro-txt));
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.wsb--escura .wsep-botao--linha{
  background:transparent; color:var(--wse-papel) !important;
  border-color:rgba(var(--wse-rgb-papel),.6);
}
.wsb--escura .wsep-botao--linha:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--wse-papel);
}

/* setas do carrossel e cartoes de servico dentro da faixa */
.wsb--escura .wsb-seta{
  background:rgba(255,255,255,.08);
  border-color:rgba(var(--wse-rgb-ouro),.45);
  color:var(--wse-ouro-cla);
}

/* ---------- os horarios dentro da faixa escura ----------
   As linhas da semana usam os tons suaves, que foram calculados para
   ler sobre creme. Sobre verde profundo eles somem: o dia da semana
   ficava quase invisivel. Aqui a familia inteira sobe de contraste. */
.wsb--escura .wsb-dia{ border-bottom-color:rgba(var(--wse-rgb-papel),.16); }
.wsb--escura .wsb-dia-nome{ color:rgba(var(--wse-rgb-papel),.9); }
.wsb--escura .wsb-dia-hora{ color:var(--wse-papel); }
.wsb--escura .wsb-dia--fechado .wsb-dia-nome{ color:rgba(var(--wse-rgb-papel),.55); }
.wsb--escura .wsb-dia--fechado .wsb-dia-hora{ color:rgba(var(--wse-rgb-papel),.55); }
.wsb--escura .wsb-dia--hoje{ background:rgba(255,255,255,.07); }
.wsb--escura .wsb-dia--hoje::before{ background:var(--wse-ouro-cla); }
.wsb--escura .wsb-dia--hoje .wsb-dia-nome{ color:var(--wse-papel); }
.wsb--escura .wsb-dia-hoje{
  background:var(--wse-ouro-cla); color:var(--wse-escuro);
}
.wsb--escura .wsb-semana-nota{ color:rgba(var(--wse-rgb-papel),.72); }
.wsb--escura .wsb-hor-end{ color:rgba(var(--wse-rgb-papel),.82); }

/* os cartoes de atalho (Como chegar, Instagram, Blog...) */
.wsb--escura .wsb-acao{
  background:rgba(255,255,255,.06);
  border-color:rgba(var(--wse-rgb-ouro),.34);
}
.wsb--escura .wsb-acao:hover{
  background:rgba(255,255,255,.13);
  border-color:var(--wse-ouro-cla);
}
.wsb--escura .wsb-acao-txt strong{ color:var(--wse-papel); }
.wsb--escura .wsb-acao-txt span{ color:rgba(var(--wse-rgb-papel),.68); }
.wsb--escura .wsb-acao-seta{ color:var(--wse-ouro-cla); }
.wsb--escura .wsb-acao-ico{ background:rgba(var(--wse-rgb-ouro),.2); }
.wsb--escura .wsb-acao-ico::before{ background:var(--wse-ouro-cla); }
/* o cartao de destaque (WhatsApp) ja e escuro: sobre verde ele precisa
   virar dourado para nao sumir dentro da faixa */
.wsb--escura .wsb-acao--destaque{
  background:linear-gradient(135deg,var(--wse-ouro),var(--wse-ouro-txt));
  border-color:transparent;
}
.wsb--escura .wsb-acao--destaque .wsb-acao-txt strong,
.wsb--escura .wsb-acao--destaque .wsb-acao-seta{ color:#fff; }
.wsb--escura .wsb-acao--destaque .wsb-acao-txt span{ color:rgba(255,255,255,.8); }
.wsb--escura .wsb-acao--destaque .wsb-acao-ico{ background:rgba(255,255,255,.22); }
.wsb--escura .wsb-acao--destaque .wsb-acao-ico::before{ background:#fff; }

/* dentro da faixa escura o mesmo cartao inverte: a lavagem clara sai e
   entra o vidro sobre o verde */
.wsb--escura .wsb-ident-lista li{
  background:rgba(255,255,255,.06);
  border-left-color:var(--wse-ouro);
  color:var(--wse-papel);
}
.wsb--escura .wsb-ident-lista li:hover{
  background:rgba(255,255,255,.13);
  border-color:var(--wse-ouro-cla);
}
.wsb--escura .wsb-ident-tique{ background:var(--wse-ouro-txt); }
.wsb--escura .wsb-ident-lista li:hover .wsb-ident-tique{ background:var(--wse-ouro); }


/* ==================================================================
 * MITOS E VERDADES
 * Cartoes em coluna dupla. O mito vem em aspas, meio apagado, como
 * uma frase de terceiro; a verdade vem em bloco proprio, com o selo
 * e a barra dourada, para o olho saber de imediato qual das duas
 * frases e a da casa.
 * ================================================================== */
.wsb-mitos{ background:var(--wse-papel); }

.wsb-mitos-intro{
  max-width:60ch; margin:-16px auto 40px; text-align:center;
  font-size:1.04rem; line-height:1.8; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-mitos-intro strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-mitos-intro em{ font-style:italic; color:var(--wse-ouro-txt); }

.wsb-mitos-grade{
  max-width:1060px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}

.wsb-mito{
  position:relative; overflow:hidden;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.3);
  border-radius:18px;
  padding:26px 24px 24px;
  box-shadow:0 14px 34px rgba(var(--wse-rgb-tinta),.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wsb-mito:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--wse-rgb-ouro),.7);
  box-shadow:0 22px 46px rgba(var(--wse-rgb-tinta),.11);
}
/* o numero, grande e quase transparente, so para dar ritmo */
.wsb-mito-num{
  position:absolute; top:6px; right:14px;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-size:4.2rem; font-weight:600; line-height:1;
  color:rgba(var(--wse-rgb-ouro),.14);
  pointer-events:none;
}

.wsb-mito-tit{ margin:0 0 16px; position:relative; z-index:1; }
.wsb-mito-etiqueta{
  display:inline-block; margin-bottom:9px;
  padding:5px 12px; border-radius:999px;
  background:rgba(var(--wse-rgb-tinta),.07);
  font-family:var(--wse-fonte-corpo,inherit);
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--wse-suave-2);
}
.wsb-mito-frase{
  display:block;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-style:italic; font-weight:400;
  font-size:clamp(1.18rem,2.1vw,1.45rem); line-height:1.3;
  color:var(--wse-suave-2);
}

.wsb-mito-verdade{
  position:relative; z-index:1;
  border-left:3px solid var(--wse-ouro);
  border-radius:0 12px 12px 0;
  background:var(--wse-papel);
  padding:15px 17px;
}
.wsb-mito-selo{
  display:block; margin-bottom:7px;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--wse-ouro-txt);
}
.wsb-mito-verdade p{
  margin:0; font-size:.96rem; line-height:1.75; font-weight:300;
  color:var(--wse-tinta);
}
.wsb-mito-verdade p strong{ font-weight:600; }
.wsb-mito-verdade p em{ font-style:italic; color:var(--wse-ouro-txt); }

.wsb-mito-dica{
  position:relative; z-index:1;
  margin:14px 0 0; padding-left:22px;
  font-size:.88rem; line-height:1.65; font-weight:300; font-style:italic;
  color:var(--wse-suave-2);
}
.wsb-mito-dica > span{
  position:absolute; left:0; top:.5em;
  width:8px; height:8px; transform:rotate(45deg);
  background:var(--wse-ouro);
}
.wsb-mito-dica strong{ font-weight:600; font-style:normal; color:var(--wse-tinta); }

@media (max-width:640px){
  .wsb-mito{ padding:22px 20px 20px; }
  .wsb-mito-num{ font-size:3.4rem; }
}

/* cartoes de mito alinhados: a dica sempre no pe do cartao */
.wsb-mito{ display:flex; flex-direction:column; }
.wsb-mito-dica{ margin-top:auto; padding-top:14px; }


/* ==================================================================
 * MITOS EM CARROSSEL
 * O grid virou trilho: com cinco cartoes de texto longo, a grade
 * empurrava a secao para baixo demais e a ultima linha ficava orfa.
 * ================================================================== */
.wsb-mitos-carrossel{ max-width:1060px; margin:0 auto; }
.wsb-mitos-trilho{ align-items:stretch; }
.wsb-mitos-trilho > li.wsb-mito{
  width:340px; flex:0 0 auto; scroll-snap-align:start;
}
@media(max-width:520px){
  .wsb-mitos-trilho > li.wsb-mito{ width:80vw; max-width:330px; }
}

/* ---------- os 5 passos em cartoes ---------- */
.wsb-cons-carrossel{ margin-top:14px; }
.wsb-cons-trilho{ list-style:none; margin:0; padding:0; align-items:stretch; }
.wsb-cons-cartao{
  position:relative; width:300px; flex:0 0 auto; scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.3);
  border-radius:18px;
  padding:24px 22px 22px;
  box-shadow:0 14px 34px rgba(var(--wse-rgb-tinta),.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wsb-cons-cartao:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--wse-rgb-ouro),.7);
  box-shadow:0 22px 46px rgba(var(--wse-rgb-tinta),.11);
}
.wsb-cons-cartao > .wsb-cons-num{
  display:block; margin-bottom:10px;
  font-size:2.2rem; line-height:1; color:rgba(var(--wse-rgb-ouro),.85);
}
.wsb-cons-cartao > strong{
  display:block; margin:0 0 8px;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-weight:600; font-size:1.24rem; line-height:1.25;
  color:var(--wse-tinta);
}
.wsb-cons-cartao > p{
  margin:0; font-size:.92rem; line-height:1.7; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-cons-cartao > p strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-cons-cartao > p em{ font-style:italic; color:var(--wse-ouro-txt); }
@media(max-width:520px){
  .wsb-cons-cartao{ width:80vw; max-width:320px; }
}

/* no modo carrossel o texto de abertura abre a secao inteira */
.wsb-consulta--rola .wsb-cons-duo{ display:block; }
.wsb-consulta--rola .wsb-cons-texto{
  max-width:64ch; margin:0 auto 34px; text-align:center;
}
.wsb-consulta--rola .wsb-cons-passos{ max-width:1060px; margin:0 auto; }
.wsb-consulta--rola .wsb-cons-rotulo{ display:block; text-align:center; }
@media(min-width:1000px){
  .wsb-consulta--rola .wsb-cons-grade{ grid-template-columns:repeat(5,1fr); }
}

/* ---------- os dois blocos dentro de faixa escura ---------- */
.wsb--escura .wsb-mito,
.wsb--escura .wsb-cons-cartao,
.wsb--escura .wsb-cons-card{
  background:rgba(var(--wse-rgb-papel),.06);
  border-color:rgba(var(--wse-rgb-ouro),.34);
  box-shadow:none;
}
.wsb--escura .wsb-mito:hover,
.wsb--escura .wsb-cons-cartao:hover{
  background:rgba(var(--wse-rgb-papel),.1);
  border-color:rgba(var(--wse-rgb-ouro),.72);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.wsb--escura .wsb-mito-num{ color:rgba(var(--wse-rgb-ouro),.2); }
.wsb--escura .wsb-mito-etiqueta{
  background:rgba(var(--wse-rgb-papel),.1);
  color:rgba(var(--wse-rgb-papel),.7);
}
.wsb--escura .wsb-mito-frase{ color:rgba(var(--wse-rgb-papel),.72); }
.wsb--escura .wsb-mito-verdade{
  background:rgba(0,0,0,.22);
  border-left-color:var(--wse-ouro-cla);
}
.wsb--escura .wsb-mito-selo,
.wsb--escura .wsb-cons-rotulo,
.wsb--escura .wsb-cons-cartao > .wsb-cons-num,
.wsb--escura .wsb-cons-lista .wsb-cons-num{ color:var(--wse-ouro-cla); }
.wsb--escura .wsb-mito-verdade p,
.wsb--escura .wsb-mito-dica,
.wsb--escura .wsb-cons-cartao > p,
.wsb--escura .wsb-cons-card-txt p,
.wsb--escura .wsb-cons-lista li > div > span{ color:rgba(var(--wse-rgb-papel),.8); }
.wsb--escura .wsb-mito-verdade p strong,
.wsb--escura .wsb-mito-dica strong,
.wsb--escura .wsb-cons-cartao > strong,
.wsb--escura .wsb-cons-card-txt strong,
.wsb--escura .wsb-cons-lista li > div > strong,
.wsb--escura .wsb-cons-mimos-tit{ color:var(--wse-papel); }
.wsb--escura .wsb-mito-dica > span{ background:var(--wse-ouro-cla); }
.wsb--escura .wsb-cons-lista li{ border-top-color:rgba(var(--wse-rgb-ouro),.24); }
.wsb--escura .wsb-mitos-intro{ color:rgba(var(--wse-rgb-papel),.82); }

/*
 * No modo carrossel os proprios cartoes ja sao a moldura: a caixa de
 * fora vira so espaco. Sem isto, dentro de faixa escura, o painel
 * claro continuava claro e o texto dos cartoes sumia dentro dele.
 */
.wsb-consulta--rola .wsb-cons-passos{
  background:none; border:0; border-radius:0; padding:0;
}
.wsb--escura .wsb-cons-passos{
  background:rgba(var(--wse-rgb-papel),.05);
  border-color:rgba(var(--wse-rgb-ouro),.3);
}
.wsb--escura .wsb-consulta--rola .wsb-cons-passos,
.wsb-consulta--rola.wsb--escura .wsb-cons-passos{ background:none; border:0; }

/*
 * Setas embaixo, e nao por cima. Nos carrosseis de foto a seta flutua
 * sobre a imagem sem atrapalhar; sobre cartao de texto ela cai bem no
 * meio da frase. Aqui elas descem para o pe do trilho.
 */
.wsb-mitos-carrossel,
.wsb-cons-carrossel{ padding-bottom:66px; }
.wsb-mitos-carrossel > .wsb-seta,
.wsb-cons-carrossel > .wsb-seta{
  top:auto; bottom:0; right:auto;
  width:44px; height:44px;
}
.wsb-mitos-carrossel > .wsb-seta--ant,
.wsb-cons-carrossel > .wsb-seta--ant{ left:calc(50% - 52px); }
.wsb-mitos-carrossel > .wsb-seta--prox,
.wsb-cons-carrossel > .wsb-seta--prox{ left:calc(50% + 8px); }


/* ==================================================================
 * FAIXA EM TOM (ws_kit_secoes_tom)
 * O creme puxado para o dourado da marca, com fio em cima e embaixo.
 * Existe para quebrar tres secoes claras seguidas sem precisar de mais
 * uma faixa escura — a pagina ganha ritmo e continua leve.
 * ================================================================== */
.wsb--tom{
  background:
    linear-gradient(180deg,
      rgba(var(--wse-rgb-ouro),.09) 0%,
      rgba(var(--wse-rgb-ouro),.045) 55%,
      rgba(var(--wse-rgb-ouro),.09) 100%),
    var(--wse-papel) !important;
  position:relative;
}
.wsb--tom::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent,
      rgba(var(--wse-rgb-ouro),.45) 25%, rgba(var(--wse-rgb-ouro),.45) 75%, transparent);
  pointer-events:none;
}
.wsb--tom .wsb-mito,
.wsb--tom .wsb-cons-cartao,
.wsb--tom .wsb-cons-card,
.wsb--tom .wsb-card-link{ background:#fff; }

/* ---------- avaliacoes dentro de faixa escura ----------
 * O cartao da avaliacao continua branco de proposito: e o que faz a
 * prova social saltar da faixa preta. So que a regra geral da faixa
 * pinta todo <p> de creme — e dentro do cartao branco o texto sumia.
 */
.wsb--escura .wsb-depo-card{ background:#fff; }
.wsb--escura .wsb-depo-texto,
.wsb--escura .wsb-depo-quem span{ color:var(--wse-suave-2); }
.wsb--escura .wsb-depo-quem strong{ color:var(--wse-tinta); }
.wsb--escura .wsb-nota-num{ color:var(--wse-papel); }
.wsb--escura .wsb-nota-txt{ color:rgba(var(--wse-rgb-papel),.75); }
.wsb--escura .wsb-depo-convite{ color:rgba(var(--wse-rgb-papel),.85); }
.wsb--escura .wsb-depo .wsrf-card,
.wsb--escura .wsrf-card{ background:#fff !important; }
.wsb--escura .wsrf-text{ color:var(--wse-suave-2) !important; }
.wsb--escura .wsrf-name{ color:var(--wse-tinta) !important; }
.wsb--escura .wsrf-real-num,
.wsb--escura .wsrf-real-totaltext,
.wsb--escura .wsrf-real-totaltext strong{ color:var(--wse-papel) !important; }

@media(max-width:760px){
  /* sem setas no dedo, a folga que existia para elas vira buraco */
  .wsb-mitos-carrossel,
  .wsb-cons-carrossel{ padding-bottom:0; }
}

@media(max-width:760px){
  /*
   * No computador os cartoes ficam lado a lado e a altura igual e o que
   * alinha as dicas. No celular so aparece um por vez: esticar todos na
   * altura do maior so cria um vao dentro dos curtos.
   */
  .wsb-mitos-trilho,
  .wsb-cons-trilho{ align-items:flex-start; }
  .wsb-mito-dica{ margin-top:0; }
}

@media(max-width:760px){
  /*
   * "O que pode acontecer" no celular: empilhados, os cinco cartoes
   * viravam uma coluna comprida que a pessoa tem de rolar inteira antes
   * de chegar no botao. Aqui eles passam a rolar de lado, iguais aos
   * cartoes dos passos logo acima — mesma largura, mesmo encaixe.
   *
   * A margem negativa devolve os 24px de folga da .wsb-inner para o
   * trilho encostar na borda da tela: e o pedaco do proximo cartao
   * aparecendo que avisa que ha mais para o lado.
   */
  .wsb-consulta--rola .wsb-cons-grade{
    display:flex; gap:14px;
    max-width:none; margin:0 -24px;
    padding:4px 24px 8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-padding-left:24px;
    scrollbar-width:none;
  }
  .wsb-consulta--rola .wsb-cons-grade::-webkit-scrollbar{ display:none; }

  .wsb-consulta--rola .wsb-cons-card{
    flex:0 0 auto; width:80vw; max-width:320px;
    scroll-snap-align:start;
    border:1px solid rgba(var(--wse-rgb-ouro),.3);
    border-radius:18px;
  }
  .wsb-consulta--rola .wsb-cons-card-txt{ padding:22px 20px 20px; }
  .wsb-consulta--rola .wsb-cons-card-txt strong{
    font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
    font-size:1.24rem; line-height:1.25; margin-bottom:8px;
  }
}


/* ==================================================================
 * ONDE EU ATENDO — as casas de costume
 * Cartoes pequenos, dois por linha no celular e quatro no computador.
 * O nome da casa manda; a cidade fica abaixo, menor.
 * ================================================================== */
.wsb-locais{ background:var(--wse-papel); }

.wsb-locais-intro{
  max-width:60ch; margin:-16px auto 36px; text-align:center;
  font-size:1.02rem; line-height:1.8; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-locais-intro strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-locais-intro em{ font-style:italic; color:var(--wse-ouro-txt); }

.wsb-locais-grade{
  list-style:none; margin:0 auto; padding:0; max-width:1060px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px;
}
.wsb-local{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--wse-cartao);
  border:1px solid rgba(var(--wse-rgb-ouro),.28);
  border-radius:14px;
  padding:15px 16px;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.wsb-local:hover{
  border-color:rgba(var(--wse-rgb-ouro),.7);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(var(--wse-rgb-tinta),.08);
}
.wsb-local-marca{
  flex:0 0 auto; margin-top:.35em;
  width:8px; height:8px; transform:rotate(45deg);
  background:var(--wse-ouro);
}
.wsb-local-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.wsb-local-txt strong{
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-weight:600; font-size:1.08rem; line-height:1.25;
  color:var(--wse-tinta);
}
.wsb-local-txt span{
  font-size:.8rem; font-weight:300; line-height:1.4;
  color:var(--wse-suave-2);
}
.wsb-locais-nota{
  max-width:62ch; margin:30px auto 0; text-align:center;
  font-size:.92rem; line-height:1.75; font-weight:300; font-style:italic;
  color:var(--wse-suave-2);
}
.wsb-locais-nota strong{ font-style:normal; font-weight:600; color:var(--wse-tinta); }

/* dentro de faixa escura */
.wsb--escura .wsb-local{
  background:rgba(var(--wse-rgb-papel),.06);
  border-color:rgba(var(--wse-rgb-ouro),.34);
}
.wsb--escura .wsb-local-txt strong{ color:var(--wse-papel); }
.wsb--escura .wsb-local-txt span,
.wsb--escura .wsb-locais-intro,
.wsb--escura .wsb-locais-nota{ color:rgba(var(--wse-rgb-papel),.8); }
.wsb--escura .wsb-local-marca{ background:var(--wse-ouro-cla); }

/* o resumo do pacote agora aceita prosa rica, como os outros textos */
.wsb-pac-resumo strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-pac-resumo em{ font-style:italic; color:var(--wse-ouro-txt); }


/* ==================================================================
 * PACOTE EM FAIXA (ws_kit_packages_modo = faixa)
 * Texto de um lado, fotos quadradas do outro, trocando de lado a cada
 * pacote. Sem cartao: o que separa uma faixa da outra e o espaco e um
 * fio dourado, nao uma borda em volta de tudo.
 * ================================================================== */
.wsb-pac-faixa{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,54px); align-items:center;
  max-width:1120px; margin:0 auto;
  padding:clamp(38px,5vw,60px) 0;
  position:relative;
}
.wsb-pac-faixa + .wsb-pac-faixa::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(560px,80%); height:1px;
  background:linear-gradient(90deg, transparent,
      rgba(var(--wse-rgb-ouro),.45) 30%, rgba(var(--wse-rgb-ouro),.45) 70%, transparent);
}
/* espelho: as fotos passam para o outro lado */
.wsb-pac-faixa--espelho .wsb-pac-quadros{ order:2; }
.wsb-pac-faixa--espelho .wsb-pac-corpo{ order:1; }
.wsb-pac-faixa--so-texto{ grid-template-columns:1fr; max-width:760px; text-align:center; }

/* ---------- as fotos, quadradas ---------- */
.wsb-pac-quadros{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; min-width:0;
}
.wsb-pac-quadro{
  display:block; width:100%; height:100%;
  aspect-ratio:1/1; object-fit:cover; object-position:center 28%;
  border-radius:14px;
  box-shadow:0 14px 32px rgba(var(--wse-rgb-tinta),.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.wsb-pac-quadro:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 44px rgba(var(--wse-rgb-tinta),.16);
}
/* numero impar de fotos: a ultima atravessa as duas colunas */
.wsb-pac-quadro:last-child:nth-child(odd){
  grid-column:1 / -1; aspect-ratio:2/1;
}

/* ---------- o texto ---------- */
.wsb-pac-corpo{ min-width:0; }
.wsb-pac-selo{
  display:inline-block; margin-bottom:12px;
  padding:6px 14px; border-radius:999px;
  background:rgba(var(--wse-rgb-ouro),.15);
  border:1px solid rgba(var(--wse-rgb-ouro),.42);
  font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:var(--wse-ouro-txt);
}
.wsb-pac-faixa .wsb-pac-nome{
  margin:0 0 16px;
  font-family:var(--wse-fonte-titulo,'Cormorant Garamond',Georgia,serif);
  font-weight:500; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.15;
  color:var(--wse-tinta);
}
.wsb-pac-prosa{
  margin:0 0 14px;
  font-size:1.02rem; line-height:1.85; font-weight:300;
  color:var(--wse-suave-2);
}
.wsb-pac-prosa strong{ font-weight:600; color:var(--wse-tinta); }
.wsb-pac-prosa em{ font-style:italic; color:var(--wse-ouro-txt); }

.wsb-pac-faixa .wsb-pac-lista{
  list-style:none; margin:20px 0 22px; padding:0;
  display:grid; gap:9px;
}
.wsb-pac-faixa .wsb-pac-lista li{
  position:relative; padding-left:20px;
  font-size:.95rem; line-height:1.6; font-weight:400;
  color:var(--wse-tinta);
}
.wsb-pac-faixa .wsb-pac-lista li::before{
  content:''; position:absolute; left:0; top:.6em;
  width:7px; height:7px; transform:rotate(45deg);
  background:var(--wse-ouro);
}
.wsb-pac-obs{
  margin:0 0 22px; font-size:.9rem; line-height:1.7;
  font-style:italic; font-weight:300; color:var(--wse-suave-2);
}
.wsb-pac-faixa .wsep-botao{ margin-top:4px; }

@media(max-width:820px){
  .wsb-pac-faixa,
  .wsb-pac-faixa--espelho{ grid-template-columns:1fr; gap:26px; }
  /* no celular a foto sempre vem primeiro: ela e o que para a rolagem */
  .wsb-pac-faixa .wsb-pac-quadros,
  .wsb-pac-faixa--espelho .wsb-pac-quadros{ order:1; }
  .wsb-pac-faixa .wsb-pac-corpo,
  .wsb-pac-faixa--espelho .wsb-pac-corpo{ order:2; }
}

/* dentro de faixa escura */
.wsb--escura .wsb-pac-prosa,
.wsb--escura .wsb-pac-obs{ color:rgba(var(--wse-rgb-papel),.8); }
.wsb--escura .wsb-pac-faixa .wsb-pac-nome,
.wsb--escura .wsb-pac-prosa strong,
.wsb--escura .wsb-pac-faixa .wsb-pac-lista li{ color:var(--wse-papel); }