:root {
  /* === Tricket dark (pink) palette === */
  --background: 330 22% 8%;
  --foreground: 0 0% 98%;

  --card: 330 22% 12%;
  --card-foreground: 0 0% 98%;

  --popover: 330 22% 12%;
  --popover-foreground: 0 0% 98%;

  --primary: 338 100% 55%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 338 100% 62%;

  --secondary: 330 18% 12%;
  --secondary-foreground: 0 0% 98%;

  --muted: 330 14% 16%;
  --muted-foreground: 0 0% 75%;

  --accent: 338 100% 55%;
  --accent-foreground: 0 0% 100%;

  --destructive: 0 80% 58%;
  --destructive-foreground: 0 0% 100%;

  --border: 330 16% 22%;
  --input: 330 16% 22%;
  --ring: 338 100% 55%;

  --success: 142 70% 38%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 100%;

  /* Gradients & shadows */
  --gradient-primary: linear-gradient(
    135deg,
    hsl(var(--primary)),
    hsl(var(--primary-glow))
  );
  --gradient-hero: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.95) 0%,
    hsl(var(--primary-glow)) 100%
  );
  --gradient-card: linear-gradient(
    145deg,
    hsl(330 22% 14% / 0.9),
    hsl(330 22% 10% / 0.8)
  );

  --shadow-soft: 0 8px 20px hsl(var(--primary) / 0.18);
  --shadow-medium: 0 14px 36px hsl(var(--primary) / 0.22);
  --shadow-strong: 0 26px 70px hsl(var(--primary) / 0.28);

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --radius: 12px;

  /* ===== Legacy aliases (so we don't have to touch all selectors) ===== */
  --bg: hsl(var(--background));
  --card-legacy: hsl(var(--card));
  --muted-legacy: hsl(var(--muted-foreground));
  --text: hsl(var(--foreground));
  --border-legacy: hsl(var(--border));
  --primary-legacy: hsl(var(--primary));
  --primary-2-legacy: hsl(var(--primary-glow));
  --ring-legacy: hsl(var(--ring));
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(
      1200px 600px at 10% -10%,
      hsl(var(--primary) / 0.12),
      transparent 55%
    ),
    radial-gradient(
      900px 420px at 90% -5%,
      hsl(var(--primary-glow) / 0.1),
      transparent 60%
    ),
    linear-gradient(180deg, hsl(330 24% 7%), hsl(330 20% 6%));
  color: hsl(var(--foreground));
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 20px 8px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.1),
    hsl(var(--accent) / 0.1)
  );
  border: 1px solid hsl(var(--border));

  img {
    width: 100%;
    border-radius: 5px;
  }
}
.name {
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Hero */
.hero {
  position: relative;
  padding: 64px 0 40px;
}
.bg-glow {
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 420px;
  z-index: -1;
  background: radial-gradient(
      700px 260px at 80% 20%,
      hsl(var(--primary-glow) / 0.25),
      transparent 55%
    ),
    radial-gradient(
      700px 260px at 20% 10%,
      hsl(var(--primary) / 0.28),
      transparent 60%
    );
  filter: saturate(110%) blur(8px);
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary) / 0.15);
  border: 1px solid hsl(var(--primary) / 0.35);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.headline {
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1.05;
  margin: 4px 0 0;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.headline span {
  display: block;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subhead {
  color: hsl(var(--muted-foreground));
  font-size: 17px;
  line-height: 1.6;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.hide-sm {
  display: none;
}
@media (min-width: 640px) {
  .hide-sm {
    display: inline;
  }
}

.waitlist {
  width: 100%;
  max-width: 760px;
  margin: 6px auto 0;
}
.form-title {
  font-weight: 700;
  margin: 4px 0 2px;
}
.form-subtitle {
  color: var(--muted);
  margin: 0 0 12px;
}
.form-title,
.form-subtitle {
  text-align: center;
}
.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.input {
  flex: 1 1 320px;
  min-width: 260px;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  background: hsl(var(--secondary));
  border: 1px solid hsl(var(--input));
  color: hsl(var(--foreground));
  outline: none;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.input:focus {
  box-shadow: 0 0 0 4px hsl(var(--ring) / 0.35);
  border-color: hsl(var(--ring));
}
.btn {
  display: inline-flex; /* Para usar flexbox */
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center; /* Centra horizontalmente */
  height: 46px; /* Altura fija */
  padding: 0 20px; /* Espaciado lateral */
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px; /* Ajusta según tu diseño */
  line-height: 1; /* Evita que el texto tenga altura extra */
  background: linear-gradient(135deg, #ff2965 0%, #ff5fa2 100%);
  color: #fff;
  cursor: pointer;
  border: none;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}
.btn:active {
  transform: translateY(0);
}
.btn-primary {
  background: var(--gradient-primary);
  border-color: transparent;
}

/* Split cards */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 54px auto;
  max-width: 900px;
}
@media (min-width: 820px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
}
.card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
}
.card-head {
  margin-bottom: 10px;
}
.chip {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 12px;
  border-radius: 999px;
  padding: 6px 10px;
  letter-spacing: 0.2px;
  border: 1px solid var(--border);
}
.chip-danger {
  color: hsl(var(--destructive));
  background: hsl(var(--destructive) / 0.1);
  border-color: hsl(var(--destructive) / 0.3);
}
.chip-success {
  color: hsl(var(--success));
  background: hsl(var(--success) / 0.1);
  border-color: hsl(var(--success) / 0.3);
}
.list {
  margin: 12px 0 0;
  padding-left: 18px;
  color: hsl(var(--muted-foreground));
}
.list li {
  margin: 8px 0;
}

/* Features */
.features {
  margin: 54px auto;
  max-width: 1000px;
  text-align: center;
}
.section-title {
  font-size: 26px;
  margin: 0 0 18px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 700px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.feature-card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  padding: 18px;
  transition: transform 0.12s ease, box-shadow 0.25s ease,
    border-color 0.25s ease;
  box-shadow: var(--shadow-soft);
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  border-color: hsl(var(--primary));
}
.feature-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
}
.feature-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
/* Consentimiento */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
  justify-content: center;
  align-items: center;
}
.consent input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: hsl(338 100% 50%); /* tu --primary */
}
.consent a {
  color: hsl(338 100% 50%);
  text-decoration: underline;
}

/* Estado disabled del botón */
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
/* CTA final */
.cta {
  display: flex;
  justify-content: center;
  margin: 54px auto;
  max-width: 1000px;
  text-align: center;
}
.text-white {
  color: white !important;
}
.cta-card {
  background: radial-gradient(
      800px 220px at 10% 0%,
      hsl(var(--primary) / 0.18),
      transparent 60%
    ),
    radial-gradient(
      800px 220px at 90% 0%,
      hsl(var(--primary-glow) / 0.16),
      transparent 60%
    ),
    var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  box-shadow: var(--shadow-soft);
}
.cta-card h3 {
  margin: 0 0 6px;
  font-size: 22px;
}
.cta-card p {
  margin: 0 0 16px;
  color: hsl(var(--muted-foreground));
}
.cta-form {
  max-width: 600px;
  margin: 0 auto;
  justify-content: center;
}

.cta-form .input {
  flex: 1 1 auto;
}

/* Footer */
.footer {
  padding: 24px 0 38px;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

/* Reveal on scroll */
.reveal-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-up.in {
  opacity: 1;
  transform: none;
}
.delay-1 {
  transition-delay: 0.08s;
}
.delay-2 {
  transition-delay: 0.16s;
}

/* Utils */
.hidden-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
}

/* ====== ajustes forms en móvil ====== */
@media (max-width: 640px) {
  /* Form superior (waitlist) */
  .waitlist .form-row {
    justify-content: center; /* centra el contenido */
    margin: 0 40px;
  }
  .waitlist .form-row .btn {
    width: 100%;
    margin: 8px auto 0; /* centrado con margen arriba */
    display: block;
  }
  .waitlist .form-row .input {
    width: 100%; /* input a todo el ancho */
  }

  /* Form inferior (CTA) */
  .cta-form .input {
    height: 46px !important; /* fija la altura del input */
    line-height: 46px; /* alinea el placeholder */
    padding: 0 14px; /* padding horizontal coherente */
    width: 100%;
  }
  .cta-form {
    justify-content: center; /* ya lo tenías, mantenemos */
  }
  .cta-form .btn {
    width: 100%;
    margin: 10px 0 0 0;
  }
}