/* ----------   Layout principal   ---------- */
.inicio {
    display: flex;
    align-items: flex-start;  
    justify-content: space-between;
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 4rem 1.25rem 0;
}

/* ----------   Columna de texto   ---------- */
.inicio__info {
    flex: 1; 
    max-width: 40rem;
}

.inicio__title {
    color: #001B46;                /* azul marino GR */
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 1.75rem;
}

.inicio__text {
    font-size: 1.125rem;
    color: #001B46;
    margin-bottom: 2.25rem;
    max-width: 32rem;
}

/* ----------   Bot¨®n   ---------- */
.inicio__btn {
    display: inline-block;
    background: #00C3F3;           /* celeste corporativo */
    color: #fff;
    padding: 1rem 2.75rem;
    border-radius: 9999px;
    font-weight: 600;
    text-decoration: none;
    transition: background .25s ease;
}
.inicio__btn:hover {
    background: #00A9D4;
}

/* ----------   Columna visual   ---------- */
.inicio__visual {
    position: relative;
    /* 1) Aumentamos un poco el ¡°peso¡± de este flex: */
    flex: 1.2;            /* antes era flex:1 */
    text-align: right;
    min-width: 300px;
}

/* (opcional) si tienes un fondo SVG, lo puedes conservar como antes: */
.inicio__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 120%;
    max-width: 750px;      /* ajusta seg¨²n tu SVG */
    z-index: 0;
}

/* 2) Hacemos que la imagen llene todo el ancho de su contenedor sin limitarla a 100% */
.inicio__person {
    display: block;
    position: relative;   /* mejor que ¡°position: right¡± */
    z-index: 1;
    width: 100%;          /* ahora usar¨¢ todo el ancho posible */
    /* Si quieres que sobresalga un poco m¨¢s, podr¨ªas probar: */
    /* width: 110%; */
    height: auto;
    max-width: none;      /* quitamos la limitante de 100% */
}

/* ----------   Link inferior   ---------- */
.inicio__link {
    display: block;
    text-align: center;
    margin-top: 2.5rem;
    color: #00C3F3;
    font-weight: 600;
    text-decoration: none;
}

/* ----------   Responsivo   ---------- */
@media (max-width: 768px) {
    .inicio {
        flex-direction: column;
        text-align: center;
    }
    .inicio__visual {
        order: -1;                 /* imagen arriba en m¨®vil */
        text-align: center;
        /* Reducimos el ¡°peso¡± en m¨®vil para que no se vea demasiado grande */
        flex: 1;
    }
    .inicio__bg {
        width: 160%;
    }

    .inicio__person {
        width: 100%;
        max-width: none;
    }
}