.experiencia{
  .item {
    grid-template-areas:
      "rotulo rotulo"
      "dcronica duracion"
      "modalidad desarrollo";
  }
  .logros {
    grid-area: desarrollo;
    margin-left: -2rem;

    .logro {
      margin-top: var(--separa-micro);
      display: grid;
      grid-template-columns:2.5rem auto;
      grid-template-areas:
        "etiqueta logro"
        ". mas";

      .header {
        grid-area: etiqueta;
      }

      .descripcion {
        grid-area: logro;
      }


      .info_extra {
        grid-area: mas;
        position: relative;
        padding: 1rem;
        margin: 0.7rem 0rem;
        line-height: 1.4rem;
        border-radius: 0.4rem;
        color: var(--color-oscuro);
        background-color: var(--color-fondo-ligero);
        box-shadow: 0 0.1rem 0.4rem -0.2rem black;
      }

      .info_extra::before {
        content: "";
        position: absolute;
        width: 1rem;
        height: 1rem;
        transform: rotate(45deg);
        background-color: var(--color-fondo-ligero);
        box-shadow: -0.1rem -0.1rem 0.4rem -0.3rem black;
        top: -0.4rem;
        left: 1.4rem;
      }


      .amplia_info_extra {
        border: none;
        background-color: transparent;
        color: var(--color-clicable);
        font-weight: bold;
        cursor: pointer;
        font-size: 0.8rem;
        padding-left: 0.2rem;
        border-radius: 0.3rem;
      }

      .amplia_info_extra:focus-visible {
        outline: 1px solid var(--color-clicable);
        outline-offset: 0.2rem;
      }

      .amplia_info_extra:hover {
        text-decoration: underline;
      }

      .ocultar {
        display: none;
      }

      [aria-expanded="true"] {
        .mostrar {
          display: none;
        }

        .ocultar {
          display: inline;
        }

      }

    }







  }

  .duracion {
    text-align: left;
    font-weight: unset;
    line-height: unset;
  }
}