/* Estilos de la sección benefits. Todo va dentro de .app-benefits para no chocar con otras secciones. */

.app-benefits {
    display: block;
    overflow-x: clip;
}

.app-benefits .benefits {
    max-width: 1200px;
    padding-block: 5rem;
}

.app-benefits .card--skeleton {
    animation: none;
    background: #eef2f1;
    border-color: transparent;
    box-shadow: none;
}

/* ---------- Encabezado ---------- */

.app-benefits .benefits__head {
    text-align: center;
    margin-bottom: 3rem;
}

.app-benefits .eyebrow {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6ea89f;
    background: #fff;
    border-radius: 999px;
    border: 1px solid #6ea89f;
}

.app-benefits h2 {
    margin: 0 0 1.25rem;
    font-family: "Special Gothic Condensed One", sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: normal;
    background: linear-gradient(120deg, #223746 40%, #6ea89f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Grid ---------- */

/* row-gap grande: deja espacio para la imagen que sobresale por arriba */

.app-benefits .grid {
    display: grid;
    gap: 5rem 2rem;
    padding-top: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ---------- Tarjeta ---------- */

.app-benefits .card {
    --accent: #6ea89f;
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;
    position: relative;
    min-height: 340px;
    border-radius: 28px;
    background: linear-gradient(165deg,
        color-mix(in srgb, var(--accent) 28%, #fff) 0%,
        color-mix(in srgb, var(--accent) 6%, #fff) 65%,
        #fff 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, #fff);
    box-shadow: 0 25px 45px -28px color-mix(in srgb, var(--accent) 80%, #0f172a);
    transform-style: preserve-3d;
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
    will-change: transform;
}

.app-benefits .card.is-hover {
    transition: transform 0.12s ease-out, box-shadow 0.9s ease;
    box-shadow: 0 45px 70px -30px color-mix(in srgb, var(--accent) 90%, #0f172a);
}

/* Brillo que sigue al cursor (recortado a la forma de la tarjeta) */

.app-benefits .card__glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.7), transparent 55%);
    transition: opacity 0.4s ease;
}

.app-benefits .card.is-hover .card__glare {
    opacity: 1;
}

/* Número grande decorativo detrás de la imagen */

.app-benefits .card__num {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--accent) 35%, transparent);
    transform: translateZ(10px);
    user-select: none;
}

/* ---------- Imagen que sobresale ---------- */

.app-benefits .card__media {
    position: absolute;
    left: 50%;
    width: 112%;
    height: 250px;
    transform: translateX(-50%) translateZ(80px);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}

.app-benefits .card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--accent) 45%, transparent));
    animation: benefits-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.8s);
}

/* sombra en el piso */

.app-benefits .card__media::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 55%;
    height: 16px;
    background: radial-gradient(ellipse, rgba(15, 23, 42, 0.4), transparent 70%);
    filter: blur(6px);
    transform: translateX(-50%);
    animation: benefits-shadow 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.8s);
}

.app-benefits .card.is-hover .card__media {
    transform: translateX(-50%) translateZ(120px) scale(1.2);
}

/* ---------- Texto ---------- */

.app-benefits .card__body {
    position: relative;
    padding: 11.5rem 1.5rem 1.75rem;
    transform: translateZ(30px);
}

.app-benefits .card__body h3 {
    font-size: 1.5rem;
    font-weight: 100;
    color: #223746;
    font-family: "Special Gothic Condensed One", sans-serif;
}

.app-benefits .card__body p {
    margin: 0;
    font-size: 0.90rem;
    line-height: 1.3;
    color: #223746;
}

/* ---------- Animaciones ---------- */

@keyframes benefits-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(-1.5deg);
    }
}

@keyframes benefits-shadow {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateX(-50%) scale(0.8);
        opacity: 0.6;
    }
}

@keyframes benefits-rise {
    from {
        opacity: 0;
        translate: 0 40px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@supports (animation-timeline: view()) {
    .app-benefits .card {
        animation: benefits-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 45%;
    }

}

/* ---------- Móvil ---------- */

@media (max-width: 600px) {
    .app-benefits .card__media {
        width: 100%;
    }

}

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
    .app-benefits .card,
    .app-benefits .card * {
        animation: none !important;
        transition: none !important;
    }

}