/* ============================================================
   DOXA WEBINARS — A ESCALA DO MÊS
   A folha da escala de plantão presa no quadro da copa.
   Feltro verde-hospital, sulfite com grão de fotocópia, tinta
   laser, caneta esferográfica azul, carimbo de anilina roxo e
   marca-texto amarelo — a única tinta viva, reservada ao
   próximo encontro. Sem card, sem gradiente, sem vidro:
   rubrica, carimbo, risco de caneta e furo de percevejo.
   ============================================================ */

:root {
  /* material */
  --quadro:     #10312B;
  --quadro-2:   #0B241F;
  --quadro-3:   #17423A;
  --folha:      #FBFBF7;
  --folha-2:    #F1F0E9;
  --folha-3:    #E4E3D9;

  /* tintas */
  --tinta:      #16171A;
  --tinta-2:    #5A5C63;
  --tinta-3:    #8B8D94;
  --caneta:     #1B3FD1;
  --carimbo:    #5400C3;
  --marca:      #F2E600;
  --sangue:     #B3251E;
  --wa:         #1E8E4E;

  /* tintas sobre o quadro */
  --giz:        #DCE7DF;
  --giz-2:      #9DB3A6;
  --giz-3:      #8AA396;

  /* traço */
  --fio:        #D5D4C9;
  --fio-forte:  #9C9B90;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mao:     'Caveat', 'Bradley Hand', cursive;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 132px;

  --maxw: 1140px;
  --gutter: 22px;

  --saida: cubic-bezier(.16, 1, .3, 1);
  --sombra-folha: 0 2px 3px rgba(0,0,0,.28), 0 18px 34px rgba(0,0,0,.40), 0 44px 90px rgba(0,0,0,.34);
  --sombra-papel: 0 1px 2px rgba(0,0,0,.26), 0 10px 22px rgba(0,0,0,.34);
  --sombra-objeto: 0 1px 2px rgba(0,0,0,.24), 0 6px 16px rgba(0,0,0,.30);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
fieldset { border: 0; display: block; }
legend { padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--quadro-3) var(--quadro-2);
}

body {
  font-family: var(--display);
  font-variation-settings: 'wdth' 100;
  background: var(--quadro);
  color: var(--giz);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* feltro do quadro: fibra fina + vinheta, uma camada fixa só */
body::before {
  content: ''; position: fixed; inset: -2px; z-index: 0; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(140% 90% at 50% 0%, rgba(255,255,255,.07), transparent 55%),
              radial-gradient(120% 100% at 50% 100%, rgba(0,0,0,.42), transparent 60%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; font-family: var(--display); }
button { cursor: pointer; background: none; border: 0; }

::selection { background: var(--marca); color: var(--tinta); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.filtros { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── foco: roxo de carimbo no papel, amarelo no quadro ───────────────── */
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 2px; }
.folha :focus-visible,
.papel :focus-visible,
.objeto :focus-visible { outline-color: var(--carimbo); }

.pular {
  position: absolute; left: var(--s4); top: -100px; z-index: 60;
  background: var(--marca); color: var(--tinta);
  padding: 10px 16px; font-weight: 700; font-size: 14px;
  transition: top .18s var(--saida);
}
.pular:focus { top: var(--s4); }

.envelope { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* ══════════════════════════════════════════════════════════════════════
   PAPEL — a matéria comum de tudo que está pregado no quadro
   ══════════════════════════════════════════════════════════════════════ */
.folha, .papel, .objeto {
  position: relative;
  background: var(--folha);
  color: var(--tinta);
}
.folha::after, .papel::after, .objeto::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='.24'/%3E%3C/svg%3E");
}

/* percevejo */
.percevejo {
  position: absolute; z-index: 3; width: 20px; height: 20px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}
.percevejo-tl { top: -8px; left: 26px; }
.percevejo-tr { top: -8px; right: 26px; }
.percevejo-bl { bottom: -8px; left: 26px; }
.percevejo-br { bottom: -8px; right: 26px; }

/* ══════════════════════════════════════════════════════════════════════
   A FOLHA DA ESCALA
   ══════════════════════════════════════════════════════════════════════ */
.escala-area { padding-block: clamp(28px, 6vw, 74px) 0; }

.folha-escala {
  transform: rotate(-.2deg);
  box-shadow: var(--sombra-folha);
  padding: clamp(20px, 3.4vw, 44px) clamp(18px, 3.6vw, 52px) clamp(28px, 4vw, 54px);
}

/* timbre */
.timbre {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 2px solid var(--tinta);
}
.timbre-marca { justify-self: start; }
.timbre-marca img { height: 30px; width: auto; }
.timbre .carimbo-gratuito { justify-self: end; }
.timbre-doc { text-align: center; }
.timbre-tipo {
  display: block;
  font-variation-settings: 'wdth' 118;
  font-weight: 700; font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: .18em; text-transform: uppercase; color: var(--tinta);
}
.timbre-sub {
  display: block; margin-top: 3px;
  font-size: clamp(11px, 1.2vw, 12.5px); letter-spacing: .04em;
  color: var(--tinta-2); font-variation-settings: 'wdth' 92;
}

/* carimbo de anilina */
/* A moldura é que borra na fibra do papel; o texto do carimbo continua legível.
   Filtrar o bloco inteiro destruía qualquer letra abaixo de 14px. */
.carimbo, .selo-linha, .passo-obrigatorio, .reconhecimento, .carimbo-confirmado {
  position: relative;
  color: var(--carimbo);
  background: none;
}
.carimbo::before, .selo-linha::before, .passo-obrigatorio::before,
.reconhecimento::before, .carimbo-confirmado::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 2.5px solid currentColor;
  filter: url(#tintaSeca);
  opacity: .88;
}
.carimbo {
  display: inline-block;
  font-variation-settings: 'wdth' 116;
  font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1;
  padding: 7px 11px 6px;
}
.carimbo-gratuito { font-size: 13px; transform: rotate(-6deg); }

/* cabeça do documento */
.doc-cabeca { padding-block: clamp(24px, 4vw, 46px) clamp(18px, 2.4vw, 28px); }
.doc-titulo {
  font-variation-settings: 'wdth' 96;
  font-weight: 800;
  font-size: clamp(31px, 5.4vw, 64px);
  line-height: .99;
  letter-spacing: -.032em;
  text-wrap: balance;
  max-width: 19ch;
}
.doc-titulo b { font-weight: 800; color: var(--carimbo); }
.doc-lead {
  margin-top: var(--s5);
  max-width: 62ch;
  font-size: clamp(15.5px, 1.6vw, 18px);
  color: var(--tinta-2);
  line-height: 1.6;
}
.doc-lead strong { color: var(--tinta); font-weight: 600; }

/* ── a grade ─────────────────────────────────────────────────────────── */
.grade-cabecalho, .linha-corpo {
  display: grid;
  grid-template-columns: 148px 116px minmax(0, 1fr) 190px;
  gap: var(--s5);
  align-items: start;
}
.grade-cabecalho {
  padding: 9px 0 7px;
  border-top: 1.5px solid var(--tinta);
  border-bottom: 1.5px solid var(--tinta);
  font-variation-settings: 'wdth' 120;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-2);
}

.grade { list-style: none; }

.linha { position: relative; border-bottom: 1px solid var(--fio); }
.linha-corpo { padding-block: clamp(18px, 2.4vw, 26px); position: relative; z-index: 2; }

/* a passada de marca-texto: a única tinta viva da página */
.marca-texto {
  position: absolute; z-index: 1; pointer-events: none;
  left: -12px; right: -12px; top: 6px; bottom: 6px;
  background: var(--marca);
  mix-blend-mode: multiply;
  filter: url(#rasgada);
  transform-origin: left center;
  clip-path: inset(0 100% 0 0);
}
.linha-proxima .marca-texto { animation: passar .78s var(--saida) .45s forwards; }
@keyframes passar { to { clip-path: inset(0 0 0 0); } }

/* sobre o amarelo, a tinta mais clara da folha deixa de passar no contraste */
.linha-proxima .tema { color: var(--tinta-2); }
.linha-proxima .tema::before { background: var(--tinta-2); }
.linha-proxima .cel-assunto p { color: #3B3D43; }

.cel-data { display: flex; flex-direction: column; gap: 2px; }
.dia-numero {
  font-variation-settings: 'wdth' 74;
  font-weight: 800;
  font-size: clamp(40px, 5.4vw, 62px);
  line-height: .82;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dia-mes {
  font-variation-settings: 'wdth' 120;
  font-weight: 700; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-2);
}
/* a contagem mora no rótulo da linha, não num contador no topo */
.dia-falta {
  margin-top: 5px;
  font-family: var(--mao); font-size: 19px; line-height: 1;
  color: var(--caneta); transform: rotate(-1.6deg);
}

.cel-hora { padding-top: 5px; }
.hora-dia {
  display: block; font-weight: 700; font-size: 14.5px;
  font-variation-settings: 'wdth' 92;
}
.hora-num {
  display: block; margin-top: 2px;
  font-size: 14.5px; color: var(--tinta-2); font-variant-numeric: tabular-nums;
}

.cel-assunto h3 {
  font-variation-settings: 'wdth' 94;
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.14;
  letter-spacing: -.017em;
  text-wrap: balance;
}
.cel-assunto p {
  margin-top: var(--s3); max-width: 58ch;
  font-size: 15px; line-height: 1.55; color: var(--tinta-2);
}
.temas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: var(--s4); }
.tema {
  position: relative; padding-left: 15px;
  font-size: 13px; color: var(--tinta-2); font-variation-settings: 'wdth' 90;
}
.tema::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 1.5px; background: var(--tinta-3);
}

.apresentadores {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--fio-forte);
}
.apresentadores li { display: flex; flex-direction: column; gap: 2px; max-width: 34ch; }
.apresentadores b { font-weight: 700; font-size: 15px; color: var(--tinta); }
.apresentadores span { font-size: 13px; line-height: 1.4; color: var(--tinta-2); font-variation-settings: 'wdth' 90; }

.cel-acao { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding-top: 4px; }

/* a caixa que a caneta preenche */
.pegar {
  display: inline-flex; align-items: center; gap: 9px;
  font-variation-settings: 'wdth' 112;
  font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--caneta);
  padding: 7px 12px 7px 8px;
  border: 1.5px solid transparent;
  transition: border-color .18s var(--saida), background-color .18s var(--saida);
}
.pegar .caixa {
  position: relative; width: 17px; height: 17px; flex: none;
  border: 1.8px solid var(--caneta);
}
.pegar .caixa::after {
  content: ''; position: absolute; left: 3px; top: 6px; width: 10px; height: 5px;
  border-left: 2.2px solid var(--caneta); border-bottom: 2.2px solid var(--caneta);
  transform: rotate(-45deg) scale(.2); transform-origin: center; opacity: 0;
  transition: transform .22s var(--saida), opacity .16s linear;
}
.pegar:hover, .pegar:focus-visible { border-color: var(--caneta); background: rgba(27,63,209,.06); }
.pegar:hover .caixa::after, .pegar:focus-visible .caixa::after { transform: rotate(-45deg) scale(1); opacity: 1; }

.selo-linha {
  display: inline-block;
  font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px 4px; transform: rotate(-3deg);
}
.selo-linha::before { border-width: 2px; }

/* encontro realizado: fica na grade, riscado e datado */
.linha-passada .linha-corpo { opacity: .58; }
.linha-passada .cel-assunto h3 { text-decoration: line-through; text-decoration-color: var(--sangue); text-decoration-thickness: 2px; }
.linha-passada .selo-linha { color: var(--tinta-3); }
.gravacao-atras {
  font-family: var(--mao); font-size: 18px; color: var(--sangue);
  transform: rotate(-1.2deg);
}

/* ══════════════════════════════════════════════════════════════════════
   ASSINATURA — o formulário como campo de assinatura da folha
   ══════════════════════════════════════════════════════════════════════ */
.assinatura { margin-top: clamp(34px, 4.6vw, 62px); border-top: 2px solid var(--tinta); padding-top: var(--s5); }

.assinatura-cabeca { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.assinatura-cabeca h2 {
  font-variation-settings: 'wdth' 100;
  font-weight: 800; font-size: clamp(23px, 2.8vw, 33px); line-height: 1.06; letter-spacing: -.024em;
}
.assinatura-nota { font-size: 14px; color: var(--tinta-2); max-width: 46ch; }

.campos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s7); margin-top: clamp(24px, 3vw, 38px);
}
.campo { display: flex; flex-direction: column; }
.campo-largo { grid-column: 1 / -1; }
.campo > label, .campo .rotulo {
  font-variation-settings: 'wdth' 118;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-2); margin-bottom: 7px;
}
.req { color: var(--sangue); }

/* campos são linhas de formulário em papel, não caixas */
.entrada {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1.5px solid var(--fio-forte);
  padding: 7px 2px 9px;
  font-size: 17px; font-weight: 500; color: var(--tinta);
  caret-color: var(--caneta);
  transition: border-color .16s var(--saida), box-shadow .16s var(--saida);
}
.entrada::placeholder { color: var(--tinta-3); font-weight: 400; }
.entrada:hover { border-bottom-color: var(--tinta-2); }
.entrada:focus { outline: 0; border-bottom-color: var(--caneta); box-shadow: 0 1.5px 0 0 var(--caneta); }
.entrada[aria-invalid="true"] { border-bottom-color: var(--sangue); box-shadow: 0 1.5px 0 0 var(--sangue); }
select.entrada {
  appearance: none; cursor: pointer; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%235A5C63' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.linha-dupla { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s4); }

/* "pegar este" marca o campo escolhido com a mesma tinta viva da escala */
.entrada.destacado { animation: marcarCampo 1.6s var(--saida); }
@keyframes marcarCampo {
  0%, 62%  { background-color: rgba(242,230,0,.6); border-bottom-color: var(--caneta); }
  100%     { background-color: transparent; }
}

/* perfil: quadrinhos de formulário */
.opcoes { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding-top: 2px; }
.opcao { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 15.5px; font-weight: 500; }
.opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.marca-caixa {
  position: relative; width: 18px; height: 18px; flex: none;
  border: 1.8px solid var(--fio-forte); transition: border-color .16s var(--saida);
}
.marca-caixa::after {
  content: ''; position: absolute; inset: 3px; background: var(--caneta);
  transform: scale(.2); opacity: 0; transition: transform .2s var(--saida), opacity .14s linear;
}
.opcao:hover .marca-caixa, .termo:hover .marca-caixa { border-color: var(--caneta); }
input:checked + .marca-caixa { border-color: var(--caneta); }
input:checked + .marca-caixa::after { transform: scale(1); opacity: 1; }
input:focus-visible + .marca-caixa { outline: 3px solid var(--carimbo); outline-offset: 2px; }
input[aria-invalid="true"] + .marca-caixa { border-color: var(--sangue); }

/* consentimento: o termo no pé da folha */
.termo {
  display: flex; gap: var(--s3); align-items: flex-start;
  grid-column: 1 / -1; margin-top: var(--s2);
  padding: var(--s4); border: 1.5px solid var(--fio);
  background: var(--folha-2);
  font-size: 13.5px; line-height: 1.5; color: var(--tinta-2); cursor: pointer;
}
.termo input { position: absolute; opacity: 0; width: 0; height: 0; }
.termo .marca-caixa { margin-top: 2px; }
.termo a { color: var(--carimbo); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* o botão é o ato de assinar */
.assinar {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 19px 26px;
  background: var(--carimbo); color: #fff;
  font-variation-settings: 'wdth' 114;
  font-weight: 800; font-size: clamp(15px, 1.7vw, 17px);
  letter-spacing: .1em; text-transform: uppercase;
  border: 0;
  transition: background-color .18s var(--saida), transform .12s var(--saida), box-shadow .18s var(--saida);
  box-shadow: 0 2px 4px rgba(23,11,41,.24), 0 12px 26px rgba(41,0,96,.30);
}
.assinar:hover { background: #4600A6; box-shadow: 0 3px 6px rgba(23,11,41,.26), 0 18px 34px rgba(41,0,96,.34); }
.assinar:active { transform: translateY(2px); box-shadow: 0 1px 3px rgba(23,11,41,.24), 0 7px 16px rgba(41,0,96,.28); }
.assinar[data-loading="true"] { pointer-events: none; opacity: .72; }
.assinar .giro { display: none; width: 17px; height: 17px; border: 2.4px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: girar .7s linear infinite; }
.assinar[data-loading="true"] .giro { display: block; }
.assinar[data-loading="true"] .seta { display: none; }
@keyframes girar { to { transform: rotate(360deg); } }

.rodape-form { grid-column: 1 / -1; font-size: 13px; color: var(--tinta-3); margin-top: -6px; }

.erro-form {
  grid-column: 1 / -1; display: none;
  border: 1.5px solid var(--sangue); background: rgba(179,37,30,.06);
  padding: 12px 14px; font-size: 14.5px; font-weight: 600; color: var(--sangue);
}
.erro-form.is-visible { display: block; }

/* ── confirmado ──────────────────────────────────────────────────────── */
.confirmado { display: none; padding-top: var(--s5); }
.confirmado.is-visible { display: block; }
.confirmado-topo { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.carimbo-confirmado {
  display: inline-block;
  font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: clamp(15px, 2vw, 20px); letter-spacing: .12em; text-transform: uppercase;
  padding: 9px 14px 8px;
  animation: bater .5s var(--saida) both;
}
.carimbo-confirmado::before { border-width: 3px; }
@keyframes bater {
  0%   { transform: rotate(-16deg) scale(1.9); opacity: 0; }
  60%  { transform: rotate(-5deg) scale(.96); opacity: 1; }
  100% { transform: rotate(-4deg) scale(1); opacity: .92; }
}
.confirmado h2 { font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.022em; line-height: 1.08; }
.confirmado > p { margin-top: var(--s3); max-width: 56ch; color: var(--tinta-2); font-size: 15.5px; }

.etapa-2 {
  margin-top: var(--s5); padding: var(--s4) var(--s5);
  border: 1.5px dashed var(--fio-forte); background: var(--folha-2);
}
.etapa-2 strong { display: block; font-variation-settings: 'wdth' 116; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--carimbo); }
.etapa-2 span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--tinta-2); }

.botao-wa {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; margin-top: var(--s4); padding: 17px 22px;
  background: var(--wa); color: #fff;
  font-variation-settings: 'wdth' 112;
  font-weight: 800; font-size: 15.5px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(10,45,26,.24), 0 12px 24px rgba(10,45,26,.26);
  transition: background-color .18s var(--saida), transform .12s var(--saida);
}
.botao-wa:hover { background: #187A43; }
.botao-wa:active { transform: translateY(2px); }
.botao-wa[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.confirmado-extras { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.botao-vazado {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 16px; border: 1.5px solid var(--fio-forte);
  font-size: 14px; font-weight: 600; color: var(--tinta-2);
  transition: border-color .16s var(--saida), color .16s var(--saida);
}
.botao-vazado:hover { border-color: var(--caneta); color: var(--caneta); }

/* ══════════════════════════════════════════════════════════════════════
   FICHA FIXA — o índice preso no canto do quadro
   ══════════════════════════════════════════════════════════════════════ */
.ficha-fixa {
  position: fixed; z-index: 40; right: 20px; top: 18px;
  display: flex; align-items: center; gap: var(--s4);
  padding: 11px 13px 11px 15px;
  background: var(--folha); color: var(--tinta);
  box-shadow: var(--sombra-objeto);
  transform: rotate(1.1deg) translateY(-140%);
  opacity: 0; pointer-events: none;
  transition: transform .34s var(--saida), opacity .24s linear;
}
.ficha-fixa.is-visible { transform: rotate(1.1deg) translateY(0); opacity: 1; pointer-events: auto; }
.ficha-quando { line-height: 1.2; }
.ficha-quando b {
  display: block; font-variation-settings: 'wdth' 118;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); font-weight: 700;
}
.ficha-quando span { display: block; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ficha-acao {
  padding: 9px 14px; background: var(--carimbo); color: #fff;
  font-variation-settings: 'wdth' 112;
  font-weight: 800; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .16s var(--saida);
}
.ficha-acao:hover { background: #4600A6; }

/* ══════════════════════════════════════════════════════════════════════
   PAPÉIS MENORES PREGADOS NO QUADRO
   ══════════════════════════════════════════════════════════════════════ */
.papel { box-shadow: var(--sombra-papel); padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 42px) clamp(26px, 3.2vw, 44px); }

.titulo-papel {
  font-variation-settings: 'wdth' 98;
  font-weight: 800; font-size: clamp(24px, 3.2vw, 40px); line-height: 1.04;
  letter-spacing: -.028em; text-wrap: balance; max-width: 22ch;
}
.lead-papel { margin-top: var(--s4); max-width: 60ch; color: var(--tinta-2); font-size: clamp(15px, 1.5vw, 16.5px); }

/* o quadro respira em intervalos diferentes: instrução colada na folha,
   objetos com espaço de sobra, o fecho isolado */
.faixa { padding-block: clamp(40px, 5vw, 76px); }
.faixa-colada  { padding-block: clamp(30px, 3.4vw, 50px) clamp(46px, 6vw, 92px); }
.faixa-larga   { padding-block: clamp(52px, 7vw, 108px); }
.faixa-fecho   { padding-block: clamp(58px, 8vw, 124px) clamp(30px, 4vw, 58px); }

/* ── como pegar o plantão ────────────────────────────────────────────── */
.instrucao { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.papel-instrucao { transform: rotate(-.7deg); }
.passos { list-style: none; counter-reset: passo; margin-top: var(--s2); }
.passo {
  counter-increment: passo;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s4);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--fio);
}
.passo:last-child { border-bottom: 0; padding-bottom: 0; }
.passo::before {
  content: counter(passo) '.';
  font-variation-settings: 'wdth' 74;
  font-weight: 800; font-size: 30px; line-height: .9; color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}
.passo h3 { font-weight: 700; font-size: 17.5px; letter-spacing: -.012em; }
.passo p { margin-top: 6px; font-size: 15px; color: var(--tinta-2); max-width: 54ch; }
.passo strong { color: var(--tinta); font-weight: 600; }
.passo-obrigatorio {
  display: inline-block; margin-top: var(--s3);
  font-variation-settings: 'wdth' 116;
  font-weight: 800; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 8px 3px; transform: rotate(-2deg);
}
.passo-obrigatorio::before { border-width: 2px; }

/* ── objetos presos ao quadro ────────────────────────────────────────── */
.objetos-cabeca { max-width: 34ch; margin-bottom: clamp(28px, 4vw, 52px); }
.objetos-cabeca .titulo-papel { color: var(--giz); }
.objetos-cabeca .lead-papel { color: var(--giz-2); }

.objetos {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 3vw, 34px);
  align-items: start;
}
.objeto { padding: var(--s5); box-shadow: var(--sombra-objeto); }
.objeto h3 { font-weight: 700; font-size: 17px; letter-spacing: -.014em; }
.objeto p { margin-top: 9px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); }

/* certificado: paisagem, com linha de nome e carimbo */
.obj-certificado { grid-column: span 7; transform: rotate(-1deg); }
.certificado-linha { margin-top: var(--s5); }
.certificado-linha b {
  display: block; margin-bottom: 4px;
  font-variation-settings: 'wdth' 116;
  font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3);
}
.certificado-linha span {
  display: block; height: 34px;
  border-bottom: 1.5px solid var(--fio-forte);
}

/* etiqueta de gravação */
.obj-gravacao {
  grid-column: span 5; transform: rotate(1.6deg);
  background: var(--folha-2); border: 1.5px solid var(--fio-forte);
  padding-top: var(--s6);
}
.etiqueta-prazo {
  position: absolute; top: -9px; right: 16px;
  font-variation-settings: 'wdth' 118;
  font-weight: 800; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  background: var(--sangue); color: #fff; padding: 5px 9px 4px;
  transform: rotate(2.4deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.26);
}

/* material grampeado: duas folhas deslocadas */
.obj-material {
  grid-column: span 5; transform: rotate(-1.4deg);
  padding-top: calc(var(--s6) + 4px);
  border-bottom: 7px solid var(--folha-2);
}
.grampo {
  position: absolute; top: 16px; left: 11px; width: 32px; height: 16px;
  transform: rotate(-45deg); transform-origin: center;
  opacity: .85;
}

/* cartão de tira-dúvidas */
.obj-duvidas { grid-column: span 7; transform: rotate(.7deg); }
.objeto p.duvida-mao {
  font-family: var(--mao); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08;
  color: var(--caneta); transform: rotate(-1.1deg);
  margin: 0 0 var(--s4); max-width: 20ch;
}

/* ── quem assina a escala ────────────────────────────────────────────── */
.papel-responsavel { transform: rotate(.5deg); }
.responsavel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4.4vw, 64px); align-items: start; }
.responsavel p { margin-top: var(--s4); color: var(--tinta-2); font-size: clamp(15px, 1.5vw, 16.5px); max-width: 56ch; }
.responsavel p strong { color: var(--tinta); font-weight: 600; }

.rubrica { margin-top: clamp(28px, 3.4vw, 44px); max-width: 420px; }
.rubrica-traco { border-bottom: 1.5px solid var(--tinta); height: 44px; position: relative; }
.rubrica-traco span {
  position: absolute; left: 6px; bottom: 4px;
  font-family: var(--mao); font-weight: 700; font-size: 34px; color: var(--caneta);
  transform: rotate(-2.4deg);
}
.rubrica small {
  display: block; margin-top: 7px;
  font-variation-settings: 'wdth' 108;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}

.reconhecimentos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.reconhecimento { padding: var(--s4) var(--s4) 14px; }
.reconhecimento:nth-child(1) { transform: rotate(-2.4deg); }
.reconhecimento:nth-child(2) { transform: rotate(1.6deg); }
.reconhecimento:nth-child(3) { transform: rotate(1.1deg); }
.reconhecimento:nth-child(4) { transform: rotate(-1.7deg); }
.reconhecimento b {
  display: block; font-variation-settings: 'wdth' 122;
  font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
}
.reconhecimento span {
  display: block; margin-top: 7px; font-size: 12.5px; line-height: 1.35;
  font-variation-settings: 'wdth' 96; font-weight: 600;
}

/* ── observações (perguntas) ─────────────────────────────────────────── */
.papel-obs { transform: rotate(-.4deg); }
.obs { list-style: none; margin-top: clamp(22px, 3vw, 34px); border-top: 1.5px solid var(--tinta); }
.obs-item { border-bottom: 1px solid var(--fio); }
.obs-item summary {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 22px; gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s5);
  cursor: pointer; list-style: none;
  font-weight: 700; font-size: clamp(16px, 1.8vw, 18.5px); letter-spacing: -.014em;
  transition: color .16s var(--saida);
}
.obs-item summary::-webkit-details-marker { display: none; }
.obs-item summary:hover { color: var(--caneta); }
.obs-num {
  font-variation-settings: 'wdth' 116;
  font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-3);
}
.obs-mais { position: relative; width: 14px; height: 14px; justify-self: end; align-self: center; }
.obs-mais::before, .obs-mais::after {
  content: ''; position: absolute; background: var(--caneta);
  left: 0; top: 6px; width: 14px; height: 2px;
  transition: transform .22s var(--saida);
}
.obs-mais::after { transform: rotate(90deg); }
.obs-item[open] .obs-mais::after { transform: rotate(0deg); }
.obs-resposta { padding: 0 var(--s5) var(--s5) calc(72px + var(--s4)); }
.obs-resposta p { font-size: 15.5px; line-height: 1.6; color: var(--tinta-2); max-width: 68ch; }
.obs-resposta a { color: var(--carimbo); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }

/* ══════════════════════════════════════════════════════════════════════
   TARJAS DESTACÁVEIS — o fecho
   ══════════════════════════════════════════════════════════════════════ */
.papel-tarjas { transform: rotate(.35deg); padding-bottom: 0; }
.tarjas-topo { text-align: center; padding-bottom: clamp(24px, 3vw, 38px); }
.tarjas-topo .titulo-papel { margin-inline: auto; max-width: 20ch; }
.tarjas-topo p { margin-top: var(--s4); color: var(--tinta-2); font-size: clamp(15px, 1.5vw, 16.5px); max-width: 54ch; margin-inline: auto; }

.tarjas {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-top: 1.5px dashed var(--fio-forte);
}
.tarja {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px;
  padding: var(--s4) 4px var(--s5);
  border-left: 1.5px dashed var(--fio-forte);
  color: var(--tinta-2);
  transition: transform .26s var(--saida), color .18s var(--saida), background-color .18s var(--saida);
}
.tarja:first-child { border-left: 0; }
.tarja b {
  font-variation-settings: 'wdth' 74;
  font-weight: 800; font-size: 15px; letter-spacing: .02em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.tarja span {
  writing-mode: vertical-rl; text-orientation: mixed;
  font-variation-settings: 'wdth' 108;
  font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
}
.tarja:hover, .tarja:focus-visible {
  transform: translateY(9px) rotate(-1.4deg);
  color: var(--carimbo); background: rgba(84,0,195,.05);
}
.tarja:hover b, .tarja:focus-visible b { color: var(--carimbo); }

/* ══════════════════════════════════════════════════════════════════════
   RODAPÉ — impresso no próprio quadro
   ══════════════════════════════════════════════════════════════════════ */
.rodape { padding-block: clamp(44px, 6vw, 80px) clamp(80px, 8vw, 100px); }
.rodape-topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s5); padding-bottom: var(--s5);
  border-bottom: 1px solid rgba(220,231,223,.16);
}
.rodape-marca img { height: 26px; opacity: .92; }
.rodape-links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.rodape-links a {
  font-size: 14px; font-weight: 600; color: var(--giz-2);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; text-decoration-thickness: 1px;
  transition: color .16s var(--saida), text-decoration-color .16s var(--saida);
}
.rodape-links a:hover { color: var(--marca); text-decoration-color: currentColor; }
.rodape-legal { margin-top: var(--s5); font-size: 12.5px; line-height: 1.62; color: var(--giz-3); max-width: 86ch; }

/* barra do celular */
.barra-celular { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   ADAPTAÇÃO
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .instrucao, .responsavel { grid-template-columns: minmax(0, 1fr); }
  .obj-certificado, .obj-duvidas { grid-column: span 12; }
  .obj-gravacao, .obj-material { grid-column: span 6; }
}

@media (max-width: 980px) {
  .grade-cabecalho { display: none; }
  .linha-corpo { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s4) var(--s5); }
  .cel-data   { grid-column: 1; grid-row: 1; }
  .cel-hora   { grid-column: 1; grid-row: 2; padding-top: 0; }
  .cel-assunto { grid-column: 2; grid-row: 1 / span 2; }
  .cel-acao   { grid-column: 1 / -1; grid-row: 3; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s5); }
  .reconhecimentos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root { --gutter: 14px; }
  body { font-size: 16px; }
  .folha-escala { transform: none; padding-inline: 18px; }
  .papel, .objeto { transform: none !important; }
  .timbre { grid-template-columns: auto auto; justify-content: space-between; gap: var(--s3) var(--s4); }
  .timbre-doc { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .timbre-marca img { height: 26px; }
  .carimbo-gratuito { font-size: 9.5px; letter-spacing: .07em; padding: 4px 7px 3px; transform: rotate(-5deg); }
  .doc-titulo { max-width: none; }

  .linha-corpo { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-block: var(--s5); }
  .cel-data, .cel-hora, .cel-assunto, .cel-acao { grid-column: 1; grid-row: auto; }
  .cel-data { flex-direction: row; align-items: baseline; gap: 9px; flex-wrap: wrap; }
  .dia-numero { font-size: 38px; }
  .dia-falta { margin-top: 0; }
  .cel-hora { display: block; padding-top: 0; }
  .hora-dia, .hora-num { display: inline; font-size: 14px; }
  .hora-num::before { content: ' · '; }
  .cel-acao { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4); margin-top: var(--s2); }
  .marca-texto { left: -8px; right: -8px; }

  .campos { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .assinatura-cabeca { flex-direction: column; gap: var(--s2); }

  .objetos { grid-template-columns: minmax(0, 1fr); }
  .obj-certificado, .obj-gravacao, .obj-material, .obj-duvidas { grid-column: span 1; }
  .obj-material::before { display: none; }
  .reconhecimentos { grid-template-columns: minmax(0, 1fr); }

  .obs-item summary { grid-template-columns: 54px minmax(0, 1fr) 20px; gap: var(--s3); }
  .obs-resposta { padding-left: calc(54px + var(--s3)); }

  .tarjas { grid-auto-flow: row; grid-auto-columns: auto; }
  .tarja { flex-direction: row; justify-content: space-between; gap: var(--s4); border-left: 0; border-top: 1.5px dashed var(--fio-forte); padding: var(--s4) var(--s3); }
  .tarja:first-child { border-top: 0; }
  .tarja span { writing-mode: horizontal-tb; }
  .tarja:hover, .tarja:focus-visible { transform: translateX(7px) rotate(0); }

  .ficha-fixa { display: none; }

  .barra-celular {
    display: block; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--quadro-2); border-top: 1px solid rgba(220,231,223,.18);
  }
  .barra-celular a {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px; background: var(--carimbo); color: #fff;
    font-variation-settings: 'wdth' 112;
    font-weight: 800; font-size: 14px; letter-spacing: .09em; text-transform: uppercase;
  }
  .rodape { padding-bottom: 116px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .linha-proxima .marca-texto { clip-path: inset(0 0 0 0); }
  .carimbo-confirmado { opacity: .92; transform: rotate(-4deg); }
}

/* a escala impressa continua sendo uma escala */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .ficha-fixa, .barra-celular, .percevejo, .tarjas, .pular { display: none !important; }
  .folha, .papel, .objeto { box-shadow: none !important; transform: none !important; border: 1px solid #999; }
  .folha::after, .papel::after, .objeto::after { display: none; }
  .faixa { padding-block: 18px; break-inside: avoid; }
  .marca-texto { background: none; border-bottom: 2px solid #000; }
  .rodape { color: #000; }
  .rodape-legal, .rodape-links a { color: #333; }
}