body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}

h1 {
  color: #333;
  font-size: 2em;
  margin: 0;
  padding: 0;
}

p {
  color: #666;
  font-size: 1.2em;
}

.burger {
  position: relative;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
  transform: scale(0.7);
  z-index: 1;
}

.burger input {
  display: none;
}

.burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background-color: #053d22;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
  z-index: 2;
}

.burger span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.burger span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
  background-color: white;
}

.burger input:checked ~ span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
  background-color: white;
}

.burger input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
  background-color: white;
}

.header {
  width: calc(100% - 40px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(232, 232, 232, 0.93);
  color: #053d22;
  position: fixed;
  top: 0;
  z-index: 2;
}

.logoTexto {
  display: flex;
  align-items: center;
}

.logoTexto img {
  object-fit: contain;
}

.navEscritorio ul {
  display: flex;
  list-style: none;
  margin: 0;
}

.navEscritorio ul li {
  margin: 0 10px;
  padding: 10px;
}

.navEscritorio ul li:hover {
  background-color: #74b32c;
  color: black;
}

.paginaActual {
  background-color: #74b32c;
  color: black;
}

.navEscritorio ul li a {
  color: #053d22;
  text-decoration: none;
}

.paginaActual a {
  color: black !important;
}

.navMovil {
  display: none;
}

.menuDesplegable ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-top: 100px;
}

.menuDesplegable ul li {
  margin: 0 10px;
  text-align: right;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 1.5rem;
  border-top: 1px solid white;
}

.menuDesplegable ul li a {
  color: white;
  text-decoration: none;
}

@media (max-width: 768px) {
  .navEscritorio {
    display: none;
  }

  .navMovil {
    display: block;
    position: relative;
  }

  .menuDesplegable {
    display: block;
    position: absolute;
    top: -25px;
    right: -385px;
    width: 300px;
    background-color: #053d22;
    color: white;
    transform: scale(1.3);
    transition: right 0.5s;
  }

  .paginaActual {
    background-color: #74b32c;
    color: black;
  }

  .paginaActual a {
    color: black;
  }
}

.burger input:checked ~ .menuDesplegable {
  right: 0;
}
.footer_footerPrincipal {
  background-color: #74b32c;
  color: black;
}

.footer_footerPrincipal .separador {
  width: 1px;
  background-color: #053d22;
  margin: 20px 0;
}

.footer_footerPrincipal .contenedor {
  display: flex;
  justify-content: space-around;
}

.footer_footerPrincipal .columna {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: left;
}

.footer_footerPrincipal .elemento {
  margin: 10px 0;
}

.footer_footerPrincipal .elemento.texto,
.footer_footerPrincipal .elemento.texto p,
.footer_footerPrincipal .elemento.texto strong,
.footer_footerPrincipal .elemento.texto span {
  color: #053d22;
}

.footer_footerPrincipal .imagen img {
  object-fit: contain;
}

.footer_footerPrincipal .enlace a {
  color: black;
  text-decoration: none;
}

.footer_footerPrincipal .enlace a:hover {
  background-color: black;
  color: #74b32c;
}

@media (max-width: 768px) {
  .footer_footerPrincipal .contenedor {
    flex-direction: column;
    align-items: center;
  }

  .footer_footerPrincipal .columna {
    padding: 10px;
  }

  .footer_footerPrincipal .separador {
    height: 1px;
    width: 100%;
    margin: 10px 0;
  }

  .footer_footerPrincipal .elemento {
    margin: 20px 0;
    text-align: center;
  }
}
.bannerInicio {
  width: calc(100% - 60px);
  background: linear-gradient(0deg, rgba(116, 179, 44, 1) 0%, rgba(5, 61, 34, 1) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  margin-top: 100px;
}

.bannerInicio__texto {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 35%;
  justify-content: center;
  align-items: center;
}

.bannerInicio__imagen {
  border-radius: 50%;
}

.bannerInicio__texto h1 {
  font-size: 2em;
  color: white;
}

.bannerInicio__botones {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 60%;
}

.textoBotones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.textoBotones h2 {
  font-size: 1.5em;
  margin: 0;
  color: greenyellow;
}

.textoBotones p {
  font-size: 1.2em;
  margin: 0;
  color: greenyellow;
}

.botonesPrincipales {
  display: flex;
  gap: 20px;
}

.botonesSecundarios {
  display: flex;
  gap: 20px;
}

/* menor a 768px */
@media (max-width: 768px) {
  .bannerInicio {
    flex-direction: column;
    align-items: center;
  }

  .bannerInicio__texto {
    width: 100%;
  }

  .bannerInicio__botones {
    width: 100%;
  }

  .botonesPrincipales {
    flex-direction: column;
  }

  .botonesSecundarios {
    flex-direction: column;
  }
}

.animated-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 36px;
  border: 4px solid;
  border-color: transparent;
  font-size: 16px;
  background-color: inherit;
  border-radius: 100px;
  font-weight: 600;
  color: greenyellow;
  box-shadow: 0 0 0 2px greenyellow;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
  position: absolute;
  width: 24px;
  fill: greenyellow;
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 16px;
}

.animated-button .arr-2 {
  left: -25%;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: greenyellow;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(-12px);
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: #212121;
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
}

.animated-button:hover .arr-2 {
  left: 16px;
}

.animated-button:hover .text {
  transform: translateX(12px);
}

.animated-button:hover svg {
  fill: #212121;
}

.animated-button:active {
  scale: 0.95;
  box-shadow: 0 0 0 4px greenyellow;
}

.animated-button:hover .circle {
  width: 220px;
  height: 220px;
  opacity: 1;
}

.gridPasosContainer {
  display: flex;
  justify-content: center;
  width: 100%;
}

.gridPasos {
  max-width: 1000px;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Cambiado a 2 columnas */
  gap: 20px;
  padding: 20px;
}

.paso {
  display: flex;
  flex-direction: row; /* Mantener la dirección en fila */
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: #b9d68b;
}

.pasoImagen {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pasoTexto {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Mantener alineación a la izquierda */
  justify-content: center;
  gap: 10px;
}

.pasoTexto h2 {
  font-size: 1.5em;
  margin: 0;
  margin-bottom: 10px;
}

.pasoTexto p {
  font-size: 1em;
  margin: 0;
  color: black;
}

@media (max-width: 768px) {
  .gridPasos {
    grid-template-columns: repeat(1, 1fr); /* Cambiado a 1 columna para dispositivos móviles */
  }
  .paso {
    flex-direction: column; /* Cambiado de row a column para dispositivos móviles */
  }
}

.bannerTituloIndex {
  margin-top: 100px;
  background-color: #00555C;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bannerTituloIndexContenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  max-width: 1000px;
  gap: 50px;
}

.bannerTituloIndexTexto {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.bannerTituloIndexTexto h1 {
  font-size: 3rem;
  color: white;
  font-weight: lighter;
  text-align: right;
}

.botonHeroContratar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 14px 28px;
  border-radius: 999px;
  background-color: #74b32c;
  color: #053d22;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(5, 61, 34, 0.25);
  animation: heroPulse 1.8s ease-in-out infinite;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.botonHeroContratar:hover {
  background-color: #8bc53f;
  box-shadow: 0 16px 30px rgba(5, 61, 34, 0.35);
  animation-play-state: paused;
  transform: scale(1.06);
}

.botonHeroContratar:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

@keyframes heroPulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.textoPrepararEquipaje {
  font-size: 1.1rem;
  color: yellow;
  text-align: right;
  margin-top: 20px;
  margin-bottom: 20px;
}

.textoExperienciaUnica {
  font-size: 1rem;
  color: white;
  text-align: right;
}

.bannerTituloIndexImagen {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bannerTituloIndexImagen img {
  object-fit: contain;
  width: 100%;
  height: auto;
  max-width: 512px;
  aspect-ratio: 512 / 256;
}

@media (max-width: 768px) {
  .bannerTituloIndexImagen img {
      max-width: 256px;
  }

  .bannerTituloIndexContenedor {
      flex-direction: column;
  }

  .bannerTituloIndexTexto {
      width: 100%;
      align-items: center;
  }

  .bannerTituloIndexTexto h1 {
      font-size: 2rem;
      text-align: center;
  }

    .botonHeroContratar {
      margin-top: 20px;
    }

  .bannerTituloIndexImagen {
      width: 100%;
  }

  .textoPrepararEquipaje {
      text-align: center;
  }

  .textoExperienciaUnica {
      text-align: center;
  }

  .bannerTituloIndexContenedor {
      gap: 20px;
  }

  .bannerTituloIndex {
      padding: 10px;
  }

  .bannerTituloIndexTexto {
      margin-top: 20px;
  }
}

.botonSaberMasContainer {
  display: flex;
  justify-content: center;
}

.botonSaberMas {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  cursor: pointer;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 2px solid #00555C;
  color: #00555C;
  transition: all 0.3s;
}

.botonSaberMas:hover {
  background-color: #00555C;
  color: white;
  scale: 1.1;
}

.textoConImagenIndex {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.textoConImagenIndexContenedor {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  max-width: 1000px;
  gap: 50px;
}

.textoConImagenIndexTexto {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.textoConImagenIndexTexto h2 {
  font-size: 2rem;
  color: #00555C;
  font-weight: lighter;
  text-align: left;
}

.textoConImagenIndexTexto p {
  font-size: 1rem;
  color: #00555C;
  text-align: left;
}

.textoConImagenIndexImagen {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.textoConImagenIndexImagen img {
  object-fit: contain;
  width: 100%;
  height: auto;
  max-width: 300px;
  aspect-ratio: 256 / 256;
}

@media (max-width: 768px) {
  .textoConImagenIndexImagen img {
      max-width: 256px;
  }

  .textoConImagenIndexContenedor {
      flex-direction: column;
  }

  .textoConImagenIndexTexto {
      width: 100%;
      align-items: center;
  }

  .textoConImagenIndexTexto h2 {
      font-size: 1.5rem;
      text-align: center;
  }

  .textoConImagenIndexTexto p {
      text-align: center;
  }

  .textoConImagenIndexImagen {
      width: 100%;
  }

  .textoConImagenIndexContenedor {
      gap: 20px;
  }
}