/* Capa de movimiento y profundidad para el skin Gracie Barra.
   Solo suma: no cambia la estructura ni el skin de landing-gracie-barra.css.
   Reglas: transform/opacity únicamente, ease-out fuerte, hover solo con puntero
   fino, y todo se apaga con prefers-reduced-motion. */

.gracie-barra-theme {
    --fx-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --fx-ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Progreso de scroll ─────────────────────────────── */
.fx-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 1200;
    background: linear-gradient(90deg, #E2211C, #ff5a4d);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
}

/* ── Header: gana cuerpo al bajar ───────────────────── */
.gracie-barra-theme .gjj-header.landing-header {
    transition: box-shadow 250ms var(--fx-ease), background-color 250ms var(--fx-ease);
}

.gracie-barra-theme .gjj-header.landing-header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px -12px rgba(17, 40, 109, 0.28);
}

.gracie-barra-theme .gjj-header .nav-link {
    position: relative;
}

.gracie-barra-theme .gjj-header .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: var(--brand-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--fx-ease);
}

/* ── Hero ───────────────────────────────────────────── */
.gracie-barra-theme .l-hero-bg {
    inset: -10% 0;
    will-change: transform;
}

.gracie-barra-theme .l-hero-bg img {
    animation: fx-kenburns 2.4s var(--fx-ease) both;
}

/* Orbes de color que derivan despacio detrás del texto */
.gracie-barra-theme .l-hero-glow {
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(38rem 38rem at 12% 18%, rgba(226, 33, 28, 0.16), transparent 62%),
        radial-gradient(44rem 44rem at 92% 82%, rgba(17, 40, 109, 0.20), transparent 64%);
    animation: fx-drift 18s ease-in-out infinite alternate;
}

/* Rejilla técnica muy tenue: da textura sin competir con el texto */
.gracie-barra-theme .l-hero-pattern {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(17, 40, 109, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 40, 109, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

.gracie-barra-theme .l-hero-inner {
    position: relative;
    z-index: 2;
}

.gracie-barra-theme .l-hero-title .l-red {
    background: linear-gradient(100deg, #E2211C 20%, #ff5a4d 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Entrada escalonada del hero (una sola vez al cargar) */
.gracie-barra-theme .l-hero-badge,
.gracie-barra-theme .l-hero-title .l-stroke,
.gracie-barra-theme .l-hero-title .l-red,
.gracie-barra-theme .l-hero-desc,
.gracie-barra-theme .l-hero-actions,
.gracie-barra-theme .l-hero-stats {
    animation: fx-rise 700ms var(--fx-ease) both;
}

.gracie-barra-theme .l-hero-title .l-stroke,
.gracie-barra-theme .l-hero-title .l-red {
    display: inline-block;
}

.gracie-barra-theme .l-hero-badge { animation-delay: 60ms; }
.gracie-barra-theme .l-hero-title .l-stroke { animation-delay: 140ms; }
.gracie-barra-theme .l-hero-title .l-red { animation-delay: 220ms; }
.gracie-barra-theme .l-hero-desc { animation-delay: 320ms; }
.gracie-barra-theme .l-hero-actions { animation-delay: 400ms; }
.gracie-barra-theme .l-hero-stats { animation-delay: 480ms; }

/* ── Botones ────────────────────────────────────────── */
.gracie-barra-theme .l-btn,
.gracie-barra-theme .gjj-header .cta-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform 160ms var(--fx-ease),
        box-shadow 220ms var(--fx-ease),
        background-color 200ms ease,
        border-color 200ms ease,
        color 200ms ease;
}

.gracie-barra-theme .l-btn:active,
.gracie-barra-theme .gjj-header .cta-btn:active {
    transform: scale(0.97);
}

/* Destello que cruza el botón rojo */
.gracie-barra-theme .l-btn-red::after,
.gracie-barra-theme .gjj-header .cta-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
    transform: translateX(-120%);
    pointer-events: none;
}

.gracie-barra-theme .l-btn-red {
    box-shadow: 0 10px 24px -10px rgba(226, 33, 28, 0.7);
}

/* ── Secciones oscuras: profundidad ─────────────────── */
.gracie-barra-theme .l-section-dark {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(60rem 28rem at 85% -10%, rgba(226, 33, 28, 0.18), transparent 65%),
        radial-gradient(50rem 30rem at 0% 110%, rgba(255, 255, 255, 0.07), transparent 65%),
        #11286D;
}

.gracie-barra-theme .l-section-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.35;
    background-image: repeating-linear-gradient(
        135deg,
        transparent 0 22px,
        rgba(255, 255, 255, 0.035) 22px 23px
    );
    pointer-events: none;
}

.gracie-barra-theme .l-section-light {
    background: linear-gradient(180deg, #fff 0%, #f6f7fb 100%);
}

/* Etiqueta de sección con trazo que se dibuja al entrar */
.gracie-barra-theme .l-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.gracie-barra-theme .l-tag::before {
    content: '';
    width: 1.75rem;
    height: 2px;
    background: var(--brand-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 600ms var(--fx-ease) 200ms;
}

.gracie-barra-theme .l-reveal.visible .l-tag::before,
.gracie-barra-theme .l-hero-badge::before {
    transform: scaleX(1);
}

/* ── Revelado: más suave y escalonado ───────────────── */
.gracie-barra-theme .l-reveal {
    transform: translateY(20px);
    transition: opacity 600ms var(--fx-ease), transform 600ms var(--fx-ease);
}

.gracie-barra-theme .l-plans-grid.l-reveal,
.gracie-barra-theme .l-trial-grid.l-reveal {
    transform: none;
}

.gracie-barra-theme .l-plans-grid > *,
.gracie-barra-theme .l-trial-grid > * {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    transition:
        opacity 500ms var(--fx-ease),
        transform 500ms var(--fx-ease),
        box-shadow 220ms var(--fx-ease),
        border-color 220ms ease;
}

.gracie-barra-theme .l-plans-grid.visible > *,
.gracie-barra-theme .l-trial-grid.visible > * {
    opacity: 1;
    transform: none;
}

.gracie-barra-theme .l-plans-grid.visible > :nth-child(2),
.gracie-barra-theme .l-trial-grid.visible > :nth-child(2) { transition-delay: 70ms; }
.gracie-barra-theme .l-plans-grid.visible > :nth-child(3),
.gracie-barra-theme .l-trial-grid.visible > :nth-child(3) { transition-delay: 140ms; }
.gracie-barra-theme .l-plans-grid.visible > :nth-child(4),
.gracie-barra-theme .l-trial-grid.visible > :nth-child(4) { transition-delay: 210ms; }
.gracie-barra-theme .l-plans-grid.visible > :nth-child(n+5),
.gracie-barra-theme .l-trial-grid.visible > :nth-child(n+5) { transition-delay: 280ms; }

/* ── Tarjetas ───────────────────────────────────────── */
.gracie-barra-theme .l-plan-card,
.gracie-barra-theme .l-trial-card {
    border-radius: 1.25rem;
    box-shadow: 0 1px 0 rgba(17, 40, 109, 0.04), 0 12px 32px -22px rgba(17, 40, 109, 0.35);
}

.gracie-barra-theme .l-program-card {
    transition: transform 280ms var(--fx-ease), box-shadow 280ms var(--fx-ease);
}

.gracie-barra-theme .l-program-img img {
    transition: filter 500ms ease, transform 700ms var(--fx-ease), opacity 550ms ease;
}

.gracie-barra-theme .l-plan-card:active,
.gracie-barra-theme .l-trial-card:active {
    transform: scale(0.985);
}

/* ── Hover (solo puntero fino) ──────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .gracie-barra-theme .gjj-header .nav-link:hover::after {
        transform: scaleX(1);
    }

    .gracie-barra-theme .l-btn-red:hover::after,
    .gracie-barra-theme .gjj-header .cta-btn:hover::after {
        transform: translateX(120%);
        transition: transform 700ms var(--fx-ease);
    }

    .gracie-barra-theme .l-btn-red:hover {
        box-shadow: 0 16px 34px -10px rgba(226, 33, 28, 0.75);
    }

    .gracie-barra-theme .l-program-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 50px -26px rgba(0, 0, 0, 0.55);
    }

    .gracie-barra-theme .l-program-card:hover .l-program-img img.is-active {
        transform: scale(1.06);
    }

    .gracie-barra-theme .l-plan-card:hover,
    .gracie-barra-theme .l-trial-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 56px -28px rgba(17, 40, 109, 0.55);
    }
}

/* ── Keyframes ──────────────────────────────────────── */
@keyframes fx-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fx-kenburns {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@keyframes fx-drift {
    from { transform: translate3d(-2%, -1%, 0); }
    to { transform: translate3d(2%, 2%, 0); }
}

/* ── Movimiento reducido: sin desplazamiento, solo fundidos ── */
@media (prefers-reduced-motion: reduce) {
    .gracie-barra-theme .l-hero-bg img,
    .gracie-barra-theme .l-hero-glow {
        animation: none;
    }

    .gracie-barra-theme .l-hero-badge,
    .gracie-barra-theme .l-hero-title .l-stroke,
    .gracie-barra-theme .l-hero-title .l-red,
    .gracie-barra-theme .l-hero-desc,
    .gracie-barra-theme .l-hero-actions,
    .gracie-barra-theme .l-hero-stats {
        animation: fx-fade 300ms ease both;
    }

    .gracie-barra-theme .l-reveal,
    .gracie-barra-theme .l-plans-grid > *,
    .gracie-barra-theme .l-trial-grid > * {
        transform: none;
        transition-duration: 200ms;
        transition-delay: 0ms !important;
    }

    .gracie-barra-theme .l-tag::before {
        transform: scaleX(1);
        transition: none;
    }

    .fx-progress { display: none; }
}

@keyframes fx-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}