/* ===== Página Dicas ===== */

.pagina-dicas{ padding: 10px 0 40px; }
    .dicas-hero{
      position: relative; min-height: 42vh;
      display:flex; align-items:center; justify-content:center;
      text-align:center; color:#fff;
      background: url('/assets/img/hero-dicas.jpg') center/cover no-repeat;
      border-radius: 14px; margin: 10px 12px 20px;
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
    }
    .dicas-hero::after{
      content:""; position:absolute; inset:0; border-radius:14px;
      background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
    }
    .dicas-hero .inner{ position:relative; z-index:1; padding: 10px 16px; }
    .dicas-hero h1{ margin:0 0 6px; font-size: clamp(1.4rem, 2.2vw, 2.2rem); }
    .dicas-hero p{ margin:0; opacity:.95; }

    /* grade de temas (cards grandes clicáveis) */
    .temas{ padding: 8px 12px 18px; }
    .temas-grid{
      display:grid; gap:14px;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    /* garante contexto de posicionamento */
.tema-card{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 220px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  background: #111;
  display: block;              /* não precisamos de flex aqui */
}

.tema-card .txt {
  position: relative;
  z-index: 1;
  padding: 16px;
  text-align: center;      /* centraliza horizontal */
  margin-top: auto;        /* remove se não quiser empurrar */
}

/* título sempre no topo, centralizado */
.tema-card h3{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 10px;
  text-align: center;
  z-index: 2;                  /* acima do overlay */
  width: calc(100% - 24px);    /* respira nas laterais */
  font-size: 1.2rem;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
/* bloco de texto agora respeita o espaço do título */
.tema-card .txt{
  position: relative;
  z-index: 1;
  padding: 56px 14px 16px;     /* chave: abre espaço pro h3 no topo */
  text-align: center;
}

/* Botão "Saiba mais" que aparece no hover dos cards */
.tema-card .saiba{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.66);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.tema-card:hover .saiba{
  opacity: 1;
  transform: translateY(0);
}
.tema-card .saiba:hover{
  background: rgba(0,0,0,.8);
}

/* mantém o overlay e o efeito na imagem de fundo */
.tema-card .bg{
  position: absolute; inset: 0;
  background-position: center; 
  background-size: cover;
  opacity: 0.35; /* 🔹 controla a transparência (0.35 = bem suave) */
  filter: saturate(1.1) brightness(1.0);
  transform: scale(1.02);
  transition: opacity .3s ease, transform .35s ease, filter .35s ease;
}
/* no hover a imagem pode aparecer um pouco mais */
.tema-card:hover .bg{
  opacity: 0.55;
  transform: scale(1.06);
  filter: saturate(1.2) brightness(1.05);
}
.tema-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.65) 90%);
  z-index: 0;                  /* fica atrás do título e do texto */
}
.tema-card p {
  margin: 0;
  opacity: .95;
  font-size: .95rem;
}
.tema-card:hover .bg{ transform: scale(1.06); filter: saturate(1.2) brightness(1); }


    /* bloco “por que certificar” */
    .certificacao{
      margin: 18px 12px 0; padding: 16px; border-radius:14px;
      background: linear-gradient(180deg, #0f1320, #0a0d16);
      color:#e9eefc; box-shadow: 0 10px 26px rgba(0,0,0,.35);
    }
    .certificacao h2{ margin:0 0 10px; font-size: clamp(1.2rem, 2vw, 1.6rem); }
    .cert-list{
      display:grid; gap:12px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      margin: 10px 0 8px; padding: 0; list-style: none;
    }
    .cert-item{
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06);
      border-radius: 12px; padding: 12px;
    }
    .cert-item h4{ margin:0 0 6px; font-size: 1rem; color:#fff; }
    .cert-item p{ margin:0; opacity:.95; font-size:.95rem; }

    .cta-strip{
      margin-top: 14px; display:flex; align-items:center; justify-content:space-between;
      gap:10px; flex-wrap: wrap;
      background: #0b132b; border:1px solid rgba(255,255,255,.06);
      border-radius: 12px; padding: 12px 14px;
    }
    .cta-strip p{ margin:0; opacity:.95; }
    .btn-prim{
      display:inline-block; background:#2b6fe0; color:#fff; text-decoration:none;
      padding:10px 14px; border-radius:10px; font-weight:700;
    }
    .btn-prim:hover{ background:#1f56b6; }

/* Botão "Saiba mais" nos cards já existe; se quiser o botão verde especial na Dicas, use: */
.btn-cert{
  display:inline-block; text-decoration:none; font-weight:800;
  padding:10px 16px; border-radius:10px;
  background:#38d9a9; color:#111; border:1px solid rgba(0,0,0,.1);
  transition:background .2s ease, color .2s ease, transform .06s ease, box-shadow .2s ease;
  box-shadow:0 8px 18px rgba(0,0,0,.20);
}
.btn-cert:hover{ background:#ff2f2f; color:#fff; }
.btn-cert:active{ transform:translateY(1px); }




/* RESPONSIVO */



/* Ícones lúdicos na grade principal de temas (links de cima) */
.temas-grid a[href="#contabilidade"] .bg {
  background-image: url('/assets/img/bg-contabilidade.webp');
}
.temas-grid a[href="#advocacia"] .bg {
  background-image: url('/assets/img/bg-advocacia.webp');
}
.temas-grid a[href="#wifi"] .bg {
  background-image: url('/assets/img/bg-wifi.webp');
}
.temas-grid a[href="#qos"] .bg {
  background-image: url('/assets/img/bg-qos.webp');
}
.temas-grid a[href="#seguranca"] .bg {
  background-image: url('/assets/img/bg-seguranca.webp');
}
.temas-grid a[href="#certificacao"] .bg {
  background-image: url('/assets/img/bg-certificacao.webp');
  
  /* Mobile não tem hover: deixa sempre visível */
@media (hover: none){
  .tema-card .saiba{
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 640px) {
  .dicas-hero {
    min-height: 55vh; /* aumenta a altura em telas pequenas */
  }

@media (max-width: 640px){
  .tema-card{ min-height: 200px; }
  .tema-card h3{ top: 10px; font-size: 1.1rem; }
  .tema-card .txt{ padding-top: 50px; }
}