@charset "utf-8";
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-Light";
}

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

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

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






        #capa1Body{
            position: relative;
            width: 100%;
            height: auto;
            background-color: #000;
            background-image: url(../imagenes/aerosoles/fondoAerosoles.png);
            background-size: cover;
        }
        
            .fila1Capa1Body{ 
                position: relative;
                width: 100%;
                height: 300px;
                
            }
        
        
                .txt0Capa1Body{
                    position: relative;
                    text-align: left;
                    left: 30px;
                    width: 90%;
                    font-size: 5em;
                     top:40px;
                    display: inline-block;
                }
        
                .lineaCapa1Body{position: relative; width: 90%;  background-color: #fff; top: 10px; left: 0px; }
        .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; 
            
          }

#capa2Body{

   background-image: url(../imagenes/sprayPat.png); background-attachment: fixed;

}


          .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; border: solid; border-width: 1px; border-color: #000; 
          }

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

          .col1 p{ font-size: 1.5em;}

          .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: 2em;
            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%;}
        
        
           }


  .btnVer{
            display: block; margin-left: auto; margin-right: auto; border: none; width: 130px; height: 30px; background-color: #012a68; color: #fff;
            font-size: 1.1em;
           }






           .container2 {
            display: flex;
            justify-content: center; /* Centra las columnas horizontalmente */
            gap: 10px; /* Agrega espacio entre las columnas */
            flex-wrap: wrap;
            padding: 0px; /* Agrega espacio alrededor del contenedor (60/2 = 30) */
            box-sizing: border-box; /* Incluye el padding en el tamaño total del contenedor */
            width: 100%; /* El contenedor externo ocupa el 80% del ancho de la pantalla */
                margin: 0 auto; /*el cojntenedor se establece como centrado*/
            }

          
            .column {
            flex: 1; /* Calcula el ancho de cada columna con espacio */
            box-sizing: border-box;
            padding: 5px;
            /*background-color: #e74c3c;  Fondo de las columnas */text-align: center; background-color: #012a68;
            }

            .column img{
              width: 100%;
              
              }
        
            .column h1{
            font-size: 4em; color: #86ae34;
            }

            .column h2{
              font-size: 2em; color: #FFF;
              }
          
            /* Media query para apilar las columnas cuando el ancho de la pantalla es menor a 600px */
            @media (max-width: 600px) {
            .column {
              flex: 100%;
            }
            }

           

            .carousel-container {
              position: relative;
              width: 100%;
              overflow: hidden; /* Oculta el contenido desbordado */
            }
            
            .carousel {
              display: flex;
              overflow: hidden; /* Oculta las imágenes que están fuera del viewport */
            }
            
            .carousel-inner {
              display: flex;
              transition: transform 0.5s ease;
            }
            
            .column {
              flex: 0 0 33.33%; /* Ajusta este valor según cuántas imágenes quieras mostrar a la vez */
              box-sizing: border-box;
              padding: 10px;
              text-align: center; height: auto;
            }
            
            iframe {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .column iframe {
              width: 100%; /* Ajusta el iframe al ancho del contenedor */
              height: 100%; /* Ajusta la altura del iframe al contenedor */
              border: none; /* Elimina el borde del iframe */
              object-fit: cover; /* Ajusta el contenido del iframe para cubrir el área del contenedor sin distorsión */
            }

            .iframe-wrapper {
              position: relative;
              width: 100%;
              padding-top: 56.25%; /* 16:9 aspect ratio */
              overflow: hidden;
            }
            
            .iframe-wrapper iframe {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border: none;
            }

            
            .carousel-container button {
              position: absolute;
              height: 100px;
              width: 80px;
              top: 50%;
              background: rgba(0, 0, 0, 1);
              color: white;
              border: none;
              padding: 10px;
              cursor: pointer;
              transform: translateY(-50%);
              z-index: 10;
            }
            
            .prev {
              left: 0px;
            }
            
            .next {
              right: 0px;
            }