/* =============================================================================
   SemearIA: /plano/ (D.2). Só classes com o prefixo da página.
   A planta de "A ordem" é uma grade de três colunas (rótulo · nós · respiro) em que
   cada linha com n frentes divide a largura em n partes iguais: os fios SVG entre as
   linhas usam a mesma conta e encostam no meio de cada nó em qualquer largura.
   ============================================================================= */

/* ---------- 01 · o plano (herói sobre o relevo) ---------- */
.plano-numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plano-numeros .numero__rotulo { text-wrap: balance; }
.plano-numeros__barra { display: block; position: relative; height: 3px; max-width: 200px; margin-top: 10px; background: rgba(235, 189, 92, .16); overflow: hidden; }
.plano-numeros__barra i { position: absolute; inset: 0 auto 0 0; background: var(--ouro); }
.plano-heroi__fonte { margin: 14px 0 0; font-size: calc(var(--fs-corpo) * .86); font-style: italic; color: var(--texto-suave); }

/* ---------- 02 · a ordem (a planta) ---------- */
/* seções densas: o respiro vertical de Myths' Valley para slides editoriais (3,4vh em vez de 5vh) */
.plano-ordem .slide__conteudo, .plano-sistemas .slide__conteudo { padding-block: clamp(18px, 3.4vh, 44px); }
.plano-ordem .cabeca { max-width: 900px; margin-bottom: clamp(12px, 2.2vh, 26px); }
.plano-ordem .lead { max-width: none; }
.plano-planta { --rotulo: clamp(70px, 6.6vw, 100px); --vao: clamp(8px, .9vw, 14px); --no-max: clamp(180px, 15.5vw, 248px); }
.plano-planta__linha, .plano-planta__elo { display: grid; grid-template-columns: var(--rotulo) minmax(0, 1fr) var(--rotulo); }
.plano-planta__rotulo { grid-column: 1; grid-row: 1; align-self: center; display: flex; align-items: center; gap: 10px; margin: 0; font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro); }
.plano-planta__rotulo::after { content: ''; flex: 1; min-width: 8px; height: 1px; background: linear-gradient(90deg, var(--ouro-linha), transparent); }
.plano-planta__nos { grid-column: 2; grid-row: 1; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.plano-planta__nos > li { display: flex; justify-content: center; min-width: 0; padding-inline: calc(var(--vao) / 2); }
/* a faixa tem altura fixa; a linha da grade também (senão ela cresce até a proporção 1200:100 do SVG) */
.plano-planta__elo { position: relative; height: clamp(28px, 6.6vh, 72px); grid-template-rows: minmax(0, 1fr); }
.plano-planta__elo--galhos { height: clamp(30px, 7.4vh, 80px); }
.plano-planta__elo--chao { height: clamp(36px, 8.4vh, 90px); }
.plano-planta__elo svg { grid-column: 2; display: block; width: 100%; height: 100%; overflow: visible; }
.plano-planta__fio, .plano-planta__radicela { fill: none; stroke: var(--ouro); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.plano-planta__fio { stroke-opacity: .5; stroke-width: 1.3px; }
.plano-planta__elo--galhos .plano-planta__fio { stroke-opacity: .42; stroke-width: 1.15px; }
.plano-planta__elo--tronco .plano-planta__fio, .plano-planta__elo--chao .plano-planta__fio { stroke-opacity: .62; stroke-width: 1.6px; }
.plano-planta__radicela { stroke-opacity: .34; stroke-width: 1px; }
/* o chão: a linha da terra atravessa a planta entre o tronco e as raízes; abaixo dela, a terra escurece */
.plano-planta__chao { position: absolute; left: 0; right: 0; top: 30%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 147, 58, .55) 14%, rgba(201, 147, 58, .55) 86%, transparent); }
.plano-planta__chao::after {
    content: ''; position: absolute; left: 4%; right: 4%; top: 1px; height: clamp(40px, 9vh, 96px); pointer-events: none;
    background: linear-gradient(180deg, rgba(106, 69, 38, .24), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

/* o nó: título, ponto de estado com feitas/total e a barra exata na borda de baixo */
.plano-no {
    position: relative; width: 100%; max-width: var(--no-max); min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: clamp(7px, 1.2vh, 11px) 10px clamp(9px, 1.5vh, 13px);
    text-align: center; color: var(--texto); cursor: pointer;
    background: linear-gradient(180deg, #183222, #10241a);
    border: 1px solid rgba(235, 189, 92, .26);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    transition: border-color .2s, background .2s;
}
.plano-no:hover { border-color: var(--ouro); background: linear-gradient(180deg, #1f3d2a, #14301f); }
.plano-no:focus-visible { outline-offset: 3px; }
.plano-no__titulo { font: 600 calc(var(--fs-corpo) * .98)/1.15 Cormorant, Georgia, serif; text-wrap: balance; }
.plano-no:hover .plano-no__titulo { color: var(--ouro-claro); }
.plano-no__meta { display: inline-flex; align-items: center; gap: 7px; font: 600 calc(var(--fs-mini) * .9)/1 Cinzel, serif; letter-spacing: .08em; color: var(--texto-suave); font-variant-numeric: lining-nums tabular-nums; }
.plano-no__meta b { color: var(--ouro); font-weight: 600; }
.plano-no__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-suave); }
.plano-no--pronto .plano-no__ponto { background: var(--broto); }
.plano-no--andamento .plano-no__ponto { background: var(--ouro); }
.plano-no__barra { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(235, 189, 92, .12); }
.plano-no__barra i { position: absolute; inset: 0 auto 0 0; background: var(--ouro); }
/* losangos de pixel onde os fios encostam (a assinatura do site) */
.plano-no::before, .plano-no::after { content: ''; position: absolute; left: 50%; z-index: 1; width: 7px; height: 7px; background: var(--ouro); clip-path: var(--losango); translate: -50% 0; }
.plano-no::before { top: -4px; }
.plano-no::after { bottom: -4px; }
.plano-planta__arte > .plano-planta__linha:first-child .plano-no::before,
.plano-planta__arte > .plano-planta__linha:last-child .plano-no::after,
.plano-planta__linha--unica .plano-no::before, .plano-planta__linha--unica .plano-no::after { display: none; }

/* legenda: o aviso do esquema à esquerda, os três estados à direita */
.plano-planta__legenda { flex-wrap: wrap; justify-content: space-between; row-gap: 6px; margin-top: clamp(10px, 1.8vh, 18px); }
.plano-planta__legenda > span:first-child { flex: 1 1 auto; }
.plano-planta__estados { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.plano-planta__estado { display: inline-flex; align-items: center; gap: 7px; }
.plano-planta__estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-suave); }
.plano-planta__estado--pronto::before { background: var(--broto); }
.plano-planta__estado--andamento::before { background: var(--ouro); }

/* a planta cresce do chão para cima quando a seção aparece: os nós surgem das raízes à copa e cada
   faixa de fios se revela a partir do tronco (clip-path; o traço não escala, então nada de dasharray).
   Sem JS ou com movimento reduzido, já vem pronta. */
@keyframes plano-crescer { from { clip-path: inset(100% -8px -8px -8px); } to { clip-path: inset(-8px); } }
@keyframes plano-enraizar { from { clip-path: inset(-8px -8px 100% -8px); } to { clip-path: inset(-8px); } }
.plano-planta.visivel .plano-planta__linha { animation: surgir .55s cubic-bezier(.2, .7, .2, 1) both; }
.plano-planta.visivel .plano-planta__linha--raizes { animation-delay: .05s; }
.plano-planta.visivel .plano-planta__linha--tronco { animation-delay: .2s; }
.plano-planta.visivel .plano-planta__linha--galhos { animation-delay: .6s; }
.plano-planta.visivel .plano-planta__linha--copa { animation-delay: .95s; }
.plano-planta.visivel .plano-planta__elo svg { animation: plano-crescer .6s cubic-bezier(.5, 0, .2, 1) both; }
.plano-planta.visivel .plano-planta__elo--raizes svg { animation-name: plano-enraizar; animation-delay: .3s; }
.plano-planta.visivel .plano-planta__elo--tronco svg { animation-delay: .4s; }
.plano-planta.visivel .plano-planta__elo--galhos svg { animation-delay: .75s; }

/* ---------- 03 · os sistemas (carrossel 2 × 3) e 04 · a IA (grade de 4) ---------- */
.plano-sistemas .cabeca { max-width: none; margin-bottom: clamp(14px, 2.4vh, 28px); }
.plano-sistemas .lead { max-width: none; }
.plano-carrossel .carrossel__pagina { gap: clamp(12px, 1.8vh, 18px) clamp(14px, 1.6vw, 22px); }
.plano-cartao { display: flex; flex-direction: column; gap: clamp(7px, 1.2vh, 11px); min-width: 0; padding: clamp(14px, 2.2vh, 22px) clamp(14px, 1.5vw, 22px); }
.plano-cartao__titulo { margin: 0; }
.plano-cartao__titulo button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.plano-cartao__titulo button > span { min-width: 0; }
.plano-cartao__titulo .icone { width: 24px; height: 24px; transition: transform .2s; }
.plano-cartao__titulo button:hover .icone { transform: translateY(-1px); }
.plano-cartao__resumo { margin: 0; color: var(--texto-suave); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.8em; }
.plano-cartao--ia .plano-cartao__resumo { -webkit-line-clamp: 4; line-clamp: 4; min-height: 5.6em; }
.plano-cartao__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: auto; }
.plano-cartao__estado .progresso { flex: 1 1 120px; min-width: 0; }
.plano-cartao__depende { margin: 0; padding-top: clamp(6px, 1vh, 10px); border-top: 1px solid var(--ouro-linha); font-size: calc(var(--fs-corpo) * .86); line-height: 1.35; color: var(--texto-suave); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(2.7em + clamp(6px, 1vh, 10px)); }

.plano-ia .cabeca { max-width: 900px; }
.plano-ia__grade { gap: clamp(12px, 1.6vw, 22px); }
.plano-ia__metas { margin-top: clamp(14px, 2.6vh, 26px); align-items: center; }

/* ---------- a janela de uma frente ---------- */
.detalhe-modal:has(.plano-modal) { width: min(720px, 92vw); }
.plano-modal > .lead { max-width: none; margin-bottom: 6px; }
.plano-modal > h4 { margin-top: 20px; }
.plano-modal > p:not(.lead) { margin-bottom: 0; }
.plano-modal .lista-losangos { gap: 7px; font-size: calc(var(--fs-corpo) * .98); line-height: 1.45; }
.plano-modal__elos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 28px; }
.plano-modal__elos p { margin: 0; }
.plano-modal .progresso { max-width: 380px; }
.plano-modal .plano-modal__contas { margin: 12px 0 0; font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); }
.plano-modal .plano-modal__arquivada { margin: 10px 0 0; font-style: italic; color: var(--broto); }
.plano-modal__nome { white-space: nowrap; }

/* ---------- 05 · decidido (papel) ---------- */
.plano-decisoes { gap: 0; }
.plano-decisoes > li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(8px, 1.5vh, 14px) 0 clamp(8px, 1.5vh, 14px) 22px; border-bottom: 1px solid var(--ouro-linha); }
.plano-decisoes > li:first-child { border-top: 1px solid var(--ouro-linha); }
.plano-decisoes > li::before { top: 50%; translate: 0 -50%; }
.plano-decisoes .etiqueta { flex: none; }
.plano-decidido__porque { display: grid; gap: clamp(14px, 2.6vh, 26px); }
.plano-decidido__porque .citacao { font-size: calc(var(--fs-lead) * 1.4); line-height: 1.3; }
.plano-decidido__porque .citacao cite { text-wrap: balance; }
.plano-decidido__porque > p { margin: 0; max-width: 46ch; }

/* ---------- 06 · em aberto ---------- */
.plano-aberto__grade { gap: clamp(12px, 1.8vw, 24px); }
.plano-aberto__cartao { padding: clamp(14px, 2.2vh, 22px) clamp(14px, 1.6vw, 22px); }
.plano-aberto__cartao .cartao__topo { align-items: center; margin-bottom: clamp(8px, 1.4vh, 12px); }
.plano-aberto__cartao h3 { margin: 0; }
.plano-aberto__cartao .lista-losangos { gap: 5px; line-height: 1.4; }

/* ---------- 07 · o que não se negocia ---------- */
.plano-principios__lista { row-gap: 0; }
.plano-principios__lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; }
.plano-principios__lista > li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ouro-linha); }
.plano-principios__aviso { margin-top: clamp(16px, 3vh, 30px); align-items: center; }

/* ---------- responsivo ---------- */
@media (max-width: 1120px) {
    .plano-planta { --rotulo: 64px; }
    .plano-planta__linha, .plano-planta__elo { grid-template-columns: var(--rotulo) minmax(0, 1fr); }
    .plano-planta__rotulo { letter-spacing: .1em; }
}
@media (min-width: 801px) and (max-width: 1120px) {
    /* quatro frentes de IA: 2 × 2 em vez de 3 + 1 */
    .plano-ia__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .plano-planta__linha, .plano-planta__elo { grid-template-columns: minmax(0, 1fr); }
    .plano-planta__rotulo { grid-column: 1; justify-content: center; margin-bottom: 10px; }
    .plano-planta__rotulo::before { content: ''; flex: 0 1 48px; height: 1px; background: linear-gradient(270deg, var(--ouro-linha), transparent); }
    .plano-planta__rotulo::after { flex: 0 1 48px; }
    .plano-planta__nos { grid-column: 1; grid-row: 2; grid-template-columns: repeat(var(--n-movel, 1), minmax(0, 1fr)); row-gap: 10px; }
    .plano-planta__nos > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .plano-planta__elo { height: 30px; }
    .plano-planta__elo svg { display: none; }
    .plano-planta__elo::before { content: ''; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(var(--ouro-linha), var(--ouro), var(--ouro-linha)); }
    .plano-planta__elo--chao { height: 40px; }
    .plano-planta__chao { top: 50%; }
    .plano-planta__chao::after { height: 30px; }
    .plano-no::before, .plano-no::after { display: none; }
    .plano-planta__legenda { justify-content: center; text-align: center; }
    .plano-planta__legenda::before { display: none; }
    .plano-planta__legenda > span:first-child { flex-basis: 100%; }
    .plano-principios__lista > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
    /* uma coluna: os cartões de IA não precisam igualar altura com o vizinho */
    .plano-cartao--ia .plano-cartao__resumo { -webkit-line-clamp: unset; line-clamp: none; min-height: 0; overflow: visible; display: block; }
}
@media (max-width: 760px) {
    .plano-cartao { padding: 12px; }
    .plano-cartao__titulo { font-size: calc(var(--fs-h3) * .95); }
    .plano-cartao__titulo .icone { width: 20px; height: 20px; }
    .plano-cartao__estado .progresso { flex-basis: 100%; }
    .plano-decisoes > li { flex-direction: column; align-items: flex-start; gap: 6px; }
    .plano-decisoes > li::before { top: calc(clamp(8px, 1.5vh, 14px) + .55em); translate: none; }
}