/* Biblioteca de formatos do Google: animações de como cada formato fica no desktop e no celular (ciclo de 8 s). */
.fm-svg { display: block; width: 100%; height: auto; }
.fm-svg * { transform-box: fill-box; }
.fm-par { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.fm-par figure { margin: 0; padding: 24px; border-radius: 28px; background: #f0f4f9; display: grid; gap: 14px; justify-items: center; }
.fm-par figcaption { font: 500 14px/1.4 "Google Sans Flex", Roboto, Arial, sans-serif; color: #444746; display: flex; align-items: center; gap: 8px; }
.fm-par figcaption i { width: 8px; height: 8px; border-radius: 50%; background: #0b57d0; }
.fm-par .is-cel-fig .fm-svg { max-width: 190px; }
.fm-hero-art { padding: 28px; border-radius: 32px; background: #f0f4f9; display: grid; place-items: center; }
.fm-hero-art .fm-svg { max-width: 230px; }
.fm-fica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.fm-fica article { padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid #e3e3e3; }
.fm-fica h3 { margin: 0 0 6px; font: 500 16px/1.4 "Google Sans Flex", Roboto, Arial, sans-serif; color: #1f1f1f; }
.fm-fica p { margin: 0; color: #444746; line-height: 1.6; }
.fm-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.fm-meta li { padding: 4px 12px; border-radius: 999px; background: #e8f0fe; color: #0b57d0; font: 500 13px/20px "Google Sans Flex", Roboto, Arial, sans-serif; }
.fm-meta li.is-onde { background: #e6f4ea; color: #146c2e; }
.fm-oficial { margin: 8px 0 0; color: #5f6368; font-size: 14px; font-style: italic; }
.fm-dicas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.fm-dicas li { padding: 18px 20px 18px 52px; border-radius: 18px; background: #fff; border: 1px solid #e3e3e3; position: relative; line-height: 1.6; color: #1f1f1f; }
.fm-dicas li::before { content: "💡"; position: absolute; left: 18px; top: 16px; font-size: 18px; }

/* biblioteca A–Z */
.fm-letras { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; }
.fm-letras a { min-width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 18px; background: #f0f4f9; color: #0b57d0; font: 500 15px "Google Sans Flex", Roboto, Arial, sans-serif; text-decoration: none; }
.fm-letras a:hover { background: #d3e3fd; }
.fm-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.fm-filtros button { height: 36px; padding: 0 16px; border-radius: 18px; border: 1px solid #c4c7c5; background: #fff; color: #1f1f1f; font: 500 14px "Google Sans Flex", Roboto, Arial, sans-serif; cursor: pointer; }
.fm-filtros button[aria-pressed="true"] { background: #d3e3fd; border-color: #d3e3fd; color: #041e49; }
.fm-grupo { margin: 0 0 36px; }
.fm-grupo > h2 { font: 400 32px/1.2 "Google Sans Flex", Roboto, Arial, sans-serif; margin: 0 0 16px; color: #0b57d0; }
.fm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.fm-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 16px; border-radius: 24px; background: #fff; border: 1px solid #e3e3e3; text-decoration: none; color: inherit; transition: background .15s, box-shadow .15s; }
.fm-card:hover { background: #f8fafd; box-shadow: 0 1px 3px rgba(60, 64, 67, .2); }
.fm-card .fm-mini { border-radius: 16px; background: #f0f4f9; padding: 8px; }
.fm-card h3 { margin: 0 0 4px; font: 500 17px/1.3 "Google Sans Flex", Roboto, Arial, sans-serif; color: #1f1f1f; }
.fm-card p { margin: 0 0 6px; color: #444746; font-size: 14px; line-height: 1.5; }
.fm-card small { color: #0b57d0; font: 500 12px "Google Sans Flex", Roboto, Arial, sans-serif; }
.fm-card[hidden] { display: none; }
@media (max-width: 860px) {
  .fm-par, .fm-fica, .fm-dicas { grid-template-columns: 1fr; }
  .fm-par .is-cel-fig .fm-svg { max-width: 170px; }
}

/* ---- animações (8 s) ---- */
.fm-rola { animation: fm-rola 8s ease-in-out infinite; }
@keyframes fm-rola { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(-46px); } }
.fm-sobe { animation: fm-sobe 8s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes fm-sobe { 0%, 14% { transform: translateY(46px); opacity: 0; } 24%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.fm-in { animation: fm-in 8s ease-in-out infinite; }
@keyframes fm-in { 0%, 16% { opacity: 0; transform: translateY(8px); } 26%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fm-fase1 { animation: fm-f1 8s infinite; } .fm-fase2 { animation: fm-f2 8s infinite; } .fm-fase3 { animation: fm-f3 8s infinite; }
@keyframes fm-f1 { 0%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes fm-f2 { 0%, 40% { opacity: 0; } 44%, 76% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes fm-f3 { 0%, 78% { opacity: 0; } 82%, 100% { opacity: 1; } }
.fm-toque { animation: fm-toque 8s infinite; transform-origin: center; }
@keyframes fm-toque { 0%, 24% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1); } 38%, 100% { opacity: 0; transform: scale(1.6); } }
.fm-ok { animation: fm-ok 8s cubic-bezier(.2, .8, .2, 1) infinite; transform-origin: center; }
@keyframes fm-ok { 0%, 82% { transform: scale(.4); opacity: 0; } 88%, 100% { transform: none; opacity: 1; } }
.fm-abre { animation: fm-abre 8s cubic-bezier(.2, .8, .2, 1) infinite; transform-origin: top; }
@keyframes fm-abre { 0%, 16% { transform: scaleY(.05); opacity: 0; } 28%, 94% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.fm-pop { animation: fm-pop 8s cubic-bezier(.2, .8, .2, 1) infinite; transform-origin: center; }
.fm-pop.fm-d2 { animation-name: fm-pop2; } .fm-pop.fm-d3 { animation-name: fm-pop3; }
@keyframes fm-pop { 0%, 14% { opacity: 0; transform: scale(.9); } 22%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fm-pop2 { 0%, 30% { opacity: 0; transform: scale(.9); } 38%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes fm-pop3 { 0%, 46% { opacity: 0; transform: scale(.9); } 54%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.fm-troca { animation: fm-troca 8s ease-in-out infinite; transform-origin: center; }
@keyframes fm-troca { 0%, 40% { transform: none; } 50%, 90% { transform: scale(.94); } 100% { transform: none; } }
.fm-barra { animation: fm-barra 8s linear infinite; transform-origin: left center; }
@keyframes fm-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fm-v1 { animation: fm-v1 8s infinite; } .fm-v2 { animation: fm-v2 8s infinite; } .fm-v3 { animation: fm-v3 8s infinite; }
.fm-v12 { animation: fm-v12 8s infinite; } .fm-v23 { animation: fm-v23 8s infinite; } .fm-v13 { animation: fm-v13 8s infinite; }
@keyframes fm-v1 { 0%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes fm-v2 { 0%, 32% { opacity: 0; } 34%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes fm-v3 { 0%, 65% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes fm-v12 { 0%, 65% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes fm-v23 { 0%, 32% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes fm-v13 { 0%, 32% { opacity: 1; } 34%, 65% { opacity: 0; } 67%, 100% { opacity: 1; } }
.fm-pular { animation: fm-pular 8s infinite; }
@keyframes fm-pular { 0%, 18% { opacity: 0; } 21%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
.fm-onda { animation: fm-onda 1s ease-in-out infinite; transform-origin: center; }
.fm-o1 { animation-delay: -.25s; } .fm-o2 { animation-delay: -.5s; } .fm-o3 { animation-delay: -.75s; }
@keyframes fm-onda { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  .fm-svg * { animation: none !important; }
  .fm-svg .fm-fase1, .fm-svg .fm-fase3, .fm-svg .fm-v23, .fm-svg .fm-v3, .fm-svg .fm-toque, .fm-svg .fm-ok { opacity: 0; }
}
/* hero: desktop e celular juntos, cada um com o nome */
.fm-duo { position: relative; padding: 28px 28px 40px; border-radius: 32px; background: #f0f4f9; display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: 16px; align-items: end; }
.fm-duo > div { display: grid; gap: 8px; justify-items: center; }
.fm-duo span { font: 500 13px "Google Sans Flex", Roboto, Arial, sans-serif; color: #444746; }
.fm-ler { max-width: 760px; margin: 0 auto; }
.fm-ler .cm2-p { font-size: 18px; line-height: 1.75; }

/* ---- Movimento calmo (03/11/2026): na vitrine, cada demonstração fica parada e toca com o mouse em cima ---- */
.fm-card .fm-svg *, .fm-hero-art .fm-svg * { animation-play-state: paused !important; animation-delay: -3.6s !important; }
.fm-card:hover .fm-svg * { animation-play-state: running !important; }
/* na página de cada formato a demonstração toca sozinha: é ela que explica o formato */
@media (prefers-reduced-motion: reduce) { .fm-svg * { animation: none !important; } }

/* ---- Vitrine (03/11/2026): ilustração em cima, nome e 2 linhas de texto; sem borda, sem caixa pesada ---- */
.fm-cards { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 28px 20px; }
.fm-card { grid-template-columns: 1fr; align-items: start; gap: 12px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; }
.fm-card:hover { background: transparent; }
.fm-card .fm-mini { display: grid; place-items: center; height: 196px; padding: 16px; border-radius: 24px; background: #f0f4f9; transition: background .25s cubic-bezier(.2, 0, 0, 1); }
.fm-card:hover .fm-mini { background: #e8f0fe; }
.fm-card .fm-mini svg { height: 164px; width: auto; transition: transform .35s cubic-bezier(.05, .7, .1, 1); }
.fm-card:hover .fm-mini svg { transform: translateY(-3px); }
.fm-card h3 { margin: 2px 4px 2px; font-size: 17px; }
.fm-card p { margin: 0 4px 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fm-card small { margin: 0 4px; color: #5e5e5e; font-weight: 400; }
.fm-card:hover h3 { color: #0b57d0; }
@media (max-width: 520px) { .fm-cards { grid-template-columns: 1fr 1fr; gap: 20px 12px; } .fm-card .fm-mini { height: 160px; } .fm-card .fm-mini svg { height: 132px; } .fm-card p { -webkit-line-clamp: 3; font-size: 13px; } }

/* ---- Exemplo implementado: código em cima, desktop e celular embaixo ---- */
.fmx { max-width: 1080px; margin: 0 auto; display: grid; gap: 24px; }
.fmx-code { margin: 0; border-radius: 24px; background: #1f1f1f; color: #e3e3e3; padding: 20px 24px 22px; }
.fmx-code figcaption { margin: 0 0 12px; font: 500 14px/1.45 Roboto, Arial, sans-serif; color: #a8c7fa; }
.fmx-code pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13.5px/1.65 "Roboto Mono", ui-monospace, Menlo, monospace; }
.fmx-sem { margin: 0; padding: 18px 22px; border-radius: 20px; background: #f0f4f9; color: #444746; font-size: 15px; line-height: 1.55; }
.fmx-telas { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: stretch; }
.fmx-tela { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.fmx-art { flex: 1; display: grid; place-items: center; padding: 24px; border-radius: 24px; background: #f0f4f9; min-height: 300px; }
.fmx-tela.is-desk .fmx-art { background: #e8f0fe; } .fmx-tela.is-cel .fmx-art { background: #e6f4ea; }
.fmx-art svg { width: 100%; max-height: 300px; }
.fmx-tela.is-cel .fmx-art svg { width: auto; height: 280px; }
.fmx-tela figcaption { display: flex; flex-direction: column; gap: 4px; padding: 0 6px; }
.fmx-tela figcaption b { font: 500 16px "Google Sans Flex", Roboto, Arial, sans-serif; color: #1f1f1f; }
.fmx-tela figcaption span { font-size: 15px; line-height: 1.55; color: #444746; }
.fmx-art:hover svg * { animation-play-state: running !important; }
@media (max-width: 860px) { .fmx-telas { grid-template-columns: 1fr; } .fmx-art { min-height: 220px; } .fmx-tela.is-cel .fmx-art svg { height: 240px; } .fmx-code { padding: 16px; } }

/* ---- Fonte oficial do Google (fim da página) ---- */
.fm-fontes .cf-head { max-width: 1080px; margin-left: auto; margin-right: auto; }
.fm-fontes-l { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; gap: 8px; }
.fm-fontes-l a { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 18px; background: #f8fafd; text-decoration: none; color: inherit; transition: background .2s cubic-bezier(.2, 0, 0, 1); }
.fm-fontes-l a:hover { background: #e8f0fe; }
.fm-g { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; font: 700 17px "Google Sans Flex", Roboto, Arial, sans-serif; color: #4285f4; box-shadow: 0 1px 2px rgba(60, 64, 67, .15); }
.fm-ft { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fm-ft b { font: 500 16px/1.35 "Google Sans Flex", Roboto, Arial, sans-serif; color: #0b57d0; }
.fm-ft small { font-size: 13px; color: #5e5e5e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-ext { flex: none; color: #0b57d0; font-size: 18px; transition: transform .25s cubic-bezier(.05, .7, .1, 1); }
.fm-fontes-l a:hover .fm-ext { transform: translate(2px, -2px); }
.fm-fontes-l { grid-template-columns: minmax(0, 1fr); } .fm-fontes-l li, .fm-fontes-l a { min-width: 0; }