/* ═══════════════════════════════════════════════
   sobre.css — página Sobre nós (sobre.php)
   Breakpoints: 1100 / 900 / 640 / 400
   ═══════════════════════════════════════════════ */

/* Variáveis usadas pelo index.css e por esta página
   (assim o sobre.css funciona sozinho, em qualquer ordem de carregamento) */
:root {
    --blue-0: #0099FF;
    --blue-1: #0056B3;
    --blue-2: #003D80;
    --blue-3: #002255;
    --light: #f4f8ff;
    --muted: #5a7a9e;
    --text: #0f1f35;
    --text2: #3d5470;
    --border: rgba(0, 86, 179, 0.11);
    --font-head: 'Sora', sans-serif;
    --radius: 18px;
}


/* ─── TOPO: TEXTO + IMAGEM ─── */
.sobre-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
    margin-bottom: clamp(40px, 6vw, 70px);
}

.sobre-top>* {
    min-width: 0;
}

.sobre-text .sec-h {
    overflow-wrap: break-word;
}

.sobre-lead {
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    color: var(--text2);
    line-height: 1.8;
    margin-top: 18px;
    margin-bottom: 28px;
}

.sobre-lead+.sobre-lead {
    margin-top: 0;
}

.sobre-lead strong {
    color: var(--text);
    font-weight: 700;
}

/* Imagem: altura fluida (sobrescreve o style="height:500px" inline do sobre.php) */
.sobre-visual img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: clamp(240px, 42vw, 500px) !important;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}


/* ─── VALORES ─── */
.valores-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: clamp(40px, 6vw, 80px);
}

.valor-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 30px 24px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.valor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(0, 60, 160, 0.09);
    border-color: rgba(0, 153, 255, 0.2);
}

.valor-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, rgba(0, 153, 255, 0.1), rgba(0, 86, 179, 0.05));
    border: 1px solid rgba(0, 153, 255, 0.18);
}

.valor-card h3 {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.valor-card p {
    font-size: 0.83rem;
    color: var(--muted);
    line-height: 1.65;
}


/* ═══════════════ RESPONSIVO ═══════════════ */

/* Tablet: texto em cima, imagem embaixo; valores em 2 colunas */
@media (max-width: 900px) {

    .sobre-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* animação de entrada vertical (evita rolagem lateral) */
    .sobre-text.rl,
    .sobre-visual.rr {
        transform: translateY(28px);
    }

    .sobre-text.rl.vis,
    .sobre-visual.rr.vis {
        transform: none;
    }

    .valores-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* terceiro card sozinho na última linha: centralizado */
    .valor-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 10px);
    }
}

/* Celular: uma coluna */
@media (max-width: 640px) {

    .sobre-lead {
        line-height: 1.7;
        margin-bottom: 20px;
    }

    .valores-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .valor-card:last-child:nth-child(odd) {
        width: 100%;
    }

    .valor-card {
        padding: 24px 20px;
    }

    .sobre-visual img {
        height: clamp(200px, 60vw, 320px) !important;
    }
}

@media (max-width: 400px) {

    .valor-card h3 {
        font-size: 0.95rem;
    }

    .valor-card p {
        font-size: 0.8rem;
    }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {

    .valor-card {
        transition: none;
    }

    .valor-card:hover {
        transform: none;
    }
}