/* =========================================================
   MISIÓN · VISIÓN · VALORES
   AYUNTAMIENTO
========================================================= */

.mvv-section{
    position:relative;
    padding:110px 20px;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(20, 91, 155, .09),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f5f9fc 0%,
            #ffffff 100%
        );
    overflow:hidden;
}

.mvv-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}


/* =========================================================
   ENCABEZADO
========================================================= */

.mvv-header{
    max-width:780px;
    margin:0 auto 60px;
    text-align:center;
}

.mvv-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;

    margin-bottom:20px;
    padding:9px 17px;

    border:1px solid rgba(20, 91, 155, .15);
    border-radius:100px;

    background:#ffffff;
    color:#145b9b;

    font-size:.82rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;

    box-shadow:0 8px 25px rgba(20, 91, 155, .07);
}

.mvv-badge i{
    font-size:.9rem;
}

.mvv-header h2{
    margin:0 0 20px;

    color:#1d2935;

    font-size:clamp(2rem, 4vw, 3.5rem);
    font-weight:800;
    line-height:1.12;
    letter-spacing:-.04em;
}

.mvv-header h2 span{
    color:#145b9b;
}

.mvv-header p{
    max-width:680px;
    margin:0 auto;

    color:#66717d;

    font-size:1.05rem;
    line-height:1.8;
}


/* =========================================================
   GRID
========================================================= */

.mvv-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}


/* =========================================================
   TARJETAS
========================================================= */

.mvv-card{
    position:relative;
    min-width:0;

    padding:42px;

    border:1px solid rgba(20, 91, 155, .10);
    border-radius:26px;

    background:#ffffff;

    box-shadow:
        0 15px 40px rgba(16, 55, 90, .07);

    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* Línea superior institucional */

.mvv-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(
        90deg,
        #145b9b,
        #2586c4
    );
}


.mvv-card:hover{
    transform:translateY(-6px);

    border-color:rgba(20, 91, 155, .22);

    box-shadow:
        0 24px 55px rgba(16, 55, 90, .13);
}


/* MISIÓN Y VISIÓN */

.mvv-mision,
.mvv-vision{
    min-height:360px;
}


/* =========================================================
   VALORES
========================================================= */

.mvv-valores{
    grid-column:1 / -1;
    min-height:300px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(71, 163, 218, .22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0d4778 0%,
            #145b9b 55%,
            #126da8 100%
        );

    color:#ffffff;

    border:none;
}


/* =========================================================
   NÚMEROS
========================================================= */

.mvv-number{
    position:absolute;

    right:24px;
    bottom:-25px;

    color:rgba(20, 91, 155, .055);

    font-size:10rem;
    font-weight:800;
    line-height:1;

    pointer-events:none;
    user-select:none;
}

.mvv-valores .mvv-number{
    color:rgba(255,255,255,.06);
}


/* =========================================================
   PARTE SUPERIOR
========================================================= */

.mvv-card-top{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:30px;
}


/* =========================================================
   ICONOS
========================================================= */

.mvv-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:62px;
    height:62px;
    flex:0 0 62px;

    border-radius:18px;

    background:#eaf4fb;
    color:#145b9b;

    font-size:1.45rem;

    box-shadow:
        inset 0 0 0 1px rgba(20, 91, 155, .06);

    transition:
        transform .3s ease,
        background .3s ease;
}

.mvv-card:hover .mvv-icon{
    transform:rotate(-5deg) scale(1.05);

    background:#dceef9;
}

.mvv-valores .mvv-icon{
    background:rgba(255,255,255,.12);
    color:#ffffff;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12);
}


/* =========================================================
   ETIQUETAS
========================================================= */

.mvv-card-label{
    color:#73879a;

    font-size:.75rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mvv-valores .mvv-card-label{
    color:rgba(255,255,255,.65);
}


/* =========================================================
   TEXTOS
========================================================= */

.mvv-card h3{
    position:relative;
    z-index:2;

    margin:0 0 18px;

    color:#1d2935;

    font-size:2rem;
    font-weight:800;
    line-height:1.2;
}

.mvv-card p{
    position:relative;
    z-index:2;

    max-width:520px;
    margin:0;

    color:#64717d;

    font-size:1rem;
    line-height:1.85;
}

.mvv-valores h3{
    color:#ffffff;
}

.mvv-valores p{
    color:rgba(255,255,255,.82);
}


/* =========================================================
   VALORES / CHIPS
========================================================= */

.mvv-values{
    position:relative;
    z-index:2;

    display:flex;
    flex-wrap:wrap;
    gap:12px;

    max-width:950px;
}

.mvv-values span{
    display:inline-flex;
    align-items:center;

    padding:11px 17px;

    border:1px solid rgba(255,255,255,.17);
    border-radius:100px;

    background:rgba(255,255,255,.10);

    color:#ffffff;

    font-size:.9rem;
    font-weight:600;

    backdrop-filter:blur(5px);

    transition:
        background .25s ease,
        transform .25s ease;
}

.mvv-values span:hover{
    background:rgba(255,255,255,.18);
    transform:translateY(-2px);
}


/* =========================================================
   DECORACIÓN
========================================================= */

.mvv-section::before{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-180px;
    top:-160px;

    border:70px solid rgba(20, 91, 155, .025);
    border-radius:50%;

    pointer-events:none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:991px){

    .mvv-section{
        padding:90px 20px;
    }

    .mvv-card{
        padding:35px;
    }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width:767px){

    .mvv-section{
        padding:70px 16px;
    }

    .mvv-header{
        margin-bottom:42px;
    }

    .mvv-header h2{
        font-size:2rem;
    }

    .mvv-header p{
        font-size:.98rem;
        line-height:1.75;
    }

    .mvv-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .mvv-mision,
    .mvv-vision,
    .mvv-valores{
        grid-column:auto;
        min-height:auto;
    }

    .mvv-card{
        padding:30px 24px 34px;

        border-radius:22px;
    }

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

    .mvv-card-top{
        align-items:flex-start;

        margin-bottom:25px;
    }

    .mvv-icon{
        width:54px;
        height:54px;
        flex-basis:54px;

        border-radius:16px;

        font-size:1.25rem;
    }

    .mvv-card-label{
        max-width:145px;

        text-align:right;
        line-height:1.5;
    }

    .mvv-card h3{
        font-size:1.65rem;
    }

    .mvv-card p{
        font-size:.96rem;
        line-height:1.8;
    }

    .mvv-number{
        right:10px;
        bottom:-10px;

        font-size:7rem;
    }

    .mvv-values{
        gap:9px;
    }

    .mvv-values span{
        padding:9px 13px;

        font-size:.82rem;
    }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce){

    .mvv-card,
    .mvv-icon,
    .mvv-values span{
        transition:none;
    }

    .mvv-card:hover,
    .mvv-values span:hover{
        transform:none;
    }

}