/* 270 870 */
.about-box {
    display: flex;
    flex-wrap: nowrap; /* columnas lado a lado mientras haya espacio */
    gap: 20px; 
}

/* columna izquierda */
.about-cv {
    flex: 0 0 270px;   /* ancho fijo */
    max-width: 270px;
    padding: 15px;
}

/* columna derecha */
.about-intro {
    flex: 1 1 auto;    /* se adapta al espacio disponible */
    min-width: 0;      /* importante para que pueda reducir correctamente */
    margin-left: auto; /* se mantiene alineada a la derecha */
    padding: 15px;
}

/* responsive: cuando el ancho total es menor a 500px */
@media (max-width: 500px) {
    .about-box {
        flex-direction: column; 
    }
    .about-cv,
    .about-intro {
        flex: 1 1 100%;
        max-width: 100%;
        margin-left: 0; /* reset al apilar */
    }
}

/***************************************************************/
.about-profile{
    width:160px;
    height:160px;
    display:block;
    overflow:hidden;
    margin:0 auto;
    background-color:white;
    border-radius:80px; 
    background-size: cover;
    background-position: center;
}
.about-rrss{
    padding: 15px 5px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.about-cv-title{
    font-size: 1.4rem;
    color: var(--primary-two);
    font-weight: 900;
    margin: 20px 0 10px 0;
    font-family: 'Arial', sans-serif;
}
.about-cv-exp-title{
    font-size: 1.2rem;
    color: var(--primary-one);
    font-weight: bold;
    margin: 12px 0 5px 0;
}
.about-cv-exp-text .about-lista{
    font-size: 1rem;
    margin:0 0 12px 0;
}
.about-lista{
    list-style: disc;
    padding-left: 1.5em;
}
.about-lista li {
    list-style: disc;
    line-height: 1.7rem;
}
/***************************************************************/
.about-contact-button-area{
    width:100%;
    height:auto;
    padding:20px 0;
    display:block;
}
/***************************************************************/
/*about intro*/
/***************************************************************/
.about-name{
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--primary-one);
    font-family: 'Helvetica', 'Arial', sans-serif;
}
.about-img{
    width: 211px;
    height: 98px; 
    margin: 20px 0; 
    background-size: cover;
    background-position: center;
}
.about-subtitle{
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-one);
}
.about-text p{
    font-size: 1rem;
    line-height: 1.7rem;
    margin: 17px 0;
}