body {
    margin: 0 auto;
    background-color: #fff;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}



@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light.ttf) format("truetype")
}



@font-face {
    font-family: "Roboto-Bold";
    src: url(../fonts/Roboto-Bold.ttf) format("truetype")
}



h1{
  font-family: "Roboto-Bold";
}

h2{
    font-family: "Roboto-Light";
}

p{
    font-family: "Roboto-Light";	
    }

    a{
        font-family: "Roboto-Light";	
        }






        .fila1Body {
            display: flex;
            align-items: center; /* Centrar verticalmente los elementos dentro del contenedor */
            height: 300px;
            background-color: #f44343;
            background-image: url(../imagenes/fondoNosotros.png); background-size: cover; background-repeat: no-repeat;
          }



          .col1Body {
            flex: 1;
         
            /*flex: 2 1 200px;*/
            ;
            padding: 0px;/*es espaciado general para los elementos dentro de la columna*/
            margin: 0px;/*es margen general para la columna de acuerdo al borde del contenedor*/
            text-align: center; color: #fff; 
            
          }




          .fila2Body {
            position: relative;
            width: 100%;
            height: 100px;


        }

        .fila3Body {
            display: flex;
            flex-wrap: wrap; 
            gap: 15px; /*para o quitar dar mas espacio entre columnas aplica el mismo espacio para la verticalizacion*/
            width: 70%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
            margin: 0 auto; 
          }
      
          .col2Body {
            flex: 1; /* Todas las columnas tienen el mismo tamaño inicial */
            padding: 20px;
            box-sizing: border-box;
            text-align: left;
          }

          .col1 {
            flex: 4; /* La columna 60% será el 60% del contenedor (3 de 5 partes) */
          }

          .col1 .linea {
            background-color: #000; width: 100px; height: 3px; /* Añade una línea debajo del texto */
          }
          
          .col2{
            flex: 3; /* La columna 40% será el 40% del contenedor (2 de 5 partes) */
          }

          .col3{
            flex: 1; /* La columna 40% será el 40% del contenedor (2 de 5 partes) */
          }


          .img1Body{position: relative; width: 100%; height: auto; }

          .img2Body{
            width: 100%;
          }

          .txt1Capa1Body{
            font-size: 1.7em;
            width: 70%;
          }

          .txt2Capa1Body{
            font-size: 1.5em;
          }
      
          @media (max-width: 1200px) {
            /* Aplicar estilos específicos para pantallas con un ancho máximo de 600px */
            .col2Body {
              flex-basis: 100%; /* Hacer que las columnas ocupen el 100% del ancho en pantallas pequeñas */
            }

            .fila3Body {
                width: 90%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
            
            }
          }      
          
          @media (max-width: 600px) {
            /* Aplicar estilos específicos para pantallas con un ancho máximo de 600px */
            .img1Body {
                width: 100%; /* Hacer que las columnas ocupen el 100% del ancho en pantallas pequeñas */
            }
          }        



          @media screen and (min-width: 1px) and (max-width: 360px) {

            .fila2Capa1Body{width: 90%;}
        
        
           }