/* ==========================================================
   MENU MOBILE + MAPA SOB DEMANDA + PAUSA DE ANIMAÇÃO
   ========================================================== */
.mnav-btn{display:none; border:0; background:none; color:inherit; cursor:pointer; padding:8px; border-radius:10px; align-items:center; justify-content:center; flex:none}
.i-fecha{display:none}
.mnav-btn[aria-expanded="true"] .i-abre{display:none}
.mnav-btn[aria-expanded="true"] .i-fecha{display:block}
.mnav{display:none; position:absolute; top:100%; left:0; right:0; max-height:0; overflow:hidden; transition:max-height .28s ease}
.mnav.aberto{max-height:420px}
.mnav a{display:flex; align-items:center; min-height:54px; padding:8px clamp(20px,5vw,48px); font-size:18px; font-weight:700}
@media (max-width:880px){.mnav-btn{display:inline-flex} .mnav{display:block}}
.a-topo .mnav-btn{color:var(--tinta)}
.a-topo .mnav{background:var(--creme); box-shadow:0 16px 28px rgba(46,34,51,.14)}
.a-topo .mnav.aberto{border-bottom:var(--borda) solid var(--tinta)}
.a-topo .mnav a{font-family:var(--display); color:var(--tinta); border-top:2px dashed color-mix(in srgb,var(--ameixa) 28%,transparent)}
.b-topo .mnav-btn{color:var(--ink)}
.b-topo .mnav{background:var(--bg)}
.b-topo .mnav.aberto{border-bottom:2px solid var(--ink)}
.b-topo .mnav a{color:var(--ink); font-weight:800; border-top:2px solid var(--ink)}
#site-a [id]{scroll-margin-top:84px}
.mapa{position:relative; display:grid; place-items:center; align-content:center; gap:14px; text-align:center; padding:24px; width:100%}
.mapa p{margin:0; font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; opacity:.8; max-width:32ch}
.mapa iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.anim-pausa,.anim-pausa *{animation-play-state:paused !important}
@media (max-width:700px){.a-rod .a-sec{padding-bottom:130px} .b-rod{padding-bottom:120px}}

/* ==========================================================================
   BOTAO DO INSTAGRAM
   Circulo que se alonga no hover e troca o icone pela palavra.
   Renomeado de .Btn para .btn-insta: ".Btn" e generico demais e colidiria
   com outras regras do arquivo. O gradiente e o oficial da marca Instagram.
   ========================================================================== */
.btn-insta{
  border:none; border-radius:50%; width:45px; height:45px;
  display:inline-flex; align-items:center; justify-content:center;
  transition-duration:.4s; cursor:pointer; position:relative; overflow:hidden;
  padding:0; text-decoration:none;
  background:#f09433;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}
.btn-insta .svgIcon{transition-duration:.3s; height:1.5em}
.btn-insta .svgIcon path{fill:#fff}
.btn-insta .text{
  position:absolute; color:#fff; width:120px; font-weight:600;
  opacity:0; transition-duration:.4s; text-align:center;
  font-family:inherit; font-size:15px;
}
/* A expansao so vale em dispositivo com ponteiro de verdade. Em toque nao
   existe hover: no iOS o primeiro toque so "passa o mouse" e o segundo e
   que ativa o link, o que faria o usuario tocar duas vezes para abrir. */
@media (hover:hover) and (pointer:fine){
  .btn-insta:hover{width:110px; transition-duration:.4s; border-radius:30px}
  .btn-insta:hover .text{opacity:1; transition-duration:.4s}
  .btn-insta:hover .svgIcon{opacity:0; transition-duration:.3s}
}
.btn-insta:focus-visible{outline:3px solid #fff; outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .btn-insta,.btn-insta .text,.btn-insta .svgIcon{transition-duration:0s}
}

/* ==========================================================================
   BOTAO FLUTUANTE DE WHATSAPP - VERSAO ALEGRE
   Mesma ideia do botao do Instagram: o circulo se alonga no hover, o icone
   sai e o texto entra. Aqui vale mais ainda porque este e o botao mais
   importante do site, e sozinho ele nao diz o que faz.
   Vive neste arquivo (e nao no 02-) porque a regra base de .a-zap esta no
   03-marcante.css, que carrega depois - aqui a sobrescrita ganha.
   ========================================================================== */
.a-zap{
  overflow:hidden; white-space:nowrap; gap:0;
  transition:width .4s ease, border-radius .4s ease, box-shadow .2s ease;
}
.a-zap svg{flex:0 0 auto; transition:opacity .3s ease}
.a-zap .zap-txt{
  position:absolute; opacity:0; transition:opacity .4s ease;
  font-family:var(--display),system-ui,sans-serif; font-weight:700; font-size:15px; color:#fff;
}
/* o transform:scale antigo sai: agora quem da o feedback e a largura */
/* Idem: em celular ele continua um circulo limpo com o icone, que e o
   padrao esperado de botao flutuante de WhatsApp. */
@media (hover:hover) and (pointer:fine){
  .a-zap:hover{
    width:210px; border-radius:34px; transform:none;
    box-shadow:0 10px 26px rgba(58,61,64,.32);
  }
  .a-zap:hover svg{opacity:0}
  .a-zap:hover .zap-txt{opacity:1}
}
.a-zap:active{box-shadow:0 4px 10px rgba(58,61,64,.28)}

@media (prefers-reduced-motion: reduce){
  .a-zap,.a-zap svg,.a-zap .zap-txt{transition:none}
  .a-zap:hover{width:60px; border-radius:50%}
  .a-zap:hover svg{opacity:1}
  .a-zap:hover .zap-txt{opacity:0}
}

/* ==========================================================================
   QUEBRA DE PALAVRAS LONGAS
   Em portugues sobra palavra grande - "Acompanhamento", "Endocrinologia",
   "Reabilitacao". Num cartao de 260px com 26px de recuo de cada lado sobram
   ~208px, e uma dessas em 22px/800 nao cabe. Sem ponto de quebra a palavra
   passava da borda e o overflow:hidden do cartao cortava a ultima letra.

   Nos titulos de cartao vale hifenizar: o <html> ja declara lang="pt-BR",
   entao o navegador corta na silaba certa ("Acompanha-mento").
   Nos titulos grandes, so a quebra de emergencia - hifen em manchete fica
   feio, e la sobra largura.
   ========================================================================== */
.b-card__h,.b-card__p,.b-dest__h,
.a-card__h,.a-card__p,.a-fh,.a-fp{
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
#site-a h1,#site-a h2,#site-b h1,#site-b h2,
.b-tit,.b-h1,.a-tit,.a-h1,.b-logo__n,.b-rod__l{
  overflow-wrap:break-word;
}

/* ==========================================================================
   TEXTO DOS BOTOES DA VERSAO ALEGRE - PRETO, EM TODOS OS ESTADOS
   Todas as variantes de botao da Alegre tem fundo claro (rosa da marca,
   branco ou creme), entao preto puro funciona em qualquer uma delas e
   encerra de vez a duvida de legibilidade:
       #000 sobre #F1AAA9 (rosa da marca) = 11,1:1
       #000 sobre #D99A99 (rosa escuro)   =  8,9:1
       #000 sobre #F5F5F5 (creme)         = 18,8:1
       #000 sobre #FFFFFF (branco)        =   21:1
   O minimo exigido e 4,5:1 - aqui sobra folga em tudo.

   O prefixo #site-a e proposital: da a esta regra especificidade maior que
   qualquer .a-btn--x:hover do arquivo da versao, entao nada sobrescreve.
   ========================================================================== */
#site-a .a-btn,
#site-a .a-cta,
#site-a .a-btn:hover,
#site-a .a-cta:hover,
#site-a .a-btn:focus-visible,
#site-a .a-cta:focus-visible,
#site-a .a-btn:active,
#site-a .a-cta:active{
  color:#000;
}

/* ==========================================================================
   CACHORRINHO TAMBEM NA VERSAO MARCANTE
   A marcacao dele ja existia nas duas versoes, mas todas as cores que ele
   usa (--laranja, --fur-escuro, --coral, --ameixa, --verde, --sombra-dog,
   --tinta, --creme, --n5, --raio, --raioG) estavam declaradas dentro de
   #site-a{...}. Dentro de #site-b elas simplesmente nao existiam, entao o
   cachorro era desenhado sem cor nenhuma e sumia no fundo.

   Aqui as mesmas variaveis sao redeclaradas no proprio quadro, apontando
   para a paleta da Marcante. Como sao variaveis, e nao valores fixos, o
   cachorro troca de cor junto com o tema (amarelo no canine, roxo no uva).
   ========================================================================== */
#site-b .a-brinca{
  --laranja:var(--acc1);      /* pelo */
  --fur-escuro:var(--acc2);   /* sombra do pelo */
  --coral:var(--acc2);        /* mancha do lombo */
  --ameixa:var(--ink);        /* focinho */
  --verde:var(--ink);         /* coleira */
  --sombra-dog:var(--mut3);   /* sombra no chao */
  --creme:var(--bg);        /* risco do chao */
  --tinta:var(--bg);        /* fundo do quadro: o rodape da Marcante e escuro,
                               entao o quadro clareia em vez de escurecer */
  --n5:var(--acc1);         /* brilho amarelo na base */
  --raio:var(--radS);
  --raioG:var(--rad)}