/* =============================================================================
 * styles.css — Landing "LabelForge · by LexusFX" · T1 (lp-design-ds)
 * Estética LexusFX: near-black cálido + crema editorial.
 * ACCENTO: VIOLETA #7C3AED — SOLO en CTA + estado activo (Von Restorff).
 * Dev-tool aesthetic: mono a tope, code blocks, dark mode nativo.
 * Mobile-first · WCAG AA · zero dependencia externa.
 * ========================================================================== */

/* ---- Fonts self-hosted ---- */
@font-face{ font-family:"Space Grotesk"; font-weight:500; font-style:normal;
  font-display:swap; src:url("/fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-weight:600; font-style:normal;
  font-display:swap; src:url("/fonts/space-grotesk-600.woff2") format("woff2"); }
@font-face{ font-family:"Space Grotesk"; font-weight:700; font-style:normal;
  font-display:swap; src:url("/fonts/space-grotesk-700.woff2") format("woff2"); }

/* ---- Tokens LexusFX · LabelForge (violeta edition) ---- */
:root{
  --bg:#100E0B; --bg-2:#16130F;
  --surface:#1B1712; --surface-2:#241F18;
  --border:#2E271F; --border-strong:#443A2E;
  --ink:#F4EFE7; --ink-mid:#BDB4A6; --ink-low:#8A8073;
  /* VIOLETA #7C3AED — ÚNICO acento (Von Restorff: solo CTA + activo) */
  --cta:#7C3AED; --cta-hover:#8B5CF6; --cta-press:#6D28D9; --cta-ink:#F4EFE7;
  --cta-glow:rgba(124,58,237,.3); --cta-ring:rgba(124,58,237,.5);
  --live:#EDE6DA;
  --f-display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --f-body:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --fs-display:clamp(2.4rem,6vw,4.2rem);
  --fs-h2:clamp(1.7rem,3.6vw,2.6rem);
  --fs-h3:clamp(1.15rem,2vw,1.4rem);
  --fs-lede:clamp(1.05rem,1.7vw,1.28rem);
  --fs-body:1rem; --fs-sm:.9rem; --fs-xs:.75rem;
  --sp-sec:clamp(3.5rem,9vw,7rem);
  --wrap:1120px; --wrap-narrow:660px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;
  --ease:cubic-bezier(.16,1,.3,1); --dur:.24s;
}

/* ---- Reset / base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:var(--fs-body); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; max-width:100%;
}
img,svg,video{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.06;
  letter-spacing:-.02em; margin:0; }
p{ margin:0; } a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--cta); color:var(--cta-ink); }
:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--cta-ring); border-radius:var(--r-sm); }
@media (forced-colors:active){ :focus-visible{ outline:2px solid; outline-offset:2px; } }
.skip-link{ position:absolute; left:-999px; top:0; z-index:100;
  background:var(--surface-2); color:var(--ink); padding:.7em 1em; border-radius:0 0 var(--r-sm) 0; }
.skip-link:focus{ left:0; }

/* ---- Layout utils ---- */
.section{ padding:var(--sp-sec) clamp(1.15rem,5vw,2.5rem); }
.section:nth-of-type(even){ background:var(--bg-2); }
.wrap-narrow{ max-width:var(--wrap-narrow); margin-inline:auto; }
.section__title{ font-size:var(--fs-h2); max-width:20ch; }
.section__title--center{ margin-inline:auto; text-align:center; max-width:24ch; }
.eyebrow{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-low); margin-bottom:1em; }
.lede{ font-size:var(--fs-lede); color:var(--ink-mid); line-height:1.55; max-width:52ch; }
.lede--center{ margin-inline:auto; text-align:center; }
.tagline{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mid); margin-bottom:1.4em; }

/* ---- Buttons (VIOLETA solo CTA — Von Restorff) ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); font-weight:600; font-size:1rem; line-height:1;
  padding:.95em 1.5em; border-radius:var(--r-full); border:1px solid transparent;
  cursor:pointer; transition:transform var(--dur) var(--ease),
    background var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease); min-height:44px; }
.btn--lg{ font-size:1.06rem; padding:1.05em 1.7em; }
.btn--block{ display:flex; width:100%; }
.btn--cta{ background:var(--cta); color:var(--cta-ink); box-shadow:0 1px 0 rgba(255,255,255,.1) inset; }
.btn--cta:hover{ background:var(--cta-hover); transform:translateY(-2px); box-shadow:0 10px 30px var(--cta-glow); }
.btn--cta:active{ background:var(--cta-press); transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border-strong); }
.btn--ghost:hover{ border-color:var(--ink-mid); transform:translateY(-2px); }
.cta-group{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.cta-group--center{ justify-content:center; }

/* ---- Header ---- */
.site-header{ position:sticky; top:0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:1rem; padding:.7rem clamp(1.15rem,5vw,2.5rem);
  background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); }
.brand{ font-family:var(--f-display); font-weight:700; letter-spacing:-.01em;
  display:inline-flex; align-items:center; gap:.55em; font-size:1.05rem; }
.brand__mark{ width:10px; height:10px; border-radius:3px; background:var(--ink);
  box-shadow:0 0 0 3px var(--surface-2); }
.brand__by{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.08em;
  color:var(--ink-low); font-weight:400; }
.site-header__cta{ padding:.55em 1.1em; font-size:.92rem; min-height:44px; }
@media (max-width:400px){
  .site-header{ padding:.55rem .75rem; gap:.5rem; }
  .brand{ font-size:.92rem; gap:.35em; }
  .brand__by{ display:none; }
  .site-header__cta{ font-size:.82rem; padding:.5em .85em; }
}

/* ---- Hero ---- */
.hero{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:start;
  max-width:var(--wrap); margin-inline:auto; }
.hero__copy{ min-width:0; }
.hero__demo{ min-width:0; }
.hero__h1{ font-size:var(--fs-display); margin:.15em 0 .5em; overflow-wrap:break-word; }
.hero__sub{ max-width:42ch; }
.hero__note{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-low); margin-top:1rem; }
@media (max-width:859px){
  .hero{ padding-top:clamp(1rem,2.5vw,1.8rem); gap:clamp(.7rem,2vw,1.2rem);
    grid-template-columns:minmax(0,1fr); width:100%; }
  .hero__copy{ max-width:100%; }
  .hero__demo{ max-width:100%; }
  .hero__h1{ font-size:clamp(1.85rem,4.5vw,2.6rem); max-width:100%; }
  .hero__sub{ margin-top:.2em; line-height:1.38; max-width:100%; }
  .hero .cta-group{ margin-top:.7rem; gap:.6rem; }
  .hero__note{ margin-top:.25rem; font-size:var(--fs-xs); }
  .tagline{ margin-bottom:.5em; }
}
@media (min-width:860px){ .hero{ grid-template-columns:1.05fr .95fr; } }

/* ---- Labeling Demo (dev-grade: YOLO export panel + keyboard hints) ---- */
.label-demo{ background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.45);
  max-width:100%; }
.label-demo__bar{ display:flex; align-items:center; gap:.6em; padding:.7em 1em;
  background:var(--surface-2); border-bottom:1px solid var(--border);
  overflow-x:auto; }
.label-demo__live{ width:9px; height:9px; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 0 rgba(237,230,218,.45); animation:demo-pulse 1.9s var(--ease) infinite;
  flex-shrink:0; }
@keyframes demo-pulse{ 70%{ box-shadow:0 0 0 7px rgba(237,230,218,0) } 100%{ box-shadow:0 0 0 0 rgba(237,230,218,0) } }
.label-demo__label{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.16em; color:var(--live);
  white-space:nowrap; flex-shrink:0; }
.label-demo__kbd{ margin-left:auto; font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-low);
  display:none; }
@media (min-width:500px){ .label-demo__kbd{ display:block; } }
.label-demo__kbd kbd{ background:var(--bg); border:1px solid var(--border); border-radius:4px;
  padding:1px 6px; font-size:.7rem; color:var(--ink-mid); }
.label-demo__canvas-wrap{ position:relative; background:#0a0a08; min-height:200px;
  display:flex; align-items:center; justify-content:center; padding:0;
  max-width:100%; overflow:hidden; }
.label-demo__canvas-wrap svg{ display:block; max-width:100%; height:auto; }
/* Mobile: compact canvas */
@media (max-width:499px){
  .label-demo__canvas-wrap{ min-height:160px; }
}

/* YOLO export panel */
.label-demo__export{ padding:.5em .7em; background:var(--bg);
  border-top:1px solid var(--border); overflow-x:auto; }
.label-demo__export code{ font-family:var(--f-mono); font-size:.65rem; color:var(--ink-mid);
  white-space:pre; line-height:1.4; display:block; }
.label-demo__export .comment{ color:var(--ink-low); }
.label-demo__export .cls{ color:#C4B5FD; }
.label-demo__export .num{ color:#A78BFA; }
.label-demo__hint{ text-align:center; padding:.4em; font-family:var(--f-mono);
  font-size:.66rem; color:var(--ink-low); border-top:1px solid var(--border);
  overflow-x:auto; white-space:nowrap; }
@media (max-width:400px){
  .label-demo__hint{ font-size:.6rem; }
}

/* ---- Features ---- */
.features__grid{ display:grid; gap:1.4rem; margin-top:2rem; }
.feature-card{ padding:1.5rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); transition:border-color var(--dur) var(--ease); }
.feature-card:hover{ border-color:var(--border-strong); }
.feature-card__icon{ font-size:1.5rem; margin-bottom:.6em; display:block; }
.feature-card h3{ font-size:var(--fs-h3); margin-bottom:.4em; }
.feature-card p{ color:var(--ink-mid); }
@media (min-width:720px){ .features__grid{ grid-template-columns:repeat(3,1fr); } }

/* ---- Mecanismo (3 pasos numerados) ---- */
.mecanismo__steps{ display:grid; gap:1rem; margin-top:2rem; counter-reset:paso; }
.mecanismo__step{ position:relative; padding:1.3rem 1.4rem 1.3rem 3.8rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  transition:border-color var(--dur) var(--ease); }
.mecanismo__step:hover{ border-color:var(--border-strong); }
.mecanismo__step::before{ counter-increment:paso; content:counter(paso);
  position:absolute; left:1.2rem; top:1.3rem;
  font-family:var(--f-display); font-weight:700; font-size:1.3rem; line-height:1; color:var(--ink); }
.mecanismo__step p{ color:var(--ink-mid); }
@media (min-width:720px){ .mecanismo__steps{ grid-template-columns:repeat(3,1fr); } }

/* ---- Diferenciación ---- */
.diff__grid{ display:grid; gap:1.4rem; margin-top:2rem; }
.diff__card{ padding:1.4rem 1.5rem; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); }
.diff__card h3{ font-size:var(--fs-h3); margin-bottom:.5em; }
.diff__card p{ color:var(--ink-mid); }
@media (min-width:640px){ .diff__grid{ grid-template-columns:1fr 1fr; } }

/* ---- Pricing ---- */
.pricing{ text-align:center; }
.pricing__grid{ display:grid; gap:1.2rem; margin-top:2rem; max-width:900px; margin-inline:auto; }
.pricing-card{ padding:clamp(1.4rem,4vw,1.8rem); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); text-align:left;
  transition:border-color var(--dur) var(--ease); }
.pricing-card:hover{ border-color:var(--border-strong); }
.pricing-card--featured{ border-color:var(--cta); box-shadow:0 0 0 1px var(--cta-ring); }
.pricing-card__tier{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-low); margin-bottom:.4em; }
.pricing-card__price{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.8rem,4vw,2.4rem);
  line-height:1; color:var(--ink); }
.pricing-card__unit{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-low);
  margin-top:.2em; }
.pricing-card ul{ margin-top:1rem; }
.pricing-card li{ padding:.35em 0; color:var(--ink-mid); font-size:var(--fs-sm);
  position:relative; padding-left:1.4em; }
.pricing-card li::before{ content:"✓"; position:absolute; left:0; color:var(--ink-low); font-weight:700; }
.pricing-card--featured li::before{ color:var(--ink-mid); }
@media (min-width:720px){ .pricing__grid{ grid-template-columns:repeat(3,1fr); } }

/* ---- Legal ---- */
.legal-note{ margin-top:1.6rem; font-family:var(--f-mono); font-size:var(--fs-xs);
  color:var(--ink-low); text-align:center; }
.stakes__body{ margin-top:1rem; }

/* ---- Download card ---- */
.download-card{ max-width:560px; margin:2.4rem auto 0; background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r-lg);
  padding:clamp(1.6rem,5vw,2.8rem); text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.download-card__note{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-low); margin-top:.8rem; }
.download-card .btn--block{ margin-top:1.6rem; }

/* ---- FAQ ---- */
.faq__list{ margin-top:2rem; border-top:1px solid var(--border); }
.faq__item{ border-bottom:1px solid var(--border); }
.faq__item summary{ list-style:none; cursor:pointer; padding:1.1rem 2rem 1.1rem 0;
  position:relative; font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; position:absolute; right:.2rem; top:1rem;
  font-family:var(--f-mono); color:var(--ink-low); transition:transform var(--dur) var(--ease); }
.faq__item[open] summary::after{ content:"−"; color:var(--ink); }
.faq__a{ padding:0 0 1.2rem; color:var(--ink-mid); max-width:60ch; }
.faq__contact{ margin-top:1.6rem; color:var(--ink-mid); }

/* ---- CTA final ---- */
.cta-final{ text-align:center; }
.signature{ margin-top:2.4rem; font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-low); }

/* ---- Sticky CTA ---- */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:.7rem clamp(1rem,4vw,1.4rem) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px);
  border-top:1px solid var(--border); box-shadow:0 -10px 30px rgba(0,0,0,.5); }
.sticky-cta[hidden]{ display:none; }

/* ---- Footer ---- */
.site-footer{ padding:clamp(2rem,5vw,3rem) clamp(1.15rem,5vw,2.5rem) calc(clamp(2rem,5vw,3rem) + 4.5rem);
  border-top:1px solid var(--border); background:var(--bg); color:var(--ink-low); font-size:var(--fs-sm); }
.site-footer__id{ line-height:1.7; }
.site-footer__id strong{ font-family:var(--f-display); color:var(--ink-mid); }
.site-footer .site-footer__legal{ margin-top:.9rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.site-footer__legal a{ color:var(--ink-mid); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-strong); }
.site-footer__legal a:hover{ color:var(--ink); }
@media (min-width:860px){ .site-footer{ padding-bottom:clamp(2rem,5vw,3rem); } }

/* ---- Motion ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
  .reveal.is-visible{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}
@media (min-width:860px){ .sticky-cta{ display:none !important; } }