/* =========================================================
   ASYLUM CONNECTED CARE
   Responsive
========================================================= */


/* =========================================================
   TABLET / MENÚ MÓVIL
========================================================= */

@media (max-width: 991.98px) {

    :root {
        --header-height: 72px;
    }


    .asylum-header .navbar {

        padding:
            0;
    }


    .asylum-navbar-container {

        min-height:
            var(--header-height);
    }


    /* LOGO */

    .asylum-logo {

        height:
            62px;
    }


    /* MENÚ */

    .asylum-header
    .navbar-collapse {

        margin-top:
            0;

        padding:
            12px 0 20px;

        border-top:
            1px solid var(--asylum-border);

        background:
            #ffffff;
    }


    .asylum-header
    .navbar-nav {

        gap:
            0;

        align-items:
            stretch !important;
    }


    .asylum-header
    .nav-link {

        padding:
            12px 5px;

        font-size:
            14px;
    }


    /* Quitamos línea inferior en móvil */

    .asylum-header
    .nav-link::after {

        display:
            none;
    }


    .asylum-header
    .nav-link:hover {

        color:
            var(--asylum-blue);

        background:
            #f5f9fc;
    }


    /* DROPDOWN */

    .asylum-dropdown {

        width:
            100%;

        margin:
            0 0 10px;

        border:
            none;

        border-radius:
            8px;

        box-shadow:
            none;

        background:
            #f7fafc;
    }


    .asylum-dropdown
    .dropdown-item {

        padding:
            11px 12px;
    }


    /* BOTÓN DEMOSTRACIÓN */

    .asylum-demo-item {

        margin-left:
            0;

        margin-top:
            10px;
    }


    .asylum-demo-btn {

        width:
            100%;

        min-height:
            46px;
    }

}


/* =========================================================
   TELÉFONOS
========================================================= */

@media (max-width: 575.98px) {

    .asylum-navbar-container {

        padding-left:
            18px;

        padding-right:
            18px;
    }


    .asylum-logo {

        height:
            5px;
    }


    .test-section {

        min-height:
            calc(100vh - 72px);

        padding:
            50px 0;
    }


    .test-section h1 {

        font-size:
            34px;
    }

}

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

@media (max-width: 991.98px) {

    .hero-section {

        min-height: auto;

        padding:
            55px 0 65px;
    }


    .hero-content {

        padding-right: 12px;

        text-align: center;
    }


    .hero-description {

        margin-left: auto;
        margin-right: auto;
    }


    .hero-actions {

        justify-content: center;
    }


    .hero-pillars {

        margin:
            0 auto 45px;

        text-align: left;
    }


    .hero-visual {

        padding-left: 12px;
    }


    .hero-image-wrapper {

        max-width: 650px;

        margin:
            0 auto;
    }


    .hero-image {

        height: 460px;
    }


    .hero-floating-card {

        left: 25px;

        bottom: 25px;
    }

}


@media (max-width: 767.98px) {

    .hero-title {

        font-size: 42px;
    }


    .hero-pillars {

        grid-template-columns: 1fr;

        max-width: 330px;

        gap: 16px;
    }


    .hero-pillar {

        padding:
            3px 0;
    }


    .hero-image {

        height: 390px;

        border-radius:
            20px 6px 20px 6px;
    }

}


@media (max-width: 575.98px) {

    .hero-section {

        padding:
            42px 0 50px;
    }


    .hero-eyebrow {

        font-size: 11px;

        letter-spacing: 1.5px;
    }


    .hero-title {

        font-size: 36px;

        letter-spacing: -0.8px;
    }


    .hero-description {

        font-size: 16px;

        line-height: 1.6;
    }


    .hero-actions {

        flex-direction: column;
    }


    .hero-primary-btn,
    .hero-secondary-btn {

        width: 100%;
    }


    .hero-image {

        height: 340px;
    }


    .hero-floating-card {

        position: relative;

        left: auto;
        bottom: auto;

        width: calc(100% - 24px);

        min-width: 0;

        margin:
            -32px auto 0;
    }

}

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

@media (max-width: 991.98px) {

    .solutions-section {
        padding: 75px 0;
    }

    .solutions-heading {
        margin-bottom: 50px;
    }

    .solution-block,
    .family-portal {
        padding: 45px 35px;
    }

    .solution-visual {
        max-width: 620px;
        margin: 0 auto;
    }

    .portal-visual {
        margin: 10px auto 0;
    }

}


@media (max-width: 575.98px) {

    .solutions-section {
        padding: 60px 0;
    }

    .solutions-heading {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 34px;
    }

    .section-intro {
        font-size: 16px;
    }

    .solution-block,
    .family-portal {
        padding: 35px 22px;
        border-radius: 18px;
    }

    .solution-content h3,
    .family-portal h3 {
        font-size: 29px;
    }

    .solution-features {
        grid-template-columns: 1fr;
    }

    .solution-number {
        font-size: 65px;
    }

    .solution-visual {
        padding: 18px;
    }

    .platform-message {
        align-items: flex-start;
        padding: 20px;
    }

    .platform-message-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 18px;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .portal-device {
        padding: 18px;
    }

}

@media (max-width: 575.98px) {

    .back-to-top {
        width: 42px;
        height: 42px;
        right: 18px;
        bottom: 18px;
        font-size: 18px;
    }

}