/* ====================================================================
   FertGroup — Nova identidade de marca
   --------------------------------------------------------------------
   Este arquivo carrega APENAS:
     1) as fontes licenciadas (@font-face);
     2) tokens CSS de referência da paleta;
     3) ajustes finos pontuais (se necessário).
   As cores, tipografia global, header e footer são definidos nos
   Global Settings / Theme Builder do Elementor — NÃO chumbar cor aqui.
   ==================================================================== */

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

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

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

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

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

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

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

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