/* ========================================================================== 
   IBRALE Visual System — 02 Home
   Classes comuns para homes do ecossistema. A mesma gramática visual pode ser
   usada em IBRALE, IBRALC, S-Lab e site autoral, com variação por cor de site.
   ========================================================================== */

/* Rotas principais -------------------------------------------------------- */

.ibrale-rotas-bloco,
.slab-home-rotas {
  width: min(var(--ibrale-max), calc(100% - 40px));
  margin: 0 auto 52px;
}

.ibrale-rotas-bloco h2,
.slab-home-rotas h2 {
  margin: 0 0 22px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 400;
}

.ibrale-rotas-bloco > p,
.slab-home-rotas > p {
  max-width: 920px;
  margin: 0 0 22px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ibrale-ink);
}

.ibrale-rotas-home,
.slab-home-rotas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 26px;
  margin: 30px 0 36px;
}

.ibrale-rotas-home .ibrale-rota-card,
.slab-home-rota-card {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  background: var(--ibrale-white);
  border: 1px solid var(--ibrale-border);
  border-radius: 14px;
  padding: 22px 26px 18px 30px;
  box-shadow:
    0 10px 26px rgba(22, 38, 34, 0.10),
    0 2px 8px rgba(22, 38, 34, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

.ibrale-rotas-home .ibrale-rota-card::before,
.slab-home-rota-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--accent, var(--site-ibrale));
}

.ibrale-rotas-home .ibrale-rota-card:hover,
.slab-home-rota-card:hover {
  transform: translateY(-2px);
  border-color: #bdd1ca;
  box-shadow:
    0 16px 34px rgba(22, 38, 34, 0.14),
    0 4px 12px rgba(22, 38, 34, 0.07);
}

.ibrale-rotas-home .ibrale-rota-card p,
.slab-home-rota-card p {
  margin: 0;
  color: var(--ibrale-text);
  font-size: 1.05rem;
  line-height: 1.56;
}

.ibrale-rotas-home .ibrale-rota-card h3,
.slab-home-rota-card h3 {
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--accent, var(--site-ibrale));
}

.ibrale-rotas-home .ibrale-rota-card h3 a,
.slab-home-rota-card h3 a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.ibrale-rotas-home .ibrale-rota-card h3 a:hover,
.slab-home-rota-card h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Compatibilidade temporária com cores antigas por posição. Não usar em novos blocos. */
.ibrale-rotas-home .ibrale-rota-card:nth-child(1) { --accent: var(--tema-corpo); }
.ibrale-rotas-home .ibrale-rota-card:nth-child(2) { --accent: var(--tema-linguagem); }
.ibrale-rotas-home .ibrale-rota-card:nth-child(3) { --accent: var(--tema-convivencia); }
.ibrale-rotas-home .ibrale-rota-card:nth-child(4) { --accent: var(--tema-prevencao); }
.ibrale-rotas-home .ibrale-rota-card:nth-child(5) { --accent: var(--tema-recursos); }
.ibrale-rotas-home .ibrale-rota-card:nth-child(6) { --accent: var(--tema-geral); }

/* Destaque de teste / ação ------------------------------------------------ */

.ibrale-teste-home,
.slab-home-feature {
  width: min(var(--ibrale-max), calc(100% - 40px));
  margin: 44px auto 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: 52px;
  align-items: center;
}

.ibrale-teste-chamada,
.slab-home-feature-text {
  max-width: 560px;
}

.ibrale-teste-chamada h2,
.slab-home-feature-text h2 {
  margin: 0 0 16px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ibrale-ink);
}

.ibrale-teste-chamada p,
.slab-home-feature-text p {
  margin: 0 0 15px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ibrale-text);
}

.ibrale-teste-card,
.slab-home-feature-card {
  max-width: 380px;
}

/* Ecossistema ------------------------------------------------------------- */

.ibrale-ecossistema-painel,
.slab-home-ecosystem {
  width: min(var(--ibrale-max), calc(100% - 40px));
  margin: 58px auto 66px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 26px;
  align-items: start;
}

.ibrale-ecossistema-coluna-principal,
.slab-home-ecosystem-maincol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ibrale-ecossistema-principal,
.slab-home-ecosystem-panel {
  position: relative;
  background: linear-gradient(135deg, rgba(247, 250, 248, 0.98), rgba(255, 255, 255, 0.98));
  border: 1px solid var(--ibrale-border-soft);
  border-radius: var(--ibrale-radius-panel);
  padding: 36px 38px 34px;
  box-shadow: var(--ibrale-shadow-panel);
  overflow: hidden;
}

.ibrale-ecossistema-principal::before,
.slab-home-ecosystem-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--site-ecossistema);
}

.ibrale-ecossistema-principal::after,
.slab-home-ecosystem-panel::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  background: rgba(51, 65, 61, 0.08);
}

.ibrale-ecossistema-principal .ibrale-eyebrow,
.ibrale-ecossistema-painel .ibrale-eyebrow,
.slab-home-ecosystem .ibrale-eyebrow {
  position: relative;
  z-index: 1;
  color: var(--site-ecossistema);
}

.ibrale-ecossistema-principal h2,
.slab-home-ecosystem-panel h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  font-size: 2rem;
  line-height: 1.18;
  font-weight: 500;
  color: var(--ibrale-ink);
}

.ibrale-ecossistema-principal p,
.slab-home-ecosystem-panel p {
  position: relative;
  z-index: 1;
  margin: 0 0 17px;
  font-size: 1.08rem;
  line-height: 1.64;
  color: var(--ibrale-text);
}

.ibrale-ecossistema-principal p:last-child,
.slab-home-ecosystem-panel p:last-child { margin-bottom: 0; }

.ibrale-ecossistema-trilhas,
.slab-home-ecosystem-trails {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.ibrale-trilha-card,
.slab-site-card {
  position: relative;
  display: block;
  min-height: 100%;
  padding: 26px 22px 20px;
  background: var(--ibrale-white);
  border: 1px solid var(--ibrale-border);
  border-radius: var(--ibrale-radius-card);
  color: var(--ibrale-ink);
  text-decoration: none;
  box-shadow: var(--ibrale-shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}

.ibrale-trilha-card::before,
.slab-site-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 7px;
  background: var(--accent, var(--site-ibrale));
}

.ibrale-trilha-card:hover,
.slab-site-card:hover {
  transform: translateY(-2px);
  border-color: #bdd1ca;
  box-shadow: var(--ibrale-shadow-card-hover);
  text-decoration: none;
}

.ibrale-trilha-label,
.slab-site-label {
  display: block;
  margin: 0 0 9px;
  font-size: .84rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--ibrale-muted);
}

.ibrale-trilha-card strong,
.slab-site-card strong {
  display: block;
  margin: 0 0 9px;
  font-size: 1.24rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--accent, var(--site-ibrale));
}

.ibrale-trilha-card span:last-child,
.slab-site-card span:last-child {
  display: block;
  font-size: 1.04rem;
  line-height: 1.54;
  color: #3d4b47;
}

/* Mapeamento antigo de classes do ecossistema */
.trilha-ibrale { --accent: var(--site-ibrale); }
.trilha-ibralc { --accent: var(--site-ibralc); }
.trilha-slab { --accent: var(--site-slab); }
.trilha-autor { --accent: var(--site-autor); }

.destaque-autoral {
  padding-top: 24px;
  padding-bottom: 18px;
}

.destaque-autoral strong { font-size: 1.18rem; }
.destaque-autoral span:last-child { font-size: 1rem; line-height: 1.52; }

/* Apresentação / passos --------------------------------------------------- */

.ibrale-apresentacao-home,
.slab-home-steps {
  width: min(var(--ibrale-max), calc(100% - 40px));
  margin: 64px auto 66px;
  display: grid;
  grid-template-columns: minmax(340px, .92fr) minmax(0, 1.08fr);
  gap: 34px;
  align-items: center;
}

.ibrale-apresentacao-visual,
.slab-home-steps-panel {
  position: relative;
  padding: 32px 28px 28px;
  background: linear-gradient(135deg, rgba(247, 250, 248, 0.98), rgba(255, 255, 255, 0.98));
  border: 1px solid var(--ibrale-border-soft);
  border-radius: var(--ibrale-radius-panel);
  box-shadow: var(--ibrale-shadow-panel);
  overflow: hidden;
}

.ibrale-apresentacao-visual::before,
.slab-home-steps-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: var(--accent, var(--site-ibrale));
}

.ibrale-apresentacao-visual::after,
.slab-home-steps-panel::after {
  content: "";
  position: absolute;
  right: -62px;
  bottom: -62px;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.08);
}

.ibrale-apresentacao-visual .ibrale-eyebrow,
.slab-home-steps-panel .ibrale-eyebrow {
  position: relative;
  z-index: 1;
  margin-bottom: 24px;
  color: var(--accent, var(--site-ibrale));
}

.ibrale-apresentacao-passo,
.slab-home-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 6px;
  padding: 20px 0;
  border-top: 1px solid var(--ibrale-border-soft);
}

.ibrale-apresentacao-passo:first-of-type,
.slab-home-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.ibrale-apresentacao-passo:last-child,
.slab-home-step:last-child { padding-bottom: 0; }

.ibrale-apresentacao-passo span,
.slab-home-step span {
  grid-column: 1;
  grid-row: 1;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ibrale-ink);
}

.ibrale-apresentacao-passo strong,
.slab-home-step strong {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ibrale-ink);
}

.ibrale-apresentacao-passo p,
.slab-home-step p {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 1rem;
  line-height: 1.54;
  color: #3d4b47;
}

.ibrale-apresentacao-texto,
.slab-home-steps-text { max-width: 620px; }

.ibrale-apresentacao-texto h2,
.slab-home-steps-text h2 {
  margin: 0 0 24px;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ibrale-ink);
}

.ibrale-apresentacao-texto p,
.slab-home-steps-text p {
  margin: 0 0 20px;
  font-size: 1.08rem;
  line-height: 1.64;
  color: var(--ibrale-text);
}

@media (max-width: 980px) {
  .ibrale-teste-home,
  .slab-home-feature,
  .ibrale-ecossistema-painel,
  .slab-home-ecosystem,
  .ibrale-apresentacao-home,
  .slab-home-steps {
    grid-template-columns: 1fr;
  }

  .ibrale-ecossistema-trilhas,
  .slab-home-ecosystem-trails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ibrale-apresentacao-texto,
  .slab-home-steps-text { max-width: 100%; }
}

@media (max-width: 760px) {
  .ibrale-rotas-bloco,
  .slab-home-rotas,
  .ibrale-teste-home,
  .slab-home-feature,
  .ibrale-ecossistema-painel,
  .slab-home-ecosystem,
  .ibrale-apresentacao-home,
  .slab-home-steps {
    width: min(100%, calc(100% - 28px));
  }

  .ibrale-rotas-bloco,
  .slab-home-rotas { margin-bottom: 38px; }

  .ibrale-rotas-bloco h2,
  .slab-home-rotas h2 {
    margin-bottom: 18px;
    font-size: 1.72rem;
  }

  .ibrale-rotas-bloco > p,
  .slab-home-rotas > p {
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .ibrale-rotas-home,
  .slab-home-rotas-grid,
  .ibrale-ecossistema-trilhas,
  .slab-home-ecosystem-trails {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ibrale-rotas-home .ibrale-rota-card,
  .slab-home-rota-card {
    gap: 16px;
    padding: 17px 17px 15px 22px;
  }

  .ibrale-rotas-home .ibrale-rota-card:hover,
  .slab-home-rota-card:hover,
  .ibrale-trilha-card:hover,
  .slab-site-card:hover {
    transform: none;
  }

  .ibrale-teste-home,
  .slab-home-feature {
    gap: 20px;
    margin: 34px auto 44px;
  }

  .ibrale-teste-chamada h2,
  .slab-home-feature-text h2,
  .ibrale-ecossistema-principal h2,
  .slab-home-ecosystem-panel h2,
  .ibrale-apresentacao-texto h2,
  .slab-home-steps-text h2 {
    font-size: 1.58rem;
    line-height: 1.27;
  }

  .ibrale-ecossistema-principal,
  .slab-home-ecosystem-panel,
  .ibrale-apresentacao-visual,
  .slab-home-steps-panel {
    padding: 30px 22px 25px;
    border-radius: 17px;
  }

  .ibrale-trilha-card,
  .slab-site-card {
    padding: 24px 18px 17px;
  }

  .ibrale-apresentacao-passo,
  .slab-home-step {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 5px;
    padding: 17px 0;
  }
}