/* ==============================
   RESPONSIVE GLOBAL - ETERNAPACHA
   ============================== */

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

body{
    overflow-x:hidden;
}

/* Contenedores generales */
.container,
.container-fluid{
    max-width:1200px;
}

/* Cards */
.card,
.ew-card,
.card-ew,
.action-card,
.logro-card,
.carta-card,
.carta-album{
    max-width:100%;
}

/* Botones */
.btn{
    white-space:normal;
}

/* Tablas */
.table-responsive-ew{
    width:100%;
    overflow-x:auto;
}

/* ==============================
   TABLET
   ============================== */
@media (max-width: 992px){

    .container{
        padding-left:18px;
        padding-right:18px;
    }

    h1{
        font-size:32px!important;
    }

    h2{
        font-size:26px!important;
    }

    .row{
        margin-left:0;
        margin-right:0;
    }

    .col-md-4,
    .col-md-6,
    .col-lg-4,
    .col-lg-6,
    .col-lg-8{
        width:100%;
    }

    .d-flex{
        flex-wrap:wrap;
    }
}

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

    body{
        font-size:15px;
    }

    .container{
        padding:18px!important;
    }

    h1{
        font-size:28px!important;
        text-align:center;
    }

    h2{
        font-size:24px!important;
    }

    h3{
        font-size:21px!important;
    }

    .btn,
    .btn-lg{
        width:100%;
        margin-bottom:10px;
    }

    .card,
    .ew-card,
    .card-ew,
    .action-card,
    .logro-card{
        border-radius:20px!important;
        padding:20px!important;
    }

    .text-center-mobile{
        text-align:center!important;
    }

    .hide-mobile{
        display:none!important;
    }

    .show-mobile{
        display:block!important;
    }

    .profile-card,
    .panel-sidebar{
        width:100%!important;
        margin-bottom:20px;
    }

    .panel-main{
        width:100%!important;
    }

    .stats-card{
        width:100%!important;
        margin-bottom:15px;
    }

    .action-card{
        min-height:auto!important;
    }

    .imagen-carta,
    .carta img{
        width:160px!important;
        height:220px!important;
    }
}

/* ==============================
   CELULAR PEQUEÑO
   ============================== */
@media (max-width: 480px){

    .container{
        padding:12px!important;
    }

    h1{
        font-size:25px!important;
    }

    .btn{
        font-size:15px;
        padding:10px 14px;
    }

    .card,
    .ew-card,
    .card-ew,
    .action-card{
        padding:16px!important;
    }

    .imagen-carta,
    .carta img{
        width:140px!important;
        height:190px!important;
    }

    .badge{
        font-size:11px;
    }
}