/* =============================================================================
   SemearIA: /ia/ (plano D.5). Só classes com o prefixo ia-; o resto (slides,
   cabeça, etiquetas, listas, avisos, linha do tempo) vem dos componentes.
   ============================================================================= */

/* ---------- 1 · entrada: relevo recolorido em mar, índice das quatro frentes ---------- */
.ia-relevo .slide__fundo--relevo::before { background: var(--mar); opacity: .18; }
.ia-indice { justify-self: center; width: min(100%, 540px); }
.ia-indice__lista {
    list-style: none; position: relative;
    padding: 5px clamp(6px, .8vw, 12px);
    background: linear-gradient(150deg, rgba(15, 34, 25, .92), rgba(8, 20, 15, .94));
    border: 1px solid var(--ouro-linha); box-shadow: var(--sombra);
}
.ia-indice__lista::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(235, 189, 92, .1); pointer-events: none; }
.ia-indice__lista > li + li { border-top: 1px solid var(--ouro-linha); }
.ia-indice__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'icone nome etiqueta' 'icone tarefas etiqueta';
    column-gap: clamp(12px, 1.4vw, 18px); row-gap: 2px; align-items: center;
    padding: clamp(11px, 2vh, 18px) clamp(8px, .9vw, 12px); text-decoration: none; transition: background .2s;
}
.ia-indice__icone { grid-area: icone; width: clamp(24px, 2vw, 30px); height: auto; }
.ia-indice__nome { grid-area: nome; font-size: var(--fs-h3); line-height: 1.2; transition: color .2s; }
.ia-indice__tarefas { grid-area: tarefas; font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.ia-indice__tarefas b { color: var(--ouro); font-weight: 600; }
.ia-indice__item .etiqueta { grid-area: etiqueta; }
.ia-indice__item:hover { background: var(--ouro-tenue); }
.ia-indice__item:focus-visible { outline-offset: -2px; }
.ia-indice__item:hover .ia-indice__nome, .ia-indice__item:focus-visible .ia-indice__nome { color: var(--ouro); }

/* ---------- frentes: texto à esquerda, listas e metas à direita ---------- */
/* o destaque em ouro do título não se parte no meio: quebra antes dele */
.ia-pilar .cabeca h2 em { display: inline-block; }
.ia-pilar__lado { display: grid; gap: clamp(14px, 2.4vh, 22px); }
.ia-cartao { padding: clamp(16px, 2.6vh, 26px) clamp(18px, 2vw, 28px); border: 1px solid var(--ouro-linha); background: var(--fundo-cartao); }
.ia-cartao h4 { margin-bottom: clamp(8px, 1.4vh, 12px); }
.ia-lista { gap: clamp(8px, 1.4vh, 12px); }
.ia-metas h4 { margin-bottom: 6px; }
/* linha de estado: o mesmo desenho da home (etiqueta, depois itens separados por losango) */
.ia-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin: clamp(14px, 2.6vh, 24px) 0 0; font-size: calc(var(--fs-corpo) * .92); line-height: 1.3; color: var(--texto-suave); }
.ia-status > .etiqueta { margin-right: -12px; }
.ia-status__item { position: relative; }
.ia-status__item + .ia-status__item::before { content: ''; position: absolute; left: -16px; top: 50%; width: 5px; height: 5px; margin-top: -2px; background: var(--ouro); clip-path: var(--losango); opacity: .8; }
.ia-status b { color: var(--ouro); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- simulação: composição centrada, o método em duas colunas com fios ---------- */
.ia-simulacao__intro { max-width: 74ch; margin: 0 auto; text-align: center; text-wrap: pretty; }
.ia-simulacao__lista { max-width: 1000px; margin: clamp(18px, 3.4vh, 32px) auto 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3.4vw, 56px); }
.ia-simulacao__lista li { padding: clamp(10px, 1.8vh, 15px) 0 clamp(10px, 1.8vh, 15px) 22px; border-top: 1px solid var(--ouro-linha); }
.ia-simulacao__lista li::before { top: calc(clamp(10px, 1.8vh, 15px) + .62em); }
.ia-simulacao__lista li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--ouro-linha); }
.ia-simulacao .ia-status { justify-content: center; }

/* ---------- território: os cinco passos, do lugar real ao vale ---------- */
.ia-territorio__topo { align-items: end; margin-bottom: clamp(18px, 3.6vh, 36px); }
.ia-territorio__topo .cabeca { margin-bottom: 0; }
.ia-territorio__intro { margin: 0; font-size: var(--fs-lead); line-height: 1.45; }
.ia-passo p { margin: 0; text-wrap: pretty; }
.ia-passo__icone { display: block; margin-bottom: 8px; }
.ia-territorio__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; margin-top: clamp(18px, 3.6vh, 36px); padding-top: clamp(12px, 2vh, 18px); border-top: 1px solid var(--ouro-linha); }
.ia-territorio__base p { margin: 0; }
.ia-territorio__base .ia-status { margin: 0; }

@media (min-width: 761px) {
    .ia-passos { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(16px, 2.2vw, 34px); padding-top: 26px; }
    .ia-passos::before { left: 0; right: 0; top: 3px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--ouro), var(--ouro-linha)); }
    .ia-passos > li { padding-left: 0; }
    .ia-passos > li::before { left: 0; top: -26px; }
}
@media (max-width: 760px) {
    .ia-passo { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
    .ia-passo__icone { width: 24px; height: 24px; margin: 0; }
    .ia-simulacao__lista { grid-template-columns: minmax(0, 1fr); }
    .ia-simulacao__lista li:nth-last-child(2) { border-bottom: 0; }
    .ia-simulacao__intro { text-align: left; }
    .ia-simulacao .cabeca { text-align: left; }
    .ia-simulacao .cabeca .olho { justify-content: flex-start; }
    .ia-simulacao .ia-status { justify-content: flex-start; }
}

/* ---------- aprendizagem: na tela larga as ações ficam sob o texto, ao lado da lista ---------- */
@media (min-width: 801px) {
    .ia-aprendizagem__grade { grid-template-areas: 'texto lado' 'acoes lado'; row-gap: 0; }
    .ia-aprendizagem__grade > .ia-pilar__texto { grid-area: texto; align-self: end; }
    .ia-aprendizagem__grade > .ia-pilar__lado { grid-area: lado; }
    .ia-aprendizagem__grade > .acoes { grid-area: acoes; align-self: start; }
}
@media (max-width: 800px) {
    .ia-aprendizagem__grade > .acoes { margin-top: 0; }
}