/* SMILE Lab -- estilos de apoio (carrossel, abas, placeholders)
   Escopo restrito as classes .smile-*: nao afeta o resto do site. */

:root{
  --smile-ink:#1B212E;
  --smile-blue:#1B6C8C;
  --smile-blue-dark:#0C5774;
  --smile-green:#2A8C5E;
  --smile-deep:#01202D;
  --smile-light:#EEF1F5;
}

/* ============ CARROSSEL ============
   Aplique a classe .smile-carousel no container do Elementor.
   Cada filho direto vira um slide: 3 aparecem por vez e o do meio fica maior.
   Para adicionar um membro, basta duplicar um card dentro do container. */

.smile-carousel{
  --smile-visiveis:3;
  --smile-gap:26px;
  --smile-escala-centro:1.07;
  --smile-escala-lado:.94;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:var(--smile-gap) !important;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-top:26px;
  padding-bottom:30px;
}
.smile-carousel::-webkit-scrollbar{ display:none; }
.smile-carousel:focus-visible{ outline:2px solid var(--smile-blue); outline-offset:6px; }

/* largura exata para caberem 3 cards inteiros */
.smile-carousel > .e-con,
.smile-carousel > .elementor-element{
  flex:0 0 calc((100% - (var(--smile-visiveis) - 1) * var(--smile-gap)) / var(--smile-visiveis)) !important;
  max-width:calc((100% - (var(--smile-visiveis) - 1) * var(--smile-gap)) / var(--smile-visiveis)) !important;
  opacity:.66;
  transform:scale(var(--smile-escala-lado));
  transform-origin:center center;
  transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s ease, box-shadow .42s ease;
  will-change:transform;
}
.smile-carousel > .smile-is-center{
  opacity:1;
  transform:scale(var(--smile-escala-centro));
  box-shadow:0 22px 48px rgba(27,33,46,.16);
  position:relative;
  z-index:2;
}
.smile-carousel--on-dark > .smile-is-center{
  box-shadow:0 22px 48px rgba(0,0,0,.42);
}

/* Controles do carrossel (injetados por JS) */
.smile-carousel-nav{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin-top:6px;
}
.smile-carousel-nav button,
.smile-carousel-nav button:focus{
  width:46px;
  height:46px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(27,33,46,.16);
  background-color:#FFFFFF;
  color:#1B212E;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.smile-carousel-nav button:hover{
  background-color:#1B6C8C;
  border-color:#1B6C8C;
  color:#FFFFFF;
}
.smile-carousel-nav button:active{ transform:scale(.94); }
.smile-carousel-nav button:focus-visible{
  outline:2px solid #1B6C8C;
  outline-offset:3px;
}
.smile-carousel-nav button svg{ width:18px; height:18px; }
.smile-carousel-nav--on-dark button,
.smile-carousel-nav--on-dark button:focus{
  background-color:transparent;
  border-color:rgba(255,255,255,.35);
  color:#FFFFFF;
}
.smile-carousel-nav--on-dark button:hover{
  background-color:#FFFFFF;
  border-color:#FFFFFF;
  color:#01202D;
}

@media (prefers-reduced-motion: reduce){
  .smile-carousel > .e-con,
  .smile-carousel > .elementor-element{ transition:none; }
}

/* ============ PESQUISAS ============
   .smile-research  >  .smile-research-aside  (cards clicaveis)
                    +  .smile-research-panels (conteudo de cada linha)
   Cada card e cada painel continua sendo um container do Elementor:
   para trocar texto, imagem ou cor basta abrir o widget no editor.
   O JS so move a classe .is-active. Sem JS -- como acontece dentro do
   editor -- os paineis aparecem empilhados e tudo continua visivel. */

.smile-research-aside .smile-research-tab{
  width:100%;
  cursor:pointer;
  transition:width .3s ease, background-color .3s ease, box-shadow .3s ease;
}
.smile-research-aside .smile-research-tab:focus-visible{
  outline:2px solid #FFFFFF;
  outline-offset:3px;
}
.smile-research--ready .smile-research-tab:not(.is-active){ width:82%; }

/* Card ativo: fundo branco, titulo azul e tipografia maior, como no design.
   Antes de o JS rodar, o primeiro card ja aparece ativo. */
.smile-research .smile-research-tab.is-active,
.smile-research:not(.smile-research--ready) .smile-research-tab:first-child{
  background-color:#FFFFFF !important;
  box-shadow:0 14px 34px rgba(0,0,0,.26);
}
.smile-research .smile-research-tab.is-active .smile-research-tab__title .elementor-heading-title,
.smile-research:not(.smile-research--ready) .smile-research-tab:first-child .smile-research-tab__title .elementor-heading-title{
  color:#0B5674 !important;
  font-size:20px !important;
}
.smile-research .smile-research-tab.is-active .smile-research-tab__desc,
.smile-research:not(.smile-research--ready) .smile-research-tab:first-child .smile-research-tab__desc{
  font-size:14px !important;
  text-align:justify;
}

/* Paineis da direita */
.smile-research--ready .smile-research-panel{ display:none; }
.smile-research--ready .smile-research-panel.is-active{ display:flex; }
.smile-research-panel__img img{
  display:block;
  width:100%;
  aspect-ratio:3 / 1;
  object-fit:cover;
  border-radius:18px 18px 0 0;
}

@media (max-width:1024px){
  .smile-research--ready .smile-research-tab:not(.is-active){ width:100%; }
}
/* ============ PLACEHOLDER DE IMAGEM ============ */
.smile-ph img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ============ SELETOR DE IDIOMA ============ */
.smile-lang{
  display:flex;
  align-items:center;
  gap:2px;
  background:#282F3E;
  border-radius:999px;
  padding:5px 6px;
}
.smile-lang .elementor-button{
  border-radius:999px !important;
  line-height:1;
}

/* ============ RESPONSIVO ============
   Duas travas impedem o card de crescer sem limite ao estreitar a tela:
   1. a foto e recortada em quadrado (aspect-ratio), entao NUNCA e ela quem
      define a altura do card. Sem isso, um card largo com foto quadrada
      ficava com ~720px de altura e cobria a tela inteira;
   2. o slide tem um teto de largura quando so um card aparece por vez.
   Vale tambem para as fotos reais dos membros, que virao em formatos variados. */

.smile-carousel img{
  aspect-ratio:1 / 1;
  object-fit:cover;
  height:auto;
}

@media (max-width:1024px){
  .smile-carousel{ --smile-visiveis:2; --smile-gap:20px; }
}
@media (max-width:600px){
  .smile-carousel{
    --smile-visiveis:1;
    --smile-gap:16px;
    --smile-escala-centro:1;
    --smile-escala-lado:1;
    padding-top:8px;
    padding-bottom:16px;
  }
  .smile-carousel > .e-con,
  .smile-carousel > .elementor-element{
    opacity:1;
    /* teto para o card unico nao virar uma tela inteira */
    flex-basis:min(100%, 320px) !important;
    max-width:min(100%, 320px) !important;
  }
}


/* ============ PAGINA QUEM SOMOS ============
   Classes usadas nos containers da pagina /quem-somos/.
   Tudo continua editavel no Elementor: aqui so mora a matematica
   do grid (3 cards exatos) e a sobreposicao do video. */

/* Pilula de secao (QUEM SOMOS, NOSSOS VALORES, NOSSO TIME) */
.smile-pill{
  display:inline-flex !important;
  width:auto !important;
  max-width:max-content;
  flex:0 0 auto !important;
  align-items:center;
  gap:8px;
}
.smile-pill::before{
  /* O Elementor usa o ::before do container para o overlay de fundo e o deixa
     em position:absolute. Sem forcar static o pontinho verde vai parar no
     canto superior esquerdo, fora da pilula. */
  content:'';
  position:static !important;
  inset:auto !important;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--smile-green);
  flex:0 0 auto;
}
.smile-pill > .elementor-widget{ width:auto; }

/* Titulo de duas cores: o <span> recebe o tom escuro */
.smile-title-2c span{ color:var(--smile-ink); }

/* Introducao em duas colunas */
@media (max-width:1024px){
  .smile-intro,
  .smile-intro > .e-con-inner{ flex-direction:column !important; }
  .smile-intro > .e-con, .smile-intro > .e-con-inner > .e-con{ width:100% !important; }
}
@media (max-width:767px){
  .smile-intro-cols,
  .smile-intro-cols > .e-con-inner{ flex-direction:column !important; }
  .smile-intro-cols > .e-con, .smile-intro-cols > .e-con-inner > .e-con{ width:100% !important; }
}

/* Faixa de 3 cards (Missao / Atuacao / Impacto) */
.smile-pilar{
  flex:0 0 calc((100% - 44px) / 3) !important;
  max-width:calc((100% - 44px) / 3) !important;
}
@media (max-width:1024px){
  .smile-pilar{ flex-basis:100% !important; max-width:100% !important; }
}

/* Imagem grande + card de video sobreposto */
.smile-media-duo{ align-items:center; }
.smile-media-duo__video{ margin-left:-70px; z-index:2; position:relative; }
@media (max-width:1024px){
  .smile-media-duo,
  .smile-media-duo > .e-con-inner{ flex-direction:column !important; row-gap:20px !important; }
  .smile-media-duo__img,
  .smile-media-duo__video{ width:100% !important; max-width:100% !important; margin-left:0; }
}

/* Grid dos 6 valores: 3 x 2 -> 2 x 3 -> 1 coluna */
.smile-valor{
  flex:0 0 calc((100% - 44px) / 3) !important;
  max-width:calc((100% - 44px) / 3) !important;
}
@media (max-width:1024px){
  .smile-valor{
    flex-basis:calc((100% - 22px) / 2) !important;
    max-width:calc((100% - 22px) / 2) !important;
  }
}
@media (max-width:767px){
  .smile-valor{ flex-basis:100% !important; max-width:100% !important; }
}


/* ============ CARROSSEL: passo controlado pelo JS ============
   Com o JS ativo o container para de rolar sozinho. Isso evita que a roda do
   mouse sobre ele (que o Chrome converte em rolagem horizontal quando o
   elemento so rola na horizontal) e o recentrar automatico disputem o passo
   com os botoes -- era isso que fazia o carrossel parecer travado.
   O arrasto com o dedo ou com o mouse continua funcionando: e tratado no JS.
   Sem JS, .smile-carousel mantem overflow-x:auto e rola na mao. */
.smile-carousel--js{
  overflow-x:hidden;
  touch-action:pan-y;
  cursor:grab;
}
.smile-carousel--js.smile-arrastando{ cursor:grabbing; }
.smile-carousel--js.smile-arrastando > .e-con{ user-select:none; }


/* ============ CABECALHO / MENU HAMBURGUER ============
   Abaixo de 1100px os 9 itens do menu nao cabem em uma linha e quebravam por
   cima do seletor de idioma. O menu inline some e vira um painel vertical.
   Os itens do painel sao clonados pelo JS a partir do proprio widget do
   Elementor -- nao existe uma segunda lista para manter. */

.smile-header{ position:relative; }
.smile-burger{ display:none; }

@media (max-width:1100px){
  .smile-header .smile-nav{ display:none !important; }

  .smile-header .smile-lang{
    width:auto !important;
    flex:0 0 auto !important;
    margin-left:auto;
  }

  .smile-burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    padding:0 11px;
    margin-left:12px;
    flex:0 0 auto;
    background:#FFFFFF;
    border:1px solid #DCE3E9;
    border-radius:10px;
    cursor:pointer;
    transition:border-color .2s ease;
  }
  .smile-burger:hover{ border-color:var(--smile-blue); }
  .smile-burger:focus-visible{ outline:2px solid var(--smile-blue); outline-offset:2px; }

  .smile-burger span{
    display:block;
    width:100%;
    height:2px;
    border-radius:2px;
    background:var(--smile-ink);
    transition:transform .25s ease, opacity .18s ease;
  }
  .smile-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .smile-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .smile-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .smile-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:999;
    background:#FFFFFF;
    border-top:1px solid #E7EBEF;
    box-shadow:0 18px 40px rgba(27,33,46,.14);
    padding:6px 24px 16px;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
  }
  .smile-menu ul{ list-style:none; margin:0; padding:0; }
  .smile-menu li{ border-bottom:1px solid #EEF1F5; }
  .smile-menu li:last-child{ border-bottom:0; }
  .smile-menu a{
    display:block;
    padding:14px 2px;
    font-size:15px;
    font-weight:600;
    line-height:1.3;
    color:var(--smile-ink);
    text-decoration:none;
  }
  .smile-menu a:hover,
  .smile-menu a:focus-visible{ color:var(--smile-blue); }
}

@media (min-width:1101px){
  .smile-menu{ display:none !important; }
}

/* Cabecalho em uma linha so: logo a esquerda, idioma + hamburguer a direita.
   Sem isto o botao quebrava para uma segunda linha em telas estreitas. */
@media (max-width:1100px){
  .smile-header .smile-header-row,
  .smile-header .smile-header-row > .e-con-inner{
    flex-wrap:nowrap !important;
    column-gap:12px !important;
  }
}
@media (max-width:560px){
  .smile-header .elementor-widget-image{ width:auto !important; }
  .smile-header .elementor-widget-image img{ width:124px !important; }
  .smile-header .smile-lang .elementor-button{ padding-left:10px !important; padding-right:10px !important; }
  .smile-burger{ margin-left:8px; }
  .smile-menu{ padding-left:20px; padding-right:20px; }
}

/* Seletor de idioma: o JS marca qual botao esta ativo conforme a URL.
   As cores continuam as mesmas que estao configuradas nos widgets. */
.smile-lang .elementor-button{
  transition:background-color .2s ease, color .2s ease;
}
.smile-lang .smile-lang-ativo .elementor-button{
  background-color:#3B4455 !important;
  color:#FFFFFF !important;
}
.smile-lang .smile-lang-inativo .elementor-button{
  background-color:transparent !important;
  color:#9AA4B2 !important;
}
.smile-lang .smile-lang-inativo .elementor-button:hover{
  color:#FFFFFF !important;
}