.sin_margen { margin-right:0px; margin-left:0px; }
.sin_padding { padding-left:0px; padding-right:0px;  }
.sin_flex { display:inherit; }

.sin_padding_der { padding-right:0px; }
.sin_padding_izq { padding-left:0px; }

.margen_arriba_1 { margin-top:1%; }
.margen_arriba_2 { margin-top:2%; }
.margen_arriba_3 { margin-top:3%; }
.margen_arriba_4 { margin-top:4%; }
.margen_arriba_5 { margin-top:5%; }

.margen_abajo_1 { margin-bottom:1%; }
.margen_abajo_2 { margin-bottom:2%; }
.margen_abajo_3 { margin-bottom:3%; }
.margen_abajo_4 { margin-bottom:4%; }
.margen_abajo_5 { margin-bottom:5%; }

.padding_arriba_1 { padding-top:1%; }
.padding_arriba_2 { padding-top:2%; }
.padding_arriba_3 { padding-top:3%; }
.padding_arriba_4 { padding-top:4%; }
.padding_arriba_5 { padding-top:5%; }

.padding_abajo_1 { padding-bottom:1%; }
.padding_abajo_2 { padding-bottom:2%; }
.padding_abajo_3 { padding-bottom:3%; }
.padding_abajo_4 { padding-bottom:4%; }
.padding_abajo_5 { padding-bottom:5%; }

body {
    font-family: "Fira Sans", sans-serif;
}

.barra_nav {

    position: fixed;
    top: 80px;
    left: calc(50% - 321px );
    z-index: 8;
    background-color:#FFF;
    border-radius:45px;
    padding: 12px 20px;
    transition: .4s all ease-in-out;

    a {
        padding: 7px 20px;
        color:#1E1F1D;
        text-decoration: none;
        transition: .2s all ease-in-out;
        display: inline-block;

        &:hover {
            font-weight: 700;
        }
        
    }

    a:nth-child(1){
        min-width: 220px;
    }

    a:nth-child(2){
        min-width: 207px;
    }

    .bot_naranja_nav {
        background-color:#EE8020;
        border-radius:20px;
        padding: 7px 25px;
        color:#FFF;
        font-weight: 700;
        text-decoration: none;
        display: inline-block;        
        margin-left: 15px;
        transition: .3s all ease-in-out;

        &:hover {
            background-color:#B45502;
            border-radius:25px;
        }
    }
}

.barra_nav_scroll {
    top:20px;
    box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.4);
}

.banner_home {
    background-image: url('../imagenes/bg_banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius:45px;
    margin:40px 50px;
    height: 100%;
    padding-top: 450px;
    padding-bottom: 80px;

    a {
        background-color: #EE8020;
        border-radius:20px;
        padding: 7px 25px;
        color:#FFF;
        font-weight: 700;
        text-decoration: none;
        display: inline-block;
        margin-top: 20px;
        transition: .3s all ease-in-out;

        &:hover {
            background-color:#B45502;
            padding: 10px 30px;
            border-radius:25px;
        }
    }
}

.tit_b_h {
    font-size: 70px;
    color:#FFF;
    line-height: 1.2;
    font-weight: 600;
    span {        
        font-weight: 800;
        font-style: italic;
    }
}

.texto_b_h {
    font-size: 20px;
    color:#FFF;
    line-height: 1.2;
    margin-top: 15px;
    font-style: italic;
    span {        
        font-weight: 700;
    }
}

.tit_proposito {
    color:#A03F16;
    font-weight: 800;
    font-size: 34px;
    text-align: center;
    margin-top: 40px;
}

.texto_proposito {
    text-align: center;
    margin-top: 15px;
    font-size: 18px;
    margin-bottom: 40px;
    b {
        font-style: italic;
    }
}

.img_cartel {
    margin-left: -5%;
    margin-right: -5%;
    width: 110%;
    max-width: 110%;
}

.tit_problematica {
    font-weight: 600;
    color:#1E1F1D;
    font-size: 36px;
    line-height: 1.3;
    margin-top: 50px;
    margin-bottom: 50px;
}

.video_yt {
    max-width: 950px;
    margin:0 auto;
    border-radius:45px;
    overflow: hidden;
    margin-bottom: 80px;
    height: 515px;
    position: relative;

    iframe {
        position: absolute; top: -60px; left: 0; width: 100%; height: calc(100% + 120px);
    }
}

.img_problematica {
    margin-left: 160px;
}

.c_problematica {
    background-color:#EE8020;
    border-radius:30px;
    padding: 40px 60px;
    max-width: 500px;
    margin-left: 50px;
    margin-top: 60px;
}

.tit_c_problematica {
    color:#FFF;
    font-weight: 800;
    font-size: 34px;
    margin-bottom: 20px;
    line-height: 1.2;
}

.texto_c_problematica {
    font-weight: 600;
    color:#FFF;
    line-height: 1.2;
    max-width: 350px;

    span {
        font-weight: 800;
        font-style: italic;
        font-size: 24px;
    }
}

.banner_que_es {
    background-color:#FCEBE1;
    border-radius:45px;
    padding: 60px 150px;
    margin-top: 150px;
    position: relative;
    margin-bottom: 100px;
}

.tit_bqe {
    color:#A03F16;
    font-weight: 600;
    font-size: 38px;
    line-height: 1.1;

    span {
        font-weight: 800;
        font-style: italic;
    }
}

.texto_bqe {
    margin-top: 10px;
    font-size: 18px;
    color:#1E1F1D;
}


.burbuja-dialogo {
  /* Dimensiones extraídas de tu panel de Figma */
  width: 306px;
  height: 131px;
  position: absolute;
  right: 40%;
  top: -30%;
  z-index: 2;

  
  /* Estilos de fondo y tipografía */
  background-color: #8E3A1E; /* Color marrón aproximado de la imagen */
  color: #FFFFFF;
  
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  
  /* Centrado perfecto del texto con Flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Forma principal */
  border-radius: 40px; /* Redondeo pronunciado de las esquinas */
  
  /* Sombra opcional si la necesitas más adelante */
  /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
}

/* Creación de la punta (colita) del globo */
.burbuja-dialogo::after {
  content: '';
  position: absolute;
  
  /* Posicionamiento de la colita en la parte inferior derecha */
  bottom: -22px; 
  right: 50px;   
  
  /* Dibujando el triángulo con la técnica de bordes CSS */
  border-top: 25px solid #8E3A1E; /* Alto del triángulo y mismo color del fondo */
  border-left: 20px solid transparent; /* Inclinación izquierda */
  border-right: 20px solid transparent; /* Inclinación derecha */
}



.burbuja-dialogo-blanco {
  /* Dimensiones extraídas de tu panel de Figma */
  width: 306px;
  height: 131px;
  position: absolute;
  right: 19%;
  top: -5%;
  z-index: 2;

  
  /* Estilos de fondo y tipografía */
  background-color: #FFF; /* Color marrón aproximado de la imagen */
  color: #A03F16;
  
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  
  /* Centrado perfecto del texto con Flexbox */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Forma principal */
  border-radius: 40px; /* Redondeo pronunciado de las esquinas */
  
  /* Sombra opcional si la necesitas más adelante */
  /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); */
}

/* Creación de la punta (colita) del globo */
.burbuja-dialogo-blanco::after {
  content: '';
  position: absolute;
  
  /* Posicionamiento de la colita en la parte inferior derecha */
  bottom: -22px; 
  left: 50px;   
  
  /* Dibujando el triángulo con la técnica de bordes CSS */
  border-top: 25px solid #FFF; /* Alto del triángulo y mismo color del fondo */
  border-left: 20px solid transparent; /* Inclinación izquierda */
  border-right: 20px solid transparent; /* Inclinación derecha */
}


.tit_iden {
    color:#1E1F1D;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.2;
    margin-top: 80px;
    font-style: italic;
}

.bot_iden {
    background-color: #EE8020;
    border-radius:20px;
    padding: 7px 25px;
    color:#FFF;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    transition: .3s all ease-in-out;

    &:hover {
        background-color:#B45502;
        padding: 10px 30px;
        border-radius:25px;
    }
}

.banner_material {
    margin-top: 70px;
}

.c_b_material {
    background-color:#A03F16;
    padding: 50px 130px;
    line-height: 1.2;
    border-radius:45px;
    font-weight: 600;
    text-align: center;
    display: block;
    color:#FFF;
    font-size: 32px;
    max-width: 930px;
    margin:0 auto;
    margin-top: -100px;
    position: relative;
    z-index: 5;
    margin-bottom: 100px;

    span {
        font-weight: 800;
        font-style: italic;
    }
}


.footer {
    background-color:#EE8020;
    padding: 45px 15px;
    text-align: center;
    margin:0 50px;
    border-radius:25px;
    margin-bottom: 30px;
    img {
        max-width: 350px;
    }
}


.show_desk {

}

.show_resp {
    display: none;
}

/****************************************************** RESPONSIVE **************************************************************************************************/
/********************************************************************************************************************************************************************/

@media (max-width: 1515px) { 

    .img_cartel {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }

    .banner_home {
        padding-top: 400px;
    }

}


@media (max-width: 1440px) { 

    .barra_nav {
        top: 70px;
    }

    .banner_home {
        padding-top: 350px;
        padding-left: 50px;
    }

    .tit_b_h {
        font-size: 60px;
       
    }



}

@media (max-width: 1366px) { 


    .banner_home {
        padding-top: 240px;
        padding-left: 40px;
    }

    .img_problematica {
        margin-left: 110px;
    }

    .c_problematica {
        padding: 30px 60px;
        margin-left: 30px;
        margin-top: 30px;
    }

    .tit_c_problematica {
        font-size: 32px;
    }


}

/* Tu media query existente para 800px probablemente se vea así: */
@media screen and (max-width: 1280px) and (min-height: 621px) and (max-height: 800px) {
  .banner_home {
        padding-top: 260px;
        padding-left: 40px;
    }
}


/* Para pantallas de hasta 1280px de ancho y hasta 720px de alto */
@media screen and (max-width: 1280px) and (max-height: 620px) {
  .banner_home {
        padding-top: 200px;
        padding-left: 40px;
    }
}

@media (max-width: 1024px) { 


    .banner_home {
        padding-top: 340px;
        padding-left: 40px;
    }




}


@media (max-width: 991px) { 

    .img_problematica {
        margin-left: 0px;
    }

    .c_problematica {
            margin:0 auto;
            padding: 40px 20px;
            max-width: 450px;
            margin-top: -50px;
    }

}

@media (max-width: 767px) { 

    .show_desk {
        display: none;
    }

    .show_resp {
        display: block;
    }

    .banner_home {
        padding-top: 350px;
        padding-left: 0px;
        margin:20px 10px;
    }

    .tit_b_h {
        font-size: 36px;
    }

    .texto_b_h {
        font-size: 18px;
    }

    .barra_nav {
        top: 35px;
        left: calc(50% - 130px );        
        border-radius:25px;
        padding: 8px 15px;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(5px);

        a {
            display: block;
            font-size: 14px;
        }

        .bot_naranja_nav {
            margin-left: 0;
        }
    }

    .tit_proposito {
        font-size: 28px;        
    }

    .texto_proposito {

        br {
            display: none;
        }
    }

    .tit_problematica {
        font-size: 28px;        
    }

    .video_yt {
        height: 215px;
    }

    .img_problematica {
        margin-left: 0px;
    }

    .c_problematica {
        margin:0 auto;
        padding: 40px 20px;
        max-width: 390px;
        margin-top: -50px;
    }

    .banner_que_es {
        padding: 60px 20px;
        padding-top: 120px;
    }

    .burbuja-dialogo {
        /* Dimensiones extraídas de tu panel de Figma */
        width: 250px;
        height: 101px;
        position: absolute;
        right: 30%;
        top: -29%;
        font-size: 20px;
    }

    .burbuja-dialogo-blanco {
        /* Dimensiones extraídas de tu panel de Figma */
        width: 250px;
        height: 111px;        
        right: 0%;
        top: -5%;
        font-size: 20px;
    }

    .burbuja-dialogo::after {
        right: 170px;   
    }

    .bot_iden {
        margin-bottom: 80px;
    }

    .c_b_material {
        padding: 30px 30px;
        font-size: 22px;
        margin:0 auto;
        margin-top: -40px;
        margin-bottom: 70px;

        br {
            display: none;
        }
    }


    .footer {
        padding: 35px 15px;
        margin: 0 10px;
        margin-bottom: 20px;

        img {
            max-width: 220px;
        }
    }

    .banner_material {
        margin-top: 45px;
    }


}