.img-

.div-div img {
    width: 240px;
    
}

img {
    width: 240px;
}

/* ==========================================
   1. RESET & CONFIGURAÇÕES GERAIS
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f2eb; /* Bege bem claro */
    color: #3e2723; /* Marrom escuro quase preto */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ==========================================
   2. TYPOGRAPHY & CORES (CRITÉRIO 1)
   ========================================== */
h1.titulo-com-linha {
    font-size: 2.5rem;
    color: #4e342e; /* Marrom quente */
    text-align: center;
    padding: 20px 0;
    border-bottom: 3px solid #8d6e63; /* Linha divisória marrom */
    margin-bottom: 30px;
}

h2 {
    font-size: 1.8rem;
    color: #5d4037;
    margin-top: 25px;
    margin-bottom: 10px;
    border-left: 5px solid #a1887f; /* Detalhe na lateral do título */
    padding-left: 10px;
}

h3 {
    font-size: 1.3rem;
    color: #6d4c41;
    margin: 15px 0 10px 0;
}

p {
    font-size: 1rem;
    margin-bottom: 15px;
    text-align: justify;
}

ul {
    list-style-position: inside;
    margin-bottom: 20px;
}

ul li {
    padding: 8px 0;
    border-bottom: 1px dashed #d7ccc8; /* Divisória leve nos itens */
}

/* ==========================================
   3. APLICAÇÃO DE FLEXBOX (CRITÉRIO 2)
   ========================================== */
header {
    background-color: #3e2723; /* Marrom escuro */
    padding: 15px;
}

header nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    list-style: none;
    margin: 0;
}

header nav ul button {
    background-color: #6d4c41;
    border: 1px solid #8d6e63;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

header nav ul button:hover {
    background-color: #5d4037;
}

header nav ul .button {
    color: #f5f2eb;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}

main {
    flex: 1; /* Garante que o footer fique no rodapé */
    display: flex;
    justify-content: center;
    padding: 20px;
}

main section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    max-width: 1000px;
    width: 100%;
}

.div-div {
    display: flex;
    justify-content: center;
    width: 100%;
}

.divdop {
    display: flex;
    flex-direction: column;
    width: 100%;
}

footer {
    background-color: #3e2723;
    height: 60px;
    margin-top: 40px;
}

/* ==========================================
   4. BORDAS, ESPAÇAMENTOS E IMAGEM (CRITÉRIO 1)
   ========================================== */
.img-Rebecca {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 6px solid #d7ccc8; /* Borda estilizada */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Elementos extras do HTML (Lâmpada) */
.lamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 100;
}

.bulb {
    width: 30px;
    height: 30px;
    background-color: #d7ccc8;
    border-radius: 50%;
}

.cord {
    width: 2px;
    height: 50px;
    background-color: #3e2723;
    cursor: pointer;
}

/* ==========================================
   5. RESPONSIVIDADE & MEDIA QUERIES (CRITÉRIO 3 e 4)
   ========================================== */

/* Telas Maiores (Desktops e Tablets Grandes) */
@media (min-width: 768px) {
    main section {
        flex-direction: row; /* Alinha foto e texto lado a lado */
        align-items: flex-start;
    }

    .div-div {
        width: 35%; /* Foto ocupa menos espaço no desktop */
        position: sticky;
        top: 20px;
    }

    .divdop {
        width: 65%; /* Texto ocupa a maior parte */
    }
}

/* Telas Menores que 600px - Reorganização (Critério Obrigatório) */
@media (max-width: 600px) {
    header nav ul {
        flex-direction: column; /* Menu vira vertical em telas pequenas */
        width: 100%;
    }

    header nav ul button {
        width: 100%; /* Botões ocupam largura total */
        text-align: center;
    }

    /* Esconde o sistema de lâmpada em telas muito pequenas para limpar o visual */
    .lamp {
        display: none;
    }

    h1.titulo-com-linha {
        font-size: 1.8rem;
    }
}

/* Suporte específico a partir de 320px (Mobile antigo/pequeno) */
@media (min-width: 320px) {
    body {
        padding: 0;
    }
}

/* ==========================================
   1. RESET, CONFIGURAÇÕES GERAIS E TYPOGRAPHY
   (Mantém a consistência com a página anterior)
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f2eb;
    color: #3e2723;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1.titulo-com-linha {
    font-size: 2.5rem;
    color: #4e342e;
    text-align: center;
    padding: 20px 0;
    border-bottom: 3px solid #8d6e63;
    margin-bottom: 30px;
}

h2 {
    font-size: 1.8rem;
    color: #5d4037;
    margin-top: 25px;
    margin-bottom: 10px;
    border-left: 5px solid #a1887f;
    padding-left: 10px;
}

h3 {
    font-size: 1.3rem;
    color: #6d4c41;
    margin: 15px 0 10px 0;
}

p {
    font-size: 1rem;
    margin-bottom: 15px;
    text-align: justify;
}

ul {
    list-style-position: inside;
    margin-bottom: 20px;
}

ul li {
    padding: 8px 0;
    border-bottom: 1px dashed #d7ccc8;
}

/* ==========================================
   2. HEADER & NAVIGATION (FLEXBOX)
   ========================================== */
header {
    background-color: #3e2723;
    padding: 15px;
}

header nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    list-style: none;
    margin: 0;
}

header nav ul button {
    background-color: #6d4c41;
    border: 1px solid #8d6e63;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

header nav ul button:hover {
    background-color: #5d4037;
}

header nav ul .button {
    color: #f5f2eb;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9rem;
}

/* ==========================================
   3. ESTRUTURA PRINCIPAL (FLEXBOX)
   ========================================== */
main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 20px;
}

main section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1200px; /* Um pouco maior para caber as 3 imagens */
    width: 100%;
}

/* Container das imagens ajustado para Flexbox */
.div-div {
    display: flex;
    flex-direction: column; /* Padrão mobile: uma imagem abaixo da outra */
    align-items: center;
    gap: 20px;
    width: 100%;
}

.divdop {
    display: flex;
    flex-direction: column;
    width: 100%;
}

footer {
    background-color: #3e2723;
    height: 60px;
    margin-top: 40px;
}

/* ==========================================
   4. BORDAS E ESTILIZAÇÃO DAS CAPAS DOS LIVROS
   ========================================== */
.img-quartaAsa, 
.img-chamaDeFerro, 
.img-tempestadeDeOnix {
    width: 100%;
    max-width: 280px; /* Tamanho controlado para não estourar na tela */
    height: auto;
    border-radius: 6px;
    border: 5px solid #d7ccc8; /* Borda marrom claro */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

/* Efeito sutil ao passar o mouse nas capas */
.img-quartaAsa:hover, 
.img-chamaDeFerro:hover, 
.img-tempestadeDeOnix:hover {
    transform: translateY(-5px);
}

/* Elemento extra (Lâmpada) */
.lamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: 20px;
    z-index: 100;
}

.bulb {
    width: 30px;
    height: 30px;
    background-color: #d7ccc8;
    border-radius: 50%;
}

.cord {
    width: 2px;
    height: 50px;
    background-color: #3e2723;
    cursor: pointer;
}

/* ==========================================
   5. RESPONSIVIDADE & MEDIA QUERIES
   ========================================== */

/* Telas de Tablets e Desktops (A partir de 768px) */
@media (min-width: 768px) {
    main section {
        flex-direction: row; /* Alinha o bloco de imagens e o bloco de texto lado a lado */
        align-items: flex-start;
    }

    .div-div {
        width: 40%; /* Ocupa o lado esquerdo */
        position: sticky;
        top: 20px;
    }

    .divdop {
        width: 60%; /* Ocupa o lado direito */
    }
}

/* Ajuste específico para as imagens ficarem lado a lado se houver espaço na barra lateral */
@media (min-width: 1024px) {
    .div-div {
        flex-direction: row; /* No desktop ultra-wide, tenta alinhar os livros lado a lado ou em grade */
        flex-wrap: wrap;
        justify-content: center;
    }
    .img-quartaAsa, .img-chamaDeFerro, .img-tempestadeDeOnix {
        max-width: 180px; /* Diminui o tamanho das capas para caberem juntas */
    }
}

/* Telas Menores que 600px - Reorganização Obrigatória */
@media (max-width: 600px) {
    header nav ul {
        flex-direction: column; /* Menu vertical no celular */
        width: 100%;
    }

    header nav ul button {
        width: 100%;
    }

    .lamp {
        display: none; /* Esconde a lâmpada para limpar espaço */
    }

    h1.titulo-com-linha {
        font-size: 1.8rem;
    }
    
    /* Garante empilhamento perfeito das imagens no mobile */
    .div-div {
        flex-direction: column;
    }
}

/* Suporte inicial a partir de 320px */
@media (min-width: 320px) {
    body {
        padding: 0;
    }
}

<<<<<<< HEAD









/* Container pai que segura as imagens e a tabela */
.div-div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 30px; /* Espaço entre o bloco de imagens e a tabela */
    padding: 20px;
}

/* Ajuste para o bloco de imagens não esmagar a tabela */
.div-div img {
    max-width: 150px; /* Ajuste o tamanho máximo se necessário */
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

/* Container da Tabela para controle de largura */
.livros-container {
    flex: 1; /* Faz a tabela ocupar o espaço restante à direita */
    overflow-x: auto; /* Garante responsividade em telas menores */
}

=======
>>>>>>> a2a4dfdcec8dffb1813efd9b1a119603d581552e
/* Estilização Geral da Tabela */
.tabela-livros {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
<<<<<<< HEAD
    font-size: 14px;
    color: #4a3b32; /* Marrom escuro para o texto */
    background-color: #fdfbf7; /* Fundo creme bem claro */
    border: 1px solid #d7ccc8; /* Borda marrom clara */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
=======
    margin: 20px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fdfbf7; /* Fundo off-white caloroso */
    color: #4a3b32; /* Texto marrom escuro */
    border: 1px solid #d7ccc8;
>>>>>>> a2a4dfdcec8dffb1813efd9b1a119603d581552e
}

/* Cabeçalho da Tabela */
.tabela-livros thead tr {
<<<<<<< HEAD
    background-color: #5d4037; /* Marrom Café */
    color: #ffffff;
=======
    background-color: #5c4033; /* Marrom escuro profundo */
    color: #ffffff; /* Texto branco para contraste */
>>>>>>> a2a4dfdcec8dffb1813efd9b1a119603d581552e
    text-align: left;
    font-weight: bold;
}

.tabela-livros th, 
.tabela-livros td {
    padding: 12px 15px;
<<<<<<< HEAD
    border: 1px solid #d7ccc8;
}

/* Linhas alternadas (Efeito Zebra) */
.tabela-livros tbody tr:nth-of-type(even) {
    background-color: #f5efe6; /* Marrom suave bem claro */
}

/* Destaque ao passar o mouse (Hover) */
.tabela-livros tbody tr:hover {
    background-color: #efe5d9;
    color: #3e2723;
}

/* Coluna de Categorias (Design Diferenciado) */
.tabela-livros td.categoria {
    background-color: #efe5d9;
    color: #5d4037;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
}

/* Configuração Geral da Tabela */
table {
    width: 100%;
    border-collapse: collapse; /* Une as bordas em uma linha única */
    margin: 20px 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve ao redor */
}

/* Estilização do Cabeçalho (thead) */
thead th {
    background-color: #2c3e50; /* Cor escura profissional */
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    padding: 12px 15px;
    border: 1px solid #1a252f; /* Linha delimitadora escura no topo */
}

/* Alinhamento e espaçamento das células (th e td) */
th, td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #e0e0e0; /* Linhas delimitadoras cinzas (horizontais e verticais) */
}

/* Cores alternadas nas linhas do corpo (tbody) para melhorar a leitura */
tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* Efeito de destaque ao passar o mouse por cima da linha */
tbody tr:hover {
    background-color: #f1f4f6;
}

/* Estilização das células agrupadas (Séries com rowspan) */
td[rowspan] {
    background-color: #f4f6f8;
    font-weight: bold;
    color: #2c3e50;
    vertical-align: middle; /* Centraliza o nome da série verticalmente */
    text-align: center;
}

/* Estilização do Rodapé (tfoot) */
tfoot tr {
    background-color: #eaeded;
    font-weight: bold;
    color: #333333;
}

tfoot td {
    border-top: 2px solid #2c3e50; /* Linha mais grossa para separar o rodapé */
}

/* Organiza o container principal em duas colunas */
.div-div {
    display: flex;
    justify-content: space-between; /* Afasta as imagens da tabela */
    align-items: flex-start;       /* Alinha ambos pelo topo */
    gap: 20px;                     /* Dá um espaço entre as imagens e a tabela */
    padding: 20px;
}

/* Cria uma coluna vertical apenas para as imagens */
.div-div > img {
    display: block;                /* Garante que fiquem uma embaixo da outra */
    margin-bottom: 15px;           /* Espaçamento entre cada foto */
    max-width: 150px;              /* Ajuste o tamanho máximo das imagens se necessário */
    height: auto;
}

/* Posiciona e estiliza o bloco da tabela na direita */
.livros {
    flex: 1;                       /* Faz a tabela ocupar o espaço restante */
    max-width: 50%;                /* Limita a largura da tabela para não esmagar as fotos */
    margin-left: auto;             /* Força o alinhamento total para a direita */
}

/* Estilo básico para a tabela ficar bonita e legível */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}





/* Configuração para o bloco da tabela ir totalmente para a direita */
.livros {
    flex: 1;                   /* Faz a tabela ocupar o espaço restante na direita */
    max-width: 600px;          /* Define um tamanho limite confortável para leitura */
    position: sticky;          /* Faz a tabela acompanhar a rolagem da página, se desejar */
    top: 20px;                 /* Fixa ela no topo do lado direito ao rolar */
}

/* Estilização da tabela para alinhar perfeitamente no novo layout */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background-color: #ffffff; /* Fundo branco para destacar a tabela do bege */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

th, td {
    border: 1px solid #d7ccc8;
    padding: 10px 12px;
    text-align: left;
}

th {
    background-color: #5d4037;
    color: #f5f2eb;
}





.div-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Força as imagens a ficarem coladas na esquerda */
    position: relative;      /* Permite posicionar a tabela em relação a este bloco */
    width: 100%;
    min-height: 100vh;       /* Garante espaço para a tabela não cortar */
}


.livros {
    position: absolute;      /* Arranca a tabela de baixo das imagens */
    top: 0;                  /* Alinha exatamente no topo */
    right: 0;                /* Alinha totalmente na direita */
    width: calc(100% - 280px); /* Ocupa todo o espaço da direita, descontando a largura das imagens */
    max-width: 700px;        /* Evita que a tabela estique demais em telas gigantes */
    padding-left: 40px;      /* Cria um espaço de segurança para não encostar nas fotos */
}

/* Garante que a tabela use o espaço disponível */
table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #d7ccc8;
    padding: 10px;
    text-align: left;
}




.livros {
    position: absolute;      /* Mantém a tabela arrancada de baixo das imagens */
    top: 0;                  /* Mantém no topo */
    right: 0;                /* Mantém na direita */
    width: calc(100% - 260px); /* Aumenta o espaço da tabela reduzindo a margem das fotos */
    max-width: 900px;        /* Aumentou de 700px para 900px para ficar bem mais larga */
    padding-left: 20px;      /* Diminuiu o recuo para a tabela ganhar mais tamanho útil */
}



.img-Rebecca {
    width: 340px;             /* Define um tamanho maior e fixo ideal */
    max-width: 100%;          /* Garante que ela encolha se a tela do celular for menor */
    height: auto;
    border-radius: 8px;
    border: 6px solid #d7ccc8; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}





/* Container do bloco de feedback */
.container-feedback {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 6px;
    border: 1px solid #d7ccc8;
    margin-top: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Espaçamento e estrutura dos campos */
.campo-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.campo-form label {
    font-weight: bold;
    color: #4e342e; /* Marrom quente */
}

/* Inputs de texto e a caixa de mensagem grande */
.campo-form input, 
.campo-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #d7ccc8;
    border-radius: 4px;
    background-color: #fcfbfa;
    font-family: inherit;
    font-size: 0.95rem;
    color: #3e2723;
}

/* Destaque visual ao clicar nos campos */
.campo-form input:focus, 
.campo-form textarea:focus {
    outline: none;
    border-color: #8d6e63;
    background-color: #ffffff;
}

/* Botão de Envio */
.btn-enviar {
    background-color: #6d4c41; /* Mesmo marrom dos seus botões do header */
    color: #f5f2eb;
    border: none;
    border-radius: 4px;
    padding: 12px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s ease;
}

.btn-enviar:hover {
    background-color: #5d4037; /* Escurece no efeito de passar o mouse */
=======
    border: 1px solid #d7ccc8; /* Linhas divisórias em marrom claro */
}

/* Coluna de Categorias (Efeito de destaque) */
.coluna-categoria {
    background-color: #efebe9; /* Marrom acinzentado bem claro */
    color: #5c4033;
    font-weight: bold;
    vertical-align: middle;
}

/* Linhas Alternadas no Corpo da Tabela (Efeito Zebra) */
.tabela-livros tbody tr:nth-of-type(even) {
    background-color: #f5f2eb; /* Tom de marrom/creme alternado */
}

/* Efeito Hover (Destaca a linha quando o mouse passa por cima) */
.tabela-livros tbody tr:hover {
    background-color: #e0d4c3; /* Marrom claro suave no hover */
    cursor: default;
}

/* Rodapé da Tabela */
.tabela-livros tfoot tr {
    background-color: #8d6e63; /* Marrom médio */
    color: #ffffff;
    font-weight: bold;

}