/* =========================================
   PAGES HERO CARDS – compartilhado
   Certificações, LGPD (lei-geral)
   ========================================= */

/* Hero section-1 – alinhamento: esquerda + centro vertical */
.hero-cards-section-1 {
  min-height: 50vh;
  padding-top: var(--space-hero-top);
  padding-left: var(--space-container-x-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media (min-width: 992px) {
  .hero-cards-section-1 {
    padding-top: clamp(5rem, 12vh, 8rem);
    padding-left: clamp(4rem, 12vw, 12rem);
  }
}
.hero-cards-section-1 .hero-cards-title h1,
.hero-cards-section-1 h1 {
  font-weight: 800;
  font-size: 45px;
  color: var(--brand-gold);
  line-height: 1.2;
  margin: 0;
}

/* Seção principal */
.hero-cards-section-2 {
  padding: 0;
  background: var(--bg-light);
}

.hero-cards-section-2-content {
  background: #fff;
  padding: var(--space-section) var(--space-container-x);
}

/* Texto */
.hero-cards-content {
  padding: 0 var(--space-container-x-lg);
}

.hero-cards-text h2 {
  font-size: 38px;
  font-weight: 800;
  color: var(--brand-purple);
  line-height: 1.2;
  margin-bottom: 16px;
}

.hero-cards-text p {
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
  margin: 0;
}

.page-lei-geral .hero-cards-text p {
  margin: 0 0 8px 0;
}

/* Cards */
.page-certificacoes .card,
.page-lei-geral .card {
  border: none;
  border-radius: 14px;
  background: var(--bg-light);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.page-certificacoes .card-hover:hover,
.page-lei-geral .card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
}

.page-certificacoes .card-icon,
.page-lei-geral .card-icon {
  font-size: 44px;
  color: var(--brand-gold);
}

.page-certificacoes .card-title,
.page-lei-geral .card-title {
  font-weight: 700;
  color: var(--text-secondary);
}

.page-certificacoes .card-text {
  font-size: 14px;
  color: #6c757d;
}

/* Imagem lateral */
.hero-cards-img figure {
  border-radius: 12px;
  overflow: hidden;
}

.hero-cards-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Notebook/Tablet landscape (992–1199) */
@media (min-width:992px) and (max-width:1199.98px) {
  .hero-cards-section-1 { padding: 10vh 0 5vh; }
  .hero-cards-section-1 h1 { font-size: 44px; }

  .hero-cards-section-2-content { padding: 7vh 0; }
  .hero-cards-content { padding: 0 3vh; }
  .hero-cards-text h2 { font-size: 34px; }
}

/* Tablet (768–991) */
@media (min-width:768px) and (max-width:991.98px) {
  .hero-cards-section-1 {
    margin-top: 9vh;
    padding: 9vh 0 5vh;
    text-align: center;
  }
  .hero-cards-section-1 h1 { font-size: 40px; }

  .hero-cards-section-2-content { padding: 5vh 0; }
  .hero-cards-content { padding: 0 3vh; }
  .hero-cards-text h2 { font-size: 32px; }

  .hero-cards-img { margin-top: 2rem; padding: 0 3vh; }

  .page-certificacoes .certificacoes-links .col-md-4,
  .page-lei-geral .lei-geral-links .col-md-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .page-certificacoes .certificacoes-links .col-md-6,
  .page-lei-geral .lei-geral-links .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  .page-certificacoes .card-title { font-size: 1.1rem; }
  .page-certificacoes .card-text { font-size: 13.5px; }
  .page-lei-geral .card-title { font-size: 1rem; }
}

/* Mobile (<=767) */
@media (max-width:767.98px) {
  .hero-cards-section-1 {
    margin-top: 10vh;
    padding: 8vh 0 5vh;
    text-align: center;
    background-position: center;
  }
  .hero-cards-section-1 h1 { font-size: 34px; }

  .hero-cards-section-2-content { padding: 4vh 0; }
  .hero-cards-content { padding: 0 2rem; }
  .hero-cards-text h2 { font-size: 28px; }
  .hero-cards-text p { font-size: 15px; }

  .page-certificacoes .card-icon,
  .page-lei-geral .card-icon { font-size: 40px; }

  .hero-cards-img { padding: 0 4vh; }
}

/* Desktop ≥992px – igualar alturas, imagem cover */
@media (min-width:992px) {
  .hero-cards-section-2 .row {
    align-items: stretch !important;
  }
  .hero-cards-img {
    display: flex;
    align-items: stretch;
    padding: 0 2vh;
  }
  .hero-cards-img figure {
    flex: 1 1 auto;
    height: 100%;
    margin: 0;
  }
  .hero-cards-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
  }
}