@import url(/assets/css/bootstrap/bootstrap.css);
@import url(/assets/fonts/zenmarugothic/zenmarugothic.css);
@import url(/assets/css/krn-animations.css);
@import url(/assets/css/krn-colors.css);


body {
    padding: 0 1rem;
    /* background-color: #fafafa; */
    background-color: #ffffff;

}


/* Body BG */
.krn-body-dark {
    background-color: #a8acaf!important;
}
.krn-body-light {
    background-color: var(--krn-body-bg)!important;
}



/* Text selection */
::-moz-selection { background: rgba(var(--krn-primary-rgb), 0.35); }
::selection { background: rgba(var(--krn-primary-rgb), 0.35); }



/* Animations */
main.krn-main:not(.krn-animated) > * {
    animation-name: krn-animation-fadein-bottom;
    animation-duration: 500ms;
    animation-fill-mode: both;
}


/* Buttons and inputs */
.btn.btn-icon {
    padding: 1rem!important;
}
.btn.btn-icon.btn-sm {
    padding: 0.6rem!important;
}
.btn.btn-icon.btn-sm svg {
    width: 1.5rem;
}
.btn.btn-icon.btn-lg {
    padding: 2rem!important;
}
.btn.btn-icon.btn-lg svg {
    width: 1.5rem;
}
.krn-link {
    text-decoration: none;
    transition: all .2s var(--krn-transition-cubic);
}
.krn-link:hover {
    text-decoration: underline;
}
.form-switch.krn-switch-lg .form-check-input {
    width: 4rem;
    height: 2rem;
}
select option:checked {
    font-weight: bold;
    background-color: rgba(var(--krn-primary-rgb), 0.35);
}
.cursor-pointer {
    cursor: pointer!important;
}
.form-floating > .form-control:disabled ~ label::after {
    background-color: transparent!important;
}

/* Images */
img {
    pointer-events: none;
    user-select: none;
}

.krn-header-logo {
    height: 2rem;
}

.krn-squared {
    aspect-ratio: 1 / 1;
}

.krn-landing-img-special {
    width: 92%;
    /* max-width: 500px;
    max-height: 50vh; */
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.icono-bansani {
    width: 32px;
    height: 32px;
    object-fit: contain;
    object-position: center;
}
.icono-bansani-sm {
    width: 64px;
    height: 64px;
    object-fit: contain;
    object-position: center;
}
.icono-bansani-md {
    width: 82px;
    height: 82px;
    object-fit: contain;
    object-position: center;
}
.icono-bansani-lg {
    width: 128px;
    height: 128px;
    object-fit: contain;
    object-position: center;
}

/* Feather icons */
svg.feather.feather-16 {
    width: 16px;
    height: 16px;
}

svg.feather.feather-32 {
    width: 32px;
    height: 32px;
}

svg.feather.feather-64 {
    width: 64px;
    height: 64px;
}

/* Other */
.krn-disabled {
    opacity: 0.5;
    pointer-events: none;
}
.h-100 {
    height: 100%;
}



/* --- Cambios --- */
/* links */
h2{
    margin-top: 40px;
}
nav{
    flex-grow: .7; /* Permite que el nav crezca para ocupar el espacio disponible */
    display: flex;
    justify-content: space-evenly;
}

nav a{
    font-size: 0.85rem;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 1110px;
    background: linear-gradient(90deg, rgba(150,194,47,1) 0%, rgba(102,189,170,1) 22%, rgba(157,191,63,1) 80%, rgba(71,186,178,1) 100%);
    /* margin: auto auto 10px auto; */
    margin: auto;
    /* box-shadow: 2px 2px 3px rgba(173, 173, 173, 0.2),     
                -2px 2px 3px rgb(173, 173, 173,0.2); */
    
}

:root {
    --extra-width: 0px;
}

.krn-header-links ol a{
    padding: 5px 15px;
}
.btn-nav{
    display: none;
}
.hide-hamburguer-icon-nav{
    display: none;
}

.first-div{
    background-color: white;
    border-bottom-left-radius: 250px;
    
}
.first-div .row.krn-landing-section{
    display: flex;
    justify-content: center;
    /* margin: 2rem auto 2rem!important; */

}
.first-div-text{
    padding-left: 50px;
}
.first-div-image{
    padding: 0;
}

.second-div{
    background-color: white;
    border-top-left-radius: 250px;
}

.second-div-card{
    display: flex;
    justify-content: center;
}
.second-div-card-body{
    padding-bottom: 50px;
    width: 60%;
}
.second-div-card-body h1{
    padding: 100px 100px 0;
}

.third-div{
    width: 100%;
    background-color: rgb(255, 255, 255);
    position: relative;
}

.twelfth-div::after, .tenth-div::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: calc((var(--extra-width))/2);
    background-color: #06272eff;
    z-index: -1;
}
.fifth-div::before, .tenth-div::before, .twelfth-div::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: calc((var(--extra-width))/2);
    background-color: #06272eff;
    z-index: -1;
}
.third-div::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: calc((var(--extra-width))/2);
    background-color: #f2f2f2ff;
    z-index: -1;
}
.fifteenth-div::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: calc((var(--extra-width))/2);
    background-color: #f2f2f2ff;
    z-index: -1;
}
.fifteenth-div::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: calc((var(--extra-width))/2);
    background-color: #f2f2f2ff;
    z-index: -1;
}
/* Fondos body y main */


.third-div .row{
    background-color: #f2f2f2ff;
    border-bottom-left-radius: 250px;
    padding: 15px 15px;
}
.third-div-card-one{
    background-color: #ff484800;
}
.third-div-card-second{
    background-color: #ff484800;
    padding-right: 50px;
}
.third-div-card-second div p{
    font-size: 0.9rem;
}

.fourth-div{
    background-color: #ffffff;
}
.fourth-div-first-div{
    z-index: 1;
    width: 75%;
}
.fourth-div-first-div p{
    width: 75%;
}
.fourth-div-second-div{
    background-color:white; 
    z-index:0;
}
.fifth-div{
    background-color: white;
    position: relative;
}
.fifth-div div{
    background-color: #06272eff;
    border-bottom-right-radius: 180px;
    padding-top: 15.5px;
    padding-bottom: 15px;
}

.sixth-div div{
    background-color: white;
}

#sixth-div-component-Lugar::after{
    content: url("/assets/img/line_1.png");
    z-index: 0;
    position: absolute;
    margin-left: -40px;
    margin-top: -35px;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
}
#sixth-div-component-Comunidad::after{
    content: url("/assets/img/line_2.png");
    z-index: 0;
    position: absolute;
    margin-left: -280px;
    margin-top: -60px;
    transform: scale(0.3);
    -webkit-transform: scale(0.3);
}
#sixth-div-component-Energia::before{
    content: url("/assets/img/line_3.png");
    z-index: 0;
    position: absolute;
    margin-left: -640px;
    margin-top: 50px;
    transform: scale(.3);
    -webkit-transform: scale(.3);
}
#sixth-div-component-Agua::after{
    content: url("/assets/img/line_4.png");
    z-index: 0;
    position: absolute;
    margin-left: -390px;
    margin-top: 130px;
    transform: scale(.25);
    -webkit-transform: scale(.25);
}
#sixth-div-component-Salud::after{
    content: url("/assets/img/line_3.png");
    z-index: 0;
    position: absolute;
    margin-left: -320px;
    margin-top: -110px;
    transform: scaleY(-1) scale(-0.3);
    -webkit-transform: scaleY(-1) scale(-0.3);
}
#sixth-div-component-Materiales::after{
    content: url("/assets/img/line_6.png");
    z-index: 0;
    position: absolute;
    margin-left: -310px;
    margin-top: -20px;
    transform: scaleY(-1) scale(-0.3);
    -webkit-transform: scaleY(-1) scale(-0.3);
}
#sixth-div-component-Educacion::after{
    content: url("/assets/img/line_7.png");
    z-index: 0;
    position: absolute;
    margin-left: -360px;
    margin-top: 80px;
    transform: scale(.2);
    -webkit-transform: scale(.2);
}
#sixth-div-component-Gestion::after{
    content: url("/assets/img/line_8.png");
    z-index: 0;
    position: absolute;
    margin-left: -390px;
    margin-top: 70px;
    transform: scale(.2);
    -webkit-transform: scale(.2);
}
.seventh-div{
    background-color: white;
    border-top: solid #91c478ff 2px;
    border-bottom-left-radius: 150px;
    position: relative;
}
.seventh-div div .card{
    background-color: #06262d00;
}

.eight-div{
    background-color: rgb(255, 255, 255);
    border-top-left-radius: 150px;
    position: relative;
}
.eight-div div .card{
    background-color: #06262d00;
}
.eight-div-background{
    background-color:#f2f2f2ff; 
    border-top-left-radius: 150px;
    border-bottom-right-radius:50px;
}
.eight-div-background::before{
    content: ' ';
    background-image: url("/assets/img/unnamed (8).png");
    position: absolute;
    
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: 28%;
    background-repeat: no-repeat;
    background-position: top center;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

.ninth-div{
    background-color: white;
}

.tenth-div{
    background-color: white;
    position: relative;
}
.tenth-div-card-body{
    background-image: url('/assets/img/vista-lateral-hombre-que-trabaja-proyecto-energia-eolica-ecologica-planes-papel.jpeg');
    color: white;
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;
}
.tenth-div-text{
    background-color:#06272eff; 
    border-bottom-right-radius:100px;
}
.tenth-div-image img{
    display: none;
}
.eleventh-div-card{
    background-color: rgba(255, 255, 255, 0);
}
.eleventh-div-col{
    background-color: white;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
}
.eleventh-div-plan{
    transition: background-color 0.5s ease;
}
.eleventh-div-plan:hover{
    background-color: #f2f2f2ff;
}

.green-border{
    border: solid 2px #cee89eff;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.eleventh-div-first-text-div{
    position: relative;
}
.eleventh-div-second-text-div{
    position: relative;
}
.eleventh-div-third-text-div{
    position: relative;
}
.eleventh-div-third-text1{
    position: absolute;
    border: 2px solid #c3e388ff;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    width: 54%;
    z-index: 2;
}
.eleventh-div-fifth-text1 p{
    width: 75%;
}
.eleventh-div-fifth-text2{
    border: 2px solid #c3e388ff;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
}
.eleventh-div-third-text2{
    position: relative;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: #edededff;
    width: 50%;
    margin-right: 0;
    margin-left: auto;
}
.eleventh-div-fourth-text-div div{
    background-color: #edededff;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
}
.eleventh-div-first-text1{
    position: absolute;
    border: 2px solid #c3e388ff;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
}
.eleventh-div-second-text1{
    position: relative;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #edededff;
    width: 34%;
    
}
.eleventh-div-first-text1 div{
    width: 50%;
}

.eleventh-div-first-text2{
    position: relative;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background-color: #edededff;
    width: 50%;
    margin-right: 0;
    margin-left: auto;
}
.eleventh-div-second-text2{
    position: absolute;
    border: 2px solid #c3e388ff;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    display: flex;
    right: 0;
    align-self: center;
    left: 0;
    margin: auto;
    width: 38%;
    justify-content: center;
}
.eleventh-div-second-text3{
    position: absolute;
    display: flex;
    right: 0;
    align-self: center;
    margin: auto;
    width: 30%;
    justify-content: center;
}
.eleventh-div-sixth-text-div{
    position: relative;
}
.eleventh-div-sixth-text1{
    position: relative;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: #edededff;
    width: 33%;
    margin-left: 0;
    margin-right: auto;
}
.eleventh-div-sixth-text2{
    position: absolute;
    width: 64%;
    right: 0;
}
.twelfth-div{
    background-color: white;
    position: relative;
}
.twelfth-div-card-body{
    background-color: #06272eff;
    color: white;

}
.twelfth-div-text h3, .twelfth-div-text p{
    color: white;
}
.twelfth-div-image img{
    border-bottom-left-radius:130px; 
    border-top-right-radius:130px;
}
.twelfth-div-background{
    background-color:#06272eff;
}
.thirteenth-div{
    background-color: white;
    border-top-right-radius: 260px;
}

.fourteenth-div{
    background-color: white;
    position: relative;
}

.fourteenth-div-first-image{
    background-color: #06272eff;
    color: white;
    border-bottom-right-radius: 70px;
    position: relative;
}
.fourteenth-div-text{
    border-bottom-left-radius: 70px;
    position: relative;

}

.fifteenth-div{
    background-color: #f2f2f2ff;
    position: relative;
}
.fifteenth-div-image{
    padding: 0;
    z-index: 1;
}
.fifteenth-div-circle img{
    width: 45%;
}
.fifteenth-div-images{
    width: 90%;
}
.fifteenth-div-anevi{
    width:70%;
}

.fifteenth-div-bansani .img-fluid{
    width: 230px;
    align-self: center;
}

.fdsd {
    flex: 1; /* Esto asegura que el div ocupe el máximo espacio disponible */
    z-index: 0;
}

.fdsd::before{
    content: " ";
    background-image: url('/assets/img/circulo_bnzero_ultimo.png');
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: top center;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}
.fdsd1 div{
    width:100%;
}
.fdsd1 .img-fluid{
    width: 80%;
}
.fdtd1{
    width: 80%; 
}


/* Privacy Page */
.footer-first-div img{
    width: 100px;
}
.footer-second-div{
    height: 250px;
}
.footer-third-div{
    width: 25%;
    justify-content: space-evenly; 
}
.footer-third-div div i{
    padding-right: 10px;
}

/* Header nuevos*/
.header-master{
    display: flex;
    justify-content: center;
}
.header-space{
    width: 1130px;
}

.krn-card{
    border-radius: var(--krn-border-radius);
}
.scroll.krn-card-shadow{
    box-shadow: 0px 4px 5px rgb(224, 224, 224),     
                -0px 4px 5px rgb(224, 224, 224);
}
.ancla{
    background-color: rgba(136,136,136,0);
}


/* Animaciones */
@keyframes nav-animation{
    0%{
        width: 0%;
    }
    100%{
        width: 250px;
    }
}
@keyframes nav-list-animation{
    0%{
        opacity: 0;
    }
    59%{
        opacity: 0;
    }
    60%{
        opacity: 0.4;
    }
}


/* Media queries */

@media only screen and (max-width:1200px){

    main{
        width: 95%;
    }
    .header-space{
        width: 100%;
    }
    .hide-hamburguer-icon-nav{
        display: none;
    }
    .thirteenth-div{
        border-top-right-radius: 200px;
    }
    .fifteenth-div-bansani .img-fluid{
        width: 180px;
    }
}
@media only screen and (max-width:991px){
    nav{
        flex-grow: .8;
    }
    .first-div-text{
        padding: 10px;
    }
    .second-div-card-body{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .second-div-card-body img{
        width: 90%;
    }
    .second-div-card-body p{
        width: 70%;
    }
    .third-div div{
        padding-bottom: 25px;
    }
    .third-div-card-second{
        display: flex;
        align-items: center;
        padding: 0;
    }
    
    .third-div-card-second div{
        width: 90%;
    }
    .third-div-card-second div p{
        font-size: 1.1rem;
    }
    .fourth-div-first-div{
        width: 100%;
    }
    .fourth-div-first-div p{
        width: 100%;
    }
    .fourth-div-second-div{
        background-color:rgba(255, 255, 255, 0); 
    }
    .fourth-div div div#landing-elementos::before{
        content: ' ';
        background-image: url("/assets/img/unnamed (1).png");
        position: absolute;
        left: 0;
        top: -100px;
        right: 0;
        bottom: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: right center;
        transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
    }

    #sixth-div-component-Lugar::after{
        z-index: -100;
    }
    #sixth-div-component-Comunidad::after{
        z-index: -100;
    }
    #sixth-div-component-Energia::after{
        z-index: -100;
    }
    #sixth-div-component-Agua::after{
        z-index: -100;
    }
    #sixth-div-component-Salud::after{
        z-index: -100;
    }
    #sixth-div-component-Materiales::after{
        z-index: -100;
    }
    #sixth-div-component-Educacion::after{
        z-index: -100;
    }
    #sixth-div-component-Gestion::after{
        z-index: -100;
    }
    #sixth-div-component-Lugar::after{
        z-index: -100;
    }

    .tenth-div-card-body{
        background-image: none;
    }
    .tenth-div-text{
        border-bottom-right-radius: 0;
    }
    .tenth-div-image img{
        display: flex;
    }
    
    .eleventh-div-first-text-div{
        flex-direction: column;
    }
    .eleventh-div-third-text-div{
        flex-direction: column;
    }
    .eleventh-div-sixth-text-div{
        flex-direction: column;
    }
    .eleventh-div-first-text1{
        position: relative;
        margin-bottom: 20px;
    }
    .eleventh-div-third-text1{
        position: relative;
        width: 100%;
    }
    .eleventh-div-third-text2{
        width: 100%;
        margin:0;
    }
    .eleventh-div-second-text2{
        position: relative;
        width: 100%;
    }
    .eleventh-div-second-text3{
        position: relative;
        width: 100%;
    }
    .eleventh-div-first-text1 div, .eleventh-div-third-text1 div{
        width: 100%;
    }
    .eleventh-div-first-text2{
        width: 100%;
    }
    .eleventh-div-second-text1{
        width: 100%;
    }
    .eleventh-div-fifth-text1 p{
        width: 100%;
    }
    .eleventh-div-sixth-text1{
        width: 100%;
    }
    .eleventh-div-sixth-text2{
        position: relative;
        width: 100%;
    }

    .twelfth-div-image img{
        border-radius: 0;
    }
    
    .fourteenth-div-second-image{
        padding: 48px;
    }

    .fifteenth-div-anevi{
        width: 90%;
        
    }
    .fifteenth-div-img-form{
        align-items: center;
        justify-content: center;
    }
    .fifteenth-div-texts form{
        width: 600px;
    }
    .fifteenth-div-texts form div{
        flex-direction: column;
        
    }
    .fifteenth-div-bansani .img-fluid{
        width: 60%;
    }

    .fdtd1{
        width: 100%; 
    }
    .fdsd1 .img-fluid{
        width: 60%;
    }

    .fdsd::before{
        top:-20px;
    }

    .align-items-center.d-flex .krn-header-links{
        display: none;
    }
    nav .btn-nav{
        display: flex;
        font-size: 2rem;
    }
    nav .krn-header-link{
        display: none;
    }
    .krn-header-logo-div{
        display: flex;
        flex-grow: 1;
        justify-content: center;
    }
    .krn-header-logo-div .krn-header-logo {
        display: flex;
        height: 3rem;
        padding-left: 79.2px;
    }
    nav{
        flex-grow: 0;
    }
    .hamburguer-icon-div{
        position: relative;
        display: flex;
        justify-content: right;
        top: 10px;
        
    }

    .hamburguer-icon-nav{
        position: absolute;
        box-shadow: 0px 5px 5px rgb(200, 200, 200),     
        -0px 5px 5px rgb(200, 200, 200);
        width: 250px;
        border-radius: 20px;
        animation-name: nav-animation;
        animation-duration: 0.5s;
        animation-timing-function: ease; 
    }
    
    .hamburguer-icon-nav a{
        padding: 8px 20px;
        animation-name: nav-list-animation;
        animation-duration: 0.7s;
        animation-timing-function: ease; 
        
    }
    .krn-header-link{
        font-size: 1.2rem;
    }
    .list-group-item{
        text-align: right;
    }
}

@media only screen and (max-width:900px){
    
}

@media only screen and (max-width:800px){
    
    .krn-landing-img-hero{
        height: 50vh;
    }

    .eleventh-div-col{
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    }
    .thirteenth-div{
        border-top-right-radius: 150px;
    }
    .fifteenth-div-anevi{
        flex-direction: column;
        align-items: center;
    }
}

@media only screen and (max-width:768px){
    .fifteenth-div-texts form{
        width: 400px;
    }
    .footer-first-div{
        padding-bottom: 30px;
        
    }
    .footer-first-div img{
        padding-bottom: 15px;
    }
    .footer-first-div h5{
        text-align: center;
        font-size: 1rem;
    }
    .footer-second-div{
        align-items: center;
        font-size: 1.2rem;
        height: 300px;
        padding-bottom: 20px;
    }
    .footer-second-div a{
        padding-bottom: 10px;
    }
    .footer-third-div{
        width: 25%;
    }
    .footer-third-div{
        width: 100%;
        align-items: center; 
        justify-content: center;
        padding-bottom: 30px;
    }
    .footer-third-div div{
        width: 80%;
        flex-direction: column;
        padding: 1.4rem 0;
    }
    .footer-third-div div p{
        text-align: center;
    }
    .footer-third-div div i{
        padding-right: 0;;
        padding-bottom: 8px;
        font-size: 1.5rem;
    }

    #componentes-titulo {
        margin: 25px auto auto auto;
        border-top: 2px solid var(--krn-primary);
        border-bottom-left-radius: var(--krn-border-radius-lg);
    }
    
    #esg-titulo {
        margin: auto;
        border-bottom-right-radius: var(--krn-border-radius-lg);
    }
}

@media only screen and (max-width:520px){
    @keyframes nav-animation{
        0%{
            width: 0%;
        }
        100%{
            width: 90%;
        }
    }
    .krn-header-logo-div{
        display: none;
        flex-grow: 0;
    }
    nav{
        flex-grow: 1;
        justify-content: center;
    }
    nav .fa-solid.fa-bars{
        font-size: 2.2rem;
    }
    .list-group-item{
        text-align: center;
    }
    .hamburguer-icon-div{
        justify-content: center;
    }
    .hamburguer-icon-nav{
        width: 90%;
    }
    .hamburguer-icon-nav a{
        padding: 5px 0px; /* Espaciado interno */
    }
    .krn-header-link{
        font-size: 1.2rem;
    }

    .krn-header-logo {
        padding-left: 0;
    }
    
    .fourteenth-div-second-image{
        padding: 30px 10px;
    }

    .fifteenth-div-texts form{
        width: 250px;
    }
    #bansani-top-btn.d-flex.scroll{
        margin: 1.5rem 1.5rem;
    }
}
@media only screen and (max-width:480px){
    .fifth-div-text h1{
        padding-bottom: 15px;
    }
    .fifth-div-images{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .fifth-div-images  div{
        width: 100%;
        padding-bottom: 35px;
    }
    .fifteenth-div-content{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .fifteenth-div-images{
        width: 90%;
        padding: 0;
    }
    .fifteenth-div-authors-title{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .fifteenth-div-authors{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .fifteenth-div-pages{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width:420px){
    .second-div-card-body h1{
        padding: 100px 50px 0;
    }
    .fifteenth-div-texts form{
        width: 90%;
    }
}
@media only screen and (max-width:300px){
    .first-div-text div div h1,h3{
        font-size: 1.3rem;
    }
    .second-div-card-body h1{
        padding: 100px 25px 0;
        font-size: 1.1rem;
    }
    .second-div-card-body p{
        font-size: 0.8rem;
    }
    /* .first-div{
        border-bottom-left-radius: 80px;
    } */
}

/* --- Cambios --- */



/* Header */
.krn-header-links {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
}
.krn-header-links ol {
    padding: 0;
}
.krn-header-link {
    opacity: 0.7;
    text-decoration: none;
    transition: all .2s var(--krn-transition-cubic);
    font-weight: 500;
}
.krn-header-link:hover {
    opacity: 1;
    text-decoration: underline;
}

.bansani-landing-dark-bg {
    background-color: #06262d00;
    color: white;
}
.bansani-landing-green-bg {
    background-color: #a0d341;
    color: var(--krn-body-color);
}

:root {
    --bansani-landing-aqua: #4bb9b6;
}

.bansani-landing-aqua-border {
    border-color: var(--bansani-landing-aqua)!important;
}

.krn-landing-section {
    width: 100%;
    max-width: 1130px;
    margin: 0 auto 0rem!important;
}

.krn-card-padding {
    padding: var(--krn-card-spacer-y) var(--krn-card-spacer-x);
}

.krn-card-radius {
    border-radius: var(--krn-card-border-radius);
}

.krn-landing-img-hero {
    width: 100%;
    background-color: white;
}

.krn-landing-img-hero > img {
    width: 100%;
    height: 100%;
}

.krn-landing-img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#landing-elementos::before {
    content: ' ';
    background-image: url("/assets/img/unnamed (1).png");
    position: absolute;
    left: 100px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right center;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

#landing-elementos > .card-body {
    position: relative;
    z-index: 1;
}

#landing-elementos-hero > img {
    object-fit: cover;
    object-position: bottom right;
}

#componentes-titulo {
    width: fit-content;
    max-width: 100%;
    padding: 2rem;
    /* border-width: 2px; */
    border-bottom: 2px solid var(--krn-primary);
    border-right: 2px solid var(--krn-primary);
    border-left: 2px solid var(--krn-primary);
    border-bottom-right-radius: var(--krn-border-radius-lg);
    
}

#esg-titulo {
    margin-left: auto;
    width: fit-content;
    max-width: 100%;
    padding: 2rem;
    /* border-width: 2px; */
    border-bottom: 2px solid var(--krn-primary);
    border-left: 2px solid var(--krn-primary);
    border-right: 2px solid var(--krn-primary);
    border-bottom-left-radius: var(--krn-border-radius-lg);
}

.componentes-img {
    width: 100%;
    max-width: 70vw;
    max-height: 50vh;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
    z-index: 1;
}

.componentes-num {
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.2rem;
    font-size: 0.8rem;
    font-weight: 700;
    vertical-align: middle;
    text-align: center;
    border-radius: 50%;
    border: 2px solid var(--bansani-landing-aqua);
    color: var(--bansani-landing-aqua);
}

#landing-implementa::before {
    content: ' ';
    background-image: url("/assets/img/unnamed (8).png");
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: 27%;
    background-repeat: no-repeat;
    background-position: top center;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
}

#landing-implementa > .card-body {
    position: relative;
    z-index: 1;
}

.landing-pago-outline {
    border-top: var(--krn-border-width) var(--krn-border-style) #c3e388ff !important;
    border-bottom: var(--krn-border-width) var(--krn-border-style) #c3e388ff !important;
    z-index: 1;
}

#landing-pago-video-img {
    width: 100%;
    height: 100%;
    background-image: url("/assets/img/unnamed\ \(9\).png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 320px;
}

#landing-pago-metodos {
    border-bottom-right-radius: var(--krn-border-radius-lg)!important;
}

.diferencias-img {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 320px;
}

.diferencias-img.diferencias1 {
    background-image: url("/assets/img/diferencias1.png");
}

.diferencias-img.diferencias2 {
    background-image: url("/assets/img/diferencias2.png");
}

#landing-beneficios-ambientales-img {
    background-image: url("/assets/img/unnamed (1).png");
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: right center;
}

/* --- Cambios --- */
#bansani-top-btn {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 3.5rem 5rem;
    z-index: 999;
    transition: transform .2s var(--krn-transition-cubic);
    transform: scale(0);

}
#bansani-top-btn:hover{
    opacity: 0.85;
}
#bansani-top-btn a img {
    width: 65px; height: 65px;
}

/* --- Cambios --- */

/* Agrandamiento del logo al pasar el cursor por encima */


#bansani-header {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: top .2s var(--krn-transition-cubic);
}

#bansani-header.scroll {
    top: -170px;
}

#bansani-header-card {
    transition: all .2s var(--krn-transition-cubic);
}

#bansani-header-card.scroll {
    background-color: #ffffff!important;
    padding-left: 2rem;
    padding-right: 2rem;
}
#bansani-top-btn.scroll {
    transform: scale(1);
}