/* =====================================================================
   Lembrança da Turma · identidade "Massinha" (claymorphism)
   tokens.css · Guirlanda (Arte) · v2 · 12/11/2026
   BASE APROVADA: as 6 prévias da Manus (redesign/previas/manus/).
   Cores medidas por script nas prévias; regras e porquês: ../direcao.md
   NÃO edite tokens.css: edite tokens.fonte.css e rode gerar_tokens.py
   (ele embute os filtros de volume das letras).
   ---------------------------------------------------------------------
   Fontes locais (OFL) em ./fonts. Use as LOCAIS: a Coiny do Google Fonts
   traz de volta o "v" que lê "u" (ver o v/V abaixo).
   Uso mínimo: <body class="massinha"> e as classes .letreiro, .clay-card,
   .clay-btn, .clay-selo, .clay-faixa (exemplos vivos em prancha.html).
   Letreiro com uma cor por letra: ds/letreiro.js.
   ===================================================================== */

/* Coiny sem o v e o V: o "v" dela tem o fundo redondo e lê "u" ("áruore", "Uídeo", "Nouembro").
   O v e o V vêm da Titan One (OFL), reduzidos à altura da Coiny (fonts/Coiny-vV, gerar_fonte_vV.py;
   comparação em comparacao-v.png). Mesma família "Coiny": nada mais muda no CSS. */
@font-face { font-family: "Coiny"; font-weight: 400; font-display: swap;
  src: url("../fonts/Coiny.woff2") format("woff2");
  unicode-range: U+0-55, U+57-75, U+77-10FFFF; }
@font-face { font-family: "Coiny"; font-weight: 400; font-display: swap;
  src: url("../fonts/Coiny-vV.woff2") format("woff2");
  unicode-range: U+56, U+76; }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 500; font-display: swap;
  src: url("../fonts/MPLUSRounded1c-Medium.woff2") format("woff2"); }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 700; font-display: swap;
  src: url("../fonts/MPLUSRounded1c-Bold.woff2") format("woff2"); }
@font-face { font-family: "M PLUS Rounded 1c"; font-weight: 800; font-display: swap;
  src: url("../fonts/MPLUSRounded1c-ExtraBold.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* ---- Fundo, aro e campos pastel (medidos na Manus) -------------- */
  --fundo: #F7EBDF;          /* creme-rosado da página (03-pagina-celular) */
  --nuvem: var(--fundo);     /* nome antigo, mantido por compatibilidade */
  --aro: #FFF9F0;            /* branco-creme: contorno do letreiro, aro de botão e selo, cartões claros */
  --branco: #FFFFFF;
  --campo-rosa: #FDD2DA;     /* um campo pastel por cartão ou seção */
  --campo-sol: #FEEBC6;
  --campo-ceu: #C1E1FC;
  --campo-verde: #B7F1BB;
  --campo-menta: var(--campo-verde);
  --campo-lilas: #E1C5F9;
  --campo-laranja: #FFE0BF;
  --campo-natal: #FFD3D1;

  /* ---- Tinta: chocolate (o marrom dos títulos e do botão da Manus) */
  --tinta: #3E1A0C;          /* 10:1 ou mais em todos os fundos e no botão amarelo */
  --tinta-suave: #74493A;    /* texto secundário: 4,9:1 ou mais em todos os campos */

  /* ---- Massinha: base / clara (luz) / escura (sombra) / tinta (texto sobre o campo da cor) */
  --rosa: #F85A97;    --rosa-clara: #FF9EC4;    --rosa-escura: #D23C78;    --rosa-tinta: #9A1F52;
  --sol: #FED22A;     --sol-clara: #FFE680;     --sol-escura: #E3A20C;     --sol-tinta: #7A4300;
  --ceu: #3D9EF2;     --ceu-clara: #8CCBFF;     --ceu-escura: #1C69BD;     --ceu-tinta: #0F4C8C;
  --verde: #35A04E;   --verde-clara: #6FD283;   --verde-escura: #1F7A38;   --verde-tinta: #0E6130;
  --lilas: #A05DDF;   --lilas-clara: #CDA7F5;   --lilas-escura: #7A3AB5;   --lilas-tinta: #452768;
  --laranja: #F39A1E; --laranja-clara: #FFC067; --laranja-escura: #C9730A; --laranja-tinta: #8A3F00;
  --natal: #E5373C;   --natal-clara: #FF7B78;   --natal-escura: #AD1F22;   --natal-tinta: #8E1418;
  /* nomes antigos (v1) apontando para o verde novo */
  --menta: var(--verde); --menta-clara: var(--verde-clara); --menta-escura: var(--verde-escura);

  /* ---- Ação: botão de compra AMARELO com texto chocolate e aro creme (03) */
  --acao: #FED22A;           /* chocolate em cima = 10,7:1 */
  --acao-clara: #FFEB8C;
  --acao-escura: #D9A400;
  --acao-texto: var(--tinta);

  /* ---- Peças especiais ------------------------------------------- */
  --faixa: #1F8A41;          /* faixa verde de recado (01): branco em cima 4,4:1, só texto grande */
  --selo: #D92D5A;           /* selo rosa de preço (02): branco em cima 4,69:1 */

  /* ---- Tipos ----------------------------------------------------- */
  --fonte-titulo: "Coiny", "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --fonte-texto: "M PLUS Rounded 1c", ui-rounded, system-ui, sans-serif;
  --t-letreiro: clamp(2.75rem, 1.5rem + 6vw, 6rem);
  --t-titulo: clamp(1.875rem, 1.35rem + 2.4vw, 3.25rem);
  --t-subtitulo: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  --t-texto: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --t-pequeno: .9375rem;
  --t-botao: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);

  /* ---- Raios e espaço -------------------------------------------- */
  --raio-p: 16px;  --raio-m: 28px;  --raio-g: 40px;  --raio-pilula: 999px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  /* ---- Receita da sombra clay ------------------------------------ */
  /* 1 luz clara em cima (inset) · 2 sombra escura embaixo (inset, da própria cor)
     · 3 sombra de contato no chão (fora, com deslocamento e desfoque, tom chocolate). */
  --clay-contato: 0 1.1rem 1.6rem -.7rem rgb(62 26 12 / .28), 0 .3rem .5rem -.1rem rgb(62 26 12 / .12);
  --clay-contato-g: 0 1.75rem 2.5rem -1rem rgb(62 26 12 / .24), 0 .4rem .75rem -.2rem rgb(62 26 12 / .10);

  /* ---- Volume das letras (filtro SVG de luz) --------------------- */
  --infla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='infla' x='-10%25' y='-15%25' width='120%25' height='130%25' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='3.5' result='b'/%3E%3CfeDiffuseLighting in='b' surfaceScale='5' diffuseConstant='1.16' lighting-color='white' result='d'%3E%3CfeDistantLight azimuth='235' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComposite in='d' in2='SourceAlpha' operator='in' result='d2'/%3E%3CfeSpecularLighting in='b' surfaceScale='5' specularConstant='0.32' specularExponent='20' lighting-color='white' result='s'%3E%3CfeDistantLight azimuth='235' elevation='40'/%3E%3C/feSpecularLighting%3E%3CfeComposite in='s' in2='SourceAlpha' operator='in' result='s2'/%3E%3CfeBlend in='SourceGraphic' in2='d2' mode='multiply' result='l'/%3E%3CfeComposite in='s2' in2='l' operator='arithmetic' k2='1' k3='1'/%3E%3C/filter%3E%3C/svg%3E#infla");
  --infla-miudo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='infla' x='-10%25' y='-15%25' width='120%25' height='130%25' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur in='SourceAlpha' stdDeviation='1.8' result='b'/%3E%3CfeDiffuseLighting in='b' surfaceScale='3' diffuseConstant='1.16' lighting-color='white' result='d'%3E%3CfeDistantLight azimuth='235' elevation='60'/%3E%3C/feDiffuseLighting%3E%3CfeComposite in='d' in2='SourceAlpha' operator='in' result='d2'/%3E%3CfeSpecularLighting in='b' surfaceScale='3' specularConstant='0.28' specularExponent='20' lighting-color='white' result='s'%3E%3CfeDistantLight azimuth='235' elevation='40'/%3E%3C/feSpecularLighting%3E%3CfeComposite in='s' in2='SourceAlpha' operator='in' result='s2'/%3E%3CfeBlend in='SourceGraphic' in2='d2' mode='multiply' result='l'/%3E%3CfeComposite in='s2' in2='l' operator='arithmetic' k2='1' k3='1'/%3E%3C/filter%3E%3C/svg%3E#infla");

  /* ---- Movimento ------------------------------------------------- */
  --mola: cubic-bezier(.34, 1.56, .64, 1);   /* quique de massinha */
  --saida: cubic-bezier(.16, 1, .3, 1);      /* saída exponencial */
}

/* (As classes de cor .cor-* ficam no FIM do arquivo: precisam vir depois
   dos componentes para trocar a cor padrão de cada um.) */

/* =====================================================================
   Base da página (opcional): <body class="massinha">
   ===================================================================== */
.massinha {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-texto);
  font-weight: 500;
  font-size: var(--t-texto);
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--rosa-escura);
  scrollbar-color: var(--rosa-clara) var(--campo-rosa);
}
.massinha ::selection { background: var(--sol); color: var(--tinta); }
.massinha :focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; }
.massinha a:not([class]) { color: var(--lilas-tinta); text-decoration-thickness: .12em; text-underline-offset: .2em; }
.massinha strong, .massinha b { font-weight: 800; }

.titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--t-titulo);
  line-height: 1.08;
  color: var(--tinta);
  text-wrap: balance;
}
/* letras de chocolate com volume, como os títulos da Manus (opcional: custa um filtro) */
.titulo--inflado { filter: var(--infla-miudo) drop-shadow(0 .05em .04em rgb(62 26 12 / .18)); }
/* palavra de destaque no título: o tom TINTA da cor (passa 4,5:1); nunca a cor viva clara */
.titulo em { font-style: normal; color: var(--cor-tinta, var(--rosa-tinta)); }

/* =====================================================================
   .letreiro · letras infladas tipo balão com contorno creme grosso.
   1) MARCA, uma cor por palavra (capa 01 da Manus):
   <h1 class="letreiro"><span class="cor-rosa" data-texto="Lembrança">Lembrança</span>
     <span class="cor-sol" data-texto="da">da</span>
     <span class="cor-ceu" data-texto="Turma">Turma</span></h1>
   2) FESTIVO, uma cor por letra (página 03 da Manus): <h1 class="letreiro"
      data-letreiro="marca">Lembrança da Turma</h1> + ds/letreiro.js.
   A palavra desenha o contorno creme; a cor (::after ou letras) ganha volume.
   Sem data-texto/JS: palavra colorida e contornada, só sem volume.
   ===================================================================== */
.letreiro {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--t-letreiro);
  line-height: 1.04;
  letter-spacing: .01em;
  font-kerning: none;
  font-variant-ligatures: none;
  text-wrap: balance;
  color: var(--tinta);
}
.letreiro > * {
  --cor: var(--rosa); --cor-escura: var(--rosa-escura);
  display: inline-block;
  position: relative;
  margin-inline: .03em;
  color: var(--cor);
  -webkit-text-stroke: .24em var(--aro);
  paint-order: stroke fill;
  filter: drop-shadow(0 .05em .01em color-mix(in oklab, var(--cor-escura) 30%, var(--aro)))
          drop-shadow(0 .12em .12em rgb(62 26 12 / .24));
}
/* 1) por palavra */
.letreiro > [data-texto]:not(.letreiro__palavra) { color: var(--aro); }
.letreiro > [data-texto]:not(.letreiro__palavra)::after {
  content: attr(data-texto) / "";
  position: absolute;
  inset: 0;
  color: var(--cor);
  -webkit-text-stroke: 0;
  filter: var(--infla);
}
/* 2) por letra (montado pelo letreiro.js) */
.letreiro > .letreiro__palavra { -webkit-text-stroke: 0; isolation: isolate; filter: drop-shadow(0 .12em .12em rgb(62 26 12 / .24)); }
.letreiro__palavra::before {
  content: attr(data-texto) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--aro);
  -webkit-text-stroke: .24em var(--aro);
}
.letreiro__letra { color: var(--cor); -webkit-text-stroke: 0; filter: var(--infla); }

.letreiro--miudo { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.letreiro--miudo > *, .letreiro--miudo .letreiro__palavra::before { -webkit-text-stroke-width: .2em; }
.letreiro--miudo > [data-texto]::after, .letreiro--miudo .letreiro__letra { filter: var(--infla-miudo); }

/* entrada com quique (opcional): style="--i:0..n" em cada palavra (o letreiro.js numera) */
@keyframes quique {
  0%   { transform: translateY(.2em) scale(.92); }
  55%  { transform: translateY(-.06em) scale(1.04); }
  100% { transform: none; }
}
.letreiro--entra > * { animation: quique .7s var(--mola) both; animation-delay: calc(var(--i, 0) * 90ms); }

/* =====================================================================
   .clay-card · cartão de massinha. Branco-creme por padrão; com .cor-*
   fica no campo pastel da cor (como os cartões da 03); --cheio pinta
   com a cor viva.
   ===================================================================== */
.clay-card {
  --cor-escura: #C9A58C;
  --cor-campo: var(--aro);
  position: relative;
  padding: clamp(var(--e-5), 4vw, var(--e-6));
  border-radius: var(--raio-g);
  background: var(--cor-campo);
  color: var(--tinta);
  box-shadow:
    inset 0 .75rem 1.25rem rgb(255 255 255 / .75),
    inset 0 -1rem 1.5rem color-mix(in oklab, var(--cor-escura) 24%, transparent),
    0 0 0 .3rem color-mix(in oklab, var(--aro) 70%, transparent),
    0 1.75rem 2.5rem -1rem color-mix(in oklab, var(--cor-escura) 45%, transparent),
    0 .4rem .75rem -.2rem rgb(62 26 12 / .10);
}
.clay-card--cheio {
  background: var(--cor);
  box-shadow:
    inset 0 .75rem 1.25rem color-mix(in oklab, var(--cor-clara) 85%, var(--branco)),
    inset 0 -1rem 1.5rem color-mix(in oklab, var(--cor-escura) 70%, transparent),
    0 1.75rem 2.5rem -1rem color-mix(in oklab, var(--cor-escura) 60%, transparent),
    0 .4rem .75rem -.2rem rgb(62 26 12 / .14);
}
.clay-card > :first-child { margin-top: 0; }
.clay-card > :last-child { margin-bottom: 0; }

/* preço grande no tom tinta da cor do cartão (verde no Essencial, roxo no Completo, como na 03) */
.preco { font: 400 clamp(2.25rem, 1.6rem + 3vw, 3.5rem)/1 var(--fonte-titulo); color: var(--cor-tinta, var(--tinta)); white-space: nowrap; }
.preco small { font-size: .55em; vertical-align: .35em; margin-right: .06em; }

/* =====================================================================
   .clay-btn · botão inflado de COMPRA: amarelo, texto chocolate, aro
   creme grosso (03). Levanta no hover, afunda ao toque, foco com aro
   de tinta. .clay-btn--claro = secundário creme (nunca para comprar).
   O aro é sombra (fica fora da caixa): a largura máxima desconta o aro,
   para o botão inteiro, aro incluído, caber no bloco onde está.
   ===================================================================== */
.clay-btn {
  --cor: var(--acao); --cor-clara: var(--acao-clara); --cor-escura: var(--acao-escura);
  --aro-btn: .35rem;
  box-sizing: border-box;
  max-width: calc(100% - 2 * var(--aro-btn));
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 3.75rem;
  padding: .8em 1.6em .9em;
  border-radius: var(--raio-pilula);
  background: var(--cor);
  color: var(--acao-texto);
  font-family: var(--fonte-titulo);
  font-weight: 400;
  font-size: var(--t-botao);
  line-height: 1.1;
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 .05em 0 color-mix(in oklab, var(--cor-clara) 70%, transparent);
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 .45rem .6rem color-mix(in oklab, var(--cor-clara) 85%, var(--branco)),
    inset 0 -.55rem .8rem color-mix(in oklab, var(--cor-escura) 80%, transparent),
    0 0 0 var(--aro-btn) var(--aro),
    0 1.1rem 1.5rem -.45rem rgb(62 26 12 / .30),
    0 .3rem .5rem -.05rem rgb(62 26 12 / .14);
  transition: transform .22s var(--mola); /* só transform: a sombra troca sem transição */
}
.clay-btn:hover, .clay-btn.is-levantado { transform: translateY(-2px) scale(1.02); }
.clay-btn:active, .clay-btn.is-afundado {
  transform: translateY(3px) scale(.98);
  box-shadow:
    inset 0 .55rem .8rem color-mix(in oklab, var(--cor-escura) 85%, transparent),
    inset 0 -.2rem .45rem color-mix(in oklab, var(--cor-clara) 60%, transparent),
    0 0 0 var(--aro-btn) var(--aro),
    0 .35rem .6rem -.2rem rgb(62 26 12 / .28);
  transition-duration: .08s;
}
.clay-btn:focus-visible, .clay-btn.is-foco { outline: 3px solid var(--tinta); outline-offset: 7px; }
.clay-btn:disabled, .clay-btn[aria-disabled="true"] {
  --cor: #E6DCD2; --cor-clara: #F6F0EA; --cor-escura: #BFAE9F;
  color: #6E5548; text-shadow: none; cursor: not-allowed; transform: none;
}
.clay-btn--claro {
  --cor: var(--aro); --cor-clara: var(--branco); --cor-escura: #D9C2AE;
  color: var(--tinta);
}
.clay-btn--largo { width: calc(100% - 2 * var(--aro-btn)); margin-inline: var(--aro-btn); }

/* =====================================================================
   .clay-selo · selo redondo de preço (02): rosa, texto branco, aro
   creme, reto (sem giro). .cor-sol troca para amarelo com chocolate.
   <div class="clay-selo"><span class="clay-selo__linha">Calendários a partir de</span>
     <span class="clay-selo__preco"><small>R$</small> 14,90</span></div>
   ===================================================================== */
.clay-selo {
  --cor: var(--selo); --cor-clara: #F27399; --cor-escura: #A81E43;
  --selo-texto: var(--branco);
  --tam: 10rem;
  display: inline-grid;
  place-content: center;
  justify-items: center;
  gap: .15rem;
  width: var(--tam);
  aspect-ratio: 1;
  padding: .9rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--cor);
  color: var(--selo-texto);
  text-align: center;
  box-shadow:
    inset 0 .6rem .9rem color-mix(in oklab, var(--cor-clara) 80%, transparent),
    inset 0 -.7rem 1rem color-mix(in oklab, var(--cor-escura) 65%, transparent),
    0 0 0 .375rem var(--aro),
    0 1.1rem 1.5rem -.5rem rgb(62 26 12 / .30),
    0 .3rem .5rem rgb(62 26 12 / .12);
}
.clay-selo__linha { font: 800 calc(var(--tam) * .088)/1.15 var(--fonte-texto); max-width: 82%; text-wrap: balance; }
.clay-selo__linha:only-child { font: 400 calc(var(--tam) * .14)/1.05 var(--fonte-titulo); }
.clay-selo__preco { font: 400 calc(var(--tam) * .2)/1 var(--fonte-titulo); white-space: nowrap; }
.clay-selo__preco small { font-size: .55em; vertical-align: .35em; margin-right: .08em; }
.clay-selo--g { --tam: 12.5rem; }
.clay-selo--p { --tam: 7.5rem; }

/* =====================================================================
   .clay-faixa · faixa verde de recado (01): pílula larga, texto branco
   GRANDE (Coiny, 1,375 rem ou mais). Para frase curta, não para parágrafo.
   ===================================================================== */
.clay-faixa {
  --cor: var(--faixa); --cor-clara: #4FBF6C; --cor-escura: #12602B;
  display: inline-block;
  padding: .55em 1.3em .65em;
  border-radius: var(--raio-pilula);
  background: var(--cor);
  color: var(--branco);
  font: 400 clamp(1.375rem, 1.2rem + .8vw, 1.75rem)/1.15 var(--fonte-titulo);
  text-align: center;
  text-wrap: balance;
  box-shadow:
    inset 0 .45rem .7rem color-mix(in oklab, var(--cor-clara) 70%, transparent),
    inset 0 -.55rem .8rem color-mix(in oklab, var(--cor-escura) 75%, transparent),
    0 0 0 .3rem var(--aro),
    var(--clay-contato);
}

/* =====================================================================
   Peças de apoio
   ===================================================================== */
/* .clay-chip · etiqueta pequena ("Essencial e Completo") */
.clay-chip {
  --cor-escura: var(--lilas-escura); --cor-campo: var(--campo-lilas);
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .85em .35em;
  border-radius: var(--raio-pilula);
  background: var(--cor-campo);
  color: var(--tinta);
  font: 800 .8125rem/1.2 var(--fonte-texto);
  box-shadow:
    inset 0 .2rem .35rem rgb(255 255 255 / .8),
    inset 0 -.25rem .4rem color-mix(in oklab, var(--cor-escura) 28%, transparent),
    0 .4rem .6rem -.3rem color-mix(in oklab, var(--cor-escura) 50%, transparent);
}

/* .clay-foto · o "buraco" na massinha onde vai a foto do aluno (fundo azul-céu claro, como na 03) */
.clay-foto {
  --cor-escura: var(--ceu-escura); --cor-campo: var(--campo-ceu);
  display: grid;
  place-items: center;
  align-content: center;
  gap: .4rem;
  aspect-ratio: var(--proporcao, 1);
  border-radius: var(--raio-m);
  background: color-mix(in oklab, var(--cor-campo) 80%, var(--branco));
  color: var(--tinta-suave);
  font: 700 var(--t-pequeno)/1.2 var(--fonte-texto);
  text-align: center;
  overflow: hidden;
  box-shadow:
    inset 0 .7rem 1.1rem color-mix(in oklab, var(--cor-escura) 30%, transparent),
    inset 0 -.4rem .7rem rgb(255 255 255 / .85),
    0 0 0 .4rem var(--aro);
}
.clay-foto > img { width: 100%; height: 100%; object-fit: cover; }
.clay-foto > svg { width: 2.5rem; height: 2.5rem; }

/* =====================================================================
   Cor de cada peça: troca a classe e o resto acompanha.
   Fica no fim de propósito (vence a cor padrão dos componentes).
   Não use em .clay-btn: o botão de compra é sempre o amarelo de ação.
   ===================================================================== */
.cor-rosa    { --cor: var(--rosa);    --cor-clara: var(--rosa-clara);    --cor-escura: var(--rosa-escura);    --cor-tinta: var(--rosa-tinta);    --cor-campo: var(--campo-rosa); }
.cor-sol     { --cor: var(--sol);     --cor-clara: var(--sol-clara);     --cor-escura: var(--sol-escura);     --cor-tinta: var(--sol-tinta);     --cor-campo: var(--campo-sol); }
.cor-ceu     { --cor: var(--ceu);     --cor-clara: var(--ceu-clara);     --cor-escura: var(--ceu-escura);     --cor-tinta: var(--ceu-tinta);     --cor-campo: var(--campo-ceu); }
.cor-verde, .cor-menta
             { --cor: var(--verde);   --cor-clara: var(--verde-clara);   --cor-escura: var(--verde-escura);   --cor-tinta: var(--verde-tinta);   --cor-campo: var(--campo-verde); }
.cor-lilas   { --cor: var(--lilas);   --cor-clara: var(--lilas-clara);   --cor-escura: var(--lilas-escura);   --cor-tinta: var(--lilas-tinta);   --cor-campo: var(--campo-lilas); }
.cor-laranja { --cor: var(--laranja); --cor-clara: var(--laranja-clara); --cor-escura: var(--laranja-escura); --cor-tinta: var(--laranja-tinta); --cor-campo: var(--campo-laranja); }
.cor-natal   { --cor: var(--natal);   --cor-clara: var(--natal-clara);   --cor-escura: var(--natal-escura);   --cor-tinta: var(--natal-tinta);   --cor-campo: var(--campo-natal); }
/* selo amarelo: texto chocolate */
.clay-selo.cor-sol { --selo-texto: var(--tinta); }
.clay-selo.cor-verde, .clay-selo.cor-menta { --selo-texto: var(--branco); --cor: var(--faixa); }

@media (prefers-reduced-motion: reduce) {
  .letreiro--entra > * { animation: none; }
  .clay-btn { transition: none; }
  .clay-btn:hover, .clay-btn:active, .clay-btn.is-afundado { transform: none; }
}