/* =====================================================================================================
   Aulecko — design system of the public site (02/10). One idea drives every choice: FROM THE BOARD TO THE NOTEBOOK.
   Colors are the classroom's own: paper, pen blue, highlighter yellow, pencil graphite, the notebook's red margin
   and blue rules, the board. Light by default (a bright room); at night the whiteboard becomes the green chalkboard.
   Fonts are self-hosted (CSP 'self', OFL): Fraunces (titles: warm, soft), Atkinson Hyperlegible Next (text: drawn for
   low vision), Caveat (handwriting, only where someone is writing). Every motion copies a classroom gesture.
   ===================================================================================================== */
@font-face { font-family: "Fraunces"; src: url("/fontes/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fontes/atkinson.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fontes/caveat.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* the room */
  --papel: #fbf7ef; --parede: #f4ede0; --folha: #fffdf8; --mesa: #e9dcc6; --madeira: #c9a57a;
  --tinta: #1d2433; --suave: #5a6070; --linha: #e8e0cf; --linha-forte: #d5c8b0;
  /* what is on the desk */
  --caneta: #2544a8; --caneta-forte: #1b3380; --caneta-claro: #e8edf9; --marca-texto: #f5c542; --marca-claro: #fdf3cf;
  --lapis: #4a4a4f; --margem: #d9534f; --pauta: #a9c7e8; --verde: #2f7a52; --verde-claro: #e2f2e8;
  /* the board and the notebook */
  --quadro: #f7faf9; --quadro-tinta: #1f3a8a; --quadro-moldura: #b9c2c8; --caderno: #fdf8dd; --caderno-tinta: #3b3b40;
  /* type */
  --titulo: "Fraunces", "Iowan Old Style", Georgia, serif;
  --texto: "Atkinson", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mao: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --tam: 17.5px;
  --sombra: 0 1px 2px rgb(60 45 20 / .06), 0 14px 40px -12px rgb(60 45 20 / .18);
  --sombra-forte: 0 2px 4px rgb(60 45 20 / .08), 0 28px 60px -20px rgb(60 45 20 / .32);
  --largura: 1200px; --raio: 18px; --sobre-caneta: #ffffff;
  color-scheme: light;
}
/* night: a desk lamp over the notebook, and the board turns into the classic green chalkboard */
:root[data-tema-ativo="escuro"] {
  --papel: #17191e; --parede: #1c1f25; --folha: #22262d; --mesa: #2b2620; --madeira: #6b5338;
  --tinta: #f1ede4; --suave: #b9b6ad; --linha: #343943; --linha-forte: #4a505c;
  --caneta: #7f9cff; --caneta-forte: #b7c8ff; --caneta-claro: #253150; --marca-claro: #43391b;
  --lapis: #c9c9cf; --verde: #7fd6a6; --verde-claro: #1d3a2b;
  --quadro: #1f3a33; --quadro-tinta: #f4f1e8; --quadro-moldura: #5d4630; --caderno: #e9e1c4; --caderno-tinta: #2c2c31;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 14px 40px -12px rgb(0 0 0 / .5);
  --sombra-forte: 0 2px 4px rgb(0 0 0 / .3), 0 28px 60px -20px rgb(0 0 0 / .6);
  --sobre-caneta: #0f1424;
  color-scheme: dark;
}
/* colors for color-blind readers: never only red × green; blue and orange carry the meaning, with text alongside */
/* Each palette exists TWICE — once for the bright room, once for the night room. A palette written only for light
   leaked light tokens into the dark theme (white page over a dark desk, dark-blue ink on a dark board: 02/10). */
:root:not([data-tema-ativo="escuro"])[data-cores="vv"] { --margem: #d55e00; --verde: #0072b2; --verde-claro: #ddeefa; --marca-texto: #e69f00; --marca-claro: #fde9c4; --caneta: #0062a3; --caneta-forte: #00467a; --caneta-claro: #dcecf8; }
:root[data-tema-ativo="escuro"][data-cores="vv"] { --margem: #ff9a4d; --verde: #6cc4f5; --verde-claro: #12324a; --marca-texto: #f0a92a; --marca-claro: #4a3512; --caneta: #56b4e9; --caneta-forte: #b5defa; --caneta-claro: #12324a; }
:root:not([data-tema-ativo="escuro"])[data-cores="az"] { --caneta: #00695c; --caneta-forte: #004d43; --caneta-claro: #d7efeb; --marca-texto: #e4572e; --marca-claro: #fde3d8; --pauta: #9fcfc7; --quadro-tinta: #004d43; }
:root[data-tema-ativo="escuro"][data-cores="az"] { --caneta: #4fd1c5; --caneta-forte: #a7f3eb; --caneta-claro: #0f3b37; --marca-texto: #ff8a65; --marca-claro: #4a2219; --quadro-tinta: #c9f5ef; }
:root:not([data-tema-ativo="escuro"])[data-cores="contraste"] { --papel: #ffffff; --parede: #ffffff; --folha: #ffffff; --mesa: #f2f2f2; --tinta: #000000; --suave: #222222; --linha: #000000; --linha-forte: #000000; --caneta: #0033cc; --caneta-forte: #001f80; --caneta-claro: #e3eaff; --quadro: #ffffff; --quadro-tinta: #001f80; --caderno-tinta: #000000; --caderno: #ffffff; }
:root[data-tema-ativo="escuro"][data-cores="contraste"] { --papel: #000000; --parede: #000000; --folha: #0b0b0b; --mesa: #141414; --tinta: #ffffff; --suave: #ececec; --linha: #ffffff; --linha-forte: #ffffff; --caneta: #9db8ff; --caneta-forte: #d6e1ff; --caneta-claro: #0d1d52; --quadro: #0d2a22; --quadro-tinta: #ffffff; --caderno: #ffffff; --caderno-tinta: #000000; }
:root[data-texto="maior"] { --tam: 20.5px; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--tam)/1.6 var(--texto); text-rendering: optimizeLegibility; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -.012em; font-variation-settings: "SOFT" 60, "WONK" 0; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.3rem + 4.6vw, 4.8rem); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem); }
h3 { font-size: 1.22rem; line-height: 1.25; }
p { margin: 0; }
a { color: var(--caneta-forte); text-underline-offset: .18em; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--caneta); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
/* the highlighter: always dark text on yellow (a marker never hides what it marks), drawn under the lower half */
mark { background: linear-gradient(transparent 52%, var(--marca-texto) 52%, var(--marca-texto) 90%, transparent 90%); color: inherit; padding: 0 .1em; border-radius: 2px; }
/* at night half a stroke would leave dark text on a dark page: the marker covers the whole word, text stays dark */
:root[data-tema-ativo="escuro"] mark { background: #f2c94c; color: #17191e; padding: 0 .18em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mao { font-family: var(--mao); font-weight: 600; letter-spacing: 0; }
.pular { position: absolute; left: 8px; top: -80px; background: var(--tinta); color: var(--papel); padding: 10px 14px; border-radius: 10px; z-index: 80; }
.pular:focus { top: 8px; }
.nota { font-size: .9rem; color: var(--suave); }
/* text that sits straight on the squared/dotted paper: the lines never cross the letters (a halo of the paper) and the
   grey is a step darker, so it reads for low vision and on bright or dim screens */
:is(.mundo-professor, .mundo-aluno, .pagina-porta) :is(section, main) > :is(p, .nota) { color: color-mix(in srgb, var(--tinta) 80%, var(--papel)); text-shadow: 0 0 2px var(--papel), 0 0 6px var(--papel), 0 0 10px var(--papel); }
.selo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--caneta-forte); margin-bottom: 18px; }
.selo::before { content: ""; width: 22px; height: 8px; border-radius: 4px; background: var(--marca-texto); transform: rotate(-4deg); }

/* buttons: the label gets a highlighter swipe on hover — choosing is marking */
.botao, .botao-secundario, .botao-link { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 14px; font: 700 1rem/1.2 var(--texto); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform .12s, background .2s, border-color .2s, box-shadow .2s; }
.botao { background: var(--caneta); color: var(--sobre-caneta); box-shadow: 0 8px 20px -8px rgb(37 68 168 / .55); }
.botao:hover { background: var(--caneta-forte); }
:root[data-tema-ativo="escuro"] .botao:hover { background: #a9bdff; }
.botao:active { transform: translateY(1px); }
.botao-secundario { background: var(--folha); color: var(--caneta-forte); border-color: var(--linha-forte); }
.botao-secundario::after, .botao-link::after { content: ""; position: absolute; z-index: -1; left: 14px; right: 14px; bottom: 11px; height: .55em; background: var(--marca-texto); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.3, .7, .2, 1); opacity: .85; }
.botao-secundario:hover::after, .botao-link:hover::after, .botao-secundario:focus-visible::after, .botao-link:focus-visible::after { transform: scaleX(1); }
.botao-secundario:hover { border-color: var(--caneta); }
.botao-link { background: transparent; color: var(--caneta-forte); padding-inline: 12px; }
.botao-grande { min-height: 58px; padding: 15px 28px; font-size: 1.06rem; border-radius: 16px; }
:root[data-tema-ativo="escuro"] .botao-secundario::after, :root[data-tema-ativo="escuro"] .botao-link::after { background: #8a6d12; }

/* ---------- header ---------- */
.topo { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px 22px; min-height: 68px; padding: 8px clamp(16px, 4vw, 40px); background: color-mix(in srgb, var(--papel) 88%, transparent); backdrop-filter: saturate(1.3) blur(10px); border-bottom: 1px solid var(--linha); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 650 1.45rem/1 var(--titulo); color: var(--tinta); text-decoration: none; min-height: 44px; letter-spacing: -.01em; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo .perna-lapis { stroke: var(--lapis); }
.topo-nav { display: flex; gap: 2px; }
.topo-nav a { padding: 10px 12px; border-radius: 10px; color: var(--suave); font-weight: 600; text-decoration: none; }
.topo-nav a:hover { color: var(--tinta); background: var(--parede); }
.topo-acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.idioma { font-weight: 600; color: var(--suave); text-decoration: none; padding: 10px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; }
.idioma:hover { background: var(--parede); color: var(--tinta); }
.troca-mundo { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; border: 1.5px solid currentColor; white-space: nowrap; color: var(--caneta-forte); }
.troca-mundo:hover { background: var(--caneta-claro); }
.topo-mobile { display: none; }
@media (max-width: 1340px) { .topo-nav { display: none; } }
@media (max-width: 900px) and (min-width: 721px) { .topo-acoes .botao { display: none; } }
@media (max-width: 720px) {
  .topo { padding: 8px 14px; gap: 8px; min-height: 60px; }
  .topo-acoes { display: none; }
  .topo-mobile { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
  .topo-mobile-cta { min-height: 44px; padding: 8px 12px; font-size: .88rem; white-space: nowrap; box-shadow: none; }
  .topo-menu { position: relative; }
  .topo-menu summary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px 10px; border: 1.5px solid var(--linha-forte); border-radius: 12px; font-size: .85rem; font-weight: 700; background: var(--folha); cursor: pointer; list-style: none; }
  .topo-menu summary::-webkit-details-marker { display: none; }
  .topo-menu[open] summary { border-color: var(--caneta); }
  .topo-menu-conteudo { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 28px)); display: grid; gap: 2px; padding: 10px; border: 1px solid var(--linha-forte); border-radius: 16px; background: var(--folha); box-shadow: var(--sombra-forte); }
  .topo-menu-conteudo > a { display: flex; align-items: center; min-height: 46px; padding: 8px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 600; }
  .topo-menu-conteudo > a:hover { background: var(--parede); }
  .topo-menu-conteudo .troca-mundo { justify-content: center; margin: 4px 0; }
}
@media (max-width: 350px) { .topo .logo { font-size: 1.15rem; gap: 6px; } .topo .logo svg { width: 28px; height: 28px; } .topo-mobile-cta { padding-inline: 9px; } }

/* ---------- accessibility panel ("Aa") ---------- */
.acess { position: relative; }
.acess > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--linha-forte); background: var(--folha); font: 700 .95rem var(--titulo); cursor: pointer; }
.acess > summary::-webkit-details-marker { display: none; }
.acess[open] > summary { border-color: var(--caneta); }
.acess-painel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; width: min(340px, calc(100vw - 28px)); display: grid; gap: 14px; padding: 18px; border-radius: 18px; border: 1px solid var(--linha-forte); background: var(--folha); box-shadow: var(--sombra-forte); }
.topo-menu-conteudo .acess-painel { position: static; width: auto; box-shadow: none; border: 0; padding: 8px 4px 2px; }
.acess-painel h2 { font-size: 1.15rem; }
.acess-grupo { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; }
.acess-grupo legend, .acess-grupo > span { font-weight: 700; font-size: .88rem; color: var(--suave); padding: 0; margin-bottom: 2px; }
.acess-opcoes { display: flex; flex-wrap: wrap; gap: 6px; }
.acess-opcoes button, .acess select { min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1.5px solid var(--linha-forte); background: var(--papel); font-weight: 600; font-size: .92rem; cursor: pointer; }
.acess-opcoes button[aria-pressed="true"] { border-color: var(--caneta); background: var(--caneta); color: var(--sobre-caneta); }
.acess-opcoes button[aria-pressed="true"]::before { content: "✓ "; }
.acess select { width: 100%; }
.acess-som { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acess-som small { color: var(--suave); display: block; font-size: .82rem; }
.interruptor { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; border: 1.5px solid var(--linha-forte); background: var(--parede); cursor: pointer; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 50%; background: var(--suave); transition: transform .2s, background .2s; }
.interruptor[aria-pressed="true"] { background: var(--caneta-claro); border-color: var(--caneta); }
.interruptor[aria-pressed="true"]::after { transform: translateX(20px); background: var(--caneta); }

/* ---------- sections ---------- */
main > section { max-width: var(--largura); margin: 0 auto; padding: clamp(52px, 7vw, 104px) clamp(16px, 4vw, 40px); }
.secao-titulo { max-width: 22em; }
.secao-lead { color: var(--suave); font-size: 1.12rem; max-width: 40em; margin-top: 16px; }
.cartao { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.chips-grandes { list-style: none; padding: 0; margin: 28px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips-grandes li { background: var(--folha); border: 1px solid var(--linha); border-radius: 999px; padding: 10px 18px; font-weight: 600; }
.badge { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.badge-ja { background: var(--verde-claro); color: var(--verde); } .badge-ja::before { content: "✓"; }
.badge-breve { background: var(--marca-claro); color: #6b4f00; } .badge-breve::before { content: "◔"; }
:root[data-tema-ativo="escuro"] .badge-breve { color: #f2d27a; }

/* the "before → now" voice card (gateway + student): a notebook page held by a strip of tape */
.eco-demo { position: relative; background: linear-gradient(transparent 31px, color-mix(in srgb, var(--pauta) 70%, transparent) 31px) 0 0 / 100% 32px, var(--caderno); color: var(--caderno-tinta); border-radius: 6px 16px 16px 6px; padding: 40px clamp(18px, 3vw, 32px) 26px clamp(30px, 4vw, 52px); display: grid; gap: 16px; box-shadow: var(--sombra-forte); border-left: 2px solid var(--margem); }
.eco-demo::before { content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgb(245 197 66 / .55); border-radius: 2px; }
.eco-frase { font: 600 clamp(1.5rem, 1.1rem + 1.3vw, 2rem)/1.25 var(--mao); }
.eco-lados { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.eco-lado { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play info" "barras barras"; gap: 8px 12px; align-items: center; text-align: left; background: rgb(255 255 255 / .75); border: 1px solid rgb(0 0 0 / .1); border-radius: 14px; padding: 12px; cursor: pointer; color: #2c2c31; min-height: 44px; }
.eco-lado strong { display: block; } .eco-lado small { color: #5a5a62; }
.eco-lado .play { grid-area: play; width: 46px; height: 46px; border-radius: 50%; background: #2544a8; position: relative; }
.eco-lado .play { display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgb(37 68 168 / .6); transition: transform .15s; }
.eco-lado:hover .play { transform: scale(1.06); }
.eco-lado .play svg { width: 22px; height: 22px; fill: #fff; }
.eco-lado .play .ic-pausa, .eco-lado[aria-pressed="true"] .play .ic-tocar { display: none; }
.eco-lado[aria-pressed="true"] .play .ic-pausa { display: block; }
.eco-agora { background: #fff4c7; border-color: #e6c75c; }
.barras { grid-area: barras; height: 26px; background: repeating-linear-gradient(90deg, #b8b2a3 0 3px, transparent 3px 6px); border-radius: 3px; }
.eco-lado[aria-pressed="true"] .barras { background: repeating-linear-gradient(90deg, #2544a8 0 3px, transparent 3px 6px); }
.eco-seta { font-size: 1.4rem; color: #5a5a62; }
.eco-demo .botao { justify-self: start; color: #fff; background: #2544a8; }
.eco-demo .nota { color: #5a5a62; }
@media (max-width: 520px) { .eco-lados { grid-template-columns: 1fr; } .eco-seta { transform: rotate(90deg); justify-self: center; } }

.perguntas details { border-bottom: 1px solid var(--linha); padding: 6px 0; max-width: 840px; }
.perguntas details:first-of-type { margin-top: 26px; }
.perguntas summary { cursor: pointer; font-weight: 700; font-size: 1.08rem; padding: 14px 0; min-height: 44px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; font: 600 1.5rem/1 var(--titulo); color: var(--caneta); }
.perguntas details[open] summary::after { content: "–"; }
.perguntas details p { color: var(--suave); padding: 0 0 16px; max-width: 46em; }
.cta-final { text-align: center; display: grid; justify-items: center; gap: 18px; }
.cta-final h2 { max-width: 16em; }

.rodape { max-width: var(--largura); margin: 0 auto; padding: 40px clamp(16px, 4vw, 40px) 52px; border-top: 1px solid var(--linha); display: grid; gap: 8px; color: var(--suave); font-size: .92rem; }
.rodape strong { font-family: var(--titulo); font-size: 1.05rem; color: var(--tinta); }
.rodape a { color: var(--suave); }

/* ---------- sign in / text pages ---------- */
.auth { max-width: 480px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) 16px 40px; }
.auth-cartao { background: var(--folha); border: 1px solid var(--linha); border-radius: 22px; box-shadow: var(--sombra-forte); padding: clamp(22px, 5vw, 38px); display: grid; gap: 14px; }
.auth-cartao h1 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.4rem); }
.auth-sub { color: var(--suave); }
.auth-form { display: grid; gap: 14px; margin-top: 6px; }
.campo { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.campo input { font-weight: 400; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--linha-forte); border-radius: 12px; background: var(--papel); }
.campo input:focus { border-color: var(--caneta); outline: 3px solid var(--caneta-claro); outline-offset: 0; }
.campo small { color: var(--suave); font-weight: 400; }
.auth-msg { min-height: 1.2em; font-weight: 600; }
.auth-msg.erro { color: #b3261e; } .auth-msg.ok { color: var(--verde); }
:root[data-tema-ativo="escuro"] .auth-msg.erro { color: #ffaaa2; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.auth-demo { text-align: center; font-size: .95rem; }
.auth-voltar { text-align: center; margin-top: 18px; }
.texto { max-width: 760px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) 16px; display: grid; gap: 14px; }
.texto h2 { font-size: 1.45rem; margin-top: 18px; }
.texto p { color: var(--suave); }

/* ---------- the simple version: same content, no show. Big, still, direct. ---------- */
:root[data-versao="simples"] { --tam: 19px; }
:root[data-versao="simples"] *, :root[data-versao="simples"] *::before, :root[data-versao="simples"] *::after { animation: none !important; transition: none !important; }
:root[data-versao="simples"] .so-completa { display: none !important; }
:root:not([data-versao="simples"]) .so-simples { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }

/* ---------- the two worlds share these bones (teacher = board, student = notebook) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-top: clamp(36px, 6vw, 84px) !important; }
.hero-sub { font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); color: var(--suave); margin: 22px 0 30px; max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
@media (max-width: 920px) { .hero { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hero-ctas { display: grid; grid-template-columns: minmax(0, 1fr); } .hero-ctas > a { width: 100%; } }
.precisa { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.precisa-item { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 22px; display: grid; gap: 10px; align-content: start; box-shadow: var(--sombra); transition: transform .25s cubic-bezier(.3, .7, .2, 1), border-color .25s; }
.precisa-item:hover { transform: translateY(-4px) rotate(-.3deg); border-color: var(--caneta); }
.precisa-item p { color: var(--suave); }
.passos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.passo { background: var(--folha); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; display: grid; gap: 10px; align-content: start; box-shadow: var(--sombra); }
.passo-n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--marca-claro); color: var(--caneta-forte); font-size: 1.9rem; font-weight: 700; }
.passo p { color: var(--suave); }
@media (max-width: 860px) { .passos { grid-template-columns: 1fr; } }
.eco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.eco-texto .botao-secundario { margin-top: 24px; }
@media (max-width: 860px) { .eco { grid-template-columns: 1fr; } }
.confianca { max-width: 860px !important; }
.confianca p { font: 500 clamp(1.2rem, 1rem + .9vw, 1.6rem)/1.5 var(--titulo); margin-top: 18px; padding-left: 22px; border-left: 4px solid var(--marca-texto); }

/* ---------- the opening: the A draws itself, three sentences say why, then it opens like a door into the page ----------
   pen leg → pencil leg → highlighter bar; under it, one sentence at a time (the question, the board and the notebook,
   the life that changes); then the two halves of the paper slide apart following the legs and the bar stretches into
   the line of the desk. the whole story (~3.4 s) only the first time; later a 1.3 s signature at most every 10 minutes (prefs.js); a click on it skips it (it catches that click, so nothing underneath is hit). */
.abertura { display: none; }
:root[data-abertura] .abertura { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; align-content: center; gap: clamp(18px, 3vh, 32px); padding: 24px; pointer-events: auto; cursor: pointer; animation: ab-fim 3.4s linear both; }
:root[data-abertura] .abertura.saindo { animation: ab-sair .35s ease forwards; }
:root[data-abertura] .abertura::before, :root[data-abertura] .abertura::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50.5%; background: radial-gradient(120% 90% at 100% 50%, color-mix(in srgb, var(--papel) 92%, var(--caneta)), var(--papel)); z-index: -1; animation: ab-porta-e 3.4s cubic-bezier(.7, 0, .2, 1) both; }
:root[data-abertura] .abertura::before { left: 0; }
:root[data-abertura] .abertura::after { right: 0; animation-name: ab-porta-d; background: radial-gradient(120% 90% at 0% 50%, color-mix(in srgb, var(--papel) 92%, var(--caneta)), var(--papel)); }
.abertura svg { width: clamp(84px, 13vw, 132px); height: auto; overflow: visible; animation: ab-logo 3.4s cubic-bezier(.6, 0, .3, 1) both; }
.abertura path { fill: none; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; transform-box: fill-box; }
.ab-caneta { stroke: #2544a8; stroke-width: 7.5; animation: ab-tracar .38s .07s cubic-bezier(.5, 0, .3, 1) forwards, ab-perna-e .5s 2.8s cubic-bezier(.7, 0, .3, 1) forwards; transform-origin: 100% 0; }
:root[data-tema-ativo="escuro"] .ab-caneta { stroke: #8ea6ff; }
.ab-lapis { stroke: var(--lapis); stroke-width: 6.5; animation: ab-tracar .38s .28s cubic-bezier(.5, 0, .3, 1) forwards, ab-perna-d .5s 2.8s cubic-bezier(.7, 0, .3, 1) forwards; transform-origin: 0 0; }
.ab-barra { stroke: #f5c542; stroke-width: 8; animation: ab-tracar .28s .56s ease-out forwards, ab-barra .5s 2.8s cubic-bezier(.7, 0, .3, 1) forwards; transform-origin: 50% 50%; }
.ab-frases { display: grid; place-items: center; margin: 0; min-height: 3.2em; max-width: min(34rem, 92vw); text-align: center; }
.ab-frases > span { grid-area: 1 / 1; opacity: 0; }
.ab-frase { font: italic 500 clamp(1.15rem, .9rem + 1.1vw, 1.7rem) / 1.35 var(--titulo); color: var(--tinta); letter-spacing: -.005em; text-wrap: balance; animation: ab-frase .85s cubic-bezier(.3, 0, .2, 1) both; }
.ab-frase.f1 { animation-delay: .7s; }
.ab-frase.f2 { animation-delay: 1.45s; }
.ab-frase.f3 { animation-delay: 2.2s; }
.ab-nome { font: 650 clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem) var(--titulo); color: var(--tinta); animation: ab-nome 3.4s ease both; letter-spacing: -.01em; }
/* the short signature: the A draws fast, the name, the doors open. No sentences. */
:root[data-abertura="curta"] .abertura, :root[data-abertura="curta"] .abertura::before, :root[data-abertura="curta"] .abertura::after, :root[data-abertura="curta"] .abertura svg { animation-duration: 1.3s; }
:root[data-abertura="curta"] .ab-frase { display: none; }
:root[data-abertura="curta"] .ab-nome { animation: ab-nome-curta 1.3s ease both; }
:root[data-abertura="curta"] .ab-caneta { animation: ab-tracar .3s 0s ease-out forwards, ab-perna-e .45s .85s cubic-bezier(.7, 0, .3, 1) forwards; }
:root[data-abertura="curta"] .ab-lapis { animation: ab-tracar .3s .12s ease-out forwards, ab-perna-d .45s .85s cubic-bezier(.7, 0, .3, 1) forwards; }
:root[data-abertura="curta"] .ab-barra { animation: ab-tracar .22s .3s ease-out forwards, ab-barra .45s .85s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes ab-nome-curta { 0%, 20% { opacity: 0; transform: translateY(6px); } 40%, 62% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }
:root[data-abertura="curta"] .abertura::before { animation-name: ab-porta-e-curta; } :root[data-abertura="curta"] .abertura::after { animation-name: ab-porta-d-curta; }
@keyframes ab-porta-e-curta { 0%, 65% { transform: none; } 100% { transform: translateX(-102%); } }
@keyframes ab-porta-d-curta { 0%, 65% { transform: none; } 100% { transform: translateX(102%); } }
@keyframes ab-tracar { to { stroke-dashoffset: 0; } }
@keyframes ab-perna-e { to { transform: rotate(-38deg) translate(-30%, 4%); opacity: 0; } }
@keyframes ab-perna-d { to { transform: rotate(38deg) translate(30%, 4%); opacity: 0; } }
@keyframes ab-barra { 60% { transform: scaleX(14); opacity: 1; } to { transform: scaleX(40); opacity: 0; } }
@keyframes ab-logo { 0% { transform: scale(.88); } 18%, 82% { transform: scale(1); } 100% { transform: scale(1.25); } }
@keyframes ab-frase { 0% { opacity: 0; transform: translateY(10px); filter: blur(5px); } 22%, 74% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
@keyframes ab-nome { 0%, 81% { opacity: 0; transform: translateY(6px); } 86%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ab-porta-e { 0%, 83% { transform: none; box-shadow: none; } 86% { box-shadow: 18px 0 40px -20px rgb(0 0 0 / .25); } 100% { transform: translateX(-102%); box-shadow: 18px 0 40px -20px rgb(0 0 0 / .25); } }
@keyframes ab-porta-d { 0%, 83% { transform: none; box-shadow: none; } 86% { box-shadow: -18px 0 40px -20px rgb(0 0 0 / .25); } 100% { transform: translateX(102%); box-shadow: -18px 0 40px -20px rgb(0 0 0 / .25); } }
@keyframes ab-fim { 0%, 99% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes ab-sair { to { opacity: 0; visibility: hidden; } }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the sound mixer inside the accessibility panel: stations on top, "make your own" faders under them */
.acess-mix { margin-top: 8px; border-top: 1px solid var(--linha); padding-top: 8px; }
.acess-mix summary { cursor: pointer; font-weight: 700; font-size: .9rem; padding: 4px 0; }
.acess-faders { display: grid; gap: 6px; padding-top: 6px; }
.acess-faders label { display: grid; grid-template-columns: 6.5em 1fr; align-items: center; gap: 8px; font-size: .85rem; }
.acess-faders input { accent-color: var(--caneta); width: 100%; }

/* ---------- the desk: every section below the hero is a real object of school life (Kayky 03/10: "tudo tem que conversar
   com tudo"; the notebook was crafted, the rest looked like generic dark cards). Index cards with tape, sticky notes, a
   letter, a checklist, luggage tags. Paper stays paper in BOTH themes (like the notebook), so its ink is --caderno-tinta. ---------- */
:root { --fita: rgb(247 214 92 / .78); --fita-azul: rgb(140 180 235 / .7); --fita-rosa: rgb(242 160 185 / .72); --papel-ficha: #fffdf6; --ficha-pauta: #c9dbef; --sombra-papel: 0 1px 0 rgb(0 0 0 / .06), 0 14px 26px -16px rgb(0 0 0 / .45); }
:root[data-tema-ativo="escuro"] { --papel-ficha: #ece5cc; --ficha-pauta: #b9c8d8; --sombra-papel: 0 18px 30px -16px rgb(0 0 0 / .8); }

/* index cards (what every student wants) */
.precisa { gap: 26px 22px; margin-top: 44px; }
.precisa-item { position: relative; background: linear-gradient(transparent 46px, var(--margem) 46px 48px, transparent 48px), var(--papel-ficha); /* no rules under the words: letters never sit on top of a line */ color: var(--caderno-tinta); border: 0; border-radius: 3px; padding: 14px 20px 22px; box-shadow: var(--sombra-papel); transform: rotate(-1.2deg); }
.precisa-item:nth-child(2n) { transform: rotate(1deg); } .precisa-item:nth-child(3n) { transform: rotate(-.4deg); }
.precisa-item::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -3deg; background: var(--fita); box-shadow: 0 1px 2px rgb(0 0 0 / .12); clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.precisa-item:nth-child(2n)::before { background: var(--fita-azul); rotate: 4deg; } .precisa-item:nth-child(3n)::before { background: var(--fita-rosa); }
.precisa-item:hover { transform: translateY(-6px) rotate(0); }
.precisa-item h3 { font: 700 1.6rem/1.05 var(--mao); color: var(--caderno-tinta); min-height: 32px; }
.precisa-item p { color: color-mix(in srgb, var(--caderno-tinta) 82%, transparent); padding-bottom: 18px; }
/* the status is a rubber stamp, not a pill */
.precisa-item .badge { position: absolute; right: 10px; bottom: 10px; background: none; border: 2px solid; border-radius: 6px; padding: 2px 8px; rotate: 8deg; opacity: .85; font-size: .66rem; }
.precisa-item .badge-ja { color: #2f7a52; } .precisa-item .badge-breve { color: #b4553a; }
.precisa-item .badge::before { content: none; }

/* sticky notes joined by a pencil arrow (how a lesson starts) */
.passos { gap: 40px; margin-top: 46px; }
.passo { position: relative; border: 0; border-radius: 2px 2px 18px 2px; padding: 30px 24px 26px; background: #fff1a6; color: #3a3420; box-shadow: var(--sombra-papel); transform: rotate(-2deg); }
.passo:nth-child(2) { background: #ffd3df; transform: rotate(1.5deg) translateY(14px); } .passo:nth-child(3) { background: #cfe6ff; transform: rotate(-1deg); }
.passo::before { content: ""; position: absolute; top: -11px; left: 50%; width: 80px; height: 24px; translate: -50% 0; rotate: 2deg; background: rgb(255 255 255 / .55); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.passo h3 { font: 700 1.55rem/1.1 var(--mao); color: #2b2716; }
.passo p { color: #4a4430; }
.passo-n { background: none; border: 2.5px solid currentColor; color: #2544a8; font: 700 2rem/1 var(--mao); rotate: -6deg; }
.passo:not(:last-child)::after { content: ""; position: absolute; right: -38px; top: 46%; width: 36px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 22'%3E%3Cpath d='M2 14c9-8 19-9 30-4M24 4l8 6-8 6' fill='none' stroke='%23e9dcc6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
:root:not([data-tema-ativo="escuro"]) .passo:not(:last-child)::after { filter: brightness(.45); }
@media (max-width: 860px) { .passo:nth-child(2) { transform: rotate(1.5deg); } .passo:not(:last-child)::after { right: 50%; top: auto; bottom: -34px; rotate: 90deg; } }

/* "your voice is yours": a letter with a wax seal */
.confianca { position: relative; margin-top: 20px !important; margin-bottom: 20px !important; background: linear-gradient(transparent calc(100% - 1px), var(--ficha-pauta) calc(100% - 1px)) 0 0 / 100% 38px, var(--papel-ficha); color: var(--caderno-tinta); border-radius: 4px; box-shadow: var(--sombra-papel); transform: rotate(-.6deg); max-width: 760px !important; }
.confianca h2 { font: 700 clamp(2rem, 1.4rem + 2vw, 2.8rem)/1 var(--mao); color: var(--caderno-tinta); }
:is(.mundo-professor, .mundo-aluno, .pagina-porta) .confianca > p, .confianca p { border-left: 0; padding-left: 0; text-shadow: none; color: var(--caderno-tinta); font: 500 clamp(1.08rem, .95rem + .5vw, 1.32rem)/38px var(--titulo); }
.confianca::after { content: "A"; position: absolute; right: 28px; bottom: -22px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #e0656a, #a3262d 70%); color: #ffd9d4; font: 700 1.9rem/1 var(--titulo); box-shadow: 0 6px 12px -4px rgb(0 0 0 / .5), inset 0 0 0 5px rgb(0 0 0 / .12); rotate: -12deg; }

/* questions: strips of ruled paper; the open one unfolds */
.perguntas details { position: relative; border: 0; margin: 12px 0 0; padding: 0 20px; background: var(--papel-ficha); color: var(--caderno-tinta); border-radius: 3px; box-shadow: var(--sombra-papel); }
.perguntas details:nth-of-type(2n) { rotate: .4deg; } .perguntas details:nth-of-type(2n + 1) { rotate: -.3deg; }
.perguntas summary { font: 700 1.45rem/1.1 var(--mao); color: var(--caderno-tinta); }
.perguntas details p { color: color-mix(in srgb, var(--caderno-tinta) 82%, transparent); }
.perguntas details[open] { background: linear-gradient(transparent calc(100% - 1px), var(--ficha-pauta) calc(100% - 1px)) 0 58px / 100% 28px no-repeat, var(--papel-ficha); }

/* the last call and "which side": luggage tags on a string */
.cta-final h2, .porta-fecho h2 { font-family: var(--mao); font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); }
.fecho-botoes > a, .cta-final > .botao { position: relative; border-radius: 10px 30px 30px 10px; padding-left: 46px !important; }
.fecho-botoes > a::before, .cta-final > .botao::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; height: 12px; translate: 0 -50%; border-radius: 50%; background: var(--papel); box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); }
.fecho-botoes > a:first-child { rotate: -3deg; } .fecho-botoes > a:last-child { rotate: 2.5deg; }

/* accessibility: a checklist written on a sheet of the notebook */
.para-todos > div { position: relative; background: linear-gradient(90deg, transparent 0 54px, var(--margem) 54px 56px, transparent 56px), linear-gradient(transparent calc(100% - 1px), var(--ficha-pauta) calc(100% - 1px)) 0 0 / 100% 34px, var(--papel-ficha); color: var(--caderno-tinta); padding: 30px 30px 30px 76px; border-radius: 4px; box-shadow: var(--sombra-papel); transform: rotate(.5deg); }
.para-todos h2 { font: 700 clamp(1.9rem, 1.3rem + 2vw, 2.6rem)/1.05 var(--mao); color: var(--caderno-tinta); }
.acess-lista li > span:first-child { background: none; border: 2px solid #2544a8; border-radius: 50% 46% 52% 44%; color: #2544a8; rotate: -5deg; }
.acess-lista strong { font: 700 1.35rem/1.1 var(--mao); color: var(--caderno-tinta); }
.acess-lista p { color: color-mix(in srgb, var(--caderno-tinta) 80%, transparent); }

/* the meeting: two speech notes pinned beside each other */
.encontro-lados p { border-left: 0; padding: 12px 16px; border-radius: 14px 14px 14px 4px; color: #2b2716; font-family: var(--mao); font-size: 1.4rem; box-shadow: var(--sombra-papel); }
.lado-prof { background: #cfe6ff; rotate: -1deg; } .lado-alu { background: #fff1a6; rotate: 1deg; margin-left: 28px; border-radius: 14px 14px 4px 14px !important; }

/* the two versions: sheets held by a binder clip */
.versoes .versao { border: 0; border-radius: 6px; background: var(--papel-ficha); color: var(--caderno-tinta); box-shadow: var(--sombra-papel); }
.versoes .versao > p, .versoes .versao h3 { color: var(--caderno-tinta); }
.versoes .versao h3 { font: 700 1.9rem/1 var(--mao); }
.versao::before { content: ""; position: absolute; top: -14px; left: 50%; width: 70px; height: 26px; translate: -50% 0; border-radius: 6px 6px 3px 3px; background: linear-gradient(#55585f, #2c2e33); box-shadow: 0 3px 4px rgb(0 0 0 / .3); }
.versao .mod-cartoes li { background: #fff; border-color: #e3dccb; color: #2c2c31; } .versao .mod-cartoes small { color: #5d5d66; }
.versao .mod-exemplo { color: color-mix(in srgb, var(--caderno-tinta) 60%, transparent); }

/* the lab: a wooden bench around the paper stage */
.lab-mesa { background: linear-gradient(180deg, color-mix(in srgb, var(--madeira) 85%, #000 0%), color-mix(in srgb, var(--madeira) 70%, #000)); border: 0; }
.lab-mesa::before { opacity: .18; }
.lab-mesa .lab-info { background: var(--papel-ficha); color: var(--caderno-tinta); border: 0; box-shadow: var(--sombra-papel); }

@media (prefers-reduced-motion: reduce) { .precisa-item, .passo, .confianca, .para-todos > div, .perguntas details { transform: none; rotate: none; } }
:root[data-versao="simples"] :is(.precisa-item, .passo, .confianca, .para-todos > div, .perguntas details, .fecho-botoes > a) { transform: none; rotate: none; }
.versoes .versao .mod-cartoes span { color: #2544a8; }
.versoes { align-items: stretch; } .versoes .versao { grid-template-rows: auto auto 1fr; } .versao-caderno .mini-caderno { min-height: 0; height: 100%; }
/* the home continues ON the desk below the classroom: wood, not an empty dark page */
.pagina-porta main { background: linear-gradient(180deg, transparent, rgb(0 0 0 / .1)), repeating-linear-gradient(91deg, rgb(0 0 0 / .035) 0 2px, transparent 2px 11px, rgb(255 255 255 / .02) 11px 13px, transparent 13px 23px), var(--mesa); }
.lab .lab-mesa { background: linear-gradient(180deg, color-mix(in srgb, var(--madeira) 92%, #fff), var(--madeira)); border: 0; box-shadow: var(--sombra-papel); }
.lab .lab-info { background: var(--papel-ficha); color: var(--caderno-tinta); border: 0; }
.encontro .encontro-lados p { color: #2b2716; text-shadow: none; font: 700 1.45rem/1.15 var(--mao); }
.para-todos .acess-lista p { color: color-mix(in srgb, var(--caderno-tinta) 82%, transparent); text-shadow: none; }
.para-todos .acess-lista strong { color: var(--caderno-tinta); }
main { overflow-x: clip; } /* the tilted paper objects never push the page sideways on a phone */

:root[data-versao="simples"][data-texto="maior"] { --tam: 22.5px; } /* "Larger" grows the simple version too */
:root[data-texto="maior"] { font-size: 118%; } :root[data-versao="simples"] { font-size: 110%; } :root[data-versao="simples"][data-texto="maior"] { font-size: 128%; } /* every rem grows, not only body text */
@media (max-width: 480px) { :root:is([data-texto="maior"], [data-versao="simples"]) .topo { zoom: .86; } } /* the top bar still fits a phone with larger text */

/* ---------- the page is a desk: an ink layer over the whole page, a pencil cup in the corner, papers you can move ---------- */
.mesa-tinta { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 30; pointer-events: none; }
.mesa-desenhando .mesa-tinta { pointer-events: auto; cursor: url("/img/cursor-lapis.svg") 7 25, crosshair; touch-action: none; }
.mesa-copo { position: fixed; left: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: min(320px, calc(100vw - 32px)); }
.mesa-lapis { width: 52px; height: 52px; border-radius: 16px 16px 20px 20px; border: 0; cursor: pointer; display: grid; place-items: center; color: #3a2a18;
  background: linear-gradient(180deg, #c9a57a, #9c7448); box-shadow: inset 0 3px 0 rgb(255 255 255 / .25), 0 10px 18px -8px rgb(0 0 0 / .55); transition: transform .2s; }
.mesa-lapis svg { width: 28px; height: 28px; rotate: -12deg; }
.mesa-lapis:hover { transform: translateY(-3px) rotate(-3deg); }
.mesa-lapis[aria-pressed="true"] { background: linear-gradient(180deg, #f5c542, #d79a1c); }
.mesa-bandeja { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 14px; background: var(--papel-ficha, #fffdf6); box-shadow: var(--sombra-papel); }
.mesa-bandeja[hidden] { display: none; }
.mesa-cor { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgb(0 0 0 / .2); background: var(--c); cursor: pointer; padding: 0; }
.mesa-cor[aria-pressed="true"], .mesa-acao[aria-pressed="true"] { outline: 3px solid #2544a8; outline-offset: 2px; }
.mesa-acao { font: 700 .82rem var(--texto); color: #2c2c31; background: #fff; border: 1.5px solid #d9d1bd; border-radius: 999px; padding: 5px 10px; cursor: pointer; }
.mesa-bilhete { position: relative; margin: 0; padding: 14px 14px 12px; background: #fff1a6; color: #3a3420; font: 700 1rem/1.2 var(--mao); max-width: 250px; rotate: -2deg; box-shadow: var(--sombra-papel); border-radius: 2px 2px 14px 2px; }
.mesa-bilhete::before { content: ""; position: absolute; top: -10px; left: 40%; width: 70px; height: 20px; background: rgb(255 255 255 / .6); rotate: 3deg; }
.mesa-bilhete-fechar { display: block; margin-top: 8px; font: 700 .8rem var(--texto); background: #2544a8; color: #fff; border: 0; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.mesa-papel { cursor: grab; }
.mesa-papel :is(a, button, summary, input) { cursor: pointer; }
.mesa-pegando { cursor: grabbing; z-index: 25; position: relative; box-shadow: 0 30px 40px -18px rgb(0 0 0 / .55) !important; transition: none !important; user-select: none; }
.mesa-movido { position: relative; z-index: 2; }
@media print { .mesa-tinta, .mesa-copo { display: none; } }