/* ==========================================================================
   Sections
   ========================================================================== */

section { position: relative; }

/* ============ HERO ============ */
.hero {
  height: 100svh; min-height: 640px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(60px, 9vh, 110px);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transform: scale(1.12);
  will-change: transform;
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(10,10,12,0.98) 0%, rgba(10,10,12,0.55) 45%, rgba(10,10,12,0.25) 70%, rgba(10,10,12,0.55) 100%);
}
.hero__mesh { position: absolute; inset: 0; background: var(--fd-grad-mesh); mix-blend-mode: screen; opacity: .8; }

.hero__content { position: relative; z-index: 2; padding-inline: clamp(20px, 5vw, 64px); max-width: 900px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  color: var(--fd-ink-dim);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--fd-line);
  padding: 8px 16px; border-radius: var(--radius-full);
  margin-bottom: 26px; backdrop-filter: blur(8px);
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fd-green); box-shadow: 0 0 10px var(--fd-green); animation: blink 2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }

.hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 11vw, 148px);
  line-height: 0.92;
  margin-bottom: 26px;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line--accent {
  background: var(--fd-grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero__sub {
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--fd-ink-dim);
  max-width: 52ch;
  margin-bottom: 36px;
}
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__scroll {
  position: absolute; right: clamp(20px, 5vw, 64px); bottom: 40px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fd-ink-faint);
}
.hero__scroll-line { width: 1px; height: 60px; background: var(--fd-line); position: relative; overflow: hidden; }
.hero__scroll-line i {
  position: absolute; left: 0; top: -30%; width: 100%; height: 30%;
  background: var(--fd-yellow);
  animation: scroll-cue 2s ease-in-out infinite;
}
@keyframes scroll-cue { 0% { top: -30%; } 100% { top: 100%; } }

/* ============ MARQUEE ============ */
.marquee {
  background: var(--fd-grad-warm);
  overflow: hidden;
  padding-block: 14px;
  transform: rotate(-1deg) scale(1.02);
  border-block: 2px solid rgba(0,0,0,.15);
}
.marquee__track { display: flex; width: max-content; animation: marquee-scroll 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; }
.marquee__group span { font-weight: 800; font-size: 14px; letter-spacing: .04em; color: #1a0a02; }
.marquee__group i { color: rgba(26,10,2,.5); font-style: normal; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }

/* ============ PROPS ============ */
.props { padding-block: clamp(80px, 12vh, 140px); }

/* ============ (coleccion/empaque removed — store in store.css) ============ */

/* ============ HISTORIA ============ */
.historia { padding-block: clamp(80px, 12vh, 140px); background: var(--fd-black-2); }
.historia__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; align-items: center;
}
.historia__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3.1; }
.historia__media img { width: 100%; height: 100%; object-fit: cover; }
.historia__badge {
  position: absolute; bottom: 20px; left: 20px;
  background: rgba(10,10,12,.7); backdrop-filter: blur(10px);
  border: 1px solid var(--fd-line);
  border-radius: 16px; padding: 12px 18px;
  display: flex; flex-direction: column;
}
.historia__badge span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--fd-ink-faint); }
.historia__badge strong { font-family: var(--font-display); font-size: 24px; color: var(--fd-yellow); }

.historia__copy h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 52px); margin-bottom: 20px; }
.historia__lead { font-size: 19px; color: var(--fd-ink); margin-bottom: 16px; font-weight: 600; }
.historia__copy > p:not(.historia__lead) { color: var(--fd-ink-dim); font-size: 16px; margin-bottom: 24px; max-width: 56ch; }
.historia__copy blockquote {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  padding-left: 22px; border-left: 3px solid var(--fd-yellow);
  margin-bottom: 30px; color: var(--fd-ink);
}
.historia__copy blockquote cite {
  display: block; font-family: var(--font-body); font-style: normal; font-weight: 700;
  font-size: 13px; color: var(--fd-ink-dim); margin-top: 10px;
}
.vision-card {
  position: relative;
  background: var(--fd-grad-legado);
  border-radius: var(--radius-md);
  padding: 30px 30px 24px;
  overflow: hidden;
}
.vision-card__mark { position: absolute; top: -10px; left: 14px; font-family: var(--font-display); font-size: 100px; opacity: .25; }
.vision-card p { position: relative; font-size: 18px; font-weight: 700; line-height: 1.4; max-width: 40ch; }
.vision-card__foot { display: block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }

/* ============ (voz/mundo removed) ============ */

/* ============ CTA FINAL ============ */
.cta-final {
  padding-block: clamp(90px, 14vh, 160px);
  position: relative; overflow: hidden;
}
.cta-final__mesh { position: absolute; inset: 0; background: var(--fd-grad-mesh); opacity: .7; }
.cta-final__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: start; position: relative; }
.cta-final__copy h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.2vw, 54px); margin-bottom: 20px; }
.cta-final__copy p { color: var(--fd-ink-dim); font-size: 16px; max-width: 52ch; margin-bottom: 30px; }
.cta-final__actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* ============ FOOTER ============ */
.footer { padding-top: clamp(70px, 9vh, 110px); border-top: 1px solid var(--fd-line-soft); }
.footer__top { display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; padding-bottom: 60px; }
.footer__brand img { width: 54px; height: 54px; margin-bottom: 14px; }
.footer__brand p { font-family: var(--font-display); font-size: 20px; color: var(--fd-ink-dim); }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__cols h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--fd-ink-faint); margin-bottom: 16px; }
.footer__cols a { display: block; font-size: 14px; color: var(--fd-ink-dim); margin-bottom: 12px; transition: color .3s; }
.footer__cols a:hover { color: var(--fd-yellow); }
.footer__bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-block: 26px; border-top: 1px solid var(--fd-line-soft);
  font-size: 12px; color: var(--fd-ink-faint);
}