/* Tokens de marca tomados de app/globals.css (Lucka Books). */
:root {
  --gray-0: #FFFFFF;
  --gray-25: #F7F6F2;
  --gray-50: #EFEEE9;
  --gray-100: #E5E4DF;
  --gray-200: #D9D8D2;
  --gray-300: #B6B3AC;
  --gray-400: #8A8780;
  --gray-500: #706D66;
  --gray-800: #27292E;
  --gray-900: #1A1C20;
  --gray-950: #111315;
  --signal: #2952CC;
  --signal-subtle: #E9EEFF;
  --success: #1F7A4D;
  --success-bg: #E6F4EC;
  --error: #B42318;

  --background: var(--gray-25);
  --foreground: var(--gray-950);
  --card: var(--gray-0);
  --border: var(--gray-100);
  --muted: var(--gray-50);
  --muted-foreground: var(--gray-500);
  --radius: 6px;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
img { display: block; }
svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-left: 1.5rem; padding-right: 1.5rem; } }

.muted { color: var(--muted-foreground); }
.body { font-size: 1rem; line-height: 1.75rem; }
.eyebrow, .eyebrow-muted { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.eyebrow { color: var(--signal); }
.eyebrow-muted { color: var(--muted-foreground); }

h2 { margin-top: .75rem; font-size: 1.875rem; line-height: 1.2; font-weight: 600; }
@media (min-width: 640px) { h2 { font-size: 2.25rem; } }
h3 { font-size: .875rem; font-weight: 600; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1rem; border-radius: var(--radius);
  font: 500 .875rem/1 var(--font-sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: background .15s, opacity .15s;
}
.btn-outline { background: var(--card); border-color: var(--border); color: var(--foreground); }
.btn-outline:hover { background: var(--muted); }
.btn-solid { background: var(--foreground); color: var(--background); }
.btn-solid:hover { opacity: .9; }
.btn:disabled { opacity: .6; cursor: progress; }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Header */
.header { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.lockup { height: 1.75rem; width: auto; max-width: 168px; }

/* Hero */
.hero { padding: 2rem 0 3.5rem; }
@media (min-width: 640px) { .hero { padding: 3rem 0 5rem; } }
.hero-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1fr) 430px; align-items: end; } }
.hero-copy { max-width: 48rem; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem;
  border: 1px solid rgb(41 82 204 / .25); border-radius: var(--radius);
  background: var(--signal-subtle); color: var(--signal);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
h1 { margin-top: 1.75rem; font-size: 3rem; line-height: .98; font-weight: 600; letter-spacing: -.02em; }
@media (min-width: 640px) { h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { h1 { font-size: 4.5rem; } }
.tagline { margin-top: 1rem; font-size: 1.125rem; font-weight: 500; }
.lead { margin-top: 1.5rem; max-width: 42rem; font-size: 1.25rem; line-height: 2rem; }
@media (min-width: 640px) { .tagline { font-size: 1.25rem; } .lead { font-size: 1.5rem; } }
.hero-copy .body { margin-top: 1.25rem; max-width: 42rem; }

/* Formulario */
.form-slot { margin-top: 2rem; max-width: 36rem; }
.cta-grid .form-slot { margin-top: 0; max-width: none; }
.waitlist { display: flex; flex-wrap: wrap; gap: .5rem; }
.waitlist input[type="email"] {
  flex: 1 1 14rem; min-width: 0; height: 3rem; padding: 0 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); color: var(--foreground); font: 400 1rem var(--font-sans);
}
.waitlist .btn { height: 3rem; min-width: 150px; padding: 0 1.25rem; flex: 1 1 auto; }
@media (min-width: 640px) { .waitlist input[type="email"] { font-size: .875rem; } .waitlist .btn { flex: 0 0 auto; } }
.cf-turnstile { flex-basis: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error { flex-basis: 100%; font-size: .875rem; color: var(--error); }
.form-success {
  display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem;
  padding: .75rem 1rem; border: 1px solid var(--success); border-radius: var(--radius);
  background: var(--success-bg); color: var(--success); font-size: .875rem; font-weight: 500;
}
.form-success svg { width: 16px; height: 16px; }
.fine { margin-top: .75rem; font-size: .75rem; line-height: 1.25rem; color: var(--muted-foreground); }

/* Vista previa del producto */
.preview { position: relative; }
.preview-card { overflow: hidden; border: 1px solid var(--gray-800); border-radius: var(--radius); background: var(--gray-950); box-shadow: 0 10px 30px -10px rgb(17 19 21 / .35); }
.preview-bar { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--gray-800); }
.preview-tag { display: inline-flex; align-items: center; gap: .5rem; font: 400 11px var(--font-mono); text-transform: uppercase; color: var(--gray-300); }
.dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--signal); }
.preview-meta { font-size: 11px; color: var(--gray-400); }
.preview-body { padding: 1.25rem; }
.preview-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.preview-label { font-size: .75rem; color: var(--gray-400); }
.preview-title { margin-top: .25rem; font-size: 1.125rem; font-weight: 600; color: var(--gray-25); }
.preview-score { display: flex; flex-direction: column; align-items: flex-end; padding: .5rem .75rem; border: 1px solid var(--gray-800); border-radius: var(--radius); }
.preview-score span { font: 400 1.125rem var(--font-mono); color: var(--gray-25); }
.preview-score small, .preview-row small { font-size: 11px; color: var(--gray-400); }
.preview-rows { display: grid; gap: .5rem; margin-top: 1.5rem; }
.preview-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .75rem; border: 1px solid var(--gray-800); border-radius: var(--radius); background: var(--gray-900); }
.preview-row p { font-size: .875rem; font-weight: 500; color: var(--gray-25); }
.preview-row small { font-family: var(--font-mono); }
.pill { padding: .25rem .5rem; border: 1px solid rgb(41 82 204 / .3); border-radius: var(--radius); background: rgb(41 82 204 / .15); color: #8FA8F0; font-size: 11px; }
.preview-export { margin-top: 1.5rem; padding: 1rem; border-radius: var(--radius); background: var(--gray-25); }
.preview-export-head { display: flex; justify-content: space-between; align-items: center; font-size: .875rem; }
.preview-export-head small { font: 400 11px var(--font-mono); color: var(--muted-foreground); }
.bar { margin-top: 1rem; height: .5rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar-fill { width: 82%; height: 100%; border-radius: 999px; background: var(--signal); }
.preview-float { display: none; position: absolute; left: -1.25rem; bottom: -1.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 30px -10px rgb(17 19 21 / .25); }
.preview-float strong { display: block; font-size: .875rem; }
.preview-float small { font-size: .75rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .preview-float { display: block; } }

/* Grillas con líneas de 1px */
.signals, .steps, .cards, .dark-cards { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
.signals > div, .steps > li, .cards > div { background: var(--card); }
.signals { margin-top: 3.5rem; }
.signals > div { padding: 1.25rem; }
.signal-value { margin-top: .75rem; font-size: 1.5rem; font-weight: 600; }
.signals .muted { margin-top: .25rem; font-size: .875rem; }
@media (min-width: 640px) { .signals { grid-template-columns: repeat(3, 1fr); } }

/* Secciones */
.band { padding: 4rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--card); }
.section { padding: 4rem 0; }
@media (min-width: 640px) { .band, .section, .dark { padding: 5rem 0; } }
.section-head { max-width: 42rem; }
.section-head .body { margin-top: 1rem; }

.steps { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.steps > li { padding: 1rem; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius); background: var(--muted); font: 400 .75rem var(--font-mono); color: var(--muted-foreground); }
.steps h3 { margin-top: 1.25rem; }
.steps p { margin-top: .5rem; font-size: .75rem; line-height: 1.25rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(7, 1fr); } }

.trust-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .trust-grid { grid-template-columns: .8fr 1fr; } }
.trust-grid > div > .body { margin-top: 1rem; }
.checks { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .75rem; }
.checks li { position: relative; padding-left: 1.75rem; font-size: .875rem; line-height: 1.5rem; color: var(--muted-foreground); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1rem; height: 1rem; border-radius: 999px;
  background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12 3 3 7-7'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.cards > div { padding: 1.5rem; }
.cards h3 { font-size: 1rem; }
.cards h3::before { content: ""; display: block; width: 1.25rem; height: 2px; margin-bottom: 1.5rem; background: var(--signal); }
.cards p { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }

.dark { padding: 4rem 0; background: var(--gray-950); color: var(--gray-25); }
.dark-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .dark-grid { grid-template-columns: 1fr .85fr; align-items: center; } }
.dark .eyebrow { color: #7C98EC; }
.dark .body { margin-top: 1rem; max-width: 42rem; color: var(--gray-300); }
.dark-cards { border-color: var(--gray-800); background: var(--gray-800); }
.dark-cards > div { padding: 1.25rem; background: var(--gray-900); }
.dark-cards p { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: var(--gray-300); }

.cta-grid { display: grid; gap: 2rem; padding-top: 3rem; border-top: 1px solid var(--border); }
@media (min-width: 1024px) { .cta-grid { grid-template-columns: 1fr 480px; align-items: start; } }
.cta-grid h2 { max-width: 42rem; }

footer { border-top: 1px solid var(--border); }
.footer { display: flex; flex-direction: column; gap: .5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: .75rem; color: var(--muted-foreground); }
@media (min-width: 640px) { .footer { flex-direction: row; justify-content: space-between; } }

.notfound { min-height: 100dvh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; max-width: 36rem; }
.notfound h1 { margin-top: 1rem; font-size: 2.25rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }