/* Start custom CSS for html, class: .elementor-element-842aee7 */<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Certificado Digital e-CPF — Atlas Certificação Digital</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<style>
  /* ─── Reset ─── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  img { display: block; max-width: 100%; }
  a { text-decoration: none; }
  button { cursor: pointer; border: none; background: none; font-family: inherit; }

  /* ─── Tokens ─── */
  :root {
    --navy:       #0d1b2e;
    --navy-mid:   #132236;
    --blue:       #1a6ec4;
    --blue-light: #e8f2fc;
    --blue-mid:   #b8d6f4;
    --gold:       #e6c14a;
    --gold-light: #fdf6dc;
    --green:      #2e7d4f;
    --green-light:#eaf5ee;
    --green-mid:  #b3ddc4;
    --text-1:     #0f172a;
    --text-2:     #475569;
    --text-3:     #94a3b8;
    --surface-0:  #ffffff;
    --surface-1:  #f8fafc;
    --surface-2:  #f1f5f9;
    --border:     #e2e8f0;
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  22px;
    --shadow-sm:  0 1px 3px rgba(0,0,0,.07);
    --shadow-md:  0 4px 16px rgba(0,0,0,.09);
    --transition: .2s ease;
  }

  /* ─── Base ─── */
  body {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-1);
    background: var(--surface-1);
  }

  /* ─── Navbar ─── */
  .navbar {
    background: var(--navy);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nav-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .nav-logo-icon i { font-size: 18px; color: var(--navy); }
  .nav-logo-text {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
  }
  .nav-logo-text span {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: var(--text-3);
    letter-spacing: .12em;
  }
  .nav-links {
    display: flex;
    gap: 24px;
  }
  .nav-links a {
    color: #94a3b8;
    font-size: 13px;
    transition: color var(--transition);
  }
  .nav-links a:hover { color: #fff; }
  .nav-cart {
    background: var(--blue);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity var(--transition);
  }
  .nav-cart:hover { opacity: .88; }
  .hamburger {
    display: none;
    color: #fff;
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--navy-mid);
    padding: 16px 24px;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    color: #94a3b8;
    font-size: 14px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
  }

  /* ─── Breadcrumb ─── */
  .breadcrumb {
    background: var(--surface-0);
    border-bottom: 1px solid var(--border);
    padding: 10px 24px;
    font-size: 12px;
    color: var(--text-2);
  }
  .breadcrumb a { color: var(--blue); }
  .breadcrumb a:hover { text-decoration: underline; }

  /* ─── Hero ─── */
  .hero {
    background: var(--surface-0);
    padding: 32px 24px;
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
  }

  /* ─── Cert visual ─── */
  .cert-visual {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .cert-mockup {
    background: var(--navy);
    border-radius: var(--radius-lg);
    width: 240px;
    padding: 20px;
  }
  .cert-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }
  .cert-dot {
    width: 22px;
    height: 22px;
    background: var(--gold);
    border-radius: 50%;
  }
  .cert-brand {
    color: var(--gold);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
  }
  .cert-chip {
    width: 34px;
    height: 24px;
    background: linear-gradient(135deg, #d4a93a 0%, #f0cc6a 50%, #c8921e 100%);
    border-radius: 4px;
    margin-bottom: 14px;
  }
  .cert-name {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .cert-cpf {
    color: #64748b;
    font-size: 9px;
    letter-spacing: .08em;
    margin-bottom: 14px;
  }
  .cert-bar-blue {
    height: 3px;
    background: var(--blue);
    border-radius: 2px;
    margin-bottom: 4px;
  }
  .cert-bar-gold {
    height: 3px;
    background: var(--gold);
    border-radius: 2px;
    width: 60%;
    margin-bottom: 10px;
  }
  .cert-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .cert-valid {
    color: #475569;
    font-size: 7px;
    line-height: 1.5;
  }
  .cert-seal {
    width: 28px;
    height: 28px;
    background: rgba(230,193,74,.15);
    border: 1px solid rgba(230,193,74,.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cert-seal i { font-size: 14px; color: var(--gold); }

  .cert-badge {
    background: var(--blue-light);
    color: #0c447c;
    border: 1px solid var(--blue-mid);
    border-radius: var(--radius-md);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .trust-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-2);
    background: var(--surface-0);
    border: 1px solid var(--border);
    padding: 5px 10px;
    border-radius: 20px;
  }
  .trust-pill i { font-size: 13px; color: var(--blue); }

  /* ─── Product info ─── */
  .product-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .badge-brand {
    display: inline-flex;
    align-items: center;
    background: var(--blue-light);
    color: #0c447c;
    border: 1px solid var(--blue-mid);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 500;
  }
  .product-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.2;
    margin-top: 6px;
  }
  .product-desc {
    font-size: 14px;
    color: var(--text-2);
    line-height: 1.65;
  }
  .label-sm {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: .04em;
    margin-bottom: 10px;
  }

  /* ─── Plans ─── */
  .plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .plan-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px;
    cursor: pointer;
    background: var(--surface-1);
    position: relative;
    transition: border-color var(--transition), background var(--transition);
    user-select: none;
  }
  .plan-card:hover { border-color: var(--blue); }
  .plan-card.selected {
    border-color: var(--blue);
    border-width: 2px;
    background: var(--surface-0);
  }
  .plan-card.popular::before {
    content: 'Mais popular';
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .02em;
  }
  .plan-type {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 2px;
  }
  .plan-validity {
    font-size: 11px;
    color: var(--text-2);
    margin-bottom: 2px;
  }
  .plan-media {
    font-size: 10px;
    color: var(--text-3);
    margin-bottom: 8px;
  }
  .plan-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
  }

  /* ─── Info box ─── */
  .info-box {
    background: var(--blue-light);
    border: 1px solid var(--blue-mid);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 12px;
    color: #0c447c;
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }
  .info-box i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

  /* ─── A1 vs A3 ─── */
  .compare-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .compare-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .compare-card-badge {
    display: inline-block;
    background: var(--surface-2);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--border);
    width: fit-content;
  }
  .compare-card-sub {
    font-size: 12px;
    color: var(--text-3);
  }
  .compare-item {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 4px;
    line-height: 1.45;
  }
  .compare-item i { font-size: 13px; color: var(--green); flex-shrink: 0; margin-top: 1px; }
  .compare-footer {
    background: var(--surface-1);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-top: auto;
  }
  .compare-footer-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: .08em;
    margin-bottom: 5px;
  }
  .compare-footer-text {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
  }

  /* ─── Price & payment ─── */
  .price-block { display: flex; flex-direction: column; gap: 2px; }
  .price-main {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-1);
  }
  .price-installment { font-size: 13px; color: var(--text-2); }
  .payment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
  }
  .payment-label { font-size: 12px; color: var(--text-3); }
  .pm-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-2);
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
  }
  .pm-badge i { font-size: 13px; }

  /* ─── CTA buttons ─── */
  .btn-primary {
    display: block;
    width: 100%;
    background: var(--blue);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 14px;
    border-radius: var(--radius-md);
    text-align: center;
    transition: opacity var(--transition), transform var(--transition);
    letter-spacing: .01em;
  }
  .btn-primary:hover { opacity: .9; transform: translateY(-1px); }
  .btn-primary:active { transform: translateY(0); }
  .btn-secondary {
    display: block;
    width: 100%;
    background: var(--surface-0);
    color: var(--text-1);
    font-size: 14px;
    font-weight: 500;
    padding: 12px;
    border-radius: var(--radius-md);
    text-align: center;
    border: 1.5px solid var(--border);
    margin-top: 10px;
    transition: background var(--transition), border-color var(--transition);
  }
  .btn-secondary:hover { background: var(--surface-1); border-color: #c0cdd8; }
  .online-note {
    background: var(--green-light);
    border: 1px solid var(--green-mid);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 12px;
    color: #1a5c38;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
  }
  .online-note i { font-size: 16px; color: var(--green); flex-shrink: 0; margin-top: 1px; }

  /* ─── Sections ─── */
  .section-wrap {
    background: var(--surface-0);
    border-top: 1px solid var(--border);
    padding: 40px 24px;
  }
  .section-wrap.alt { background: var(--surface-1); }
  .section-inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  .section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: 24px;
  }

  /* ─── Steps ─── */
  .steps-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
    gap: 0;
  }
  .step {
    text-align: center;
    padding: 0 12px;
    position: relative;
  }
  .step::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 22px);
    right: calc(-50% + 22px);
    height: 1px;
    background: var(--border);
  }
  .step:last-child::after { display: none; }
  .step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    position: relative;
    z-index: 1;
  }
  .step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-1);
    margin-bottom: 4px;
  }
  .step-sub {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
  }

  /* ─── Includes ─── */
  .includes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .include-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text-1);
    line-height: 1.5;
  }
  .include-item i { font-size: 17px; color: var(--green); flex-shrink: 0; margin-top: 1px; }

  /* ─── Reviews ─── */
  .review-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
  }
  .review-big {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: var(--text-1);
    line-height: 1;
  }
  .review-stars-big { color: var(--gold); font-size: 18px; margin: 4px 0; }
  .review-count { font-size: 12px; color: var(--text-2); }
  .review-summary-text { font-size: 14px; color: var(--text-2); line-height: 1.6; }
  .review-summary-text strong { color: var(--text-1); font-weight: 600; }

  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .review-card {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
  }
  .stars { color: var(--gold); font-size: 14px; margin-bottom: 8px; }
  .review-text { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-bottom: 12px; }
  .review-author { font-size: 13px; font-weight: 600; color: var(--text-1); }
  .review-role { font-size: 11px; color: var(--text-3); }

  /* ─── FAQ ─── */
  .faq-list { display: flex; flex-direction: column; gap: 8px; }
  .faq-item {
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .faq-q {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background var(--transition);
    background: none;
    border: none;
    font-family: inherit;
  }
  .faq-q:hover { background: var(--surface-1); }
  .faq-q i {
    font-size: 16px;
    color: var(--text-2);
    flex-shrink: 0;
    transition: transform .25s ease;
  }
  .faq-item.open .faq-q i { transform: rotate(180deg); }
  .faq-a {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.65;
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
  }
  .faq-item.open .faq-a {
    max-height: 200px;
    padding: 0 16px 14px;
    border-top: 1px solid var(--border);
  }

  /* ─── WhatsApp bar ─── */
  .whatsapp-bar {
    background: var(--green-light);
    border-top: 1px solid var(--green-mid);
    border-bottom: 1px solid var(--green-mid);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .whatsapp-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #1a5c38;
    font-weight: 500;
  }
  .whatsapp-text i { font-size: 20px; color: var(--green); flex-shrink: 0; }
  .whatsapp-btn {
    background: var(--green);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: opacity var(--transition);
    cursor: pointer;
    border: none;
    font-family: inherit;
  }
  .whatsapp-btn:hover { opacity: .88; }
  .whatsapp-btn i { font-size: 16px; }

  /* ─── Footer ─── */
  .footer {
    background: var(--navy);
    padding: 40px 24px 24px;
  }
  .footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .footer-logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .footer-desc { font-size: 12px; color: #64748b; line-height: 1.7; }
  .footer-col-title {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  .footer-links { display: flex; flex-direction: column; gap: 8px; }
  .footer-links a { font-size: 13px; color: #64748b; transition: color var(--transition); }
  .footer-links a:hover { color: #cbd5e1; }
  .footer-contact { display: flex; flex-direction: column; gap: 10px; }
  .footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
  }
  .footer-contact-item i { font-size: 15px; color: #185fa5; flex-shrink: 0; margin-top: 1px; }
  .footer-bottom {
    max-width: 1100px;
    margin: 20px auto 0;
    text-align: center;
    font-size: 11px;
    color: #334155;
  }

  /* ─── Responsive ─── */
  @media (max-width: 900px) {
    .hero {
      grid-template-columns: 1fr;
      padding: 24px 16px;
    }
    .cert-visual { order: -1; }
    .cert-mockup { width: 210px; }
    .steps-row {
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .step::after { display: none; }
    .includes-grid { grid-template-columns: 1fr 1fr; }
    .reviews-grid { grid-template-columns: 1fr 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
    .footer-inner > :first-child { grid-column: 1 / -1; }
  }

  @media (max-width: 600px) {
    .navbar { padding: 0 16px; height: 56px; }
    .nav-links { display: none; }
    .nav-cart { display: none; }
    .hamburger { display: flex; }
    .breadcrumb { padding: 8px 16px; font-size: 11px; }
    .hero { padding: 20px 16px; gap: 24px; }
    .product-title { font-size: 22px; }
    .plans-grid { grid-template-columns: 1fr; gap: 10px; }
    .plan-card.popular { margin-top: 10px; }
    .compare-block { grid-template-columns: 1fr; gap: 8px; }
    .price-main { font-size: 26px; }
    .section-wrap { padding: 28px 16px; }
    .section-title { font-size: 18px; }
    .steps-row { grid-template-columns: 1fr; gap: 20px; }
    .step { text-align: left; display: flex; align-items: flex-start; gap: 14px; }
    .step-num { flex-shrink: 0; margin: 0; }
    .includes-grid { grid-template-columns: 1fr; }
    .review-summary { flex-direction: column; align-items: flex-start; gap: 12px; }
    .reviews-grid { grid-template-columns: 1fr; }
    .whatsapp-bar { flex-direction: column; align-items: flex-start; padding: 16px; }
    .whatsapp-btn { width: 100%; justify-content: center; }
    .footer-inner { grid-template-columns: 1fr; gap: 24px; }
    .footer-inner > :first-child { grid-column: auto; }
    .footer { padding: 28px 16px 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
</style>
</head>
<body>

<!-- ─── Navbar ─── -->
<header>
  <nav class="navbar" aria-label="Navegação principal">
    <div class="nav-logo">
      <div class="nav-logo-icon" aria-hidden="true">
        <i class="ti ti-world"></i>
      </div>
      <div class="nav-logo-text">
        ATLAS
        <span>CERTIFICAÇÃO DIGITAL</span>
      </div>
    </div>
    <div class="nav-links" role="list">
      <a href="#" role="listitem">Home</a>
      <a href="#" role="listitem">Sobre nós</a>
      <a href="#faq" role="listitem">FAQ</a>
      <a href="#" role="listitem">Renovação</a>
    </div>
    <button class="nav-cart" aria-label="Carrinho de compras, 0 itens">
      <i class="ti ti-shopping-cart" aria-hidden="true"></i>
      Carrinho (0)
    </button>
    <button class="hamburger" id="hamburger" aria-label="Abrir menu" aria-expanded="false" aria-controls="mobile-menu">
      <i class="ti ti-menu-2" id="hamburger-icon" aria-hidden="true"></i>
    </button>
  </nav>
  <div class="mobile-menu" id="mobile-menu" role="navigation" aria-label="Menu mobile">
    <a href="#">Home</a>
    <a href="#">Sobre nós</a>
    <a href="#faq">FAQ</a>
    <a href="#">Renovação</a>
    <a href="#">Carrinho (0)</a>
  </div>
</header>

<!-- ─── Breadcrumb ─── -->
<nav class="breadcrumb" aria-label="Localização na página">
  <a href="#">Início</a> › <a href="#">Certificados Digitais</a> › Certificado Digital e-CPF
</nav>

<!-- ─── Hero ─── -->
<main>
  <section class="hero" aria-label="Informações do produto">

    <!-- Visual do certificado -->
    <div class="cert-visual">
      <div class="cert-mockup" aria-label="Exemplo visual do certificado digital e-CPF">
        <div class="cert-header">
          <div class="cert-dot" aria-hidden="true"></div>
          <span class="cert-brand">ATLAS · e-CPF</span>
        </div>
        <div class="cert-chip" aria-hidden="true"></div>
        <div class="cert-name">João da Silva</div>
        <div class="cert-cpf">CPF: 000.000.000-00</div>
        <div class="cert-bar-blue" aria-hidden="true"></div>
        <div class="cert-bar-gold" aria-hidden="true"></div>
        <div class="cert-footer">
          <div class="cert-valid">
            Válido até<br>06/2026<br>ICP-Brasil
          </div>
          <div class="cert-seal" aria-label="Selo ICP-Brasil">
            <i class="ti ti-shield-check" aria-hidden="true"></i>
          </div>
        </div>
      </div>

      <div class="cert-badge">
        <i class="ti ti-shield-check" aria-hidden="true"></i>
        Certificado ICP-Brasil
      </div>

      <div class="trust-pills" role="list" aria-label="Selos de confiança">
        <div class="trust-pill" role="listitem"><i class="ti ti-lock" aria-hidden="true"></i> Ambiente seguro</div>
        <div class="trust-pill" role="listitem"><i class="ti ti-check" aria-hidden="true"></i> ITI homologado</div>
        <div class="trust-pill" role="listitem"><i class="ti ti-building-bank" aria-hidden="true"></i> AC credenciada</div>
      </div>
    </div>

    <!-- Info do produto -->
    <div class="product-info">
      <div>
        <div class="badge-brand">Atlas Certificação Digital</div>
        <h1 class="product-title">Certificado Digital e-CPF</h1>
        <p class="product-desc">
          Assine documentos digitalmente com validade jurídica, acesse o Gov.br, e-CAC, Receita Federal e centenas de sistemas públicos. Emissão 100% online — sem precisar sair de casa.
        </p>
      </div>

      <!-- Seleção de plano -->
      <div>
        <div class="label-sm">Selecione o tipo e validade</div>
        <div class="plans-grid" role="radiogroup" aria-label="Opções de certificado">

          <div class="plan-card selected" role="radio" aria-checked="true" tabindex="0" data-price="149.90" data-installment="12,49" data-plan="A1 — Arquivo digital — 12 meses">
            <div class="plan-type">A1</div>
            <div class="plan-validity">12 meses</div>
            <div class="plan-media">Arquivo digital</div>
            <div class="plan-price">R$ 149,90</div>
          </div>

          <div class="plan-card popular" role="radio" aria-checked="false" tabindex="0" data-price="199.90" data-installment="16,66" data-plan="A3 — Token/Cartão — 12 meses">
            <div class="plan-type">A3</div>
            <div class="plan-validity">12 meses</div>
            <div class="plan-media">Token / Cartão</div>
            <div class="plan-price">R$ 199,90</div>
          </div>

          <div class="plan-card" role="radio" aria-checked="false" tabindex="0" data-price="299.90" data-installment="24,99" data-plan="A3 — Token/Cartão — 24 meses">
            <div class="plan-type">A3</div>
            <div class="plan-validity">24 meses</div>
            <div class="plan-media">Token / Cartão</div>
            <div class="plan-price">R$ 299,90</div>
          </div>

        </div>

        <div class="info-box" style="margin-top: 10px;">
          <i class="ti ti-info-circle" aria-hidden="true"></i>
          <span>O A1 está disponível somente com validade de 12 meses (padrão ICP-Brasil).</span>
        </div>
      </div>

      <!-- A1 vs A3 -->
      <div>
        <div class="label-sm" style="margin-bottom: 10px;">A1 ou A3 — qual é o certo para mim?</div>
        <div class="compare-block">

          <div class="compare-card">
            <span class="compare-card-badge">A1 — Arquivo digital</span>
            <p class="compare-card-sub">Instalado no computador como um arquivo</p>
            <div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Sem hardware adicional (sem token ou cartão)</div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Instalação rápida — recebe por e-mail</div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Ideal para uso em casa ou escritório fixo</div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Disponível apenas em validade de 12 meses (padrão ICP-Brasil)</div>
            </div>
            <div class="compare-footer">
              <div class="compare-footer-label">INDICADO PARA</div>
              <div class="compare-footer-text">Autônomos, MEIs e pessoas físicas que usam somente no próprio computador.</div>
            </div>
          </div>

          <div class="compare-card">
            <span class="compare-card-badge">A3 — Token ou cartão físico</span>
            <p class="compare-card-sub">Armazenado em dispositivo físico criptografado</p>
            <div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Portátil: use em qualquer computador</div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Maior segurança — chave nunca sai do dispositivo</div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Aceito em cartórios, bancos e sistemas governamentais</div>
              <div class="compare-item"><i class="ti ti-check" aria-hidden="true"></i> Disponível em 12 ou 24 meses</div>
            </div>
            <div class="compare-footer">
              <div class="compare-footer-label">INDICADO PARA</div>
              <div class="compare-footer-text">Contadores, advogados, servidores públicos e quem precisa assinar em múltiplos dispositivos.</div>
            </div>
          </div>

        </div>
      </div>

      <!-- Preço -->
      <div>
        <div class="price-block">
          <div class="price-main" id="price-display">R$ 149,90</div>
          <div class="price-installment" id="installment-display">Em até 12x de R$ 12,49 sem juros</div>
        </div>
        <div class="payment-row" aria-label="Formas de pagamento">
          <span class="payment-label">Aceito:</span>
          <div class="pm-badge"><i class="ti ti-credit-card" aria-hidden="true"></i> Cartão</div>
          <div class="pm-badge"><i class="ti ti-qrcode" aria-hidden="true"></i> Pix</div>
          <div class="pm-badge"><i class="ti ti-file-invoice" aria-hidden="true"></i> Boleto</div>
        </div>
      </div>

      <!-- CTAs -->
      <div>
        <a href="#" class="btn-primary" id="btn-buy" role="button">Comprar agora</a>
        <a href="#" class="btn-secondary" id="btn-cart" role="button">Adicionar ao carrinho</a>
        <div class="online-note">
          <i class="ti ti-device-laptop" aria-hidden="true"></i>
          <span>Emissão 100% online — após a validação, seu certificado é emitido digitalmente. Sem deslocamento.</span>
        </div>
      </div>
    </div>
  </section>

  <!-- ─── Como funciona ─── -->
  <section class="section-wrap alt" aria-labelledby="steps-title">
    <div class="section-inner">
      <h2 class="section-title" id="steps-title">Como funciona — passo a passo</h2>
      <div class="steps-row">
        <div class="step">
          <div class="step-num" aria-hidden="true">1</div>
          <div>
            <div class="step-label">Compra online</div>
            <div class="step-sub">Escolha o plano e finalize o pagamento com segurança</div>
          </div>
        </div>
        <div class="step">
          <div class="step-num" aria-hidden="true">2</div>
          <div>
            <div class="step-label">Validação</div>
            <div class="step-sub">Videoconferência ou presencial com agente credenciado</div>
          </div>
        </div>
        <div class="step">
          <div class="step-num" aria-hidden="true">3</div>
          <div>
            <div class="step-label">Emissão</div>
            <div class="step-sub">Certificado gerado em até 2h após validação aprovada</div>
          </div>
        </div>
        <div class="step">
          <div class="step-num" aria-hidden="true">4</div>
          <div>
            <div class="step-label">Pronto para usar</div>
            <div class="step-sub">Baixe, instale e já comece a assinar documentos</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ─── O que está incluído ─── -->
  <section class="section-wrap" aria-labelledby="includes-title">
    <div class="section-inner">
      <h2 class="section-title" id="includes-title">O que está incluído</h2>
      <div class="includes-grid">
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Emissão de certificado ICP-Brasil</div>
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Validação presencial ou por videoconferência</div>
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Suporte técnico durante toda a validade</div>
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Compatível com Gov.br e e-CAC</div>
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Renovação simplificada online</div>
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Aceito em toda a cadeia ICP-Brasil</div>
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Guia de instalação passo a passo</div>
        <div class="include-item"><i class="ti ti-circle-check" aria-hidden="true"></i> Teste gratuito do certificado após emissão</div>
      </div>
    </div>
  </section>

  <!-- ─── Avaliações ─── -->
  <section class="section-wrap alt" aria-labelledby="reviews-title">
    <div class="section-inner">
      <div class="review-summary">
        <div>
          <div class="review-big">4,9</div>
          <div class="review-stars-big" aria-label="5 estrelas">★★★★★</div>
          <div class="review-count">baseado em 1.240 avaliações</div>
        </div>
        <p class="review-summary-text">
          Mais de <strong>8.000 clientes</strong> já emitiram seus certificados com a Atlas. Somos uma Autoridade de Registro credenciada pelo ITI, com atendimento em Mato Grosso e região.
        </p>
      </div>
      <h2 class="section-title" id="reviews-title" style="font-size:17px;">O que nossos clientes dizem</h2>
      <div class="reviews-grid">
        <article class="review-card">
          <div class="stars" aria-label="5 estrelas">★★★★★</div>
          <p class="review-text">Processo muito simples. Em menos de 2 horas tinha meu certificado pronto. A videoconferência foi rápida e o suporte respondeu na hora.</p>
          <div class="review-author">Ana Paula S.</div>
          <div class="review-role">Contadora · Cuiabá, MT</div>
        </article>
        <article class="review-card">
          <div class="stars" aria-label="5 estrelas">★★★★★</div>
          <p class="review-text">Precisava do certificado para acessar o e-CAC com urgência. Comprei pela manhã e à tarde já estava usando. Muito ágil e profissional.</p>
          <div class="review-author">Marcos T.</div>
          <div class="review-role">Autônomo · Várzea Grande, MT</div>
        </article>
        <article class="review-card">
          <div class="stars" aria-label="5 estrelas">★★★★★</div>
          <p class="review-text">Primeiro certificado digital que tirei sem ir a uma loja física. Tutorial de instalação enviado por WhatsApp. Recomendo demais.</p>
          <div class="review-author">Carla F.</div>
          <div class="review-role">Médica · Rondonópolis, MT</div>
        </article>
      </div>
    </div>
  </section>

  <!-- ─── FAQ ─── -->
  <section class="section-wrap" id="faq" aria-labelledby="faq-title">
    <div class="section-inner">
      <h2 class="section-title" id="faq-title">Perguntas frequentes</h2>
      <div class="faq-list" role="list">

        <div class="faq-item" role="listitem">
          <button class="faq-q" aria-expanded="false" aria-controls="faq-a-1">
            O certificado funciona no celular?
            <i class="ti ti-chevron-down" aria-hidden="true"></i>
          </button>
          <div class="faq-a" id="faq-a-1" role="region">
            O A1 pode ser instalado em apps com suporte a certificado digital. O A3 em token pode ser usado via leitora de cartão conectada ao celular. Para a maioria das assinaturas digitais, o computador ainda é o mais recomendado.
          </div>
        </div>

        <div class="faq-item" role="listitem">
          <button class="faq-q" aria-expanded="false" aria-controls="faq-a-2">
            Preciso renovar todo ano?
            <i class="ti ti-chevron-down" aria-hidden="true"></i>
          </button>
          <div class="faq-a" id="faq-a-2" role="region">
            Depende da validade escolhida. O A1 de 12 meses precisa de renovação anual. O A3 de 24 meses tem dois anos de validade e a renovação pode ser feita de forma simplificada online.
          </div>
        </div>

        <div class="faq-item" role="listitem">
          <button class="faq-q" aria-expanded="false" aria-controls="faq-a-3">
            Funciona no Gov.br e no e-CAC?
            <i class="ti ti-chevron-down" aria-hidden="true"></i>
          </button>
          <div class="faq-a" id="faq-a-3" role="region">
            Sim. O certificado e-CPF da Atlas é emitido dentro da cadeia ICP-Brasil e é aceito em todos os sistemas do governo federal, incluindo Gov.br, e-CAC, Receita Federal e portal de serviços públicos.
          </div>
        </div>

        <div class="faq-item" role="listitem">
          <button class="faq-q" aria-expanded="false" aria-controls="faq-a-4">
            O que acontece após o pagamento?
            <i class="ti ti-chevron-down" aria-hidden="true"></i>
          </button>
          <div class="faq-a" id="faq-a-4" role="region">
            Você receberá um e-mail com instruções para agendar a validação por videoconferência. Após aprovação, o certificado é emitido em até 2 horas com guia completo de instalação enviado por WhatsApp.
          </div>
        </div>

        <div class="faq-item" role="listitem">
          <button class="faq-q" aria-expanded="false" aria-controls="faq-a-5">
            Qual a diferença entre A1 e A3?
            <i class="ti ti-chevron-down" aria-hidden="true"></i>
          </button>
          <div class="faq-a" id="faq-a-5" role="region">
            O A1 é um arquivo digital instalado no seu computador — prático para uso pessoal e doméstico. O A3 fica armazenado em um token (pendrive) ou cartão físico, oferecendo mais segurança e sendo exigido em cartórios, licitações e alguns sistemas profissionais.
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- ─── WhatsApp bar ─── -->
  <div class="whatsapp-bar" role="complementary" aria-label="Canal de suporte">
    <div class="whatsapp-text">
      <i class="ti ti-brand-whatsapp" aria-hidden="true"></i>
      <span>Tem dúvidas? Nosso time está disponível para te ajudar antes da compra.</span>
    </div>
    <a href="https://wa.me/5565992414369" target="_blank" rel="noopener noreferrer" class="whatsapp-btn">
      <i class="ti ti-brand-whatsapp" aria-hidden="true"></i>
      Falar no WhatsApp
    </a>
  </div>
</main>

<!-- ─── Footer ─── -->
<footer class="footer" aria-label="Rodapé">
  <div class="footer-inner">
    <div>
      <div class="footer-logo-text">
        <i class="ti ti-world" aria-hidden="true"></i> ATLAS
      </div>
      <p class="footer-desc">
        Autoridade de Registro credenciada pelo ITI, atuando em Mato Grosso e região. Emissão segura de certificados ICP-Brasil com atendimento humanizado desde 2018.
      </p>
    </div>
    <div>
      <div class="footer-col-title">Acesso rápido</div>
      <nav class="footer-links" aria-label="Links rápidos">
        <a href="#">Renovação de certificado</a>
        <a href="#">Instalação A1 e A3</a>
        <a href="#">Teste seu certificado</a>
        <a href="#faq">FAQ's</a>
        <a href="#">Política de Privacidade</a>
      </nav>
    </div>
    <div>
      <div class="footer-col-title">Empresa</div>
      <div class="footer-contact">
        <div class="footer-contact-item">
          <i class="ti ti-map-pin" aria-hidden="true"></i>
          <span>Av. Aleixo Ramos da Conceição, SN — Sala 08, Figueirinha, Várzea Grande - MT, 78140-120</span>
        </div>
        <div class="footer-contact-item">
          <i class="ti ti-brand-whatsapp" aria-hidden="true"></i>
          <span>(65) 9 9241-4369</span>
        </div>
        <div class="footer-contact-item">
          <i class="ti ti-info-circle" aria-hidden="true"></i>
          <a href="#" style="color: #64748b;">Sobre nós</a>
        </div>
      </div>
    </div>
  </div>
  <p class="footer-bottom">
    © 2026 Atlas Certificação Digital · Todos os direitos reservados
  </p>
</footer>

<script>
  /* ─── Menu mobile ─── */
  const hamburger = document.getElementById('hamburger');
  const hamburgerIcon = document.getElementById('hamburger-icon');
  const mobileMenu = document.getElementById('mobile-menu');

  hamburger.addEventListener('click', () => {
    const isOpen = mobileMenu.classList.toggle('open');
    hamburger.setAttribute('aria-expanded', isOpen);
    hamburgerIcon.className = isOpen ? 'ti ti-x' : 'ti ti-menu-2';
  });

  /* ─── Seleção de plano ─── */
  const planCards = document.querySelectorAll('.plan-card');
  const priceDisplay = document.getElementById('price-display');
  const installmentDisplay = document.getElementById('installment-display');
  const btnBuy = document.getElementById('btn-buy');

  planCards.forEach(card => {
    card.addEventListener('click', () => selectPlan(card));
    card.addEventListener('keydown', e => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        selectPlan(card);
      }
    });
  });

  function selectPlan(card) {
    planCards.forEach(c => {
      c.classList.remove('selected');
      c.setAttribute('aria-checked', 'false');
    });
    card.classList.add('selected');
    card.setAttribute('aria-checked', 'true');

    const rawPrice = parseFloat(card.dataset.price);
    const installment = card.dataset.installment;
    const planName = card.dataset.plan;

    priceDisplay.textContent = 'R$ ' + rawPrice.toFixed(2).replace('.', ',');
    installmentDisplay.textContent = 'Em até 12x de R$ ' + installment + ' sem juros';
    btnBuy.setAttribute('aria-label', 'Comprar agora — ' + planName);
  }

  /* ─── FAQ accordion ─── */
  const faqItems = document.querySelectorAll('.faq-item');

  faqItems.forEach(item => {
    const btn = item.querySelector('.faq-q');
    btn.addEventListener('click', () => {
      const isOpen = item.classList.contains('open');
      faqItems.forEach(i => {
        i.classList.remove('open');
        i.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
      });
      if (!isOpen) {
        item.classList.add('open');
        btn.setAttribute('aria-expanded', 'true');
      }
    });
  });

  /* ─── Smooth scroll para âncoras ─── */
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', e => {
      const target = document.querySelector(anchor.getAttribute('href'));
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        if (mobileMenu.classList.contains('open')) {
          mobileMenu.classList.remove('open');
          hamburger.setAttribute('aria-expanded', 'false');
          hamburgerIcon.className = 'ti ti-menu-2';
        }
      }
    });
  });
</script>
</body>
</html>/* End custom CSS */