.cv_holder {
    position: relative;
    padding-left: 5vmin;
    padding-right: 5vmin;
    margin-bottom: 20vh;
    margin-top: 10vmin;
    overflow: hidden;
}

#name {
font-family: quador, serif;
font-style: normal;
text-align: left;
font-size: 2.2rem;
font-weight: 700;
line-height: 2.6rem;
margin: 0px;
}

.header_about{
    text-align: left;
    font-size: 2rem;
    font-weight: 200;
    line-height: 2rem;
    margin: 0px;
    text-align: left;
}
.cv_container {
    padding-left: 10vmin;
    padding-right: 10vmin;
    display: grid;
    grid-template-columns: 0.5fr 1fr 1.5fr;
    gap: 20px;
    justify-items: center; /* Centra el contenido de las celdas horizontalmente */
    align-items: center;   /* Centra el contenido de las celdas verticalmente */
    height: auto;         /* Da altura al contenedor para observar el centrado */
    max-width: 1024px;
}

#contact_details{
    padding-left: 6vmin;
}

#name{
    padding-left: 5vmin;
    font-weight: 400;
}

.cv_container_header {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-items: center; /* Centra el contenido de las celdas horizontalmente */
    align-items: center;   /* Centra el contenido de las celdas verticalmente */
    height: auto;         /* Da altura al contenedor para observar el centrado */
    max-width: 1024px;
}

.cell {
    display: flex;
    flex-direction: column;
    align-items: center; /* Alinea el contenido dentro de .cell al centro horizontal */
    justify-content: center; /* Alinea el contenido dentro de .cell al centro vertical */
}

.logo_cv {
    width: 100px;
}


/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .cv_container, .cv_container_header {
        grid-template-columns: 1fr; /* Dos columnas */
        grid-template-rows: auto auto auto; /* Dos filas */
        grid-template-areas: 
            "cell1" /* Primera fila: dos columnas */
            "cell2"
            "cell3"; /* Segunda fila: una columna de ancho completo */
    }

    /* Asignación de áreas */
    .cell:nth-child(1) {
        grid-area: cell1;
    }

    .cell:nth-child(2) {
        grid-area: cell2;
    }

    .cell:nth-child(3) {
        grid-area: cell3;
    }
}

.cell h2, .cell h3, .cell p {
    margin: 5px 0; /* Reduce el margen vertical entre elementos */
    line-height: 1.2; /* Ajusta la altura de línea para mayor compactación */
}


h2 {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.contacto_footer h2 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 2.5rem;
}

h3 {
    font-size: 1.2rem; /* Ajusta si es necesario */
    font-weight: 400;
    text-align: center;
}

.heading {
    padding-top: 5vmin;
    padding-left: 10vmin;
    padding-right: 10vmin;
    text-align: left;
    font-family: quador, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 4rem;
    line-height: 4rem;
    margin: 0px;
}

h4 {
    font-size: 1.5rem; /* Ajusta si es necesario */
    font-weight: 200;
    text-align: left;
}



/*BOTÓN A PDF

/* Estilo del contenedor a exportar */
.content-to-pdf {
    padding: 200px;
    background-color: #ffffff;
    color: black;
    font-family: effra-cc, sans-serif;
}

/* Botón de descarga */
.download-btn {
    position: fixed;
    top: 15vmin;
    right: 15vmin;
    padding: 10px 20px;
    background-color: #16161d;
    color: #eaeaea;
    font-size: 1rem;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: #d83312;
}



/*back button*/

/* CONTROLLER */


.back_button {
    position: absolute;
    top: 7.5vmin;
    left: 5vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.controller-masonry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    text-align: center;
}

.controller-image-link img {
    width: 40%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

.controller-button-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 70%;
    margin-top: 25px;
    gap: 10px;
}

.controller-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #16161d;
    font-size: 1rem;
    border: 1px solid #16161d;
    padding: 5px 10px 2px;
}

.controller-button:hover {
    background: #16161d;
    color: #eaeaea;
}

.parrafo_introductorio {
    margin-top: 40vmin;
    padding-left: 10vmin;
    padding-right: 10vmin;
    padding-bottom: 5vmin;
    max-width: 100ch; /* opcional pero recomendable para legibilidad */
    text-align: left;
    margin-left: 0; /* asegúrate de que no se esté centrando */
}


.parrafo_introductorio p {
    font-size: 1.2rem;
    line-height: 1.4rem;
    text-align: justify;
    text-align-last: left;
    align-self: flex-start;
}

.parrafo_introductorio h3 {
    font-size: 2rem;
    color: #111;
    font-family: 'Arial Black', sans-serif;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .download-btn {
        position: absolute;
        top: 15vmin;
        right: 10vmin;

    }

    .parrafo_introductorio {
        margin-top: 80vmin;
    }

        /* Justificación general de textos */
        .parrafo_introductorio p,
        .parrafo_introductorio h3,
        .cv_container,
        .cv_holder,
        h1, h2, h3, h4, h5, h6,
        .heading {
            text-align: justify;
            text-align-last: center;
        }
    
        /* Reducción de tamaños tipográficos grandes */
        .heading {
            font-size: 2rem;
            line-height: 2.4rem;
            text-align: center;
            text-align-last: center;
        }
    
        h2, h3 {
            font-size: 1rem;
            line-height: 1.2rem;
        }
    
        .parrafo_introductorio p {
            font-size: 0.8rem;
            line-height: 1rem;
        }
    
        .parrafo_introductorio h3 {
            font-size: 0.8rem;
            line-height: 1rem;
        }
    
        #name {
            font-size: 1.5rem;
            line-height: 1.8rem;
        }
    
        .header_about {
            font-size: 1.5rem;
            line-height: 1.8rem;
        }
}