@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    /* --main-color:hsl(72,100%,50%); */
    /* otro celeste hsl(175,77%,45%) #1ac9bb rgb(26,201,187) */
    /* #45b1ff  rgb(69,177,255) */
    /* --main-color:hsl(205,100%,64%);
    --main-color:chartreuse; */
    --main-color: cyan;
    --white:hsl(0,0%,100%);
    --light:hsl(0,0%,60%);
    --black:hsl(222,30%,14%);
    --bg:hsl(223,26%,17%);
    --border:0.1rem solid hsla(0,0%,0%,0.2);
    --shadow:0 0.5rem 1rem hsla(0,0%,0%,0.3);
    --calendario: hsla(0,0%,0%,0.2);
}
*{
    margin: 0;
    /* overflow-x: hidden; */
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif; 
    transition: all 0.2s linear;
   
  
}
/* Generales */
html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 6.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) transparent;
    
}
::-webkit-scrollbar{
    width: 0.5rem;
}
::-webkit-scrollbar-track{
    background: transparent;
}
::-webkit-scrollbar-thumb{
    background: var(--main-color);
    border-radius: 1rem;
}
a{
    text-decoration: none;
    color: currentColor;
}
li{
    list-style: none;
}
button{
    cursor: pointer;
    outline: none;
    border: none;
}

/* Generales de este proyecto */
body{
    background-color: var(--black);
}
.contenedor{
    margin: 0 auto;
    /* Esto es fijo */
    max-width: 1200px;
    padding: 3rem 2rem;
}
.btn{
    display: inline-block;
    margin-top: 1rem;
    padding: 1rem 3rem;
    font-size: 1.8rem;
    color: var(--black);
    text-align: center;
    background-color: var(--white);
    clip-path: polygon(15% 0, 100% 0,85% 100%, 0 100%);
}
.btn:hover{
    clip-path: polygon(0 0, 85% 0,100% 100%, 15% 100%);
}
.titulo{
    text-align: center;
    margin-bottom: 2.5rem;
    font-size:3rem;
    color: var(--white);
}
.titulo span{
    color: var(--main-color);
}

/*######################### Header #########################*/
header{
    position: fixed;
    top:0; right: 0; left: 0;
    z-index: 50;
    box-shadow: var(--shadow);
  
}
header::before{
    content: "";
    position: absolute;
    inset:0;
    background-color: hsla(0,0%,100%,0.1);
    backdrop-filter: blur(80px);
}
header .mostrar-flex{
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
}

header .mostrar-flex .logo{
    font-size: 1.8rem;
}
header .mostrar-flex .logo img{
    width: 2.3rem;
    height:2.3rem;
    margin-right: 0.5rem;

}
header .mostrar-flex .logo span{
    color: white;
    /* color: transparent; */
    font-size: 2.3rem;
    font-weight: 500;
    /* background: linear-gradient(to bottom ,var(--main-color) 50%,darkgreen);
    background-clip: text; */
}
header .mostrar-flex ul{
    display: flex;
    align-items: center;
}
header .mostrar-flex ul a{
    margin-right: 2rem;
    font-size: 1.6rem;
    color: white;
    white-space: nowrap;
}
header .mostrar-flex ul a:hover{
    color: var(--main-color);
}
header .mostrar-flex #menu-btn{
    font-size: 2rem;
    color: var(--white);
    display: none;
}
/*####################### Fin  Header ######################*/

/*######################### Sección Inicio #########################*/
section#inicio{
    text-align: center;
    position: relative;
    overflow: hidden;

}
section#inicio .mostrar-flex{
    padding-top: 8rem;
    padding-bottom: 0;
}
section#inicio .mostrar-flex h1{
    font-size: 17vw;
    color: transparent;
    background: linear-gradient(var(--main-color),transparent);
    background-clip: text;
    position: relative;
    z-index:3;
    margin-bottom: -15%;
    user-select: none;
  
}
section#inicio .mostrar-flex img{
    width: 100%;
    z-index:-1;
}
section#inicio::before,
section#inicio::after{
    content: "";
    position: absolute;
    bottom: 0; left:0;
    width: 200%;
    height: 15%;
    background: url('/imagenes/wave.svg') repeat-x;
    background-size: auto 100%;
}
section#inicio::before{
    animation: wave 5s linear infinite alternate;
}
section#inicio::after{
    animation: wave 5s linear infinite alternate-reverse;
    z-index: -1;
    opacity: 0.4;

}
@keyframes wave {
    0%{
        background-position: 0;
    }
    100%{
        background-position: -100%;
    }
}

/*####################### Fin  Sección Inicio ######################*/

/*######################### Sección Nosotros #########################*/
section#nosotros .fila{

    display: flex;
    flex-wrap: wrap-reverse;
    gap: 2rem;
    align-items: center;
}
 section#nosotros .fila article.contenido{
    /* Tiene 40rem como tamaño inicial y se puede encoger si no hay espacio o expadir si hay mas */
    /* Para limitarlo hay que poner min-width y max-width */
    flex: 1 1 40rem;
}
 section#nosotros .fila article.contenido h3{
    font-size: 3rem;
    color: var(--main-color);
 }

section#nosotros .fila article.contenido p{
line-height: 1.6;
color: var(--light);
font-size: 1.6rem;
padding: 1rem 0;
}
section#nosotros .fila article.contenido .cuadrado-contenedor{
    /* Supongo que es para que todos tengan la misma altura */
 display: grid;
 /* Que se vayan haciendo las columnas que entren en 1fr o al menos como minimo 20rem, menos no */
 /* Como estoy en article.contenido  tiene 40rem como tamaño inicial */
 grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
 gap:2rem;
 margin-top: 2.5rem;
}
section#nosotros .fila article.contenido .cuadrado-contenedor .item{
    text-align: center;
    border-radius: 0.5rem;
    background-color: var(--bg);
    padding: 2rem;
}
section#nosotros .fila article.contenido .cuadrado-contenedor .item span:nth-child(1){
    font-size: 3rem;
    color: var(--main-color);
}
section#nosotros .fila article.contenido .cuadrado-contenedor .item span:nth-child(2){
    display: block;
    margin-top: 2rem;
    font-size: 1.6rem;
    color: var(--white);
}

section#nosotros .fila article.imagen{
    flex: 1 1 40rem;
    height: 50rem;
    overflow: hidden;
    position: relative;
} 
section#nosotros .fila article.imagen img{
    position: absolute;
    top:0;left:0;
    height: 100%;
    width: 100%;
    object-fit: contain;
    mask-image: linear-gradient(to bottom black 70%, transparent 100%);
    opacity: 0;
    animation: imagenSlide 6s ease-in-out infinite;
}
section#nosotros .fila article.imagen img:first-child{
    animation-delay: 3s;
}

@keyframes imagenSlide {
    0%,45%{
        opacity: 1;
        transform: translateY(0);
    }
    50%,95%{
        opacity: 0;
        transform: translateY(20%);
    }
     100%{
        opacity: 1;
        transform: translateY(0);
    }
}
/*####################### Fin  Sección Nosotros ######################*/

/*######################### Sección Servicios #########################*/

section#servicios .caja-contenedora-mostrar-grid{
    /* uso grid cuando quiero controlar el ancho y la altura */
    display: grid;
    /* las columnas tienen un ancho fijo de 30rem. Si entra se pone al lado sino baja */
    /* El maximo posible en grande es 120rem que son 1200px. Entran 3 por el padding del contenedor */
    grid-template-columns: repeat(auto-fit,30rem);
    /* para que las filas siempre tengan la misma altura */
    grid-auto-rows: 1fr;
    align-items:stretch;
    justify-content: center;
    gap:2rem;
}

section#servicios .caja-contenedora-mostrar-grid article{
    position: relative;
    overflow: hidden;
    padding: 1.2rem;
    border-radius: 1rem;
    user-select: none;
  
}

section#servicios .caja-contenedora-mostrar-grid article .contenido{
    border-radius: 1rem;
    padding: 3rem;
    position: relative;
    background-color: var(--bg);
    /* Para que todas las filas tengan la misma altura, por dentro le pongo el flex column */
    display: flex;
    flex-direction: column;
    height: 100%;
  
}
section#servicios .caja-contenedora-mostrar-grid article:is(:hover,.hover){
    background-color: var(--white);
    box-shadow: 0 0.5rem 1rem hsl(0,0%,30%);
    transform: scale(1.01);
    z-index: 1;
}

section#servicios .caja-contenedora-mostrar-grid article:is(:hover,.hover)::before{
 content: "";
 position: absolute;
 inset: -10rem;
 background: conic-gradient(var(--main-color) 0deg, transparent 100deg);
 animation: rotarBorde 2s linear infinite;
}

@keyframes rotarBorde {
  0%{
    transform: rotate(0deg);
    filter:hue-rotate(0deg)
  }  
   100%{
    transform: rotate(-360deg);
    filter:hue-rotate(360deg)
  }  
}
section#servicios .caja-contenedora-mostrar-grid article:is(:hover,.hover) .contenido{
    text-align: center;
}
section#servicios .caja-contenedora-mostrar-grid article .contenido img{
    height: 7rem;
    margin-bottom: 1.5rem;
     
}
section#servicios .caja-contenedora-mostrar-grid article .contenido h3{
    font-size: 2rem;
    color: var(--white);
}
section#servicios .caja-contenedora-mostrar-grid article .contenido p{
    font-size: 1.4rem;
    color: var(--light);
    line-height: 1.6;
    padding: 1rem 0;
    /* absorve el espacio vacío para que todas las filas sean iguales */
    flex-grow: 1;
}
section#servicios .caja-contenedora-mostrar-grid article .contenido a{
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 1.8rem;
    color: var(--white);
    z-index: 5;
}
section#servicios .caja-contenedora-mostrar-grid article .contenido a:hover{
    text-decoration: underline;
    color: var(--main-color);
}

/*####################### Fin  Sección Servicios ######################*/

/*######################### Sección Comparación #########################*/
section#comparacion .fila{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 3rem;
    flex-wrap: wrap;
}
section#comparacion .fila .detalle{
  max-width: 40rem;
}
section#comparacion .fila .detalle h3{
    font-size: 3.5rem;
    color: var(--main-color);
    text-transform: uppercase;
}
section#comparacion .fila .detalle p{
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 1rem 0;
    color: var(--light);
}
section#comparacion .fila .imagen {
    position: relative;
    overflow:hidden;
    /* medida fija para todos los dispositivos */
    width: 40rem;
    height: 30rem;
    border-radius: 0.5rem;
}
section#comparacion .fila .imagen img {
    width: 40rem;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
}
section#comparacion .fila .imagen .s2 {
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
    z-index: 2;
}
section#comparacion .fila .barra{
    position: absolute;
    top:0;
    left: 50%;
    width: 0.4rem;
    height: 100%;
    touch-action: none;
    background-color: var(--main-color);
    border-radius: 1rem;
    cursor: grab;
    z-index: 3;
}
section#comparacion .fila .barra:after{
    content: "⇆";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: var(--black);
    background: var(--main-color);
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*####################### Fin  Sección Comparación ######################*/

/*######################### Sección productos #########################*/
section#productos .mostrar-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(25rem,30rem));
    align-items: center;
    justify-content: center;
    gap:2rem;
}
section#productos .mostrar-grid article .image{
    position: relative;
    overflow: hidden;
    background-color: var(--bg);
    padding: 1.5rem;
    border-radius: 1rem;
    height: 20rem;
}
section#productos .mostrar-grid article .image img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
section#productos .mostrar-grid article .image::before{
    content: "";
    position: absolute;
    inset:0;
    background-color: hsla(0,0%,0%,0.3);
    z-index: 1;
    transition: 0.2s linear;
    opacity: 0;
}
section#productos .mostrar-grid article:is(:hover,.hover) .image::before{
    opacity: 1;
}
section#productos .mostrar-grid article .image .icon{
    position: absolute;
    top: 1rem;
    right: -10rem;
    z-index: 2;
}
section#productos .mostrar-grid article:is(:hover,.hover)  .image .icon{
    right: 1rem;
}
section#productos .mostrar-grid article .image .icon a{
    display:block;
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    font-size: 2rem;
    border-radius: 1rem;
    text-align: center;
    background-color: hsla(0,0%,100%,0.7);
    color: var(--black);
}
section#productos .mostrar-grid article .image .icon a:first-child{
  margin-bottom: 1rem;
}
section#productos .mostrar-grid article .image .icon a:nth-child(1):hover{
    color: var(--main-color);
    background-color: var(--black);
  
}
section#productos .mostrar-grid article .image .icon a:nth-child(2):hover{
    color:orangered;
    background-color: var(--black);
}
section#productos .mostrar-grid article .image .btn{
    position: absolute;
    bottom: -10rem;
    left: 1rem;
    z-index: 2;
}
section#productos .mostrar-grid article:is(:hover,.hover) .image .btn{
    bottom: 1rem;
}
section#productos .mostrar-grid article .detalle{
    text-align: center;
    margin-top: 1rem;
}

section#productos .mostrar-grid article .detalle h3{
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--white);
}
section#productos .mostrar-grid article .detalle p{
    font-size: 1.8rem;
    color: var(--main-color);
}
section#productos .mostrar-grid article .detalle p span{
    text-decoration: line-through;
    color: var(--light);
    font-size: 1.6rem;
    padding-left: 5rem;
}

/*####################### Fin  Sección productos ######################*/

/*######################### Sección Horarios #########################*/



section#horarios .opciones-dia{
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap:1.5rem;
}
section#horarios .opciones-dia button{
    font-size: 1.8rem;
    cursor: pointer;
    background-color: var(--bg);
    color: var(--light);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    user-select: none;
}
section#horarios .opciones-dia button:hover{
    transform: scale(1.05);
}
section#horarios .opciones-dia button.activo{
    background-color: var(--white);
    color:var(--black);
}
section#horarios .mostrar-grid{

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

section#horarios .mostrar-grid article{
    flex:1 1 15rem;
    max-width: 20rem;
    text-align: center;
    margin-top: 2rem;
    
}
section#horarios .mostrar-grid article .dia{
    padding: 1rem 2rem;
    background-color: white;
    border: var(--border);
}
section#horarios .mostrar-grid article .dia h3{
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
section#horarios .mostrar-grid article .dia span{
    white-space: nowrap;
    font-size:1.5rem;
    color:var(--black);
}
section#horarios .mostrar-grid article .canchas{
    background-color: var(--bg);
}
section#horarios .mostrar-grid article .canchas p{
    padding: 1rem 2rem;
    font-size: 1.6rem;
    color:var(--light);
    line-height: 1.4;
    white-space: nowrap;
    border: var(--border);
}
section#horarios .mostrar-grid article .canchas p:is(:hover,.hover){
    background-color: var(--calendario);
    color: var(--black);
}
section#horarios .reservar {
    margin: 1rem auto;
    text-align: center;
  
}
/*####################### Fin  Sección Horarios ######################*/
/*######################### Sección IMC #########################*/
section#imc .fila-flex{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* El valor stretch obliga a los elementos hijos a estirarse para ocupar todo el tamaño disponible del contenedor en ese eje */
    justify-content: space-around;
    gap:2rem;
    
}
section#imc .fila-flex article{
    /* Esta medida, al poner máximo 1200px o 120rem para este sitio por el 62.5% - Hace que con los padding y gap. Se armen dos columnas en computadoras y tablet y en celulares hace el wrap bajando */
    flex: 1 1 40rem;
    padding: 2rem 3rem;
}
section#imc .fila-flex article:first-child h3{
    font-size: 3rem;
    color: var(--white);
}
section#imc .fila-flex article:first-child p{
    font-size: 1.6rem;
    /* La propiedad line-height en CSS controla la altura de cada línea de texto. Cuando se establece en 1.6 (sin unidades), significa que la altura de la línea será 1.6 veces el tamaño de la fuente del elemento, proporcionando un interlineado amplio y muy legible para párrafos */
    line-height: 1.6;
    color: var(--light);
    padding: 1 rem 0;
}
section#imc .fila-flex article:first-child #resultadoIMC,
section#imc .fila-flex article:first-child #resultadoICA
{
    border-radius: 0.5rem;
    text-align: center;
    font-size: 2rem;
    background-color: var(--bg);
    padding: 1rem;
    color: var(--white);
    margin-top: 1rem;
}
section#imc .fila-flex article:last-child{
   text-align: center;
}
section#imc .fila-flex article:last-child input{
    font-size: 1.8rem;
    width: 100%;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    background-color: var(--bg);
    padding: 1.4rem;
    color:var(--white);
}

/*####################### Fin  Sección IMC ######################*/
/*######################### Sección Galería #########################*/

#testimonios .contenedor .contenedor-galeria{
    display: flex;
    justify-content: center;
    align-items: center;
}
section#testimonios .caja-galeria{
    margin: 2rem 5rem 6rem;
    overflow: hidden;
}
section#testimonios .listado article{

    padding: 2rem;
    border-radius: 0.5rem;
    background-color: var(--bg);
    text-align: center;
    user-select: none;
}
section#testimonios .listado article p{
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--light);
}
section#testimonios .listado article .estrellas{
    margin-top:1.5rem;
    margin-bottom: 0.5rem;
}
section#testimonios .listado article .estrellas i{
    font-size: 2rem;
    color:gold;
}
section#testimonios .listado article h3{
   font-size: 1.8rem;
   color: var(--white);
   margin-bottom: 2rem;
   font-weight: 500;
}
section#testimonios .listado article img{
    height: 10rem;
    width: 10rem;
    border-radius: 50%;
    object-fit: cover;
}
.swiper-button-prev,
.swiper-button-next{
    color: var(--main-color)!important;
     transform:  translateY(-50%);
    transition: all 0.3s ease;
}
.swiper-button-prev:hover,
.swiper-button-next:hover{
    transform: scale(1.1)  translateY(-50%);
}


.caja-galeria .swiper-pagination-bullet{
    height: 15px;
    width: 15px;
    overflow: hidden;
    opacity: 1;
    background:var(--light);
}

.caja-galeria .swiper-pagination-bullet-active::before{
  content:"";
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background: var(--main-color);
  transform: scaleX(0);
  transform-origin: left center;
  animation: autoplay-loading 5 linear forwards;
}

.container:hover .caja-galeria .swiper-pagination-bullet-active::before{
    animation-play-state: paused;
}

@keyframes autoplay-loading {
    100%{
        transform: scaleX(1);
    }
}


/*####################### Fin  Sección Galería ######################*/

/*######################### Sección Precios #########################*/

section#precios .opciones-luz{
    margin-bottom: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:1.5rem;
}
section#precios .opciones-luz button{
    font-size: 1.8rem;
    cursor: pointer;
    background-color: var(--bg);
    color: var(--light);
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    user-select: none;
}
section#precios .opciones-luz button:hover{
    transform: scale(1.05);
}
section#precios .opciones-luz button.activo{
    background-color: var(--white);
    color:var(--black);
}
section#precios .contenedor-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30rem,35rem));
    gap:1rem;
    align-items: center;
    justify-content: center;
}
section#precios .contenedor-grid article{
    padding: 2rem;
    border-radius: 0.5rem;
    background-color: var(--bg);
}
section#precios .contenedor-grid article h3{
    font-size: 2.5rem;
    color: var(--white);
    white-space: nowrap;
    font-weight: 500;
    margin-bottom: 2rem;
    /* text-align: center; */
}
section#precios .contenedor-grid article .monto{
    margin: 1,5rem 0;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap:0.5rem;
    background-color: var(--black);
}
section#precios .contenedor-grid article .monto span{
    font-size: 1.6rem;
    color: var(--light);
}
section#precios .contenedor-grid article .monto .precio{
    font-size: 3rem;
    color: var(--white);
}
section#precios .contenedor-grid article .list p{
    padding: 1rem 0;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--light);
}
section#precios .contenedor-grid article .list .fa-check{
    color: chartreuse;
}
section#precios .contenedor-grid article .list .fa-xmark{
    color: orangered;
}
section#precios .contenedor-grid article .btn{
    width: 100%;
    margin-top: 2rem;
}

section#precios .contenedor-grid article:nth-child(2){
    position: relative;
    z-index:1;
    transform: scale(1.1);
    box-shadow: var(--shadow);
    border: 0.4rem solid hsla(0,0%,0%,0.1);
}
section#precios .contenedor-grid article:nth-child(2)::before{
    content: "Popular";
    position: absolute;
    top:1.5rem;
    right: 1.5rem;
    border-radius: 0.5rem;
    background-color: chartreuse;
    color: var(--black);
    padding: 0.5rem 1.5rem;
    font-size: 1.8rem;
}


/*####################### Fin  Sección Precios ######################*/

/*######################### Sección Contacto #########################*/
section#contacto .mostrar-flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap:2rem;
}
section#contacto .mostrar-flex article{
    flex: 1 1 40rem;
}
section#contacto .mostrar-flex article.imagen{
    position: relative;
    overflow: hidden;
}
section#contacto .mostrar-flex article.imagen img{
    width: 100%;
    position: relative;
    z-index: 2;
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    user-select: none;
    pointer-events: none;
}
section#contacto .mostrar-flex article.imagen .loop{
    position: absolute;
    left:0;
    overflow: hidden;
    width: 100%;
    transform: rotateZ(-15deg);
    border-top: 0.2rem solid hsla(0,0%,100%,0.1);
    border-bottom: 0.2rem solid hsla(0,0%,100%,0.1);
    padding: 2rem 0;
    mask-image: linear-gradient(to right,transparent,black 10%, black 90%, transparent);
}
section#contacto .mostrar-flex article.imagen .loop-1{
    top: 25%;
}
section#contacto .mostrar-flex article.imagen .loop-2{
   bottom:15%;
}
section#contacto .mostrar-flex article.imagen .loop .diapositiva{
    display: flex;
    gap: 2rem;
    min-width: 100%;
    will-change: transform;
}
section#contacto .mostrar-flex article.imagen .loop .diapositiva p{
   color:var(--white);
   font-size: 2rem;
   text-wrap: nowrap;
}
section#contacto .mostrar-flex article.imagen .loop .diapositiva p::after{
    content: "\f0e7";
    font-family: 'Font Awesome 5 free';
    font-weight: 900;
    padding-left: 2rem;
}
section#contacto .mostrar-flex .imagen .loop-1 .diapositiva{
   animation: slideFade 15s linear infinite alternate;
}
section#contacto .mostrar-flex .imagen .loop-2 .diapositiva{
    animation: slideFade 15s linear infinite alternate-reverse;
}
@keyframes slideFade {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--move-distance)); }
}
section#contacto .mostrar-flex article form h3{
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 2rem;
    font-weight: 500;
  
}
section#contacto .mostrar-flex article form .mostrar-flex{
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
    margin-bottom: 1.5rem;
  
}
section#contacto .mostrar-flex article form .mostrar-flex .box{
   flex: 1 1 clamp(90%,20rem,1fr);
   margin-bottom: 1rem;
   width: 100%;
}


section#contacto .mostrar-flex article form  p{
   font-size: 1.6rem;
   color: var(--light);
  margin-bottom: 0.2rem;
}
section#contacto .mostrar-flex article form .mostrar-flex .input{
    flex: 1 1 clamp(90%,20rem,1fr)
}
/* afecta a todos los tipos input, incluyendo los que están afuera del mostrar-flex */
section#contacto .mostrar-flex article form  .input{
    border-radius: 0.5rem;
    border: 0.2rem solid hsla(0,0%,100%,0.3);
    font-size: 1.8rem;
    padding: 1.4rem;
    background: none;
    color: var(--white);
    width: 100%;
}


section#contacto .mostrar-flex article form  .box-2 .input{
 
   flex:1 1 40rem;
   margin-bottom: 1rem;
}


section#contacto .mostrar-flex article form textarea{
    margin-top: 1rem;
    width: 100%;
    height: 15rem;
    resize: none;
}

/*####################### Fin  Sección Contacto######################*/

/*######################### Sección Contacto-info #########################*/
section#contacto-info .contenedor-grid{

    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(27rem,1fr));
    grid-auto-rows:minmax(8rem,auto);
    gap:2rem;
  
}
section#contacto-info .contenedor-grid article{
    display: flex;
    gap:1.5rem;
    background-color: var(--bg);
    border-radius: 0.5rem;
    padding: 1.5rem;
}
section#contacto-info .contenedor-grid article i{
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    font-size: 2rem;
    background-color: var(--white);
    color: var(--black);
    border-radius: 0.5rem;
}
section#contacto-info .contenedor-grid article p:nth-child(1){
    font-size: 1.6rem;
    color: var(--white);
    white-space: nowrap;
    margin-bottom: 0.5rem;
}
section#contacto-info .contenedor-grid article p:nth-child(3){
    font-size: 1.6rem;
    color: var(--main-color);
    white-space: nowrap;
  
}
section#contacto-info .contenedor-grid article a{
    font-size: 1.6rem;
    color: var(--main-color);
    white-space: nowrap;
    margin-bottom: 0.5rem;
}
section#contacto-info .contenedor-grid article a:hover{
    text-decoration: underline;
}   
/*####################### Fin  Sección Contacto-info ######################*/

footer {
    background:url("/imagenes/footer.png") hsla(222,95%,5%,0.9) no-repeat center/cover fixed;
    background-blend-mode: overlay;
    text-align: center;

}
footer article h3{
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 1.5rem;
    font-weight: 500;
}
footer article p{
    color: var(--main-color);
    font-size: 2rem;
}
footer article ul{
    padding: 2rem 0;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:1.5rem;
    border-top: 0.2rem solid hsla(0,0%,100%,0.2);
    border-bottom: 0.2rem solid hsla(0,0%,100%,0.2);
}
footer article ul a{
    padding: 0.5rem 1.5rem;
    font-size: 1.6rem;
    color: var(--black);
    background-color: hsla(0,0%,100%,0.6);
    border-radius: 0.5rem;
}
footer article ul a :hover{
    background-color: var(--white);
}

footer form{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
footer form .input{
    padding: 1rem 1.5rem;
    padding-right: 5rem;
    border-radius: 5rem;
    width: 30rem;
    font-size: 1.8rem;
    color:var(--black);
    outline: none;
    border: none;
}
footer form .button{
    padding: 1rem 2rem;
    font-size: 1.8rem;
    color:var(--black);
    background-color: var(--main-color);
    border-radius: 5rem;
    margin-left: -5rem;
    outline: none;
    border: none;
    cursor: pointer;
}
footer form .button:hover{
    background-color: var(--light);
    color: var(--white);
}
footer .redes a{
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2.5rem;
    background-color: hsla(0,0%,100%,0.6);
    color: var(--black);
    margin: 0 0.2rem;
    border-radius: 50%;
}
footer .redes a:hover{
    background-color: var(--main-color);
}

footer .creditos{
    background-color: hsla(0,0%,100%,0.1);
    color: var(--white);
    padding: 2rem;
    font-size: 1.6rem;
    line-height: 1.4;
}
footer .creditos span{
    color: var(--main-color);
}

/*######################### Sección Medias querys #########################*/

@media (max-width:1200px) {
    html{
     font-size: 55%;
    }
    
}
@media (max-width:768px) {
  header .mostrar-flex #menu-btn{
    display: inline-block;
    cursor: pointer;
  }
   header .mostrar-flex #menu-btn .fa-xmark{
    transform: rotate(180deg);
   }
  header .mostrar-flex ul{
    position: absolute;
    top:100%;
    left:0;
    right: 0;
    background: hsla(0,0%,100%,0.1);
    backdrop-filter: blur(79px);
    padding: 5rem 3rem;
    border-top: var(--border);
    display: flex;
    flex-direction: column;
    align-items: start;
    gap:1.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  
  }
   header .mostrar-flex ul.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%,0 0);
   }
   header .mostrar-flex ul li {
    border-radius: 0.5rem;
    padding: 1.5rem;
    width: 15rem;
   
   }
    header .mostrar-flex ul li:hover {
        background-color:hsla(0,0%,0%,0.3);
    }
    .swiper-button-prev,
    .swiper-button-next{
       display: none; 
    }
    section#precios .contenedor-grid{
        gap:2rem;
    }
    section#precios .contenedor-grid article:nth-child(2){
        transform: scale(1);
        box-shadow: none;
    }
    footer form .input{
        width: 20rem;
      
    }
}
@media (max-width:450px) {
    html{
     font-size: 50%;
    }
    section#nosotros .fila article.contenido .cuadrado-contenedor{
        grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
    }
    section#comparacion .fila .detalle h3{
        font-size: 2.8rem;
    }
    section#comparacion .fila .imagen {
        width: 30rem;
    }
      section#comparacion .fila .imagen img {
        width: 30rem;
      }
    
}
/*####################### Fin  Sección Medias querys ######################*/