 /* funcionamiento básico del sistema de pestañas */
        .tab-content {
        display: none;
        }

        .tab:target .tab-content, .tab:last-of-type .tab-content {
        display: block;
        }

        .tab:target ~ .tab:last-of-type .tab-content {
        display: none;
        }

        /* parámetros para configurar las pestañas */
        :root {
        --tabs-border-color: #f3f6f8;
        --tabs-border-size: 3px;
        --tabs-text-color: rgb(8, 8, 8);
        --tabs-dark-color: #007bff;
        --tabs-lite-color: #6c757d;
        --tabs-width: 180px;
        --tabs-height: 40px;
        }

        /* aspecto básico */
        /*body {
        font-family: sans-serif;
        line-height: 1.2;
        }*/
        /*h2, p {
        margin: 0;
        } */
        a {
        /*color: inherit; lo quite para mostrar color azul*/
        text-decoration: none;
        
        } 
        .tabs * {
        box-sizing: border-box;
        }

        /* esto es para posicionar las pestañas correctamente */
        .tab-container {
        position: relative;
        padding-top: var(--tabs-height); /* en esta zona colocaremos las pestañas */
        } 
        #tab1>a { --tabs-position: 0; }
        #tab2>a { --tabs-position: 1; }
        #tab3>a { --tabs-position: 2; }
        #tab4>a { --tabs-position: 3; }
        #tab5>a { --tabs-position: 4; }
        #tab6>a { --tabs-position: 5; }
        #tab7>a { --tabs-position: 6; }
        #tab8>a { --tabs-position: 7; }
        #tab9>a { --tabs-position: 8; }
        .tab>a {
        text-align: justify;
        color: #fffdfd;
        position: absolute;
        background-color: #fff;
        width: calc(var(--tabs-width));
        height: calc(var(--tabs-height) + var(--tabs-border-size)); 
        top: 0;
        left: calc(var(--tabs-width) * var(--tabs-position)); /* posición de cada pestaña */
        }

        /* más aspecto */
        .tabs { 
        padding: 10px;
        color: var(--tabs-text-color);
        }
        .tab-content {
        /*background-color: var(--tabs-lite-color);*/
        padding: 20px;
        border: var(--tabs-border-size) solid var(--tabs-border-color);
        border-radius: 0 0 10px 10px;
        position: relative;
        z-index: 50;
        
        }
        .tab>a {
        background-color: var(--tabs-dark-color); 
        padding: 10px;
        border: var(--tabs-border-size) solid var(--tabs-border-color);
        border-radius: 10px 10px 0 0;
        /*border-bottom: 0;*/
        border-bottom: 1px solid #dee2e6;
        }
        .tab:target>a, .tab:last-of-type>a {
        background-color: var(--tabs-lite-color); 
        z-index: 300;
        }
        .tab:target ~ .tab:last-of-type>a {
        background-color: var(--tabs-dark-color); 
        z-index: 0; 
        }