/* landing.css
   Componentes extras das landings temáticas (isenção de IR, autismo/TEA).
   Carrega SEMPRE depois de trabalhista.css e reaproveita os tokens dela. */

/* Título de hero mais longo do que o da home. */
.hero h1.long {
  font-size: clamp(37px, 3.7vw, 54px);
  line-height: 1.12;
  letter-spacing: -.03em
}
.hero-desc.wide {
  max-width: 480px
}
.hero-selos {
  display: grid;
  gap: 9px;
  margin: 24px 0 0;
  font-size: 11px;
  color: var(--muted)
}
.hero-selos span:before {
  content: '✓';
  color: #7b8d6b;
  margin-right: 11px;
  font-weight: 700
}

/* Faixa de referência legal (mesma pauta da .experience da home).
   Só acima de 800px: abaixo disso, vale a malha de 2 colunas da home. */
@media(min-width:801px) {
  .experience-grid.legal-strip {
    grid-template-columns: 1.15fr 1fr 1fr 1fr
  }
}
.experience-grid .ref-num strong {
  font-size: 36px
}

/* Listas com marcação (doenças, direitos que podem ser pleiteados). */
.tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}
.tags > span {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  padding: 17px 21px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}
.tags > span:before {
  content: '✓';
  color: #7b8d6b;
  font-weight: 700;
  line-height: 1.5
}
.tags-note {
  font-size: 11px;
  color: var(--muted);
  margin: 18px 0 0
}
.tags-note a {
  border-bottom: 1px solid #b49c67;
  padding-bottom: 2px;
  font-weight: 600
}

/* Duas colunas: conteúdo à esquerda, painel escuro à direita. */
.split {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 70px;
  align-items: start
}
.split > div > h2 {
  font-size: clamp(30px, 2.8vw, 40px)
}
.panel {
  background: var(--ink);
  color: #f4f2e8;
  padding: 36px 34px 30px;
  border-radius: 3px 90px 3px 3px
}
.panel h3 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 0 0 10px
}
.panel > p {
  font-size: 12.5px;
  color: #c3cec5;
  margin: 0 0 20px
}
.panel .item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  padding: 20px 0 0;
  margin-top: 20px;
  border-top: 1px solid #436057
}
.panel .item svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  margin-top: 3px
}
.panel .item b {
  font-size: 13px;
  font-weight: 600
}
.panel .item small {
  display: block;
  font-size: 12px;
  line-height: 1.75;
  color: #c3cec5;
  margin-top: 7px
}

/* Cartões de base legal / direitos (mesma malha dos .right-card). */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line)
}
.pillar {
  padding: 31px 29px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column
}
.pillar svg {
  width: 26px;
  height: 26px;
  color: #58694f;
  margin-bottom: 26px
}
.pillar h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 15px
}
.pillar p {
  font-size: 13px;
  color: var(--muted);
  flex: 1;
  margin-bottom: 22px
}
.pillar .ref {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: #58694f
}

/* Quatro etapas em vez das três da home. */
.steps.four {
  grid-template-columns: repeat(4, 1fr);
  gap: 32px
}

/* Simulação informativa. */
.sim-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: center
}
.sim {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px 90px 3px 3px;
  padding: 34px 32px 34px
}
.sim h3 {
  font-family: var(--serif);
  font-size: 25px;
  margin: 0 0 9px
}
.sim > p {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 26px
}
.sim label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 9px
}
.sim label .hint {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 5px
}
.sim .field {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 3px;
  margin-bottom: 24px
}
.sim .field span {
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px 0 15px
}
.sim .field input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  padding: 15px 15px 15px 4px;
  outline: none;
  min-width: 0
}
.sim input[type=range] {
  width: 100%;
  accent-color: #4d6b5d;
  margin: 2px 0 10px
}
.sim .periodo {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 26px
}
.sim .periodo b {
  color: var(--ink);
  font-weight: 600
}
.sim .button {
  width: 100%
}
.sim-res {
  display: none;
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding-top: 24px
}
.sim-res.show {
  display: block
}
.sim-res .box {
  margin-bottom: 18px
}
.sim-res .k {
  font-size: 10px;
  letter-spacing: 1.3px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.7
}
.sim-res .v {
  font-family: var(--serif);
  font-size: 39px;
  line-height: 1.1;
  margin-top: 8px
}
.sim-res .box.fut .v {
  font-size: 27px;
  color: #4d6b5d
}
.sim-res .disc {
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.8;
  margin: 0
}

/* Nota de conformidade (Provimento 205/2021). */
.nota-etica {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.8;
  margin: 26px 0 0
}

@media(max-width:1100px) {
  .split, .sim-grid {
    gap: 45px
  }
}
@media(max-width:800px) {
  .split, .sim-grid {
    grid-template-columns: 1fr;
    gap: 38px
  }
  .steps.four {
    grid-template-columns: repeat(2, 1fr);
    gap: 27px
  }
  .pillars {
    grid-template-columns: repeat(2, 1fr)
  }
}
@media(max-width:600px) {
  .hero h1.long {
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -1.2px
  }
  .hero h1.long br {
    display: none
  }
  .hero-desc.wide {
    max-width: 100%
  }
  .tags {
    grid-template-columns: 1fr
  }
  .pillars {
    grid-template-columns: 1fr
  }
  .steps.four {
    grid-template-columns: 1fr;
    gap: 21px
  }
  .steps.four article {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 14px
  }
  .panel {
    padding: 28px 24px 24px;
    border-radius: 3px 70px 3px 3px
  }
  .sim {
    padding: 26px 22px 28px;
    border-radius: 3px 70px 3px 3px
  }
  .sim-res .v {
    font-size: 33px
  }
}

/* Texto de apoio ao lado da simulação. */
.sim-intro {
  font-size: 13px;
  color: var(--muted);
  max-width: 330px;
  margin: 0
}