/* ============================================================
   Tema Azul — Maurício Cabeleireiro
   Remapeia a escala "blue" para o navy do logo.
   IMPORTANTE: o Tailwind Play CDN injeta utilitários em runtime
   DEPOIS deste arquivo, então usamos !important para vencer a ordem.
   ============================================================ */
:root {
    --navy-dark: #142634;
    --navy:      #1d3346;
    --azul:      #2e4d68;
    --azul-300:  #84afd1;
    --azul-100:  #d8e7f2;
    --azul-50:   #eff6fb;
}

/* ---- Cores sólidas: background ---- */
.bg-blue-50  { background-color: #eff6fb !important; }
.bg-blue-100 { background-color: #d8e7f2 !important; }
.bg-blue-200 { background-color: #b3cfe4 !important; }
.bg-blue-300 { background-color: #84afd1 !important; }
.bg-blue-400 { background-color: #5187b5 !important; }
.bg-blue-500 { background-color: #2e4d68 !important; }
.bg-blue-600 { background-color: #24405a !important; }
.bg-blue-700 { background-color: #1d3346 !important; }
.bg-blue-800 { background-color: #142634 !important; }
.hover\:bg-blue-50:hover  { background-color: #eff6fb !important; }
.hover\:bg-blue-100:hover { background-color: #d8e7f2 !important; }
.hover\:bg-blue-200:hover { background-color: #b3cfe4 !important; }
.hover\:bg-blue-500:hover { background-color: #2e4d68 !important; }
.hover\:bg-blue-600:hover { background-color: #24405a !important; }
.hover\:bg-blue-700:hover { background-color: #1d3346 !important; }

/* ---- Cores sólidas: texto ---- */
.text-blue-50  { color: #eff6fb !important; }
.text-blue-100 { color: #d8e7f2 !important; }
.text-blue-200 { color: #b3cfe4 !important; }
.text-blue-300 { color: #84afd1 !important; }
.text-blue-400 { color: #5187b5 !important; }
.text-blue-500 { color: #2e4d68 !important; }
.text-blue-600 { color: #24405a !important; }
.text-blue-700 { color: #1d3346 !important; }
.text-blue-800 { color: #142634 !important; }
.hover\:text-blue-600:hover { color: #24405a !important; }
.hover\:text-blue-700:hover { color: #1d3346 !important; }
.hover\:text-blue-800:hover { color: #142634 !important; }

/* ---- Bordas ---- */
.border-blue-100 { border-color: #d8e7f2 !important; }
.border-blue-200 { border-color: #b3cfe4 !important; }
.border-blue-300 { border-color: #84afd1 !important; }
.border-blue-400 { border-color: #5187b5 !important; }
.border-blue-500 { border-color: #2e4d68 !important; }
.border-blue-600 { border-color: #24405a !important; }
.hover\:border-blue-300:hover { border-color: #84afd1 !important; }
.hover\:border-blue-400:hover { border-color: #5187b5 !important; }
.hover\:border-blue-500:hover { border-color: #2e4d68 !important; }
.focus\:border-blue-500:focus { border-color: #2e4d68 !important; }

/* ---- Anéis de foco (ring) ---- */
.ring-blue-200 { --tw-ring-color: #b3cfe4 !important; }
.ring-blue-300 { --tw-ring-color: #84afd1 !important; }
.ring-blue-400 { --tw-ring-color: #5187b5 !important; }
.ring-blue-500 { --tw-ring-color: #2e4d68 !important; }
.focus\:ring-blue-200:focus { --tw-ring-color: #b3cfe4 !important; }
.focus\:ring-blue-300:focus { --tw-ring-color: #84afd1 !important; }
.focus\:ring-blue-400:focus { --tw-ring-color: #5187b5 !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: #2e4d68 !important; }

/* ---- Gradientes (from/to) ---- */
.from-blue-50  { --tw-gradient-from: #eff6fb !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239,246,251,0)) !important; }
.from-blue-100 { --tw-gradient-from: #d8e7f2 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(216,231,242,0)) !important; }
.from-blue-400 { --tw-gradient-from: #5187b5 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(81,135,181,0)) !important; }
.from-blue-500 { --tw-gradient-from: #2e4d68 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(46,77,104,0)) !important; }
.from-blue-600 { --tw-gradient-from: #24405a !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(36,64,90,0)) !important; }
.from-blue-700 { --tw-gradient-from: #1d3346 !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(29,51,70,0)) !important; }
.hover\:from-blue-500:hover { --tw-gradient-from: #2e4d68 !important; }
.hover\:from-blue-600:hover { --tw-gradient-from: #24405a !important; }
.to-blue-50  { --tw-gradient-to: #eff6fb !important; }
.to-blue-100 { --tw-gradient-to: #d8e7f2 !important; }
.to-blue-500 { --tw-gradient-to: #2e4d68 !important; }
.to-blue-600 { --tw-gradient-to: #24405a !important; }
.to-blue-700 { --tw-gradient-to: #1d3346 !important; }
.hover\:to-blue-600:hover { --tw-gradient-to: #24405a !important; }
.hover\:to-blue-700:hover { --tw-gradient-to: #1d3346 !important; }

/* ============================================================
   Componentes de marca reutilizáveis
   ============================================================ */
.brand-title { font-family: 'Oswald', 'Arial Narrow', sans-serif; letter-spacing: 0.4px; text-transform: uppercase; }

/* Medalhão do logo (header das telas) */
.logo-medalhao {
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 38, 52, 0.40);
    border: 3px solid rgba(255, 255, 255, 0.92);
    outline: 2px solid var(--azul-300);
    overflow: hidden;
}
.logo-medalhao img { width: 100%; height: 100%; object-fit: contain; border-radius: 9999px; background: #fff; }

/* Base azul claro pintada imediatamente — evita flash branco entre páginas. */
html { background-color: #dce9f5 !important; }
body { background-color: transparent; }

/* Mata a animação de entrada (fade/slide) que re-disparava a cada navegação
   e dava sensação de "pisca". A transição entre telas fica por conta do
   View Transitions (cross-fade), que é suave e não desloca o conteúdo. */
.fade-in { animation: none !important; opacity: 1 !important; transform: none !important; }