/* Sonhe + Alto — Página pública em seções guiadas */

/* reset básico (sim, esse "*" é intencional) */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root{
  --sma-navy: #0F2A44;
  --sma-blue: #3A7CA5;
  --sma-gold: #F5B700;
  --sma-ink: #0B1220;
  --sma-muted: rgba(255,255,255,.78);
  --sma-card: rgba(255,255,255,.10);
  --sma-border: rgba(255,255,255,.18);
  --sma-shadow: 0 16px 50px rgba(0,0,0,.18);
  --sma-radius: 28px;
  --sma-max: 1040px;
}

/* remove “cara de container” do base.html só nesta página */
body.sma-public .site-main > .container{
  max-width: none;
  padding: 0;
}

html{ scroll-behavior: smooth; }

/* wrapper de jornada */
.sma-journey{
  width: 100%;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 12px;
}

/* cada “tela” */
.sma-section{
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.2vw, 34px);
  scroll-snap-align: start;
  scroll-margin-top: 12px;
}

/* alinhamento opcional por seção */
.sma-section--right{ justify-items: end; }
.sma-section--right .sma-frame{ margin-left: auto; }

/* =========================
   FUNDOS (Seções 1 e 2)
   ✅ IMAGEM NO FUNDO DA SEÇÃO (não dentro do card)
   ========================= */

/* Seção 1 (hero): quente + sol à direita */
.sma-bg-hero,
.sma-bg-hero--invert{
  background:
    /* calor laranja suave (ajusta a “temperatura” da imagem) */
    linear-gradient(110deg,
      rgba(255,170,95,.52) 0%,
      rgba(255,170,95,.20) 42%,
      rgba(11,28,46,.74) 100%
    ),
    /* vinheta p/ leitura */
    linear-gradient(180deg,
      rgba(8,18,26,.78) 0%,
      rgba(8,18,26,.22) 55%,
      rgba(8,18,26,.82) 100%
    ),
    /* foto */
    url('/static/core/img/hero-sonhar-e-so-o-comeco-esquerda.png');

  background-size: cover;
  background-position: center, center, right center; /* sol à direita */
  background-repeat: no-repeat;
}

/* Seção 2: manter a MESMA imagem/“brilho” do Hero para senso de padrão */
.sma-bg-light{
  background:
    /* mesmo “calor” do hero */
    linear-gradient(110deg,
      rgba(255,170,95,.52) 0%,
      rgba(255,170,95,.20) 42%,
      rgba(11,28,46,.74) 100%
    ),
    /* mesma vinheta */
    linear-gradient(180deg,
      rgba(8,18,26,.78) 0%,
      rgba(8,18,26,.22) 55%,
      rgba(8,18,26,.82) 100%
    ),
    url('/static/core/img/hero-sonhar-e-so-o-comeco-esquerda.png');

  background-size: cover;
  background-position: center, center, right center;
  background-repeat: no-repeat;
}


/* =========================
   QUADRO DELIMITADOR (CARD)
   ✅ levemente transparente + “vidro”
   ✅ mais opaco no lado esquerdo p/ legibilidade
   ========================= */

.sma-frame{
  width: min(var(--sma-max), 100%);
  border-radius: var(--sma-radius);
  box-shadow: var(--sma-shadow);
  overflow: hidden;
  position: relative;
}

/* borda e “moldura” interna */
.sma-frame--dark{
  border: 1px solid rgba(255,255,255,.16);
  /* esquerda um pouco mais opaca; direita mais transparente para “sumir” a borda na foto */
  background: linear-gradient(90deg,
    rgba(11,18,32,.78) 0%,
    rgba(11,18,32,.72) 56%,
    rgba(11,18,32,.34) 100%
  );
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 18px 60px rgba(0,0,0,.26);
}

$1
/* =========================
   EXPERIMENTO — “VIDRO” com ~80% de transparência
   (mais “see-through” nas duas seções)
   Obs.: mantemos o lado esquerdo um pouco mais opaco p/ leitura.
   ========================= */

/* Seção 1 (hero): vidro mais transparente */
.sma-bg-hero .sma-frame--dark{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(90deg,
    rgba(11,18,32,.15) 0%,
    rgba(11,18,32,.08) 56%,
    rgba(11,18,32,.18) 100%
  );
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}

/* Seção 2: vidro claro mais transparente e um pouco mais “cinza” */
.sma-bg-light .sma-frame--light{
  border-color: rgba(255,255,255,.22);
  background: linear-gradient(90deg,
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.08) 62%,
    rgba(255,255,255,.22) 100%
  );
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
}

/* Seção 2: cards internos acompanhando o “vidro” */
.sma-bg-light .sma-step{
  border-color: rgba(255,255,255,.26);
  background: linear-gradient(180deg,
    rgba(255,255,255,.40) 0%,
    rgba(255,255,255,.32) 100%
  );
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}


/* conteúdo interno */
.sma-inner{
  padding: clamp(22px, 3.2vw, 46px);
  display: grid;
  gap: 14px;
}

/* modifiers para garantir que o quadro caiba */
.sma-frame--fit{
  max-height: calc(100svh - (clamp(14px, 2.2vw, 34px) * 2));
}
.sma-inner--fit{
  max-height: calc(100svh - (clamp(14px, 2.2vw, 34px) * 2));
  overflow: auto;
}

/* “capítulo” */
.sma-chapter{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .92rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}
.sma-chip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 28px;
  border-radius: 999px;
  background: rgba(245,183,0,.18);
  border: 1px solid rgba(245,183,0,.35);
  font-weight: 700;
}

/* Brand (logo + contatos) */
.sma-brand{
  display: flex;
  align-items: center;
  gap: 14px;
}
.sma-brand img{
  width: 92px;
  height: auto;
  display: block;
}

/* bloco “claro” para o logo ficar perfeito */
.sma-brand--light{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,42,68,.16);
  border-radius: 18px;
  padding: 14px 16px;
  color: var(--sma-ink);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}
.sma-brand--light .sma-brand-title{
  font-weight: 900;
  letter-spacing: .04em;
  font-size: .98rem;
}
.sma-brand--light .sma-brand-sub{
  font-weight: 700;
  color: rgba(11,18,32,.72);
  font-size: .95rem;
  margin-top: 2px;
}
.sma-brand--light .sma-brand-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 8px;
  font-size: .92rem;
  color: rgba(11,18,32,.72);
}
.sma-brand--light .sma-brand-meta a{
  color: rgba(11,18,32,.82);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* tipografia */
.sma-h1{
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 6px 0 2px;
}
.sma-h2{
  font-size: clamp(1.35rem, 2.2vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 6px 0 0;
}
.sma-lead{
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.55;
  color: var(--sma-muted);
  max-width: 70ch;
}
.sma-subline{
  font-size: .98rem;
  opacity: .92;
  max-width: 80ch;
}

/* listas e microcopy do hero */
.sma-bullets{
  margin: 6px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.sma-bullets li{ color: rgba(255,255,255,.92); line-height: 1.35; }

.sma-microcopy{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 6px;
  color: rgba(255,255,255,.84);
  font-size: .95rem;
}

/* botões */
.sma-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  align-items: center;
}
.sma-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  cursor: pointer;
  user-select: none;
}
.sma-btn:active{ transform: translateY(1px); }

.sma-btn--primary{
  background: var(--sma-gold);
  color: #0b1220;
  box-shadow: 0 14px 30px rgba(245,183,0,.24);
}
.sma-btn--primary:hover{ box-shadow: 0 18px 36px rgba(245,183,0,.30); }

.sma-btn--ghost{
  background: rgba(155,155,155,.38);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.sma-btn--ghost:hover{ background: rgba(255,255,255,.32); }

/* botão “ghost” em fundo branco */
.sma-btn--ghost-on-white{
  color: var(--sma-navy);
  border-color: rgba(15,42,68,.14);
  background: rgba(15,42,68,.04);
}
.sma-btn--ghost-on-white:hover{ background: rgba(15,42,68,.06); }

.sma-link{
  color: rgba(255,255,255,.88);
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 600;
}
.sma-link--dark{ color: var(--sma-navy); }
.sma-link:hover{ opacity: .92; }

/* botão de continuar */
.sma-continue{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .02em;
}
.sma-continue .arrow{
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}

/* Seção 2: cards */
.sma-steps{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.sma-step{
  border-radius: 18px;
  padding: 16px 16px;
  border: 1px solid rgba(255,255,255,.34);
  /* cards internos também em “vidro” */
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.62));
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.sma-step h4{ margin: 0 0 6px; font-size: 1.02rem;color: rgba(211,88,32,.78)}
.sma-step p{ margin: 0; color: rgba(71,18,32,.78); line-height: 1.45; }

/* Seção 2: textos auxiliares sem inline-style */
.sma-paragraph{ margin:0; color: rgba(255, 255, 255, 0.88); max-width:76ch; line-height:1.55; }
.sma-help{ margin:6px 0 0; color: rgba(11,18,32,1); font-size:.95rem; }

/* compacta em telas baixas */
@media (max-height: 820px){
  .sma-inner{ padding: 18px; gap: 10px; }
  .sma-steps{ gap: 10px; }
  .sma-step{ padding: 12px 12px; }
  .sma-h1{ margin-top: 2px; }
  .sma-brand img{ width: 82px; }
}

/* responsivo */
@media (max-width: 860px){
  .sma-steps{ grid-template-columns: 1fr; }
  .sma-section--right{ justify-items: center; }
  .sma-section--right .sma-frame{ margin-left: 0; }
  .sma-brand{ align-items: flex-start; }
  .sma-brand img{ width: 78px; }

  /* no mobile: mantenha a foto e a legibilidade */
  .sma-bg-hero{
    background-position: center, center, center;
  }
}

/* HOTFIX: força a cor do texto de apoio acima dos cards */
.sma-public .sma-journey p.sma-paragraph {
  color: rgba(255,255,255,0.99) !important;   /* escuro e bem legível */
  text-shadow: 0 1px 0 rgba(255,255,255,0.05);
}

/* se tiver links dentro do parágrafo, não deixe azul */
.sma-public .sma-journey p.sma-paragraph a {
  color: inherit !important;
}