/* ===== FullTime — landing ===== */
@property --ang {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --bg: #0b0312;
  --violet-900: #1d0631;
  --violet-700: #4a0f7a;
  --violet-600: #6418a8;
  --violet-500: #8a2be2;
  --violet-400: #a855f7;
  --gold: #f5c04a;
  --gold-deep: #b8811f;
  --text: #f3eaff;
  --muted: #c9b6e4;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg) url("/assets/bg-desktop.webp") center top / cover no-repeat fixed;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body {
    background-image: url("/assets/bg-mobile.webp");
    background-attachment: scroll;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.px { display: none; }

/* ===== Hero: deja libre la zona del logo y ubica el botón debajo ===== */
.hero {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(46vh, 50vh, 56vh) 16px 8vh;
}
@media (max-width: 767px) {
  .hero { padding: 40svh 16px 10svh; }
}

.cta-wrap { perspective: 900px; }

/* ===== Botón 3D ===== */
.cta {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border-radius: 999px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Halo de colores (violeta / oro / verde / rojo del bufón) */
.cta__glow {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(from var(--ang),
    #8a2be2, #f5c04a, #22c55e, #ef4444, #a855f7, #f5c04a, #8a2be2);
  filter: blur(14px);
  opacity: .35;
  transform: translateZ(-20px);
  animation: spin 6s linear infinite;
  transition: opacity .3s ease, filter .3s ease, inset .3s ease;
}

/* Losa inferior que da profundidad */
.cta__base {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #2a0846, #12021f);
  transform: translateY(7px) translateZ(-10px);
  box-shadow: 0 18px 40px -10px rgba(0,0,0,.8), 0 0 0 2px var(--gold-deep);
}

/* Cara del botón */
.cta__face {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: 1.05em 2.1em;
  border-radius: inherit;
  font-size: clamp(1rem, 2.6vw, 1.2rem);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  background:
    radial-gradient(120% 140% at var(--mx) var(--my), rgba(255,255,255,.22), transparent 55%),
    linear-gradient(180deg, var(--violet-400) 0%, var(--violet-600) 48%, var(--violet-700) 100%);
  border: 2px solid var(--gold);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 -4px 10px rgba(20,0,40,.55),
    0 0 24px rgba(168,85,247,.45);
  text-shadow: 0 2px 4px rgba(20,0,40,.6);
  transform: translateZ(14px);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .3s ease;
}

.cta__icon {
  width: 1.55em;
  height: 1.55em;
  flex: none;
  color: #fff;
  filter: drop-shadow(0 2px 3px rgba(20,0,40,.6));
}

/* Barrido de brillo */
.cta__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}

/* Hover / foco */
.cta:hover .cta__glow,
.cta:focus-visible .cta__glow {
  opacity: .95;
  inset: -10px;
  filter: blur(18px) saturate(1.3);
  animation-duration: 2.2s;
}
.cta:hover .cta__face,
.cta:focus-visible .cta__face {
  transform: translateZ(26px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -4px 10px rgba(20,0,40,.5),
    0 0 36px rgba(168,85,247,.7),
    0 0 60px rgba(245,192,74,.25);
}
.cta:hover .cta__shine,
.cta:focus-visible .cta__shine {
  animation: shine 1.1s ease forwards;
}
.cta:active .cta__face { transform: translateZ(4px) translateY(4px); }
.cta:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--violet-500); }

/* En pantallas táctiles: pulso suave para llamar la atención */
@media (hover: none) {
  .cta__glow { opacity: .75; animation-duration: 3s; }
  .cta { animation: float 3.2s ease-in-out infinite; }
}

@keyframes spin { to { --ang: 360deg; } }
@keyframes shine { to { transform: translateX(120%); } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta__glow, .cta__shine { animation: none !important; }
  .cta { transition: none; }
}

/* ===== Pie legal ===== */
.legal {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 980px;
  width: calc(100% - 32px);
  margin: 0 auto calc(16px + env(safe-area-inset-bottom));
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(10, 2, 18, .78);
  border: 1px solid rgba(245,192,74,.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.legal p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}
.legal__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-weight: 900;
  font-size: .95rem;
  background: rgba(74,15,122,.5);
}
@media (max-width: 480px) {
  .cta__face { padding: .95em 1.5em; font-size: .92rem; gap: .55em; }
  .legal { flex-direction: column; align-items: center; text-align: center; padding: 14px; }
  .legal p { font-size: .72rem; }
}