/* static/app/plan_responsive.css */

/* =========================================
   PLAN · RESPONSIVE
========================================= */

@media (max-width:768px){

    /* =====================================
       TOPBAR
    ===================================== */

    .topbar::after{
        content:"Planes";
    }


    /* =====================================
       VIEW
    ===================================== */

    .view-container.plan{

        overflow:visible;

        padding:
        14px
        14px
        28px
        14px;
    }


    /* =====================================
       INNER
    ===================================== */

    .plan-inner{

        width:100%;
        max-width:390px;

        margin:0 auto;

        padding-top:8px;
        padding-bottom:24px;
    }


    /* =====================================
       HEADER
    ===================================== */

    .plan h1{

        font-size:24px;

        line-height:1.15;

        text-align:left;

        margin:
        8px
        0
        10px
        0;
    }

    .sub{

        text-align:left;

        font-size:13px;

        line-height:1.45;

        margin-bottom:24px;
    }


    /* =====================================
       COMPARACIÓN
    ===================================== */

    .plan-comparacion{

        display:flex;

        flex-direction:column;

        gap:16px;
    }


    /* =====================================
       CARDS
    ===================================== */

    .plan-card{

        width:100%;

        padding:20px 18px;

        border-radius:14px;

        box-sizing:border-box;
    }

    .plan-card h3{

        font-size:16px;

        margin-bottom:14px;
    }

    .plan-card ul{

        font-size:12.5px;

        line-height:1.5;

        margin-bottom:18px;
    }

    .plan-precio{

        font-size:18px;

        margin-bottom:12px;
    }


    /* =====================================
       TÉRMINOS
    ===================================== */

    .terminos-label{

        font-size:11px;

        line-height:1.45;
    }


    /* =====================================
       BOTONES
    ===================================== */

    .btn-plan{

        height:38px;

        padding:
        0
        14px;

        border-radius:8px;

        font-size:11.5px;
    }

    .plan-anual{

        font-size:11.5px;

        line-height:1.45;

        margin-bottom:10px;
    }


    /* =====================================
       TABLA
    ===================================== */

    .plan-tabla{

        margin-top:24px;
    }

    .plan-tabla h3{

        text-align:left;

        font-size:16px;

        margin-bottom:12px;
    }

    .plan-tabla table{

        font-size:11.5px;
    }

    .plan-tabla th,
    .plan-tabla td{

        padding:8px;
    }


    /* =====================================
       FRANJA
    ===================================== */

    .plan-franja{

        margin-top:24px;

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

        padding:
        16px
        14px;

        border-radius:14px;

        font-size:12px;
    }


    /* =====================================
       CARGADOR
    ===================================== */

    .cargador-contenido{

        width:88%;

        padding:
        22px
        18px;

        border-radius:14px;
    }

    .cargador-texto{

        font-size:13px;
    }

}