* {
    padding: 0;
    box-sizing: border-box;
   
}


:root {
    /* Colores base */
    --azul-base: #5C6D8A;
    --naranja-base: #FD752B;
    --beige-base: #FFEEB1;
  
    
    /* Colores claros */
    --naranja-claro: #FEAD81;
    --beige-claro: #FBF4D7;
    --azul-claro: #CEE1E4;
    --light-dark-overbeige: #E3DABF;
    
    /* Negro */
    --marron-oscuro: #2E2111;
    
    /* Base clara secundaria */
    --verde-base-claro: #DBE5AE;
    --rojo-base-claro: #F792B0;
    --morado-base-claro: #CBBDEA;
    
    /* Contrastes saturados */
    --verde-saturado: #76872C;
    --rojo-saturado: #CD476F;
    --morado-saturado: #7253B4;
    
    /* Saturados luminosos */
    --verde-luminoso: #F1F7D4;
    --rojo-luminoso: #FAB8CC;
    --morado-luminoso: #E1D8F3;
    
    /* Saturados oscuros */
    --verde-saturado-oscuro: #1D4720;
    --morado-saturado-oscuro: #52225E;
    
    /* Base secundaria */
    --verde-base: #D3DF9D;
    --rojo-base: #F682A5;
    --morado-base: #C3B2E7;


    --font-size-h1: clamp(2.5rem, 5vw + 1rem, 3.75rem);     /* 40px -> 60px */
    --font-size-h2: clamp(2rem, 4vw + 1rem, 3rem);          /* 32px -> 48px */
    --font-size-h3: clamp(1.5rem, 3vw + 1rem, 2.25rem);     /* 24px -> 36px */
    --font-size-h4: clamp(1.25rem, 2.5vw + 1rem, 1.75rem);  /* 20px -> 28px */
    --font-size-h5: clamp(1rem, 2vw + 0.5rem, 1.25rem);     /* 16px -> 20px */
    --font-size-h6: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);  /* 16px -> 18px */
    --font-size-p: clamp(0.875rem, 1.5vw + 0.5rem, 0.875rem); /* 14px */
    --font-size-small: clamp(0.625rem, 1vw + 0.5rem, 0.625rem); /* 10px */


    --logo-size: clamp(3rem, 8vw, 6.5rem);
    --spacing-gap-4: clamp(0.188rem, 0.438vw, 0.25rem);
    --spacing-gap-8: clamp(0.375rem, 0.875vw, 0.5rem);
    --spacing-gap-12: clamp(0.563rem, 1.313vw, 0.75rem);
    --spacing-gap-16: clamp(0.75rem, 1.75vw, 1rem);
    --spacing-gap-24: clamp(1.125rem, 2.625vw, 1.5rem);
    --spacing-gap-32: clamp(0.75rem, 2vw, 2rem);
    --spacing-gap-40: clamp(1.5rem, 5vw, 2.5rem);
    --card-padding: clamp(1rem, 2vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);

    --borde-pagina: 8%;

    hyphens: none; 
   }

   a {
    text-decoration: none;
    color: inherit;
   }



   h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: none;
    margin-block-start: 0%;
    margin-block-end: 0%;

  }


h1 {
    font-size: var(--font-size-h1);
  }
  
  h2 {
    font-size: var(--font-size-h2);
  }
  
  h3 {
    font-size: var(--font-size-h3);
  }
  
  h4 {
    font-size: var(--font-size-h4);
  }
  
  h5 {
    font-size: var(--font-size-h5);
  }
  
  p {
    font-size: var(--font-size-p);
  }
  
  .small {
    font-size: var(--font-size-small);
  }






body {
    font-family: 'Manrope', sans-serif;  /* Changed from 'Poppins' to 'Manrope' */
    color: var(--marron-oscuro);
    line-height: 1.6;
    background-color: var(--beige-claro);
    padding: 0;
    margin: 0;

}

.about-container {
    margin-top: 0%;
    max-width: 68%;
    margin: 0 auto;
}






/* Header row with image and h1 */

.header-row {
    display: flex;
    margin-bottom: 40px;
    gap: 40px;
    align-items: flex-start;
}

.profile-image-container {
    flex: 0 0 45%;
}

.profile-image {
    width: 100%;
    border-radius: 5px;
    object-fit: cover;
}

.title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;

}

.title-container h1 {
    display: flex;
    margin: 0;
    font-size: 2.5rem;
    font-weight: 1000;
    line-height: 1.2;
    
}

.title-container h2 {
    
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 120%;
    margin-top: 1%;
    
}



/* Content area */
.profile-content {
    width: 100%;
}

.profile-intro {
    margin-bottom: 50px;
    max-width: 100%;
}

.profile-intro p {
    margin: 0;
}

/* Three column layout for info section */
.info-section {
    display: flex;
    gap: 5rem;
}

.info-column {
    flex: 1;
}

h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 20px;
}

h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-top: 20px;
}

.date {
    font-size: 0.9rem;
    color: #7A6F5A;
    margin-bottom: 10px;
}

.experience-item, .education-item {
    margin-bottom: 30px;
}

.resume-button {
    margin-top: 40px;
}

.btn {
    display: inline-block;
    background-color: #2E2111;
    color: #FBF4D7;
    text-decoration: none;
    padding: clamp(0.5rem, 1.2vw, 0.75rem) clamp(1rem, 4vw, 2.5rem);
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    text-align: center;
}

.btn:hover {
    background-color: #FD7024;
    padding-left: 3rem;
    padding-right: 3rem;
    /* O alternativamente: */
    /* transform: scaleX(1.1); */ /* Esto escala el botón horizontalmente sin afectar al texto */
}

.degrees{
    margin-top: 15%;
}


.introp{
    margin-top: 2rem;
    max-width: 80%;
}



/* Or for all paragraphs in the info-column sections */
p {
    font-weight: 500;
}
/* Footer */        
/* Footer */
/* Footer */
/* Footer */
/* Footer */
/* Footer */
/* Footer */




.details{
   
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: space-between;
    background: var(--marron-oscuro);
    padding: 0 var(--borde-pagina);
}

.texts-details{
    display: flex;
    flex-direction: column;
    margin: var(--spacing-gap-24) 0;
    gap: var(--spacing-gap-8);
}

.signature{
    color: var(--beige-claro);
    font-family: "Manrope", serif;
    font-size: var(--font-size-p);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    max-width: 60%;
    margin: 0;
    padding: 0;
}

.copyright{
    color: var(--beige-claro);
    font-family: "Manrope", serif;
    font-size: var(--font-size-p);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.icon-container-contact{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--spacing-gap-16);
}

.mail-icon-container,
.linkedin-icon,
.behance-icon {
    display: flex;
    width: clamp(2.875rem, 5vw + 1rem, 3.5rem);
    height: clamp(2.875rem, 5vw + 1rem, 3.5rem);
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    transition: all 0.3s ease;
}

.mail-icon-container,
.behance-icon {
    flex-direction: column;
}

.linkedin-icon {
    padding: clamp(0.5rem, 1vw + 0.25rem, 0.75rem);
}

/* Hover effects */
.mail-icon-container:hover,
.linkedin-icon:hover,
.behance-icon:hover {
    cursor: pointer;
    transform: scale(1.1);
}


.flex-degrees{
    display: flex;
    flex-direction: row;
    gap: 20%;
}

@media (max-width: 1500px) {
    .about-container {
        max-width: 80%;
    }

    .introp{
        margin-top: 2rem;
        max-width: 90%;
    }
    
}

@media (max-width: 1200px) {
    .about-container {
        max-width: 90%;
    }

    .introp{
        margin-top: 2rem;
        max-width: 100%;
    }
}

@media (max-width: 1050px) {
    .header-row {
        flex-direction: column-reverse;        
    }
    .title-container h1 {
        font-size: 2rem;

    }
    
    .profile-image-container, .title-container {
        flex: 0 0 100%;
    }
    
    .info-section {
        flex-direction: column;
        gap: 0;
    }

    .degrees {
        margin-top: 2.5%;
    }

    .info-column {
        margin-top: 5%;
    }

    h2{
        margin-bottom: 0;
    }
}



/* --------------------------------------------------------------------------------
                        Hero section        Navbar
-------------------------------------------------------------------------------- */

.hero{
    display: flex;
    flex-direction: column;
    gap: 11.25rem;
    width: 100%;
    
    background-color: var(--beige-claro);
    padding: 3rem  var(--borde-pagina) 8.75rem var(--borde-pagina);
}

.navbar {
    margin: 2.5vh 0;
    width: 100%;
    height: 15.38%;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo{
    display: flex;
    align-items: center;
}


.titulo-nav {
    color: var(--marron-oscuro);
    font-family: "Manrope", serif;
    font-size: var(--font-size-h2);
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.56px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s ease;
}

.titulo-nav {
    cursor: pointer;
    user-select: none;
}

.titulo-nav span {
    display: inline-block;
    margin-right: 2px; /* Pequeño espacio entre letras */
}



   /* --------------------------------------------------------------------------------
                       Nav buttons
-------------------------------------------------------------------------------- */


.buttons-nav{
    display: flex;
    align-items: center;
    gap: var(--spacing-gap-16);
}

.button-container-nav{
    display: flex;
    align-items: flex-start;
    height: 100%;
}

.primary-button-nav {
    display: flex
;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--beige-claro);
    padding: clamp(0.5rem, 0.75rem, 1rem) clamp(0.75rem, var(--spacing-300, 1rem), 1.25rem);
    border-radius: 32px;
    background: var(--marron-oscuro);
    border: 2px solid var(--marron-oscuro);
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.primary-button-nav:hover {
    padding: clamp(0.5rem, 0.75rem, 1rem) var(--spacing-gap-32);
    background: var(--naranja-base);
    color: var(--beige-claro);
    transform: scale(1.05); /* Efecto sutil de escala */
    border: none;
}

.secondary-button-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--marron-oscuro);
    padding: clamp(0.5rem, 0.75rem, 1rem) clamp(0.75rem, var(--spacing-300, 1rem), 1.25rem);
    border-radius: 32px;
    border: 2px solid var(--marron-oscuro);
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
}

.secondary-button-nav:hover{
    border: 2px solid var(--marron-oscuro);
    border-color: var(--naranja-base);
    color: var(--naranja-base);

}


.manrope-nav-buttons-20 {
    font-family: "Manrope", serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: var(--font-size-h6);
    white-space: nowrap;
}