/*Hexagonos*/

.container-hexagonos{
  background: linear-gradient(180deg, #FFF8DC 0%, #FAEBCD 100%);
}

.hex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  padding-bottom: 250px;
  padding-top: 0px;
  margin-bottom: 0px;
}

.hex-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.hex-row-1{
  position: relative;
  bottom: -60px;
}

.hex-row-2{
  position: relative;
  top: -30px;
}

.hex-row-3{
  position: relative;
  top: -120px;
}

.hex-row-4{
  position: absolute;
  bottom: 60px;
}

div.hexagono-ext{
  width: 330px;
  height: 384px;
  overflow: hidden;
  position: relative;
}

div.hexagono{
  width: 330px;
  height: 384px;
  background-size: cover !important;
  overflow: hidden;

}

div.hex-top{
  width: 0;
  height: 0;
  border-left: 165px solid transparent;
  border-right: 168px solid transparent;
  border-bottom: 95px solid rgba(0,0,0,0);
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

div.hex-center{
  width: 100%;
  height: 194px;
  position: relative;
  padding: 10px 20px;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

div.hex-center-int{
  height: 100%;
  overflow: hidden;
}

div.hex-bottom{
  width: 0;
  height: 0;
  border-left: 165px solid transparent;
  border-right: 168px solid transparent;
  border-top: 95px solid rgba(0,0,0,0);
  /*opacity: 0;*/
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

span.hex-intro{
  position: relative;
  z-index: 10;
  color: var(--cafe);
  text-align: center;
  display: block;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-mas{
  background: var(--crema);
  padding: 5px 20px;
  position: absolute;
  border-radius: 5px;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 10;
  font-size: 16px;
  font-weight: 300;
  text-align: center;
  display: inline-block;
  color: var(--cafe);
  border: 2px solid var(--cafe);
  margin-top: 10px;
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-title{
  position: absolute;
  bottom: 50px;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  left: 50%;
  transform: translate(-50%, 0);
  font-weight: 400;
  font-size: 18px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-active div.hex-top{
  border-bottom: 95px solid var(--crema_opacity_90);
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-active div.hex-center{
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-active div.hex-bottom{
  border-top: 95px solid var(--crema_opacity_90);
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-active .hex-title{
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-active .hex-intro,
.hex-active .hex-mas{
  opacity: 1;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-active .hex-center{
  background: var(--crema_opacity_90);
  opacity: 1;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-over{
  display: none !important;
  position: absolute;
  top: 20px;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  background: var(--negro_opacity_80);
  width: 50px;
  border-radius: 5px;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.hex-over img{
  width: auto;
  height: 36px;
  position: relative;
  top: -5px;
}

.hex-active .hex-over{
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

img.preview-img{
  height: auto;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
}

.tipo-animal{
  padding: 0px 10px;
}

.tipo-animal a{
  display: block;
}

.animal-nombre{
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  text-decoration: none;
  color: var(--crema);

}

.container-inicio-galerias{
  background: linear-gradient(110deg, var(--negro_opacity_60) 20%,
  var(--negro_opacity_60) 100%),
  url('../img/inicio-galerias-bg.webp') no-repeat center top;
  background-size: cover;
}

.ul-inicio-galerias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Alinea horizontalmente */
  gap: 10px; /* Espaciado entre elementos */
  padding: 0;
  list-style: none;
}

.ul-inicio-galerias li {
  flex: 1 1 calc(20% - 10px); /* 4 columnas (25% cada una menos el espacio del gap) */
  max-width: 20%; /* Evita que crezca más del 25% */
  min-height: 160px; /* Ajuste de altura uniforme */
}

.ul-inicio-galerias li div {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.link-seccion{
  display: inline-block;
  padding: 10px 20px;
  width: auto;
  font-size: 18px;
  font-weight: 400;
  margin: 0px 5px;
  border-radius: 5px;
  min-width: 120px;
  text-decoration: none;
  font-weight: 500;
}

.link-seccion svg{
  margin-right: 5px;
  position: relative;
  top: -1px;
}

.div-enlace-ir{
  text-align: right;
  padding-right: 100px;
  position: relative;
  height: 86px;
}

.container-noticias{
  position: relative;
}

.container-noticias .enlace-back{
  position: absolute;
  right: 50px;
  top: 20px;
}


.enlace-ir{
  display: inline-block;
  padding: 10px 20px;
  width: auto;
  font-size: 18px;
  font-weight: 400;
  margin: 0px 5px;
  border-radius: 5px;
  min-width: 130px;
}

.enlace-visita{
  margin-top: 20px;
}

.container-hexagonos{
  position: relative;
}

.container-hexagonos .sub-titulo{
  position: absolute;
  left: 150px;
  top: 140px;
  text-transform: uppercase;
  display: inline-block;
  width: auto;
  font-size: 50px;
  width: 280px;
  line-height: 50px;
}



.div-sub-titulo2{
  position: absolute;
  right: 150px;
  top: 140px;
  display: inline-block;
  width: 210px;
  text-align: center;
}

.div-sub-titulo2 .sub-titulo2{
  font-size: 36px;
  line-height: 30px;
}

.sub-titulo2-img{
  width: 230px;
  height: auto;
  margin-bottom: 10px;
}

.enlace-back{
  font-size: 0px;
  display: inline-block;
  width: 46px;
  height: 46px;
  background: url("../img/regresar.png") var(--rojo) center center no-repeat;
  background-size: 40px auto;
  position: absolute;
  border-radius: 5px;
}

.container-inicio-sea-amigo{

}

.row-inicio-reserva-sea-amigo{
  display: flex;
}

.div-inicio-rsa{
  width: 50%;
  display: flex;
}

.div-inicio-rsa .div-col-rsa-iz{
  width: 35%;
}

.div-inicio-rsa .div-col-rsa-de{
  width: 65%;
}

.row-inicio-sea-amigo .div-sea-amigo-right p{
  font-size: 20px;
  font-weight: 400;
}

.link-sea-amigo{
  display: inline-block;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 400;
  border-radius: 5px;
  min-width: 130px;
}

.row-inicio-sea-amigo p{
  margin-bottom: 10px;
  font-size: 20px;
}


.row-reserva{
  display: flex;
}

/*.row-reserva .div-col{*/
/*  width: 50%;*/
/*}*/

/*.div-text{*/
/*  background: var(--blanco);*/
/*}*/

/*.div-image{*/
/*  background-size: cover !important;*/
/*}*/

.div-text-int h2{
  margin-bottom: 20px;
}

.div-text-int{
  text-align: justify;
}

.sea-amigo-intro p{
  font-weight: 400;
}

.div-col-rsa{
  width: 65%;
}

.div-col-rsa-iz{
  width: 35%;
}

.div-redes{
  background: var(--cafe);
  position: fixed;
  top: 50%;
  left: 0px;
  transform: translate(0,-50%);
  border-radius: 0px 15px 15px 0px;
  padding: 5px;
  z-index: 1001;
}

.div-redes .social-item{
  margin: 10px 3px;
}

.div-redes .social-item a{
  padding: 10px;
}

.div-redes .social-item img{
  width: 18px;
  height: auto;
}

.div-lista-testimonios{
  display: flex;
}

.div-testimonio-horizontal p{
  text-align: justify;
}

.div-testimonio{
  width: 33.33%;
}

.p-testimonio-intro{
  font-style: italic;
}

.p-testimonio-nombre{
  font-weight: bold;
  margin-top: 10px;
}

.p-testimonio-pais{
  font-weight: bold;
}

.div-reserva{
  border-bottom: 4px solid var(--cafe);
  padding-bottom: 30px;
}

.reserva-img{
  width: 100%;
  height: auto;
}


.reserva-descripcion h3{
  font-size: 24px;
}

.reserva-descripcion p{
  font-size: 19px;
  font-weight: 400;
}

.div-editor-general h2{
  color: var(--cafe);
  text-align: center;
}

.visita-intro{
  margin: auto;
}

.visita-intro h1, h2, figure{
  text-align: center;
  color: var(--cafe);
}

.visita-intro h3{
  font-size: 26px;
}

.visita-intro h4{
  font-size: 22px;
}

.visita-intro h3, h4{
  text-align: left;
  color: var(--cafe);
}

.visita-intro figure table{
  margin: auto;
  text-align: left;

}

.visita-intro figure table tr{
  background: transparent;
}

.visita-intro figure table td{
  padding: 10px;
  border: 1px solid var(--cafe);
}