/* =========================================================
   MISSÃO, VISÃO E VALORES - layout revisado em 14/11/2026
   Mesmo vocabulário visual das Áreas de Atuação (azul-marinho + --dourado)
   ========================================================= */

.secao-filosofia {
    position: relative;
    padding: 96px 0 104px;
    color: #fff;
    background:
        radial-gradient(circle at 10% 15%, rgba(162, 185, 188, 0.16), transparent 35%),
        radial-gradient(circle at 92% 85%, rgba(162, 185, 188, 0.10), transparent 40%),
        linear-gradient(180deg, var(--azul-alvim) 0%, var(--azul-dark) 100%);
    overflow: hidden;
    isolation: isolate;
}
/* textura sutil de linhas diagonais */
.secao-filosofia::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.05;
    background-image: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 22px);
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

.secao-filosofia .filosofia-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--dourado);
    margin-bottom: 0.6rem;
}
.secao-filosofia .filosofia-titulo {
    color: #fff;
    margin-bottom: 0;
}
.secao-filosofia .filosofia-linha {
    width: 60px;
    height: 3px;
    border-radius: 3px;
    background: var(--dourado);
    margin: 0.9rem auto 0;
}

/* --- Cards --- */
.pilar-card {
    position: relative;
    height: 100%;
    padding: 2.6rem 2.1rem 2.3rem;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(4px);
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.pilar-card::after {
    /* barra de destaque que cresce no hover */
    content: "";
    position: absolute;
    left: 2.1rem;
    right: 2.1rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--dourado);
    transform: scaleX(0.25);
    transform-origin: left;
    transition: transform 0.4s ease;
}
.pilar-card:hover {
    transform: translateY(-6px);
    border-color: rgba(162, 185, 188, 0.45);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}
.pilar-card:hover::after { transform: scaleX(1); }

.pilar-numero {
    position: absolute;
    top: 0.4rem;
    right: 1.2rem;
    font-family: 'Playfair Display', serif;
    font-size: 5.5rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.10);
    user-select: none;
}

.pilar-icone {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--azul-alvim);
    background: var(--dourado);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
    margin-bottom: 1.6rem;
    transition: transform 0.35s ease;
}
.pilar-card:hover .pilar-icone { transform: rotate(-6deg) scale(1.05); }

.pilar-card h3 {
    color: #fff;
    font-size: 1.55rem;
    margin-bottom: 0.35rem;
}
.pilar-card .pilar-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--dourado);
    margin-bottom: 1.1rem;
}
.pilar-texto,
.pilar-texto p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 0;
}
.pilar-texto p + p { margin-top: 0.75rem; }
.pilar-texto strong { color: #fff; }

@media (max-width: 767.98px) {
    .secao-filosofia { padding: 72px 0 80px; }
    .pilar-card { padding: 2.2rem 1.6rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pilar-card, .pilar-card::after, .pilar-icone { transition: none; }
    .pilar-card:hover { transform: none; }
}