.mc-cards-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    padding: 60px 40px;
}

/* --- Tablet: 2 cards arriba, la 3ra abajo centrada --- */
@media (max-width: 900px) {
    .mc-cards-wrap {
        max-width: 660px;
        margin: 0 auto;
    }
}

/* --- Celular: una card debajo de otra --- */
@media (max-width: 480px) {
    .mc-cards-wrap {
        flex-direction: column;
        align-items: center;
        padding: 40px 20px;
    }
}

/* --- La card SIEMPRE es este rectángulo fijo: tamaño, --- */
/* --- esquinas y rotación no cambian nunca, ni en hover --- */
.mc-card {
    position: relative;
    display: block;
    width: 268px;
    height: 360px;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    background: var(--mc-base-color);
}

.mc-card--left   { transform: rotate(-2deg); }
.mc-card--center { transform: rotate(0deg); }
.mc-card--right  { transform: rotate(2deg); }

.mc-card--left   { --mc-base-color: #FFEC91; --mc-accent-color: #FFD820; }
.mc-card--center { --mc-base-color: #FEDAAA; --mc-accent-color: #FFC464; }
.mc-card--right  { --mc-base-color: #FFDC84; --mc-accent-color: #FBBA28; }

/* --- Capa "horizonte": una elipse ancha que sobresale --- */
/* --- por los lados y crece en altura hasta tapar todo --- */
.mc-card-fill {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: -8%;
    height: 65%;
    background: var(--mc-accent-color);
    border-radius: 50% 50% 0 0 / 70px 70px 0 0;
    transition: height 0.45s ease, border-radius 0.45s ease;
    z-index: 0;
}

.mc-card:hover .mc-card-fill {
    height: 130%;
    border-radius: 0 0 0 0 / 0 0 0 0;
}

.mc-card-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 85%;
    margin: 22px auto 0;
}

.mc-card-label {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 26px;
    text-align: center;
    font-family: 'Kaushan Script', cursive;
    font-size: 34px;
    color: #C5612B;
}