/* ==========================================================================
   COMPONENTES — Campanha Agaciel Maia 2026
   Botões, cartões e blocos reaproveitados entre as seções.
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.86rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-speed),
                color var(--transition-speed),
                border-color var(--transition-speed),
                box-shadow var(--transition-speed),
                transform var(--transition-speed);
}

.btn:hover { transform: translateY(-2px); }

/* Dourado da IDV com texto navy: 6,8:1. O amarelo mais claro no hover mantém
   7,6:1 — os dois estados passam na WCAG AA. */
.btn-primary {
    background: var(--color-yellow);
    color: var(--color-blue-main);
    box-shadow: 0 6px 18px rgba(233, 177, 30, 0.28);
}

.btn-primary:hover {
    background: var(--color-gold-soft);
    box-shadow: 0 12px 26px rgba(233, 177, 30, 0.34);
}

.btn-secondary {
    background: transparent;
    color: var(--color-white);
    border-color: rgba(255, 255, 255, 0.35);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
}

.btn:focus-visible {
    outline: 3px solid var(--color-yellow);
    outline-offset: 2px;
}

/* --- Cartões ----------------------------------------------------------- */

.card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-line);
    border-radius: var(--border-radius-lg);
    padding: 1.9rem;
    box-shadow: var(--shadow-sm);
}

/* --- Cartões de eixo/proposta ------------------------------------------ */

/* O arco superior é o elemento gráfico da IDV (a mesma curva do "M" do
   logotipo). Fica invisível em repouso e se revela no hover, de modo que a
   grade em repouso continue sóbria — oito arcos coloridos ao mesmo tempo
   viram cartaz, não site institucional. */
.eixo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
    overflow: hidden;
    transition: border-color var(--transition-speed),
                box-shadow var(--transition-speed),
                transform var(--transition-speed);
}

.eixo-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--faixa-tricolor);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-speed);
}

.eixo-card:hover {
    border-color: var(--color-blue-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.eixo-card:hover::before { transform: scaleX(1); }

.eixo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 25px 25px 10px 10px; /* arco da IDV: topo redondo, base reta */
    background: var(--color-blue-main);
    transition: background-color var(--transition-speed);
}

.eixo-card:hover .eixo-icon { background: var(--color-blue-mid); }

.eixo-icon svg { width: 24px; height: 24px; fill: var(--color-yellow); }

.eixo-card h3 { font-size: 1.15rem; }

.eixo-card p {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* --- Linha do tempo ----------------------------------------------------- */

/* Trilho em degradê navy → transparente: a linha do tempo perde peso conforme
   desce, em vez de terminar num corte seco. */
.timeline {
    position: relative;
    margin-top: 2.5rem;
    padding-left: 2rem;
    border-left: 2px solid transparent;
    border-image: linear-gradient(180deg, var(--color-blue-mid) 0%, var(--color-gray-line) 78%, transparent 100%) 1;
    text-align: left;
}

.timeline-item {
    position: relative;
    padding-bottom: 2.2rem;
}

.timeline-item:last-child { padding-bottom: 0; }

.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-2rem - 7px);
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-yellow);
    border: 2px solid var(--color-white);
}

.timeline-year {
    display: block;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--color-blue-mid);
    letter-spacing: 0.06em;
}

.timeline-item h3 {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.1rem;
}

.timeline-item p {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

/* `.propostas-list` nasce em widget.css já pintada para o fundo escuro da seção
   de captura. Reaproveitada dentro de um cartão branco (as realizações), o
   texto branco sumiria — daí o override por contexto. */
.card .propostas-list li { color: var(--color-text-dark); }
.card .propostas-list svg { fill: var(--color-blue-main); }
.card .propostas-list strong { color: var(--color-blue-dark); font-weight: 600; }

/* --- Botões de contato -------------------------------------------------- */

.contact-buttons { display: flex; flex-direction: column; gap: 0.9rem; }

.contact-btn {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.05rem 1.3rem;
    border: 1px solid var(--color-gray-line);
    border-radius: var(--border-radius);
    background: var(--color-white);
    color: var(--color-blue-dark);
    font-weight: 500;
    font-size: 0.94rem;
    text-decoration: none;
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
}

.contact-btn:hover {
    border-color: var(--color-blue-main);
    background: var(--color-gray-light);
}

.contact-btn svg { width: 21px; height: 21px; fill: var(--color-blue-main); flex-shrink: 0; }

/* Aviso de canal ainda não divulgado — some quando os links oficiais chegarem. */
.contact-pendente {
    padding: 1.05rem 1.3rem;
    border: 1px dashed var(--color-gray-line);
    border-radius: var(--border-radius);
    font-size: 0.88rem;
    color: var(--color-text-muted);
}