/* ===========================================================================
   app/pages/public/landing-kit.css — the SHARED visual language of the public
   marketing pages (landing, /tour, /planes).

   Loaded as its own <link> (never @import-ed) so `?v={{ asset_v }}` busts it,
   then followed by exactly one page stylesheet:
       landing-kit.css  +  landing-scrolly.css   -> public.home
       landing-kit.css  +  tour.css              -> public.tour
       landing-kit.css  +  plans.css             -> public.plans

   NOT in origin.css on purpose: the operations app must not carry marketing
   weight. Mobile-first — default rules are the phone, @media (min-width) adds.
   Built on the app tokens (base/variables.css, already loaded via origin.css).
   =========================================================================== */

/* --- Shared local tokens (harmless on non-marketing .pub pages) ----------- */
body.pub {
  --land-ink: #0b1220;
  --land-muted: #5b6b7c;
  --land-line: #e2e8f0;
  --land-header-h: 56px;
  --land-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Dark-section surfaces — the caps strip and steps sit on these. */
  --land-dark-bg: #0b1220;
  --land-dark-card: #131c2f;
  --land-dark-line: #1e293b;
  --land-dark-dim: #94a3b8;
}

html.lenis,
html.lenis body { height: auto; }

@media (prefers-reduced-motion: reduce) {
  .land-cap,
  .mock-view,
  .land-hero__frame,
  .land-cta__bg,
  .land-cta__inner {
    transition: none !important;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Type & buttons ------------------------------------------------------- */
.land-eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.land-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

/* Section head: eyebrow + h2 + optional lead. Centered, max ~640px. */
.land-sec-head {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  padding: 0 1.25rem;
  text-align: center;
}
.land-sec-head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.land-sec-head p {
  margin: 0.65rem 0 0;
  color: var(--land-muted);
}

/* On a dark section the head inverts. */
.land-dark .land-sec-head .land-eyebrow { color: var(--color-accent); }
.land-dark .land-sec-head h2 { color: #fff; }
.land-dark .land-sec-head p { color: var(--land-dark-dim); }

/* --- Compact dark page hero (interior pages: /tour, /planes) --------------
   The landing has its own taller hero with the laptop; this is the shorter,
   centered variant every other marketing page opens with.
   ------------------------------------------------------------------------- */
.land-page-hero {
  background: linear-gradient(120deg, #0b1220 0%, #1e293b 50%, #172554 100%);
  color: #fff;
  padding: 3rem 0 3.25rem;
}
.land-page-hero .land-eyebrow { color: var(--color-accent); }
.land-page-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}
.land-page-hero__title {
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  color: #fff;
  margin: 0;
  letter-spacing: -0.035em;
  line-height: 1.14;
}
.land-page-hero__lead {
  margin: 0.85rem auto 0;
  color: #94a3b8;
  max-width: 52ch;
  font-size: 1.02rem;
}
.land-page-hero .land-btn-row { justify-content: center; }

@media (min-width: 900px) {
  .land-page-hero { padding: 4.5rem 0 4.75rem; }
}

@media (max-width: 767px) {
  .land-page-hero { padding: 2.25rem 0 2.5rem; }
  .land-page-hero__lead { font-size: 0.96rem; }
  .land-page-hero .land-btn-row { width: min(100%, 360px); margin-inline: auto; }
}

/* --- Mock primitives (used inside the phone screens) --------------------- */
.land-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 650;
}
.land-pill--pending { background: #fef3c7; color: #92400e; }
.land-pill--info { background: #e0f2fe; color: #0369a1; }
.land-pill--success { background: #dcfce7; color: #15803d; }

.land-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 650;
  font-size: 0.68rem;
}
.land-mini-btn--ghost {
  background: transparent;
  color: var(--land-muted);
  border: 1px solid var(--land-line);
}

.land-mini-record {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  font-size: 0.72rem;
}
.land-mini-record__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 4px;
}
.land-mini-record p {
  margin: 0 0 8px;
  color: var(--land-muted);
  font-size: 0.68rem;
}

/* --- The phone ----------------------------------------------------------- */
.land-phone {
  width: min(260px, 72vw);
  aspect-ratio: 9 / 18;
  background: #020617;
  border-radius: 28px;
  border: 2px solid #334155;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}
.land-phone__notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 34%; height: 16px;
  background: #020617;
  border-radius: 999px;
  z-index: 2;
}
.land-phone__screen {
  position: absolute;
  inset: 0;
  padding: 34px 12px 14px;
  background: #f1f5f9;
  color: var(--land-ink);
}
.mock-view {
  position: absolute;
  inset: 34px 12px 14px;
  display: grid;
  align-content: start;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.45s var(--land-ease), transform 0.45s var(--land-ease);
}
.mock-view.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mock-bar {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.mock-nav {
  display: grid;
  gap: 4px;
  font-size: 0.72rem;
}
.mock-nav span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.mock-nav span.on {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 650;
  border-color: transparent;
}
.mock-cap {
  margin-top: auto !important;
  text-align: center;
  font-size: 0.65rem;
  color: #64748b;
}
.mock-fields {
  display: grid;
  gap: 6px;
}
.mock-fields span {
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--land-muted);
}
.mock-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Patient files list — light-theme sibling of .mock-fields. */
.mock-files {
  display: grid;
  gap: 6px;
}
.mock-files span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.7rem;
  color: var(--land-muted);
  /* The phone narrows to ~144px on mobile — a long filename must ellipsize,
     never push the row wider than the screen. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mock-files .fas { flex: 0 0 auto; color: var(--color-primary); }

/* --- Capability strip ----------------------------------------------------
   The four features, folded into the "Cómo funciona" section as its map.
   Each card is a real anchor to its step, so it works without JS.
   Phone: 2x2. >=600px: one row of four.
   ------------------------------------------------------------------------- */
.land-caps {
  max-width: 1080px;
  margin: 0 auto 2.5rem;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.land-cap {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 0.9rem;
  min-height: var(--tap);
  background: var(--land-dark-card);
  border: 1px solid var(--land-dark-line);
  border-radius: 14px;
  color: inherit;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
}
.land-cap:hover {
  border-color: var(--color-primary);
  background: #17203585;
}
.land-cap:active { transform: scale(0.98); }
.land-cap:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.35);
}
.land-cap__n {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
  font-variant-numeric: tabular-nums;
}
.land-cap__icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #93c5fd;
}
.land-cap__icon svg { width: 18px; height: 18px; }
.land-cap h3 {
  font-size: 1rem;
  margin: 0;
  color: #fff;
  letter-spacing: -0.03em;
}
.land-cap p {
  margin: 0;
  color: var(--land-dark-dim);
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (min-width: 600px) {
  .land-caps { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
  .land-cap { padding: 1.1rem 1rem; }
  .land-cap h3 { font-size: 1.05rem; }
  .land-cap p { font-size: 0.85rem; }
}

/* --- Story board: sticky phone + numbered steps --------------------------
   Shared by the landing's merged section and /tour. The ids #storyMock /
   .land-step / .mock-view are what landing-scrolly.js drives.
   ------------------------------------------------------------------------- */
.land-story {
  background: var(--land-dark-bg);
  color: #e2e8f0;
  padding: 4.5rem 0 5rem;
}

.land-story__grid {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 2rem;
}

.land-story__mock {
  display: flex;
  justify-content: center;
}

.land-story__steps { display: grid; gap: 0; }
.land-step {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 0.85rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--land-dark-line);
  opacity: 0.4;
  transition: opacity 0.4s var(--land-ease);
  scroll-margin-top: 100px;
}
.land-step:last-child { border-bottom: 1px solid var(--land-dark-line); }
.land-step.is-active { opacity: 1; }
.land-step__num {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--land-dark-line);
  color: var(--land-dark-dim);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background 0.35s, color 0.35s;
}
.land-step.is-active .land-step__num {
  background: var(--color-primary);
  color: #fff;
}
.land-step h3 {
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 0.35rem;
  letter-spacing: -0.035em;
}
.land-step p {
  margin: 0;
  color: var(--land-dark-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}
.land-step em {
  font-style: normal;
  color: var(--land-dark-dim);
  font-weight: 500;
  font-size: 0.85em;
}

/* Trailing link out of a dark section (e.g. "Ver el recorrido completo"). */
.land-story__out {
  max-width: 1080px;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
  text-align: center;
}
.land-out-btn {
  color: #fff !important;
  border-color: #ffffff55 !important;
  background: transparent !important;
}
.land-out-btn:hover { background: #ffffff1a !important; }

@media (min-width: 900px) {
  .land-story__grid {
    grid-template-columns: minmax(260px, 320px) 1fr;
    gap: 3rem;
    align-items: start;
  }
  .land-story__mock.is-sticky {
    position: sticky;
    top: calc(var(--land-header-h) + 32px);
    height: calc(100svh - var(--land-header-h) - 64px);
    align-items: center;
  }
  .land-step { min-height: 52vh; align-content: center; padding: 2rem 0; }
  .land-phone { width: 280px; }
}

/* --- CTA band ------------------------------------------------------------ */
.land-cta {
  position: relative;
  overflow: hidden;
  min-height: 70svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  padding: 5rem 1.25rem;
}
/* Shorter band for interior pages (/tour, /planes). */
.land-cta--band { min-height: 0; padding: 3.5rem 1.25rem; }
.land-cta__bg {
  position: absolute;
  inset: -15%;
  background: linear-gradient(135deg, #1d4ed8, #0284c7 55%, #0c4a6e);
  will-change: transform;
}
.land-cta__inner {
  position: relative;
  z-index: 1;
  will-change: transform, opacity;
}
.land-cta h2 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #fff;
  max-width: 16ch;
  margin-inline: auto;
  letter-spacing: -0.035em;
  line-height: 1.12;
}
.land-cta p {
  margin: 0.75rem auto 0;
  color: #dbeafe;
  max-width: 36ch;
}
.land-cta .land-btn-row { justify-content: center; }
.land-cta__primary {
  background: #fff !important;
  color: var(--color-primary) !important;
}
.land-cta__primary:hover { background: #f1f5f9 !important; }
.land-cta__ghost {
  color: #fff !important;
  border-color: #ffffff88 !important;
  background: transparent !important;
}
.land-cta__ghost:hover { background: #ffffff1a !important; }

/* --- Text + action band (a light section's closing row) -------------------
   Copy block on the left, one button on the right. Stacks on the phone.
   ------------------------------------------------------------------------- */
.land-band {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: grid;
  gap: 1.25rem;
  align-items: center;
}
.land-band h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.land-band p {
  margin: 0;
  color: var(--land-muted);
  max-width: 60ch;
}
.land-band .btn {
  justify-self: start;
  min-height: var(--tap);
}

@media (min-width: 900px) {
  .land-band { grid-template-columns: 1fr auto; gap: 2.5rem; }
  .land-band .btn { justify-self: end; }
}

@media (max-width: 767px) {
  .land-band { padding-inline: 1rem; }
  .land-band .btn { justify-self: stretch; width: 100%; justify-content: center; }
}

/* ===========================================================================
   MOBILE POLISH (< 768px)
   =========================================================================== */
@media (max-width: 767px) {
  .land-btn-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .land-btn-row .btn {
    width: 100%;
    min-height: var(--tap);
    justify-content: center;
  }

  .land-sec-head { margin-bottom: 1.5rem; }
  .land-sec-head p { font-size: 0.9rem; }

  .land-caps { margin-bottom: 1.75rem; padding-inline: 1rem; }

  .land-story { padding: 3rem 0 3.5rem; }
  .land-story__grid { gap: 1rem; }

  /* Keep the phone visible while the steps scroll past it. */
  .land-story__mock.is-sticky-mobile {
    position: sticky;
    top: var(--land-header-h);
    z-index: 4;
    padding: 0.65rem 0 0.85rem;
    background: var(--land-dark-bg);
    border-bottom: 1px solid var(--land-dark-line);
  }
  .land-story__mock.is-sticky-mobile .land-phone {
    width: min(152px, 40vw);
  }
  .land-step {
    padding: 1.35rem 0;
    scroll-margin-top: calc(var(--land-header-h) + min(152px, 40vw) * 2 + 36px);
  }
  .land-step h3 { font-size: 1.02rem; }
  .land-step p { font-size: 0.9rem; }

  .land-cta {
    min-height: 0;
    padding: 3.5rem 1.25rem;
  }
  .land-cta .land-btn-row { width: min(100%, 360px); margin-inline: auto; }
}