/* ======================================= */
/* ESTILOS ESPECÍFICOS PARA O CONTEÚDO MAIN */
/* ======================================= */

/* --- Títulos e Parágrafos --- */
.container h1, .container h2 {
    text-align: center;
    color: rgb(64, 64, 77); /* Cor de texto padrão do body */
    margin-bottom: 20px;
}

.container p {
    text-align: center;
    margin-bottom: 15px;
    text-indent: 0; /* Remove o indent definido no normalize */
}

/* --- Seção de Configuração (Formulário) --- */
.config {
    padding: 30px 20px;
    background-color: rgb(213, 213, 186); /* Cor de fundo da main-header */
    border: solid 2px rgb(64, 64, 77);
    border-radius: 10px;
    width: 100%; /* Ocupa a largura máxima definida por .main (70%) */
    max-width: 700px;
    margin-bottom: 40px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
}

.config hr {
    border: none;
    border-top: solid 1px rgba(64, 64, 77, 0.3);
    margin: 20px 0;
}

/* Grupos de Input */
.config-group {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Para responsividade básica */
}

/* Estilo para inputs e selects */
.input-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1; /* Permite que os grupos de input cresçam */
    min-width: 150px; /* Garante que não fiquem muito estreitos */
}

.input-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: rgb(64, 64, 77);
}

.config input[type="number"], 
.config input[type="text"],
.config select,
.config input[type="color"] {
    width: 100%;
    padding: 10px;
    border: solid 1px rgb(64, 64, 77);
    border-radius: 5px;
    background-color: white;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box; /* Garante que padding não afete a largura total */
}

.config input:focus,
.config select:focus {
    border-color: black;
}

/* Containers de Input Específicos (para o JavaScript) */
#hex-input, #color-picker-input {
    display: none; /* Escondidos por padrão */
}
#rgb-inputs {
    display: flex; /* Visível por padrão */
    justify-content: space-around;
    gap: 20px;
    margin-bottom: 20px;
}
#rgb-inputs.active,
#hex-input.active,
#color-picker-input.active {
    display: flex;
    justify-content: center;
}
#hex-input .input-group,
#color-picker-input .input-group {
    min-width: 200px;
}

/* Estilo para o color picker (ajuste de altura/tamanho) */
#color-picker {
    height: 44px; /* Altura para alinhar com os outros inputs */
    padding: 2px;
}

/* --- Botões de Ação --- */
.btn {
    padding: 12px 25px;
    margin-top: 10px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.btn-primary {
    background-color: rgb(64, 64, 77); /* Cor escura do texto principal */
    color: white;
    margin-bottom: 20px;
}

.btn-primary:hover {
    background-color: rgb(107, 107, 94); /* Cor de hover dos ícones sociais */
}

.btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap; /* Permite que os botões quebrem a linha */
}

.btn-secondary {
    background-color: rgb(160, 160, 140); /* Cor de fundo do submenu/linguagem */
    color: rgb(64, 64, 77);
    border: solid 1px rgb(64, 64, 77);
}

.btn-secondary:hover {
    background-color: rgb(213, 213, 186);
}

/* --- Seção de Paleta de Cores --- */
.paleta {
    padding: 20px 0;
    width: 100%;
}

.paleta-container {
    display: flex;
    flex-wrap: wrap; /* Quebra de linha em telas pequenas */
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.cor-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1 1 140px;      /* Alteração Chave 1: Torna o card flexível */
    min-width: 140px;     /* Garante uma largura mínima */
    max-width: 160px;     /* Evita que fique grande demais */
}
.cor-card h3,
.cor-card p:first-child {
  height: 50px;
}

/* 1. OVAL VERTICAL (Retângulo vertical com cantos arredondados) */
.cor-box {
    width: 100px; 
    height: 180px; 
    border-radius: 50px; /* Forma de 'pílula' vertical */
    border: solid 2px rgb(64, 64, 77);
    margin-bottom: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease-in-out;
}

.cor-box:hover {
    transform: scale(1.05); /* Efeito sutil de hover */
}

/* Cores de Exemplo (Para visualização inicial) 
.cor-box.cor-inicial { background-color: #8b0000; }
.cor-box.cor-mais-forte { background-color: #5d0000; }
.cor-box.cor-mais-fraca { background-color: #bb0000; }
.cor-box.cor-oposta-inicial { background-color: #008b8b; }
.cor-box.cor-oposta-mais-forte { background-color: #005d5d; }
.cor-box.cor-oposta-mais-fraca { background-color: #00bbbb; } */


/* 2. Informações da Cor */
.cor-info {
    width: 100%;
    padding: 10px 0;
    overflow: hidden; /* Alteração Chave 2: Esconde o conteúdo que transborda */
}

.cor-info h3 {
    margin: 5px 0;
    font-size: 1.1rem;
}

.cor-info p {
    margin: 2px 0;
    font-size: 0.9em;
    font-family: inconsolata; /* Para códigos de cor */
    color: rgb(107, 107, 94);
    white-space: nowrap;         /* Mantém o texto em uma linha */
    overflow: hidden;            /* Esconde o excesso */
    text-overflow: ellipsis;     /* Alteração Chave 3: Adiciona "..." ao final */
}

/* --- Responsividade (Ajuste para telas menores) --- */
@media (max-width: 768px) {
    .paleta-container {
        gap: 15px;
    }
    /* O .cor-card não precisa mais de ajuste de largura aqui, pois já é flexível */
    .cor-box {
        width: 80px;
        height: 150px;
    }
    .config-group, #rgb-inputs {
        flex-direction: column;
        gap: 15px;
    }
    .btn-group {
        flex-direction: column;
        align-items: center;
    }
}
/* ======================================= */
/* ESTILOS PARA O CONTEÚDO SEO/INFORMATIVO */
/* ======================================= */

.info-seo {
    margin: auto;
    max-width: 800px;
    padding: 30px 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #ffffff; /* Fundo claro para contraste */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.info-seo h2, .info-seo h3 {
    text-align: left;
    color: rgb(64, 64, 77);
    margin-top: 25px;
    margin-bottom: 10px;
}

.info-seo p {
    text-align: justify; /* Alinha o texto do parágrafo à esquerda */
    margin-bottom: 15px;
    line-height: 1.6;
}

.info-seo ul {
    list-style: disc;
    margin-left: 40px;
    margin-bottom: 20px;
    text-align: left;
}

.info-seo li {
    margin-bottom: 8px;
}