/* O portfólio da Deborah, seção por seção, na estrutura do Vitae: a abertura com o coelho, a marca gigante com o
   relógio e o selo, o bloco grande sobre ela com as faixas de posts, o
   parágrafo recuado, a lista de trajetória, os cartões que se empilham, os resultados em lista e o contato em
   palavras gigantes. Os tons do Relier se alternam por seção. Os três componentes pedidos: a letra de mão (.escreve), a vitrine de clientes e o texto que
   acende ([data-acende]). */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--noite); color: var(--papel); font: 16px/1.5 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--limao); outline-offset: 3px; }
::selection { background: var(--limao); color: var(--noite); }
em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* o grão por cima de tudo, como no Vitae (inclusive da abertura) */
.grao { position: fixed; inset: -50%; z-index: 120; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  animation: grao 1.2s steps(6) infinite; }
@keyframes grao { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* ---------- a abertura: o coelho corre, pula e deixa estrelas; quando a página carrega, ele salta e a cortina sobe ---------- */
.abertura { display: none; }
.js .abertura { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--noite);
  clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--mola); }
.abertura.fecha { clip-path: inset(0 0 100% 0); }
.abertura.foi, .js:not(.carregando) .abertura:not(.fecha) { display: none; }
html.carregando { overflow: hidden; }
.carregando .mg-palavra, .carregando .capa-frase, .carregando .escreve.escrito { animation-play-state: paused; }

.ab-palco { position: relative; width: min(84vw, 680px); height: 220px; overflow: hidden; }
.ab-corre { position: absolute; left: 0; bottom: 14px; width: 100%; animation: corre 2.4s linear infinite; }
@keyframes corre { from { transform: translateX(-24%); } to { transform: translateX(100%); } }
.ab-pula { width: 150px; transform-origin: 50% 100%; animation: pula .6s infinite; }
.ab-pula img { width: 100%; height: auto; }
/* o pulo: agacha no chão, estica subindo, inclina na descida */
@keyframes pula {
  0%   { transform: translateY(0) rotate(10deg) scale(1.06, .88); animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  14%  { transform: translateY(-8px) rotate(2deg) scale(.96, 1.06); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  48%  { transform: translateY(-74px) rotate(-8deg) scale(1, 1); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  100% { transform: translateY(0) rotate(10deg) scale(1.06, .88); }
}
.ab-chao { position: absolute; left: 0; right: 0; bottom: 13px; height: 1px; background: linear-gradient(90deg, transparent, var(--fio) 15%, var(--fio) 85%, transparent); }
.ab-rastro { position: absolute; bottom: 10px; width: var(--t, 14px); height: var(--t, 14px); color: var(--limao); pointer-events: none;
  animation: rastro 1.3s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes rastro {
  0%   { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; }
  35%  { transform: translate(var(--dx), var(--dy)) scale(1.15) rotate(45deg); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) - 16px)) scale(0) rotate(90deg); opacity: 0; }
}
/* as três estrelas da logo, em volta, piscando */
.ab-brilho { position: absolute; color: var(--papel); animation: pisca 1.6s ease-in-out infinite; }
.b1 { width: 34px; height: 34px; top: calc(50% - 150px); left: calc(50% - 250px); }
.b2 { width: 16px; height: 16px; top: calc(50% - 100px); left: calc(50% - 200px); animation-delay: .4s; }
.b3 { width: 22px; height: 22px; top: calc(50% + 20px); left: calc(50% + 240px); animation-delay: .9s; color: var(--limao); }
@keyframes pisca { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.ab-frase { font-size: clamp(30px, 4vw, 44px); transform: rotate(-4deg); clip-path: inset(-20% 100% -30% 0); animation: escreve 1.6s steps(18, end) .3s forwards; }
.ab-conta { display: flex; justify-content: space-between; width: min(84vw, 680px); color: var(--papel-2); }
.ab-conta [data-conta] { color: var(--papel); font-variant-numeric: tabular-nums; }
.ab-conta [data-conta]::after { content: "%"; }
/* a saída: o coelho para de correr e dá um salto grande pra cima e pra frente */
.abertura.salta .ab-corre, .abertura.salta .ab-pula { animation-play-state: paused; }
.abertura.salta [data-pula] img { animation: salto .75s cubic-bezier(.3, -.3, .6, 1) forwards; }
@keyframes salto { 0% { transform: none; } 20% { transform: translateY(6px) scale(1.08, .86) rotate(8deg); } 100% { transform: translate(260px, -340px) rotate(-22deg) scale(.7); opacity: 0; } }
.abertura.salta .ab-frase, .abertura.salta .ab-conta { transition: opacity .5s .2s, transform .6s var(--mola) .2s; opacity: 0; transform: translateY(-14px); }

/* ---------- os tons do Relier, um por seção (perfil/conteudo/identidade/relier.css) ----------
   noite com o xadrez vermelho e limão, papel quadriculado, kraft e fibra com fibra de papel, linho tramado, musgo liso.
   Limão só no escuro; no claro o destaque é o café. */
.tom { position: relative; isolation: isolate; background: var(--bg); color: var(--fg); }
.tom::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tom-noite { --bg: var(--noite); --fg: var(--papel); --dest: var(--limao); --linha: rgba(244, 239, 230, .18); --apoio: var(--papel-2); }
.tom-noite:not(.liso)::before { background-image:
    repeating-linear-gradient(90deg, rgba(172, 52, 58, .11) 0 24px, transparent 24px 65px),
    repeating-linear-gradient(0deg, rgba(172, 52, 58, .11) 0 24px, transparent 24px 65px),
    repeating-linear-gradient(90deg, transparent 0 37px, rgba(251, 254, 177, .07) 37px 38px, transparent 38px 65px),
    repeating-linear-gradient(0deg, transparent 0 37px, rgba(251, 254, 177, .07) 37px 38px, transparent 38px 65px); }
.tom-papel { --bg: var(--papel); --fg: var(--tinta); --dest: var(--cafe); --linha: rgba(44, 28, 4, .22); --apoio: var(--tinta-suave); }
.tom-papel::before { background-image: linear-gradient(rgba(44, 28, 4, .07) 2px, transparent 2px), linear-gradient(90deg, rgba(44, 28, 4, .07) 2px, transparent 2px); background-size: 42px 42px; }
.tom-fibra { --bg: var(--fibra); --fg: var(--tinta); --dest: var(--cafe); --linha: rgba(44, 28, 4, .22); --apoio: var(--tinta-suave); }
.tom-kraft { --bg: var(--kraft); --fg: var(--tinta); --dest: var(--cafe); --linha: rgba(44, 28, 4, .3); --apoio: var(--cafe); }
.tom-fibra::before, .tom-kraft::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .11 0 0 0 0 .02 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 324px 324px; }
.tom-linho { --bg: var(--linho); --fg: var(--papel); --dest: var(--limao); --linha: rgba(201, 191, 174, .25); --apoio: var(--papel-2); }
.tom-linho::before { background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 1px, transparent 1px 4px); }
.tom-musgo { --bg: var(--musgo); --fg: var(--papel); --dest: var(--limao); --linha: rgba(201, 191, 174, .25); --apoio: var(--papel-2); }

/* ---------- a letra de mão que se escreve (o "Handwriting") ---------- */
.escreve { display: inline-block; clip-path: inset(-20% 100% -30% 0); }
.escreve.escrito { animation: escreve var(--dur, 1.8s) steps(var(--passos, 24), end) forwards; }
@keyframes escreve { to { clip-path: inset(-20% -2% -30% 0); } }

.mono { font: 400 12.5px/1.35 var(--f-mono); text-transform: uppercase; letter-spacing: .02em; }
.mono strong { font-weight: 500; color: var(--dest); }
.direita { text-align: right; }
.mao { font-family: var(--f-mao); font-weight: 500; color: var(--dest, var(--limao)); line-height: 1.1; }
.quadradinho { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border: 1px solid currentColor; transform: rotate(-12deg) translateY(-1px); border-radius: 2px; }
.quadradinho.cheio { background: var(--dest); border-color: var(--dest); }
.cab { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin-bottom: 40px; border-bottom: 1px solid var(--linha); }
.cab .quadradinho { color: var(--dest); background: var(--dest); }

/* ---------- 0. a capa: marrom escuro liso, sem o xadrez ---------- */
.capa.tom { --bg: #24160B; }
.capa { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 18px var(--margem); overflow: hidden; }
.capa-topo { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 16px; }
.capa-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 500 22px/1 var(--f-texto); letter-spacing: -.02em; }
.capa-logo img { width: 44px; height: auto; }
.capa-meio { justify-self: start; }
.capa-menu { justify-self: end; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.capa-menu a { font: 400 12px/1 var(--f-mono); text-transform: uppercase; text-decoration: none; padding: 9px 14px; border: 1px solid var(--papel); border-radius: 999px; transition: background .25s, color .25s; }
.capa-menu a:hover { background: var(--papel); color: var(--noite); }

.marca-gigante { font-family: var(--f-marca); font-weight: 400; font-size: clamp(76px, 15.5vw, 270px); line-height: .86; letter-spacing: .01em; margin-top: 2vh; display: grid; align-content: start; }
.mg-linha { display: block; overflow: hidden; padding-bottom: .06em; }
.mg-palavra { display: inline-block; transform: translateY(105%); animation: sobe 1.2s var(--mola) forwards; }
.mg-linha:nth-child(2) .mg-palavra { animation-delay: .12s; color: var(--limao); }
.marca-gigante sup { font-size: .32em; vertical-align: .9em; margin-left: .04em; }
@keyframes sobe { to { transform: none; } }
.capa-frase { position: absolute; right: var(--margem); bottom: 18vh; width: min(560px, 46vw); font: 500 clamp(24px, 2.6vw, 40px)/1.04 var(--f-texto); letter-spacing: -.03em; opacity: 0; animation: aparece 1.2s var(--mola) .6s forwards; }
.capa-convite { position: absolute; right: var(--margem); bottom: calc(18vh - 64px); width: min(560px, 46vw); font-size: clamp(24px, 2.2vw, 32px); text-decoration: none; --dur: 1.4s; }
@keyframes aparece { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.capa-pe { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 16px; padding: 0 8px; }
.capa-selo { display: inline-flex; align-items: center; gap: 14px; }
.codigo { width: 76px; height: 30px; background: repeating-linear-gradient(90deg, var(--papel) 0 1px, transparent 1px 3px, var(--papel) 3px 5px, transparent 5px 6px, var(--papel) 6px 7px, transparent 7px 10px); }

/* ---------- 2. sobre ---------- */
.sobre { padding: 16vh var(--margem) 16vh; overflow: hidden; }
.sobre-cab { margin: 18vh 0 32px; }
.sobre-cab h3 { font-weight: 400; }

/* as faixas de posts: todos do mesmo tamanho, deslizando em sentidos opostos; aceleram quando a página rola */
.faixa { margin: 0 calc(var(--margem) * -1); overflow-x: auto; scrollbar-width: none; }
.faixa + .faixa { margin-top: 28px; }
.faixa-trilho { list-style: none; margin: 0; padding: 0 var(--margem); display: flex; gap: 16px; width: max-content; }
.js .faixa { overflow: hidden; }
.js .faixa-trilho { padding: 0; animation: desliza var(--tempo, 70s) linear infinite; }
.js .faixa.volta .faixa-trilho { animation-direction: reverse; }
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } }
.post { width: clamp(190px, 18vw, 270px); flex: none; }
.post figure { margin: 0; }
.post img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 100%; border-radius: 4px; background: rgba(44, 28, 4, .08); transition: transform .6s var(--mola), box-shadow .6s var(--mola); }
.post:hover img { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 24px 40px -24px rgba(44, 28, 4, .5); }
.post figcaption { margin-top: 12px; font-size: 11.5px; color: var(--fg); }
.post figcaption span { color: var(--apoio); }
.sobre-grande { padding-left: 20%; font: 600 clamp(36px, 6.6vw, 106px)/.92 var(--f-texto); text-transform: uppercase; letter-spacing: -.045em; }
[data-acende] .p { opacity: var(--o, .14); transition: opacity .12s linear; }

/* ---------- 4. como eu penso ---------- */
.pensa { padding: 16vh var(--margem) 20vh; }
.pensa-texto { margin-left: 26%; font: 600 clamp(24px, 2.8vw, 44px)/1.06 var(--f-texto); letter-spacing: -.035em; text-indent: 12vw; }
.pensa-texto em { color: var(--dest); font-size: 1.12em; }

/* ---------- 5. clientes: a vitrine (o "Team Showcase") ---------- */
.clientes { padding: 16vh var(--margem) 18vh; }
.vitrine { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: center; max-width: 1240px; margin: 0 auto; }
.vitrine-foto { aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: rgba(0, 0, 0, .2); }
.vitrine-foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .9s var(--mola); }
.vitrine-texto { display: grid; gap: 16px; }
.vitrine-texto > * { transition: opacity .35s ease, transform .5s var(--mola); }
.vitrine.trocando .vitrine-foto img { opacity: 0; transform: scale(1.05); }
.vitrine.trocando .vitrine-texto > * { opacity: 0; transform: translateY(12px); }
.vitrine-ola { font-size: 32px; }
.vitrine-nome { font: 400 clamp(48px, 7vw, 120px)/.9 var(--f-marca); }
.vitrine-nicho .quadradinho { color: var(--dest); }
.vitrine-desc { max-width: 44ch; font: 500 clamp(16px, 1.3vw, 19px)/1.45 var(--f-texto); color: var(--apoio); }
.vitrine-arroba { justify-self: start; text-decoration: none; color: var(--fg); }
.vitrine-arroba:hover { color: var(--dest); }
.vitrine-nav { margin-top: 48px; display: flex; justify-content: center; align-items: center; gap: 14px; }
.redondo { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--papel); background: none; color: var(--papel); font-size: 17px; cursor: pointer; transition: background .2s, color .2s; }
.redondo:hover { background: var(--papel); color: var(--noite); }
.rostos { display: flex; gap: 8px; padding: 6px; border-radius: 999px; border: 1px solid var(--linha); }
.rosto { width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 2px solid transparent; overflow: hidden; cursor: pointer; background: rgba(0, 0, 0, .2); transition: border-color .2s, transform .3s var(--mola); }
.rosto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.75); transition: filter .3s; }
.rosto:hover { transform: translateY(-3px); }
.rosto[aria-selected="true"] { border-color: var(--dest); }
.rosto[aria-selected="true"] img, .rosto:hover img { filter: none; }

/* ---------- 6. trajetória ---------- */
.trajetoria { padding: 16vh var(--margem) 18vh; }
.linhas { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.linhas li { display: grid; grid-template-columns: 1fr 1fr .6fr; gap: 20px; padding: 24px 10px; border-bottom: 1px solid var(--linha); transition: background .3s, color .3s; }
.linhas li:hover { background: var(--fg); color: var(--bg); }
.linhas li:hover .quadradinho.cheio { background: var(--bg); border-color: var(--bg); }
.linhas li p:nth-child(2) { max-width: 46ch; }

/* ---------- 7. como eu trabalho: cartões que se empilham ---------- */
.metodo { height: 420svh; position: relative; }
.metodo-fixo { position: sticky; top: 0; height: 100svh; padding: 10vh var(--margem) 6vh; overflow: hidden; }
.metodo-titulo { font: 400 clamp(72px, 13vw, 220px)/.86 var(--f-marca); color: var(--cinza); }
.metodo-cab { margin-top: 5vh; }
.metodo-ano { position: absolute; right: var(--margem); bottom: 6vh; text-align: right; font: 600 clamp(56px, 9vw, 150px)/.86 var(--f-texto); letter-spacing: -.05em; text-transform: uppercase; color: var(--cinza); }
.cartas { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.carta { position: absolute; width: clamp(220px, 22vw, 320px); padding: 6px; border-radius: 10px; background: var(--papel); color: var(--noite); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7);
  left: var(--x); top: var(--t); transform: translateY(var(--sobe, 120svh)) rotate(var(--giro, 0deg)); will-change: transform; pointer-events: auto; }
.carta:nth-child(1) { --x: 40%; --t: 14%; --giro: -2deg; }
.carta:nth-child(2) { --x: 72%; --t: 8%; --giro: 3deg; }
.carta:nth-child(3) { --x: 6%; --t: 34%; --giro: -4deg; }
.carta:nth-child(4) { --x: 54%; --t: 40%; --giro: 2deg; }
.carta img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 6px; }
.carta h3 { font: 600 clamp(26px, 2.4vw, 36px)/.95 var(--f-texto); text-transform: uppercase; letter-spacing: -.04em; margin: 12px 4px 34px; }
.carta p { margin: 0 4px 4px; font-size: 11px; }

/* ---------- 8. resultados ---------- */
.resultados { padding: 16vh var(--margem) 22vh; }
.premios { list-style: none; margin: 0 0 0 22%; padding: 0; font-size: 13.5px; }
.premios li { display: grid; grid-template-columns: 1fr 2fr auto; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--linha); transition: color .25s, padding .4s var(--mola); }
.premios li:hover { color: var(--dest); padding-left: 16px; }

/* ---------- 9. contato ---------- */
.contato { padding: 14vh var(--margem) 24px; }
.gigante { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--fg); text-decoration: none; overflow: hidden; isolation: isolate; }
.gigante .palavra { font: 500 clamp(64px, 14vw, 230px)/.86 var(--f-texto); letter-spacing: -.06em; text-transform: uppercase; transition: color .3s, letter-spacing .6s var(--mola); }
.gigante .lado { padding-bottom: 10px; }
.gigante:hover .palavra { color: var(--dest); letter-spacing: -.03em; }
.gigante::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .04); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--mola); z-index: -1; }
.gigante:hover::before { transform: scaleY(1); }
.rodape { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 16px; padding-top: 34px; }
.rodape-mao { justify-self: center; font-size: 30px; text-transform: none; letter-spacing: 0; --dur: 1.4s; }

/* ---------- celular ---------- */
@media (max-width: 860px) {
  .post { width: 170px; }
  .sobre-cab { margin-top: 10vh; }
  .capa-topo { grid-template-columns: 1fr auto; }
  .capa-meio { display: none; }
  .capa-menu a { padding: 7px 10px; font-size: 10.5px; }
  .capa-menu a:nth-child(n+3) { display: none; }
  .capa-logo span { display: none; }
  .marca-gigante { margin-top: 8vh; }
    .capa-frase { position: static; width: auto; margin-top: 7vh; font-size: 28px; }
  .capa-convite { position: static; width: auto; margin-top: 14px; }
  .capa-pe { grid-template-columns: 1fr 1fr; margin-top: 6vh; padding: 0; } .capa-pe .direita { display: none; }
  .sobre-grande { padding-left: 0; }
  .pensa-texto { margin-left: 0; text-indent: 20vw; }
  .vitrine { grid-template-columns: minmax(0, 1fr); }
  .rostos { gap: 4px; } .rosto { width: 38px; height: 38px; } .vitrine-nav .redondo { width: 38px; height: 38px; }
  .linhas li { grid-template-columns: 1fr; gap: 8px; } .linhas .direita { text-align: left; }
  .metodo { height: auto; } .metodo-fixo { position: static; height: auto; overflow: visible; }
  .metodo-ano { position: static; margin-top: 4vh; }
  .cartas { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4vh; }
  .carta { position: static; width: auto; transform: rotate(var(--giro)) !important; }
  .carta h3 { font-size: 20px; margin-bottom: 18px; }
  .premios { margin-left: 0; } .premios li { grid-template-columns: 1fr; gap: 2px; } .premios .direita { text-align: left; }
  .gigante { grid-template-columns: 1fr; } .gigante .lado { display: none; } .gigante .palavra { font-size: 18vw; }
  .rodape { grid-template-columns: 1fr; } .rodape-mao { justify-self: start; } .rodape .direita { text-align: left; }
  .ab-pula { width: 96px; }
  .b1 { left: calc(50% - 150px); } .b2 { left: calc(50% - 110px); } .b3 { left: calc(50% + 130px); }
}

/* ---------- menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grao { animation: none; }
  .escreve { clip-path: none; animation: none !important; }
  .mg-palavra, .capa-frase { animation: none; transform: none; opacity: 1; }
  [data-acende] .p { opacity: 1 !important; }
  .metodo { height: auto; } .metodo-fixo { position: static; height: auto; overflow: visible; }
  .cartas { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 4vh; }
  .carta { position: static; width: auto; transform: rotate(var(--giro)) !important; }
}