/* =========================================================================
   SITE — a página de apresentação e a porta de entrada (login/cadastro)

   Linguagem visual derivada de docs/DIRECAO.md.

   Subject: a secretaria de uma convenção de igrejas na semana do congresso.
   Thesis:  a mesa da secretaria — o papel disposto em ordem, cada peça do
            tamanho da importância que ela tem.

   Uma extensão registrada da impressão digital do projeto: dentro do painel, o
   tom de papel vive só no boneco da página. Aqui não estamos no painel — estas
   duas telas são o que vem ANTES dele, e é justamente o material da mesa que
   precisa ser reconhecido por quem chega. A moldura do aplicativo continua
   plana e quieta; nada daqui vaza para lá.

   A cor sai do assunto, não de uma paleta bonita: o branco do sulfite, o preto
   da esferográfica, o azul pálido da pauta — e o violeta do carimbo da
   secretaria como única cor de acento, chapado, nunca em gradiente.

   O neutro é DESSATURADO de propósito. Papel quente + serifa é meio caminho
   para o creme editorial que a revisão procura (cluster:cream-editorial), e a
   própria direção do projeto já tinha escrito que o tom de papel "não vem
   acompanhado de serifa de display nem de terracota". Aqui a serifa é de texto,
   o acento é violeta, e o papel puxa para o cinza em vez do creme.
   ========================================================================= */

:root {
    --papel:        #FCFCFB;   /* a folha */
    --mesa:         #EDECE9;   /* a mesa por baixo dela */
    --mesa-funda:   #E3E1DC;
    --tinta:        #17171B;   /* esferográfica */
    --tinta-2:      #55545E;
    --tinta-3:      #8A8894;
    --carimbo:      #4C3BA6;   /* o violeta do carimbo — o único acento */
    --carimbo-forte:#3B2C87;
    --carimbo-luz:  #EDEAF9;
    --pauta:        #C7D2E3;   /* a linha do papel pautado */
    --vinco:        #DEDCD6;   /* o traço fino, a dobra */
    --sombra-papel: 0 1px 2px rgba(23,23,27,.06), 0 8px 24px rgba(23,23,27,.07);
    --sombra-alta:  0 2px 4px rgba(23,23,27,.07), 0 18px 44px rgba(23,23,27,.11);

    --larg: 1120px;
    --raio: 4px;         /* recipiente: canto discreto, como manda a direção */
    --raio-etiqueta: 999px;

    --fonte-forma: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fonte-fala: Newsreader, Georgia, "Times New Roman", serif;

    color-scheme: light dark;
}

/* A mesa à noite. Mesmo material, outra hora do dia — quem abre o sistema às
   onze da noite fechando a prestação de contas não leva um flash na cara. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --papel:        #1C1C21;
        --mesa:         #131317;
        --mesa-funda:   #0E0E11;
        --tinta:        #F2F1EE;
        --tinta-2:      #A9A7B2;
        --tinta-3:      #75737E;
        --carimbo:      #A79BF0;
        --carimbo-forte:#C4BBFF;
        --carimbo-luz:  #262247;
        --pauta:        #33384A;
        --vinco:        #2E2E36;
        --sombra-papel: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.34);
        --sombra-alta:  0 2px 4px rgba(0,0,0,.44), 0 18px 44px rgba(0,0,0,.46);
    }
}

* { box-sizing: border-box; }

body.site {
    margin: 0;
    background: var(--mesa);
    color: var(--tinta);
    font-family: var(--fonte-forma);
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Só o link de texto herda a cor do carimbo. Sem o `:not(.bt)`, esta regra
   (0,1,1) vence `.bt--carimbo` (0,1,0) e pinta a letra do botão da cor do
   próprio fundo dele. */
.site a:not(.bt) { color: var(--carimbo); }
.env { width: min(100% - 3rem, var(--larg)); margin-inline: auto; }
@media (max-width: 640px) { .env { width: calc(100% - 2.25rem); } }

/* ---- tipografia -------------------------------------------------------
   Duas famílias com uma relação de verdade, não decorativa: o SISTEMA fala em
   Archivo (etiqueta, número, título, rótulo de campo — a voz do formulário), e
   a PESSOA fala em Newsreader (a frase corrida, o que se lê devagar). Quem
   escreve o formulário e quem o preenche não são a mesma voz. */
.t-eyebrow {
    font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--carimbo); margin: 0 0 1rem;
}
.t-h1 {
    font-size: clamp(2.5rem, 6.2vw, 4.35rem);
    line-height: .98; letter-spacing: -.035em; font-weight: 700;
    margin: 0; text-wrap: balance;
}
.t-h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    line-height: 1.08; letter-spacing: -.028em; font-weight: 700; margin: 0;
    text-wrap: balance;
}
.t-h3 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.012em; margin: 0; }
.t-fala {
    font-family: var(--fonte-fala); font-size: 1.14rem; line-height: 1.62;
    color: var(--tinta-2); max-width: 56ch;
}
.t-fala--g { font-size: clamp(1.2rem, 2.1vw, 1.42rem); color: var(--tinta); }
.t-mudo { color: var(--tinta-2); }
.t-mini { font-size: .85rem; }

/* ---- botões -----------------------------------------------------------
   Pílula é a linguagem de etiqueta já estabelecida no produto; o recipiente é
   que tem canto discreto. Aqui o botão é etiqueta: ele rotula uma ação. */
.bt {
    display: inline-flex; align-items: center; gap: .5rem;
    font: inherit; font-weight: 700; font-size: .95rem;
    padding: .78rem 1.5rem; border-radius: var(--raio-etiqueta);
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background-color .14s, border-color .14s, color .14s;
}
.bt--carimbo { background: var(--carimbo); color: #fff; }
.bt--carimbo:hover { background: var(--carimbo-forte); }
.bt--traco { border-color: var(--vinco); color: var(--tinta); background: transparent; }
.bt--traco:hover { border-color: var(--carimbo); color: var(--carimbo); }
.bt:focus-visible { outline: 2px solid var(--carimbo); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .bt--carimbo { color: #14121F; }
}

/* =========================================================================
   TOPO
   ========================================================================= */
.topo { padding: 1.5rem 0; }
.topo-in { display: flex; align-items: center; gap: 1rem; }
.marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tinta); }
.marca-selo {
    width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
    background: var(--carimbo); color: #fff; font-weight: 700; font-size: .92rem;
    letter-spacing: -.02em;
}
.marca-nome { font-weight: 700; letter-spacing: -.02em; font-size: 1.06rem; }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
@media (max-width: 520px) { .topo-acoes .bt--traco { display: none; } }

/* =========================================================================
   HERO — a mesa vista de cima

   O risco desta página, e o único: o hero não tem screenshot nem fotografia.
   Tem a papelada, desenhada como papel, escapando pela borda direita. Quem
   chega precisa RECONHECER a própria papelada antes de ler qualquer frase; um
   screenshot pede que ele acredite, o papel pede que ele reconheça.
   ========================================================================= */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); overflow: hidden; }
.hero-in {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero-texto .t-fala { margin: 1.35rem 0 0; max-width: 40ch; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.hero-nota { margin: 1.1rem 0 0; font-size: .88rem; color: var(--tinta-3); }

/* A mesa: as folhas sobrepostas, tortas, sangrando para fora da tela. */
.mesa {
    position: relative; min-height: 620px;
    margin-right: calc(-1 * max(0px, (100vw - var(--larg)) / 2 + 1.5rem));
}
.folha {
    position: absolute; background: var(--papel);
    border: 1px solid var(--vinco); border-radius: var(--raio);
    box-shadow: var(--sombra-papel); padding: 1rem 1.1rem;
}
/* A arrumação importa: a lista precisa descer o bastante para o cabeçalho dela
   ("Caravana Betel") escapar da ficha. Papel empilhado escondendo o nome do
   próprio papel é pilha bagunçada, e a tese aqui é papel EM ORDEM. */
.folha--ficha   { width: 300px; top: 0;     left: 0;    transform: rotate(-2.4deg); z-index: 3; }
.folha--recibo  { width: 236px; top: 22px;  left: 55%;  transform: rotate(2.8deg);  z-index: 1; }
.folha--lista   { width: 318px; top: 274px; left: 25%;  transform: rotate(1.6deg);  z-index: 2;
                  box-shadow: var(--sombra-alta); }
.folha--cracha  { width: 198px; top: 372px; left: 0;    transform: rotate(3.2deg);  z-index: 4;
                  box-shadow: var(--sombra-alta); }

.folha-cab {
    display: flex; align-items: baseline; gap: .5rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--vinco); margin-bottom: .7rem;
}
.folha-cab b { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; }
.folha-cab span { margin-left: auto; font-size: .7rem; color: var(--tinta-3); }

/* Uma linha de formulário: o rótulo pequeno e o valor sobre a pauta. */
.campo { margin-bottom: .55rem; }
.campo i {
    display: block; font-style: normal; font-size: .63rem; letter-spacing: .11em;
    text-transform: uppercase; color: var(--tinta-3); margin-bottom: .1rem;
}
.campo b { display: block; font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--pauta); padding-bottom: .18rem; }
.campo--vazio b { color: transparent; }

.linhas { display: grid; gap: .34rem; }
.linha-nome { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.linha-nome::before {
    content: ""; width: 13px; height: 13px; flex: none; border-radius: 3px;
    border: 1.5px solid var(--pauta);
}
.linha-nome.is-ok::before {
    background: var(--carimbo); border-color: var(--carimbo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5.2 4.3 8.6 11 1.6'/%3E%3C/svg%3E");
    background-size: 8px; background-repeat: no-repeat; background-position: center;
}
.linha-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-nome em { margin-left: auto; font-style: normal; font-size: .7rem; color: var(--tinta-3); }

/* O crachá: a peça que a pessoa leva pendurada. */
.cracha { text-align: center; }
.cracha-topo { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3); }
.cracha-nome { font-weight: 700; font-size: 1.02rem; margin: .3rem 0 .1rem; letter-spacing: -.015em; }
.cracha-sub { font-size: .74rem; color: var(--tinta-2); }
.cracha-qr {
    width: 66px; height: 66px; margin: .6rem auto 0; border-radius: 3px;
    background-color: var(--tinta);
    -webkit-mask: var(--qr) center/contain no-repeat; mask: var(--qr) center/contain no-repeat;
}

/* O carimbo: a única peça que não é impressa — é batida por cima, torta. */
.carimbo {
    position: absolute; z-index: 5; right: 18%; top: 214px;
    border: 2.5px solid var(--carimbo); color: var(--carimbo);
    border-radius: 5px; padding: .3rem .8rem; transform: rotate(-11deg);
    font-weight: 700; font-size: .92rem; letter-spacing: .1em; text-transform: uppercase;
    opacity: .82; background: color-mix(in srgb, var(--papel) 60%, transparent);
}

/* No celular a mesa não se rearranja: ela ENCOLHE.
   Reposicionar folha por folha criaria uma segunda composição para manter em
   dia — e daria papel em tamanho quase real, o que perde justamente o efeito de
   miniatura. A mesa é mais larga que a tela e volta pelo `scale`: continua
   sangrando pela borda, que é o ponto. */
@media (max-width: 940px) {
    .hero-in { grid-template-columns: 1fr; }
    .mesa {
        width: 142%; min-height: 0; height: 480px; margin-right: 0; margin-top: .75rem;
        transform: scale(.76); transform-origin: top left;
    }
    .folha--recibo { display: none; }
}
@media (max-width: 460px) {
    .mesa { width: 156%; height: 430px; transform: scale(.68); }
}

/* =========================================================================
   O CICLO — as quatro etapas

   Numeradas de propósito, e isto não é cluster:false-sequence: montar, vender,
   realizar e fechar é a ordem real em que a secretaria vive um congresso, e é a
   mesma arrumação do menu do sistema (App\Support\AreasEvento).
   ========================================================================= */
.secao { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--vinco); }
.secao-cab { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.secao-cab .t-fala { margin: .9rem 0 0; }

.ciclo { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--vinco); border: 1px solid var(--vinco); border-radius: var(--raio); overflow: hidden; }
@media (min-width: 760px) { .ciclo { grid-template-columns: repeat(4, 1fr); } }
.etapa { background: var(--papel); padding: 1.6rem 1.4rem 1.8rem; }
.etapa-n {
    font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--carimbo);
    display: block; margin-bottom: .7rem;
}
.etapa .t-h3 { margin-bottom: .5rem; }
.etapa p { margin: 0 0 1rem; font-family: var(--fonte-fala); font-size: 1rem; color: var(--tinta-2); }
.etapa ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.etapa li { font-size: .88rem; color: var(--tinta-2); padding-left: 1rem; position: relative; }
.etapa li::before {
    content: ""; position: absolute; left: 0; top: .58em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--pauta);
}

/* =========================================================================
   A PROVA DE ESCALA — a lista de chamada, não uma fotografia de plateia

   Registro da decisão (frontend-imagery): a faixa documental de auditório cheio
   foi reprovada no contrafactual — trocá-la por qualquer outra foto de plateia
   não faria a direção perder nada. Aqui a evidência é a saída real do produto:
   a lista, com a contagem saindo pela borda.
   ========================================================================= */
.escala-in {
    display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 860px) { .escala-in { grid-template-columns: .85fr 1.15fr; } }

.chamada {
    background: var(--papel); border: 1px solid var(--vinco); border-radius: var(--raio);
    box-shadow: var(--sombra-papel); padding: 1.1rem 1.25rem 0;
    position: relative; overflow: hidden; max-height: 340px;
}
.chamada-cab {
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    padding-bottom: .7rem; border-bottom: 1px solid var(--vinco); margin-bottom: .8rem;
}
.chamada-cab b { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; }
.chamada-cab span { margin-left: auto; font-size: .74rem; color: var(--tinta-3); }
.chamada-corpo { columns: 2; column-gap: 1.6rem; }
@media (max-width: 560px) { .chamada-corpo { columns: 1; } }
/* A lista não termina: ela se apaga na borda de baixo, que é o que uma lista de
   mil nomes faz numa folha. O número exato fica na etiqueta, não no rodapé. */
.chamada::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 110px;
    background: linear-gradient(to bottom, transparent, var(--papel) 78%);
    pointer-events: none;
}
.chamada-conta {
    position: absolute; z-index: 2; left: 1.25rem; bottom: 1rem;
    background: var(--carimbo); color: #fff; border-radius: var(--raio-etiqueta);
    padding: .34rem .9rem; font-size: .8rem; font-weight: 700;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .chamada-conta { color: #14121F; }
}

/* =========================================================================
   O QUE JÁ ESTÁ PRONTO — densidade honesta

   O assunto é arquivístico. Aqui a resposta certa não é "respirar": é caber
   tudo à vista, como o índice de uma pasta.
   ========================================================================= */
.indice { display: grid; gap: 1px; background: var(--vinco); border-block: 1px solid var(--vinco); }
@media (min-width: 700px)  { .indice { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .indice { grid-template-columns: repeat(3, 1fr); } }
.verbete { background: var(--papel); padding: 1.1rem 1.2rem; }
.verbete b { display: block; font-size: .94rem; margin-bottom: .18rem; letter-spacing: -.01em; }
.verbete span { font-size: .87rem; color: var(--tinta-2); }

/* =========================================================================
   PARA QUEM É — as duas pessoas do Brief, lado a lado
   ========================================================================= */
.duas { display: grid; gap: 1.25rem; }
@media (min-width: 780px) { .duas { grid-template-columns: 1fr 1fr; } }
.pessoa {
    background: var(--papel); border: 1px solid var(--vinco); border-radius: var(--raio);
    padding: 1.6rem 1.5rem; box-shadow: var(--sombra-papel);
}
.pessoa-etq {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--carimbo); background: var(--carimbo-luz);
    padding: .26rem .7rem; border-radius: var(--raio-etiqueta); margin-bottom: .9rem;
}
.pessoa p { font-family: var(--fonte-fala); color: var(--tinta-2); margin: .6rem 0 0; }
.pessoa-modo { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--vinco); font-size: .89rem; }
.pessoa-modo b { color: var(--carimbo); }

/* =========================================================================
   CHAMADA FINAL + RODAPÉ
   ========================================================================= */
.fim { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--vinco); text-align: center; }
.fim .t-fala { margin: 1rem auto 0; }
.fim-acoes { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

.rodape { border-top: 1px solid var(--vinco); padding: 2rem 0 3rem; color: var(--tinta-3); font-size: .86rem; }
.rodape-in { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; }
.rodape a { color: var(--tinta-2); text-decoration: none; }
.rodape a:hover { color: var(--carimbo); }
.rodape-dir { margin-left: auto; }

/* =========================================================================
   A PORTA — entrar e cadastrar

   Não é um cartão centrado num fundo vazio: é a mesa de um lado e o formulário
   do outro. Quem entra aqui volta toda semana; ver o material do outro lado da
   porta é o que faz a tela pertencer ao sistema em vez de ser um portão
   qualquer com um logo em cima.
   ========================================================================= */
.porta { min-height: 100vh; display: grid; }
@media (min-width: 900px) { .porta { grid-template-columns: 1.05fr .95fr; } }

.porta-mesa {
    background: var(--mesa-funda); padding: clamp(2rem, 4vw, 3.5rem);
    display: flex; flex-direction: column; justify-content: center; gap: 2rem;
    position: relative; overflow: hidden;
}
/* No celular a mesa não some — encolhe para uma faixa, porque é ela que diz
   em que sistema a pessoa está entrando. */
@media (max-width: 899px) { .porta-mesa { padding: 1.75rem 1.5rem; gap: 1.25rem; } }
.porta-mesa .t-h2 { max-width: 18ch; }
.porta-mesa .t-fala { margin: 0; }
@media (max-width: 899px) { .porta-mesa .t-fala { display: none; } }

.porta-provas { display: grid; gap: .6rem; }
@media (max-width: 899px) { .porta-provas { display: none; } }
.prova {
    display: flex; align-items: center; gap: .8rem; background: var(--papel);
    border: 1px solid var(--vinco); border-radius: var(--raio); padding: .8rem 1rem;
    box-shadow: var(--sombra-papel); font-size: .9rem;
}
.prova b { font-weight: 700; }
.prova i { font-style: normal; margin-left: auto; color: var(--carimbo); font-weight: 700; font-size: .82rem; }
.prova-ico { width: 20px; height: 20px; flex: none; color: var(--carimbo); }

.porta-form {
    background: var(--papel); padding: clamp(2rem, 4vw, 3.5rem);
    display: flex; flex-direction: column; justify-content: center;
}
.porta-in { width: min(100%, 380px); margin-inline: auto; }
.porta-in .t-h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.porta-in > .t-fala { margin: .6rem 0 1.9rem; font-size: 1rem; }

.campo-form { display: block; margin-bottom: 1rem; }
.campo-form > span {
    display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tinta-2); margin-bottom: .35rem;
}
.campo-form input {
    width: 100%; font: inherit; font-size: 1rem; padding: .72rem .85rem;
    background: var(--mesa); color: var(--tinta);
    border: 1px solid var(--vinco); border-radius: var(--raio);
}
.campo-form input:focus {
    outline: none; border-color: var(--carimbo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--carimbo) 18%, transparent);
    background: var(--papel);
}
.bt--bloco { width: 100%; justify-content: center; margin-top: .4rem; }

/* A segunda porta (link mágico) é uma alternativa, não um segundo formulário
   com o mesmo peso: fica recolhida até alguém precisar dela. */
.porta-ou {
    display: flex; align-items: center; gap: .9rem; margin: 1.6rem 0;
    color: var(--tinta-3); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.porta-ou::before, .porta-ou::after { content: ""; flex: 1; height: 1px; background: var(--vinco); }

.magico > summary {
    list-style: none; cursor: pointer; color: var(--carimbo); font-weight: 600;
    font-size: .92rem; text-align: center;
}
.magico > summary::-webkit-details-marker { display: none; }
.magico > summary:hover { text-decoration: underline; }
.magico[open] > summary { margin-bottom: 1rem; }
.magico-corpo { border: 1px solid var(--vinco); border-radius: var(--raio); padding: 1.1rem; background: var(--mesa); }
.magico-corpo .t-mini { margin: 0 0 .8rem; color: var(--tinta-2); }
.magico-corpo .campo-form input { background: var(--papel); }

.porta-alt { margin: 1.9rem 0 0; text-align: center; font-size: .92rem; color: var(--tinta-2); }
.porta-pe { margin-top: 2.5rem; text-align: center; font-size: .8rem; color: var(--tinta-3); }
.porta-pe a { color: var(--tinta-3); }

/* Os recados do sistema — mesma família de recipiente do resto. */
.recado {
    border: 1px solid var(--vinco); border-left: 3px solid var(--tinta-3);
    border-radius: var(--raio); padding: .75rem .9rem; margin-bottom: 1.25rem;
    font-size: .92rem; background: var(--mesa);
}
.recado--ok  { border-left-color: #2E7D5B; }
.recado--err { border-left-color: #C0392B; }
.recado--info{ border-left-color: var(--carimbo); }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}