/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* PAGINA */

html{
    background:#000;
}

body{
    background:#000;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
}

/* CONTENEDOR PRINCIPAL */

.page{

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

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

    padding:30px 15px 50px;
}

/* PERFIL */

.profile{

    text-align:center;
    margin-bottom:30px;
}

.logo{

    width:120px;
    height:auto;

    display:block;

    margin:0 auto 20px;
}

.profile h1{

    font-size:2rem;
    font-weight:700;

    margin-bottom:12px;
}

.description{

    color:#d0d0d0;

    line-height:1.6;
    font-size:1rem;
}

/* TARJETAS */

.card{

    display:block;

    width:100%;

    margin-bottom:22px;

    text-decoration:none;
    color:#fff;

    background:#111;

    border:3px solid #faae3d;

    border-radius:18px;

    overflow:hidden;

    position:relative;

    transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 25px rgba(250,174,61,.45);
}

/* IMAGEN */

.card img{

    width:100%;
    display:block;
}

/* TEXTO */

.card-content{

    padding:18px 20px;

    font-size:1.1rem;
    font-weight:700;
}

/* EFECTO CLUSTER */

.card::before{

    content:"";

    position:absolute;

    top:-40px;
    right:-40px;

    width:130px;
    height:130px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(250,174,61,.15),
        transparent 70%
    );

    pointer-events:none;
}

.card::after{

    content:"";

    position:absolute;

    bottom:-35px;
    left:-35px;

    width:100px;
    height:100px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(250,174,61,.10),
        transparent 70%
    );

    pointer-events:none;
}

/* CELULAR */

@media (max-width:600px){

    .page{
        padding:20px 12px 40px;
    }

    .logo{
        width:100px;
    }

    .profile h1{
        font-size:1.7rem;
    }

    .card-content{
        font-size:1rem;
        padding:16px;
    }
}