/* =============================================================
   WHY-US — Sección ¿Por qué elegirnos?
   ============================================================= */

.why-section {
    background: var(--color-ubam-white);
    padding: 88px 80px;
    text-align: center;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
}

.why-card {
    background: var(--color-ubam-white);
    border-radius: 20px;
    padding: 38px 30px 32px;
    text-align: center;
    border: 1.5px solid;
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}

.why-card--blue  { border-color: rgba(4,178,217,.25); }
.why-card--pink  { border-color: rgba(217,24,114,.25); }
.why-card--green { border-color: rgba(5,146,18,.25); }

.why-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 0 0 18px 18px;
}

.why-card--blue::after  { background: linear-gradient(90deg, var(--color-ubam-blue), rgba(4,178,217,.3)); }
.why-card--pink::after  { background: linear-gradient(90deg, var(--color-ubam-pink), rgba(217,24,114,.3)); }
.why-card--green::after { background: linear-gradient(90deg, var(--color-ubam-green), rgba(5,146,18,.3)); }

.why-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    transform: translateX(-100%);
    transition: none;
    pointer-events: none;
    opacity: 0;
}

.why-card:hover::before {
    animation: shimLine .5s ease forwards;
    opacity: 1;
}

.why-card:hover { transform: translateY(-6px); }
.why-card--blue:hover  { box-shadow: 0 20px 50px rgba(4,178,217,.18);  border-color: rgba(4,178,217,.45); }
.why-card--pink:hover  { box-shadow: 0 20px 50px rgba(217,24,114,.18); border-color: rgba(217,24,114,.45); }
.why-card--green:hover { box-shadow: 0 20px 50px rgba(5,146,18,.18);   border-color: rgba(5,146,18,.45); }

.why-card:active { transform: translateY(0); }
.why-card--blue:active  { box-shadow: 0 6px 32px rgba(4,178,217,.55); }
.why-card--pink:active  { box-shadow: 0 6px 32px rgba(217,24,114,.55); }
.why-card--green:active { box-shadow: 0 6px 32px rgba(5,146,18,.55); }

/* ── ÍCONO ── */
.why-card-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    position: relative;
}

.why-card--blue  .why-card-icon { background: rgba(4,178,217,.1); }
.why-card--pink  .why-card-icon { background: rgba(217,24,114,.09); }
.why-card--green .why-card-icon { background: rgba(5,146,18,.09); }

.why-card-icon::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
}

.why-card--blue  .why-card-icon::before { animation: glowBlue 2.5s infinite; }
.why-card--pink  .why-card-icon::before { animation: glowPink 2.5s infinite; }
.why-card--green .why-card-icon::before { animation: glowGreen 2.5s infinite; }

/* ── TEXTO ── */
.why-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 11px;
    color: var(--color-ubam-dark);
}

.why-card-text {
    font-size: 14px;
    color: var(--color-ubam-gray);
    line-height: 1.7;
}

.why-card-tag {
    display: inline-block;
    margin-top: 18px;
    padding: 5px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
}

.why-card--blue  .why-card-tag { background: rgba(4,178,217,.09);  color: var(--color-ubam-dark-blue); }
.why-card--pink  .why-card-tag { background: rgba(217,24,114,.09); color: var(--color-ubam-dark-pink); }
.why-card--green .why-card-tag { background: rgba(5,146,18,.09);   color: var(--color-ubam-green); }