@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    --fontFamily:Arial, Helvetica, sans-serif;
    --fontSize:14px;
    --bgPrimary:#223F8F;
    --bgSecondary:#132557;
    --clSecondary:#b1cae3;
    --clTercer:#ffffff;
    --clText:#003399;
}
@media screen and (width < 540px){
    :root{
        --fontSize:16px;
    }
}

body{
    display:grid;
    grid-template-rows:auto 1fr auto;
    font-family:var(--fontFamily);
    font-size:var(--fontSize);
    color:#003399;
    -webkit-font-smoothing:subpixel-antialiased;
    -webkit-text-size-adjust:none;
}

*:focus, *:focus-visible{
    outline:none;
}
header{
    width: 100%;
    max-width: 1024px;
    margin: 10px auto 0 auto;
    height:fit-content;
    box-shadow:
    -10px 0px 0px rgba(0, 0, 0, 0.1),  /* izquierda */
    10px 0px 0px rgba(0, 0, 0, 0.1);  /* derecha */
    border-radius: 10px 10px 0px 0px;
    & .headerBanner{
        width:100%;
        height:100px;
        position:relative;
        background:linear-gradient(90deg, #015cab 0%, #e5f3ff 40%, #ffffff 50%, #e5f3ff 60%, #015cab 100%);
        overflow:hidden;
        & .headerBanner__bg{
            width:500px;
            position:absolute;
            top:-20px;
            left:50%;
            transform:translateX(-50%);
            filter:drop-shadow(3px 3px 5px rgba(0 0 0 /10%));
        }
        & .headerBanner__content{
            width:100%;
            height:100%;
            position:absolute;
            display:flex;
            justify-content:space-between;
            align-items:center;
            & .headerBanner__content__block{
                width:33.3333%;
                display:flex;
                height:100%;
                &:nth-child(1){
                    justify-content:flex-start;
                    align-items:center;
                    & .headerBanner__box{
                        margin-left:30px;
                        padding:15px 25px;
                        background:rgba(255 255 255/ 25%);
                        color:#ffffff;
                        border-radius:10px;
                        font-size:1.3rem;
                        text-shadow:2px 4px 4px rgba(0 0 0 /25%);
                    }
                }
                &:nth-child(2){
                    justify-content:center;
                    align-items:center;
                    & .headerBanner__logo{
                        height:95%;
                    }
                }
                &:nth-child(3){
                    justify-content:flex-end;
                    align-items:flex-start;
                    & .headerBanner__date{
                        padding:10px;
                        font-size:9px;
                        color:#ffffff;
                    }
                }
            }
        }
    }
    & .headerNav{
        width:100%;
        height:25px;
        display:flex;
        justify-content:center;
        align-items:center;
        background:linear-gradient(#3e7abb 0%, #ffffff 40%, #ffffff 60%, #3e7abb 100%);
        & .headerNav__button{
            padding-inline:10px;
            color:#223F9A;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            font-size:11px;
            font-weight:bold;
            text-decoration:none;
        }
    }
    & #buttonNav{
        display:none;
    }
    & .buttonNav{
        display:none;
    }

    @media screen and (width < 540px){
        position:sticky;
        top:0px;
        left:0px;
        z-index:100;
        box-shadow:none;
        margin: auto;
        & .headerBanner{
            background:linear-gradient(90deg, #e5f3ff 5%,  #e5f3ff 60%, #015cab 100%);;
            & .headerBanner__content{
                & .headerBanner__content__block:nth-child(1){
                    width:calc(100% - 90px);
                    height:100%;
                    position:absolute;
                    left:80px;
                    top:0px;
                    order:2;
                    & .headerBanner__box{
                        margin-left:0px;
                        background:transparent;
                        & p{
                            font-size:1.2rem;
                            color:#003399;
                            text-shadow:none;
                        }
                    }
                }
                & .headerBanner__content__block:nth-child(2){
                    width:80px;
                    order:1;
                }
                & .headerBanner__content__block:nth-child(3){
                    display:none;;
                    /* width:calc(100% - 90px);
                    height:auto;
                    position:absolute;
                    left:90px;
                    bottom:0%;
                    order:2;
                    & .headerBanner__date{
                        font-size:.8rem;
                    } */
                }
            }
        }
        & .headerBanner__bg{
            opacity:.25;
        }
        & .headerNav{
            width:100%;
            height:calc(100dvh - 100px);
            position:fixed;
            top:100dvh;
            flex-direction:column;
            transition:top .3s ease-in-out;
            & .headerNav__button{
                width:90%;
                height:40px;
                margin-block:10px;
                font-size:1rem;
                text-align:center;
            }
        }
        & .buttonNav{
            width:40px;
            height:40px;
            position:fixed;
            top:30px;
            right:10px;
            display:flex;
            justify-content:center;
            align-items:center;
            background:rgba(255 255 255/ 10%);
            border-radius:50%;
            cursor:pointer;
            transition:all .2s ease-in-out;
            & div{
                width:18px;
                height:2px;
                position:absolute;
                background:#ffffff;
                &::before, &::after{
                    content:'';
                    width:18px;
                    height:2px;
                    position:absolute;
                    background:inherit;
                    transition:all .2s ease-in-out;
                }
                &::before{
                    top:-5px;
                }
                &::after{
                    top:5px;
                }
            }
        }
    }
}

#buttonNav:checked ~ .buttonNav{
    background:rgba(255 255 255/ 25%);
}
#buttonNav:checked ~ .buttonNav div{
    transform:rotate(45deg);
    &::before{
        top:0px;
    }
    &::after{
        top:0px;
        transform:rotate(-90deg);
    }
}
#buttonNav:checked ~ .headerNav{
    top:100px;
}

main{
    max-width:1024px;
    width:calc(100% - 20px);
    /* margin-block:15px; */
    margin-inline:auto;
    box-shadow:
    -10px 0px 0px rgba(0, 0, 0, 0.1),  /* izquierda */
    10px 0px 0px rgba(0, 0, 0, 0.1);  /* derecha */
    background-color:#005cab;
    /* border-radius:10px; */
    &.mainClear{
        width:100%;
        background:#ffffff;
        & .content{
            box-shadow:none;
        }
        @media screen and (width < 540px){
            & .content{
                width:100%;
                margin-block:0px;
            }
        }
    }
}

.content{
    width:90%;
    margin-block:30px;
    margin-inline:auto;
    padding:20px;
    background:#ffffff;
    border-radius:10px;
    box-shadow:6px 6px 4px 0px rgba(0 0 0 /25%);
    font-size:13px;
    & .contentBar{
        width:100%;
        height:21px;
        margin-bottom:1rem;
        position:relative;
        display:flex;
        justify-content:flex-start;
        align-items:center;
        gap:15px;
        & a{
            padding-left:.9rem;;
            display:block;
            position:relative;
            color:#003399;
            &::before{
                content:"";
                width:8px;
                height:2px;
                position:absolute;
                top:3px;
                left:0px;
                background:#ee831b;
                transform:rotate(35deg);
            }
            &::after{
                content:"";
                width:8px;
                height:2px;
                position:absolute;
                top:7px;
                left:0px;
                background:#ee831b;
                transform:rotate(-35deg);
            }
            & p{
                font-size:.7rem;
                font-weight:600;
            }
        }
        & .contentBar__print{
            width:150px;
            height:23px;
            position:absolute;
            top:-20px;
            right:-20px;
            background:linear-gradient(#ffffff, #eaf4f6);
            border:none;
            border-radius:0px 12px 0px 23px;
            box-shadow:2px 2px 4px 1px rgba(0 91 171 / 35%);
        }
    }
    & .contentBlock__text{
        margin-bottom:2rem;
    }
    & .contentBlock{
        & .contentBlock__title{
            margin-bottom:15px;
            position:relative;
            &::before{
                content:url('../images/bulletTit.png');
                width:14px;
                height:14px;
                position:absolute;
                top:50%;
                left:0;
                transform:translateY(-50%);
            }
            & h1{
                margin-left:20px;
                font-size:1.5em;
                font-weight:300; 
            }
        }
    }
    & .contentBlock__section{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        gap:15px;
        & .contentBlock__section__text{
            width:calc(100% - 250px);
            line-height:135%;
            text-align:justify;
            text-justify:inter-word;
        }
        & .contentBlock__section__imag{
            width:250px;
            aspect-ratio:4/2.6;
            border:1px solid #000000;
            & img{
                width:100%;
                height:100%;
                object-fit:cover;
            }
        }
        @media screen and (width < 540px){
            flex-direction:column-reverse;
            & .contentBlock__section__text{
                font-size:1rem;
            }
            & .contentBlock__section__imag{
                width:100%;
            }
            & .contentBlock__section__text{
                width:100%;
                font-size:1rem;
            }
        }
    }
    & .contentBlock__items{
        & .contentBlock__item{
            & h2{
                font-size:1.1em;
            }
            & .contentBlock__item__topic{
                margin-bottom:2rem;
                padding:20px 10px 20px 30px;
                position:relative;
                & h3{
                    font-size:1.1em;
                    margin-bottom:10px;
                }
                & p{
                    color:#666666;
                }
                & .legisDownload{
                    position:absolute;
                    right:0px;
                    font-size:.72rem;
                    font-weight:600;
                    text-decoration:underline;
                    color: #003399;
                    & img{
                        margin-left:.5rem;
                    }
                }
            }
        }
    }
    & .contentBlock__point{
        margin-bottom:3em;
        display:flex;
        justify-content:flex-start;
        align-items:flex-start;
        gap:10px;
        & .contentBlock__item__num{
            text-transform:lowercase;
            display:inline-block;
        }
        & p{
            display:inline-block;
        }
    }
    & .contentBlock__section__points{
        display:flex;
        justify-content:flex-start;
        align-items:flex-start;
        gap:15px;
        & .contentBlock__items{
            width:calc(100% - 300px);
        }
    }
    & .asideBlock{
        width:300px;
        & img{
            width:100%;
            height:100%;
            object-fit:contain;
        }
    }
    & .contentAsk{
        border:1px solid #cccccc;
        & .contentAsk__box{
            width:100%;
            padding:10px;
            border-bottom:1px solid #cccccc;
            &:nth-child(even){
                background:#f7f7f7;
            }
            &:nth-child(odd){
                background: #ffffff;
            }
            &:last-child{
                border-bottom:none;
            }
            h4{
                margin-bottom: 0.8em;
            }
            p{
                margin-bottom: 1em;
                font-size: 0.9em;
                line-height: 130%;
            }
        }
    }
    & .contentLinks{
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(45%, 1fr));
        gap:15px;
        & .contentLink__link{
            min-width:200px;
            display:flex;
            justify-content:flex-start;
            align-items:center;
            flex-flow:row wrap;
            gap:15px;
            & .contentLink__link__img{
                width:86px;
                & img{
                    width:100%;
                    height:100%;
                    object-fit:contain;
                }
            }
            & .contentLink__link__text{
                width:calc(100% - 86px - 15px);
                color:#666666;
                & a{
                    color:#223F9A;
                    font-size:.85em;
                    font-weight:600;
                    text-decoration:underline;
                    &:hover{
                        color:#00A6E9;
                    }
                }
            }
        }
    }
    & .contentIndex{
        display:flex;
        justify-content:center;
        align-items:flex-start;
        flex-flow:row wrap;
        & .contentIndex__login{
            width:250px;
            padding:0px 15px 15px;
            & .contentIndex__login__box{
                width:100%;
                padding:30px 25px 60px;
                position:relative;
                display:flex;
                justify-content:center;
                align-items:center;
                background-color:#005bab;
                border:5px solid #ffffff;
                box-shadow:2px 2px 4px 1px rgba(0 91 171 / 35%);
                border-radius:12px;
                & .contentIndex__login__box__background{
                    width:220px;
                    position:absolute;
                    opacity:.25;
                    transform:rotate(345deg) translateX(-5%);
                    & img{
                        width:100%;
                        height:100%;
                        object-fit:contain;
                    }
                }
                & a{
                    padding:10px 15px;
                    position:absolute;
                    background:linear-gradient(#0162ac, #8ec2e9, #0162ac, #469ddf);
                    border:2px solid #005bab;
                    border-radius:10px;
                    box-shadow:
                        inset 0px 4px 2px -2px rgba(255 255 255/ 80%),
                        inset 0px -4px 2px -2px rgba(0 0 0 /40%);
                    transform:translateY(20%);
                    & p{
                        text-transform:uppercase;
                        color:#ffffff;
                        font-size:.75rem;
                        font-weight:700;
                    }
                    &:hover{
                        border-color:#ffffff;
                    }
                }
            }
            & .contentIndex__login__buttons{
                margin-block:30px;
                display:flex;
                justify-content:space-around;
                align-items:center;
                flex-flow:row wrap;
                & a{
                    max-width:80px;
                    &:first-child{
                        width:50px;
                    }
                    & img{
                        width:100%;
                        height:100%;
                        object-fit:contain;
                    }
                }
            }
        }
        & .contentBlock{
            width:calc(100% - 250px);
            padding:10px;
            box-shadow:2px 2px 4px 1px rgba(0 91 171 / 35%);
            border-radius:12px;
            & p{
                margin-bottom:1rem;
            }
            & .contentBlock__section__imag{
                & img{
                    width:100%;
                    height:100%;
                    object-fit:contain;
                }
            }
            & .contentBlock__section__text{
                width:100%;
                min-width:300px;
                & img{
                    max-width:140px;
                    padding:15px;
                    float:left;
                }
            }
            & .contentBlock__buttons{
                margin:20px 0px;
                display:flex;
                justify-content:space-between;
                align-items:center;
                & a{
                    color:#005bab;
                    font-size:.75rem;
                    font-weight:600;
                    &:hover{
                        color:#00A6E9;
                        text-decoration:underline;
                    }
                }
            }
        }
    }
    & .contentObjetivos{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:flex-start;
        gap:15px;
        & .contentBlock__section__text{
            width:calc(100% - 300px);
        }
        & .contentBlock__section__imag{
            width:300px;
            & img{
                width:100%;
                height:100%;
                object-fit:contain;
            }
        }
    }
    @media screen and (width < 540px){
        font-size:1rem;
        & .contentIndex{
            flex-direction:column-reverse;
            gap:15px;
            font-size:1rem;
            & .contentIndex__login{
                width:100%;
                & .contentIndex__login__buttons{
                    & a{
                        max-width:160px;
                    }
                    & a:first-child{
                        width:80px;
                    }
                }
            }
            & .contentBlock{
                width:100%;
                & .contentBlock__section{
                    font-size:1rem;
                }
            }
        }
        & .contentBlock{
            & .contentBlock__text{
                font-size:1rem;
            }
        }
        & .contentBlock__section__points{
            flex-direction:column;
            & .contentBlock__items{
                width:100%;
            }
            & .asideBlock{
                width:100%;
            }
        }
        & .contentLinks{
            grid-template-columns:repeat(auto-fill, minmax(100%, 1fr));
            row-gap:2rem;
        }
        & .contentAsk{
            font-size:1rem;
        }
        & .contentObjetivos{
            flex-direction:column-reverse;
            & .contentBlock__section__text{
                width:100%;
            }
            & .contentBlock__section__imag{
                width:100%;
            }
        }
    }
}


footer{
    width: 100%;
    max-width: 1024px;
    margin: 0px auto 10px auto;
    height:70px;
    color:#223F9A;
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    text-align:center;
    box-shadow:
    -10px 0px 0px rgba(0, 0, 0, 0.1),  /* izquierda */
    10px 0px 0px rgba(0, 0, 0, 0.1);  /* derecha */
    border-radius: 0px 0px 10px 10px;
    @media screen and (width < 540px){
        font-size:.8rem;
    }
    & .footerContent {
        margin-top: 10px;
    }

    @media screen and (width < 540px){
        box-shadow:none;
    }

}