/* =============================================================================
 * styles.css — Landing "DockPilot · by LexusFX" · T1 (lp-design-ds)
 * Estética LexusFX: near-black cálido + crema editorial · NARANJA SOLO EN CTA.
 * Dir. de arte: "software B2B serio" — Space Grotesk (display, self-hosted) +
 * system sans (cuerpo, credibilidad B2B) + mono solo para DATOS (precios, horas, matrículas).
 * Mobile-first · WCAG AA · zero dependencia externa (fuentes self-hosted).
 * Anti-slop: sin gradiente morado, sin glass, sin blobs, sin cian, sin corporate-memphis.
 * ========================================================================== */

/* ---- Fuentes self-hosted (GDPR-safe: servidas de nuestro origin) ------------- */
@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 --------------------------------------------------------------- */
:root{
  /* cor — neutros QUENTES (tingidos p/ o hue naranja), near-black no-puro */
  --bg:#100E0B;
  --bg-2:#16130F;
  --surface:#1B1712;
  --surface-2:#241F18;
  --border:#2E271F;
  --border-strong:#443A2E;
  --ink:#F4EFE7;
  --ink-mid:#BDB4A6;
  --ink-low:#8A8073;
  /* LARANJA — exclusivo del CTA (Von Restorff: nada más lleva naranja) */
  --cta:#F97316; --cta-hover:#FF8534; --cta-press:#E0640C; --cta-ink:#140B04;
  --cta-glow:rgba(249,115,22,.34); --cta-ring:rgba(249,115,22,.5);
  /* live (monocromático — crema, sin 2º accent) */
  --live:#EDE6DA;
  /* ocupado en la agenda (neutro — monocromático, sin 2º accent) */
  --ocupado:#2E271F;
  --ocupado-ink:#8A8073;
  /* tipografía — CAMBIO vs v1: body = system sans stack (credibilidad B2B) */
  --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;
  /* escala fluida */
  --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;
  --fs-price:clamp(2.6rem,7vw,3.6rem);
  /* espacio / raio / motion */
  --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,iframe,embed,object,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; }
.wrap{ max-width:var(--wrap); 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; }

/* ---- Botões (LARANJA solo en --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,.12) 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 (sticky) ------------------------------------------------------ */
.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; }
/* Header móvil estrecho: comprimir brand para que CTA no se apriete */
@media (max-width:400px){
  .site-header{ padding:.55rem .75rem; gap:.5rem; }
  .brand{ font-size:.92rem; gap:.35em; }
  .brand__by{ display:none; }          /* "by LexusFX" invisible en <400px */
  .site-header__cta{ font-size:.82rem; padding:.5em .85em; }
}

/* ---- 1 · HERO ------------------------------------------------------------- */
.hero{ display:grid; gap:clamp(2.5rem,5vw,4rem); align-items:start;
  max-width:var(--wrap); margin-inline:auto; }
.hero__h1{ font-size:var(--fs-display); margin:.15em 0 .5em; }
.hero__sub{ max-width:42ch; }
.hero__note{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-low);
  margin-top:1rem; }
.hero__demo{ margin-top:0; }

/* Móvil: comprimir ritmo vertical del hero para que la demo asome above-the-fold */
@media (max-width:859px){
  .hero{ padding-top:clamp(1rem,2.5vw,1.8rem); gap:clamp(.7rem,2vw,1.2rem); }
  .hero__h1{ font-size:clamp(1.85rem,4.5vw,2.6rem); }
  .hero__sub{ margin-top:.2em; line-height:1.38; }
  .hero .cta-group{ margin-top:.7rem; gap:.6rem; }
  .hero__note{ margin-top:.25rem; font-size:var(--fs-xs); }
  .tagline{ margin-bottom:.5em; }
}

/* ---- DEMO AGENDA (interactiva, above-the-fold) ---------------------------- */
.demo-agenda{ 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); }
.demo-agenda__bar{ display:flex; align-items:center; gap:.6em; padding:.7em 1em;
  background:var(--surface-2); border-bottom:1px solid var(--border); }
.demo-agenda__live{ width:9px; height:9px; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 0 rgba(237,230,218,.45); animation:agenda-pulse 1.9s var(--ease) infinite; }
@keyframes agenda-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) } }
.demo-agenda__label{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.16em;
  color:var(--live); }
.demo-agenda__mantra{ margin-left:auto; font-family:var(--f-display); font-weight:600;
  font-size:var(--fs-sm); color:var(--ink-mid); }
.demo-agenda__mantra span{ color:var(--ink); }

.agenda-grid{ padding:clamp(.8rem,2vw,1.2rem); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.agenda-table{ width:100%; border-collapse:collapse; }
.agenda-table th{ font-family:var(--f-mono); font-size:var(--fs-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-low); padding:.4em .2em .6em; text-align:center;
  font-weight:500; }
.agenda-table td{ padding:1px; text-align:center; }
.agenda-slot{ display:flex; align-items:center; justify-content:center;
  min-height:34px; border-radius:var(--r-sm); font-family:var(--f-mono); font-size:var(--fs-xs);
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease);
  cursor:default; position:relative; }
.agenda-slot--hora{ font-family:var(--f-mono); font-size:.68rem; color:var(--ink-low);
  padding:.2em .3em; min-width:2.6em; justify-content:flex-end; }
.agenda-slot--libre{ background:var(--bg); border:1px dashed var(--border);
  color:var(--ink-low); cursor:pointer; min-width:3em; }
.agenda-slot--libre:hover{ background:var(--surface-2); border-color:var(--border-strong);
  transform:scale(1.04); color:var(--ink-mid); }
.agenda-slot--libre:active{ transform:scale(.97); }
.agenda-slot--ocupado{ background:var(--ocupado); color:var(--ocupado-ink);
  font-size:.64rem; letter-spacing:.02em; padding:.2em .3em; }
.agenda-slot--recien{ animation:recien-pop .4s var(--ease); }
@keyframes recien-pop{ 0%{ transform:scale(.9); background:var(--surface-2); }
  60%{ transform:scale(1.06); } 100%{ transform:scale(1); } }

/* Hint visual "desliza →" si la tabla desborda a 360px */
.agenda-swipe-hint{ display:none; text-align:center; padding:.4em 0 .2em;
  font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--ink-low); }
@media (max-width:380px){
  .agenda-swipe-hint{ display:block; }
}

/* Mini-modal de reserva */
.agenda-modal-overlay{ position:fixed; inset:0; z-index:70; display:flex;
  align-items:center; justify-content:center; padding:1rem;
  background:rgba(10,9,7,.82); backdrop-filter:blur(4px);
  animation:overlay-in .2s var(--ease); }
@keyframes overlay-in{ from{ opacity:0 } }
.agenda-modal{ background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); padding:clamp(1.4rem,4vw,2rem);
  max-width:380px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:modal-in .3s var(--ease); }
@keyframes modal-in{ from{ opacity:0; transform:translateY(12px) scale(.97); } }
.agenda-modal h3{ font-family:var(--f-display); font-size:var(--fs-h3); margin-bottom:.3em; }
.agenda-modal__slot{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-low); margin-bottom:1.2rem; }
.agenda-modal label{ display:block; font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mid); margin-bottom:.3em; }
.agenda-modal input{ width:100%; padding:.75em .9em; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r-sm); color:var(--ink);
  font-family:var(--f-body); font-size:1rem; margin-bottom:1rem;
  transition:border-color var(--dur) var(--ease); }
.agenda-modal input:focus{ outline:none; border-color:var(--cta); box-shadow:0 0 0 3px var(--cta-ring); }
.agenda-modal__actions{ display:flex; gap:.7rem; }
.agenda-modal__actions .btn{ flex:1; }

.agenda-leyenda{ display:flex; gap:1.2rem; padding:.6em clamp(.8rem,2vw,1.2rem) 1rem;
  font-size:var(--fs-xs); }
.agenda-leyenda span{ display:inline-flex; align-items:center; gap:.4em; }
.agenda-leyenda__libre{ width:10px; height:10px; border-radius:2px; border:1px dashed var(--border); }
.agenda-leyenda__ocupado{ width:10px; height:10px; border-radius:2px; background:var(--ocupado); }

@media (min-width:860px){
  .hero{ grid-template-columns:1.05fr .95fr; }
}

/* ---- 2 · STAKES / PROBLEMA ------------------------------------------------ */
.stakes .section__title{ margin-bottom:.5em; }
.stakes__body{ margin-top:1rem; }

/* ---- 3 · 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); }
}

/* ---- 4 · 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; }
}

/* ---- 5 · OFERTA ----------------------------------------------------------- */
.oferta{ text-align:center; }
.offer-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); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.offer-card__price{ margin-bottom:1.2rem; }
.price-now{ font-family:var(--f-display); font-weight:700; font-size:var(--fs-price);
  line-height:1; color:var(--ink); display:block; }
.price-unit{ font-family:var(--f-mono); font-size:var(--fs-sm); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-low); display:block; margin-top:.3em; }
.offer-card__note{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-mid);
  margin-top:.8rem; }
.offer-card__trial{ font-family:var(--f-mono); font-size:var(--fs-sm); color:var(--ink-low);
  margin-top:.3em; }
.offer-card .btn--block{ margin-top:1.6rem; }

/* ---- 6 · PRUEBA ----------------------------------------------------------- */
.prueba{ text-align:center; }
.prueba blockquote{ max-width:var(--wrap-narrow); margin:1.8rem auto 0;
  font-size:var(--fs-lede); color:var(--ink-mid); font-style:italic;
  line-height:1.55; border:none; padding:0; }

/* ---- 7 · 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); }

/* ---- 8 · 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 (móvil) --------------------------------------------------- */
.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); }
@media (min-width:860px){ .site-footer{ padding-bottom:clamp(2rem,5vw,3rem); } }

/* ---- Motion: reveal-on-scroll --------------------------------------------- */
@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; }
}

/* ---- Reduced motion ------------------------------------------------------- */
@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; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (min-width:860px){
  .sticky-cta{ display:none !important; }
}