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


html {
    font-size: 20px;
    scroll-behavior: smooth;
}

body {
    color: #28303d;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 34px;
}

img {
    width:100%;
    height:100%;
    object-fit: contain;
}

.header {
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header--oscuro {
    background-color: rgb(225, 241, 247);
}

.header__logo img{
    min-width: 100px;
    max-width: 175px;

}

.menu__list {
    display:flex;
    list-style: none;
}

.menu__item {
    margin-left: 1rem;
    padding: .25rem;
}

.menu__link {
    display:block;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    line-height: 14px;
    color: rgb(66, 65, 65);
    text-transform: uppercase;
}

.menu__item:hover .menu__link {
    color: white;
}

.menu__item:hover {
    background-color: #012338;
}


.ponente-ficha{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
    padding: 4rem 10vw;
    align-items: start;
}

.ponente-ficha h1 {
    display: none;
}

.ponente-ficha p {
    margin-bottom:.5rem;
}

.ponentes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 2rem;
    padding: 4rem 10vw;
    align-items: start;
}

.ponente figcaption{
    height: 230px;
    display:flex;
    flex-direction: column;
    align-items: center;
}

.ponente img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.ponente__btn {
    display:inline-block;
    margin-top:auto;
    border: 1px solid #2A9FCB;
    border-radius: 4px;
    padding: .2rem 1rem;
    text-decoration: none;
    color:#2A9FCB;
    font-size: .8rem;
    transition:all .3s ease;
}

.ponente__btn:hover {
    color: white;
    background-color:#2A9FCB;
}

.paragraph {
    text-align: justify;
    margin-bottom: .5rem;
    max-width: 60ch;
}

.paragraph--small {
    font-size: .8rem;
    line-height: 1.5rem;
    color: rgb(101, 162, 253);
}

.paragraph--mini {
    font-size: .7rem;
    line-height: 1rem;
    padding-left: 1.5rem;
    padding-top: 1rem;
}


.paragraph--cursive {
    font-style: italic;
}

.paragraph__link {
    color: grey;
}

.text--strong {
    font-weight: 700;
}

.text--center {
    text-align: center;
}

.text--right {
    text-align: right;
}

.text--red {
    color: rgb(206, 12, 12);
}

.text--cursive {
    font-style: italic;
}

.title {
 font-size: 24px;
 line-height: 33px;
}

.margin--small {
    margin-bottom: 1rem;
}

.content__blq {
    padding: 4rem 10vw;
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: 1fr 1fr;
}

.content__blq--dark{
    color: white;
    background-color: #00121D;
    background-image: linear-gradient(to bottom, #00121D, #012338);
}
.content__title {
    grid-column: 1 / -1;
    font-weight: 700;
    font-size: 50px;
    line-height: 55px;    
}

.content__title--flex {
    display:flex;
    justify-content: space-between;
}

.content__cell--double {
    grid-column: 1 / -1; 
}

.content__cell--centrada {
    display: flex;
    justify-content: center;
}

.content__cell--center {
   display:flex;
   flex-direction: column;
   align-items: center;
}

.cargos {
    margin-bottom: 1rem;
}
.cargos:first-child {
    margin-top: 1.5rem;
}

.cargos__nombre {
    line-height: 20px;
    padding-top: .5rem
}

.logos {
    display: flex;
    flex-wrap: wrap;
    
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    margin-top: 2rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid gray;
}

.logos__logo{
    display: block;
    width: 300px;
}

.cientifico {
    margin-bottom: 1.5rem;
}

.cientifico__titulo {
    font-size: 24px;
    line-height: 33px;
}

.cientifico__nombre {
    line-height: 20px;
    padding-top: .5rem;
}

.cientifico__institucion {
    font-size: .8rem;
    line-height: 1.5rem;
    color: rgb(101, 162, 253);
    font-style: cursive;
}

.calendar {
    display:grid;
    grid-template-columns: 3fr repeat(3, 4fr);
    grid-gap: 2px;
}

.calendar__header {
    background-color: #012338;
    color: white;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.calendar__cell {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: rgb(227, 236, 253);
}

.calendar__cell--dark {
    background-color: lightgray;
}

.calendar__cell a {
    color: gray;
    font-size: .8rem;
}

.btn, 
.btn:visited,
.btn:active {
    text-decoration: none;
    font-size: .8rem;
    display: inline-block;
    padding: .2rem 1rem;
    border: 1px solid #2A9FCB;
    margin: auto;
    color:#2A9FCB;
    border-radius: 4px;
}

.btn:hover {
    background-color:  #2A9FCB;
    color: white;
}

.btn--programa {
    background-color: #2A9FCB;
    color: white;
    padding: .1rem 1rem;
    display: block;
    font-size: .8rem;
    text-decoration: none;
    border-radius: 4px;
}

.btn--programa:hover {
    background-color: #146988;
}

.timeline { 
    display:grid;
    grid-template-columns: 1fr 70px 1fr;
    grid-row-gap: 2rem;
    align-items: center;
    background-image: linear-gradient(to left, 
            transparent calc(50% - 3px), 
            white calc(50% - 3px),
            white calc(50% + 3px),  
            transparent calc(50% + 3px) 
            );
}

.timeline__icon {
    width:70px;
    height: 70px;
    background-color: #2A9FCB;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline__icon img {
    width:75%;
}

.timeline__data {
    padding: 0 1rem;
    font-size: 15px;
}

.lista-numerada, .lista-nonumerada {
    padding-left: 1.5rem;
}
@media only screen and (max-width: 900px) {

    html {
        font-size: 18px;
    }

    .ponente-ficha,
    .ponentes,
    .content__blq,
    .calendar {
      grid-template-columns: 1fr;
    }

    .calendar {
        grid-template-areas: 
        "c11" "c21" "c31" "c41" "c51" "c61" "c71" "c81"
        "c12" "c22" "c32" "c42" "c52" "c62" "c72" "c82"
        "c13" "c23" "c33" "c43" "c53" "c63" "c73" "c83"
        "c14" "c24" "c34" "c44" "c54" "c64" "c74" "c84";
    }


    .content__title,
    .header,
    .menu__list {
        flex-direction: column;
    }

    .ponente-ficha,
    .ponentes,
    .content__blq,
    .header {
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }

    .btn--programa {
        margin-top: 1rem;
        text-align: center;
    }

    .btn-tw{
        display:none;
    }

    .empty {
        display:none;
    }

    .banner {
        display:block;
        height: 300px;
        object-fit: contain;
        background-color: #00121D;
    }
  }


  @media only screen and (max-width: 600px) {
   #c11 {grid-area: c11;}
   #c12 {grid-area: c12; display:none;}
   #c13 {grid-area: c13;}
   #c14 {grid-area: c14;}
   #c21 {grid-area: c21; display:none;}
   #c22 {grid-area: c22;}
   #c23 {grid-area: c23;}
   #c24 {grid-area: c24;}
   #c31 {grid-area: c31; display:none;}
   #c32 {grid-area: c32;}
   #c33 {grid-area: c33;}
   #c34 {grid-area: c34;}
   #c41 {grid-area: c41; display:none;}
   #c42 {grid-area: c42;}
   #c43 {grid-area: c43;}
   #c44 {grid-area: c44;}
   #c51 {grid-area: c51; display:none;}
   #c52 {grid-area: c52;}
   #c53 {grid-area: c53;}
   #c54 {grid-area: c54;}
   #c61 {grid-area: c61; display:none;}
   #c62 {grid-area: c62;}
   #c63 {grid-area: c63;}
   #c64 {grid-area: c64;}
   #c71 {grid-area: c71; display:none;}
   #c72 {grid-area: c72;}
   #c73 {grid-area: c73;}
   #c74 {grid-area: c74;}
   #c81 {grid-area: c81; display:none;}
   #c82 {grid-area: c82;}
   #c83 {grid-area: c83;}
   #c84 {grid-area: c84;}
}