:root {

    --primary: #d69110;
    --secondary: #f56809;
    --light: #F6F7F8;
    --dark: #312e3b;
    --terceario: radial-gradient(circle, #dfe1e3, #dee3e6, #dde5e9, #dbe7eb, #d9e9ec);

}

* {
    font-family: "Poppins", sans-serif;

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*-----------btn-wsp------------------*/
.btn-wsp {
    position: fixed;
    bottom: 20px; 
    right: 20px; 
    z-index: 1000; 
    width: 50px; 
    height: 50px; 
    background-color: #25d366; 
    border-radius: 50%; 
    display: flex; 
    justify-content: center;
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); 
    color: white; 
    text-decoration: none; 
    font-size: 30px; 
}

.iconwsp {
    font-size: 1.2em; 
}

.navbar-collapse {
    justify-content: space-evenly;
}

.navbar {
    padding: 0;
}

.container-color {
    background-color: var(--dark);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;

}

.enlace-color {
    color: var(--light)
}

.enlace-color:hover {
    background-color: rgb(253, 47, 226);
}

.enlace-color:focus {
    color: rgba(255, 255, 255, 0.5)
}

.navbar-toggler {
    border: 1px solid var(--primary);
    color: rgba(255, 0, 0, 0);
    padding: 0.25rem 0.5rem;

}

.icoMenu1 {
    width: 2rem;
}

.icon-burger {
    color: var(--primary);

}

.contRedes {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.iconRedes {
    font-size: 1.5rem;
    color: var(--primary);
}

.iconRedes:hover {

    color: var(--secondary);
}

.logo {
    color: var(--light);
    font-family: 'Times New Roman', Times, serif;
    gap: 1rem;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
}

.logo:hover {
    color: var(--primary)
}

.container-fluid {

    padding-bottom: 1rem;
    padding-top: 1rem;
}

/*.carousel-control-next{
    position: initial;
}*/


.navbar-collapse {
    justify-content: space-evenly;
}

.container-color {
    background-color: var(--dark);
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;

}

.enlace-color:hover {
    background-color: var(--primary);
}

.enlace-color:focus {
    color: rgba(255, 255, 255, 0.5)
}

.navbar-toggler {
    border: 1px solid var(--primary);
    color: rgba(255, 0, 0, 0);
    padding: 0.25rem 0.5rem;

}

.contRedes {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.logo {
    color: var(--light);
    font-family: 'Times New Roman', Times, serif;
    gap: 1rem;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
}

.logo:hover {
    color: var(--primary)
}

.logoImg {
    width: 6rem;

}

.container-fluid {

    padding-bottom: 1rem;
}

.textLogo {
    color: var(--primary);

}

/*-------------------BANNER-------------------------------------*/

/*---- Animacion-----*/

.animate__pulse {
    animation-iteration-count: infinite;
}

.contBanner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #04192e;
    background-image: linear-gradient(62deg, #254b70 0%, #161924 100%);
    padding: 1rem 0 2rem 0;
    align-items: center;


}

.logoBanner {
    width: 20rem;
    font-weight: 900;
    font-size: 2.5rem;
    color: var(--primary);


}

.contDatos {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 1rem;
    align-items: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
    justify-content: center;
}

.h1Web2 {
    color: var(--light);
    font-weight: 800;
    text-shadow: 3px 3px 8px rgb(29, 26, 22);
    text-align: center;
}

.TextDatosWeb2 {
    color: var(--secondary);
    font-weight: 500;
}

.contImgTotal {
    display: flex;
    justify-content: center;
}

.imgBanner {


    width: 90%;
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

.BotonDatosWeb2 {
    text-decoration: none;
    background-color: var(--dark);
    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--secondary);
    font-weight: 800;
    box-shadow: 2px 2px 5px rgb(34, 1, 24);

}

.resaltarText {
    color: var(--primary);
    font-weight: 800;
    font-size: 1.8rem;
}

.texMasBoton,
.logoMasH1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media (max-width:768px) {

    .contDatos {
        flex-direction: row;
        width: 90%;
        align-items: flex-start;
    }
}

@media (max-width:550px) {

    .contDatos {
        flex-direction: row;
        width: 90%;
        align-items: flex-start;
        flex-wrap: wrap;
    }


}

/*--------------------------empresa-------------------------*/
.contTotalSectioUno{
    display: flex;
  justify-content: center;
  background-color: var(--terceario);
  padding-top: 1.5rem;
}
.ContSectionUno{
    display: flex;
    width: 70%;
    gap: 3rem;
    align-items: center;

}
.contImgSectionUno{
    width: 180rem;
  
}
.imgSectioUno{
    
width: 100%;
height: auto;
}

.contSectionUNoTex h2 {
    color: var(--primary);
    font-weight: 800;
    font-size: 2.5rem;

}
.ContTiposSectionUnoH3{
    color: var(--primary);
}
.contSectionUNoTex p{
    margin-top: 0.5rem;
    color: rgb(92, 92, 92);
    font-size: 1.2rem;
}
.ContTiposSectionUno{
    margin-top: 1rem;
}
.tiposSectionUno{
    display: flex;
 
    gap: 0.5rem 2rem;
    flex-wrap: wrap;
}
.fa-solid{
    color: var(--primary);
}
.tiposSectionUnoText{
    margin-bottom: 0;
}
@media (max-width:800px) {

    .ContSectionUno{
        flex-direction: column-reverse;

    }
    .contImgSectionUno{
        width: 100%;
    }
    .contSectionUNoTex h2{
        line-height: 2.5rem;
    }

}
@media(max-width:500px){

.contSectionUNoTex h2{
    font-size: 1.8rem;
    line-height: 1.5rem;
}
.contSectionUNoTex p{
    font-size: 1.1rem;
    line-height: 1.4rem;
}
.ContSectionUno{
    width: 98%;
}

}

/*------------------------------servicios-----------------------*/
.servicios {
    opacity: 0;
    /* Comenzamos con opacidad 0 para que la sección esté oculta */
    transition: opacity 1s ease;
    /* Transición suave para la opacidad */
}

.servicios.animacion {
    opacity: 1;
    /* Cambiamos la opacidad a 1 para mostrar la sección */
    /* Aquí puedes agregar cualquier otra animación que desees */
}

.icoService {
    width: 6rem;
    padding: 0.5rem 0 1rem 0;
}

/* el color del svg lo modificas directamente desde el archvo en el editor de codigo. "fill:color que quieras"  esto es linea stroke:"color que quieras"*/
.textServiceH2 {
    text-align: center;
    padding: 1.5rem 0 1rem 0;
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark);
}

.contServices {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0.5rem 0 0.5rem;
}

.tituloService {
    text-align: center;
    font-size: 3rem;
    color: var(--primary);
    font-weight: 800;
    font-size: 2.5rem;
}

.cardService {
 
    border: solid 1px #ddd;
    display: flex;
    width: 1200px;

}

.contTextService {
  
    display: flex;
    width: 1200px;
 
    gap: 4rem;
    align-items: center;
    padding: 1rem;
}

.contTituloH3 {
    display: flex;
    width: 30%;

    justify-content: center;
    /* text-align: center; */
    height: 100%;
    align-items: center;
}

.cardServiceH3 {
     margin-bottom: 1rem;
    color: var(--secondary);
    font-size: 1.5rem; 
    text-align: center;
    font-weight: 800;
}

.contLista {
    display: flex;
    
    width: 70%;

    height: 100%;
    flex-direction: column;
    margin: 0;
}




.cardServiceText {
    padding: 0.5rem;
    line-height: 1.5;
    font-size: 1.1rem;
    text-align: justify;
    color: var(--dark);
    font-weight: 200;
    width: 90%;


}



/*
li {
    list-style-type: none; 
    position: relative;
  }
  
  li::before {
    content: "•"; 
    color: var(--secondary); 
    position: absolute;
    left: -1.2em; 
     
  }*/

@media(max-width:550px) {
    .cardService {
        padding: 1rem;
        width: 100%;

    }

    .cardServiceText {
        width: 95%;


    }

    .contTextService {
        flex-direction: column;

    }

}

@media(max-width:750px) {
    .cardServiceText {
        text-align: center;
    }

    .contTituloH3{
        width: 100%;
    }
    
    
    .contLista{
        width: 100%;
    }
}
@media(max-width:900px){
    .contTextService{
        width: 700px;
        flex-direction: column;
        gap: 1rem;
    }
}

/*-----------------------galeria------------------*/




.row img {
    width: 100%;
    /* Las imágenes ocuparán todo el espacio disponible en su contenedor */
    height: auto;
    /* La altura se ajustará automáticamente para mantener la relación de aspecto */
    object-fit: cover;
    transition: transform 0.3s ease, border-radius 0.3s ease;
}



.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    position: relative;
    padding: 1rem;
}

.row {
    display: flex;
    justify-content: space-between;
    width: calc(33.33% - 10px);
    /* Ancho de cada fila */
    gap: 0.5rem;
}




.row img.selected {
    transform: scale(1.2);
    /* Agrandar la imagen cuando está seleccionada */

    border-radius: 2rem;
    position: fixed;
    /* Fijar la posición de la imagen seleccionada */
    top: 50%;
    /* Centrar verticalmente en relación al borde superior */
    left: 50%;
    /* Centrar horizontalmente en relación al borde izquierdo */
    transform: translate(-50%, -50%);
    /* Centrar completamente */
    z-index: 999;
    /* Asegurar que la imagen esté encima de otros elementos */

    max-width: 95%;
    /* Establece un ancho máximo del 90% del viewport */
    max-height: 95%;
    /* Establece una altura máxima del 90% del viewport */
    padding: 1rem;
    /* Agrega un margen alrededor de la imagen */
    box-sizing: border-box;
    /* Incluye el margen en el cálculo del tamaño total */
}

@media(max-width:550px) {
    .row {
        width: 100%;
    }

    .row img.selected {
        transform: scale(1.1);

        position: fixed;
        top: 0;
        left: 0;
        padding: 2rem;
        z-index: 999;
        max-width: none;
        max-height: none;
        box-sizing: border-box;
    }





}

/*------------------------Contacto------------------------*/
.contTotalContacto {
    background-color: var(--dark);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;

}

.contContactos {
    display: flex;
    align-items: center;


}

.datosContacto {
    color: var(--light);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    background-color: var(--dark);
    box-shadow: 2px 1px 14px rgb(1, 0, 14);
    border-radius: 1rem 0 0 1rem;
    justify-content: center;
    width: 600px;
    height: 450px
}

.datosContacto p {
    font-size: 1rem;
    line-height: 1.5;
    width: 80%;
    text-align: center;
    font-weight: 200;
}

.datosContactoH2 {
    color: var(--primary);
    font-weight: 800;
    font-size: 2.5rem;
}

.contContactoRedes {

    display: flex;
    font-size: 2rem;
    gap: 1.5rem;
}

.contContactoRedes a {
    color: var(--light);
    text-shadow: 12px 2px 7px rgb(1, 0, 14);
}

.contContactoRedes a :hover {
    color: var(--primary);
    scale: 1.1;
    transition: transform 0.3s ease;
}

.mailContacto {
    text-decoration: none;
    color: var(--light);
    text-shadow: 12px 2px 7px rgb(1, 0, 14);


}

.mailContacto:hover {
    color: var(--primary);
    scale: 1.1;
    transition: transform 0.3s ease;
}

.contContactos i {
    margin-right: 0.5rem;
}

.mapsGoogle {
    border-radius: 0rem 1rem 1rem 0;
    justify-content: center;
    box-shadow: 2px 1px 14px rgb(1, 0, 14);
}

@media(max-width:1024px) {

    .datosContacto,
    .mapsGoogle {
        width: 400px;
    }

}

@media(max-width:768px) {

    .datosContacto,
    .mapsGoogle {
        width: 350px;
    }

}

@media(max-width:600px) {

    .datosContacto,
    .mapsGoogle {
        width: 250px;
    }

}

@media(max-width:500px) {
    .iconRedesContacto {
        font-size: 2rem;
    }

    .maps {
        width: 100%;

    }

    .contTotalContacto {
        height: 100%;
        padding: 2rem 0 2rem 0;

    }

    .iconRedes a i {
        font-size: 1.8rem;
    }

    .datosContacto,
    .mapsGoogle {
        width: 450px;
        height: 350px;
    }

    .contContactos {

        flex-direction: column;
    }

    .datosContacto {
        box-shadow: none;

        border-radius: 1rem 1rem 0rem 0rem;
        gap: 1rem;
    }

    .datosContacto p {
        width: 98%;
    }

    .mapsGoogle {

        border-radius: 0;
    }
}

@media(max-width:450px) {

    .datosContacto,
    .mapsGoogle {
        width: 100%;
        height: 380px;
    }

}

@media(max-width:400px) {

    .datosContacto,
    .mapsGoogle {
        width: 320px;

    }

}

@media(max-width:320px) {

    .datosContacto,
    .mapsGoogle {
        width: 300px;

    }

    .datosContacto {
        height: 380px;
        height: 380px;
    }
}

/*----------------Footer---------------------------*/
.footer {
    background-color: #000624;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--light);
    align-items: center;
    padding: 1rem 0 1rem 0;

}

.contLogo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contTextFooter {
    width: 50%;
    text-align: center;
    font-weight: 200;
    line-height: 1.4rem;
}

.line {
    width: 90%;
    border: 0.5px solid var(--dark);

}

.contPubli a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.664);
    font-size: 0.8rem;
    font-weight: 200;
}

.contPubli a:hover {
    color: #A4D53A;
}

.botonUno {
    text-decoration: none;
    background-color: var(--primary);
    padding: 0.3rem;
    border-radius: 5px;
    color: var(--light);
    font-weight: 500;
    display: inline-block;
    line-height: 1.4rem;
    border: 1px solid var(--light);
    margin-bottom: 0.2rem;
}

.logoFooter {
    width: 15rem;
}

@media (max-width:450px) {
    .contTextFooter {
        width: 95%;

    }

}

/*----------------------HORARIOS-----------------------*/
.tituloHorario {
    text-align: center;
    padding: 1.2rem;
    color: var(--dark);
    font-weight: 800;
    font-size: 1.8rem;
}
.bajaTituloHorario{
    text-align: center;
   
}

.contTotalHorario {
    padding: 1rem;


    background-color: rgba(172, 184, 250, 0.63);
}

.contHorario {
    display: flex;
    gap: 2rem;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: center;


}

.spanDia {
    font-size: 1rem;
    font-weight: 800;
}

.contHorario li {
    gap: 0.3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.spanDia,
.spanHorario {
    color: rgb(18, 7, 82)
}

.spanHorario {
    font-weight: 500;
}

ul {
    padding-left: 0;
}