/* ==========================================================================
   BRUNA KINTSCHNER — o que e so dela (13/10/2026)
   Cliente paga (reativacao). Site na versao Marcante. Ela escolheu a paleta
   VINHO em 14/10 (azul e harmonia sairam). A pedido dela em audio, eram:
     - VINHO:     as cores da logo (vinho #771610 e o creme das letras)
     - AZUL:      o azul royal da roupa das fotos, com verde vivo ("eu gosto
                  de colocar cores bem vivas", "misturar o verde e o azul")
     - HARMONIA:  marinho + vinho + creme, para conversar com os dois
   TIPOGRAFIA, pedido dela: "uma letra mais clean, mais normalzinha, mais
   sequinha" no geral e "uma que outra palavra ... como se fosse manuscrito".
   Por isso: Outfit em tudo (titulos, texto e rotulos) e Dancing Script so
   nas palavras marcadas com .b-script.
   Este arquivo carrega por ULTIMO e sobrescreve o 03.
   ========================================================================== */

#site-b{--fh:'Outfit',system-ui,sans-serif; --corpoB:'Outfit',system-ui,sans-serif; --mono:'Outfit',system-ui,sans-serif;
  --script:'Dancing Script',cursive}

/* ---- as tres paletas ----
   acc1 = fundo claro dos destaques (texto escuro por cima)
   acc2 = cor forte dos botoes e rotulos (texto branco por cima)
   acc3 = tom claro usado sobre as faixas escuras */
#site-b[data-tema="vinho"]{
  --ink:#4A0F12; --bg:#FCF7F2; --mint:#F4E6DA; --acc1:#EFC6AE; --acc2:#8A1A16;
  --acc3:#F2D7C6; --mut:#6E4A44; --mut3:#C49A8E; --rad:20px; --radS:12px}

/* FOTOS: o height do atributo (1120 e 820) valia como altura fixa e ganhava do
   aspect-ratio - a foto ficava estreita e comprida. Com height:auto vale a
   proporcao: 3:4 no topo e 1:1 em "quem atende".
   (Ja foi apagado uma vez sem querer junto com as paletas: mantenha aqui.) */
#site-b .b-mold img{height:auto; display:block}

/* FLUIDEZ NO CELULAR (14/10)
   1. Toque nao tem hover. Sem isto, o dedo passando por cima de um cartao
      durante a rolagem disparava a inclinacao 3D e o cartao ficava torto. */
@media (hover:none), (pointer:coarse){
  #site-b .b-card:hover, #site-b .b-card:nth-child(even):hover{transform:none; box-shadow:var(--sombra)}
  #site-b .b-card:hover::after{opacity:.30; transform:rotate(-16deg)}
  #site-b .b-card:hover .b-card__h::after{width:32px}
  #site-b .b-btn:hover, #site-b .b-mold:hover, #site-b .b-dest:hover,
  #site-b .b-faq details:hover, #site-b .b-selo:hover{transform:none}
  #site-b .b-etq:hover{transform:rotate(var(--rot))}
}
/* 2. A entrada dos blocos fica mais curta e mais discreta (o JS tambem passou
      a revelar um pouco ANTES do bloco entrar na tela). */
.js #site-b .rv{transform:translateY(14px); transition:opacity .4s ease-out, transform .4s ease-out}
/* 3. (14/10, 2a rodada) O H1 escrito letra por letra: quando a ultima letra
      chega, o JS poe .escrito e a animacao sai. Visualmente nada muda; a
      diferenca e que as 34 letras deixam de ser 34 camadas permanentes.
      Os titulos das secoes nao sao mais escritos ao rolar (ver site.js). */
#site-b .b-h1.escrevendo.escrito .ltr{animation:none; opacity:1; transform:none}
#site-b .b-h1.escrevendo.escrito::after{content:none}
/* ...e as letras continuam por cima da faixa do "alimentacao": sem isto, o
   fundo da faixa cobria o pe do "c" e do "p" da linha de cima (antes quem
   segurava as letras por cima era a propria animacao). */
#site-b .b-h1 .ltr-p{position:relative}
/* no computador a faixa do "alimentacao" encostava no paragrafo de baixo */
@media (min-width:901px){ #site-b .b-hero .b-h1{margin-bottom:40px} }

/* RODAPE: o nome grande passava da tela no celular e era cortado
   ("Bruna Kintschne"). Cabe numa linha no computador e quebra em duas
   no celular. */
#site-b .b-rod__l{flex-wrap:wrap; column-gap:14px; row-gap:0; font-size:clamp(44px,8.5vw,104px)}
/* titulos mais limpos: menos peso e menos aperto que o 03 */
#site-b .b-h1{font-weight:800; letter-spacing:-1px}
#site-b .b-tit{font-weight:800; letter-spacing:-.5px}
#site-b .b-card__h,#site-b .b-dest__h{font-weight:700}

/* as palavras manuscritas */
.b-script{font-family:var(--script); font-weight:700; letter-spacing:0; font-size:1.18em; line-height:.9;
  text-transform:none}
.b-tit .b-script{color:var(--acc2)}
.b-sec--esc .b-tit .b-script{color:var(--acc3)}
.b-h1 .b-script{font-size:1.14em}

/* rotulos pequenos legiveis (o --mut3 e claro demais para texto) */
#site-b .b-dado__r,#site-b .b-logo__s,#site-b .b-rod__f{color:var(--mut)}
#site-b .b-rod__f{color:var(--acc3)}

/* ---- o simbolo da logo dela, pintado na cor da paleta ---- */
.b-simb{display:inline-block; flex:none; aspect-ratio:250/330; background:var(--acc2);
  -webkit-mask:url(../img/simbolo.png) center/contain no-repeat; mask:url(../img/simbolo.png) center/contain no-repeat}
.b-logo .b-simb{height:40px}
.b-logo__t{display:flex; flex-direction:column; line-height:1.05}
.b-logo__n{font-weight:700; font-size:21px; letter-spacing:-.3px}

/* selo da marca na secao "quem atende" */
.b-marca{display:inline-flex; align-items:center; gap:18px; margin-top:28px; padding:18px 24px;
  border:2px solid var(--ink); border-radius:var(--radS); background:var(--bg); box-shadow:3px 3px 0 var(--mut3)}
.b-marca .b-simb{height:64px}
.b-marca b{display:block; font-weight:600; font-size:20px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc2)}
.b-marca span{display:block; font-size:15px; color:var(--mut); margin-top:2px}

/* rodape: os links herdavam '#site-b a' (a cor forte) e sumiam no fundo escuro */
#site-b .b-rod a{color:var(--acc3)} #site-b .b-rod a:hover{color:#fff}
#site-b .b-rod .btn-insta{color:#fff}

/* rodape: o simbolo ao lado do nome grande */
.b-rod__l .b-simb{height:.9em; background:var(--acc3)}

/* ---- a barra de escolha de paleta (so cores, sem troca de versao) ----
   Os botoes moram dentro de um span: sem flex aqui eles quebravam um embaixo
   do outro no celular e a barra virava uma bolha por cima do texto. */
.sw #sw-temas{display:flex; gap:4px; align-items:center}
.sw #sw-temas button{white-space:nowrap}
#site-b .b-hero .b-lead:first-of-type{margin-bottom:14px}
.sw .sw-cor{display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:7px; vertical-align:-1px;
  border:1px solid rgba(255,255,255,.6)}

/* HERO NO CELULAR, pedido do Higor (13/10): a foto ficava depois dos dois
   paragrafos, dos botoes e dos dados - longe do H1. No celular a ordem vira
   rotulo > H1 > foto > texto > botoes > dados. O bloco de texto vira
   "display:contents" para os filhos dele poderem ser reordenados junto com a
   foto. No computador (lado a lado) nada muda. */
@media (max-width:900px){
  .b-hero__g{flex-direction:column; align-items:stretch; gap:0}
  .b-hero__t{display:contents}
  .b-hero .b-rot{order:1}
  .b-hero .b-h1{order:2; margin-bottom:26px}
  .b-hero__f{order:3; flex:none; width:100%; max-width:440px; margin:0 auto 34px}
  .b-hero .b-lead{order:4}
  .b-hero .b-linha{order:5}
  .b-hero .b-dados{order:6}
}

@media (max-width:560px){
  .sw #sw-temas button{padding:8px 10px; font-size:10.5px}
  .sw .sw-cor{width:10px; height:10px; margin-right:5px}
  .b-logo .b-simb{height:32px}
  .b-logo__n{font-size:17px}
  .b-marca{gap:14px; padding:14px 16px}
  .b-marca .b-simb{height:50px}
  .b-marca b{font-size:16px}
}

/* CACHORRINHO (14/10): anda so para a direita, sai pela borda e reaparece no
   comeco. Antes ele ia e voltava virando, e a virada (22 s) estava fora de
   compasso com a caminhada (30 s): virava no meio do caminho e travava com
   metade do corpo para fora da borda. Sem virada, nao ha o que dessincronizar.
   O desenho visivel ocupa de 81 a 219 px dentro da caixa de 300 (escala .46),
   por isso ele comeca em -220px (todo escondido a esquerda) e termina em
   100% - 80px (todo escondido a direita). A duracao muda com a largura da
   tela para a velocidade ficar parecida no celular e no computador. */
/* Fora da tela o cachorro sai de cena de vez (antes so pausava, e as ~30
   pecas dele continuavam ocupando a placa de video do celular). Quando o
   rodape aparece, ele recomeca a caminhada do comeco. */
#site-b .a-brinca.pausado .a-trilho{display:none}
#site-b .a-trilho{animation:bkPasseio 16s linear infinite}
#site-b .a-dogbox{animation:none; transform:none}
@keyframes bkPasseio{ from{transform:translateX(-220px)} to{transform:translateX(calc(100% - 80px))} }
@media (max-width:900px){ #site-b .a-trilho{animation-duration:11s} }
@media (max-width:560px){ #site-b .a-trilho{animation-duration:7.5s} }

/* SINAIS EM ITENS (14/10, pedido dela: "e o que o pessoal vai bater mais o olho") */
.b-sinais{list-style:none; margin:-14px 0 40px; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:12px}
.b-sinais li{display:flex; align-items:center; gap:12px; background:#fff; border:2px solid var(--ink); border-radius:var(--radS);
  padding:14px 16px; font-weight:600; font-size:16.5px; line-height:1.3; box-shadow:3px 3px 0 var(--mut3)}
.b-sinais li::before{content:""; flex:none; width:24px; height:24px; border-radius:50%; background:var(--acc2) no-repeat center/14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* CASO DO FREDERICO: antes e depois lado a lado */
.b-caso{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.b-caso figure{margin:0; position:relative; border:2px solid var(--ink); border-radius:var(--rad); overflow:hidden; box-shadow:5px 5px 0 var(--acc2); background:var(--mint)}
.b-caso img{display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover}
.b-caso figcaption{position:absolute; left:10px; top:10px; background:var(--ink); color:#fff; font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border-radius:99px}
.b-caso figure:last-child figcaption{background:var(--acc2)}
@media (max-width:560px){ .b-sinais{margin-top:-20px} .b-caso{gap:10px} }