/* ============================================================
   src/css/hero.css — Hero Samara-style
   Layers:
     z-1  .hero__back   → sky + sun + mountains (anchored top)
     z-2  .hero__logo   → between back and front
     z-3  .hero__front  → house (anchored bottom)
     z-4  .hero__content → texto + CTAs
   Parallax: JS-driven scroll-linked (ver main.js initHeroParallax)
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  /* Cielo de respaldo por si las imágenes tardan en cargar */
  background: linear-gradient(180deg,
    #87BCE8  0%, #A2CCEB 16%, #BFDAE8 32%, #DBDFCC 48%,
    #E3D9BE 64%, #ECE0BD 82%, #EFE3C0 100%);
}

.hero__animation-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* picture es un wrapper transparente — no genera caja ni rompe z-index */
.hero__animation-container picture {
  display: contents;
}

/* ── Parallax base ── */
.hero__parallax {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
  will-change: transform;
  /* NO transition — JS maneja todo en scroll */
}

.hero__back {
  object-position: 50% 0%;
  z-index: 1;
  animation: hero-img-in 0.5s ease-out both;
}

.hero__front {
  object-position: 50% 40%;
  z-index: 3;
  transform-origin: 50% 100%;   /* anchor del scale al bottom */
  animation: hero-img-in 0.5s ease-out 0.1s both;
}

@keyframes hero-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Logo HISSUMA ── */
.hero__logo {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  width: 200px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  filter:
    drop-shadow(0 6px 16px rgba(20,30,50,0.90))
    drop-shadow(0 0 35px  rgba(20,30,50,0.65))
    drop-shadow(0 0 70px  rgba(255,250,220,0.45));
  will-change: transform;
}

/* ── Editorial overlay ─────────────────────────────────── */
.hero__content {
  position: absolute;
  inset: 0;
  padding: 64px 72px 56px;
  color: #13243A;
  display: flex;
  flex-direction: column;
  z-index: 4;
  pointer-events: none;
}
.hero__content a, .hero__content .hs-btn { pointer-events: auto; }

/* Eyebrow */
.hero__eyebrow { display: flex; align-items: center; gap: 14px; }
.hero__eyebrow .tag {
  font-family: var(--hs-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: #13243A;
}
.hero__eyebrow .rule { flex: none; width: 36px; height: 1px; background: rgba(19,36,58,0.30); }
.hero__eyebrow .meta {
  font-family: var(--hs-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(19,36,58,0.72); margin-top: 5px;
}

/* Grid editorial */
.hero__editorial {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
  margin-top: 36px;
  gap: 32px;
}
.hero__kicker {
  max-width: 260px;
  font-family: var(--hs-display);
  font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 600;
  color: #13243A; margin: 0; margin-top: 14px;
}
.hero__intro { justify-self: end; max-width: 280px; }
.hero__intro p {
  font-size: 18px; line-height: 1.45; color: #1E2E48; font-weight: 500; margin: 0;
}
.hero__intro .muted { color: rgba(19,36,58,0.62); }
.hero__intro a {
  margin-top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  color: #13243A; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(19,36,58,0.40); padding-bottom: 3px;
  text-decoration: none;
}

.hero__spacer { flex: 1; }

.hero__bottom {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.hero__ctas { display: flex; gap: 12px; }

/* Botones — sobreescrituras específicas del hero sobre la base .hs-btn */
.hero .hs-btn.hs-btn--primary {
  box-shadow: 0 12px 32px rgba(15,30,55,0.35);
  padding: 15px 26px;
}
.hero .hs-btn.hs-btn--primary:hover { box-shadow: 0 16px 40px rgba(15,30,55,0.40); }
.hero .hs-btn.hs-btn--ghost-light {
  background: rgba(15,16,16,0.18);
  border-color: rgba(255,250,240,0.85);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero .hs-btn.hs-btn--ghost-light:hover { background: rgba(15,16,16,0.28); }

/* Scroll cue */
.hero__scroll { display: flex; align-items: center; gap: 14px; color: rgba(250,250,248,0.92); }
.hero__scroll-label {
  font-family: var(--hs-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.hero__scroll-track { position: relative; width: 1px; height: 44px; background: rgba(250,250,248,0.55); }
.hero__scroll-dot {
  position: absolute; bottom: 0; left: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hs-yellow); box-shadow: 0 0 14px rgba(242,168,0,0.9);
}

/* ── Pájaros (canvas) ── */
.hero__birds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;            /* sobre el cielo, debajo del logo y la casa */
  display: block;
}

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__parallax, .hero__logo { transition: none !important; }
  .hero__back, .hero__front { animation: none !important; }
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { min-height: 500px; background: #fff; }
  .hero__logo { width: 150px; top: 32%; }
  .hero__back  { object-position: 50% 0%; }
  .hero__front {
    object-position: 50% 40%;
    mix-blend-mode: multiply;  /* blanco → transparente, colores → intactos */
  }
  .hero__content { padding: 48px 24px 32px; }
  .hero__editorial {
    grid-template-columns: 1fr; margin-top: 40px; gap: 14px;
  }
  .hero__editorial > div:empty { display: none; }
  .hero__intro { justify-self: start; max-width: 100%; }
  .hero__eyebrow { justify-content: flex-start; }
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hero__scroll { display: none; }
  .hero__ctas { flex-direction: column; width: 100%; }
  .hero .hs-btn { justify-content: center; width: 100%; }
}