/* ==========================================================
   Hero — la entrada: wordmark gigante + foto que enfoca
   Secuencia controlada por .seq-N y body.is-loaded
   ========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 100px 0 clamp(130px, 16vh, 170px);
  background: var(--ink);
  overflow-x: clip;
  overflow-y: visible;
  isolation: isolate;
  /* El hero debe pintarse POR ENCIMA de la banda crema siguiente: la barra de reservas
     cabalga el borde inferior y sin esto la mitad de abajo quedaba tapada (recortada). */
  z-index: 2;
}

/* Foto: arranca negra y desenfocada, enfoca lentamente (cámara que encuentra el plano) */
.hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 60%, rgba(11,20,28,.18), rgba(11,20,28,.72) 75%),
    linear-gradient(180deg, rgba(11,20,28,.86) 0%, rgba(11,20,28,.45) 40%, rgba(11,20,28,.55) 75%, var(--ink) 100%);
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  filter: saturate(.55) brightness(.6) contrast(1.1) sepia(.18) blur(26px);
  transform: scale(1.22);
  opacity: 0;
}
.is-loaded .hero-photo img {
  animation: photoFocus 3.4s var(--ease-soft) 1.1s forwards, photoDrift 40s linear 4s infinite alternate;
}
@keyframes photoFocus {
  0%   { opacity: 0; filter: saturate(.55) brightness(.6) contrast(1.1) sepia(.18) blur(26px); transform: scale(1.22); }
  35%  { opacity: 1; }
  100% { opacity: 1; filter: saturate(.6) brightness(.74) contrast(1.08) sepia(.18) blur(0); transform: scale(1.06); }
}
@keyframes photoDrift { from { transform: scale(1.06) translate(0,0); } to { transform: scale(1.1) translate(-1.5%, 1%); } }

/* Pila central */
.hero-stack { position: relative; text-align: center; padding: 0 var(--gutter); }
.hero-eyebrow { font-size: 11px; letter-spacing: .4em; text-transform: uppercase; font-weight: 400; opacity: .8; }
.hero-eyebrow i { font-style: normal; color: var(--gold); margin: 0 .3em; }
.hero-eyebrow .stars { color: var(--gold); letter-spacing: .25em; }
.hero-tagline {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(26px, 3vw, 40px); line-height: 1.2;
  margin-top: 18px; color: var(--cream);
}
.hero .ornament-row { margin-top: 24px; }
.hero .ornament-row svg { width: 20px; height: 20px; }

/* Wordmark: borde a borde, ajustado por JS (data-fit) */
.wordmark {
  margin: clamp(10px, 2vh, 28px) calc(-1 * var(--gutter)) 0;
  font-family: var(--serif); font-weight: 400;
  line-height: .78; letter-spacing: -.025em;
  color: var(--cream);
  display: block;
}
.wm-line { display: block; overflow: hidden; padding: 0 .01em; }
.wm-letters { display: inline-block; white-space: nowrap; }
.wm-l {
  display: inline-block;
  transform: translateY(108%) rotate(2deg);
  transform-origin: left bottom;
  opacity: 0;
  text-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.is-loaded .wm-l { animation: letterUp 1.7s var(--ease-out) forwards; }
.is-loaded .wm-l:nth-child(1) { animation-delay: .95s; }
.is-loaded .wm-l:nth-child(2) { animation-delay: 1.08s; }
.is-loaded .wm-l:nth-child(3) { animation-delay: 1.21s; }
.is-loaded .wm-l:nth-child(4) { animation-delay: 1.34s; }
@keyframes letterUp {
  0% { transform: translateY(108%) rotate(2deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.wm-sub {
  display: block;
  margin-top: clamp(14px, 2.4vh, 28px);
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: .9em; padding-left: .9em;
  text-transform: uppercase;
}

/* Secuencia de entrada */
.seq { opacity: 0; transform: translateY(18px); }
.is-loaded .seq { animation: seqIn 1.4s var(--ease-out) forwards; }
.is-loaded .seq-1 { animation-delay: .25s; }
.is-loaded .seq-2 { animation-delay: .45s; }
.is-loaded .seq-3 { animation-delay: .65s; }
.is-loaded .seq-5 { animation-delay: 1.9s; }
.is-loaded .seq-6 { animation-delay: 2.3s; }
@keyframes seqIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .seq, .wm-l, .hero-photo img { opacity: 1 !important; transform: none !important; animation: none !important; filter: saturate(.6) brightness(.74) contrast(1.08) sepia(.18); }
}

@media (max-width: 700px) {
  .hero { padding: 90px 0 0; display: flex; flex-direction: column; align-items: stretch; }
  .hero-stack { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 36px; }
  .hero-eyebrow { letter-spacing: .26em; font-size: 10px; }
  .hero-tagline { font-size: 22px; margin-top: 14px; }
  .wm-sub { letter-spacing: .6em; padding-left: .6em; }
}