/* ===========================
   TIPOGRAFÍA GLOBAL MANROPE
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

* {
    font-family: 'Manrope', sans-serif !important;
}

/* Grosor titulos */
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 500; }

/* Párrafos */
p { font-weight: 400; }



/* ===============================
   SECCIÓN MISIÓN, VISIÓN Y VALORES
   Estilo moderno + animaciones
================================ */

/* Fondo general */
.servicios-section {
    padding: 60px 20px;
    background: #f0f4f9;
}

/* Tarjetas MVV */
.mv-card {
    border: none !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    padding: 25px;
    position: relative;
    overflow: hidden;

    transition: transform .35s ease, box-shadow .35s ease;
}

/* Efecto de iluminación animado */
.mv-card::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -80px;
    width: 160px;
    height: 160px;
    background: rgba(0, 153, 255, 0.18);
    border-radius: 50%;

    animation: shine 6s infinite linear;
}

@keyframes shine {
    0% { transform: translate(-150px, 150px); }
    50% { transform: translate(150px, -150px); }
    100% { transform: translate(-150px, 150px); }
}

/* Hover */
.mv-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
}

/* Títulos de las tarjetas */
.mv-card h4 {
    color: #005fa3 !important;
    font-size: 24px;
    font-weight: 700;
}

/* Texto */
.mv-card p {
    color: #444;
    font-size: 15px;
    line-height: 1.6;
}

/* ===============================
   ANIMACIÓN PARA VALORES
================================ */
.valores-list p {
    opacity: 0;
    transform: translateX(-20px);
    animation: aparecer 0.6s forwards;
}

.valores-list p:nth-child(1) { animation-delay: 0.2s; }
.valores-list p:nth-child(2) { animation-delay: 0.4s; }
.valores-list p:nth-child(3) { animation-delay: 0.6s; }
.valores-list p:nth-child(4) { animation-delay: 0.8s; }
.valores-list p:nth-child(5) { animation-delay: 1s; }
.valores-list p:nth-child(6) { animation-delay: 1.2s; }

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}