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

/* Cor padrão dos botões de conteúdo: rosa preenchido (CTA da marca). O Global
   Button do site estava cinza. Os botões outline (.fg-util-btn) e o header têm
   regra própria mais específica, então não são afetados. */
.elementor-button{ background-color: var(--fg-pink) !important; color:#fff !important; }

/* Botão do Elementor SEM href = rótulo decorativo (link vazio), NÃO um CTA.
   As regras acima (rosa + padding/fonte de CTA) davam cara de clicável e
   tamanho grande. Restaura o rótulo discreto original: off-white + petróleo,
   pequeno, sem hover, não clicável. */
a.elementor-button:not([href]){
  background-color: #F5DCE6 !important;   /* fundo rosa claro (pill discreto, estilo rótulo) */
  color: #C96B92 !important;              /* texto rosa da marca */
  border-radius: 40px !important;         /* pill arredondado */
  padding: 6px 22px !important;
  font-size: var(--e-global-typography-h6-font-size, 14px) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none;
}
a.elementor-button:not([href])::before{ display: none !important; }

/* Botão de envio do Forminator (azul padrão do form) → rosa da marca.
   O Forminator monta o form via JS e injeta a cor do botão; cobrimos os
   seletores gerais + o módulo específico (8533) com !important. */
.forminator-ui .forminator-button,
.forminator-custom-form .forminator-button,
.forminator-button.forminator-button-submit,
#forminator-module-8533 .forminator-button-submit,
#forminator-module-8533 .forminator-button{
  background: #C96B92 !important;
  background-color: #C96B92 !important;
  border-color: #C96B92 !important;
  color: #fff !important;
  border-radius: 40px !important;   /* pill, igual ao .ls-cta "Agende sua consulta" */
  padding: 13px 32px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}
.forminator-ui .forminator-button:hover,
.forminator-custom-form .forminator-button:hover,
.forminator-button.forminator-button-submit:hover,
#forminator-module-8533 .forminator-button:hover{
  background: #b15a7f !important;
  background-color: #b15a7f !important;
  border-color: #b15a7f !important;
}

/* Labels do formulário Forminator: CAIXA ALTA + petróleo (estavam minúsculas/cinza). */
.forminator-ui.forminator-custom-form .forminator-label,
.forminator-custom-form .forminator-label,
#forminator-module-8533 .forminator-label{
  text-transform: uppercase !important;
  color: #394F5A !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

/* Dropdown do select "Assunto" — o Forminator usa estrutura PRÓPRIA
   (.forminator-select-dropdown), não .select2-container. Estava transparente
   (vazava por cima do form). Fundo branco + opções petróleo + hover petróleo. */
.forminator-select-dropdown{
  background: #fff !important;
  border: 1px solid #d8dede !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.10) !important;
}
.forminator-select-dropdown .select2-results__options{ background:#fff !important; }
.forminator-select-dropdown .select2-results__option{
  color: #394F5A !important;
  background: #fff !important;
}
.forminator-select-dropdown .select2-results__option--highlighted{
  background-color: #394F5A !important;   /* hover/realce = petróleo */
  color: #fff !important;
}
.forminator-select-dropdown .select2-results__option--selected,
.forminator-select-dropdown .select2-results__option[aria-selected="true"]{
  background-color: #F5DCE6 !important;   /* já selecionado = rosa claro */
  color: #394F5A !important;
}

/* "INFRAESTRUTURA COMPLETA PARA RESULTADOS CONFIÁVEIS" (Nossa Infraestrutura,
   widget dcd9524): estava rosa (BSR teal→rosa). Por pedido, só este em petróleo. */
.elementor-element-dcd9524 .elementor-heading-title{ color:#394F5A !important; }

/* ----- PÁGINA DE SERVIÇO (CPT servicos) — single-servicos.php -----
   Layout: coluna principal (título + imagem destacada + texto) + painel
   lateral petróleo com o formulário de agendamento (Forminator 8531). */
.ls-servico{ padding:48px 0 64px; }
/* sem align-items:flex-start → o aside ESTICA até a altura da coluna principal,
   dando espaço pro form sticky "grudar" ao rolar. */
.ls-servico__wrap{ display:flex; gap:48px; align-items:stretch; }
.ls-servico__main{ flex:1 1 auto; min-width:0; }
.ls-servico__title{ font-family:"The Seasons",serif; font-weight:700; color:var(--fg-petrol); font-size:clamp(30px,4vw,46px); line-height:1.12; margin:0 0 26px; }
.ls-servico__img{ margin:0 0 26px; }
.ls-servico__img img{ width:100%; height:auto; display:block; border-radius:14px; }
.ls-servico__content{ color:#475862; font-size:17px; line-height:1.75; }
.ls-servico__content p{ margin:0 0 18px; }
.ls-servico__content p:last-child{ margin-bottom:0; }
.ls-servico__aside{ flex:0 0 380px; max-width:380px; }
.ls-servico__form{ background:var(--fg-petrol); border-radius:18px; padding:34px 30px; position:sticky; top:24px; }
.ls-servico__form-title{ font-family:"The Seasons",serif; color:#fff !important; font-weight:700; font-size:26px; margin:0 0 22px; line-height:1.15; }
/* form sobre o painel petróleo: labels/textos em branco */
.ls-servico__form .forminator-label,
.ls-servico__form .forminator-label *{ color:#fff !important; }
.ls-servico__form .forminator-button{ width:100%; justify-content:center; }
@media (max-width:980px){
  .ls-servico__wrap{ flex-direction:column; gap:32px; }
  .ls-servico__aside{ flex-basis:auto; max-width:none; width:100%; }
  .ls-servico__form{ position:static; }
}

/* Compartilhe (botões na marca: petróleo, hover rosa) */
.ls-servico__share{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:36px 0 0; padding-top:28px; border-top:1px solid #e7ecea; }
.ls-servico__share-label{ font-weight:700; color:var(--fg-petrol); margin-right:2px; }
.ls-share{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:30px; background:var(--fg-petrol); color:#fff !important; text-decoration:none; font-size:14px; font-weight:600; transition:background .2s; }
.ls-share i{ font-size:15px; }
.ls-share:hover{ background:var(--fg-pink); color:#fff !important; }

/* "Você também pode se interessar por" — cards de serviços relacionados */
.ls-servico__related{ margin:46px 0 0; }
.ls-servico__related-title{ font-family:"The Seasons",serif; font-weight:700; color:var(--fg-petrol); font-size:24px; margin:0 0 22px; }
.ls-servico__related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:22px; }
.ls-rel-card{ position:relative; display:block; border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:var(--fg-petrol); text-decoration:none; }
.ls-rel-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.ls-rel-card:hover img{ transform:scale(1.06); }
.ls-rel-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(57,79,90,.88) 0%, rgba(57,79,90,.15) 55%, rgba(57,79,90,0) 100%); }
.ls-rel-card__title{ position:absolute; left:18px; right:18px; bottom:16px; z-index:1; color:#fff; font-family:"The Seasons",serif; font-weight:700; font-size:19px; line-height:1.2; }
@media (max-width:600px){ .ls-servico__related-grid{ grid-template-columns:1fr; } }

/* Médicos Credenciados: as fotos dos médicos tinham altura fixa (400px) +
   object-fit:cover + object-position:center → cortavam a cabeça. Mostrar a
   foto INTEIRA (altura automática, na largura do card). */
.elementor-element-59a1d21 img,
.elementor-element-3c1ce03 img,
.elementor-element-e831aeb img,
.elementor-element-6e79287 img,
.elementor-element-d92159b img,
.elementor-element-33e70fa img,
.elementor-element-b5e45bf img,
.elementor-element-ced58de img,
.elementor-element-3f12f4f img{
  height: auto !important;
  object-fit: contain !important;
}

/* ----- Overlay de busca (Pesquisar) — tela cheia, fundo rosa, texto/lupa petróleo ----- */
.ls-search-overlay{
  position:fixed; inset:0; z-index:3000;
  background:rgba(201,107,146,.80);            /* rosa meio transparente (mostra a página) */
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;
}
body.ls-search-open{ overflow:hidden; }
body.ls-search-open .ls-search-overlay{ opacity:1; visibility:visible; }
.ls-search__close{
  position:absolute; top:22px; right:34px;
  background:none; border:0; cursor:pointer; padding:6px;
  font-size:46px; line-height:1; color:#fff;
}
.ls-search__form{ width:min(820px,86vw); }
/* só uma linha fininha embaixo (sem caixa em volta) */
.ls-search__field{ display:flex; align-items:center; gap:18px; border-bottom:1px solid rgba(255,255,255,.85); }
.ls-search__input{
  flex:1; min-width:0; padding:8px 0;
  background:none !important; border:none !important; box-shadow:none !important; outline:0 !important;
  -webkit-appearance:none; appearance:none;
  font-family:"The Seasons",serif; font-weight:700;
  font-size:clamp(36px,6vw,64px); line-height:1.1; color:#fff;
}
.ls-search__input::placeholder{ color:#fff; opacity:1; }
.ls-search__input::-webkit-search-decoration,
.ls-search__input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.ls-search__submit{ background:none; border:0; cursor:pointer; color:#fff; font-size:clamp(24px,3.5vw,34px); padding:6px; }

/* Botão "Quero Assinar" do MailPoet (newsletter) → padrão dos botões do site:
   rosa preenchido, texto branco, pill. A cor vinha do estilo próprio do MailPoet. */
input.mailpoet_submit,
.mailpoet_form .mailpoet_submit,
.mailpoet_paragraph input[type="submit"].mailpoet_submit{
  background-color:#C96B92 !important;
  background:#C96B92 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:40px !important;
  padding:13px 28px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:background-color .2s !important;
}
input.mailpoet_submit:hover,
.mailpoet_form .mailpoet_submit:hover{ background-color:#b15a7f !important; }

/* WhatsApp flutuante (joinchat) = igual ao site Fertility: círculo VERDE oficial
   + ícone branco padrão do plugin + efeito de TREMER periódico. */
.joinchat__button{
  background-color:#25D366 !important;
  transform-origin:center;
  animation:ls-wa-shake 3s ease-in-out infinite;
}
@keyframes ls-wa-shake{
  0%, 86%, 100%{ transform:rotate(0deg); }
  88%{ transform:rotate(-14deg); }
  90%{ transform:rotate(14deg); }
  92%{ transform:rotate(-11deg); }
  94%{ transform:rotate(9deg); }
  96%{ transform:rotate(-5deg); }
  98%{ transform:rotate(3deg); }
}
@media (prefers-reduced-motion: reduce){
  .joinchat__button{ animation:none; }
}

/* Home: nomes dos médicos (widgets Image Box) em destaque ROSA. Os 4 image-box
   da home são exatamente os 4 médicos, então o seletor é seguro. */
.elementor-10006 .elementor-image-box-title{ color:#C96B92 !important; }

/* ----- BLOG (CMSMasters) — vale para todas as páginas do blog/categoria ----- */
/* 1) Card com margem interna: imagem + conteúdo não encostam na borda. */
.cmsmasters-blog__post{ padding:14px !important; }
.cmsmasters-blog__post-thumbnail{ margin-bottom:14px !important; }
.cmsmasters-blog__post-thumbnail__inner{ border-radius:10px !important; }
/* 2) Tags (categorias): de verde-quadrado (#B2E2DC) para PILL nas cores do site. */
.cmsmasters-widget-meta-data a.term,
.cmsmasters-postmeta a.term,
.cmsmasters-postmeta[data-name="taxonomy"] a{
  background-color:#F4E1E9 !important;   /* rosa bem claro */
  color:#394F5A !important;              /* texto petróleo */
  border-radius:30px !important;         /* pill arredondado */
  padding:5px 14px !important;
  transition:background-color .2s, color .2s !important;
}
.cmsmasters-widget-meta-data a.term:hover,
.cmsmasters-postmeta a.term:hover{
  background-color:#C96B92 !important;   /* hover rosa */
  color:#fff !important;
}

/* Botões do CMSMasters Addon (widget cmsmasters-button) — mesma cor de marca:
   rosa preenchido, pill, texto branco, hover escurecendo. */
.cmsmasters-button-link,
.elementor-widget-cmsmasters-button__button{
  background-color: var(--fg-pink) !important;
  color:#fff !important;
  border-radius:40px !important;
  padding:13px 34px !important;
  font-family:"DM Sans", sans-serif !important;
  font-weight:500 !important;
  font-size:15px !important;
  line-height:1.2 !important;
}
.cmsmasters-button-link:hover{ background-color:#a95a7b !important; color:#fff !important; }
.cmsmasters-button__text{ color:#fff !important; }
.cmsmasters-button__content-wrapper{ gap:8px; }

/* "Menu Institucional" (botões full-width = align-justify): NÃO são botões —
   viram links simples, sem fundo, na cor do site (petróleo), hover rosa. */
.cmsmasters-button-align-justify .cmsmasters-button-link{
  background-color:transparent !important;
  color:var(--fg-petrol) !important;
  border-radius:0 !important;
  padding:10px 0 !important;
  box-shadow:none !important;
}
.cmsmasters-button-align-justify .cmsmasters-button-link:hover{ background-color:transparent !important; }
.cmsmasters-button-align-justify .cmsmasters-button__text{ color:var(--fg-petrol) !important; }
.cmsmasters-button-align-justify .cmsmasters-button-link:hover .cmsmasters-button__text,
.cmsmasters-button-align-justify .cmsmasters-button-link:hover .cmsmasters-button__icon i,
.cmsmasters-button-align-justify .cmsmasters-button-link:hover .cmsmasters-button__icon svg{ color:var(--fg-pink) !important; fill:var(--fg-pink) !important; }
.cmsmasters-button-align-justify .cmsmasters-button__icon i,
.cmsmasters-button-align-justify .cmsmasters-button__icon svg{ color:var(--fg-petrol) !important; fill:var(--fg-petrol) !important; }
/* hover do Menu Institucional: a PALAVRA + a seta ficam rosa (robusto) */
.cmsmasters-button-align-justify .cmsmasters-button-link:hover,
.cmsmasters-button-align-justify .cmsmasters-button-link:hover *{ color:var(--fg-pink) !important; fill:var(--fg-pink) !important; }

/* "Nossas redes" (botão de link vazio no bloco do menu): sem fundo, texto rosa. */
.cmsmasters-button-link[href=""]{
  background-color:transparent !important;
  color:var(--fg-pink) !important;
  padding:6px 0 !important;
  box-shadow:none !important;
}
.cmsmasters-button-link[href=""] .cmsmasters-button__text{ color:var(--fg-pink) !important; }

/* Ícones sociais (widget Social Icons) — efeito do rodapé: petróleo, hover rosa. */
/* Ícones sociais (widget Elementor, ex.: "Nossas redes" no sidebar): mesmo
   efeito do rodapé — fundo transparente + bordinha + ícone petróleo, e ROSA
   preenchido (ícone branco) no hover. */
.elementor-widget-social-icons .elementor-social-icon{ background-color:transparent !important; border:1px solid #d8dede !important; transition:all .2s; }
.elementor-widget-social-icons .elementor-social-icon:hover{ background-color:var(--fg-pink) !important; border-color:var(--fg-pink) !important; }
.elementor-widget-social-icons .elementor-social-icon i,
.elementor-widget-social-icons .elementor-social-icon svg{ color:var(--fg-petrol) !important; fill:var(--fg-petrol) !important; }
.elementor-widget-social-icons .elementor-social-icon:hover i,
.elementor-widget-social-icons .elementor-social-icon:hover svg{ color:#fff !important; fill:#fff !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) */
}

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

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

/* ====================================================================
   HEADER / FOOTER do Life Search — 100% PHP no tema-filho (classes ls-*).
   Não depende de Elementor. Renderizados por template-parts/header.php e
   template-parts/footer.php.
   ==================================================================== */
.ls-container{ max-width:1480px; margin:0 auto; padding-left:32px; padding-right:32px; }

/* Esconde o título de página do hello-elementor (ex.: "Home") — as páginas
   têm o próprio hero feito no Elementor; o título do tema fica redundante.
   Mantém o título nos posts do blog (.single-post). */
.page .page-header{ display:none; }

/* ----- CABEÇALHO ----- */
/* Header sticky, mas só a FAIXA BRANCA (mainbar) trava no topo: o top negativo
   = altura da barra de cima (topbar ~43px), que sai da tela ao rolar. */
/* Header "split sticky": a faixa cinza (topbar) rola embora e SÓ a faixa branca
   (mainbar com o menu) gruda no topo — igual aos outros sites das clínicas.
   display:contents tira a "caixa" do header, então a mainbar fica sticky
   relativa à PÁGINA (e não ao header), grudando durante toda a rolagem. */
.ls-header{ display:contents; font-family:"DM Sans",sans-serif; }
.ls-topbar{ background:var(--fg-offwhite); }
/* Sombra só pra BAIXO (spread negativo): separa o header do conteúdo embaixo
   SEM espalhar pra cima e criar sombra na divisa com a faixa cinza (topbar). */
.ls-mainbar{ position:sticky; top:0; z-index:1000; background:#fff; box-shadow:0 8px 16px -8px rgba(0,0,0,.12); }
.ls-topbar__inner{ display:flex; justify-content:flex-end; align-items:center; gap:22px; min-height:42px; }
.ls-top__link{ color:var(--fg-petrol); font-size:13px; text-decoration:none; }
.ls-top__link:hover{ color:var(--fg-pink); }
.ls-portal{ color:var(--fg-petrol); font-size:13px; text-decoration:none; border:1px solid var(--fg-petrol); border-radius:40px; padding:6px 18px; transition:all .2s; }
.ls-portal:hover{ background:var(--fg-petrol); color:#fff; }

.ls-mainbar__inner{ display:flex; align-items:center; gap:20px; min-height:88px; }
.ls-logo{ flex:0 0 auto; display:block; line-height:0; }
.ls-logo img{ height:40px !important; width:auto; display:block; }
.ls-nav{ flex:1 1 auto; display:flex; justify-content:center; align-items:center; }
.ls-menu{ display:flex; gap:30px; list-style:none; margin:0; padding:0; align-items:center; }
.ls-menu li{ position:relative; }
.ls-menu > li > a{ color:var(--fg-petrol); font-size:15px; text-decoration:none; padding:8px 0; display:inline-block; position:relative; }
.ls-menu > li > a::before{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--fg-pink); transition:width .25s ease; }
.ls-menu > li > a:hover::before, .ls-menu > li.current-menu-item > a::before{ width:100%; }
/* Setinha ▾ nos itens com submenu (desktop, petróleo). No mobile vira branca
   e gira ao abrir (regra no @media). */
.ls-menu .menu-item-has-children > a::after{ content:"\f0d7"; font-family:"Font Awesome 5 Free"; font-weight:900; display:inline-block; margin-left:8px; font-size:14px; color:var(--fg-petrol); vertical-align:middle; line-height:1; }
/* Lupinha do "Pesquisar" na barra de cima. */
.ls-top__icon{ margin-left:6px; font-size:.9em; }
.ls-menu .sub-menu{ position:absolute; top:100%; left:0; min-width:240px; background:var(--fg-petrol); list-style:none; margin:0; padding:0; overflow:hidden; border-radius:5px 20px 5px 20px; box-shadow:0 14px 30px rgba(0,0,0,.18); opacity:0; visibility:hidden; transform:translateY(8px); transition:.2s; z-index:50; }
.ls-menu li:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.ls-menu .sub-menu a{ color:#fff; display:block; padding:10px 18px; font-size:14px; transition:background .2s ease, border-radius .2s ease; }
.ls-menu .sub-menu a:hover{ background:var(--fg-pink); border-radius:5px 20px 5px 20px; }

.ls-cta{ flex:0 0 auto; background:var(--fg-pink); color:#fff; text-decoration:none; border-radius:40px; padding:13px 30px; font-weight:500; font-size:15px; white-space:nowrap; transition:background .2s; }
.ls-cta:hover{ background:#a95a7b; color:#fff; }
.ls-cta--in-nav, .ls-mob-search, .ls-portal--in-nav{ display:none; }

/* Hambúrguer no padrão Fertility: caixa branca + borda petróleo + cantos 5px,
   traços ROSA (toggle_color do Fertility = #C96B92). */
.ls-burger{ display:none; background:#fff !important; border:1px solid var(--fg-petrol) !important; border-radius:5px !important; box-shadow:none !important; cursor:pointer; padding:9px 11px; margin-left:auto; -webkit-tap-highlight-color:transparent; }
.ls-burger:hover, .ls-burger:focus, .ls-burger:active{ background:#fff !important; }
.ls-burger span{ display:block; width:24px; height:2px; background:var(--fg-pink) !important; margin:5px 0; transition:transform .25s ease, opacity .2s ease; transform-origin:center; }
/* Hambúrguer vira X quando o menu está aberto (indica onde fechar). */
body.ls-nav-open .ls-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.ls-nav-open .ls-burger span:nth-child(2){ opacity:0; }
body.ls-nav-open .ls-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ===== Menu mobile (hambúrguer) — PADRÃO DAS CLÍNICAS =====
   Fundo petróleo, itens brancos, hover/ativo rosa; submenus petróleo/branco;
   no fim, botões "Agendar" (pill rosa) + "Painel" (pill outline branco). A
   topbar (Pesquisar/Painel) some no mobile — vai tudo pro hambúrguer. */
@media (max-width:1024px){
  .ls-burger{ display:block; }
  .ls-topbar{ display:none; }
  .ls-nav{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; background:var(--fg-petrol); border-top:0; border-radius:5px 20px 5px 20px; box-shadow:0 14px 26px rgba(0,0,0,.18); max-height:0; overflow:hidden; transition:max-height .35s ease; }
  body.ls-nav-open .ls-nav{ max-height:90vh; overflow:auto; padding:0 0 26px; }
  .ls-menu{ flex-direction:column; gap:0; width:100%; align-items:stretch; }
  .ls-menu > li > a{ display:block; color:#fff; padding:14px 32px; transition:background .2s; }
  .ls-menu > li > a::before{ display:none; }
  .ls-menu > li > a:hover, .ls-menu > li.current-menu-item > a{ background:var(--fg-pink); color:#fff; }
  /* Setinha ▾ indicando submenu (gira ao abrir). */
  .ls-menu .menu-item-has-children > a::after{ content:"\f0d7"; font-family:"Font Awesome 5 Free"; font-weight:900; display:inline-block; margin-left:10px; font-size:14px; color:#fff; transition:transform .25s ease; }
  .ls-menu .menu-item-has-children.is-open > a::after{ transform:rotate(180deg); }
  /* Submenu FECHADO por padrão; abre no .is-open (acordeão, via JS no clique). */
  .ls-menu .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; background:rgba(0,0,0,.16); border-radius:0; padding:0; box-shadow:none; max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .ls-menu .menu-item-has-children.is-open > .sub-menu{ max-height:600px; }
  .ls-menu .sub-menu a{ color:#fff; padding:12px 48px; }
  .ls-menu .sub-menu a:hover{ background:var(--fg-pink); border-radius:5px 20px 5px 20px; }
  /* "Pesquisar" como item do menu (abre o overlay) */
  .ls-mob-search{ display:block; text-align:center; margin:16px 24px 0; padding:11px 18px; background:transparent; color:#fff; border:1px solid #fff; border-radius:40px; font-size:15px; text-decoration:none; transition:all .2s; }
  .ls-mob-search:hover{ background:#fff; color:var(--fg-petrol); }
  /* Botões CTA no fim do menu */
  .ls-cta--bar{ display:none; }
  .ls-cta--in-nav{ display:block; text-align:center; margin:12px 24px 0; }
  .ls-portal--in-nav{ display:block; text-align:center; margin:12px 24px 24px; padding:11px 18px; background:transparent; color:#fff; border:1px solid #fff; border-radius:40px; font-size:15px; transition:all .2s; }
  .ls-portal--in-nav:hover{ background:#fff; color:var(--fg-petrol); }
}

/* ----- FAIXA CTA (acima do rodapé) ----- */
.ls-cta-band{ background:var(--fg-offwhite); border-top:1px solid #e7ecea; text-align:center; padding:60px 20px; }
.ls-cta-band__title{ font-family:"The Seasons",serif; font-weight:400 !important; font-size:clamp(34px,5vw,54px); color:var(--fg-petrol); margin:0 0 26px; line-height:1.12; }
.ls-cta-band__title em{ color:var(--fg-pink); font-style:normal; }

/* ----- RODAPÉ (fundo claro, padrão Fertility) ----- */
.ls-footer{ background:var(--fg-offwhite); color:var(--fg-petrol); font-family:"DM Sans",sans-serif; border-top:1px solid #e7ecea; }
.ls-footer__main{ display:flex; flex-wrap:wrap; gap:40px; padding:50px 32px 40px; }
.ls-footer__main .ls-fcol{ flex:1 1 180px; min-width:160px; }
.ls-fcol--brand{ flex:1 1 230px; }
.ls-fcol--brand img{ width:200px; height:auto; }
.ls-footer h4{ font-family:"DM Sans", sans-serif !important; color:var(--fg-petrol); font-size:14px; letter-spacing:1px; text-transform:uppercase; margin:0 0 18px; font-weight:700; }
/* Barra legal: todos os blocos com texto centralizado (igual ao Fertility). */
.ls-legal__inner span{ text-align:center; }
.ls-footer p{ margin:0 0 8px; line-height:1.5; font-size:14px; color:#56666d; }
.ls-footer a{ color:#56666d; text-decoration:none; }
.ls-footer a:hover{ color:var(--fg-pink); }
.ls-footer ul{ list-style:none; margin:0; padding:0; }
.ls-footer ul li{ margin:0 0 12px; font-size:14px; }
.ls-social{ display:flex; gap:10px; margin:0 0 16px; }
.ls-social a{ width:38px; height:38px; border-radius:50%; background:transparent; border:1px solid #d8dede; color:var(--fg-petrol); display:inline-flex; align-items:center; justify-content:center; font-size:16px; transition:all .2s; }
.ls-social a:hover{ background:var(--fg-pink); border-color:var(--fg-pink); color:#fff; transform:scale(1.12); }
/* SVG oficial (FB/IG) dentro do círculo: glifo branco (currentColor). */
.ls-social a svg{ height:17px; width:auto; fill:currentColor; display:block; }
.ls-tel{ color:var(--fg-pink); margin-right:7px; vertical-align:middle; position:relative; top:-1px; }
/* Espelha só o ícone de telefone (não o WhatsApp, que também usa .ls-tel). */
.ls-tel.fa-phone{ transform: scaleX(-1); }
.ls-legal{ background:var(--fg-offwhite); border-top:1px solid #e7ecea; }
/* Grid 1fr auto 1fr: o bloco do meio fica no CENTRO REAL da página (colunas
   laterais iguais), esquerda no início, direita no fim. */
.ls-legal__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px 24px; padding:18px 32px; font-size:12px; color:#56666d; }
.ls-legal__inner span:nth-child(1){ justify-self:start; text-align:left; }
.ls-legal__inner span:nth-child(3){ justify-self:end; text-align:right; }

@media (max-width:767px){
  .ls-cta-band{ padding:44px 20px; }
  .ls-footer__main{ text-align:center; flex-direction:column; gap:28px; padding:40px 24px 30px; }
  /* No mobile (coluna) o flex-basis vira ALTURA → reset p/ altura automática,
     senão a coluna do logo fica com ~230px e sobra um vão grande embaixo. */
  .ls-footer__main .ls-fcol, .ls-footer__main .ls-fcol--brand{ flex:0 0 auto; }
  .ls-fcol--brand img{ margin:0 auto; }
  .ls-social{ justify-content:center; }
  .ls-legal__inner{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .ls-legal__inner span:nth-child(1), .ls-legal__inner span:nth-child(3){ justify-self:center; text-align:center; }
}

/* Ícones das listas (serviços, etc.) em PETRÓLEO. O BSR teal→rosa deixou-os
   rosa; por marca, ícones de conteúdo ficam em petróleo (rosa só em CTA/acento).
   Não afeta o rodapé (telefone/WhatsApp usam .ls-tel, que continua rosa). */
.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg{
  color:#394F5A !important; fill:#394F5A !important;
}

/* ====================================================================
   TIPOGRAFIA da marca FertGroup (site inteiro):
   títulos = The Seasons (serifada) · textos = DM Sans.
   As fontes vêm do @font-face acima (arquivos em ../fonts).
   ==================================================================== */
body{ font-family:"DM Sans", sans-serif; }

/* Evita rolagem horizontal (decoração que vaza da largura) SEM criar
   container de rolagem extra — clip não gera barra/edge como o hidden. */
html, body{ overflow-x: clip; }

/* Blobs decorativos (esfumado): os SVGs do tema antigo têm a região do
   feGaussianBlur do tamanho EXATO do arquivo, então o desfoque é cortado na
   borda e vira uma linha reta. Esmaecemos topo/base via máscara p/ ficar suave. */
img[src*="/uploads/2021/08/shape-"],
img[src*="/uploads/2021/09/Vector-"]{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title{
  font-family:"The Seasons", serif !important;
  font-weight:700 !important;
}

p, li,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor span,
.elementor-button,
.elementor-nav-menu .elementor-item{
  font-family:"DM Sans", sans-serif !important;
}

/* ====================================================================
   FIX — "rolagem branca" após o conteúdo (depoimentos, fale-conosco)
   O widget cmsmasters-testimonials-slider não inicializa o swiper (o CSS base
   .swiper-container{overflow:hidden}/.swiper-wrapper{display:flex} não é aplicado)
   e os 30 .swiper-slide empilham na vertical, criando um scroll branco enorme.
   Forçamos o layout de carrossel (linha única, recortado) — inócuo quando o
   swiper funciona de verdade (são as mesmas regras que ele aplicaria).
   ==================================================================== */
.elementor-widget-cmsmasters-testimonials-slider .swiper-container{ overflow:hidden; }
.elementor-widget-cmsmasters-testimonials-slider .swiper-wrapper{ display:flex; flex-wrap:nowrap; align-items:stretch; }
.elementor-widget-cmsmasters-testimonials-slider .swiper-slide{ flex:0 0 100%; max-width:100%; }

/* Nossa Infraestrutura (page 10081): respiro no topo — a página começa direto no
   heading (seção boxed), sem o banner de topo que a Sobre nós tem. */
body.page-id-10081 .elementor-element-bf20223{ padding-top:70px; }
@media (max-width:767px){ body.page-id-10081 .elementor-element-bf20223{ padding-top:36px; } }

/* Footer "Siga-nos": glifo do ícone social sempre visível (Instagram/YouTube tinham
   bg = cor do footer e glifo invisível, só apareciam no hover). */
.elementor-widget-social-icons .elementor-social-icon i,
.elementor-widget-social-icons .elementor-social-icon svg{ color:#fff !important; fill:#fff !important; }

/* Padroniza as TAGS (.term) em arquivos/categorias/busca iguais à home do blog.
   A home usa pill rosa 12px/600 sem borda; o template "Search Results Entry" (8609)
   põe border + fonte diferentes. O bg/cor/raio/padding já vêm das regras acima
   (.cmsmasters-postmeta a.term); aqui só removemos a borda e fixamos a fonte em
   TODO a.term pra ficar idêntico em todas as páginas. */
a.term{
  border:0 !important;
  font-size:12px !important;
  font-weight:600 !important;
}

/* ----- SINGLE POST (blog): largura de leitura -----
   O conteúdo do post é renderizado pelo tema em .page-content (sem container do
   Elementor) e ocupava a largura toda. Constrange título + corpo numa coluna
   centralizada de leitura no desktop; no mobile vira 100% com respiro lateral. */
.single-post .page-header,
.single-post .page-content{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}

/* Single post: respiro vertical (título não cola no header; fim do conteúdo não
   encosta na faixa CTA do footer). */
.single-post .site-main{ padding-top:48px; padding-bottom:72px; }
@media (max-width:767px){ .single-post .site-main{ padding-top:28px; padding-bottom:48px; } }