/* Landing de SnapGather. Depende de neon.css, que va antes en el <head>. */

/* ---------- Hero ---------- */

.hero { position: relative; padding: 3.4rem 0 4.6rem; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr);
  gap: 3rem;
  align-items: center;
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 0 0 1.4rem; padding: .4rem .9rem .4rem .7rem;
  border-radius: 999px;
  background: rgba(196, 255, 66, .08);
  border: 1px solid rgba(196, 255, 66, .28);
  font-size: .82rem; font-weight: 500;
  color: var(--lima);
}
.hero-kicker .punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lima);
  box-shadow: 0 0 10px 1px var(--lima);
}

.hero h1 { margin-bottom: 1.3rem; }
.hero h1 .linea { display: block; }
/* La segunda línea es la que la luz atraviesa: el degradado es la luz de la
   sala pasando por el texto, no un acento sobre una palabra. */
.hero h1 .luz {
  display: block;
  background: linear-gradient(96deg, var(--fucsia) 10%, #b06bff 70%, var(--violeta));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.lede { font-size: clamp(1.02rem, 1.35vw, 1.16rem); color: var(--flash-2); max-width: 46ch; }

.hero-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.8rem 0 1.4rem; }

/* Entrada por código de evento */
.codigo { max-width: 30rem; }
.codigo > label { display: block; margin-bottom: .5rem; font-size: .9rem; color: var(--flash-2); }
.codigo-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.codigo-row input { flex: 1 1 12rem; min-width: 0; }
.codigo-row .btn { flex: 0 0 auto; }
.codigo-ayuda { min-height: 1.3rem; margin: .45rem 0 0; font-size: .85rem; color: var(--fucsia); }

/* ---------- Escena 3D ---------- */

.escena {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 30rem;
  border-radius: 26px;
  overflow: hidden;
}
.escena canvas { width: 100%; height: 100%; }

/* Se ve mientras el 3D carga, y se queda si no hay WebGL o si la persona
   pidió menos movimiento. No es un spinner: es la misma imagen, quieta. */
.escena-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(138, 92, 255, .3), transparent 72%),
    var(--noche);
}
.escena.is-live .escena-fallback { display: none; }

.qr-panel {
  padding: 1.05rem;
  border-radius: 20px;
  background: var(--flash);
}
.qr-panel img { width: clamp(120px, 15vw, 168px); height: auto; }
.qr-pie { margin-top: .9rem; text-align: center; font-size: .84rem; color: var(--flash-3); }

@media (max-width: 940px) {
  .hero { padding-top: 2rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .escena { order: -1; aspect-ratio: 4 / 3; max-height: 22rem; }
}

/* ---------- Bandas ---------- */

.band { padding: 4.6rem 0; }
.band-linea { border-top: 1px solid var(--borde); }

.section-head { max-width: 46rem; margin-bottom: 2.6rem; }
.section-head h2 { margin-bottom: .9rem; }
.section-head p { color: var(--flash-2); max-width: 58ch; }

/* ---------- La noche: línea de tiempo ---------- */

/* Los pasos son una secuencia real con horas, no tres tarjetas numeradas. */
.noche { display: grid; gap: 0; }

.hora {
  display: grid;
  grid-template-columns: 6.5rem 1px minmax(0, 1fr);
  gap: 0 1.8rem;
  padding: 1.7rem 0;
  border-top: 1px solid var(--borde);
}
.hora:last-child { border-bottom: 1px solid var(--borde); }

.hora-reloj {
  font-family: var(--display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -.03em;
  color: var(--fucsia);
  font-variant-numeric: tabular-nums;
}
.hora-dia { display: block; margin-top: .2rem; font: 500 .76rem/1.3 var(--texto); color: var(--flash-3); letter-spacing: 0; }

.hora-eje { position: relative; background: var(--borde); }
.hora-eje::before {
  content: ""; position: absolute; top: .42rem; left: 50%;
  width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%;
  background: var(--fucsia);
  box-shadow: 0 0 12px 1px rgba(255, 45, 135, .9);
}
.hora h3 { margin-bottom: .5rem; }
.hora p { color: var(--flash-2); max-width: 58ch; }

@media (max-width: 700px) {
  .hora { grid-template-columns: 4.6rem 1px minmax(0, 1fr); gap: 0 1.1rem; }
  .hora-reloj { font-size: 1.2rem; }
}

/* ---------- Características: pesos desiguales ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.bento .celda { padding: 1.6rem; }
.bento .celda h3 { margin-bottom: .55rem; }
.bento .celda p { color: var(--flash-2); font-size: .96rem; }

/* La primera ocupa el doble y lleva el QR: es la pieza que explica el producto. */
.celda-ancha { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem; }
.celda-ancha h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.celda-ancha p { font-size: 1.02rem; max-width: 42ch; }

.mesa {
  position: relative;
  display: flex; align-items: flex-end; gap: .9rem;
  padding: 1.2rem 1.2rem 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, rgba(138, 92, 255, .14), transparent);
  min-height: 8.5rem;
}
.mesa-qr {
  flex: 0 0 auto; width: 74px; padding: .5rem;
  border-radius: 10px; background: var(--flash);
}
.mesa-qr img { width: 100%; }
.mesa-fotos { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: 1.2rem; }
.mesa-foto {
  width: 44px; height: 58px; border-radius: 7px;
  border: 1px solid var(--borde-vivo);
  background: linear-gradient(150deg, rgba(255, 45, 135, .3), rgba(138, 92, 255, .22));
}
.mesa-foto:nth-child(2) { transform: rotate(-6deg) translateY(-6px); }
.mesa-foto:nth-child(3) { transform: rotate(5deg) translateY(-3px); }
.mesa-foto:nth-child(4) { transform: rotate(-3deg) translateY(-9px); }
.mesa-foto:nth-child(5) { transform: rotate(7deg) translateY(-2px); }
.mesa-foto:nth-child(6) { transform: rotate(-8deg) translateY(-5px); }

.icono {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: .9rem;
  border-radius: 10px;
  background: rgba(255, 45, 135, .12);
}
.icono svg { width: 18px; height: 18px; color: var(--fucsia); }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .celda-ancha { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
}

/* ---------- Precios: tubos encendidos y apagados ---------- */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}

.plan {
  display: flex; flex-direction: column;
  padding: 1.8rem;
  border-radius: var(--r-lg);
  background: var(--humo);
}
.plan h3 { margin-bottom: 1rem; }

/* El plan recomendado está encendido; los otros son el mismo tubo, apagado.
   La jerarquía la da la luz, así que no hace falta una etiqueta encima. */
.plan-on {
  background:
    linear-gradient(168deg, rgba(255, 45, 135, .12), rgba(138, 92, 255, .06) 60%, transparent),
    var(--humo-alto);
}

.price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .3rem; }
.price .cur { font-size: .8rem; font-weight: 600; color: var(--flash-3); }
.price .num {
  font-family: var(--display); font-weight: 800;
  font-size: 2.5rem; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.plan-on .price .num { color: var(--fucsia); }
.price .per { font-size: .88rem; color: var(--flash-3); }

.plan-meta { margin: 0 0 1.4rem; font-size: .92rem; color: var(--flash-2); }

.plan ul { margin: 0 0 1.7rem; padding: 0; list-style: none; display: grid; gap: .6rem; font-size: .94rem; }
.plan li { display: flex; align-items: flex-start; gap: .6rem; color: var(--flash-2); }
.plan li svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: .3rem; color: var(--fucsia); }
.plan .btn { margin-top: auto; justify-content: center; }

.plans-nota { margin-top: 1.4rem; font-size: .88rem; color: var(--flash-3); }

@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }

/* ---------- Cierre ---------- */

.closer { padding: 4.6rem 0 5.4rem; text-align: center; }
.closer h2 { margin-bottom: 1rem; }
.closer p { margin-inline: auto; color: var(--flash-2); }
.closer .btn { margin-top: 1.9rem; }