body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #f5f7fa;
}

header {
    /*background: #0f172a;*/
    background: #ffffff;
    padding: 16px 40px;
    color: white;
    display: flex;
    justify-content: space-between;   

    align-items: center;
    background-color: #ffffff; /* Ou a cor que você definiu */

    /* ADICIONE ESTA LINHA PARA A BORDAR CINZA */
    border-bottom: 1px solid #dddddd ; 
    
    /* Opcional: Adiciona um leve respiro entre o menu e o conteúdo abaixo */
    margin-bottom: 0; 

    position: relative; /* Necessário para posicionar a linha dentro dele */
    padding-bottom: 20px; /* Dá um espaço extra para a linha respirar */
}

.linha-decorativa {
    position: absolute;
    height: 1px;       /* Fininha */
    width: 100%;      /* Você escolhe o comprimento dela */
    background-color: #cccccc; /* Cinza claro */
    
    /* POSICIONAMENTO MANUAL */
    bottom: 5px;       /* Distância do fundo (suba ou desça aqui) */
    left: 0px;        /* Alinhada com o seu logo orange */
}


header a {
    color: rgb(7, 7, 7);
    text-decoration: none;
    margin-left: 20px;
}

.features {
    background-color: #ffffff; /* Fundo Branco */
    padding: 60px 0;
    text-align: center;
}

.features .container {
    display: flex;             /* Coloca os itens lado a lado */
    justify-content: space-around; /* Distribui o espaço entre eles */
    flex-wrap: wrap;           /* Se a tela for pequena, eles "quebram" para baixo */
}

.feature-item {
    flex: 1;                   /* Cada item ocupa o mesmo espaço */
    min-width: 250px;          /* Largura mínima antes de quebrar linha */
    padding: 20px;
    margin: 10px;
}

.feature-item img {
    width: 80px;               /* Tamanho fixo para os seus ícones/imagens */
    height: auto;
    margin-bottom: 15px;
    /* Dica: use filtros se quiser que as imagens fiquem levemente laranjas */
    /* filter: sepia(1) saturate(5) hue-rotate(330deg); */
}

.feature-item h3 {
    color: #ff6600;            /* Título em Laranja para manter a identidade */
    margin-bottom: 10px;
}

.hero {
    /* Substitua 'imagem-fundo.jpg' pelo nome do seu arquivo */
    background: linear-gradient(rgba(255, 102, 0, 0.8), rgba(230, 92, 0, 0.8)), 
                url('imagens/fundo.jpg');
    
    background-size: cover;       /* Faz a imagem ocupar todo o espaço */
    background-position: center;   /* Centraliza a imagem */
    background-attachment: fixed; /* Opcional: efeito de fundo parado ao rolar */
    
    color: #ffffff;
    padding: 30px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    /* ADICIONE APENAS ESTAS DUAS LINHAS: */
    position: relative; /* Isso cria o "estacionamento" para os objetos */
    overflow: hidden;  /* Isso impede que os objetos "vazem" para fora da seção */

    z-index: 1; /* Define a base */
}

.hero h1 {
    font-size: 2rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3); /* Sombra no texto para destacar */
    margin-bottom: 10px;
}

.hero p {
    font-size: 1rem;
    margin-bottom: 20px;
}

.hero-content {
    position: relative;
    z-index: 10; /* SEMPRE maior que as imagens para o texto ficar na frente */
}

.objeto-flutuante {
    position: absolute;
    z-index: 5;      /* Fica à frente do fundo laranja */
    opacity: 1;      /* Cor total, sem transparência herdada */
    
    /* GARANTE O TAMANHO PADRÃO */
    width: auto;     /* Largura original do arquivo */
    height: auto;    /* Altura proporcional ao arquivo */
    max-width: 200px; /* Limite máximo para não cobrir o site todo */
    
    pointer-events: none; /* O mouse ignora a imagem */
    
}

/* Regras EXCLUSIVAS para a imagem com id="foto-especifica" */
#foto-especifica {
    opacity: 0.5;      /* Esta fica mais transparente que as outras */
    top: 37%;          /* Posição única */
    left: 40%;
    z-index: 2;        /* Garante que não herde transparência do fundo */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2)); /* Sombra suave para profundidade */
}

/* Regras EXCLUSIVAS para a imagem com id="foto-especifica" */
#laranja-fundo {
    opacity: 0.5;      /* Esta fica mais transparente que as outras */
    top: 37%;          /* Posição única */
    left: 40%;
    z-index: 2;        /* Garante que não herde transparência do fundo */
    width: 1024;     /* Largura original do arquivo */
    height: 390;    /* Altura proporcional ao arquivo */
}

/* Regras EXCLUSIVAS para a imagem com id="folhas" */
#folhas {
    opacity: 1;      /* Esta fica mais transparente que as outras */
    top: 10%;          /* Posição única */
    left: -2%;
    z-index: 1;        /* Garante que não herde transparência do fundo */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}

/* Regras EXCLUSIVAS para a imagem com id="logo" */
#logo {
    opacity: 1;      /* Esta fica mais transparente que as outras */
    top: 0%;          /* Posição única */
    left: 1%;
    z-index: 7;        /* Garante que não herde transparência do fundo */
    filter: drop-shadow(0 2px 2px rgb(0, 0, 0));
}

/* Regras EXCLUSIVAS para a imagem com id="ISOWIZARD" */
#ISOWIZARD {
    opacity: 1;      /* Esta fica mais transparente que as outras */
    top: 30%;         /* Posição única */
    left: 4%;
    z-index: 7;      /* Garante que não herde transparência do fundo */
}

.obj-laranja { top: 5%; left: 30%;} /*transform: rotate(15deg);}*/
.obj-folhas { top: -10%; left: -2%; z-index: 1;} /*transform: rotate(15deg);}*/
.obj-orange { top: 5%; left: 3%; filter: drop-shadow(0 2px 6px rgb(255, 255, 255)); z-index: 7;}
.obj-iso { top: 5%; left: 5%;} 

.container {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
}

.card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.btn {
    background: #2563eb;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn:hover {
    background: #1e40af;
}

input, select {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 6px;
    border: 1px solid #ccc;
}

/* style.css */
:root {
    --primary-color: #ff6600; /* Laranja Principal */
    --secondary-color: #e65c00; /* Laranja Escuro para Hover */
    --text-color: #333;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; color: var(--text-color); }

.container { max-width: 900px; margin: 50px auto; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* Botões Laranja */
.btn {
    background-color: var(--primary-color);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s;
}

.btn:hover { background-color: var(--secondary-color); }

input:focus { border-color: var(--primary-color); outline: none; }