/* RODAPÉ RACING TEAM */
.racing-footer {
    width: 100%; /* ocupa toda a largura da página */
    background: linear-gradient(90deg, #020814 0%, #041332 45%, #0b1f57 100%); /* cria um degradê preto e azul */
    padding: 15px 75px 12px; /* define o espaço interno do rodapé */
}

/* ORGANIZAÇÃO DO RODAPÉ */
.racing-container {
    width: 100%; /* faz o conteúdo ocupar toda a largura disponível */
    max-width: none; /* remove o limite de largura */
    margin: 0; /* impede que o bloco fique centralizado */
    display: grid; /* ativa o CSS Grid */
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.8fr); /* mantém esquerda maior e projeto à direita */
    gap: 0 70px; /* espaço entre as colunas */
    align-items: start; /* alinha os elementos no topo */
}

/* IDENTIDADE DO RODAPÉ */
.racing-topo {
    grid-column: 1 / 2; /* mantém na primeira coluna */
    justify-self: start; /* alinha à esquerda */
    width: 100%; /* ocupa a largura disponível */
    max-width: none; /* remove limitação para não puxar o bloco para o centro */
    margin: 0 0 5px; /* mantém pequeno espaço embaixo */
    text-align: left; /* garante o alinhamento à esquerda */
}

/* TEXTO FÓRMULA 1 */
.racing-mini {
    display: inline-block; /* permite controlar os espaçamentos */
    font-size: 14px; /* define o tamanho da fonte */
    letter-spacing: 5px; /* aumenta a distância entre as letras */
    color: #dce7ff; /* utiliza azul muito claro */
    margin-bottom: 10px; /* separa o texto do título principal */
}


/* TÍTULO ALÉM DA VELOCIDADE */
.racing-topo h2 {
    font-size: clamp(32px, 3.3vw, 58px); /* adapta o título ao tamanho da tela, mantendo o limite de 58px */
    line-height: 1.1; /* mantém o título compacto */
    font-style: italic; /* inclina as letras */
    font-weight: 800; /* destaca o título */
    color: #f5f7ff; /* mantém a cor branca */
    margin-bottom: 6px; /* separa o título da descrição */
}


/* PALAVRA VELOCIDADE EM AZUL */
.racing-topo h2 span {
    color: #3b82ff; /* destaca a palavra VELOCIDADE em azul */
}

/* DESCRIÇÃO DO SITE */
.racing-topo p {
    font-size: 16px; /* define o tamanho do texto */
    line-height: 1.6; /* melhora o espaçamento entre linhas */
    color: #d5def3; /* utiliza azul acinzentado claro */
    max-width: 520px; /* limita a largura do parágrafo */
}

/* LINHA DIVISÓRIA */
.racing-divisor {
    grid-column: 1 / -1; /* faz a linha ocupar todas as colunas */
    height: 1px; /* define a espessura da linha */
    background: rgba(109, 149, 255, 0.22); /* cria uma linha azul transparente */
    margin: 6px 0 12px; /* define os espaços acima e abaixo da linha */
}

/* ÁREA DOS DESENVOLVEDORES */

.racing-equipe {
    grid-column: 1 / 2; /* posiciona os desenvolvedores na primeira coluna */
    justify-self: start; /* alinha o bloco à esquerda */
}

/* TÍTULOS DAS INFORMAÇÕES */
.racing-equipe h3,.racing-projeto h3 {
    font-size: 15px; /* define o tamanho dos títulos */
    letter-spacing: 3px; /* separa as letras */
    color: white; /* deixa os títulos brancos */
    margin-bottom: 8px; /* aproxima os títulos das informações */
    position: relative; /* permite posicionar o detalhe azul */
    padding-left: 14px; /* cria espaço para o detalhe azul */
}

/* DETALHE AZUL DOS TÍTULOS */
.racing-equipe h3::before,.racing-projeto h3::before {
    content: ""; /* cria um elemento decorativo vazio */
    position: absolute; /* posiciona o detalhe em relação ao título */
    left: 0; /* encosta o detalhe na esquerda */
    top: 3px; /* ajusta a posição vertical */
    width: 4px; /* define a largura do detalhe */
    height: 20px; /* define a altura do detalhe */
    border-radius: 3px; /* arredonda as extremidades */
    background: #3b82ff; /* utiliza azul elétrico */
}

/* ORGANIZAÇÃO DOS NOMES */
.racing-nomes {
    display: grid; /* organiza os nomes em grade */
    grid-template-columns: repeat(2, max-content); /* cria duas colunas conforme a largura dos nomes */
    column-gap: 42px; /* separa as colunas horizontalmente */
    row-gap: 5px; /* aproxima as linhas verticalmente */
}

/* NOMES DOS DESENVOLVEDORES */
.racing-nomes span {
    color: #f2f5ff; /* utiliza branco levemente azulado */
    font-size: 15px; /* define o tamanho dos nomes */
}

/* ÁREA SOBRE O PROJETO */
.racing-projeto {
    grid-column: 2 / 3; /* posiciona o projeto na segunda coluna */
    align-self: end; /* alinha o bloco ao final da sua área vertical */
    justify-self: end; /* alinha o bloco à direita */
    width: 100%; /* ocupa a largura disponível */
    max-width: 330px; /* limita a largura do bloco */
    margin-top: 8px; /* adiciona um pequeno espaço acima */
}

/* TEXTOS DO PROJETO */
.racing-projeto p {
    color: #f2f5ff; /* utiliza branco levemente azulado */
    font-size: 15px; /* define o tamanho do texto */
    line-height: 1.7; /* melhora a leitura */
    margin-bottom: 3px; /* aproxima os parágrafos */
}


/* LOGO DO ALCINA AO LADO DO PROJETO */
.projeto-alcina { display:flex; align-items:center; gap:10px; }
.projeto-alcina a { display:inline-flex; align-items:center; justify-content:center; padding:5px; border:1px solid #2563eb; border-radius:7px; background:rgba(37,99,235,.10); transition:all .3s ease; }
.projeto-alcina img { width:30px; height:30px; object-fit:contain; border-radius:3px; }
.projeto-alcina a:hover { border-color:#60a5fa; background:rgba(37,99,235,.22); box-shadow:0 0 12px rgba(37,99,235,.35); transform:scale(1.08); }
.projeto-alcina span { color:#fff; }
/* RODAPÉ RESPONSIVO - TABLETS E CELULARES */
@media (max-width: 820px) {

    /* ESPAÇAMENTO DO RODAPÉ */
    .racing-footer {
        padding: 25px 24px; /* reduz as margens internas nas telas menores */
    }

    /* ORGANIZAÇÃO DO CONTEÚDO */
    .racing-container {
      grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.8fr); /* dá mais espaço ao título e aos desenvolvedores, mantendo o projeto à direita */
      gap: 0; /* remove a separação entre as colunas do computador */
    }

    /* IDENTIDADE DO SITE */
    .racing-topo {
        grid-column: 1 / -1; /* ocupa toda a largura disponível */
        width: 100%; /* acompanha a largura do celular */
        max-width: 100%; /* remove a limitação do computador */
    }

    /* TÍTULO PRINCIPAL */
    .racing-topo h2 {
        font-size: 35px; /* reduz o título para tablets */
        line-height: 1.1; /* melhora a distribuição das linhas */
        overflow-wrap: normal; /* evita dividir palavras sem necessidade */
    }

    /* LINHA DIVISÓRIA */
    .racing-divisor {
        grid-column: 1 / -1; /* ocupa toda a largura */
    }

    /* DESENVOLVEDORES */
    .racing-equipe {
        grid-column: 1 / -1; /* posiciona a equipe na coluna única */
        justify-self: stretch; /* permite utilizar toda a largura */
        width: 100%; /* ocupa toda a largura disponível */
    }

    /* NOMES DOS DESENVOLVEDORES */
    .racing-nomes {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* mantém dois nomes por linha */
        column-gap: 15px; /* separa as duas colunas */
        row-gap: 10px; /* separa verticalmente os nomes */
    }

    /* SOBRE O PROJETO */
    .racing-projeto {
        grid-column: 1 / -1; /* remove o posicionamento na segunda coluna */
        justify-self: start; /* alinha o bloco à esquerda */
        align-self: start; /* posiciona o conteúdo no início */
        width: 100%; /* utiliza toda a largura disponível */
        max-width: 100%; /* remove o limite de 330px */
        margin-top: 24px; /* separa o projeto dos desenvolvedores */
    }

}

/* RODAPÉ RESPONSIVO - CELULARES */
@media (max-width: 480px) {

    /* ESPAÇAMENTO DO RODAPÉ */
    .racing-footer {
        padding: 22px 18px; /* mantém o rodapé compacto no celular */
    }

    /* TEXTO FÓRMULA 1 */
    .racing-mini {
        font-size: 11px; /* reduz o texto acima do título */
        letter-spacing: 3px; /* aproxima as letras */
        margin-bottom: 6px; /* aproxima do título principal */
    }

    /* TÍTULO PRINCIPAL */
    .racing-topo h2 {
        font-size: clamp(23px, 7vw, 30px); /* adapta o tamanho à largura da tela */
        line-height: 1.1; /* melhora as quebras de linha */
        margin-bottom: 10px; /* separa a descrição */
    }

    /* DESCRIÇÃO DO SITE */
    .racing-topo p {
        font-size: 13px; /* mantém a descrição legível */
        line-height: 1.5; /* melhora o espaçamento */
    }

    /* LINHA DIVISÓRIA */
    .racing-divisor {
        margin: 15px 0; /* reduz os espaços acima e abaixo da linha */
    }

    /* TÍTULOS DAS SEÇÕES */
    .racing-equipe h3,.racing-projeto h3 {
        font-size: 13px; /* adapta os títulos */
        letter-spacing: 1.5px; /* reduz a distância entre as letras */
    }

    /* NOMES DOS DESENVOLVEDORES */
    .racing-nomes {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* mantém duas colunas proporcionais */
        gap: 10px 8px; /* define os espaços entre os nomes */
    }
    .racing-nomes span {
        font-size: 12px; /* mantém os nomes legíveis */
        overflow-wrap: break-word; /* permite quebrar nomes compridos */
    }

    /* SOBRE O PROJETO */
    .racing-projeto {
        margin-top: 20px; /* separa o projeto da equipe */
    }

    .racing-projeto p {
        font-size: 13px; /* adapta os textos para o celular */
        line-height: 1.6; /* mantém boa leitura */
    }

}