/* Importa a fonte Roboto Mono do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo&display=swap');

:root {
  --modelo-bg:#f0ffff; /* White background */
  --modelo-surface:#ffffff;
  --modelo-primary:#0f62fe;
  --modelo-primary-600:#0b53cc;
  --modelo-accent:#0b8a6f;
  --modelo-muted:#6b7280;
  --modelo-heading:#0b1220;
  --modelo-radius:12px;
  --modelo-gap:20px;
  --modelo-max-width:90%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}


.modelo_espaco {
margin: 100px;
}

.modelo_banner {
margin: 20px;
border-radius: 10px;

}
.modelo_banner img {
border-radius: 10px;
width:100%;
}

@media (max-width: 768px) {
  .modelo_banner img {
    width: 100%;
    aspect-ratio: 1 / 1; /* força quadrado */
    height: auto;
    object-fit: cover; /* corta o excesso mantendo proporção */
  }
}

.modelo_page {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:36px 20px;
  /*background-color: #f0ffff;*/
}

.modelo_shell {
  width:100%;
  max-width:var(--modelo-max-width);
  margin:0 auto;
  overflow-x:hidden; /* evita overflow lateral */
}

.modelo_header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--modelo-gap);
  margin-bottom:26px;
}

.modelo_brand {
  display:flex;
  align-items:center;
  gap:12px;
}

.modelo_logo {
  width:48px;
  height:48px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--modelo-primary),var(--modelo-accent));
  display:grid;
  place-items:center;
  color:white;
  font-weight:700;
  font-size:18px;
}

.modelo_title {
  font-weight:700;
  font-size:18px;
}

.modelo_tag {
  font-size:13px;
  color:var(--modelo-muted);
}

.modelo_nav {
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

.modelo_btn,
.modelo_cta {
  border:0;
  padding:10px 14px;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.modelo_btn {
  background:transparent;
  color:var(--modelo-heading);
}

.modelo_cta {
  background:var(--modelo-primary);
  color:white;
  background:#0b3d91;
}

.modelo_card {
  /*background:var(--modelo_surface);*/
  background: #f4f4f4;
  padding:28px;
  border-radius:var(--modelo-radius);
  margin-bottom:26px;
  border:1px solid rgba(10,12,20,0.06);
}

.modelo_card.largura{
  background: white;
  border:none;  
}

.modelo_card h1 {
  margin:0 0 12px;
  font-size:28px;
}

.modelo_card h3 {
  margin:0 0 10px;
  font-size:20px;
}

.modelo_card p {
  margin:0 0 12px;
  color:var(--modelo-muted);
}

.modelo_steps {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;

}

.modelo_step {
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border-radius:10px;
  border:1px solid rgba(10,12,20,0.06);
  background:#d4d4d4;
}

.modelo_step .modelo_step-num {
  min-width:44px;
  height:44px;
  border-radius:10px;
  background:linear-gradient(180deg,#f6f9ff,#eef6ff);
  display:grid;
  place-items:center;
  font-weight:700;
}

.modelo_step h4 {
  margin:0;
  font-size:15px;
}

.modelo_step p {
  margin:6px 0 0;
  color:var(--modelo-muted);
  font-size:14px;
}

.modelo_features {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}

.modelo_feature {
  padding:12px;
  border-radius:10px;
  background:#d4d4d4;
  border:1px solid rgba(10,12,20,0.06);
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.modelo_feature .modelo_icon {
  width:38px;
  height:38px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:rgba(11,134,111,0.08);
  font-weight:700;
}

.modelo_feature h4 {
  margin:0;
  font-size:15px;
}

.modelo_feature p {
  margin:2px 0 0;
  font-size:14px;
  color:var(--modelo-muted);
}

.modelo_skills {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
  list-style: none;
}

.modelo_skill {
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(10,12,20,0.06);
  font-size:13px;
}

.modelo_links {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px;
}

.modelo_link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid rgba(10,12,20,0.06);
}

.modelo_footer-cta {
  margin-top:20px;
  padding:22px;
  border-radius:14px;
  background:#f4f4f4;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  border:1px solid rgba(10,12,20,0.06);
}

.modelo_footer {
  margin-top:26px;
  color:var(--modelo-muted);
  font-size:14px;
  text-align:center;
}

.modelo_table-wrapper {
  width: 90%;
  margin: 0 auto;   /* centra horizontalmente */
  overflow-x: auto;
  -ms-overflow-style: none;  /* IE/Edge antigo */
  scrollbar-width: none;     /* Firefox */
}

.modelo_table-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}


/* Responsividade */
@media (max-width:600px) {
  .modelo_header {
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    width:100%;
  }
  .modelo_nav {
    flex-wrap:wrap;
    width:100%;
  }
  .modelo_btn,
  .modelo_cta {
    width:100%;
    justify-content:center;
  }
}