/* GERADO POR scripts/montar_css.py — NÃO EDITAR À MÃO.
   Fontes, nesta ordem: _base.css, _ajustes.css
   Edite a fonte e rode: python3 scripts/bump-versao.py */

/* ======================================================================
   _base.css
   ====================================================================== */
/* ==========================================================================
   Base — tokens, reset e componentes compartilhados
   Réplica dos originais: paleta e tipografia extraídas do tema UiCore/Elementor.
   Mobile-first: a esmagadora maioria do tráfego é Android mobile.
   ========================================================================== */

/* ---------- Fonte (self-hosted: sem chamada a 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 {
  /* Paleta do original (--e-global-color-uicore_*) */
  --cor-primaria: #AB8855;   /* dourado da marca */
  --cor-titulo:   #000000;
  --cor-texto:    #343434;
  --cor-clara:    #FAFAFA;
  --cor-branco:   #FFFFFF;

  /* CTAs — cores diferentes por página, como no original */
  --cta-vsl:        #ff4f17;
  --cta-vsl-hover:  #1890ff;
  --cta-home:       #1890ff;
  --verde-whatsapp: #04b348;

  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --largura-max: 1140px;
  --raio: 6px;
}

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-weight: 500;
  color: var(--cor-texto);
  background: var(--cor-branco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; color: var(--cor-titulo); line-height: 1.2; }
p { margin: 0 0 1em; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- Acessibilidade ---------- */
:focus-visible {
  outline: 3px solid var(--cta-home);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-apenas {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ==========================================================================
   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; }
}

/* ======================================================================
   _ajustes.css
   ====================================================================== */
/* ==========================================================================
   Camada própria — só o que o CSS do tema não cobre.
   O layout inteiro vem de site.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)); }
}

/* ==========================================================================
   HERO DA HOME NO CELULAR — o vídeo precisa aparecer sem rolagem
   --------------------------------------------------------------------------
   O Elementor fixa, em `@media(max-width:767px)`, título 40px e os dois textos
   de apoio em 24px, com 10px de padding em volta de cada bloco. Medido num
   viewport de 390x640 (um iPhone com as barras do navegador abertas): o player
   termina 88px abaixo da dobra e o visitante do anúncio não vê o vídeo.

   Aqui os três textos passam a escalar com a LARGURA da tela, via clamp, em vez
   de ter um tamanho fixo. Um `clamp(min, proporcional, max)` cobre de um Android
   de 320px a um Pro Max de 430px sem breakpoint novo, e mantém a hierarquia
   entre os três: título > apoio > chapéu.

   A especificidade repete a cadeia do Elementor e acrescenta `body`, porque as
   regras dele nascem dentro de uma media query de mesma largura — empatar não
   basta, e `!important` sozinho não venceria a ordem de cascata do arquivo.
   ========================================================================== */
@media (max-width: 767px) {

  /* chapéu: "Consulta VIP 3D" */
  body .elementor-979 .elementor-element.elementor-element-b3980f1 .elementor-heading-title {
    font-size: clamp(11px, 3.4vw, 15px) !important;
    line-height: 1.2 !important;
    letter-spacing: .02em;
  }

  /* título: "Descubra como Rejuvenescer..." */
  body .elementor-979 .elementor-element.elementor-element-13a6f5d .elementor-heading-title {
    font-size: clamp(21px, 6.4vw, 30px) !important;
    line-height: 1.08 !important;
  }

  /* apoio: "Receba uma avaliação exclusiva..." */
  body .elementor-979 .elementor-element.elementor-element-4aef52a .elementor-heading-title {
    font-size: clamp(12.5px, 3.8vw, 17px) !important;
    line-height: 1.3 !important;
  }

  /* Os 10px de padding de cada bloco somavam 20px entre um texto e o próximo,
     e 40px antes do player. Encolhidos, sem encostar um texto no outro. */
  body .elementor-979 .elementor-element.elementor-element-b3980f1 > .elementor-widget-container {
    margin: 2px 0 4px 0 !important;
  }
  body .elementor-979 .elementor-element.elementor-element-13a6f5d > .elementor-widget-container {
    padding: 2px 8px !important;
  }
  body .elementor-979 .elementor-element.elementor-element-4aef52a > .elementor-widget-container {
    padding: 4px 8px 6px 8px !important;
  }

  /* O botão logo abaixo do player é redundante no celular: a barra fixa de CTA
     já fica presa à base da tela, sempre visível. Dois botões com a mesma ação
     a poucos pixels um do outro só empurram o vídeo para fora da dobra.
     No desktop ele continua, porque lá não existe barra fixa. */
  body .elementor-979 .elementor-element.elementor-element-b1ea455 {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   No CELULAR a foto do hero NÃO é baixada — decisão do Phillip, 21/09/2026
   (home e /vsl/; a /vsl/ ficou de fora até 09/10/2026 e baixava a foto)

   Ela é `background-image` do container e, medido no Lighthouse, era o elemento
   de LCP da página: 810 ms de espera até começar a baixar (só é descoberta
   depois dos 515 KB de CSS) e 1.600 ms de atraso de renderização.

   E ela nem aparece: atrás dela vêm as headlines e o player, e a película que
   o contraste exigia é de 74%. Amostrando a imagem num canvas, a cor média sob
   essa película dá **#0b0a0a** — ou seja, quase preto. Trocar a foto por essa
   cor não muda o que o visitante vê e tira o maior elemento da primeira tela do
   caminho crítico: o LCP passa a ser o texto, que pinta junto com o CSS.

   O gradiente sutil evita o chapado de uma cor sólida pura. No desktop nada
   muda: lá a foto aparece de verdade, e o `<link rel=preload>` dela no HTML
   leva `media="(min-width: 768px)"` para não ser baixada no celular.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body .elementor-979 .elementor-element.elementor-element-03b5d60,
  body .elementor-1064 .elementor-element.elementor-element-03b5d60 {
    background-image: none !important;
    background-color: #0b0a0a;
  }

  body .elementor-979 .elementor-element.elementor-element-03b5d60::before,
  body .elementor-1064 .elementor-element.elementor-element-03b5d60::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, #14100f 0%, #0b0a0a 55%, #070606 100%);
  }

  /* O conteúdo do container é `static`: sem isto ele ficaria debaixo do fundo. */
  body .elementor-979 .elementor-element.elementor-element-03b5d60 > .e-con-inner,
  body .elementor-1064 .elementor-element.elementor-element-03b5d60 > .e-con-inner {
    position: relative;
    z-index: 1;
  }
}

/* --------------------------------------------------------------------------
   A altura do player é reservada pelo PRÓPRIO EMBED do VTurb.

   O embed atual (atualizado em 21/09/2026 a partir do painel) traz dentro do
   `<vturb-smartplayer>` um `div.vturb-player-placeholder` com
   `padding: 56.25% 0 0`, que é a forma oficial de segurar a proporção 16:9 até
   o script montar. Antes o embed vinha sem ele, o elemento media ZERO e a
   página inteira pulava quando o player aparecia — era o layout shift de 0,157.

   Por isso não existe mais um `aspect-ratio` nosso aqui: seria uma segunda
   regra disputando com a do fornecedor. Se o placeholder sumir de um embed
   futuro, o shift volta, e o lugar de corrigir é o embed, não este arquivo.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   CELULAR, três correções na parte de baixo da home (21/09/2026)

   1) A foto da "Consulta Estética Lipo de Papada" aparecia como uma faixa de
      poucos pixels.

   O bloco é uma seção de duas colunas. A da direita tem o texto; a da esquerda
   não tem conteúdo nenhum, só um widget Spacer, e a foto é `background-image`
   dessa coluna vazia. No desktop isso funciona por acidente feliz, porque as
   duas colunas ficam lado a lado e o flex estica a coluna da foto até a altura
   do texto. No celular elas empilham e a coluna da foto passa a valer a altura
   do próprio Spacer.

   Só que o Spacer não tem altura. O CSS exportado do WordPress declara
   `--spacer-size` (350px no desktop, 400px no celular) mas quem lê essa
   variável é `.elementor-spacer-inner`, regra que mora no frontend.min.css do
   Elementor e nunca foi copiada para cá. A variável existe e ninguém consome,
   então a coluna colapsa.

   A correção devolve só essa linha, e só para este Spacer e só no celular,
   em vez de reativar todos os Spacers da página, que hoje valem zero e estão
   assim no layout já aprovado.

   2) A foto de fundo do bloco "Oferta Especial" nunca chega a ser vista.

   Ela é `background-size: cover` na seção inteira e fica inteiramente atrás do
   cartão branco com os valores. São 61 KB baixados para não aparecer, então no
   celular ela não é mais pedida. No desktop continua igual.

   3) O título "Clique e Reserve" quebrava em duas linhas.

   O CSS do WordPress baixa esse título para 21px em tablet e depois o devolve
   para 50px no celular, que é a medida do desktop. Não é intencional, é a
   ordem em que o Elementor escreve os breakpoints. O `clamp` mantém o título
   grande sem estourar a linha em tela estreita.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 1) devolve a altura do Spacer que segura a foto da Lipo de Papada */
  body .elementor-979 .elementor-element.elementor-element-c051cc1 .elementor-spacer-inner {
    height: var(--spacer-size);
  }

  /* 2) a arte de fundo da Oferta não é baixada no celular */
  body .elementor-979 .elementor-element.elementor-element-9b7a22a:not(.elementor-motion-effects-element-type-background),
  body .elementor-979 .elementor-element.elementor-element-9b7a22a > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none;
  }

  /* 3) "Clique e Reserve" em uma linha só */
  body .elementor-979 .elementor-element.elementor-element-875caae .elementor-heading-title {
    font-size: clamp(22px, 7vw, 32px);
    line-height: 1.2;
  }
}


/* VSL 2026 (09/10/2026): no celular o VTurb monta o player 9:16. Até ele montar, o placeholder do embed
   segura 16:9; aqui ele já reserva a altura em pé para a página não pular. Até 450 px o player vertical
   ocupa 100% da largura (regra do próprio player.js). Vale para a home e a /vsl/. */
@media (max-width: 450px) {
  vturb-smartplayer .vturb-player-placeholder { padding-top: 177.78% !important; }
}