html {
  scroll-behavior: smooth;
}

body {
  background-color: white;
  margin: 0;
  font-family: "Geologica", sans-serif;
}

/* Offset para que el menú fijo no tape los títulos al navegar */
#servicios,
#paquetes,
#recorrido,
#contacto {
  scroll-margin-top: 100px;
}

/* --- CABECERA FIJA (WRAPPERTOP) --- */
.wrappertop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: black;
  display: flex;
  justify-content: space-between;
  /* Logo a la izquierda, menú a la derecha */
  align-items: center;
  /* Centrado vertical */
  z-index: 1000;
}

.header-left {
  padding-left: 60px;
}

.header-right {
  padding-right: 60px;
}

.logo {
  height: 75px;
  width: auto;
  display: block;
}

.menus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menus li {
  margin-left: 40px;
}

.menus li a {
  text-decoration: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.menus li a:hover {
  color: #37546D;
}

/* --- ESTRUCTURA DEL CONTENIDO --- */
.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.full1 img {
  width: 100%;
  background: #37546D;
  margin-top: 100px;
  /* Espacio para el menú fijo */
}

.full2 {
  width: 100%;
  background: #37546D;
}

.titleone {
  color: white;
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  padding: 60px 0;
}

.tx {
  color: white;
  text-align: center;
  font-size: 30px;
  padding: 0 67px 40px 67px;
}

.full3 {
  width: 100%;
  background-color: white;
}

.titlept2 {
  color: #37546D;
  text-align: center;
  font-size: 60px;
  padding: 40px 20px;
}

.titlept3 {
  color: #37546D;
  text-align: center;
  font-size: 20px;
  padding: 40px 20px;
  font-style: bold;
}

/* Tarjetas de Servicios */
.tercios {
  width: 33.33%;
  text-align: center;
}

.card,
.card2 {
  background-color: #062844;
  height: auto;
  min-height: 705px;
  width: 30%;
  border-radius: 42px;
  margin: 1.5%;
}

.cardimg {
  border-radius: 24px;
  width: 85%;
  margin-top: 33px;
}

.cardtitle {
  color: white;
  font-size: 36px;
  padding: 10px;
}

.cardst {
  color: white;
  margin: 0 25px;
  text-align: left;
  font-size: 20px;
}

/* --- RECORRIDO E IFRAMES --- */
.recorrido {
  width: 100%;
  background: white;
  text-align: center;
}

.recorridotx {
  color: #37546D;
  padding: 20px 0;
}

.rec360 {
  width: 100%;
}

/* --- PAQUETES --- */
.halfw {
  width: 50%;
  background-color: white;
}

.halfb {
  width: 50%;
  background-color: #062844;
}

.h2wpac,
.punder {
  color: #37546D;
  margin-left: 67px;
}

.h2bpac,
.punder2 {
  color: white;
  margin-left: 67px;
}

.punder,
.punder2 {
  text-decoration: underline;
  padding-top: 30px;
}

.imgpac,
.imgpac2 {
  width: 85%;
  padding: 20px 0 20px 10%;
  border-radius: 58px;
}

.texto1 {
  color: #37546D;
  text-align: center;
  padding: 20px 67px;
}

.video {
  width: 100%;
}

/* --- CONTACTO --- */
.contact {
  width: 33.33%;
  background-color: #37546D;
  padding: 40px 0;
}

.contactlogo {
  display: block;
  margin: 0 auto;
  max-width: 100px;
}

.contactinfo {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.icon {
  padding-right: 10px;
  width: 25px;
}

/* --- RESPONSIVO --- */
@media (max-width: 768px) {
  .wrappertop {
    height: auto;
    flex-direction: column;
    padding: 15px 0;
  }

  .header-left,
  .header-right {
    padding: 0;
  }

  .menus {
    margin-top: 15px;
  }

  .menus li {
    margin: 0 10px;
  }

  .menus li a {
    font-size: 14px;
  }

  .titlept2 {
    font-size: 50px;
  }

  .titleone {
    font-size: 32px;
  }

  .tx {
    font-size: 18px;
  }

  .tercios,
  .card,
  .card2,
  .halfw,
  .halfb,
  .contact {
    width: 100% !important;
    margin: 10px 0 !important;
  }
}