/* =====================================
   MODO BESTIA
   PAGES
===================================== */

/* ───────── Landings ───────── */

.page-landing {

    background:
        radial-gradient(circle at top, rgba(243,186,96,.20), transparent 30%),
        linear-gradient(180deg, #fdfaf3 0%, #f6f6f6 55%, #eef0f6 100%);

}

.page-landing .mbuf-hero-shell {

    padding:30px 0 14px;

}

.page-landing .landing-footer {

    padding:32px 0 56px;
    color:var(--bestia-muted);

}

/* ───────── Hero hover effects ───────── */

.mbuf-hero__metric {

    transition:transform .25s ease, box-shadow .25s ease;

}

.mbuf-hero__metric:hover {

    transform:translateY(-4px);
    box-shadow:0 8px 25px rgba(32,32,34,.10);

}

.mbuf-hero__actions .btn-outline-light {

    border:2px solid var(--bestia-text);
    color:var(--bestia-text);
    background:transparent;

}

.mbuf-hero__actions .btn-outline-light:hover {

    background:var(--bestia-text);
    color:#fff;

}

/* ───────── Preview Card (Dashboard mockup) ───────── */

.preview-card {

    background:var(--bestia-surface);
    border-radius:28px;
    padding:clamp(24px, 4vw, 48px);
    box-shadow:0 20px 60px rgba(32,32,34,.08);
    border:1px solid rgba(32,32,34,.05);
    transition:transform .3s ease, box-shadow .3s ease;

}

.preview-card:hover {

    transform:translateY(-6px);
    box-shadow:0 30px 80px rgba(32,32,34,.12);

}

/* ───────── Mockup internal styles ───────── */

.dashboard-mockup {

    margin-top:20px;

}

.mockup-panel {

    background:rgba(32,32,34,.03);
    border-radius:16px;
    padding:20px;
    border:1px solid rgba(32,32,34,.06);
    display:flex;
    flex-direction:column;
    gap:12px;

}

.mockup-line {

    height:12px;
    background:rgba(32,32,34,.08);
    border-radius:999px;

}

.mockup-line.long {

    width:100%;

}

.mockup-line.medium {

    width:65%;

}

.mockup-line.short {

    width:40%;

}

.mockup-block {

    background:rgba(243,186,96,.10);
    border-radius:12px;
    padding:14px;
    border:1px solid rgba(243,186,96,.15);

}

/* ───────── Landing Sections ───────── */

.landing-section {

    padding:72px 0;

}

.section-label {

    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    border-radius:999px;
    background:rgba(243,186,96,.14);
    color:#a67c00;
    font-weight:700;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:14px;

}

.section-title {

    font-size:clamp(1.6rem, 3vw, 2.2rem);
    font-weight:900;
    line-height:1.15;
    color:var(--bestia-text);
    margin-bottom:12px;

}

.section-copy {

    max-width:600px;
    font-size:1rem;
    line-height:1.7;
    color:var(--bestia-muted);

}

/* ───────── Card hover effects ───────── */

.mbuf-benefit-card,
.mbuf-step-card {

    transition:transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease;

}

.mbuf-benefit-card:hover,
.mbuf-step-card:hover {

    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(32,32,34,.10);

}

/* ───────── CTA section ───────── */

.mbuf-cta {

    transition:transform .3s ease;

}

.mbuf-cta:hover {

    transform:scale(1.01);

}

/* ───────── Landing Footer ───────── */

.landing-footer a {

    color:var(--bestia-muted);
    text-decoration:none;
    font-weight:600;
    transition:color .2s;

}

.landing-footer a:hover {

    color:var(--bestia-red);

}

/* ───────── Animations ───────── */

@keyframes landingFadeInUp {
    from {
        opacity:0;
        transform:translateY(30px);
    }
    to {
        opacity:1;
        transform:translateY(0);
    }
}

.landing-page section {

    animation:landingFadeInUp .6s ease both;

}

.landing-page section:nth-child(2) { animation-delay:.1s; }
.landing-page section:nth-child(3) { animation-delay:.2s; }
.landing-page section:nth-child(4) { animation-delay:.3s; }
.landing-page section:nth-child(5) { animation-delay:.4s; }

/* ───────── Other Pages ───────── */

.page-login {

    background:
        radial-gradient(circle at top right, rgba(243,186,96,.22), transparent 38%),
        linear-gradient(180deg, #f8f6f1 0%, #f2f4f8 60%, #edf0f7 100%);

}

.page-onboarding {

    background:
        radial-gradient(circle at top left, rgba(243,186,96,.20), transparent 36%),
        linear-gradient(180deg, #fbfaf7 0%, #f2f4f8 58%, #eceff6 100%);

}

.onboarding-mode .topbar-buff small,
.onboarding-mode .topbar-buff .d-flex > div:last-child,
.onboarding-mode .mbuf-app-shell__sidebar,
.onboarding-mode .mbuf-app-shell__bottom-nav,
.onboarding-mode .mbuf-app-shell__coach-fab {

    display:none !important;

}

.onboarding-mode .mbuf-app-shell {

    padding-bottom:0;

}

.onboarding-mode .mbuf-app-shell__layout {

    grid-template-columns:1fr;

}

.onboarding-mode .mbuf-app-shell__content {

    min-height:calc(100vh - 76px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;

}

.onboarding-mode .onboarding-screen {

    max-width:920px;

}

.page-login .mbuf-auth-shell {

    min-height:auto;
    display:block;

}

/* ───────── Responsive ───────── */

@media (max-width:991px) {

    .page-login .mbuf-auth-shell {

        min-height:auto;

    }

    .page-landing .mbuf-hero-shell {

        padding:20px 0;

    }

}

@media (max-width:767px) {

    .landing-section {
        padding:48px 0;
    }

    .mbuf-hero__metrics {
        grid-template-columns:repeat(3, 1fr);
        gap:8px;
    }

    .mbuf-hero__metric {
        padding:10px;
    }

    .mbuf-hero__metric strong {
        font-size:1.05rem;
    }

    .mbuf-hero__metric span {
        font-size:.78rem;
    }

    .mbuf-hero__actions {
        flex-direction:column;
    }

    .mbuf-hero__actions .btn {
        width:100%;
    }

}

@media (max-width:575px) {

    .landing-footer {
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:16px;
        padding:24px 0 48px !important;
    }

    .landing-footer .d-flex {
        justify-content:center;
    }

    .dashboard-mockup .row {
        gap:10px;
    }

    .mockup-panel {
        padding:14px;
    }

}

/* =====================================
   TRANSFORMACIÓN / TIMELINE
===================================== */

/* ─── Empty State ─── */

.transformacion-empty {
    text-align:center;
    padding:60px 20px;
    background:linear-gradient(145deg, var(--bestia-surface), #fefcf7);
    border-radius:24px;
    box-shadow:0 12px 40px rgba(32,32,34,.08), 0 2px 6px rgba(32,32,34,.04);
    border:1px solid rgba(243,186,96,.12);
    max-width:480px;
    margin:0 auto;
}

.transformacion-empty__icon {
    width:80px;
    height:80px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(243,186,96,.25), rgba(243,186,96,.08));
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:2rem;
    color:#a67c00;
    box-shadow:0 0 0 4px rgba(243,186,96,.1);
    animation:transformacionPulse 3s ease-in-out infinite;
}

@keyframes transformacionPulse {
    0%, 100% { box-shadow:0 0 0 4px rgba(243,186,96,.1); }
    50% { box-shadow:0 0 0 8px rgba(243,186,96,.05); }
}

.transformacion-empty h3 {
    font-weight:800;
    font-size:1.3rem;
    margin-bottom:12px;
    color:var(--bestia-text);
}

.transformacion-empty p {
    color:var(--bestia-muted);
    line-height:1.6;
    font-size:.95rem;
}

/* ─── Metrics Row ─── */

.transformacion-metrics {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:12px;
}

.transformacion-metric {
    background:var(--bestia-surface);
    border-radius:20px;
    padding:18px 10px;
    text-align:center;
    box-shadow:0 8px 25px rgba(32,32,34,.07);
    border:1px solid rgba(32,32,34,.05);
    transition:transform .25s ease, box-shadow .25s ease;
    position:relative;
    overflow:hidden;
}

.transformacion-metric::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, rgba(243,186,96,.4), rgba(243,186,96,.1));
    border-radius:0 0 999px 999px;
}

.transformacion-metric:hover {
    transform:translateY(-4px);
    box-shadow:0 12px 35px rgba(32,32,34,.12);
}

.transformacion-metric__icon {
    width:40px;
    height:40px;
    border-radius:12px;
    background:rgba(243,186,96,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
    font-size:1.1rem;
    color:#a67c00;
    transition:transform .25s ease, background .25s ease;
}

.transformacion-metric:hover .transformacion-metric__icon {
    transform:scale(1.1);
    background:rgba(243,186,96,.2);
}

.transformacion-metric__value {
    display:block;
    font-size:1.5rem;
    font-weight:900;
    color:var(--bestia-text);
    line-height:1.1;
}

.transformacion-metric__label {
    display:block;
    font-size:.78rem;
    color:var(--bestia-muted);
    margin-top:4px;
    font-weight:600;
}

.transformacion-metric--success .transformacion-metric__value {
    color:#16a34a;
}

.transformacion-metric--danger .transformacion-metric__value {
    color:#dc2626;
}

/* ─── Horizontal Timeline ─── */

.transformacion-timeline-wrapper {
    background:linear-gradient(145deg, var(--bestia-surface), #fdfaf5);
    border-radius:20px;
    padding:24px 20px;
    box-shadow:0 8px 30px rgba(32,32,34,.07);
    border:1px solid rgba(243,186,96,.08);
}

.transformacion-timeline {
    display:flex;
    gap:0;
    overflow-x:auto;
    padding:16px 0 20px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

.transformacion-timeline::-webkit-scrollbar {
    height:6px;
}

.transformacion-timeline::-webkit-scrollbar-track {
    background:rgba(32,32,34,.05);
    border-radius:999px;
}

.transformacion-timeline::-webkit-scrollbar-thumb {
    background:rgba(243,186,96,.35);
    border-radius:999px;
}

.transformacion-timeline__item {
    display:flex;
    align-items:center;
    gap:0;
    flex-shrink:0;
    scroll-snap-align:start;
}

.transformacion-timeline__dot {
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(243,186,96,.2);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.72rem;
    color:var(--bestia-primary);
    flex-shrink:0;
    z-index:2;
    position:relative;
}

.timeline-dot--first {
    background:linear-gradient(135deg, #f3ba60, #d4942f);
    color:var(--bestia-text);
    font-size:.85rem;
    width:38px;
    height:38px;
    box-shadow:0 2px 8px rgba(243,186,96,.35);
}

.timeline-dot--last {
    background:linear-gradient(135deg, #f3ba60, #e8a040);
    color:#fff;
    font-size:.85rem;
    width:38px;
    height:38px;
    box-shadow:0 0 0 4px rgba(243,186,96,.2), 0 0 20px rgba(243,186,96,.15);
    animation:timelineDotGlow 2.5s ease-in-out infinite;
}

@keyframes timelineDotGlow {
    0%, 100% { box-shadow:0 0 0 4px rgba(243,186,96,.2), 0 0 20px rgba(243,186,96,.1); }
    50% { box-shadow:0 0 0 6px rgba(243,186,96,.3), 0 0 30px rgba(243,186,96,.2); }
}

.transformacion-timeline__card {
    margin:0 10px;
    width:120px;
    cursor:pointer;
    border-radius:14px;
    overflow:hidden;
    background:var(--bestia-surface);
    border:1px solid rgba(32,32,34,.08);
    box-shadow:0 2px 8px rgba(32,32,34,.04);
    transition:transform .25s ease, box-shadow .25s ease;
    flex-shrink:0;
}

.transformacion-timeline__card:hover {
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 12px 28px rgba(32,32,34,.12);
}

.transformacion-timeline__img {
    width:100%;
    height:110px;
    object-fit:cover;
    display:block;
}

.transformacion-timeline__info {
    padding:8px 8px;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.transformacion-timeline__info .timeline-date,
.transformacion-timeline__info .timeline-weight {
    font-size:.72rem;
    color:var(--bestia-muted);
    display:flex;
    align-items:center;
    gap:3px;
}

.transformacion-timeline__info .timeline-weight {
    font-weight:700;
    color:var(--bestia-text);
}

.transformacion-timeline__connector {
    width:28px;
    height:3px;
    background:linear-gradient(90deg, rgba(243,186,96,.5), rgba(243,186,96,.2));
    flex-shrink:0;
    border-radius:999px;
}

/* ─── Featured Before/After ─── */

.transformacion-featured__card {
    border-radius:18px;
    overflow:hidden;
    background:var(--bestia-surface);
    box-shadow:0 8px 28px rgba(32,32,34,.08);
    border:1px solid rgba(32,32,34,.05);
    height:100%;
    display:flex;
    flex-direction:column;
    transition:transform .25s ease, box-shadow .25s ease;
}

.transformacion-featured__card:hover {
    transform:scale(1.015);
    box-shadow:0 12px 40px rgba(32,32,34,.12);
}

.transformacion-featured__card--before {
    border-left:4px solid #f59e0b;
}

.transformacion-featured__card--after {
    border-left:4px solid #10b981;
}

.transformacion-featured__label {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 16px;
    font-weight:800;
    font-size:.85rem;
    letter-spacing:.03em;
}

.transformacion-featured__card--before .transformacion-featured__label {
    color:#b45309;
    background:linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.04));
}

.transformacion-featured__card--after .transformacion-featured__label {
    color:#047857;
    background:linear-gradient(135deg, rgba(16,185,129,.12), rgba(16,185,129,.04));
}

.transformacion-featured__img {
    width:100%;
    height:300px;
    object-fit:cover;
    display:block;
}

.transformacion-featured__meta {
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    font-size:.82rem;
    color:var(--bestia-muted);
    gap:8px;
    flex-wrap:wrap;
    border-top:1px solid rgba(32,32,34,.05);
}

.transformacion-featured__meta span {
    display:flex;
    align-items:center;
    gap:4px;
}

.transformacion-featured__diff {
    text-align:center;
    padding:16px 20px;
    margin-top:16px;
    background:linear-gradient(135deg, rgba(243,186,96,.15), rgba(243,186,96,.05));
    border-radius:16px;
    border:1px solid rgba(243,186,96,.15);
    font-size:1rem;
    color:var(--bestia-text);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    font-weight:600;
}

.transformacion-featured__diff strong {
    font-size:1.25rem;
    color:#b45309;
}

/* ─── Gallery ─── */

.transformacion-gallery__item {
    position:relative;
    border-radius:16px;
    overflow:hidden;
    cursor:pointer;
    background:var(--bestia-surface);
    box-shadow:0 6px 20px rgba(32,32,34,.07);
    border:1px solid rgba(32,32,34,.05);
    transition:transform .25s ease, box-shadow .25s ease;
}

.transformacion-gallery__item:hover {
    transform:translateY(-4px);
    box-shadow:0 14px 35px rgba(32,32,34,.12);
}

.transformacion-gallery__img {
    width:100%;
    aspect-ratio:3/4;
    object-fit:cover;
    display:block;
}

.transformacion-gallery__overlay {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:10px 12px;
    background:linear-gradient(transparent 20%, rgba(0,0,0,.7));
    color:#fff;
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    opacity:.85;
    transition:opacity .25s ease;
    pointer-events:none;
}

.transformacion-gallery__item:hover .transformacion-gallery__overlay {
    opacity:1;
}

.transformacion-gallery__overlay span {
    font-size:.75rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:4px;
}

.gallery-weight {
    background:rgba(243,186,96,.3);
    padding:2px 8px;
    border-radius:999px;
    backdrop-filter:blur(4px);
}

.gallery-note {
    width:100%;
    font-style:italic;
    opacity:.9;
    font-size:.72rem;
}

.transformacion-gallery__badge {
    position:absolute;
    top:8px;
    left:8px;
    padding:4px 10px;
    border-radius:999px;
    font-size:.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
    background:rgba(0,0,0,.5);
    color:#fff;
    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.1);
}

.transformacion-gallery__badge--current {
    background:rgba(16,185,129,.85);
}

/* ─── Comparison Modal ─── */

.compare-selector .form-select {
    border-radius:12px;
    border:1px solid #d7dce7;
    font-size:.82rem;
    padding:10px 12px;
    transition:border-color .2s ease, box-shadow .2s ease;
}

.compare-selector .form-select:focus {
    border-color:#f3ba60;
    box-shadow:0 0 0 .18rem rgba(243,186,96,.2);
}

.compare-vs {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    background:linear-gradient(135deg, rgba(243,186,96,.2), rgba(243,186,96,.08));
    color:#a67c00;
    font-weight:900;
    font-size:.85rem;
    letter-spacing:.05em;
}

.compare-frame {
    border-radius:14px;
    overflow:hidden;
    background:#f8f8f8;
    border:1px solid rgba(32,32,34,.08);
    box-shadow:0 4px 12px rgba(32,32,34,.04);
}

.compare-frame__label {
    display:block;
    padding:8px 14px;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.compare-frame--before .compare-frame__label {
    background:linear-gradient(135deg, #fef3c7, #fffbeb);
    color:#b45309;
}

.compare-frame--after .compare-frame__label {
    background:linear-gradient(135deg, #d1fae5, #ecfdf5);
    color:#047857;
}

.compare-frame__img {
    width:100%;
    height:360px;
    object-fit:cover;
    display:block;
}

.compare-diff {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    justify-content:center;
}

.compare-diff__item {
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    background:rgba(32,32,34,.03);
    border-radius:14px;
    font-size:.9rem;
    font-weight:600;
    color:var(--bestia-text);
    border:1px solid rgba(32,32,34,.06);
    transition:transform .2s ease, box-shadow .2s ease;
}

.compare-diff__item:hover {
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(32,32,34,.06);
}

.compare-diff__item small {
    font-weight:400;
    color:var(--bestia-muted);
    font-size:.78rem;
}

.compare-diff__item.diff--down {
    background:rgba(22,163,74,.08);
    border-color:rgba(22,163,74,.2);
    color:#16a34a;
}

.compare-diff__item.diff--up {
    background:rgba(220,38,38,.08);
    border-color:rgba(220,38,38,.2);
    color:#dc2626;
}

/* ─── Responsive Timeline ─── */

/* Tablet */
@media (max-width:768px) {

    .transformacion-metrics {
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
    }

    .transformacion-metric {
        padding:16px 10px;
    }

    .transformacion-featured__img {
        height:260px;
    }

    .compare-frame__img {
        height:280px;
    }

    .transformacion-gallery__img {
        aspect-ratio:3/4;
    }

    .transformacion-timeline__card {
        width:105px;
    }

    .transformacion-timeline__img {
        height:90px;
    }

}

/* Mobile */
@media (max-width:575px) {

    .transformacion-metrics {
        grid-template-columns:repeat(2, 1fr);
        gap:8px;
    }

    .transformacion-metric {
        padding:14px 8px;
        border-radius:16px;
    }

    .transformacion-metric__icon {
        width:36px;
        height:36px;
        border-radius:10px;
        font-size:1rem;
        margin-bottom:8px;
    }

    .transformacion-metric__value {
        font-size:1.2rem;
    }

    .transformacion-timeline-wrapper {
        padding:16px 12px;
        border-radius:16px;
    }

    .transformacion-timeline__card {
        width:95px;
        border-radius:12px;
        margin:0 6px;
    }

    .transformacion-timeline__img {
        height:80px;
    }

    .transformacion-timeline__dot {
        width:30px;
        height:30px;
    }

    .timeline-dot--first,
    .timeline-dot--last {
        width:34px;
        height:34px;
    }

    .transformacion-timeline__connector {
        width:20px;
    }

    .transformacion-featured__img {
        height:220px;
    }

    .transformacion-gallery__img {
        aspect-ratio:3/4;
    }

    .transformacion-gallery__overlay {
        padding:8px 10px;
        opacity:.9;
    }

    .transformacion-gallery__badge {
        top:6px;
        left:6px;
        padding:3px 8px;
        font-size:.65rem;
    }

    .compare-frame__img {
        height:220px;
    }

    .compare-vs {
        width:32px;
        height:32px;
        font-size:.75rem;
    }

    .compare-diff__item {
        padding:10px 14px;
        font-size:.82rem;
    }

    .transformacion-featured__diff {
        padding:12px 16px;
        font-size:.9rem;
    }

}