@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cantata+One&family=Lato:wght@400;700&family=Libre+Baskerville:wght@400;700&family=Lobster+Two:wght@400;700&family=Roboto:wght@400;700&display=swap");
:root {
  --primary-color: #000080;
  --secondary-color: #f6ee0b;
  --tertiary-color: #084C61;
  --quaternary-color: #21A0A0;
  --white: #ffffff;
  --black: #000000;
  --font-signature: Lobster Two, cursive;
  --font-title: Libre Baskerville, serif;
  --font-main: Roboto, sans-serif;
  --font-spotlight: Cantata One, serif;
  --font-subtitle: Lato, sans-serif;
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 6px;
  background: linear-gradient(to right, #f6ee0b, rgb(247.814229249, 241.4268774704, 60.185770751));
  z-index: 10000;
  transition: width 0.2s ease;
  opacity: 1;
  box-shadow: 0 0 10px rgba(246, 238, 11, 0.7);
}
#progress-bar.finished {
  opacity: 0;
}

/* --- BANNER DE COOKIES --- */
.cookie-banner {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 2200px;
  opacity: 0.5;
  background-color: #f6ee0b !important;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  z-index: 10001;
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cookie-banner p {
  font-family: "Roboto", sans-serif;
  font-size: 1.6rem;
  color: #000080;
  margin-bottom: 15px;
}
.cookie-banner .btn-cookies {
  background: #000080;
  color: #f6ee0b;
  border: none;
  width: 20%;
  padding: 10px 30px;
  border-radius: 25px;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
}
.cookie-banner .btn-cookies:hover {
  background: #21A0A0;
  color: #ffffff;
}
.cookie-banner a {
  color: #21A0A0;
}
.cookie-banner a:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .btn-cookies {
    width: 50% !important;
  }
}
/* --- WHATSAPP COM TOOLTIP --- */
.whatsapp-container {
  position: fixed;
  bottom: 200px;
  right: 30px;
  z-index: 10000;
  display: flex;
  align-items: center;
}
.whatsapp-container .whatsapp-tooltip {
  background: #f6ee0b;
  color: #084C61;
  padding: 8px 15px;
  border-radius: 50px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  margin-right: 15px;
  font-size: 1.1rem;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  opacity: 0;
  transform: translateX(10px);
  transition: 0.3s;
  white-space: nowrap;
  margin-bottom: 200px;
}
.whatsapp-container:hover .whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.whatsapp-float {
  width: 80px;
  height: 80px;
  margin-bottom: 200px;
  background-color: #25d366;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  text-decoration: none;
  box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}
.whatsapp-float:hover {
  color: #f6ee0b;
}
.whatsapp-float::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #25d366;
  animation: pulse-gds 2s infinite;
  z-index: -1;
}

/* 🔥 A MÁGICA DA SETINHA APONTANDO PARA A DIREITA 🔥 */
.whatsapp-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px; /* Empurra a seta para fora da caixa na direita */
  transform: translateY(-50%); /* Centraliza exatamente no meio */
  /* Desenha um triângulo usando bordas */
  border-width: 8px 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #f6ee0b !important; /* Apenas a borda da esquerda tem a cor azul */
}

/* Animação suave para o texto (Opcional, mas fica muito profissional) */
@keyframes pulse-tooltip {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0);
  }
}
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 75vh;
  text-align: center;
  padding: 40px 20px;
}
.error-page .error-code {
  font-family: "Libre Baskerville", serif;
  font-size: 8rem;
  font-weight: bold;
  color: #000080;
  line-height: 1;
  margin-bottom: 10px;
  text-shadow: 4px 4px 0px rgba(246, 238, 11, 0.2);
}
.error-page .error-code span {
  color: #f6ee0b;
}
.error-page h2 {
  font-family: "Lato", sans-serif;
  color: #084C61;
  font-size: 2rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.error-page p {
  font-family: "Roboto", sans-serif;
  color: #666;
  max-width: 500px;
  line-height: 1.6;
  margin: 0 auto 35px;
}
.error-page .btn-error-home {
  background-color: #000080;
  color: #f6ee0b;
  padding: 15px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 128, 0.2);
}
.error-page .btn-error-home:hover {
  background-color: #f6ee0b;
  color: #000080;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(246, 238, 11, 0.3);
}

@media (max-width: 576px) {
  .error-page .error-code {
    font-size: 5rem;
  }
  .error-page h2 {
    font-size: 1.5rem;
  }
}
/* --- VOLTAR AO TOPO --- */
/* --- 8. FIXAÇÃO DO BOTÃO VOLTAR AO TOPO --- */
#backToTop, .btn-back-to-top {
  position: fixed !important;
  bottom: 120px !important;
  right: 30px !important;
  z-index: 999999 !important;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #084C61;
  color: #f6ee0b;
  /* Força o Flexbox para alinhar a seta no centro */
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  /* CONFIGURAÇÃO DE APARECIMENTO SUAVE VIA CSS */
  opacity: 0;
  pointer-events: none; /* Impede o clique enquanto estiver invisível */
  transition: opacity 0.4s ease, transform 0.3s ease, background-color 0.3s ease;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* CLASSE QUE O JQUERY VAI ADICIONAR AO ROLAR A PÁGINA */
#backToTop.revelar, .btn-back-to-top.revelar {
  opacity: 1 !important;
  pointer-events: auto; /* Libera o clique quando aparecer */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efeito de Hover mantido */
#backToTop:hover, .btn-back-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pulse-gds {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.carousel-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)), var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000080;
}

.hero-section {
  height: 100vh;
}

@media (max-width: 768px) {
  .carousel-bg {
    height: 70vh;
  }
}
.btn-warning {
  background-color: #000080;
  color: #f6ee0b;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bolder;
  text-align: center;
  width: 30%;
  padding-bottom: 10px;
  padding-top: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
}
.btn-warning:hover {
  background-color: #f6ee0b;
  color: #000080;
}

.btn-carousel {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-carousel a {
  font-size: clamp(1.5rem, 3vw + 1rem, 1.5rem);
}

.banner-subtitle p {
  font-size: 3rem !important;
}

.main-carousel {
  height: 1000px;
}

.typewriter {
  color: #f6ee0b;
  font-size: clamp(4rem, 6vw + 4rem, 4rem);
  font-family: "Libre Baskerville", serif;
  text-align: center;
  text-shadow: 0 0 9px rgba(0, 0, 128, 0.5);
}

.cursor {
  font-weight: bold;
  animation: blink 0.9s infinite;
}

.fs-6 {
  font-size: clamp(2rem, 3vw + 2rem, 2rem) !important;
  font-family: "Libre Baskerville", serif;
  text-align: center;
}

@media (max-width: 768px) {
  .carousel-bg {
    height: 70vh;
  }
  .typewriter {
    color: #f6ee0b;
    font-size: clamp(2rem, 2vw + 2rem, 2.6rem);
    font-family: "Libre Baskerville", serif;
    text-align: center;
    text-shadow: 0 0 9px rgba(0, 0, 128, 0.5);
  }
  .cursor {
    font-weight: bold;
    animation: blink 0.9s infinite;
  }
  .fs-6 {
    font-size: clamp(1rem, 1vw + 9rem, 1.3rem) !important;
    font-family: "Libre Baskerville", serif;
    text-align: center;
  }
  .btn-warning {
    width: 50%;
    font-size: 1.2rem !important;
    padding-bottom: 10px;
    padding-top: 10px;
  }
}
/*Estilização dos Botões de Ação PUBLICAR AGORA DO FORMULARIO DE DEPOIMENTO */
.btn-enviar {
  background: #000080;
  color: #ffffff;
  padding: 18px 45px;
  border: none;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.btn-enviar:hover {
  background: #f6ee0b;
  color: #000080;
  transform: translateY(-2px);
}

/*Botão Principal "Quero deixar um depoimento"*/
.btn-depoimento-main {
  background-color: #000080;
  color: #f6ee0b;
  font-family: "Lato", sans-serif;
  font-size: clamp(0.5rem, 1vw + 1rem, 1rem) !important;
  text-align: center;
  text-transform: uppercase;
  padding: 18px 45px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: inline-flex;
  align-items: center;
}
.btn-depoimento-main i {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}
.btn-depoimento-main:hover {
  background-color: #f6ee0b;
  color: #000080;
  transform: translateY(-5px) scale(1.02);
}
.btn-depoimento-main:hover i {
  transform: rotate(-15deg) scale(1.2);
}
.btn-depoimento-main:active {
  transform: translateY(0);
}

/* Garante que o form inicie fechado */
#form-depoimento {
  display: none;
}

/* FORMULÁRIO DE DEPOIMENTOS (Centralização e ajuste) */
.testimonial-form-wrapper {
  /* Ajuste para telas pequenas */
}
@media (max-width: 576px) {
  .testimonial-form-wrapper .d-flex {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .testimonial-form-wrapper .section-testimonials {
    background-color: #084C61;
  }
}

.testimonial-card {
  background-color: #084C61;
  box-shadow: 0 0 20px rgba(246, 238, 11, 0.4);
}

.testimonial-text {
  color: #ffffff;
  font-size: 1.1rem !important;
}

.stars {
  color: #f6ee0b !important;
}

.author-name {
  color: #f6ee0b !important;
  font-size: 1rem !important;
}

.text-muted {
  color: #ffffff !important;
  font-size: 0.9rem !important;
}

/* ==========================================================================
TABELA DE DEPOIMENTOS RESPONSIVA (MOBILE)
========================================================================== */
@media (max-width: 768px) {
  /* 1. Ajuste do Autor (Nome e Localização) */
  .testimonial-table .author-cell {
    background-color: #f8f9fa; /* Um fundo cinza super leve para destacar o cabeçalho do cartão */
    border-radius: 8px 8px 0 0;
    margin: -15px -15px 10px -15px; /* Estica o fundo até as bordas do cartão */
    padding: 15px !important;
    border-bottom: 1px solid #eaeaea;
  }
  .testimonial-table .author-cell strong {
    display: block;
    font-size: 1.2rem;
    color: #2c3e50;
  }
  .testimonial-table .author-cell small {
    display: block;
    font-size: 0.85rem;
    color: #7f8c8d;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  /* 2. Ajuste do Texto da Mensagem */
  .testimonial-table .message-cell p {
    font-size: 1rem;
    color: #555;
    font-style: italic;
    line-height: 1.6;
    padding: 10px 0;
    margin: 0;
  }
  /* 3. Badge das Estrelas */
  .testimonial-table .rating-cell {
    padding-bottom: 15px;
  }
  .testimonial-table .stars-badge {
    display: inline-block;
    font-size: 1.1rem;
    color: #f39c12; /* Dourado padrão para estrelas */
    background-color: #fff8e1;
    padding: 6px 15px;
    border-radius: 20px;
    font-weight: bold;
  }
  /* 4. Cores de Status (Opcional, para destacar bloqueados) */
  .testimonial-table .status-blocked {
    border-left: 5px solid #e74c3c; /* Faixa vermelha no cartão bloqueado */
    opacity: 0.8;
  }
  .testimonial-table .status-active {
    border-left: 5px solid #2ecc71; /* Faixa verde no cartão ativo */
  }
}
.btn-block {
  background-color: #000080;
  color: #f6ee0b;
}

.btn-block:hover {
  background-color: #f6ee0b;
  color: #000080;
}

body {
  font-family: "Roboto", sans-serif;
  color: #084C61;
  line-height: 1.6;
  overflow-x: hidden;
}

.navbar {
  background-color: #000080 !important;
  border-bottom: 5px solid #f6ee0b;
  padding: 1rem 0;
}
.navbar .navbar-brand {
  font-family: "Lobster Two", cursive;
  font-size: 1.8rem;
  color: #ffffff !important;
  display: flex;
  align-items: center;
  padding: 0;
}
.navbar .navbar-brand span {
  color: #f6ee0b;
}
.navbar .navbar-brand .logo-header {
  max-width: 180px;
  height: auto;
}
.navbar .nav-link {
  font-family: "Lato", sans-serif;
  font-size: 1.4rem;
  color: #ffffff !important;
  margin-left: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}
.navbar .nav-link:hover {
  color: #f6ee0b !important;
  transform: translateY(-2px);
}
.navbar .nav-link {
  /* Destaque para o link ativo (página atual) */
}
.navbar .nav-link.active {
  color: #084C61 !important;
  font-weight: bold;
}
.navbar .nav-link.active::after {
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background: #f6ee0b;
  position: absolute;
  bottom: 0;
  left: 0;
}

.hero-section {
  background: linear-gradient(135deg, #000080 0%, #084C61 100%);
  color: #ffffff;
  padding: 100px 0;
  text-align: center;
}
.hero-section h1 {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}
.hero-section p {
  font-family: "Cantata One", serif;
  font-size: 1.25rem;
  color: #f6ee0b;
  margin-bottom: 2.5rem;
}
.hero-section .btn-custom {
  background-color: #f6ee0b;
  color: #000080;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  padding: 12px 30px;
  border-radius: 50px;
  transition: 0.3s;
  display: inline-block;
  text-decoration: none;
}
.hero-section .btn-custom:hover {
  background-color: #ffffff;
  color: #000080;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.hero-section .admin-access {
  border: 1px solid #21A0A0;
  padding: 5px 15px;
  border-radius: 4px;
  color: #21A0A0;
  text-decoration: none;
  font-family: "Lato", sans-serif;
  transition: 0.3s;
}
.hero-section .admin-access:hover {
  background: #21A0A0;
  color: #ffffff;
}

/* 4. Garante que o rodapé não encolha e fique firmemente colado na base */
.footer-main {
  flex-shrink: 0;
  margin-bottom: 0 !important;
  margin-top: 20px;
  /* Empurrão final de segurança para a base */
  padding-bottom: 0;
  padding-top: 40px;
  background-color: #000080;
  color: #ffffff;
  position: relative;
  border-top: 5px solid #f6ee0b;
}
.footer-main h5 {
  color: #ffffff;
  font-size: 1.5rem !important;
}
.footer-main p {
  font-size: 1.2rem !important;
}
.footer-main .whatsapp-link-inline {
  color: #ffffff;
}
.footer-main .fa-whatsapp {
  color: #25d366;
}
.footer-main .footer-text a {
  color: #f6ee0b;
  text-decoration: none;
}
.footer-main .footer-divider {
  background-color: #f6ee0b !important;
}
.footer-main .footer-logo {
  font-family: "Libre Baskerville", serif;
  font-size: 1.5rem;
}
.footer-main .footer-logo span {
  color: #f6ee0b;
  font-family: "Lobster Two", cursive;
  font-size: 1.8rem;
}
.footer-main .footer-brand-img {
  max-width: 150px;
  margin-top: 10px;
}
.footer-main .footer-title {
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 1px;
}
.footer-main .footer-text {
  font-family: "Roboto", sans-serif;
  font-size: 2.5rem;
  opacity: 0.8;
  line-height: 1.6;
}
.footer-main .footer-divider {
  border-color: #f6ee0b;
  margin: 40px 0 20px;
}
.footer-main .footer-bottom-text {
  font-size: 0.85rem;
  opacity: 0.6;
}
.footer-main .text-center p {
  font-size: 1.1rem !important;
}

.social-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1.5rem;
}
.social-links-grid .social-btn {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #000080;
  background-color: #f6ee0b;
  text-decoration: none;
  transition: all 0.3s ease;
  z-index: 1;
}
.social-links-grid .social-btn:hover {
  background-color: #084C61;
  color: #f6ee0b !important;
  transform: translateY(-5px);
}
.social-links-grid li {
  margin-bottom: 0.5rem;
  /* Espaçamento controlado entre um link e outro */
}
.social-links-grid li:last-child {
  margin-bottom: 0 !important;
  /* O último link não pode ter margem abaixo dele */
}
.social-links-grid {
  /* ==========================================================================
  RESET E CORREÇÃO DA LISTA DE NAVEGAÇÃO DO FOOTER
  ========================================================================== */
  /* ==========================================================================
  RESET E CORREÇÃO DA LISTA DE NAVEGAÇÃO DO FOOTER
  ========================================================================== */
}
.social-links-grid .footer-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  /* Controla o espaçamento entre os links de forma segura */
  height: auto !important;
  /* Mata qualquer 'height' ou 'min-height' fixo antigo */
  min-height: 0 !important;
}
.social-links-grid .footer-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}
.social-links-grid {
  /* ==========================================================================
  ARQUITETURA ISOLADA: COMPONENTE DE NAVEGAÇÃO DO FOOTER
  ========================================================================== */
  /* Remove qualquer comportamento de esticamento vertical da coluna no grid */
}
.social-links-grid .footer-nav-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.social-links-grid {
  /* Alinha à esquerda apenas em computadores/telas médias */
}
@media (min-width: 768px) {
  .social-links-grid .footer-nav-col {
    align-items: flex-start !important;
  }
}
.social-links-grid {
  /* Reseta a lista por completo eliminando o vazamento de altura fantasma */
}
.social-links-grid .footer-nav-list {
  list-style: none !important;
  margin: 1.5rem 0 0 0 !important;
  /* Mantém apenas o margin-top de separação */
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
}
.social-links-grid {
  /* Controla os itens da lista de forma compacta */
}
.social-links-grid .footer-nav-list li {
  margin: 0 0 8px 0 !important;
  /* Espaço controlado entre linhas */
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}
.social-links-grid {
  /* Garante o último item com margem zerada absoluta */
}
.social-links-grid .footer-nav-list li:last-child {
  margin-bottom: 0 !important;
}

.footer-link {
  color: #ffffff;
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
  position: relative;
  margin-bottom: 12px;
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem;
}
.footer-link:hover {
  color: #f6ee0b;
  transform: translateX(8px);
}
.footer-link.active {
  color: #000080;
  text-decoration: none;
  font-weight: 700;
  background-color: #f6ee0b;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.footer-link.active::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f6ee0b;
  animation: slideIn 0.3s ease forwards;
}

.font-title {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
}

.font-signature {
  font-family: "Lobster Two", cursive;
}

.text-primary {
  color: #000080 !important;
}

.text-secondary {
  color: #f6ee0b !important;
}

.bg-primary {
  background-color: #000080 !important;
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.btn-artigo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  padding: 10px 15px;
  background-color: #000080 !important;
  color: #f6ee0b;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}

.swal2-confirm {
  color: #f6ee0b !important;
  border-radius: 40%;
  padding-left: 50px;
  padding-right: 50px;
  font-weight: bold;
}

.swal2-confirm:hover {
  background-color: #f6ee0b;
  color: #000080 !important;
}

.btn-artigo:hover {
  background-color: #f6ee0b !important;
  color: #000080;
}

.section-tech {
  padding: 80px 0;
}
.section-tech .tech-header .tech-title {
  font-family: "Libre Baskerville", serif;
  color: #000080;
  font-weight: bolder;
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

.tech-tagline {
  font-family: "Lato", sans-serif;
  color: #084C61;
  font-size: 1.5rem !important;
}

.fs-6 {
  font-family: "Roboto", sans-serif;
  font-size: 1.2rem !important;
}

.btn-enviar {
  border-radius: 50px;
}

#btn-cancelar {
  border-radius: 50px;
  background-color: #084C61 !important;
  color: #ffffff !important;
  text-decoration: none;
}

#btn-cancelar:hover {
  background-color: #f6ee0b !important;
  color: #084C61;
}

.tech-card {
  background: #000080;
  box-shadow: 0 0 20px rgba(246, 238, 11, 0.4);
  padding: 2.5rem 1.5rem;
  border-radius: 15px;
  text-align: center;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: #f6ee0b;
}
.tech-card:hover .tech-icon img {
  transform: scale(1.05);
}
.tech-card .tech-icon {
  width: 100%;
  margin-bottom: 1.5rem;
}
.tech-card .tech-icon img {
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 12px;
  transition: transform 0.6s ease;
}
.tech-card h3 {
  font-family: "Cantata One", serif;
  color: #f6ee0b;
  font-size: 1.5rem;
}
.tech-card p {
  color: #f6ee0b;
}

.recaptchahome {
  justify-content: center !important;
  display: flex;
}

@media (max-width: 576px) {
  .recaptchahome {
    justify-content: center !important;
    display: flex;
  }
}
.hero-quote-section {
  width: 100%;
  height: 100vh;
  /* Força a altura exata de uma tela cheia */
  min-height: 100vh;
  /* Garante que não encolha em nenhuma hipótese */
  background: url("../img/site/blockote.jpg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  /* Efeito Parallax no PC */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Organiza os elementos em formato de coluna */
  align-items: center;
  /* Centraliza na horizontal */
  justify-content: center;
  /* Centraliza na vertical */
  padding: 2rem;
  /* Margem interna de segurança para telas pequenas */
  margin: 0;
  /* Garante que nenhuma margem externa quebre o tamanho */
}
.hero-quote-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 128, 0.7);
  z-index: -1;
}
.hero-quote-section .motivational-quote {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.hero-quote-section .motivational-quote .quote-text {
  font-family: "Cantata One", serif;
  font-size: clamp(1rem, 3vw + 1rem, 5rem) !important;
  font-style: italic;
  color: #f6ee0b;
  line-height: 1.4;
  margin-bottom: 1.5rem;
}
.hero-quote-section .motivational-quote .quote-author {
  font-family: "Cantata One", serif;
  font-size: clamp(0.5rem, 1.5vw + 0.7rem, 2rem) !important;
  color: #ffffff !important;
  margin-top: 1rem;
  display: block;
}

/* ==========================================================================
   COMPONENTE: SEÇÃO DE ANUNCIANTES (ARQUITETURA ISOLADA)
   ========================================================================== */
.section-advertisers {
  background-color: transparent;
  width: 100%;
  overflow-x: hidden;
}
.section-advertisers .advertisers-title {
  font-family: "Roboto", sans-serif;
  font-size: clamp(1.8rem, 3vw + 1rem, 2.5rem);
  font-weight: 700;
  color: #ffffff;
}
.section-advertisers .advertisers-tagline {
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.8;
}

/* O Card do Anúncio */
.ad-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 128, 0.7);
}
.ad-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  border-color: #f6ee0b;
}
.ad-card {
  /* Wrapper da imagem para manter a proporção correta sempre */
}
.ad-card .ad-image-wrapper {
  position: relative;
  width: 100%;
  height: 180px;
  background-color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-card .ad-image-wrapper .ad-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ad-card .ad-image-wrapper {
  /* Placeholder para quando o espaço estiver vazio */
}
.ad-card .ad-image-wrapper .ad-empty-placeholder {
  color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ad-card .ad-image-wrapper {
  /* Tag flutuante no card */
}
.ad-card .ad-image-wrapper .ad-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 20px;
  background-color: #f6ee0b;
  color: #000;
}
.ad-card {
  /* Corpo do texto do anúncio */
}
.ad-card .ad-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.ad-card .ad-body .ad-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #000080;
}
.ad-card .ad-body .ad-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #084C61;
  margin-bottom: 1.5rem;
}
.ad-card {
  /* Botão de Ação do Anúncio */
}
.ad-card .btn-ad-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 15px;
  background-color: #000080;
  color: #f6ee0b;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}
.ad-card .btn-ad-action:hover {
  background-color: #f6ee0b;
  color: #000080;
}
.ad-card .btn-ad-action {
  /* Estilo variante para vaga vazia */
}
.ad-card .btn-ad-action.btn-ad-empty {
  background-color: transparent;
  color: #ffffff;
  border: 1px dashed rgba(255, 255, 255, 0.3);
}
.ad-card .btn-ad-action.btn-ad-empty:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}

.ad-card-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #084C61;
}

/* Estilização customizada se o card for de um espaço ainda não vendido */
.ad-card-empty {
  border-style: dashed;
  background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 767.98px) {
  .hero-quote-section {
    /* Mantém a tela cheia no mobile, mas remove o fixed do parallax.
       O recurso 'fixed' costuma travar e bugar o zoom da imagem no Safari/Chrome do celular. */
    background-attachment: scroll;
  }
  .hero-quote-section .quote-text {
    font-family: "Cantata One", serif;
    font-size: 0.1rem;
    font-style: italic;
    color: #f6ee0b;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    /* Espaçamento natural abaixo do texto */
  }
}
.title-tech {
  font-size: clamp(2.5rem, 1vw + 1rem, 1.25rem) !important;
  font-weight: 700;
  color: #000080 !important;
}

.section-security {
  padding: 100px 0;
}
.section-security .security-card {
  background: #000080;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(246, 238, 11, 0.4);
  padding: 40px 30px;
  transition: all 0.4s ease;
  text-align: center;
  height: 50vh;
}
.section-security .security-card .security-badge {
  width: 70px;
  height: 70px;
  background: #f6ee0b;
  color: #000080;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 25px;
  box-shadow: 0 0 20px rgba(246, 238, 11, 0.4);
}
.section-security .security-card h3 {
  color: #ffffff;
  font-family: "Libre Baskerville", serif;
}
.section-security .security-card p {
  color: #f6ee0b;
  font-size: 1.2rem;
}
.section-security .security-card .security-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.3rem;
}
.section-security .security-card .security-link:hover {
  color: #f6ee0b;
}
.section-security .security-card:hover {
  transform: translateY(-10px);
  border-color: #f6ee0b;
  background: #084C61;
}

.hr-grande {
  background: #f6ee0b;
  margin: 10px auto;
  width: 100%;
  height: 4px;
}

.hr-medio {
  background: #f6ee0b;
  margin: 10px auto;
  width: 80px;
  height: 4px;
}

.hr-pequeno {
  background: #f6ee0b;
  margin: 10px auto;
  width: 40px;
  height: 2px;
}

.hr-pequeno-left {
  background: #f6ee0b;
  margin: left;
  width: 40px;
  height: 2px;
}

.text-secondary-gds {
  color: #f6ee0b;
}

.botao_carousel_home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  padding: 10px 15px;
  background-color: #000080 !important;
  color: #f6ee0b;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 20px;
  transition: background-color 0.2s ease;
}

.botao_carousel_home:hover {
  background-color: #f6ee0b !important;
  color: #000080;
}

.filter-group {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-group .btn-filter {
  background: transparent;
  border: 2px solid #000080;
  color: #000080;
  padding: 8px 25px;
  border-radius: 50px;
  font-weight: 600;
  transition: 0.3s;
}
.filter-group .btn-filter.active, .filter-group .btn-filter:hover {
  background: #000080;
  color: #ffffff;
}

.portfolio-item {
  transition: all 0.4s ease-in-out;
}

.card-portfolio {
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  background: #fff;
}
.card-portfolio .portfolio-info {
  padding: 20px;
}
.card-portfolio .portfolio-info h5 {
  color: #000080;
  font-weight: 700;
  margin-bottom: 5px;
}
.card-portfolio .portfolio-info .category-name {
  color: #888;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.section-tech-vida {
  background-color: #ffffff;
}
.section-tech-vida .tech-vida-header .tech-vida-title {
  font-family: "Libre Baskerville", serif;
  color: #000080;
  font-size: 2.8rem;
  margin-bottom: 15px;
}
.section-tech-vida .tech-vida-header .tech-vida-tagline {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem;
}

.card-vida {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 128, 0.2);
  transition: all 0.4s ease-in-out;
  height: 100%;
}
.card-vida:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 128, 0.5);
}
.card-vida .card-img-vida {
  width: 100%;
  height: 250px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.card-vida:hover .card-img-vida {
  transform: scale(1.05);
}
.card-vida .card-body-vida {
  background-color: #ffffff;
}
.card-vida .card-body-vida .badge-vida {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: 20px;
  font-family: "Lato", sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffffff;
}
.card-vida .card-body-vida .card-title-vida {
  font-family: "Libre Baskerville", serif;
  color: #000080;
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: bold;
}
.card-vida .card-body-vida .card-text-vida {
  font-family: "Roboto", sans-serif;
  font-size: 1.1rem !important;
  line-height: 1.7;
  color: #000080 !important;
}

.health-card .badge-vida {
  background-color: #21A0A0;
  box-shadow: 0 0 20px rgba(246, 238, 11, 0.4);
}

.nature-card .badge-vida {
  background-color: #084C61 !important;
  box-shadow: 0 0 20px rgba(246, 238, 11, 0.4);
}

.nature-card .justify-content-center {
  box-shadow: 0 0 20px rgba(246, 238, 11, 0.4) !important;
}

@media (max-width: 768px) {
  .section-tech-vida .tech-vida-header .tech-vida-title {
    font-size: 2.2rem;
  }
  .card-vida .card-img-vida {
    height: 200px;
  }
}
#sustentabilidae {
  background-color: #084C61 !important;
}

#bem-estar {
  background-color: #21A0A0 !important;
}

a#modalLinkDemo {
  background-color: #000080;
  color: #f6ee0b !important;
  border-radius: 50px !important;
}

a#modalLinkDemo:hover {
  background-color: #f6ee0b;
  color: #000080 !important;
  border: none !important;
}

.portfolio-info {
  background-color: #f6ee0b;
}

input, textarea, select {
  font-size: 1.1rem !important;
}

.navbar-toggler-icon {
  background-image: none;
  background-color: #f6ee0b;
  mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>") no-repeat center;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>") no-repeat center;
}

.navbar-toggler {
  background-color: #f6ee0b;
  border-color: transparent;
}

.carousel-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), var(--bg-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #000080;
}

@media (max-width: 767.98px) {
  .carousel-caption {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .banner-subtitle {
    font-size: 1rem !important;
    line-height: 1.4;
  }
}
@media (max-width: 767.98px) and (max-width: 359.98px) {
  .btn-lg {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
  }
}
@media (max-width: 767.98px) {
  .fa-solid {
    background-color: #f6ee0b;
  }
  .fa-bars {
    color: #000080;
  }
}
/* --- RESPONSIVIDADE GERAL DA HOME --- */
/* 1. O Carrossel */
.banner-responsivo {
  min-height: 600px; /* Altura padrão para computadores */
}

.titulo-banner {
  font-size: 3.5rem;
  color: #F6EE0B;
}

/* 2. Imagens dos Cartões de Anúncios e Saúde */
.img-anuncio {
  height: 200px;
}

.img-card-vida {
  height: 280px;
}

/* Efeito Hover nos Cartões de Tecnologia */
.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(8, 76, 97, 0.15) !important;
}

/* 1. Estado Inicial: Escondidos e empurrados 100px para a esquerda */
.motivational-quote .quote-text,
.motivational-quote .quote-author {
  opacity: 0;
  transform: translateX(-100px);
  /* cubic-bezier dá aquele efeito de "travar" suavemente no final */
  transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 2. O Atraso do Autor: Faz o texto aparecer primeiro, e o autor 0.6 segundos depois */
.motivational-quote .quote-author {
  transition-delay: 0.6s;
}

/* 3. O Estado Ativo: A classe que o JS vai injetar para puxar tudo para o centro */
.motivational-quote.revelar-animacao .quote-text,
.motivational-quote.revelar-animacao .quote-author {
  opacity: 1;
  transform: translateX(0); /* Volta para a posição original desenhada pelo seu Bootstrap */
}

/* --- MEDIA QUERIES (Tablets e Notebooks) --- */
@media (max-width: 992px) {
  .banner-responsivo {
    min-height: 500px; /* Reduz a altura para o texto não ficar tão espalhado */
  }
  .titulo-banner {
    font-size: 2.8rem;
  }
  .img-card-vida {
    height: 220px; /* Imagem fica mais fina no tablet */
  }
}
/* --- MEDIA QUERIES (Telemóveis) --- */
@media (max-width: 768px) {
  .banner-responsivo {
    min-height: 450px; /* Garante que caiba na tela do celular sem rolar muito */
  }
  .titulo-banner {
    font-size: 2.2rem;
  }
  .img-card-vida {
    height: 200px;
  }
  .quote-text {
    font-size: 1.5rem !important; /* Ajusta a citação para não espremer */
  }
}
@media (max-width: 568px) {
  .botao_carousel_home {
    width: 60%;
    font-size: 1.2rem !important;
  }
}
/* ==========================================================================
   ELIMINAR FOLGA EMBAIXO DO FOOTER E CORRIGIR POSICIONAMENTO
   ========================================================================== */
/* ==========================================================================
   DEVOLVENDO A BARRA DE ROLAGEM PARA O NAVEGADOR (VISUAL PADRÃO)
   ========================================================================== */
html {
  /* Remove a trava rígida e diz para a janela gerenciar a rolagem */
  height: auto;
  overflow-y: scroll; /* Força a barra a ficar na quina do navegador */
  overflow-x: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* O segredo: min-height em vez de height fixo. 
     Isso permite que o body cresça naturalmente, devolvendo a rolagem ao navegador */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* O miolo do site expande se a página for curta, empurrando o footer */
main, .main-content {
  flex: 1 0 auto;
}

/* O rodapé aceita ficar no chão sem prender o scroll do navegador */
.footer-main {
  flex-shrink: 0;
  margin-top: auto;
}

/* 3. Se o seu conteúdo principal estiver envelopado em uma tag <main> ou classe específica,
      isso fará com que ele "empurre" o footer para o final da tela caso haja pouco conteúdo */
main, .main-content, #wrapper {
  flex: 1 0 auto;
}

/* 5. Corrige elementos flutuantes que costumam quebrar a altura do body no mobile */
.whatsapp-container,
#cookie-banner {
  bottom: 20px; /* Garante que fiquem bem posicionados dentro da área visível */
}

.navbar {
  background-color: #000080 !important;
  padding: 1rem 0;
  transition: all 0.3s ease;
}
.navbar .navbar-brand {
  font-family: "Lobster Two", cursive;
  font-size: 1.8rem;
  color: #ffffff !important;
}
.navbar .navbar-brand span {
  color: #f6ee0b;
}
.navbar .nav-link {
  font-family: "Lato", sans-serif;
  color: #ffffff !important;
  margin-left: 1.5rem;
  position: relative;
  transition: all 0.3s ease;
}
.navbar .nav-link:hover {
  color: #f6ee0b !important;
  transform: translateY(-2px);
}
.navbar .nav-link.active {
  color: #000080 !important;
  font-weight: bold;
  background-color: #f6ee0b;
  border-radius: 15px;
}
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #f6ee0b;
  animation: slideIn 0.3s ease forwards;
}

.hero-section {
  background: linear-gradient(135deg, #000080 0%, #084C61 100%);
  color: #ffffff;
  padding: 100px 0;
  text-align: center;
  position: relative;
}
.hero-section h1 {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}
.hero-section p {
  font-family: "Cantata One", serif;
  font-size: 1.25rem;
  color: #f6ee0b;
  margin-bottom: 2.5rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.hero-section .btn-custom {
  background-color: #f6ee0b;
  color: #000080;
  font-family: "Lato", sans-serif;
  font-weight: bold;
  padding: 15px 40px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s;
}
.hero-section .btn-custom:hover {
  background-color: #ffffff;
  color: #000080;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px);
}

@keyframes slideIn {
  from {
    width: 0;
    left: 50%;
  }
  to {
    width: 100%;
    left: 0;
  }
}
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 20px;
  }
  .hero-section h1 {
    font-size: 2.5rem;
  }
  .hero-section p {
    font-size: 1.1rem;
  }
}
/* Estabilização Global */
html {
  /* Força a barra de rolagem a SEMPRE existir. 
     Isso evita que o layout pule para a direita quando a página é curta */
  overflow-y: scroll !important;
}

body {
  /* Impede que o corpo da página tente sambar lateralmente */
  overflow-x: hidden !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

/* Fixação da Sidebar */
.sidebar {
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 1000;
  /* Evita que a sidebar "encolha" durante o carregamento */
  flex-shrink: 0;
}

/* Ajuste do Conteúdo */
.main-content {
  /* A margem esquerda DEVE ser idêntica à largura da sidebar */
  margin-left: 260px !important;
  width: calc(100% - 260px);
  min-height: 100vh;
  display: block;
}

/* ==========================================================================
   LAYOUT BASE (MONITOR / DESKTOP)
   ========================================================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px; /* Largura padrão do seu menu lateral */
  height: 100vh; /* Ocupa a altura inteira da tela */
  z-index: 1000;
  transition: transform 0.3s ease; /* Animação suave */
}

.main-content {
  /* O "empurrão" necessário no PC para não ficar por baixo do menu */
  margin-left: 250px;
  width: calc(100% - 250px);
  transition: margin-left 0.3s ease, width 0.3s ease;
}

@media (max-width: 768px) {
  .sidebar {
    /* 1. Arranca o menu do chão e faz ele flutuar sobre o site */
    position: fixed !important;
    /* 2. Joga o menu para fora da tela */
    transform: translateX(-100%);
    /* 3. Garante que qualquer sombra do menu também suma */
    box-shadow: none !important;
    /* 4. Trava a altura e a posição lá no topo */
    top: 0;
    left: 0;
    z-index: 9999 !important;
  }
  .sidebar.ativo {
    transform: translateX(0);
    /* Devolve a sombra quando o menu é aberto por cima da tela */
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2) !important;
  }
  .main-content {
    /* A CURA DO FANTASMA: Zera as margens e força 100% do tamanho */
    margin-left: 0 !important;
    width: 100% !important;
    /* Se houver algum padding esquerdo antigo empurrando, nós matamos ele aqui também */
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
/* ==========================================================================
   BO/* Botão Hambúrguer (PC) */
.menu-mobile-btn {
  display: none; /* Escondido no PC */
  background: #000080;
  border: none;
  font-size: 2.2rem;
  color: #000080 !important;
  cursor: pointer;
  padding: 5px 10px;
  margin-bottom: 10px;
  margin-top: -40px;
}

/* Botão Fechar (PC) */
.btn-fechar-mobile {
  display: none; /* Escondido no PC */
  position: absolute;
  top: 15px;
  right: 15px;
  background: #f6ee0b;
  border: none;
  font-size: 2.2rem;
  color: #000080 !important;
  cursor: pointer;
}

/* ==========================================================================
   AQUI É A MÁGICA: Só aparece no Telemóvel (Mobile)
   ========================================================================== */
@media (max-width: 768px) {
  .menu-mobile-btn {
    display: block !important; /* Força o botão a acordar! */
  }
  .btn-fechar-mobile {
    display: block !important; /* Força o botão a acordar! */
  }
}
/* ==========================================================================
   BOTÃO HAMBÚRGUER GLOBAL (FLUTUANTE)
   ========================================================================== */
.menu-mobile-btn {
  display: none; /* Escondido no PC */
}

@media (max-width: 768px) {
  .menu-mobile-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* A mágica do botão flutuante */
    position: fixed;
    top: 55px;
    left: 15px;
    z-index: 999; /* Fica acima de tudo, mas abaixo do sidebar (que é 9999) */
    /* Design de "App Nativo" */
    background-color: #ffffff;
    color: #333;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Sombrinha elegante */
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
  }
  /* Como o botão agora flutua, precisamos empurrar o conteúdo principal um pouco 
     para baixo no celular, para o botão não tampar o título "Bem-vindo" */
  .main-content {
    padding-top: 75px !important;
  }
}
.section-mvv {
  background-color: #21A0A0 !important;
  padding: 80px 0;
}
.section-mvv .mvv-card {
  border: none;
  border-radius: 25px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 40px 30px;
}
.section-mvv .mvv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #000080;
  transition: height 0.3s ease;
}
.section-mvv .mvv-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.section-mvv .mvv-card:hover::before {
  height: 8px;
  background: #f6ee0b;
}
.section-mvv .mvv-card:hover .mvv-icon {
  background: #f6ee0b;
  color: #000080;
  transform: scale(1.1) rotate(10deg);
}
.section-mvv .mvv-icon {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 128, 0.05);
  color: #000080;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 2rem;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
.section-mvv .mvv-title {
  font-family: "Libre Baskerville", serif;
  color: #000080;
  font-weight: 700;
  margin-bottom: 1rem;
}
.section-mvv .mvv-text {
  font-family: "Roboto", sans-serif;
  color: #000080;
  line-height: 1.6;
  font-size: 1.2rem;
}

.section-about {
  background-color: #084C61;
  color: #ffffff;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.section-about .profile-img {
  width: 320px;
  height: 320px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
  border: 8px solid #f6ee0b;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease;
}
.section-about .profile-img:hover {
  transform: scale(1.03) rotate(2deg);
}
.section-about .about-header .title-tech {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: #f6ee0b !important;
}
.section-about .about-header .divider-tech {
  width: 60px;
  height: 4px;
  background: #f6ee0b !important;
  margin-top: 10px;
  box-shadow: 0 0 10px rgba(246, 238, 11, 0.5);
}
.section-about .about-text {
  font-family: "Roboto", sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  opacity: 0.9;
}
.section-about .about-text strong {
  color: #f6ee0b;
}
.section-about .btn-about-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000080 !important;
  color: #f6ee0b !important;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
}
.section-about .btn-about-action:hover {
  background: #f6ee0b !important;
  color: #000080 !important;
}

.page-header-gds {
  position: relative;
  height: 100vh;
  min-height: 350px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}
.page-header-gds .gds-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000080 0%, rgba(0, 0, 128, 0.1) 100%);
  z-index: 1;
}
.page-header-gds .header-container {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
}
.page-header-gds .gds-divider {
  width: 60px;
  height: 5px;
  background-color: #f6ee0b;
  border-radius: 50px;
  margin: 15px auto;
  box-shadow: 0 0 15px rgba(246, 238, 11, 0.6);
}

.breadcrumb {
  justify-content: center;
}
.breadcrumb .breadcrumb-item {
  font-family: "Lato", sans-serif;
}
.breadcrumb .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: 0.3s;
}
.breadcrumb .breadcrumb-item a:hover {
  color: #f6ee0b;
}
.breadcrumb .breadcrumb-item.active {
  color: #f6ee0b !important;
  font-weight: 600;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.5);
  content: "•";
}

@media (max-width: 991px) {
  .section-about {
    text-align: center;
  }
  .section-about .about-header .divider-tech {
    margin: 10px auto;
  }
  .section-about .profile-img {
    width: 250px;
    height: 250px;
    margin-bottom: 30px;
  }
  .page-header-gds {
    height: 100vh;
  }
}
.text-secondary-gds {
  color: #f6ee0b;
}

.bg-tertiary-gds {
  background-color: #084C61;
}

.section-about .profile-img {
  width: 350px;
  height: 350px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 10px solid #f6ee0b;
  border-radius: 50%;
  transition: transform 0.4s ease;
}
.section-about .profile-img:hover {
  transform: scale(1.05) rotate(3deg);
}
.section-about .divider-tech {
  width: 80px;
  height: 5px;
  background: #f6ee0b;
  margin: 15px 0;
}
.section-about .btn-about-action {
  display: inline-block;
  padding: 15px 40px;
  background: #f6ee0b;
  color: #000080;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}
.section-about .btn-about-action:hover {
  background: #ffffff;
  transform: translateX(10px);
}

.mvv-card {
  border: none;
  border-radius: 25px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}
.mvv-card:hover {
  transform: translateY(-10px);
}
.mvv-card:hover .mvv-icon {
  background: #000080;
  color: #f6ee0b;
}
.mvv-card .mvv-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: rgba(0, 0, 128, 0.1);
  color: #000080;
  font-size: 2rem;
  border-radius: 50%;
  margin: 0 auto;
  transition: 0.3s;
}

/* ==========================================================================
   SEÇÃO COTE (PARALLAX BLINDADO PARA PC E MOBILE)
   ========================================================================== */
.secao-cote-imagem {
  position: relative; /* Define o limite para a imagem não vazar */
  width: 100%;
  height: 100vh;
  /* A mágica acontece aqui: escondemos tudo que sair da caixa */
  clip-path: inset(0 0 0 0);
}

/* Criamos um "elemento fantasma" que segura a imagem */
.secao-cote-imagem::before {
  content: "";
  position: fixed; /* Isso funciona perfeitamente no mobile! */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Ocupa a altura inteira da tela por trás */
  /* Coloque o seu caminho exato aqui */
  /* Os dois pontos ../ dizem para o CSS: "saia da pasta css e entre na pasta img" */
  background-image: url("../img/site/gildevsystemlogomarca.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1; /* Joga a imagem para o fundo absoluto */
  will-change: transform; /* Avisa o celular para otimizar o processador */
}

/* Responsividade para o Telemóvel */
@media (max-width: 768px) {
  .secao-cote-imagem {
    height: 30vh; /* Faixa mais fina no celular */
  }
  .secao-cote-imagem::before {
    /* Garante que a logomarca não seja cortada nas telas pequenas */
    background-size: contain;
  }
}
.section-contact {
  background: #000080;
  padding: 60px 0;
}
.section-contact .contact-card {
  border-radius: 30px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.section-contact .contact-card .title-tech {
  color: #000080;
  font-family: "Libre Baskerville", serif;
  font-weight: 800;
}
.section-contact .custom-input {
  padding: 15px 20px;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  font-family: "Roboto", sans-serif;
  transition: 0.3s;
}
.section-contact .custom-input:focus {
  border-color: #f6ee0b;
  box-shadow: 0 0 10px rgba(246, 238, 11, 0.1);
  outline: none;
}
.section-contact .btn-tech-send {
  background: #000080;
  color: #f6ee0b;
  padding: 15px 30px;
  border-radius: 50px;
  border: none;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
}
.section-contact .btn-tech-send:hover {
  background: #f6ee0b;
  color: #000080;
}
.section-contact .btn-tech-fmpgds {
  background: #f6ee0b;
  color: #000080;
  padding: 15px 30px;
  border-radius: 12px;
  border: none;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: 0.4s;
}
.section-contact .btn-tech-fmpgds:hover {
  background: #000080;
  color: #f6ee0b;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 128, 0.2);
}

.section-gds-cards {
  background: #084C61;
  padding: 80px 0;
}
.section-gds-cards .container h2 {
  color: #f6ee0b;
}
.section-gds-cards h5 {
  font-size: 1.6rem;
  color: #ffffff !important;
}
.section-gds-cards h6 {
  font-size: 1.9rem;
}
.section-gds-cards p {
  font-size: 1.3rem !important;
  color: #084C61 !important;
}

.contact-card-wrapper {
  text-decoration: none !important;
  display: block;
  height: 100%;
}
.contact-card-wrapper:hover .contact-card-box {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 128, 0.12);
  border-color: #000080;
}
.contact-card-wrapper:hover .icon-circle {
  transform: scale(1.1) rotate(10deg);
}

.contact-card-box {
  background: #ffffff;
  padding: 35px 15px;
  border-radius: 24px;
  text-align: center;
  border: 1px solid rgba(0, 0, 128, 0.05);
  height: 100%;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.contact-card-box h6 {
  color: #f6ee0b;
  font-family: "Lato", sans-serif;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 5px;
}
.contact-card-box p {
  color: #666;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0;
}
.contact-card-box.whatsapp-special {
  border-bottom: 4px solid #20c997;
}

/* Ícones em Círculos */
.icon-circle {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: 0.3s;
}

/* Animação Pulse para WhatsApp */
.whatsapp-pulse {
  background: #20c997 !important;
  color: #ffffff !important;
  animation: pulse-whatsapp 2s infinite;
}

@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 0 0 0 rgba(32, 201, 151, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(32, 201, 151, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(32, 201, 151, 0);
  }
}
/* Responsividade */
@media (max-width: 768px) {
  .section-gds-cards {
    padding: 40px 0;
  }
  .contact-card-box {
    padding: 20px 10px;
  }
  .contact-card-box h6 {
    font-size: 0.9rem;
  }
}
.contact-hero {
  position: relative;
  padding: 120px 0;
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
  color: #ffffff;
  height: 100vh;
}
.contact-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.contact-hero .container {
  position: relative;
  z-index: 2;
}
.contact-hero .badge-gds {
  background: #f6ee0b;
  color: #000080;
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}
.contact-hero h1 {
  font-family: "Libre Baskerville", serif;
  line-height: 1.2;
}
.contact-hero h1 .text-secondary-gds {
  color: #f6ee0b;
}
.contact-hero p {
  font-family: "Roboto", sans-serif;
  max-width: 600px;
}
.contact-hero .btn-warning {
  background-color: #f6ee0b;
  color: #000080;
  border-color: #f6ee0b;
}
.contact-hero .btn-warning:hover {
  background-color: #000080;
  color: #f6ee0b;
  transform: translateY(-3px);
}
.contact-hero .btn-outline-light {
  background-color: #25d366;
  font-size: 1.8rem;
  font-weight: bold;
  border: none;
}
.contact-hero .btn-outline-light:hover {
  background-color: #ffffff !important;
  color: #25d366;
}

@media (max-width: 768px) {
  .contact-hero {
    padding: 80px 0;
    text-align: center;
  }
  .contact-hero .hr-gds {
    margin: 15px auto !important;
  }
  .contact-hero .justify-content-start {
    justify-content: center !important;
  }
  .contact-hero .d-flex {
    justify-content: center;
  }
  .contact-hero h1 {
    font-size: 2.5rem;
  }
}
.map-section {
  background-color: #21A0A0;
}
.map-section .container h5 {
  font-size: 2.5rem;
  color: #f6ee0b;
}
.map-section .overlay-content h6 {
  font-size: 1.5rem;
  color: #000080;
}
.map-section p {
  font-size: 1.2rem;
  color: #f6ee0b;
}

.contact-card-box {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  text-align: center;
  border: 1px solid #eee;
}
.contact-card-box:hover, .contact-card-box.active {
  transform: translateY(-10px);
  border-color: #000080;
  box-shadow: 0 15px 40px rgba(0, 0, 128, 0.1);
}
.contact-card-box:hover .icon-circle, .contact-card-box.active .icon-circle {
  background: #000080;
  color: #f6ee0b;
}
.contact-card-box .icon-circle {
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 128, 0.05);
  color: #000080;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 1.5rem;
  transition: 0.3s;
}
.contact-card-box h6 {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  color: #000080;
  margin: 0;
}
.contact-card-box p {
  font-size: 0.8rem;
  color: #888;
  margin-top: 5px;
}

.whatsapp-special:hover .whatsapp-pulse {
  animation: pulse-whatsapp 2s infinite;
}

.texto-longo {
  word-break: break-all;
}

.overlay-content {
  background-color: #084C61;
  text-align: center;
}

.map-section {
  background-color: #ffffff !important;
}
.map-section h6 {
  color: #ffffff !important;
}

.btn-fale {
  background-color: #000080;
  color: #f6ee0b;
}

.btn-fale:hover {
  background-color: #f6ee0b;
  color: #000080;
}

/* --- RESPONSIVIDADE PÁGINA DE CONTATO --- */
/* Efeito suave nos pequenos cartões de contato */
.contact-hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 12px;
}

.contact-hover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(8, 76, 97, 0.15) !important;
}

/* Responsividade do Título Hero */
.titulo-contato {
  font-size: 3.5rem;
}

/* Tablets e Notebooks */
@media (max-width: 992px) {
  .titulo-contato {
    font-size: 2.8rem;
  }
}
.recaptchacontato {
  justify-content: center !important;
  display: flex;
}

@media (max-width: 576px) {
  .recaptchacontato {
    justify-content: center !important;
    display: flex;
  }
}
/* Telemóveis */
@media (max-width: 768px) {
  .titulo-contato {
    font-size: 2.2rem;
  }
  /* Inputs um pouco menores no mobile para melhor digitação */
  .custom-input {
    font-size: 1rem !important;
  }
}
.policy-content {
  max-width: 800px;
  margin: 4rem auto;
  padding: 0 20px;
}
.policy-content h1 {
  font-family: "Libre Baskerville", serif;
  color: #000080;
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
}
.policy-content h3 {
  font-family: "Lato", sans-serif;
  color: #084C61;
  margin-top: 2.5rem;
  margin-bottom: 1.2rem;
  border-left: 5px solid #f6ee0b;
  padding-left: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.policy-content p {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  color: #444;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-align: justify;
}
.policy-content ul, .policy-content ol {
  margin-bottom: 2rem;
  padding-left: 20px;
}
.policy-content ul li, .policy-content ol li {
  font-family: "Roboto", sans-serif;
  color: #444;
  line-height: 1.8;
  margin-bottom: 10px;
}
.policy-content ul li::marker, .policy-content ol li::marker {
  color: #f6ee0b;
  font-weight: bold;
}
.policy-content .card-policy {
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 30px;
  border: 1px solid #eee;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}
.policy-content a {
  background: #f6ee0b;
  text-decoration: none;
  color: #000080;
  padding: 18px 35px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.2rem;
  transition: 0.3s;
}
.policy-content a.active, .policy-content a:hover {
  background: #000080;
  color: #ffffff;
}

.pp {
  margin-top: -200px;
  margin-bottom: 100px;
}

.btn-custom {
  background: #000080 !important;
  color: #f6ee0b !important;
}

.btn-custom:hover {
  background: #f6ee0b !important;
  color: #000080 !important;
}

@media (max-width: 576px) {
  h3 {
    font-size: 1.9rem !important;
  }
  .tech-tagline {
    font-size: 1.4rem !important;
  }
  h2.title-tech {
    font-size: 2.1rem !important;
  }
}
/* --- ESTILOS DA PÁGINA DE POLÍTICA --- */
.policy-content .custom-list {
  padding-left: 20px;
}

.policy-content .custom-list li::marker {
  color: #084C61; /* Cor primária do GDS nas bolinhas da lista */
  font-size: 1.2rem;
}

/* Garante que os títulos h3 não fiquem gigantes em celulares muito pequenos */
@media (max-width: 576px) {
  .policy-content h3 {
    font-size: 1.5rem !important;
  }
  p {
    font-size: 1.3rem !important;
  }
}
.rsinst, .rs {
  position: fixed;
  width: 45px;
  height: 45px;
  background-color: #ffffff;
  border-radius: 50%;
  text-align: center;
  font-size: 24px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.rsinst:hover, .rs:hover {
  background-color: #000080;
  color: #f6ee0b !important;
  transform: scale(1.1) rotate(10deg);
}

.rs {
  bottom: 160px;
  right: 30px;
  color: #0064E0;
}

.rsinst {
  bottom: 100px;
  right: 30px;
  color: #E64B5B;
}

.pulse-effect::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  animation: pulse-social 2s infinite;
  z-index: -1;
}

@keyframes pulse-social {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@media (max-width: 768px) {
  .rs, .rsinst {
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .rs {
    bottom: 140px;
  }
  .rsinst {
    bottom: 90px;
  }
}
.btn-filter {
  background: transparent;
  border: 2px solid #000080;
  color: #000080;
  padding: 8px 25px;
  border-radius: 50px;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  margin: 5px;
  cursor: pointer;
  transition: 0.3s ease;
}
.btn-filter.active, .btn-filter:hover {
  background: #000080;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 128, 0.2);
}

.card-portfolio {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-portfolio:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.card-portfolio:hover .portfolio-thumb img {
  transform: scale(1.1);
}
.card-portfolio:hover .portfolio-overlay {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-thumb {
  position: relative;
  height: 250px;
  overflow: hidden;
}
.portfolio-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 128, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: 0.5s ease;
  transform: translateY(100%);
  z-index: 2;
}
.portfolio-overlay .overlay-content {
  text-align: center;
  color: #f6ee0b;
  padding: 20px;
}
.portfolio-overlay .overlay-content .btn-yellow {
  background: #f6ee0b;
  color: #000080;
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: 0.3s;
}
.portfolio-overlay .overlay-content .btn-yellow:hover {
  background: #f6ee0b;
  transform: scale(1.05);
}
.portfolio-overlay a {
  color: #f6ee0b;
}
.portfolio-overlay a:hover {
  color: #ffffff;
}

.portfolio-info {
  padding: 20px;
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.portfolio-info h5 {
  color: #000080;
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 1.2rem;
}
.portfolio-info span {
  color: #f6ee0b;
  font-family: "Roboto", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.header-info h3 span {
  color: #f6ee0b;
  font-family: "Cantata One", serif;
  font-size: 1.2rem;
}

.border-secondary-gds {
  border: 3px solid #f6ee0b;
  max-width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.3s ease;
}
.border-secondary-gds:hover {
  transform: scale(1.02);
}

.gds-form .form-control {
  border: 2px solid #eee;
  padding: 12px;
  border-radius: 10px;
}
.gds-form .form-control:focus {
  outline: none; /* Remove a borda azul/laranja */
  border: 2px solid #f6ee0b; /* Adiciona uma borda personalizada */
}

.header-info h3 span {
  color: #f6ee0b;
  font-family: "Cantata One", serif;
  font-size: 1.1rem;
}

.preview-container {
  margin-top: 15px;
}
.preview-container .img-preview {
  display: none;
  max-width: 100%;
  height: 220px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
  border: 3px solid #f6ee0b;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.preview-container .img-preview.active {
  display: block;
}

.btn-primary {
  background-color: #000080;
  border: none;
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s;
}
.btn-primary:hover {
  background-color: #084C61;
  transform: translateY(-2px);
}

.admin-table .col-preview {
  width: 170px;
}
.admin-table .col-tech {
  width: 200px;
}
.admin-table .col-actions {
  width: 250px;
  text-align: right;
}
.admin-table .portfolio-thumb-container {
  width: 140px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #eee;
}
.admin-table .portfolio-thumb-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.admin-table .content-cell h4 {
  font-family: "Lato", sans-serif;
  color: #000080;
  margin-bottom: 4px;
}
.admin-table .content-cell .category-tag {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 800;
  color: #f6ee0b;
  letter-spacing: 0.5px;
}
.admin-table .tech-list {
  font-size: 0.85rem;
  color: #888;
  font-family: "Roboto", sans-serif;
  line-height: 1.4;
}

.header-info h3 span {
  color: #f6ee0b;
  font-weight: 700;
}

.text-primary-gds {
  color: #000080;
}

.portfolio-mini-thumb {
  width: 80px;
  height: 50px;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.portfolio-mini-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.badge-category {
  background-color: #f8f9fa;
  color: #084C61;
  border: 1px solid #dee2e6;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.btn-group-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.btn-group-actions .btn-edit-small, .btn-group-actions .btn-delete-small {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid;
  background: transparent;
  transition: 0.3s;
  cursor: pointer;
}
.btn-group-actions .btn-edit-small {
  border-color: #000080;
  color: #000080;
}
.btn-group-actions .btn-edit-small:hover {
  background: #000080;
  color: #fff;
}
.btn-group-actions .btn-delete-small {
  border-color: #dc3545;
  color: #dc3545;
}
.btn-group-actions .btn-delete-small:hover {
  background: #dc3545;
  color: #fff;
}

.img-preview-wrapper::-webkit-scrollbar {
  width: 6px;
}
.img-preview-wrapper::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}
.img-preview-wrapper img {
  transition: transform 0.5s ease;
}

.modal-content {
  border-radius: 20px;
  overflow: hidden;
}

/* ==========================================================================
   COMPONENTE: FORMULÁRIO DO BLOG (PAINEL ADMINISTRATIVO)
   ========================================================================== */
.card-admin-blog {
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.card-admin-blog .card-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.5rem;
}
.card-admin-blog .card-header .admin-blog-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #084C61;
  margin: 0;
}
.card-admin-blog .card-body {
  padding: 2rem;
}
.card-admin-blog .form-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.card-admin-blog .form-control, .card-admin-blog .form-select {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-radius: 6px;
  padding: 0.6rem 1rem;
}
.card-admin-blog .form-control:focus, .card-admin-blog .form-select:focus {
  background-color: rgba(0, 0, 0, 0.3);
  border-color: #f6ee0b;
  box-shadow: 0 0 0 0.25rem rgba(246, 238, 11, 0.15);
  color: #ffffff;
}
.card-admin-blog .btn-save-post {
  background-color: #f6ee0b;
  color: #000;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-admin-blog .btn-save-post:hover {
  background-color: rgb(198.6719367589, 192.1581027668, 7.3280632411);
}

/* Ajuste fino para o container do TinyMCE não herdar regras globais que quebrem a estrutura */
.tox-tinymce {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
  overflow: hidden;
}

/* ==========================================================================
   COMPONENTE: CARD DO BLOG NA DASHBOARD (GDS-HUB)
   ========================================================================== */
.card-blog:hover {
  border-color: #f6ee0b;
}
.card-blog:hover .icon-dash {
  transform: scale(1.1);
  color: #f6ee0b;
}
.card-blog .icon-dash {
  transition: transform 0.3s ease, color 0.3s ease;
}

.card-admin-table {
  border-radius: 12px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(10px);
}
.card-admin-table .table {
  --bs-table-bg: transparent !important;
  margin-bottom: 0;
}
.card-admin-table .table thead th {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  padding: 1rem 0.75rem;
}
.card-admin-table .table tbody td {
  padding: 1rem 0.75rem;
  border-color: rgba(255, 255, 255, 0.05);
}

/* Garante o recuo correto para o miolo não bater na Sidebar */
.admin-wrapper-content {
  width: 100%;
  min-height: 100vh;
  background-color: #111;
}
@media (max-width: 768px) {
  .admin-wrapper-content {
    padding-left: 0;
  }
}

.gds-main-container {
  /* Altere o valor abaixo para a largura real da sua sidebar (ex: 260px, 280px, 300px) */
  padding-left: 280px;
  width: 100%;
  min-height: 100vh;
}

/* No Mobile, a sidebar costuma sumir ou ir para o topo, então resetamos o recuo */
@media (max-width: 992px) {
  .gds-main-container {
    padding-left: 0;
  }
}
.gds-main-container {
  /* Altere para a largura exata da sua sidebar (ex: 260px ou 280px) */
  padding-left: 280px;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Quando a tela for menor (Mobile), o menu recolhe, então resetamos o recuo */
@media (max-width: 992px) {
  .gds-main-container {
    padding-left: 0;
  }
}
/* Efeito ao passar o mouse no botão Publicar (Fica ligeiramente mais claro e sobe um pixel) */
.btn-publicar-gds:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 128, 0.25) !important;
}

/* Efeito ao clicar no botão Publicar (Dá o efeito de clique para baixo) */
.btn-publicar-gds:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 128, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efeito ao passar o mouse no Cancelar */
.btn-cancelar-gds:hover {
  background-color: #f1f3f5 !important;
  color: #212529 !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-publicar-gds:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 128, 0.25) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-publicar-gds:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 128, 0.15) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-cancelar-gds:hover {
  background-color: #f1f3f5 !important;
  color: #212529 !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Garante que qualquer imagem colada no editor fique responsiva no site */
.post-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 20px auto; /* Centraliza a imagem com um respiro em cima e embaixo */
  border-radius: 8px; /* Dá um acabamento arredondado premium */
}

/* ==========================================================================
   ESTILOS DE FORMULÁRIO (PAINEL ADMIN)
   ========================================================================== */
/* Wrapper de Formulário (Mesmo padrão da Tabela) */
.form-wrapper {
  background-color: var(--white);
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
  padding: 2.5rem;
  margin-top: 1rem;
}

/* Cabeçalho do Formulário */
.form-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eef0f5;
}

/* Sistema de Grid Simples para o Formulário */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: flex;
  gap: 2rem;
  width: 100%;
}

.form-row-2 > .form-group {
  flex: 1;
}

.btn-blog {
  text-align: center;
  background-color: #000080 !important;
  color: #f6ee0b !important;
  font-family: var(--font-main);
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border-radius: 50px !important;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
}
.btn-blog .fa-arrow-right {
  background-color: #000080 !important;
}

.btn-blog:hover {
  background-color: #f6ee0b !important;
  color: #000080 !important;
}
.btn-blog:hover .fa-arrow-right {
  background-color: #f6ee0b !important;
}

/* Força qualquer imagem vinda do banco de dados a respeitar o limite da tela */
.conteudo-renderizado-quill img,
.conteudo-renderizado-quill iframe,
.conteudo-renderizado-quill figure {
  max-width: 100% !important;
  height: auto !important;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Responsividade Básica do Form */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: 1.5rem;
  }
}
/* Estilização dos Grupos e Labels */
.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-family: var(--font-subtitle);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.6rem;
}

.text-danger {
  color: #f1416c !important;
}

/* Inputs, Selects e File */
.input-control {
  font-family: var(--font-main);
  padding: 0.85rem 1.2rem;
  border: 2px solid #eef0f5;
  border-radius: 8px;
  font-size: 1rem;
  color: var(--black);
  background-color: var(--white);
  transition: all 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.input-control:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.1);
}

.file-input {
  padding: 0.65rem 1.2rem;
}

/* Caixa de Preview da Imagem */
.image-preview-box {
  padding: 0.5rem;
  border: 2px dashed #eef0f5;
  border-radius: 8px;
  background-color: #f8f9fa;
  display: inline-block;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.image-preview-box img {
  max-height: 200px;
  border-radius: 6px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Personalizando as Bordas do Quill para combinar com o input */
.ql-toolbar.ql-snow {
  border: 2px solid #eef0f5 !important;
  border-radius: 8px 8px 0 0;
  font-family: var(--font-main);
}

.ql-container.ql-snow {
  border: 2px solid #eef0f5 !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px;
  height: 400px !important;
  font-family: var(--font-main);
  font-size: 1rem;
}

/* Área de Botões (Rodapé do Form) */
.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eef0f5;
}

/* Botão Cancelar (Secundário) */
.btn-cancel {
  background-color: #f1f1f4;
  color: #5e6278;
  font-family: var(--font-main);
  font-weight: 700;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: none;
}

.btn-cancel:hover {
  background-color: #e4e6ef;
  color: #1e1e2d;
}

.card-subtitle {
  color: #084C61 !important;
}

/* ==========================================================================
   DOMADOR DE IMAGENS (LIVRE PARA MOVIMENTAÇÃO)
   ========================================================================== */
.ql-editor img {
  /* Mantém a trava de tamanho para não quebrar a tela */
  max-width: 100%;
  max-height: 350px;
  -o-object-fit: contain;
     object-fit: contain;
  /* Estética */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: 10px; /* Dá um respiro pequeno em volta da foto */
  /* APAGAMOS O DISPLAY BLOCK E O MARGIN AUTO QUE TRAVAVAM NO CENTRO! */
}

/* ==========================================================================
   ESTILOS DO TEXTO RENDERIZADO PELO QUILL
   ========================================================================== */
/* 1. Textos e Parágrafos */
.conteudo-renderizado-quill p {
  line-height: 1.6;
  color: #212529 !important;
  margin-bottom: 1.5rem;
}

/* 2. Títulos Internos */
.conteudo-renderizado-quill h1,
.conteudo-renderizado-quill h2,
.conteudo-renderizado-quill h3 {
  color: #000000 !important;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

/* 3. Listas e Tópicos */
.conteudo-renderizado-quill ul,
.conteudo-renderizado-quill ol {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
}

.conteudo-renderizado-quill li {
  margin-bottom: 0.5rem;
  color: #212529 !important;
}

/* ==========================================================================
   O DOMADOR DE IMAGENS PÚBLICO (RESPEITA O EDITOR)
   ========================================================================== */
.conteudo-renderizado-quill img {
  /* Garante que a imagem NUNCA ultrapasse a tela do celular */
  max-width: 100% !important;
  /* ATENÇÃO: Retiramos o width/height !important e o display block!
     Agora o site vai obedecer ao tamanho exato e ao alinhamento 
     (esquerda/direita/centro) que você escolheu lá no painel! */
  /* Estética premium */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Um respiro suave para a foto não colar no texto */
  margin: 10px;
}

/* Garante que imagens e vídeos do editor não estourem a tela em celulares */
.conteudo-renderizado-quill img,
.conteudo-renderizado-quill iframe {
  max-width: 100% !important;
  height: auto !important;
  -o-object-fit: contain;
     object-fit: contain; /* Mantém a proporção sem distorcer */
}

/* Opcional: Adiciona um espaçamento bacana nas imagens para não colarem no texto */
.conteudo-renderizado-quill img {
  margin-bottom: 20px;
  border-radius: 8px; /* Deixa os cantos arredondados, fica moderno! */
}

/* 1. Estrutura base do botão para todas as telas (Desktop e Mobile) */
.btn-artigo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px; /* Dá respiro (espaço interno) para o texto não ficar espremido */
  color: #f6ee0b; /* Cor do texto */
  text-decoration: none; /* Tira o sublinhado de link */
  border-radius: 50px; /* Bordas arredondadas */
  font-weight: 700;
  transition: all 0.3s ease; /* Efeito suave ao passar o mouse */
  white-space: nowrap; /* Impede que o texto do botão quebre em várias linhas */
}

/* Efeito de flutuação ao passar o mouse no card */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(8, 76, 97, 0.15) !important; /* Sombreamento combinando com a sua paleta */
}

/* --- RESPONSIVIDADE (TÍTULO) --- */
/* Desktop (Tamanho padrão) */
.titulo-blog {
  font-size: 3.5rem;
}

/* --- RESPONSIVIDADE DO ARTIGO DO BLOG --- */
/* 1. BLINDAGEM DAS IMAGENS DO EDITOR */
.conteudo-renderizado-quill img,
.conteudo-renderizado-quill iframe,
.conteudo-renderizado-quill figure {
  max-width: 100% !important; /* Nunca ultrapassa a tela */
  height: auto !important; /* Mantém a proporção correta */
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px; /* Dá um toque de elegância nos cantos */
  margin: 15px 0; /* Descola a imagem do texto */
}

/* 2. RESPONSIVIDADE DO BANNER E TÍTULO */
.banner-artigo {
  min-height: 500px;
}

.titulo-artigo {
  font-size: 3.5rem;
}

@media (max-width: 992px) {
  .banner-artigo {
    min-height: 400px;
  }
  .titulo-artigo {
    font-size: 2.8rem;
  }
}
@media (max-width: 768px) {
  .banner-artigo {
    min-height: 300px;
  }
  .titulo-artigo {
    font-size: 2.2rem;
  }
}
/* Tablets (Até 992px) */
@media (max-width: 992px) {
  .titulo-blog {
    font-size: 2.8rem;
  }
}
/* Telemóveis (Até 768px) */
@media (max-width: 768px) {
  .titulo-blog {
    font-size: 2.2rem;
  }
  /* Dá um respiro maior entre os cartões no celular */
  .row.g-4 {
    --bs-gutter-y: 2rem;
  }
}
/* 2. O truque de Mestre para Celulares (Telas menores que 768px) */
@media (max-width: 768px) {
  .btn-artigo {
    display: flex; /* Transforma em bloco flexível */
    width: 50%; /* Ocupa 50% da largura no celular (adeus botão espremido!) */
    margin-top: 10px; /* Dá um espaço em relação ao elemento de cima */
  }
  .fa-arrow-left {
    background-color: #000080;
  }
}
/* --- RESPONSIVIDADE DO ARTIGO DO BLOG --- */
/* 1. Regra para Monitores (Desktop Gigante) */
.banner-artigo {
  min-height: 500px;
}

.titulo-artigo {
  font-size: 3.5rem; /* Quase o tamanho do antigo display-4 */
}

/* 2. Regra para Notebooks pequenos e Tablets em modo paisagem (Até 992px) */
@media (max-width: 992px) {
  .banner-artigo {
    min-height: 400px; /* Reduz a área da imagem para o texto subir */
  }
  .titulo-artigo {
    font-size: 2.8rem; /* Título ligeiramente menor */
  }
}
/* 3. Regra para Tablets em pé e Celulares (Até 768px) */
@media (max-width: 768px) {
  .banner-artigo {
    min-height: 300px; /* Capa mais compacta para telas de mão */
  }
  .titulo-artigo {
    font-size: 2.2rem; /* Título perfeitamente legível sem ocupar a tela toda */
  }
}/*# sourceMappingURL=style.css.map */