/* ════════════════════════════════════════════════════════════════════════════════
 * Arquivo: aguiarei.css
 * Tipo: Stylesheet (identidade visual da Águia — splash page)
 * Diretório: /assets/css/
 * Data/Hora de Criação: 25/04/2026 (São Paulo - Brasil)
 * Última Atualização: 26/04/2026 (versão minimalista — só splash page)
 *
 * Descrição: Sistema de design da iniciativa Águia da Engecaruso Ambiental.
 *            Versão 2.0 — minimalista, focada em splash page institucional.
 *            
 *            REUTILIZAÇÃO: pode ser estendido nos outros subdomínios do
 *            ecossistema Águia (mentoria.aguia.eng.br futuramente),
 *            mantendo as design tokens base e adicionando componentes
 *            específicos por contexto.
 *
 * Autor: Tuanne Laura B. Fernandes
 * Versão: 2.0
 * Encoding: UTF-8 (sem BOM)
 *
 * Engecaruso Ambiental Ltda. — CNPJ 19.328.507/0001-05
 * ════════════════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
    --aguiarei-cor-primaria:    #023313;
    --aguiarei-cor-secundaria:  #166534;
    --aguiarei-cor-acento:      #c2410c;
    --aguiarei-cor-texto:       #1f2937;
    --aguiarei-cor-suave:       #6b7280;
    --aguiarei-cor-borda:       #e5e7eb;
    --aguiarei-cor-bg:          #f9fafb;
    --aguiarei-fonte:           system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ── RESET ENXUTO ── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--aguiarei-fonte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--aguiarei-cor-texto);
    background: #fff;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ────────────────────────────────────────────────────────────────────────────────
   PROTEÇÃO DE CONTEÚDO
   ──────────────────────────────────────────────────────────────────────────────── */

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}

a img {
    pointer-events: auto;
}

.aguiarei-logo {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ────────────────────────────────────────────────────────────────────────────────
   SPLASH PAGE (versão minimalista — single-screen institucional)
   Layout vertical centralizado: logo + título + descrição + footer mínimo
   ──────────────────────────────────────────────────────────────────────────────── */

.aguiarei-splash {
    background: linear-gradient(180deg, #ffffff 0%, var(--aguiarei-cor-bg) 100%);
}

.aguiarei-splash__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.aguiarei-splash__logo {
    display: block;
    margin-bottom: 1.5rem;
    max-width: 100%;
}

.aguiarei-splash__logo img {
    display: block;
    /* Logo À-Guia tipoA: 386x500 (proporção 0.77 — vertical alta com domínio embaixo).
       Altura responsiva via clamp para escalar bem em todos os viewports. */
    width: auto;
    height: clamp(180px, 38vw, 240px);
    max-width: 100%;
    /* Garantia para LCP: dimensions do atributo HTML evitam Cumulative Layout Shift */
    aspect-ratio: 386 / 500;
}

/* H1 acessível pra screen readers e SEO, mas oculto visualmente
   (a logo carrega o nome visualmente — evita redundância) */
.aguiarei-splash__title-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aguiarei-splash__subtitle {
    font-size: clamp(1rem, 2.8vw, 1.1875rem);
    color: var(--aguiarei-cor-suave);
    font-weight: 400;
    margin-bottom: 2rem;
    letter-spacing: 0.005em;
    font-style: normal;
    text-align: center;
}

/* O <em> "guia" na subtítulo recebe destaque sutil — referencia o trocadilho */
.aguiarei-splash__subtitle em {
    color: var(--aguiarei-cor-secundaria);
    font-style: italic;
    font-weight: 500;
}

.aguiarei-splash__desc {
    font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
    color: var(--aguiarei-cor-suave);
    max-width: 520px;
    line-height: 1.7;
}

/* ────────────────────────────────────────────────────────────────────────────────
   FOOTER MÍNIMO (créditos institucionais com logo Engecaruso)
   Layout horizontal: logo pequena à esquerda, créditos à direita.
   Em mobile: empilha vertical.
   ──────────────────────────────────────────────────────────────────────────────── */

.aguiarei-splash__footer {
    border-top: 1px solid var(--aguiarei-cor-borda);
    padding: 1.5rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.aguiarei-splash__credit-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
    cursor: pointer;
    text-decoration: none;
    /* Logo é pequena e discreta — discrição é a regra do footer */
    opacity: 0.85;
}

.aguiarei-splash__credit-logo:hover,
.aguiarei-splash__credit-logo:focus {
    opacity: 1;
}

.aguiarei-splash__credit-logo img {
    display: block;
    width: auto;
    height: 48px;
    /* Engecaruso footer logo - vertical (proporção 72:100) */
}

.aguiarei-splash__footer p {
    font-size: 0.8125rem;
    color: var(--aguiarei-cor-suave);
    line-height: 1.5;
    font-weight: 400;
    text-align: left;
    margin: 0;
}

@media (max-width: 480px) {
    .aguiarei-splash__footer {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .aguiarei-splash__footer p {
        text-align: center;
    }
}

/* ────────────────────────────────────────────────────────────────────────────────
   NOTIFICAÇÃO DE CONTEÚDO PROTEGIDO (toast amigável)
   ──────────────────────────────────────────────────────────────────────────────── */

.aguiarei-notify {
    position: fixed;
    bottom: max(24px, env(safe-area-inset-bottom, 24px));
    left: 16px;
    right: 16px;
    margin: 0 auto;
    transform: translateY(calc(100% + 32px));
    width: fit-content;
    max-width: calc(100vw - 32px);
    /* Laranja escuro — cor de alerta clássica, contrasta com tudo (branco, verde, escuro) */
    background: #9a3412;
    color: #fff;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(154, 52, 18, 0.35);
    z-index: 9999;
    transition: transform 0.3s ease;
    pointer-events: none;
    text-align: center;
    line-height: 1.5;
}

.aguiarei-notify--ativo {
    transform: translateY(0);
    pointer-events: auto;
}

/* Link dentro da notificação — amarelo dourado discreto, harmoniza com laranja escuro */
.aguiarei-notify a {
    color: #fed7aa;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px solid rgba(254, 215, 170, 0.5);
    padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}

.aguiarei-notify a:hover,
.aguiarei-notify a:focus {
    color: #fff;
    border-bottom-color: #fff;
}

.aguiarei-notify a:visited {
    color: #fed7aa;
}

/* ────────────────────────────────────────────────────────────────────────────────
   PRINT (impressão) — banner discreto de copyright
   ──────────────────────────────────────────────────────────────────────────────── */

@media print {
    .aguiarei-splash__main::before {
        content: "Conteúdo protegido — Engecaruso Ambiental Ltda.";
        display: block;
        padding: 0.5rem;
        margin-bottom: 1rem;
        border: 1px solid #c2410c;
        color: #c2410c;
        font-weight: 600;
        font-size: 9pt;
        text-align: center;
    }
}

/* ────────────────────────────────────────────────────────────────────────────────
   RESPONSIVIDADE (mobile já é o default — aqui só ajustes para tela grande)
   ──────────────────────────────────────────────────────────────────────────────── */

@media (min-width: 768px) {
    .aguiarei-splash__main {
        padding: 4rem 2rem;
    }
    
    .aguiarei-splash__logo {
        margin-bottom: 2rem;
    }
    
    .aguiarei-splash__logo img {
        /* Desktop: logo maior, mais presença visual */
        height: clamp(280px, 32vh, 360px);
    }
    
    .aguiarei-splash__credit-logo img {
        height: 56px;
    }
}

/* Tela muito grande (4K, ultrawide): cap pra logo não virar pôster */
@media (min-width: 1280px) {
    .aguiarei-splash__logo img {
        height: 360px;
    }
}

/* Landscape mobile (celular deitado, altura < 480px) — logo menor pra caber tudo */
@media (max-height: 480px) and (orientation: landscape) {
    .aguiarei-splash__main {
        padding: 1.5rem;
    }
    
    .aguiarei-splash__logo {
        margin-bottom: 1rem;
    }
    
    .aguiarei-splash__logo img {
        height: 140px;
    }
    
    .aguiarei-splash__subtitle {
        margin-bottom: 1rem;
        font-size: 1rem;
    }
    
    .aguiarei-splash__desc {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* ════════════════════════════════════════════════════════════════════════════════
 * FIM DO ARQUIVO
 * ════════════════════════════════════════════════════════════════════════════════ */