/*
   SECCIÓN HERO / ABOUT ME
    */
.hero {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px;
    text-align: start;
    box-shadow: var(--shadow-red);
    margin-top: 16px;
}

.hero-title {
    width: 15rem;
    box-shadow: 3px 3px 5px var(--color-white), -3px -3px 5px var(--color-dark);
    margin-top: 16px;
}

.hero-img {
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

/* ─── IMAGEN RESPONSIVA ─── */
img {
    display: block;
    width: 300px;
    max-width: 100%;      /* ✅ Responsiva en pantallas pequeñas */
    height: auto;         /* ✅ Mantiene proporción correcta */
    border-radius: 10%;
    object-fit: cover;
    border: 4px solid var(--color-surface);
    box-shadow: 3px 3px 5px var(--color-white), -3px -3px 5px var(--color-dark);
    margin-top: 16px;
}

.sobre-mi-texto {
    max-width: 500px;
}

/* ─── LOGO RIWI FLOTANTE ─── */
#riwi {
    display: flex;
    position: fixed;
    background-color: var(--color-dark);
    bottom: 20px;
    right: 20px;
    width: 150px;
    height: auto;
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border);
}

#proyectos {
    display: grid;
}

#contacto {
    box-shadow: var(--shadow-red);
    margin-top: 16px;
}