/* ==========================================================================
   MVP Lab (/mvp-lab/) · componentes C-94 a C-97
   Usa os tokens de base.css e as classes de secoes.css e componentes-ia.css
   (.ia-hero, .classe-topo, .selo, .altf, .faixa, .parecer, .quando-col, .raios).
   Estado sem JavaScript = estado final de cada cena. O JS da página (mvp-lab.js)
   liga as classes de animação só no desktop, com movimento e sem pausa.
   Cores com significado: azul para o que é construído e para o CTA, verde-azulado
   para o teste e a meta, âmbar para a decisão, aço para rascunho e sistemas,
   areia para as pessoas que usam, vermelho para o sinal que não veio.
   ========================================================================== */

/* Ícones próprios (inseridos pelo JS da página em [data-icm]) */
[data-icm] .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cabeçalho das seções ---------- */
.mvp-topo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-bottom: 44px; }
.mvp-topo-txt { color: var(--txt-2); font-size: 1.04rem; line-height: 1.65; max-width: 58ch; }
@media (max-width: 1023px) { .mvp-topo { grid-template-columns: 1fr; margin-bottom: 30px; } }

/* ---------- MVP-01 · H1 ---------- */
.mvp-h1 { max-width: 17ch; font-size: clamp(2.3rem, 1.15rem + 2.9vw, 3.9rem); }
.mvp-h1-marca { color: var(--azul-claro); }

/* ==========================================================================
   C-94 · Da ideia ao protótipo (MVP-01)
   ========================================================================== */
.ideia {
  position: relative; margin: 64px 0 0;
  border: 1px solid var(--linha-2); border-radius: 18px; padding: 20px 24px 16px;
  background:
    linear-gradient(rgba(232, 80, 2, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(232, 80, 2, .05) 1px, transparent 1px) 0 0 / 24px 24px,
    #070b10;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9);
}
.ideia-palco {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas: "quadro lista" "regua lista"; column-gap: 40px; row-gap: 22px; padding: 18px 0 6px;
}

/* Quadro: os estados empilhados no mesmo lugar */
.ideia-quadro {
  grid-area: quadro; position: relative; display: grid; min-height: 360px; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(142, 153, 171, .35); background: rgba(10, 12, 16, .92);
}
.ideia-est {
  grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 26px 26px 30px;
  opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none;
  transition: opacity calc(.55s * var(--motion)) var(--ease-out), transform calc(.55s * var(--motion)) var(--ease-out);
}
.ideia[data-atual="ideia"] .ideia-est--ideia,
.ideia[data-atual="recorte"] .ideia-est--recorte,
.ideia[data-atual="construcao"] .ideia-est--construcao,
.ideia[data-atual="uso"] .ideia-est--uso,
.ideia[data-atual="decisao"] .ideia-est--uso { opacity: 1; transform: none; }
.ideia[data-atual="decisao"] .ideia-est--uso { transform: translateY(-34px) scale(.95); }

/* Estado 1 · o bilhete da ideia */
.ideia-bilhete {
  width: min(300px, 80%); padding: 20px 22px 24px; border-radius: 4px; transform: rotate(-2.5deg);
  background: var(--papel); color: var(--papel-txt); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .9);
}
.ideia-bilhete p { font: italic 500 1.12rem/1.45 var(--f-txt); letter-spacing: -.01em; margin-top: 10px; }
.ideia-bilhete-tag { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: #4a5260; }

/* Estado 2 · o rascunho em traço, com a hipótese e a meta */
.ideia-rascunho {
  position: relative; width: 190px; height: 240px; flex: none; border-radius: 16px;
  border: 1.5px dashed rgba(142, 153, 171, .7); display: grid; align-content: start; gap: 12px; padding: 18px 16px;
}
.ideia-rascunho > span { display: block; border: 1.5px dashed rgba(142, 153, 171, .6); border-radius: 6px; }
.r-barra { height: 16px; }
.r-linha { height: 10px; }
.r-linha--a { width: 80%; }
.r-linha--b { width: 55%; }
.r-chips { border: 0 !important; display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.r-chips i { height: 22px; border: 1.5px dashed rgba(142, 153, 171, .6); border-radius: 6px; }
.r-botao { height: 30px; margin-top: 10px; border-color: rgba(255, 122, 51, .55) !important; }
.ideia-notas { list-style: none; display: grid; gap: 14px; max-width: 230px; }
.ideia-notas li { display: grid; gap: 4px; padding: 10px 12px; border-radius: 8px; border-left: 2px solid rgba(142, 153, 171, .6); background: rgba(236, 238, 241, .03); font-size: .86rem; line-height: 1.4; }
.ideia-notas li:last-child { border-left-color: var(--teal); }
.ideia-notas .mono { font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }

/* Estado 3 · a tela que funciona */
.ideia-tela {
  width: 236px; flex: none; display: grid; gap: 10px; padding: 16px 14px; border-radius: 18px;
  border: 1px solid rgba(142, 153, 171, .5); background: var(--ink-2);
  box-shadow: 0 30px 60px -36px rgba(232, 80, 2, .55);
}
.t-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linha-2); }
.t-cab b { font-size: .92rem; }
.t-cab .mono, .t-campo .mono { font-size: .5rem; color: var(--txt-3); letter-spacing: .06em; }
.t-campo { display: grid; gap: 3px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--linha-2); }
.t-campo b { font-size: .82rem; font-weight: 600; }
.t-horas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.t-horas span { text-align: center; padding: 6px 0; border-radius: 6px; font: 500 .62rem var(--f-mono); border: 1px solid var(--linha-2); color: var(--txt-2); }
.t-horas .t-ocupado { text-decoration: line-through; color: var(--txt-3); opacity: .6; }
.t-horas .t-escolhido { background: rgba(232, 80, 2, .2); border-color: var(--azul); color: var(--txt); }
.t-botao { text-align: center; padding: 9px 0; border-radius: 8px; background: var(--azul); color: var(--azul-ink); font-size: .78rem; font-weight: 600; }
.ideia-demos { list-style: none; display: grid; gap: 18px; }
.ideia-demos li { display: flex; align-items: center; gap: 10px; font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-claro); }
.ideia-demos li::before { content: ""; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--azul); box-shadow: 0 0 10px rgba(232, 80, 2, .6); }

/* Estado 4 · o painel de uso, contra a linha da meta */
.ideia-painel { width: min(360px, 92%); display: grid; gap: 14px; padding: 18px 18px 16px; border-radius: 14px; border: 1px solid rgba(142, 153, 171, .45); background: var(--ink-2); }
.p-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.p-cab b { font-size: .92rem; }
.p-cab .mono { font-size: .5rem; color: var(--txt-3); }
.p-metrica { display: grid; gap: 8px; }
.p-rot, .p-linha .mono { font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }
.p-barra { position: relative; height: 12px; border-radius: 6px; background: rgba(236, 238, 241, .06); }
.p-cheio { position: absolute; left: 0; top: 0; bottom: 0; width: 78%; border-radius: 6px; background: linear-gradient(90deg, rgba(232, 220, 194, .55), var(--areia)); }
.p-meta { position: absolute; top: -7px; bottom: -7px; left: 62%; border-left: 2px dashed var(--teal); }
.p-meta b { position: absolute; top: -16px; left: -12px; font-size: .48rem; color: var(--teal); letter-spacing: .08em; text-transform: uppercase; }
.p-estado { font-size: .56rem; color: var(--teal); letter-spacing: .06em; text-transform: uppercase; }
.p-linha { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: .82rem; color: var(--txt-2); }

/* Decisão: o portão âmbar e as três saídas, embaixo do painel */
.ideia-decisao {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(10px); transition: opacity calc(.5s * var(--motion)) var(--ease-out), transform calc(.5s * var(--motion)) var(--ease-out);
}
.ideia.decidido .ideia-decisao, .ideia.no-portao .ideia-decisao { opacity: 1; transform: none; }
.ideia-portao {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px;
  border: 1.5px solid var(--ambar); background: rgba(255, 181, 71, .1);
  font: 500 .56rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ambar);
}
.ideia-cad { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ambar); color: var(--ambar-ink); }
.ideia-cad .ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.ideia.no-portao:not(.decidido) .ideia-portao { animation: mvp-espera calc(1.1s * var(--motion)) ease-in-out infinite; }
@keyframes mvp-espera { 50% { box-shadow: 0 0 0 6px rgba(255, 181, 71, .14); } }
.ideia-saida {
  padding: 7px 12px; border-radius: 999px; font-size: .74rem; color: var(--txt-2); border: 1px dashed var(--linha-3);
  opacity: 0; transition: opacity calc(.4s * var(--motion)) var(--ease-out);
}
.ideia.decidido .ideia-saida { opacity: 1; }
.ideia.decidido .ideia-saida--ajustar { transition-delay: calc(120ms * var(--motion)); }
.ideia.decidido .ideia-saida--parar { transition-delay: calc(240ms * var(--motion)); opacity: .55; }
.ideia-saida--seguir { border: 1px solid var(--azul); color: var(--txt); background: rgba(232, 80, 2, .12); }

/* Lista dos estados (o conteúdo de verdade da cena) */
.ideia-lista { grid-area: lista; list-style: none; display: grid; align-content: center; gap: 4px; counter-reset: est; }
.ideia-lista li {
  position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; row-gap: 2px;
  padding: 12px 12px 12px 18px; border-radius: 10px; outline-offset: 2px; cursor: default;
  border-left: 2px solid var(--linha-2);
  transition: background-color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), opacity calc(var(--dur-base) * var(--motion));
}
.ideia-quando { grid-row: 1 / span 2; font-size: .54rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); padding-top: 3px; }
.ideia-lista b { font-size: .98rem; }
.ideia-lista li > span:last-child { color: var(--txt-2); font-size: .86rem; line-height: 1.45; }
.ideia--anima .ideia-lista li { opacity: .38; }
.ideia--anima .ideia-lista li.feito { opacity: 1; }
.ideia-lista li.atual { border-left-color: var(--azul); background: rgba(232, 80, 2, .07); }
.ideia-lista li[data-est="decisao"].atual { border-left-color: var(--ambar); background: rgba(255, 181, 71, .06); }
.ideia-lista li.ativo { opacity: 1 !important; background: rgba(236, 238, 241, .05); }

/* Régua das seis semanas */
.ideia-regua { grid-area: regua; position: relative; display: grid; gap: 8px; padding-right: 124px; --pos: 1; }
.ideia-trilho { position: relative; height: 4px; border-radius: 2px; background: var(--linha-2); }
.ideia-cheio { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--pos) * 100%); border-radius: 2px; background: linear-gradient(90deg, var(--aco), var(--azul)); }
.ideia-marcador {
  position: absolute; top: 50%; left: calc(var(--pos) * 100%); width: 14px; height: 14px; border-radius: 3px;
  transform: translate(-50%, -50%) rotate(45deg); background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, .5);
}
.ideia-semanas { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); }
.ideia-semanas li { font: 500 .52rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); padding-left: 6px; border-left: 1px solid var(--linha-2); transition: color calc(var(--dur-base) * var(--motion)); }
.ideia-semanas li.passou { color: var(--txt-2); }
.ideia-total { position: absolute; right: 0; top: -6px; font-size: .58rem; letter-spacing: .06em; color: var(--azul-claro); white-space: nowrap; }

@media (max-width: 1279px) and (min-width: 1024px) {
  .ideia-palco { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); column-gap: 28px; }
  .ideia-lista li { grid-template-columns: 1fr; }
  .ideia-quando { grid-row: auto; }
}
@media (max-width: 1023px) {
  .ideia { padding: 18px 16px 14px; }
  .ideia-palco { grid-template-columns: 1fr; grid-template-areas: "lista"; }
  .ideia-quadro, .ideia-regua { display: none; }
  .ideia-lista li { grid-template-columns: 1fr; opacity: 1 !important; }
  .ideia-quando { grid-row: auto; }
}

/* ---------- MVP-02 · rótulo da faixa do MVP ---------- */
.mvp-altf-tag { display: block; margin-top: 8px; font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-claro); font-weight: 500; }

/* ==========================================================================
   C-95 · Calendário do ciclo (MVP-03)
   ========================================================================== */
.cal {
  margin: 0 0 64px; padding: 22px 26px 18px; border-radius: 18px;
  border: 1px solid var(--linha-2); background: #070b10;
}
.cal-cab, .cal-trilha { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.cal-cab { position: relative; padding: 0 0 12px; border-bottom: 1px solid var(--linha); }
.cal-canto { font-size: .52rem; color: var(--txt-3); text-align: right; letter-spacing: .08em; text-transform: uppercase; }
.cal-fim { position: absolute; right: 0; top: -20px; font-size: .52rem; color: var(--azul-claro); letter-spacing: .08em; text-transform: uppercase; }
.cal-semanas { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); }
.cal-semanas li { font: 500 .56rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); padding-left: 8px; border-left: 1px solid var(--linha-2); }
.cal-trilhas { list-style: none; display: grid; gap: 6px; padding-top: 12px; }
.cal-trilha { min-height: 48px; border-radius: 10px; outline-offset: 2px; transition: opacity calc(var(--dur-base) * var(--motion)) var(--ease-state), background-color calc(var(--dur-micro) * var(--motion)); }
.cal-trilha[data-cal-trilha="construcao"] { min-height: 64px; align-items: end; padding-bottom: 6px; }
.cal-nome { font-size: .88rem; color: var(--txt-2); text-align: right; transition: color calc(var(--dur-micro) * var(--motion)); }
.cal-pista {
  position: relative; height: 36px;
  background: linear-gradient(90deg, var(--linha) 1px, transparent 1px) 0 0 / calc(100% / 6) 100%;
}
.cal-barra {
  position: absolute; top: 4px; bottom: 4px; left: calc(var(--de) / 6 * 100%); width: calc((var(--ate) - var(--de)) / 6 * 100%);
  display: flex; align-items: center; padding: 0 12px; overflow: hidden; border-radius: 8px; transform-origin: left center;
  transition: box-shadow calc(var(--dur-micro) * var(--motion)), filter calc(var(--dur-micro) * var(--motion));
}
.cal-barra--aco { background: rgba(142, 153, 171, .16); border: 1px solid rgba(142, 153, 171, .55); }
.cal-barra--teal { background: rgba(23, 191, 176, .14); border: 1px solid rgba(23, 191, 176, .6); }
.cal-barra--azul { background: rgba(232, 80, 2, .17); border: 1px solid rgba(232, 80, 2, .65); }
.cal-barra--areia { background: rgba(232, 220, 194, .1); border: 1px solid rgba(232, 220, 194, .5); }
.cal-txt { font-size: .74rem; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* o centro do cadeado fica na data do portão; o rótulo segue à direita */
.cal-portao { position: absolute; z-index: 2; top: 50%; left: calc(var(--em) / 6 * 100%); transform: translate(-14px, -50%); display: flex; align-items: center; gap: 10px; }
.cal-cad { position: relative; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ambar); background: var(--ink); color: var(--ambar); transition: background-color calc(var(--dur-base) * var(--motion)), color calc(var(--dur-base) * var(--motion)); }
.cal-cad .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cal-portao b { font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); white-space: nowrap; }
.cal-portao.aberto .cal-cad { background: var(--ambar); color: var(--ambar-ink); box-shadow: 0 0 14px rgba(255, 181, 71, .45); }
.cal-portao.espera .cal-cad { animation: mvp-espera calc(1.1s * var(--motion)) ease-in-out infinite; }
.cal-demo { position: absolute; z-index: 2; top: -16px; left: calc(var(--em) / 6 * 100%); transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; }
.cal-demo::after { content: ""; width: 10px; height: 10px; border-radius: 2px; transform: rotate(45deg); background: var(--azul); box-shadow: 0 0 10px rgba(232, 80, 2, .55); }
.cal-demo b { font-size: .46rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-claro); }
.cal-demo.pisca::after { animation: mvp-pisca calc(.7s * var(--motion)) ease-out; }
@keyframes mvp-pisca { 40% { transform: rotate(45deg) scale(1.7); box-shadow: 0 0 20px rgba(255, 122, 51, .95); } }
.cal-bandeira { position: absolute; top: 4px; bottom: 4px; left: calc(var(--em) / 6 * 100%); transform: translateX(-100%); display: flex; align-items: center; padding: 0 12px; border-radius: 8px 0 0 8px; border: 1px solid var(--ambar); border-right: 3px solid var(--ambar); background: rgba(255, 181, 71, .1); }
.cal-bandeira b { font-size: .52rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); white-space: nowrap; }
.cal-nota { margin-top: 14px; font-size: .56rem; letter-spacing: .04em; color: var(--txt-3); text-align: right; }
/* estado inicial da animação */
.cal--anima .cal-barra { transform: scaleX(0); }
.cal--anima .cal-barra .cal-txt { opacity: 0; transition: opacity calc(.3s * var(--motion)); }
.cal--anima .cal-barra.desenhada .cal-txt { opacity: 1; }
.cal--anima .cal-portao, .cal--anima .cal-demo, .cal--anima .cal-bandeira { opacity: 0; transition: opacity calc(.3s * var(--motion)); }
.cal--anima .cal-portao.visivel, .cal--anima .cal-demo.visivel, .cal--anima .cal-bandeira.visivel { opacity: 1; }
/* pares com as faixas */
.cal.com-foco .cal-trilha:not(.par) { opacity: .35; }
.cal-trilha.par, .cal-trilha.ativo { background: rgba(236, 238, 241, .03); }
.cal-trilha.par .cal-nome, .cal-trilha.ativo .cal-nome { color: var(--txt); }
.cal-trilha.par .cal-barra, .cal-trilha.ativo .cal-barra { box-shadow: 0 0 0 1px rgba(236, 238, 241, .25), 0 10px 26px -14px rgba(232, 80, 2, .8); }
.mvp-faixas.com-foco .faixa:not(.par):not(.ativo) { opacity: .4; }
.mvp-faixas .faixa.par { opacity: 1 !important; }
.mvp-faixas .faixa.par .faixa-nome { color: var(--azul-claro); }
@media (max-width: 1023px) {
  .cal { padding: 18px 16px; margin-bottom: 44px; }
  .cal-cab, .cal-nota { display: none; }
  .cal-trilha, .cal-trilha[data-cal-trilha="construcao"] { grid-template-columns: 1fr; row-gap: 6px; padding: 10px 0; min-height: 0; align-items: start; border-bottom: 1px solid var(--linha); }
  .cal-trilha::before { content: attr(data-semanas); font: 500 .54rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); }
  .cal-nome { text-align: left; color: var(--txt); font-weight: 600; }
  .cal-pista { height: auto; background: none; }
  .cal-barra { position: static; display: block; width: auto; padding: 8px 10px; transform: none !important; }
  .cal-txt { white-space: normal; opacity: 1 !important; }
  .cal-portao, .cal-demo { display: none; }
  .cal-bandeira { position: static; transform: none; opacity: 1 !important; border-radius: 8px; padding: 8px 10px; }
}

/* ---------- MVP-03 · linha de condições ---------- */
.mvp-condicoes { margin-top: 30px; color: var(--txt-2); font-size: .92rem; }

/* ==========================================================================
   C-96 · Portão de demanda (MVP-04)
   ========================================================================== */
.mvp-dem { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.mvp-dem-txt > p { color: var(--txt-2); line-height: 1.65; margin-top: 18px; max-width: 56ch; }
.mvp-testes { list-style: none; display: grid; gap: 8px; margin-top: 24px; }
.mvp-testes li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linha); line-height: 1.5; outline-offset: 2px;
  transition: border-color calc(var(--dur-micro) * var(--motion)), background-color calc(var(--dur-micro) * var(--motion));
}
.mvp-testes li b { color: var(--txt); }
.mvp-testes li span:last-child { color: var(--txt-2); }
.mvp-testes-cor { width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); }
[data-fonte="entrevistas"] { --fc: var(--aco); }
[data-fonte="espera"] { --fc: var(--azul); }
[data-fonte="prototipo"] { --fc: var(--teal); }
.mvp-testes-cor { background: var(--fc); }
.mvp-testes li.ativo, .mvp-testes li.par { border-color: var(--fc); background: rgba(236, 238, 241, .03); }
.mvp-dem-fecho { font-weight: 500; color: var(--txt) !important; }

.portao { position: relative; margin: 0; padding: 20px 22px 16px; border-radius: 18px; border: 1px solid var(--linha-2); background: #070b10; }
.portao-palco { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr); grid-template-areas: "hip hip hip" "fontes medidor porta"; gap: 22px 26px; align-items: center; padding: 8px 0; }
.portao-hip { grid-area: hip; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; padding: 16px 18px; border-radius: 12px; background: var(--papel); color: var(--papel-txt); }
.portao-rot { font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; color: #4a5260; padding-top: 4px; }
.portao-frase { font-size: .88rem; line-height: 1.45; }
.portao-fontes { grid-area: fontes; list-style: none; display: grid; gap: 10px; justify-items: end; }
.pf {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--linha-2); font-size: .8rem; color: var(--txt-2);
  transition: border-color calc(var(--dur-base) * var(--motion)), color calc(var(--dur-base) * var(--motion)), opacity calc(var(--dur-base) * var(--motion));
}
.pf i { width: 10px; height: 10px; border-radius: 50%; background: var(--fc); }
.pf.acesa, .pf.par { border-color: var(--fc); color: var(--txt); }
.portao--anima .pf:not(.acesa) { opacity: .4; }
.portao-medidor {
  grid-area: medidor; position: relative; height: 230px; border-radius: 12px;
  border: 1px solid rgba(142, 153, 171, .45); background: rgba(236, 238, 241, .02); overflow: hidden;
}
.pm-meta { position: absolute; left: 0; right: 0; bottom: 74px; border-top: 2px dashed var(--teal); z-index: 2; }
.pm-meta b { position: absolute; right: 6px; top: -16px; font-size: .48rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.pm-pilha { position: absolute; left: 10px; right: 10px; bottom: 8px; top: 8px; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 5px; }
.pm-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--fc); transition: transform calc(.35s * var(--motion)) var(--ease-out), opacity calc(.35s * var(--motion)), box-shadow calc(var(--dur-micro) * var(--motion)); }
.pm-ponto.cai { transform: translateY(-26px); opacity: 0; }
.portao.com-foco .pm-ponto:not(.par) { opacity: .25; }
.pm-ponto.par { box-shadow: 0 0 0 3px rgba(236, 238, 241, .14); }
.portao-porta { grid-area: porta; display: grid; justify-items: start; gap: 10px; }
.portao-trava { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--ambar); color: var(--ambar); background: var(--ink); transition: background-color calc(var(--dur-base) * var(--motion)), color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)); }
.portao-trava .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.portao-decide { font: 500 .58rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ambar); }
.portao-estado { font-size: .66rem; letter-spacing: .04em; color: var(--azul-claro); min-height: 1.4em; }
.portao.espera .portao-trava { animation: mvp-espera calc(1.1s * var(--motion)) ease-in-out infinite; }
.portao.liberado .portao-trava { background: var(--ambar); color: var(--ambar-ink); box-shadow: 0 0 22px rgba(255, 181, 71, .45); }
.portao.fechado .portao-trava { border-color: var(--sinal); color: var(--sinal); }
.portao.fechado .portao-estado { color: var(--sinal); }
.portao--anima:not(.liberado):not(.fechado) .portao-estado { opacity: 0; }
.portao-alt[aria-pressed="true"] { color: var(--txt); border-color: var(--linha-3); }
@media (max-width: 1279px) and (min-width: 1024px) {
  .mvp-dem { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 1023px) {
  .mvp-dem { grid-template-columns: 1fr; gap: 30px; }
  .portao { padding: 18px 16px 14px; }
  .portao-palco { grid-template-columns: 90px minmax(0, 1fr); grid-template-areas: "hip hip" "medidor porta" "fontes fontes"; gap: 18px; }
  .portao-hip { grid-template-columns: 1fr; gap: 4px; }
  .portao-fontes { justify-items: start; grid-template-columns: 1fr; }
  .portao-medidor { height: 190px; }
}

/* ==========================================================================
   C-97 · O recorte (MVP-05)
   ========================================================================== */
.recorte { position: relative; margin: 0; padding: 20px 24px 16px; border-radius: 18px; border: 1px solid var(--linha-2); background: #070b10; }
.recorte-palco { display: grid; gap: 0; padding: 6px 0 4px; }
.recorte-ideia { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 26px; align-items: start; padding: 4px 0 22px; border-bottom: 1px dashed var(--linha-2); }
.recorte-rot { font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); text-align: right; padding-top: 10px; }
.recorte-nuvem { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; }
.recorte-faixa { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 26px; align-items: start; padding: 22px 0; }
.recorte-faixa + .recorte-faixa { border-top: 1px solid var(--linha-2); }
.recorte-nome { display: grid; gap: 6px; text-align: right; padding-top: 6px; }
.recorte-nome b { font-size: 1.05rem; letter-spacing: -.02em; }
.recorte-regra { font-size: .5rem; letter-spacing: .06em; line-height: 1.5; color: var(--txt-3); text-transform: uppercase; transition: color calc(var(--dur-base) * var(--motion)); }
.recorte-faixa--dentro .recorte-nome b { color: var(--azul-claro); }
.recorte-faixa--dentro.ativo .recorte-regra { color: var(--azul-claro); }
.recorte-pilulas { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.rp, .rp-clone {
  position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px;
  font-size: .82rem; white-space: nowrap; outline-offset: 2px;
  transition: background-color calc(var(--dur-base) * var(--motion)), border-color calc(var(--dur-base) * var(--motion)), color calc(var(--dur-base) * var(--motion)), opacity calc(var(--dur-base) * var(--motion));
}
.rp-clone { border: 1px solid var(--linha-3); background: rgba(236, 238, 241, .05); color: var(--txt); z-index: 3; will-change: transform; }
.rp--dentro { border: 1px solid var(--azul); background: rgba(232, 80, 2, .16); color: var(--txt); }
.rp--depois { border: 1px solid rgba(142, 153, 171, .45); color: var(--txt-3); }
.rp--depois::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1px; background: rgba(142, 153, 171, .7); transform-origin: left center; transition: transform calc(.4s * var(--motion)) var(--ease-out); }
.rp[data-motivo]::after {
  content: attr(data-motivo); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px);
  white-space: nowrap; font: 500 .74rem/1 var(--f-txt); color: var(--txt); background: var(--ink-3);
  border: 1px solid var(--linha-3); border-radius: 8px; padding: 7px 10px; opacity: 0; pointer-events: none; z-index: 4;
  transition: opacity calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.rp:hover::after, .rp:focus-visible::after, .rp.motivo::after { opacity: 1; transform: translate(-50%, 0); }
.recorte--anima .recorte-faixa .rp { visibility: hidden; }
.recorte--anima .recorte-faixa .rp.chegou { visibility: visible; }
.recorte--anima .rp--depois:not(.riscada)::before { transform: scaleX(0); }
.recorte-leitura { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(transparent, rgba(255, 122, 51, .9), transparent); pointer-events: none; z-index: 2; opacity: 0; }
.mvp-rec-linha { margin-top: 22px; color: var(--txt-2); font-size: .94rem; max-width: 76ch; }
@media (max-width: 1023px) {
  .recorte { padding: 18px 16px 14px; }
  .recorte-ideia { display: none; }
  .recorte-faixa { grid-template-columns: 1fr; row-gap: 12px; padding: 16px 0; }
  .recorte-nome { text-align: left; }
  .rp { height: auto; min-height: 36px; padding: 8px 14px; white-space: normal; }
  .rp--depois { flex-direction: column; align-items: flex-start; border-radius: 12px; }
  .rp--depois::before { top: 19px; right: auto; width: calc(100% - 28px); }
  .rp[data-motivo]::after { display: none; }
  .rp--depois .sr { position: static; width: auto; height: auto; margin: 4px 0 0; clip: auto; clip-path: none; overflow: visible; white-space: normal; font-size: .72rem; color: var(--txt-3); }
}

/* ---------- MVP-06 · As regras ---------- */
.mvp-regras { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.mvp-regras li {
  display: grid; align-content: start; gap: 10px; padding: 20px 18px 22px; border-radius: 14px; outline-offset: 2px;
  border: 1px solid var(--linha-2); background: rgba(236, 238, 241, .02);
  transition: border-color calc(var(--dur-micro) * var(--motion)), transform calc(var(--dur-base) * var(--motion)) var(--ease-out);
}
.mvp-regras h3 { font-size: 1.02rem; line-height: 1.25; letter-spacing: -.015em; }
.mvp-regras p { color: var(--txt-2); font-size: .88rem; line-height: 1.55; }
.mvp-reg-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid rgba(142, 153, 171, .5); color: var(--aco); transition: color calc(var(--dur-micro) * var(--motion)), border-color calc(var(--dur-micro) * var(--motion)); }
.mvp-reg-ic .ic path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset calc(.7s * var(--motion)) var(--ease-out); }
.mvp-regras--anima li:not(.entrou) .mvp-reg-ic .ic path { stroke-dashoffset: 1; }
.mvp-regras--anima li:not(.entrou) { opacity: 0; transform: translateY(14px); }
.mvp-regras li.ativo { border-color: rgba(232, 80, 2, .55); transform: translateY(-2px); }
.mvp-regras li.ativo .mvp-reg-ic { color: var(--azul-claro); border-color: rgba(232, 80, 2, .6); }
.mvp-reg-tec { margin-top: 26px; color: var(--txt-2); font-size: .94rem; max-width: 80ch; }
@media (max-width: 1279px) { .mvp-regras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .mvp-regras { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- MVP-08 · caminho para a página certa ---------- */
.mvp-caminho { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: var(--azul-claro); text-decoration: none; white-space: nowrap; }
.mvp-caminho::after { content: "→"; transition: transform calc(var(--dur-micro) * var(--motion)) var(--ease-out); }
.mvp-caminho:hover::after, .quando-col li.ativo .mvp-caminho::after { transform: translateX(3px); }

/* MVP-03 · rótulos dos grupos de pílulas e "fica para depois" legível (a pílula diz o que espera, com motivo no balão) */
.mvp-faixas .faixa-rot { margin: 0; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.mvp-faixas .faixa-grupo + .faixa-rot { margin-top: 6px; }
.mvp-faixas .faixa-grupo .altf-pil--fora { opacity: 1; color: var(--txt-2); border: 1px dashed rgba(236, 238, 241, .3); text-decoration-color: rgba(236, 238, 241, .6); }
.mvp-faixas .faixa-grupo .altf-pil--fora:hover, .mvp-faixas .faixa-grupo .altf-pil--fora:focus-visible { color: var(--txt); border-color: rgba(236, 238, 241, .55); }