@import url("../../config/tokens/tokens.generated.css");

/* --- Nav --- */
.sr-home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-m) var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.sr-home-nav__logo {
  font-family: var(--font-family-display);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 20px;
}
.sr-home-nav__right { display: flex; align-items: center; gap: var(--space-l); }
.sr-home-nav__link { font-family: var(--font-family-body); color: var(--color-text-primary); text-decoration: none; font-size: 14px; }
.sr-home-nav__link:hover { color: var(--color-primary); }
.sr-lang-toggle {
  font-family: var(--font-family-body);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-small);
  padding: 6px 10px;
  font-size: 13px;
  cursor: help;
}
.sr-lang-toggle[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* --- Hero --- */
.sr-home-hero { text-align: center; padding: var(--space-xxl) var(--space-xl); background: var(--color-background); }
.sr-home-hero__eyebrow { font-family: var(--font-family-body); color: var(--color-primary); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.sr-home-hero h1 { font-family: var(--font-family-display); color: var(--color-secondary); max-width: 760px; margin: var(--space-s) auto var(--space-m); }
.sr-home-hero__sub { font-family: var(--font-family-body); color: var(--color-text-secondary); max-width: 620px; margin: 0 auto; }
.sr-home-hero__actions { display: flex; gap: var(--space-m); justify-content: center; margin-top: var(--space-l); flex-wrap: wrap; }
.sr-home-hero__stats { display: flex; gap: var(--space-xl); justify-content: center; margin-top: var(--space-xl); flex-wrap: wrap; }
.sr-home-hero__stats dt { font-family: var(--font-family-display); font-size: 28px; color: var(--color-primary); font-weight: 700; }
.sr-home-hero__stats dd { font-family: var(--font-family-body); font-size: 13px; color: var(--color-muted); margin: 0; }

.btn-red {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--radius-small);
  text-decoration: none;
  font-family: var(--font-family-body);
  font-weight: 600;
  transition: opacity 200ms ease, transform 200ms ease;
}
.btn-red:hover { opacity: 0.9; transform: translateY(-1px); }
.sr-btn-outline {
  display: inline-block;
  border: 1.5px solid var(--color-border);
  color: var(--color-text-primary);
  padding: 12px 22px;
  border-radius: var(--radius-small);
  text-decoration: none;
  font-family: var(--font-family-body);
  font-weight: 600;
}
.sr-btn-outline:hover { border-color: var(--color-primary); }

/* --- Problem --- */
.sr-home-problem { max-width: 700px; margin: var(--space-xxl) auto; padding: 0 var(--space-xl); text-align: center; }
.sr-home-problem h2 { font-family: var(--font-family-display); font-style: italic; color: var(--color-secondary); }
.sr-home-problem p { font-family: var(--font-family-body); color: var(--color-text-secondary); }

/* --- Section intro (shared by How it works / Funnel / Plans / Settly) --- */
.sr-home-section-intro { text-align: center; max-width: 620px; margin: 0 auto var(--space-xl); }
.sr-home-section-label { font-family: var(--font-family-body); color: var(--color-primary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.sr-home-section-intro h2, .sr-home-faq h2, .sr-home-final-cta h2 { font-family: var(--font-family-display); color: var(--color-secondary); }
.sr-home-section-intro__sub { font-family: var(--font-family-body); color: var(--color-text-secondary); }

/* --- How it works --- */
.sr-home-how-it-works { padding: var(--space-xxl) var(--space-xl); background: var(--color-surface); }
.sr-home-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-l); max-width: 1100px; margin: 0 auto; }
.sr-home-step-card { padding: var(--space-l); border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.sr-home-step-card__number { font-family: var(--font-family-display); color: var(--color-primary-light); font-size: 32px; font-weight: 700; }
.sr-home-step-card__title { font-family: var(--font-family-body); font-weight: 600; margin: var(--space-xs) 0; }
.sr-home-step-card p { font-family: var(--font-family-body); color: var(--color-text-secondary); font-size: 14px; }

/* --- Roadmaps grid (unchanged from UI Sprint 1) --- */
.sr-home-category-section { margin: var(--space-xl) 0; }
.sr-home-category-section h3 { font-family: var(--font-family-display); color: var(--color-secondary); }
.sr-home-roadmap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-m); }
.roadmap-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: 20px 16px;
  cursor: pointer;
  transition: all 200ms ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
}
.roadmap-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--elevation-medium); }
.roadmap-card[aria-disabled="true"] { cursor: default; opacity: 0.6; }
.roadmap-card[aria-disabled="true"]:hover { transform: none; box-shadow: none; border-color: var(--color-border); }
.sr-roadmap-card__title { font-family: var(--font-family-body); font-weight: 600; color: var(--color-text-primary); }
.sr-roadmap-card__badge { font-family: var(--font-family-body); font-size: 13px; color: var(--color-muted); }
.roadmap-card[data-available="true"] .sr-roadmap-card__badge { color: var(--color-success); }

/* --- Funnel --- */
.sr-home-funnel { padding: var(--space-xxl) var(--space-xl); text-align: center; }
.sr-home-funnel__row { display: flex; justify-content: center; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
/* Pill-shaped badges/steps (funnel step, plan badge, settly badge)
   deliberately use a fixed 20px+ fully-rounded radius, not the
   card-radius token scale (--radius-small/medium/large) -- pills are
   a categorically different shape convention (always maximally
   rounded), not a token-consistency drift. */
.sr-home-funnel__step { font-family: var(--font-family-body); font-size: 13px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-muted); }
.sr-home-funnel__step--active { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.sr-home-funnel__arrow { color: var(--color-muted); }

/* --- Plans --- */
.sr-home-plans { padding: var(--space-xxl) var(--space-xl); background: var(--color-secondary); color: #fff; }
.sr-home-plans .sr-home-section-intro h2 { color: #fff; }
.sr-home-plans__wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-l); max-width: 800px; margin: 0 auto; }
.sr-home-plan { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-medium); padding: var(--space-l); position: relative; }
.sr-home-plan--featured { border-color: var(--color-tip); }
.sr-home-plan__badge { position: absolute; top: -12px; background: var(--color-tip); color: var(--color-secondary); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
/* Home #9: stronger on-card "one-time payment, no subscriptions" treatment. */
/* FIXED (Final QA Follow-up Sprint, Home #1): "ponerlo en blanco que
   resalta, no se ve bien ahora" -- the badge's gold-on-near-transparent
   text (var(--color-tip) at low contrast against the dark plan card
   background) read as illegible. Text is now white, matching this same
   file's own established convention for on-dark text on the Plans
   section (see .sr-home-plans/.sr-home-plans__wrap above, both #fff).
   The gold border is kept as the accent -- only the low-contrast text
   colour was the problem. */
.sr-home-plan__one-time-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-tip);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-small);
  margin-bottom: var(--space-s);
}
.sr-home-plan__name { font-family: var(--font-family-body); font-weight: 600; margin-top: var(--space-s); }
.sr-home-plan__name-note { opacity: 0.6; font-size: 13px; }
.sr-home-plan__price { font-family: var(--font-family-display); font-size: 40px; font-weight: 700; margin-top: var(--space-s); }
.sr-home-plan__price sup { font-size: 18px; }
/* Final Public Home / Locked Guide Preview Corrections Sprint, item 24. */
.sr-home-plan__price-note { font-size: 12px; opacity: 0.65; }
.sr-home-plan__cadence { font-size: 13px; opacity: 0.7; margin-bottom: var(--space-m); }
.sr-home-plan__tagline { color: var(--color-tip); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.sr-home-plan__features { list-style: none; padding: 0; margin: var(--space-m) 0; display: flex; flex-direction: column; gap: var(--space-s); }
.sr-home-plan__features li { font-size: 14px; padding-left: 20px; position: relative; }
.sr-home-plan__features li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-tip); }
.sr-home-plan__cta { display: block; text-align: center; background: var(--color-tip); color: var(--color-secondary); font-weight: 700; padding: 12px; border-radius: var(--radius-small); text-decoration: none; transition: opacity 200ms ease, transform 200ms ease; }
.sr-home-plan__cta:hover { opacity: 0.9; transform: translateY(-1px); }
.sr-home-plans__disclaimer { max-width: 600px; margin: var(--space-l) auto 0; font-size: 12px; opacity: 0.5; text-align: center; }

/* --- Settly --- */
.sr-home-settly { padding: var(--space-xxl) var(--space-xl); background: var(--color-surface); }
.sr-home-settly__card { max-width: 700px; margin: 0 auto; border: 1px solid var(--color-border); border-radius: var(--radius-medium); padding: var(--space-l); }
.sr-home-settly__badge { display: inline-block; background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; margin-bottom: var(--space-s); }
.sr-home-settly__card h3 { font-family: var(--font-family-display); }
.sr-home-settly__features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); margin: var(--space-m) 0; }
.sr-home-settly__features li { font-size: 14px; padding-left: 20px; position: relative; }
.sr-home-settly__features li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-primary); }

/* --- FAQ --- */
.sr-home-faq { padding: var(--space-xxl) var(--space-xl); max-width: 800px; margin: 0 auto; }

/* --- Final CTA --- */
.sr-home-final-cta { text-align: center; padding: var(--space-xxl) var(--space-xl); background: var(--color-background); }
.sr-home-final-cta p { font-family: var(--font-family-body); color: var(--color-text-secondary); margin-bottom: var(--space-m); }

/* --- Footer ---
   Global Footer sprint: moved to pages/shared/site-footer.css (the
   footer is now shared across every route, not Home-only). No rules
   left here on purpose. */

@media (max-width: 767px) {
  .sr-home-roadmap-grid, .sr-home-steps-grid { grid-template-columns: 1fr; }
  .sr-home-nav { flex-wrap: wrap; gap: var(--space-s); }
  .sr-home-nav__right { flex-wrap: wrap; justify-content: center; }
  .sr-home-plans__wrap { grid-template-columns: 1fr; }
}

/* Reduced motion: the global primitives.css rule only covers smooth
   scrolling -- these hover transforms/transitions are this file's own
   and need their own explicit override. */
@media (prefers-reduced-motion: reduce) {
  .btn-red, .sr-home-plan__cta, .roadmap-card {
    transition: none;
  }
  .btn-red:hover, .sr-home-plan__cta:hover, .roadmap-card:hover {
    transform: none;
  }
}

/* --- Product Sprint Phase 2 / Sprint 2: logo mark, Why SpainReady, real lang toggle --- */

.sr-home-nav__logo { display: inline-flex; align-items: center; gap: var(--space-xs); }
.sr-logo-mark { color: var(--color-primary); display: inline-flex; }

.sr-lang-toggle { cursor: pointer; }
.sr-lang-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

.sr-home-why { padding: var(--space-xxl) var(--space-xl); background: var(--color-surface); }
.sr-home-why-grid {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-l);
}
.sr-home-why-item { display: flex; gap: var(--space-s); align-items: flex-start; }
.sr-home-why-item__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.sr-home-why-item__title { font-family: var(--font-family-body); font-weight: 600; color: var(--color-secondary); margin: 0 0 2px; }
.sr-home-why-item__desc { font-family: var(--font-family-body); color: var(--color-text-secondary); font-size: 14px; margin: 0; }

@media (max-width: 767px) {
  .sr-home-why-grid { grid-template-columns: 1fr; }
}

/* --- Product Experience Sprint: trust bullets, Trust section, real card badges --- */

.sr-home-hero__trust-bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-m) auto 0;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
}
.sr-home-hero__trust-bullets li {
  font-family: var(--font-family-body);
  font-size: 14px;
  color: var(--color-text-secondary);
}
.sr-home-hero__trust-bullets li span { color: var(--color-success); font-weight: 700; }

.sr-home-trust {
  padding: var(--space-l) var(--space-xl);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.sr-home-trust__label {
  font-family: var(--font-family-body);
  font-size: 12px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-s);
}
.sr-home-trust__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-m) var(--space-l);
}
.sr-home-trust__list li {
  font-family: var(--font-family-body);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.sr-roadmap-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.sr-roadmap-card__pill {
  font-family: var(--font-family-body);
  font-size: 11px;
  color: var(--color-text-secondary);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 2px 8px;
}

@media (max-width: 767px) {
  .sr-home-hero__trust-bullets { text-align: left; }
}

.sr-home-final-cta__actions { display: flex; gap: var(--space-m); justify-content: center; flex-wrap: wrap; margin-top: var(--space-m); }

/* --- Conversion-Focused Home Sprint: Sin/Con comparison, table, Premium clarification --- */

.sr-home-why-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-l);
  max-width: 900px;
  margin: 0 auto;
  align-items: start;
}
.sr-home-why-column { padding: var(--space-l); border-radius: var(--radius-medium); }
.sr-home-why-column--without { background: var(--color-background); border: 1px solid var(--color-border); }
.sr-home-why-column--with { background: var(--color-primary-light); border: 1px solid var(--color-primary); }
.sr-home-why-column h3 { font-family: var(--font-family-display); margin-top: 0; }
.sr-home-why-column ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.sr-home-why-column--without li span { color: var(--color-danger); font-weight: 700; }
.sr-home-why-column--with li span { color: var(--color-success); font-weight: 700; }
.sr-home-why-compare__arrow { display: flex; align-items: center; font-size: 24px; color: var(--color-muted); align-self: center; }

.sr-home-comparison { padding: var(--space-xxl) var(--space-xl); background: var(--color-surface); }
/* Final Public Home / Locked Guide Preview Corrections Sprint, item 19:
   auto-layout tables never shrink below their content's min-content
   width, so on narrow viewports this table overflowed the page. This
   wrapper contains that overflow with its own scrollbar instead, so the
   page itself never scrolls horizontally. Same table, same content --
   presentation-only fix. */
.sr-home-comparison__table-wrapper { max-width: 800px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sr-home-comparison__table { width: 100%; border-collapse: collapse; }
.sr-home-comparison__table th, .sr-home-comparison__table td {
  padding: var(--space-s) var(--space-m);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-family-body);
  font-size: 14px;
}
.sr-home-comparison__table thead th { font-weight: 700; color: var(--color-secondary); }
.sr-home-comparison__table tbody th { text-align: left; font-weight: 500; color: var(--color-text-primary); }
.sr-home-comparison__table tbody tr:last-child th,
.sr-home-comparison__table tbody tr:last-child td { font-weight: 700; }
.sr-home-comparison__footnote { text-align: center; font-size: 12px; color: var(--color-muted); margin-top: var(--space-m); }

.sr-home-plan__clarification {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  margin-top: var(--space-s);
  margin-bottom: var(--space-m);
}

@media (max-width: 767px) {
  .sr-home-why-compare { grid-template-columns: 1fr; }
  .sr-home-why-compare__arrow { transform: rotate(90deg); margin: 0 auto; }
  .sr-home-comparison__table { font-size: 12px; }
  .sr-home-comparison__table th, .sr-home-comparison__table td { padding: var(--space-xs) var(--space-s); }
}

/* .sr-visually-hidden moved to layouts/_primitives/primitives.css (Final
   Production QA & Corrections Sprint) -- it's now used by the Roadmap
   Content page too, so it belongs in the shared primitives layer both
   pages already load, not duplicated per page. */