/* o bloco do protótipo (só nestas cópias): o que decidir, no fim da página */
  .proto-decisoes { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; }
  .proto-titulo { margin: 0; color: var(--ds-cor-texto); font-size: 22px; line-height: 28px; font-weight: 600; }
  .proto-texto { margin: 12px 0 0; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; }
  .proto-texto .link-texto { color: var(--ds-cor-texto); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
  .proto-lista { margin: 16px 0 0; padding-left: 20px; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; }
  .proto-lista li + li { margin-top: 10px; }
  /* outros recortes da mesma Itabira: a espera do vídeo e o fecho não repetem a foto da primeira tela */
  .pv-palco .tela-video img { transform: scale(1.7); transform-origin: 68% 38%; }
  .pg-fecho.sobre-capa .fecho-capa img { transform: scale(1.45); transform-origin: 82% 78%; }
  /* no celular, a atribuição do satélite sai de baixo dos botões da primeira tela, com o halo escuro da casa */
  @media (max-width: 760px) { .pla-palco .atribuicao { top: calc(var(--lp-topo) + 66px); bottom: auto; text-shadow: 0 0 8px var(--ds-cor-fundo), 0 0 4px var(--ds-cor-fundo), 0 0 2px var(--ds-cor-fundo), 0 0 1px var(--ds-cor-fundo); } }
  @media (max-width: 1100px) { .pla-palco ~ .rol-textos .rol-abertura { width: auto; justify-content: flex-start; padding-top: 58vh; } }
  @supports (animation-timeline: view()) { @media (max-width: 1100px) and (prefers-reduced-motion: no-preference) { .pla-palco ~ .rol-textos .rol-abertura > * { animation: rol-sai linear both; animation-timeline: view(); animation-range: cover 46% cover 58%; } } }
  @media (prefers-reduced-motion: reduce) { .pla-palco[data-trocando] > .rol-mapa { opacity: 1; } }
  .pla-escondido { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  /* ---------- os planos: uma coluna de abertura e quatro planos, alinhados linha a linha (subgrid), separados por fio ---------- */
  .pla-sec { padding-top: 112px; scroll-margin-top: var(--lp-topo); }
  .pla-grade { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(11, auto); max-width: 1320px; margin: 0 auto; }
  .pla-trilho { display: contents; }
  .pla-intro { grid-row: 1 / span 11; padding-right: 32px; }
  .pla-titulo { margin: 0; color: var(--ds-cor-texto); font: 300 clamp(34px, 3.3vw, 48px)/1.06 var(--lp-fonte-titulo); letter-spacing: -0.024em; font-optical-sizing: auto; text-wrap: balance; }
  .pla-intro-texto { margin: 16px 0 0; max-width: 30ch; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; text-wrap: pretty; }
  .pla-plano { display: grid; grid-row: 1 / span 11; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 0 24px; box-shadow: inset 1px 0 0 var(--ds-cor-borda); }
  .pla-selo { min-height: 20px; margin: 0 0 14px; }
  .pla-selo span { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--ds-cor-realce); color: var(--ds-cor-texto); font-size: 12px; line-height: 16px; font-weight: 500; }
  .pla-nome { margin: 0; color: var(--ds-cor-texto); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; }
  .pla-pergunta { margin: 8px 0 0; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; text-wrap: pretty; }
  /* os quatro níveis do preço, cada um uma linha da grade; os dois ciclos no mesmo lugar */
  .pla-n { display: grid; }
  .pla-v { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; transition: opacity 200ms var(--ds-curva), visibility 0s; }
  .pla-n-valor { margin: 24px 0 0; }
  .pla-n-valor .pla-v { align-items: stretch; }
  .pla-n-economia { margin: 8px 0 0; font-size: 17px; line-height: 22px; text-wrap: balance; }
  .pla-n-cobranca { margin: 12px 0 0; }
  .pla-n-notas { margin: 10px 0 0; }
  .pla-sec[data-ciclo='mensal'] [data-ciclo-v='anual'], .pla-sec[data-ciclo='anual'] [data-ciclo-v='mensal'] { opacity: 0; visibility: hidden; transition: opacity 140ms var(--ds-curva), visibility 0s linear 140ms; }
  .pla-valor { color: var(--ds-cor-texto); font: 300 clamp(32px, 2.9vw, 44px)/1.05 var(--lp-fonte-titulo); letter-spacing: -0.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
  /* o "Sob consulta" não é número: menor, para caber na coluna sem alargá-la */
  .pla-valor-texto { font-size: clamp(28px, 2.2vw, 32px); line-height: calc(clamp(32px, 2.9vw, 44px) * 1.05); } /* a mesma altura de linha dos valores: a cobrança alinha entre as colunas */
  .pla-valor-linha { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
  .pla-riscado { position: relative; color: var(--ds-cor-texto-3); font-size: 13px; line-height: 18px; text-decoration: line-through; text-decoration-thickness: 1px; white-space: nowrap; }
  /* nível 1: o valor, e a unidade colada logo abaixo; nível 2: a cobrança (texto 1, peso médio; a segunda linha em texto 2);
     nível 3: as condições (menores, texto 2), logo depois, sem vão */
  .pla-unidade { min-height: 18px; margin-top: 4px; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
  .pla-cobranca-1 { color: var(--ds-cor-texto); font-size: 15px; line-height: 20px; font-weight: 500; text-wrap: balance; }
  .pla-cobranca-2 { margin-top: 4px; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; font-weight: 500; text-wrap: pretty; }
  .pla-n-notas span { color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; text-wrap: pretty; }
  .pla-n-notas span + span { margin-top: 4px; }
  .pla-acao { margin: 22px 0 0; }
  .pla-acao .botao { width: 100%; }
  #plano-profissional { position: relative; isolation: isolate; box-shadow: none; }
  #plano-profissional::before { content: ''; position: absolute; inset: -20px 0 -24px; z-index: -1; border-radius: var(--ds-raio-grande); background: var(--ds-cor-superficie); }
  #plano-empresarial { box-shadow: none; }
  .pla-acao-nota { display: block; margin-top: 8px; color: var(--ds-cor-texto-2); font-size: 12px; line-height: 16px; text-wrap: pretty; }
  /* a economia, logo abaixo do valor, 15 px nos dois ciclos: A em ok-texto; B em texto 1, peso 600 (sem caixa nem cor) */
  html[data-variante='a'] .pla-marca { color: var(--ds-cor-ok-texto); font-weight: 500; }
  html[data-variante='b'] .pla-marca { color: var(--ds-cor-texto); font-weight: 600; }
  /* a lista: um cabeçalho menor e mais pesado que os itens, em texto 2, sem fio acima; os itens com o fio de sempre */
  .pla-inclui-cab { margin: 28px 0 2px; color: var(--ds-cor-texto); font-size: 15px; line-height: 20px; font-weight: 500; text-wrap: balance; }
  .pla-inclui-cab strong { font-weight: 600; }
  .pla-inclui { list-style: none; margin: 0; padding: 0; }
  .pla-inclui li { padding: 10px 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; text-wrap: pretty; }
  .pla-inclui li + li { box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
  .pla-mais { display: none; }
  .pla-avulsa { margin-top: 48px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
  .pla-avulsa + .pla-avulsa { margin-top: 24px; }
  .pla-avulsa-nome { margin: 0; color: var(--ds-cor-texto); font-size: 15px; line-height: 22px; font-weight: 600; }
  .pla-avulsa-texto { margin: 4px 0 10px; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; text-wrap: pretty; }
  .pla-avulsa .link-texto { display: inline-block; margin-left: -4px; padding: 4px; font-size: 15px; line-height: 22px; color: var(--ds-cor-texto);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
  .pla-avulsa .link-texto { border-radius: var(--ds-raio-medio); transition: background-color var(--ds-dur-rapida) var(--ds-curva); }
  @media (hover: hover) { .pla-avulsa .link-texto:hover { background-color: var(--ds-cor-realce); } }
  .pla-avulsa .link-texto:active { background-color: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  /* entre 1101 e 1400 px as colunas apertam: menos recuo dentro de cada plano */
  @media (max-width: 1400px) and (min-width: 1101px) { .pla-plano { padding: 0 20px; } }
  /* de 1101 a 1240 px a coluna aperta: 16 px de recuo, e o valor com o riscado cabe na mesma linha sem mudar de tamanho
     (o tamanho do valor segue a mesma conta de 1101 a 1440: nada salta numa largura) */
  @media (max-width: 1240px) and (min-width: 1101px) { .pla-plano { padding: 0 16px; } }

  /* o seletor da casa: opções iguais, uma peça clara que desliza (só transform, 280 ms; outra escolha no caminho parte de
     onde a peça está); por dentro, as palavras em tom escuro numa cópia que anda ao contrário (contraste em todo quadro) */
  .seg { min-width: 0; margin: 28px 0 0; padding: 0; border: 0; }
  .seg-legenda { margin: 0 0 6px; padding: 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
  .seg-opcoes, .seg-copia { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
  .seg-opcoes { position: relative; max-width: 240px; padding: 4px; border-radius: var(--ds-raio-grande); background: var(--ds-cor-superficie); box-shadow: inset 0 0 0 1px var(--ds-cor-borda); }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg label, .seg-copia > span { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 6px; border-radius: var(--ds-raio-medio); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; }
  .seg label { color: var(--ds-cor-texto-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-rapida) var(--ds-curva), color var(--ds-dur-rapida) var(--ds-curva); }
  @media (hover: hover) { .seg label:hover { background: var(--ds-cor-realce); color: var(--ds-cor-texto); } }
  .seg label:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
  .seg-opcoes:not([data-peca]) input:checked + label { background: var(--ds-cor-texto); color: var(--ds-cor-sobre-acento); }
  .seg-opcoes:not([data-peca]) input:focus-visible + label { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .seg-peca { position: absolute; left: 4px; top: 4px; display: none; overflow: hidden; border-radius: var(--ds-raio-medio); background: var(--ds-cor-texto); pointer-events: none;
    transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform 280ms var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  .seg-copia { position: absolute; left: 0; top: 0; transform: translate(calc(-1 * var(--x, 0px)), calc(-1 * var(--y, 0px))); transition: transform 280ms var(--ds-curva); }
  .seg-copia > span { color: var(--ds-cor-sobre-acento); }
  .seg-copia > span::before { content: attr(data-t); }
  .seg-opcoes[data-peca] .seg-peca { display: block; }
  .seg-opcoes[data-sem-transicao] .seg-peca, .seg-opcoes[data-sem-transicao] .seg-copia { transition: none; }
  @media (hover: hover) { .seg-opcoes[data-peca] input:checked + label:hover ~ .seg-peca { background: color-mix(in srgb, var(--ds-cor-texto) 90%, var(--ds-cor-fundo)); } }
  .seg-opcoes[data-peca] input:checked + label:active ~ .seg-peca { background: color-mix(in srgb, var(--ds-cor-texto) 86%, var(--ds-cor-fundo)); transition: transform 280ms var(--ds-curva), background-color 0ms; }
  .seg-opcoes[data-peca]:has(input:focus-visible) .seg-peca { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  .seg-escolha { display: none; }
  .seg-dica { margin: 8px 0 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; text-wrap: pretty; }

  /* ---------- a comparação: a mesma grade dos planos; a linha dos nomes presa no alto enquanto as linhas passam (a cauda
     do véu do cabeçalho some enquanto ela está presa: paginas.js, [data-cab-preso]) ---------- */
  .pla-comp-sec { padding-top: 40px; }
  .pla-comp-caixa { max-width: 1320px; margin: 0 auto; }
  .pla-comp-titulo { margin-bottom: 32px; }
  .pla-comp { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .pla-col-rotulo { width: calc(100% * 1.15 / 5.15); }
  .pla-comp thead th, .pla-comp thead td { position: sticky; top: var(--lp-topo); z-index: 2; padding: 14px 24px; background: var(--ds-cor-fundo);
    color: var(--ds-cor-texto); font-size: 15px; line-height: 22px; font-weight: 600; text-align: left; }
  .pla-comp thead th { box-shadow: inset 1px 0 0 var(--ds-cor-borda), inset 0 -1px 0 color-mix(in srgb, var(--ds-cor-texto) 22%, transparent); }
  .pla-comp thead td { padding-left: 0; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ds-cor-texto) 22%, transparent); }
  .pla-comp tbody th, .pla-comp tbody td { padding: 16px 24px; vertical-align: top; font-size: 13px; line-height: 18px; text-align: left; text-wrap: pretty; }
  .pla-comp tbody th { padding-left: 0; color: var(--ds-cor-texto); font-weight: 500; box-shadow: inset 0 -1px 0 var(--ds-cor-borda); }
  .pla-comp tbody td { color: var(--ds-cor-texto-2); box-shadow: inset 1px 0 0 var(--ds-cor-borda), inset 0 -1px 0 var(--ds-cor-borda); }

  /* ---------- tablete: a abertura sobe para cima dos planos ---------- */
  @media (max-width: 1100px) {
    .pla-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto repeat(11, auto) auto; column-gap: 0; }
    .pla-intro { display: contents; }
    .pla-titulo:not(.pla-comp-titulo) { grid-row: 1; grid-column: 1 / 4; }
    .pla-intro-texto { grid-row: 2; grid-column: 1 / 4; margin-bottom: 40px; }
    .pla-intro .seg-ciclo { grid-row: 1 / span 2; grid-column: 4; align-self: start; margin: 0 0 40px; }
    .pla-plano { grid-row: 3 / span 11; padding: 0 16px; }
    .pla-plano:first-child { padding-left: 0; box-shadow: none; }
    .pla-avulsa { grid-row: 14; grid-column: 1 / 3; margin-top: 56px; padding-right: 32px; }
    .pla-avulsa + .pla-avulsa { grid-column: 3 / 5; margin-top: 56px; padding-right: 0; }
    .pla-col-rotulo { width: 20%; }
  }
  /* tablete estreito: de 800 a 899 px, 12 px de recuo e o valor de 30 px (aos 800; a folga do riscado fica em 6,8 px mesmo
     com a fonte de reserva) a 32 px (aos 900, o de cima), proporcional à largura */
  @media (max-width: 899px) and (min-width: 800px) {
    .pla-plano { padding: 0 12px; }
    .pla-plano:first-child { padding-left: 0; }
    .pla-valor:not(.pla-valor-texto) { font-size: calc(30px + (100vw - 800px) * 0.02); }
    .pla-valor-texto { line-height: calc((30px + (100vw - 800px) * 0.02) * 1.05); }
  }

  /* ---------- celular: um plano por vez num trilho que se arrasta; o seletor anda com ele; a tabela vira a lista de cada plano.
     Vai até 799 px (e não 760, como o resto da página): abaixo de 800 as quatro colunas do tablete não comportam o valor com o
     riscado nem o cabeçalho da lista em duas linhas ---------- */
  @media (max-width: 799px) {
    .pla-sec { padding-top: 72px; }
    .pla-grade { display: flex; flex-direction: column; }
    .pla-intro { display: contents; }
    .pla-intro .seg-ciclo { margin: 24px 0 0; align-self: stretch; }
    .seg-ciclo label, .seg-ciclo .seg-copia > span { font-size: 12px; } /* o mesmo tamanho do seletor de plano, ao lado */
    .seg-escolha { display: block; margin-top: 16px; }
    .seg-ciclo .seg-opcoes { max-width: none; }
    .seg-escolha .seg-opcoes { max-width: none; }
    .seg-escolha label, .seg-escolha .seg-copia > span { padding: 0 2px; font-size: 12px; }
    /* a partir de 360 px, a cobrança do anual numa linha ("Pago uma vez por ano." e "R$ 4.900 por acesso."): a linha
       reservada para os dois ciclos cai de 42 para 22 px e o mensal não fica com vão (a 320 px ela quebra, como antes) */
    @media (min-width: 360px) { .pla-n-cobranca .pla-v { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 6px; } .pla-cobranca-2 { margin-top: 0; } }
    /* abaixo de 360 px, quatro rótulos de 12 px não cabem numa linha: o seletor de plano vira duas linhas de dois (a peça anda
       nas duas direções), com o mesmo tamanho, a mesma altura de opção e o mesmo vão do seletor de cobrança */
    @media (max-width: 359px) { .seg-escolha .seg-opcoes, .seg-escolha .seg-copia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    .pla-trilho { display: flex; align-items: flex-start; order: 1; margin: 28px -24px 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .pla-trilho::-webkit-scrollbar { display: none; }
    .pla-plano { display: block; flex: 0 0 100%; padding: 20px 24px 24px; box-shadow: none; scroll-snap-align: start; scroll-snap-stop: always; }
    .pla-plano:first-child { padding-left: 24px; }
    /* a superfície do Profissional dentro do cartão (o trilho corta o que sobra para fora); o mesmo respiro em todos os cartões */
    #plano-profissional::before { inset: 0 12px; }
    .pla-plano { align-self: flex-start; } /* cada cartão com a própria altura: a superfície termina com o conteúdo */
    .pla-inclui-cab { margin-top: 24px; }
    .pla-mais { display: block; margin: 16px 0 8px; } /* o anel do foco não encosta no corte do trilho */
    .pla-mais-botao { display: inline-flex; align-items: center; min-height: 44px; margin-left: -6px; padding: 0 6px; border-radius: var(--ds-raio-medio); list-style: none; cursor: pointer;
      color: var(--ds-cor-texto); font-size: 15px; line-height: 22px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
      -webkit-tap-highlight-color: transparent; transition: background-color var(--ds-dur-rapida) var(--ds-curva); }
    .pla-mais-botao::-webkit-details-marker { display: none; }
    @media (hover: hover) { .pla-mais-botao:hover { background: var(--ds-cor-realce); } }
    .pla-mais-botao:active { background: var(--ds-cor-preenchimento); transition-duration: 0ms; }
    .pla-mais-botao:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
    .pla-mais-fechar, .pla-mais[open] .pla-mais-abrir { display: none; }
    .pla-mais[open] .pla-mais-fechar { display: inline; }
    .pla-mais .pla-detalhes { display: block; margin: 8px 0 0; }
    .pla-detalhes div { padding: 10px 0; box-shadow: inset 0 1px 0 var(--ds-cor-borda); }
    .pla-detalhes dt { color: var(--ds-cor-texto); font-size: 13px; line-height: 18px; font-weight: 500; }
    .pla-detalhes dd { margin: 2px 0 0; color: var(--ds-cor-texto-2); font-size: 13px; line-height: 18px; }
    .pla-avulsa { order: 2; margin-top: 40px; }
    .pla-avulsa + .pla-avulsa { margin-top: 24px; }
    .pla-avulsa .link-texto { margin: -7px 0 -7px -4px; padding: 11px 4px; }
    .pla-comp-sec { display: none; }
  }
  /* toque (o tablete também): os links avulsos com 44 px de alvo, sem mudar a linha */
  @media (pointer: coarse) { .pla-avulsa .link-texto { margin: -7px 0 -7px -4px; padding: 11px 4px; } }
  /* de 761 a 799 px o celular vai de borda a borda como abaixo de 760, com o recuo da página (7vw) dentro do cartão */
  @media (max-width: 799px) and (min-width: 761px) {
    .pla-trilho { margin-left: calc(-1 * var(--lp-margem)); margin-right: calc(-1 * var(--lp-margem)); }
    .pla-plano, .pla-plano:first-child { padding-left: var(--lp-margem); padding-right: var(--lp-margem); }
    #plano-profissional::before { inset: 0 calc(var(--lp-margem) - 12px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .seg-peca, .seg-copia { transition: none; }
    .pla-v, .pla-sec[data-ciclo] [data-ciclo-v] { transition: none; }
  }