/*
==============================================
ARQUIVO PRINCIPAL DE ESTILOS (GLOBAL)
==============================================
Este arquivo contém apenas estilos essenciais
aplicados em todo o site.
----------------------------------------------
*/

/* 1. VARIÁVEIS GLOBAIS E FONTES
---------------------------------------------- */
:root {
    --preto: #212121;
    --branco: #ffffff;
    --cinza-claro: #f8f9fa;
    --cinza-borda: #e6e4e4;
    --texto-cinza: #6c757d;
    --verde-principal: #00938E;
    --verde-secundario: #009691;
    --verde-hover: #007a76;
    --cor-icone: #00dcda;
    --navbar-height: 68px;
}

@font-face {
    font-family: 'Magistral';
    src: url('../fonts/Magistral-Regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'LT Amber';
    src: url('../fonts/LT Amber Regular.otf') format('opentype');
    font-weight: normal;
}

/* 2. ESTILOS DE BASE E TIPOGRAFIA
---------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--branco);
    color: var(--preto);
    line-height: 1.6;
    padding-top: var(--navbar-height); 
}

/* Textos */
.text-justify {
  text-align: justify;
}

/* Estilo padrão para títulos de seção */
.section-title {
    text-align: center;
    margin-bottom: 60px;
    color: var(--preto);
}

.section-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--verde-principal);
    margin-bottom: 1rem;
    position: relative;
    padding-bottom: 15px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 70px;
    height: 4px;
    background-color: var(--cor-icone);
    border-radius: 5px;
}

.section-title p {
    font-size: 1.1rem;
    color: var(--texto-cinza);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. COMPONENTES GLOBAIS
---------------------------------------------- */

/* --- Botões Reutilizáveis --- */
.btn-conectar {
    background: linear-gradient(135deg, var(--cor-icone), var(--verde-principal));
    border: none;
    color: white;
    padding: 0.9rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 147, 142, 0.2);
}

.btn-conectar:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0, 147, 142, 0.3);
    color: white;
}


/* --- Modals --- */
.modal-content {
    border-radius: 15px;
    border: none;
}

.modal-header {
    background: #FFFFFF;
    /* linear-gradient(135deg, var(--cor-icone), var(--verde-principal)); */
    color: var(--verde-principal);
    border-bottom: none;
    border-radius: 15px 15px 0 0;
}

.btn-close-white {
    filter: brightness(0) invert(1);
}

/* --- Toasts (Notificações) --- */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    animation: toast-countdown 5s linear forwards;
}

@keyframes toast-countdown {
    from { width: 100%; }
    to { width: 0%; }
}

/*
==============================================
ESTILOS DO RODAPÉ
==============================================
*/
.footer {
    position: relative; /* Define um 'ponto de ancoragem' para o elemento fantasma */
    overflow: hidden; /* Garante que nada 'vaze' para fora do rodapé */
}

/* 1. O detalhe do canto (impossível com classes Bootstrap) */
.footer::after {
    content: ''; /* Obrigatório para que o pseudo-elemento apareça */
    position: absolute; /* 'Desprende' o elemento para posicioná-lo livremente */
    top: 0; /* Alinha no topo do rodapé */
    right: 0; /* Alinha na direita do rodapé */
    width: 13%; /* Define a largura do elemento como 25% da largura do rodapé */
    height: 100%; /* Define a altura como 100% da altura do rodapé */
    background-color: #FFFFFF; /* Pinta o elemento de branco */

    /* A MÁGICA: Corta o elemento em formato de polígono (triângulo)
    Ponto 1: 101% -1px
        X = 101%: Começa 1% para fora da borda direita do elemento.
        Y = -1px: Começa 1 pixel acima da borda superior.
        Resultado: O primeiro ponto do nosso triângulo está fora do canto superior direito.

    Ponto 2: -1px -1px
        X = -1px: Traça uma linha até 1 pixel para fora da borda esquerda.
        Y = -1px: Mantém a linha 1 pixel acima da borda superior.
        Resultado: Criamos a borda de cima do triângulo, mas ela está "flutuando" um pixel acima do elemento e se estende para além de suas bordas laterais.

    Ponto 3: 101% 35%
        X = 101%: Traça a linha diagonal até 1% para fora da borda direita.
        Y = 35%: A uma altura de 35% do topo.
        Resultado: O navegador fecha a forma, conectando este ponto de volta ao primeiro.
    
    Ponto 2 (-1px, -1px)      Ponto 1 (101%, -1px)
                   *---------------------*
                   | \                   |
                   |  \                  |
  - - - - - - - - -+- -\- - - - - - - - -+  <-- Borda superior da div
                   |    \                |
     Área visível  |     \               |
     do Rodapé     |      \              |
                   +-------\-------------+
                            \
                             * Ponto 3 (101%, 35%)
    */
    clip-path: polygon(101% -1px, -1px -1px, 101% 35%);
}

/* 2. Ajuste fino do tamanho da logo */
.footer .footer-logo img {
    width: 100%;             /* Faz a imagem ocupar 100% do seu contêiner <a> */
    min-width: 450px;        /* Define o tamanho máximo que a imagem pode ter */
    height: auto;            /* Garante que a proporção da imagem seja mantida */
}
.footer .d-flex.flex-wrap {
    padding-left: 5.3rem; /* Ajuste este valor se precisar de mais ou menos recuo */
}
.footer .footer-link:hover {
    color: var(--bs-white);
}

/* 3. Estilo e hover dos links (hover não pode ser feito com classes) */
.footer .footer-link {
    color: var(--bs-white-50); /* Usa a variável de cor do Bootstrap */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer .footer-link:hover {
    color: var(--bs-white);
}

/* 4. Estilo dos ícones sociais (tamanho e cor de fundo específicos) */
.footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1B1B1B;
    color: white;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.footer .social-icon:hover {
    background-color: var(--verde-principal, #00938E);
}

/* 5. Ajustes responsivos para o detalhe do canto */
@media (max-width: 991.98px) {
    .footer::after {
        clip-path: polygon(100% 0, 60% 0, 100% 20%);
    }
}
@media (max-width: 767.98px) {
    .footer::after {
        display: none;
    }
}