/* ====================================================================
   Fertility — 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). */
.elementor:not([data-elementor-type="jet-listing-items"]) > .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;
  line-height: 26px !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) */
}

/* (Fertility NÃO tem o popup flutuante do WhatsApp como o Geare — o fix de
   click-through do popup foi OMITIDO de propósito. Os popups da Fertility
   (SAC, Agendar consulta, Trabalhe Conosco, etc.) são de clique/menu, sem a
   faixa de altura total que bloqueava o clique. Se um dia aparecer um popup que
   abre no page_load e trava clique, reintroduzir o bloco mirando
   #elementor-popup-modal-<ID>.) */

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

/* Setas do carrossel de listagem (JetEngine) — rosa, hover escurece (estilo botão) */
.jet-listing-grid .slick-arrow, .jet-listing-grid .jet-arrow,
.jet-listing-grid__slider .slick-arrow{
  background-color:#C96B92 !important; color:#fff !important; border-color:#C96B92 !important;
}
.jet-listing-grid .slick-arrow:hover, .jet-listing-grid .jet-arrow:hover,
.jet-listing-grid__slider .slick-arrow:hover{
  background-color:#A95A7B !important; border-color:#A95A7B !important;
}

/* Hero de página: título "Premium Dual Header" menor no mobile (não cortar) */
@media (max-width: 767px){
  .premium-dual-header-first-span, .premium-dual-header-second-header{
    font-size: clamp(26px, 8vw, 40px) !important;
  }
}
/* Breadcrumb (icon-list com separador ») -> petróleo no texto + ícone, qualquer página. Não toca o rodapé. */
.elementor-icon-list-items:has(.fa-angle-double-right) .elementor-icon-list-text,
.elementor-icon-list-items:has(.fa-angle-double-right) .elementor-icon-list-icon i{
  color:#394F5A !important;
}

/* "Receba Notícias": disclaimer (heading logo após o form) — DM Sans 14px + petróleo */
.elementor-widget-form + .elementor-widget-heading .elementor-heading-title{
  font-family:"DM Sans", sans-serif !important; font-size:14px !important; color:#394F5A !important;
}

/* === Menu mobile (hambúrguer) — padrão clínicas ===
   Requer 2 itens no menu: "Agendar consulta" (classes: fg-mob-cta fg-only-mobile)
   e "Painel do Paciente" (classes: fg-mob-portal fg-only-mobile). */
/* Itens petróleo + texto branco, ativo/hover rosa (exclui os botões CTA) */
.elementor-nav-menu--dropdown li:not(.fg-mob-cta):not(.fg-mob-portal) > a.elementor-item{
  background:#394F5A !important; color:#fff !important;
}
.elementor-nav-menu--dropdown li:not(.fg-mob-cta):not(.fg-mob-portal) > a.elementor-item:hover,
.elementor-nav-menu--dropdown li:not(.fg-mob-cta):not(.fg-mob-portal) > a.elementor-item.elementor-item-active{
  background:#C96B92 !important; color:#fff !important;
}
/* Botões CTA: Painel outline BRANCO (visível no petróleo) + sem divider */
.elementor-nav-menu--dropdown li.fg-mob-portal > a.elementor-item{
  background:transparent !important; color:#fff !important; border:1px solid #fff !important;
}
.elementor-nav-menu--dropdown li.fg-mob-cta > a.elementor-item{ border:0 !important; }
.elementor-nav-menu--dropdown li.fg-mob-cta,
.elementor-nav-menu--dropdown li.fg-mob-portal{ border:0 !important; }

/* === Submenu do header via CSS (mais confiável que o widget dropdown_*) — padrão FertGroup ===
   Origem: melhoria do Fertility (Claude da esposa). Fundo petróleo, texto branco, item rosa
   no hover/ativo (cantos 5/20/5/20), SEM divider. z-index 999 abre o dropdown acima do hero. */
.elementor-location-header{ position: relative; z-index: 999; }
.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header ul.sub-menu{ background-color: var(--fg-petrol) !important; }
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item,
.elementor-location-header ul.sub-menu a.elementor-sub-item{ color:#fff !important; border:0 !important; }
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active,
.elementor-location-header ul.sub-menu a.elementor-sub-item:hover,
.elementor-location-header ul.sub-menu a.elementor-sub-item.elementor-item-active{
  background-color: var(--fg-pink) !important; color:#fff !important; border-radius: 5px 20px 5px 20px;
}

/* Setinhas (toggle de submenu) brancas no menu mobile — acompanham o texto branco. */
.elementor-nav-menu--dropdown .sub-arrow,
.elementor-nav-menu--dropdown .sub-arrow i,
.elementor-nav-menu--dropdown .sub-arrow svg{ color:#fff !important; fill:#fff !important; }

/* Popup flutuante do WhatsApp (#elementor-popup-modal-22767): a "caixa invisível"
   ocupava a tela e engolia o clique do menu/banner. Deixa a caixa passar o clique;
   só o botão (a/img/button) dentro dela continua clicável. ID veio do clone (= prod). */
#elementor-popup-modal-22767,
#elementor-popup-modal-22767 .dialog-widget-content,
#elementor-popup-modal-22767 .elementor-element{ pointer-events:none !important; }
#elementor-popup-modal-22767 a,
#elementor-popup-modal-22767 img,
#elementor-popup-modal-22767 button{ pointer-events:auto !important; }