@font-face {
  font-family: 'IberPangea';
  font-weight: normal;
  font-style: normal;

  src: url('/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/fonts/IberPangea-Regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'IberPangea';
  font-weight: medium;
  font-style: normal;
  src: url('/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/fonts/IberPangea-Medium.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'IberPangea';
  font-weight: 600;
  font-style: normal;
  src: url('/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/fonts/IberPangea-SmBold.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'IberPangea';
  font-weight: bold;
  font-style: normal;
  src: url('/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/fonts/IberPangea-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IberPangea';
  src: url('/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/fonts/IberPangea-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'IberPangea';
  src: url('/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/fonts/IberPangea-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

:root {
    --button: #00A443;
    --secundary: #00402A;
    --grey: #615D5A;
    --background: #FFF5EC;


}
#carrera-profesional *{
box-sizing: border-box;
}
#carrera-profesional{
    background-image: url(/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/images/background.jpeg);
    background-repeat: no-repeat;
    background-size: cover !important;
     height: 640px;
    position: relative;
    font-family: "IberPangea";
    padding: 266px 24px 24px 24px;
    margin-bottom: 90px;
}

#carrera-profesional .container-info{
    background-color: var(--background);
   width: 326px;
    position: absolute;
    border-radius: 15px;
    padding: 21px 26px 29px 26px;
    top: 42%;
    height: 348px;
    margin-left: auto;
    margin-right: auto;
}

#carrera-profesional .container-info h2{
    
font-size: 21px;
font-style: normal;
font-weight: 450;
line-height: 120%;
color: var(--secundary);
margin-bottom: 16px;

}
#carrera-profesional .container-info p{
    color: #615D5A !important;
   
    font-size: 18px;
    font-style: normal;
    font-weight: 350;
    line-height: 120%;
    margin-bottom: 18px;

}
#carrera-profesional .container-info .buttons li{
    list-style: none;
   padding: 16px 26px 14px 26px;
    text-align: center;
   background-color: var(--button);
    color: white;
    margin-bottom: 13px;
    border-radius: 24.5px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    color: #FFF;
text-align: center;
font-family: "IberPangea Medium", sans-serif;
font-size: 18px;
font-style: normal;

line-height: normal;

}
#carrera-profesional .container-info .buttons{
     padding-left: 0;
     margin-top: 30px !important;

}
#carrera-profesional .container-info .buttons a{
    
    color: white;
    text-decoration: none;

}
@media (min-width: 768px) {
    #carrera-profesional{
        background-image: url(/wcorp/gc/prod/es_ES/estaticos/carrera-profesional/images/background-desktop.jpeg);
        background-size: contain;
    }
    #carrera-profesional .container-info{
      height: fit-content;
      top: 1%;
      right: 1%; 
      padding: 52px 39px 20px 39px; }
     
    #carrera-profesional .container-info h2{
        font-size: 24px;
        margin-bottom: 20px;
    }
    #carrera-profesional .container-info p{
        font-size: 20px;
        margin-bottom: 20px;
    }
  }

@media (min-width: 1000px) {
    #carrera-profesional{
        height: 564px;
        max-width: 100%;
        
    }
#carrera-profesional .container-info
    {width: 533px;
    height: fit-content;
 }

    #carrera-profesional .container-info .buttons {
        display: flex;
        justify-content: space-between;
        font-size: 18px;
       
    }
    #carrera-profesional .container-info {
      top: 23%;
    right: 4%;
    }
    #carrera-profesional .container-info .buttons li{width: 200px;}
  }