/* ==================================== ESTRUTURA GERAL E ESCALA DO SITE ====================================================== */
/* Configurações aplicadas nas tags raízes do navegador */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Corta qualquer elemento que tente estufar a tela para as laterais */
  
  /* ⚓ CONFIGURAÇÃO CRÍTICA PARA O STICKY FOOTER:
     Diz ao navegador que a estrutura do site ocupa, no mínimo, 100% da altura da janela visível.
     Sem isso, o Body não tem referência de altura e o rodapé sobe em páginas curtas. */
  min-height: 100vh;  
}

/* Configurações do corpo do site e controle de escala visual */
body {
    display: flex;              /* Ativa o modelo Flexbox para gerenciar o esqueleto do site */
    flex-direction: column;     /* Organiza header, main e footer empilhados em formato de linha vertical */
}

/* 💻 CONTROLADOR DE ESCALA APENAS PARA COMPUTADORES (Telas maiores que 768px) */
@media (min-width: 769px) {
    body {
        zoom: 1.50;             /* Aplica o zoom de 50% apenas em telas de notebooks e monitores */
    }
}

/* Container do miolo da página (engloba carrossel, títulos, marcas, formulários, etc.) */
.conteudo-principal {
    /* REGRA DO STICKY FOOTER:
       O valor "1" (flex-grow) faz com que esse bloco do meio cresça e ocupe todo o espaço vazio da tela,
       agindo como uma mola que empurra o rodapé (footer) ativamente para o final da página.
       O "0" (flex-shrink) impede que o conteúdo seja esmagado e o "auto" calcula a base automaticamente. */
    flex: 1 0 auto; 
}


/*===================================== CONTROLA A IMAGEM DO TOPO DA PÁGINA ==================*/
.polycron-logo {
    display: flex;
    justify-content: center; /* Garante que a logo fique centralizada */
    padding: 30px 0px;         /* Dá um espaço em cima e embaixo da logo */
}

/* Controla EXATAMENTE o tamanho da imagem da logo */
.polycron-logo img {
    width: 115px;            /* Defina a largura que você quiser aqui (ex: 200px, 300px, 400px) */
    height: auto;            /* Deixe a altura automática para não distorcer ou amassar a imagem */
}
/*============================================================================================================================*/



/*=========================== CONTROLA A BARRA DE NAVEGAÇÃO PRINCIPAL =================================*/
.barra-navegacao {
    display: flex;                        /* Ativa o Flexbox para colocar os links lado a lado */
    justify-content: center;              /* Centraliza todos os botões do menu horizontalmente */
    align-items: center;                  /* Alinha o centro vertical de textos e divisores */
    gap: 10px;                            /* Cria um espaçamento de 10px entre os links e os traços */
    padding: 5px 0;                       /* Espaçamento interno de 5px acima e abaixo do menu */
    
    /* Configurações de tamanho e centralização do menu completo */
    width: 90%;                           /* Ocupa até 90% da tela em dispositivos menores */
    max-width: 650px;                     /* Define a largura máxima limite da barra */
    margin: 0 auto 5px auto;              /* Centraliza o menu na tela e deixa 5px de margem na base */
    
    /* Configurações da borda decorativa inferior */
    border-bottom: 3.5px solid #080853;   /* Linha azul escura que acompanha o limite de 650px */ 
    font-size: 12px;                      /* Define o tamanho padrão da letra dos links */
    flex-wrap: wrap;                      /* Permite que o menu quebre linhas de forma segura se necessário */
}

/* Customização padrão dos links do menu */
.barra-navegacao .botao-menu {
    color: #0c0c0c;                       /* Aplica a cor grafite/quase preta padrão nos links */
    font-family: sans-serif;              /* Define uma fonte limpa e sem serifa */
    font-weight: normal;                  /* Mantém o texto com espessura padrão */
    text-decoration: none;                /* Remove o sublinhado padrão de links do HTML */
    padding: 5px 8px;                     /* Adiciona uma área de clique confortável ao redor do texto */
    transition: color 0.2s ease;          /* Deixa a troca de cor visual suave ao passar o mouse */
}

/* Efeito interativo ao passar o mouse por cima do link */
.barra-navegacao .botao-menu:hover {
    color: #0e9aeb;                       /* Muda o texto para azul claro ao passar o mouse */
}

/* Mantém o link da página atual destacado */
.barra-navegacao .botao-menu.ativo {
    color: #0e9aeb;                       /* Aplica o mesmo azul claro do hover na página ativa */
    font-weight: bold;                    /* Deixa em negrito para reforçar onde o usuário está navegando */
}

/* Estilização dos traços separadores (|) do menu */
.barra-navegacao .divisor-menu {
    color: #3a3838;                       /* Altera a cor do traço para um cinza escuro sutil */
    font-size: 12px;                      /* Acompanha o tamanho do texto do menu */
    opacity: 0.6;                         /* Deixa o traço semi-transparente para suavizá-lo no layout */
}

/* Configura o botão do menu hambúrguer para computadores */
.botao-hamburguer {
    display: none;             /* Esconde o botão completamente em telas grandes (ele não deve aparecer no PC) */
    background: none;          /* Remove qualquer fundo cinza ou quadrado padrão que o navegador põe em botões */
    border: none;              /* Remove as bordas padrões do botão */
    color: #080853;            /* Aplica a cor azul escura oficial da identidade da Polycron no ícone */
    font-size: 24px;           /* Define um tamanho grande e visível para o desenho das 3 barrinhas */
    cursor: pointer;           /* Transforma a seta do mouse em "mãozinha" de clique */
    padding: 10px;             /* Cria uma área invisível de clique ao redor dele para facilitar o toque */
}



/* ------------------------ RESPONSIVIDADE (MEDIA QUERY PARA CELULARES E TABLETS) ------------------------------ */
@media (max-width: 768px) {
    /* Ativa o botão quando o site entrar na tela de um celular */
    .botao-hamburguer {
        display: block;        /* Faz o botão das 3 barrinhas aparecer na tela do celular */
        margin: 10px auto;     /* Centraliza o botão horizontalmente e deixa 10px de espaço no topo/base */
    }

    /* ALTERAÇÃO DA BARRA DE NAVEGAÇÃO: Controla o estado inicial do menu */
    .barra-navegacao {
        display: none;         /* CRÍTICO: Faz o menu com todos os links sumir da tela assim que a página carrega */
        flex-direction: column;/* Empilha os links em formato de lista (um embaixo do outro) */
        gap: 5px;              /* Espaço de 5px entre uma linha de menu e outra */
        padding: 10px 0;       /* Margem interna de proteção acima e abaixo */
        border-bottom: 2px solid #080853; /* Mantém a linha azul decorativa mais fina no mobile */
        width: 100%;           /* Ocupa toda a largura da tela interna do celular */
    }

    /* GATILHO VISUAL: Esta classe controla a aparição do menu */
    .barra-navegacao.menu-aberto {
        display: flex !important; /* Quando essa classe for ativada pelo JS, o menu "reaparece" instantaneamente */
    }
}

/*======================================================================================================*/



/*=========================== MECANISMO DO MENU DROPDOWN (suspenso) - BARRA DE NAVEGAÇÃO PRINCIPAL =============================*/
/* Mantém o botão pai como a referência para o posicionamento da caixinha filha */
.menu-item-dropdown {
    position: relative;
    display: inline-block;
}

/* Configura a caixinha do sub-menu que fica escondida por padrão */
.sub-menu {
    display: none;                
    position: absolute;           
    top: 100%;                    
    left: 50%;                    
    transform: translateX(-50%);  
    background-color: #f1eded;    
    min-width: 50px;             
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15); 
    border-radius: 4px;           
    padding: 2px 0;
    z-index: 1000;                
}

/* Estiliza os links individuais (KRON e RICAMARE) dentro da caixinha */
.sub-menu a {
    color: #666666;               
    padding: 10px 15px;
    text-decoration: none;
    display: block;               
    font-size: 8px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Efeito ao passar o mouse em cima dos sub-links (KRON ou RICAMARE) */
.sub-menu a:hover {
    background-color: #f5f5f5;    
    color: #0e9aeb;               
}

/* Mostra a caixinha quando o mouse passa por cima da div pai */
.menu-item-dropdown:hover .sub-menu {
    display: block;
}

.nav-divider {
  color: #5f5757; /* Cor cinza clara */
  margin: 0 10px; /* Dá um espaço antes e depois da barra */
  font-size: 14px;
  user-select: none; /* Impede que o usuário selecione a barra com o mouse */
}
/*==============================================================================================================================*/



/*=========================== CONTROLA O EFEITO CARROSEL DAS IMAGENS DA PÁGINA HOME ===========================*/
/* Container que define o espaço do banner na tela */
.carrossel-container {
    width: 100%;
    max-width: 650px;     /* Defina a largura máxima que desejar */
    margin: 10px auto;     /* Centraliza o carrossel na página e afasta do menu */
    position: relative;
    overflow: hidden;
}

/* Garante o posicionamento dos slides sobrepostos */
.carrossel-slides {
    position: relative;
    width: 100%;
    height: auto;         /* Ajuste a altura ideal para os seus banners */
    aspect-ratio: 1024 / 350;
}

/* Esconde todos os slides por padrão e cria o efeito suave */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Transição de 1 segundo */
}

/* Mostra apenas o slide que tiver a classe .ativo */
.slide.ativo {
    opacity: 1;
}

/* Força a imagem a se adaptar perfeitamente ao tamanho da caixa */
.slide img {
    width: 100%;
    height: 100%;          
    object-fit: fill;      
}

.secao-titulo h2 {
  text-align: center;
}
/*===============================================================================================================*/



/*=========================== CONTROLA O TÍTULO LINHAS DE PRODUTOS E SEÇÃO DE BANNERS MARCAS KRON E RICAMARE =========================*/
.secao-titulo-linhas-produtos h2 {
    color: hsl(192, 3%, 36%);
    display: flex;
    justify-content: center; 
    padding: 20px 0; 
    font-size: 15px;
    font-family: sans-serif;
    font-weight: normal;
}

/* Container principal que alinha os blocos lado a lado */
.secao-marcas {
    display: flex;
    justify-content: center;   /* Centraliza os dois blocos na tela */
    gap: 50px;                 /* Espaço entre um bloco e o outro */
    width: 90%;
    max-width: 550px;         /* Limita o tamanho máximo na tela */
    margin: 0 auto 40px auto;  /* Centraliza na tela e dá espaço na parte de baixo */
}

/* Estilo de cada bloco */
.cartao-marca {
    flex: 1;                   /* Faz os dois blocos terem o mesmo tamanho proporcional */
    max-width: 250px;          /* Limita a largura máxima de cada um */
    background-color: #fdfafa; 
    border: 1px solid #fdfafa; 
    border-radius: 12px;
    padding: 20px;             
    background-image: linear-gradient(#f8f7f7, #d4cfda); 
    transition: transform 0.2s ease; /* Efeito suave ao passar o mouse */
}

/* Efeito de clique: o bloco levanta levemente quando o usuário passa o mouse */
.cartao-marca:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* Garante que o link preencha todo o espaço do cartão */
.cartao-marca a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Controla o comportamento e tamanho das imagens */
.cartao-marca img {
    width: 100%;
    height: auto;
    max-height: 250px;         
    object-fit: contain;       
}

/* ---------------------------------- RESPONSIVIDADE: Ajustes específicos para telas de celulares e tablets --------------------*/
@media (max-width: 768px) {
    .secao-marcas {
        flex-direction: column;
        align-items: center;
    }
    .cartao-marca {
        width: 100%;
    }
}
/*======================================================================================================================*/



/*====================================== CONTROLA SEÇÃO CARTELA DE CORES BANNERS MARCAS ================================*/
/* Container principal para centralizar o card na tela */
.secao-cartelas-cores {
    width: 100%;                /* Força o container a ocupar toda a largura disponível */
    max-width: 590px;           /* Define a largura máxima do card na tela */
    margin: 40px auto;          /* Cria margem de 40px no topo/base e centraliza horizontalmente */
    padding: 0 20px;            /* Evita que o card cole nas bordas em telas menores de celular */
    box-sizing: border-box;     /* Garante que o padding não aumente a largura máxima de 590px */
}

/* Estrutura do Card (Borda, fundo branco e alinhamento lado a lado) */
.card-cartela {
    display: flex;              /* Ativa o Flexbox para colocar o texto e a imagem lado a lado */
    align-items: center;        /* Alinha o bloco de texto e a imagem verticalmente ao centro */
    justify-content: space-between; /* Distribui os blocos internos empurrando-os para as extremidades */
    background-color: #ffffff;  /* Aplica a cor de fundo branca no cartão */
    border: 1px solid #a89f9f;  /* Cria uma borda preta fina ao redor do cartão */
    border-radius: 8px;         /* Arredonda os cantos do cartão em 8px */
    text-decoration: none;      /* Remove o sublinhado padrão que os links HTML possuem */
    overflow: hidden;           /* Garante que a imagem respeite os cantos arredondados e não transborde */
}

/* Lado Esquerdo: Caixa que guarda o texto e o botão */
.conteudo-card {
    flex: 1;                    /* Faz o bloco de texto ocupar metade do espaço proporcional do card */
    padding: 40px;              /* Cria um espaçamento interno generoso de 40px ao redor do texto */
    display: flex;              /* Ativa o Flexbox interno para organizar os elementos */
    flex-direction: column;     /* Organiza o título e o botão em formato de coluna (um abaixo do outro) */
    align-items: center;        /* Centraliza o título e o botão horizontalmente no meio da caixa */
    gap: 8px;                   /* Define uma distância padrão de 8px entre o título e o botão */
}

/* Estilo do título "Cartela de Cores" */
.conteudo-card h2 {
    color: #d93644;             /* Aplica a cor vermelha/rosa no título */
    font-size: 18px;            /* Define o tamanho da fonte do título */
    font-family: Arial, sans-serif; /* Define a família de fontes */
    margin: 0;                  /* Zera as margens nativas para não quebrar o espaçamento do gap */
    font-weight: bold;          /* Coloca o texto em negrito */
}

/* Estilo do botão verdadeiro "Veja as cores disponíveis!" */
.botao-cartelas-cores {
    display: inline-flex;       /* Transforma em caixa flexível interna para alinhamentos estáveis */
    align-items: center;        /* Centraliza o texto verticalmente dentro do botão */
    background-color: #8c8c8c;  /* Define a cor de fundo cinza escuro padrão inicial */
    color: #ffffff;             /* Deixa a cor do texto interna branca */
    padding: 5px 12px;          /* Espaçamento interno: 5px em cima/baixo e 12px nas laterais */
    font-size: 10px;            /* Define o tamanho da fonte interna do botão */
    font-family: Arial, sans-serif; /* Define a fonte do botão */
    border-radius: 4px;         /* Arredonda os cantos do botão em 4px */
    font-weight: bold;          /* Deixa o texto em negrito */
    cursor: pointer;            /* Transforma o mouse em "mãozinha" de clique ao passar por cima */
    transition: background-color 0.3s ease; /* ADICIONADO: Cria uma transição suave de 0.3 segundos na troca de cor */
}

/* EFEITO AO PASSAR O MOUSE: Altera a cor do botão quando o usuário encosta no cartão */
.card-cartela:hover .botao-cartelas-cores {
    background-color: #4a4a4a;  /* ALTERADO: O botão muda do cinza para o AZUL ESCURO da linha do seu menu */
}

/* Lado Direito: Caixa da Imagem */
.imagem-card {
    flex: 1;                    /* Faz o bloco da imagem ocupar a outra metade proporcional do card */
    display: flex;              /* Ativa o Flexbox para alinhar a imagem interna */
    justify-content: flex-end;  /* Alinha a imagem totalmente colada na ponta direita */
    align-self: stretch;        /* Força a caixa da imagem a esticar e ter a mesma altura da caixa de texto */
}

/* Garante o ajuste perfeito da foto dentro do bloco no Desktop */
.imagem-card img {
    width: 100%;                /* Força a imagem a ocupar toda a largura da sua caixa */
    max-width: 100%;            /* Limita para a imagem nunca estourar o tamanho do container */
    height: 100%;               /* Força a imagem a ocupar toda a altura disponível da sua caixa */
    object-fit: cover;          /* Corta e adapta a imagem para preencher o espaço sem distorcer ou amassar */
    display: block;             /* Remove vãos ou espaços em branco fantasmas abaixo da foto */
    mask-image: linear-gradient(to right, transparent 0%, rgb(241, 239, 239) 2%); /* Cria o efeito de transição suave na lateral da foto */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(241, 239, 239) 2%); /* Mantém o efeito de transição funcionando no Safari e Chrome */
}

/* ------------------------------------- RESPONSIVIDADE: Ajustes específicos para telas de celulares e tablets --------------------*/
@media (max-width: 600px) {
    /* Transforma o layout lado a lado em coluna (vertical) */
    .card-cartela {
        flex-direction: column; /* Texto fica na parte de cima e a imagem vai para baixo */
    }
    
    /* Reajuste do espaçamento interno do texto no celular */
    .conteudo-card {
        padding: 30px 20px;     /* Reduz o padding para 30px topo/base e 20px nas laterais */
        align-items: center;    /* Garante a centralização dos textos no smartphone */
        text-align: center;     /* Centraliza o alinhamento das frases no celular */
    }
    
    /* Ajusta a caixa da imagem no celular */
    .imagem-card {
        width: 100%;            /* Força a caixa da imagem a ocupar 100% da largura horizontal */
    }
    
    /* Força a imagem a ter uma altura visível abaixo do texto */
    .imagem-card img {
        height: 200px;          /* Fixa a altura em 200px para a foto aparecer bem proporcional no celular */
        mask-image: none;       /* Remove a máscara lateral, já que no celular a foto fica abaixo e não ao lado */
        -webkit-mask-image: none; /* Remove a máscara do Safari/Chrome no celular */
    }
}
/*==========================================================================================================================*/


/* ===================================== PÁGINA INTERNA DE PRODUTO: RICAMARE E KRON ============================================== */

/*==========================----------> PRODUTO RICAMARE <-----------------=============================== */
/*----------------------------- Bloco de Apresentação Superior (Imagem do Logotipo + Botão de Cores) -------------*/
.apresentacao-produto-container-ricamare {
  display: flex;                /* Ativa o Flexbox para colocar a imagem da logo e o botão lado a lado */
  justify-content: flex-start;  /* Empurra a logo para a ponta esquerda e o botão para a ponta direita */
  align-items: center;          /* Alinha o centro vertical da imagem com o centro do botão */
  width: 90%;                   /* Ocupa até 90% da largura útil da tela */
  max-width: 650px;             /* ALINHAMENTO Travado exatamente no limite da linha azul do menu */
  margin: 40px auto 10px auto;  /* Define as margens: 40px no topo para afastar do menu e 10px na base */
  box-sizing: border-box;       /* Garante que os paddings fiquem calculados dentro dos 650px de largura */
}

/*-------------------------------- Subbloco que guarda o logotipo do produto ------------------------------------*/
.marca-detalhe-bloco-ricamare {
  display: flex;                /* Ativa o Flexbox interno para controle de exibição */
  align-items: center;          /* Centraliza o conteúdo internamente */
  max-width: 55%;               /* Limita a caixa em 55% para garantir espaço de sobra para o botão */
}

/*------------------------------ Controla EXATAMENTE o comportamento e o tamanho da imagem da logo ---------------*/
.logo-ricamare-topo {
  width: 100%;                  /* Força a imagem a preencher toda a largura da caixinha dela */
  max-width: 250px;             /* CONTROLE VISUAL: Define o tamanho máximo ideal para a logo ficar elegante no topo */
  height: auto;                 /* Mantém a proporção correta de altura sem amassar ou distorcer a marca */
  display: block;               /* Remove espaços em branco ou vãos fantasmas abaixo da foto */
}

/* ------------------------------- Bloco do botão cinza da direita ----------------------------------------------- */
.bloco-link-cartela-ricamare {
  display: flex;                /* Ativa o Flexbox para gerenciamento */
  align-items: center;          /* Mantém o botão centralizado verticalmente */
  margin-left: 150px;           /* Controla a distância exata entre o fim da logo e o início do botão */
}

/*-------------------------- Divisória e Faixa do Subtítulo Técnico Central ----------------------------- */
.titulo-especificacao-tecnica-ricamare {
  width: 90%;                   /* Acompanha a mesma proporção de preenchimento lateral da página */
  max-width: 650px;             /* Enquadra o bloco invisível no tamanho limite de 650px */
  margin: 35px auto 20px auto;  /* Define margens: 35px de espaçamento no topo e 20px antes dos cards */
  box-sizing: border-box;       /* Protege a largura total contra quebras de layout */
}

/*------------------------- O texto "Linha RICAMARE para bordar - 100% Poliéster Trilobal" ----------------*/
.titulo-especificacao-tecnica-ricamare h2 {
  font-family: Arial, sans-serif; /* Define a fonte padrão de leitura rápida do buscador */
  color: #000000;               /* Aplica a cor preta sólida para destaque da ficha técnica */
  font-size: 11.5px;              /* Tamanho refinado para a frase ocupar exatamente uma linha horizontal */
  font-weight: bold;              /* Deixa a frase técnica em negrito */
  margin: 0;                      /* Zera as margens padrão do navegador */
  text-align: left;               /* Mantém o texto alinhado perfeitamente na esquerda */
}

/*-------------------------- Grade Organizadora dos Cartões de Imagens de Produtos ------------------*/
.grade-especificacoes-produtos-ricamare {
  display: flex;                /* Ativa o Flexbox para colocar as duas imagens lado a lado na horizontal */
  justify-content: space-between;/* Distribui as duas imagens aproveitando as extremidades do menu */
  width: 95%;                   /* Ocupa até 95% da largura da tela em celulares */
  max-width: 650px;             /* ALINHAMENTO: Enquadra perfeitamente sob a linha azul de 650px */
  margin: 0 auto 60px auto;     /* Centraliza na tela e deixa 60px de barreira antes do rodapé */
  gap: 20px;                    /* Cria uma distância firme de 20px entre uma imagem e outra */
  box-sizing: border-box;       /* Protege a largura máxima de estouros de layout */
}

/*----------------------------- Moldura externa aplicada ao redor de cada imagem ------------------------ */
.cartao-especificacao-ricamare {
  min-width: 230px;              /* Impede que os cartões fiquem excessivamente esmagados */
  max-width: 200px;              /* Limita o tamanho individual para manter a harmonia quando houver poucos itens */
  flex: 1;                        /* Força as duas imagens a terem exatamente o mesmo tamanho na tela */
  background-color: #ffffff;    /* Define o fundo como branco */
  border-radius: 8px;             /* Arredonda os cantos em 8px idêntico ao modelo do site */
  border: 2px solid #a89f9f;    /* Cria o contorno cinza bem clarinho e suave */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* Aplica a sombra leve para dar efeito de relevo e profundidade */
  overflow: hidden;               /* Obriga a imagem interna a respeitar os cantos arredondados da borda */
  display: flex;                  /* Ativa o flexbox interno para controle de exibição */
            
}



/*------------------------------ Controla o comportamento e tamanho das imagens inteiras ----------------------- */
.cartao-especificacao-ricamare img {
  width: 100%;                  /* Força a imagem a preencher 100% da largura do cartão */
  height: auto;                 /* Calcula a altura automaticamente para não amassar ou distorcer as escritas */
  display: block;               /* Remove vãos ou espaços em branco fantasmas abaixo da foto */
}

/*------------------------ ESTILO DO BOTÃO DE CORES (EFEITO INTERATIVO HOVER) -------------------------- */
/* Configuração padrão do botão em estado normal */
.botao-falso-ricamare {
    display: inline-flex;       /* Transforma em caixa flexível interna para alinhamentos estáveis */
    align-items: center;        /* Centraliza o texto verticalmente dentro do botão */
    background-color: #706f6f;  /* Define a cor de fundo cinza escuro padrão inicial */
    color: #ffffff;             /* Deixa a cor do texto interna branca */
    padding: 10px 18px;         /* Espaçamento interno anatômico para área de clique */
    font-size: 11px;            /* Define o tamanho da fonte interna do botão */
    font-family: Arial, sans-serif; /* Aplica a fonte padrão limpa */
    border-radius: 4px;         /* Arredonda os cantos do botão em 4px */
    font-weight: bold;          /* Deixa o texto em negrito */
    text-decoration: none;      /* Remove qualquer sublinhado padrão de links */
    cursor: pointer;            /* Transforma o mouse em "mãozinha" de clique */
    transition: background-color 0.3s ease; /* EFEITO CRÍTICO: Cria a fusão suave de 0.3 segundos na troca de cor */
}

/*------------------------- EFEITO HOVER: Altera a cor de fundo instantaneamente ao passar o mouse -------------- */
.botao-falso-ricamare:hover {
    background-color: #4a4a4a;  /* O botão muda para cinza*/
}

/* ----------------------------------- RESPONSIVIDADE: Ajustes específicos para telas de celulares e tablets --------------------*/
@media (max-width: 768px) {
  /* Empilha as imagens na vertical em celulares para as escritas não ficarem ilegíveis */
  .grade-especificacoes-produtos-ricamare {
    flex-direction: column;     /* Coloca a imagem da caixinha em cima e a do cone grande embaixo */
    align-items: center;        /* Centraliza os blocos na tela vertical do smartphone */
    gap: 15px;                  /* Distância de segurança de 15px entre elas */
  }

  /* Controla o tamanho de leitura dos cartões no celular */
  .cartao-especificacao-ricamare {
    width: 100%;                /* Permite ocupar a largura total útil da tela do celular */
    max-width: 340px;           /* Limita em 340px para a imagem não esticar demais e perder nitidez */
  }

  /* Alinha os blocos do topo centralizados na tela do celular */
  .apresentacao-produto-container-ricamare {
    flex-direction: column;     /* Empilha o logotipo da marca em cima e o botão de cores embaixo */
    align-items: center;        /* Centraliza os elementos horizontalmente na tela do aparelho */
    gap: 15px;                  /* Distância de 15px entre a logo e o botão */
    text-align: center;         /* Centraliza o alinhamento */
  }

  /* Centraliza a caixa da logo no celular */
  .marca-detalhe-bloco-ricamare {
    align-items: center;        /* Centraliza a imagem do logo no meio da tela no smartphone */
    max-width: 80%;             /* Abre espaço para a logo ocupar um pouco mais de área horizontal no celular */
  }
}
/*------------------------------------------------------------------------------------------------------------*/


/*==========================--------------------> PRODUTO KRON <-----------------=============================== */
/*----------------------------- Bloco de Apresentação Superior (Imagem do Logotipo + Botão de Cores) -------------*/

/* Container que envolve o logotipo e o botão de cores no topo da página */
.apresentacao-produto-container-kron {
  display: flex;                  /* Ativa o Flexbox para colocar a logo e o botão lado a lado horizontalmente */
  justify-content: space-between; /* Empurra a logo para a extrema esquerda e o botão para a extrema direita */
  align-items: center;            /* Alinha os centros verticais da logo e do botão para ficarem alinhados na mesma linha */
  width: 90%;                     /* Define que o bloco ocupa 90% da largura da tela em dispositivos menores */
  max-width: 650px;               /* Limita a largura máxima em 650px para alinhar perfeitamente com o layout do site */
  margin: 40px auto 10px auto;    /* Margens: 40px acima (afasta do menu), centraliza nas laterais (auto), 10px abaixo */
  box-sizing: border-box;         /* Garante que espaçamentos internos (paddings) não aumentem o tamanho total de 650px */
}

/* Subbloco (caixa invisível) que guarda o logotipo da marca */
.marca-detalhe-bloco-kron {
  display: flex;                  /* Ativa o Flexbox interno para controle fino dos elementos de imagem */
  align-items: center;            /* Garante que o conteúdo interno fique centralizado verticalmente */
  max-width: 55%;                 /* Limita esta caixinha em 55% da largura total, reservando o resto para o botão */
}

/* Controla o comportamento e o tamanho da imagem do logotipo da KRON */
.logo-kron-topo {
  width: 100%;                    /* Força a imagem a se adaptar e preencher toda a largura do seu bloco pai */
  max-width: 250px;               /* Define o tamanho máximo ideal para a logo não ficar gigante em telas grandes */
  height: auto;                   /* Calcula a altura automaticamente para manter a proporção original da imagem */
  display: block;                 /* Transforma em bloco para eliminar espaços vazios que navegadores criam sob imagens */
}

/* Caixa que envolve o botão de cores no lado direito */
.bloco-link-cartela-kron {
  display: flex;                  /* Ativa o Flexbox para gerenciamento do link interno */
  align-items: center;            /* Mantém o botão perfeitamente centralizado na vertical */
}

/* ------------------------------------- SUBTÍTULOS TÉCNICOS (EX: "100% POLIÉSTER FIADO...") ----------------------------------*/

/* Bloco que envolve o título de cada seção de produtos */
.titulo-especificacao-tecnica-kron {
  width: 90%;                     /* Acompanha a mesma proporção de preenchimento lateral do restante da página */
  max-width: 650px;               /* Limita a área do título no mesmo tamanho de 650px das grades */
  margin: 35px auto 20px auto;    /* Margens: 35px de espaço acima e 20px de espaço antes de começar os cartões */
  box-sizing: border-box;         /* Protege a estrutura contra quebras caso seja adicionada alguma borda ou padding */
}

/* Estilização direta do texto do título H2 */
.titulo-especificacao-tecnica-kron h2 {
  font-family: Arial, sans-serif; /* Define uma fonte limpa e sem serifa */
  color: #000000;                 /* Aplica a cor preta sólida no texto */
  font-size: 15px;                /* Define o tamanho discreto e profissional para a fonte */
  font-weight: bold;              /* Deixa a letra em negrito */
  margin: 0;                      /* Zera as margens padrões que o navegador coloca no H2 */
  text-align: left;               /* Alinha o texto na extremidade esquerda */
}

/* --------------------------------------------- GRADE E CARTÕES DE PRODUTOS ---------------------------------------------------- */

/* Container que organiza os cartões de imagens lado a lado */
.grade-especificacoes-produtos-kron {
  display: flex;                  /* Ativa o Flexbox para alinhar os cartões na horizontal */
  justify-content: flex-start;    /* Alinha os cartões começando sempre da esquerda para a direita */
  flex-wrap: wrap;                /* Permite que os cartões quebrem para a linha de baixo se não couberem na mesma linha */
  width: 90%;                     /* Segue o padrão de largura responsiva de 90% */
  max-width: 650px;               /* Alinha a largura máxima da grade com o topo e com os títulos */
  margin: 0 auto 60px auto;       /* Margens: 0 no topo, centraliza nas laterais, e deixa 60px de espaço na base da seção */
  gap: 15px;                      /* Cria um espaçamento automático, uniforme e controlado de 15px entre os cartões */
  box-sizing: border-box;         /* Mantém o cálculo de tamanho da grade sempre seguro */
}

/* Moldura externa unificada ao redor de cada cartão de imagem (Reta, Pesponto, Carretilha e Overlock) */
.cartao-especificacao-kron-reta,
.cartao-especificacao-kron-pesponto,
.cartao-especificacao-kron-carretilha,
.cartao-especificacao-kron-overlock {
  min-width: 180px;               /* Largura mínima do cartão para que ele nunca fique excessivamente esmagado */
  max-width: 200px;               /* Limita a largura máxima em 200px para manter os cartões organizados e harmônicos */
  flex: 1 1 180px;                /* Permite expandir(1), encolher(1) e define a base de cálculo ideal em 180px */
  background-color: #ffffff;      /* Define o fundo interno do cartão como branco puro */
  border-radius: 8px;             /* Arredonda os quatro cantos do cartão em 8px */
  border: 2px solid #a89f9f;      /* Cria um contorno cinza suave ao redor do cartão */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); /* Aplica uma sombra muito sutil para dar leve profundidade (relevo) */
  overflow: hidden;               /* Força as imagens internas a respeitarem e não passarem dos cantos arredondados */
  display: flex;                  /* Transforma o cartão em flexbox para que a imagem se ajuste internamente sem erros */
}

/* Controla o comportamento de todas as imagens que estão dentro dos cartões */
.cartao-especificacao-kron-reta img,
.cartao-especificacao-kron-pesponto img,
.cartao-especificacao-kron-carretilha img,
.cartao-especificacao-kron-overlock img {
  width: 100%;                    /* Força a imagem a ocupar 100% da largura interna do cartão */
  height: auto;                   /* Ajusta a altura proporcionalmente para a imagem nunca distorcer */
  display: block;                 /* Elimina qualquer espaço ou fresta em branco abaixo da imagem */
}

/* -------------------------------------------- ESTILO DO BOTÃO DE CORES (HOVER INTERATIVO) ----------------------------------- */

/* Estiliza o link transformando-o visualmente em um botão moderno */
.botao-falso-kron {
  display: inline-flex;           /* Permite que o link se comporte como bloco, mas alinhe elementos internos em flex */
  align-items: center;            /* Centraliza perfeitamente o texto na linha vertical interna do botão */
  background-color: #706f6f;      /* Define a cor de fundo inicial como cinza escuro */
  color: #ffffff;                 /* Define a cor do texto como branco */
  padding: 10px 18px;             /* Espaçamento interno: 10px cima/baixo e 18px lados (confortável para clique) */
  font-size: 11px;                /* Tamanho pequeno e delicado para a fonte do botão */
  font-family: Arial, sans-serif; /* Define a fonte padrão limpa */
  border-radius: 4px;             /* Arredonda os cantos do botão levemente em 4px */
  font-weight: bold;              /* Deixa o texto em negrito para destacar a chamada de ação */
  text-decoration: none;          /* Remove o sublinhado padrão que todo link de internet possui */
  cursor: pointer;                /* Transforma a seta do mouse no ícone de "mãozinha" ao passar por cima */
  transition: background-color 0.3s ease; /* Cria uma transição suave de 0.3 segundos na troca da cor de fundo */
}

/* Ativa o efeito visual interativo quando o usuário passa o mouse por cima do botão */
.botao-falso-kron:hover {
  background-color: #4a4a4a;      /* Escurece o cinza do botão para dar feedback visual de que é clicável */
}

/* =------------------------------------- RESPONSIVIDADE (MEDIA QUERY PARA CELULARES E TABLETS) -------------------------------- */

/* Aplica estas regras apenas quando a tela do dispositivo for menor ou igual a 768px */
@media (max-width: 768px) {
  
  /* Modifica o comportamento da grade de produtos em celulares */
  .grade-especificacoes-produtos-kron {
    flex-direction: column;       /* Muda o alinhamento de horizontal para vertical (empilha os cartões) */
    align-items: center;          /* Centraliza todos os cartões verticalizados no meio da tela do celular */
    gap: 15px;                    /* Mantém a distância segura de 15px entre um cartão empilhado e outro */
  }                  
  
  /* Ajusta o tamanho de todos os cartões para telas mobile */
  .cartao-especificacao-kron-reta,
  .cartao-especificacao-kron-pesponto,
  .cartao-especificacao-kron-carretilha,
  .cartao-especificacao-kron-overlock {
    width: 100%;                  /* Permite que o cartão tente ocupar toda a largura disponível da tela */
    max-width: 340px;             /* Impede que passe de 340px para a imagem não esticar demais e perder nitidez */
  }

  /* Modifica a área de apresentação do topo no celular */
  .apresentacao-produto-container-kron {
    flex-direction: column;       /* Empilha o logotipo em cima e o botão de cores logo embaixo */
    align-items: center;          /* Centraliza ambos os elementos horizontalmente na tela do smartphone */
  }
}  
/*============================================================================================================*/



/*====================================== CONTROLA A PÁGINA HISTÓRIA EMPRESA =================================*/

/* Container principal que junta os dois lados */
.historia-container {
  display: flex;
  align-items: center;       /* Alinha o texto e a imagem verticalmente pelo centro */
  width: 90%;                /* Ocupa até 90% da tela em celulares (igual ao seu menu) */
  max-width: 650px;          /* ALINHAMENTO CRÍTICO: Exatamente o mesmo limite da linha azul do menu */
  margin: 30px auto 50px auto; /* Centraliza na tela e dá espaço seguro para o rodapé */
  padding: 0;                /* Remove paddings extras para alinhar perfeitamente com a linha azul */
  gap: 20px;                 /* Reduzido para 20px para que os blocos caibam lado a lado em 650px */
  box-sizing: border-box;
}

/* Configuração do bloco de texto */
.historia-texto {
  flex: 1.2;                 /* Dá uma leve prioridade de espaço para o texto */
  max-width: 55%;            /* Texto ocupa até 55% dos 650px */
}

.historia-texto h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #555555;
  font-size: 15px;           /* Reduzido para harmonizar com o tamanho menor do bloco */
  margin-bottom: 10px;
  font-weight: bold;
}

.historia-texto p {
  font-family: Arial, sans-serif;
  color: #666666;
  font-size: 10px;           /* Mantido em 10px para caber confortavelmente no espaço */
  line-height: 1.6;          
  text-align: justify;       
  font-weight: normal;
  margin: 0;
}

/* Configuração do bloco de imagem */
.historia-imagem {
  flex: 0.8;                 /* Ocupa um espaço ligeiramente menor que o texto */
  max-width: 40%;            /* Caixa da imagem ocupa até 40% dos 650px */
  display: flex;
  justify-content: center;
}

/* Torna a imagem responsiva para preencher o bloco */
.historia-imagem img {
  width: 100%;               /* Preenche totalmente os 40% reservados para ela */
  height: auto;
  border-radius: 4px;        /* Cantos sutilmente arredondados */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); /* Sombra suave para destacar a foto */
}

/* --------------------------------------- RESPONSIVIDADE: Ajustes específicos para telas de celulares e tablets --------------------*/
@media (max-width: 768px) {
  .historia-container {
    flex-direction: column;  /* Empilha o texto em cima e a imagem embaixo no celular */
    gap: 25px;
    margin: 20px auto 40px auto;
  }

  /* Libera as caixas para usarem a largura total da tela no celular */
  .historia-texto {
    max-width: 100%;
  }

  .historia-imagem {
    max-width: 100%;
    width: 100%;
  }

  .historia-imagem img {
    max-width: 280px;        /* Evita que a foto fique gigante quando estiver empilhada no celular */
  }
}
/*============================================================================================================*/



/*============================================== CONTROLA A PÁGINA REPRESENTANTES ===========================================*/
/* Container principal que junta os dois lados */
.representantes-container {
  display: flex;
  align-items: center;       /* Alinha o texto e a imagem verticalmente pelo centro */
  width: 90%;                /* Ocupa até 90% da tela em celulares (igual ao seu menu) */
  max-width: 650px;          /* ALINHAMENTO CRÍTICO: Exatamente o mesmo limite da linha azul do menu */
  margin: 15px auto 10px auto; /* Centraliza na tela e dá espaço seguro para o rodapé */
  padding: 0;                /* Remove paddings extras para se enquadrar perfeitamente */
  gap: 20px;                 /* Distância ideal para os blocos dividirem o espaço de 650px */
  box-sizing: border-box;
}

/* Configuração do bloco de texto (ocupa o lado esquerdo no Desktop) */
.representantes-texto {
  flex: 1.2;                 /* Dá uma leve prioridade de espaço para o texto explicativo */
  max-width: 55%;            /* Texto ocupa até 55% dos 650px */
}

.representantes-texto h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: #555555;
  font-size: 15px;           /* Tamanho de título harmonizado para o espaço de 650px */
  margin-bottom: 12px;
  font-weight: bold;
}

.representantes-texto h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #555555;
  font-size: 20px;           /* Tamanho de título harmonizado para o espaço de 650px */
  margin-bottom: 12px;
  font-weight: bold;
}

.representantes-texto p {
  font-family: Arial, sans-serif;
  color: #666666;
  font-size: 12px;
  line-height: 1.6;          /* Altura da linha para melhorar a leitura */
  text-align: justify;       /* Justifica o texto */
  font-weight: normal;
  margin-bottom: 10px;
}

/* Classe específica do texto "Fale conosco" */
.representantes-texto .fale-conosco-titulo {
  margin-top: 15px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555555;
}

/* Estilo do número de telefone em destaque */
.representantes-texto .telefone-destaque {
  color: #080853;            /* Aplica a cor */
  font-size: 20px;           /* Destaca bem o número de telefone */
  margin: 0;
  font-weight: bold;
}

/* ALINHAMENTO DO BOTÃO: Modifica o link para se comportar como bloco e pular para baixo do telefone */
.link-botao-representantes {
  display: inline-block;     /* Força o link a respeitar blocos e margens */
  margin-top: 5px;          /* Cria a distância exata abaixo do número de telefone */
  text-decoration: none;     /* Remove o sublinhado padrão de links */
}

/* Estilização real do botão "SOLICITE AQUI" */
.botao-representantes {
  display: inline-flex;      /* Garante o alinhamento perfeito do texto interno */
  background-color: #8c8c8c; /* Cor cinza escuro */
  color: #ffffff;            /* Texto branco */
  padding: 10px 20px;
  font-size: 12px;           /* Tamanho da fonte */
  font-family: Arial, sans-serif;
  border-radius: 4px;
 /* font-weight: bold;        /* negrito */
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease; /* Transição suave para o efeito de hover */
}

/* Efeito ao passar o mouse no botão */
.link-botao-representantes:hover .botao-representantes {
  background-color: #4a4a4a; /* Muda de cor ao passar o mouse */
}

/* Configuração do bloco de imagem (ocupa o lado direito no Desktop) */
.representantes-imagem {
  flex: 0.8;                 /* Ocupa um espaço ligeiramente menor que o texto */
  max-width: 40%;            /* Caixa da imagem ocupa até 40% dos 650px */
  display: flex;
  justify-content: center;
}

/* Torna a imagem do mapa da bandeira responsiva */
.representantes-imagem img {
  width: 100%;               /* Preenche totalmente os 40% reservados para ela */
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.05)); /* Sombra suave para destacar o mapa */
}

/* --------------------------------------- RESPONSIVIDADE: Ajustes específicos para telas de celulares e tablets --------------------*/
@media (max-width: 768px) {
  .representantes-container {
    flex-direction: column;  /* Empilha o texto em cima e a imagem embaixo em telas pequenas */
    gap: 30px;
    margin: 20px auto 40px auto;
  }

  /* CORREÇÃO: Libera as caixas de 45% para usarem a largura total da tela no celular */
  .representantes-texto {
    max-width: 100%;
    text-align: center;      /* Opcional: centraliza as informações no smartphone */
  }
  
  .representantes-texto p {
    text-align: center;      /* Centraliza os parágrafos no celular */
  }

  .representantes-imagem {
    max-width: 100%;
    width: 100%;
  }

  .representantes-imagem img {
    max-width: 250px;        /* Limita o mapa do Brasil para não estourar a tela do celular */
  }
}
/*============================================================================================================================*/



/* ================================================= CONTROLA A PÁGINA CONTATO =================================================== */

/* Container Geral do Formulário */
.contato-container {
  max-width: 650px;               /* Alinha perfeitamente a largura máxima do formulário com o menu superior */
  margin: 20px auto 60px auto;    /* Define as margens: 20px no topo, centraliza nas laterais e deixa 60px de barreira antes do rodapé */
  font-family: Arial, sans-serif; /* Aplica a família de letras padrão para a seção de contato */
  padding: 0 20px;              /* Cria uma margem interna de segurança de 20px nas laterais para telas pequenas */
  box-sizing: border-box;         /* Garante que o padding lateral não adicione largura extra aos 650px do container */
}

/* Título Principal da Página (ex: "Fale Conosco" ou "Contato") */
.contato-container h2 {
  color: #555555;                /* Aplica uma cor cinza escuro elegante ao título */
  font-size: 28px;              /* Define o tamanho da fonte bem visível para o título principal */
  margin-bottom: 0px;              /* Zera a margem inferior para o subtítulo vermelho vir logo abaixo */
  font-weight: bold;               /* Força a escrita do título a ficar em negrito */
}

/* Texto de orientações iniciais superiores do formulário */
.contato-container .instrucoes {
  color: #cc3333;               /* Define a cor vermelha idêntica à identidade visual do site */
  font-size: 13px;                 /* Tamanho de letra adequado para instruções destacadas */
  margin-bottom: 0px;              /* Zera a margem inferior para colar no próximo aviso */
}

/* Texto informativo sobre sigilo e segurança dos dados */
.contato-container .confidencial {
  color: #cc3333;                /* Mantém a cor vermelha de alerta e destaque */
  font-size: 13px;              /* Tamanho de letra idêntico ao das instruções superiores */
  margin-bottom: 20px;             /* Cria um espaço de 20px abaixo do aviso para o formulário começar */
}

/* Estrutura organizadora geral do Formulário */
.formulario-contato {
  display: flex;                   /* Ativa o modelo Flexbox para empilhar as linhas do formulário */
  flex-direction: column;          /* Organiza as linhas do formulário verticalmente uma abaixo da outra */
  gap: 15px;                       /* Cria uma distância padrão e fixa de 15px entre cada linha de campos */
}

/* Linhas estruturais que guardam múltiplos campos (ex: Nome e Sobrenome lado a lado) */
.form-row {
  display: flex;                   /* Ativa o Flexbox para alinhar os campos um ao lado do outro na horizontal */
  gap: 15px;                       /* Define uma distância firme de 15px entre um campo e outro da mesma linha */
  width: 100%;                     /* Força a linha a ocupar toda a largura disponível do container */
}

/* Divisão proporcional para linhas configuradas com até 4 colunas */
.columns-4 .form-group, .columns-4 .form-group-radio {
  flex: 1;                         /* Faz com que cada campo ocupe exatamente a mesma largura proporcional (25% cada) */
}

/* Divisão proporcional para linhas configuradas com 2 colunas */
.columns-2 .form-group {
  flex: 1;                         /* Faz com que os dois campos dividam a linha ao meio igualmente (50% cada) */
}

/* Bloco individual de cada campo (junta o texto indicador e a caixa de digitação) */
.form-group {
  display: flex;                   /* Ativa o Flexbox interno para organização do conjunto */
  flex-direction: column;          /* Organiza o label em cima e a caixa de digitação logo abaixo */
  gap: 5px;                        /* Define um espaço de 5px entre o texto indicador e a caixa de entrada */
}

/* Customização dos textos indicadores de cada campo (Labels) */
.form-group label, .form-group-radio label, .form-group-checkbox label {
  font-size: 12px;                 /* Define uma letra pequena e discreta para os títulos dos campos */
  color: #888888;                /* Aplica um tom de cinza médio para suavizar a leitura */
  font-weight: normal;             /* Mantém o texto em peso normal (sem negrito) */
}

/* Estilização real das caixas de entrada de texto comuns e da caixa de mensagens */
.form-group input, .form-group textarea {
  width: 100%;                      /* Obriga a caixa a preencher toda a largura da coluna reservada para ela */
  padding: 8px 12px;                /* Espaçamento interno: 8px em cima/baixo e 12px nas laterais para o texto não colar nas bordas */
  border: 1px solid #070707;      /* Cria uma borda fina cinza padrão ao redor da caixinha */
  border-radius: 4px;               /* Arredonda levemente os cantos das caixas em 4px */
  font-size: 13px;                  /* Tamanho da letra do texto digitado pelo usuário */
  color: #555555;                 /* Cor cinza escuro para o texto digitado ficar legível */
  box-sizing: border-box;           /* Garante que os paddings e bordas fiquem calculados dentro dos 100% de largura */
}

/* Customização da cor dos textos de exemplo temporários dentro das caixas (Placeholders) */
.form-group input::placeholder {
  color: #bbbbbb;                 /* Deixa o texto de exemplo bem clarinho para sumir ao iniciar a digitação */
}

/* Seções especiais para opções de seleção única (Radio) ou seleção múltipla (Checkbox) */
.form-group-radio, .form-group-checkbox {
  display: flex;                    /* Ativa o Flexbox para estruturar as opções */
  flex-direction: column;           /* Organiza o título da pergunta acima das bolinhas/quadradinhos */
  gap: 8px;                         /* Dá um espaço de 8px entre a pergunta e as opções reais abaixo dela */
}

/* Alinhamento horizontal das bolinhas ou quadradinhos de escolha */
.radio-options, .checkbox-options {
  display: flex;                    /* Ativa o Flexbox para dispor as opções lado a lado na mesma linha */
  gap: 15px;                        /* Cria uma distância padrão de 15px entre uma opção de escolha e a outra */
  align-items: center;              /* Alinha os círculos/quadrados verticalmente pelo meio com o texto deles */
  height: 100%;                     /* Ocupa toda a altura disponível da linha */
}

/* Estilização dos textos que acompanham as opções de rádio e checkbox */
.radio-options label, .checkbox-options label {
  display: flex;                    /* Ativa o Flexbox para colar a bolinha perfeitamente ao lado do texto */
  align-items: center;              /* Centraliza verticalmente a bolinha com o texto da opção */
  gap: 5px;                         /* Cria um espaço mínimo de 5px entre o círculo de seleção e a palavra */
  cursor: pointer;                  /* Transforma a seta do mouse em "mãozinha" indicando clique em cima da opção */
  color: #8c8c8c !important;      /* Força a cor cinza médio nas opções, ignorando outras heranças */
  font-weight: bold !important;     /* Força o texto das opções a ficar em negrito para facilitar a leitura */
  font-size: 12px;                  /* Define o tamanho padrão da fonte para as alternativas */
}

/* Bloco de posicionamento do Botão de Envio */
.form-submit {
  display: flex;                    /* Ativa o Flexbox para controle de alinhamento do botão */
  justify-content: flex-end;        /* Move e cola o botão inteiramente na extremidade direita do formulário */
  margin-top: 20px;                 /* Cria uma separação de 20px entre o último campo (mensagem) e o botão */
  margin-bottom: 10px;              /* Adiciona 10px de margem na base inferior para empurrar o limite do bloco para cima */
}

/* Customização estética do botão de envio "ENVIAR" */
.form-submit button {
  background-color: #8c8c8c;     /* Define a cor de fundo cinza escuro padrão para o botão */
  color: #ffffff;                 /* Aplica a cor branca para a palavra ENVIAR */
  border: none;                     /* Remove qualquer borda ou linha nativa do navegador */
  padding: 8px 15px;                /* Espaçamento interno: 8px em cima/baixo e 15px nas laterais para dar formato anatômico */
  font-size: 11px;                  /* Define o tamanho da fonte interna do botão */
  font-weight: bold;                /* Deixa a palavra ENVIAR em negrito para melhor destaque */
  border-radius: 6px;               /* Arredonda os cantos do botão em 6px dando um visual moderno */
  cursor: pointer;                  /* Transforma o ponteiro do mouse em "mãozinha de clique" ao passar por cima */
  transition: background 0.2s ease; /* Cria uma transição suave de 0.2 segundos na mudança de cor do fundo */
}

/* Efeito Hover acionado ao passar o mouse sobre o botão de envio */
.form-submit button:hover {
  background-color: #4a4a4a;    /* Escurece o fundo do botão ao passar o mouse, indicando ação de clique */
}

/* --------------------------------------- RESPONSIVIDADE: Ajustes específicos para telas de celulares e tablets --------------------*/
@media (max-width: 768px) {
  /* Altera as linhas horizontais de campos para formato vertical no celular */
  .form-row {
    flex-direction: column;     /* Empilha os campos um abaixo do outro para não esmagar em telas estreitas */
    gap: 15px;                  /* Mantém a distância segura de 15px entre as caixinhas empilhadas */
  }
  
  /* Cria um recuo seguro para as opções de marcação em telas pequenas */
  .radio-options, .checkbox-options {
    margin-top: 5px;            /* Dá um leve espaço de 5px no topo para afastar do título da pergunta */
  }
  
  /* Reajuste das margens gerais do container no smartphone */
  .contato-container {
    margin-bottom: 40px;        /* Reduz a margem inferior para 40px no celular para harmonizar com telas compactas */
  }
}
/* ===================================================================================================================================*/



/* ========================================== CONTROLA PAGINA TRANSPARÊNCIA SALARIAL ==========================================*/
.titulo-transparencia-salarial {
    display: flex;                        
    justify-content: center;              
    text-align: center; /* Ajustado para centralizar perfeitamente o título da página */                 
    gap: 10px;                            
    padding: 20px 0; /* Aumentado o espaçamento para dar respiro ao topo */
    margin: 0 auto 15px auto;
    font-family: Arial, sans-serif;
    color: hsl(192, 3%, 36%);
    font-size: 18px;
}

/* O container geral centraliza e limita a largura de toda a página */
.container-transparencia-salarial {
    width: 100%;           
    max-width: 650px;      /* Evita que o texto estique excessivamente em monitores grandes */
    margin: 0 auto;        /* Garante a centralização horizontal na tela */
    padding: 0 20px;       /* Margem de segurança para o texto não colar nas bordas do celular */
    box-sizing: border-box;
}

/* Container flexível para o bloco do banner */
.banner-wrapper {
    display: flex;         
    justify-content: center; 
    width: 100%;           
}

/* Bloco interno que guarda a imagem e os textos */
.banner-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* IMAGEM DE CABEÇALHO (LOGO TOPO)  */
.logo-topo {
    text-align: center;    
    width: 100%;           
    margin-bottom: 25px;   
}

.logo-topo img {
    max-width: 100%;       
    height: auto;          
    display: inline-block; 
}

/* BLOCO INFORMATIVO DE TEXTOS E PARÁGRAFOS */
.info-texto {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 11px;       /* Aumentado levemente de 10px para 11px para melhorar a leitura de textos jurídicos */
    line-height: 1.6;      
    color: #4a4a4a;        
    width: 100%;           
    text-align: left;      
}

.info-texto p {
    margin-bottom: 20px;   
}

/* CENTRALIZAÇÃO E AJUSTES DA LISTA (A, B, C...) */
.lista-wrapper {
    text-align: center;    
    width: 100%;           
    margin-bottom: 25px;   
}

.lista-alfabetica {
    list-style-type: lower-alpha; 
    display: inline-block; 
    text-align: left;      
    max-width: 100%;      /* Ajustado para não extrapolar o tamanho do container pai */
    padding-left: 20px;    
    box-sizing: border-box;
}

.lista-alfabetica li {
    margin-bottom: 15px;   
}

.lista-alfabetica li p {
    text-align: justify;   
    margin-bottom: 0;      
}

/* BOTÕES INFERIORES DE ARQUIVOS (LINKS) */
.arquivos-relatorio-igualdade-container {
    display: flex;         
    flex-direction: column; 
    align-items: center;   
    gap: 15px;             
    margin-top: 35px;      
    margin-bottom: 50px;   /* Adicionado espaçamento inferior para o último botão não colar no rodapé */
    width: 100%;           
}

.btn-arquivos {
    display: block;        
    text-align: center;    
    background-color: #8c8c8c; 
    color: #ffffff;        
    text-decoration: none; 
    padding: 14px 20px;    
    font-size: 13px;       /* Reduzido levemente de 14px para 13px para evitar quebras de linha no botão */
    font-weight: bold;     
    width: 100%;           
    max-width: 550px;      
    border-radius: 6px;    /* Adicionado cantos levemente arredondados para conversar com a identidade do site */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra leve para dar profundidade de botão */
    transition: background-color 0.2s ease, transform 0.1s ease; 
}

.btn-arquivos:hover {
    background-color: #333333;
    transform: translateY(-1px); /* Sutil efeito de elevação no hover */
}

/* --------------------------------------- RESPONSIVIDADE: Ajustes específicos para telas de celulares e tablets --------------------*/
@media (max-width: 600px) {
    .btn-arquivos {
        font-size: 11px;       /* Letra menor para caber em telas de celulares pequenos */
        padding: 12px 15px;
    }
    .info-texto {
        text-align: justify;   /* Justifica o texto no celular para melhor aproveitamento de tela */
    }
}
/*================================================================================================================================*/


/* ==========================================================================
   CONTROLA O RODAPÉ (FOOTER) - ESTRUTURA GERAL
   ========================================================================== */

/* Configurações Gerais da tag estrutural do Rodapé */
.rodape-principal {
  width: 100%;                  /* Força o rodapé a ocupar 100% da largura da tela */
  font-family: Arial, sans-serif;/* Define a família de letras padrão do rodapé */
  margin-top: auto;             /* Empurra o rodapé para o final da tela em páginas com pouco conteúdo */
}

/* 1. A Barra Cinza Escuro de Informações */
.barra-cinza-rodape {
  background-color: #8c8c8c;    /* Aplica a cor de fundo cinza médio/escuro */
  color: #ffffff;               /* Deixa a cor de todos os textos internos branca */
  padding: 25px 0;              /* Cria um espaçamento interno de 25px no topo e na base da barra */
  width: 100%;                  /* Garante que a barra cinza ocupe toda a largura horizontal */
  font-size: 10px;              /* Define o tamanho geral da letra para os textos da barra */
  display: flex;                /* Ativa o Flexbox para permitir alinhamentos internos */
  align-items: center;          /* Alinha perfeitamente todo o conteúdo no centro vertical da barra */
}

/* Container interno para centralizar os 4 blocos e limitar a largura */
.container-rodape {
  max-width: 1200px;            /* Limita a largura máxima do conteúdo para não espalhar demais em monitores gigantes */
  margin: 0 auto;               /* Centraliza esse bloco invisível de 1200px no meio do navegador */
  display: flex;                /* Ativa o Flexbox para colocar os 4 blocos de informações lado a lado */
  justify-content: space-between;/* Distribui o espaço restante igualmente entre os blocos */
  align-items: center;          /* Alinha os 4 blocos na mesma linha do horizonte (centro vertical) */
  padding: 0 20px;              /* Cria uma margem de segurança de 20px nas laterais em telas menores */
  gap: 30px;                    /* AJUSTADO: Distância de 30px para evitar quebras em telas de tablets/notebooks */
  box-sizing: border-box;       /* Protege o tamanho total do container contra quebras de layout */
}

/* ==========================================================================
   COLUNAS INTERNAS DO RODAPÉ
   ========================================================================== */

/* Coluna 1: Espaço reservado para a Marca (Logo POLYCRON) */
.rodape-marca {
  flex: 1;                      /* Faz a coluna da marca ter a capacidade de se ajustar ao espaço */
  max-width: 150px;             /* Limita a largura da marca em 150px para não empurrar os textos do meio */
  font-size: 14px;              /* Define o tamanho da letra caso use texto escrito */
  font-weight: bold;            /* Deixa o texto em negrito */
  letter-spacing: 1px;          /* Cria um espaçamento sutil de 1px entre cada letra */
  text-transform: uppercase;    /* Força todas as letras a ficarem em maiúsculas automaticamente */
  color: #ffffff;               /* Garante que a cor do texto da marca seja branca */
  display: flex;                /* Ativa o Flexbox interno para alinhar a imagem/texto */
  align-items: center;          /* Centraliza o conteúdo interno na linha vertical do meio */
}

/* Regras de segurança para a imagem da logo dentro da marca */
.rodape-marca img {
  width: 100%;                  /* Obriga a imagem do logotipo a se ajustar aos 150px da caixa dela */
  height: auto;                 /* Calcula a altura automaticamente para a imagem nunca distorcer */
  display: block;               /* Remove espaços em branco invisíveis abaixo da imagem */
}

/* Colunas 2 e 3: Blocos centrais de Informação (Endereço e Contatos) */
.rodape-coluna {
  display: flex;                /* Ativa o Flexbox interno para organizar as linhas */
  flex-direction: column;       /* Organiza as informações uma abaixo da outra (em formato de lista) */
  gap: 12px;                    /* Cria uma distância uniforme de 12px entre cada linha de texto */
  flex: 2.5;                    /* Expande as colunas centrais fazendo a marca ir para a esquerda */
}

/* Controla o espaçamento vertical das linhas quebradas por <br> no endereço */
.endereco-duas-linhas {
  line-height: 1.5;             /* Afasta a linha de cima da linha de baixo de forma elegante */
  display: inline-block;        /* Garante que a caixa de texto respeite o cálculo do espaçamento */
}

/* Ajuste de cada linha individual (Ícone + Texto) */
.rodape-item {
  display: flex;                /* Ativa o Flexbox para colocar o ícone e o texto lado a lado */
  align-items: flex-start;      /* Alinha o ícone pelo topo da primeira linha de texto */
  gap: 10px;                    /* Dá um espaço de 10px entre o desenho do ícone e o texto */
}

/* Customização dos ícones do Font Awesome no rodapé */
.rodape-item i {
  margin-top: 2px;              /* Desloca o ícone 2px para baixo para alinhar milimetricamente com a letra */
  font-size: 10px;              /* Define o tamanho dos desenhos dos ícones */
  width: 16px;                  /* CORRIGIDO: Era 16x (sintaxe errada), alterado para 16px estável */
  text-align: center;           /* Centraliza o desenho dentro do espaço de 16px */
}

/* Estilização dos links clicáveis (como e-mail e endereço) */
.rodape-item a {
  color: #ffffff;               /* Deixa o link na cor branca */
  text-decoration: none;        /* Remove a linha sublinhada padrão */
}

/* Efeito visual de link ativo ao passar o mouse */
.rodape-item a:hover,
.rodape-item a:hover .endereco-duas-linhas {
  text-decoration: underline;   /* Adiciona o sublinhado ao passar o mouse */
}

/* Coluna 4: Bloco da Direita (Redes Sociais e Link de Transparência) */
.rodape-direita {
  display: flex;                /* Ativa o Flexbox interno */
  flex-direction: column;       /* Organiza as redes sociais em cima e o link embaixo */
  gap: 15px;                    /* Cria um espaço de 15px entre as redes e o link inferior */
  align-items: flex-end;        /* CORRIGIDO: Era 'flex', mudado para 'flex-end' para alinhar à extrema direita */
  text-align: right;            /* Alinha os textos internos para o lado direito */
}

/* Linha horizontal que guarda as redes sociais */
.icones-redes {
  display: flex;                /* Coloca as bolinhas das redes lado a lado */
  gap: 10px;                    /* Espaçamento de 10px entre as bolinhas */
}

/* Customização dos botões circulares das redes sociais */
.icones-redes a {
  color: #8c8c8c;               /* Cor padrão do ícone interno (cinza igual ao fundo do rodapé) */
  background-color: #ffffff;    /* Cor de fundo da bolinha (branca) */
  width: 20px;                  /* Largura exata do círculo */
  height: 20px;                 /* Altura exata do círculo */
  border-radius: 50%;           /* Transforma a caixinha em uma bolinha perfeita */
  display: flex;                /* Ativa o Flexbox para centralizar o ícone interno */
  align-items: center;          /* Centraliza verticalmente */
  justify-content: center;      /* Centraliza horizontalmente */
  text-decoration: none;        
  font-size: 10px;              
  transition: color 0.3s ease;  /* Transição suave focada na mudança de cor do ícone */
}

/* Efeitos Hover Individuais das Redes (Cores Oficiais) */
.icones-redes a[aria-label="Facebook"]:hover { color: #1877f2; }
.icones-redes a[aria-label="Instagram"]:hover { color: #e1306c; }
.icones-redes a[aria-label="WhatsApp"]:hover { color: #25d366; }

/* Estilização do link de Transparência Salarial */
.link-transparencia {
  display: flex;                
  align-items: center;          
  gap: 8px;                     
  color: #ffffff;               
  text-decoration: none;        
}

.link-transparencia:hover {
  text-decoration: underline;   
}

/* ==========================================================================
   2. A BARRA INFERIOR DE DIREITOS AUTORAIS (COPYRIGHT)
   ========================================================================== */
.barra-direitos {
  width: 100%;                  /* Força a barra de direitos a ocupar toda a largura da tela */
  max-width: 1200px;            
  background-color: #f5f5f5;    /* Fundo cinza bem clarinho */
  margin: 10px auto;            /* Centraliza na tela horizontalmente */
  border-top: 1px solid rgba(248, 244, 244, 0.973); 
  padding: 10px 0;              /* Ajustado para 10px para dar uma boa área de respiro ao texto */
  text-align: center;           
  font-size: 8px;               
  letter-spacing: 0.5px;        
  text-transform: uppercase;     
  color: #1a1919;               
  box-sizing: border-box;
}

/* ==========================================================================
   RESPONSIVIDADE (MEDIA QUERY PARA CELULARES E TABLETS)
   ========================================================================== */
  @media (max-width: 768px) {
  
  /* Corrige o container do rodapé para forçar o empilhamento vertical total */
  .container-rodape {
    flex-direction: column !important; /* Obriga a quebra de linha das colunas */
    align-items: center !important;    /* Centraliza os elementos no meio do celular */
    text-align: center !important;     /* Alinha todos os textos no centro */
    gap: 35px !important;              /* Espaço confortável entre as informações empilhadas */
    width: 100% !important;
    padding: 0 20px !important;
  }

  /* Garante que as colunas não herdem larguras expandidas do desktop */
  .rodape-coluna {
    align-items: center !important;
    width: 100% !important;
    flex: none !important;             /* Desativa a expansão horizontal */
  }

  /* Força cada linha de informação (ícone + texto) a se ajustar no centro */
  .rodape-item {
    flex-direction: column !important; /* Coloca o ícone logo acima do texto no mobile */
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .rodape-item i {
    margin-top: 0 !important;          /* Zera o ajuste milimétrico do desktop */
  }

  /* Centraliza a coluna das redes sociais e transparência salarial */
  .rodape-direita {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Impede que o bloco da marca (logo POLYCRON branca) quebre o limite lateral */
  .rodape-marca {
    max-width: 130px !important;       /* Reduz levemente o tamanho no celular */
    margin: 0 auto !important;         /* Centraliza perfeitamente */
    flex: none !important;
  }

  /* Garante que o texto de Copyright fique confortável e não colado na borda física do aparelho */
  .barra-direitos {
    padding: 12px 15px !important;
    font-size: 7.5px !important;
    width: 100% !important;
  }
}

/* =================================================================================================*/