:root {
    --mh-ink: #172033;
    --mh-blue: #2f6bff;
    --mh-pink: #ff7bbd;
    --mh-gold: #ffd36a;
    --mh-purple: #8f6bff;
    --mh-sky: #eaf4ff;
    --mh-soft: #fff8ee;
    --mh-mint: #b9f4da;
  
}

html, body, #root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0
}

html, body {
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif !important
}

button, input, textarea, select {
    font-family: inherit
}

html {
    background-color: #fff
}

    html.dark {
        background-color: #212121
    }

    html.mobileSkybridge.dark {
        background-color: #000
    }

@supports (font: -apple-system-body) {
    html.mobileSkybridge {
        font: -apple-system-body
    }
}

html.desktopSkybridge.dark {
    background-color: #1e1e1e
}

html.androidSkybridge, html.androidSkybridge body, html.androidSkybridge * {
    -webkit-tap-highlight-color: rgba(255,255,255,0)
}

    html.androidSkybridge *::selection, html.androidSkybridge *::-moz-selection {
        background: #fff0;
        color: inherit
    }

body {
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color: var(--mh-ink);
    background: linear-gradient(180deg,#fff 0%,#f7fbff 48%,#fff8ee 100%)
}

.navbar {
    backdrop-filter: blur(14px);
    background: rgba(255,255,255,.9) !important;
    border-bottom: 1px solid rgba(23,32,51,.08)
}

.brand-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    background: linear-gradient(135deg,var(--mh-blue),var(--mh-pink));
    margin-right: .4rem
}

.hero {
    padding: 7.5rem 0 4rem;
    position: relative;
    overflow: hidden
}

    .hero:before {
        content: "";
        position: absolute;
        right: -140px;
        top: 80px;
        width: 460px;
        height: 460px;
        border-radius: 999px;
        background: radial-gradient(circle,#e6d9ff,transparent 70%);
        opacity: .75
    }

    .hero:after {
        content: "";
        position: absolute;
        left: -120px;
        bottom: -160px;
        width: 420px;
        height: 420px;
        border-radius: 999px;
        background: radial-gradient(circle,#ffd36a,transparent 70%);
        opacity: .55
    }

.hero-card {
    position: relative;
    z-index: 2;
    border: 1px solid rgba(23,32,51,.08);
    border-radius: 34px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 24px 70px rgba(47,107,255,.12);
    overflow: hidden
}

.section {
    padding: 4.5rem 0
}

.section-title {
    font-weight: 850;
    letter-spacing: -.04em
}

.lead-tight {
    font-size: 1.15rem;
    color: #5a6578
}

.badge-soft {
    background: #eef5ff;
    color: #2454c7;
    border: 1px solid #d8e8ff
}

.btn-mh {
    background: linear-gradient(135deg,var(--mh-blue),var(--mh-purple));
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .9rem 1.45rem;
    font-weight: 750;
    box-shadow: 0 12px 26px rgba(47,107,255,.22)
}

    .btn-mh:hover {
        color: #fff;
        transform: translateY(-1px)
    }

.btn-outline-mh {
    border: 1px solid rgba(47,107,255,.35);
    color: #2454c7;
    border-radius: 999px;
    padding: .9rem 1.45rem;
    font-weight: 750;
    background: #fff
}

.ip-visual {
    min-height: 420px;
    border-radius: 30px;
    background: linear-gradient(145deg,#eaf4ff,#fff0f8 58%,#fff2c8);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.orbit {
    position: absolute;
    border-radius: 999px;
    opacity: .9
}

    .orbit.one {
        width: 140px;
        height: 140px;
        background: var(--mh-pink);
        top: 40px;
        left: 50px
    }

    .orbit.two {
        width: 100px;
        height: 100px;
        background: var(--mh-blue);
        right: 55px;
        top: 75px
    }

    .orbit.three {
        width: 170px;
        height: 170px;
        background: var(--mh-gold);
        right: 55px;
        bottom: 40px
    }

.ip-card {
    position: relative;
    z-index: 2;
    width: 72%;
    border-radius: 30px;
    background: rgba(255,255,255,.92);
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(23,32,51,.18)
}

.signal-card {
    height: 100%;
    border: 1px solid rgba(23,32,51,.08);
    border-radius: 26px;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 14px 34px rgba(23,32,51,.06);
    transition: all .25s ease
}

    .signal-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 50px rgba(23,32,51,.12)
    }

.icon-bubble {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: var(--mh-sky);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 1rem
}

.media-card {
    height: 100%;
    border-radius: 28px;
    padding: 1.5rem;
    border: 1px solid rgba(23,32,51,.08);
    background: linear-gradient(135deg,#fff,#f7fbff)
}

.deal-strip {
    border-radius: 32px;
    background: linear-gradient(135deg,#172033,#2b3b71);
    color: #fff;
    padding: 2.5rem;
    position: relative;
    overflow: hidden
}

    .deal-strip:after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 999px;
        background: rgba(255,211,106,.22);
        right: -80px;
        top: -80px
    }

.footer {
    background: #111827;
    color: #d7deea;
    padding: 3rem 0;
    margin-top: 3rem
}

    .footer a {
        color: #fff;
        text-decoration: none
    }

@media(max-width:991px) {
    .hero {
        padding-top: 5.5rem
    }

    .ip-visual {
        min-height: 340px
    }

    .ip-card {
        width: 88%
    }
}

 


.hero-visual {
    min-height: 420px;
    background: linear-gradient(145deg, #dff1ff, #fff0f8 58%, #fff2c8);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(.2px);
    opacity: .85;
}

    .orb.two {
        width: 90px;
        height: 90px;
        background: var(--mh-blue);
        right: 70px;
        top: 80px;
    }

    .orb.three {
        width: 150px;
        height: 150px;
        background: var(--mh-gold);
        bottom: 35px;
        right: 55px;
    }

    .orb.one {
        width: 120px;
        height: 120px;
        background: var(--mh-pink);
        top: 35px;
        left: 50px;
    }

.hero-video-card {
    width: 100%;
    max-width: 560px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 26px 65px rgba(23, 32, 51, .22);
    z-index: 2;
    background: #111827;
    border: 8px solid #fff;
}

.hero-video-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 3;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 14px 16px;
    box-shadow: 0 12px 30px rgba(23, 32, 51, .15);
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%;
}

.ratio {
    position: relative;
    width: 100%;
}

.feature-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(23, 32, 51, .12);
}



.feature-card {
    height: 100%;
    border: 1px solid rgba(23, 32, 51, .08);
    border-radius: 24px;
    background: #fff;
    padding: 1.4rem;
    box-shadow: 0 12px 34px rgba(23, 32, 51, .05);
    transition: all .25s ease;
}

.card-watch {
    background: linear-gradient(135deg, #eaf4ff, #dff1ff) !important;
}

.card-schools {
    background: linear-gradient(135deg, #fff8ee, #ffe8c7) !important;
}
.card-partners {
    background: linear-gradient(135deg, #f3eaff, #e6d9ff) !important;
}

.hero:before {
    content: "";
    position: absolute;
    inset: auto -10% -20% auto !important;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, var(--mh-mint), transparent) !important;
    opacity: .65 !important;
}
.hero:after {
    content: "";
    position: absolute;
   
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, var(--mh-gold), transparent 70%) !IMPORTANT;
    opacity: .5;
    inset: 8% auto auto -10% !important;
}
#watch {
    border-top: 4px solid var(--mh-blue)!important;
    padding-top: 2rem;
}
/* Contenedor principal de la tarjeta */
.feature-card-new {
    display: block !important;
    text-decoration: none !important;
    overflow: hidden !important;
    border-radius: 1rem !important; /* Equivalente a rounded-4 */
    position: relative !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: transform 0.3s ease !important;
}

/* Envoltura para el efecto de zoom */
.card-image-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 200px !important; /* Ajusta la altura según necesites */
    overflow: hidden !important;
}

    .card-image-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Hace que la imagen ocupe todo el espacio */
        transition: transform 0.5s ease !important; /* Suavidad del zoom */
    }

/* Efecto Hover: Zoom a la imagen */
.feature-card-new:hover img {
    transform: scale(1.1) !important;
}

/* Degradado oscuro inferior */
.card-overlay {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60% !important; /* El degradado empieza desde la mitad inferior */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%) !important;
    pointer-events: none !important;
}

/* Texto blanco en la parte inferior */
.card-title-overlay {
    position: absolute !important;
    bottom: 15px !important;
    left: 15px !important;
    right: 15px !important;
    color: white !important;
    font-weight: bold !important;
    margin: 0 !important;
    z-index: 2 !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}