/* ═══════════════════════════════════════════════════════════════════════
   PÁGINA DE LINKS — VANNUCHI ENGENHARIA E SERVIÇOS
   ═══════════════════════════════════════════════════════════════════════
   Este arquivo controla TODA a aparência do site: cores, tamanhos,
   espaçamentos e fontes.

   Se você nunca mexeu com CSS, comece pela seção "CORES DA MARCA" logo
   abaixo. Mudando uma cor lá, ela muda no site inteiro de uma vez.
   ═══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   CORES DA MARCA  ← COMECE POR AQUI
   ═══════════════════════════════════════════════════════════════════════
   Estas são as cores oficiais, usadas em todo o site.

   ► PARA TROCAR UMA COR: mude o código de cor (o #XXXXXX) aqui embaixo.
     A mudança vale automaticamente para a página inteira.

   Os códigos são "hexadecimais" — o padrão da web. Se você tem uma cor
   no Figma, é só copiar o código de lá e colar aqui.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --verde:        #8FE612;   /* Verde da marca — títulos, selos, destaques */
    --azul-escuro:  #1A2433;   /* Azul escuro — o fundo do site             */
    --azul:         #253F65;   /* Azul médio — usado nos degradês dos cards */
    --branco:       #FFFFFF;   /* Branco — a maior parte dos textos         */

    /* Largura máxima da coluna central onde ficam os cards.
       Aumentar = cards mais largos no computador. */
    --largura-maxima: 700px;

    /* Arredondamento das bordas dos cards. Aumentar = cantos mais redondos. */
    --arredondamento: 24px;
}


/* ═══════════════════════════════════════════════════════════════════════
   AJUSTES BÁSICOS — não precisa mexer aqui
   ═══════════════════════════════════════════════════════════════════════
   Zera os espaçamentos que o navegador coloca sozinho, para o site ficar
   igual em todos os navegadores (Chrome, Safari, Firefox...).
   ═══════════════════════════════════════════════════════════════════════ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--azul-escuro);
    color: var(--branco);
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;

    /* Deixa as letras mais suaves na tela */
    -webkit-font-smoothing: antialiased;
}

/* Esconde um texto da tela, mas mantém ele para leitores de tela
   (usado por pessoas cegas) e para o Google entender a página. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   1. HERO — o banner grande do topo
   ═══════════════════════════════════════════════════════════════════════
   ► PARA TROCAR A IMAGEM: substitua o arquivo assets/banner-hero.png
   ► PARA MUDAR A ALTURA: mexa no "min-height" abaixo.
     100vh = ocupa a tela inteira. 60vh = ocupa 60% da altura da tela.
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
    min-height: 100vh;

    background-color: var(--azul-escuro);
    background-image: url('assets/banner-hero.webp');
    background-size: cover;      /* a imagem preenche todo o espaço      */
    background-position: center; /* e fica centralizada                  */
    background-repeat: no-repeat;
}
/* No celular o "cover" é trocado por "contain" — veja a seção 5 (CELULAR).
   Motivo: o banner é largo, e no celular o "cover" cortaria as laterais,
   comendo as pontas da logo ("VANNUCH...", "...SERVIÇO"). */


/* ═══════════════════════════════════════════════════════════════════════
   2. A COLUNA DOS CARDS
   ═══════════════════════════════════════════════════════════════════════
   Empilha os cards um embaixo do outro, centralizados na tela.

   ► PARA MUDAR O ESPAÇO ENTRE OS CARDS: mexa no "gap".
   ═══════════════════════════════════════════════════════════════════════ */
.cards {
    max-width: var(--largura-maxima);
    margin: 0 auto;          /* centraliza a coluna na tela */
    padding: 40px 20px;      /* respiro em cima/baixo e nas laterais */

    display: flex;
    flex-direction: column;  /* empilha os cards verticalmente */
    gap: 32px;               /* ← espaço ENTRE um card e outro */
}


/* ═══════════════════════════════════════════════════════════════════════
   3. APARÊNCIA GERAL DOS CARDS
   ═══════════════════════════════════════════════════════════════════════
   Regras que valem para TODOS os cards. Cada card tem seus ajustes
   próprios mais abaixo.
   ═══════════════════════════════════════════════════════════════════════ */
.card {
    position: relative;
    display: block;
    padding: 40px 32px;

    border: 2px solid var(--verde);          /* a borda verde ao redor */
    border-radius: var(--arredondamento);
    overflow: hidden;

    text-decoration: none;   /* tira o sublinhado azul padrão dos links */
    color: var(--branco);

    /* Faz o card crescer suavemente ao passar o mouse (ver ":hover" abaixo) */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito ao passar o mouse: o card sobe um pouquinho e ganha um brilho verde.
   Isso comunica visualmente "dá para clicar aqui".
   ► PARA DESLIGAR O EFEITO: apague este bloco inteiro. */
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(143, 230, 18, 0.25);
}

/* Contorno visível ao navegar pelo teclado (tecla Tab).
   Importante para acessibilidade — não apague. */
.card:focus-visible,
.whatsapp:focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 4px;
}

/* ─── Textos dentro dos cards ─────────────────────────────────────────── */

.card__titulo {
    font-size: 2.5rem;       /* ← tamanho do título. 1rem = 16px */
    font-weight: 900;        /* 900 = o mais negrito possível    */
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Variação do título em verde (usada no card "Nossas Soluções") */
.card__titulo--verde {
    color: var(--verde);
}

.card__texto {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.95;
}

/* Etiqueta verde arredondada — o "Acesse nosso site" */
.etiqueta {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 20px;

    background-color: var(--verde);
    color: var(--azul-escuro);
    border-radius: 999px;    /* 999px = formato de pílula */

    font-size: 0.875rem;
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════════════
   CARD 1 — FORMAÇÃO NR + ENDs
   ═══════════════════════════════════════════════════════════════════════
   Fundo verde com uma imagem por trás.
   ► PARA TROCAR A IMAGEM: substitua assets/card-formacao.webp
   ═══════════════════════════════════════════════════════════════════════ */
/* ─── O QUE OS CARDS 1 E 3 TÊM EM COMUM ──────────────────────────────────
   Os cards "Formação NR + ENDs" e "Treinamentos" são visualmente idênticos:
   fundo verde, texto escuro centralizado, foto esmaecida atrás.

   Tudo que é IGUAL nos dois está aqui, escrito UMA vez só. Cada card define
   depois apenas o que é diferente (a foto e a intensidade dela).

   ► PARA MUDAR OS DOIS CARDS DE UMA VEZ (altura, alinhamento, cor de fundo):
     mexa AQUI. Vale para os dois automaticamente.
   ───────────────────────────────────────────────────────────────────────── */
.card--formacao,
.card--treinamentos {
    background-color: var(--verde);   /* base verde sólida */

    color: var(--azul-escuro);   /* texto escuro, porque o fundo é claro */
    text-align: center;
    min-height: 280px;

    /* Centraliza o texto no meio do card */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* A foto de fundo fica numa CAMADA SEPARADA, atrás do texto.
   Por que não usar a imagem direto como "background" do card?
   Porque a foto tem áreas claras e escuras, e o texto escuro sumia em cima
   delas. Aqui a foto entra esmaecida sobre o verde sólido: dá a textura
   visual, mas o texto continua legível em qualquer ponto.

   Esta regra monta a camada; a FOTO de cada card é escolhida logo abaixo. */
.card--formacao::before,
.card--treinamentos::before {
    content: '';
    position: absolute;
    inset: 0;                    /* cobre o card inteiro */
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Mantém o texto ACIMA da camada da foto */
.card--formacao > *,
.card--treinamentos > * {
    position: relative;
    z-index: 1;
}

/* ─── O QUE É DIFERENTE EM CADA UM ────────────────────────────────────────
   Só a foto de fundo e o quanto ela aparece.

   ► PARA TROCAR A FOTO: substitua o arquivo em assets/, mantendo o nome.
   ► PARA A FOTO APARECER MAIS: aumente o "opacity" (vai até 1).
   ► PARA A FOTO APARECER MENOS: diminua (vai até 0).
   ───────────────────────────────────────────────────────────────────────── */
.card--formacao::before {
    background-image: url('assets/card-formacao.webp');
    opacity: 0.35;
}

.card--treinamentos::before {
    background-image: url('assets/card-treinamentos.webp');
    opacity: 0.3;
}


/* ═══════════════════════════════════════════════════════════════════════
   CARD 2 — NOSSAS SOLUÇÕES
   ═══════════════════════════════════════════════════════════════════════
   Fundo em degradê azul, com o notebook à esquerda e o texto à direita.
   ► PARA TROCAR A IMAGEM DO NOTEBOOK: substitua assets/mockup-solucoes.webp
   ═══════════════════════════════════════════════════════════════════════ */
.card--solucoes {
    /* Degradê: começa no azul escuro e vai para o azul médio, na diagonal */
    background: linear-gradient(135deg, var(--azul-escuro), var(--azul));

    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;    /* no celular, o notebook e o texto se empilham */
}

.card__mockup {
    width: 45%;
    min-width: 200px;
    height: auto;
    flex-shrink: 0;
}

.card__conteudo {
    flex: 1;
    min-width: 200px;
}

/* O título deste card é menor que o dos outros */
.card--solucoes .card__titulo {
    font-size: 2rem;
}

.card--solucoes .card__texto {
    font-size: 0.9rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   CARD 3 — TREINAMENTOS (EM DESENVOLVIMENTO)
   ═══════════════════════════════════════════════════════════════════════
   ► PARA TROCAR A IMAGEM: substitua assets/card-treinamentos.webp
   ═══════════════════════════════════════════════════════════════════════ */
/* ─── O estado "EM BREVE" ─────────────────────────────────────────────────
   Este bloco é o que faz o card PARECER não-clicável — e isso é
   intencional. Um card que parece botão mas não funciona faz o visitante
   achar que o site está quebrado.

   O "saturate" tira parte da cor, deixando o verde acinzentado — o card
   fica visivelmente "desligado", mas SEM perder a legibilidade do texto
   (que é o que aconteceria se a gente simplesmente apagasse o card todo
   com "opacity").

   ► QUANDO A PLATAFORMA FICAR PRONTA: apague este bloco inteiro
     (e siga as instruções no index.html, no comentário do Card 3).
   ─────────────────────────────────────────────────────────────────────── */
.card--em-breve {
    filter: saturate(0.55);    /* deixa o verde acinzentado = "desligado" */
    cursor: default;           /* o cursor NÃO vira mãozinha              */
}

.card--em-breve:hover {
    transform: none;           /* desliga o efeito de subir      */
    box-shadow: none;          /* desliga o brilho verde         */
}

/* O selo "Em breve" — a plaquinha escura no topo do card */
.selo {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 20px;

    background-color: var(--azul-escuro);
    color: var(--verde);
    border-radius: 999px;

    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. RODAPÉ — WhatsApp, CNPJ e direitos autorais
   ═══════════════════════════════════════════════════════════════════════ */
.rodape {
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 24px 20px 48px;
    text-align: center;
}

/* ─── O botão de WhatsApp ─────────────────────────────────────────────────
   ► PARA MUDAR O NÚMERO DO WHATSAPP: NÃO é aqui!
     O número fica no arquivo index.html, no link do rodapé.
     Procure lá por "wa.me".
   ─────────────────────────────────────────────────────────────────────── */
.whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding: 12px 28px;

    background-color: var(--verde);
    color: var(--azul-escuro);
    border-radius: 999px;

    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(143, 230, 18, 0.35);
}

.whatsapp__icone {
    width: 20px;
    height: 20px;
}

/* ─── Textos do rodapé ───────────────────────────────────────────────────
   ► PARA MUDAR O CNPJ ou o ANO: NÃO é aqui!
     Esses textos ficam no arquivo index.html, lá no final.
   ─────────────────────────────────────────────────────────────────────── */
.rodape__cnpj,
.rodape__direitos {
    font-size: 0.8rem;
    opacity: 0.6;
}

.rodape__cnpj {
    margin-bottom: 6px;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. CELULAR — ajustes para telas pequenas
   ═══════════════════════════════════════════════════════════════════════
   Tudo que está aqui dentro só vale em telas de até 767px de largura,
   ou seja: celulares.

   A maioria das pessoas vai abrir esta página pelo celular (link da bio),
   então vale testar sempre no celular primeiro.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ─── O BANNER NO CELULAR ─────────────────────────────────────────────
       AQUI ESTÁ A CORREÇÃO MAIS IMPORTANTE DO ARQUIVO. NÃO APAGUE.

       O banner é uma imagem LARGA (quase 2x mais larga que alta). A tela do
       celular é o contrário: alta e estreita.

       Com "cover" (o padrão usado no computador), o navegador amplia a
       imagem até preencher a tela — e sobra imagem para os lados, que ele
       simplesmente CORTA. Resultado: a logo ficava lendo "VANNUCH" e
       "ENGENHARIA E SERVIÇO", com as pontas decepadas.

       Com "contain", a imagem inteira aparece, sem cortar nada. O espaço
       que sobra em cima e embaixo é preenchido pelo azul escuro do fundo.

       ► SE VOCÊ TROCAR O BANNER um dia, teste no celular antes de subir.
       ───────────────────────────────────────────────────────────────────── */
    .hero {
        background-size: contain;   /* ← mostra a logo INTEIRA, sem cortar */

        /* O banner tem 1920x1000 pixels, ou seja, proporção 48:25.
           Dizendo isso ao navegador, o topo do site fica com a altura EXATA
           da imagem — sem sobrar faixa preta em cima nem embaixo.

           ► SE TROCAR O BANNER por uma imagem de outro tamanho, atualize
             estes dois números com a largura e a altura da nova imagem. */
        aspect-ratio: 1920 / 1000;
        min-height: auto;
    }

    .cards {
        gap: 24px;
        padding: 28px 16px;
    }

    .card {
        padding: 32px 24px;
    }

    /* Títulos menores, para não estourar a largura da tela */
    .card__titulo {
        font-size: 1.9rem;
    }

    .card--solucoes .card__titulo {
        font-size: 1.6rem;
    }

    /* No celular o card "Nossas Soluções" vira uma coluna:
       o notebook em cima, o texto embaixo. */
    .card--solucoes {
        flex-direction: column;
        text-align: center;
    }

    .card__mockup {
        width: 80%;
    }

    .card--formacao,
    .card--treinamentos {
        min-height: 220px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   6. ACESSIBILIDADE — respeitar quem pediu menos animação
   ═══════════════════════════════════════════════════════════════════════
   Algumas pessoas configuram o celular/computador para reduzir animações
   (por enxaqueca, vertigem ou preferência). Este bloco desliga os efeitos
   para elas. Não apague.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}