/* ==========================================================================
   SIMULADOR DE CARTEIRA — prefixo sim-
   Dobra partida em dois: foto sangrada à esquerda com o título por cima,
   painel-assistente de quatro passos sobreposto à direita.

   Tokens usados:
     --accent --accent-2   as duas pontas da rampa de cor da rosca
     --bg --fg --fg-2 --fg-muted --rule --rule-2   tinta e linhas, do escopo
     --dark --dark-rgb     véu da foto e corpo do painel de vidro
     --display --sans      títulos/números e texto
     --ease                a curva, em toda transição daqui
     --radius-media        canto do painel e dos campos
     --radius-pill         chip, pílula e disco

   A coluna não aparece nesta lista de propósito: --max e --pad são lidos
   pelo .wrap do core, e nenhuma regra daqui os toca (contrato §4).

   DUAS CAMADAS, UMA CÉLULA. A seção é uma grade de UMA célula com dois
   filhos empilhados: .sim-media (a foto, recortada na fração da esquerda) e
   .sim-form (o painel). Os dois são LARGURA CHEIA, e cada um alinha o próprio
   conteúdo com o .wrap do core — é o que garante que o título e a borda
   direita do painel caiam exatamente na coluna da página, sem conta de
   inset e sem margem negativa (contrato §4). No celular a mesma grade vira
   duas linhas: foto em faixa em cima, painel embaixo.

   O QUE O SCRIPT NÃO FAZ. Ele não escreve aparência: troca `hidden`, troca
   classe e escreve as DUAS variáveis de geometria de cada fatia da rosca
   (giro de partida e dashoffset final). Cor, espessura, vão, curva e blur
   estão todos aqui.
   ========================================================================== */

.sim{
  /* Fração da dobra ocupada pela foto. O painel entra por cima dela, e o que
     importa é a borda esquerda do painel cair DENTRO da dissolução da foto
     (que começa em 68% da largura dela). Medido a 1085, 1280, 1440 e 1920:
     com 64% a borda cai na dissolução nas quatro; com 60% ela escapava por
     7px a 1280 e o painel ficava flutuando ao lado da foto, não sobre ela. */
  --sim-media-w:64%;

  /* Largura do painel. Encolhe com a tela até o ponto em que o título ao
     lado ficaria estreito demais — daí o layout quebra em duas linhas. */
  --sim-panel-w:clamp(400px,33vw,476px);

  /* Altura mínima da dobra. Não é 100vh: em tela baixa o painel passaria do
     rodapé e a pessoa rolaria dentro de um formulário. */
  --sim-min-h:clamp(600px,90vh,900px);

  /* Respiro interno do painel. */
  --sim-pad:clamp(22px,2.1vw,32px);

  /* Altura mínima do corpo do painel: o mais alto dos três passos de
     pergunta, mais um dedo de folga. É o que impede o painel de encolher e
     crescer a cada avanço. Medido com a fonte de recurso: 330 a 1920, 323 a
     1280, 320 a 390. O passo do RESULTADO é mais alto que isto de propósito
     — ali crescer é o efeito, e o painel ganha ~150px. */
  --sim-body-h:360px;

  /* A rosca. --sim-arc-w é espessura em unidades do viewBox (120), e
     --sim-arc-gap é o vão entre fatias em unidades de caminho — o script lê
     este segundo com parseFloat para descontar da conta de cada fatia. */
  --sim-donut:164px;
  --sim-arc-w:13;
  --sim-arc-gap:4;

  /* A paleta da rosca é uma RAMPA entre as duas cores da marca, e não quatro
     cores cruas: da cor de ação até a secundária, e a quarta é a secundária
     escurecida contra o fundo. Medido no tema Liberta, contra o corpo do
     painel: 3,8:1 na fatia mais escura — acima do 3:1 que o WCAG pede para
     objeto gráfico. Tema de baixo contraste entre --accent e --accent-2
     precisa refazer esta conta antes de publicar. */
  --sim-tint-1:var(--accent);
  --sim-tint-2:color-mix(in srgb,var(--accent) 55%,var(--accent-2));
  --sim-tint-3:var(--accent-2);
  --sim-tint-4:color-mix(in srgb,var(--accent-2) 70%,var(--bg));

  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  min-height:var(--sim-min-h);
}

/* O `hidden` do passo, do rodapé e do "Voltar" tem de vencer o display que
   este arquivo dá a cada um deles. Regra do agente do usuário perde para
   regra de autor por especificidade nenhuma — perde sempre —, então a
   reposição é nossa. Uma linha, escopada no componente, resolve os três.
   Sem ela, campo invisível continua tabulável: a armadilha clássica. */
.sim [hidden]{display:none}


/* ==========================================================================
   CAMADA 1 — A FOTO E O TÍTULO
   ========================================================================== */

.sim-media{
  grid-area:1/1;
  position:relative;
  display:grid;
  align-items:end;
  min-width:0;
}

/* O recorte da foto. Ocupa a fração da esquerda e sangra em cima e embaixo.
   A máscara dissolve a borda direita no fundo da seção: sem ela o painel
   pousa sobre um corte reto e lê como adesivo colado na foto. */
.sim-media-frame{
  position:absolute;inset:0;
  width:var(--sim-media-w);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 68%,transparent 100%);
  mask-image:linear-gradient(to right,#000 68%,transparent 100%);
}

.sim-media-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;
}

/* Véu de três paradas subindo do rodapé: escuro onde o texto pousa, quase
   limpo no topo. rgba(var(--dark-rgb),…) é a forma da casa para véu — é
   token, não cor crua. */
.sim-media-veil{
  position:absolute;inset:0;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.92) 0%,
    rgba(var(--dark-rgb),.62) 38%,
    rgba(var(--dark-rgb),.14) 100%);
}

/* O título mora DENTRO da imagem, ancorado embaixo (contrato §6). O .wrap é
   quem o alinha à coluna da página — este bloco é largura cheia justamente
   para que o .wrap de dentro faça a conta certa. */
.sim-hgroup{
  position:relative;z-index:1;
  padding-block:clamp(40px,7vh,88px);
  pointer-events:none;
}

/* A largura do título é a coluna MENOS o painel e o vão: assim ele nunca
   corre por baixo do painel, em nenhuma largura de tela. */
.sim-copy{
  max-width:calc(100% - var(--sim-panel-w) - clamp(24px,3vw,56px));
  pointer-events:auto;
}

.sim-title{
  --display-xl:clamp(32px,3.9vw,58px);
  --display-xl-lh:1.06;
  margin-top:18px;
}

.sim-lead{
  margin-top:20px;
  max-width:44ch;
  color:var(--fg-2);
  font-size:clamp(15px,1.15vw,17px);line-height:1.55;
}


/* ==========================================================================
   CAMADA 2 — O PAINEL
   Mesma célula da grade, por cima. É largura cheia e usa o .wrap para
   encostar a borda direita do painel na coluna.
   ========================================================================== */

.sim-form{
  grid-area:1/1;
  position:relative;z-index:2;
  display:grid;
  align-items:center;
  padding-block:clamp(48px,8vh,96px);
  pointer-events:none;
}

.sim-panel{
  /* O vidro do core, sobre foto. O padrão é claro e translúcido — aqui os
     campos ficariam ilegíveis, então o corpo vira escuro quase opaco. Nenhuma
     regra da primitiva é reescrita: só os parafusos dela. */
  --glass-bg:color-mix(in srgb,var(--dark) 88%,transparent);
  --glass-line:color-mix(in srgb,var(--fg) 15%,transparent);
  --glass-blur:26px;

  pointer-events:auto;
  width:min(var(--sim-panel-w),100%);
  margin-left:auto;
  border-radius:var(--radius-media);
  padding:var(--sim-pad);
  display:flex;flex-direction:column;
  gap:clamp(18px,1.8vw,24px);
}


/* ---- cabeça do painel: régua, contador e voltar ------------------------- */

.sim-head{display:grid;gap:14px}

.sim-rule{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}

.sim-rule-seg{
  height:2px;
  background:var(--rule-2);
  position:relative;overflow:hidden;
}
/* O segmento preenche da esquerda para a direita, e é só isto que a régua
   faz — ela é aria-hidden. Quem anuncia é o .sim-status. */
.sim-rule-seg::after{
  content:"";position:absolute;inset:0;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease);
}
.sim-rule-seg.is-on::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .sim-rule-seg::after{transition:none}
}

.sim-status{
  font-family:var(--display);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* "Voltar" é botão de texto, não pílula: ele volta, não avança, e não pode
   competir com o "Continuar". Nunca fica disabled — some no primeiro passo. */
.sim-back{
  justify-self:start;
  display:inline-flex;align-items:center;gap:7px;
  padding:0;border:0;background:none;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;
  color:var(--fg-muted);
  transition:color .3s var(--ease);
}
.sim-back:hover{color:var(--accent)}

.sim-back-ico{
  display:block;width:15px;height:15px;
  transition:transform .3s var(--ease);
}
.sim-back-ico svg{display:block;width:100%;height:100%}
/* O chevron recua no hover — o mesmo gesto do .btn do core, ao contrário. */
.sim-back:hover .sim-back-ico{transform:translateX(-2px)}
@media(prefers-reduced-motion:reduce){
  .sim-back-ico{transition:none}
}

/* Só aparece com o script desligado: o <noscript> não gera caixa nenhuma
   quando há JavaScript. Por isso esta regra NÃO declara display — declarar
   faria a linha aparecer também com o script ligado. */
.sim-nojs{
  color:var(--fg-muted);
  font-size:13.5px;line-height:1.5;
  padding-bottom:4px;
  border-bottom:1px solid var(--rule);
}


/* ---- corpo: os passos --------------------------------------------------- */

.sim-body{min-height:var(--sim-body-h)}

.sim-step{
  --sim-gap:clamp(16px,1.7vw,22px);
  border:0;margin:0;padding:0;min-width:0;
  display:grid;gap:var(--sim-gap);
  /* A entrada do passo é ANIMAÇÃO, não transição: quem sai de display:none
     não interpola. A animação reinicia sozinha toda vez que o passo volta a
     ser exibido — o script só tira o `hidden`. */
  animation:sim-in .5s var(--ease) both;
}
@media(prefers-reduced-motion:reduce){
  .sim-step{animation:none}
}
@keyframes sim-in{
  from{opacity:0;filter:blur(9px);transform:translateY(10px)}
  to{opacity:1;filter:blur(0);transform:none}
}

/* Sem script os quatro passos ficam empilhados: a linha os separa para não
   virarem um bloco só. Com o script, .is-live desliga a divisória — o passo
   escondido continua sendo irmão do visível, e sem este escopo o passo 2
   herdaria a linha de um passo 1 que ninguém está vendo. */
.sim-panel:not(.is-live) .sim-step + .sim-step{
  margin-top:clamp(18px,2vw,26px);
  padding-top:clamp(18px,2vw,26px);
  border-top:1px solid var(--rule);
}

/* A pergunta do passo. É <legend> nos três primeiros e <h3> no resultado, e
   nos quatro é o alvo do foco quando o passo entra (tabindex="-1"). */
/* MEDIDO: uma <legend> NÃO é item de grade do <fieldset> — o navegador a
   coloca fora do fluxo da grade, e o `gap` do passo não vale para ela. O vão
   entre a pergunta e o primeiro campo saía 0, e o anel de foco (2px com recuo
   de 2) passava por cima do rótulo de baixo. A margem repõe o vão, lida da
   mesma variável do gap para os dois nunca divergirem. No passo do resultado
   o título é <h3>, item de grade de verdade: ali a margem sai, senão o vão
   sairia dobrado. */
.sim-q{
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.6vw,23px);line-height:1.25;letter-spacing:-.015em;
  color:var(--fg);
  padding:0;
  margin-bottom:var(--sim-gap);
}
.sim-result .sim-q{margin-bottom:0}
/* O core desenha o anel de foco 3px para fora; num título que já encosta no
   topo do painel isso encostaria na borda. O deslocamento menor mantém o
   anel inteiro dentro do respiro. */
.sim-q:focus-visible{outline-offset:2px}

.sim-lab{
  display:block;padding:0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-muted);
}

/* O input de verdade continua no fluxo do teclado: escondê-lo com display ou
   visibility o tiraria da tabulação e das setas. Some da tela, não da
   navegação — e o anel de foco é desenhado na caixa irmã. */
.sim-radio{
  position:absolute;
  width:1px;height:1px;margin:0;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}


/* ---- passo 1: cartões de objetivo --------------------------------------- */

.sim-opts{display:grid;gap:8px}

.sim-opt{position:relative;display:block;cursor:pointer}

.sim-opt-box{
  display:flex;align-items:center;gap:14px;
  padding:13px 16px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
  background:color-mix(in srgb,var(--fg) 3%,transparent);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.sim-opt:hover .sim-opt-box{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

.sim-opt-ico{
  flex:0 0 34px;width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--rule);
  border-radius:var(--radius-pill);
  color:var(--fg-2);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.sim-opt-ico svg{width:18px;height:18px;display:block}

.sim-opt-lab{
  font-size:15px;line-height:1.3;letter-spacing:0;
  color:var(--fg-2);
}

.sim-radio:checked + .sim-opt-box{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
}
.sim-radio:checked + .sim-opt-box .sim-opt-ico{color:var(--accent);border-color:var(--accent)}
.sim-radio:checked + .sim-opt-box .sim-opt-lab{color:var(--fg)}

.sim-radio:focus-visible + .sim-opt-box{outline:2px solid var(--accent);outline-offset:3px}


/* ---- passo 2: select e seletor de faixa --------------------------------- */

.sim-field{display:grid;gap:9px}

.sim-select-box{position:relative;display:block}

/* Select NATIVO, estilizado — não uma lista falsa. A lista aberta é do
   sistema, e por isso ela é o único lugar do componente que não lê token:
   color-scheme diz ao navegador para desenhá-la escura, para casar com o
   painel. Painel claro (ver variação "em dobra clara") pede trocar por light. */
.sim-select{
  appearance:none;-webkit-appearance:none;
  width:100%;
  padding:14px 44px 14px 15px;
  font-family:var(--sans);font-size:15px;letter-spacing:0;
  color:var(--fg);
  background:color-mix(in srgb,var(--fg) 5%,var(--bg));
  border:1px solid var(--rule-2);
  border-radius:var(--radius-media);
  color-scheme:dark;
  transition:border-color .3s var(--ease);
}
.sim-select:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

.sim-select-arrow{
  position:absolute;top:50%;right:15px;
  width:17px;height:17px;margin-top:-8px;
  color:var(--fg-muted);pointer-events:none;
}
.sim-select-arrow svg{display:block;width:100%;height:100%}

.sim-range{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);
}

/* O valor é o conteúdo da região aria-live: muda no clique e é anunciado. */
.sim-range-val{
  flex:1 1 auto;text-align:center;
  font-family:var(--display);font-weight:700;
  font-size:clamp(14px,1.15vw,16px);letter-spacing:-.01em;
  color:var(--fg);
}

/* O disco do core, um tamanho abaixo. Nas pontas da fila ele apaga por
   aria-disabled e NÃO por disabled: quem chegou de teclado ao "+" e bateu no
   fim continua com o foco no botão, em vez de ser jogado para o <body>. */
.sim-nudge{--disc-size:36px}


/* ---- passo 3: chips ----------------------------------------------------- */

/* Mesma armadilha da <legend> aqui dentro: o rótulo do subgrupo é uma
   <legend> e não pega o gap. Nos outros lugares .sim-lab é <span> dentro de
   uma grade e já pega — por isso a margem é escopada ao subgrupo. */
.sim-sub{border:0;margin:0;padding:0;min-width:0;display:grid;gap:9px}
.sim-sub .sim-lab{margin-bottom:9px}
.sim-chips{display:flex;flex-wrap:wrap;gap:7px}
.sim-chip{position:relative;display:block;cursor:pointer}

.sim-chip-box{
  display:block;
  padding:9px 15px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);
  font-size:13.5px;letter-spacing:.01em;line-height:1.2;
  color:var(--fg-2);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.sim-chip:hover .sim-chip-box{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

.sim-radio:checked + .sim-chip-box{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--dark);
}
.sim-radio:focus-visible + .sim-chip-box{outline:2px solid var(--accent);outline-offset:3px}


/* ---- passo 4: o resultado ----------------------------------------------- */

.sim-result{--sim-gap:clamp(18px,1.9vw,24px)}

.sim-out{display:flex;align-items:center;gap:clamp(16px,1.8vw,24px)}

.sim-donut{
  flex:0 0 auto;
  width:var(--sim-donut);height:var(--sim-donut);
}

.sim-track{fill:none;stroke:var(--rule);stroke-width:var(--sim-arc-w)}

/* CADA FATIA É UM <circle> INTEIRO, girado para o seu ponto de partida e
   cortado por dasharray. O tracejado tem UM traço do tamanho da volta
   (--sim-len, que é 2πr e o script calcula a partir do r do markup); o
   dashoffset é o que sobra dela — quanto maior, menor a fatia. O giro de
   −90° põe o zero no topo; o giro de partida de cada fatia é acumulado.

   Os valores abaixo são a geometria do perfil PADRÃO (Equilíbrio, 38/22/24/16
   — os mesmos números que o markup traz na lista e a tabela do script traz
   em `equilibrio`). Ficam aqui para a rosca desenhar certo mesmo sem script;
   com script, o inline style ganha e escreve o perfil calculado. Trocar o
   perfil padrão é mexer nestes três lugares. */
.sim-arc{
  fill:none;
  stroke-width:var(--sim-arc-w);
  stroke-linecap:butt;
  stroke-dasharray:var(--sim-len,289.03);
  stroke-dashoffset:var(--sim-arc-off,0);
  transform-box:view-box;transform-origin:50% 50%;
  transform:rotate(calc(-90deg + var(--sim-arc-start,0deg)));
  filter:blur(0);
  transition:stroke-dashoffset .85s var(--ease),filter .85s var(--ease);
}
.sim-arc-1{stroke:var(--sim-tint-1);--sim-arc-start:0deg;--sim-arc-off:183.2}
.sim-arc-2{stroke:var(--sim-tint-2);--sim-arc-start:136.8deg;--sim-arc-off:229.44;transition-delay:.08s}
.sim-arc-3{stroke:var(--sim-tint-3);--sim-arc-start:216deg;--sim-arc-off:223.66;transition-delay:.16s}
.sim-arc-4{stroke:var(--sim-tint-4);--sim-arc-start:302.4deg;--sim-arc-off:246.79;transition-delay:.24s}

/* A rosca VAZIA. O script põe esta classe, escreve a geometria nova e tira a
   classe no quadro seguinte — e a fatia cresce até o valor. A transição é
   declarada aqui como `none` de propósito: o navegador lê a transição do
   estado de CHEGADA, então entrar em vazio é instantâneo e sair de vazio
   anima. É o que evita o script ter de apagar e repor transition na mão. */
.sim-donut.is-blank .sim-arc{
  stroke-dashoffset:var(--sim-len,289.03);
  filter:blur(7px);
  transition:none;
}
@media(prefers-reduced-motion:reduce){
  .sim-arc{transition:none}
}

.sim-verdict{font-size:14.5px;line-height:1.5;color:var(--fg-2)}
.sim-verdict-name{
  display:block;
  font-family:var(--display);font-weight:700;
  font-size:clamp(19px,1.6vw,23px);letter-spacing:-.015em;
  color:var(--fg);
  margin-bottom:6px;
}

/* A LEITURA EM TEXTO — é isto que o leitor de tela recebe, porque o <svg> é
   aria-hidden inteiro. Três colunas: bolinha, nome e percentual; a linha de
   apoio ocupa a segunda linha, alinhada com o nome. */
.sim-slices{display:grid;gap:11px}

.sim-slice{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:2px 10px;
  padding-bottom:11px;
  border-bottom:1px solid var(--rule);
}

.sim-slice-dot{
  width:9px;height:9px;border-radius:var(--radius-pill);
  align-self:center;
}
.sim-slice-1 .sim-slice-dot{background:var(--sim-tint-1)}
.sim-slice-2 .sim-slice-dot{background:var(--sim-tint-2)}
.sim-slice-3 .sim-slice-dot{background:var(--sim-tint-3)}
.sim-slice-4 .sim-slice-dot{background:var(--sim-tint-4)}

.sim-slice-name{font-size:14.5px;color:var(--fg)}
.sim-slice-pct{
  font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:-.01em;
  color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.sim-slice-note{
  grid-column:2/4;
  font-size:12.5px;line-height:1.45;
  color:var(--fg-muted);
}

/* A RESSALVA. Fica no passo do resultado, em corpo de leitura — não em letra
   miúda de rodapé. Compliance é conteúdo, não nota de rodapé. */
/* 13,5px e não 12,5: a ressalva é MAIOR que a linha de apoio de cada classe
   de ativo. Compliance que vira o menor texto da tela é letra miúda com outro
   nome, e o §5 do brief é explícito. */
/* Entrelinha e tinta vêm da primitiva .nota do core; o corpo é o parafuso,
   pela razão do parágrafo acima. Filete e recuo são posição e ficam aqui. */
.sim-nota{
  --nota-size:13.5px;
  border-left:1px solid var(--rule-2);
  padding-left:13px;
}

.sim-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.sim-cta{flex:0 0 auto}

/* "Refazer" é discreto de propósito: existe para quem errou, não para
   competir com a saída para a conversa. */
.sim-redo{
  padding:0;border:0;background:none;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.02em;
  color:var(--fg-muted);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--rule-2);
  transition:color .3s var(--ease),text-decoration-color .3s var(--ease);
}
.sim-redo:hover{color:var(--accent);text-decoration-color:var(--accent)}


/* ---- pé: o botão de avançar --------------------------------------------- */

.sim-foot{display:flex}
.sim-next{width:100%}
/* O botão nasce disabled e só libera quando o passo está respondido. Apaga
   sem sumir: um botão que desaparece move o painel inteiro. */
.sim-next:disabled{
  opacity:.34;cursor:default;
}
.sim-next:disabled:hover{
  background:var(--accent);color:var(--dark);backdrop-filter:none;-webkit-backdrop-filter:none;
}


/* ==========================================================================
   TELAS ESTREITAS
   A mesma grade vira duas linhas: a foto vira faixa em cima, com o título
   dentro dela, e o painel desce para baixo. Nenhuma regra de coluna muda —
   quem alinha continua sendo o .wrap.
   ========================================================================== */

@media(max-width:1080px){
  .sim{
    grid-template-rows:auto auto;
    min-height:0;
  }

  .sim-media{
    grid-area:1/1;
    min-height:clamp(300px,54vw,420px);
  }
  .sim-media-frame{
    width:100%;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .sim-media-veil{
    background:linear-gradient(to top,
      rgba(var(--dark-rgb),.94) 0%,
      rgba(var(--dark-rgb),.66) 46%,
      rgba(var(--dark-rgb),.22) 100%);
  }

  .sim-hgroup{padding-block:clamp(64px,16vw,120px) clamp(28px,6vw,44px)}
  .sim-copy{max-width:none}
  .sim-title{--display-xl:clamp(30px,6.4vw,46px)}

  .sim-form{
    grid-area:2/1;
    align-items:start;
    padding-block:clamp(28px,6vw,44px) clamp(56px,12vw,96px);
  }
  .sim-panel{width:100%;margin-left:0}
}

@media(max-width:560px){
  .sim{--sim-donut:132px}
  .sim-out{flex-direction:column;align-items:flex-start;gap:18px}
  .sim-acoes{gap:14px}
  .sim-cta{width:100%}
}