/* Olympo.Shop — landing con parallax */

.page-landing em { font-style: normal; color: var(--gold); }
.section-head h2 { font: 700 clamp(38px, 5.6vw, 80px)/1.02 var(--ff-display); margin-top: 18px; letter-spacing: .01em; }
.section-head p { color: var(--ink-2); margin-top: 18px; max-width: 520px; font-size: 17px; }

html.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ============ HERO ============ */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 34%, rgba(201, 164, 92, .16) 0%, rgba(201, 164, 92, 0) 70%),
    linear-gradient(180deg, #08080a 0%, #131217 48%, #1a1a1f 70%, #0a0a0b 100%);
  --temple-w: min(80vw, 1180px);
  --temple-bottom: 0%;
  --temple-x: 65%;
  --mega-top: 15vh;
}
.hero-scene { position: absolute; inset: 0; }
.layer { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.layer svg { position: absolute; left: 0; bottom: 0; width: 100%; }

.stars { position: absolute; inset: 0 0 35%; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #f1e7cf; opacity: .5; animation: twinkle var(--d, 4s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes twinkle { 50% { opacity: .08; transform: scale(.6); } }

.moon {
  position: absolute; left: var(--temple-x); top: 17%; width: 34vmin; height: 34vmin; margin-left: -17vmin; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fbf1d6 0%, #e6cf98 38%, #b8913f 78%, #8a6a2c 100%);
  box-shadow: 0 0 80px 10px rgba(227, 200, 141, .35), 0 0 260px 80px rgba(201, 164, 92, .18);
  opacity: .92; animation: moon-in 2.4s var(--ease) both;
}
@keyframes moon-in { from { opacity: 0; transform: translateY(60px) scale(.9); } }

.layer-far svg { height: 64%; bottom: 10%; animation: rise 1.8s var(--ease) .1s both; }
.layer-mid svg { height: 46%; bottom: 6%; animation: rise 1.8s var(--ease) .25s both; }
.layer-near svg { height: 34%; bottom: -1px; animation: rise 1.6s var(--ease) .1s both; }
@keyframes rise { from { opacity: 0; transform: translateY(80px); } }

.layer-title { display: flex; justify-content: center; padding-top: var(--mega-top); }
.mega {
  display: block; font: 800 clamp(72px, 15.5vw, 280px)/.9 var(--ff-display); letter-spacing: .04em; padding-left: .04em;
  background: linear-gradient(180deg, rgba(246, 241, 230, .96) 0%, rgba(236, 232, 223, .7) 45%, rgba(236, 232, 223, .08) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: mega-in 2s var(--ease) .15s both;
}
@keyframes mega-in { from { opacity: 0; letter-spacing: .32em; filter: blur(8px); } }

.temple {
  position: absolute; left: calc(var(--temple-x) - var(--temple-w) / 2); bottom: var(--temple-bottom);
  width: var(--temple-w); aspect-ratio: 800 / 520;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
  animation: temple-in 2s var(--ease) .35s both;
}
.layer .temple > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.temple-photo { position: absolute; left: 24.5%; bottom: 24.2%; width: 51%; max-width: none; height: auto; }
@keyframes temple-in { from { opacity: 0; transform: translateY(70px) scale(.96); } }

.cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 232, 223, .16), rgba(236, 232, 223, 0));
  animation: drift 38s ease-in-out infinite alternate;
}
.c1 { width: 70vw; height: 16vh; left: -18vw; bottom: 22%; }
.c2 { width: 60vw; height: 14vh; right: -20vw; bottom: 17%; animation-duration: 46s; animation-delay: -12s; }
.c3 { width: 40vw; height: 10vh; left: 30vw; bottom: 28%; opacity: .7; animation-duration: 54s; }
.c4 { width: 80vw; height: 20vh; left: 10vw; bottom: 6%; opacity: .8; animation-duration: 60s; animation-delay: -20s; }
@keyframes drift { to { transform: translateX(9vw); } }

.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(180deg, rgba(10, 10, 11, 0), var(--bg)); pointer-events: none; }

.hero-content { position: absolute; left: 0; right: 0; bottom: max(6vh, 40px); z-index: 5; will-change: transform, opacity; }
.hero-content > * { max-width: min(560px, 42vw); animation: up 1s var(--ease) both; }
@media (max-width: 900px) { .hero-content > * { max-width: 560px; } }
.hero-content > :nth-child(1) { animation-delay: .9s; }
.hero-content > :nth-child(2) { animation-delay: 1s; }
.hero-content > :nth-child(3) { animation-delay: 1.1s; }
.hero-content > :nth-child(4) { animation-delay: 1.2s; }
@keyframes up { from { opacity: 0; transform: translateY(24px); } }
.hero-title { font: 700 clamp(32px, 3.7vw, 56px)/1.06 var(--ff-display); margin-top: 18px; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hero-sub { color: var(--ink-2); margin-top: 16px; font-size: 17px; max-width: 440px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.scroll-cue { position: absolute; right: clamp(16px, 4vw, 40px); bottom: max(6vh, 40px); z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink-2); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue span { writing-mode: vertical-rl; }
.scroll-cue i { width: 1px; height: 64px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ink); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { to { top: 110%; } }

@media (max-width: 900px) {
  .hero { --temple-w: 150vw; --temple-bottom: 36%; --temple-x: 50%; --mega-top: 15vh; }
  .hero-title { font-size: clamp(28px, 8vw, 40px); margin-top: 12px; }
  .hero-sub { font-size: 15px; margin-top: 10px; }
  .hero-ctas { margin-top: 20px; gap: 10px; }
  .hero-ctas .btn { min-height: 46px; padding: 0 18px; font-size: 14px; }
  .moon { top: 22%; width: 46vmin; height: 46vmin; margin-left: -23vmin; }
  .layer-far svg { height: 56%; bottom: 30%; }
  .layer-mid svg { height: 40%; bottom: 26%; }
  .layer-near svg { height: 46%; }
  .c1, .c2, .c3 { bottom: 40%; }
  .hero-fade { height: 50%; background: linear-gradient(180deg, rgba(10, 10, 11, 0), rgba(10, 10, 11, .85) 45%, var(--bg)); }
  .scroll-cue { display: none; }
  .hero-sub { font-size: 16px; }
}
@media (max-width: 900px) and (min-aspect-ratio: 3/4) {
  .hero { --temple-w: 70vw; --temple-bottom: 22%; }
}

/* ============ MARQUESINAS ============ */
.marquee { position: relative; z-index: 2; padding: 28px 0; border-block: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.marquee-row, .creed-row { white-space: nowrap; overflow: hidden; }
.marquee-track { display: inline-flex; will-change: transform; }
.marquee-track span { font: 800 clamp(38px, 6.6vw, 96px)/1.12 var(--ff-display); letter-spacing: .05em; }
.marquee-track b { color: var(--gold); font-size: .42em; vertical-align: middle; margin: 0 .35em; font-weight: 400; }
.is-outline .marquee-track span { color: transparent; -webkit-text-stroke: 1px rgba(236, 232, 223, .4); }
.is-outline .marquee-track b { -webkit-text-stroke: 0; }

/* ============ MANIFIESTO ============ */
.manifesto { position: relative; padding: clamp(110px, 16vw, 210px) 0; overflow: hidden; }
.manifesto-inner { position: relative; z-index: 1; }
.manifesto-title { font: 700 clamp(40px, 6.6vw, 96px)/1 var(--ff-display); margin-top: 20px; }
.manifesto-text { font-size: clamp(22px, 2.7vw, 38px); line-height: 1.35; max-width: 1000px; margin-top: 44px; font-weight: 500; letter-spacing: -.01em; }
.manifesto-text .w { opacity: .14; transition: opacity .25s linear; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 80px 0 0; padding-top: 32px; border-top: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column-reverse; gap: 8px; }
.stats dd { margin: 0; font: 700 clamp(42px, 5vw, 68px)/1 var(--ff-display); }
.stats dt { color: var(--muted); font-size: 14px; }
.frag { position: absolute; will-change: transform; }
.frag-a { width: clamp(70px, 9vw, 130px); right: 7%; top: 8%; }
.frag-b { width: clamp(140px, 18vw, 240px); left: -40px; bottom: 30%; opacity: .9; }
.frag-c { width: clamp(80px, 10vw, 140px); right: 26%; bottom: 4%; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .frag-a { right: -10px; top: 3%; }
  .frag-b { display: none; }
}

/* ============ MARCAS ============ */
.brands { padding: 20px 0 clamp(110px, 14vw, 190px); }
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
.brand-card {
  position: relative; isolation: isolate; overflow: hidden; min-height: 470px; padding: 28px; border-radius: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, #151518 0%, #0e0e10 100%); border: 1px solid var(--line);
  transition: border-color .35s; will-change: transform;
}
.brand-card:nth-child(even) { margin-top: 90px; }
.brand-card::before {
  content: ''; position: absolute; inset: -10%; z-index: -1;
  background: radial-gradient(70% 55% at 20% 100%, var(--tone) 0%, rgba(0, 0, 0, 0) 70%);
  opacity: .42; transition: opacity .45s;
}
.brand-card:hover { border-color: var(--line-2); }
.brand-card:hover::before { opacity: .75; }
.tone-steel { --tone: #5f7790; }
.tone-crimson { --tone: #a8232b; }
.tone-violet { --tone: #6040a0; }
.tone-azure { --tone: #2453e8; }
.brand-word-bg {
  position: absolute; z-index: -1; top: -20px; right: 6px; writing-mode: vertical-rl;
  font: 800 clamp(70px, 8vw, 128px)/1 var(--ff-display); white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(236, 232, 223, .13); will-change: transform;
}
.brand-num { font: 600 15px/1 var(--ff-display); color: var(--gold); letter-spacing: .2em; }
.brand-piece {
  position: absolute; z-index: -1; left: 50%; top: 9%; width: 74%; margin-left: -37%;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .55)); transition: scale .6s var(--ease); will-change: transform;
}
.brand-card:hover .brand-piece { scale: 1.06; }
.brand-piece.is-photo {
  left: 0; top: 0; margin: 0; width: 100%; height: 66%; object-fit: cover; object-position: center 35%;
  filter: none; opacity: .95; transform-origin: center top;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.brand-card:has(.brand-piece.is-photo) .brand-num { position: relative; z-index: 1; background: rgba(11, 11, 12, .72); padding: 7px 10px; border-radius: 8px; align-self: flex-start; }
.brand-card:hover .brand-piece.is-photo { scale: 1.03; }
.brand-body { position: relative; padding-top: 40px; }
.brand-body::before { content: ''; position: absolute; inset: -40px -28px -28px; z-index: -1; background: linear-gradient(180deg, rgba(14, 14, 16, 0), rgba(14, 14, 16, .92) 45%); }
.brand-body h3 { font: 700 clamp(28px, 2.6vw, 36px)/1 var(--ff-display); }
.brand-body p { color: var(--ink-2); font-size: 15px; margin-top: 14px; }
.brand-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; font-size: 14px; }
.brand-link .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.brand-card:hover .brand-link .icon { transform: translateX(4px); }
@media (max-width: 1060px) {
  .brand-grid { grid-template-columns: 1fr 1fr; }
  .brand-card { min-height: 380px; }
  .brand-card:nth-child(even) { margin-top: 50px; }
  .brand-card:nth-child(odd):not(:first-child) { margin-top: -40px; }
}
@media (max-width: 600px) {
  .brand-grid { grid-template-columns: 1fr; }
  .brand-card, .brand-card:nth-child(even), .brand-card:nth-child(odd):not(:first-child) { margin-top: 0; min-height: 300px; }
}

/* ============ DROPS (scroll horizontal) ============ */
.drops { position: relative; }
.drops-sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 36px; padding-top: var(--header-h);
}
.drops-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.drops-head h2 { font: 700 clamp(36px, 5vw, 72px)/1 var(--ff-display); margin-top: 16px; }
.drops-viewport { overflow: hidden; }
.drops-track {
  display: flex; gap: 24px; width: max-content; will-change: transform;
  padding: 0 max(clamp(16px, 4vw, 40px), calc((100vw - var(--wrap)) / 2 + 40px));
}
.drop-card { flex: none; width: clamp(240px, 24vw, 340px); display: grid; gap: 16px; align-content: start; }
.drop-media {
  position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #f4f1eb 0%, var(--stone) 45%, var(--stone-2) 100%);
}
.drop-media img { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; object-fit: contain; will-change: transform; transition: scale .6s var(--ease); }
.drop-card:hover .drop-media img { scale: 1.05; }
.drop-media img.is-photo { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.drop-index { position: absolute; left: 18px; top: 10px; font: 800 64px/1 var(--ff-display); color: rgba(11, 11, 12, .1); }
.drop-media .badge { position: absolute; right: 14px; top: 14px; }
.drop-info h3 { font-size: 19px; font-weight: 600; margin-top: 6px; line-height: 1.25; }
.drop-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 14px; margin-top: 6px; }
.drop-meta strong { color: var(--ink); font-size: 16px; }
.drop-more {
  aspect-ratio: 4 / 5; align-content: space-between; justify-items: start; padding: 32px; border-radius: 20px;
  border: 1px solid var(--line-2); background: radial-gradient(80% 60% at 80% 100%, rgba(201, 164, 92, .22), transparent 70%), var(--bg-2);
}
.drop-more .display { font: 700 clamp(34px, 3vw, 46px)/1.05 var(--ff-display); }
.drops-progress { height: 2px; background: var(--bg-4); border-radius: 2px; overflow: hidden; }
.drops-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--gold); }

.drops.is-native .drops-sticky { position: static; height: auto; padding: 110px 0 90px; }
.drops.is-native .drops-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.drops.is-native .drops-viewport::-webkit-scrollbar { display: none; }
.drops.is-native .drop-card { scroll-snap-align: center; width: min(76vw, 320px); }
.drops.is-native .drops-progress { display: none; }

/* ============ LEMA ============ */
.creed { position: relative; padding: clamp(90px, 12vw, 150px) 0; overflow: hidden; background: #070708; border-block: 1px solid var(--line); }
.laurel { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); opacity: .24; will-change: transform; }
.laurel svg { width: min(78vw, 600px); }
.creed-row { position: relative; z-index: 1; }
.creed-row span { font: 800 clamp(46px, 8.6vw, 136px)/1.08 var(--ff-display); letter-spacing: .03em; }
.creed-row.is-outline span { color: transparent; -webkit-text-stroke: 1px rgba(201, 164, 92, .55); }

/* ============ ENVÍOS ============ */
.perks { padding: clamp(110px, 14vw, 190px) 0; }
.perk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.perk { background: var(--bg); padding: 34px 28px 38px; display: grid; gap: 14px; align-content: start; transition: background .3s, opacity 1s var(--ease), transform 1s var(--ease); }
.perk:hover { background: var(--bg-2); }
.perk .icon { width: 34px; height: 34px; color: var(--gold); stroke-width: 1.3; }
.perk h3 { font-size: 19px; font-weight: 600; margin-top: 8px; }
.perk p { color: var(--ink-2); font-size: 15px; }
.perk:nth-child(2) { transition-delay: .08s; }
.perk:nth-child(3) { transition-delay: .16s; }
.perk:nth-child(4) { transition-delay: .24s; }
.track-box {
  margin-top: 28px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 28px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(120deg, #17171a, #111113);
}
.track-box h3 { font: 700 24px/1.1 var(--ff-display); margin-bottom: 6px; }
.track-fields { display: flex; gap: 10px; flex-wrap: wrap; }
.track-fields .input { width: 220px; }
@media (max-width: 1000px) { .perk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .perk-grid { grid-template-columns: 1fr; }
  .track-fields, .track-fields .input, .track-fields .btn { width: 100%; }
}

/* ============ SEDES ============ */
.sedes { position: relative; overflow: hidden; padding: clamp(110px, 12vw, 150px) 0 clamp(260px, 30vw, 380px); }
.volcano-scene { position: absolute; inset: 0; pointer-events: none; }
.volcano-sky {
  position: absolute; inset: -25% 0 0; will-change: transform;
  background: radial-gradient(55% 40% at 50% 74%, rgba(201, 164, 92, .2), rgba(201, 164, 92, 0) 70%), linear-gradient(180deg, #0a0a0b, #141317 62%, #0a0a0b);
}
.volcano-far { position: absolute; left: 0; bottom: 0; width: 100%; height: 72%; will-change: transform; }
.volcano-near { position: absolute; left: 0; bottom: -2px; width: 100%; height: 26%; will-change: transform; }
.smoke circle { fill: rgba(236, 232, 223, .07); transform-box: fill-box; transform-origin: center; animation: puff 10s ease-in-out infinite; }
.smoke circle:nth-child(2) { animation-delay: -2.5s; }
.smoke circle:nth-child(3) { animation-delay: -5s; }
.smoke circle:nth-child(4) { animation-delay: -7.5s; }
@keyframes puff { 0% { transform: translate(0, 20px) scale(.6); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(30px, -40px) scale(1.5); opacity: 0; } }
.sedes-inner { position: relative; z-index: 1; }
.sedes .dot { color: var(--gold); }
.sede-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); gap: 18px; margin-top: 40px; }
.sede { padding: 26px; border-radius: 18px; background: rgba(17, 17, 19, .7); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sede-tag { font: 600 12px/1 var(--ff-display); letter-spacing: .24em; color: var(--gold); }
.sede h3 { font: 700 28px/1 var(--ff-display); margin: 12px 0 10px; }
.sede p { color: var(--ink-2); font-size: 15px; }
@media (max-width: 640px) { .sede-grid { grid-template-columns: 1fr; } }

/* ============ CTA FINAL ============ */
.final-cta { position: relative; overflow: hidden; padding: clamp(120px, 16vw, 220px) 0; text-align: center; border-top: 1px solid var(--line); }
.greek {
  position: absolute; top: 50%; left: 0; margin-top: -.5em; white-space: nowrap; will-change: transform;
  font: 800 clamp(120px, 24vw, 380px)/1 var(--ff-display); color: transparent; -webkit-text-stroke: 1px rgba(201, 164, 92, .15);
}
.final-inner { position: relative; }
.final-logo { width: 84px; height: 84px; margin: 0 auto 30px; color: var(--ink); }
.final-cta h2 { font: 700 clamp(34px, 5vw, 72px)/1.05 var(--ff-display); }
.final-cta .hero-ctas { justify-content: center; margin-top: 40px; }

@media (prefers-reduced-motion: reduce) {
  .layer, .frag, .brand-card, .brand-word-bg, .laurel, .greek, .volcano-sky, .volcano-far, .volcano-near { transform: none !important; }
}