/* Landing pública — capa marca v2 (navy / rocket / BTC oro).
   Consume tokens de bitcoin-retiro-design-system.css */

.landing-main {
  position: relative;
  z-index: var(--br-z-base);
  padding-bottom: var(--br-sp-16);
}

/* Sticky nav: espacio al hacer scroll hasta títulos / anclas */
html:has(.landing-main) {
  scroll-padding-top: 5.75rem;
}

/* Pasos → fundadores: separación entre secciones (sin depender sólo del gap interno) */
#fundadores {
  margin-top: var(--br-sp-10);
}

/* Landing: nav usa .brand-mark-app (style.css); hero mantiene clases locales */
.landing-hero {
  padding: var(--br-sp-12) 0 var(--br-sp-12);
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
}

.landing-hero-visual {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--br-sp-8);
}

/* Marco con proporción de banner: recorta franjas claras del PNG (object-fit: cover) */
.landing-hero-logo-frame {
  width: min(32rem, min(92vw, 520px));
  aspect-ratio: 5 / 2;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--br-r-xl);
  background: var(--br-brand-navy);
  box-shadow:
    0 10px 36px rgba(var(--br-orange-rgb), 0.18),
    0 4px 12px rgba(var(--br-orange-rgb), 0.08);
}

.landing-hero-logo-frame .landing-hero-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

[data-theme='light'] .landing-hero-logo-frame {
  box-shadow:
    0 12px 40px rgba(var(--br-orange-rgb), 0.12),
    0 4px 14px rgba(var(--br-orange-rgb), 0.06);
}

html[data-theme='dark'] .landing-hero-logo-frame {
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.4);
}

.landing-hero h1 {
  font-family: var(--br-font-display);
  font-size: var(--br-text-hero);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 var(--br-sp-4);
  letter-spacing: -0.02em;
}

.landing-hero h1 em {
  font-style: normal;
  color: var(--br-gold);
}

.landing-hero .landing-kicker {
  font-family: var(--br-font-data);
  font-size: var(--br-text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--br-gold-light);
  margin: 0 0 var(--br-sp-4);
}

.landing-hero .lead {
  font-size: var(--br-text-lg);
  color: var(--br-text-secondary);
  margin: 0 auto var(--br-sp-8);
  max-width: 36rem;
  line-height: 1.55;
}

.landing-campaign-kicker {
  color: var(--br-orange);
  letter-spacing: 0.16em;
}

.landing-hero-ctas {
  justify-content: center;
  flex-wrap: wrap;
}

/* Campaña Tu AFORE Soberana */
.landing-campaign-band {
  background: linear-gradient(
    155deg,
    rgba(var(--br-orange-rgb), 0.1) 0%,
    var(--br-brand-navy-soft) 45%,
    transparent 100%
  );
  border: 1px solid rgba(var(--br-orange-rgb), 0.28);
  border-radius: var(--br-r-xl);
  padding: var(--br-sp-10) clamp(var(--br-sp-6), 4vw, var(--br-sp-12));
  margin: var(--br-sp-8) auto var(--br-sp-10);
  max-width: min(1080px, 100%);
  box-sizing: border-box;
  box-shadow: var(--br-shadow-md);
}

[data-theme='light'] .landing-campaign-band {
  background: linear-gradient(
    155deg,
    rgba(var(--br-orange-rgb), 0.08) 0%,
    rgba(30, 43, 88, 0.06) 50%,
    transparent 100%
  );
}

.landing-campaign-title {
  margin-bottom: var(--br-sp-4);
  text-align: center;
}

.landing-campaign-body,
.landing-campaign-note {
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--br-text-secondary);
  line-height: 1.55;
}

.landing-campaign-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--br-sp-4);
  width: 100%;
}

@media (min-width: 640px) {
  .landing-campaign-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--br-sp-6);
  }
}

.landing-campaign-stat {
  text-align: center;
  padding: var(--br-sp-6) var(--br-sp-4);
}

.landing-campaign-stat--alert {
  border-color: rgba(var(--br-orange-rgb), 0.45);
  background: linear-gradient(180deg, rgba(var(--br-orange-rgb), 0.1), transparent);
}

.landing-campaign-stat-value {
  font-family: var(--br-font-display);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--br-orange);
  margin: 0 0 var(--br-sp-2);
  line-height: 1.1;
}

.landing-campaign-stat--alert .landing-campaign-stat-value {
  color: var(--br-gold);
}

.landing-campaign-stat-label {
  font-size: var(--br-text-sm);
  margin: 0;
  color: var(--br-text-muted);
  line-height: 1.4;
}

.landing-campaign-cta-wrap {
  display: flex;
  justify-content: center;
}

.landing-highlight-band {
  background: linear-gradient(
    165deg,
    var(--br-brand-navy-soft) 0%,
    transparent 70%
  );
  border: 1px solid var(--br-border);
  border-radius: var(--br-r-xl);
  padding: var(--br-sp-10) clamp(var(--br-sp-6), 4vw, var(--br-sp-12));
  margin: var(--br-sp-10) auto;
  box-shadow: var(--br-shadow-md);
  width: 100%;
  max-width: min(1080px, 100%);
  box-sizing: border-box;
}

[data-theme='light'] .landing-highlight-band {
  background: linear-gradient(
    165deg,
    rgba(30, 43, 88, 0.12) 0%,
    transparent 75%
  );
}

/* Hijo flex: sin esto el grid se encoge al min-content (~tiras estrechas) y queda centrado dentro de la banda */
.landing-highlight-band.br-stack {
  align-items: stretch;
}

.landing-grid {
  display: grid;
  align-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: var(--br-sp-6);
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  align-items: stretch;
}

/* Evita tres columnas estrechas en tablet; sólo escritorio cómodo */
@media (min-width: 680px) {
  .landing-grid {
    gap: var(--br-sp-8);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .landing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.landing-grid .br-card {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  box-shadow:
    var(--br-shadow-sm),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

[data-theme='light'] .landing-grid .br-card {
  box-shadow:
    var(--br-shadow-sm),
    0 0 0 1px rgba(10, 10, 30, 0.04);
}

.landing-grid .br-body {
  line-height: 1.62;
}

.landing-step-num {
  font-family: var(--br-font-data);
  font-size: var(--br-text-sm);
  color: var(--br-orange);
  margin-bottom: var(--br-sp-2);
}

.landing-section-title {
  font-family: var(--br-font-display);
  font-size: var(--br-text-2xl);
  font-weight: 600;
  margin: 0 0 var(--br-sp-8);
  scroll-margin-top: 5.5rem;
  text-align: center;
}

.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--br-sp-4);
  margin-top: var(--br-sp-4);
  font-size: var(--br-text-sm);
}

.landing-footer-links a {
  color: var(--br-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-footer-links a:hover {
  color: var(--br-orange);
}

.landing-card-heading {
  font-size: clamp(var(--br-text-lg), 2.2vw, var(--br-text-xl));
  line-height: 1.25;
}

/* ── Sección Fundadores ─────────────────────────────────── */
.landing-founders-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--br-sp-8);
  width: 100%;
  min-width: 0;
  align-items: start;
}

@media (max-width: 680px) {
  .landing-founders-grid {
    grid-template-columns: 1fr;
  }
}

.landing-founder-photo {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--br-r-lg);
  background: var(--br-bg-raised);
}

.landing-founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── Brújula — Cuestionario ─────────────────────────────── */
.opcion-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--br-border);
  border-radius: var(--br-r-md);
  padding: var(--br-sp-4) var(--br-sp-5);
  cursor: pointer;
  transition: border-color 150ms var(--br-ease), background 150ms var(--br-ease), color 150ms var(--br-ease);
  font-family: var(--br-font-ui);
  font-size: var(--br-text-base);
  color: var(--br-text-primary);
  background: var(--br-bg-ui);
  line-height: 1.4;
}

.opcion-item:hover {
  border-color: rgba(247, 147, 26, 0.4);
  background: var(--br-orange-soft);
}

.opcion-item.seleccionada {
  border-color: var(--br-orange);
  background: var(--br-orange-soft);
  color: var(--br-orange);
  font-weight: 600;
}

.resultado-numero {
  font-size: clamp(4rem, 12vw, 7rem);
  font-family: var(--br-font-data);
  font-weight: 700;
  line-height: 1;
  color: var(--br-text-primary);
  margin: var(--br-sp-4) 0;
}

.brujula-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--br-sp-3);
  margin-top: var(--br-sp-4);
}

.brujula-hero-tag {
  font-family: var(--br-font-data);
  font-size: var(--br-text-xs);
  color: var(--br-text-muted);
  background: var(--br-bg-ui);
  border: 1px solid var(--br-border);
  border-radius: var(--br-r-md);
  padding: var(--br-sp-2) var(--br-sp-4);
  letter-spacing: 0.05em;
}

.niveles-referencia {
  margin-top: var(--br-sp-8);
}

#pantalla-resultado { display: none; }
#pantalla-resultado.visible { display: block; }