/* Hero Section */
.hero {
  display: grid;
  grid-template-columns: 10px 1fr 10px;
  grid-template-rows: repeat(5, 1fr);
  aspect-ratio: 4/5;
  overflow: hidden;
  color:
    white;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,
      0, 0, 0.3);
}

.hero picture,
.hero picture img {
  width: 100%;
  height: 100%;
  grid-column: 1/4;
  grid-row: 1/6;
}

.hero .hero-content {
  grid-column: 2 / 3;
  grid-row: 4/5;
  z-index: 2;
  padding: 1rem;
  font-size: 1.5rem;
}

.hero-content h1 {
  color: var(--white);
}

.tour-container {
  display: grid;
  grid-template-columns:
    1fr;
  gap: 30px;
  padding: 20px;
  margin: 0 auto;
}

.tour-principal {
  background-color: #f0f0f0;
  padding: 20px;
}

.tour-lateral {
  padding: 0;
}

/*
__________Pestañas_____________ */
.tabs-container {
  width: 100%;
  max-width:
    1200px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,
      0, 0, 0.1);
  overflow: hidden;
  margin: 0 auto;
}

.tab-labels {
  display: flex;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.tab-label {
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #495057;
  font-weight: 500;
  text-align: center;
  flex: 1;
  position: relative;
  border-bottom: 3px solid transparent;
}

.tab-radio {
  display: none;
}

.tab-label:hover {
  color: var(--secondary);
  background-color: #e9ecef;
}

/*
REGLA PARA PESTAÑA ACTIVA EN AZUL */
#tab1:checked~.tab-labels [for="tab1"],
#tab2:checked~.tab-labels [for="tab2"],
#tab3:checked~.tab-labels [for="tab3"],
#tab4:checked~.tab-labels [for="tab4"] {
  color: var(--primary);
  border-bottom: 3px solid var(--primary);
  background-color: white;
}

.tab-content {
  display: none;
  padding: 25px;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Mostrar el contenido
correspondiente cuando el radio está checked */
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
  display: block;
}

.tab-content h2 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.tab-content p {
  margin-bottom: 12px;
  line-height: 1.5;
  color: #34495e;
}

.tab-content ul {
  margin: 12px 0;
  padding-left: 20px;
}

.tab-content li {
  margin-bottom: 8px;
}

.action-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 15px;
}

/*
__________Info-card__________ */
.info-card {
  background: white;
  border-radius:
    0 0 8px 8px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
  overflow: hidden;
  max-width: 420px;
  width:
    95%;
  margin: 0 auto;
  transition: all 0.3s ease;
  border: 1px solid #eaeaea;
}

.info-card-header {
  /*background: var(--secondary);*/
  padding: 15px 20px;
  text-align: center;
  position: relative;
  border-bottom: solid 4px var(--secondary);
}

.info-card-header h2 {
  color: var(--blue);
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.info-card-body {
  padding: 20px 15px;
}

.info-card-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-card-body li {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #eee;
  align-items: center;
}

.info-card-body li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-card-body strong {
  width: 90px;
  color: var(--blue);
  font-weight: 700;
  font-size: 15px;
}

.info-card-body span {
  color: var(--dark);
  font-weight: 500;
  flex: 1;
}

.info-card-body li:nth-child(odd) strong {
  color: var(--primary);
}

.info-card-body li:nth-child(3n) strong {
  color: var(--secondary);
}

/*
__________//Info-card__________ */
/* +++++++++++++++++++++++++ Reservaa
+++++++++++++++++++++++++ */
.book-x {
  display: flex;
  flex-direction: row;
  gap:
    15px;
  max-width: 340px;
  margin: 20px auto;
  padding: 5px;
  place-items: center;
  outline: solid 2px var(--secondary);
  border-radius: 8px 25px 25px 8px;
}

.book-x img {
  width: 40px;
  aspect-ratio: 1/1;
}

.btnWhatsapp {
  display: flex;
  flex-direction: row;
  color: var(--white);
  background: radial-gradient(#a9ff39,
      #61ac07);
  border-radius: 25px;
  outline: solid 1px var(--green);
  min-width: 75px;
  padding: 5px 15px 5px 5px;
  gap: 10px;
  align-items: center;
  color: var(--white);
  font-weight: bold;
}

.btnWhatsapp img {
  width: 30px;
  background: var(--white);
  border-radius: 50%;
}

/*==========Form===========*/
.reservar {
  margin: 3rem auto;
}

form {
  padding: 2rem;
  text-align: center;
  box-sizing: border-box;
  max-width: 700px;
  margin: 1rem auto;
  border-radius: 5px;
  box-shadow:
    var(--shadow);
}

label {
  display: block;
  margin: 1rem auto;
  text-align: left;
}

input,
textarea {
  margin-top: 0.5rem;
  width: 100%;
  padding: 0.3rem;
}

textarea {
  resize: none;
  form-sizing: content;
}

input[type="submit"] {
  width: 180px;
  background-color: #4caf50;
  color: white;
  font-weight: bold;
  margin: 1rem auto;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.custom-submit {
  width: 180px;
  background-color: #008cba;
  color: white;
  margin:
    1rem auto;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor:
    pointer;
  align-content: center;
}

/*button,*/
input,
select {
  border: 0;
  outline: 0;
  font-size: 16px;
  border-radius: 320px;
  padding: 16px;
  background-color: var(--gray-light);
  text-shadow: 1px 1px 0 #fff;
}

form>label {
  width: 100%;
}

input,
select {
  /* margin-right: 8px; */
  box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
}

input:focus {
  box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}

form>fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-radius: 7px;
  border: solid 1px var(--azul);
  width: 100%;
  text-align:
    left;
  padding: 0 0.5rem;
  box-sizing: border-box;
}

form>fieldset>legend {
  padding: 0 0.7rem;
}

/* button { font-weight: bold; box-shadow: -5px -5px 20px
#fff, 5px 5px 20px #babecc; transition: all 0.2s ease-in-out; cursor: pointer;
margin: 1rem auto; } button:hover { box-shadow: -2px -2px 5px #fff, 2px 2px 5px
#babecc; } button:active { box-shadow: inset 1px 1px 2px #babecc, inset -1px
-1px 2px #fff; } button.red { width: 180px; color: var(--rojo-2); }*/
/*
++++++++++++++++++++++++ // Reservaa ++++++++++++++++++++++++ */
@media screen and (max-width: 768px) {
  .tab-label {
    padding: 12px 15px;
    font-size: 0.9rem;
  }

  .tab-content {
    padding: 20px;
  }
}

@media screen and (min-width: 768px) {
  .tour-container {
    max-width: var(--maxw);
    grid-template-columns: 3fr 2fr;
    margin: 60px auto;
  }

  .hero {
    aspect-ratio: 2/0.7;
  }

  .hero picture {
    width: 100%;
    height: 100%;
  }

  .hero picture img {
    width: 100%;
    height: 100%;
    /* object-fit:
cover; */
  }
}

@media screen and (min-width: 992px) {
  .tour-container {
    max-width: var(--maxw);
    grid-template-columns: 7fr 3fr;
    margin: 60px auto;
  }
}