/* ==========================================================
   ==============  VERSÃO B — MARCANTE  =====================
   ========================================================== */
#site-b[data-tema="padrao"]{
  --ink:#31175A; --bg:#F7F3FC; --mint:#EBE1F8; --acc1:#FFC53D; --acc2:#7A4EE8;
  --acc3:#D3BFFF; --mut:#5C4980; --mut3:#8577A3; --rad:22px; --radS:14px;
  --fh:'Sora',system-ui,sans-serif}

/* Paleta da marca dele, tirada das artes do Instagram: o azul ciano dos
   cards de atendimento domiciliar e o amarelo do card de 24 horas. */
#site-b[data-tema="marca"]{
  --ink:#3A2320; --bg:#FCF6F5; --mint:#F3E2E4; --acc1:#8A5548; --acc2:#D8AAB4;
  --acc3:#F0D8DC; --mut:#6B4F4A; --mut3:#C6ADA9; --rad:18px; --radS:12px;
  --fh:'Archivo',system-ui,sans-serif}
#site-b{--sombra:5px 5px 0 var(--ink); --sombraG:8px 8px 0 var(--ink); --env:1200px; --padSecB:90px; --padLatB:24px;
  --corpoB:'Figtree',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-family:var(--corpoB); font-size:17px; line-height:1.65}
#site-b h1,#site-b h2,#site-b h3{font-family:var(--fh); margin:0}
#site-b a{color:var(--acc2); text-decoration:none}
#site-b a:hover{color:var(--acc1)}
#site-b a:focus-visible,#site-b summary:focus-visible,#site-b button:focus-visible{outline:3px solid var(--acc1); outline-offset:3px}
#site-b ::selection{background:var(--acc1); color:var(--ink)}

.b-env{max-width:var(--env); margin-inline:auto}
.b-sec{padding:var(--padSecB) var(--padLatB); border-bottom:2px solid var(--ink)}
.b-sec--br{background:#fff} .b-sec--bg{background:var(--bg)} .b-sec--mint{background:var(--mint)}
.b-sec--esc{background:var(--ink); color:var(--bg)} .b-sec--acc{background:var(--acc1)}
#site-b [id]{scroll-margin-top:80px}
.b-rot{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--acc2)}
.b-sec--esc .b-rot{color:var(--acc3)}
.b-tit{font-weight:900; font-size:clamp(30px,4.5vw,50px); line-height:1.02; letter-spacing:-1px; margin:10px 0 0; text-wrap:balance}
.b-ap{margin:0; color:var(--mut); font-size:16px}
.b-sec--esc .b-ap{color:var(--acc3)}
.b-cab{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:44px}
.b-grade{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px}
.b-linha{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.b-duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(32px,5vw,56px); align-items:center}

.b-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:2px solid var(--ink);
  border-radius:var(--radS); font-family:var(--corpoB); font-weight:800; font-size:17px; padding:15px 30px;
  box-shadow:var(--sombra); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease}
.b-btn:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink)}
.b-btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink)}
#site-b .b-btn--a2{background:var(--acc2); color:#fff} #site-b .b-btn--a2:hover{color:#fff}
#site-b .b-btn--a1{background:var(--acc1); color:var(--ink)} #site-b .b-btn--a1:hover{color:var(--ink)}
#site-b .b-btn--br{background:#fff; color:var(--ink)} #site-b .b-btn--br:hover{color:var(--ink)}
#site-b .b-btn--ink{background:var(--ink); color:#fff} #site-b .b-btn--ink:hover{color:#fff}
.b-btn--p{font-size:15px; padding:10px 22px; box-shadow:4px 4px 0 var(--ink)}

.b-card{--fx:var(--acc2);
  background:var(--bg); color:var(--ink); border:2px solid var(--ink); border-radius:var(--rad);
  padding:40px 26px 28px; position:relative; overflow:hidden;
  box-shadow:var(--sombra); transition:transform .5s ease-in-out, box-shadow .5s ease-in-out}
/* [POR QUÊ] Era isto que faltava. O cartão da versão Alegre tem uma
   faixa de gradiente no topo dando cor e ritmo; o da Marcante não
   tinha equivalente nenhum — por isso parecia um retângulo vazio.
   Aqui a faixa é sólida, com a borda dura da linguagem neo-brutalista. */
.b-card::before{content:""; position:absolute; top:0; left:0; right:0; height:12px;
  background:var(--fx); border-bottom:2px solid var(--ink)}
/* cada trio alterna a cor de destaque, para a grade não ficar monótona */
.b-card:nth-child(3n+1){--fx:var(--acc2)}
.b-card:nth-child(3n+2){--fx:var(--acc1)}
.b-card:nth-child(3n+3){--fx:var(--acc3)}
.b-card::after{content:""; position:absolute; right:-22px; bottom:-30px; width:112px; height:112px; opacity:.30; pointer-events:none;
  background:var(--fx);
  transition:opacity .5s ease, transform .5s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cellipse cx='24' cy='31' rx='9' ry='7.5'/%3E%3Cellipse cx='12' cy='20' rx='4.5' ry='6'/%3E%3Cellipse cx='20' cy='13.5' rx='4.5' ry='6'/%3E%3Cellipse cx='28' cy='13.5' rx='4.5' ry='6'/%3E%3Cellipse cx='36' cy='20' rx='4.5' ry='6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cellipse cx='24' cy='31' rx='9' ry='7.5'/%3E%3Cellipse cx='12' cy='20' rx='4.5' ry='6'/%3E%3Cellipse cx='20' cy='13.5' rx='4.5' ry='6'/%3E%3Cellipse cx='28' cy='13.5' rx='4.5' ry='6'/%3E%3Cellipse cx='36' cy='20' rx='4.5' ry='6'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:rotate(-16deg)}
.b-card:hover::after{opacity:.48; transform:rotate(-8deg) scale(1.08)}
.b-card:hover{transform:perspective(900px) translate(-3px,-3px) rotate3d(.5,1,0,10deg);
  box-shadow:4px 4px 0 var(--fx), 9px 9px 0 var(--ink)}
.b-card:nth-child(even):hover{transform:perspective(900px) translate(-3px,-3px) rotate3d(-.5,1,0,-10deg)}
.b-card__n{display:inline-flex; align-items:center; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--ink);
  background:var(--fx); border:2px solid var(--ink); border-radius:6px; padding:4px 10px;
  box-shadow:3px 3px 0 var(--ink); transform:rotate(-2deg); margin-bottom:16px}

.b-card__h{font-weight:800; font-size:22px; margin:0 0 14px; padding-bottom:10px; position:relative}
.b-card__h::after{content:""; position:absolute; left:0; bottom:0; width:32px; height:3px;
  background:var(--fx); border-radius:2px; transition:width .45s ease}
.b-card:hover .b-card__h::after{width:70px}
.b-card__p{margin:0; font-size:15px; color:var(--mut)}
.b-dest{grid-column:1/-1; background:var(--acc1); border:2px solid var(--ink); border-radius:var(--rad);
  padding:34px 30px; box-shadow:6px 6px 0 var(--ink); display:flex; flex-wrap:wrap; align-items:center;
  gap:24px; justify-content:space-between; position:relative; overflow:hidden}
.b-dest__s{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  background:var(--ink); color:#fff; display:inline-block; padding:4px 12px; border-radius:6px; margin-bottom:14px}
.b-dest__h{font-weight:900; font-size:clamp(24px,3vw,34px); line-height:1.05; margin:0 0 10px}
.b-dest__m{position:absolute; right:-30px; bottom:-56px; transform:rotate(-18deg); opacity:.14; pointer-events:none}

.b-topo{position:sticky; top:0; z-index:60; background:var(--bg); border-bottom:2px solid var(--ink); transition:box-shadow .3s ease}
.b-topo.desl{box-shadow:0 6px 0 -2px var(--ink)}
.b-topo__i{padding:14px var(--padLatB); display:flex; align-items:center; justify-content:space-between; gap:24px}
.b-logo{display:flex; align-items:center; gap:10px; color:var(--ink)} .b-logo:hover{color:var(--ink)}
.b-logo__q{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  background:var(--acc3); border:2px solid var(--ink); border-radius:var(--radS); transform:rotate(-6deg); flex:none}
.b-logo__n{font-family:var(--fh); font-weight:900; font-size:24px; letter-spacing:-.5px}
.b-logo__s{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--mut3)}
.b-menu{display:flex; gap:26px; font-size:15px; font-weight:800}
.b-menu a{color:var(--ink)} .b-menu a:hover{color:var(--acc2)}
@media (max-width:880px){.b-menu{display:none}}

.b-faixa{background:var(--ink); color:var(--bg); font-family:var(--mono); font-size:12.5px; font-weight:700;
  letter-spacing:.5px; text-align:center; padding:8px 16px}
.b-faixa a{color:var(--acc1); text-decoration:underline} .b-faixa a:hover{color:#fff}

.b-hero{background:var(--bg); padding:72px var(--padLatB) 80px; position:relative; overflow:hidden}
.b-pts{position:absolute; inset:0; pointer-events:none; opacity:.07;
  background-image:radial-gradient(var(--ink) 1px, transparent 1px); background-size:26px 26px}
.b-pat{position:absolute; pointer-events:none}
.b-hero__g{display:flex; flex-wrap:wrap; align-items:center; gap:56px; position:relative}
.b-hero__t{flex:1 1 480px; min-width:min(100%,300px)}
.b-h1{font-weight:900; font-size:clamp(38px,5.6vw,68px); line-height:1; letter-spacing:-1.5px; margin:20px 0 24px; text-wrap:balance}
.b-mk{padding:0 10px; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.b-mk--1{background:var(--acc1)} .b-mk--3{background:var(--acc3)}
.b-lead{margin:0 0 32px; max-width:480px; font-size:18px; color:var(--mut); text-wrap:pretty}
.b-dados{display:flex; flex-wrap:wrap; gap:32px; margin-top:44px}
.b-dado__v{font-family:var(--fh); font-weight:900; font-size:28px; line-height:1}
.b-dado__r{font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut3); margin-top:6px}
.b-dado--d{border-left:2px solid var(--ink); padding-left:32px}
.b-hero__f{flex:1 1 320px; min-width:min(100%,280px); max-width:440px; position:relative; padding:16px 16px 0 0}
.b-mold{position:relative; border:2px solid var(--ink); border-radius:var(--rad); overflow:hidden; box-shadow:10px 10px 0 var(--acc3); background:#fff}
.b-etq{position:absolute; border:2px solid var(--ink); border-radius:var(--radS); box-shadow:4px 4px 0 var(--ink);
  padding:10px 16px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:1px}
.b-etq--a{top:0; right:0; background:var(--acc1); color:var(--ink); transform:rotate(4deg)}
.b-etq--b{bottom:26px; left:-14px; background:#fff; color:var(--ink); transform:rotate(-3deg)}

.b-passos{position:relative; display:flex; flex-direction:column; gap:34px; padding-left:66px}
.b-passos__l{position:absolute; left:26px; top:12px; bottom:12px; width:3px; background:var(--acc3);
  transform:scaleY(0); transform-origin:top; transition:transform 1.1s ease-out}
.b-passos.on .b-passos__l{transform:scaleY(1)}
.b-passo{display:flex; gap:22px; align-items:flex-start; position:relative}
.b-passo__n{position:absolute; left:-66px; width:54px; height:54px; display:flex; align-items:center;
  justify-content:center; background:var(--acc1); color:var(--ink); border:2px solid var(--ink); border-radius:50%;
  font-family:var(--fh); font-weight:900; font-size:20px; box-shadow:4px 4px 0 var(--acc2)}
.b-passo__h{font-weight:800; font-size:23px; margin:0 0 6px}
.b-passo__p{margin:0; color:var(--acc3)}

.b-depo{margin:0; background:var(--bg); border:2px solid var(--ink); border-radius:var(--rad); padding:30px 28px;
  box-shadow:var(--sombra); display:flex; flex-direction:column; gap:14px; transition:transform .15s ease, box-shadow .15s ease}
.b-depo:hover{transform:translate(-3px,-3px); box-shadow:var(--sombraG)}
.b-depo__a{font-family:var(--fh); font-weight:900; font-size:56px; line-height:.5; color:var(--acc1)}
.b-depo blockquote{margin:0; font-size:16.5px; font-weight:600}
.b-depo figcaption{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:1.5px; color:var(--mut3)}
.b-estrelas{color:var(--acc1); font-size:15px; letter-spacing:2px}

.b-faq{display:flex; flex-direction:column; gap:12px}
.b-faq details{background:#fff; border:2px solid var(--ink); border-radius:var(--radS); padding:0 20px}
.b-faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; min-height:60px;
  padding:12px 0; font-weight:800; font-size:17px}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq__n{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--acc2); flex:none}
.b-faq__q{flex:1}
.b-faq__m{flex:none; width:28px; height:28px; border:2px solid var(--ink); border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-weight:800; line-height:1;
  transition:transform .25s ease, background .25s ease, color .25s ease}
.b-faq details[open] .b-faq__m{transform:rotate(45deg); background:var(--ink); color:#fff}
.b-faq p{margin:0; padding:0 0 20px; color:var(--mut)}

.b-rod{background:var(--ink); color:var(--bg); padding:70px var(--padLatB) 40px; overflow:hidden}
.b-rod a{color:var(--acc3)} .b-rod a:hover{color:var(--acc1)}
.b-rod__l{font-family:var(--fh); font-weight:900; font-size:clamp(48px,11vw,124px); line-height:.9;
  letter-spacing:-3px; display:flex; align-items:center; gap:14px}
.b-rod__c{display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; margin-top:36px;
  padding-top:28px; border-top:2px solid var(--mut)}
.b-rod__k{display:flex; flex-direction:column; gap:8px; font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:1px}
.b-rod__f{margin-top:36px; font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:2px; color:var(--mut3)}

.b-zap{position:fixed; right:20px; bottom:84px; z-index:70; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease}
.b-zap:hover{transform:scale(1.08); color:#fff}
.a-zap{position:fixed; right:20px; bottom:84px; z-index:70; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; border:3px solid var(--tinta); box-shadow:0 8px 24px rgba(46,34,51,.3);
  display:flex; align-items:center; justify-content:center; transition:transform .15s ease}
.a-zap:hover{transform:scale(1.08); color:#fff}

/* Se a foto ainda nao foi colocada em img\, sobra um painel na cor da
   marca em vez do icone de imagem quebrada. */
.b-mold{background:var(--mint); min-height:120px}

/* ==========================================================================
   INTERACAO UNIFICADA  (pedido: a animacao dos botoes em tudo)
   Um unico vocabulario de movimento: o elemento sobe e a sombra cresce no
   hover, e afunda no clique. Vale para botao, moldura de foto, etiqueta,
   cartao e pergunta do FAQ.
   As etiquetas ja nascem giradas, entao a rotacao vira variavel (--rot)
   para nao ser apagada pelo transform do hover.
   ========================================================================== */
#site-b{--liftS:6px 6px 0 var(--mut3); --pressS:1px 1px 0 var(--mut3)}

.b-btn,.b-mold,.b-etq,.b-faq details,.b-dest,.b-selo{
  transition:transform .15s ease, box-shadow .15s ease}

/* botoes: harmoniza o hover com a sombra suave da paleta dela */
.b-btn:hover{transform:translate(-2px,-2px); box-shadow:var(--liftS)}
.b-btn:active{transform:translate(2px,2px); box-shadow:var(--pressS)}
.b-btn--p:hover{box-shadow:5px 5px 0 var(--mut3)}

/* moldura da foto */
.b-mold{box-shadow:6px 6px 0 var(--acc3)}
.b-mold:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--acc3)}
.b-mold:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--acc3)}

/* etiquetas do nome e do CRMV sobre a foto */
.b-etq{--rot:0deg; box-shadow:3px 3px 0 var(--mut3); transform:rotate(var(--rot))}
.b-etq--a{--rot:4deg}
.b-etq--b{--rot:-3deg}
.b-etq:hover{transform:translate(-2px,-2px) rotate(var(--rot)); box-shadow:var(--liftS)}
.b-etq:active{transform:translate(2px,2px) rotate(var(--rot)); box-shadow:var(--pressS)}

/* selo da logo na secao "quem atende" */
.b-selo:hover{transform:translate(-2px,-2px); box-shadow:var(--liftS)}
.b-selo:active{transform:translate(2px,2px); box-shadow:var(--pressS)}

/* perguntas do FAQ */
.b-faq details{box-shadow:3px 3px 0 var(--mut3)}
.b-faq details:hover{transform:translate(-2px,-2px); box-shadow:var(--liftS)}
.b-faq details[open]{transform:none; box-shadow:var(--pressS)}

/* cartao em destaque */
.b-dest{box-shadow:6px 6px 0 var(--mut3)}
.b-dest:hover{transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--mut3)}

@media (prefers-reduced-motion: reduce){
  .b-btn,.b-mold,.b-etq,.b-faq details,.b-dest,.b-selo{transition:none}
  .b-btn:hover,.b-mold:hover,.b-faq details:hover,.b-dest:hover,.b-selo:hover{transform:none}
  .b-etq:hover{transform:rotate(var(--rot))}
}

/* ==========================================================================
   PATINHA DE FUNDO DOS CARTOES
   Estava em 13% e sumia. Subiu para 30% (48% no hover) e de 96 para 112px.
   O terceiro cartao de cada trio usa --acc3, o rosa mais claro da paleta:
   sobre o fundo claro ele rende bem menos que os outros dois, entao leva
   um reforco proprio - senao um cartao em cada tres continuaria apagado.
   ========================================================================== */
.b-card:nth-child(3n+3)::after{opacity:.46}
.b-card:nth-child(3n+3):hover::after{opacity:.66}
/* ==========================================================================
   LISTA DE FORMACAO (secao "Prazer, eu sou a Giuliane")
   Ela pediu o curriculo no site: "carinha de nova mais ou menos, ai o povo
   nao me da valor". Lista com marcador proprio, sem virar bloco de texto.
   ========================================================================== */
.b-form{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.b-form li{position:relative; padding-left:26px; color:var(--mut); font-size:15.5px; line-height:1.5}
.b-form li::before{content:"✦"; position:absolute; left:0; top:0; color:var(--acc1); font-size:14px}

/* ==========================================================================
   CABECALHO DA MARCANTE EM TELA ESTREITA
   Em 360px o logo, o menu sanduiche e o botao nao cabiam na mesma linha:
   o nome quebrava em duas e empurrava o botao para fora do corte.
   Aqui tudo encolhe o suficiente para caber, e o subtitulo do logo sai,
   porque ao lado do nome ele e redundante e e o que mais rouba largura.
   ========================================================================== */
@media (max-width:560px){
  #site-b{--padLatB:16px}
  .b-topo__i{gap:12px}
  .b-logo{min-width:0; gap:6px}
  .b-logo__n{font-size:19px; overflow-wrap:break-word}
  .b-logo__s{display:none}
  .b-topo .b-btn--p{font-size:13px; padding:9px 14px; box-shadow:3px 3px 0 var(--ink)}
}