/* reset & base */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: "Myriad Pro", Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
      background-color: #f5f9fe;
      color: #1e2b3c;
      line-height: 1.5;
      padding: 30px 16px 32px;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: #ffffff;
      border-radius: 1em;
      box-shadow: 0 12px 40px rgba(0, 20, 40, 0.08);
      
      overflow: hidden;
    }

    .hero{
      background-image: url('img_set/hero_bg.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
      border-radius: 0.8em 0.8em 0em 0em ;
      width: 100%;
      height: 30em;
      padding: 10px 10px 10px 10px;
    }

    .top{
      padding: 60px;
    }

    .btn-top{
      width: 25%;
    }

    .logo-top{width: 20%;}

    /* tipografia */
    h1, h2, h3 {
      font-weight: 600;
      letter-spacing: -0.02em;
    }
    h1 {
      font-size: 2.0rem;
      font-weight: bold;
      line-height: 1.0;
      color: #01406f;
      margin-bottom: 8px;
    }
    .destaque {
      color: #0057a3;
    }
    .subtitulo {
      font-size: 1.0rem;
      color: #333;
      margin-bottom: 24px;
    }
    .secao {
      margin: 0px;
    }
    .secao01 {margin-top: -4em;}

    .secao h2 {
      font-size: 1.6rem;
      text-transform: uppercase;
      margin-bottom: 16px;
      color: #0b2b4a;
      display: flex;
      align-items: center;
      gap: 8px;
    }
   
    .grid-beneficios {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
      gap: 10px;
      margin: 24px 50px 10px;
    }
    .beneficio {
      background: #01406f;
      border-radius: 20px;
      padding: 18px 10px 14px;
      text-align: center;
      color: white;
      box-shadow: 0 2px 8px rgba(0,80,160,0.04);
      border: 0px solid #e6f0fa;
      transition: all 0.2s;
    }
    .beneficio:hover {
      transform: translateY(-3px);
      border-color: #0077be;
      background: #01406f;
      box-shadow: 0 8px 18px rgba(0, 80, 160, 0.08);
    }
    .beneficio .icone {
      font-size: 1.2rem;
      display: block;
      margin-bottom: 6px;
    }
    .beneficio h3 {
      font-size: 1rem;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 4px;
    }
    .beneficio p {
      font-size: 0.85rem;
      color: #fff;
      margin: 0;
    }
    .empresas {
      display: none;
      background: #eef6fd;
      border-radius: 40px;
      padding: 18px 20px;
      margin: 28px 0 16px;
      text-align: center;
      font-weight: 500;
      color: #003a6b;
      border: 1px dashed #0077be;
    }
    .empresas span {
      background: white;
      padding: 4px 18px;
      border-radius: 30px;
      display: inline-block;
      margin: 4px 6px;
      font-weight: 400;
      color: #1e2b3c;
      box-shadow: 0 1px 4px rgba(0,0,0,0.02);
    }

    .qual{
      margin: 4em;
    }

    .center{padding-top:2em; text-align: center;}
    .certbox{
      margin-top: 50px;
      padding: 25px 50px 0px;
      background-color: #f0f4f9;
    }
    .passos {
      background: #f0f4f9;
      border-radius: 28px;
      padding: 20px 0px 00px;
      margin: 20px 0px;
    }
    .passos ol {
      list-style: none;
      counter-reset: step;
      
    }
    .passos li {
      counter-increment: step;
      padding: 10px 18px 10px 40px;
      border-radius: 10px;
      flex: 1 0 auto;
      font-weight: 500;
      color: #003a6b;
      position: relative;
      min-width: 140px;
    }
    .passos li::before {
      content: counter(step);
      background: #0077be;
      color: white;
      font-weight: 700;
      width: 24px;
      height: 24px;
      border-radius: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 0.8rem;
    }

    .grid-opcoes {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin: 18px 0 10px;
    }
    .card-opcao {
      background: #fafcff;
      border-radius: 20px;
      padding: 14px 12px 16px;
      border: 1px solid #e2eefa;
    }
    .card-opcao h4 {
      color: #003a6b;
      font-size: 1rem;
      border-bottom: 1px solid #d6e6f5;
      padding-bottom: 6px;
      margin-bottom: 10px;
    }
    .card-opcao ul {
      list-style: none;
      font-size: 0.9rem;
    }
    .card-opcao li {
      padding: 4px 0 4px 20px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%230077be" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v8M8 12h8"/></svg>') left center no-repeat;
      background-size: 14px;
    }
    .preco-destaque {
      background: #e2effa;
      border-radius: 30px;
      padding: 6px 14px;
      font-weight: 600;
      color: #003a6b;
      display: inline-block;
      margin-top: 6px;
    }
    .iframe-wrapper {
      margin: 0px 0px 12px;
      border-radius: 0px;
      overflow: hidden;
      box-shadow: 0px 6px 24px rgba(0, 40, 80, 0.06);
      border: 0px solid #ddeaf5;
      
    }
    .iframe-wrapper iframe {
      width: 100%;
      height: 900px;
      border: none;
      display: block;
    }
    .whatsapp-box {
      background: #1ebea5;
      background: linear-gradient(145deg, #25d366, #128c7e);
      color: white;
      border-radius: 10px;
      padding: 14px 24px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      font-size: 1.2rem;
      margin: 24px 0 12px;
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
      transition: 0.2s;
      text-decoration: none;
    }
    .whatsapp-box:hover {
      transform: scale(1.01);
      background: #1daa8e;
      box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
    }
    .whatsapp-box small {
      font-weight: 400;
      font-size: 0.9rem;
      opacity: 0.9;
    }
    .footer-contato {
      background: #003a6b;
      border-radius: 0px;
      padding: 0px 0px 0px;
      margin: 0px 0 0px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    .endereco {
      padding: 60px;
      font-size: 0.9rem;
      color: #fff;
    }
    .endereco strong {
      display: block;
      text-transform: uppercase;
      font-size: 1rem;
      color: #fff;
    }
    .declaracoes {
      padding: 0px 60px 60px;
      gap: 20px;
      flex-wrap: wrap;
      font-weight: 500;
      color: #0057a3;
      font-size: 0.9rem;
    }
   .declaracoes strong {
      display: block;
      padding-bottom: 1em;
      text-transform: uppercase;
      text-align: right;
      font-size: 1rem;
      color: #fff;
    }
    .declaracoes span {
      background: white;
      padding: 4px 16px;
      border-radius: 10px;
      border: 1px solid #b7d3ea;
    }
    .declaracoes a {
      color: #333;
      text-decoration: none;
    }
    /* ajustes mobile */
    @media (max-width: 640px) {
      .container { padding: 16px 12px; }
      h1 { font-size: 1.5rem; }
      .subtitulo { font-size: 1rem; padding: 10px 12px; }
      .grid-beneficios { grid-template-columns: 1fr 1fr; gap: 10px; }
      .beneficio { padding: 14px 6px; }
      .passos ol { flex-direction: column; }
      .passos li { min-width: auto; }
      .grid-opcoes { grid-template-columns: 1fr; }
      .iframe-wrapper iframe { height: 380px; }
      .footer-contato { flex-direction: column; align-items: flex-start; gap: 12px; }
      .whatsapp-box { width: 100%; justify-content: center; font-size: 1rem; }
      .iframe-wrapper iframe {width: 100%; height: 1800px; border: none; display: block;}
      .declaracoes strong {text-align: left; font-size: 1rem;}
      .hero{padding: 0px; background-image: url('img_set/heromobile_bg.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; width: 100%; height: 33em;}
      .btn-top{width: 95%;}
      .logo{margin: 0 auto;}
      .logo-top{text-align: center; width: 70%; display: block; margin-left: auto; margin-right: auto; padding-bottom: 1em;}
      .secao01 {margin-top: -3em;}
      h1 {font-size: 1.2rem; text-align: center; font-weight: bold; line-height: 1.0; color: #01406f; margin-bottom: 8px;}
      .secao h2 {font-size: 1.4rem; text-align: center; font-weight: bold; line-height: 1.1; text-transform: uppercase; margin-bottom: 16px; color: #01406f; display: flex; align-items: center; gap: 8px;
    }
      .subtitulo{font-size: 0.8rem; text-align: center; color: #333; margin-bottom: 24px;}
      .hero{margin:0 auto;}
    }
    @media (max-width: 420px) {
      .grid-beneficios { grid-template-columns: 1fr; }
      .iframe-wrapper iframe {width: 100%; height: 1800px; border: none; display: block;}
      .declaracoes strong {text-align: left; font-size: 1rem;}
      .hero{padding: 0px; background-image: url('img_set/heromobile_bg.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; width: 100%; height: 32em;}
      .btn-top{width: 95%;}
      .logo{margin: 0 auto;}
      .logo-top{text-align: center; width: 70%; display: block; margin-left: auto; margin-right: auto; padding-bottom: 1em;}
      .secao01 {margin-top: -3em;}
      h1 {font-size: 1.2rem; text-align: center; font-weight: bold; line-height: 1.0; color: #01406f; margin-bottom: 8px;}
      .secao h2 {font-size: 1.4rem; text-align: center; font-weight: bold; line-height: 1.1; text-transform: uppercase; margin-bottom: 16px; color: #01406f; display: flex; align-items: center; gap: 8px;
    }
      .subtitulo{font-size: 0.8rem; text-align: center; color: #333; margin-bottom: 24px;}
      .hero{margin:0 auto;}
    }
    /* acessibilidade e interação */
    a, button {
      transition: 0.2s;
    }
    .btn-comprar {
      background: #0077be;
      border: none;
      color: white;
      font-weight: 600;
      padding: 10px 28px;
      border-radius: 60px;
      font-size: 1rem;
      cursor: default;
      box-shadow: 0 4px 10px rgba(0, 119, 190, 0.2);
      display: inline-block;
      margin-top: 6px;
    }