/*
 * Marketing stylesheet — Sbozo Brand V7 (Tinta & coral)
 *
 * ISOLATED: Do NOT import this file from application.css or admin.css.
 * It is loaded exclusively via stylesheet_link_tag "marketing" in app/views/layouts/marketing.html.erb.
 *
 * V7 design tokens are scoped under .sbozo-landing so they cannot bleed into
 * the management UI or tenant public pages. Marketing component sidecar CSS is
 * imported here (not in the shared components.css manifest).
 */

/* ── Logo component (sidecar) ─────────────────────────────────────────────── */
@import url("/assets/sbozo/logo_component/logo_component-e1525d9c.css");

/* ══════════════════════════════════════════════════════════════════════════════
   V7 Design Tokens — scoped to .sbozo-landing
   ══════════════════════════════════════════════════════════════════════════════ */
.sbozo-landing {
  /* Brand palette */
  --sb-coral:        #F1573C;
  --sb-melon:        #FB8E63;
  --sb-mostaza:      #E7A93C;
  --sb-tinta:        #1E1B16;
  --sb-hueso:        #F7F3EC;

  /* Neutral palette */
  --sb-mono-label:   #A89B90;
  --sb-hairline:     #EEE5DC;
  --sb-hairline-2:   #EAE1D3;
  --sb-card-bg:      #FFFFFF;
  --sb-text-secondary: #5A5145;
  --sb-text-muted:   #6F6456;

  /* Typography */
  --sb-font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --sb-font-body:    "Plus Jakarta Sans", system-ui, sans-serif;
  --sb-font-mono:    ui-monospace, "Menlo", monospace;

  /* Radii */
  --sb-radius-sm:    8px;
  --sb-radius-md:    11px;
  --sb-radius-lg:    18px;
  --sb-radius-xl:    24px;

  /* Shadows */
  --sb-shadow-card:  0 1px 3px 0 rgba(30,27,22,.06), 0 1px 2px 0 rgba(30,27,22,.04);
  --sb-shadow-raised: 0 4px 12px 0 rgba(30,27,22,.08), 0 1px 3px 0 rgba(30,27,22,.05);

  /* Base typography */
  font-family: var(--sb-font-body);
  background-color: var(--sb-hueso);
  color: var(--sb-tinta);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sbozo-landing ::selection {
  background: var(--sb-coral);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Typography
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-eyebrow {
  font-family: var(--sb-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sb-coral);
  display: block;
  margin-bottom: 0.75rem;
}

.sbozo-landing .sb-heading {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--sb-tinta);
}

.sbozo-landing .sb-heading--xl {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.sbozo-landing .sb-heading--lg {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.sbozo-landing .sb-heading--md {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.sbozo-landing .sb-heading--sm {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.sbozo-landing .sb-lead {
  font-family: var(--sb-font-body);
  font-size: clamp(1rem, 2vw, 1.175rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--sb-text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Buttons
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: var(--sb-radius-md);
  font-family: var(--sb-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity .15s ease, transform .1s ease, box-shadow .15s ease;
  white-space: nowrap;
}

.sbozo-landing .sb-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.sbozo-landing .sb-btn:active {
  transform: translateY(0);
  opacity: .95;
}

/* Primary — dark (Tinta bg) */
.sbozo-landing .sb-btn-dark {
  background-color: var(--sb-tinta);
  color: #ffffff;
  border-color: var(--sb-tinta);
}

/* Accent — coral */
.sbozo-landing .sb-btn-coral {
  background-color: var(--sb-coral);
  color: #ffffff;
  border-color: var(--sb-coral);
}

/* Secondary — ghost */
.sbozo-landing .sb-btn-secondary {
  background-color: transparent;
  color: var(--sb-tinta);
  border-color: var(--sb-hairline-2);
}

.sbozo-landing .sb-btn-secondary:hover {
  border-color: var(--sb-mono-label);
}

/* Disabled state (for waitlist form) */
.sbozo-landing .sb-btn:disabled,
.sbozo-landing .sb-btn[aria-disabled="true"] {
  opacity: .38;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Navigation
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sb-hairline);
  padding: 0 1.5rem;
}

.sbozo-landing .sb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  height: 64px;
}

/* Brand group: logo + Beta badge side by side */
.sbozo-landing .sb-nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Beta status badge — nav only, not inside LogoComponent */
.sbozo-landing .sb-nav-badge {
  font-family: var(--sb-font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sb-coral);
  background-color: rgba(241, 87, 60, 0.1);
  padding: 2px 7px;
  border-radius: 99px;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

.sbozo-landing .sb-nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbozo-landing .sb-nav__link {
  font-family: var(--sb-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--sb-text-secondary);
  text-decoration: none;
  transition: color .15s;
}

.sbozo-landing .sb-nav__link:hover {
  color: var(--sb-tinta);
}

.sbozo-landing .sb-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Mobile nav toggle */
.sbozo-landing .sb-nav__toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  color: var(--sb-tinta);
  cursor: pointer;
  border-radius: var(--sb-radius-sm);
}

.sbozo-landing .sb-nav__toggle:hover {
  background-color: var(--sb-hairline);
}

/* Mobile nav collapse */
.sbozo-landing .sb-nav__mobile {
  display: none;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--sb-hairline);
}

.sbozo-landing .sb-nav__mobile.is-open {
  display: block;
}

.sbozo-landing .sb-nav__mobile-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbozo-landing .sb-nav__mobile-link {
  font-family: var(--sb-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--sb-text-secondary);
  text-decoration: none;
  padding: 0.5rem 0;
  display: block;
}

.sbozo-landing .sb-nav__mobile-link:hover {
  color: var(--sb-tinta);
}

@media (max-width: 767px) {
  .sbozo-landing .sb-nav__links {
    display: none;
  }

  .sbozo-landing .sb-nav__actions {
    display: none;
  }

  .sbozo-landing .sb-nav__toggle {
    display: flex;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Hero section
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-hero {
  padding: 6rem 1.5rem 5rem;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.sbozo-landing .sb-hero__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}

/* issue-1785743220689 (2nd encargo): the designer's real icon.svg (public/,
   not Propshaft-pipelined — see marketing/index.html.erb's comment on this
   element), replacing the CSS-drawn mark that used to render here via
   Sbozo::LogoComponent(variant: :coral, wordmark: false, size: 80).
   height: 92.8px reproduces that mark's 80px ring diameter — icon.svg's
   ring occupies 100 of its 116 viewBox units, so 80 * 116/100 = 92.8.
   object-fit: contain guards against distortion the same way
   .sb-logo__lockup does (logo_component.css) — .sb-hero__logo is a flex row
   with default (stretch) cross-axis alignment and no fixed height today,
   so there's no live risk, but a future height constraint on that container
   would otherwise squash this image silently. */
.sbozo-landing .sb-hero__icon {
  display: block;
  height: 92.8px;
  width: auto;
  object-fit: contain;
}

.sbozo-landing .sb-hero__ctas {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Generic content section
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-section {
  padding: 5rem 1.5rem;
}

.sbozo-landing .sb-section__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.sbozo-landing .sb-section__header {
  max-width: 640px;
  margin-bottom: 3rem;
}

.sbozo-landing .sb-divider {
  border: none;
  border-top: 1px solid var(--sb-hairline);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Use-case cards (Qué puedes crear)
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.sbozo-landing .sb-card {
  background-color: var(--sb-card-bg);
  border: 1px solid var(--sb-hairline);
  border-radius: var(--sb-radius-xl);
  padding: 2rem 1.75rem;
  box-shadow: var(--sb-shadow-card);
  transition: box-shadow .2s ease, transform .2s ease;
}

.sbozo-landing .sb-card:hover {
  box-shadow: var(--sb-shadow-raised);
  transform: translateY(-2px);
}

.sbozo-landing .sb-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--sb-radius-md);
  background-color: var(--sb-hueso);
  border: 1px solid var(--sb-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  margin-bottom: 1.25rem;
  color: var(--sb-coral);
}

.sbozo-landing .sb-card__title {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--sb-tinta);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.sbozo-landing .sb-card__desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sb-text-secondary);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Features / Cómo funciona
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
}

.sbozo-landing .sb-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.sbozo-landing .sb-feature__dot {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(241, 87, 60, 0.1);
  border: 1px solid rgba(241, 87, 60, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sb-coral);
  font-size: 1rem;
  margin-top: 2px;
}

.sbozo-landing .sb-feature__body h3 {
  font-family: var(--sb-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--sb-tinta);
  margin: 0 0 0.25rem;
}

.sbozo-landing .sb-feature__body p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--sb-text-secondary);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Roadmap timeline
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-roadmap {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
}

@media (max-width: 767px) {
  .sbozo-landing .sb-roadmap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.sbozo-landing .sb-roadmap__col-label {
  font-family: var(--sb-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sbozo-landing .sb-roadmap__col-label--done {
  color: var(--sb-coral);
}

.sbozo-landing .sb-roadmap__col-label--pending {
  color: var(--sb-mono-label);
}

.sbozo-landing .sb-roadmap__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sbozo-landing .sb-roadmap__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.sbozo-landing .sb-roadmap__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  margin-top: 2px;
}

.sbozo-landing .sb-roadmap__check--done {
  background-color: var(--sb-coral);
  color: #fff;
}

.sbozo-landing .sb-roadmap__check--pending {
  background-color: transparent;
  border: 1.5px dashed var(--sb-hairline-2);
  color: var(--sb-mono-label);
}

.sbozo-landing .sb-roadmap__text--done {
  color: var(--sb-tinta);
}

.sbozo-landing .sb-roadmap__text--pending {
  color: var(--sb-mono-label);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Waitlist / Lista de espera
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-waitlist {
  background-color: var(--sb-card-bg);
  border: 1px solid var(--sb-hairline);
  border-radius: var(--sb-radius-xl);
  padding: 3rem 2.5rem;
  max-width: 560px;
  box-shadow: var(--sb-shadow-card);
}

.sbozo-landing .sb-waitlist__form {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
  flex-wrap: wrap;
}

.sbozo-landing .sb-waitlist__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 16px;
  border: 1.5px solid var(--sb-hairline-2);
  border-radius: var(--sb-radius-md);
  font-family: var(--sb-font-body);
  font-size: 0.9375rem;
  color: var(--sb-tinta);
  background-color: var(--sb-hueso);
  outline: none;
  opacity: .45;
  cursor: not-allowed;
}

.sbozo-landing .sb-waitlist__beta-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--sb-mono-label);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sbozo-landing .sb-waitlist__beta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--sb-mostaza);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-footer {
  background-color: var(--sb-tinta);
  padding: 3rem 1.5rem;
  color: rgba(247, 243, 236, 0.6);
}

.sbozo-landing .sb-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.sbozo-landing .sb-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sbozo-landing .sb-footer__tagline {
  font-size: 0.875rem;
  color: rgba(247, 243, 236, 0.5);
  margin: 0;
}

.sbozo-landing .sb-footer__links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbozo-landing .sb-footer__link {
  font-size: 0.875rem;
  color: rgba(247, 243, 236, 0.55);
  text-decoration: none;
  transition: color .15s;
}

.sbozo-landing .sb-footer__link:hover {
  color: rgba(247, 243, 236, 0.9);
}

.sbozo-landing .sb-footer__copy {
  font-size: 0.8125rem;
  color: rgba(247, 243, 236, 0.35);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Language switcher (ES · EN · DE)
   Each button_to renders a <form class="sb-lang-form"> wrapping a <button>.
   display:contents on the form collapses it out of the flex layout so the
   buttons appear as direct children of the flex .sb-lang-switch nav.
   Progressive enhancement: works without JS (native POST form + redirect).
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Collapse the form wrapper so buttons flow inline in the flex parent */
.sbozo-landing .sb-lang-form {
  display: contents;
}

.sbozo-landing .sb-lang-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: var(--sb-font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-text-muted);
  cursor: pointer;
  border-radius: var(--sb-radius-sm);
  transition: color .12s, background-color .12s;
  line-height: 1;
  white-space: nowrap;
}

.sbozo-landing .sb-lang-btn:hover {
  color: var(--sb-tinta);
  background-color: var(--sb-hairline);
}

/* Active locale — coral highlight */
.sbozo-landing .sb-lang-btn--active {
  color: var(--sb-coral);
  background-color: rgba(241, 87, 60, 0.09);
}

.sbozo-landing .sb-lang-btn--active:hover {
  color: var(--sb-coral);
  background-color: rgba(241, 87, 60, 0.15);
}

/* Mobile menu variant — separator + larger touch targets */
.sbozo-landing .sb-lang-switch--mobile {
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--sb-hairline);
  gap: 4px;
}

.sbozo-landing .sb-lang-switch--mobile .sb-lang-btn {
  font-size: 0.8125rem;
  padding: 7px 11px;
}

/* Footer variant — muted tones matching the dark footer palette */
.sbozo-landing .sb-lang-switch--footer .sb-lang-btn {
  color: rgba(247, 243, 236, 0.4);
}

.sbozo-landing .sb-lang-switch--footer .sb-lang-btn:hover {
  color: rgba(247, 243, 236, 0.85);
  background-color: rgba(247, 243, 236, 0.08);
}

.sbozo-landing .sb-lang-switch--footer .sb-lang-btn--active {
  color: var(--sb-coral);
  background-color: rgba(241, 87, 60, 0.12);
}

.sbozo-landing .sb-lang-switch--footer .sb-lang-btn--active:hover {
  background-color: rgba(241, 87, 60, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Utility — hueso bg band (alternate sections)
   ══════════════════════════════════════════════════════════════════════════════ */

.sbozo-landing .sb-section--alt {
  background-color: var(--sb-card-bg);
}

/* ══════════════════════════════════════════════════════════════════════════════
   Responsive tweaks
   ══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .sbozo-landing .sb-hero {
    padding: 4rem 1.25rem 3rem;
  }

  .sbozo-landing .sb-section {
    padding: 3.5rem 1.25rem;
  }

  .sbozo-landing .sb-waitlist {
    padding: 2rem 1.5rem;
  }

  .sbozo-landing .sb-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}