/* ====================================================================
   Geare (Rede Geare) — padrão de marca FertGroup
   Espelho do brand.css do FertGroup. Mantenha as classes (.fg-mainnav)
   e os tokens (--fg-*) com os mesmos nomes: os templates de header/footer
   JSON do Elementor os referenciam — renomear quebraria a portabilidade.
   --------------------------------------------------------------------
   Este arquivo carrega APENAS:
     1) as fontes licenciadas (@font-face);
     2) tokens CSS de referência da paleta;
     3) ajustes finos pontuais (se necessário).
   As cores, tipografia global, header e footer são definidos nos
   Global Settings / Theme Builder do Elementor — NÃO chumbar cor aqui.
   ==================================================================== */

/* ----- 1) Fontes licenciadas (arquivos em ../fonts) ----- */
@font-face{font-family:"The Seasons";src:url("../fonts/TheSeasons-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Light.ttf")   format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Italic.ttf")  format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Medium.ttf")  format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Bold.ttf")    format("truetype");font-weight:700;font-style:normal;font-display:swap}

/* ----- 2) Paleta OFICIAL (4 cores — padronização dos sites) -----
   Petróleo  #394F5A  · Pantone 432 CP   (primária)
   Off-white #F6F8F7  · Pantone 11-0601  (fundo claro)
   Rosa      #C96B92  · Pantone 7634 CP  (ÚNICO rosa — usar SÓ em acento/detalhe)
   Taupe     #CBB59A  · Pantone 7529 CP  (neutro quente)
   ⚠️ Não criar variações de rosa. Não usar rosa em grandes áreas/fundos.
*/
:root{
  --fg-petrol:#394F5A;
  --fg-offwhite:#F6F8F7;
  --fg-pink:#C96B92;
  --fg-taupe:#CBB59A;
}

/* ----- 3) Ajustes finos ----- */

/* Menu principal do header — sublinhado animado estilo V2:
   cresce ancorado à esquerda, transição suave, e NÃO desloca o texto
   (use ::after absoluto em vez do "Ponteiro" do Elementor).
   Requer a classe CSS "fg-mainnav" no widget de Menu principal,
   e o Ponteiro do widget definido como "Nenhum". */
.fg-mainnav .elementor-nav-menu .elementor-item{ position: relative; }
.fg-mainnav .elementor-nav-menu .elementor-item::after{
  content:""; position:absolute; left:0; bottom:0;
  width:0; height:2px; background: var(--fg-pink);
  transition: width .25s ease;
}
.fg-mainnav .elementor-nav-menu .elementor-item:hover::after,
.fg-mainnav .elementor-nav-menu .elementor-item.elementor-item-active::after{
  width:100%;
}

/* Padrão único de botão (corpo + header/footer): pill + padding + tipografia.
   Sobrepõe os valores chumbados inconsistentes do corpo (radius 0, 20px/700,
   paddings 20/100 e 20/0). As CORES continuam vindo dos Global Colors
   (primary=petróleo / secondary=rosa) e do Global Button. */
.elementor-button{
  border-radius: 40px !important;
  padding: 13px 34px !important;
  font-family: "DM Sans", sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

/* Hover global dos botões — escurece SÓ o fundo (texto branco fica intacto).
   Overlay escuro sobre o fundo + conteúdo (texto/ícone) numa camada acima. */
.elementor-button{ position: relative; }
.elementor-button::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  background: rgba(0,0,0,.16); opacity:0; transition: opacity .2s ease;
  pointer-events:none; z-index:0;
}
.elementor-button:hover::before{ opacity:1; }
.elementor-button > *{ position: relative; z-index:1; }

/* Gutter lateral em containers "boxed" — evita o conteúdo colar nas bordas
   quando a tela é menor que a largura boxed (1550). Vale site-wide
   (header, footer e seções do corpo). Mira o inner (sem !important). */
.e-con-boxed > .e-con-inner{
  padding-inline: clamp(16px, 3vw, 32px);
}

/* Botão pequeno da faixa utilitária (ex.: "Painel do Paciente") — secundário.
   Estilo "outline" (contorno petróleo, fundo transparente) p/ NÃO competir com
   o CTA primário (rosa, preenchido). Preenche no hover. Altura reduzida p/ caber
   na faixa. Padrão das clínicas: marcar o widget de botão com a classe "fg-util-btn". */
.fg-util-btn .elementor-button{
  padding: 6px 18px !important;
  font-size: 13px !important;
  background-color: transparent !important;
  color: var(--fg-petrol) !important;
  border: 1px solid var(--fg-petrol) !important;
}
.fg-util-btn .elementor-button:hover{
  background-color: var(--fg-petrol) !important;
  color: #fff !important;
}

/* Ícone de telefone nos endereços do footer — Font Awesome, rosa como detalhe.
   Padrão das clínicas: usar <i class="fas fa-phone fg-tel-icon"></i>. */
.fg-tel-icon{
  color: var(--fg-pink);
  margin-right: 6px;
  display: inline-block;
  transform: scaleX(-1); /* espelha o ícone (fica virado para a direita) */
}

/* Popup flutuante (WhatsApp) — a faixa invisível do popup cobria o canto direito
   (bloqueava o clique no hambúrguer e no header, inclusive no desktop). Quem
   captura é o .dialog-widget-content (pai). Torna o modal/área vazia click-through;
   só o conteúdo (botão) recebe clique. ⚠️ id do popup muda por clínica: ajustar. */
#elementor-popup-modal-2607,
#elementor-popup-modal-2607 .dialog-widget-content,
#elementor-popup-modal-2607 .dialog-message{ pointer-events: none !important; }
#elementor-popup-modal-2607 .dialog-message .elementor{ pointer-events: auto !important; }

/* Itens "só-mobile" do menu (Agendar consulta + Painel do Paciente) aparecem
   dentro do hambúrguer (≤1024) abaixo do Blog; ocultos no menu inline do
   desktop (≥1025 = viewport_lg). Aparência de botão no dropdown. */
@media ( min-width: 1025px ){
  .fg-only-mobile{ display: none !important; }
}

/* Itens do dropdown mobile alinhados ao logo (mesmo gutter da faixa) */
.elementor-nav-menu--dropdown a.elementor-item{
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}

/* CTAs no dropdown: largura cheia com respiro lateral (gutter) e inferior,
   centralizados, sem a borda/realce de item ativo do dropdown, e com as cores
   travadas em todos os estados (evita branco-no-branco e borda no hover). */
.fg-mob-cta a.elementor-item,
.fg-mob-portal a.elementor-item{
  display: block !important;
  text-align: center !important;
  border-radius: 40px !important;
  padding: 13px 18px !important;
  margin: 12px clamp(16px, 3vw, 32px) 0 !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.fg-mob-portal a.elementor-item{ margin-bottom: 20px !important; }

.fg-mob-cta a.elementor-item,
.fg-mob-cta a.elementor-item:hover,
.fg-mob-cta a.elementor-item:focus,
.fg-mob-cta a.elementor-item.elementor-item-active{
  background: var(--fg-pink) !important;
  color: #fff !important;
  border: 0 !important;
}
.fg-mob-portal a.elementor-item,
.fg-mob-portal a.elementor-item:hover,
.fg-mob-portal a.elementor-item:focus,
.fg-mob-portal a.elementor-item.elementor-item-active{
  border: 1px solid var(--fg-petrol) !important;
}
.fg-mob-portal a.elementor-item{ background: transparent !important; color: var(--fg-petrol) !important; }
.fg-mob-portal a.elementor-item:hover,
.fg-mob-portal a.elementor-item:focus,
.fg-mob-portal a.elementor-item.elementor-item-active{
  background: var(--fg-petrol) !important;
  color: #fff !important;
}

/* Mobile: centraliza os endereços do footer (acompanha o resto da coluna) */
@media ( max-width: 767px ){
  .elementor-location-footer .elementor-widget-text-editor{ text-align: center; }
}