@font-face {
  font-family: 'Alumni Sans';
  src: url('/fonts/AlumniSans-Regular.ttf') format('truetype'),
       url('/fonts/AlumniSans-Black.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
}

:root {
  --verde-oscuro: #348236;
  --verde-claro: rgba(52, 130, 54, 0.6); /* 60% de opacidad */
  --azul: #022365;
  --gris-claro: #D9D9D9;
  --gris-input:#F5F5F5;
  --gris-oscuro:#AAAAAA
}

body {font-family: 'Roboto', montserrat;}
h1, h2, h3, h4, h5, h6 {
  font-family:'Alumni Sans', sans-serif;;
  font-weight: 900;
}

h1{
font-family: Alumni Sans;
font-weight: 900;
font-style: Black;
font-size: 100px;
line-height: 90px;
letter-spacing: 0%;
text-align: center;
text-shadow: 3px 8px 2.6px  #000000B2;
color:white;
}
h2{font-family: Montserrat;font-weight: 600;font-style: SemiBold;font-size: 30px;line-height: 100%;letter-spacing: 0%;color:white;text-align: center;text-shadow: 0px 4px 4px #00000099;
}
h3{font-family: Montserrat;font-weight: 600;font-style: SemiBold;font-size: 2.2em;line-height: 100%;letter-spacing:0%;text-align: center;color:var(--gris-claro)}

h4{ font-family: Montserrat;font-weight: 600;font-style: SemiBold;font-size: 25px;line-height: 100%;letter-spacing: 0%;text-align: center;text-transform: uppercase;color:var(--gris-claro)}


a, a.nav-link {color: white;text-decoration: underline;}

/*BASE*/
#whatsapp{
    height: 100px;
    width: 100px;
    position: fixed;
    bottom: 8vh;
    right: 5vw;
    background-image: url(/static/nueva_web/imgs/whatsapp_logo.png);
    background-size: cover;
    z-index: 10;
}


/* MENU */
#menu{position:absolute;width: 100%;z-index: 100;}
/* Transition effect for smooth hide/show */
#menu.navbar {
  transition: top 0.4s;
}
#menu .navegacion{ display: flex;list-style: none;padding: 0;margin: 0; color:white;width: 100%;justify-content: space-between;font-size: 1.25em;}
#menu a {text-decoration: none;text-align: center;}
#logo { background-image: url(/static/nueva_web/imgs/logo/LogoCentro1.png);
    background-size: contain;
    width: 100%;
    height: 25vh;
    background-position: center;
    background-repeat: no-repeat;}
.btn-redondeado {
  padding: 15px 60px;
  background-color: var(--verde-oscuro); /* color del botón */
  color: white;
  border: none;
  border-radius: 60px; /* redondeado */
  font-size:1.25em;
  cursor: pointer;
  transition: 0.3s;
  z-index: 1;
  box-shadow: 0px 4px 4px 0px #00000040;
}
.btn-redondeado:hover {
  background-color: var(--verde-claro); /* color al pasar el mouse */
}
#menu .navegacion .asociate {height: 1px;margin: 0 5rem;}

/*INICIO*/
#historiaModal.modal {font-size: 1.2em;}
#historiaModal.modal .btn-close {width: 8.5rem;height: 3.5rem;opacity: 1;background: none;color: white;text-align: center;margin: 1rem 1rem 0rem 0rem;border-radius: 0;display: flex;justify-content: center;}
#historiaModal.modal .btn-close:hover {text-shadow: 0px 4px 4px #1e6b0570;}
#historiaModal.modal .btn-close i {font-size: 2em;color:var(--verde-oscuro);}
#historiaModal.modal .modal-dialog {max-width: 58vw;}
#historiaModal.modal .modal-header {border-bottom: none;}
#historiaModal.modal .modal-body {padding: 2rem 0rem 5rem 0rem;}
#historiaModal.modal p {margin-bottom:2rem;font-style: italic;}
.nav-link:focus, .nav-link:hover {color: darkgrey;}
.navbar-toggler {color: var(--verde-oscuro);background-color: whitesmoke;}

@media(max-with: 991px) {
  #menu li, #menu li a {color: var(--verde-oscuro);}
  #menu li.seleccionado a{color: white;}
  #menu li.seleccionado {
      box-shadow: 0px 4px 4px 0px #00000040;
    padding: 0.2rem 2.2rem;
    background-color: var(--verde-oscuro); /* color del botón */
    color: white;
    border: none;
    border-radius: 60px; /* redondeado */
    cursor: pointer;
  }
}
#juridica-inicio{background-color: var(--verde-oscuro);
height: 20vh;
position: absolute;
bottom: -1rem;}
#juridica-inicio p{font-family: Montserrat;font-weight: 500;font-style: Medium;font-size: 20px;leading-trim: NONE;line-height: 100%;letter-spacing: 0%;text-align: center;color:var(--gris-claro)}

/*SECCION SALONES*/
#salones{height: 100vh;}
 #salones #contenedor-superior{background-color: var(--verde-oscuro); height:30vh}
#salones #contenedor-superior h4{text-shadow: 0px 4px 4px #00000040;}
#salones #contenedor-superior p{font-family: Montserrat;font-weight: 400;font-style: Regular;font-size: 22px;line-height: 100%;letter-spacing: 0%;text-align: center;color:var(--gris-claro);margin:auto}
#salones h2{font-size: 2rem;color:var(--azul);text-shadow: none; text-align:left}
#salones p{width:100%;font-style: italic;text-align: center;}
#salones .col-derecha{ margin: auto;}
#salones .col-derecha img{ width: 100%;height: 55vh;border-radius: 45px;opacity: 1;margin-right:8rem;}
#salones a.btn.btn-redondeado{background-color: var(--azul);color: white;position: relative;bottom: 7rem;left: -32rem;}
/*SECCION ACTIVIDADES*/
#actividades {height: 100vh}
#actividades .image-container .natacion .renglon, #actividades .image-container .gimnasio .renglon {top:29vh;width: 60%;z-index: 0;height: 1rem;}
#actividades .image-container .natacion .imagen, #actividades .image-container .gimnasio .imagen {width: 60%;height:30vh;background-size: cover;background-position-y: center;}
#actividades .image-container .natacion .imagen{margin-right: 3rem;background-image:url(/static/nueva_web/imgs/actividad.png);}
#actividades .image-container .natacion .renglon{margin-right: 3rem;background-color: var(--verde-oscuro);}
#actividades .image-container .natacion .btn-redondeado{margin-right: 3rem;top:35vh;left: calc(70% - 10.5rem);width: 15rem;}
#actividades .image-container .gimnasio .btn-redondeado{margin-left:3rem;top: 35vh;left: calc(30% - 7.5rem);width: 15rem;background-color: var(--azul);}
#actividades .image-container .gimnasio .imagen{margin-left:3rem;background-image:url(/static/nueva_web/imgs/actividad2.jpeg);}
#actividades .image-container .gimnasio .renglon{margin-left:3rem;background-color: var(--azul);}
#actividades .image-container .background-imagen{background-color: #00000070;width: 60%;height: 30vh;z-index: 11;color: white;}
#actividades .image-container .natacion .background-imagen {margin-right:3rem;}
#actividades .image-container .gimnasio .background-imagen {margin-left:3rem;}
#actividades .icono-actividad {font-size: 5em;margin-bottom: 0.5rem;}
#actividades a{font-size:25px;text-shadow: 0px 4px 4px #00000040;}
#actividades #titulo-actividades {text-shadow: none;}
#actividades .modal {font-size: 1.2em;}
#actividades .modal .btn-close {width:1.5rem;height:1.5rem;opacity: 1;background: #E74C3C;color: white;text-align: center;margin: -1rem 1rem 0rem auto;border-radius: 0;box-shadow: 0px 4px 4px 0px #00000040;display: flex;justify-content: center;}
#actividades .modal .btn-close:hover {box-shadow: 0px 4px 4px 2px #ed143d70;}
#actividades .modal .btn-close i {font-size: 1.2em;}
#actividades .modal .modal-dialog {max-width: 70vw;}
#actividades .modal .modal-header {border-bottom: none;}
#actividades .modal .modal-body {padding: 5rem 7rem 5rem 7rem;}
#actividades .modal .modal-dialog .modal-body .d-flex{padding: 4rem;}

/*SECCION COLONIA*/
  #colonia{
        background-image: url(/static/nueva_web/imgs/colonia_desktop.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: -40rem;
    }
    #colonia .contenedor-azul{position:relative;top: 0;left: 0;width: 40%;height: 80vh;padding-top: 5%;}
    #colonia .sticker{background-image:url(/static/nueva_web/imgs/sticker.png);
        background-repeat: no-repeat;
        width: 25rem;
        position: absolute;
        height: 15rem;
        top: -6%;
        left: -26%;
        background-size: contain;
        transform: rotate(-15.69deg);
    }
    #colonia .contenedor-leyenda{background-color:var(--azul);height:50vh}
    #colonia .contenedor-leyenda p{
      color:white;
      font-family: Montserrat;
      font-weight: 500;
      font-style: Medium;
      font-size: 25px;
      line-height: 100%;
      letter-spacing: 0%;
    }
    #colonia .contenedor-leyenda h3{color:white;line-height:0;margin-bottom:2rem}
    
    #colonia .btn-redondeado{background-color:white;color:var(--azul)}

    #coloniaModal.modal .btn-close {width: 8.5rem;height: 3.5rem;opacity: 1;background: none;color: white;text-align: center;margin: 1rem 1rem 0rem 2rem;border-radius: 0;display: flex;justify-content: center;box-shadow: none;}
    #coloniaModal.modal .btn-close:hover {text-shadow: 0px 4px 4px #1e6b0570;}
    #coloniaModal.modal .btn-close i {font-size: 2.5em;color:var(--verde-oscuro);}
    #coloniaModal.modal .modal-dialog {max-width: 70vw;}
    #coloniaModal.modal .modal-header {border-bottom: none;}
    #coloniaModal.modal .modal-body {padding: 2rem 7rem 0rem 12rem;}
    #coloniaModal .swiper {
        width: 100%;
        height: 15rem;
        margin: 3rem auto 0 auto;
    }

    #coloniaModal .swiper-wrapper {
        margin-left: -7rem;
    }

    /* Slides individuales */
    #coloniaModal .swiper-slide {
        width: 11rem;       /* Ancho fijo para coverflow */
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        overflow: hidden;
        border-radius: 0;
    }

    /* Imagen dentro de la slide */
    #coloniaModal .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
    }

    /*MODAL ASOCIATE*/
  #asociate .modal-dialog{width: 80vw;max-width: 80vw;}
  #asociate .modal-dialog span{color:var(--verde-oscuro);font-size: 25px;}
  #asociate .btn-redondeado{width:20rem;font-size: 25px;}

/*CONTACTO*/

.input_text,.input_message_text{
  height: 8vh;
  background-color: var(--gris-input);
  border-color: var(--gris-oscuro);
  border-radius: 20px;
}
textarea.form-control{height: 16vh;padding-top: 1em;}
label{
  font-family: Montserrat;
  font-weight: 500;
  font-size: 1.2em;
  line-height: 100%;
  margin-bottom: 2vh;
}
span.required{color:var(--verde-oscuro);font-size: 25px;}

#contacto .btn-change-form {border-left: solid 1em var(--verde-oscuro);opacity:0.5;cursor: pointer;}
#contacto .active-form {opacity: 1;}
#contacto .btn-enviar {width: 20rem;font-size: 25px;}

@media(max-width: px) {
  /* MENU 1200 */
  #menu .navegacion .asociate {margin: 0 1rem;}
}

@media(max-width: 991px) {
  /* MENU 991 */
  a, a.nav-link {color: var(--verde-oscuro);}
  #menu .navegacion { background: white; border: 1px solid var(--verde-oscuro); padding: 0.5rem;}
  #menu .navegacion .asociate {height: auto;margin: 2rem 2rem;}
  #menu .navegacion .asociate .colonia {text-align: center;padding-top: 1rem;}
}