/* Importando fuente 'Quicksand-Bold' */
@font-face {
    font-family: 'Quicksand-Bold';
    src: url('fuentes/Quicksand-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* Importando fuente 'DynaPuff-Regular' */
@font-face {
    font-family: 'DynaPuff-Regular';
    src: url('fuentes/DynaPuff-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Importando fuente 'SourGummy-Regular' */
@font-face {
    font-family: 'SourGummy-Regular';
    src: url('fuentes/SourGummy-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.caja_titulo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
}

.caja_titulo h1 {
    margin-left: 25px;
}

.caja_titulo img {
    border-radius: 10px;
    width: 12%;
}


h1 {
    text-align: center;
    font-family: 'DynaPuff-Regular';
    font-size: 3.5rem;
    color: #9CE0DB;
    text-shadow:
    -3px -3px 0 #205C3B,
    -3px  0px 0 #205C3B,
    -3px  3px 0 #205C3B,
     0px -3px 0 #205C3B,
     0px  3px 0 #205C3B,
     3px -3px 0 #205C3B,
     3px  0px 0 #205C3B,
     3px  3px 0 #205C3B,
     
    -2px -3px 0 #205C3B,
    -3px -2px 0 #205C3B,
    -2px  3px 0 #205C3B,
    -3px  2px 0 #205C3B,
     2px -3px 0 #205C3B,
     3px -2px 0 #205C3B,
     2px  3px 0 #205C3B,
     3px  2px 0 #205C3B,

    -1px -3px 0 #205C3B,
    -3px -1px 0 #205C3B,
    -1px  3px 0 #205C3B,
    -3px  1px 0 #205C3B,
     1px -3px 0 #205C3B,
     3px -1px 0 #205C3B,
     1px  3px 0 #205C3B,
     3px  1px 0 #205C3B;
}

h2 {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'SourGummy-Regular';
    color: #9CE0DB;
    letter-spacing: 5px;
    text-shadow:
    -3px -3px 0 #205C3B,
    -3px  0px 0 #205C3B,
    -3px  3px 0 #205C3B,
     0px -3px 0 #205C3B,
     0px  3px 0 #205C3B,
     3px -3px 0 #205C3B,
     3px  0px 0 #205C3B,
     3px  3px 0 #205C3B,
     
    -2px -3px 0 #205C3B,
    -3px -2px 0 #205C3B,
    -2px  3px 0 #205C3B,
    -3px  2px 0 #205C3B,
     2px -3px 0 #205C3B,
     3px -2px 0 #205C3B,
     2px  3px 0 #205C3B,
     3px  2px 0 #205C3B,

    -1px -3px 0 #205C3B,
    -3px -1px 0 #205C3B,
    -1px  3px 0 #205C3B,
    -3px  1px 0 #205C3B,
     1px -3px 0 #205C3B,
     3px -1px 0 #205C3B,
     1px  3px 0 #205C3B,
     3px  1px 0 #205C3B;
}

.titulos_h2 {
    margin-top: 3%;
}

h3 {
    font-family: 'Quicksand-Bold';
    font-size: 1.6rem;
    text-align: center;
    margin-top: 2%;
}


p, a, span {
    font-family: 'Quicksand-Bold';
    font-size: 0.9rem;
}

body {
    background-image: url('imagenes/fondo.webp');
    background-size: cover;        /* Ajusta la imagen al tamaño de la ventana */
    background-repeat: no-repeat;  /* Evita que se repita */
    background-attachment: fixed;
    background-position: center;
}

.caja_imagen_fachada {
    display: block;
    text-align: center;
}

.caja_imagen_fachada img {
    top: 20px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    width: 30%;
    cursor: zoom-in;
}

.caja_contacto {
    display: flex;
    flex-direction: column;
    text-align: center;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    align-items: center;
    border-radius: 10px;
    width: 20%;
    margin: 40px auto; /* Centro horizontalmente */
    padding: 15px;
    overflow: auto;
}




.linea_contacto {
    display: flex;
    align-items: center;
    gap: 8px;
}

.linea_contacto svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0; /* Evita que el ícono se encoja */
}


.caja_equipo {
    display: block;
    text-align: center;
}

.caja_texto {
    text-align: center;
    width: 30%;
    margin: 0 auto;
    margin-top: 2%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
    padding: 15px;
}

.caja_texto_novedades {
    text-align: center;
    width: 20%;
    margin: 0 auto;
    margin-top: 2%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(156, 224, 219, 0.5); /* #9CE0DB con 50% de opacidad */
    border: 3px solid #205C3B;
    border-radius: 10px;
    padding: 15px;
}

.caja_equipo img {
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    width: 25%;
}

.caja_redes {
    display: flex;
    justify-content: center;
    width: 15%;
    margin: 40px auto; /* Centrar horizontalmente */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
    padding: 15px;
}

.linea_redes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.linea_redes img {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex-shrink: 0; /* Evita que el ícono se encoja */
}

.caja_mapa {
    display: block;
    text-align: center;
    margin-bottom: 2%;
}

.caja_mapa iframe {
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.linea_servicios {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    margin-left: 20%;
    margin-right: 20%;
}

.caja_texto_servicios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding-right: 20px;

    min-width: 280px;
}

.linea_servicios p {
    text-align: center;
}

.linea_servicios span {
    color: black;
    background-color: #D3D3D3;
    border: 2px solid  #D3D3D3;
    border-radius: 10px;
    padding: 5px;
}

.imagen_servicio {
  position: relative;
  width: 450px;
  height: 250px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  float: inline-start;
  margin-right: 20px;
  border: 3px solid black;

  flex-shrink: 0; /*Evita que la imagen se encoja al usar flex en el div general*/
}

.imagen_servicio img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  flex-shrink: 0;
}




/* Carrusel instalaciones */
.carousel_dos, .carousel_tres, .carousel_uno {
  position: relative;
  width: 600px;
  height: 400px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.carousel_dos-image, .carousel_tres-image, .carousel_uno-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.carousel_tres video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: black;
    cursor: pointer;
}

.carousel_dos-image.active, .carousel_tres-image.active, .carousel_uno-image.active {
  display: block;
}

.caja_instalaciones, .caja_eventos, .caja_actividades {
    width: 40%;
    margin: 40px auto;
}

.caja_texto_instalaciones, .caja_texto_eventos {
    width: 25%;
    margin: 40px auto;
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
}

.caja_instalaciones p, .caja_eventos p {
    text-align: center;
    font-size: 1.4rem;
    padding: 10px;
}

.linea_carousel_dos, .linea_carousel_tres, .linea_carousel_uno {
    display: flex;
    margin: auto;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.caja_texto_actividades {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    margin-top: 3%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
    padding: 15px;
}

button.prev_dos,
button.next_dos,
button.prev_tres,
button.next_tres,
button.prev_uno,
button.next_uno {
    background-color: white;
    border: 0px solid white;
    border-radius: 10px;
    font-size: 2.5rem;
    color: black;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    padding: 20px;
    padding-top: 12px; /* Existe un micro espacio en el top y con este arreglo se ajusta */
}


/* RESPONSIVE TAMAÑO MEDIANO */
@media (max-width: 1462px) {
    .imagen_servicio {
        height: auto;
        flex-shrink: 0;
    }
}


/* RESPONSIVE */
/* Estilo para móviles */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

/* En formato movil el titulo desaparece */
.caja_titulo h1 {
    display: none;
}

.caja_titulo img {
    width: 55%;
    border-radius: 10px;
}

p, a {
    font-family: 'Quicksand-Bold';
    font-size: 1rem;
}

span {
    font-family: 'Quicksand-Bold';
    font-size: 0.9rem;
}

h2 {
    font-size: 40px;
}

.titulos_h2 {
    margin-top: 15%;
}

h3 {
    margin-top: 8%;
}

.caja_imagen_fachada img {
    top: 20px;
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    height: 70%;
    width: 70%;
    cursor: zoom-in;
}

.caja_contacto {
    display: block;
    flex-direction: column;
    text-align: center;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    align-items: center;
    border-radius: 10px;
    width: 70%;
    margin: 40px auto;
    padding: 15px;
    padding-right: 10%;
    overflow: auto;
}


.caja_equipo img {
    border-radius: 10px;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    cursor: zoom-in;
    height: 80%;
    width: 80%;
}

.caja_texto {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 7%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
    padding: 15px;
}

.caja_texto_novedades {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 7%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(156, 224, 219, 0.5); /* #9CE0DB con 50% de opacidad */
    border: 3px solid #205C3B;
    border-radius: 10px;
    padding: 15px;
}

.linea_servicios {
    display: block;
    align-items: normal;
    justify-content: center;
    height: 100%;

    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    margin-left: 10%;
    margin-right: 10%;

    padding: 15px;
}

.imagen_servicio {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 0px solid white;
    object-fit: cover;
    margin-bottom: 1rem;
}

.imagen_servicio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caja_texto_servicios p {
    text-align: left;
    margin-left: 5%;
    margin-right: 5%;
}

.caja_mapa iframe {
    width: 70%;
    height: 70%;
}

button.prev_dos,
button.next_dos,
button.prev_tres,
button.next_tres,
button.prev_uno,
button.next_uno {
    background-color: white;
    border: 0px solid white;
    border-radius: 10px;
    font-size: 1.5rem;
    color: black;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    padding: 20px;
    padding-top: 12px; /* Existe un micro espacio en el top y con este arreglo se ajusta */
}


/* Carrusel instalaciones */
.carousel_dos, .carousel_tres, .carousel_uno {
  position: relative;
  width: 400px;
  height: 200px;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

.carousel_dos-image, .carousel_tres-image, .carousel_uno-image {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.carousel_dos-image.active, .carousel_tres-image.active, .carousel_uno-image.active {
  display: block;
}

.caja_instalaciones, .caja_eventos, .caja_actividades {
    width: 100%;
    margin: 40px auto;
}

.caja_texto_instalaciones, .caja_texto_eventos {
    width: 50%;
    margin: 40px auto;
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
}

.caja_instalaciones p, .caja_eventos p {
    text-align: center;
    font-size: 1.4rem;
    padding: 10px;
}

.linea_carousel_dos, .linea_carousel_tres, .linea_carousel_uno {
    display: flex;
    /* margin: auto; */
    align-items: center;
    gap: 20px;
    text-align: center;
}


.caja_texto_actividades {
    text-align: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 7%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
    padding: 15px;
}

.caja_redes {
    display: flex;
    justify-content: center;
    width: 70%;
    margin: 40px auto; /* Centrar horizontalmente */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
    background-color: rgba(255, 255, 255, 0.7); /* blanco con 50% de opacidad */
    border-radius: 10px;
    padding: 15px;
}

.caja_redes img {
    width: 30px;
    height: 30px;
    padding-right: 5px;
}

}