/**********************************Configuración General****************************/

*{
    --color1: #000000;
    --color2:#ffffff;
    --color3: #5379bc6a;;
    --color4: rgb(220, 53, 69, 1);
    --color5: #e2e6ed;
}
body{
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    grid-template-areas: 
    "mi-header"
    "mi-main"
    "mi-footer";  
    box-sizing: border-box;
    scroll-behavior: smooth;
}
header{
    grid-area: mi-header; 
}
main{
    grid-area: mi-main;
    background-color: rgb(255, 255, 255);
}
footer{
    grid-area: mi-footer;
}
img{
    width: 100%;
    height: 100%;
}
/**********************************Estilos del header****************************/

.logo{ 
    width: 140px;
    height: 25px;
    
}

/**********************************Estilos de la presentación****************************/
.presentacion{
    background-image: url(../assets/img/Fondo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
  
}
.capaPresentacion{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
   background-color: #31599dcf;
}
.capaServicios{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #ffffffd2;
    color: black;
}

.presentacion-header{
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 2;
}
.presentacionImagen{
    width: 350px;
    height: auto;
}
.header-h1{
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 900;
    margin: 3em 0 1em 0;
    text-align: center;
    color: #e7e7faed;
}
.parrafo-bienvenida{
    color: rgb(233, 223, 223);
    line-height: 2em;
    font-size: 1.5em;
}
.link-hover {
    color: rgb(0, 0, 0);
    transition: color 1s ease; /* Transición de color para el texto */
    font-size: 1.5em;
} 
.icono {
    transition: all 1s ease; /* Transición de todos los cambios */
    color: rgb(255, 255, 255); /* Cambia el color del texto cuando se hace hover */
  }
  
.link-hover:hover .icono {
    transform: translateY(-5px) scale(1.2); /* Escala y mueve el ícono */
  }
.icono-sociales{
    color: var(--color2);
    transition: all 1s ease; 
  }
  .icono-sociales:hover{
    color:var(--color1);
    transform: translateY(-5px) scale(1.2);
  }
  .whasapt {
    position: fixed;
    bottom: 6em;
    right: 1em;
    display: inline-block;
    transition: color 0.3s ease;
    z-index: 100;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 10px 8px;
    border-radius: 10px 0 0 10px;
    border-right: 2px solid white;
    
}

.whasapt a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}
.whasapt .iconoinstragan{
    font-size: 2em;
    color: #9a0b6f; /* Color específico para el ícono de WhatsApp */
    transition: color 0.5s ease;
}
.whasapt .iconowhasap{
    font-size: 2em;
    color: #128c7e; /* Color específico para el ícono de WhatsApp */
    transition: color 0.5s ease;
}
.publicidadInstragran{
    background-color: transparent;
    position: absolute;
    right: -400px;
    bottom:3em;
}

.whasapt a span {
    position: absolute;
    right: 2.5em ;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    margin-right: 10px;
    font-size: 1em;
    background-color: #ffffff;
    padding: 5px 10px;
    border-radius: 1em;
}

.whasapt a:hover .fa-whatsapp {
    color: #075e54; /* Cambia el color del ícono al hacer hover */
    
    
}

.whasapt a:hover span {
    opacity: 1;
    visibility: visible;
}
/*/****estilos para las banderas**************/
.presentacion  .contenedor-banderas{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2em;
    
    }
  
    .bandera {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 50%;
      opacity: .4;
    }
  
  /****************************************segunda seccion*******************/
  .icono1{
    font-size: 2em;
    text-align: center;
    margin-bottom: .5em;
    color: #0f0f4b;
  }
  .icono1:hover{
    transition: all 1s ease; /* Transición de todos los cambios */
    color: var(--color1); /* Cambia el color del texto cuando se hace hover */
    transform: translateY(-5px) scale(1.2); /* Escala y mueve el ícono */
  }
  /***********************************seccionQuienessomos******************/
.seccionQuienessomos{
    background-color: #31599dcf;
}

/********************************Servicios*********************************************/

.seccionNuestroservicios{
    background-image: url(../assets/img/nuevo123.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.seccionEventos{
    background-color: rgb(170, 180, 198);
}
footer .subir{
    position: fixed;
    color: var(--colorprimario);
    bottom: 1em;
    right: -2em;
    padding: .5em;
    color: rgb(255, 255, 255);
    transition: all .5s linear;
    z-index: 1000;
    cursor: pointer;
    font-size: 1.5em;
    background-color: black;
    border-radius: 10px;
    object-fit: none;
    border: 1px solid black;
}
footer .subir:hover{
    background-color: transparent;


}

/************************Estilos para validación de Formulario*******************/
    .errorParrafo{
        padding: 5px;
        margin: 0;
        color: rgb(159, 0, 0);    
        display: none;
    }
    .formularioEnvioOculto{
        color:rgb(0, 255, 34);
        margin-top: 10px;
        font-size: 1.3em;  
        display: none;
    }
    /***************************estilos para la pagina de noticias****************/

   /* .d-flex1{
        display: flex;
    }
    .col-8{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2em;
    }
    .CA{
        width: calc(30%);
    }
    .seccion{
        padding: 1em;
        height: 100%;
        background-color: #81818117;
        
        
    }*/
@media (max-width: 600px) {
    .presentacionImagen{
        width: 170px;
        height: auto;
        
    }
    .header-h1{
        text-transform: uppercase;
        font-size: 1.1em;
        margin: 1em 0 2em 0;
    }
    .parrafo-bienvenida{
        color: white;
        line-height: 1.3em;
        text-align: center;
        font-size: 1.2em;
        margin-bottom: 2em;
    }
    .link-hover {
        font-size: 1em;
    }
    .icono {
        font-size: 1em;
      }
      .capa{
        background-color: #283d62ad;
    }
.presentacion  .contenedor-banderas{
        gap: 0.2em;
    
    }
	
	
}