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

body{
    font-family:'Patrick Hand', cursive;

    background:
    linear-gradient(180deg,#e9f0ff,#f7f9ff);

    color:#444;

    padding:20px;
}

/* CONTENEDOR PRINCIPAL */
.container{
    max-width:1000px;
    margin:auto;

    background:white;

    border:8px dashed #ff7a7a;
    border-radius:30px;

    padding:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* LOGO */
.logo{
    text-align:center;
    margin-bottom:20px;
}

.logo span{
    font-size:3.5rem;
    font-weight:bold;
    display:inline-block;
    margin:0 2px;

    font-family:'Special Elite', monospace;
}

/* COLORES DEL LOGO */
.logo span:nth-child(1){color:#ff6b6b;}
.logo span:nth-child(2){color:#ffa94d;}
.logo span:nth-child(3){color:#ffd43b;}
.logo span:nth-child(4){color:#69db7c;}
.logo span:nth-child(5){color:#4dabf7;}
.logo span:nth-child(6){color:#b197fc;}
.logo span:nth-child(7){color:#ff8787;}

/* MENU */
.menu{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:20px;

    margin-bottom:25px;
}

.menu a{
    text-decoration:none;
    color:#d94848;

    text-align:center;

    font-size:1rem;

    transition:.3s;
}

.menu a:hover{
    transform:translateY(-5px) rotate(-2deg);
}

.menu img{
    width:48px;
    display:block;
    margin:auto;
}

/* CAJA BIENVENIDA Y NOVEDADES */
.top-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

    margin-top:20px;
    margin-bottom:40px;
}

.welcome,
.updates{
    padding:20px;

    border-radius:20px;

    box-shadow:0 6px 15px rgba(0,0,0,.08);
}

.welcome{
    background:#d0ebff;
}

.updates{
    background:#fff9db;
}

/* TITULOS */
h2{
    font-family:'Special Elite', monospace;
    color:#d94848;
    margin-bottom:10px;
}

/* LISTAS */
ul{
    padding-left:20px;
}

/* SECCIÓN FAVORITOS */
.favorites{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;

    margin-bottom:40px;
}

.card{
    background:white;

    border:3px solid #f1e0d6;
    border-radius:20px;

    padding:20px;

    text-align:center;

    text-decoration:none;
    color:#444;

    transition:.3s;
}

.card:hover{
    transform:translateY(-6px) rotate(-2deg);
    background:#fff4f4;
}

/* FOTO PERFIL (IMPORTANTE PARA TU PROBLEMA) */
.profile-card img{
    width:180px;
    height:auto;

    display:block;
    margin:0 auto 15px auto;

    border-radius:20px;
}

/* ABOUT LAYOUT */
.about-layout{
    display:grid;
    grid-template-columns:300px 1fr;
    gap:25px;

    margin-bottom:40px;
}

/* STICKY NOTES */
.sticky{
    padding:20px;

    border-radius:20px;

    box-shadow:8px 8px 15px rgba(0,0,0,.15);

    position:relative;
}

.sticky::before{
    content:"";

    width:70px;
    height:18px;

    background:#f2d6a5;

    position:absolute;
    top:-10px;
    left:50%;

    transform:translateX(-50%) rotate(-5deg);
}

.yellow{
    background:#fff3bf;
}

.pink{
    background:#ffd6e7;
}

/* BOTONES 88x31 */
.buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;

    margin:30px 0;
}

.buttons img{
    width:88px;
    height:31px;
}

/* FOOTER */
footer{
    text-align:center;
    margin-top:20px;

    border-top:2px dashed #ddd;
    padding-top:15px;
}

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

    .top-grid{
        grid-template-columns:1fr;
    }

    .about-layout{
        grid-template-columns:1fr;
    }

    .logo span{
        font-size:2.5rem;
    }
    .section-title{
    margin-bottom:30px;
}

.facts-grid{
    margin-top:70px;
    gap:25px;
}
}