:root{
    --blue: #1a3a5f;
        --yellow: #ffcd00;
        --gray: #eee;
        --dark-green: #145d00;
}

body {
    margin: 0;
    padding: 0;
    background-color: #eee;
    overflow-x: hidden;
    scroll-behavior: smooth;
    transition: scroll 0.3s ease;
}

body::-webkit-scrollbar {
    display: none;
}

a{
    color: inherit;
    text-decoration: none;
}

* {
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
input{
    outline: none;
}



h1{
    padding-top: 0rem;
    max-width: max-content;
    color: var(--blue);
    /* margin: 5rem auto 2rem ; */
}

.content-simulator{
    width: 100%;
    width: clamp(200px, calc(100% - 2rem), 1200px);
    /* max-width: 1200px; */
    min-height: 200px;
    background-color: #fff;
    box-shadow: 0 0 15px -8px #000;
    border-radius: 15px;
    padding: 2rem ;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: hidden;
    margin: 7rem auto 0;
}
.content-simulator .container{
    
}

.content-simulator .container p{
    font-size: 1rem;
    font-weight:400;
    
}

.content-simulator .important{
    padding:1rem 1rem 2rem;
    border: solid 1px #fff2;
    margin: 2rem auto;
    border-radius: 15px;
    background-color: #fff1;
}


.content-discounts{
    padding: 0 1rem;
}

.franja{
    grid-column: 1 / 4;
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: repeat(3, max-content);
        font-size: 0.75rem;
        margin-top: 0.5rem;
        background: #0002;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        width: 100%;
        min-width: 100%;
        overflow-x: scroll !important ;
}

.franja > *{
    display: block;
    min-width: max-content;
    border-right: solid 1px #aaa;
    padding: 2px 5px;
}
.franja>* > :nth-child(1){
    color: #333;
    border: none;
}
.franja>*> :nth-child(2) {
    font-weight: 600;
}

.nominal-result{
    /* border: solid 1px; */
    border-radius: 10px;
    box-shadow: 0 0 15px -5px #000;
    margin: 1.5rem auto;
}

.content-discounts .nominal-result p{
    font-size: 1.75rem;
    /* border: solid 1px red; */
    text-align: center;
    color: var(--blue);
    padding: 1rem;
    font-weight: 700;
    margin: 0;
}

.nominal-result span{
    font-size: 0.9rem;
    /* border: solid 1px red; */
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 0.75rem;
}


.liquid-result {
    /* border: solid 1px; */
    border-radius: 10px;
    box-shadow: 0 0 15px -5px #000;
    margin: 1.5rem auto;
}

.content-discounts .liquid-result p {
    font-size: 1.75rem;
    /* border: solid 1px red; */
    text-align: center;
    color: var(--dark-green);
    padding: 1rem;
    font-weight: 700;
    margin: 0;
}

.liquid-result span {
    font-size: 0.9rem;
    /* border: solid 1px red; */
    display: block;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 0.75rem;
}
.content-simulator .inputs{
    padding-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

.content-simulator .inputs div{
    position: relative;
    padding-top: 0.7rem;
}

.content-simulator .inputs div span {
    color: #3d3d3d;
    position: absolute;
    border: none;
    font-size: 0.95rem;
    left: 10px;
    border-radius: 4px;
    top: 0rem;
    background-color: #fff;
    padding: 0 0.5rem;
}

.content-simulator .inputs div input {
    border: solid 1px #aaa;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size:1rem  ;
    padding: 0.75rem 1rem 0.5rem;
}


.bpc{
    background-color: #eee;
    border-radius: 10px 10px 0 0;
    padding: 0.5rem;
    margin: 5px 0;
    display: grid;
    grid-template-columns:max-content auto;
    grid-gap: 1rem;
}

.bpc > *{
    padding: 0.25rem;
    border-radius: 6px;
    background-color: #fff;
    font-size: 0.8rem;
}
 
 .content-simulator .nominal-amount {
    border-radius: 10px;
    box-shadow: 0 0 15px -5px #000;
    grid-column: 1/3;
    padding: 0.5rem;
    display: block;
 }
 .content-simulator .nominal-amount input{
    font-size: 1.75rem;
    border: none;
    border-bottom: solid 1px #aaa;
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    color: var(--blue);
    font-weight: 700;
    text-align: center;
 }

 .content-simulator .nominal-amount span{
    display: block;
    /* background-color: #ffcd00; */
    width: max-content;
    margin: 0.5rem auto;
    font-size: 0.9rem;
    color: #222;
 }


.content-simulator .hasChild{
    border: solid 1px #aaa;
    padding-bottom: 0.75rem 0;
    margin-top: 1.75rem;
    border-radius: 10px;
    grid-column: 1/3;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* max-width: max-content; */
    align-items: center;
}

.content-simulator > div:nth-child(1){
    background-color: var(--blue);
    margin: -2rem 0 -2rem -2rem ;
    padding: 2rem ;
}

.content-simulator>div:nth-child(1) > *{
    color: #fff;
}

.content-simulator .inputs .hasChild >span {
    position: absolute;
    padding: 0 0.5rem ;
    display: block;
    /* border: solid 1px; */
    top: -0.75rem ;
    background-color: #fff;
}

.content-simulator .inputs .hasChild > div {
    border:solid 1px #aaa;
    display: grid;
    grid-template-columns: max-content max-content;
    align-content: center;
    padding: 0.5rem 1rem ;
    border-radius:7px;
    margin:  0.25rem;
    grid-gap: 10px;
    text-align: center;
    place-content: center;
}


.content-simulator .calculator{
    margin-left: 2rem ;
}


.discount{
    border-bottom:solid 1px #aaa;
    display: grid;
    grid-template-columns:50% 25% 25%;
    padding: 0.5rem;
    margin-top:0;
}

#calculadoraIRPF .discount{
    border-bottom: solid 1px #eee;
}

#calculadoraDeIRPF .range-data {
    grid-column: 1/4;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-gap: 1rem;
    max-width: max-content;
    margin: 0 auto;
}

#calculadoraDeIRPF .range-data > span{
    background-color: #fff6;
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
    font-size: 0.8rem;
    border: solid 1px #0003;
}


#calculadoraDeIRPF .discount{
    padding: 0.5rem;
    position: relative;
    grid-template-columns: repeat(3, 1fr);
    border: none;
}
#calculadoraDeIRPF .discount .exceced,
#calculadoraDeIRPF .discount .range,
#calculadoraDeIRPF .discount .amount
{
    text-align: center;
    padding: 0;
}

#calculadoraDeIRPF .discount .exceced p,
#calculadoraDeIRPF .discount .range p,
#calculadoraDeIRPF .discount .amount p
{
    padding: 1rem 0 0.5rem;
    margin: 0;
    color: #000;
    font-size: 1rem;
}

#calculadoraDeIRPF .discount .exceced span,
#calculadoraDeIRPF .discount .range span,
#calculadoraDeIRPF .discount .amount span
{
    border-top: solid 1px #0004;
    font-size: 0.85rem;
    color: #333;
    padding: 0 0.75rem;
    display: block;
}


.content-results{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

.content-results > div{
    box-shadow: 0 0 15px -7px #000;
    padding: 1rem;

    margin-top: 1rem;
    border-radius: 10px;
}

.content-results> div p {
    margin: 1rem 0; 
    pad: 0;
    font-size: 1.5rem;
    color: var(--blue);
    font-weight: 600;
    text-align: center;
}
.cta{
    font-size: 1rem;
    display: block;
    margin: 1rem 0 auto auto;
    border: none;
    background-color: var(--yellow);
    color: var(--blue);
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 10px;
}

.container-others-simulators{
    width: clamp(200px, calc(100vw - 4rem), 1200px);
    margin: 2rem auto;
    background-color: #fff;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 0 15px -5px #000;
    margin-bottom:2rem;
}
.container-others-simulators>h2 {
    color: var(--blue);
    text-align: center;
}

.container-others-simulators>div{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
    border-radius: 15px;
    /* overflow: hidden; */
    align-items: center;
    place-items: center ;
    max-width: max-content;
    margin: 2rem auto ;
}

.container-others-simulators > div > a{
    background-color: #0002;
    padding: 2rem 3rem;
    text-align: center;
    background-color: var(--blue);
    color: var(--yellow);
    font-weight: 700;
    font-size: 1.1rem;
    width: 100%;
    transition: 0.3s ease-in-out;
}
.container-others-simulators>div>a:hover {
    transform: scale(1.03);
    box-shadow: 0 0 15px -10px #000;
}
.container-others-simulators>div>a:nth-child(1) {border-radius:10px 0 0 0;transform-origin: 100% 100%;}
.container-others-simulators>div>a:nth-child(2) {border-radius:0 10px 0 0;transform-origin: 0 100%;}
.container-others-simulators>div>a:nth-child(3) {border-radius:0 0 0 10px;transform-origin: 100% 0;}
.container-others-simulators>div>a:nth-child(4) {border-radius:0 0 10px 0;transform-origin: 0 0;}



.container-others-simulators>div>a:nth-child(2),
.container-others-simulators>div>a:nth-child(3),
.container-others-simulators>div>a:nth-child(6),
    .container-others-simulators>div>a:nth-child(7){
    background-color: var(--yellow);
    color: var(--blue);
}

.charts{
    min-width: 100vw;
    min-height: calc(100vh - 4rem);
}
.charts .container{
    width: clamp(200px, calc(100vw - 2rem), 1200px);
    margin: 2rem auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}
.charts .container article{
    padding: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px #0005;
    min-height:600px;
    overflow: hidden;
}




@media (width < 760px){
    input{
        width: 100%;
    }
    .content-simulator{
        grid-template-columns: 1fr;
        max-width: calc(100% - 2rem );
        padding: 1rem;
        width: clamp(200px, calc(100% - 2rem), 1200px) !important;
    }
        .content-discounts {
            padding: 0;
        }

    .content-simulator>div:nth-child(1) {
        background-color: var(--blue);
        margin: -2rem;
        padding: 2rem;
    }
    .calculator{
        margin-left: 0;
        margin: 3rem 0 0 0 !important;
        padding: 0;
    }

    .container-others-simulators {
        width: clamp(200px, calc(100vw - 2rem), 1200px);
        margin: 2rem auto;
        padding:1rem;
        border-radius: 20px;
        box-shadow: 0 0 15px -5px #000;   
    }

        .container-others-simulators >div>a{
            padding: 3rem 1rem;
            max-width: 100%;
        }

        .container-others-simulators>div>a:nth-child(1) {
            border-radius: 10px 0 0 0;
            transform-origin: 100% 100%;
        }

        .container-others-simulators>div>a:nth-child(2) {
            border-radius: 0 10px 0 0;
            transform-origin: 0 100%;
        }

        .container-others-simulators>div>a:nth-child(3) {
            border-radius: 0 0 0 10px;
            transform-origin: 100% 0;
        }

        .container-others-simulators>div>a:nth-child(4) {
            border-radius: 0 0 10px 0;
            transform-origin: 0 0;
        }

        .charts .container{
            grid-template-columns: 1fr;
        }

        #calculadoraDeIRPF .range-data>span{
            font-size: 0.7rem;
        }
}