/* =========================================================

   Ecossistema Jurídico — ajustes de UI/UX (botão WhatsApp)

   ========================================================= */



/* O tema (style.css) usa font-family "Font Awesome 5 Free" (peso 900) nos

   ícones de lista (::before, ex.: check, setas, aspas), mas só o webfont

   FontAwesome 4.7 está carregado localmente — por isso os ícones aparecem

   como quadrados vazios. Este alias aponta o nome esperado pelo tema para

   o arquivo já existente (os códigos Unicode usados, ex. f00c, f054, f078,

   existem nesse webfont). */

@font-face{

  font-family: "Font Awesome 5 Free";

  font-style: normal;

  font-weight: 900;

  src: url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),

       url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),

       url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');

}



.btn-wpp{

  position: fixed;

  bottom: 78px; /* fica acima do botão "voltar ao topo" (.scrollup: bottom 20px, 45px de altura) */

  right: 18px;

  z-index: 999999;

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  background: #25D366;

  border-radius: 999px;

  padding: 6px;

  box-shadow: 0 6px 22px rgba(0,0,0,.28);

  transition: padding .25s ease, box-shadow .25s ease, transform .2s ease;

}

.btn-wpp:hover{

  transform: translateY(-2px);

  box-shadow: 0 10px 28px rgba(0,0,0,.35);

}

.btn-wpp img{

  display: block;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  position: relative;

  z-index: 2;

}

.btn-wpp-pulse{

  position: absolute;

  inset: 0;

  border-radius: 999px;

  background: rgba(37,211,102,.55);

  animation: btnWppPulse 2.4s ease-out infinite;

  z-index: 1;

}

@keyframes btnWppPulse{

  0%   { transform: scale(.85); opacity: .65; }

  70%  { transform: scale(1.55); opacity: 0; }

  100% { transform: scale(1.55); opacity: 0; }

}

.btn-wpp-label{

  max-width: 0;

  overflow: hidden;

  white-space: nowrap;

  color: #ffffff;

  font-weight: 700;

  font-size: 15px;

  letter-spacing: .2px;

  transition: max-width .3s ease, padding-right .3s ease;

}

/* A foto da Dra. Amanda no carrossel é posicionada com "bottom: -30px"

   relativo ao bloco de texto — mas esse bloco muda de altura conforme o

   texto de cada banner (ex.: 621px, 649px, 710px), então a foto "pula"

   de posição a cada slide e ora fica mais sobreposta pelos cards

   "Comprometimento/Advogados Especialistas" logo abaixo (que têm

   posição fixa), ora menos — por isso ela aparece cortada em alguns

   slides e normal em outros. Fixando a partir do topo (que é constante

   em todos os slides) a posição passa a ser sempre a mesma.

   top:74px cortava a cabeça da foto — o header (.header_style_four) é

   position:absolute por cima do slide e tem ~140-150px de altura, então a

   foto começava a ser desenhada ainda por baixo dele. Empurrando mais pra

   baixo (160px) a cabeça fica sempre visível abaixo do menu. */

.slider_content_wrap .rx_slider_text_img_area .rx_slider_side_img{

  top: 160px;

  bottom: auto;

}



/* Cada banner tem um texto de tamanho diferente (ex.: "Direito Previdenciário"

   tem uma frase bem mais longa que "Concursos Públicos"), e como a altura do

   slide vem só do padding + conteúdo (sem altura fixa), cada slide acaba com

   uma altura total diferente (621px, 649px, 710px, observado em produção) —

   dá um "pulo" visível no tamanho da página inteira durante a transição do

   carrossel. min-height sozinho não resolve: o fundo/máscara do slide

   (.rx_slider_img/.background_overlay, height:100% do .slider_content_wrap)

   ainda cresce junto com o slide mais alto, dando a impressão de que a

   máscara "aumenta" de um slide pro outro. Altura FIXA (não mínima) + overflow

   hidden trava o tamanho igual em todos, cortando com segurança o slide raro

   que passar de 720px em vez de esticar tudo. */

.slider_content_wrap{

  height: 720px;

  overflow: hidden;

}

@media (max-width: 767px){

  .slider_content_wrap{

    height: 620px;

  }

}



.btn-wpp:hover .btn-wpp-label{

  max-width: 160px;

  padding-right: 6px;

}



/* Alinha o botão "voltar ao topo" pelo centro do botão do WhatsApp,

   já que eles ficam empilhados no canto inferior direito (larguras diferentes) */

.scrollup{

  right: 35px;

}



@media (max-width: 767px){

  .btn-wpp{ bottom: 72px; right: 14px; }

  .btn-wpp img{ width: 50px; height: 50px; }

  .btn-wpp-label{ display: none; }

  .scrollup{ right: 23px; }

}



/* =========================================================

   Busca global na barra superior do header

   ========================================================= */

.header_style_four .header_top_content .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

}

.header_top_search {

  order: 2;

}

.header_top_search form {

  display: flex;

  align-items: stretch;

}

.header_top_search input {

  width: 220px;

  padding: 6px 12px;

  font-size: 13px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  background-color: rgba(255, 255, 255, 0.08);

  color: #fff;

  border-radius: 3px 0 0 3px;

}

.header_top_search input::placeholder {

  color: #cfcfcf;

}

.header_top_search input:focus {

  outline: none;

  background-color: rgba(255, 255, 255, 0.15);

}

.header_top_search button {

  padding: 0 14px;

  border: none;

  background-color: #c6ac82;

  color: #1a1a1a;

  border-radius: 0 3px 3px 0;

  cursor: pointer;

}

.header_top_search button:hover {

  background-color: #fff;

}



@media (max-width: 991px){

  .header_top_search {

    display: none;

  }

}



/* =========================================================

   PALETA DE CORES OFICIAL DO ECOSSISTEMA JURÍDICO (UAU)

   - Azul petróleo: #081826

   - Dourado:       #C89A3C

   - Branco:        #F5F5F5

   - Cinza:         #7E8792

   ========================================================= */



:root {

  --color-navy: #081826 !important;

  --color-gold: #C89A3C !important;

  --color-white: #F5F5F5 !important;

  --color-gray: #7E8792 !important;



  --admin-nav: #081826 !important;

  --admin-accent: #C89A3C !important;

  --secondary: #081826 !important;

  --accent: #C89A3C !important;

}



body {

  background-color: #F5F5F5 !important;

  color: #081826;

  font-family: 'Plus Jakarta Sans', 'Sora', sans-serif !important;

}



.header_style_four,

.header_top_content,

.header_main_menu_wrap,

.footer_section,

.footer_bottom,

.footer_copyright,

.widget_title {

  background-color: #081826 !important;

}



.header_top_text span,

.header_top_contact a,

.rx_main_navigation ul li a,

.footer_widget p,

.footer_widget span,

.footer_bottom p {

  color: #F5F5F5 !important;

}



/* .footer_section_4 herda cores de título/link pensadas pro tema original com

   fundo branco (widget_title #000, blog-text h4 #555, practice_list #343434)

   — como o fundo virou petróleo (#081826) acima, esse texto escuro ficava

   quase invisível. */

.footer_section_4 .widget_title,

.footer_section_4 .latest-blog-widget .blog-text h4,

.footer_section_4 .latest-blog-widget .blog-text h4 a,

.footer_section_4 .practice_list li,

.footer_section_4 .practice_list li a {

  color: #F5F5F5 !important;

}

.footer_section_4 .practice_list li::before {

  border-color: #7E8792 !important;

}

.footer_section_4 .practice_list li:hover,

.footer_section_4 .practice_list li:hover a,

.footer_section_4 .latest-blog-widget .blog-text h4 a:hover {

  color: #C89A3C !important;

}



.rx_main_navigation ul li a:hover,

.header_top_contact a:hover,

.header_top_text a {

  color: #C89A3C !important;

}



.rx_header_btn a,

.btn-primary,

.btn-gold,

.theme_btn,

.header_top_search button {

  background-color: #C89A3C !important;

  color: #081826 !important;

  border-color: #C89A3C !important;

  font-weight: 700 !important;

}



.rx_header_btn a:hover,

.btn-primary:hover,

.theme_btn:hover,

.header_top_search button:hover {

  background-color: #b3872e !important;

  color: #F5F5F5 !important;

}



h1, h2, h3, h4, h5, h6,

.section_title h2,

.slider_text h1,

.practice_text h3 {

  color: #081826 !important;

}



p, .sub_title, .text-muted, .practice_text p {

  color: #7E8792 !important;

}



/* O h1/h2 do banner da home fica sobre fundo escuro (a regra genérica acima

   é pensada pra título sobre fundo claro do resto do site) — sem isso o

   título ficava petróleo em cima de petróleo, praticamente invisível. */

.slider_content_wrap .rx_slider_text h1,

.slider_content_wrap .rx_slider_text h2 {

  color: #F5F5F5 !important;

}



/* Os 3 cards de destaque logo abaixo do banner (ícone + texto) vinham com um

   vinho/marrom escuro (#190200) do tema original, fora da paleta. */

.rx-feature-icon-text {

  background-color: #0d2135 !important;

}