/* novo-fluxo.css — design system do novo fluxo DASN
   Extraido do protótipo C:/meiemfoco/05-10-26/fluxo_mock (05/10/2026).
   Fontes: Cabinet Grotesk (fonts.cdnfonts.com) + Inter (Google Fonts) — carregar no <head>. */
    :root {
      --azul-900: #092c4c;
      --azul-800: #0b3f70;
      --azul-700: #0756a4;
      --azul-600: #0968c7;
      --azul-100: #e8f3ff;
      --azul-50: #f3f8fe;

      --verde-700: #087444;
      --verde-600: #0b8650;
      --verde-100: #ddf7e9;
      --verde-50: #f1fbf6;

      --laranja-800: #8e351e;
      --laranja-100: #ffe6dc;
      --laranja-50: #fff6f1;

      --amarelo-100: #fff1b8;
      --amarelo-900: #654900;

      --texto: #172536;
      --texto-suave: #536272;
      --texto-claro: #6d7986;
      --linha: #dbe4ed;
      --linha-forte: #c5d1de;
      --fundo: #f4f8fc;
      --branco: #ffffff;

      --sombra: 0 18px 50px rgba(9, 44, 76, 0.09);
      --sombra-suave: 0 8px 24px rgba(9, 44, 76, 0.07);
      --raio: 20px;
      --raio-menor: 14px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--fundo);
      color: var(--texto);
      font-family: Inter, Arial, sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    button,
    input {
      font: inherit;
    }

    button,
    a,
    summary,
    label {
      -webkit-tap-highlight-color: transparent;
    }

    button {
      color: inherit;
    }

    a {
      color: var(--azul-700);
    }

    img {
      display: block;
      max-width: 100%;
    }

    [hidden] {
      display: none !important;
    }

    .prot {
      padding: 7px 16px;
      background: var(--amarelo-100);
      color: var(--amarelo-900);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-align: center;
    }

    .cabecalho {
      position: relative;
      z-index: 10;
      border-bottom: 1px solid var(--linha);
      background: rgba(255, 255, 255, 0.96);
    }

    .topo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: min(1180px, 100%);
      min-height: 68px;
      margin: 0 auto;
      padding: 12px 16px;
    }

    .logo {
      width: auto;
      height: 35px;
    }

    .topo-confianca {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--texto-suave);
      font-size: 12px;
      font-weight: 700;
    }

    .topo-confianca img {
      width: 16px;
      height: 16px;
    }

    main {
      min-height: 70vh;
    }

    .tela {
      animation: entrada 240ms ease both;
    }

    .container {
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 28px 16px 80px;
    }

    .container-fluxo {
      width: min(720px, 100%);
      margin: 0 auto;
      padding: 22px 16px 90px;
    }

    h1,
    h2,
    h3 {
      color: var(--azul-900);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      line-height: 1.1;
      text-wrap: balance;
    }

    h1 {
      margin: 0;
      font-size: clamp(2rem, 8vw, 4.5rem);
      letter-spacing: -0.01em;
    }

    h2 {
      margin: 0;
      font-size: clamp(1.7rem, 6vw, 2.65rem);
      letter-spacing: -0.01em;
    }

    h3 {
      margin: 0;
      font-size: 1.15rem;
      letter-spacing: -0.01em;
    }

    p {
      margin-top: 0;
    }

    .lead {
      max-width: 690px;
      margin: 14px 0 0;
      color: var(--texto-suave);
      font-size: 1.04rem;
      line-height: 1.65;
    }

    .sobretitulo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      color: var(--azul-700);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .sobretitulo::before {
      width: 24px;
      height: 3px;
      border-radius: 999px;
      background: var(--verde-600);
      content: "";
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 13px 20px;
      border: 0;
      border-radius: 13px;
      font-weight: 800;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
      cursor: pointer;
      transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
    }

    .btn:hover {
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(0);
    }

    .btn-bloco {
      width: 100%;
    }

    .btn-primario {
      background: var(--azul-700);
      color: var(--branco);
      box-shadow: 0 10px 22px rgba(7, 86, 164, 0.2);
    }

    .btn-primario:hover {
      background: var(--azul-600);
    }

    .btn-verde {
      background: var(--verde-700);
      color: var(--branco);
      box-shadow: 0 10px 22px rgba(8, 116, 68, 0.18);
    }

    .btn-verde:hover {
      background: var(--verde-600);
    }

    .btn-secundario {
      border: 1.5px solid var(--linha-forte);
      background: var(--branco);
      color: var(--azul-700);
    }

    .btn-secundario:hover {
      border-color: var(--azul-700);
      background: var(--azul-50);
    }

    .btn-whatsapp {
      gap: 9px;
      background: #087a40;
      color: var(--branco);
    }

    .btn-whatsapp img {
      width: 22px;
      height: 22px;
      filter: brightness(0) invert(1);
    }

    .btn-voltar {
      min-height: 44px;
      margin: 0 0 12px;
      padding: 6px 2px;
      border: 0;
      background: transparent;
      color: var(--azul-700);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    .btn-voltar:hover {
      text-decoration: underline;
    }

    .btn-link {
      min-height: 44px;
      padding: 4px;
      border: 0;
      background: transparent;
      color: var(--azul-700);
      font-weight: 700;
      text-decoration: underline;
      cursor: pointer;
    }

    .btn:focus-visible,
    .btn-voltar:focus-visible,
    .btn-link:focus-visible,
    .opcao-pagamento:focus-visible,
    input:focus-visible,
    summary:focus-visible,
    a:focus-visible {
      outline: 3px solid #f2b705;
      outline-offset: 3px;
    }

    .card {
      border: 1px solid var(--linha);
      border-radius: var(--raio);
      background: var(--branco);
      box-shadow: var(--sombra-suave);
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 34px 0 50px;
    }

    .hero::before {
      position: absolute;
      top: -210px;
      right: -230px;
      width: 500px;
      height: 500px;
      border: 90px solid rgba(7, 86, 164, 0.055);
      border-radius: 50%;
      content: "";
      pointer-events: none;
    }

    .hero-grade {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 28px;
    }

    .hero h1 {
      max-width: 780px;
      font-size: clamp(2.45rem, 10vw, 4.7rem);
    }

    .hero h1 em {
      color: var(--azul-700);
      font-style: normal;
    }

    .hero-texto .lead {
      max-width: 650px;
    }

    .aviso-privado {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      max-width: 610px;
      margin: 18px 0 0;
      color: var(--texto-suave);
      font-size: 13px;
      line-height: 1.5;
    }

    .aviso-privado::before {
      flex: 0 0 auto;
      width: 9px;
      height: 9px;
      margin-top: 5px;
      border-radius: 50%;
      background: var(--verde-600);
      content: "";
    }

    .consulta-card {
      position: relative;
      z-index: 2;
      padding: 20px;
      border-top: 5px solid var(--azul-700);
      box-shadow: var(--sombra);
    }

    .consulta-card h2 {
      font-size: 1.45rem;
    }

    .consulta-card > p {
      margin: 7px 0 18px;
      color: var(--texto-suave);
      font-size: 14px;
    }

    .campo-label {
      display: block;
      margin: 0 0 7px;
      color: var(--azul-900);
      font-size: 14px;
      font-weight: 800;
    }

    .campo {
      width: 100%;
      min-height: 52px;
      padding: 13px 14px;
      border: 1.5px solid var(--linha-forte);
      border-radius: 12px;
      background: var(--branco);
      color: var(--texto);
      font-size: 17px;
      outline: none;
      transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
    }

    .campo:hover {
      border-color: #9caebe;
    }

    .campo:focus {
      border-color: var(--azul-700);
      box-shadow: 0 0 0 4px rgba(7, 86, 164, 0.11);
    }

    .campo[aria-invalid="true"] {
      border-color: #ad3f25;
    }

    .erro-campo {
      min-height: 20px;
      margin: 6px 0 0;
      color: #982f19;
      font-size: 13px;
      font-weight: 700;
    }

    .consulta-card .btn {
      margin-top: 8px;
    }

    .microtexto {
      margin: 11px 0 0;
      color: var(--texto-claro);
      font-size: 12px;
      line-height: 1.55;
      text-align: center;
    }

    .preco-direto {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0 10px;
      align-items: center;
      margin: 18px 0 0;
      padding: 14px;
      border-radius: 13px;
      background: var(--azul-50);
    }

    .preco-direto strong {
      grid-row: span 2;
      color: var(--azul-900);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: 1.6rem;
      line-height: 1;
    }

    .preco-direto span {
      color: var(--texto);
      font-size: 13px;
      font-weight: 700;
    }

    .preco-direto small {
      color: var(--texto-suave);
      font-size: 11px;
    }

    .prova-rapida {
      display: grid;
      gap: 10px;
      margin-top: 20px;
    }

    .prova-item {
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 56px;
      padding: 11px 13px;
      border: 1px solid var(--linha);
      border-radius: 13px;
      background: rgba(255, 255, 255, 0.74);
      color: var(--texto-suave);
      font-size: 12px;
      line-height: 1.35;
    }

    .prova-item strong {
      display: block;
      color: var(--azul-900);
      font-size: 14px;
    }

    .prova-icone {
      display: grid;
      flex: 0 0 auto;
      width: 35px;
      height: 35px;
      place-items: center;
      border-radius: 10px;
      background: var(--verde-100);
      color: var(--verde-700);
      font-size: 18px;
      font-weight: 800;
    }

    .secao {
      padding: 62px 0;
    }

    .secao-branca {
      border-block: 1px solid var(--linha);
      background: var(--branco);
    }

    .secao-topo {
      max-width: 730px;
      margin: 0 0 28px;
    }

    .secao-topo p {
      margin: 12px 0 0;
      color: var(--texto-suave);
      line-height: 1.65;
    }

    .passos-home {
      display: grid;
      gap: 14px;
    }

    .passo-home {
      position: relative;
      overflow: hidden;
      min-height: 210px;
      padding: 22px;
    }

    .passo-numero {
      display: inline-grid;
      width: 42px;
      height: 42px;
      margin: 0 0 34px;
      place-items: center;
      border-radius: 12px;
      background: var(--azul-900);
      color: var(--branco);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: 18px;
      font-weight: 800;
    }

    .passo-home::after {
      position: absolute;
      top: 18px;
      right: 18px;
      color: rgba(7, 86, 164, 0.07);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: 82px;
      font-weight: 800;
      line-height: 1;
      content: attr(data-numero);
    }

    .passo-home h3 {
      margin-bottom: 8px;
    }

    .passo-home p {
      margin: 0;
      color: var(--texto-suave);
      font-size: 14px;
      line-height: 1.6;
    }

    .servico-grade {
      display: grid;
      gap: 22px;
      align-items: center;
    }

    .lista-check {
      display: grid;
      gap: 12px;
      margin: 22px 0 0;
      padding: 0;
      list-style: none;
    }

    .lista-check li {
      position: relative;
      padding-left: 31px;
      color: var(--texto);
      line-height: 1.55;
    }

    .lista-check li::before {
      position: absolute;
      top: 1px;
      left: 0;
      display: grid;
      width: 22px;
      height: 22px;
      place-items: center;
      border-radius: 50%;
      background: var(--verde-100);
      color: var(--verde-700);
      font-size: 13px;
      font-weight: 900;
      content: "✓";
    }

    .quadro-preco {
      padding: 24px;
      border: 2px solid var(--azul-700);
      background:
        linear-gradient(145deg, rgba(232, 243, 255, 0.85), #ffffff 56%);
    }

    .quadro-preco .rotulo {
      color: var(--azul-700);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .quadro-preco .valor {
      margin: 8px 0 0;
      color: var(--azul-900);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: clamp(2.35rem, 10vw, 3.5rem);
      font-weight: 800;
      letter-spacing: -0.01em;
      line-height: 1;
    }

    .quadro-preco .por {
      margin: 6px 0 0;
      color: var(--texto);
      font-weight: 700;
    }

    .quadro-preco .consulta-gratis {
      margin: 20px 0 0;
      padding-top: 16px;
      border-top: 1px solid var(--linha);
      color: var(--verde-700);
      font-size: 14px;
      font-weight: 800;
    }

    .quadro-preco small {
      display: block;
      margin: 8px 0 0;
      color: var(--texto-suave);
      line-height: 1.55;
    }

    .prova-destaque {
      display: grid;
      gap: 8px;
      align-items: end;
      margin-bottom: 26px;
    }

    .prova-destaque strong {
      color: var(--azul-900);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: clamp(3.2rem, 16vw, 6.5rem);
      letter-spacing: -0.01em;
      line-height: 0.85;
    }

    .prova-destaque span {
      max-width: 330px;
      color: var(--texto-suave);
      font-size: 15px;
      font-weight: 700;
    }

    .depoimentos {
      display: grid;
      gap: 14px;
    }

    .depoimento {
      padding: 20px;
    }

    .depoimento blockquote {
      margin: 0;
      color: var(--texto);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.7;
    }

    .depoimento cite {
      display: block;
      margin-top: 16px;
      color: var(--azul-900);
      font-size: 13px;
      font-style: normal;
      font-weight: 800;
    }

    .placeholder {
      display: inline-block;
      margin-top: 8px;
      padding: 4px 7px;
      border-radius: 6px;
      background: var(--amarelo-100);
      color: var(--amarelo-900);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .consequencias {
      display: grid;
      gap: 18px;
      align-items: start;
    }

    .consequencia-card {
      padding: 22px;
      border-color: #f0cabe;
      background: var(--laranja-50);
      box-shadow: none;
    }

    .consequencia-card ul {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .consequencia-card li {
      position: relative;
      padding-left: 29px;
      color: #643424;
      line-height: 1.55;
    }

    .consequencia-card li::before {
      position: absolute;
      top: 1px;
      left: 0;
      display: grid;
      width: 21px;
      height: 21px;
      place-items: center;
      border-radius: 50%;
      background: var(--laranja-100);
      color: var(--laranja-800);
      font-size: 13px;
      font-weight: 900;
      content: "!";
    }

    .nota-legal {
      margin: 18px 0 0;
      color: var(--texto-suave);
      font-size: 13px;
      line-height: 1.65;
    }

    .garantias {
      display: grid;
      gap: 14px;
    }

    .garantia {
      padding: 20px;
    }

    .garantia-icone {
      display: grid;
      width: 42px;
      height: 42px;
      margin-bottom: 18px;
      place-items: center;
      border-radius: 12px;
      background: var(--azul-100);
      color: var(--azul-700);
      font-size: 19px;
      font-weight: 900;
    }

    .garantia p {
      margin: 8px 0 0;
      color: var(--texto-suave);
      font-size: 14px;
      line-height: 1.6;
    }

    .faq {
      display: grid;
      gap: 9px;
    }

    details {
      border: 1px solid var(--linha);
      border-radius: 14px;
      background: var(--branco);
    }

    summary {
      position: relative;
      min-height: 52px;
      padding: 15px 50px 15px 16px;
      color: var(--azul-900);
      font-weight: 800;
      list-style: none;
      cursor: pointer;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::after {
      position: absolute;
      top: 50%;
      right: 17px;
      color: var(--azul-700);
      font-size: 22px;
      line-height: 1;
      transform: translateY(-50%);
      content: "+";
    }

    details[open] summary::after {
      content: "−";
    }

    details p {
      margin: 0;
      padding: 0 16px 17px;
      color: var(--texto-suave);
      font-size: 14px;
      line-height: 1.65;
    }

    .cta-final {
      position: relative;
      overflow: hidden;
      padding: 30px 22px;
      border-radius: 24px;
      background: var(--azul-900);
      color: var(--branco);
    }

    .cta-final::after {
      position: absolute;
      right: -60px;
      bottom: -100px;
      width: 240px;
      height: 240px;
      border: 48px solid rgba(255, 255, 255, 0.06);
      border-radius: 50%;
      content: "";
    }

    .cta-final h2,
    .cta-final p {
      position: relative;
      z-index: 1;
      color: var(--branco);
    }

    .cta-final p {
      max-width: 640px;
      margin: 12px 0 20px;
      color: #d7e7f4;
      line-height: 1.65;
    }

    .cta-final .btn {
      position: relative;
      z-index: 1;
      background: var(--branco);
      color: var(--azul-900);
    }

    .barra-etapas {
      padding: 18px 16px 0;
    }

    .etapas {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      width: min(688px, 100%);
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }

    .etapa {
      position: relative;
      padding-top: 13px;
      color: var(--texto-claro);
      font-size: 11px;
      font-weight: 700;
      text-align: center;
    }

    .etapa::before {
      position: absolute;
      top: 0;
      right: 2px;
      left: 2px;
      height: 5px;
      border-radius: 999px;
      background: var(--linha);
      content: "";
    }

    .etapa.ativa {
      color: var(--azul-700);
    }

    .etapa.ativa::before,
    .etapa.concluida::before {
      background: var(--azul-700);
    }

    .etapa.concluida {
      color: var(--verde-700);
    }

    .etapa.concluida::before {
      background: var(--verde-600);
    }

    .titulo-fluxo {
      font-size: clamp(2rem, 9vw, 3.15rem);
    }

    .empresa {
      padding: 18px;
    }

    .empresa-nome {
      color: var(--azul-900);
      font-weight: 800;
    }

    .empresa-cnpj {
      margin-top: 3px;
      color: var(--texto-suave);
      font-size: 13px;
    }

    .anos {
      margin-top: 15px;
      border-top: 1px solid var(--linha);
    }

    .ano {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 50px;
      border-bottom: 1px solid #edf1f5;
    }

    .ano:last-child {
      border-bottom: 0;
    }

    .ano strong {
      color: var(--azul-900);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 800;
    }

    .chip-pendente {
      background: var(--laranja-100);
      color: var(--laranja-800);
    }

    .chip-neutro {
      background: #eef2f5;
      color: var(--texto-suave);
    }

    .alerta {
      margin: 14px 0;
      padding: 15px 16px;
      border: 1px solid #efc7ba;
      border-radius: 14px;
      background: var(--laranja-50);
      color: #683421;
      font-size: 14px;
      line-height: 1.6;
    }

    .alerta strong {
      color: var(--laranja-800);
    }

    .escolhas-servico {
      display: grid;
      gap: 12px;
      margin-top: 22px;
    }

    .escolha-servico {
      padding: 20px;
    }

    .escolha-servico.destaque {
      border: 2px solid var(--verde-700);
      background: var(--verde-50);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 9px;
      border-radius: 999px;
      background: var(--verde-700);
      color: var(--branco);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .escolha-cabecalho {
      display: flex;
      gap: 14px;
      justify-content: space-between;
      margin-top: 12px;
    }

    .escolha-cabecalho h2 {
      font-size: 1.28rem;
    }

    .escolha-preco {
      flex: 0 0 auto;
      color: var(--azul-900);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: 1.45rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .escolha-servico p {
      margin: 9px 0 16px;
      color: var(--texto-suave);
      font-size: 14px;
      line-height: 1.6;
    }

    .parcelamento {
      margin: 6px 0 14px;  /* era -8px: no iPhone o titulo quebra em 2 linhas e sobrepunha */
      color: var(--verde-700);
      font-size: 13px;
      font-weight: 800;
    }

    .ano-dados {
      margin-top: 12px;
      padding: 16px;
    }

    .ano-dados-cabecalho {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .ano-dados-cabecalho strong {
      color: var(--azul-900);
      font-size: 18px;
    }

    .controle-check,
    .controle-radio {
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 44px;
      cursor: pointer;
    }

    .controle-check {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 600;
    }

    .controle-check input,
    .controle-radio input {
      flex: 0 0 auto;
      width: 21px;
      height: 21px;
      accent-color: var(--azul-700);
    }

    .valores {
      display: grid;
      gap: 10px;
      margin-top: 11px;
    }

    .campo-grupo small {
      display: block;
      margin-bottom: 5px;
      color: var(--texto-suave);
      font-size: 12px;
      font-weight: 700;
    }

    fieldset {
      margin: 22px 0 0;
      padding: 0;
      border: 0;
    }

    legend {
      margin-bottom: 8px;
      color: var(--azul-900);
      font-weight: 800;
    }

    .radios {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 24px;
    }

    .aceite {
      margin-top: 20px;
      padding-top: 14px;
      border-top: 1px solid var(--linha);
    }

    .termos-texto {
      margin: 8px 0 0;
      padding: 12px;
      border-radius: 10px;
      background: var(--azul-50);
      color: var(--texto-suave);
      font-size: 12px;
      line-height: 1.6;
    }

    .mensagem-formulario {
      min-height: 22px;
      margin: 7px 0 0;
      color: #982f19;
      font-size: 13px;
      font-weight: 700;
    }

    .resumo-pedido {
      padding: 18px;
    }

    .resumo-pedido-topo {
      display: grid;
      gap: 16px;
    }

    .resumo-pedido h2 {
      font-size: 1.16rem;
    }

    .resumo-dados {
      margin: 6px 0 0;
      color: var(--texto-suave);
      font-size: 13px;
      line-height: 1.6;
    }

    .total {
      color: var(--texto-suave);
      font-size: 12px;
    }

    .total strong {
      display: block;
      color: var(--azul-900);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: 2rem;
      letter-spacing: -0.01em;
    }

    .confiancas-pedido {
      display: flex;
      flex-wrap: wrap;
      gap: 7px 14px;
      margin-top: 15px;
      padding-top: 14px;
      border-top: 1px dashed var(--linha-forte);
      color: var(--texto-suave);
      font-size: 12px;
      font-weight: 600;
    }

    .confiancas-pedido span::before {
      margin-right: 5px;
      color: var(--verde-700);
      font-weight: 900;
      content: "✓";
    }

    .subtitulo-fluxo {
      margin: 27px 0 12px;
      font-size: 1.4rem;
    }

    .opcao-pagamento {
      display: grid;
      grid-template-columns: 40px 1fr auto;
      gap: 12px;
      align-items: center;
      width: 100%;
      min-height: 76px;
      margin-bottom: 10px;
      padding: 13px;
      border: 1.5px solid var(--linha-forte);
      border-radius: 15px;
      background: var(--branco);
      color: var(--texto);
      text-align: left;
      cursor: pointer;
      transition:
        border-color 160ms ease,
        transform 160ms ease,
        box-shadow 160ms ease;
    }

    .opcao-pagamento:hover {
      border-color: var(--azul-700);
      transform: translateY(-1px);
      box-shadow: var(--sombra-suave);
    }

    .opcao-pagamento.recomendada {
      border: 2px solid var(--verde-700);
      background: var(--verde-50);
    }

    .opcao-pagamento img {
      width: 36px;
      height: 36px;
      object-fit: contain;
    }

    .opcao-pagamento-nome {
      color: var(--azul-900);
      font-weight: 800;
    }

    .opcao-pagamento-info {
      margin-top: 2px;
      color: var(--texto-suave);
      font-size: 12px;
      line-height: 1.4;
    }

    .opcao-pagamento-preco {
      color: var(--azul-900);
      font-size: 13px;
      font-weight: 800;
      text-align: right;
      white-space: nowrap;
    }

    .opcao-pagamento-preco small {
      display: block;
      margin-top: 2px;
      color: var(--verde-700);
      font-size: 10px;
    }

    .pagamento-seguro {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      margin: 13px 0 0;
      color: var(--texto-suave);
      font-size: 11px;
      text-align: center;
    }

    .pagamento-seguro img {
      width: 14px;
      height: 14px;
    }

    .ajuda-humana {
      margin-top: 26px;
      padding: 21px;
      border: 1px solid #b9dfcb;
      border-radius: var(--raio);
      background: var(--verde-50);
    }

    .ajuda-humana h2 {
      font-size: 1.45rem;
    }

    .ajuda-humana p {
      margin: 8px 0 16px;
      color: #355c48;
      font-size: 14px;
      line-height: 1.6;
    }

    .depois {
      display: grid;
      gap: 9px;
    }

    .depois-item {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 11px;
      padding: 14px;
      border: 1px solid var(--linha);
      border-radius: 13px;
      background: var(--branco);
    }

    .depois-numero {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border-radius: 9px;
      background: var(--azul-100);
      color: var(--azul-700);
      font-size: 13px;
      font-weight: 900;
    }

    .depois-item strong {
      display: block;
      color: var(--azul-900);
    }

    .depois-item p {
      margin: 3px 0 0;
      color: var(--texto-suave);
      font-size: 13px;
      line-height: 1.5;
    }

    .pix-card {
      padding: 20px;
      text-align: center;
    }

    .pix-total-label {
      color: var(--texto-suave);
      font-size: 13px;
    }

    .pix-total {
      color: var(--azul-900);
      font-family: "Cabinet Grotesk", Inter, sans-serif;
      font-size: 2.4rem;
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    .qr {
      width: min(210px, 72vw);
      aspect-ratio: 1;
      margin: 16px auto;
      border: 10px solid var(--branco);
      border-radius: 9px;
      outline: 1px solid var(--linha);
      background:
        repeating-linear-gradient(
          90deg,
          #092c4c 0 6px,
          #ffffff 6px 12px
        ),
        repeating-linear-gradient(
          0deg,
          #092c4c 0 6px,
          #ffffff 6px 12px
        );
      background-blend-mode: multiply;
    }

    .recebedor {
      margin: 0 0 10px;
      color: var(--texto-suave);
      font-size: 13px;
    }

    .copia-cola {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
    }

    .copia-cola .campo {
      min-width: 0;
      font-size: 12px;
    }

    .copia-cola .btn {
      min-height: 52px;
      padding-inline: 15px;
    }

    .aguardando {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      margin: 17px 0 0;
      color: var(--texto-suave);
      font-size: 13px;
    }

    .ponto {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--verde-600);
      animation: pulsar 1.2s infinite;
    }

    .confirmacao-icone {
      display: grid;
      width: 76px;
      height: 76px;
      margin: 0 auto 17px;
      place-items: center;
      border-radius: 50%;
      background: var(--verde-100);
      color: var(--verde-700);
      font-size: 40px;
      font-weight: 900;
    }

    .texto-centralizado {
      text-align: center;
    }

    .linha-tempo {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .linha-tempo li {
      position: relative;
      min-height: 54px;
      padding: 0 0 19px 34px;
      color: var(--texto-suave);
      font-size: 14px;
      line-height: 1.5;
    }

    .linha-tempo li:last-child {
      min-height: 0;
      padding-bottom: 0;
    }

    .linha-tempo li::before {
      position: absolute;
      top: 3px;
      left: 4px;
      z-index: 2;
      width: 14px;
      height: 14px;
      border: 3px solid var(--branco);
      border-radius: 50%;
      background: var(--linha-forte);
      box-shadow: 0 0 0 1px var(--linha-forte);
      content: "";
    }

    .linha-tempo li::after {
      position: absolute;
      top: 19px;
      bottom: 0;
      left: 10px;
      width: 2px;
      background: var(--linha);
      content: "";
    }

    .linha-tempo li:last-child::after {
      display: none;
    }

    .linha-tempo li.feito::before {
      background: var(--verde-600);
      box-shadow: 0 0 0 1px var(--verde-600);
    }

    .linha-tempo strong {
      display: block;
      color: var(--azul-900);
    }

    .rodape {
      padding: 32px 0 98px;
      border-top: 1px solid var(--linha);
      background: var(--azul-900);
      color: #dce8f2;
    }

    .rodape-conteudo {
      display: grid;
      gap: 13px;
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 0 16px;
      font-size: 12px;
      line-height: 1.65;
    }

    .rodape strong {
      color: var(--branco);
    }

    .rodape a {
      color: var(--branco);
    }

    .whatsapp-flutuante {
      position: fixed;
      right: 16px;
      bottom: 16px;
      z-index: 30;
      display: grid;
      width: 58px;
      height: 58px;
      place-items: center;
      border-radius: 50%;
      background: #087a40;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
      transition: transform 160ms ease;
    }

    .whatsapp-flutuante:hover {
      transform: translateY(-2px) scale(1.02);
    }

    .whatsapp-flutuante img {
      width: 31px;
      height: 31px;
      filter: brightness(0) invert(1);
    }

    .ajuda-tempo {
      position: fixed;
      right: 16px;
      bottom: 86px;
      z-index: 29;
      width: min(360px, calc(100vw - 32px));
      padding: 15px;
      border: 1px solid #b9dfcb;
      border-radius: 15px;
      background: var(--branco);
      box-shadow: 0 16px 42px rgba(9, 44, 76, 0.2);
    }

    .ajuda-tempo strong {
      display: block;
      padding-right: 32px;
      color: var(--azul-900);
    }

    .ajuda-tempo p {
      margin: 5px 0 12px;
      color: var(--texto-suave);
      font-size: 13px;
    }

    .ajuda-fechar {
      position: absolute;
      top: 7px;
      right: 7px;
      display: grid;
      width: 44px;
      height: 44px;
      place-items: center;
      border: 0;
      background: transparent;
      color: var(--texto-suave);
      font-size: 23px;
      cursor: pointer;
    }

    .toast {
      position: fixed;
      bottom: 90px;
      left: 50%;
      z-index: 40;
      width: max-content;
      max-width: calc(100vw - 32px);
      padding: 11px 15px;
      border-radius: 11px;
      background: var(--azul-900);
      color: var(--branco);
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      box-shadow: var(--sombra);
      transform: translate(-50%, 20px);
      opacity: 0;
      pointer-events: none;
      transition:
        opacity 180ms ease,
        transform 180ms ease;
    }

    .toast.ativo {
      transform: translate(-50%, 0);
      opacity: 1;
    }

    @keyframes entrada {
      from {
        opacity: 0;
        transform: translateY(7px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pulsar {
      50% {
        opacity: 0.25;
      }
    }

    @media (min-width: 540px) {
      .prova-rapida,
      .valores,
      .depoimentos,
      .garantias,
      .depois {
        grid-template-columns: repeat(2, 1fr);
      }

      .resumo-pedido-topo {
        grid-template-columns: 1fr auto;
        align-items: start;
      }

      .total {
        text-align: right;
      }
    }

    @media (min-width: 780px) {
      .topo {
        padding-inline: 24px;
      }

      .container {
        padding-inline: 24px;
      }

      .rodape-conteudo {
        padding-inline: 24px;
      }

      .hero {
        padding: 64px 0 72px;
      }

      .hero-grade {
        grid-template-columns: minmax(0, 1.17fr) minmax(360px, 0.83fr);
        gap: 54px;
        align-items: center;
      }

      .prova-rapida {
        grid-template-columns: repeat(3, 1fr);
      }

      .passos-home,
      .garantias {
        grid-template-columns: repeat(3, 1fr);
      }

      .servico-grade,
      .consequencias {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 56px;
      }

      .prova-destaque {
        grid-template-columns: auto 1fr;
        gap: 22px;
      }

      .depoimentos {
        grid-template-columns: repeat(3, 1fr);
      }

      .depois {
        grid-template-columns: repeat(3, 1fr);
      }

      .rodape {
        padding-bottom: 40px;
      }
    }

    @media (max-width: 420px) {
      .topo-confianca span {
        display: none;
      }

      .escolha-cabecalho {
        display: block;
      }

      .escolha-preco {
        margin-top: 7px;
      }

      .opcao-pagamento {
        grid-template-columns: 34px 1fr;
      }

      .opcao-pagamento img {
        width: 31px;
        height: 31px;
      }

      .opcao-pagamento-preco {
        grid-column: 2;
        text-align: left;
      }

      .copia-cola {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
  
    /* ajustes 05/10: formulario acima da dobra no celular, foco do titulo, opcoes de pagamento */
    .hero-provas { grid-column: 1 / -1; }
    .hero-provas .prova-rapida { margin-top: 4px; }
    .titulo-fluxo:focus, h1:focus { outline: none; }
    .opcao-pagamento-info { display: block; }

    /* 05/10: no celular o botao flutuante cobria precos (oferta, Pix, boleto).
       Abaixo de 700px ele some e cada etapa tem a ajuda no proprio fluxo. */
    /* ajuste: botão flutuante do WhatsApp visível também no celular */

    /* tela de contato (05/10) */
    .cad-card { display: grid; gap: 6px; padding: 20px 18px; }
    .cad-linha-fixa { display: flex; justify-content: space-between; align-items: center; background: #f4f7fb;
                      border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
    .cad-rotulo { display: block; font-size: 13px; color: #5a6672; font-weight: 600; margin-top: 2px; }
    .cad-alterar { white-space: nowrap; font: inherit; font-weight: 700; color: #0b5cc4; background: none; border: 0; cursor: pointer; padding: 8px; }
    .cad-card .campo-label { margin-top: 8px; }
    .cad-ajuda { margin: 2px 0 0; font-size: 13px; color: #5a6672; }
    .cad-canais { border: 0; padding: 0; margin: 10px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
    .cad-canais legend { font-weight: 700; font-size: 15px; color: #12324a; margin-bottom: 8px; padding: 0; }
    .chip-opcao { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
                  border: 1.5px solid #cfd8e3; border-radius: 999px; font-weight: 600; cursor: pointer; background: #fff; }
    .chip-opcao input { width: 18px; height: 18px; accent-color: #0b5cc4; }
    .chip-opcao:has(input:checked) { border-color: #0b5cc4; background: #eef4fd; color: #0b4fa8; }
    .cad-privacidade { text-align: center; font-size: 13px; color: #5a6672; margin: 10px 0 0; }