/*
Theme Name: Divi Child — Embryo
Theme URI: https://embryo.med.br
Description: Tema filho do Divi para a clínica Embryo (Centro de Reprodução Humana), aplicando o padrão de marca FertGroup. Carrega as fontes licenciadas (The Seasons + DM Sans), a paleta da marca (petróleo #394F5A / rosa #C96B92 / off-white #F6F8F7) e os ajustes de header, footer e botões sobre o Divi. NÃO depende de Elementor.
Author: OWI Digital
Template: Divi
Version: 0.9.89
Text Domain: embryo-child
*/

/* =====================================================================
   EMBRYO — marca FertGroup sobre o Divi
   Paleta:  petróleo #394F5A | rosa #C96B92 | off-white #F6F8F7 | texto #394F5A
   Fontes:  The Seasons (títulos) + DM Sans (texto)
   ===================================================================== */

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

:root{
  /* Tokens canônicos da marca FertGroup — idênticos às clínicas irmãs
     (--fg-petrol / --fg-pink / --fg-offwhite em brand.css). */
  --embryo-petroleo:#394F5A;     /* Pantone 432 CP  (era #2f4d59) */
  --embryo-rosa:#C96B92;         /* Pantone 7634 CP — ÚNICO rosa da marca (era #ce6997) */
  --embryo-rosa-claro:#e3b2c6;   /* tint claro de #C96B92 */
  --embryo-rosa-escuro:#b4587b;  /* hover dos botões — tom fechado de #C96B92 (recalibrado) */
  --embryo-petroleo-claro:#3f6573; /* petróleo mais claro p/ seções vizinhas — casa com o stop claro dos gradientes do banco rgba(63,101,115) */
  --embryo-offwhite:#F6F8F7;
  --embryo-texto:#394F5A;
  --embryo-texto-suave:#6B7780; /* cinza-petróleo das irmãs: links/textos/legal do FOOTER (títulos seguem petróleo) */
  --embryo-hpad:clamp(24px,3.2vw,60px); /* margem lateral do header full-width (logo/CTA) */
  --embryo-content-max:1550px; /* largura máx. do CONTEÚDO de header/footer no desktop (fundo segue full-width) */
  --embryo-gutter:max(var(--embryo-hpad),calc((100% - var(--embryo-content-max)) / 2)); /* gutter lateral que centraliza o conteúdo no frame de 1550px (vira hpad em telas < ~1670) */
}

/* 2) Tipografia geral -------------------------------------------------- */
body, .et_pb_text, p, li, .et_pb_module, input, textarea, select, button{
  font-family:"DM Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1,h2,h3,h4,h5,h6,
.et_pb_module h1,.et_pb_module h2,.et_pb_module h3,.et_pb_module h4,
#main-header .et_pb_menu .et-menu-nav>ul>li>a{
  font-family:"The Seasons", Georgia, serif;
}
body{color:var(--embryo-texto)}

/* 3) Cor de acento (links/realces) ------------------------------------ */
a{color:var(--embryo-rosa)}
a:hover{color:var(--embryo-petroleo)}

/* 4) HEADER (padrão FertGroup sobre o Divi)
   Duas faixas: utilitária (#top-header) + principal (#main-header).
   ===================================================================== */

/* 4.1) Barra utilitária (topo) ---------------------------------------- */
/* o Divi (customizer cached) injeta `#page-container #top-header{background:accent!important}`
   = 2 IDs. Precisamos de especificidade MAIOR (body + #page-container + #top-header). */
body #page-container #top-header,
#page-container #top-header{
  background:var(--embryo-offwhite)!important;
  box-shadow:none!important;
  border-bottom:none!important;
  padding:0; /* barra de topo = 47.14px (alvo das irmãs); NÃO passar disso. Centragem é no .container abaixo */
}
#top-header{color:var(--embryo-petroleo)}
#top-header .container{
  display:flex;align-items:center;justify-content:flex-end;
  width:100%!important;max-width:100%!important;
  /* o Divi injeta padding vertical ASSIMÉTRICO aqui (~8px topo / 0 base) → o "Painel" descia.
     Forçamos 4/4: 4 + botão 39.14 + 4 = 47.14 (barra no alvo) e botão centralizado. */
  padding-top:4px!important;padding-bottom:4px!important;
  padding-left:var(--embryo-gutter)!important;padding-right:var(--embryo-gutter)!important;
}
/* o WordPress (theme.json) força `a:where(:not(.wp-element-button)){text-decoration:underline}`
   → reset forte em todo o header (top-header + menus) */
#top-header a,#main-header a,#et-secondary-nav a,#top-menu a{text-decoration:none!important}
#top-header a:hover,#main-header a:hover,#et-secondary-nav a:hover,#top-menu a:hover{text-decoration:none!important}
/* nav utilitário à direita */
#et-secondary-nav{float:none;display:flex;align-items:center;gap:38px}
#et-secondary-nav li{padding:0;margin:0}
#et-secondary-nav li a{
  color:var(--embryo-petroleo)!important;
  font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;opacity:1;padding:0;
  text-decoration:none!important;
}
#et-secondary-nav li a:hover{color:var(--embryo-rosa)!important;text-decoration:none!important}
/* "Painel do Paciente" = último item, botão contornado (pill, SEM rosa) */
#et-secondary-nav>li:last-child>a{
  /* dimensões iguais às demais clínicas: ~149 x 39px (padding 6/18, font 13, line-height 25) */
  border:1px solid var(--embryo-texto);
  border-radius:50px;
  padding:6px 18px;
  font-size:13px;line-height:25px;
  background:transparent;
  color:var(--embryo-texto)!important;
  transition:all .25s ease;
}
#et-secondary-nav>li:last-child>a:hover{
  background:var(--embryo-texto);border-color:var(--embryo-texto);color:#fff!important;
}
/* 4.1b) Sticky estilo Fertility: ao rolar, SÓ o #main-header fica fixo. A barra
   utilitária (#top-header: Fale Conosco / Painel do Paciente) rola embora junto
   com a página. O Divi (et_fixed_nav) fixava as DUAS barras (#top-header em
   position:fixed top:0) → tornamos o #top-header ABSOLUTO (sai no scroll) e
   fixamos o #main-header em top:0 quando ele "gruda" (.et-fixed-header). */
.et_fixed_nav #top-header{position:absolute!important;width:100%!important}
.et_fixed_nav .et-fixed-header#main-header,
.et-fixed-header#main-header{top:0!important}

/* 4.2) Barra principal ------------------------------------------------- */
#main-header{
  background:#fff;
  box-shadow:0 8px 16px -8px rgba(57,79,90,.25);
}
/* layout em flex: logo | menu (centro) | CTA (direita, absoluto).
   O Divi posiciona o .logo_container como absolute → trazemos pro fluxo
   (relative) p/ o flex reservar o espaço do logo e o menu não sobrepor. */
#main-header .container.et_menu_container{
  display:flex;align-items:center;position:relative;
  width:100%!important;max-width:100%!important;
  padding-left:var(--embryo-gutter)!important;padding-right:var(--embryo-gutter)!important;
}
.et_header_style_left #main-header .logo_container,
.et_header_style_split #main-header .logo_container,
#main-header .logo_container{
  position:relative!important;float:none;width:auto;height:auto;max-height:46px;
  margin:0;top:auto;left:auto;transform:none;flex:0 0 auto;
}
.logo_helper{position:static!important;height:auto;padding:0}
#logo{position:static!important;max-height:44px!important;width:auto;margin:0;top:auto;left:auto}
#et-top-navigation{
  flex:1;display:flex;align-items:center;
  float:none;padding:12px 0!important;margin:0; /* faixa branca ~76px (igual às demais clínicas): CTA 52px + 12px*2 */
}
#top-menu-nav{flex:1;float:none;margin:0}
#top-menu{display:flex;align-items:center;width:100%;margin:0}
#top-menu>li{padding:0 16px}
/* dois auto-margins (1º item + CTA) centralizam o grupo do menu e fixam o CTA à direita */
#top-menu>li:first-child{margin-left:auto}
/* compacta o padding gigante que o Divi põe nos links (45px) → menu centraliza
   verticalmente e o sublinhado do item ativo encosta no texto */
#top-menu>li>a{display:flex;align-items:center;line-height:1.2;padding-top:0!important;padding-bottom:7px!important}
#top-menu li a{
  color:var(--embryo-petroleo);font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;padding-bottom:6px;
}
#top-menu li a:hover{color:var(--embryo-rosa);opacity:1}
/* sublinhado rosa ANIMADO (cresce da esquerda) — espelha o efeito do menu Fertility.
   O :before existe sempre em escala 0 e só cresce nos estados ativos. */
#top-menu>li:not(.embryo-cta-item)>a:before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--embryo-rosa);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .28s ease;
}
/* mostra o sublinhado: ao passar o mouse; na seção-pai da página atual; na página
   atual (inclusive Home); e no "Contato" quando o footer está REALMENTE visível
   (ps2id .mPS2id-highlight, escopado pelo href #main-footer p/ não pegar
   Tratamentos/Técnicas, que também são âncoras). */
#top-menu>li:not(.embryo-cta-item)>a:hover:before,
#top-menu>li.current-menu-ancestor>a:before,
#top-menu>li.current-menu-item>a:before,
#top-menu>li.current_page_item>a:before,
#top-menu>li>a[href*="main-footer"].mPS2id-highlight:before{
  transform:scaleX(1);
}
/* UM marcado de cada vez: quando o footer está visível (Contato destacado), o
   item da PÁGINA ATUAL recolhe o sublinhado — só o Contato fica marcado. O
   :not(:hover) preserva o hover normal sobre o item atual. */
#top-menu:has(>li>a[href*="main-footer"].mPS2id-highlight) >li.current-menu-item:not(:hover)>a:before,
#top-menu:has(>li>a[href*="main-footer"].mPS2id-highlight) >li.current_page_item:not(:hover)>a:before,
#top-menu:has(>li>a[href*="main-footer"].mPS2id-highlight) >li.current-menu-ancestor:not(:hover)>a:before{
  transform:scaleX(0);
}
/* texto petróleo (evita o azul do Divi) — vale para TODO item atual, inclusive o
   Home (o Home só não recebe o SUBLINHADO, mas a cor continua petróleo). */
#top-menu>li.current-menu-ancestor>a,
#top-menu>li.current-menu-item>a,
#top-menu>li.current_page_item>a,
#top-menu>li>a[href*="main-footer"].mPS2id-highlight{color:var(--embryo-petroleo)!important}
/* HOVER do item de menu = texto ROSA (vence o opacity:.7 do Divi e a cor petróleo
   do item ativo). Antes o :hover estava no grupo petróleo acima → só mudava a opacidade. */
#top-menu>li:not(.embryo-cta-item)>a:hover{color:var(--embryo-rosa)!important;opacity:1!important}
/* setinha dos dropdowns = triângulo sólido (▼) no padrão FertGroup */
#top-menu>li.menu-item-has-children>a:first-child{padding-right:0!important}
#top-menu>li.menu-item-has-children>a:first-child:after{
  font-family:inherit!important;content:""!important;
  display:inline-block;width:0;height:0;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--embryo-petroleo);
  position:static!important;top:auto!important;right:auto!important;
  margin-left:8px;transition:border-color .25s ease;
}
#top-menu>li.menu-item-has-children>a:first-child:hover:after{border-top-color:var(--embryo-rosa)}

/* submenus (dropdown) — padrão FertGroup: painel petróleo + pílula rosa
   arredondada (inset) no hover, com largura uniforme */
/* Divi fixa a ul em 240px e o a em 200px com li de 20px → rosa fica inset.
   ul = max-content (cresce até o item mais longo) + a width:100% (preenche). */
#main-header .nav li ul{
  width:max-content!important;min-width:240px;
  background:var(--embryo-petroleo)!important;
  border:none!important;
  border-radius:8px 24px 8px 24px;
  padding:0!important;overflow:hidden;
  box-shadow:0 16px 32px rgba(57,79,90,.28);
}
#main-header .nav li ul li{padding:0!important;margin:0!important;display:block;width:100%}
/* rosa preenche a largura toda, com radius "folha" do FertGroup */
#main-header .nav li li a,
#main-header .nav li ul a{
  display:block;width:100%!important;white-space:nowrap;
  color:#fff!important;font-weight:400;box-sizing:border-box;
  margin:0!important;padding:13px 24px!important;line-height:1.3;
  border-radius:5px 20px 5px 20px;
  transition:background-color .2s ease,color .2s ease;
}
/* hover + item da PÁGINA ATUAL = pílula rosa (indica onde você está, padrão FertGroup) */
#main-header .nav li li a:hover,
#main-header .nav li ul a:hover,
#main-header .nav li ul li.current-menu-item>a,
#main-header .nav li ul li.current_page_item>a,
#main-header .nav li ul li.current-menu-ancestor>a{
  background:var(--embryo-rosa)!important;color:#fff!important;opacity:1;
}

/* 4.3) CTA "Agendar consulta" (botão rosa à direita) ------------------ */
.embryo-cta-item{
  margin-left:auto!important;   /* fixa o CTA à direita, alinhado ao "Painel do Paciente" */
  padding:0!important;
  display:flex;align-items:center;
}
#top-menu li.embryo-cta-item>a,
.embryo-cta{
  /* dimensões iguais às demais clínicas: ~192 x 52px (padding 13/34, font 15, line-height 26) */
  display:inline-block;white-space:nowrap;background:var(--embryo-rosa);color:#fff!important;
  font-family:"DM Sans",sans-serif;font-weight:500;font-size:15px;
  padding:13px 34px!important;border-radius:50px;
  line-height:26px;transition:all .25s ease;
}
/* opacity:1 vence o `#top-menu-nav>ul>li>a:hover{opacity:.7}` do Divi, que
   deixava o CTA DESBOTADO no hover em vez de virar o rosa-escuro sólido. */
#top-menu li.embryo-cta-item>a:hover,
.embryo-cta:hover{background:var(--embryo-rosa-escuro)!important;color:#fff!important;opacity:1!important}
.embryo-cta-item>a:after{display:none!important} /* sem setinha */

/* 4.4) Header fixo no scroll mantém o padrão */
#main-header.et-fixed-header{box-shadow:0 8px 16px -8px rgba(57,79,90,.25)}

/* 4.5) Mobile (≤980px): menu hambúrguer do Divi com a marca FertGroup (espelha o
   Fertility). O bug era nosso `#top-menu{display:flex}` (mesma especificidade que
   o `#top-menu{display:none}` do Divi, mas carrega depois) mantendo o menu desktop
   visível → forçamos o reset aqui. */
@media (max-width:980px){
  /* barra utilitária (Painel do Paciente) some no mobile */
  #top-header{display:none!important}
  /* remove a faixa da FOTO da fachada no mobile (colunas de imagem VAZIAS =
     et_pb_column_empty, que o Divi revela via padding gigante). Vale em todas as
     páginas (home #bloco-sobre, ovodoação etc.), como no site original. */
  #main-content .et_pb_column_empty{
    display:none!important;background-image:none!important;
    min-height:0!important;height:0!important;padding:0!important;margin:0!important;
  }
  /* seção "venha dar o primeiro passo": no mobile o parallax_bg mostrava só o TOPO
     (branco) do banner → escondemos p/ revelar o bg mobile da própria seção (o
     casal). Escopo pela seção do botão WhatsApp → vale em todas as páginas. */
  #main-content .et_pb_section:has(.et_pb_button[href*="api.whatsapp.com/send"]) .et_parallax_bg{display:none!important}
  /* IMAGEM do casal+bebê (bannermoile_02) na seção "venha dar" — PADRÃO em todas
     as páginas que têm a seção. Lista por page-id (estável no deploy); o nº da
     seção varia. position:center BOTTOM = mostra o bebê (em cima é só branco).
     NOTA DEPLOY: URL root-relativa (se prod em /web, prefixar). */
  body.page-id-757 #main-content .et_pb_section_5,
  body.page-id-742 #main-content .et_pb_section_4,
  body.page-id-447 #main-content .et_pb_section_4,
  body.page-id-388 #main-content .et_pb_section_5,
  body.page-id-384 #main-content .et_pb_section_5,
  body.page-id-380 #main-content .et_pb_section_5,
  body.page-id-375 #main-content .et_pb_section_5,
  body.page-id-364 #main-content .et_pb_section_5,
  body.page-id-360 #main-content .et_pb_section_5,
  body.page-id-356 #main-content .et_pb_section_5,
  body.page-id-349 #main-content .et_pb_section_5,
  body.page-id-342 #main-content .et_pb_section_5,
  body.page-id-288 #main-content .et_pb_section_5,
  body.page-id-284 #main-content .et_pb_section_5,
  body.page-id-280 #main-content .et_pb_section_5,
  body.page-id-275 #main-content .et_pb_section_5,
  body.page-id-271 #main-content .et_pb_section_5,
  body.page-id-267 #main-content .et_pb_section_5,
  body.page-id-263 #main-content .et_pb_section_5,
  body.page-id-259 #main-content .et_pb_section_5,
  body.page-id-254 #main-content .et_pb_section_5,
  body.page-id-250 #main-content .et_pb_section_5,
  body.page-id-245 #main-content .et_pb_section_5,
  body.page-id-238 #main-content .et_pb_section_5,
  body.page-id-234 #main-content .et_pb_section_5,
  body.page-id-229 #main-content .et_pb_section_5,
  body.page-id-225 #main-content .et_pb_section_4,
  body.page-id-213 #main-content .et_pb_section_3,
  body.page-id-209 #main-content .et_pb_section_4,
  body.page-id-171 #main-content .et_pb_section_5,
  body.page-id-167 #main-content .et_pb_section_5,
  body.page-id-162 #main-content .et_pb_section_5,
  body.page-id-155 #main-content .et_pb_section_4,
  body.page-id-150 #main-content .et_pb_section_4,
  body.page-id-145 #main-content .et_pb_section_4,
  body.page-id-137 #main-content .et_pb_section_6,
  body.page-id-6 #main-content .et_pb_section_7
  {
    background-image:url("/wp-content/uploads/2022/11/bannermoile_02.png")!important;
    background-size:cover!important;background-position:center bottom!important;
    background-repeat:no-repeat!important;padding-bottom:78vw!important;
  }
  /* SEM barra de rolagem horizontal: o módulo de código (.et_pb_code) tem
     margin-right:-399px que estoura a largura no mobile → zeramos; + trava
     overflow-x como segurança. */
  #main-content .et_pb_code{margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100%!important}
  /* algumas páginas (ex.: ovodoação) têm rows com margin-left:275px que o Divi NÃO
     reduziu no mobile → empurram o conteúdo p/ direita e geram scroll horizontal.
     Centralizamos todas as rows no mobile. */
  #main-content .et_pb_row{margin-left:auto!important;margin-right:auto!important}
  html,body,#page-container{overflow-x:hidden!important}
  /* OVODOAÇÃO (742): hero (section_0) igual às demais páginas no mobile — imagem
     bg_inside_mobile (pezinhos, cover) + título BRANCO com sombra (era pattern +
     título petróleo). NOTA DEPLOY: URL root-relativa (se prod em /web, prefixar). */
  body.page-id-742 div.et_pb_section.et_pb_section_0{
    background-image:url("/wp-content/uploads/2022/11/bg_inside_mobile.png")!important;
    background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
    padding-top:176px!important;            /* empurra o texto p/ baixo, como as outras */
  }
  /* texto da hero CENTRALIZADO e BRANCO (incl. os <span> com color:#2f4d59 inline,
     vencidos pelo !important) — como nas páginas de tratamento. */
  body.page-id-742 #main-content .et_pb_text_0,
  body.page-id-742 #main-content .et_pb_text_0 h1{text-align:center!important}
  body.page-id-742 #main-content .et_pb_text_0 h1,
  body.page-id-742 #main-content .et_pb_text_0 h1 span{
    color:#FFFFFF!important;text-shadow:0 0 .3em rgba(0,0,0,.4)!important;
    /* fonte/caixa iguais ao congelamento: ABeeZee 35px, SEM caixa-alta */
    font-family:'ABeeZee',Helvetica,Arial,Lucida,sans-serif!important;
    font-size:35px!important;text-transform:none!important;line-height:1.2em!important;
  }
  /* altura do header + LINHA FINA divisória embaixo (padrão Fertility): troca a
     sombra por uma borda fina e dá respiro vertical ao redor do logo/hambúrguer */
  #main-header{box-shadow:none!important;border-bottom:1px solid #ece4e9!important;line-height:15px!important}
  /* dimensões do header = Fertility mobile (e-con-inner 89.5px alt, padding 15px 16px):
     padding 15/16, altura ~59px de conteúdo (logo + hambúrguer dentro). */
  #main-header .container.et_menu_container{padding:15px 16px!important;min-height:89px;align-items:center}
  /* logo (tamanho anterior — preenche bem a altura do header) */
  #main-header .logo_container{max-height:56px!important}
  #logo{max-height:56px!important;max-width:64%!important}
  /* menu FIXO ao rolar também no mobile: o Divi deixa o #main-header em
     position:absolute no mobile (rola embora) → fixamos no topo. O Divi já reserva
     o espaço com padding-top no #page-container (et_fixed_nav.et_show_nav). */
  .et_fixed_nav #main-header,
  .et_fixed_nav .et-fixed-header#main-header{position:fixed!important;top:0!important;background:#fff!important}
  /* esconde o menu horizontal e mostra o hambúrguer à DIREITA (logo à esquerda) */
  #top-menu{display:none!important}
  #et-top-navigation{flex:1 1 auto!important;padding:0!important;margin:0!important}
  #et_mobile_nav_menu{display:block!important;float:right!important}
  /* hambúrguer = caixa QUADRADA branca com borda fina; ícone rosa (medidas do
     Fertility: ~40×40, padding ~6px, fundo #fff, ícone ~25px).
     O Divi põe padding-bottom:24px no .mobile_menu_bar (esticava a caixa) → zeramos. */
  #et_mobile_nav_menu{margin-top:2px}
  #et_mobile_nav_menu .mobile_menu_bar{
    position:relative;
    display:inline-flex!important;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0!important;box-sizing:border-box;
    background:#fff!important;border:1.5px solid #C96B92;border-radius:8px;
  }
  /* 3 barras DESENHADAS via CSS (idêntico ao Fertility: ~22px largura, finas,
     rosa #C96B92). A do meio é o :before; topo e base via box-shadow. */
  #et_mobile_nav_menu .mobile_menu_bar:before{
    content:""!important;font-size:0!important;
    position:static!important;top:auto!important;left:auto!important;
    width:22px;height:2.5px;border-radius:2px;background:#C96B92!important;
    box-shadow:0 -6.5px 0 #C96B92, 0 6.5px 0 #C96B92;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  /* menu ABERTO = X (fechar): some as barras topo/base e cruza :before + :after */
  #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before{
    box-shadow:none!important;transform:rotate(45deg);width:24px;
  }
  #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:after{
    content:"";position:absolute;left:50%;top:50%;
    width:24px;height:2.5px;border-radius:2px;background:#C96B92;
    transform:translate(-50%,-50%) rotate(-45deg);
  }

  /* painel do menu aberto (.et_mobile_menu) — fundo petróleo, itens brancos.
     SEM border-top/padding-top → o 1º item começa colado no topo (como o Fertility,
     que não tem faixa vazia nem linha no topo). */
  #et_mobile_nav_menu .et_mobile_menu,
  #et_mobile_nav_menu .et_mobile_menu .sub-menu{
    background:var(--embryo-petroleo)!important;border:none!important;
    box-shadow:0 16px 32px rgba(57,79,90,.28)!important;padding:0!important;
  }
  /* abre colado na LINHA INFERIOR do header (top:100% = base do .et_menu_container).
     Cantos arredondados embaixo (como o dropdown petróleo do desktop). */
  #et_mobile_nav_menu .et_mobile_menu{top:100%!important;left:0!important;width:100%!important;padding-bottom:8px!important;border-radius:0 0 8px 26px!important;
    /* o painel é absolute dentro do header fixed → não soma na rolagem da página.
       Damos scroll interno: limita a altura ao que sobra da viewport e rola dentro. */
    overflow-x:hidden!important;overflow-y:auto!important;max-height:calc(100vh - 89px)!important;-webkit-overflow-scrolling:touch}
  #et_mobile_nav_menu .et_mobile_menu li a{
    color:#fff!important;font-family:"DM Sans",sans-serif!important;font-size:15px!important;
    font-weight:400!important;padding:14px 24px!important;border:none!important;
    border-radius:6px 22px 6px 22px!important; /* cantos "folha" — aparecem quando vira rosa */
    text-decoration:none!important;opacity:1!important;transition:background-color .2s ease;
  }
  /* hover + item da página atual = pílula rosa (padrão FertGroup) */
  #et_mobile_nav_menu .et_mobile_menu li a:hover,
  #et_mobile_nav_menu .et_mobile_menu li.current-menu-item>a,
  #et_mobile_nav_menu .et_mobile_menu li.current_page_item>a{
    background:var(--embryo-rosa)!important;color:#fff!important;
  }
  /* subitens (dropdown) recuados. O Divi põe padding-left:5% no <li> do submenu
     (deixava um VÃO petróleo à esquerda do rosa) → zeramos; o recuo do texto fica
     no padding-left do <a>, e o fundo rosa preenche a largura toda. */
  #et_mobile_nav_menu .et_mobile_menu li li{padding-left:0!important}
  #et_mobile_nav_menu .et_mobile_menu .sub-menu{border-top:none!important;box-shadow:none!important}
  #et_mobile_nav_menu .et_mobile_menu .sub-menu li a{padding-left:42px!important;font-size:14px!important}

  /* SUBMENUS RECOLHÍVEIS (acordeão, padrão Fertility): o Divi força os submenus
     abertos (.et_mobile_menu li ul{display:block!important}); recolhemos por padrão
     e só abrimos no <li>.embryo-open (classe via mobile-menu.js). */
  #main-header .et_mobile_menu li.menu-item-has-children:not(.embryo-open)>.sub-menu{display:none!important}
  #main-header .et_mobile_menu li.menu-item-has-children.embryo-open>.sub-menu{display:block!important}
  /* seta de toggle (▾) PEQUENA, logo À FRENTE do texto (padrão Fertility) — injetada
     no item-pai pelo JS. Inline (não mais grande na borda direita). */
  .et_mobile_menu .embryo-mob-arrow{
    display:inline-block;vertical-align:middle;margin:-2px 0 0 10px;
    padding:7px;line-height:0;cursor:pointer;transition:transform .2s ease;
  }
  /* triângulo sólido ▼ (mesmo padrão das setas do desktop) */
  .et_mobile_menu .embryo-mob-arrow:before{
    content:"";display:block;width:0;height:0;
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid #fff;
  }
  .et_mobile_menu .menu-item-has-children.embryo-open>a .embryo-mob-arrow{transform:rotate(180deg)}

  /* APENAS 2 botões no menu mobile (padrão Fertility): "Agendar consulta" (rosa) e
     "Painel do Paciente" (contornado). O Divi acrescenta o secondary-nav (Fale
     Conosco + Painel) ao menu mobile → escondemos o "Fale Conosco" e transformamos
     o "Painel do Paciente" em botão contornado. */
  /* CTA "Agendar consulta" = botão rosa em LARGURA CHEIA (igual ao Painel).
     O li é display:flex no desktop (encolhe o <a>) → forçamos block no mobile. */
  #et_mobile_nav_menu .et_mobile_menu li.embryo-cta-item{display:block!important;padding:12px 24px 6px!important}
  #et_mobile_nav_menu .et_mobile_menu li.embryo-cta-item>a{
    display:block!important;width:auto!important;
    background:var(--embryo-rosa)!important;border-radius:50px!important;
    /* borda 2px da MESMA cor do fundo → iguala a altura do "Painel" (que tem borda 2px) */
    border:2px solid var(--embryo-rosa)!important;
    text-align:center!important;font-weight:400!important;padding:15px 24px!important;
  }
  /* esconde "Fale Conosco" (item do secondary-nav, href /contato/, que NÃO é o CTA) */
  #et_mobile_nav_menu .et_mobile_menu li:not(.embryo-cta-item):has(>a[href*="/contato/"]){display:none!important}
  /* "Painel do Paciente" (href clinisys) = botão CONTORNADO */
  #et_mobile_nav_menu .et_mobile_menu li:has(>a[href*="clinisys"]){padding:6px 24px 14px!important}
  #et_mobile_nav_menu .et_mobile_menu li a[href*="clinisys"]{
    border:2px solid #fff!important;border-radius:50px!important;background:transparent!important;
    text-align:center!important;font-weight:400!important;padding:15px 24px!important;
  }
  #et_mobile_nav_menu .et_mobile_menu li a[href*="clinisys"]:hover{
    background:var(--embryo-rosa)!important;border-color:var(--embryo-rosa)!important;
  }
}

/* 5) Botões ------------------------------------------------------------ */
.et_pb_button,
.et_pb_contact_submit,
.woocommerce a.button,
button[type="submit"]{
  background:var(--embryo-rosa)!important;
  color:#fff!important;
  border-color:var(--embryo-rosa)!important;
  border-radius:50px!important;
  font-family:"DM Sans",sans-serif!important;
  font-weight:500!important;
  letter-spacing:.3px;
  padding:.7em 1.8em;
  text-decoration:none!important;
  transition:all .25s ease;
}
/* tira o sublinhado (herdado do theme.json do WP: a{text-decoration:underline})
   de TODOS os botões do site */
a.et_pb_button,a.et_pb_button:hover,
.et_pb_button,.et_pb_button:hover,
.et_pb_promo_button,.et_pb_more_button,.et_pb_newsletter_button,.et_pb_pricing_table_button,
.et_pb_contact_submit,.woocommerce a.button,.et_password_protected_form .et_submit_button,
.comment-reply-link,.form-submit .et_pb_button,
button,input[type="submit"],.embryo-cta,.embryo-cta:hover{
  text-decoration:none!important;
}
/* o Divi define `body .et_pb_button:hover{border-radius:0}` → manter pill.
   Hover dos botões rosa = rosa-escuro #b4587b (não petróleo) — pedido do José,
   uniformiza com o CTA "Agendar consulta" e o "Agende sua consulta" do footer. */
body .et_pb_button:hover,
.et_pb_button:hover,
.et_pb_contact_submit:hover,
button[type="submit"]:hover{
  background:var(--embryo-rosa-escuro)!important;
  color:#fff!important;
  border-color:var(--embryo-rosa-escuro)!important;
  border-radius:50px!important;
}
/* 5b) Cards de TRATAMENTOS (botões Divi na home e /tratamentos/): espelham o
   site original — RETÂNGULO com cantos arredondados, texto SUBLINHADO e SEM a
   seta do Divi, mantendo a cor ROSA e a fonte BRANCA (sem virar petróleo no
   hover). Escopo pelos hrefs dos 8 tratamentos p/ não afetar CTA/WhatsApp/Painel. */
#main-content a.et_pb_button:is([href*="/fertilizacao-in-vitro/"],[href*="/inseminacao-artificial/"],[href*="/relacao-sexual-programada/"],[href*="/doacao-de-ovulos/"],[href*="/congelamento-de-semen/"],[href*="/congelamento-de-ovulos/"],[href*="/transferencia-de-embrioes/"],[href*="/casais-homoafetivos/"]),
#main-content a.et_pb_button:is([href*="/fertilizacao-in-vitro/"],[href*="/inseminacao-artificial/"],[href*="/relacao-sexual-programada/"],[href*="/doacao-de-ovulos/"],[href*="/congelamento-de-semen/"],[href*="/congelamento-de-ovulos/"],[href*="/transferencia-de-embrioes/"],[href*="/casais-homoafetivos/"]):hover{
  background:var(--embryo-rosa)!important;
  border-color:var(--embryo-rosa)!important;
  color:#fff!important;
  border-radius:10px!important;
  text-decoration:underline!important;text-underline-offset:3px;
  font-size:16px!important;line-height:1.3!important;
  padding:.9em 1.6em!important;
  transition:transform .25s ease,background-color .25s ease!important;
}
/* leve efeito de zoom ao passar o mouse em cada card */
#main-content a.et_pb_button:is([href*="/fertilizacao-in-vitro/"],[href*="/inseminacao-artificial/"],[href*="/relacao-sexual-programada/"],[href*="/doacao-de-ovulos/"],[href*="/congelamento-de-semen/"],[href*="/congelamento-de-ovulos/"],[href*="/transferencia-de-embrioes/"],[href*="/casais-homoafetivos/"]):hover{
  transform:scale(1.05)!important;
}
/* remove a seta (>) do Divi nesses cards (no normal e no hover) */
#main-content a.et_pb_button:is([href*="/fertilizacao-in-vitro/"],[href*="/inseminacao-artificial/"],[href*="/relacao-sexual-programada/"],[href*="/doacao-de-ovulos/"],[href*="/congelamento-de-semen/"],[href*="/congelamento-de-ovulos/"],[href*="/transferencia-de-embrioes/"],[href*="/casais-homoafetivos/"]):after{
  display:none!important;content:""!important;
}

/* 6) FOOTER (padrão FertGroup = Fertility, montado no footer.php) -------
   Fundo OFF-WHITE (não petróleo), texto petróleo. */
#page-container #main-footer,
#main-footer.embryo-footer{background:var(--embryo-offwhite)!important;padding:0}
/* texto base do footer = cinza-petróleo + peso 400 (o Divi seta body{font-weight:500} → forçamos 400;
   os títulos h4/h5 sobrescrevem p/ petróleo + 500) */
.embryo-footer,.embryo-footer p{color:var(--embryo-texto-suave);font-weight:400}

/* faixa "Juntos por um sonho" + botão rosa */
.embryo-footer .ef-sonho{text-align:center;padding:60px 24px 56px}
.embryo-footer .ef-sonho-tagline{
  font-family:"The Seasons",serif;font-weight:400;font-size:54px;line-height:1.15;margin:0 0 30px;padding:0;
}
.embryo-footer .ef-sonho-tagline .ef-w1{color:var(--embryo-petroleo)}
.embryo-footer .ef-sonho-tagline .ef-w2{color:var(--embryo-rosa)}
.embryo-footer .ef-sonho-btn{
  display:inline-block;background:var(--embryo-rosa);color:#fff!important;
  font-family:"DM Sans",sans-serif;font-weight:500;font-size:16px;
  padding:16px 42px;border-radius:50px;text-decoration:none!important;transition:all .25s ease;
}
.embryo-footer .ef-sonho-btn:hover{background:var(--embryo-rosa-escuro);color:#fff!important}

/* colunas */
.embryo-footer .ef-cols{
  /* conteúdo das colunas no frame de 1550px (gutter centraliza); a borda-topo segue full-width */
  width:100%;padding:48px var(--embryo-gutter) 44px;
  display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;justify-content:space-between;
  border-top:1px solid #e2e8e8;
}
.embryo-footer .ef-col-brand{flex:0 0 auto;align-self:flex-start} /* logo no TOPO, alinhado aos títulos das colunas (não centralizado) */
.embryo-footer .ef-logo-link{display:inline-block;line-height:0;text-decoration:none!important;transition:opacity .2s ease}
.embryo-footer .ef-logo-link:hover{opacity:.8}
.embryo-footer .ef-logo{height:48px;width:auto;display:block}
.embryo-footer .ef-col-links{flex:0 1 auto;min-width:160px}
.embryo-footer .ef-col-atend{flex:0 1 340px}
.embryo-footer .ef-col h4{
  font-family:"DM Sans",sans-serif;text-transform:uppercase;letter-spacing:.06em;
  color:var(--embryo-petroleo);font-size:14px;font-weight:500;margin:0 0 20px;padding:0;
}
.embryo-footer .ef-col-links ul{list-style:none;margin:0;padding:0}
.embryo-footer .ef-col-links li{margin:0 0 16px}
.embryo-footer .ef-col a{color:var(--embryo-texto-suave);font-weight:400;font-size:15px;text-decoration:none!important;transition:color .2s ease}
.embryo-footer .ef-col a:hover{color:var(--embryo-rosa)}
.embryo-footer .ef-col p{padding-bottom:0} /* zera o padding extra que o Divi põe nos <p> */
.embryo-footer .ef-addr{font-size:14px;line-height:1.7;margin:0 0 12px;padding-bottom:0}
.embryo-footer .ef-addr strong{color:var(--embryo-petroleo)}
.embryo-footer .ef-phone{display:flex;align-items:center;gap:7px;font-size:14px;margin:0;padding:0}
.embryo-footer .ef-phone svg{color:var(--embryo-rosa);flex:0 0 auto;width:19px;height:19px}
.embryo-footer .ef-phone{font-size:15px}
/* unidades do rodapé: Centro Clínico / Laboratório */
.embryo-footer .ef-unit{margin:0 0 18px}
.embryo-footer .ef-unit:last-child{margin-bottom:0}
.embryo-footer .ef-unit-title{
  font-family:"DM Sans",sans-serif!important;text-transform:uppercase;letter-spacing:.05em;
  color:var(--embryo-petroleo);font-size:13px;font-weight:500;margin:0 0 6px;padding:0;
}
/* telefones em várias linhas: ícone no topo + números podem quebrar */
.embryo-footer .ef-unit .ef-phone{align-items:flex-start}
.embryo-footer .ef-unit .ef-phone svg{margin-top:3px}
.embryo-footer .ef-phone-nums{line-height:1.7}
.embryo-footer .ef-phone-nums a{white-space:nowrap}

/* redes sociais (Font Awesome) — padrão FertGroup/Fertility: círculo TRANSPARENTE,
   borda fina #ECE6E1, glifo petróleo, SEM sombra; hover = preenche rosa, glifo branco,
   opacity .9 + leve "grow" (scale), espelhando os .elementor-social-icon das irmãs */
.embryo-footer .ef-social{display:flex;gap:12px;margin:0 0 22px}
.embryo-footer .ef-soc{
  /* tamanhos do Fertility: box 36px, glifo 18px; cor petróleo no repouso */
  width:36px;height:36px;border-radius:50%;
  background:transparent;border:1px solid #ECE6E1;color:var(--embryo-petroleo)!important;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  /* !important: o Divi seta transition nos <a> do footer só p/ opacity/background (sem transform)
     e vencia por especificidade → o scale do hover travava. Forçamos a transição completa. */
  transition:all .3s ease!important;
}
.embryo-footer .ef-soc:hover{
  background:var(--embryo-rosa)!important;border-color:var(--embryo-rosa)!important;
  color:#fff!important;opacity:.9;transform:scale(1.1);
}

/* barra legal (3 partes: esquerda / centro / direita) — espelha o Fertility:
   esquerda em largura natural (nome em 1 linha + CNPJ embaixo), centro centralizado, © à direita */
.embryo-footer #footer-bottom{background:transparent;border-top:1px solid #e2e8e8;padding:20px 0}
.embryo-footer #footer-bottom .container{
  width:100%;max-width:none;margin:0;padding:0 var(--embryo-gutter);float:none;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px 30px;align-items:start;
}
.embryo-footer #footer-bottom .container span{color:var(--embryo-texto-suave);font-size:13px;line-height:1.85;font-weight:400}
.embryo-footer .ef-legal-left{text-align:left}
.embryo-footer .ef-legal-center{text-align:center}   /* centro REAL da página (coluna do meio) */
.embryo-footer .ef-legal-right{text-align:right;white-space:nowrap}
@media (max-width:782px){
  .embryo-footer #footer-bottom .container{grid-template-columns:1fr;text-align:center}
  .embryo-footer .ef-legal-left,.embryo-footer .ef-legal-right{text-align:center}
  /* FOOTER CENTRALIZADO no mobile: colunas empilhadas e centralizadas */
  .embryo-footer .ef-cols{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:30px}
  .embryo-footer .ef-col,
  .embryo-footer .ef-col-brand,
  .embryo-footer .ef-col-links,
  .embryo-footer .ef-col-atend{flex:0 0 auto;width:100%;align-items:center;text-align:center}
  /* logo do footer = mesmo tamanho do logo do header (56px) e centralizado */
  .embryo-footer .ef-logo{height:56px!important;width:auto;display:block;margin-left:auto!important;margin-right:auto!important}
  .embryo-footer .ef-social{justify-content:center}
  .embryo-footer .ef-unit{text-align:center}
  .embryo-footer .ef-phone,
  .embryo-footer .ef-unit .ef-phone{justify-content:center}
}

/* remove a seção "ENTRE EM CONTATO" azul (conteúdo de página repetido e
   redundante: o footer FertGroup já cobre o contato). É a <div id="contato">
   que contém o iframe do Google Maps. */
#contato,
.et_pb_section:has(iframe[src*="google.com/maps"]){display:none!important}
/* fallback p/ navegadores sem :has() — esconde ao menos o mapa */
iframe[src*="google.com/maps"],.et_pb_map,.et_pb_map_container,.et_pb_map_inner_wrap{display:none!important}

/* 6b) Botão flutuante do WhatsApp (plugin qlwapp) — espelha o Fertility:
   só o círculo verde com o ícone, sem o texto "Agendar Consulta". */
#qlwapp .qlwapp-text{display:none!important}
#qlwapp .qlwapp-toggle{
  width:62px!important;height:62px!important;min-width:0!important;max-width:62px!important;
  padding:0!important;border-radius:50%!important;box-sizing:border-box!important;
  display:flex!important;align-items:center;justify-content:center;
}
#qlwapp .qlwapp-icon{margin:0!important;font-size:30px;line-height:1}

/* 6c) Seção "VENHA DAR O PRIMEIRO PASSO" (conteúdo repetido): remove o botão
   WhatsApp "Agende uma consulta" e centraliza o texto na altura da imagem.
   Escopo estável via o href do botão (a numeração et_pb_* muda por página). */
.et_pb_button[href*="api.whatsapp.com/send"]{display:none!important}
.et_pb_row:has(.et_pb_button[href*="api.whatsapp.com/send"]){
  display:flex;align-items:center;flex-wrap:wrap;
}

/* 6d) Títulos do conteúdo em PETRÓLEO + NEGRITO (de todo o site).
   A COR foi trocada por BSR no banco (#6b6b6b/#6d6d6d → #2f4d59 nos módulos
   Divi; os brancos #ffffff dos banners foram preservados). Aqui só o NEGRITO. */
#main-content :is(h1,h2,h3,h4){font-weight:700!important}

/* 6e) Faixa petróleo "Conheça nossa estrutura": após o recolor, o Divi parou de
   regenerar o border-radius dos estilos avançados → garantimos pelo tema.
   A row recebeu module_id="bloco-estrutura" no conteúdo.
   ⚠️ O arredondamento (igual ao site original) é SÓ na HOME (body.home).
   Nas demais páginas a faixa fica RETA. */
body.home #bloco-estrutura{
  border-radius:0 0 14vw 14vw!important;overflow:hidden!important;
  box-shadow:0 20px 50px rgba(57,79,90,.18);
}
/* demais páginas: faixa reta (sem arredondar e sem sombra) */
body:not(.home) #bloco-estrutura{
  border-radius:0!important;box-shadow:none!important;
}

/* 6f) Números de destaque (Number Counter) em ROSA p/ diferenciar.
   O Divi força `.et_pb_number_counter_N .percent p{color:#2f4d59!important}`
   (especificidade 0,0,3,1) → vencemos com #main-content (id). */
#main-content .et_pb_number_counter .percent p,
#main-content .et_pb_number_counter .percent-value,
#main-content .et_pb_number_counter .percent_sign{color:var(--embryo-rosa)!important}

/* 6g) Seção "EMBRYO – Centro de Reprodução Humana" (era azul #355eab → ficou
   petróleo no recolor e fundiu com a vizinha). Petróleo mais claro p/ separar.
   A row recebeu module_id="bloco-sobre"; a coluna interna tinha bg próprio. */
#bloco-sobre,
#bloco-sobre .et_pb_column{background-color:var(--embryo-petroleo-claro)!important}
/* row FULL-WIDTH (Divi voltou pra largura boxed padrão → laterais brancas).
   Imagem encosta na esquerda e texto na direita, como no original. */
#bloco-sobre{width:100%!important;max-width:100%!important;padding-left:0!important;padding-right:0!important}
/* o texto estava "torto"/descentrado (cada módulo tinha offset diferente +
   recuo da coluna) → centraliza o bloco no meio do quadrado (coluna):
   vertical (flex center) + padding horizontal simétrico, offsets zerados */
#bloco-sobre .et_pb_column{
  display:flex!important;flex-direction:column;justify-content:center;
  padding:25px 9%!important; /* menos altura, mantendo a margem lateral do texto (9%) */
}
/* reduz a altura mínima da row (era ~379px+) p/ não ficar grande demais */
#bloco-sobre{min-height:0!important}
#bloco-sobre .et_pb_text{
  margin:0 0 1.2em!important;padding:0!important;width:100%;
}

/* 6h) Botões sobre fundo ESCURO (ex.: "ÁREA DO PACIENTE") = contornados brancos
   (como no original), hover rosa — em vez do rosa preenchido global. Menor. */
#main-content .et_pb_button.et_pb_bg_layout_dark{
  background:transparent!important;border:2px solid #fff!important;color:#fff!important;
  padding:16px 42px!important;font-size:16px!important;
}
#main-content .et_pb_button.et_pb_bg_layout_dark:hover{
  background:var(--embryo-rosa-escuro)!important;border-color:var(--embryo-rosa-escuro)!important;color:#fff!important;
}
/* setinha do hover (Divi anima por margem) alinhada verticalmente com o texto */
#main-content .et_pb_button.et_pb_bg_layout_dark:after{
  vertical-align:middle;position:relative;top:-1px;line-height:1;
}
/* 6h-bis) Grade de TRATAMENTOS (botões do Divi em linha de colunas iguais):
   voltar ao estilo do site ORIGINAL — quadrado arredondado (15px), texto branco
   SUBLINHADO, SEM seta e SEMPRE rosa (sem o petróleo do hover/pílula que o nosso
   CSS global de botões aplicava). Escopo: .et_pb_equal_columns + href vazio (os
   CTAs "Agende uma consulta"/"Ver Todos" ficam em rows normais → não são pegos). */
#main-content .et_pb_row.et_pb_equal_columns a.et_pb_button[href=""],
#main-content .et_pb_row.et_pb_equal_columns a.et_pb_button[href=""]:hover{
  background:var(--embryo-rosa)!important;
  border-color:var(--embryo-rosa)!important;
  color:#fff!important;
  border-radius:15px!important;
  text-decoration:underline!important;
}
#main-content .et_pb_row.et_pb_equal_columns a.et_pb_button[href=""]:after,
#main-content .et_pb_row.et_pb_equal_columns a.et_pb_button[href=""]:before{
  display:none!important;
}

/* faixa do botão "ÁREA DO PACIENTE": altura confortável (padding da seção+row) */
.et_pb_section:has(.et_pb_button[href*="clinisys"]){padding-top:58px!important;padding-bottom:58px!important}
.et_pb_row:has(.et_pb_button[href*="clinisys"]){padding-top:10px!important;padding-bottom:10px!important;min-height:0!important}

/* 6i) Linhas (dividers) sob os títulos: o recolor #35b0f0→rosa + cache clear fez
   o Divi dropar a LARGURA (eram 30%/70%, voltaram a 100% = linha enorme).
   Restaura as larguras (os dividers já são centralizados via margin:auto). */
#main-content .et_pb_divider_0,
#main-content .et_pb_divider_1,
#main-content .et_pb_divider_2,
#main-content .et_pb_divider_5{width:30%!important}
#main-content .et_pb_divider_3{width:70%!important}
/* remove a linha (divider) da seção "Venha dar o primeiro passo" em TODAS as
   páginas — o nº do divider muda por página, então escopo pela seção que
   contém o botão WhatsApp "Agende uma consulta". */
#main-content .et_pb_section:has(.et_pb_button[href*="api.whatsapp.com/send"]) .et_pb_divider{display:none!important}
/* título "Venha dar o primeiro passo da sua jornada": o Divi injeta uma fonte
   sans no módulo → forçamos The Seasons (fonte de títulos da marca) em todas as
   páginas onde a seção existe (escopo pelo botão WhatsApp). */
#main-content .et_pb_section:has(.et_pb_button[href*="api.whatsapp.com/send"]) .et_pb_text :is(h1,h2,h3),
#main-content .et_pb_section:has(.et_pb_button[href*="api.whatsapp.com/send"]) .et_pb_text :is(h1,h2,h3) span{
  font-family:"The Seasons", Georgia, serif!important;
}
/* centraliza os dividers sob o título (margin:auto também foi dropado) */
#main-content .et_pb_divider_0,
#main-content .et_pb_divider_1,
#main-content .et_pb_divider_2,
#main-content .et_pb_divider_3,
#main-content .et_pb_divider_5{margin-left:auto!important;margin-right:auto!important}

/* 6i-bis) HOME: seção "venha dar o primeiro passo" deve ficar IGUAL às internas.
   A interna (section_5) usa background-size:initial (mostra o casal) + título em
   CAIXA-ALTA 27px. A home (section_7) é parallax+cover (esconde o casal, só sobra
   o anel) e o título estava grande/minúsculo. Espelhamos a interna só na home. */
/* em modo parallax a foto fica só no .et_parallax_bg (a section não renderiza a
   imagem). Em vez de esconder, troco o cover por initial p/ revelar o casal. */
body.home #main-content .et_pb_section_7 .et_parallax_bg{
  background-size:initial!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
}
body.home #main-content .et_pb_text_5 h1,
body.home #main-content .et_pb_text_5 h1 span{
  text-transform:uppercase!important;
  font-size:27px!important;
  line-height:1.1em!important;
}
/* o módulo do título (text_5) tem 2 parágrafos VAZIOS depois do <h1> que criam
   um vão enorme antes do texto (cada <p> herda line-height + padding-bottom:1em
   do Divi). Colapsa-os p/ o espaçamento ficar padrão, como nas internas. */
body.home #main-content .et_pb_text_5 p{
  margin:0!important;padding:0!important;line-height:0!important;font-size:0!important;
}

/* 6i-ter) Página "Congelamento de óvulos" (page-id-234): a row do texto corrido
   (row_4) tem config quebrada — width:79.8% JUNTO com margin-left/right:348px →
   em telas largas estoura todo pra direita. Normaliza p/ coluna centralizada. */
body.page-id-234 #main-content .et_pb_row_4.et_pb_row{
  width:80%!important;max-width:1080px!important;
  margin-left:auto!important;margin-right:auto!important;
}
/* mesmo defeito em /preparacao-seminal/ (page-id-254): row_3 com margem fixa
   grande dos dois lados (346px/369px) → estoura pra direita. Centraliza. */
body.page-id-254 #main-content .et_pb_row_3.et_pb_row{
  width:80%!important;max-width:1080px!important;
  margin-left:auto!important;margin-right:auto!important;
}

/* 6i-quater) A faixa petróleo (#bloco-estrutura) NÃO tem width/max-width no CSS que o
   Divi gera (após o BSR de cores) → cai no default BOXED do Divi (width:80%, max-width:1080px)
   e a seção de contato (Agende/Conheça/Entre) fica "estreita" com as colunas espremidas à
   esquerda. Forçamos a largura cheia (1880px) em TODAS as páginas internas — equipe E as
   subpáginas de Tratamentos/Técnicas/etc. (antes o fix existia só p/ a /equipe/ page-id-757).
   A home tem a versão arredondada própria (body.home acima) e fica de fora. */
body:not(.home) #main-content #bloco-estrutura.et_pb_row{
  width:100%!important;
  max-width:1880px!important;
  margin-left:auto!important;margin-right:auto!important;
}

/* 6i-quinquies) BIÓPSIA EMBRIONÁRIA (page-id-271): a row do vídeo "Análise Genética"
   (et_pb_row_3) tem custom_margin margin-left:41px / margin-right:auto no conteúdo
   (gerado inline pelo Divi) → o vídeo cola à ESQUERDA em vez de centralizar como nas
   demais páginas. Centralizamos a row (vence o inline 0,2,0 com 0,3,1; vale em todas
   as larguras). */
body.page-id-271 #main-content .et_pb_row_3.et_pb_row{
  margin-left:auto!important;margin-right:auto!important;
}

/* 6j) Setas do slider (Depoimentos): sem sublinhado (herdado do WP) + rosa */
.et-pb-arrow-prev,.et-pb-arrow-next,
.et-pb-slider-arrows .et-pb-arrow-prev,.et-pb-slider-arrows .et-pb-arrow-next{
  text-decoration:none!important;color:var(--embryo-rosa)!important;
}
.et-pb-arrow-prev:before,.et-pb-arrow-next:before{color:var(--embryo-rosa)!important}

/* 6k) Cards da equipe (Divi team member): nome em petróleo + DM Sans;
   ícone do Instagram em rosa. */
#main-content .et_pb_team_member,
#main-content .et_pb_team_member p,
#main-content .et_pb_team_member .et_pb_module_header,
#main-content .et_pb_team_member .et_pb_module_header a{
  font-family:"DM Sans",sans-serif!important;
}
#main-content .et_pb_team_member .et_pb_module_header,
#main-content .et_pb_team_member .et_pb_module_header a{
  color:var(--embryo-petroleo)!important;
}
/* CRM (posição do membro) em petróleo */
#main-content .et_pb_team_member .et_pb_member_position{color:var(--embryo-petroleo)!important}
/* ícone do Instagram do médico (injetado no conteúdo do team_member como Font
   Awesome) — esta versão do Divi não tem Instagram nativo no team_member. */
#main-content .et_pb_team_member .dr-ig{
  display:inline-block;margin-top:12px;
  color:var(--embryo-rosa)!important;font-size:22px;line-height:1;
  text-decoration:none!important;
  transition:transform .2s ease,color .2s ease;
}
#main-content .et_pb_team_member .dr-ig:hover{
  color:var(--embryo-rosa-escuro)!important;transform:scale(1.15);
}
/* nomes do "Corpo Clínico" (h4 em et_pb_text, abaixo das fotos) em petróleo */
#main-content .et_pb_text h4{color:var(--embryo-petroleo)!important}
/* 6l) Fotos circulares do Corpo Clínico: o anel azul está EMBUTIDO na imagem.
   Recorta (zoom) p/ esconder o anel azul e desenha um anel PETRÓLEO via CSS.
   Escopo: imagens dos médicos em /uploads/2023/04/. */
#main-content .et_pb_image:has(img[src*="/uploads/2023/04/"]) .et_pb_image_wrap,
#main-content .et_pb_image:has(img[src*="/uploads/2023/05/"]) .et_pb_image_wrap,
#main-content .et_pb_image:has(img[src*="/uploads/2024/07/"]) .et_pb_image_wrap,
#main-content .et_pb_image:has(img[src*="/uploads/2025/11/"]) .et_pb_image_wrap{
  display:block;width:100%;aspect-ratio:1;margin:0 auto;
  border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 4px var(--embryo-petroleo);
}
#main-content .et_pb_image:has(img[src*="/uploads/2023/04/"]) .et_pb_image_wrap img,
#main-content .et_pb_image:has(img[src*="/uploads/2023/05/"]) .et_pb_image_wrap img,
#main-content .et_pb_image:has(img[src*="/uploads/2024/07/"]) .et_pb_image_wrap img,
#main-content .et_pb_image:has(img[src*="/uploads/2025/11/"]) .et_pb_image_wrap img{
  width:100%!important;height:100%!important;max-width:none;
  object-fit:cover;object-position:center 18%;transform:scale(1.18);
}
/* ícones do Instagram (Divi blurb/font-icon/social) na equipe → rosa.
   Exclui os ícones BRANCOS da faixa "Conheça nossa estrutura" (#bloco-estrutura). */
/* o ícone do Insta na equipe é um et_pb_font_icon dentro de .et_pb_blurb_description
   (herda o azul do link/global do Divi) → forçar rosa direto no conteúdo da descrição.
   NÃO toca nos ícones brancos da home (que ficam em .et-pb-icon, não na description). */
/* o ícone do Instagram da equipe é uma IMAGEM azul (img.wp-image-527 etc.),
   não fonte → recolore p/ rosa via filtro (brightness(0) zera a cor original,
   depois colore p/ ~#ce6997). Escopo: imagens dentro da descrição do blurb. */
#main-content .et_pb_blurb_description img,
img.wp-image-527{
  filter:brightness(0) saturate(100%) invert(58%) sepia(18%) saturate(1095%) hue-rotate(285deg) brightness(93%) contrast(89%)!important;
}
#bloco-estrutura .et-pb-icon,#bloco-estrutura .et_pb_font_icon{color:#fff!important}

.et_pb_toggle_open .et_pb_toggle_title,
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title{color:var(--embryo-rosa)}
::selection{background:var(--embryo-rosa);color:#fff}