@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap");

/* ─── Variables ────────────────────────────────────────────────────────────── */
:root {
  --night:  #111326;
  --indigo: #262a62;
  --violet: #7057e8;
  --peach:  #ff806b;
  --cream:  #fff8f2;
  --sand:   #f0e8dd;
  --lime:   #d9ff78;
  --serif:  "Playfair Display", serif;
  --sans:   "DM Sans", sans-serif;
}

/* ─── Reset base ───────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--night);
  font-family: var(--sans);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* ─── Layout ───────────────────────────────────────────────────────────────── */
.wrap {
  width: min(1220px, calc(100% - 40px));
  margin: auto;
}

/* ─── Navbar ───────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  z-index: 50;
  width: 100%;
  color: #fff;
  transition: .35s;
}

.nav.on {
  background: #111326eb;
  backdrop-filter: blur(14px);
}

.navin {
  height: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font: 600 28px var(--serif);
  letter-spacing: -.08em;
}

.logo b {
  font-style: italic;
  color: var(--lime);
}

.links {
  display: flex;
  gap: 28px;
  font-size: 13px;
  font-weight: 600;
}

.links a:hover,
.links .active {
  color: var(--lime);
}

.cta {
  padding: 12px 18px;
  background: var(--lime);
  color: var(--night);
  font-size: 12px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
}

.burger {
  display: none;
  background: none;
  border: 0;
  color: white;
  font-size: 25px;
}

.mobile {
  display: none;
}

/* ─── Hero principal ───────────────────────────────────────────────────────── */
.hero {
  min-height: 800px;
  background:
    linear-gradient(105deg, #111326df 3%, #11132672 47%, #11132610),
    url("https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=2200&q=90") center / cover;
  color: #fff;
  position: relative;
}

.heroin {
  min-height: 800px;
  display: flex;
  align-items: center;
}

.kicker {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lime);
}

h1 {
  font: 600 clamp(62px, 9vw, 125px) / .85 var(--serif);
  letter-spacing: -.075em;
  margin: 22px 0;
}

.hero h1 i {
  color: var(--lime);
}

.hero p {
  max-width: 460px;
  line-height: 1.7;
  font-size: 16px;
  color: #ffffffcf;
}

.buttons {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.primary {
  display: inline-block;
  background: var(--lime);
  color: var(--night);
  padding: 15px 21px;
  font-size: 13px;
  font-weight: 700;
  transition: .25s;
}

.primary:hover {
  transform: translateY(-3px);
  background: #fff;
}

.secondary {
  display: inline-block;
  border: 1px solid #fff8;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
}

.float-card {
  position: absolute;
  right: max(5vw, 35px);
  bottom: 65px;
  width: 230px;
  padding: 18px;
  background: #ffffffeb;
  color: var(--night);
  backdrop-filter: blur(10px);
  transform: rotate(3deg);
  box-shadow: 0 20px 40px #0004;
}

.float-card span {
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--violet);
  font-weight: bold;
}

.float-card h3 {
  font: 600 28px var(--serif);
  margin: 9px 0;
}

.float-card p {
  font-size: 12px;
  color: #45465b;
  margin: 0;
}

.curve {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 80px;
  fill: var(--cream);
}

/* ─── Secciones generales ──────────────────────────────────────────────────── */
.section {
  padding: 115px 0;
}

.label {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--violet);
}

.heading {
  font: 600 clamp(42px, 5vw, 70px) / .95 var(--serif);
  letter-spacing: -.07em;
  margin: 13px 0;
}

.intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 45px;
}

.view {
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid;
  padding-bottom: 5px;
}

/* ─── Grid de destinos (index) ─────────────────────────────────────────────── */
.destinations {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr;
  gap: 17px;
}

.dest {
  height: 500px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.dest img {
  height: 100%;
  transition: transform .8s;
}

.dest:hover img {
  transform: scale(1.08);
}

.dest:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, #111326d9);
}

.destinfo {
  position: absolute;
  z-index: 1;
  bottom: 25px;
  left: 25px;
}

.destinfo span {
  font-size: 10px;
  letter-spacing: .15em;
  font-weight: bold;
  color: var(--lime);
}

.destinfo h3 {
  font: 600 42px var(--serif);
  letter-spacing: -.06em;
  margin: 8px 0;
}

.destinfo p {
  font-size: 12px;
  margin: 0;
}

.dest:nth-child(2),
.dest:nth-child(3) {
  height: 240px;
}

.dest:nth-child(3) {
  grid-column: 2;
}

.dest:nth-child(2) .destinfo h3,
.dest:nth-child(3) .destinfo h3 {
  font-size: 29px;
}

/* ─── Feature (sección oscura) ─────────────────────────────────────────────── */
.feature {
  background: var(--night);
  color: white;
  padding: 110px 0;
}

.featuregrid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 8vw;
  align-items: center;
}

.feature h2 {
  font: 600 clamp(44px, 6vw, 75px) / .92 var(--serif);
  letter-spacing: -.07em;
  margin: 15px 0;
}

.feature p {
  color: #fff9;
  line-height: 1.7;
}

.cards {
  display: grid;
  gap: 14px;
}

.trip {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: 19px;
  padding: 12px;
  background: #ffffff0d;
  border: 1px solid #ffffff18;
  transition: .25s;
}

.trip:hover {
  background: var(--violet);
  transform: translateX(8px);
}

.trip img {
  height: 76px;
}

.trip h3 {
  font: 600 25px var(--serif);
  margin: 0;
}

.trip small {
  font-size: 11px;
  color: #fff9;
}

.trip b {
  font-size: 12px;
  color: var(--lime);
}

/* ─── Oferta especial ──────────────────────────────────────────────────────── */
.offer {
  margin-top: 75px;
  display: grid;
  grid-template-columns: 1fr .8fr;
  background: linear-gradient(125deg, var(--peach), #ffad73);
  padding: 42px;
  color: var(--night);
}

.offer h2 {
  font: 600 46px / 1 var(--serif);
  letter-spacing: -.06em;
  margin: 12px 0;
}

.offer p {
  max-width: 430px;
  font-size: 14px;
  line-height: 1.6;
}

.count {
  text-align: right;
  align-self: center;
}

.count span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
}

.count strong {
  display: block;
  font: 500 40px var(--sans);
  letter-spacing: -.08em;
  margin-top: 8px;
}

/* ─── Testimoniales ────────────────────────────────────────────────────────── */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #ded8d1;
}

.quote {
  padding: 28px;
  border-right: 1px solid #ded8d1;
  min-height: 280px;
}

.quote:last-child {
  border: 0;
}

.quote .stars {
  color: var(--peach);
  letter-spacing: 4px;
}

.quote q {
  display: block;
  margin: 42px 0;
  font: 600 25px / 1.18 var(--serif);
  letter-spacing: -.04em;
}

.quote cite {
  font-size: 11px;
  font-style: normal;
  font-weight: bold;
}

/* ─── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  background: var(--indigo);
  color: white;
  padding: 70px 0 24px;
}

.footgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 25px;
}

.footer h4 {
  font-size: 11px;
  letter-spacing: .13em;
  color: var(--lime);
}

.footer p,
.footer a {
  font-size: 13px;
  line-height: 2;
  color: #fff9;
  display: block;
}

.copyright {
  margin-top: 65px;
  padding-top: 17px;
  border-top: 1px solid #fff2;
  font-size: 10px;
  letter-spacing: .1em;
}

/* ─── Page hero (páginas interiores) ───────────────────────────────────────── */
.pagehero {
  height: 570px;
  display: flex;
  align-items: end;
  padding-bottom: 65px;
  color: white;
  background:
    linear-gradient(100deg, #111326c9, #11132625),
    var(--image) center / cover;
}

.pagehero h1 {
  margin: 15px 0 0;
}

/* ─── Filtros de destinos ──────────────────────────────────────────────────── */
.filters {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.filter {
  background: transparent;
  border: 1px solid #cdc6bd;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}

.filter.active {
  background: var(--night);
  color: var(--lime);
}

/* ─── Grid de tarjetas (destinos) ──────────────────────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.dcard {
  background: var(--sand);
}

.dcard img {
  height: 300px;
}

.dcard div {
  padding: 19px;
}

.dcard h2 {
  font: 600 33px var(--serif);
  letter-spacing: -.06em;
  margin: 8px 0;
}

.dcard p {
  font-size: 13px;
  line-height: 1.6;
  color: #525263;
}

/* ─── Paquetes ─────────────────────────────────────────────────────────────── */
.package {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sand);
  margin-bottom: 24px;
}

.package img {
  height: 400px;
}

.packcopy {
  padding: 42px;
}

.packcopy h2 {
  font: 600 47px / 1 var(--serif);
  letter-spacing: -.07em;
  margin: 18px 0;
}

.packcopy p {
  line-height: 1.7;
  color: #545461;
}

.meta {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .06em;
  color: var(--violet);
}

/* ─── Contacto ─────────────────────────────────────────────────────────────── */
.contact {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 9vw;
}

.contact h2 {
  font: 600 60px / .93 var(--serif);
  letter-spacing: -.07em;
  margin: 16px 0;
}

.contact p {
  line-height: 1.8;
}

.form {
  padding: 40px;
  background: var(--sand);
}

.formgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.full {
  grid-column: 1 / -1;
}

.field {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #bcb5ad;
  background: transparent;
  outline: none;
  font: 14px var(--sans);
}

textarea.field {
  min-height: 100px;
  resize: vertical;
}

/* ─── Animación reveal ─────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: .7s;
}

.reveal.show {
  opacity: 1;
  transform: none;
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .wrap {
    width: min(100% - 30px, 1220px);
  }

  .navin {
    height: 70px;
  }

  .links,
  .nav .cta {
    display: none;
  }

  .burger {
    display: block;
  }

  .mobile.open {
    display: flex;
    flex-direction: column;
    gap: 17px;
    background: var(--night);
    padding: 20px 15px 25px;
    font-size: 13px;
    font-weight: bold;
  }

  .hero,
  .heroin {
    min-height: 720px;
  }

  .float-card {
    display: none;
  }

  .section {
    padding: 80px 0;
  }

  .intro {
    display: block;
  }

  .view {
    display: inline-block;
    margin-top: 20px;
  }

  .destinations,
  .featuregrid,
  .contact,
  .package {
    grid-template-columns: 1fr;
  }

  .dest,
  .dest:nth-child(2),
  .dest:nth-child(3) {
    height: 360px;
  }

  .dest:nth-child(3) {
    grid-column: auto;
  }

  .feature {
    padding: 80px 0;
  }

  .offer {
    grid-template-columns: 1fr;
    padding: 27px;
  }

  .count {
    text-align: left;
    margin-top: 18px;
  }

  .testimonials,
  .grid {
    grid-template-columns: 1fr;
  }

  .quote {
    border-right: 0;
    border-bottom: 1px solid #ded8d1;
  }

  .footgrid {
    grid-template-columns: 1fr 1fr;
  }

  .pagehero {
    height: 480px;
  }

  .package img {
    height: 280px;
  }

  .packcopy {
    padding: 28px;
  }

  .form {
    padding: 26px;
  }

  .formgrid {
    grid-template-columns: 1fr;
  }

  .full {
    grid-column: auto;
  }
}