@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

:root {
    --itbs-color: #3e5055;
    --itbs-color-hover: #87c984;
    --itbs-description: #8B979F;
    --itbs-link: #3e5055;
    --itbs-link-hover: #8b979f;
}

/* VARIABLES */
:root {
  --bg-color: #fff;
  --font-family: 'Open Sans', Arial, sans-serif;
  --primary-color: #3e5055;
  --secondary-color: #225055;
  --light-color: #fafafa;
  --text-color: #333;
  --heading-color: #225055;
  --border-color: #ccc;
  --font-size: 13px;
}

::selection {
    color: #000;
    background: #D3E166;
}

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

a {
    text-decoration: none;
    color: var(--itbs-link);
    font-size: 1em;
}

a:hover {
    color: var(--itbs-link-hover);
    text-decoration: underline;
}

body {
    font-family: "Roboto", segoe ui, sans-serif;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1022%26quot%3b)' fill='none'%3e%3cpath d='M1440 0L1089.66 0L1440 40.19z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1089.66 0L1440 40.19L1440 292.49L644.1400000000001 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M644.1400000000001 0L1440 292.49L1440 296.61L388.30000000000007 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M388.3000000000002 0L1440 296.61L1440 439.28L300.9800000000002 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 560L107.95 560L0 531.63z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 531.63L107.95 560L819.49 560L0 255.81z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 255.81L819.49 560L941.1 560L0 238.07z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 238.07L941.1 560L961 560L0 171.02999999999997z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1022'%3e%3crect width='1440' height='560' opacity='0.4' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    margin: 0;
    padding: 0;
}
html {
    margin: 0;
    padding: 0;
  }

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF; /* defina isso como #fff ou o que for */
    padding: 2rem 2rem; /* Ou 2rem 0 para nenhum padding lateral */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    transition: padding 0.3s;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Branding da esquerda */
  .branding {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .branding .logo {
    height: 40px; /* ajuste conforme necessário */
  }
  
  .manual-titulo {
    color: #3e5055;
    font-weight: bold;
    font-size: 1.7rem;
  }
  
  /* Botão da direita (API) */
  nav.developers {
    display: flex;
    align-items: center;
  }
  
  .dev-button {
    background-color: #00A94D;
    border: none;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .dev-button a {
    text-decoration: none;
    color: white;
  }
  
  .dev-button:hover {
    background-color:  #87c984;
  }
  

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-container {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.grid-4-colunas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
  }
  
  /* 3 colunas para as demais seções */
  .grid-3-colunas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
  }

.developers {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
  }

.dev-title {
    font-size: 2rem;     /* aumenta o tamanho da fonte */
    font-weight: bold;      /* aplica negrito */
    color: #3e5055;            /* opcional: cor mais escura para contraste */
    line-height: 1;            /* evita desalinhamento */
    background-color: #fff;
    color: #3e5055;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin: 5px;
    transition: background-color 0.3s ease;
}


.githubIcon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    color:  #fff
}

.subtitulo {
    margin: 30px 0 20px 0;
    font-size: 1.8em;
    text-align: left;
    color: var(--itbs-color);
}

.external-link {
    width: 16px;
    height: 16px;
    color: #8b979f;
}

.card {
    display: inline-block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* sombra mais suave e moderna */
    margin: 20px;
    padding: 20px;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    max-width: 660px;
  }
  
  /* Hover com leve elevação */
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  
  /* Para cards maiores explicitamente */
  .card.large {
    max-width: 660px;
  }
  


.container-responsable {
    margin-top: auto;
}

.description {
    color: #8b979f;
    font-size: 0.9em;
}

.subTitleCard {
    color: var(--itbs-link);
    font-weight: bold;
    font-size: 0.8em;
    margin-top: 10px;
    padding: 5px 0;
}

.descriptionResp {
    color: var(--itbs-link);
    font-size: 0.9em;
}

.credentials{
    background-color: #fcfce7;
    border: 1px solid #f1f1d1;
    margin-top: 6px;
    padding: 4px;
    border-radius: 4px;
    color: #768026;
    font-size: 0.8em;
    line-height: 1.1rem;
    font-family:"Roboto Mono";
}

@media screen and (max-width: 1280px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 1000px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 660px) {
    .grid-container {
        grid-template-columns: repeat(1, 1fr);    
    }

    main {
        padding: 0 10px;
    }

    header {
        flex-direction: column;
        justify-content: center;
    }

    .dev-button {        
        padding: 10px;
    }

    .card, .cardNoLink {
        width: 100%;
    }

    .subtitulo {
        font-size: 1.6em;
        text-align: center;
    }
}