/* ============================================================
   PAGE — index
   ============================================================ */

/* ── Hero keyframe ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Hero ── */
#hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--blue-navy) 0%, var(--blue-deep) 50%, var(--blue-core) 100%);
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
}
.orb1 { width: 420px; height: 420px; top: -100px; right: -80px; background: rgba(132,197,248,.16); }
.orb2 { width: 280px; height: 280px; bottom: 40px; left: -60px; background: rgba(87,127,205,.22); }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(14,24,40,.3) 0%, rgba(14,24,40,.55) 60%, rgba(14,24,40,.78) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 100px 28px 80px;
  width: 100%;
  max-width: 560px;
}

.hero-logo {
  width: clamp(340px, 78vw, 680px);
  height: auto;
  display: block;
  margin: 0 auto 40px;
  opacity: 0;
  animation: fadeIn .8s ease forwards;
}

@media (min-width: 768px) {
  .hero-logo {
    width: clamp(420px, 49vw, 680px);
  }
}

@media (min-width: 1200px) {
  .hero-logo {
    width: clamp(520px, 42vw, 754px);
  }
}

.hero-body {
  opacity: 0;
  animation: fadeIn .7s 1.5s ease forwards;
}

.hero-h1 {
  font-family: var(--font-d);
  font-size: clamp(2.4rem,9vw,4.4rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--white);
  margin-bottom: 18px;
}
.hero-h1 em { font-style: italic; font-weight: 700; color: var(--blue-light); }

.hero-sub {
  font-size: clamp(.95rem,3vw,1.1rem);
  font-weight: 300;
  color: rgba(255,255,255,.62);
  margin-bottom: 48px;
}

.hero-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 480px) { .hero-btns { flex-direction: row; justify-content: center; } }

/* ── Scroll cue ── */
.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0;
  animation: up 1s 1.1s forwards;
}
.sd {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
  animation: db 1.6s ease-in-out infinite;
}
.sd:nth-child(2) { animation-delay: .2s; }
.sd:nth-child(3) { animation-delay: .4s; }

/* ── Sensation ── */
#sensation { padding: 80px 0 90px; background: var(--white); }

.sen-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: 44px;
}
@media (min-width: 640px) { .sen-img { max-height: 65vh; aspect-ratio: unset; } }

.sen-ph {
  width: 100%;
  height: 100%;
  min-height: 280px;
  background: linear-gradient(135deg, var(--mist), var(--blue-light), var(--blue-mid));
  display: flex;
  align-items: center;
  justify-content: center;
}

.sen-txt {
  text-align: center;
  padding: 0 32px;
  max-width: 520px;
  margin: 0 auto;
}
.sen-txt p {
  font-family: var(--font-d);
  font-size: clamp(1.3rem,4.5vw,2.1rem);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -.01em;
}

/* ── Gateway ── */
#gateway { background: var(--off-white); padding: 72px 20px 80px; }

/* ── Boo ── */
#boo { background: var(--blue-navy); padding: 96px 28px 104px; text-align: center; }

.boo-wrap { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.boo-q {
  font-family: var(--font-d);
  font-size: clamp(1.5rem,5vw,2.2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--white);
  line-height: 1.2;
}
.boo-sub { color: rgba(255,255,255,0.6); }

/* ── Ubicación ── */
#ubicacion {
  background: var(--white);
  padding: 80px 24px 88px;
}

.ubi-inner { max-width: 580px; margin: 0 auto; }

.ubi-h {
  font-family: var(--font-d);
  font-size: clamp(1.7rem,6vw,2.8rem);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--blue-navy);
  margin-bottom: 36px;
}

.map-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(74,109,163,0.2);
  background: var(--mist);
}
.map-wrap iframe { width: 100%; height: 100%; border: none; display: block; }

.ubi-ref {
  font-size: .88rem;
  font-weight: 300;
  color: var(--subtle);
  margin-bottom: 32px;
}

/* ── Cierre ── */
#cierre { background: var(--mist); padding: 88px 28px 96px; text-align: center; }

.cierre-h {
  font-family: var(--font-d);
  font-size: clamp(2.2rem,8vw,4.2rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--blue-navy);
  line-height: 1.05;
  margin-bottom: 40px;
}
.cierre-h em { font-style: italic; color: var(--blue-core); }

.cierre-social {
  margin-top: 28px;
  font-family: var(--font-b);
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--subtle);
  letter-spacing: 0.02em;
}
.cierre-social a {
  color: var(--blue-core);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--blue-core);
}