/* ******************************************** */
/** Settings CONTENT
/* ******************************************** */

.s-content{
    font-size: 1.6rem;
    max-width: 1100px;
}

.s-content.u-center{
    margin-left: auto;
    margin-right: auto;
}

.s-content > *{
    margin-top: 1.4em;
    line-height: 1.7;
    color: rgb(var(--color-darkest-rgb)/80%);
}

.s-content > *:first-child{
    margin-top: 0;
}

.s-content h1,
.s-content h2,
.s-content h3,
.s-content h4,
.s-content h5,
.s-content h6{
    line-height: 1.2;
    font-weight: 700;
    margin-top: 3em;
}


.s-content h1,
.s-content h2{
    font-size: clamp(3.5rem,4.86vw,7.6rem);
    font-weight: 600;
    color: var(--color-secondary);
    margin-top: 1.4em;
}

.s-content h3{
    color: var(--color-primary);
    font-size: 1.9em;
    margin-top: 2em;
}

.s-content h4{
    font-size: 1.1em;
    color: var(--color-green);
}

.s-content h5{
    font-size: .9em;
    text-transform: uppercase;
}

.s-content h5{
    text-transform: uppercase;
    text-decoration: underline;
}

.s-content strong{
    font-weight: 600;
    color: var(--color-darkest);
}

.s-content span{
    color: var(--color-primary);
}


.s-content a{
    position: relative;
    color: var(--color-primary);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: underline;
}

.s-content a:before{
    content: "";
    display: block;
    width: 100%;
    min-width: var(--tap-size);
    height: var(--tap-size);
    min-height: var(--tap-size);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.s-content img, .s-content iframe {
    display: block;
    max-width: 100%;
    position: relative;
    margin-top: 2.2em;
}

.s-content img {
    margin-right: auto;
    margin-left: auto;
    height: auto !important;
}

.s-content:not(.c-check-list) li {
    position: relative;
    padding-inline-start: 20px;
    margin-top: 0.6em;
}

.s-content:not(.c-check-list) li:first-child {
    margin-top: 0;
}

html[dir="ltr"] .s-content:not(.c-check-list) ul > li:before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 0;
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background-color: var(--color-darkest);
}

html[dir="rtl"] .s-content:not(.c-check-list) ul > li:before {
    content: "";
    position: absolute;
    top: 0.5em;
    right: 0;
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background-color: var(--color-darkest);
}

.s-content ul ol{
    margin-top: 1em;
}

.s-content ol{
    counter-reset: section;
}

.s-content ol > li{
    counter-increment: section;
}

html[dir="ltr"] .s-content ol > li:before{
    content: counter(section)". ";
    position: absolute;
    color: var(--color-darkest);
    font-weight: 700;
    top: 2px;
    left: 0;
    font-size: 1em;
    margin-top: -2px;
}

html[dir="rtl"] .s-content ol > li:after{
    content: counter(section)". ";
    position: absolute;
    color: var(--color-darkest);
    font-weight: 700;
    top: 2px;
    right: 0;
    font-size: 1em;
    margin-top: -2px;
}

.s-content ol ul{
    margin-top: 1em;
}


/* ********************** Tablet to DESKTOP  ********************** */

@media (min-width: 980px) {


    /* :Intersactions */

    .s-content a:hover,
    .s-content a:focus{
        color: var(--color-hover);
        border-bottom: 2px solid var(--color-hover);
    }

}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    .s-content{
        font-size: 1.7rem;
    }
}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    .s-content{
        font-size: 1.9rem;
    }

}