/* ============================================================
   SECCIÓN PRINCIPAL
   ============================================================ */
section#cabildo {
    padding: 2rem 1rem;
    background-color: white;
    margin: 1rem auto;
    max-width: 1100px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* ============================================================
   TÍTULO
   ============================================================ */
section#cabildo h1 {
    text-align: center;
    color: #001f3f;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 2.5rem;
    letter-spacing: .5px;
}

/* ============================================================
   GRID DE TARJETAS (REGIDORES / FUNCIONARIOS)
   - align-items: stretch asegura misma altura
   ============================================================ */
.cabildo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.7rem;
    align-items: stretch;
}

/* ============================================================
   TARJETA GENERAL
   - height: 100% iguala alturas
   ============================================================ */
.miembro-cabildo {
    background: white;
    border-left: 6px solid #001f3f;
    padding: 1.6rem 1.2rem;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    height: 100%;

    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    transition: transform .25s ease, box-shadow .25s ease;
}

.miembro-cabildo:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0,0,0,0.15);
}

/* ============================================================
   FOTO PERFIL
   ============================================================ */
.miembro-cabildo img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #001f3f55;
    margin-bottom: 1rem;
}

/* ============================================================
   NOMBRE
   ============================================================ */
.miembro-cabildo h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #001f3f;
    margin-bottom: .3rem;
}

/* ============================================================
   CARGO
   ============================================================ */
.miembro-cabildo p {
    font-size: .95rem;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* ============================================================
   PRESIDENTE MUNICIPAL (ALCALDE)
   - Va SOLO arriba
   - No pertenece al grid
   ============================================================ */
.miembro-cabildo.presidente {
    max-width: 345px;
    margin: 0 auto 2.5rem auto;
    padding: 2.3rem 1.5rem;

    background: white;
    border-left: 6px solid #001f3f;
    border-radius: 14px;

    text-align: center;
    box-shadow: 0 10px 28px rgba(0,0,0,0.15);
}

/* FOTO PRESIDENTE */
.miembro-cabildo.presidente img {
    width: 200px;
    height: 200px;
    border-width: 6px;
    border-color: #001f3f;
}

/* ============================================================
   BOTÓN FACEBOOK
   ============================================================ */
.btn-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background-color: #001f3f;
    border-radius: 50%;
    text-decoration: none;

    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.btn-facebook:hover {
    background-color: #003a7a;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* ICONO FACEBOOK */
.icon-facebook {
    width: 20px;
    height: 20px;
    fill: white;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {

    .miembro-cabildo img {
        width: 95px;
        height: 95px;
    }

    .miembro-cabildo.presidente img {
        width: 130px;
        height: 130px;
    }

    section#cabildo h1 {
        font-size: 1.8rem;
    }
}