/* QueroFranquia: sistema "Blocos & Recortes" (o mesmo do LinguoFit), com paleta própria.
   Blocos de cor sólida em sangria total, display condensado, uma forma recortada por bloco,
   sombra dura só em botão e tile, raio máximo 4px. Sem gradiente, sem blur, sem pill, sem verde. */
:root {
  --qf-blue: #2a46ff;        /* forma e display: hero, discos, botões */
  --qf-blue-dark: #1f36d6;   /* leitura: quiz, blocos de texto sobre azul */
  --qf-blue-deep: #1a2cb3;   /* azul como texto sobre papel/laranja */
  --qf-orange: #ff8a3d;      /* ação e resposta: CTA, tile escolhido, progresso, nome da franquia */
  --qf-orange-deep: #e8752b;
  --qf-pink: #ff5c8a;        /* só forma, nunca texto */
  --qf-sky: #8fd3ff;         /* só forma, nunca texto */
  --qf-paper: #fafaf7;
  --qf-ink: #202124;
  --qf-ink-muted: #4a4d53;
  --qf-white: #fff;
  --r: 4px; --r-idx: 3px;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Big Shoulders Display", "Archivo Narrow", ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--qf-ink); color: var(--qf-paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--qf-orange); color: var(--qf-ink); }
img { max-width: 100%; display: block; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd { margin: 0; }
button { font: inherit; }
.hero > *, .quiz > *, .linha > *, .fr-hero > *, .res-top > *, .sobre > *, .como > * { min-width: 0; }

/* ---------- Entrada das telas ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
#app > .block, #app > .marquee { animation: rise 420ms cubic-bezier(.2,.7,.2,1) both; }
#app > :nth-child(2) { animation-delay: 60ms; } #app > :nth-child(3) { animation-delay: 120ms; } #app > :nth-child(4) { animation-delay: 180ms; } #app > :nth-child(5) { animation-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { #app > *, .nome, .cards .card, .chipf, .listra, .f-campo.novo span { animation: none; opacity: 1; } .marquee-track { animation: none; } }

/* ---------- Container e blocos ---------- */
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 640px) { .wrap { padding-inline: 2rem; } }
.block { position: relative; overflow: clip; }
.block > .wrap { position: relative; z-index: 1; }
.b-blue { background: var(--qf-blue); color: var(--qf-paper); }
.b-blue-dark { background: var(--qf-blue-dark); color: var(--qf-paper); }
.b-orange { background: var(--qf-orange); color: var(--qf-ink); }
.b-ink { background: var(--qf-ink); color: var(--qf-paper); }
.b-paper { background-color: var(--qf-paper); background-image: radial-gradient(rgb(32 33 36 / .1) 1px, transparent 1.4px); background-size: 22px 22px; color: var(--qf-ink); }
.pad { padding-block: clamp(3.5rem, 9vw, 7rem); }
.pad-sm { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ---------- Tipografia ---------- */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; line-height: .9; text-wrap: balance; }
.h1 { font-size: clamp(3.5rem, 8.5vw, 6.75rem); max-width: 14ch; }
.h2 { font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: .92; }
.nome { font-size: clamp(3.5rem, 12vw, 9rem); line-height: .88; overflow-wrap: anywhere; color: var(--qf-orange); display: inline-block; animation: wipe 700ms cubic-bezier(.2,.8,.2,1) 150ms both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.cards .card { animation: rise 500ms cubic-bezier(.2,.7,.2,1) both; }
.cards .card:nth-child(2) { animation-delay: 120ms; } .cards .card:nth-child(3) { animation-delay: 240ms; } .cards .card:nth-child(4) { animation-delay: 360ms; }
.question { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1; letter-spacing: 0; text-wrap: balance; }
.h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; letter-spacing: 0; font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; max-width: 52ch; margin-top: 1.25rem; }
.muted { color: var(--qf-ink-muted); }
.on-color .muted { color: inherit; opacity: .8; }
.eyebrow { display: inline-flex; align-items: center; gap: .625rem; font-weight: 600; font-size: .75rem; line-height: 1; text-transform: uppercase; letter-spacing: .14em; }
.eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--dot, var(--qf-orange)); }
.ghost { font-family: var(--display); font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: var(--stroke-w, 2px) var(--stroke, currentColor); pointer-events: none; user-select: none; }
.link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link:hover { color: var(--qf-blue-deep); }
.on-color .link:hover { color: var(--qf-orange); }
.acc { color: var(--qf-orange); }
.ico { width: 20px; height: 20px; flex: none; }
.mini { font-size: .8125rem; line-height: 1.4; }

/* ---------- Recortes geométricos: faixas listradas (toldo), não discos ---------- */
.listra { position: absolute; z-index: 0; pointer-events: none; width: var(--w, 520px); height: var(--h, 120px); transform: rotate(var(--rot, -12deg)); background: repeating-linear-gradient(90deg, var(--c1, var(--qf-orange)) 0 32px, var(--c2, var(--qf-paper)) 32px 64px); background-size: 64px 100%; animation: toldo 6s linear infinite; }
@keyframes toldo { to { background-position: 64px 0; } }
.listra-hero { --c1: var(--qf-blue); --c2: var(--qf-orange); --w: 640px; --h: 110px; right: -160px; bottom: -34px; --rot: -8deg; }
.listra-como { --c1: var(--qf-paper); --c2: var(--qf-blue); --w: 560px; --h: 96px; left: -140px; bottom: -30px; --rot: 8deg; }
.listra-destaques { --c1: var(--qf-sky); --c2: var(--qf-paper); --w: 480px; --h: 88px; right: -120px; top: -28px; --rot: -6deg; }
.listra-cta { --c1: var(--qf-blue); --c2: var(--qf-paper); --w: 720px; --h: 120px; right: -180px; bottom: -40px; --rot: -10deg; }
.listra-result { --c1: var(--qf-orange); --c2: var(--qf-blue); --w: 760px; --h: 130px; right: -200px; bottom: -44px; --rot: -8deg; }
.listra-why { --c1: var(--qf-pink); --c2: var(--qf-blue); --w: 520px; --h: 96px; left: -140px; bottom: -30px; --rot: 7deg; }
@media (max-width: 1023px) { .listra { --w: 420px; --h: 72px; } }
/* ---------- Recortes geométricos (disco/anel, usados com parcimônia) ---------- */
.disc, .ring { position: absolute; z-index: 0; width: var(--size); height: var(--size); border-radius: 9999px; pointer-events: none; }
.disc { background: var(--c, var(--qf-orange)); }
.ring { border: var(--w, 40px) solid var(--c, var(--qf-blue)); background: transparent; }
.disc > .disc { left: var(--x, 16%); top: var(--y, 12%); }

/* ---------- Botões ---------- */
.btn { --sh: var(--qf-ink); display: inline-flex; align-items: center; justify-content: center; gap: .625rem; white-space: nowrap; border: 2px solid transparent; border-radius: var(--r); font-family: var(--sans); font-weight: 600; letter-spacing: .01em; line-height: 1; cursor: pointer; text-decoration: none; min-height: 48px; padding-inline: 1.25rem; font-size: .9375rem; transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out, color 120ms ease-out; }
.btn.lg { min-height: 56px; padding-inline: 1.5rem; font-size: 1.0625rem; }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { background: var(--qf-orange); color: var(--qf-ink); box-shadow: 4px 4px 0 0 var(--sh); }
.btn-blue { background: var(--qf-blue); color: var(--qf-paper); box-shadow: 4px 4px 0 0 var(--sh); }
.btn-paper { --sh: var(--qf-orange); }
.b-orange .btn-paper, .destaques .btn-paper { --sh: var(--qf-ink); }
.btn-paper { background: var(--qf-paper); color: var(--qf-ink); box-shadow: 4px 4px 0 0 var(--sh); }
.btn-outline { background: transparent; border-color: currentColor; color: inherit; }
.btn-ghost { background: transparent; color: inherit; padding-inline: .25rem; }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--qf-orange-deep); }
  .btn-blue:hover:not(:disabled) { background: var(--qf-blue-dark); }
  .btn-primary:hover:not(:disabled), .btn-blue:hover:not(:disabled), .btn-paper:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--sh); }
  .btn-outline:hover { background: var(--qf-paper); color: var(--qf-blue-deep); border-color: var(--qf-paper); }
  .btn-ghost:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}
.btn-primary:active:not(:disabled), .btn-blue:active:not(:disabled), .btn-paper:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--sh); }
.btn:disabled { background: transparent; border-color: color-mix(in srgb, currentColor 50%, transparent); color: inherit; box-shadow: none; cursor: not-allowed; }
.acoes { display: flex; flex-wrap: wrap; gap: .875rem 1rem; align-items: center; margin-top: 1.75rem; }
.ok { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9375rem; }
.ok::before { content: ""; width: 10px; height: 10px; background: var(--qf-orange); flex: none; }
.ok .ico { display: none; }

/* ---------- Header / footer ---------- */
header { background: var(--qf-paper); color: var(--qf-ink); }
header .wrap { display: flex; justify-content: space-between; align-items: center; height: 4.5rem; border-bottom: 2px solid var(--qf-ink); }
.marca b { color: var(--qf-blue); }
.marca { font-family: var(--display); font-weight: 800; font-size: 1.625rem; letter-spacing: .01em; text-decoration: none; display: inline-flex; align-items: center; }
.marca i { width: 12px; height: 12px; background: var(--qf-orange); display: inline-block; margin-right: .625rem; }
.marca b { font-weight: 800; }
nav { display: flex; gap: 1.25rem; align-items: center; }
nav a { text-decoration: none; font-weight: 600; font-size: .875rem; }
nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
footer { background: var(--qf-ink); color: var(--qf-paper); }
footer .wrap { padding-block: 2rem 3rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8125rem; }
footer .dots { display: flex; gap: 4px; margin-bottom: .75rem; }
footer .dots i { width: 8px; height: 8px; display: block; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; padding-block: clamp(3rem, 8vw, 6rem) 0; }
@media (min-width: 1024px) { .hero { grid-template-columns: 1.1fr 1fr; gap: 3rem; padding-bottom: clamp(3rem, 8vw, 6rem); } }
.hero .h1 { margin-top: 1.5rem; color: var(--qf-blue); }
.hero .lead { color: var(--qf-ink); }
.palco-hero { position: relative; height: clamp(380px, 40vw, 520px); }
.palco-hero .foto { position: absolute; right: 0; top: 0; width: 78%; height: 78%; object-fit: cover; border-radius: var(--r); box-shadow: 6px 6px 0 0 var(--qf-ink); }
.palco-hero .ficha { position: absolute; left: 0; bottom: 0; width: min(22rem, 78%); margin: 0; transform: rotate(-2deg); box-shadow: 8px 8px 0 0 var(--qf-ink); z-index: 2; }
.palco-hero .f-campo { padding: .375rem 0; }
.palco-hero .f-campo small { font-size: .625rem; }
.palco-hero .f-campo span { font-size: .8125rem; }
.chipf { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; background: var(--qf-paper); color: var(--qf-ink); border-radius: var(--r); padding: .625rem .875rem; font-weight: 700; font-size: .875rem; box-shadow: 4px 4px 0 0 var(--qf-ink); opacity: 0; animation: pop 500ms cubic-bezier(.2,.9,.3,1.3) forwards; }
.chipf .idx { width: 1.5rem; height: 1.5rem; font-size: .8125rem; }
.chipf.on { background: var(--qf-orange); }
.chipf.c1 { right: -3%; top: 8%; animation-delay: .5s; --rot: 3deg; }
.chipf.c2 { right: 6%; bottom: 10%; animation-delay: .9s; --rot: -4deg; }
.chipf.c3 { left: 30%; top: -4%; animation-delay: 1.3s; --rot: 2deg; }
@keyframes pop { from { opacity: 0; transform: translateY(16px) rotate(var(--rot, 0)) scale(.9); } to { opacity: 1; transform: translateY(0) rotate(var(--rot, 0)) scale(1); } }
.f-campo.novo span { animation: acende 700ms ease-out both; }
@keyframes acende { 0% { background: var(--qf-orange); color: var(--qf-ink); box-shadow: 0 0 0 4px var(--qf-orange); } 100% { background: transparent; box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 1023px) { .palco-hero { height: 400px; } .palco-hero .foto { width: 100%; height: 58%; } .palco-hero .ficha { width: min(20rem, 86%); } .palco-hero .f-top span { display: none; } .chipf.c3 { display: none; } .chipf.c1 { top: -5%; right: 0; } .chipf.c2 { right: 0; bottom: 2%; } }
.disc-hero { --c: var(--qf-orange); --size: 260px; right: -130px; bottom: -120px; }
.disc-hero > .disc { --c: var(--qf-pink); --size: 48px; }
@media (max-width: 1023px) { .hero { padding-bottom: 6rem; } }

/* ---------- Marquee ---------- */
.marquee { display: flex; align-items: center; height: 52px; overflow: hidden; background: var(--qf-blue); color: var(--qf-paper); border-block: 2px solid var(--qf-ink); }
.marquee-track { display: flex; width: max-content; animation: mq 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; flex: none; align-items: center; white-space: nowrap; list-style: none; padding: 0; margin: 0; font-weight: 600; font-size: .8125rem; line-height: 1; text-transform: uppercase; letter-spacing: .12em; }
.marquee li { display: inline-flex; align-items: center; }
.marquee li::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline: 2.5rem; background: var(--qf-orange); }
@keyframes mq { to { transform: translateX(-33.333%); } }

/* ---------- Como funciona ---------- */
.como { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .como { grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; } }
.passos { list-style: none; padding: 0; margin: 0; border-top: 2px solid currentColor; }
.passos li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start; padding: 1.5rem 0; border-bottom: 2px solid currentColor; }
.passos .ghost { font-size: 3.5rem; --stroke-w: 2px; --stroke: currentColor; margin-top: -.25rem; color: transparent; }
.on-color .passos .ghost { --stroke: var(--qf-paper); }
.b-paper .passos .ghost { --stroke: var(--qf-ink); }
.passos li:hover .ghost { color: var(--qf-orange); -webkit-text-stroke-color: var(--qf-orange); }
.passos b { display: block; font-size: 1.0625rem; font-weight: 700; }
.passos p { margin-top: .25rem; opacity: .85; }

/* ---------- Tiles de franquia ---------- */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 2.5rem; }
.filtros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: .75rem 1rem; align-items: end; margin-top: 2rem; padding-top: 1.5rem; border-top: 3px solid var(--qf-ink); }
.filtro { display: grid; gap: .375rem; min-width: 0; }
.filtro > span { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--qf-ink-muted); font-weight: 600; }
.filtro .input { min-height: 48px; font-size: .9375rem; padding-right: 2.5rem; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--qf-ink) 50%), linear-gradient(135deg, var(--qf-ink) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - .875rem) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.toggle { display: inline-flex; border: 2px solid var(--qf-ink); border-radius: var(--r); background: var(--qf-white); overflow: hidden; }
.toggle button { display: grid; place-items: center; width: 48px; height: 44px; border: 0; background: transparent; color: var(--qf-ink); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out; }
.toggle button + button { border-left: 2px solid var(--qf-ink); }
.toggle button.on { background: var(--qf-ink); color: var(--qf-orange); }
.toggle button:focus-visible { outline-offset: -4px; }
.filtros-res { margin-top: 1.25rem; }
.filtros-res + .grade { margin-top: 1rem; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tile-desc, .tile-ir { display: none; }
.tile-pb { font-size: .8125rem; color: var(--qf-ink-muted); font-weight: 500; }
.tile-wrap { position: relative; }
.tile-wrap .tile { height: 100%; box-sizing: border-box; padding-right: 4.75rem; }
.tile-tools { position: absolute; top: .625rem; right: .625rem; display: flex; gap: .375rem; }
.tile-tools button, .toggle button.fav { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; width: 30px; height: 30px; padding: 0; border: 2px solid var(--qf-ink); border-radius: var(--r); background: var(--qf-white); color: var(--qf-ink); cursor: pointer; transition: background-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out; }
.tile-tools button .ico { width: 16px; height: 16px; }
@media (hover: hover) { .tile-tools button:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 0 var(--qf-ink); } }
.tile-tools button.on, .toggle button.fav.on { background: var(--qf-orange); }
.tile-tools button[data-fav].on .ico { fill: var(--qf-ink); }
.toggle button.fav { width: auto; height: 44px; padding-inline: .75rem; border: 0; border-radius: 0; background: transparent; font-weight: 700; font-size: .8125rem; }
.toggle button.fav.on { background: var(--qf-orange); color: var(--qf-ink); }
.toggle button.fav.on .ico { fill: var(--qf-ink); }
.fr-tools { margin-top: 1rem; gap: .625rem; }
.fr-tools .btn { min-height: 40px; font-size: .875rem; }
.fr-tools .btn[aria-pressed="true"] { background: var(--qf-orange); color: var(--qf-ink); border-color: var(--qf-orange); }
.fr-tools .btn[data-fav][aria-pressed="true"] .ico { fill: var(--qf-ink); }
.cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--qf-blue); color: var(--qf-paper); border-top: 3px solid var(--qf-ink); transform: translateY(110%); transition: transform 200ms ease-out; padding-bottom: env(safe-area-inset-bottom); }
.cmp-bar.on { transform: none; }
.cmp-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; min-height: 4.25rem; padding-block: .625rem; }
.cmp-bar p { margin: 0; font-size: .9375rem; }
.cmp-bar .acoes { margin: 0; gap: .5rem 1rem; }
.cmp-bar .btn { min-height: 42px; }
.cmp-bar .btn-ghost { color: var(--qf-paper); }
body.has-cmp { padding-bottom: 5.5rem; }
#aviso { position: fixed; left: 50%; bottom: 6.5rem; z-index: 40; transform: translate(-50%, 1rem); background: var(--qf-ink); color: var(--qf-paper); border: 2px solid var(--qf-orange); border-radius: var(--r); padding: .75rem 1rem; font-weight: 600; font-size: .9375rem; opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms; max-width: calc(100vw - 2rem); }
#aviso.on { opacity: 1; transform: translate(-50%, 0); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp-rolagem { margin-top: 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--qf-ink); border-radius: var(--r); background: var(--qf-white); }
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 40rem; }
.cmp th, .cmp td { padding: .875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(32 33 36 / .2); min-width: 12rem; font-size: .9375rem; }
.cmp thead th { background: var(--qf-paper); border-bottom: 2px solid var(--qf-ink); vertical-align: bottom; }
.cmp tbody th { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--qf-ink-muted); padding-top: 1.125rem; }
.cmp th:first-child, .cmp td:first-child { position: sticky; left: 0; background: var(--qf-paper); min-width: 9rem; max-width: 11rem; z-index: 1; box-shadow: 2px 0 0 0 rgb(32 33 36 / .15); }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.cmp-marca { display: grid; justify-items: start; gap: .5rem; }
.cmp-marca b { font-size: 1.375rem; font-weight: 700; }
.cmp-acoes td { padding-block: 1.125rem; }
.cmp-acoes .btn { min-height: 42px; }
@media (max-width: 639px) { .cmp th, .cmp td { min-width: 10rem; padding: .75rem; } .cmp th:first-child, .cmp td:first-child { min-width: 7rem; } .cmp-bar .nomes { display: none; } }
.grade.lista { grid-template-columns: 1fr; gap: .75rem; }
.grade.lista .tile { grid-template-columns: 56px 1fr auto; padding-right: 6rem; }
.grade.lista .tile-tools { top: 50%; transform: translateY(-50%); }
.grade.lista .tile-txt { grid-template-columns: auto 1fr; grid-template-areas: "nome inv" "seg pb" "desc desc"; column-gap: 1rem; align-items: center; }
.grade.lista .tile-txt b { grid-area: nome; }
.grade.lista .tile-txt small { grid-area: seg; }
.grade.lista .tile-txt em { grid-area: inv; justify-self: end; text-align: right; }
.grade.lista .tile-pb { grid-area: pb; justify-self: end; text-align: right; }
.grade.lista .tile-desc { grid-area: desc; display: block; margin-top: .375rem; font-size: .9375rem; color: var(--qf-ink-muted); line-height: 1.4; }
.grade.lista .tile-ir { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; font-size: .875rem; white-space: nowrap; }
.vazio { margin-top: 2rem; padding: 2rem; border: 2px dashed var(--qf-ink); border-radius: var(--r); display: grid; gap: .75rem; justify-items: start; }
@media (max-width: 1023px) { .filtros { grid-template-columns: 1fr 1fr; } .filtros .modo { justify-self: start; } }
@media (max-width: 639px) { .filtros { grid-template-columns: 1fr; } .grade.lista .tile { grid-template-columns: 56px 1fr; } .grade.lista .tile-ir { display: none; } .grade.lista .tile-txt { grid-template-columns: 1fr; grid-template-areas: "nome" "seg" "inv" "pb" "desc"; } .grade.lista .tile-txt em, .grade.lista .tile-pb { justify-self: start; text-align: left; } .grade.lista .tile { padding-right: 1rem; padding-bottom: 3.25rem; } .grade.lista .tile-tools { top: auto; bottom: .625rem; transform: none; } }
.tile { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: center; background: var(--qf-paper); color: var(--qf-ink); border-radius: var(--r); padding: .875rem 1rem; text-decoration: none; transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.b-paper .tile { border: 2px solid var(--qf-ink); }
@media (hover: hover) { .b-paper .tile:hover { box-shadow: 4px 4px 0 0 var(--qf-orange); } }
@media (hover: hover) { .tile:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--qf-ink); } }
.tile-txt { display: grid; gap: 2px; }
.tile-txt b { font-family: var(--display); font-weight: 700; font-size: 1.375rem; letter-spacing: 0; }
.tile-txt small { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--qf-ink-muted); font-weight: 600; }
.tile-txt em { font-style: normal; font-size: .875rem; font-weight: 600; }
.logo-q { width: 56px; height: 56px; background: var(--qf-white); border-radius: var(--r); display: grid; place-items: center; padding: 6px; flex: none; box-shadow: 3px 3px 0 0 var(--qf-ink); }
.logo-q img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-q.g { width: 80px; height: 80px; padding: 8px; }
.logo-q.xl { width: 150px; height: 150px; padding: 16px; box-shadow: 6px 6px 0 0 var(--qf-orange); }
.disc-destaques { --c: var(--qf-sky); --size: 220px; left: -80px; bottom: -80px; }
.ring-cta { --c: var(--qf-blue); --size: 260px; --w: 32px; right: -110px; bottom: -110px; }

/* ---------- Quiz ---------- */
.quiz { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem 4rem; min-height: calc(100svh - 4.5rem); align-content: start; }
@media (min-width: 1024px) { .quiz { grid-template-columns: minmax(0, 40rem) 1fr; gap: 4rem; align-items: start; } }
.segments { display: grid; grid-template-columns: repeat(var(--total, 9), minmax(0, 1fr)); gap: 4px; margin-top: .75rem; }
.seg { height: 8px; border-radius: 0; background: rgb(250 250 247 / .18); }
.seg.done, .seg.now { background: var(--qf-orange); }
.topo-q { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.topo-q .pct { color: var(--qf-orange); }
.question { margin-top: 2rem; }
.ajuda { margin-top: .75rem; opacity: .8; font-size: .9375rem; }
.opts { display: grid; gap: .625rem; margin-top: 1.75rem; }
.tile-opt { display: grid; grid-template-columns: 2.25rem 1fr; gap: .75rem; align-items: center; min-height: 56px; padding: 10px 14px 10px 10px; background: var(--qf-paper); color: var(--qf-ink); border: 0; border-radius: var(--r); font-weight: 500; font-size: 1rem; line-height: 1.35; text-align: left; cursor: pointer; transition: transform 120ms ease-out, box-shadow 120ms ease-out, background-color 120ms ease-out; }
.idx { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--qf-orange); color: var(--qf-ink); border-radius: var(--r-idx); font-family: var(--display); font-weight: 800; font-size: 1rem; line-height: 1; }
@media (hover: hover) { .tile-opt:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 rgb(32 33 36 / .45); } }
.tile-opt.on { background: var(--qf-orange); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--qf-ink); }
.tile-opt.on .idx { background: var(--qf-ink); color: var(--qf-orange); }
.ufs { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin-top: 1.75rem; }
@media (min-width: 640px) { .ufs { grid-template-columns: repeat(9, 1fr); } }
.uf { min-height: 48px; background: var(--qf-paper); color: var(--qf-ink); border: 0; border-radius: var(--r); font-family: var(--display); font-weight: 800; font-size: 1rem; cursor: pointer; transition: transform 120ms, box-shadow 120ms, background-color 120ms; }
@media (hover: hover) { .uf:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 rgb(32 33 36 / .45); } }
.uf.sugerida { box-shadow: 4px 4px 0 0 var(--qf-orange); transform: translate(-2px, -2px); }
.uf.on { background: var(--qf-orange); box-shadow: 4px 4px 0 0 var(--qf-ink); transform: translate(-2px, -2px); }
.tile-opt.br { grid-column: 1 / -1; }
.nav-q { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; gap: 1rem; }
.lado { display: none; }
@media (min-width: 1024px) { .lado { display: block; position: sticky; top: 2rem; } }
.lado .ghost { font-size: clamp(6rem, 12vw, 11rem); --stroke-w: 2px; --stroke: var(--qf-paper); opacity: .55; display: block; text-align: right; }

/* a ficha de perfil (papel, sombra dura) */
.ficha { background: var(--qf-paper); color: var(--qf-ink); border-radius: var(--r); padding: 1.25rem 1.375rem 1rem; box-shadow: 6px 6px 0 0 var(--qf-ink); margin-top: 1.5rem; }
.ficha .f-top { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .75rem; border-bottom: 2px solid var(--qf-ink); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--qf-ink-muted); }
.ficha .f-top b { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0; text-transform: none; color: var(--qf-ink); }
.f-campo { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid rgb(32 33 36 / .15); min-width: 0; }
.f-campo small { font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--qf-ink-muted); font-weight: 600; white-space: nowrap; }
.f-campo span { font-size: .875rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.f-campo.vazio span { width: 36%; height: 2px; background: rgb(32 33 36 / .15); align-self: center; }
.f-campo.agora small { color: var(--qf-blue-deep); }
.f-campo.agora span { width: 36%; height: 3px; background: var(--qf-orange); align-self: center; }
.f-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding-top: .75rem; font-size: .75rem; color: var(--qf-ink-muted); font-weight: 600; }
.f-foot .mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.ficha.cert { margin: 0; box-shadow: 6px 6px 0 0 var(--qf-orange); }

/* ---------- Formulário ---------- */
.form { display: grid; gap: 1rem; margin-top: 2rem; max-width: 34rem; }
.form label { display: grid; gap: .375rem; font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; }
.input { width: 100%; min-height: 56px; padding: 0 1rem; background: var(--qf-white); color: var(--qf-ink); border: 2px solid var(--qf-ink); border-radius: var(--r); font-family: var(--sans); font-weight: 500; font-size: 1.0625rem; line-height: 1.3; }
.input:focus { outline: none; border-color: var(--qf-orange); box-shadow: 3px 3px 0 0 var(--qf-orange); }
.form .check { grid-template-columns: 22px 1fr; align-items: start; gap: .75rem; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .875rem; }
.form .check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--qf-blue); }
.form.inline { max-width: none; background: var(--qf-paper); color: var(--qf-ink); border-radius: var(--r); padding: 1.25rem; box-shadow: 4px 4px 0 0 var(--qf-ink); }
.duas { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .duas { grid-template-columns: 1fr 1fr; } }

/* ---------- Resultado ---------- */
.res-top { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .res-top { grid-template-columns: 1.1fr 1fr; gap: 3rem; } }
.disc-result { --c: var(--qf-blue); --size: 240px; right: -110px; bottom: -110px; }
@media (min-width: 1024px) { .disc-result { --size: 560px; right: -6%; top: 50%; translate: 0 -50%; bottom: auto; } }
.cert-wrap { position: relative; z-index: 1; display: none; justify-items: center; }
@media (min-width: 1024px) { .cert-wrap { display: grid; } }
.res-top .ficha { width: min(26rem, 100%); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.chip { font-size: .8125rem; font-weight: 600; padding: .5rem .75rem; border-radius: var(--r); background: rgb(250 250 247 / .12); }
.porque { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .porque { grid-template-columns: 1fr 1.6fr; gap: 3rem; align-items: start; } }
.cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--qf-paper); color: var(--qf-ink); border-radius: var(--r); padding: 1.5rem; min-height: 11rem; display: grid; align-content: end; gap: .5rem; }
.card.c2 { background: var(--qf-sky); }
.card.neg { background: var(--qf-pink); }
.card .h3 { font-size: 1.5rem; line-height: 1.05; }
.card .ico { color: var(--qf-ink); justify-self: end; margin-bottom: auto; }
.disc-why { --c: var(--qf-pink); --size: 200px; left: -70px; bottom: -70px; }
.lista { display: grid; gap: 1rem; margin-top: 2.5rem; }
.linha { display: grid; grid-template-columns: 1fr; gap: 1.25rem; background: var(--qf-white); color: var(--qf-ink); border-radius: var(--r); padding: 1.5rem; border: 2px solid var(--qf-ink); }
@media (min-width: 768px) { .linha { grid-template-columns: 80px 1fr; gap: 1.5rem; padding: 1.75rem; } }
.linha .pos { font-family: var(--display); font-weight: 800; font-size: .875rem; letter-spacing: .1em; color: var(--qf-ink-muted); }
.linha h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: 0; line-height: .95; }
.desc { margin-top: .5rem; color: var(--qf-ink-muted); }
.dados { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 1.25rem; }
.dados dt { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--qf-ink-muted); font-weight: 600; }
.dados dd { font-weight: 700; margin-top: 2px; }
.bate, .naobate { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .5rem; }
.bate li, .naobate li { display: flex; gap: .625rem; align-items: flex-start; }
.bate li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; background: var(--qf-orange); }
.naobate li { color: var(--qf-ink-muted); }
.naobate li::before { content: ""; flex: none; width: 10px; height: 2px; margin-top: 11px; background: var(--qf-pink); }
.bate .ico { display: none; }

/* ---------- Página da franquia ---------- */
.fr-hero { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .fr-hero { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
.fr-obj { position: relative; display: grid; place-items: center; min-height: 18rem; }
@media (max-width: 1023px) { .fr-obj { min-height: 12rem; margin-block: 1rem 0; } .fr-obj .listra { --h: 6rem; margin-top: -3rem; } }
.fr-obj { overflow: visible; }
.fr-obj .listra { --c1: var(--qf-blue); --c2: var(--qf-orange); --w: 100%; --h: 8rem; --rot: -6deg; left: 0; top: 50%; margin-top: -4rem; }
.fr-obj .logo-q { position: relative; z-index: 1; }
.sobre { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .sobre { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: start; } }
.texto { max-width: 68ch; font-size: 1.0625rem; color: var(--qf-ink); margin-top: 1.5rem; }
.texto p + p { margin-top: .875rem; }
.tabela { margin-top: 2rem; border-top: 2px solid var(--qf-ink); }
.tabela div { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid rgb(32 33 36 / .2); }
.tabela dt { font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--qf-ink-muted); padding-top: .25rem; }
.tabela dd { font-weight: 500; }
@media (max-width: 639px) { .tabela div { grid-template-columns: 1fr; gap: .25rem; } }
.destaques { background: var(--qf-orange); color: var(--qf-ink); border-radius: var(--r); padding: 1.75rem; position: sticky; top: 1.5rem; }
.destaques ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .875rem; }
.destaques li { display: flex; gap: .75rem; font-weight: 600; }
.destaques li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; background: var(--qf-ink); }
.destaques .acoes { flex-direction: column; align-items: stretch; }
.destaques .btn { width: 100%; }
.destaques .ok::before { background: var(--qf-ink); }
.video { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--qf-ink); box-shadow: 6px 6px 0 0 var(--qf-ink); }
.video iframe { width: 100%; height: 100%; display: block; }
.secao, .faixa { width: 100%; border-radius: var(--r); margin-top: 1.5rem; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
.galeria img { aspect-ratio: 730 / 492; object-fit: cover; border-radius: var(--r); }
.centro { text-align: center; }
.estreito { max-width: 40rem; }
.respiro { margin-top: 2.5rem; }

/* ---------- Analisando ---------- */
.analisando .wrap { min-height: calc(100svh - 4.5rem); display: grid; align-content: center; padding-block: 4rem; }
.etapas-an { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .75rem; max-width: 34rem; }
.etapas-an li { display: flex; align-items: center; gap: .875rem; font-weight: 600; font-size: 1.0625rem; opacity: 0; animation: rise 400ms ease-out forwards; animation-delay: var(--d, 0ms); }
.seg.an { background: rgb(250 250 247 / .18); animation: segon 300ms ease-out forwards; animation-delay: calc(var(--d, 0ms) + 200ms); }
@keyframes segon { to { background: var(--qf-orange); } }
.so-mobile { display: none; }
@media (max-width: 1023px) { .so-mobile { display: flex; margin: 1.25rem 0 0; } .so-mobile .chip { background: rgb(250 250 247 / .12); } }
.b-orange .ok::before { background: var(--qf-ink); }

/* ---------- Páginas legais ---------- */
.legal .texto h2 { margin-top: 2.25rem; }
.legal .texto h2 + p { margin-top: .75rem; }
.legal .texto a, footer a, .form .check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form .check a { font-weight: 600; }

/* ---------- Foco visível (teclado) ---------- */
:focus-visible { outline: 3px solid var(--qf-orange); outline-offset: 3px; }
.on-color :focus-visible { outline-color: var(--qf-paper); }
.input:focus-visible { outline: none; }
.tile-opt:focus-visible, .btn:focus-visible { outline-offset: 4px; }