/* ==========================================================================
   Camada própria — só o que o CSS do tema não cobre.
   O layout inteiro vem de original.css (o mesmo CSS do site no ar).
   ========================================================================== */

/* Fonte local, para não depender de fonts.gstatic.com */
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  /* subset latin — cobre português */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



:root {
  --cor-primaria: #AB8855;
  --cor-titulo: #000;
  --cor-texto: #343434;
  --cor-branco: #fff;
  --verde-whatsapp: #04b348;
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --raio: 6px;
}

/* Acessibilidade: o tema não define foco visível */
:focus-visible { outline: 3px solid #1890ff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* CTA que substituiu o formulário Elementor (gatilho da tag Lead) */
.vivax-cta-form {
  font-family: var(--fonte);
  cursor: pointer;
  border: 0;
}

/* ==========================================================================
   Pop-up pré-WhatsApp — a única divergência deliberada do original.
   Dois campos só: nome e WhatsApp. Cada campo a mais derruba conversão.
   ========================================================================== */
.vivax-popup-fundo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
}
.vivax-popup-fundo[data-aberto='true'] { display: flex; }

.vivax-popup {
  background: var(--cor-branco);
  border-radius: 14px;
  max-width: 420px;
  width: 100%;
  padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  position: relative;
  animation: vivax-sobe .25s ease-out;
}

@keyframes vivax-sobe {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vivax-popup h2 {
  font-size: 1.32rem;
  margin-bottom: .35em;
  text-align: center;
}

.vivax-popup .sub {
  text-align: center;
  font-size: .95rem;
  color: var(--cor-texto);
  margin-bottom: 1.4em;
}

.vivax-popup label {
  display: block;
  font-size: .86rem;
  font-weight: 600;
  color: var(--cor-titulo);
  margin-bottom: 5px;
}

.vivax-popup input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--fonte);
  font-size: 1rem;
  color: var(--cor-titulo);
  border: 1.5px solid #d8d8d8;
  border-radius: var(--raio);
  margin-bottom: 14px;
  background: var(--cor-branco);
}
.vivax-popup input:focus {
  border-color: var(--cor-primaria);
  outline: none;
  box-shadow: 0 0 0 3px rgba(171, 136, 85, .22);
}
.vivax-popup input[aria-invalid='true'] { border-color: #c92a2a; }

.vivax-popup .erro {
  color: #c92a2a;
  font-size: .82rem;
  margin: -10px 0 12px;
  min-height: 1em;
}

.vivax-popup button[type='submit'] {
  width: 100%;
  padding: 15px;
  font-family: var(--fonte);
  font-size: 1.04rem;
  font-weight: 700;
  color: #fff;
  background: var(--verde-whatsapp);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: filter .18s ease;
}
.vivax-popup button[type='submit']:hover:not(:disabled) { filter: brightness(1.08); }
.vivax-popup button[type='submit']:disabled { opacity: .6; cursor: wait; }

.vivax-popup .fechar {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: 0;
  font-size: 1.7rem; line-height: 1;
  color: #999; cursor: pointer;
  padding: 6px 10px;
}
.vivax-popup .fechar:hover { color: var(--cor-titulo); }

.vivax-popup .aviso {
  font-size: .74rem;
  color: #777;
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.45;
}

/* ==========================================================================
   Botão flutuante de WhatsApp (equivalente ao plugin Join.chat)
   Comportamento replicado: direita, aparece após 60 s, balão após 10 s.
   ========================================================================== */
.vivax-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9990;
  display: none;
}
.vivax-flutuante[data-visivel='true'] {
  display: block;
  animation: vivax-sobe .3s ease-out;
}

.vivax-flutuante a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  background: var(--verde-whatsapp);
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
  transition: transform .18s ease;
}
.vivax-flutuante a:hover { transform: scale(1.07); }
.vivax-flutuante svg { width: 32px; height: 32px; fill: #fff; }

.vivax-flutuante .balao {
  position: absolute;
  right: 72px;
  bottom: 8px;
  background: #fff;
  color: var(--cor-texto);
  padding: 11px 15px;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  font-size: .87rem;
  width: max-content;
  max-width: 62vw;
  display: none;
}
.vivax-flutuante .balao[data-visivel='true'] { display: block; }

@media (max-width: 767px) {
  .vivax-flutuante { right: 14px; bottom: 14px; }
  .vivax-flutuante .balao { max-width: 56vw; font-size: .82rem; }
}


/* ==========================================================================
   Cabeçalho — o tema anima a entrada do header via JavaScript próprio (que
   não carregamos, junto com jQuery). Sem ele o branding fica em opacity 0 e
   os links herdam preto. Aqui fixamos o estado final que o original mostra.
   ========================================================================== */
.uicore-navbar .uicore-branding { opacity: 1 !important; }

.uicore-navbar {
  --uicore-header--menu-typo-c: #ffffff;
  --uicore-header--menu-typo-ch: var(--cor-primaria);
}
/* O tema usa var(--uicore-header--menu-typo-c, "#070707") — o fallback está
   entre aspas, o que é CSS inválido, então a cor cai para preto sobre o fundo
   preto do header. Forçamos o branco que o original exibe. */
.uicore-navbar .uicore-nav-menu,
.uicore-navbar .uicore-nav-menu li,
.uicore-navbar .uicore-nav-menu li a,
.uicore-navbar .uicore-menu li,
.uicore-navbar .uicore-menu li a,
.uicore-navbar .uicore-custom-area,
.uicore-navbar .uicore-extra a { color: #fff !important; }

.uicore-navbar .uicore-nav-menu li a:hover,
.uicore-navbar .uicore-menu li:hover > a { color: var(--cor-primaria) !important; }

/* O botão do menu usa o dourado da marca */
.uicore-navbar .uicore-btn {
  background-color: var(--cor-primaria);
  color: #000;
}

/* Os itens do menu entram com opacity 0 e o JS do tema os revela um a um.
   Sem esse JS ficariam invisíveis para sempre. */
.uicore-navbar .uicore-menu > li,
.uicore-navbar .uicore-menu > li > a,
.uicore-navbar .uicore-nav-menu li,
.uicore-navbar .uicore-nav-menu li > a,
.uicore-navbar .uicore-extra,
.uicore-navbar .uicore-extra * { opacity: 1 !important; }

/* Fundo da página: no original vem do CSS do tema-filho (style.css, que veio
   vazio no download). Sem isso a página fica sobre o preto do navegador. */
body { background-color: #fff; }
/* Também é branco na /vsl/, apesar de a página inteira ser preta: conferido
   no original no ar, que tem `.uicore-body-content` em #fff. Nunca aparece,
   porque header, seções e rodapé cobrem toda a altura. Deixar como está — é
   réplica, e pintar de preto seria divergir por conta própria. */
.uicore-body-content { background-color: #fff; }

/* ==========================================================================
   Cabeçalho no mobile — de volta a uma linha só.

   Em 375px o nav tem 356px úteis, a marca ocupa 221px (logo de 36px de altura
   rende 201px de largura) e o grupo da direita, 164px. Soma 385px: com o
   flex-wrap: wrap do tema, quebrava em duas linhas e o cabeçalho passava a
   comer 107px de altura, com logo e botão empilhados à esquerda.

   Faltavam 29px. Em vez de encolher o logo abaixo do tamanho do original, o
   botão sai do cabeçalho e passa a viver na barra fixa da base — o mesmo CTA,
   num lugar mais alcançável com o polegar. Sobram logo + hambúrguer: 257px.
   ========================================================================== */
@media (max-width: 767px) {
  .uicore-navbar .uicore-mobile-head-right .uicore-cta-wrapper { display: none; }

  /* Trava a linha única mesmo que o logo mude de tamanho um dia */
  .uicore-navbar nav.uicore.elementor-container { flex-wrap: nowrap; }
  .uicore-navbar .uicore-branding { min-width: 0; }
  .uicore-navbar .uicore-branding .uicore-logo { max-width: 100%; }
}

/* ==========================================================================
   Barra de CTA presa à base da tela — só no mobile.

   Recebe o botão que saiu do cabeçalho. A frase acima dele e o texto do botão
   vêm do config.js e já existem na página: os dois são copiados da seção de
   oferta, para a página seguir sendo réplica.
   ========================================================================== */
.vivax-barra-fixa { display: none; }

@media (max-width: 767px) {
  .vivax-barra-fixa {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9980;                 /* abaixo do pop-up (9999), acima do resto */
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .3);
    font-family: var(--fonte);
    /* safe-area: no iPhone com barra de gestos o botão não encosta na borda */
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .vivax-barra-fixa .frase {
    margin: 0 0 8px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
  }

  .vivax-barra-fixa .botao {
    display: block;
    width: 100%;
    padding: 14px 12px;
    font-family: var(--fonte);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #000;
    background: var(--cor-primaria);
    border: 0;
    border-radius: 100px;
    cursor: pointer;
  }
  .vivax-barra-fixa .botao:active { filter: brightness(.94); }
}
/* A folga do rodapé sob a barra fica no fim deste arquivo: o rodapé é
   definido depois daqui e usa o atalho `padding`, que sobrescreveria um
   padding-bottom declarado neste ponto. */

/* ==========================================================================
   Vídeos do YouTube — o widget do Elementor monta o iframe por JS.
   A facade abaixo ocupa exatamente o mesmo espaço que o iframe ocuparia.
   ========================================================================== */
/* O Elementor define a proporção de cada vídeo em --video-aspect-ratio
   (0.5625 nos verticais, 1.7777 no horizontal): altura = largura / valor.
   Usar aspect-ratio reproduz isso sem depender do JS do tema. */
.elementor-widget-video .elementor-widget-container { position: relative; }

/* O .elementor-wrapper (recriado em vivax.js) já recebe a proporção pelo CSS
   do tema; o facade só preenche esse espaço. */
.vivax-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.elementor-widget-video .elementor-wrapper { position: relative; overflow: hidden; }
.vivax-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; }
.vivax-video::after {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 48px; border-radius: 12px; background: rgba(255, 0, 0, .9);
}
.vivax-video::before {
  content: '';
  position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%);
  width: 0; height: 0; z-index: 2;
  border-left: 17px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.vivax-video:hover img { opacity: 1; }
.vivax-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Galeria da clínica — 4 por linha, itens quadrados, como no original.
   ========================================================================== */
.vivax-galeria-grade {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.vivax-galeria-grade > * { width: auto !important; margin: 0 !important; }
.vivax-galeria-grade img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.vivax-galeria-grade a { display: block; }

/* No mobile o original exibe uma foto por linha, em largura cheia. */
@media (max-width: 767px) {
  .vivax-galeria-grade { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ — indicador de abrir/fechar.
   O markup traz <i class="ti ti-angle-down"> (fonte Themify), que o servidor
   original devolve 404. Desenhamos o chevron em CSS.
   No DOM o ícone vem ANTES do texto; `order` o joga para a direita.
   ========================================================================== */
.bdt-ep-accordion-icon i { display: none !important; }

.bdt-ep-accordion-title { display: flex; align-items: center; cursor: pointer; }

.bdt-ep-accordion-icon {
  order: 2;              /* vai para o fim da linha */
  margin-left: auto;     /* empurra para a extremidade direita */
  color: var(--cor-primaria);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
}

/* Uma seta por vez: fechada por padrão, aberta quando o item tem .bdt-open */
.bdt-ep-accordion-icon-closed { display: inline-flex; align-items: center; justify-content: center; }
.bdt-ep-accordion-icon-opened { display: none; }
.bdt-ep-accordion-item.bdt-open .bdt-ep-accordion-icon-closed { display: none; }
.bdt-ep-accordion-item.bdt-open .bdt-ep-accordion-icon-opened { display: inline-flex; align-items: center; justify-content: center; }

.bdt-ep-accordion-icon-closed::before,
.bdt-ep-accordion-icon-opened::before {
  content: '';
  width: 11px;
  height: 11px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
/* aberto: aponta para cima */
.bdt-ep-accordion-icon-opened::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}


/* ==========================================================================
   Blocos do Instagram — embeds dos depoimentos.
   O embed oficial (/embed/) é servido pelo próprio Instagram num iframe:
   sem embed.js de terceiro e sem token de API.
   ========================================================================== */
.vivax-insta-secao { padding: 40px 0; background: #fff; }

.vivax-insta-grade {
  max-width: 1360px;
  width: 95%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: center;
}

.vivax-insta-item {
  width: 100%;
  max-width: 400px;
  /* altura do embed do Instagram sem legenda, para a largura da coluna */
  height: 640px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
}

/* Vídeo hospedado por nós — o caminho definitivo.
   Com preload="none" + poster, nada é baixado até a pessoa dar play. */
.vivax-insta-item--video { border: 0; background: #000; }
.vivax-insta-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* Provisório: card que leva ao post no Instagram
   (o Instagram devolve X-Frame-Options: DENY e não permite mais iframe) */
.vivax-insta-item--link { border: 0; }
.vivax-insta-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  transition: filter .2s ease, transform .2s ease;
}
.vivax-insta-link:hover { filter: brightness(1.08); transform: translateY(-2px); }

.vivax-insta-icone {
  width: 56px; height: 56px;
  border: 3px solid #fff;
  border-radius: 16px;
  position: relative;
}
.vivax-insta-icone::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  border: 3px solid #fff;
  border-radius: 50%;
}
.vivax-insta-icone::after {
  content: '';
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px;
  background: #fff;
  border-radius: 50%;
}

.vivax-insta-rotulo {
  font-family: var(--fonte);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

@media (min-width: 600px) {
  .vivax-insta-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .vivax-insta-secao { padding: 80px 0; }
  .vivax-insta-grade { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .vivax-insta-item { height: 600px; }
}

/* ==========================================================================
   Título dos blocos do Instagram
   ========================================================================== */
.vivax-insta-titulo {
  max-width: 1360px;
  width: 95%;
  margin: 0 auto .8em;
  text-align: center;
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  color: var(--cor-titulo);
}
@media (min-width: 768px) {
  .vivax-insta-titulo { font-size: 80px; margin-bottom: .55em; }
}

/* ==========================================================================
   Rodapé — acréscimo ao original (a home do site atual não tem rodapé).
   Sem telefone e sem e-mail: no rodapé seriam canais de fuga do funil.
   ========================================================================== */
.vivax-rodape {
  background: #000;
  color: rgba(255, 255, 255, .72);
  font-family: var(--fonte);
  padding: 54px 20px 46px;
  text-align: center;
}

.vivax-rodape-inner {
  max-width: 900px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.vivax-rodape-logo { width: 190px; height: auto; }

.vivax-rodape-legal { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; }
.vivax-rodape-legal a {
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.vivax-rodape-legal a:hover { color: var(--cor-primaria); text-decoration: underline; }

.vivax-rodape p { margin: 0; }

.vivax-rodape-rt {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
}

.vivax-rodape-inst {
  color: rgba(255, 255, 255, .68);
  font-size: 15px;
  line-height: 1.7;
}

.vivax-rodape-copy {
  color: rgba(255, 255, 255, .5);
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding-top: 20px;
  width: 100%;
  max-width: 620px;
}

@media (min-width: 768px) {
  .vivax-rodape { padding: 70px 20px 56px; }
  .vivax-rodape-inner { gap: 24px; }
}

/* No mobile a barra de CTA é fixa e cobre o fim da página. O rodapé reserva a
   altura dela (91px) mais um respiro, para que o CNPJ e o copyright não fiquem
   embaixo do botão. A folga vai DENTRO do rodapé, que é preto — no `body`
   viraria uma faixa branca abaixo dele.

   Precisa vir depois das regras acima: elas usam o atalho `padding` e, com a
   mesma especificidade, quem estiver por último vence. */
@media (max-width: 767px) {
  .vivax-rodape { padding-bottom: calc(46px + 100px + env(safe-area-inset-bottom, 0px)); }
}