/* =========================================================
   VARIÁVEIS DE CORES DO SISTEMA
   Centraliza as cores institucionais para fácil manutenção
========================================================= */
:root {
  --cor-primaria: #17436a;   /* Azul institucional */
  --cor-secundaria: #bb1518; /* Vermelho institucional */
}

/* =========================================================
   CONFIGURAÇÕES GERAIS
========================================================= */
body {
  font-family: Roboto, sans-serif; /* Fonte padrão do site */
}

/* =========================================================
   LOGO E NAVBAR
========================================================= */
.logo {
  height: 48px;       /* Reduz altura da logo sem alterar o arquivo */
  width: auto;        /* Mantém proporção */
  margin-top: 8px;    /* Alinhamento vertical */
}

.nav-wrapper {
  background-color: var(--cor-primaria); /* Fundo da navbar */
}

/* Recuo da logo apenas no desktop */
@media (min-width: 993px) {
  .nav-wrapper .brand-logo {
    margin-left: 16px; /* ajuste fino conforme necessário */
  }
}

.social-icon {
  width: 22px;
  height: 22px;
  /*margin-right: 8px;*/
  vertical-align: middle;
}

/* =========================================================
   BOTÕES
========================================================= */
.btn-primary {
  background-color: var(--cor-primaria); /* Botão principal */
}

.btn-cta {
  background-color: var(--cor-secundaria); /* Botão de destaque (CTA) */
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--cor-primaria);
  color: var(--cor-primaria);
}

/* =========================================================
   HERO (PÁGINA INICIAL)
========================================================= */
.hero {
  padding: 80px 0; /* Espaçamento vertical */
}

.hero h1 {
  font-weight: 500;
}

.hero-buttons a {
  margin-right: 10px;
}

/* =========================================================
   ÍCONES GERAIS
========================================================= */
.card i {
  color: var(--cor-primaria); /* Ícones padrão dos cards */
}

/* =========================================================
   CTA FINAL
========================================================= */
.cta-final {
  background-color: var(--cor-primaria);
  color: #ffffff;
  border-top: 4px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  padding-top: 40px;
  padding-bottom: 40px;
}

.cta-final a {
  color: #ffffff;
  transition: all 0.3s ease;
position: relative;
}

.cta-final a:hover {
  color: #e3f2fd;
  transform: translateX(4px);
}

.cta-final ul {
  list-style: none;
  padding-left: 0;
}

.cta-final ul li {
  margin-bottom: 10px;
}

.cta-final ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* .cta-final a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -3px;
  left: 0;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

.cta-final a:hover::after {
  width: 100%;
} */

/* =========================================================
   RODAPÉ
========================================================= */
.page-footer {
  background-color: #263238;
  padding: 20px 0;
}

/* =========================================================
   CARD DE CURSOS (PADRÃO)
========================================================= */
.curso-card {
  height: 400px;                 /* Altura fixa para alinhamento */
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;           /* Espaço vertical entre cards */
  transition: all 0.3s ease;     /* Suavidade no hover */
  cursor: pointer;
}

/* =========================================================
   IMAGEM DO CARD
========================================================= */
.curso-img img {
  height: 210px;     /* Altura padronizada */
  object-fit: cover; /* Evita distorção */
}

/* =========================================================
   CONTEÚDO DO CARD
========================================================= */
.curso-card .card-content {
  flex-grow: 1; /* Faz o conteúdo ocupar o espaço disponível */
}

/* Texto padrão do card (não título) */
.curso-card .card-content p {
  font-size: 0.9rem;
  /*line-height: 1.45;*/
  color: #4a4a4a;
  margin-top: 8px;
}

/* Destaque leve para labels */
.curso-card .card-content strong {
  font-weight: 400;
}

/* =========================================================
   TÍTULO DO CARD
========================================================= */
.curso-card .card-content .card-title {
  font-size: 0.95rem; /* Título um pouco menor */
  line-height: 1.3;
  font-weight: 700;
}

/* Ícone de ativação do reveal */
.curso-card .card-title i.material-icons {
  font-size: 18px;
  transition: transform 0.3s ease;
}

/* =========================================================
   CARD REVEAL (OBJETIVO)
========================================================= */
.curso-card .card-reveal {
  overflow-y: auto; /* Scroll se o texto for grande */
}

.curso-card .card-reveal p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #424242;
}

/* =========================================================
   HOVER VISUAL DO CARD
========================================================= */
.curso-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.curso-card:hover .curso-img img {
  filter: brightness(0.95);
}

.curso-card:hover .card-title i {
  transform: rotate(90deg);
}

/* =========================================================
   BOTÃO FLUTUANTE (WHATSAPP)
========================================================= */
.curso-card .btn-floating .material-icons {
  color: #ffffff; /* Ícone branco */
}

/* =========================================================
   CARD ACTION - WHATSAPP
========================================================= */
.card-action-whats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 70px;     /* Aumenta área clicável */
  /* padding: 16px 24px; */
   padding: 20px;
  position: absolute;
}

/* Texto do card-action */
.card-action-whats .action-text {
  font-size: 0.95rem;
  font-weight: 400;     /* Remove negrito */
  text-transform: none;/* Evita uppercase automático */
  color: #2e2e2e;
}

/* Botão WhatsApp */
.card-action-whats .btn-floating {
  box-shadow: none;
}

/* Ícone do WhatsApp */
.card-action-whats .btn-floating i {
  color: #ffffff;
}

/* Botão de ação do card (Solicitar inscrição) */
.card-action-whats .btn {
  width: 100%;
  text-transform: none;
  font-weight: 400;
  background-color: var(--cor-primaria);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover – muda a cor e dá leve destaque */
.card-action-whats .btn:hover {
  background-color: #26a69a;      /* verde */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   CONTAINER DE MESES (PROGRAMAS T&D)
========================================================= */
.meses-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;          /* Espaço entre botões */
  margin-top: 12px;
}

/* Ajustes específicos para mobile */
@media (max-width: 600px) {
  .meses-container a {
    min-width: 52px;
    text-align: center;
  }
}

/* =========================================================
   CONTAINER DA AGENDA DE TREINAMENTOS PONTUAIS
========================================================= */

/* Container da agenda */
.agenda-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* proporção desktop */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  background: #fff;
}

/* Iframe responsivo */
.agenda-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Ajuste para mobile */
@media (max-width: 600px) {
  .agenda-container {
    padding-bottom: 120%; /* mais altura no celular */
  }
}

/* =========================================================
   CAROUSEL / HERO
   Área principal de destaque da página
========================================================= */

/* Container do carousel no topo */
.hero-carousel {
  margin-top: 0;                 /* Remove espaçamento superior */
}

/* Altura padrão do carousel (desktop) */
.carousel.carousel-slider {
  height: 420px;                 /* Altura ideal para destaque sem exagero */
}

/* Cada slide do carousel */
.carousel.carousel-slider .carousel-item {
  background-size: cover;        /* Preenche o slide sem distorcer */
  background-position: center;   /* Centraliza o foco da imagem */
  background-repeat: no-repeat;  /* Evita repetição */
}

/* Área de conteúdo sobre a imagem (caso utilize textos) */
.carousel-content {
  background: rgba(0, 0, 0, 0.45); /* Overlay para melhorar leitura */
  padding: 32px;                  /* Espaçamento interno confortável */
  max-width: 520px;               /* Limita largura para melhor leitura */
  margin: auto;                   /* Centraliza no slide */
  border-radius: 8px;             /* Cantos levemente arredondados */
}

/* Título do slide */
.carousel-content h4 {
  font-weight: 500;               /* Destaque sem exagero */
  color: #ffffff;                 /* Contraste com o fundo */
}

/* Texto complementar do slide */
.carousel-content p {
  margin-bottom: 16px;            /* Espaço antes do botão */
  color: #f1f1f1;                 /* Leve suavização do branco */
}

/* Botão fixo do carousel */
.carousel-fixed-item {
  bottom: 60px !important; /* sobe o botão */
}

/* =========================================================
   AJUSTES PARA MOBILE
========================================================= */
@media (max-width: 600px) {

  /* Reduz altura para telas menores */
  .carousel.carousel-slider {
    height: 320px;
  }

  /* Ajusta o bloco de conteúdo */
  .carousel-content {
    padding: 20px;                /* Menos padding para caber melhor */
    max-width: 90%;               /* Usa quase toda a largura da tela */
  }

   .carousel-fixed-item {
      bottom: 50px !important;
  }
}

/* ================================
   GRADE DE CURSOS – CARGOS
================================ */

.cargo-header {
  display: flex;
  align-items: center;
  gap: 1px;
  font-weight: 500;
}

.cargo-icon {
  font-size: 28px;
  color: #1976d2;
}

.cargo-avatar {
  /*width: 24px;*/
  height: 24px;
  /*border-radius: 50%;*/
   margin-left: 0.4rem;
   margin-right: 1rem;
}

.cargo-nome {
  flex-grow: 1;
}

.badge-carga {
  background-color: #1976d2;
  color: #ffffff; 
}

.badge-total {
  background-color: #2e7d32;
  color: #ffffff; 
}

.curso-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge-cursos {
  background-color: #455a64;
  color: #ffffff; 
  margin-right: 6px;
   min-width: 5rem;
}

span.badge {
   color: #ffffff; 
   font-size: 0.85rem;
   min-width: 5rem;
}

/* Mobile ajuste */
@media (max-width: 600px) {
  .cargo-header {
    font-size: 0.95rem;
  }
}

/* Ajuste de recuo do menu*/
nav ul.right {
  margin-right: 20px;
}