/* =============================================================================
   BASE DO SITE
   -----------------------------------------------------------------------------
   Define as variaveis de design, a normalizacao dos elementos, a tipografia,
   os botoes, os formularios e as classes de apoio usadas em todo o site.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. FONTES
   -------------------------------------------------------------------------- */

/* Fonte de assinatura manuscrita, auto-hospedada no servidor.
   O arquivo e servido pela propria maquina, sem nenhuma solicitacao
   a servidores de terceiros, o que mantem o site rapido e o visitante
   sem compartilhamento de dados com terceiros. */
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fontes/caveat-400-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Conjunto estendido da fonte de assinatura, para os caracteres acentuados */
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fontes/caveat-400-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -----------------------------------------------------------------------------
   2. VARIAVEIS DE DESIGN
   -------------------------------------------------------------------------- */

/* As cores do site, organizadas por funcao */
:root {
    /* Fundo principal, um preto com leve tom azulado */
    --cor-fundo: #0a0c10;
    /* Fundo das secoes alternadas */
    --cor-fundo-alt: #0e1218;
    /* Cor das superficies como cartoes e paineis */
    --cor-superficie: #12161e;
    /* Cor da superficie elevada, usada em campos de formulario */
    --cor-superficie-alta: #171c26;
    /* Cor das bordas sutis entre os blocos */
    --cor-borda: rgba(255, 255, 255, 0.08);
    /* Cor das bordas com mais destaque */
    --cor-borda-forte: rgba(255, 255, 255, 0.16);
    /* Cor principal do texto */
    --cor-texto: #e9eef5;
    /* Cor do texto de apoio */
    --cor-texto-suave: #93a1b3;
    /* Cor do texto com menos importancia */
    --cor-texto-tenue: #66748a;
    /* Cor de destaque usada nos botoes e nos titulos */
    --cor-destaque: #e0a44a;
    /* Cor de destaque com mais luminosidade */
    --cor-destaque-claro: #f2c274;
    /* Cor de destaque com menos saturacao */
    --cor-destaque-escuro: #b9822f;
    /* Cor usada nos indicadores de ameaca */
    --cor-ameaca: #ef6a5a;
    /* Cor usada nos indicadores de ameaca em nivel alto */
    --cor-ameaca-alta: #f04e6b;
    /* Cor usada nos indicadores de software malicioso */
    --cor-malware: #b57cf0;
    /* Cor usada nos indicadores de phishing */
    --cor-phishing: #f0b44a;
    /* Cor usada nos indicadores de operacao segura */
    --cor-seguro: #52c98a;
    /* Cor usada nas bordas e nos destaques em tom azulado */
    --cor-tecnica: #4fb3d9;
    /* Cor de fundo translucida usada nos destaques */
    --cor-destaque-tenue: rgba(224, 164, 74, 0.12);
    /* Cor de fundo translucida usada nas bordas de destaque */
    --cor-destaque-borda: rgba(224, 164, 74, 0.32);
    /* Sombra aplicada nos cartoes */
    --sombra-cartao: 0 18px 40px rgba(0, 0, 0, 0.4);
    /* Sombra aplicada nos botoes de destaque */
    --sombra-botao: 0 10px 26px rgba(224, 164, 74, 0.18);
    /* Velocidade padrao das transicoes */
    --transicao: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Raio padrao dos cantos */
    --raio: 12px;
    /* Raio menor, usado em etiquetas e campos */
    --raio-pequeno: 8px;
    /* Largura maxima do conteudo */
    --largura-maxima: 1200px;
    /* Fonte sem serifa usada em todo o site */
    --fonte-texto: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    /* Fonte monoespacada usada nos rotulos tecnicos */
    --fonte-mono: "JetBrains Mono", "Cascadia Code", "Consolas", "SFMono-Regular", monospace;
    /* Fonte manuscrita usada na assinatura pessoal */
    --fonte-assinatura: "Caveat", "Segoe Script", "Bradley Hand", cursive;
}

/* -----------------------------------------------------------------------------
   2. NORMALIZACAO
   -------------------------------------------------------------------------- */

/* Remove a margem padrao de todos os elementos */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Define o comportamento da rolagem da pagina */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
    -webkit-text-size-adjust: 100%;
}

/* Define as cores padrao e a tipografia do corpo da pagina */
body {
    font-family: var(--fonte-texto);
    font-size: 16px;
    line-height: 1.65;
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
    background-image:
        radial-gradient(900px 480px at 78% -8%, rgba(224, 164, 74, 0.08), transparent 62%),
        radial-gradient(760px 420px at 6% 4%, rgba(79, 179, 217, 0.06), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Remove o desenho padrao das listas */
ul,
ol {
    list-style: none;
}

/* Remove o desenho padrao dos campos de formulario */
input,
textarea,
select,
button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
}

/* Remove o contorno padrao do foco, que e devolvido de forma controlada */
button,
a,
input,
textarea,
select {
    outline: none;
}

/* Define o foco visivel para quem navega pelo teclado */
:focus-visible {
    outline: 2px solid var(--cor-destaque);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Herda a cor do texto nos links */
a {
    color: inherit;
    text-decoration: none;
}

/* Define o comportamento das imagens */
img,
svg,
canvas {
    display: block;
    max-width: 100%;
}

/* Define o comportamento das listas ordenadas */
ol {
    counter-reset: item;
}

/* -----------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */

/* Titulos de primeiro nivel */
h1,
h2,
h3,
h4 {
    line-height: 1.18;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--cor-texto);
}

/* Titulo de primeiro nivel */
h1 {
    font-size: clamp(2.1rem, 5vw, 3.5rem);
}

/* Titulo de segundo nivel */
h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.35rem);
}

/* Titulo de terceiro nivel */
h3 {
    font-size: clamp(1.08rem, 1.8vw, 1.28rem);
}

/* Paragrafos do conteudo */
p {
    color: var(--cor-texto-suave);
}

/* Rotulo tecnico usado acima dos titulos das secoes */
.secao-etiqueta {
    font-family: var(--fonte-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cor-destaque);
    margin-bottom: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

/* Desenha o pequeno traco que antecede o rotulo tecnico */
.secao-etiqueta::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--cor-destaque);
}

/* Descricao logo abaixo do titulo da secao */
.secao-descricao {
    font-size: 1.03rem;
    max-width: 62ch;
    color: var(--cor-texto-suave);
    margin-top: 1rem;
}

/* Bloco de codigo e trechos tecnicos */
code,
kbd,
pre {
    font-family: var(--fonte-mono);
    font-size: 0.88em;
}

/* -----------------------------------------------------------------------------
   4. CLASSES DE APOIO
   -------------------------------------------------------------------------- */

/* Esconde o elemento de forma visual, mantendo o texto para leitores de tela */
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Limita a largura do conteudo e centraliza na pagina */
.container {
    width: 100%;
    max-width: var(--largura-maxima);
    margin-inline: auto;
    padding-inline: 22px;
}

/* Link de acessibilidade que aparece ao usar o teclado */
.pular-para-conteudo {
    position: absolute;
    top: -60px;
    left: 20px;
    z-index: 999;
    padding: 10px 18px;
    background: var(--cor-destaque);
    color: #10120f;
    font-weight: 700;
    border-radius: 0 0 var(--raio-pequeno) var(--raio-pequeno);
    transition: top var(--transicao);
}

/* Mostra o link de acessibilidade quando ele recebe o foco */
.pular-para-conteudo:focus {
    top: 0;
}

/* Animacao usada na entrada dos blocos ao rolar a pagina */
.revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 640ms ease, transform 640ms ease;
}

/* Estado final dos blocos revelados */
.revelar.revelado {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   5. BOTOES
   -------------------------------------------------------------------------- */

/* Estilo base dos botoes do site */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.78rem 1.5rem;
    border-radius: var(--raio-pequeno);
    font-size: 0.94rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--transicao), border-color var(--transicao),
        color var(--transicao), transform var(--transicao), box-shadow var(--transicao);
    white-space: nowrap;
}

/* Eleva levemente o botao quando o cursor passa por cima */
.botao:hover {
    transform: translateY(-2px);
}

/* Botao principal, com fundo de destaque */
.botao-primario {
    background: var(--cor-destaque);
    color: #14110a;
    box-shadow: var(--sombra-botao);
}

/* Aplica o fundo mais claro no botao principal */
.botao-primario:hover {
    background: var(--cor-destaque-claro);
}

/* Botao secundario, com apenas a borda visivel */
.botao-contorno {
    border-color: var(--cor-borda-forte);
    color: var(--cor-texto);
    background: rgba(255, 255, 255, 0.02);
}

/* Aplica o fundo sutil no botao secundario */
.botao-contorno:hover {
    border-color: var(--cor-destaque);
    background: var(--cor-destaque-tenue);
    color: var(--cor-destaque-claro);
}

/* Botao sem fundo, usado para links dentro de cartoes */
.botao-texto {
    color: var(--cor-destaque);
    padding-inline: 0.4rem;
}

/* Botao com menos altura, usado dentro dos cartoes */
.botao-pequeno {
    padding: 0.55rem 1rem;
    font-size: 0.86rem;
}

/* Botao com mais altura, usado nas chamadas principais */
.botao-grande {
    padding: 0.95rem 1.85rem;
    font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */

/* Agrupa os campos de um formulario */
.grupo-campo {
    margin-bottom: 1.15rem;
}

/* Rotulo do campo */
.rotulo-campo {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    margin-bottom: 0.45rem;
}

/* Campo de entrada do formulario */
.campo {
    width: 100%;
    padding: 0.82rem 1rem;
    background: var(--cor-superficie-alta);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-pequeno);
    color: var(--cor-texto);
    font-size: 0.95rem;
    transition: border-color var(--transicao), background-color var(--transicao);
}

/* Aplica o destaque da borda quando o campo recebe foco */
.campo:focus {
    border-color: var(--cor-destaque);
    background: rgba(224, 164, 74, 0.04);
}

/* Texto de apoio exibido dentro do campo */
.campo::placeholder {
    color: var(--cor-texto-tenue);
}

/* Campo de texto com varias linhas */
textarea.campo {
    min-height: 148px;
    resize: vertical;
}

/* Lista de selecao do formulario */
select.campo {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--cor-texto-suave) 50%),
        linear-gradient(135deg, var(--cor-texto-suave) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) calc(50% + 1px),
        calc(100% - 14px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.6rem;
}

/* Lista de opcoes do campo de selecao */
select.campo option {
    background: var(--cor-superficie);
    color: var(--cor-texto);
}

/* Grade com duas colunas para os campos */
.grade-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.1rem;
}

/* -----------------------------------------------------------------------------
   7. ALERTAS
   -------------------------------------------------------------------------- */

/* Caixa de aviso exibida no topo da pagina */
.alerta {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.95rem 1.15rem;
    border-radius: var(--raio-pequeno);
    margin-top: 1.1rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
}

/* Alerta de sucesso */
.alerta-sucesso {
    background: rgba(82, 201, 138, 0.1);
    border-color: rgba(82, 201, 138, 0.3);
    color: #a8e5c5;
}

/* Alerta de erro */
.alerta-erro {
    background: rgba(239, 106, 90, 0.1);
    border-color: rgba(239, 106, 90, 0.32);
    color: #f5b3a9;
}

/* Circulo exibido no inicio do alerta */
.alerta-icone {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
}

/* -----------------------------------------------------------------------------
   8. RESPONSIVIDADE DOS FORMULARIOS
   -------------------------------------------------------------------------- */

/* Em telas pequenas os campos passam a ocupar uma coluna */
@media (max-width: 640px) {
    .grade-campos {
        grid-template-columns: 1fr;
    }
}