/* ===========================
   Página: Certificação de Rede (cert.php)
   Escopo: .pagina-cert (isolado)
   Objetivo: leve, legível e responsivo
   =========================== */

/* ---- Tokens (cores/UI) ---- */
.pagina-cert{
  --bg:#ffffff;
  --fg:#111827;          /* cinza 900 */
  --muted:#4b5563;       /* cinza 600 */
  --card:#f8fafc;        /* cards claros */
  --border:#e5e7eb;      /* borda sutil */
  --brand:#0f62fe;       /* azul CTA */
  --ok:#16a34a;          /* verde */
  --info:#0ea5e9;        /* azul claro */
  --shadow:0 6px 24px rgba(0,0,0,.08);

  font-family: Arial, Helvetica, sans-serif;
  color: var(--fg);
  background: var(--bg);
  padding: 12px 0 40px;
}

/* ---- Reset escopado ---- */
.pagina-cert * { box-sizing: border-box; }
.pagina-cert img { max-width: 100%; display: block; height: auto; }
.pagina-cert h1, .pagina-cert h2, .pagina-cert h3 { margin: 0 0 .5rem; line-height: 1.25; color: var(--fg); }
.pagina-cert p { margin: 0 0 .9rem; color: var(--fg); line-height: 1.6; }
.pagina-cert a { color: var(--brand); text-decoration: none; }
.pagina-cert a:hover { text-decoration: underline; }

/* ---- Containers de seção ---- */
.pagina-cert .bloco,
.pagina-cert #sobre,
.pagina-cert #tipos,
.pagina-cert #importancia,
.pagina-cert #processo,
.pagina-cert #ferramentas,
.pagina-cert #recursos { padding: 20px 12px; background:#fff; }

/* ===========================
   HERO (.cert-hero)
   - com fallback claro se a imagem não carregar
   - texto sempre legível
   =========================== */
.pagina-cert .cert-hero{
  position: relative;
  min-height: 42vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  margin: 10px 12px 20px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);

  /* fallback sólido claro quando a imagem não carrega */
  background-color:#eef2f7;

  /* tenta webp; se falhar, usa jpg como último recurso */
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.35)),
    image-set(
      url('/assets/img/bg-hero-cert.jpg') type('image/jpeg')
    );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.pagina-cert .cert-hero .inner{ padding: 16px; }
.pagina-cert .cert-hero h1{ color:#fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem); text-shadow:0 1px 2px rgba(0,0,0,.35); }
.pagina-cert .cert-hero p{ color:#f8fafc; opacity:.98; text-shadow:0 1px 2px rgba(0,0,0,.35); }

/* ===========================
   Grid utilitário (duas colunas)
   =========================== */
.pagina-cert .grid-2{
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){
  .pagina-cert .grid-2{ grid-template-columns: 1fr; }
}

/* ===========================
   Cards de conteúdo (claros)
   =========================== */
.pagina-cert .card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
}
.pagina-cert .muted{ color: var(--muted); }

/* ===========================
   Checklist e Passos
   =========================== */
.pagina-cert .checklist{ list-style: none; padding: 0; margin: 0; }
.pagina-cert .checklist li{
  position: relative; padding-left: 1.6rem; margin: .45rem 0;
}
.pagina-cert .checklist li::before{
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 700;
}

.pagina-cert .passos{ list-style: none; padding: 0; margin: 0; counter-reset: n; }
.pagina-cert .passos li{
  counter-increment: n; position: relative; padding-left: 2.2rem; margin: .55rem 0;
}
.pagina-cert .passos li::before{
  content: counter(n);
  position: absolute; left: 0; top: 0;
  width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--info); color: #fff; font-weight: 700;
}

/* ===========================
   Galeria (figuras)
   =========================== */
.pagina-cert .galeria{ padding: 20px 12px; background:#fff; }
.pagina-cert .galeria h2{ margin-bottom: 10px; }
.pagina-cert .galeria-grid{
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pagina-cert .galeria figure{
  margin: 0; border-radius: 12px; overflow: hidden;
  background: #f3f4f6; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.pagina-cert .galeria img{
  width: 100%; height: 220px; object-fit: cover; display: block;
}
.pagina-cert .galeria figcaption{
  font-size: .9rem; padding: 8px 10px; color: var(--muted);
}

/* ===========================
   CTA (botões)
   =========================== */
.pagina-cert .cta-strip{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.pagina-cert .cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; }

.pagina-cert .btn{
  display: inline-block; padding: 10px 16px;
  border-radius: 10px; font-weight: 700; text-decoration: none;
  transition: background .2s ease, transform .06s ease, color .2s ease, border-color .2s ease;
}
.pagina-cert .btn-prim{ background: var(--brand); color: #fff; }
.pagina-cert .btn-prim:hover{ background: #1f56b6; }
.pagina-cert .btn:active{ transform: translateY(1px); }

/* Botão opcional “btn-cert” oculto (a pedido) */
.pagina-cert .btn-cert{ display: none !important; }

/* ===========================
   Bloco informativo (ferramentas/entregáveis)
   =========================== */
.pagina-cert .certificacao{
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); padding: 20px; margin: 20px 12px 0;
}


/* ===========================
   Utilitários simples
   =========================== */
.pagina-cert .mb-0{ margin-bottom:0 !important; }
.pagina-cert .mt-0{ margin-top:0 !important; }

/* ===========================
   Acessibilidade e Motion
   =========================== */
@media (prefers-reduced-motion: reduce){
  .pagina-cert .btn,
  .pagina-cert .cert-hero{ transition: none !important; }
}
@media (max-width: 640px) {
  .pagina-cert {
    min-height: 55vh; /* aumenta a altura em telas pequenas */
  }
  
  /* ===== Ajuste final para telas grandes (computador) ===== */
@media (min-width: 1025px) {
  .pagina-cert {
    background: #fff;        /* fundo branco */
    color: #111827;          /* texto escuro */
  }
  .pagina-cert img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .pagina-cert .grid-2 {
    grid-template-columns: 1fr 1fr; /* 2 colunas no desktop */
  }
  .pagina-cert .galeria-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}