/* Uso de variables CSS
definición
:root {	--nvariable:;}
uso
var(--nvariable)

    --clr-letra: #FFAAAA;
    --clr-hover: #D46A6A;

    --clr-headers-letra: purple;
        --clr-headers-hover: red;

    --clr-fondoB-link: #52485c; 
    --clr-fondoB-programminglink: #71567b;
    --clr-fondoB-letra:  white;


    --clr-fondoGris: #333;
        --clr-fondoGris-hover: #2a0044;
    --clr-fondoGris-letra:  #FFAAAA;

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
#DE9EBD
#B9618C no
#8D2F5D
#610E37 no
#35001A
*/
:root {

    --clr-letra: rgb(226, 204, 214);  /* 1º */ 

    /* OK */

    --clr-headers-letra:rgb(255, 184, 219); /* 1º MÁS CLARO */
        --clr-headers-hover: #DE9EBD; /* 1º */

     /* OK */
    --clr-fondoB-link: #52485c;
    --clr-fondoB-programminglink: #71567b;
    --clr-fondoB-hover: #8D2F5D; /* 3º */ 
    --clr-fondoB-letra:  white;
    

    --clr-fondoGris: rgb(59, 50, 54); /* 3º DESATURADO */
    --clr-fondoGris-hover: #8D2F5D; /* 3º */ 
    --clr-fondoGris-letra:  #DE9EBD;  /* 1º */ 

    --clr-fondoPie-hover: rgb(53, 22, 37); /* 5º DESATURADO */

}



body {
    /* background: #313145; */

    /* Ajustado a la ventana, de lo contrario dejaría un pequeño margen */
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}


/* Cada una de las secciones temáticas mostradas, que abarcan la ventana completa */
.abarcapantalla {
    position: relative; /* Nos permitirá anteponer una máscara para relegar la imagen */
    min-height: 100vh; /* vh viewport heigh, vw viewport width */

    /* para centrar verticalmente */
    display: flex;
    align-items: center;

    background: no-repeat 50% 50%;
    background-size: cover; /* que se extienda por el espacio disponible */
}
    .abarcapantalla>.mascara {
        background-color: #000;
        opacity: 0.5;

        position: absolute; /*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
        z-index: 0;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;

        transition: all ease-out 1.5s;
    }
    .abarcapantalla:hover>.mascara {
        opacity: 0.3;
        transition: all ease-out 1.5s;
    }


    .abarcapantalla .contenedor { /*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
        width: 100%;
        position: relative;
        margin: 0 auto;
        padding: 0 15px;


        word-wrap: break-word;
        text-align: center;
        color: var(--clr-letra);
    }
    .abarcapantalla h1 {
        color: var(--clr-headers-letra);
        font: 700 4.25rem/1.1 sans-serif; /*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/
        text-transform: uppercase;
    }
    .abarcapantalla h2 {
        color: var(--clr-headers-letra);
        font-size: 1.5em;
        text-transform: uppercase;
    }
    .abarcapantalla h3 {
        padding: 0 10%;

        color: var(--clr-letra);
        font-size: 1em;
        font-weight: 500;
    }   
    .abarcapantalla p {
        padding: 0 10%;
    }


    .abarcapantalla:hover h1 {
        color: var(--clr-headers-hover);
        transition: all ease-out 1.5s;
    }
    .abarcapantalla:not(:hover) h1{
        transition: all ease-out 1.5s;
    }

    .abarcapantalla h2:hover,
    .abarcapantalla h3:hover {
        color: var(--clr-headers-hover);
        transition: all ease-out 1.5s;
    }
    .abarcapantalla h2:not(:hover),
    .abarcapantalla h3:not(:hover){
        transition: all ease-out 1.5s;
    }




    .contenedor section {
        margin: 40px 0 0 0;
    }

    section section {
        margin: 20px 0 0 0;
    }

    .button {
        text-decoration: none; /* no se desea la apariencia por defecto del hipervínculo */

        text-transform: uppercase;
        font-size: 0.8em;
        color: var(--clr-fondoB-letra);
        background-color: var(--clr-fondoB-link);
        
        box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.75);
    }
        a.button:hover{
            background: var(--clr-fondoB-hover);    
        }
        a.programminglink {
            background-color: var(--clr-fondoB-programminglink);
        }


        section>a.button {
            /* avoid wrapping */
            display: inline-block; 
            padding: 5px 15px;
            margin: 5px 3px;
        }
        section>a.programminglink {
            border-radius: 15px;
        }

        .flow-nav {
           margin: 15px;
        }

        .flow-nav>a {
                        /* avoid wrapping */
            display: inline-block;
            height: 40px;
            line-height: 40px;
            width: 200px;
            position: relative;


            margin: 5px 15px;
        }
        .flow-nav>a:not(:last-of-type)::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            right: -20px;
    
            border-width: 20px 0 20px 20px;
            border-style: solid;
            border-color: transparent transparent transparent var(--clr-fondoB-link);
            /*
            height: 50px;
            width: 50px;
            background-color: var(--clr-fondoB-link);
            border-radius: 50%;
            */
        }

        .flow-nav>a:not(:first-of-type)::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            left: -20px;
    
            border-width: 20px 0 20px 20px;
            border-style: solid;
            border-color: var(--clr-fondoB-link) transparent var(--clr-fondoB-link) transparent;
        }   



        .flow-nav>a.programminglink::after {
            border-left-color: var(--clr-fondoB-programminglink); 
        }
        .flow-nav>a.programminglink::before {
            border-color: var(--clr-fondoB-programminglink) transparent  var(--clr-fondoB-programminglink) transparent; 
        }
        .flow-nav>a:hover::after {
            border-left-color: var(--clr-fondoB-hover); 
        }
        .flow-nav>a:hover::before {
            border-color: var(--clr-fondoB-hover) transparent  var(--clr-fondoB-hover) transparent; 
        }

        
.parallax-background {
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}



#LT {
    background-image: url("../img/LT.jpg");
    background-image: url("../img/LT.png");
}
#MLNLPDS {
    background-image: url("../img/NLP.png");
    /* background-image: url("../img/MARKUP.gif"); */
}
#LW {
    background-image: url("../img/LW.jpg");
}
#LA {
    background-image: url("../img/LA.jpg");
}
#TOOLS {
    background-image: url("../img/MARKUP.gif");
    /* background-image: url("../img/CP.jpg"); */

}



div.pie {
  background-color: var(--clr-fondoGris);
}
    div.pie:hover {
        background-color: var(--clr-fondoPie-hover);
        transition: all ease-out 1.5s;
    }
    div.pie:not( :hover ){
        transition: all ease-out 1.5s;
    }

div.pie h1, div.pie h2, div.pie h3 {
    color: var(--clr-letra);

    font-weight: 300;
    text-transform: uppercase;
}
div.pie h3 {
    font: 100 1.25rem/1.1 sans-serif;
}
div.pie a {
    line-height: 0.1em; /* comprime el interlineado dentro de un párrafo */
    color: var(--clr-fondoGris-letra);
}



.grid-container {
    display: grid;
    grid-template-columns: auto 45vw auto;
    grid-gap: 10px;

    padding: 20px;
    border-bottom: 2px solid gray;

    text-align: center;
    color: var(--clr-letra);
}
.grid-container>div:nth-child(2) {
    border-left: 1px dotted gray;
    border-right: 1px dotted gray;
}





.menu {
    /*
    position: fixed;
    left: 0;
    top: 0;    
    */
    width: 100%;
    
    background-color: var(--clr-fondoGris);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2vw;
    text-transform: uppercase;
}
  .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
  }
    .menu li {
        float: left;
    }
    .menu li.apart {
        float: right;
    }
        .menu li a {
            display: block;
            padding: 7px 12px;

            text-decoration: none;
            text-align: center;
            color: var(--clr-letra);
        }
            .menu li a:hover {
                background-color: var(--clr-fondoGris-hover);
            }

  .menu .active {
      background-color: var(--clr-fondoGris-hover);
  }





/* etiqueta NEW UPDATE etc.. */
.attentiontag {
    padding: 1px 3px 2px;
    margin: 0 5px;

    font-size: 9.75px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;

    color: white;
    background-color: black;
    border-radius: 3px;
}
.attentiontag.new {
    background-color: #6e0000;
}
.attentiontag.recommended {
    background-color: #446e00;
}


img.inline {
    width: 1em;
    margin-left: 5px;
}