@font-face {
    /* latin */
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 200 700;
    font-display: swap;
    src: url('/style/white/font/Oswald/Oswald-VariableFont_wght.woff2') format('woff2'),
        url('/style/white/font/Oswald/Oswald-VariableFont_wght.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    /* latin */
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/style/white/font/Jost/Jost-VariableFont_wght.woff2') format('woff2'),
        url('/style/white/font/Jost/Jost-VariableFont_wght.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;    
}
@font-face {
    /* latin */
    font-family: 'Jost';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/style/white/font/Jost/Jost-Italic-VariableFont_wght.woff2') format('woff2'),
        url('/style/white/font/Jost/Jost-Italic-VariableFont_wght.ttf') format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Common */
:root{
    --negro: #000;
    --blanco: #fff;
    --rojo: #db3535;
    --amarilloClaro: #fff3c6;
    --naranja: #ffce5b;
    --gris: #666666;
    --grisMedioClaro: #919191;
    --grisClaro: #cccccc;
    --fuenteJost: 'Jost', serif; /* weight: 100 a 900 y Italic */
    --fuenteBangers: 'Bangers', system-ui; /* weight: 400 */
    --fuenteOswald: 'Oswald', serif; /* weight: 200 a 700 */
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
html{
    font-size: 62.5%;
    cursor:default;
    width: 100%;
    height: 100%;
}
body{
    font-family: var(--fuenteJost);
    font-weight: 300;
    font-size: 2.1rem;
    color: var(--negro);
}
a, a:hover, a:visited{
    color: var(--negro);
    outline:0;
    word-wrap: break-word;
}
ul,ol{
    list-style: none;
}
main{
    width: 36rem;
    margin: 0 auto;
}
/* Header */
.header{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
.headerLogo{
    font-family: var(--fuenteJost);
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: 0.4rem;
    padding: 2rem 1rem 2rem 1rem;    
}
.headerLogo > .headerLogo1{
    color: #e51a1a;
    text-shadow: 0 0 0.1rem black, 0 0 0.1rem black, 0.2rem 0.2rem 0.2rem black;
    /* text-shadow: -0.1rem -0.1rem 0.4rem #4d4d4d, 0.2rem 0.1rem 0.2rem var(--negro); */
}
.headerLogo > .headerLogo2{
    color: #f6f6f6;
    text-shadow: 0.1rem 0.1rem 0.3rem black, 0rem 0rem 0.2rem black;
    /*text-shadow: -0.1rem -0.1rem 0.4rem #a9a9a9, 0.1rem 0.1rem 0.2rem #333;*/
}
/* Navbar (Header) */
.headerNav{
    border-top: 0.1rem solid var(--grisClaro);
    font-family: var(--fuenteOswald);
}
.modalHeaderNav{
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    z-index: 99;
    width: 100vw;
    height: 100vh;
    overflow: scroll;
    background-color: rgba(0,0,0,0.8);
}
.modalHeaderNav > ul{
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: center;
    background-color: var(--blanco);
}
.headerNav li > ul > li{
    margin-left: 2.8rem;
}
#botonMenuHeaderNav:checked ~ div{
    font-size: 2.4rem;
    display: block;
}
.botonMenuHeaderNav{
    border: 0.1rem solid var(--negro);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 110;
    padding: 0.4rem 1.2rem;
    border-radius: 1rem;
    background-color: rgba(0,0,0,.6);
    color: var(--blanco);
    box-shadow: 0 0 0.1rem var(--blanco), 0 0 0.2rem var(--blanco), 0.1rem 0.1rem 0.8rem var(--negro);
    padding-bottom: 0.6rem;
    font-weight: bold;
    text-shadow: 0 0 0.2rem var(--negro), 0 0 0.3rem var(--negro);
    transition: all 0.4s;
}
.cerrarCat ~ ul{
    display: none;
}
.cerrarCat:checked ~ ul{
    display: block;
}
.headerNav input{
    display: none;
}
.headerNav label{
    cursor: pointer;
}
.headerNav li > label{
    display: inline-block;
    padding: 0.8rem 0;
    color: var(--gris);
    background-color: var(--blanco);
}
.headerNav li > a{
    display: inline-block;
    padding: 0.8rem 1.6rem;
    color: var(--gris);
    background-color: var(--blanco);
    transition: background-color 0.1s linear;
}
.headerNav li > a:hover{
    transition: color 0.5s;
}
.headerNav li > a:hover > label:after{
    transition: background-color 0.3s linear, color 0.5s;
}
.headerNav li > a:hover, .headerNav li > a:hover > label:after{
    background-color: var(--grisClaro);
    color: var(--negro);
}
.headerNav li > a > label:after{
    content: '\276F';
    font-size: 1.6rem;
    color: var(--gris);
    margin-left: 2rem;
    margin-right: 1rem;
}
.lupaHeaderNav svg{
    width: 3.4rem;
    height: 3.4rem;
}
/* Footer */
.footer{
    border-top: 0.1rem solid var(--grisClaro);
    font-family: var(--fuenteOswald);
    font-size: 1.8rem;
    margin-top: 6rem;
    padding: 0.2rem 0;
}
.footer ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 2rem;
    gap: 2rem;
}
.footer > div{
    margin: 2rem;
    text-align: center;
}
/* Contenido del articulo */
.articulo{
    word-break: break-word;
}
.articulo a{
    color: #0059a1;
    font-weight: 300;
}
.articulo a:hover{
    text-decoration: underline;
}
.articulo h1,
.articulo h2,
.articulo h3,
.articulo h4,
.articulo h5{
    font-family: var(--fuenteOswald);
    font-weight: 500;
    color: var(--naranja);
    text-shadow: 0.2rem 0.2rem 0.5rem black, 0.1rem 0.1rem 0.3rem black, 0rem 0rem 0.2rem black;
}
.articulo h1{
    font-size: 4rem;
    padding: 4rem 0 4rem 0;
}
.articulo h2{
    font-size: 3.6rem;
    padding: 5rem 0 2rem 0;
}
.articulo h3{
    font-size: 3.3rem;
    padding: 5rem 0 2rem 0;
}
.articulo h4{
    font-size: 3rem;
    padding: 5rem 0 2rem 0;
}
.articulo h5{
    font-size: 2.8rem;
    padding: 5rem 0 2rem 0;
}
.articulo p{
    padding: 2rem 0;
    line-height: 3.2rem;
}
.articulo em{
    color: rgba(0,0,0,0.66);
    font-weight: 500;
}
.articulo strong, .articulo b{
    color: rgba(0,0,0,0.7);
    font-weight: 600;
}
.articulo ul{
    margin: 1rem 0rem 1rem 2.4rem;
    padding: 0;
    list-style-type: disc;
    list-style-position: inside;
}
.articulo ul > li > p{
    display: inline;
}
.articulo ol{
    margin: 0rem 4rem;
    padding: 0;
    list-style-type: symbols;
    list-style-position: inside;
}
.articulo ul > li, .articulo ol{
    padding: 1rem 0rem;
}
.articulo blockquote{
    margin: 2rem;
    padding:1.2rem 3rem 1.2rem 4rem;
    border-left:1rem solid var(--rojo);
    background: rgba(0,0,0,0.1);
    position: relative;
}
.articulo blockquote::before{
    font-family: var(--fuenteOswald);
    content: "\201C";
    color: var(--rojo);
    font-size:6rem;
    position: absolute;
    left: 1rem;
    top: -1rem;
}
.teclado{
    padding: 0 0.8rem 0 0.8rem;
    border: 0.2rem solid rgba(0,0,0,.06);
    background-color: rgba(0,0,0,0.05);
    box-shadow: 0 0.2rem 0 rgba(0,0,0,0.25),0 0 0 0.1rem #FFF inset;
    border-radius: 0.3rem;
    font-weight: 400;
    color: rgba(0,0,0,0.9);
    display: inline-block;
    text-shadow: 0.1rem 0.1rem 0 white;
    white-space: nowrap;
}
.textoRojo{
    color: var(--rojo);
}
.cluster{
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: start;
    flex: 0 1 auto;
    gap: 6rem;
    margin: 2rem 0;
}
.cluster > article{
    flex-basis: 100%;
}
.cluster figure > img{
    width: 100%;
    height: auto;
    display: block;
    border: 0.1rem solid rgba(0,0,0,.1);
}
.cluster figcaption{
    display: flex;
    flex-flow: column nowrap;
}
.cluster h3{
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--negro);
    text-shadow: none;
    padding: 0rem;
}
.cluster h4{
    font-family: var(--fuenteJost);
    font-size: 1.7rem;
    font-weight: 300;
    color: rgba(0,0,0,0.7);
    text-shadow: none;
    padding: 1rem 0;
    padding: 0rem;
}
.cluster a:hover{
    text-decoration: none;
}
.clusterRelacionadas{
    display: flex;
    flex-flow: row wrap;
    justify-content: left;
    align-items: start;
    flex: 0 1 auto;
    gap: 6rem;
    margin: 2rem 0;
}
.clusterRelacionadas > article{
    flex-basis: 100%;
}
.clusterRelacionadas figure > img{
    width: 100%;
    height: auto;
    display: block;
    border: 0.1rem solid rgba(0,0,0,.1);
}
.clusterRelacionadas figcaption{
    display: flex;
    flex-flow: column nowrap;
}
.clusterRelacionadas h4{
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--negro);
    text-shadow: none;
    padding: 0rem;
}
.clusterRelacionadas h5{
    font-family: var(--fuenteJost);
    font-size: 1.7rem;
    font-weight: 300;
    color: rgba(0,0,0,0.7);
    text-shadow: none;
    padding: 1rem 0;
    padding: 0rem;
}
.clusterRelacionadas a:hover{
    text-decoration: none;
}
.paginacion{
    margin-top: 4rem;
}
.paginacion > ul{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;
    list-style: none;
    margin: 4rem 0 0 0;
    font-family: var(--fuenteJost);
    font-weight: 400;
}
.paginacion > ul > li{
    color: var(--black);
    background-color: #f0f2f4;
    border-radius: 1.6rem;
    border: 0.1rem solid #e6e9ea;
}
.paginacion > ul > li.paginacionActivo{
    padding: 1rem 1.9rem;
}
.paginacion > ul > li > a{
    padding: 1rem 1.9rem;
    color: var(--negro);
    font-weight: 400;
    border-radius: 1.6rem;
    transition: background-color 0.5s;
}
.paginacion > ul > li > a:hover{
    text-decoration: none;
    background-color: #e6e9ea;
    transition: background-color 0.1s;
}
.paginacion .paginacionActivo{
    background-color: #1a5cff;
    color: var(--blanco);
    border: none;
}
.paginacion > div{
    text-align: center;
    margin-top: 1.6rem;
    font-size: 1.6rem;
}
.fotos{
    text-align: center;
    padding: 1rem 0;
}
.fotos > div{
    border: 0.1rem solid rgba(0,0,0,.15);
    border-radius: 0.4rem;
    box-shadow: 0 0 1rem rgba(0,0,0,.2);
    display: inline-block;
}
.fotos a{
    display:block;
    padding: 1rem;
}
.fotos a:hover{
    text-decoration: none;
}
.fotos img{
    display:block;
    margin: 0 auto;
    height: auto;
    max-width: 100%;
}
.fotos figcaption{
    border-top: 0.1rem solid rgba(0,0,0,.1);
}
.fotos figcaption > div:first-child, .fotos figcaption > div:last-child{
    font-weight: 400;
    color: var(--negro);
    text-shadow: none;
    padding: 0rem;
    display: block;
}
.fotos figcaption > div:first-child{
    font-size: 2.2rem !important;
    margin-top: 1rem;
}
.fotos figcaption > div:last-child{
    font-family: var(--fuenteJost);
    font-size: 1.8rem !important;
    font-weight: 300;
    color: rgba(0,0,0,0.7);
    text-shadow: none;
    padding: 1rem 0;
    padding: 0rem;
}
.menInfo, .menExito, .menAlerta, .menError {
    border: 0.1rem solid;
    margin: 4rem 0 !important;
    padding: 1.4rem !important;
    border-radius: 0.4rem;
}
.menInfo{
    border-color: #000064;
    color: #000064;
    background-color: #BDE5F8;
}
.menExito{
    border-color: #4F8A10;
    color: #4F8A10;
    background-color: #DFF2BF;
}
.menAlerta{
    border-color: #9F6000;
    color: #9F6000;
    background-color: #FEEFB3;
}
.menError{
    border-color: #BE0000;
    color: #BE0000;
    background-color: #FFBABA;
}
.entradasRelacionadas{
    color: var(--grisClaro) !important;
    margin-top: 2rem;
    font-size: 3rem !important;
}
.autor{
    border-top: 0.1rem solid rgba(0,0,0,.1);
    margin-top: 2rem;
}
.autor a{
    color: var(--gris);
}
.fechaPost{
    font-size: 1.8rem;
    color: var(--gris);
}
.faqs{
    margin-top: 2rem;
}
.faqs h3, .faqs h4, .faqs h5, .faqs h6{
    font-weight: 500;
    color: var(--gris);
    text-shadow: none;
    margin-top: 1rem;
    border: 0.1rem solid rgba(0,0,0,.3);
    background-color: rgba(0,0,0,.05);
    padding: 1rem;box-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,.2);
}
.faqs h3::before, .faqs h4::before, .faqs h5::before, .faqs h6::before{
    content: "\002B";
    padding: 0 1rem;
    width: 1rem;
    color: var(--naranja);
    text-shadow: 0rem 0rem 0.2rem black, 0rem 0rem 0.1rem black, 0rem 0rem 0.1rem black, 0rem 0rem 0.1rem black, 0rem 0rem 0.1rem black;
    font-size: 2.6rem;
}
.faqs h3{
    font-size: 2.3rem;
}
.faqs h4{
    font-size: 2.2rem;
}
.faqs h5{
    font-size: 2.1rem;
}
.faqs h6{
    font-size: 2rem;
}
.faqs input{
    display: none;
}
.faqs input ~ div{
    height: 0;
    overflow: hidden;
    transform: scaleY(0);    
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
    background-color: rgba(0,0,0,.005);
}
.faqs input:checked ~ div{
    height: auto;
    transform: scaleY(1);
    border-right:  0.1rem solid rgba(0,0,0,.2);
    border-bottom: 0.1rem solid rgba(0,0,0,.2);
    border-left: 0.1rem solid rgba(0,0,0,.2);
    box-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,.2);
}
.faqs input:checked ~ label > h3::before, .faqs input:checked ~ label > h4::before, .faqs input:checked ~ label > h5::before, .faqs input:checked ~ label > h6::before{
    content: "\2212";
    padding: 0 1rem;
    width: 1rem;
}
.faqs p{
    padding: 1rem 2rem;
    line-height: 3.2rem;
}
@media screen and (min-width:480px){
/* Common */
main{
    width: 46rem;
}
/* Header */
.headerLogo{
    font-size: 2.6rem;
}
}
@media screen and (min-width:768px){
/* Common */
main{
    width: 72rem;
}
/* Header */
.headerLogo{
    font-size: 4rem;
}
/* Contenido del articulo */
.articulo h1{
    font-size: 5.2rem;
}
.articulo h2{
    font-size: 4.2rem;
}
.articulo h3{
    font-size: 3.8rem;
}
.articulo h4{
    font-size: 3rem;
}
.articulo h5{
    font-size: 2.6rem;
}
.articulo ul{
    margin: 1rem 4rem;
}
.cluster{
    gap: 2.8rem;
}
.cluster > article{
    flex-basis: 50%;
    flex-basis: calc(50% - 1.4rem);
}
.cluster h3{
    font-size: 2.2rem;
}
.cluster h4{
    font-size: 1.8rem;
}
.clusterRelacionadas{
    gap: 2.8rem;
}
.clusterRelacionadas > article{
    flex-basis: 50%;
    flex-basis: calc(50% - 1.4rem);
}
.clusterRelacionadas h4{
    font-size: 2.2rem;
}
.clusterRelacionadas h5{
    font-size: 1.8rem;
}
}
@media screen and (min-width:1024px){
/* Common */
main{
    width: 86rem;
}
/* Navbar (Header) */
.headerNav{
    position: relative;
    border-bottom: 0.1rem solid var(--grisClaro);
}
#botonMenuHeaderNav ~ div{
    display: block;
}
.botonMenuHeaderNav{
    display: none;
}
.modalHeaderNav{
    display: block;
    position: relative;
    width: auto;
    height: auto;
    overflow: unset;
}
.modalHeaderNav > ul{
    display: flex;
    flex-flow: row nowrap;
}
.headerNav li > a > label:after{
    margin-left: 1rem;
    margin-right: 0;
}
.headerNav li > ul > li{
    margin-left: 0;
    position: relative;
}
.headerNav ul > li:hover > ul{
    position: absolute;
    display: flex;
    flex-flow: column nowrap;
    border: 0.1rem solid var(--grisClaro);
}
.headerNav li > ul > li > ul{
    position: absolute;
    top: -0.1rem;
    left: 100%;
    white-space: nowrap;
}
.cerrarCat:checked ~ ul{
    display: none;
}
.lupaHeaderNav{
    margin-left: 4rem;
}
.lupaHeaderNav:hover a{
    background-color: var(--blanco) !important;
}
.lupaHeaderNav svg{
    width: 2.4rem;
    height: 2.4rem;
}
/* Contenido del articulo */
.cluster{
    gap: 3.8rem;
}
.cluster > article{
    flex-basis: calc(32.7% - 2rem);
}
.cluster figure > img{
    width: 26.1217rem;
}
.clusterRelacionadas{
    gap: 3.8rem;
}
.clusterRelacionadas > article{
    flex-basis: calc(32.7% - 2rem);
}
.clusterRelacionadas figure > img{
    width: 26.1217rem;
}
}