:root {
    --cor-padrao: #a600ff;
    --cor-padrao-hover: #8900d2;
    --cor-h1: #1C244B;
    
    --bd:#e5e7eb; --bd2:#cbd5e1; --txt:#111827; --muted:#6b7280; --focus:#3b82f6; --checked:#111827; --bg:#ffffff;
}

:root{

--accent:var(--cor-padrao);--accent-2:var(--cor-padrao-hover); --green: #47d201ff; --green-dark: #009708ff; --red: #b84f29;
}


.bg-gray-900 {
    background-color: var(--cor-padrao);
}

.bg-gray-900:hover {
    background-color: var(--cor-padrao-hover);
}

.bg-gray-400 {
    background-color: var(--cor-padrao-hover);
}

.bg-gray-400:hover {
    background-color: var(--cor-padrao-hover);
}

.bg-gray-300 {
    background-color: var(--cor-h1);
    color: white;
}

.bg-gray-100 {
    background-color: #fff;
}

/* Font and Basic Settings */
html {
    height: 100%;
}




.style-info{display: flex;font-size: 13px;font-weight: 300;background-color: #6ff45714;margin: 0;padding: 3px 7px;border-radius: 40px;border-width: 1px;border-color: #3cc403;border-style: solid;color: #3cc403;margin-bottom: 20px;align-content: center;align-items: center;/* padding-left: 5px; */}
.style-info-spam {display: flex;background: #c7ffc7;color: #3cc403;padding: 2px 6px;border-radius: 100px;font-size: 13px;font-weight: 700;flex-direction: row;align-content: center;align-items: center;height: 25px;margin-right: 5px;}

.cardd {
  position: relative;
  border-radius: 12px;
  padding: 20px;
  background: transparent;
  
  overflow: visible;
}

/* Borda animada estilo */
.cardd::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #00f0ff00, #00ff8800, #9f00ff, #00f0ff);
  background-size: 400% 400%;
  animation: snake 4s linear infinite;
  z-index: 0;

  /* Mantém apenas a borda visível, interior transparente */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Conteúdo acima da borda */
.card-content {
  position: relative;
  z-index: 1;
}

/* Movimento da cobra */
@keyframes snake {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Glow extra quando o mouse passa */
/*.cardd:hover {*/
/*  box-shadow: 0 0 20px #ff9afe;*/
/*  animation: glow 3s infinite alternate;*/
/*}*/

/*@keyframes glow {*/
/*  from { box-shadow: 0 0 10px #ff9afe; }*/
/*  to { box-shadow: 0 0 25px #ff9afe; }*/
/*}*/







@media (max-width: 765px){
    .clear-btn {
        display:none;
    }
    
    .cardd {
        width: 100%;
        padding: 10px;
    }
    
    .select-btn {
        font-size: 10px;
    }
    
    .gen-btn {
        font-size: 10px;
    }
    
    .btn{
        font-size: 10px;
    }
    
    .feature-card{
        flex: 1 200px;
    }
    
    .paste-box textarea {
        height: 36px;
    }
}





.typing {
    background: linear-gradient(45deg, var(--cor-padrao), #f93ef8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}





.div-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
    background: #a600ff29;
    border: 1px solid var(--cor-padrao);
    color: hsl(var(--primary));
    transition: all .3s ease-out;
}

.div-icon-box svg {
    width:40px;
    height: auto;
    color: var(--cor-padrao);
}

body{font-family:Arial,sans-serif;background:#f7f9fc;margin:20px;padding:0;display:flex;justify-content:center}
.wrap{max-width: 96%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;}
h1{font-size:20px;margin:0 0 14px;color:var(--cor-h1)}
/*.card{background:#fff;padding:18px;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);margin-bottom:14px}*/
.muted{color:#666;font-size:0.95rem}
.labelstrong{margin-bottom:4px;}
.file-box, .paste-box{display:flex;align-items:center;gap:10px;padding:6px;border:1px solid #ddd;border-radius:8px;background:#fff;margin-bottom: 40px;}
.file-box .select-btn,.paste-box .btn{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600;}
.file-box .select-btn:hover,.paste-box .btn:hover{background:var(--accent-2);}
.file-box .filename{flex:1;min-width:0;max-width: 205px;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-box .actions{display:flex;gap:8px;align-items:center}
.file-box .gen-btn{background:var(--accent-2);color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600;}
.file-box .gen-btn:hover{background: var(--cor-padrao-hover);}
.file-box .gen-btn[disabled]{opacity:0.55;cursor:not-allowed}
.file-box .clear-btn{background:transparent;border:1px solid #ddd;padding:6px;border-radius:6px;cursor:pointer;color:#333;font-weight:600;}
.paste-box textarea{flex:1;padding:8px;border-radius:6px;font-family:monospace;font-size:0.92rem;resize:vertical;border:1px solid transparent;height: 42px;}
.result-box{display:none;background:#fff;padding:12px;border-radius:8px;margin-top:12px;border: 1px solid #ddd;}
.result-box button{padding:8px 12px;border:none;border-radius:6px;cursor:pointer;font-size: 15px;}
.result-box button:hover{background:var(--cor-padrao-hover);}

.btn-exibir-danfe{
    background:var(--green);color:#fff;width: 48%;
}
.btn-baixar-danfe{
    background:var(--green-dark);color:#fff;width: 48%;
}
.btn-baixar-xml{
    background:var(--red);color:#fff;width:100%;
}

.btn-exibir-danfe:hover{
    background:var(--cor-padrao);color:#fff; transition: 0.4s;
}
.btn-baixar-danfe:hover{
    background:var(--cor-padrao);color:#fff; transition: 0.4s;
}
.btn-baixar-xml:hover{
    background:var(--cor-padrao);color:#fff; transition: 0.4s;
}




.input-box {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  margin-bottom: 40px;
}

.input-box input {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
  font-size: 0.95rem;
  font-family: Arial, sans-serif;
}

.input-box .gen-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 600;
  border-radius: 7px; 
}

.input-box .gen-btn:hover {
  background: var(--accent-2);
}

.divbtnalinhado{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}
.divbtndanfe {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
    gap: 10px;
}











body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--cor-h1);
    line-height: 1.6;
    background: rgb(236, 234, 253);
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*background: -webkit-gradient(linear, left top, left bottom, from(rgba(236, 234, 253, 1)), to(rgba(255, 255, 255, 1))) fixed;*/
    background: white;
}

a {
    text-decoration: none;
    color: var(--cor-h1);
}

.content {
    width: 100%;
    /*max-width: 1200px;*/
    margin: 0 auto;
    padding: 0px 0px 20px 0px;
}

/* Header */
.header {
    background-color: white;
    padding: 0px 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* position: relative; */
    border-bottom: 2px solid var(--cor-padrao);
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 1px 4px 30px rgb(110 0 255 / 20%);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: var(--cor-h1);
    /*font-weight: bold;*/
    font-size: .875rem;
    
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 2px; 
    background-position: 0 100%;
    transition: background-size 0.3s;
    /*padding-bottom: 5px;*/
}

.nav-links a:hover {
    color: var(--cor-padrao);
    border-bottom: 2px solid var(--cor-padrao);
    transition: border-color 0.3s;
    
    background-size: 100% 2px;
}


.logo {
	cursor: pointer;
	min-width: 150px;
	max-width: 200px;
	max-height: 90px;
	object-fit: contain;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo img {
	max-width: 140px;
	max-height: 140px;
	object-fit: contain;
}

.logo a {
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-criar-conta {
    background-color: var(--cor-padrao);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 10px;
}

.btn-criar-conta:hover {
    background-color: var(--cor-padrao-hover);
    transition: 0.3s;
}

/* Estilos para o ícone de menu */
.menu-toggle {
    display: none;
}

.menu-icon {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 20px;
        right: 44px;
        background-color: #fff;
        width: 150px;
        padding: 15px 0px 15px 9px;
        border: 1px solid var(--cor-padrao);
        border-radius: 10px;
        flex-direction: column;
        box-shadow: 0 0 5px var(--cor-padrao);
    }

    .logo img {
        max-width: 150px;
        max-height: 200px;
    }


    .menu-icon {
        display: block;
    }

    .menu-toggle:checked~.nav-links {
        display: flex;
    }
}

/* ------------- content ------------*/

.consulta {
    display: flex;
    /* width: 90%; */
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 0px 100px 0px;
}

.consulta img {
    width: 90px;
    height: 24px;
    margin-right: 10px;
    color: var(--cor-padrao);
}

.consulta h1 {
    color: var(--cor-h1);
    font-weight: 800;
    font-size: 44px;
    margin: 0px 0px 28px;
    line-height: 48px;
    text-align: center;
    
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";};
        /*font-weight: 700;*/
    line-height: 1;
    letter-spacing: -.025em;
        /*font-weight: 800;*/
    /*    font-size: 25px;*/
    /*    margin: 0px 0px 28px;*/
    /*    line-height: 28px;*/
}

.consulta p {
    margin: 0px 0px 32px;
}

.consulta .info {
    margin: 20px 0px 0px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.consulta strong {
    font-weight: 700;
    margin-right: 5px;
}

.content-consulta-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-consulta-img img {
    width: 100%;
    height: auto;
}

.btn-consultar {
    background-color: var(--cor-padrao);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 20px 10px;
    font-size: 18px;
    width: 100%;
    cursor: pointer;
}

.btn-consultar:hover {
    background-color: var(--cor-padrao-hover);
    transition: 0, 3s;
}

.consulta-form {
    margin: 20px 0;
}

.consulta-form input {
    padding: 20px 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    font-size: 20px;
}

.consulta-form input {
    outline: none;
}

.consulta-form input:focus {
    border: 1px solid var(--cor-padrao);
    box-shadow: 0 0 5px var(--cor-padrao);

}

@media (max-width: 768px) {
    .consulta {
        display: flex;
        flex-direction: column;
        padding: 0px 0px 20px 0px;
        width:100%;
    }

    .consulta h1 {
    /*    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";};*/
    /*    font-weight: 700;*/
    /*line-height: 1;*/
    /*letter-spacing: -.025em;*/
        /*font-weight: 800;*/
        font-size: 25px;
        margin: 0px 0px 28px;
        line-height: 28px;
    }

    .consulta .info {
        margin: 20px 0px 0px;
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .btn-consultar {
        padding: 20px 10px;
        cursor: pointer;
        width: 100%;
        font-size: 18px;
    }


    .consulta-form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* ------------- content FEATURES------------*/

.features {
    /*width: 90%;*/
    /*max-width: 1200px;*/
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.content-cards {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    border: 1px solid #a600ff36;
    border-radius: 15px;
    background-color: #fff;
    padding: 20px;
    margin: 10px;
    width: 20%;
    vertical-align: top;
    flex: 1 150px;
    /*box-shadow: 20px 16px 30px rgb(200 200 200 / 35%);*/
}

.feature-card h3 {
    color: var(--cor-h1);
    font-weight: 900;
    margin-top: 10px;
    margin-bottom: 5px;
}

.feature-card p {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;

    color: var(--cor-h1);
    margin-top: 5px;
    margin-bottom: 5px;
}

.feature-card:hover {
    background-color: #a600ff40;
    transition: 0.4s;
}

.pricing h2 {
    color: var(--cor-padrao);
    font-weight: 800;
    font-size: 54px;
    margin: 0px 0px 28px;
    line-height: 60px;
}

.plan-cards h3 {
    color: var(--cor-padrao);
    font-weight: 800;
    font-size: 24px;
    margin: 0px 0px 28px;
    line-height: 60px;
}

.promo {
    font-size: 16px;
    margin-bottom: 5px;
}

.promo span {
    margin-left: 5px;
    margin-right: 5px;
    color: red;
}

.promo-two {
    margin-top: 0px;
    margin-bottom: 10px;
}



/* Pricing Section */
.pricing .plan-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.plan-card {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 340px;
    min-width: 340px;
    text-align: center;
}


.old-price {
    text-decoration: line-through;
    color: #999;
}

.price {
    font-size: 38px;
    font-weight: bold;
    color: var(--cor-padrao);
    margin-bottom: 10px;
    margin-top: 0px;
}


.itens {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

}

.itens svg {
    width: 20px;
    margin-right: 4px;
}

.itens p {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.plan-card button {
    background-color: var(--cor-padrao);
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    padding: 15px 25px;
    margin-top: 20px;
    cursor: pointer;
}

.plan-card button:hover {
    background-color: var(--cor-padrao-hover);
    transition: 0.3s;
}

@media (max-width: 768px) {
    .pricing h2 {
        color: var(--cor-padrao);
        font-weight: 800;
        font-size: 34px;
        margin: 0px 0px 28px;
        line-height: 40px;
    }

}

.hero {
    background-color: #F5F3FF;
    padding: 50px 0;
    text-align: center;
    position: relative;
}

.hero h1 {
    font-size: 36px;
    color: #333;
}

.hero p {
    font-size: 16px;
    margin: 20px 0;
}

/* Features Section */
.features-1,
.pricing,
.compare-plans {
    padding: 50px 0;
    text-align: center;
}

/*--------------------- FAQ --------------------- */

/* FAQ Section */
.faq {
    padding-top: 90px;
    padding-bottom: 90px;
    max-width: 1200px;
    margin: 0 auto;
}

.faq h2 {
    margin-bottom: 20px;
    color: var(--cor-padrao);
    font-weight: 800;
    font-size: 54px;
    margin: 0px 0px 28px;
    line-height: 60px;
}

.compare-plans h2 {
    margin-bottom: 20px;
}


.content-faq {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sub {
    margin-bottom: 70px;
}

.faq-perg {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.details {
    display: flex;
    width: 70%;
    border-bottom: 1px solid var(--cor-padrao);
    padding: 10px 0px;
    flex-direction: column;
}

.details summary {
    color: var(--cor-padrao);
    font-size: 18px;
    position: relative;
    cursor: pointer;
    list-style: none;
    outline: none;
    display: flex;
}

.details p {
    display: flex;
    justify-content: flex-start;
    color: var(--cor-h1);
    font-size: 14px;
    font-weight: 700;
}

.details summary::after {
    /*content: '';*/
    content: '+';
    font-size: 15px;
    position: absolute;
    right: 0;
    transform: rotate(0deg);
    transition: transform 0.3s;
}

/* Quando o details está aberto, a seta gira para baixo */
.details[open] summary::after {
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .faq h2 {
        margin-bottom: 20px;
        color: var(--cor-padrao);
        font-weight: 800;
        font-size: 34px;
        margin: 0px 0px 28px;
        line-height: 40px;
    }

    .faq {
        width: 100%;
        /*background-color: #F5F3FF;*/
        padding: 90px 20px 90px 20px;
    }

    .details {
        width: 100%;
    }

    .faq-perg {
        width: 90%;
    }

}

.navbar-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: 0;
}

.nav-links-footer {
    list-style: none;
    display: flex;
    gap: 20px;
}

.nav-links-footer a {
    text-decoration: none;
    color: var(--cor-h1);
    font-weight: bold;
}

.nav-links-footer a:hover {
    color: var(--cor-padrao);
}

.icons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0px;
    gap: 5px;
}

.icon-social {
    width: 24px;
    /*margin-right: 5px;*/
}

/* Footer */
.footer {
    background-color: #fff;
    border-top: 1px solid #ddd;
    color: #fff;
    text-align: center;
    padding: 20px 0;
}

.footer p {
    color: var(--cor-h1);
}

@media (max-width: 768px) {
    .navbar-footer {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
    }

    .nav-links-footer {
        list-style: none;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        padding: 0;
        gap: 5px;
        margin: 20px 0px;
    }

}

/* Estilo para modal ou popup com scroll */
body::-webkit-scrollbar {
    width: 4px;
}

body::-webkit-scrollbar-thumb {
    background-color: var(--cor-padrao);
    border-radius: 6px;
}

body::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

body::-webkit-scrollbar-button {
    display: none;
}















































        
        
        
        
        
        
        
        
    .btnConsultar {
        background-color: var(--cor-padrao);
        color: #fff;
        border: none;
        border-radius: 10px;
        padding: 20px 10px;
        font-size: 18px;
        width: 100%;
        cursor: pointer;
    }
    
    .btnConsultar:hover {
        background-color: var(--cor-padrao-hover);
        transition: 0, 3s;
    }
        
        
        
.consulta-container {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .consulta-container input[type="text"] {
    width: 70%;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 16px;
  }

  .consulta-container button {
    padding: 10px 20px;
    border: none;
    background-color: #473F97;
    color: white;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
  }

  .consulta-container button:hover {
    background-color: #6C65AC;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
  }

  th, td {
    padding: 12px 15px;
    text-align: left;
  }

  th {
    background-color: #473F97;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
  }

  td {
    background-color: #f4f4f4;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
  }

  tr:nth-child(even) td {
    background-color: #e9e9ff;
  }

  @media (max-width: 600px) {
    .consulta-container input[type="text"] {
      width: 100%;
      margin-bottom: 10px;
    }

    .consulta-container button {
      width: 100%;
    }
  }