.detail-hero {

    padding: 100px 0;

    background:

        radial-gradient(
            circle at 20% 20%,
            rgba(99,91,255,.15),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 30%,
            rgba(14,165,233,.12),
            transparent 35%
        ),

        #fafaff;

}


.detail-badge {

    display: inline-flex;

    gap: 8px;

    align-items: center;

    padding: 8px 15px;

    border-radius: 50px;

    background:
        rgba(99,91,255,.1);

    color: #635bff;

    font-weight: 600;

    margin-bottom: 24px;

}


.detail-hero h1 {

    font-size:
        clamp(3rem, 7vw, 5.5rem);

    line-height: 1;

    font-weight: 800;

    letter-spacing: -.05em;

}


.detail-description {

    font-size: 1.2rem;

    line-height: 1.7;

    color: #64748b;

    margin: 30px 0;

    max-width: 600px;

}


.hero-benefits {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    margin-top: 35px;

    color: #475569;

}


.hero-benefits i {

    color: #22c55e;

    margin-right: 5px;

}



/* MOCKUP */

.crm-preview {

    padding: 20px;

}


.preview-window {

    background: #fff;

    border-radius: 25px;

    padding: 15px;

    box-shadow:
        0 40px 80px
        rgba(15,23,42,.15);

}


.preview-top {

    display: flex;

    gap: 6px;

    padding-bottom: 12px;

}


.preview-top span {

    width: 9px;
    height: 9px;

    background: #cbd5e1;

    border-radius: 50%;

}


.crm-dashboard {

    display: flex;

    min-height: 390px;

    background: #f8fafc;

    border-radius: 16px;

    overflow: hidden;

}


.dashboard-sidebar {

    width: 64px;

    background: #111827;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 25px;

    color: #94a3b8;

    padding: 20px 0;

}


.sidebar-logo {

    width: 36px;
    height: 36px;

    display: grid;

    place-items: center;

    background: #635bff;

    border-radius: 10px;

    color: white;

    margin-bottom: 15px;

}


.dashboard-content {

    flex: 1;

    padding: 30px;

}


.dashboard-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.dashboard-title h4 {

    font-weight: 700;

}


.dashboard-avatar {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    background: #635bff;

    color: white;

    border-radius: 50%;

}


.dashboard-stats {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;

    margin: 30px 0;

}


.dashboard-stats div {

    background: white;

    border-radius: 12px;

    padding: 15px;

}


.dashboard-stats small {

    display: block;

    color: #94a3b8;

}


.dashboard-stats strong {

    font-size: 1.2rem;

}


.dashboard-chart {

    height: 150px;

    background: white;

    border-radius: 15px;

    display: flex;

    align-items: flex-end;

    gap: 10px;

    padding: 20px;

}


.chart-bar {

    flex: 1;

    border-radius: 5px;

    background:
        linear-gradient(
            #635bff,
            #8b5cf6
        );

}


.bar-1 { height: 30%; }
.bar-2 { height: 65%; }
.bar-3 { height: 45%; }
.bar-4 { height: 80%; }
.bar-5 { height: 60%; }
.bar-6 { height: 95%; }



/* SECTIONS */

.section-padding {

    padding: 100px 0;

}


.section-title {

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    font-weight: 750;

    letter-spacing: -.04em;

}


.section-description {

    color: #64748b;

    font-size: 1.1rem;

    line-height: 1.8;

}


.section-heading {

    max-width: 650px;

    margin-bottom: 50px;

}



/* BENEFITS */

.benefits-section {

    background: #f8fafc;

}


.benefit-card {

    height: 100%;

    background: white;

    padding: 30px;

    border-radius: 20px;

    border: 1px solid #e2e8f0;

}


.benefit-icon {

    width: 52px;
    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    font-size: 1.3rem;

    margin-bottom: 22px;

}


.purple {

    color: #635bff;

    background:
        rgba(99,91,255,.1);

}


.blue {

    color: #0284c7;

    background:
        rgba(2,132,199,.1);

}


.green {

    color: #16a34a;

    background:
        rgba(22,163,74,.1);

}


.orange {

    color: #ea580c;

    background:
        rgba(234,88,12,.1);

}


.benefit-card h3 {

    font-size: 1.2rem;

    font-weight: 700;

}


.benefit-card p {

    color: #64748b;

    line-height: 1.6;

}



/* FEATURES */

.feature-list-large {

    margin-top: 35px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 15px;

}


.feature-item {

    display: flex;

    gap: 10px;

    color: #334155;

}


.feature-item i {

    color: #22c55e;

    font-weight: bold;

}


.features-panel {

    padding: 30px;

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #111827,
            #1e293b
        );

}


.feature-panel-item {

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 17px;

    margin-bottom: 10px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 14px;

    color: white;

}


.feature-panel-icon {

    width: 35px;
    height: 35px;

    display: grid;

    place-items: center;

    background: #635bff;

    border-radius: 9px;

}



/* AUDIENCE */

.audience-section {

    background: #f8fafc;

}


.audience-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

}


.audience-item {

    display: flex;

    gap: 18px;

    background: white;

    padding: 25px;

    border-radius: 18px;

}


.audience-item > i {

    color: #635bff;

    font-size: 1.5rem;

}


.audience-item h4 {

    font-size: 1rem;

    font-weight: 700;

}


.audience-item p {

    color: #64748b;

    margin: 0;

}



/* CTA */

.quote-section {

    padding: 100px 0;

}


.quote-box {

    background:

        linear-gradient(
            135deg,
            #635bff,
            #4338ca
        );

    color: white;

    border-radius: 30px;

    padding: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

}


.quote-box h2 {

    max-width: 650px;

    font-size:
        clamp(2rem, 4vw, 3.2rem);

    font-weight: 750;

}


.quote-box p {

    color:
        rgba(255,255,255,.8);

}


@media (max-width: 767px) {

    .detail-hero {

        padding: 70px 0;

    }


    .section-padding {

        padding: 70px 0;

    }


    .dashboard-stats {

        grid-template-columns: 1fr;

    }


    .feature-list-large {

        grid-template-columns: 1fr;

    }


    .audience-grid {

        grid-template-columns: 1fr;

    }


    .quote-box {

        padding: 35px;

        flex-direction: column;

        align-items: flex-start;

    }

}
/* =========================================================
   APPSHEET - VERSIÓN DEFINITIVA
========================================================= */


/* ---------------------------------------------------------
   VISTA MÓVIL EN LA PÁGINA
--------------------------------------------------------- */

.appsheet-mobile-wrapper {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 18px;

    margin: 0 auto;
}


.mobile-device {
    width: 100%;
    max-width: 330px;

    display: flex;
    justify-content: center;

    margin: 0 auto;
    padding: 0;

    background: transparent;
}


.mobile-frame {
    width: 100%;
    height: 610px;

    overflow: hidden;

    background: #ffffff;

    border: 4px solid #1e466d;

    border-radius: 5px;

    box-shadow:
        0 15px 35px
        rgba(15, 23, 42, .12);
}


.mobile-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    margin: 0;
    padding: 0;

    background: #ffffff;
}

/* ==========================================
   DEMO APPSHEET MÓVIL
========================================== */
.mobile-device {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
}

.mobile-frame {
    width: 100%;
    height: 670px;
    overflow: hidden;
    background: #fff;
    border: 4px solid #1e466d;
    border-radius: 6px;
}

.mobile-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/*
botton
*/
.device-actions {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    margin-top: 12px;
}


.device-action {
    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: #16436c;

    font-size: 1.6rem;

    cursor: pointer;

    transition:
        color .2s ease,
        transform .2s ease;
}


.device-action:hover {
    color: #635bff;

    transform: translateY(-2px);
}


.device-action.active {
    color: #16436c;
}

/* =========================================================
   MODAL DESKTOP
========================================================= */

.appsheet-desktop-modal {
    width: 100%;

    border: 0;

    border-radius: 18px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 30px 80px
        rgba(15, 23, 42, .25);
}


/* Header */

.appsheet-desktop-modal .modal-header {
    min-height: 65px;

    padding: 14px 20px;

    background: #ffffff;

    border-bottom:
        1px solid #e2e8f0;
}


.appsheet-desktop-modal .modal-title {
    margin: 2px 0 0;

    font-size: 1rem;

    font-weight: 700;
}


/* Body */

.appsheet-desktop-modal .modal-body {
    padding: 15px;

    background: #f1f5f9;
}


/* ---------------------------------------------------------
   CONTENEDOR DESKTOP
--------------------------------------------------------- */

.desktop-appsheet-container {
    width: 100%;

    /*
     * ESTO ES LO QUE FALTABA EN TU CAPTURA.
     * El iframe necesita una altura explícita.
     */
    height: 75vh;

    min-height: 600px;

    max-height: 820px;

    position: relative;

    overflow: hidden;

    background: #ffffff;

    border-radius: 12px;
}


/* ---------------------------------------------------------
   IFRAME DESKTOP
--------------------------------------------------------- */

.desktop-appsheet-container iframe {
    position: absolute;

    top: 0;
    left: 0;

    width: 100% !important;
    height: 100% !important;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;

    background: #ffffff;
}


/* =========================================================
   MODAL BOOTSTRAP XL
========================================================= */

#desktopDemoModal .modal-dialog {
    width: auto;
}


#desktopDemoModal .modal-content {
    height: auto;
}


#desktopDemoModal .modal-body {
    overflow: hidden;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .desktop-appsheet-container {
        height: 75vh;

        min-height: 550px;
    }

}


@media (max-width: 576px) {

    .mobile-device {
        max-width: 320px;
    }


    .mobile-frame {
        height: 590px;
    }


    .desktop-appsheet-container {
        height: calc(100vh - 90px);

        min-height: 0;

        max-height: none;

        border-radius: 0;
    }


    .appsheet-desktop-modal .modal-body {
        padding: 0;
    }

}