/* Paleta de cores */
:root {
  --azul-escuro: #003B73;
  --azul-claro: #0054A6;
  --verde: #2BB673;
  --cinza-claro: #f4f4f4;
  --branco: #fff;
  --texto: #333;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background: var(--branco);
  color: var(--texto);
  scroll-behavior: smooth;
}

/* Cabeçalho fixo */
.cabecalho {
  background: var(--azul-escuro);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  padding: 10px 0;
}

.cabecalho ul {
  list-style: none;
  display: flex;
  padding: 15px 60px;
  justify-content: right;
  gap: 30px;
}

.cabecalho a {
  color: var(--branco);
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.cabecalho a:hover {
  color: var(--verde);
}

/* Section Capa */
.capa-inicial {
  background: var(--cinza-claro);
  margin-top: 60px;
}
.capa-inicial img {
  width: 100%;
  height: 500px;
}
.capa-secundaria {
  background: var(--cinza-claro);
}

.capa-secundaria img {
  width: 100%;
  height: 500px;
}

/* Sobre a nossa biblioteca */
.sobre {
  background: var(--azul-escuro);
  color: var(--branco);
  padding: 20px 60px;
  text-align: left;
}

.sobre h2 {
  text-transform: uppercase;
  margin-bottom: 30px;
}

.texto-imagem {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.texto-imagem p {
  width: 25%;
  min-width: 250px;
}

.texto-imagem img {
  width: 150px;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5rem;
  margin-top: 2rem;
  padding: 10px 40px;
}

.galeria img {
  width: 200px;
  height: 150px;
}

/* Nossos livros */
.livros {
  background: var(--azul-claro);
  color: var(--branco);
  padding: 60px 20px;
  text-align: left;
}

.livros h2 {
  text-transform: uppercase;
  padding: 10px 50px;
}

.livros-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem;
  margin-top: 1rem;
  padding: 10px 50px;
}

.livro {
  background: var(--cinza-claro);
  color: var(--texto);
  border-radius: none;
  padding: 1rem;
  text-align: center;
}

.livro img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}

.livro button {
  background: var(--verde);
  border: none;
  color: var(--branco);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.livro button:hover {
  background: #24a165;
}

/* Unidades */
.unidades {
  background: var(--azul-escuro);
  color: var(--branco);
  padding: 60px 20px;
}

.unidades h2 {
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 40px;
  padding: 0px 60px;
}

.unidade {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  padding: 0px 60px;
}

.unidade img {
  width: 250px;
  border-radius: none;
}

.unidade .texto {
  max-width: 600px;
}

/* Contatos */
.contatos {
background-color: #f4f4f4;
padding: 60px 20px;
display: flex;
justify-content: center;
}


.contato-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1100px;
width: 100%;
gap: 40px;
}


.contato-info {
flex: 1 1 50%;
color: #003B73;
}


.contato-info h2 {
font-size: 28px;
margin-bottom: 10px;
color: #0054A6;
}


.contato-info h3 {
font-size: 22px;
margin-top: 15px;
color: #2BB673;
}


.contato-info p,
.contato-info a,
.contato-info small {
font-size: 16px;
line-height: 1.6;
color: #333;
}


.contato-info a {
text-decoration: none;
color: #0054A6;
font-weight: 600;
}


.contato-info a:hover {
color: #2BB673;
}


.contato-img {
flex: 1 1 40%;
text-align: center;
}


.contato-img img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Rodapé */
.rodape {
  background: var(--azul-escuro);
  color: var(--branco);
  text-align: center;
  padding: 20px 0;
  margin-top: 20px;
}

/* ==================================== */
/* MEDIA QUERIES PARA RESPONSIVIDADE */
/* ==================================== */

/* Ajustes para Tablets (Max-width: 1024px) e Smartphones (Max-width: 768px/480px) */

/* Dispositivos Médios e Pequenos (Geral) */
@media screen and (max-width: 1024px) {
    /* Cabeçalho */
    .cabecalho ul {
        padding: 15px 20px;
        justify-content: center; /* Centraliza itens do menu em telas menores */
        gap: 20px;
    }

    /* Capa */
    .capa-inicial img,
    .capa-secundaria img {
        height: 350px; /* Reduz a altura das capas */
    }

    /* Sobre a Nossa Biblioteca */
    .sobre {
        padding: 40px 20px; /* Mais padding vertical e menos lateral */
    }

    .texto-imagem {
        flex-direction: column; /* Empilha texto e imagem */
        text-align: center;
    }

    .texto-imagem p {
        width: 80%; /* Aumenta a largura do parágrafo */
        min-width: 100%;
        margin: 0 auto;
    }

    .galeria {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas para tablets */
        gap: 3rem;
        padding: 10px 10px;
        justify-items: center;
    }

    .galeria img {
        width: 100%;
        max-width: 250px;
        height: auto;
    }

    /* Nossos Livros */
    .livros h2 {
        padding: 10px 20px;
    }

    .livros-container {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas para tablets */
        gap: 3rem;
        padding: 10px 20px;
    }

    /* Unidades */
    .unidades h2 {
        padding: 0px 20px;
    }

    .unidade {
        padding: 0px 20px;
        justify-content: center; /* Centraliza conteúdo da unidade */
        text-align: center;
    }

    .unidade img {
        width: 100%;
        max-width: 400px; /* Limita o tamanho da imagem da unidade */
    }

    /* Contatos */
    .contato-container {
        flex-direction: column; /* Empilha as seções de contato */
        padding: 0 20px;
    }

    .contato-info,
    .contato-img {
        flex: 1 1 100%; /* Ocupa 100% da largura */
        text-align: center;
    }

    .contato-img img {
        max-width: 80%; /* Garante que a imagem se ajuste bem */
    }
}

/* Ajustes para Smartphones (Max-width: 768px) */
@media screen and (max-width: 768px) {
    /* Cabeçalho */
    .cabecalho {
        padding: 5px 0;
    }

    .cabecalho ul {
        flex-wrap: wrap; /* Permite quebrar linha se o menu for muito grande */
        justify-content: center;
        padding: 10px 10px;
        gap: 15px;
    }

    /* Capa */
    .capa-inicial img,
    .capa-secundaria img {
        height: 250px; /* Reduz mais a altura das capas */
        object-fit: cover;
    }

    /* Sobre a Nossa Biblioteca */
    .sobre {
        padding: 30px 15px;
        text-align: center;
    }

    .galeria {
        grid-template-columns: 1fr; /* Apenas 1 coluna para smartphones */
        gap: 2rem;
        padding: 10px 15px;
    }

    .galeria img {
        max-width: 80%;
    }

    /* Nossos Livros */
    .livros {
        padding: 40px 15px;
    }

    .livros h2 {
        padding: 0;
        text-align: center;
    }

    .livros-container {
        grid-template-columns: 1fr; /* Apenas 1 coluna para smartphones */
        gap: 2rem;
        padding: 10px 0;
    }

    /* Unidades */
    .unidades {
        padding: 40px 15px;
    }

    .unidades h2 {
        padding: 0;
        text-align: center;
    }

    .unidade {
        padding: 0;
        flex-direction: column; /* Garante que a imagem e o texto se empilhem */
        text-align: center;
    }
    
    .unidade img {
        max-width: 90%;
    }

    /* Contatos */
    .contatos {
        padding: 40px 15px;
    }

    .contato-info {
        text-align: left; /* Alinha o texto das informações para melhor leitura */
    }

    .contato-info h2,
    .contato-info h3 {
        text-align: center;
    }

    .contato-img img {
        max-width: 90%;
    }
}

/* Ajuste fino para dispositivos pequenos (ex: largura de 480px) */
@media screen and (max-width: 480px) {
    .cabecalho ul {
        gap: 10px;
    }

    .texto-imagem img {
        width: 100px;
    }
    
    .galeria img {
        max-width: 100%;
    }

    .unidade img {
        max-width: 100%;
    }
}