/* =========================================================
   MONO CÓSMICO — LANDING EXPRESS
   Visual: psicodelia 80s + cosmos + brewing
   ========================================================= */

:root {
  --bg: #070607;
  --paper: #f4f0df;
  --muted: rgba(244, 240, 223, 0.7);
  --line: rgba(255, 255, 255, 0.17);
  --glass: rgba(8, 7, 9, 0.44);
  --pink: #ff3d79;
  --orange: #ff8b1f;
  --gold: #ffc83d;
  --green: #98c83e;
  --violet: #9f3fff;
  --mx: 0;
  --my: 0;
  --scroll: 0;
  --ease: cubic-bezier(.2, .75, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--paper);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-loading { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ---------- IMMERSIVE BACKGROUND ---------- */
.world {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #080608;
}

.world__image {
  position: absolute;
  inset: -6%;
  background-image: url("assets/background-psychedelic.webp");
  background-position: center;
  background-size: cover;
  transform:
    translate3d(calc(var(--mx) * 16px), calc(var(--my) * 12px + var(--scroll) * -0.018px), 0)
    scale(1.08);
  transform-origin: center;
  will-change: transform;
  filter: saturate(1.08) contrast(1.04);
}

.world__bloom {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 53%, rgba(255, 166, 32, 0.19), transparent 23%),
    radial-gradient(circle at 50% 40%, rgba(250, 47, 102, 0.10), transparent 36%),
    linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.32));
  mix-blend-mode: screen;
}

.world__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 34%, rgba(0,0,0,.24) 63%, rgba(0,0,0,.88) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.22), transparent 28%, transparent 70%, rgba(0,0,0,.72));
}

.world__grain {
  position: absolute;
  inset: -70%;
  opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  animation: grain 9s steps(8) infinite;
}

@keyframes grain {
  0% { transform: translate(0,0); }
  20% { transform: translate(2%,-3%); }
  40% { transform: translate(-4%,2%); }
  60% { transform: translate(3%,4%); }
  80% { transform: translate(-2%,-4%); }
  100% { transform: translate(0,0); }
}

/* ---------- PARTICLES ---------- */
.particles { position: absolute; inset: 0; overflow: hidden; }
.particle {
  position: absolute;
  width: var(--size);
  height: var(--size);
  left: var(--x);
  bottom: -10vh;
  border-radius: 999px;
  background: rgba(255, 229, 151, var(--alpha));
  box-shadow: 0 0 16px rgba(255, 144, 40, .55);
  filter: blur(var(--blur));
  animation: floatParticle var(--duration) linear var(--delay) infinite;
  transform: translate3d(0,0,0);
}
@keyframes floatParticle {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  10%  { opacity: 1; }
  60%  { transform: translate3d(var(--drift), -64vh, 0) scale(1); }
  100% { transform: translate3d(calc(var(--drift) * -.35), -118vh, 0) scale(.25); opacity: 0; }
}

/* ---------- LAYOUT ---------- */
main { position: relative; z-index: 2; }
section { position: relative; isolation: isolate; }
.section {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(72px, 10vw, 140px) 6vw;
}

.section__index,
.hero__eyebrow,
.kicker {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* ---------- HERO ---------- */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 48px 6vw 60px;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(3,2,4,.18), rgba(3,2,4,.08) 42%, rgba(3,2,4,.5));
}

.hero__halo {
  position: absolute;
  width: min(66vw, 880px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,174,56,.18), rgba(255,58,117,.08) 38%, transparent 66%);
  filter: blur(22px);
  animation: breathe 7s var(--ease) infinite alternate;
  z-index: -1;
}
@keyframes breathe {
  to { transform: scale(1.08); opacity: .76; }
}

.hero__content {
  width: min(1040px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero__eyebrow {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  padding: 10px 14px 9px;
  border-radius: 999px;
}

.hero__logo {
  display: block;
  width: clamp(240px, 38vw, 560px);
  height: auto;
  margin: -8px 0 -20px;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.8))
    drop-shadow(0 14px 40px rgba(0,0,0,.55));
  animation: logoHover 6.5s var(--ease) infinite alternate;
}
@keyframes logoHover {
  to { transform: translateY(-7px) rotate(.2deg); }
}

.hero__copy {
  position: relative;
  text-shadow: 0 3px 28px rgba(0,0,0,.92);
}
.hero__copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -28px -7vw;
  background: radial-gradient(ellipse at center, rgba(3,2,4,.48) 0%, rgba(3,2,4,.22) 46%, transparent 73%);
  filter: blur(12px);
  pointer-events: none;
}
.hero__copy h1 {
  margin: 2px 0 8px;
  font-size: clamp(54px, 10vw, 150px);
  line-height: .78;
  font-weight: 900;
  letter-spacing: -.075em;
}
.hero__copy h1 span {
  display: block;
  /* Gradiente de portada: mayor contraste sobre el fondo psicodélico */
  background: linear-gradient(100deg,
    #ffffff 0%,
    #fff2b8 20%,
    #ffd238 39%,
    #ff7a2f 58%,
    #ff4b91 76%,
    #ffe7f2 92%,
    #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
  filter:
    drop-shadow(0 2px 0 rgba(22,8,13,.88))
    drop-shadow(0 7px 18px rgba(0,0,0,.82))
    drop-shadow(0 0 28px rgba(255,112,55,.34));
}
.kicker { margin: 0 0 10px; color: rgba(255,236,198,.74); }
.hero__sub { margin: 0; font-size: clamp(14px, 1.5vw, 19px); color: rgba(255,255,255,.78); }

.button {
  position: relative;
  margin-top: 12px;
  min-width: 160px;
  padding: 14px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px;
  background: rgba(12,8,10,.36);
  backdrop-filter: blur(14px) saturate(1.2);
  overflow: hidden;
  box-shadow: 0 12px 44px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.button__label { position: relative; z-index: 2; font-size: 11px; font-weight: 850; letter-spacing: .22em; }
.button__orb {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  right: 14px;
  background: var(--gold);
  filter: blur(2px);
  opacity: .9;
  box-shadow: 0 0 18px 5px rgba(255,158,43,.45);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.button:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: rgba(255,218,131,.58);
  box-shadow: 0 16px 46px rgba(0,0,0,.35), 0 0 36px rgba(255,100,60,.16);
}
.button:hover .button__orb { transform: scale(8); opacity: .10; }

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: .64;
}
.scroll-hint span { font-size: 9px; letter-spacing: .25em; }
.scroll-hint i { width: 1px; height: 34px; background: linear-gradient(to bottom, white, transparent); animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes scrollLine { 50% { transform: scaleY(.55); transform-origin: top; opacity: .35; } }

/* ---------- PRODUCT ---------- */
.product {
  background:
    radial-gradient(circle at 50% 58%, rgba(255,145,42,.13), transparent 24%),
    linear-gradient(to bottom, rgba(2,1,3,.18), rgba(2,1,3,.55) 55%, rgba(2,1,3,.72));
}
.product::before {
  content: "";
  position: absolute;
  top: -64px;
  left: -10%;
  width: 120%;
  height: 105px;
  background: rgba(4,3,5,.33);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  filter: blur(1px);
  opacity: .75;
}

.product__stage { width: min(960px, 100%); position: relative; display: grid; place-items: center; }
.product__card {
  width: min(720px, 100%);
  padding: clamp(32px, 6vw, 76px);
  text-align: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}
.glass {
  border: 1px solid rgba(255,255,255,.17);
  border-radius: clamp(24px, 4vw, 44px);
  background: linear-gradient(145deg, rgba(19,12,16,.48), rgba(8,7,9,.30));
  backdrop-filter: blur(18px) saturate(1.18);
  box-shadow:
    0 40px 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -50px 80px rgba(255,89,54,.03);
}
.product__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,.05) 43%, transparent 59%);
  transform: translateX(-100%);
  animation: sheen 8s ease-in-out infinite;
}
@keyframes sheen { 0%,58% { transform: translateX(-120%); } 78%,100% { transform: translateX(120%); } }

.product__card h2 {
  margin: 22px auto 7px;
  font-size: clamp(34px, 6vw, 74px);
  line-height: .92;
  letter-spacing: -.05em;
  max-width: 12ch;
}
.product__style {
  margin: 0 0 34px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #ffd082;
}
.product__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.product__meta div { padding: 19px 12px; position: relative; }
.product__meta div + div::before { content:""; position:absolute; left:0; top:20%; height:60%; width:1px; background:var(--line); }
.product__meta span, .product__meta strong { display:block; }
.product__meta span { font-size: 9px; letter-spacing:.22em; color:rgba(255,255,255,.48); margin-bottom:7px; }
.product__meta strong { font-size: 12px; letter-spacing:.08em; }
.product__description { max-width: 42ch; margin: 30px auto 0; color: rgba(255,255,255,.72); line-height: 1.7; }

.product__orbit { position:absolute; inset:50% auto auto 50%; width:min(82vw,860px); aspect-ratio:1; transform:translate(-50%,-50%); z-index:1; pointer-events:none; }
.orbit { position:absolute; inset:0; border:1px solid rgba(255,204,88,.12); border-radius:50%; }
.orbit--1 { animation: spin 28s linear infinite; }
.orbit--2 { inset:11%; border-style:dashed; animation: spin 19s linear infinite reverse; }
.orbit--3 { inset:24%; border-color:rgba(255,92,113,.13); animation: spin 13s linear infinite; }
.product__planet {
  position:absolute;
  top:7%; left:58%;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid rgba(255,231,169,.35);
  border-radius:50%;
  color:#ffd66d;
  background:rgba(0,0,0,.35);
  box-shadow:0 0 22px rgba(255,145,54,.15);
}
@keyframes spin { to { transform: rotate(360deg); } }

.bubble-field i {
  position: absolute;
  border: 1px solid rgba(255,223,149,.22);
  border-radius: 50%;
  width: var(--bubble, 10px);
  height: var(--bubble, 10px);
  animation: bubble 6s ease-in-out infinite;
  opacity: .38;
}
.bubble-field i:nth-child(1){ --bubble:8px; left:10%; bottom:12%; animation-delay:-1s; }
.bubble-field i:nth-child(2){ --bubble:14px; left:18%; bottom:5%; animation-delay:-3s; }
.bubble-field i:nth-child(3){ --bubble:6px; right:14%; bottom:18%; animation-delay:-2s; }
.bubble-field i:nth-child(4){ --bubble:20px; right:7%; bottom:7%; animation-delay:-4s; }
.bubble-field i:nth-child(5){ --bubble:5px; left:28%; bottom:9%; animation-delay:-5s; }
.bubble-field i:nth-child(6){ --bubble:11px; right:28%; bottom:4%; animation-delay:-2.7s; }
@keyframes bubble { 0%,100% { transform:translateY(0) scale(.7); opacity:.08; } 50% { transform:translateY(-80px) scale(1); opacity:.42; } }

/* ---------- CLOSING ---------- */
.closing {
  min-height: 88svh;
  text-align: center;
  background: linear-gradient(to bottom, rgba(3,2,4,.72), rgba(2,1,3,.93));
}
.closing__glow {
  position:absolute;
  width:min(70vw,820px);
  height:300px;
  left:50%; top:45%;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(255,63,119,.14), rgba(255,139,31,.08) 35%, transparent 70%);
  filter:blur(30px);
}
.closing__content { width:min(920px,100%); }
.closing h2 {
  margin: 22px 0 12px;
  font-size: clamp(64px, 13vw, 170px);
  line-height:.78;
  letter-spacing:-.08em;
}
.closing h2 span { color:#ffb23d; text-shadow:0 0 38px rgba(255,91,60,.16); }
.closing__content > p:not(.section__index) { color:rgba(255,255,255,.65); margin:24px 0 36px; }

.social { width:min(720px,100%); margin:0 auto 80px; border-top:1px solid var(--line); }
.social a {
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;
  border-bottom:1px solid var(--line);
  font-size:clamp(16px,2vw,20px);
  transition:padding .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.social a span { transition:transform .35s var(--ease); }
.social a:hover { padding:0 18px; color:#ffd07a; background:rgba(255,255,255,.025); }
.social a:hover span { transform:translate(5px,-4px); }

footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:9px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.34);
}

/* ---------- REVEALS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px) scale(.985);
  filter: blur(8px);
  transition: opacity 1.05s var(--ease), transform 1.05s var(--ease), filter 1.05s var(--ease);
}
.reveal.is-visible { opacity:1; transform:none; filter:blur(0); }
.reveal--hero { transition-delay:.12s; }

/* ---------- LOADER ---------- */
.loader {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:#050405;
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
.loader.is-done { opacity:0; visibility:hidden; }
.loader__core { width:min(300px,66vw); text-align:center; position:relative; }
.loader__logo { width:170px; height:auto; opacity:0; transform:scale(.92); animation:loaderLogo 1.1s .15s var(--ease) forwards; filter:drop-shadow(0 0 30px rgba(255,255,255,.08)); }
.loader__orbit { position:absolute; width:220px; height:220px; border-radius:50%; border:1px solid rgba(255,255,255,.12); left:50%; top:43%; transform:translate(-50%,-50%); animation:spin 5s linear infinite; }
.loader__orbit::after { content:""; position:absolute; top:13%; right:5%; width:7px; height:7px; border-radius:50%; background:#ffc94a; box-shadow:0 0 14px #ff7b31; }
.loader__line { height:1px; width:100%; background:rgba(255,255,255,.10); margin:18px 0 14px; overflow:hidden; }
.loader__line span { display:block; width:100%; height:100%; background:linear-gradient(90deg,#ff4f80,#ffc83d); transform:translateX(-100%); animation:loadLine 1.45s .2s var(--ease) forwards; }
.loader p { font-size:8px; letter-spacing:.24em; color:rgba(255,255,255,.44); }
@keyframes loaderLogo { to { opacity:1; transform:none; } }
@keyframes loadLine { to { transform:none; } }

/* ---------- CUSTOM CURSOR ---------- */
.cursor { display:none; position:fixed; inset:0; z-index:150; pointer-events:none; }
.cursor__dot, .cursor__ring { position:absolute; left:0; top:0; border-radius:50%; transform:translate(-50%,-50%); }
.cursor__dot { width:5px; height:5px; background:#fff2c8; box-shadow:0 0 14px rgba(255,177,69,.7); }
.cursor__ring { width:34px; height:34px; border:1px solid rgba(255,232,191,.38); transition:width .25s ease,height .25s ease,border-color .25s ease,background .25s ease; }
.cursor.is-hovering .cursor__ring { width:48px; height:48px; border-color:rgba(255,196,86,.75); background:rgba(255,126,50,.06); }

@media (hover:hover) and (pointer:fine) {
  .cursor { display:block; }
  body, a, button { cursor:none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 720px) {
  .world__image { inset:-3% -22%; background-position:50% 50%; transform:translate3d(calc(var(--mx) * 8px),calc(var(--my) * 6px + var(--scroll) * -0.01px),0) scale(1.05); }
  .hero { padding-inline:20px; }
  .hero__eyebrow { font-size:8px; letter-spacing:.19em; }
  .hero__logo { width:min(72vw,320px); margin:-2px 0 -12px; }
  .hero__copy h1 { font-size:clamp(54px,19vw,94px); }
  .kicker { font-size:8px; letter-spacing:.18em; }
  .product__card { padding:34px 22px 38px; }
  .product__meta { grid-template-columns:1fr; }
  .product__meta div + div::before { left:14%; top:0; width:72%; height:1px; }
  .product__meta div { padding:14px 10px; }
  .product__orbit { width:130vw; opacity:.68; }
  .closing { min-height:84svh; padding-inline:22px; }
  .closing h2 { font-size:clamp(62px,22vw,112px); }
  .social { margin-bottom:52px; }
  footer { flex-direction:column; align-items:center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .world__image { transform:scale(1.05); }
  .cursor { display:none !important; }
  body, a, button { cursor:auto !important; }
}