/*
 * global.css — Picos Cidade da Gente
 * Identidade visual inspirada na capa do livro:
 *   Azul da arquitetura histórica · Âmbar dourado das abelhas · Verde da vegetação
 */

/* ===========================
   Variáveis de design
   =========================== */
:root {
    /* ── Azul da cidade e da arquitetura ──────────────────── */
    --cor-azul:            #1A5FAD;   /* Azul vivo da capa          */
    --cor-azul-escuro:     #0F3D75;   /* Azul profundo              */
    --cor-azul-claro:      #EBF3FB;   /* Fundo suave azulado        */
    --cor-primaria:        #1A5FAD;
    --cor-primaria-medio:  #2070C8;
    --cor-primaria-claro:  #EBF3FB;

    /* ── Âmbar · Mel · Abelhas ────────────────────────────── */
    --cor-mel:             #F5A623;   /* Âmbar dourado — mel        */
    --cor-mel-escuro:      #D4870A;
    --cor-mel-claro:       #FEF3D4;   /* Fundo mel suave            */
    --cor-dourado:         #F5A623;

    /* ── Verde da vegetação de Picos ─────────────────────── */
    --cor-verde:           #4A7C2F;   /* Verde folhagem             */
    --cor-verde-escuro:    #3A6023;
    --cor-verde-claro:     #EBF5E0;

    /* ── Laranja do título "Picos" na capa ───────────────── */
    --cor-acento:          #E8721E;
    --cor-acento-escuro:   #C45910;
    --cor-acento-claro:    #FDE8D4;

    /* ── Legado / retrocompatibilidade ───────────────────── */
    --cor-azul-claro-legado: #2070C8;

    /* ── Neutros quentes (creme do fundo da capa) ─────────── */
    --cor-fundo:           #FDF8F0;   /* Creme quente               */
    --cor-fundo-icones:    #FEF3D4;   /* Âmbar muito suave          */
    --cor-branco:          #ffffff;
    --cor-texto:           #1C2B1A;   /* Quase-preto com toque verde*/
    --cor-texto-suave:     #5D7052;   /* Verde-cinza suave          */
    --cor-borda:           #E2DDD4;   /* Borda creme                */

    /* ── Gradientes ──────────────────────────────────────── */
    --grad-azul:     linear-gradient(135deg, #0F3D75 0%, #1A5FAD 100%);
    --grad-mel:      linear-gradient(135deg, #D4870A 0%, #F5A623 100%);
    --grad-verde:    linear-gradient(135deg, #3A6023 0%, #4A7C2F 100%);
    --grad-acento:   linear-gradient(135deg, #C45910 0%, #E8721E 100%);
    --grad-hero:     linear-gradient(135deg, rgba(15,61,117,0.88) 0%, rgba(26,95,173,0.65) 100%);

    /* ── Tipografia ──────────────────────────────────────── */
    --fonte-principal: 'Montserrat', sans-serif;
    --fonte-slab:      'Roboto Slab', serif;

    /* ── Componentes ─────────────────────────────────────── */
    --raio-card:         14px;
    --raio-btn:          50px;
    --sombra-card:       0 2px 16px rgba(26, 95, 173, 0.09);
    --sombra-card-hover: 0 12px 38px rgba(26, 95, 173, 0.20);
    --sombra-mel:        0 4px 16px rgba(245, 166, 35, 0.30);
}

/* ===========================
   Reset e base
   =========================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color:      var(--cor-fundo);
    font-family:           var(--fonte-principal);
    color:                 var(--cor-texto);
    margin:                0;
    padding:               0;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height:    auto;
}

/* ===========================
   Botões globais
   =========================== */

/* Azul — ação principal */
.btn-azul {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    background:      var(--grad-azul);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--raio-btn);
    padding:         0.75rem 1.9rem;
    font-size:       0.85rem;
    font-weight:     700;
    font-family:     var(--fonte-principal);
    text-decoration: none;
    cursor:          pointer;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    transition:      all 0.25s ease;
    box-shadow:      0 4px 16px rgba(26, 95, 173, 0.28);
}

.btn-azul:hover {
    background:      linear-gradient(135deg, #0B2F5A 0%, #0F3D75 100%);
    color:           #ffffff;
    transform:       translateY(-2px);
    box-shadow:      0 8px 26px rgba(26, 95, 173, 0.38);
    text-decoration: none;
}

.btn-azul:active  { transform: translateY(0); }
.btn-azul:focus   { outline: none; box-shadow: 0 0 0 3px rgba(26, 95, 173, 0.3); }

/* Mel/Âmbar — destaque, explorar */
.btn-mel {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    background:      var(--grad-mel);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--raio-btn);
    padding:         0.75rem 1.9rem;
    font-size:       0.85rem;
    font-weight:     700;
    font-family:     var(--fonte-principal);
    text-decoration: none;
    cursor:          pointer;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    transition:      all 0.25s ease;
    box-shadow:      var(--sombra-mel);
}

.btn-mel:hover {
    background:      linear-gradient(135deg, #B36E08 0%, #D4870A 100%);
    color:           #ffffff;
    transform:       translateY(-2px);
    box-shadow:      0 8px 26px rgba(245, 166, 35, 0.42);
    text-decoration: none;
}

/* Verde — ações secundárias */
.btn-verde {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    background:      var(--grad-mel);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--raio-btn);
    padding:         0.75rem 1.9rem;
    font-size:       0.85rem;
    font-weight:     700;
    font-family:     var(--fonte-principal);
    text-decoration: none;
    cursor:          pointer;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    transition:      all 0.25s ease;
    box-shadow:      var(--sombra-mel);
}

.btn-verde:hover {
    background:      linear-gradient(135deg, #B36E08 0%, #D4870A 100%);
    color:           #ffffff;
    transform:       translateY(-2px);
    box-shadow:      0 8px 26px rgba(245, 166, 35, 0.42);
    text-decoration: none;
}

/* ===========================
   Classes utilitárias de cor
   =========================== */
.text-azul-picos    { color: var(--cor-azul);  font-weight: 800; }
.text-verde-picos   { color: var(--cor-mel);   font-weight: 800; }   /* mel/dourado = destaque */
.texto-azul-picos   { color: var(--cor-azul); }
.texto-verde-picos  { color: var(--cor-mel); }
.bg-verde           { background: var(--grad-azul); }
.bg-azul            { background: var(--cor-azul); }

/* ===========================
   Breadcrumb de navegação
   =========================== */
.breadcrumb-voltar {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    color:           var(--cor-azul);
    font-size:       0.875rem;
    font-weight:     600;
    text-decoration: none;
    padding:         0.5rem 0;
    transition:      color 0.2s, gap 0.2s;
}

.breadcrumb-voltar:hover {
    color:           var(--cor-mel);
    gap:             0.65rem;
    text-decoration: none;
}

/* ===========================
   Mensagem de lista vazia
   =========================== */
.lista-vazia {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         3.5rem 2rem;
    background:      var(--cor-mel-claro);
    border:          2px dashed var(--cor-mel);
    border-radius:   var(--raio-card);
    gap:             0.75rem;
    width:           100%;
}

.lista-vazia-icone  { font-size: 2.5rem; color: var(--cor-mel); opacity: 0.6; }
.lista-vazia-titulo { font-size: 1rem; font-weight: 700; color: var(--cor-texto); margin: 0; }
.lista-vazia-texto  { font-size: 0.875rem; color: var(--cor-texto-suave); margin: 0; }

/* ===========================
   Spinner de carregamento
   =========================== */
.carregando-area {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    padding:         3.5rem 2rem;
    gap:             1rem;
    color:           var(--cor-texto-suave);
    font-size:       0.875rem;
}

.spinner-picos {
    width:         36px;
    height:        36px;
    border:        3px solid rgba(26, 95, 173, 0.12);
    border-top:    3px solid var(--cor-mel);
    border-radius: 50%;
    animation:     girar-spinner 0.75s linear infinite;
}

@keyframes girar-spinner {
    to { transform: rotate(360deg); }
}

/* ===========================
   Cabeçalho fixo
   =========================== */
.conteudo-principal {
    padding-top: 76px;
}