* { box-sizing: border-box; margin: 0; padding: 0; }

    :root{
        --branco: #FFF;
      --vinho:#7a0f2b;
      --vinho-2:#8f1434;
      --vinho-3:#a61b3d;
      --vinho-borda:#6a0d25;
      --vinho-focus: rgba(122, 15, 43, .22);
      --vinho-focus-strong: rgba(122, 15, 43, .35);
      --vinho-transparente: rgba(122, 15, 43, 0.082);

      --dourado:#ffd233;
      --txt:#24324a;
      --txt-soft:#5f6f87;

      --card-bg:rgba(255,255,255,.82);
      --card-border:rgba(255,255,255,.5);
      --input-bg:rgba(255,255,255,.94);
      --input-border:#dfe5ef;

      --shadow:0 18px 50px rgba(0,0,0,.18);
      --radius:16px;
    }
    .link{
      text-decoration: none;
    }

    html, body{
      width:100%;
      min-height:100dvh;
    }

    body{
      min-height:100dvh;
      font-family:"Segoe UI", Arial, sans-serif;
      color:var(--txt);
      background:#e9eef6;
    }
.page{
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;

  /* fundo (imagem + leve lavagem) */
  background:
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)),
    url("../img/fundo-1.png")
      center center / cover no-repeat;
  background-attachment: fixed; 
  overflow:hidden;


  
}

/* camada de blur + escurecimento (efeito “logon”) */
.page::before{
  content:"";
  position:absolute;
  inset:-24px;                 /* expande pra não “vazar borda” no blur */
  background: inherit;         /* pega o mesmo background da .page */
  filter: blur(18px) saturate(1.1) contrast(1.05);
  transform: scale(1.06);      /* evita borda transparente pós-blur */
  opacity:.95;
  pointer-events:none;
}

/* overlay (vinheta + brilho suave + granulado) */
.page::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.30));
  pointer-events:none;

  /* grão sutil (tipo Windows) */
  mix-blend-mode: overlay;
  opacity:.85;
}

    .card{
      position:fixed;
      z-index:1;
      width:min(390px, 100%);
      background:var(--card-bg);
      border:1px solid var(--card-border);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding:16px 16px 14px;
      /*top: 10px;
      bottom: 10px;*/
      min-height: 100px;
      max-height: calc(100dvh - 20px);
      /*overflow: auto;*/


  
    }


/* Use na div que tem overflow: auto/scroll */
/* Scrollbar discreta, cinza claro e bem arredondada */
.card{
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* iOS */
  scrollbar-width: thin;             /* Firefox */
  scrollbar-color: rgba(180,180,180,.55) transparent; /* thumb / track (Firefox) */
}

/* Chrome / Edge / Safari */
.card::-webkit-scrollbar{
  width: 6px;
  height: 6px;
}

.card::-webkit-scrollbar-track{
  background: transparent;
  border-radius: 999px;
}

.card::-webkit-scrollbar-thumb{
  background: rgba(180,180,180,.55); /* cinza claro */
  border-radius: 999px;             /* cantos arredondados */
  border: 2px solid transparent;    /* deixa “fina” e suave */
  background-clip: padding-box;
}

.card::-webkit-scrollbar-thumb:hover{
  background: rgba(180,180,180,.75);
}

.card::-webkit-scrollbar-corner{
  background: transparent;
}


.icon-google{
  height: 18px;
  width: 18px;
}





 /* ------------------------RESPONSIVO: ocupa a tela toda, sem bordas e sem espaço externo ----------*/
    @media (max-width: 600px){

      html, body{
        width:100%;
        height:100%;
        overflow-x:hidden;
      }

      .page{
        width:100vw;
        min-height:100dvh;
        padding:0;                 /* remove espaço externo */
        align-items:stretch;       /* ocupa total */
        justify-content:stretch;   /* ocupa total */
        background-position:center;
      }

      .card{
        width:100vw;
        min-height:100dvh;
        max-width:none;
        margin:0;
        border-radius:0;           /* sem bordas arredondadas */
        border:none;               /* sem borda */
        box-shadow:none;           /* sem sombra */
        backdrop-filter:none;      /* remove efeito de card */
        -webkit-backdrop-filter:none;
        background:rgba(255,255,255,.92);
        padding:16px 14px 14px;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;

      

      }

   main {
    flex: 1; /* empurra o rodapé pra baixo */
}

    
     
    }

  
    /*-------negociação-------------*/
.n_contrato{
  text-align: center;
  font-size: 13px;
  color: var(--txt-soft);
}
.valor_divida{
  font-size: 16px;
  color: var(--vinho);
  text-align: center;
}
  
.nome_banco{
  font-size: 13px;
  color: var(--txt);
  text-align: center;
}