/* A abertura do dia (js/semana.js). Em vw com teto: a cena tem que caber de 320 px ao computador. */
/* de segunda a quinta: só a fileira, flutuando acima da barra de baixo */
.semana-flutua { --u: min(1vw, 4.4px); position: fixed; left: 50%; bottom: calc(var(--nav) + 12px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: calc(92 * var(--u)); margin-left: calc(-46 * var(--u)); cursor: pointer; animation: semana-sobe .3s cubic-bezier(.3, .8, .3, 1); transition: opacity .22s, transform .22s; }
.semana-flutua--saindo { opacity: 0; transform: translateY(16px); }
@keyframes semana-sobe { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
/* na sexta: a tela cheia */
.semana, .semana-flutua { --sombra: 0 2px 4px rgba(43, 34, 51, .06), 0 10px 28px rgba(43, 34, 51, .16); }
.semana { --u: min(1vw, .49vh, 4.4px); --cena: #A9D8FF; --cena-fundo: #74B8F2; --cena-texto: #1F5FAF; --cena-botao: #1F5FAF; --numero-sombra: #FFFFFF;
  position: fixed; inset: 0; z-index: 95; overflow: hidden; display: flex; justify-content: center; background: var(--cena); transition: background-color .35s, opacity .22s; animation: aparece .18s ease; cursor: pointer; }
.semana--completa { --cena: #6A49E6; --cena-fundo: #4B2FBF; --cena-texto: #fff; --cena-botao: #6A49E6; --numero-sombra: #4B2FBF; }
.semana--saindo { opacity: 0; }
.semana__raios { position: absolute; left: 50%; top: 36%; width: 240vmax; aspect-ratio: 1; margin: -120vmax 0 0 -120vmax; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 12deg, transparent 12deg 24deg); animation: semana-gira 34s linear infinite; }
.semana__cena { position: relative; display: flex; flex-direction: column; align-items: center; width: calc(100 * var(--u)); height: 100%; padding: calc(6 * var(--u) + env(safe-area-inset-top, 0px)) calc(5 * var(--u)) calc(7 * var(--u) + env(safe-area-inset-bottom, 0px)); color: var(--cena-texto); }
.semana__balao { position: relative; z-index: 3; margin-bottom: calc(-2 * var(--u)); padding: calc(2.2 * var(--u)) calc(5 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--ink); color: #fff; font: 800 calc(5.4 * var(--u))/1.1 var(--font-display); }
.semana__balao::after { content: ""; position: absolute; left: 50%; bottom: calc(-1.8 * var(--u)); width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); margin-left: calc(-2.3 * var(--u)); background: var(--ink); transform: rotate(45deg); border-radius: calc(.8 * var(--u)); }
.semana__adesivo { flex: none; width: calc(68 * var(--u)); height: calc(68 * var(--u)); margin-top: calc(2 * var(--u)); display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: var(--sombra); }
.semana__adesivo .simbolo { width: calc(62 * var(--u)); height: calc(62 * var(--u)); overflow: visible; }
.semana__fio-sono { stroke-dasharray: 3 5; }
.semana__zs text { font-family: var(--font-display); font-weight: 800; fill: #8E8799; opacity: 0; animation: semana-zzz 2.7s ease-in infinite; }
.semana__zs text:nth-child(2) { animation-delay: .9s; } .semana__zs text:nth-child(3) { animation-delay: 1.8s; }
.semana__conta { margin-block: auto; text-align: center; }
.semana__conta b { display: block; font: 800 calc(30 * var(--u))/.82 var(--font-display); color: var(--cena-texto); text-shadow: 0 calc(1.8 * var(--u)) 0 var(--numero-sombra); font-variant-numeric: tabular-nums; }
.semana__conta span { display: block; margin-top: calc(1.6 * var(--u)); font: 800 calc(6 * var(--u))/1.1 var(--font-display); }
.semana__fileira { flex: none; width: 100%; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--u); margin-top: calc(4 * var(--u)); padding: calc(3.6 * var(--u)) calc(2.4 * var(--u)) calc(3.2 * var(--u)); border-radius: calc(6 * var(--u)); background: #fff; box-shadow: var(--sombra); }
.semana__dia { display: flex; flex-direction: column; align-items: center; gap: calc(1.4 * var(--u)); font: 800 calc(3.7 * var(--u)) var(--font-display); text-transform: uppercase; color: var(--ink-soft); }
.semana__dia--hoje { color: var(--pink); }
.semana__bola { position: relative; width: calc(14.6 * var(--u)); height: calc(14.6 * var(--u)); }
.semana__bola svg { display: block; width: 100%; height: 100%; overflow: visible; }
.semana__bola--vazia { border-radius: 50%; border: calc(.8 * var(--u)) dashed var(--line-strong); }
.semana__sono { transform-box: fill-box; transform-origin: center; animation: semana-respira 3s ease-in-out infinite; }
.semana__z { position: absolute; left: 68%; font-family: var(--font-display); font-weight: 800; color: var(--ink-soft); opacity: 0; animation: semana-zzz 2.7s ease-in infinite; }
.semana__z:nth-of-type(1) { top: 2%; font-size: calc(3 * var(--u)); }
.semana__z:nth-of-type(2) { top: -10%; font-size: calc(3.6 * var(--u)); animation-delay: .9s; }
.semana__z:nth-of-type(3) { top: -22%; font-size: calc(4.4 * var(--u)); animation-delay: 1.8s; }
.semana-flutua .semana__fileira { margin-top: 0; }
.semana__seguir { flex: none; width: 100%; min-height: max(48px, calc(15 * var(--u))); margin-top: calc(5 * var(--u)); border: none; border-radius: calc(5 * var(--u)); background: #fff; color: var(--cena-botao); font: 800 calc(5.4 * var(--u)) var(--font-display); letter-spacing: .04em; cursor: pointer; box-shadow: var(--sombra); }
.semana__confete { position: absolute; left: 0; top: 0; z-index: 4; width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); border-radius: 50%; pointer-events: none; }
/* a cara de orgulho maior, a mesma da abertura do símbolo */
.semana .simbolo--pronto .simbolo__sorriso { transform: scale(1.35, 1.6); }
.semana .simbolo--pronto .simbolo__bochecha { transform: scale(1.35); }
@keyframes semana-gira { to { transform: rotate(360deg); } }
@keyframes semana-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, .96); } }
@keyframes semana-zzz { 0% { opacity: 0; transform: translate(0, 3px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(9px, -13px); } }
@media (prefers-reduced-motion: reduce) {
  .semana, .semana-flutua, .semana__raios, .semana__sono { animation: none; }
  .semana__z, .semana__zs text { animation: none; opacity: 1; }
}