/*
  style.css - Estilos principais do site Soluções Humanas LTDA
  Comentários explicam as principais seções e regras de responsividade.
*/
p{
  text-indent: 40px;
}
:root {
  --azul-escuro: #124e62;/*#1F5166*/;
  --azul-medio: #3949ab;
  --azul-claro: #e3eafc;
  --cinza: #f5f5f5;
  --branco: #fff;
  --cinza-texto: #444;
  --fonte-principal: 'Segoe UI', Arial, sans-serif;
}
.cabecalho{
  height: 40%;
  position: fixed; 
  display: flex;
 align-items: end;
}
.nome{
  margin: 0 10% 0 0;
  width: 60%;
  text-align: end;
  font-size: 35px;
  min-width: 400px;
  align-items: center;
  height: auto;
  display: inline-block;
}
.logo{
  margin:  15px 0 0 15px;
  height: 100%; 
  width: 40%;
  margin-top: 0;
  display: inline-block;
}
.main-title1{
  text-align: center;
  color:#3949ab;
  font-family: 'Dancing Script', cursive, 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  
}
#tranformarmos{
  width: 80%;
}
#beneficios{
  width: 80%;
  text-align: justify;
}
#tranformamos subsection{
  width: 30%
  }
  
html {
  box-sizing: border-box;
  font-size: 16px;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: var(--fonte-principal);
  background: var(--cinza);
  color: var(--cinza-texto);
  line-height: 1.6;
}

.header {
  position: relative;
  overflow: hidden;
  height: 40vh;
  min-height: 180px;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
a{
  color: white;
}

.section capacitacao, .section apresentacao, .section conselho {
  text-align: center;
}
.section transformamos{
  max-width: 310px;
  background-color: #124e62;
  color: white;
}
.subsection{
  background-color: #124e62;
  color: white;
  
}
.subsection h2{
  color: white !important;
}
.cabecalho {
  position: relative;
  z-index: 1;
  /*display: flex;*/
  align-items: center;
  /*gap: 12px;*/
  height: 100%;
}
.capacitacao p, .apresentacao p, .conselho p{
  text-align: justify;
}
.capacitacao h2, .apresentacao h2, .conselho h2{
  text-align: center;
}
.logo {
  height: 70%;
  width: auto;
  max-height: 70%;
}

.cabecalho h2 {
  margin: 0;
}
.slogan {
  display: block;
  font-size: 1rem;
  font-style: italic;
  margin-top: 0.2rem;
  color: var(--azul-claro);
}
.main-title {
  margin: 1.5rem 0 0.5rem 0;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--azul-claro);
}

/* Menu mobile (hamburguer) */
.nav-mobile {
  display: none;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}
#menu-toggle {
  background: none;
  border: none;
  color: var(--azul-claro);
  font-size: 2rem;
  cursor: pointer;
  display: none;
}
#menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}
#menu-list li a {
  color: var(--azul-claro);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
#menu-list li a:hover {
  color: var(--branco);
}


/* Seções principais */
.section {
  background: var(--branco);
  margin: 2rem auto;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  max-width: 900px;
  box-shadow: 0 2px 12px rgba(26,35,126,0.07);
}
.section h2 {
  color: var(--azul-medio);
  font-size: 1.7rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.section h3 {
  color: var(--azul-escuro);
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 0.7rem;
}
.section ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0 0 0;
}
.section ul li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.section ul li strong {
  color: var(--azul-medio);
}

/* Grid de cursos */
.cursos-grid {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.curso-col {
  background: var(--azul-claro);
  border-radius: 10px;
  padding: 1.5rem 1rem;
  flex: 1 1 250px;
  min-width: 220px;
  max-width: 350px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(26,35,126,0.08);
}
.curso-col-2 img{
  padding-top: 120px;
}
.curso-col h3 {
  margin-top: 0;
  color: var(--azul-escuro);
  font-size: 1.1rem;
}
.curso-col p {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--azul-medio);
}

.cursos button, .parceria button{
  border-radius: 25px;
  border: 1px solid #124e62;
  background-color: #124e62;
  color: white;
  padding: 5px 15px;
  margin-top: 5px;
}
.cursos button:hover, .parceria button:hover {
  transform: scale(1.15);
}
.parceria{
  text-align: center;
}

/* Parceria de sucesso */
.parceria-imagens {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.parceria-imagens img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(26,35,126,0.10);
}
.parceria-texto {
  text-align: center;
  color: var(--azul-escuro);
  font-weight: 500;
  margin-top: 0.5rem;
}

.footer {
  background: var(--azul-escuro);
  color: var(--azul-claro);
  text-align: center;
  padding: 1.2rem 0;
  font-size: 1rem;
  margin-top: 2rem;
}
.cursos h2{
  text-align: center;
}
.flex-titulos {
  display: flex;
  gap: 5px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  
}

.flex-titulos .section {
  flex: 1 1 300px;
  min-width: 300px;
  max-width: 500px;
  margin-left: 0;
  margin-right: 0;
  min-height: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  
}
.transformamos{
  background-color: #124e62;
}

.flex-titulos .subsection{
  max-width: 310px;
  background-color: #124e62;
} 
/* Responsividade */
@media (max-width: 900px) {
  .section {
    max-width: 98vw;
    padding: 1.5rem 0.7rem;
  }
  .cursos-grid {
    gap: 1rem;
  }
}
@media (max-width: 700px) {
  .main-title {
    font-size: 1.3rem;
  }
  .logo h2 {
    font-size: 1.2rem;
  }
  .section h2 {
    font-size: 1.2rem;
  }
  .cursos-grid {
    flex-direction: column;
    align-items: center; /* Centraliza as colunas em telas pequenas */
  }
  .curso-col {
    margin-bottom: 1.2rem;
    max-width: 350px;
    width: 100%;
    text-align: center;
    height: auto;
  }
  .parceria-imagens {
    flex-direction: column;
    gap: 0.7rem;
    align-items: center; /* Centraliza as imagens */
  }
  .parceria-texto {
    text-align: center;
  }
}
@media (max-width: 600px) {
  .header {
    padding: 1.2rem 0.5rem 1rem 0.5rem;
  }
  .nav-mobile {
    display: block;
  }
  #menu-toggle {
    display: block;
  }
  #menu-list {
    display: none;
    flex-direction: column;
    background: var(--azul-escuro);
    position: absolute;
    top: 3.5rem;
    right: 1.2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(26,35,126,0.13);
    padding: 1rem 0.5rem;
    gap: 1rem;
    z-index: 10;
  }
  #menu-list.open {
    display: flex;
  }
} 
@media (max-width: 663px) {
  .nome {
    display: none !important; /* Esconde o nome em telas pequenas */
  }
  .cabecalho {
    justify-content: center; /* Centraliza o conteúdo da cabecalho */
  }
  .logo {
    margin: 0 auto !important; /* Centraliza a logo */
    display: block !important;
    /* Removido: width, min-width, max-width, aspect-ratio, height, object-fit */
  }
}
@media (min-width: 615px) {
  .transformamos{
    max-width: 310px !important;
  }
  .beneficios{
    max-width: 580px !important;
  }
}
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s;
}
.whatsapp-float:hover {
  transform: scale(1.1);
} 

@media (max-width: 600px) {
  .cursos-titulos {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
} 

/* Imagens dos cursos: não ultrapassam a box, mantêm proporção e crescem 7% no hover da box */
.curso-col img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 0.2s;
}
.curso-col a:hover img, .parceria img:hover {
  transform: scale(1.07);
} 




/* .flex-titulos: garantir que .transformamos e .beneficios tenham a mesma altura */
.flex-titulos {
  display: flex;
  align-items: stretch;
}
.transformamos, .beneficios {
  display: flex;
  flex-direction: column;
  height: 100%;
} 

@media (min-width: 606px) {
  .flex-titulos {
    display: flex;
    align-items: stretch;
  }
  .transformamos, .beneficios {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .info{
    min-width: 220px;
  }
} 

/* Rodapé: informações de contato em linha, com quebra automática */
.footer-contato {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80%;
  margin-top: 0.3rem;
  font-size: 1rem;
} 

/* Imagens de parcerias de sucesso com mesmo tamanho das imagens de cursos */
.parceria-imagens img {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 180px;
  max-width: 100%;
  object-fit: contain;
  display: block;
} 

  img[src*="keller"], img[src*="valleria"] {
    height: 25vh;
    width: 25vh;
    object-fit: cover;
    display: inline-block;
    margin: 0 auto;
  }

.keller, .valleria{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.info{
  margin: 0 10px 0 10px;
  min-width: 350px;
  flex: 1 1 350px;
  box-sizing: border-box;
}
.palestrantes img{
  margin: 0 10px 0 10px;
}
#palestrantes p{
  text-align: justify;
}
@media (max-width: 650px) {
  .palestrantes img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30vh;
    width: 30vh;
    object-fit: cover;
  }
}

/* Flexbox para parceria: imagem grande à esquerda, duas menores à direita, todas com bordas arredondadas */
.parceria-flex {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}
.parceria-img-grande {
  flex: 0 0 350px;
  width: 350px;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.parceria-coluna-direita {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}
#parceria .parceria-coluna-direita .parceria-img {
  aspect-ratio: 16/9;
  object-fit: contain;
  width: 300px;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}
.parceria-img {
  border-radius: 16px;
}
@media (max-width: 900px) {
  .parceria-flex {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .parceria-img-grande,
  #parceria .parceria-coluna-direita .parceria-img {
    width: 90vw;
    max-width: 350px;
    height: auto;
  }
  .parceria-coluna-direita {
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #parceria .parceria-coluna-direita .parceria-img {
    width: 45vw;
    max-width: 180px;
  }
} 

  img[src*="keller"], img[src*="valleria"] {
    height: 25vh;
    width: 25vh;
    object-fit: cover;
    display: inline-block;
    margin: 0 auto;
  }

.keller, .valleria{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.info{
  margin: 0 10px 0 10px;
  min-width: 350px;
  flex: 1 1 350px;
  box-sizing: border-box;
}
.palestrantes img{
  margin: 0 10px 0 10px;
}

@media (max-width: 650px) {
  .palestrantes img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 30vh;
    width: 30vh;
    object-fit: cover;
  }
}

.diferencial{
  background-color: #124e62;
  color: white;
  
}

 /* gemini pro */
/* Estilos para a Seção de Mídia */
.midia h2 {
  text-align: center;
}

.midia-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.midia-item {
  flex: 1 1 400px; 
  max-width: 560px;
}

.imagens img{
  border-radius: 16px;
}
.imagens h2{
  text-align: center;
}
/* --- Estilos para Galeria Expansível --- */

/* Esconde o botão em telas grandes */
.galeria-btn {
  display: none; 
}

/* Regras para telas menores que 681px */
@media (max-width: 681px) {
  
  /* Mostra o botão */
  .galeria-btn {
    display: block;
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--branco);
    background-color: #124e62;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  /* Esconde a galeria de imagens por padrão */
  #galeria-container {
    display: none; 
  }

  /* Classe que será adicionada via JS para mostrar a galeria */
  #galeria-container.visivel {
    display: flex;
    flex-direction: column; /* Empilha as imagens verticalmente */
    align-items: center;
  }

  /* Remove a largura mínima das imagens para se ajustarem melhor */
  .imagens img {
    max-width: 90%; /* Garante que a imagem não ultrapasse 90% da largura do container */
    height: auto;   /* Mantém a proporção da imagem automaticamente */
    width: auto;    /* Permite que a imagem use seu tamanho natural até o limite do max-width */
    min-width: 450px;
  }
}

/* Container do vídeo para manter a proporção */
.video-container {
  position: relative;
  padding-bottom: calc(315 / 560 * 100%); /* Calcula a proporção da altura pela largura */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  border-radius: 12px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 560 / 315;
}

/* Estilo do card para o link da matéria */
.midia-link-card {
  display: block;
  background-color: var(--cinza);
  border: 2px solid var(--azul-claro);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--cinza-texto);
  height: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: left;
}

.midia-link-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(26,35,126,0.1);
}

.midia-link-card h3 {
  margin-top: 0;
  color: var(--azul-medio);
}

.midia-link-card p {
  text-indent: 0;
}

.card-source {
  display: inline-block;
  font-weight: bold;
  color: var(--azul-escuro);
}
 
.midia-grid iframe {
  border-radius: 12px;
  border: none; /* Garante que não haja nenhuma borda padrão */
  flex: 1 1 400px;
  max-width: 560px;
  height: 315px; /* Altura para manter a proporção com a largura máxima */
}