body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #EAF6FB;
    position: relative;
    overflow: hidden;
}

.background-shape {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    background: url('../img/forma_fondo.png') no-repeat;
    background-size: cover;
}

.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    align-items: center;
    text-align: left;
    position: relative;
    z-index: 2;
}

.content {
    flex: 1;
    padding: 20px;
}

.content h1 {
    font-size: 2.5rem;
    color: #004B5B;
}

.bold { font-weight: 600; }
.light { color: #009FC9; }

.content p {
    font-size: 1.1rem;
    color: #333;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease-in-out;
}

.facebook { background-image: url('../img/facebook_azul.png'); }
.facebook:hover { background-image: url('../img/facebook_gris.png'); }

.x { background-image: url('../img/x_azul.png'); }
.x:hover { background-image: url('../img/x_gris.png'); }

.instagram { background-image: url('../img/instagram_azul.png'); }
.instagram:hover { background-image: url('../img/instagram_gris.png'); }

.youtube { background-image: url('../img/youtube_azul.png'); }
.youtube:hover { background-image: url('../img/youtube_gris.png'); }

.image-section {
    flex: 1;
    text-align: center;
}

.image-section img {
    max-width: 100%;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        text-align: center;
    }
    .background-shape {
        width: 100%;
        height: 50%;
        background-position: center;
    }
}