/* ---- Definição da Identidade Visual (Variáveis) ---- */
:root {
    --cor-amarelo: #FABC01;
    --cor-vermelho: #F9040A;
    --cor-azul: #023442;
    --cor-cinza: #DBDBDB;
    --cor-branco: #FFFFFF;
    --cor-texto: #333333;

    --fonte-titulos: 'Oswald', sans-serif;
    --fonte-texto: 'Montserrat', sans-serif;
}

/* ---- Estilos Gerais ---- */
body {
    font-family: var(--fonte-texto); /* Usando a variável de fonte */
    margin: 0;
    padding: 0;
    color: var(--cor-texto);
}

/* ---- Cabeçalho e Navegação ---- */
header {
    background-color: var(--cor-azul); /* Alterado para a cor azul */
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* A borda inferior já não é necessária com o fundo escuro */
}

header h1 {
    margin: 0;
    color: var(--cor-amarelo); /* Alterado para a cor amarela da identidade visual */
    font-family: var(--fonte-titulos);
    font-size: 2em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin-left: 25px;
}

nav a {
    text-decoration: none;
    color: var(--cor-branco); /* Alterado para branco */
    font-weight: bold;
    font-size: 1.1em;
    transition: color 0.3s ease; /* Transição suave para o hover */
}

nav a:hover {
    color: var(--cor-amarelo); /* Efeito de hover com o amarelo */
}

/* ---- Conteúdo Principal ---- */
main {
    padding: 40px;
}

section {
    margin-bottom: 40px;
}

/* ---- Estilos específicos das secções ---- */
#banner {
    background-color: var(--cor-azul); /* Fundo com o azul da paleta */
    color: var(--cor-branco);
    text-align: center;
    padding: 80px 20px;
}

#banner h2 {
    margin-top: 0;
    font-family: var(--fonte-titulos);
    font-size: 3em;
}

.cta-button {
    background-color: var(--cor-amarelo);
    color: var(--cor-azul);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-family: var(--fonte-titulos);
    font-size: 1.2em; /* <<< ADICIONE ESTA LINHA */
    /* ...etc... */
}

.cta-button:hover {
    background-color: var(--cor-branco);
    color: var(--cor-amarelo);
}


#servicos h3 {
    text-align: center;
    color: var(--cor-azul);
    font-family: var(--fonte-titulos);
    font-size: 2.5em;
    margin-bottom: 40px;
}

.servicos-container {
    display: flex;
    justify-content: space-around;
}

.servico-item {
    width: 30%;
    text-align: center;
}

.servico-item h4 {
    font-family: var(--fonte-titulos);
    color: var(--cor-azul);
    font-size: 1.5em;
}

/* ---- Estilos Finais do Rodapé (Layout com Posição Absoluta) ---- */
footer {
    background-color: var(--cor-azul); /* Garantindo o fundo azul */
    color: var(--cor-branco);
    padding: 50px 20px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Alinha o logo verticalmente */
    position: relative; /* PASSO 1: O container vira a "âncora" de posição */
    min-height: 50px;   /* Garante uma altura mínima para tudo caber */
}

.footer-logo {
    /* O logo fica na esquerda por padrão, não precisa de mais regras de posição */
    display: flex;
    align-items: center;
}

.footer-logo img {
    height: 100px;
    margin-right: 10px;
}

.footer-logo span {
    font-family: var(--fonte-titulos);
    font-size: 2.0em;
    color: var(--cor-amarelo);
}

.footer-info {
    position: absolute;      /* PASSO 2: O texto é "descolado" do fluxo */
    left: 50%;               /* PASSO 3: A borda esquerda do texto vai para o meio do container */
    transform: translateX(-50%); /* PASSO 4: O bloco de texto recua metade da sua própria largura */
    text-align: center;
}

.footer-info p {
    margin: 4px 0;
    font-size: 0.9em;
    color: var(--cor-cinza);
}

/* A media query para telas pequenas continua útil */
@media (max-width: 768px) {

/* --- Ajustes Gerais para Mobile --- */
main {
    padding: 20px; /* Reduz o espaçamento lateral em telas pequenas */
}

h2, h3 {
    font-size: 1.8em !important; /* Reduz o tamanho padrão dos títulos */
}

#banner h2 {
    font-size: 2.2em !important; /* Ajuste específico para o título do banner */
}


/* --- Ajustes no Cabeçalho e Menu --- */
header {
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 0;
    width: 100%;
}

nav li {
    list-style: none;
    margin-left: 0; /* CORREÇÃO PRINCIPAL: Remove a margem que causava a quebra errada */
}

/* Força a quebra de linha após o terceiro item */
nav li:nth-child(3)::after {
    content: '';
    flex-basis: 100%;
    width: 0;
    height: 0;
}

/* Dimensiona os 3 primeiros botões para preencher a primeira linha */
nav li:nth-child(-n+3) {
    flex-basis: calc(33.33% - 4px); /* Define a largura base de cada botão */
    flex-grow: 1;                  /* Permite que o botão cresça para preencher o espaço */
}

/* Dimensiona os 2 últimos botões para preencher a segunda linha */
nav li:nth-child(n+4) {
    flex-basis: calc(50% - 3px);   /* Define a largura base de cada botão */
    flex-grow: 1;                  /* Permite que o botão cresça para preencher o espaço */
}

nav a {
    /* Estilos visuais do botão (mantidos da versão desktop) */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 10px 5px; /* Padding reduzido para caber melhor em telas pequenas */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--cor-branco);
    font-weight: bold;
    
    /* Ajustes de layout para mobile */
    display: block; /* Garante que o link ocupe o espaço do 'li' */
    text-align: center;
    width: 100%;
    box-sizing: border-box; /* Garante que o padding não quebre o layout */
}

/* --- Ajustes para Layouts de Coluna --- */

/* Faz com que todos os containers que eram lado a lado fiquem empilhados */
.feature-container,
.contact-page-container,
.portfolio-grid {
    flex-direction: column;
    gap: 30px;
}

/* Faz com que os itens dentro desses containers ocupem 100% da largura */
.servico-item,
.project-card,
.feature-image,
.feature-text {
    width: 100%;
}

/* Permite que o container dos serviços quebre a linha dos itens */
.servicos-container {
    flex-wrap: wrap;         /* A propriedade chave que permite a quebra de linha */
    justify-content: center; /* Centraliza os cartões */
}

/* Define um tamanho para os cartões, permitindo que 2 caibam por linha */
.servico-item {
    flex-basis: 45%;     /* Define a largura base para um pouco menos da metade */
    flex-grow: 1;        /* Permite que os itens cresçam para ocupar o espaço */
    min-width: 280px;    /* Garante uma largura mínima para não espremer demais */
}

/* Ajustes específicos para o formulário de contato */
.form-container {
    border-radius: 20px; /* Reduz o arredondamento que pode parecer excessivo no mobile */
}

.contact-form .cta-button {
    width: 100%; /* Botão do formulário ocupa a largura toda */
}

/* Ajuste na página "Sobre Nós" para inverter a ordem em mobile se necessário */
.feature-container.row-reverse {
    /* Força o empilhamento na ordem inversa: texto primeiro, imagem depois */
    flex-direction: column-reverse;
}

.feature-container.row-reverse .feature-text {
    /* Garante que o texto seja um bloco de largura total */
    width: 100%;
    display: block;
}

.feature-container.row-reverse .feature-image {
    /* Reseta e força o container da imagem a ser um bloco */
    width: 100%;
    display: block;
    float: none;
    position: static;
    margin-bottom: 30px; /* Adiciona espaço entre o texto acima e a imagem abaixo */
}
/* Ajustes na página de projetos */
.project-card {
    width: auto; /* Remove a largura fixa de 350px */
}

    .footer-container {
       /* Em telas pequenas, voltamos a empilhar para não haver sobreposição */
       flex-direction: column;
       gap: 30px;
       min-height: auto; /* Altura automática */
    }
    .footer-info {
        position: static; /* O texto volta ao fluxo normal */
        transform: none; /* Removemos o truque de centralização */
    }
}

/* ---- Estilos da Página de Projetos ---- */
#portfolio {
    text-align: center;
}

#portfolio h2 {
    font-family: var(--fonte-titulos);
    color: var(--cor-azul);
    font-size: 2.5em;
}

.portfolio-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a linha de baixo */
    justify-content: center; /* Centraliza os projetos na grelha */
    gap: 20px; /* Espaço entre os projetos */
    margin-top: 40px;
}

.project-card {
    background-color: #f9f9f9;
    border: 1px solid var(--cor-cinza);
    border-radius: 8px;
    width: 350px; /* Largura fixa para cada cartão de projeto */
    overflow: hidden; /* Garante que a imagem não saia do cartão arredondado */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra subtil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px); /* Efeito de levantar o cartão */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Sombra mais pronunciada */
}

.project-card img {
    width: 100%; /* Faz a imagem ocupar toda a largura do cartão */
    height: auto;
    display: block;
}

.project-info {
    padding: 20px;
    text-align: left;
}

.project-info h4 {
    font-family: var(--fonte-titulos);
    color: var(--cor-azul);
    margin-top: 0;
    margin-bottom: 10px;
}

.project-info p {
    margin: 0;
    color: #666;
}

/* ---- Estilos da Página do Portal do Cliente ---- */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

.login-box {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px; /* Largura máxima da caixa de login */
    text-align: center;
}

.login-box h2 {
    font-family: var(--fonte-titulos);
    color: var(--cor-azul);
    margin-top: 0;
    margin-bottom: 10px;
}

.login-form .input-group {
    margin-bottom: 20px;
    text-align: left;
}

.login-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.login-form input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--cor-cinza);
    border-radius: 5px;
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

/* Estiliza o botão "Entrar" para ocupar a largura total */
.login-form .cta-button {
    width: 100%;
    margin-top: 10px;
}

/* ---- Ajustes no Logótipo do Cabeçalho ---- */

.logo {
    display: flex; /* Alinha o logo e o texto na horizontal */
    align-items: center; /* Centraliza verticalmente o logo e o texto */
}

.logo-img {
    height: 70px; /* Define a altura do logo. Pode ajustar se necessário */
    margin-right: 10px; /* Cria um pequeno espaço entre o logo e o nome */
}

/* ---- Estilos do Banner Modernizado ---- */
#banner {
    position: relative; /* Necessário para o efeito de sobreposição */
    color: var(--cor-branco);
    text-align: center;
    padding: 120px 20px;
    background-image: url('Banner.jpg'); /* IMAGEM DE EXEMPLO */
    background-size: cover; /* Faz a imagem cobrir todo o espaço */
    background-position: center; /* Centraliza a imagem */
}

.banner-overlay {
    position: absolute; /* Cria a camada de sobreposição */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 52, 66, 0.7); /* Nosso azul (--cor-azul) com 70% de opacidade */
    z-index: 1; /* Garante que a camada fique por cima da imagem */
}

.banner-content {
    position: relative; /* Posição relativa para o conteúdo */
    z-index: 2; /* Garante que o conteúdo fique por cima da camada de sobreposição */
}


/* ---- Estilos da Secção Nossos Números ---- */
#numeros {
    background-color: #f4f4f4; /* Um fundo cinza bem claro para destacar */
    padding: 40px 20px;
}

.numeros-container {
    display: flex;
    justify-content: space-around; /* Distribui os itens igualmente */
    max-width: 900px;
    margin: 0 auto; /* Centraliza o container */
    text-align: center;
}

.numero-item .numero-destaque {
    font-family: var(--fonte-titulos);
    font-size: 3.5em;
    color: var(--cor-amarelo); /* Destaque em amarelo para os números */
    display: block;
}

.numero-item p {
    font-size: 1.1em;
    color: var(--cor-azul);
    margin-top: 5px;
}

/* ---- Estilos Refinados dos Cartões de Serviço ---- */

#servicos {
    padding: 40px 20px;
}

.servico-item {
    background-color: #ffffff; /* Fundo branco para o cartão */
    border: 1px solid var(--cor-cinza); /* Borda sutil */
    border-radius: 8px; /* Cantos arredondados */
    padding: 30px;
    width: 30%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Sombra muito leve */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.servico-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Estilo para os ícones */
.servico-item i {
    font-size: 3em; /* Tamanho do ícone */
    color: var(--cor-amarelo); /* Ícone na cor amarela da identidade */
    margin-bottom: 20px; /* Espaço entre o ícone e o título */
}

/* ---- 1. Estilo do Menu com Botões Individuais ---- */
nav {
    /* O container agora não tem mais estilo próprio, apenas organiza os botões. */
}

nav ul {
    display: flex; /* Garante que os botões fiquem em linha */
    gap: 2px; /* Adiciona um pequeno espaço horizontal entre cada botão */
}

nav a {
    text-decoration: none;
    color: var(--cor-branco);
    font-weight: bold;
    font-size: 1em; /* Ajustei um pouco o tamanho para caber melhor */
    background-color: rgba(255, 255, 255, 0.1); /* O fundo agora é individual */
    padding: 10px 20px; /* Espaçamento interno de cada botão */
    border-radius: 50px; /* Bordas arredondadas para cada botão */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda individual */
    display: block; /* Essencial para o padding funcionar corretamente */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
}

nav a:hover {
    background-color: var(--cor-amarelo); /* O fundo do botão muda no hover */
    color: var(--cor-azul); /* O texto do botão muda no hover */
}

/* ---- 2. Efeito de Gradiente no Banner ---- */
.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Substituindo a cor sólida por um gradiente */
    background: linear-gradient(to top, rgba(2, 52, 66, 0.9) 0%, rgba(2, 52, 66, 0.5) 100%);
    z-index: 1;
}


/* ---- 3. Estilos da Nova Secção e Página "Seja um Cliente" ---- */

/* Estilo para a chamada de ação na página inicial */
#cta-cliente {
    background-color: #f4f4f4; /* Um fundo neutro para a secção inteira */
    padding: 80px 20px; /* Aumentamos o espaçamento para o cartão respirar */
}

/* Este é o nosso novo cartão */
#cta-cliente .cta-content {
    max-width: 900px; /* Largura máxima do cartão */
    margin: 0 auto; /* Centraliza o cartão na página */
    background-color: var(--cor-amarelo); /* Cor de fundo amarela para o cartão */
    color: var(--cor-azul);
    padding: 50px; /* Espaçamento interno do cartão */
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 8px 16px rgba(0,0,0,0.1); /* Sombra para dar profundidade */
    text-align: center;
}

#cta-cliente h3 {
    font-family: var(--fonte-titulos);
    font-size: 2.5em;
    margin-top: 0;
}

#cta-cliente .cta-button {
    background-color: var(--cor-azul);
    color: var(--cor-branco);
    border-color: var(--cor-azul);
}

#cta-cliente .cta-button:hover {
    background-color: var(--cor-branco);
    color: var(--cor-azul);
}

/* Estilo para o container do formulário na nova página */
.form-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 40px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.form-container h2 {
    text-align: center;
    font-family: var(--fonte-titulos);
    color: var(--cor-azul);
    font-size: 2.5em;
}

.form-container p {
    text-align: center;
    margin-bottom: 30px;
}

.contact-form .input-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--cor-cinza);
    border-radius: 5px;
    box-sizing: border-box; 
    font-family: var(--fonte-texto);
}

.contact-form .cta-button {
    width: 50%;
    margin-top: 10px;
    display: block; 
    margin-left: auto;
    margin-right: auto; 
}

/* ---- Estilos Reutilizáveis da Página Sobre Nós (Versão Final Corrigida) ---- */

.feature-section {
    padding: 80px 20px;
}

.feature-section.alt-bg {
    background-color: #f9f9f9;
}

.feature-container {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.feature-container.row-reverse {
    flex-direction: row-reverse;
}

.feature-image {
    flex: 1;
}

.feature-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.feature-text {
    flex: 1.2;
}

.feature-text.long-text {
    flex: 1.5;
}

/* Container que agrupa Título e Ícone */
.feature-title-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Estilo do Ícone */
.feature-text i {
    font-size: 2em;
    color: var(--cor-amarelo);
}

/* Estilo do Título (h2 e h3) */
.feature-text h2,
.feature-text h3 {
    font-family: var(--fonte-titulos);
    color: var(--cor-azul);
    font-size: 2.5em;
    margin: 0;
    text-align: center;
}

/* Regra que formata TODOS os parágrafos */
.feature-text p {
    text-align: justify;
    line-height: 1.6;
    text-indent: 30px; /* <<< CORREÇÃO 2: Recuo de primeira linha para todos */
}

/* A regra .long-text p se tornou desnecessária, podemos removê-la depois */

/* Estilos da Lista de Valores */
.feature-text ul {
    list-style-position: inside;
    padding-left: 0;
}

.feature-text li {
    text-align: left;
    margin-bottom: 15px;
}

/* Estilo Específico para a logo na introdução */
.feature-section .feature-image img[src="03. LOGO A² SEM FUNDO.png"] {
    max-width: 250px;
    margin: 0 auto;
    display: block;
}

/* ---- Estilos da Página "Seja um Cliente" (Versão com Ajustes Finos) ---- */

.contact-page-container {
    display: flex;
    gap: 60px; /* AJUSTE 1: Aumentei o espaço entre as duas colunas */
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

.form-column {
    flex: 1.5; 
}

.info-column {
    flex: 1;
    padding-top: 40px;
    text-align: center; /* AJUSTE 1: Centraliza os elementos dentro da coluna, incluindo a logo */
}

/* Deixando o formulário com cantos mais arredondados */
.form-container {
    border-radius: 100px; 
}

.contact-form select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--cor-cinza);
    border-radius: 5px;
    box-sizing: border-box; 
    font-family: var(--fonte-texto);
    background-color: white;
    cursor: pointer;
}

.info-logo {
    max-width: 200px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto; /* Garante a centralização da imagem */
    margin-right: auto; /* Garante a centralização da imagem */
}

/* AJUSTE 2: Estilos para o parágrafo de texto da coluna de informações */
.info-column p {
    text-align: justify;
    text-indent: 30px;
    line-height: 1.6;
    margin-bottom: 30px; /* AJUSTE 3: Aumenta o espaço abaixo do parágrafo */
}

.info-column h3 {
    font-family: var(--fonte-titulos);
    color: var(--cor-azul);
    font-size: 2em;
}

.contact-channel {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    text-align: left; /* Garante que o texto dentro dos canais fique alinhado à esquerda */
}

.contact-channel i {
    font-size: 2em;
    color: var(--cor-amarelo);
}

.contact-channel span {
    display: block;
    font-weight: bold;
    font-size: 0.9em;
    color: #666;
}

.contact-channel a {
    text-decoration: none;
    color: var(--cor-azul);
    font-size: 1.1em;
    font-weight: bold;
}

.trust-icons {
    margin-top: 40px;
    color: #666;
    font-size: 0.9em;
    text-align: left; /* Alinha os ícones de confiança à esquerda */
}

.trust-icons div {
    margin-bottom: 10px;
}

.trust-icons i {
    color: var(--cor-amarelo);
    margin-right: 8px;
}

/* Ajuste de espaçamento para o botão na secção CTA-Cliente */
#cta-cliente .cta-button {
    display: inline-block; /* Garante que o elemento aceite margens verticais */
    margin-top: 10px;
}

/* --- Estilos da Página "Em Construção" (Versão Corrigida) --- */

.construcao-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 60vh;
    padding: 40px 20px;
    color: var(--cor-azul);
}

.construcao-container h2 {
    font-family: var(--fonte-titulos);
    font-size: 2.5em;
    margin-top: 40px;
    margin-bottom: 10px;
}

.construcao-container p {
    font-size: 1.1em;
    max-width: 500px;
}

/* Estrutura principal da Grua */
.grua {
    position: relative;
    width: 300px;
    height: 200px;
}

.base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 10px;
    background-color: #333;
}

.torre {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 180px; /* A torre tem 180px de altura */
    background-color: var(--cor-azul);
    z-index: 1;
}

/* Unidade que gira (contém braço, cabine, contrapeso) */
.unidade-giratoria {
    position: absolute;
    top: 10px; /* POSIÇÃO CORRIGIDA: 10px do topo do container .grua */
    left: 150px; /* Metade da largura do container .grua */
    width: 1px;
    height: 1px;
    transform-origin: center 10px; /* Ponto de rotação no topo da torre */
    animation: movimentoGrua 5s ease-in-out infinite alternate;
    z-index: 2;
}

/* Braço principal (Jib) */
.braco {
    position: absolute;
    top: 0; /* POSIÇÃO CORRIGIDA */
    left: -6px; /* POSIÇÃO CORRIGIDA: Centralizado com a torre */
    width: 200px;
    height: 12px; /* Altura aumentada para a treliça */
    /* EFEITO TRELIÇA CORRIGIDO: Usando gradientes */
    background:
        linear-gradient(135deg, var(--cor-azul) 3px, transparent 3px),
        linear-gradient(-135deg, var(--cor-azul) 3px, transparent 3px),
        linear-gradient(45deg, var(--cor-azul) 3px, transparent 3px),
        linear-gradient(-45deg, var(--cor-azul) 3px, transparent 3px);
    background-color: var(--cor-amarelo);
    background-size: 12px 12px;
}

/* Cabine do Operador */
.cabine {
    position: absolute;
    top: 12px; /* POSIÇÃO CORRIGIDA: Abaixo do braço */
    left: -10px;
    width: 25px;
    height: 20px;
    background-color: var(--cor-cinza);
    border: 2px solid var(--cor-azul);
}

/* Contrapeso */
.contrapeso {
    position: absolute;
    top: -5px; /* POSIÇÃO CORRIGIDA: Alinhado com o braço */
    right: 5px; /* POSIÇÃO CORRIGIDA: Atrás da torre */
    width: 60px;
    height: 25px;
    background-color: #555;
}

/* Cabo e Gancho */
.cabo {
    position: absolute;
    top: 12px; /* Abaixo do braço */
    right: 40px;
    width: 2px;
    height: 30px;
    background-color: #999;
}

.gancho {
    position: absolute;
    top: 42px; /* Abaixo do cabo */
    right: 35px;
    width: 12px;
    height: 6px;
    border: 2px solid #999;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

/* Keyframes: Define o movimento de rotação (mais sutil) */
@keyframes movimentoGrua {
    from {
        transform: rotate(-3deg);
    }
    to {
        transform: rotate(3deg);
    }
}