* {
  margin: 0;
  padding: 0;
}
/*
body {
  background: var(--background-color);
  font-family: var(--font);
  display: flex;
  justify-content: center;
}*/
.contenedor{
    display:flex;
}

.contenedor-timeline {
    background: var(--background-color);
    font-family: var(--font);
    margin: 0 auto;
    justify-items: center;
    padding-top:3em;
}

/* Timeline Container */
.timeline {
  background: var(--primary-color);
  margin: 20px auto;
  padding: 20px;
}

/* Card container */
.card {
  position: relative;
  max-width: 80%;
  display: flex;;
}

.card img{
    width: 100%;
    max-height: 20em;
}

/* setting padding based on even or odd */
.card:nth-child(odd) {
  padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
  padding: 30px 30px 30px 0;
}
/* Global ::before */
.card::before {
  content: "";
  position: absolute;
  width: 50%;
  /* border: #d38f10; */
}

/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
  left: 0px;
  top: -4.5px;
  bottom: -4.5px;
  border-width: 5px 0 5px 5px;
  border-radius: 50px 0 0 50px;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
  .card:nth-child(odd)::before {
    top: -5px;
    bottom: -5px;
  }
}

/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
  right: 0;
  top: 0;
  bottom: 0;
  border-width: 5px 5px 5px 0;
  border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.card:first-child::before {
  border-top: 0;
  border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(odd)::before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(even)::before {
  border-bottom: 0;
  border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  background: var(--timeline-card-color-bg);
  color: var(--timeline-card-color-text);
  border-radius: 10px;
  padding: 10px;
}




/* text right if the card is even  */


.tags {
    margin-top:2em;
}
.tags li {
    background-color: var(--timeline-tags-bg);
    margin: 5px;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 15px;
    font-size: 0.7em;
    display: inline-block;
    color: var(--timeline-tags-text);

}



.datos{
    display: flex;
    flex-direction: column;
    width: 100%;
    /*max-height: 20em;*/
}


.title {
  color: var(--card-title);
  position: relative;
  font-weight: bold;
    font-size: 1.5em;
}

.fecha{
    font-size: 0.7em;
    color: gray;
    /*text-align: right;
    margin-top: 1em;
    justify-items: end;
    justify-self: end;*/
}

.bloque-titulo{
  display: flex; /* Habilita Flexbox para el contenedor */
  justify-content: space-between; /* Distribuye el espacio para alinear los elementos a los extremos */
  align-items: center; 
}
/*
.recomendado {
    position: absolute;
    top: -11px;
    right: 0;
    padding: 5px 10px;
    width: 2em;
    height: 4em;
    background-color: #f00;
    color: white;
    font-weight: bold;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 100% 60%, 100% 100%, 49% 68%, 0 100%, 0 58%);
}*/

.recomendado {
  position: absolute;
    top: -16px;
    right: 0;
    width: 2em;
    height: 4em;
    background-color: var(--timeline-recomendado);
    color: white;
    font-weight: bold;
    z-index: 10;
    clip-path: polygon(0 0, 100% 0, 100% 60%, 100% 100%, 50% 70%, 0 100%, 0 60%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-family: sans-serif;
    box-sizing: border-box;
    border: 3px solid white;
    padding-top: 5px;
}
.imagen{
  position: relative;
}