/* ============================================================
   MIRADOR DEL ARIARI — hero.css
   ============================================================ */

/* ── HERO ── */
.hero {
  position:relative;
  height:100svh; min-height:680px;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr;
  overflow:hidden;
}

/* Imagen de fondo con parallax JS */
.hero-bg {
  position:absolute; inset:-10%;
  background:
    url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1920&q=85')
    center/cover no-repeat;
  will-change:transform;
}

/* Capas de gradiente */
.hero-velo {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,
      rgba(7,12,20,.50) 0%,
      rgba(7,12,20,.10) 40%,
      rgba(7,12,20,.80) 80%,
      #070c14 100%),
    linear-gradient(105deg,
      rgba(7,12,20,.70) 0%,
      transparent 50%);
}

/* Líneas geométricas decorativas */
.hero-geo {
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
}
.hero-geo-h {
  position:absolute;
  left:0; right:0; height:1px;
  background:linear-gradient(to right, transparent 5%, rgba(184,115,51,.08) 30%, rgba(184,115,51,.08) 70%, transparent 95%);
}
.hero-geo-h:nth-child(1) { top:30%; }
.hero-geo-h:nth-child(2) { top:65%; }

.hero-geo-v {
  position:absolute;
  top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent 5%, rgba(184,115,51,.06) 30%, rgba(184,115,51,.06) 70%, transparent 95%);
}
.hero-geo-v:nth-child(3) { left:calc(64px + 8.33%); }
.hero-geo-v:nth-child(4) { right:64px; }

/* Círculo animado esquina derecha */
.hero-circle {
  position:absolute; z-index:2;
  right:-120px; top:50%; transform:translateY(-50%);
  width:500px; height:500px;
  border:1px solid rgba(184,115,51,.07);
  border-radius:50%;
  animation:heroCircleSpin 60s linear infinite;
}
.hero-circle::before {
  content:''; position:absolute; inset:40px;
  border:1px solid rgba(184,115,51,.05);
  border-radius:50%;
  animation:heroCircleSpin 40s linear infinite reverse;
}
@keyframes heroCircleSpin {
  from { transform:translateY(-50%) rotate(0deg); }
  to   { transform:translateY(-50%) rotate(360deg); }
}

/* Número grande decorativo */
.hero-num {
  position:absolute; right:64px; bottom:100px; z-index:3;
  font-family:var(--display);
  font-size:clamp(100px,14vw,180px);
  color:rgba(184,115,51,.06);
  line-height:1; letter-spacing:-5px;
  user-select:none; pointer-events:none;
}

/* Contenido */
.hero-content {
  position:relative; z-index:4;
  align-self:end;
  padding:0 64px 100px;
  max-width:860px;
}

/* Tag animado */
.hero-tag {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:10px; font-weight:600;
  letter-spacing:5px; text-transform:uppercase;
  color:var(--cobre2); margin-bottom:32px;
  overflow:hidden;
}
.hero-tag-inner {
  display:flex; align-items:center; gap:12px;
  transform:translateX(-24px); opacity:0;
  animation:heroTagIn .9s 1.2s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-tag-inner::before {
  content:''; display:block;
  width:36px; height:1px;
  background:var(--cobre);
}
@keyframes heroTagIn {
  to { transform:translateX(0); opacity:1; }
}

/* Título con clip reveal por línea */
.hero-h1 {
  font-family:var(--serif);
  font-size:clamp(56px,8.5vw,110px);
  font-weight:400; line-height:.96;
  letter-spacing:-2.5px; margin-bottom:32px;
  color:var(--marfil);
}
.hero-h1 .ln {
  display:block; overflow:hidden;
}
.hero-h1 .ln span {
  display:block;
  transform:translateY(110%);
  animation:lnReveal .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-h1 .ln:nth-child(1) span { animation-delay:1.4s; }
.hero-h1 .ln:nth-child(2) span { animation-delay:1.55s; color:var(--cobre2); font-style:italic; }
.hero-h1 .ln:nth-child(3) span { animation-delay:1.70s; font-size:.55em; color:var(--pizarra); font-style:normal; }
@keyframes lnReveal {
  to { transform:translateY(0); }
}

/* Párrafo */
.hero-p {
  font-size:15px; color:var(--pizarra); line-height:1.75;
  max-width:500px; margin-bottom:44px;
  opacity:0;
  animation:heroFade .8s 2s forwards;
}
@keyframes heroFade { to { opacity:1; } }

/* CTAs */
.hero-btns {
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0;
  animation:heroFade .8s 2.2s forwards;
}

/* Stats en barra inferior */
.hero-stats {
  position:absolute; bottom:0; right:0; z-index:4;
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--borde);
  border-left:1px solid var(--borde);
  opacity:0;
  animation:heroFade .8s 2.4s forwards;
}
.h-stat {
  padding:24px 32px; text-align:center;
  background:var(--glass);
  backdrop-filter:blur(16px);
  border-right:1px solid var(--borde);
  transition:background .3s;
}
.h-stat:hover { background:rgba(184,115,51,.06); }
.h-stat-n {
  font-family:var(--serif);
  font-size:36px; color:var(--cobre2);
  line-height:1; margin-bottom:4px;
}
.h-stat-l {
  font-family:var(--sans);
  font-size:9px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--pizarra);
}

/* Scroll indicator */
.hero-scroll {
  position:absolute; left:64px; bottom:40px; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:heroFade .6s 2.6s forwards;
}
.hero-scroll-lbl {
  font-family:var(--sans); font-size:8px;
  letter-spacing:4px; text-transform:uppercase; color:var(--pizarra);
  writing-mode:vertical-rl;
}
.hero-scroll-line {
  width:1px; height:60px;
  background:linear-gradient(to bottom, var(--cobre), transparent);
  transform-origin:top;
  animation:scrollLine 2s 3s ease-in-out infinite;
}
@keyframes scrollLine {
  0%  { transform:scaleY(0); opacity:0; }
  30% { opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}

/* RESPONSIVE HERO */
@media(max-width:1024px) {
  .hero-content { padding:0 36px 80px; }
  .hero-stats { display:none; }
  .hero-scroll { left:36px; }
  .hero-num { display:none; }
  .hero-geo-v { display:none; }
}
@media(max-width:640px) {
  .hero-content { padding:0 20px 72px; }
  .hero-scroll { display:none; }
}