@font-face {
  font-family: 'Poppins';
  src: url('Poppins-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  
}

@font-face {
  font-family: 'Raleway';
  src: url('Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  
} 

@font-face {
  font-family: 'Lato';
  src: url('Lato-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  
} 
 
body {
    background-color: #e2f2ff;  
    color: #174974;
    font-family: "Poppins",sans-serif;
    border-radius: 10px;  
}


hr.punteado {
    border: 0;
    border-top: 6px dotted #21aa58;  
    margin: 20px 0; 
}


.contenedor {
    max-width: 1020px;
    margin: 0 auto;
    padding: 3px 3px;  
    background-color: #ffffff; 
    border-radius: 5px;
}



.grid-container {
			display: flex;
            flex-wrap: wrap;  
            overflow-x: auto; 
           flex-direction: row;            
}


.grid-container2 {
			display: flex;
            flex-wrap: wrap;  
            overflow-x: auto; 
           flex-direction: row;            
}

.grid-item {
           flex: 0 0 calc(30.333% - 10px); /* Tamaño para tres columnas, ajustando el margen */
            margin: 1px; /* Margen alrededor de cada elemento */
    box-sizing: border-box;

         
            padding: 10px; /* Espaciado interno para el contenido */
            text-align: center; /* Alinear el texto al centro */
           overflow: visible;
height: auto;
        }
       
.grid-what {
           flex: 0 0 calc(30% - 10px); /* Tamaño para tres columnas, ajustando el margen */
            margin: 1px; /* Margen alrededor de cada elemento */
           box-sizing: border-box;

         
            padding: 10px; /* Espaciado interno para el contenido */
            text-align: center; /* Alinear el texto al centro */
            height: auto;   
           max-height: none; /* O no incluir max-height */
   
        }       
 

.grid-50 {
           flex: 0 0 48%;
    box-sizing: border-box;

            margin: 1px;
       
            padding: 5px;  
            text-align: center; 
       margin-bottom: 20px; /* Margen alrededor de cada elemento */
            height: auto;
            max-height: none; 
           
}
       


.grid-40 {
           flex: 0 0 38%;
    box-sizing: border-box;

            margin: 1px;
 
            padding: 5px;  
            text-align: center; 
       margin-bottom: 20px; /* Margen alrededor de cada elemento */
       padding-bottom: 20px; /* Margen alrededor de cada elemento */       
            height: auto;
            max-height: none; 
           
}
       
.grid-60 {
          flex: 0 0 58%;
    box-sizing: border-box;
           margin: 1px;  
  margin-bottom: 20px; /* Margen alrededor de cada elemento */
     
        
            padding: 5px;
            text-align: center; 
            
              height: auto;
              max-height: none; 
        }
  
.grid-60f {
          flex: 0 0 58%;
    box-sizing: border-box;
           margin: 1px;  
  margin-bottom: 20px; /* Margen alrededor de cada elemento */
     
        
            padding: 5px;
            text-align: center; 
            
              height: auto;
              max-height: none; 
        }        
        
.grid-75 {
          flex: 0 0 73%;
    box-sizing: border-box;
           margin: 1px;  
margin-bottom: 15px; /* Margen alrededor de cada elemento */
    padding-bottom: 15px; /* Margen alrededor de cada elemento *o */       
 
            padding: 5px;
            text-align: center; 
            
              height: auto;
            max-height: 200px;
        }    
    
.grid-25 {
          flex: 0 0 23%;
    box-sizing: border-box;
           margin: 1px;  
  margin-bottom: 15px; /* Margen alrededor de cada elemento */
   padding-bottom: 15px; /* Margen alrededor de cada elemento *o */   
      
            padding: 5px;
            text-align: center; 
  justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */            
              height: auto;
              max-height: 200px;
        }              
              
.grid-90 {
          flex: 0 0 98%;
    box-sizing: border-box;
           margin: 1px;  
  margin-bottom: 20px; /* Margen alrededor de cada elemento */
     
     
            padding: 5px;
            text-align: center; 
            
              height: auto;
              max-height: none; 
        }   
        
      
     .grid-90 h2 {
    font-family: 'Raleway';
  font-weight: bold;
  font-style: normal;    
   font-size: 50px;
   text-align: center;
   color: #174974;
     background-color: #e9f5fe; /* Color de fondo amarillo */
 
  padding: 2px; /* Espacio alrededor del texto para que el fondo sea más visible */
 
        }   
        
.grid-25 p {
   font-family: 'Raleway';
  font-weight: bold;
  font-style: normal;   
   font-size: 88px;
   text-align: center;
   color: #46b000;
        }    
        
.grid-75 h3 {
    font-family: 'Raleway';
  font-weight: bold;
  font-style: normal;    
   font-size: 36px;
   text-align: left;
   color: #174974;
        }     
        
.grid-75 p  {
    font-family: 'Raleway';
  font-weight: normal; 
  font-style: normal;   
   font-size: 26px;
   text-align: left;
   color: #174974;
        }                       
                   
 .grid-item img {
 width: 100%; 
  height: auto;  
}

 .grid-40  img {
 width: 100%;  
  height: auto;  
}


 .grid-60 img {
 width: 100%; 
  height: auto;  
}


 .grid-60f img {
 width: 100%; 
  height: auto;  
}

 .grid-60 p {
 margin-block-start: 2px;
    margin-block-end: 2px;  
}


.contenedorimg {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se pasen a la siguiente línea */
}

/* Estilo para las imágenes (elementos flex) */
.contenedorimg  img {
    flex: 0 0 50%; /* Ocupan el 50% del ancho del contenedor */
    max-width: 50%; /* Previene que sean más grandes de lo esperado */
    box-sizing: border-box; /* Asegura que el padding y border no afecten el ancho total */
    padding: 5px; /* Espaciado entre imágenes */
}


.btnwhat {
    display: inline-block;
    padding: 14px 28px;
    background-color: #46b000; /* Color verdel del botón */
    color: white;
    font-family: "Poppins",sans-serif;
    font-weight: bold;
    font-style: normal;      
    text-decoration: none;
    border-radius: 5px;
    border:none;
    transition: background-color 0.3s ease;
    text-align: center;    
    width: 60%; /* Ancho completo para adaptarse al contenedor */
   box-shadow: 0 3px #21aa58; /* Sombra para el efecto 3D */
    cursor: pointer; /* Cambia el cursor al pasar el ratón por encima */
    font-size: 18px; /* Ajusta según sea necesario */
      max-width: 60%; /* Evita que el botón sea más ancho que el contenedor */
    white-space: nowrap; /* Evita que el texto del botón se ajuste a una nueva línea */
    overflow: hidden; /* Opcional: recorta el texto si es demasiado largo */
    text-overflow: ellipsis; /* Opcional: agrega puntos suspensivos si el texto es recortado */
cursor: pointer; /* Cambiar el cursor a tipo puntero */
    display: inline-flex; /* Para alinear el icono y el texto */
    align-items: center; /* Centrar elementos verticalmente */
       
}


.whatsapp-logo {
    background-image: url('what.png'); /* Ruta al logo de WhatsApp */
    width: 22px; /* Ancho del logo */
    height: 22px; /* Alto del logo */
    display: inline-block; /* Hacer que el span se comporte como inline-block */
    background-size: cover; /* Ajustar la imagen al tamaño del contenedor */
    margin-left: 10px; /* Espacio entre el texto y el logo */
}

.btn2 {
    display: inline-block;
    padding: 14px 28px;
    background-color: #2a6495; /* Color azul del botón */
    color: white;
    font-family: "Poppins",sans-serif;
    font-weight: bold;
    font-style: normal;      
    text-decoration: none;
    border-radius: 5px;
    border:none;
    transition: background-color 0.3s ease;
    text-align: center;    
    width: 60%; /* Ancho completo para adaptarse al contenedor */
   box-shadow: 0 5px #1a4563; /* Sombra para el efecto 3D */
    cursor: pointer; /* Cambia el cursor al pasar el ratón por encima */
    font-size: 20px; /* Ajusta según sea necesario */
      max-width: 60%; /* Evita que el botón sea más ancho que el contenedor */
    white-space: nowrap; /* Evita que el texto del botón se ajuste a una nueva línea */
    overflow: hidden; /* Opcional: recorta el texto si es demasiado largo */
    text-overflow: ellipsis; /* Opcional: agrega puntos suspensivos si el texto es recortado */
    display: inline-flex; /* Para alinear el icono y el texto */
    align-items: center; /* Centrar elementos verticalmente */    
}


.whatsapp-tel {
    background-image: url('tel.png'); /* Ruta al logo de WhatsApp */
    width: 22px; /* Ancho del logo */
    height: 22px; /* Alto del logo */
    display: inline-block; /* Hacer que el span se comporte como inline-block */
    background-size: cover; /* Ajustar la imagen al tamaño del contenedor */
    margin-left: 10px; /* Espacio entre el texto y el logo */
}



.btn {
    display: inline-block;
    padding: 14px 28px;
    background-color: #2a6495; /* Color azul del botón */
    color: white;
    font-family: "Poppins",sans-serif;
    font-weight: bold;
    font-style: normal;      
    text-decoration: none;
    border-radius: 5px;
    border:none;
    transition: background-color 0.3s ease;
    text-align: center;    
 
   box-shadow: 0 5px #1a4563; /* Sombra para el efecto 3D */
    cursor: pointer; /* Cambia el cursor al pasar el ratón por encima */
     font-size: 20px; /* Ajusta según sea necesario */
    max-width: 90%;
    width: 90%;   /* Evita que el botón sea más ancho que el contenedor */
    white-space: nowrap; /* Evita que el texto del botón se ajuste a una nueva línea */
    overflow: hidden; /* Opcional: recorta el texto si es demasiado largo */
    text-overflow: ellipsis; /* Opcional: agrega puntos suspensivos si el texto es recortado */
}

.btn:hover, .btn:focus {
    background-color: #1a4563; /* Color más oscuro al pasar el mouse o al enfocar */
    box-shadow: 0 2px #1a4563; /* Sombra más corta para el efecto de presión */
    transform: translateY(3px); /* Mueve el botón hacia abajo para simular presión */
}

.btn:disabled,
.btn[disabled] {
    background-color: #6c7a89; /* Gris azulado para el fondo */
    color: #b2b2b2; /* Grisáceo para el texto */
    cursor: default; /* Cambia el cursor para indicar que el botón está deshabilitado */
    opacity: 0.6; /* Reduce la opacidad para una apariencia deshabilitada */
    border: none;
    padding: 14px 28px;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    box-shadow: none; /* Opcional: quita la sombra para reducir el efecto 3D */
}

 
input[type="text"] {
    width: 90%;   /* Ancho del input en pantallas de PC */
    height: 40px;   /* Altura del input */
    padding: 3px;   /* Espaciado interno para que el texto no esté justo en el borde */
    border: 1px solid #46b000; /* Borde para los elementos */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño del texto */
    box-sizing: border-box; /* Asegura que el padding y border se incluyan en el ancho */
    margin-bottom: 10px; /* Ajusta el relleno inferior según tus necesidades */
    color: grey;

}

 
.cabecera-web {
    display: flex;
    flex-wrap: wrap;
    align-items: center;  
    justify-content: flex-start; /* Alinea los elementos al inicio del contenedor */

    flex-direction: row; /* Apilar imagen y texto verticalmente en móviles */   
    padding: 20px;
    background-color: #ffffff;
}

.imagen-cabecera {
    width: 30%; /* Ajusta el tamaño según tus necesidades */
    height: auto;
   text-align:left;
    margin-right: 20px; /* Espacio entre la imagen y el texto */

}

h1 {
    margin: 0;
 font-family: "Poppins",sans-serif;
    font-weight: bold;
    font-style: normal;      
    text-decoration: none;    
    font-size: 26px;
      text-align: left;
}

.ventatitulo {
    margin: 0;
  font-family: 'Raleway';
    font-weight: bold;
    font-style: normal;      
    text-decoration: none;    
    font-size: 64px;
      text-align: left;
}


.ventatit2 {
    margin: 0;
  font-family: 'Raleway';
    font-weight: bold;
    font-style: normal;      
    text-decoration: none;    
    font-size: 32px;
      text-align: left;
      color: #46b000;
}

.ventatit3 {
    margin: 0;
  font-family: 'Lato';
    font-weight: bold;
    font-style: normal;      
    text-decoration: none;    
    font-size: 30px;
      text-align: center;
    
}
 
.estrellas  {
    font-family: 'Raleway';
  font-weight: normal; 
  font-style: normal;   
   font-size: 24px;
   text-align: center;
  color: #46b000;
        }     
 
.testimonio  {
  font-family: 'Lato';
  font-weight: normal; 
  font-style: normal;   
   font-size: 24px;
   text-align: center;
   color: #174974;
   padding:20px;
        }  
        
.llamar  {
  font-family: 'Lato';
  font-weight: normal; 
  font-style: normal;   
   font-size: 24px;
   text-align: center;
   color: #174974;
        }  
                  
.nombre  {
  font-family: 'Lato';
  font-weight: normal;
  font-style: normal;  
   font-size: 18px;
   text-align: center;
  color: #46b000;
        }     
 
 
@media (max-width: 769px) {
.cabecera-web {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; /* Apilar imagen y texto verticalmente en móviles */   
    padding: 20px;
    background-color: #ffffff;
}
.imagen-cabecera {
    width: 90%; /* Ajusta el tamaño según tus necesidades */
    height: auto;
 

}
.grid-container {
    display: flex;
  flex-direction: row;
}

.grid-container2 {
    display: flex;
  flex-direction: column;
}

   .grid-item {
           flex: 0 0 calc(49% - 10px); /* Tamaño para tres columnas, ajustando el margen */
            margin: 1px; /* Margen alrededor de cada elemento */
    box-sizing: border-box;

         
            padding: 10px; /* Espaciado interno para el contenido */
            text-align: center; /* Alinear el texto al centro */
           overflow: visible;
height: auto;
        margin-bottom: 20px; /* Añadir espacio entre los elementos */
min-width:100px; min-height:100px;  
     
  
    }
    
   .grid-what {
        flex: 1 100%; /* Ocupar el ancho completo en pantallas pequeñas */
        margin-bottom: 20px; /* Añadir espacio entre los elementos */
min-width:100px; min-height:100px;  
        
    }    

    .grid-40 {
        flex: 1 100%; /* Ocupar el ancho completo en pantallas pequeñas */
        margin-bottom: 20px; /* Añadir espacio entre los elementos */
min-width:100px; min-height:100px;      
      
    }

   .grid-60 {
        flex: 1 100%; /* Ocupar el ancho completo en pantallas pequeñas */
        margin-bottom: 20px; /* Añadir espacio entre los elementos */
  
           
    }


    .grid-item, .grid-40, .grid-60  img {
        max-width: 100%;
        height: auto;
    }
   input[type="text"] {
        width: 90%; /* Ancho del input en pantallas móviles */
    }
    
        .contenedorimg img {
        flex: 0 0 100%; /* En móviles, cada imagen ocupa el 100% del ancho */
        max-width: 100%;
    }
    
   .grid-60f {
  margin-top: 120px;
        }   
        
.btn {
 
     font-size: 16px; /* Ajusta según sea necesario */
 
}        
        
.btn,
.btn2,
.btnwhat {
    white-space: normal;     /* permite que el texto baje */
    overflow: visible;       /* no lo recorta */
    text-overflow: unset;    /* elimina puntos suspensivos */
    width: 100%;             /* ocupa todo el ancho */
    max-width: 100%;
    height: auto;            /* crece en vertical */
    line-height: 1.2;
}
}