/* ============================================================
   Cirurgião 360 — tela de entrada
   Referência de design: scfo.de (medidas em 00-referencia/)
   Fontes: Libre Baskerville (título) + Poppins (resto)
   ============================================================ */

:root{
  /* --- cores --- */
  --preto:        #050607;
  --osso:         #F1F1EF;   /* branco-osso da referência */
  --osso-suave:   rgba(241,241,239,.78);
  --osso-fraco:   rgba(241,241,239,.50);
  --cinza-rotulo: #CFCFCF;
  --dourado:      #E2A81B;   /* manual de marca do Foco, Pantone 130C */

  /* --- fundo: foto P&B de cirurgia escolhida pelo Henrique (25/08).
         O arquivo já foi escurecido a 72% do brilho original e encolhido
         pra 1600px / ~200KB. Original intocado em Materiais Visuais. --- */
  --imagem-fundo: url('assets/fundo.jpg?v=41e0dac374');

  /* --- escala do conjunto "cirurgião::360" (uma linha só) --- */
  --marca-tam: clamp(28px, 8.6vw, 42px);

  --larg-max: 560px;
}

*{box-sizing:border-box}

html,body{height:100%}

body{
  margin:0;
  background:var(--preto);
  color:var(--osso);
  font-family:'Poppins', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- fundo ---------- */

.fundo{
  position:fixed; inset:0; z-index:-2;
  background:var(--imagem-fundo) center/cover no-repeat var(--preto);
  /* enquadramento pedido pelo Henrique: a foto empurrada pra BAIXO e pra
     DIREITA (a mão sai do centro e o topo fica ainda mais preto).
     O scale dá folga pra empurrar sem aparecer borda. */
  transform:scale(1.28) translate(7%, 9%);
  transform-origin:center;
}

/* véu que escurece a foto pra o texto ler — e deixa o vidro do botão com
   contraste pra refratar. Vinheta suave: centro respira, bordas fecham. */
.veu{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(130% 85% at 50% 34%, rgba(3,4,4,0) 0%, rgba(3,4,4,.45) 62%, rgba(3,4,4,.78) 100%),
    linear-gradient(to bottom, rgba(3,4,4,.55) 0%, rgba(3,4,4,.10) 30%, rgba(3,4,4,.20) 70%, rgba(3,4,4,.62) 100%);
}

/* ---------- topo: só uma linha fininha acima do logo ---------- */

.topo{
  position:relative;
  padding:calc(16px + env(safe-area-inset-top)) 24px 0;
}

.topo-linha{
  display:block;
  height:1px;
  background:rgba(241,241,239,.14);
  margin-bottom:16px;
}

.logo{
  display:block;
  width:130px;      /* proporção do arquivo: 2438x346 → 130px = 18,5px de altura */
  height:auto;
}

/* ---------- palco (o conteúdo central) ---------- */

.palco{
  position:relative;
  min-height:calc(100dvh - 88px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  text-align:center;
  /* meio-termo pedido pelo Henrique: nem colado no logo, nem no centro exato —
     o bloco desce um pouco de volta em direção ao centro da tela */
  padding:clamp(84px, 16vh, 170px) 24px calc(48px + env(safe-area-inset-bottom));
  max-width:var(--larg-max);
  margin:0 auto;
}

/* rótulo pequeno — o espaçamento de 3px entre letras é o que dá o ar caro */
.sobretitulo{
  margin:0 0 26px;
  max-width:100%;          /* ocupa a largura toda, menos linhas */
  text-wrap:balance;       /* linhas com larguras parecidas, sem palavra órfã */
  font-size:10.88px;
  font-weight:500;
  line-height:18px;
  letter-spacing:3.05px;
  text-transform:uppercase;
  color:var(--cinza-rotulo);
}

/* ---------- bloco "Cirurgião 360" ---------- */

/* o conjunto "cirurgião::360" numa linha só, espelhando o logotipo
   foco::cirúrgico: tudo minúsculo, os quatro pontinhos no meio, e o "360"
   mais pesado que o "cirurgião" (como o "foco" é mais pesado no logo) */
.marca{
  margin:0 0 30px;
  font-family:'Poppins', -apple-system, system-ui, sans-serif;
  font-size:var(--marca-tam);
  line-height:1.1;
  color:var(--osso);
  letter-spacing:-.01em;
  white-space:nowrap;
}

/* as duas palavras com a MESMA fonte e o MESMO peso (pedido do Henrique) */
.marca-cirurgiao,
.marca-360{font-weight:600}

/* os quatro pontinhos dourados desenhados na mão (não são texto ":"):
   grade 2x2 com o mesmo vão na horizontal e na vertical →
   quadrado perfeito por construção */
.marca-pontos{
  display:inline-grid;
  grid-template-columns:auto auto;
  gap:.15em;                   /* MESMO vão nos dois eixos */
  margin:0 .14em;
  vertical-align:middle;
  transform:translateY(-.02em);
}

.marca-pontos i{
  width:.125em; height:.125em;
  border-radius:50%;
  background:var(--dourado);
}

/* ---------- texto ---------- */

/* largura solta — na referência o parágrafo ocupa a tela toda menos as margens */
.texto{
  margin:0 0 38px;
  max-width:100%;
  font-size:16px;
  font-weight:300;
  line-height:26.4px;
  color:var(--osso-suave);
}

/* ============================================================
   BOTÃO LIQUID GLASS
   Referência: pílula "App Library" do iPhone (imagem do Henrique).
   Ultra transparente, com fio externo dourado do Foco e sombra
   funda embaixo, pra dar a sensação de que pula pra frente da tela.
   ============================================================ */

.vidro{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:19px 40px;
  border-radius:999px;
  text-decoration:none;
  color:var(--osso);
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;

  /* tint quase nulo — o botão herda o preto do fundo de verdade */
  background:rgba(255,255,255,.02);

  /* o vidro em si: SÓ desfoca o que está atrás, sem clarear nada */
  -webkit-backdrop-filter:blur(24px) saturate(106%);
          backdrop-filter:blur(24px) saturate(106%);

  box-shadow:
    /* sombra funda: é ela que joga o botão pra frente da tela */
    0 30px 55px -24px rgba(0,0,0,.85),
    0 6px 18px -8px rgba(0,0,0,.55),
    /* halo dourado bem discreto por fora */
    0 0 30px -12px rgba(226,168,27,.20),
    /* brilho interno no topo (a luz batendo em cima do vidro) */
    inset 0 1px 0 rgba(255,255,255,.42),
    /* e um brilho mais fraco embaixo, como na pílula do iPhone */
    inset 0 -1px 0 rgba(255,255,255,.15);

  transition:transform .35s cubic-bezier(.2,.7,.3,1),
             box-shadow .35s cubic-bezier(.2,.7,.3,1),
             background .35s ease;
}

/* fio externo de 1px — na pílula do iPhone a borda é um fio CLARO com um leve
   tom de cor (lá azul; aqui o dourado do Foco). Anel de gradiente via máscara:
   base branca translúcida, com o dourado aparecendo nas beiradas de cima e de
   baixo, onde a "luz colorida" pega. */
.vidro::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(to bottom,
      rgba(226,168,27,.75)   0%,
      rgba(255,255,255,.55) 18%,
      rgba(255,255,255,.28) 45%,
      rgba(255,255,255,.20) 62%,
      rgba(226,168,27,.65) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:1;
}

/* lustro: um sopro de luz no topo do vidro — discreto pra não clarear o preto */
.vidro::after{
  content:'';
  position:absolute; inset:1px;
  border-radius:inherit;
  background:linear-gradient(to bottom,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.015) 34%,
      rgba(255,255,255,0)   58%);
  pointer-events:none;
  z-index:1;
}

.vidro-conteudo{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:12px;
  font-size:15px; font-weight:500; letter-spacing:.005em;
  white-space:nowrap;
}

.vidro-seta{
  width:19px; height:19px; flex:none;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}

/* dedo em cima / mouse em cima: o vidro sobe mais um pouco */
.vidro:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.045);
  box-shadow:
    0 38px 62px -24px rgba(0,0,0,.88),
    0 8px 20px -8px rgba(0,0,0,.55),
    0 0 42px -8px rgba(226,168,27,.38),
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(255,255,255,.18);
}
.vidro:hover .vidro-seta{transform:translateX(4px)}

/* apertou: o vidro afunda de volta */
.vidro:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    0 14px 28px -18px rgba(0,0,0,.85),
    0 0 26px -12px rgba(226,168,27,.24),
    inset 0 1px 0 rgba(255,255,255,.34);
}

.vidro:focus-visible{
  outline:2px solid rgba(226,168,27,.75);
  outline-offset:4px;
}

/* ---------- ressalva sob o botão ---------- */

.ressalva{
  margin:20px 0 0;
  font-size:12.16px;
  font-style:italic;
  line-height:18.24px;
  color:rgba(241,241,239,.88);   /* branco bem mais claro — estava sumindo */
}

/* ============================================================
   A CORTINA DA APLICAÇÃO (o formulário em etapas)
   Mesma anatomia da referência: topo com "PASSO X DE Y" + Fechar,
   barra de progresso fininha no topo, pergunta grande em serifada,
   opção = linha inteira com fio divisório e barrinha dourada.
   ============================================================ */

.aplicacao{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column;
  background:#050607;
  opacity:0; transform:translateY(26px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.3,1);
}

/* CRÍTICO: enquanto fechada, a cortina não pode existir na tela — sem isto,
   o display:flex acima anula o `hidden` e ela fica invisível POR CIMA da
   página, engolindo o toque no botão (bug pego pelo robô de teste). */
.aplicacao[hidden]{display:none}
.aplicacao.aberta{opacity:1; transform:none}

/* barra de progresso colada no topo da tela */
.apl-progresso{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:rgba(241,241,239,.10);
}
.apl-progresso-cheio{
  display:block; height:100%; width:20%;
  background:var(--dourado);
  transition:width .45s ease;
}

.apl-topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(20px + env(safe-area-inset-top)) 24px 12px;
}

.apl-passo{
  font-size:10.88px; font-weight:500;
  letter-spacing:3.05px; text-transform:uppercase;
  color:var(--cinza-rotulo);
}
.apl-passo b{font-weight:500}

.apl-fechar{
  display:flex; align-items:center; gap:7px;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:13.5px;
  color:var(--osso-suave);
  padding:6px 0;
}
.apl-fechar span{font-size:17px; line-height:1}
.apl-fechar:hover{color:var(--osso)}

.apl-corpo{
  flex:1; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  width:100%; max-width:720px; margin:0 auto;
  padding:8px 24px 24px;
}

/* a pergunta fica CONGELADA no topo enquanto a lista de opções rola por baixo:
   o sticky prende ela no teto da área de rolagem, e o degradê no fundo faz as
   opções sumirem suavemente ao passar por trás dela */
.apl-pergunta{
  position:sticky; top:0; z-index:2;
  margin:0 0 14px;
  padding:16px 0 18px;
  background:linear-gradient(to bottom, #050607 78%, rgba(5,6,7,0));
  font-family:'Libre Baskerville', Baskerville, 'Times New Roman', serif;
  font-weight:400;
  font-size:clamp(27px, 7.6vw, 34px);
  line-height:1.0;
  letter-spacing:-.015em;
  color:var(--osso);
}

.apl-opcoes{
  list-style:none; margin:0; padding:0;
  border-top:1px solid rgba(241,241,239,.07);
}
.apl-opcoes li{border-bottom:1px solid rgba(241,241,239,.07)}

.apl-opcoes button{
  position:relative;
  width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:16px; font-weight:400;
  line-height:1.35;
  color:rgba(241,241,239,.82);
  padding:15px 12px;
  transition:color .25s ease, background-color .25s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;   /* toque não seleciona o texto */
}
.apl-opcoes button:hover{background:rgba(241,241,239,.022)}

/* a barrinha dourada da esquerda, que cresce quando a opção é escolhida */
.apl-opcoes button::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--dourado);
  transform:scaleY(0); transform-origin:top;
  transition:transform .3s ease;
}
.apl-opcoes button[aria-checked="true"]{
  color:var(--osso);
  background:rgba(241,241,239,.03);
}
.apl-opcoes button[aria-checked="true"]::before{transform:scaleY(1)}

/* aviso de escolha forçada — vermelho do manual, clareado pra ler no preto */
.apl-erro{
  margin:16px 0 0;
  font-size:13.5px;
  color:#E25C50;
}

.apl-nota{
  margin:0;
  font-size:14px; font-weight:300;
  color:var(--osso-fraco);
}

/* ---------- campos de digitar (nome, whatsapp, e-mail, "quais") ----------
   Anatomia da referência: rótulo MAIÚSCULO minúsculo em cima, campo sem
   caixinha — só uma linha embaixo, que vira dourada no foco. */

.apl-campos{
  display:flex; flex-direction:column; gap:34px;
  margin-top:10px;
}

.apl-rotulo{
  display:block;
  margin-bottom:8px;
  font-size:10.88px; font-weight:500;
  letter-spacing:3.05px; text-transform:uppercase;
  color:var(--cinza-rotulo);
}
.apl-rotulo small{
  font-size:11px; font-weight:300;
  letter-spacing:normal; text-transform:none;
  color:var(--osso-fraco);
  margin-left:6px;
}

.apl-campo{
  width:100%;
  background:none; border:0; border-radius:0;
  border-bottom:1px solid rgba(241,241,239,.18);
  padding:10px 2px 12px;
  font-family:inherit; font-size:17px; font-weight:300;
  color:var(--osso);
  outline:none;
  transition:border-color .25s ease;
}
.apl-campo:focus{border-bottom-color:var(--dourado)}
.apl-campo::placeholder{color:rgba(241,241,239,.28)}
.apl-campo.invalido{border-bottom-color:#E25C50}

/* o campo "Quais?" que só aparece quando a resposta é Sim */
.apl-campo-extra{margin-top:30px}
.apl-campo-extra[hidden]{display:none}

/* ---------- o visor + a barrinha de arrastar (pergunta do tempo) ---------- */

/* o número gigante que mostra a escolha */
.apl-visor{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:40px 0 8px;
  min-height:clamp(96px, 27vw, 128px);   /* mesma altura com número OU frase */
  font-family:'Libre Baskerville', Baskerville, 'Times New Roman', serif;
  text-align:center;
}
#visor-numero{
  font-size:clamp(78px, 25vw, 118px);
  line-height:1;
  color:var(--osso);
}

/* na ponta esquerda da barrinha o visor vira frase: "ainda não terminei..." */
.apl-visor--frase #visor-numero{
  font-size:clamp(25px, 7vw, 33px);
  line-height:1.2;
  max-width:20ch;
}
.apl-visor-unidade{
  font-family:'Poppins', sans-serif;
  font-size:17px; font-weight:300;
  color:var(--osso-suave);
}

/* a barrinha: trilho fino que enche de dourado até onde o dedo levou */
.apl-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2px;
  margin:34px 0 6px;
  border-radius:2px;
  background:linear-gradient(to right,
      var(--dourado) var(--pct, 0%),
      rgba(241,241,239,.15) var(--pct, 0%));
  outline:none;
  cursor:pointer;
}
.apl-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; border-radius:50%;
  background:#0D0E10;
  border:1px solid rgba(226,168,27,.9);
  box-shadow:0 6px 16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22);
  cursor:grab;
}
.apl-slider::-moz-range-thumb{
  width:28px; height:28px; border-radius:50%;
  background:#0D0E10;
  border:1px solid rgba(226,168,27,.9);
  box-shadow:0 6px 16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22);
  cursor:grab;
}
.apl-slider:active::-webkit-slider-thumb{cursor:grabbing}
.apl-slider:focus-visible{outline:2px solid rgba(226,168,27,.6); outline-offset:8px}

/* os numerozinhos de referência embaixo do trilho — cada um cravado na
   posição exata da sua parada (por isso o position:absolute com left:%) */
.apl-slider-marcas{
  position:relative;
  height:18px;
  margin-top:14px;
  font-size:11px; letter-spacing:.5px;
  color:var(--osso-fraco);
}
.apl-slider-marcas span{
  position:absolute; top:0;
  transform:translateX(-50%);
}
.apl-slider-marcas span:first-child{transform:none}
.apl-slider-marcas span:last-child{transform:translateX(-100%)}

.apl-rodape{
  width:100%; max-width:720px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:14px 24px calc(22px + env(safe-area-inset-bottom));
}

/* o rodapé sempre empurra o Continuar pra direita, com ou sem Voltar */
.apl-rodape .vidro-form{margin-left:auto}

.apl-voltar{
  display:flex; align-items:center; gap:11px;
  background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:17px; font-weight:400;
  color:var(--osso-suave);
  padding:16px 10px 16px 4px;   /* área de toque generosa pro dedo */
  transition:color .25s ease;
}
.apl-voltar svg{width:22px; height:22px}
.apl-voltar:hover{color:var(--osso)}
.apl-voltar[hidden]{display:none}   /* mesma pegadinha do display:flex vs hidden */

/* o Continuar reaproveita o vidro do botão principal, um pouco menor */
.vidro-form{
  border:0; font-family:inherit;
  appearance:none; -webkit-appearance:none;
  cursor:pointer;
  padding:16px 34px;
  transition:padding .3s ease, transform .35s cubic-bezier(.2,.7,.3,1),
             box-shadow .35s cubic-bezier(.2,.7,.3,1), background .35s ease;
}

/* na última etapa o botão é o "Enviar aplicação" — cresce, porque é o clique
   que fecha o lead (o script põe esta classe quando chega no passo final) */
.vidro-form.vidro-enviar{padding:21px 30px}
.vidro-form.vidro-enviar .vidro-conteudo{font-size:16.5px; gap:10px}

/* na etapa de envio o Voltar encolhe um pouco pra o botão grande caber */
.apl-rodape:has(.vidro-enviar) .apl-voltar{font-size:15px; padding-right:0}

/* o deslizar entre etapas — avançar vai pra esquerda, voltar vai pra direita */
.etapa.sai{animation:etapaSai .3s ease forwards}
.etapa.entra{animation:etapaEntra .4s cubic-bezier(.2,.7,.3,1)}
.etapa.sai-volta{animation:etapaSaiVolta .3s ease forwards}
.etapa.entra-volta{animation:etapaEntraVolta .4s cubic-bezier(.2,.7,.3,1)}
@keyframes etapaSai{to{opacity:0; transform:translateX(-30px)}}
@keyframes etapaEntra{from{opacity:0; transform:translateX(34px)}}
@keyframes etapaSaiVolta{to{opacity:0; transform:translateX(30px)}}
@keyframes etapaEntraVolta{from{opacity:0; transform:translateX(-34px)}}

/* ---------- telas maiores ---------- */

@media (min-width:768px){
  .topo{padding-top:24px}
  .logo{width:150px}

  /* desktop: bloco centralizado de verdade e letras maiores */
  .palco{
    justify-content:center;
    padding:40px 24px 64px;
    max-width:720px;
  }
  .sobretitulo{font-size:13px; line-height:22px; letter-spacing:3.6px; margin-bottom:30px}
  .marca{font-size:60px}
  .texto{font-size:19px; line-height:1.68; max-width:54ch; margin-bottom:44px}
  .vidro{padding:22px 46px}
  .vidro-conteudo{font-size:16.5px}
  .ressalva{font-size:14px; margin-top:24px}

  /* a cortina em tela grande */
  .apl-topo{padding:26px 40px 12px}
  .apl-corpo{padding:16px 40px 32px}
  .apl-pergunta{font-size:42px; margin:22px 0 32px}
  .apl-opcoes button{font-size:17.5px; padding:17px 14px}
  .apl-rodape{padding:16px 40px 30px}
  .vidro-form{padding:18px 40px}
  .vidro-form.vidro-enviar{padding:24px 54px}
  .vidro-form.vidro-enviar .vidro-conteudo{font-size:18px}
}

/* ---------- quem pediu menos animação no aparelho ---------- */

@media (prefers-reduced-motion:reduce){
  .vidro,.vidro-seta{transition:none}
  .vidro:hover{transform:none}
  .aplicacao{transition:opacity .2s ease; transform:none}
  .etapa.sai,.etapa.entra,.etapa.sai-volta,.etapa.entra-volta{animation:none}
}

/* ---------- dica "arraste para escolher" (pergunta da residência) ---------- */

.apl-dica{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:30px 0 0; padding:0;
  font-family:'Poppins',system-ui,sans-serif; font-weight:300;
  font-size:14px; letter-spacing:.02em; color:var(--osso-fraco);
  transition:opacity .45s ease, transform .45s ease;
}
.apl-dica-dedo{
  display:inline-flex; width:20px; height:20px; color:var(--dourado);
  animation:dica-arrasta 2.4s ease-in-out infinite;
}
.apl-dica-dedo svg{width:100%;height:100%}

/* some de vez assim que a pessoa encosta na barrinha */
.apl-dica--fim{ opacity:0; transform:translateY(4px); pointer-events:none; }

@keyframes dica-arrasta{
  0%,100%{ transform:translateX(-13px) }
  50%    { transform:translateX(13px)  }
}

/* quem pediu menos animação no sistema não vê o dedo se mexendo */
@media (prefers-reduced-motion:reduce){
  .apl-dica-dedo{ animation:none }
}

@media (min-width:768px){
  .apl-dica{ font-size:15px; margin-top:34px }
  .apl-dica-dedo{ width:22px; height:22px }
}

/* ---------- caixinha "ainda não terminei a residência" ---------- */

.apl-caixinha{
  display:flex; align-items:center; gap:13px;
  width:100%; margin:34px 0 0; padding:17px 20px;
  border:1px solid rgba(241,241,239,.16); border-radius:14px;
  background:rgba(241,241,239,.03);
  font-family:'Poppins',system-ui,sans-serif; font-weight:300; font-size:16px;
  color:var(--osso-suave); text-align:left; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.apl-caixinha:hover{ border-color:rgba(241,241,239,.3) }

/* o input de verdade fica escondido; quem aparece é o quadradinho desenhado */
.apl-caixinha input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.apl-caixinha-marca{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:6px;
  border:1px solid rgba(241,241,239,.35);
  color:var(--preto); transition:all .18s ease;
}
.apl-caixinha-marca svg{ width:15px; height:15px; opacity:0; transition:opacity .18s ease }

/* marcada: quadradinho dourado com o tique preto dentro */
.apl-caixinha:has(input:checked){
  border-color:var(--dourado);
  background:rgba(226,168,27,.10);
  color:var(--osso);
}
.apl-caixinha:has(input:checked) .apl-caixinha-marca{
  background:var(--dourado); border-color:var(--dourado);
}
.apl-caixinha:has(input:checked) .apl-caixinha-marca svg{ opacity:1 }

.apl-caixinha:has(input:focus-visible){
  outline:2px solid rgba(226,168,27,.6); outline-offset:3px;
}

/* com a caixinha marcada, a barrinha e a dica saem de cena */
.etapa--sem-barrinha .apl-slider,
.etapa--sem-barrinha .apl-slider-marcas,
.etapa--sem-barrinha .apl-dica{
  opacity:.22; pointer-events:none; transition:opacity .3s ease;
}

@media (min-width:768px){
  .apl-caixinha{ font-size:17px; padding:19px 22px }
}

/* ---------- ajustes 01/09: sufixo "ou antes" + caixinha menor ---------- */

/* o "ou antes" é secundário: fica pequeno ao lado do ano, nunca no corpão dele */
.apl-visor-unidade{
  align-self:flex-end;
  margin-bottom:.9em;
  font-size:19px;
  line-height:1;
  white-space:nowrap;
}
.apl-visor-unidade[hidden]{display:none}

/* a caixinha encolhe: vira uma pastilha discreta, não um bloco */
.apl-caixinha{
  /* fit-content + align-self porque a etapa é uma coluna flex: sem isso
     a pastilha estica na largura toda e some a sensação de "detalhe" */
  width:fit-content; max-width:100%; align-self:center;
  margin:26px auto 0; padding:10px 15px;
  gap:9px; border-radius:11px;
  font-size:11px; letter-spacing:.01em;
}
.apl-caixinha-marca{ width:15px; height:15px; border-radius:4px }
.apl-caixinha-marca svg{ width:10px; height:10px; stroke-width:3.4 }

@media (min-width:768px){
  .apl-visor-unidade{ font-size:22px }
  .apl-caixinha{ font-size:12px; padding:11px 17px }
}

/* Armadilha pra robô de spam (ver index.html): fora da tela, sem ocupar espaço. */
.apl-armadilha{ position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none }