/* El diseño por defecto de esta clase incluye estos nodos 
        header
        main
        details
      */
      .tarjetaextensible {
        max-width: 700px;

        margin: 100px auto;

        background-color: #eee;
        -webkit-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.75);

        /*
        border-radius: 10px;
        */

        border-bottom: 5px solid purple;
        border-top: 5px solid purple;
      }


      .tarjetaextensible main {
        margin: 50px 0;
      }

      .tarjetaextensible img {
        width: 100%;
      }

      .tarjetaextensible header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;

        border-left: 1px solid purple;

        padding: 0 6px;

        height: 2em;

      }

      .tarjetaextensible .hint {
        src: url(https://img.icons8.com/ios/50/000000/info-filled.png);
        height: 2em;

      }

      .tarjetaextensible .language {
        font-size: 2em;

        text-transform: uppercase;
        color: purple;
        text-decoration: none;


        padding-left: 10px;



      }

      .tarjetaextensible .category {
        display: none;
        font-style: italic;
      }



      .tarjetaextensible details {
        background-color: #fff;
      }

      .tarjetaextensible details *:not(summary) {
        padding: 10px 15px;
      }

      .tarjetaextensible summary {
        font-size: 1.5em;
        text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);

        transition: 1s background-color;

      }

      .tarjetaextensible summary:hover {
        background-color: purple;
        color: white;
      }

      /*
      DETAILS\SUMMARY
      */