/* ============================================================
   Design System — Site João Fernando (público)
   ============================================================ */

:root {
    /* Cores da marca (sobrescritas pelo banco em topo_site.php) */
    --destaque: #FFC800;
    --destaque-escuro: #E6B000;
    --sobre-destaque: #0B3B75;   /* cor do texto por cima do --destaque */
    --azul: #0E4C96;
    --azul-claro: #1565C0;
    --vermelho-contra: #D22B2B;   /* marcador do bloco "Sou contra" */

    /* Neutros */
    --branco: #ffffff;
    --cinza-claro: #f5f6f8;
    --cinza: #8a8f99;
    --cinza-escuro: #3a3f47;
    --preto: #1a1c20;

    /* Tipografia */
    --fonte: 'Montserrat', -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* Layout */
    --container: 1140px;
    --raio: 14px;
    --sombra: 0 10px 30px rgba(11, 59, 117, 0.10);
    --sombra-forte: 0 20px 50px rgba(11, 59, 117, 0.20);
    --transicao: .25s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--fonte);
    color: var(--preto);
    background: var(--branco);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--azul); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--azul-claro); }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; color: var(--azul); }

/* ===== Utilitários de layout ===== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.secao { padding: clamp(48px, 8vw, 96px) 0; }
.secao--cinza { background: var(--cinza-claro); }
.secao--azul { background: var(--azul); color: var(--branco); }
.secao--azul h2 { color: var(--branco); }

.titulo-secao {
    font-size: clamp(28px, 4vw, 40px);
    text-align: center;
    margin-bottom: 12px;
}
.titulo-secao + .subtitulo-secao { text-align: center; color: var(--cinza); margin-bottom: 48px; }

.traco {
    width: 64px; height: 5px; border-radius: 3px;
    background: var(--destaque); margin: 16px auto 0;
}

/* ===== Botões ===== */
.btn {
    display: inline-block;
    background: var(--destaque);
    color: var(--sobre-destaque);
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform var(--transicao), background var(--transicao), box-shadow var(--transicao);
}
.btn:hover { background: var(--destaque-escuro); color: var(--sobre-destaque); transform: translateY(-2px); box-shadow: var(--sombra-forte); }
.btn--contorno { background: transparent; border: 2px solid var(--branco); color: var(--branco); }
.btn--contorno:hover { background: var(--branco); color: var(--azul); }

/* ===== Grid genérico ===== */
.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ===== Cartão ===== */
.cartao {
    background: var(--branco);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao);
}
.cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-forte); }