/* =========================================================
   Tayná Melo: landing page
   Guia: 03-site/design.md
   Efeitos: skill global efeitos-web (arquivo citado em cada bloco)
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --preto: #101010;
  --papel: #F5F1EB;
  --papel-claro: #FBF8F3;
  --papel-sombra: #DAD6D0;
  --parede: #D9BBA6;            /* cor média da parede da foto da capa */
  --magenta: #B4034D;           /* magenta da marca pessoal */
  --magenta-profundo: #8C023C;
  --magenta-luz: #D6246A;       /* magenta para texto e ícone sobre o preto */
  --branco: #FFFFFF;
  --cinza-texto: #4A4745;

  --f-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --f-letra: "Permanent Marker", "Comic Sans MS", cursive;
  --f-texto: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-apoio: "Barlow Condensed", "Arial Narrow", sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --faixa-h: 34px;
  --menu-h: 74px;
  --topo-h: calc(var(--faixa-h) + var(--menu-h));
  --container: 1280px;

  --ease-saida: cubic-bezier(.16, 1, .3, 1);
  --ease-pincel: cubic-bezier(.7, 0, .2, 1);

  /* contorno irregular de pincelada, usado em etiquetas e botões do menu */
  --pincel: polygon(1% 12%, 9% 2%, 24% 7%, 41% 0, 60% 6%, 78% 1%, 96% 5%, 100% 38%, 98% 70%, 100% 96%, 82% 100%, 63% 93%, 44% 100%, 25% 94%, 8% 100%, 0 82%, 2% 48%);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--preto) var(--papel); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--preto);
  font-family: var(--f-texto);
  font-size: 1.125rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: fixed; left: 1rem; top: -4rem; z-index: 200;
  background: var(--preto); color: var(--papel); padding: .8rem 1.2rem;
  font: 700 1rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
}
.pular:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; }

/* efeitos-web: personalizacao-da-pagina/mudar-cor-da-selecao-do-texto */
::selection { color: var(--branco); background: var(--magenta); }

/* efeitos-web: personalizacao-da-pagina/alterar-as-cores-da-barra-de-rolagem-do-navegador */
body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--papel); }
body::-webkit-scrollbar-thumb { background: var(--preto); border: 3px solid var(--papel); border-radius: 0; }
body::-webkit-scrollbar-thumb:hover { background: var(--magenta); }

/* ---------- 3. Camadas globais ---------- */

/* Grão de filme (efeitos-web: backgrounds/noise, com ruído SVG em vez de PNG hospedado) */
.grao {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .22;
  mix-blend-mode: overlay;
  animation: grao 1.1s steps(6) infinite;
}
@keyframes grao {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Cursor (efeitos-web: cursor/cursor-com-circulo-expandir-no-hover). Só desktop com mouse. */
.cursor { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; display: none; will-change: transform; }
.tem-cursor .cursor { display: block; }
.cursor__circulo {
  --c: 14px;
  position: absolute; left: 0; top: 0;
  width: var(--c); height: var(--c);
  margin: calc(var(--c) / -2) 0 0 calc(var(--c) / -2);
  border-radius: 50%;
  background: var(--magenta);
  display: grid; place-items: center;
  transition: width .35s var(--ease-saida), height .35s var(--ease-saida), margin .35s var(--ease-saida), background-color .3s, opacity .3s;
}
.cursor__texto {
  font: 700 .78rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .08em;
  color: var(--branco); opacity: 0; transition: opacity .2s;
}
.cursor.is-expandido .cursor__circulo { --c: 88px; }
.cursor.is-expandido .cursor__texto { opacity: 1; transition-delay: .1s; }
.cursor.is-escondido .cursor__circulo { opacity: 0; }

/* Blur progressivo na base da tela (efeitos-web: personalizacao-da-pagina/blur-no-final-da-tela) */
.blur-base { position: fixed; left: 0; right: 0; bottom: 0; height: 90px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .6s; }
.blur-base.is-ativo { opacity: 1; } /* só depois da capa, para não borrar o texto da primeira dobra */
.blur { position: absolute; inset: 0; pointer-events: none; }
.blur-1 { z-index: 1; backdrop-filter: blur(.25px); -webkit-backdrop-filter: blur(.25px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 12.5%, #000 25%, rgba(0,0,0,0) 37.5%); }
.blur-2 { z-index: 2; backdrop-filter: blur(.5px); -webkit-backdrop-filter: blur(.5px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 12.5%, #000 25%, #000 37.5%, rgba(0,0,0,0) 50%); }
.blur-3 { z-index: 3; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%, #000 37.5%, #000 50%, rgba(0,0,0,0) 62.5%); }
.blur-4 { z-index: 4; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 37.5%, #000 50%, #000 62.5%, rgba(0,0,0,0) 75%); }
.blur-5 { z-index: 5; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 62.5%, #000 75%, rgba(0,0,0,0) 87.5%); }
.blur-6 { z-index: 6; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 62.5%, #000 75%, #000 87.5%, rgba(0,0,0,0) 100%); }
.blur-7 { z-index: 7; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%, #000 87.5%, #000 100%); }
.blur-8 { z-index: 8; backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, #000 100%); }

/* ---------- 4. Componentes ---------- */

.etiqueta {
  display: inline-block;
  margin: 0;
  padding: .6rem 1.15rem .55rem;
  background: var(--preto);
  color: var(--papel);
  font: 700 .98rem/1 var(--f-apoio);
  text-transform: uppercase;
  letter-spacing: .07em;
  clip-path: var(--pincel);
  transform: rotate(-1.5deg);
}

/* Palavra que troca (efeitos-web: titulos-e-textos/texto-trocando-informacoes) */
.troca { display: inline-block; color: var(--magenta-luz); transition: opacity .3s ease, transform .3s ease; }
.troca.saindo { opacity: 0; transform: translateY(-100%); }

/* Botão principal: seta que preenche (efeitos-web: botoes/botao-com-seta-preenchendo)
   + quinas cortadas (efeitos-web: botoes/botao-preenchendo-no-hover-com-cortes-nas-laterais)
   + linha de luz passando (efeitos-web: atualizacoes/tracado-animado) */
.botao {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 1.2rem 4.4rem 1.15rem 1.6rem;
  background: var(--preto);
  color: var(--branco);
  font: 700 1.08rem/1 var(--f-apoio);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  overflow: hidden;
  clip-path: polygon(0 14%, 5% 0, 100% 0, 100% 74%, 95% 100%, 0 100%);
  transition: translate .25s var(--ease-saida);
}
.botao__texto { position: relative; z-index: 2; }
.botao__seta {
  position: absolute; z-index: 1;
  right: .5rem; top: 50%;
  width: 2.8rem; height: calc(100% - 1rem);
  transform: translateY(-50%);
  display: grid; justify-items: end; align-items: center;
  padding-right: .85rem;
  background: var(--magenta);
  font-family: var(--f-texto); font-size: 1.25rem; font-weight: 700;
  clip-path: polygon(0 12%, 12% 0, 100% 0, 100% 88%, 88% 100%, 0 100%);
  transition: width .55s var(--ease-pincel), background-color .3s;
}
.botao:hover .botao__seta, .botao:focus-visible .botao__seta { width: calc(100% - 1rem); }
.botao::after {
  content: "";
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: luz-passando 4.5s 3.5s ease-in-out infinite;
}
@keyframes luz-passando {
  0% { transform: translateX(-120%); }
  30%, 100% { transform: translateX(120%); }
}
.botao--magenta { background: var(--magenta); padding-right: 1.6rem; }
.botao--magenta .botao__seta { position: static; width: auto; height: auto; transform: none; background: none; padding: 0 0 0 .8rem; clip-path: none; }

.botao-texto {
  position: relative;
  padding: .45rem 0;
  font: 700 1.08rem/1 var(--f-apoio);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
}
.botao-texto::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px; height: 4px;
  background: var(--magenta);
  clip-path: polygon(0 40%, 30% 0, 60% 30%, 100% 0, 98% 100%, 55% 70%, 25% 100%, 2% 80%);
  transform: scaleX(.3); transform-origin: left center;
  transition: transform .45s var(--ease-pincel);
}
.botao-texto:hover::after, .botao-texto:focus-visible::after { transform: scaleX(1); }

.botao-pincel {
  display: inline-block;
  padding: .8rem 1.35rem .75rem;
  background: var(--preto);
  color: var(--papel);
  font: 700 .98rem/1 var(--f-apoio);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  clip-path: var(--pincel);
  transition: background-color .3s, transform .3s var(--ease-saida);
}
.botao-pincel:hover, .botao-pincel:focus-visible { background: var(--magenta); transform: rotate(-2deg) scale(1.04); }

.anotacao {
  position: relative;
  margin: 0;
  font-family: var(--f-letra);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.25;
  color: var(--preto);
  transform: rotate(-3deg);
}
.anotacao__seta { position: absolute; overflow: visible; }
.anotacao__seta path { fill: none; stroke: var(--magenta); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.bilhete {
  position: absolute;
  padding: 1.1rem 1.3rem 1rem;
  background: var(--papel-claro);
  box-shadow: 0 12px 20px rgba(16, 16, 16, .2);
  transform: rotate(3deg);
}
.bilhete::before { /* fita adesiva */
  content: "";
  position: absolute; top: -12px; left: 50%;
  width: 74px; height: 24px; margin-left: -37px;
  background: rgba(222, 205, 168, .78);
  transform: rotate(-5deg);
}
.bilhete li { font-family: var(--f-letra); font-size: 1.08rem; line-height: 1.5; text-transform: uppercase; }
.bilhete__destaque { position: relative; color: var(--magenta); }
.bilhete__destaque::after {
  content: ""; position: absolute; left: -4%; right: 6%; bottom: .05em; height: 5px;
  background: var(--magenta);
  clip-path: polygon(0 50%, 20% 10%, 50% 40%, 80% 0, 100% 30%, 96% 100%, 60% 70%, 30% 100%, 3% 90%);
}

.selo { position: absolute; aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(16, 16, 16, .25)); }
.selo__aro { width: 100%; height: 100%; animation: girar 18s linear infinite; }
.selo__aro circle { fill: var(--magenta); }
.selo__aro text { fill: var(--branco); font: 700 17px var(--f-apoio); letter-spacing: .2em; text-transform: uppercase; }
.selo__tesoura { position: absolute; inset: 31%; overflow: visible; transition: transform .4s var(--ease-saida); }
.selo__tesoura circle, .selo__tesoura path { fill: none; stroke: var(--branco); stroke-width: 4; stroke-linecap: round; }
.selo:hover .selo__tesoura { transform: rotate(-24deg) scale(1.1); }
/* efeitos-web: animacoes/elemento-girando (bug do "Odeg" corrigido para 0deg) */
@keyframes girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.rasgo { position: absolute; left: 0; width: 100%; height: clamp(28px, 4.5vw, 64px); fill: var(--preto); pointer-events: none; }

/* ---------- 5. Topo: faixa + menu ---------- */
.topo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: transform .5s var(--ease-saida);
}
/* efeitos-web: atualizacoes/menu-fixo-com-blur (some ao descer, volta ao subir) */
.topo.is-escondido { transform: translateY(-100%); }

/* Faixa infinita (efeitos-web: atualizacoes/carrossel-de-lista-de-icones-infinito-com-efeito-no-hover, adaptado para texto) */
.faixa { height: var(--faixa-h); overflow: hidden; background: var(--preto); color: var(--papel); display: flex; align-items: center; }
.faixa__trilho { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; animation: faixa 26s linear infinite; }
.faixa__trilho span { font: 700 .86rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .12em; }
.faixa__trilho i { font-style: normal; color: var(--magenta-luz); margin: 0 1.4rem; font-size: 1rem; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
@keyframes faixa { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.menu {
  height: var(--menu-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0 var(--gutter);
  transition: background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.topo.is-rolado .menu {
  background: rgba(245, 241, 235, .82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(16, 16, 16, .08);
}

.logo { display: inline-flex; align-items: flex-end; text-decoration: none; padding: .2rem 0; }
.logo__nome { font: 400 2rem/.85 var(--f-display); text-transform: uppercase; letter-spacing: -.005em; }
.logo__assinatura {
  font-family: var(--f-letra); font-size: 1.55rem; line-height: 1; color: var(--magenta);
  transform: rotate(-8deg) translate(-.2em, .38em);
  transition: transform .4s var(--ease-saida);
}
.logo:hover .logo__assinatura { transform: rotate(-14deg) translate(-.1em, .3em) scale(1.08); }

.menu__links { position: relative; display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.9rem); }
.menu__links a {
  display: block; padding: .45rem 0;
  font: 700 .96rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  transition: color .25s;
}
.menu__links a:hover { color: var(--magenta); }
/* risco de pincel que desliza entre os links (recriado: o efeito "menu interativo com hover deslizante" da skill só tem JSON do Elementor) */
.menu__risco {
  position: absolute; left: 0; bottom: -2px; height: 5px;
  width: var(--risco-w, 0); transform: translateX(var(--risco-x, 0));
  opacity: var(--risco-o, 0);
  background: var(--magenta);
  clip-path: polygon(0 50%, 15% 0, 45% 35%, 75% 0, 100% 40%, 97% 100%, 60% 65%, 30% 100%, 4% 85%);
  transition: transform .4s var(--ease-saida), width .4s var(--ease-saida), opacity .25s;
  pointer-events: none;
}

.menu__abrir {
  display: none;
  border: 0; cursor: pointer;
  padding: .7rem 1.1rem .65rem;
  background: var(--preto); color: var(--papel);
  font: 700 .98rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .08em;
  clip-path: var(--pincel);
}

.menu-celular {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; justify-content: center; gap: 2rem;
  padding: 5rem var(--gutter) 3rem;
  background: var(--preto); color: var(--papel);
}
.menu-celular__fechar {
  position: absolute; top: 1.2rem; right: var(--gutter);
  border: 0; background: none; color: var(--papel); cursor: pointer;
  font: 700 1rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .1em;
}
.menu-celular li a {
  display: inline-block;
  font: 400 clamp(2.4rem, 11vw, 4rem)/1.05 var(--f-display); text-transform: uppercase; text-decoration: none;
}
.menu-celular li a:hover, .menu-celular li a:focus-visible { color: var(--magenta-luz); }
.menu-celular li { opacity: 0; transform: translateY(24px); transition: opacity .45s var(--ease-saida), transform .45s var(--ease-saida); }
.menu-celular.is-aberto li { opacity: 1; transform: none; }
.menu-celular.is-aberto li:nth-child(2) { transition-delay: .05s; }
.menu-celular.is-aberto li:nth-child(3) { transition-delay: .1s; }
.menu-celular.is-aberto li:nth-child(4) { transition-delay: .15s; }
.menu-celular.is-aberto li:nth-child(5) { transition-delay: .2s; }
.menu-celular.is-aberto li:nth-child(6) { transition-delay: .25s; }
.menu-celular.is-aberto li:nth-child(7) { transition-delay: .3s; }
.menu-celular .botao { align-self: flex-start; }

/* ---------- 6. Capa (hero) ---------- */
.capa {
  position: relative;
  isolation: isolate;
  min-height: max(100svh, 700px);
  display: flex; align-items: center;
  padding: calc(var(--topo-h) + 1.5rem) var(--gutter) clamp(5rem, 9vw, 7.5rem);
  overflow: hidden;
  background: var(--parede);
}

/* fundo: zoom de entrada + parallax (variáveis --fx, --fy, --fs definidas no JS) */
.capa__fundo {
  position: absolute; inset: -3%; z-index: -4;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0);
  will-change: transform;
}
.capa__fundo picture, .capa__fundo img { width: 100%; height: 100%; }
.capa__fundo img { object-fit: cover; object-position: 78% 32%; }

/* véu claro à esquerda para leitura + vinheta de cinema */
.capa::before {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(90deg, rgba(217, 187, 166, .62) 0%, rgba(217, 187, 166, .3) 36%, rgba(217, 187, 166, 0) 56%);
}
.capa::after {
  content: ""; position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(120% 90% at 62% 42%, transparent 58%, rgba(16, 16, 16, .3) 100%);
}

/* luz magenta que segue o mouse (efeitos-web: luzes/efeito-luz-bg-mouse, adaptado para fundo claro com multiply) */
.capa__luz {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(480px circle at var(--mx, 70%) var(--my, 40%), rgba(180, 3, 77, .26), transparent 68%);
  mix-blend-mode: multiply;
  opacity: 0; transition: opacity .7s;
}
.capa.is-mouse .capa__luz { opacity: 1; }

/* nome gigante ao fundo (estrutura DN Hair), mascarado para não passar pelo rosto */
.capa__marca {
  position: absolute; left: calc(var(--gutter) * .5); bottom: clamp(1.6rem, 4vw, 3.4rem); z-index: -1;
  margin: 0;
  font: 400 clamp(6rem, 19vw, 19rem)/.8 var(--f-display);
  text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap;
  color: rgba(16, 16, 16, .04);
  -webkit-text-stroke: 2px rgba(16, 16, 16, .17);
  -webkit-mask-image: linear-gradient(90deg, #000 0 38%, transparent 56%);
  mask-image: linear-gradient(90deg, #000 0 38%, transparent 56%);
  translate: var(--mx2, 0px) 0;
  pointer-events: none;
}

.capa__conteudo { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; }
.capa__conteudo > * { max-width: min(44rem, 50vw); }
.capa__etiqueta { margin-bottom: 1.5rem; }

.capa__titulo {
  margin: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; color: var(--preto);
}
.capa__l1 { font-size: clamp(2rem, 4.4vw, 4.2rem); line-height: .95; letter-spacing: 0; }
.capa__l2 { font-size: clamp(3.2rem, 7.2vw, 6.9rem); line-height: .9; letter-spacing: -.01em; white-space: nowrap; padding-top: .14em; } /* respiro para o acento de TAMBÉM */
.capa__l3 {
  position: relative; display: inline-block;
  margin: .12em 0 0 .12em;
  font-family: var(--f-letra); font-size: clamp(2.3rem, 5.6vw, 5.2rem); line-height: 1.05;
  text-transform: none; color: var(--magenta);
  transform: rotate(-4deg); transform-origin: left center;
}
.capa__l3-texto { display: inline-block; }
.capa__sublinhado { position: absolute; left: -3%; bottom: -.34em; width: 104%; height: .46em; overflow: visible; }
.capa__sublinhado path { fill: none; stroke: var(--magenta); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.capa__sublinhado path:first-child { stroke-width: 7; }
.capa__sublinhado path:last-child { stroke-width: 3.5; opacity: .7; }

.capa__subtitulo { margin: 2.1rem 0 0; max-width: min(34rem, 48vw) !important; font-size: clamp(1.05rem, 1.25vw, 1.22rem); line-height: 1.55; color: #2a2624; }

.capa__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2.2rem; margin-top: 2.2rem; }

.capa__anotacao { margin: 1.6rem 0 0 4.6rem; padding-left: 0; }
.capa__anotacao .anotacao__seta { left: -4.4rem; top: -2.3rem; width: 4rem; }

.capa__bilhete { left: 48.5%; top: 27%; width: 11.2rem; z-index: 3; }
.capa__selo { right: 5%; bottom: 14%; width: clamp(7rem, 9.5vw, 9.4rem); z-index: 3; }

.capa__role {
  position: absolute; left: 50%; bottom: clamp(3.6rem, 6vw, 5.2rem); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  translate: -50% 0;
  font-family: var(--f-letra); font-size: 1rem; text-decoration: none; color: var(--preto);
}
.capa__role svg { width: 1.2rem; overflow: visible; animation: quicar 1.7s ease-in-out infinite; }
.capa__role path { fill: none; stroke: var(--preto); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes quicar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

.capa .rasgo--base { bottom: -1px; z-index: 4; }

/* respingos de spray no clique */
.capa__respingos { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.respingo { position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; overflow: visible; animation: respingo 1.7s var(--ease-saida) forwards; }
.respingo circle { fill: var(--magenta); }
@keyframes respingo {
  0% { transform: scale(.15) rotate(var(--r, 0deg)); opacity: 1; }
  18% { transform: scale(1) rotate(var(--r, 0deg)); opacity: .95; }
  70% { opacity: .85; }
  100% { transform: scale(1.04) translateY(8px) rotate(var(--r, 0deg)); opacity: 0; }
}

/* ---------- 6.1 Capa: sequência de entrada ---------- */
/* efeitos-web: animacoes/animacao-de-entrada-para-primeira-dobra (showFromBottom com atrasos em sequência)
   Só roda com JS (classe .js); a classe .pronto chega quando fontes e imagem carregam. */
@keyframes sobe { from { opacity: 0; filter: blur(7px); transform: translateY(60px); } to { opacity: 1; filter: blur(0); transform: none; } }
/* efeitos-web: titulos-e-textos/entrada-de-texto-com-blur-indo-do-centro-para-os-lados */
@keyframes abre-letras { 0% { letter-spacing: -.5em; filter: blur(12px); opacity: 0; } 100% { letter-spacing: -.01em; filter: blur(0); opacity: 1; } }
@keyframes pincel-revela { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes desenha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes cola-bilhete { from { opacity: 0; transform: translateY(-50px) rotate(-10deg) scale(1.1); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes carimba { 0% { opacity: 0; transform: scale(2.2) rotate(-40deg); } 70% { opacity: 1; transform: scale(.94) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@keyframes zoom-fundo { from { transform: scale(1.16); filter: blur(8px) brightness(1.12); } to { transform: scale(1); filter: blur(0) brightness(1); } }
@keyframes marca-entra { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }

.js .capa__fundo img { animation: zoom-fundo 2.8s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__etiqueta { animation: sobe .8s .15s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__l1 { animation: sobe .9s .3s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__l2 { animation: abre-letras 1.5s .45s cubic-bezier(.25, .46, .45, .94) both; animation-play-state: paused; }
.js .capa__l3-texto { animation: pincel-revela .95s 1.15s var(--ease-pincel) both; animation-play-state: paused; }
.js .capa__sublinhado path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenha .7s 1.9s var(--ease-pincel) forwards; animation-play-state: paused; }
.js .capa__sublinhado path:last-child { animation-delay: 2.15s; }
.js .capa__subtitulo { animation: sobe .9s 1.35s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__botoes { animation: sobe .9s 1.55s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__anotacao { animation: aparece .6s 2.2s ease both; animation-play-state: paused; }
.js .capa__anotacao .anotacao__seta path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenha .7s 2.4s var(--ease-pincel) forwards; animation-play-state: paused; }
.js .capa__anotacao .anotacao__seta path:last-child { animation-delay: 3s; }
.js .capa__bilhete { animation: cola-bilhete 1s 2.5s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__bilhete li { animation: pincel-revela .5s var(--ease-pincel) both; animation-play-state: paused; }
.js .capa__bilhete li:nth-child(1) { animation-delay: 3.1s; }
.js .capa__bilhete li:nth-child(2) { animation-delay: 3.25s; }
.js .capa__bilhete li:nth-child(3) { animation-delay: 3.4s; }
.js .capa__bilhete li:nth-child(4) { animation-delay: 3.55s; }
.js .capa__bilhete li:nth-child(5) { animation-delay: 3.75s; }
.js .capa__selo { animation: carimba .8s 2.8s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__marca { animation: marca-entra 1.8s .55s var(--ease-saida) both; animation-play-state: paused; }
.js .capa__role { animation: aparece .8s 3.4s ease both; animation-play-state: paused; }

.js.pronto .capa__fundo img,
.js.pronto .capa__etiqueta, .js.pronto .capa__l1, .js.pronto .capa__l2, .js.pronto .capa__l3-texto,
.js.pronto .capa__sublinhado path, .js.pronto .capa__subtitulo, .js.pronto .capa__botoes,
.js.pronto .capa__anotacao, .js.pronto .capa__anotacao .anotacao__seta path,
.js.pronto .capa__bilhete, .js.pronto .capa__bilhete li, .js.pronto .capa__selo,
.js.pronto .capa__marca, .js.pronto .capa__role { animation-play-state: running; }

/* =========================================================
   7. SEÇÕES DA PÁGINA
   ========================================================= */

/* ---------- 7.0 Peças comuns ---------- */
.recipiente { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.secao-topo { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.secao-topo .etiqueta { margin-bottom: 1.3rem; }
.etiqueta--clara { background: var(--papel); color: var(--preto); }

.titulo {
  margin: 0;
  font: 400 clamp(2.5rem, 5.4vw, 5rem)/1.1 var(--f-display); /* altura de linha com respiro para os acentos (É, Á, Ú) */
  text-transform: uppercase; letter-spacing: -.005em;
  color: var(--preto);
}
.titulo > span { display: block; }
.titulo--claro { color: var(--papel); }

/* lettering de pincel com sublinhado que se desenha quando entra na tela */
.letra {
  position: relative; display: inline-block !important;
  margin-top: .14em;
  font-family: var(--f-letra); font-size: .78em; line-height: 1.08;
  text-transform: none; color: var(--magenta);
  transform: rotate(-3deg); transform-origin: left center;
}
.letra::after {
  content: ""; position: absolute; left: -2%; right: -3%; bottom: -.14em; height: .13em;
  background: currentColor;
  clip-path: polygon(0 45%, 12% 10%, 30% 35%, 52% 0, 74% 30%, 100% 5%, 98% 100%, 70% 72%, 46% 100%, 22% 70%, 2% 95%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .9s .45s var(--ease-pincel);
}
.ativo .letra::after, .letra.ativo::after, html:not(.js) .letra::after { transform: scaleX(1); }
.titulo--claro .letra { color: var(--magenta-luz); }

.apoio {
  margin: 1rem 0 0;
  font-family: var(--f-letra); font-size: 1.02rem; line-height: 1.25;
  color: var(--cinza-texto); transform: rotate(-2deg);
}
.cta-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.cta-linha .apoio { margin: 0; }
.cta-linha--claro .apoio { color: rgba(245, 241, 235, .7); }

.icone { width: 2.6rem; height: 2.6rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* efeitos-web: hover/elemento-subindo-e-rotacionando-no-hover-interatividade */
.hover-gira { transition: transform .7s var(--ease-saida); }
li:hover > .hover-gira, .hover-gira:hover { transform: translateY(-8px) rotate(-12deg) scale(1.08); }

/* polaroide e fita */
.polaroide { position: relative; background: #fff; padding: .9rem .9rem 3.4rem; box-shadow: 0 18px 32px rgba(16, 16, 16, .22); }
.polaroide::before { content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 28px; margin-left: -46px; background: rgba(222, 205, 168, .82); transform: rotate(-4deg); z-index: 2; }
.polaroide img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: contrast(1.05) saturate(.96); }
.hover-endireita { rotate: -4deg; transition: rotate .7s var(--ease-saida), scale .7s var(--ease-saida); }
.hover-endireita:hover { rotate: 0deg; scale: 1.02; }

.adesivo {
  display: inline-block; padding: .65rem 1.1rem .6rem;
  background: var(--magenta); color: var(--branco);
  font: 700 1rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .1em;
  clip-path: var(--pincel);
}

/* Entrada conforme o scroll (efeitos-web: scroll/animacao-de-entrada-conforme-o-scroll) */
.js .revela {
  opacity: 0; filter: blur(7px); transform: translateY(50px);
  transition: opacity .9s var(--ease-saida), transform .9s var(--ease-saida), filter .9s var(--ease-saida), translate .25s var(--ease-saida);
}
.js .revela--esq { transform: translateX(-60px); }
.js .revela--dir { transform: translateX(60px); }
.js .revela.ativo { opacity: 1; filter: blur(0); transform: none; }
.js .d1 { transition-delay: .12s; }
.js .d2 { transition-delay: .24s; }
.js .d3 { transition-delay: .36s; }

/* celular (mockup) */
.celular {
  position: relative; width: 260px; aspect-ratio: 9 / 19;
  padding: 10px; border-radius: 40px;
  background: #050505;
  box-shadow: 0 0 0 2px #2b2b2b, 0 30px 60px rgba(0, 0, 0, .45);
}
.celular::before { content: ""; position: absolute; top: 18px; left: 50%; width: 32%; height: 20px; margin-left: -16%; border-radius: 12px; background: #050505; z-index: 3; }
.celular__tela { position: relative; height: 100%; overflow: hidden; border-radius: 31px; background: var(--papel); }

/* rasgos extras */
.rasgo--papel { fill: var(--papel); }
.rasgo--base { bottom: -1px; }
.rasgo--topo { top: -1px; transform: scaleY(-1); fill: var(--papel); }

/* ---------- 7.1 Números ---------- */
.numeros { position: relative; background: var(--preto); color: var(--papel); padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); margin-top: -1px; }
.numeros__lista { display: grid; grid-template-columns: repeat(4, 1fr); }
.numero { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .6rem 1rem; text-align: center; border-left: 1px solid var(--cinza-texto); }
.numero:first-child { border-left: 0; }
.numero__icone { color: var(--magenta-luz); }
.numero__valor { font: 400 clamp(2.1rem, 3.6vw, 3.5rem)/1 var(--f-display); text-transform: uppercase; white-space: nowrap; }
.numero__legenda { font: 700 .95rem/1.25 var(--f-apoio); text-transform: uppercase; letter-spacing: .08em; color: rgba(245, 241, 235, .7); }

/* ---------- 7.2 Quem já me confiou (escondido até ter material real) ---------- */
.confiaram { background: var(--papel); padding: clamp(5rem, 9vw, 8rem) 0; text-align: center; }
.faixa-polaroides { overflow: hidden; margin-top: 3rem; }
.faixa-polaroides__trilho { display: flex; gap: 1.6rem; width: max-content; animation: faixa 40s linear infinite; }
.faixa-polaroides .polaroide { width: 14rem; padding-bottom: 2.6rem; }
.faixa-polaroides .polaroide span { position: absolute; left: 0; right: 0; bottom: .8rem; font-family: var(--f-letra); }

/* ---------- 7.3 Sua rotina vira post (cena presa) ---------- */
.rotina { position: relative; background: var(--preto); color: var(--papel); padding: clamp(3rem, 7vw, 6rem) 0 clamp(6rem, 10vw, 9rem); overflow-x: clip; margin-top: -1px; }
.rotina__cena { position: relative; display: grid; justify-items: center; gap: 2.5rem; padding: 0 var(--gutter); }
/* efeitos-web: luzes/degrade-radial */
.rotina__luz { position: absolute; left: 50%; top: 30%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(180, 3, 77, .55), transparent 65%); filter: blur(40px); pointer-events: none; }
.rotina__celular { z-index: 2; }

.agenda { padding: 3rem 1rem 1rem; background: linear-gradient(165deg, #2a0d1a 0%, #101010 72%); color: var(--papel); }
.agenda__dia { margin: 0; font: 700 .72rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .14em; color: var(--magenta-luz); }
.agenda__titulo { margin: .35rem 0 1rem; font: 400 1.7rem/1 var(--f-display); text-transform: uppercase; }
.agenda__lista li {
  position: relative; display: grid; grid-template-columns: 3.1rem 1fr; align-items: center;
  margin-bottom: .45rem; padding: .55rem .7rem; border-radius: 10px;
  background: var(--magenta); color: var(--branco);
  font: 500 .8rem/1.2 var(--f-texto);
  transition: background-color .45s, color .45s, transform .45s var(--ease-saida);
}
.agenda__lista time { font: 700 .85rem/1 var(--f-apoio); letter-spacing: .04em; }
.agenda__lista li::after { content: "Livre"; position: absolute; left: 3.8rem; top: 50%; transform: translateY(-50%); font-size: .8rem; color: rgba(245, 241, 235, .4); opacity: 0; transition: opacity .3s; }
.cena-ativa .agenda__lista li:not(.marcado) { background: rgba(255, 255, 255, .06); color: rgba(245, 241, 235, .55); }
.cena-ativa .agenda__lista li:not(.marcado) span { opacity: 0; }
.cena-ativa .agenda__lista li:not(.marcado)::after { opacity: 1; }
.cena-ativa .agenda__lista li.marcado { transform: scale(1.03); }
.agenda__lista span { transition: opacity .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda__cheia { margin: .7rem 0 0; text-align: center; font-family: var(--f-letra); font-size: 1.25rem; color: var(--magenta-luz); transform: rotate(-4deg); transition: opacity .5s, transform .5s var(--ease-saida); }
.cena-ativa:not(.is-cheia) .agenda__cheia { opacity: 0; transform: rotate(-4deg) scale(.6); }

.notificacoes { display: grid; gap: .7rem; width: min(100%, 26rem); z-index: 3; }
.notificacao {
  --r: 0deg;
  padding: .8rem 1rem .85rem;
  background: var(--papel-claro); color: var(--preto);
  font: 500 .92rem/1.3 var(--f-texto);
  box-shadow: 0 14px 26px rgba(0, 0, 0, .35);
  rotate: var(--r);
  transition: opacity .55s var(--ease-saida), transform .55s var(--ease-saida);
}
.notificacao b { display: block; margin-bottom: .2rem; font: 700 .72rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .1em; color: var(--magenta); }

.rotina__texto { position: relative; z-index: 4; max-width: 56rem; text-align: center; }
.rotina__titulo { font-size: clamp(2.3rem, 5vw, 4.6rem); }
.rotina__titulo .letra { transform-origin: center; }
.preenche .palavra { transition: color .35s; }
.cena-ativa .preenche .palavra { color: rgba(245, 241, 235, .16); }
.cena-ativa .preenche .palavra.acesa { color: var(--papel); }
.rotina__paragrafo { margin: 1.6rem auto 0; max-width: 38rem; font-size: 1.12rem; color: rgba(245, 241, 235, .8); transition: opacity .6s, transform .6s var(--ease-saida); }
.cena-ativa:not(.texto-visivel) .rotina__paragrafo { opacity: 0; transform: translateY(20px); }
.cena-ativa:not(.texto-visivel) .rotina__titulo .letra { opacity: .18; }
.rotina__titulo .letra { transition: opacity .6s; }

.frentes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(4rem, 8vw, 6rem); }
.frente { padding: 0 1.6rem; border-left: 1px solid var(--cinza-texto); }
.frente:first-child { border-left: 0; padding-left: 0; }
.frente__num { display: block; font: 400 2.4rem/1 var(--f-display); color: var(--magenta-luz); }
.frente h3 { margin: .7rem 0 .5rem; font: 400 1.65rem/1.05 var(--f-display); text-transform: uppercase; }
.frente p { margin: 0; color: rgba(245, 241, 235, .75); }

/* ---------- 7.4 Método Embelezamento Criativo (cena presa) ---------- */
.metodo { position: relative; background: var(--papel); padding: clamp(5rem, 9vw, 8rem) 0 clamp(5rem, 8vw, 7rem); overflow-x: clip; }
.metodo__cena { display: grid; gap: 3rem; padding: 0 var(--gutter); max-width: var(--container); margin-inline: auto; }
.metodo__titulo .letra { font-size: .72em; }
.metodo__apoio { margin: 1.6rem 0 0; max-width: 32rem; font-size: 1.15rem; }
.metodo__painel { display: none; }

.metodo__orbita { position: relative; width: min(36rem, 88vw); aspect-ratio: 1; margin-inline: auto; }
.metodo__orbita::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(180, 3, 77, .32), transparent 66%); filter: blur(26px); }
.metodo__aneis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: girar 70s linear infinite; }
.metodo__aneis circle { fill: none; stroke: rgba(16, 16, 16, .28); stroke-width: 1.5; stroke-dasharray: 5 10; }
.metodo__aneis .metodo__ponto { fill: var(--magenta); stroke: none; }

.pilula {
  position: absolute; left: var(--x); top: var(--y); z-index: 4;
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .95rem .55rem;
  background: var(--papel-claro); color: var(--preto);
  font: 700 .95rem/1.1 var(--f-apoio); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  box-shadow: 0 8px 18px rgba(16, 16, 16, .16);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  transition: background-color .45s, color .45s, transform .55s var(--ease-saida);
}
.pilula span { font: 400 1.35rem/1 var(--f-display); color: var(--magenta); }
.pilula.ativa { background: var(--preto); color: var(--papel); transform: translate(-50%, -50%) rotate(0deg) scale(1.1); }
.pilula.ativa span { color: var(--magenta-luz); }

.metodo__celular { position: absolute; left: 50%; top: 50%; width: 34%; z-index: 2; transform: translate(-50%, -54%) rotate(-6deg); }
.metodo__centro {
  position: absolute; left: 50%; bottom: 15%; z-index: 5; margin: 0;
  padding: .75rem 1.5rem .65rem; text-align: center;
  background: var(--magenta); color: var(--branco);
  clip-path: var(--pincel);
  transform: translateX(-50%) rotate(-3deg);
}
.metodo__centro span { display: block; font: 700 .75rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .14em; opacity: .85; }
.metodo__centro strong { display: block; margin-top: .2rem; font: 400 1.75rem/1 var(--f-display); text-transform: uppercase; font-weight: 400; }

.conversa { background: #EFE7DF; display: flex; flex-direction: column; }
.conversa__topo { display: flex; align-items: center; gap: .55rem; padding: 2.3rem .8rem .7rem; background: var(--preto); color: var(--papel); }
.conversa__topo i { width: 30px; height: 30px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--magenta-luz), var(--magenta-profundo)); }
.conversa__topo b { display: block; font: 700 .9rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .04em; }
.conversa__topo span { font-size: .68rem; opacity: .6; }
.conversa__mensagens { display: flex; flex-direction: column; gap: .45rem; padding: .9rem .6rem; }
.msg { max-width: 84%; padding: .5rem .65rem; border-radius: 12px; font: 400 .76rem/1.35 var(--f-texto); color: var(--preto); box-shadow: 0 1px 0 rgba(16, 16, 16, .08); transition: opacity .45s, transform .45s var(--ease-saida); }
.msg--recebida { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.msg--enviada { align-self: flex-end; background: #F7D3E2; border-top-right-radius: 2px; }
.msg--sistema { align-self: center; background: rgba(180, 3, 77, .12); color: var(--magenta); font: 700 .7rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .1em; }
.msg--sistema::before { content: "✓ "; }
.cena-ativa .msg:not(.visivel) { opacity: 0; transform: translateY(14px); }

.metodo__lista { display: grid; gap: 0; margin-top: 3rem; }
.metodo__lista li { padding: 1.4rem 0; border-top: 1px solid rgba(16, 16, 16, .18); }
.metodo__lista span { font: 400 1.5rem/1 var(--f-display); color: var(--magenta); }
.metodo__lista h3 { margin: .4rem 0 .4rem; font: 400 1.6rem/1.05 var(--f-display); text-transform: uppercase; }
.metodo__lista p { margin: 0; max-width: 40rem; }

/* cena ligada (desktop com movimento) */
.metodo.cena-ativa .metodo__pista { height: 520vh; }
.metodo.cena-ativa .metodo__cena {
  position: sticky; top: 0; height: 100vh;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 2rem;
}
.metodo.cena-ativa .metodo__painel { display: block; }
.metodo.cena-ativa .metodo__lista { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.metodo.cena-ativa .metodo__aneis { animation: none; rotate: var(--giro, 0deg); }
.metodo.cena-ativa .metodo__orbita { width: min(38rem, 46vw, 70vh); }
.metodo.cena-ativa { padding-top: 0; }

.metodo__progresso { display: flex; align-items: center; gap: .9rem; margin: 2.4rem 0 1.4rem; font: 700 1rem/1 var(--f-apoio); letter-spacing: .06em; }
.metodo__progresso i { position: relative; flex: 0 0 9rem; height: 5px; background: rgba(16, 16, 16, .12); }
/* efeitos-web: barra-de-progresso/degrade-na-barra-de-progresso */
.metodo__progresso b { position: absolute; left: 0; top: 0; bottom: 0; width: 20%; background: linear-gradient(90deg, var(--magenta), var(--magenta-luz)); transition: width .3s; }
.metodo__etapa-titulo { margin: 0; font: 400 clamp(1.8rem, 2.6vw, 2.4rem)/1 var(--f-display); text-transform: uppercase; }
.metodo__etapa-texto { margin: .8rem 0 0; max-width: 30rem; font-size: 1.1rem; }
.metodo__etapa-titulo, .metodo__etapa-texto { transition: opacity .22s, transform .22s; }
.metodo__painel.trocando .metodo__etapa-titulo, .metodo__painel.trocando .metodo__etapa-texto { opacity: 0; transform: translateY(10px); }

.metodo .cta-linha { justify-content: flex-start; }

/* ---------- 7.5 Pra quem é ---------- */
.publico { background: var(--papel); padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); }
.publico__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.6rem); align-items: stretch; }
.publico h3 { margin: 0 0 1.4rem; font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--f-display); text-transform: uppercase; }

.bilhete-solto { position: relative; padding: 2.4rem 2.2rem; background: var(--papel-claro); box-shadow: 0 16px 30px rgba(16, 16, 16, .14); rotate: -1.2deg; }
.bilhete-solto::before { content: ""; position: absolute; top: -13px; left: 2.4rem; width: 90px; height: 26px; background: rgba(222, 205, 168, .82); transform: rotate(-6deg); }
.publico__nao li { padding: 1rem 0; border-bottom: 1px dashed rgba(16, 16, 16, .25); font-size: 1.1rem; }
.publico__nao li:last-child { border-bottom: 0; }
/* risco de marcador magenta que se desenha (efeitos-web: titulos-e-textos/riscar-palavra-e-mudar-a-cor-do-risco, animado e linha por linha) */
.risca {
  background-image: linear-gradient(var(--magenta), var(--magenta));
  background-repeat: no-repeat; background-position: 0 60%; background-size: 0% .13em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1s var(--ease-pincel), color .6s;
}
.ativo .risca, html:not(.js) .risca { background-size: 100% .13em; color: rgba(16, 16, 16, .72); }
.ativo li:nth-child(2) .risca { transition-delay: .35s; }
.ativo li:nth-child(3) .risca { transition-delay: .7s; }
.ativo li:nth-child(1) .risca { transition-delay: .1s; }

.publico__sim { position: relative; padding: 2.4rem 2.2rem; background: var(--preto); color: var(--papel); rotate: .8deg; }
.perfil-publico + .perfil-publico { margin-top: 1.6rem; }
.perfil-publico h4 { margin: 0 0 .5rem; font: 400 1.6rem/1.1 var(--f-display); text-transform: uppercase; }
.perfil-publico p { margin: 0; color: rgba(245, 241, 235, .8); }
/* marca-texto (efeitos-web: titulos-e-textos/texto-com-destaque, com marcadores nos cantos) */
.marca-texto {
  position: relative; padding: 0 .25em; color: var(--papel);
  background-image: linear-gradient(var(--magenta), var(--magenta)); background-repeat: no-repeat; background-size: 0% 100%;
  background-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .8s .3s var(--ease-pincel);
}
.ativo .marca-texto, html:not(.js) .marca-texto { background-size: 100% 100%; }
.marca-texto::before, .marca-texto::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--papel); }
.marca-texto::before { top: -4px; left: -4px; }
.marca-texto::after { bottom: -4px; right: -4px; }
.fitas { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }
.fitas li {
  padding: .45rem .85rem .4rem;
  background: rgba(222, 205, 168, .95); color: var(--preto);
  font: 700 .9rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .05em;
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%);
  transition: rotate .4s var(--ease-saida), scale .4s var(--ease-saida);
}
.fitas li:nth-child(odd) { rotate: -2deg; }
.fitas li:nth-child(even) { rotate: 1.5deg; }
.fitas li:hover { rotate: 0deg; scale: 1.08; }

/* ---------- 7.6 Serviços (trilho horizontal preso) ---------- */
.servicos { position: relative; background: #EDE6DC; padding: clamp(5rem, 9vw, 8rem) 0 clamp(6rem, 10vw, 9rem); overflow-x: clip; }
.servicos__cena { display: grid; gap: 2.5rem; }
.servicos__intro { padding-inline: var(--gutter); max-width: var(--container); margin-inline: auto; width: 100%; }
.servicos__intro .titulo { font-size: clamp(2.3rem, 4.4vw, 4rem); }
.servicos__nota { margin: 1.5rem 0 1.8rem; max-width: 26rem; font-size: 1.1rem; }
.servicos__janela { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1.5rem 0 2rem; }
.servicos__janela::-webkit-scrollbar { display: none; }
.servicos__trilho { display: flex; gap: 1.4rem; width: max-content; padding-inline: var(--gutter); }
.servicos__barra { display: none; }

.servico {
  flex: 0 0 clamp(16.5rem, 21vw, 19.5rem);
  display: flex; flex-direction: column;
  background: var(--papel-claro); border: 1px solid var(--papel-sombra);
  scroll-snap-align: start;
  transition: filter .5s, scale .5s var(--ease-saida), translate .6s var(--ease-saida), rotate .6s var(--ease-saida), box-shadow .5s;
}
.servico:nth-child(odd) { rotate: -1deg; }
.servico:nth-child(even) { rotate: 1deg; }
.servico__topo { display: flex; flex-direction: column; gap: .35rem; min-height: 6.8rem; padding: 1.1rem 1.25rem 1rem; background: var(--preto); color: var(--papel); }
.servico__num { font: 400 1.15rem/1 var(--f-display); color: var(--magenta-luz); }
.servico__topo h3 { margin: 0; font: 400 1.55rem/1 var(--f-display); text-transform: uppercase; }
.servico__arte { position: relative; display: grid; place-items: center; height: 10.5rem; overflow: hidden; color: var(--preto); }
.servico__arte::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(circle at var(--sx, 70%) var(--sy, 35%), rgba(180, 3, 77, .55) 0 8%, rgba(180, 3, 77, .22) 14%, transparent 30%),
    radial-gradient(circle at calc(var(--sx, 70%) - 22%) calc(var(--sy, 35%) + 30%), rgba(180, 3, 77, .35) 0 2.5%, transparent 4%),
    radial-gradient(circle at calc(var(--sx, 70%) + 12%) calc(var(--sy, 35%) + 22%), rgba(180, 3, 77, .45) 0 1.5%, transparent 2.5%),
    radial-gradient(circle at calc(var(--sx, 70%) - 8%) calc(var(--sy, 35%) - 12%), rgba(180, 3, 77, .4) 0 1%, transparent 2%);
  transition: transform .8s var(--ease-saida);
}
.servico:hover .servico__arte::before { transform: scale(1.15) rotate(8deg); }
.arte--1 { --sx: 72%; --sy: 30%; } .arte--2 { --sx: 30%; --sy: 40%; } .arte--3 { --sx: 66%; --sy: 62%; }
.arte--4 { --sx: 38%; --sy: 28%; } .arte--5 { --sx: 70%; --sy: 55%; } .arte--6 { --sx: 50%; --sy: 45%; }
.servico__arte .icone { position: relative; width: 4.8rem; height: 4.8rem; stroke-width: 2; transition: transform .8s var(--ease-saida); }
.servico:hover .servico__arte .icone { transform: rotate(-10deg) scale(1.12); }
.servico > p { margin: 0; padding: 1.1rem 1.25rem 1.5rem; font-size: 1rem; line-height: 1.5; }
.servico--destaque { background: var(--magenta); border-color: var(--magenta); color: var(--branco); }
.servico--destaque .servico__arte { color: var(--branco); }
.servico--destaque .servico__arte::before { filter: brightness(2.2) saturate(.2); opacity: .55; }

/* efeitos-web: cards/efeito-hover-com-foco-e-desfocando-os-demais + hover/elemento-subindo-e-rotacionando */
@media (hover: hover) and (min-width: 768px) {
  .foco-grupo:hover .foco-item { filter: blur(2.5px); scale: .98; }
  .foco-grupo .foco-item:hover { filter: blur(0); scale: 1.03; translate: 0 -14px; rotate: -2deg; box-shadow: 0 26px 50px rgba(180, 3, 77, .25); }
}

/* cena ligada */
.servicos.cena-ativa { padding: 0; }
.servicos.cena-ativa .servicos__cena {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  grid-template-columns: minmax(19rem, 27rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem);
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
.servicos.cena-ativa .servicos__intro { padding: 0; margin: 0; }
/* efeitos-web: carrossel/carrossel-com-fade-nas-laterais (os cards somem suavemente nas bordas da janela) */
.servicos.cena-ativa .servicos__janela {
  overflow: hidden; scroll-snap-type: none; padding: 3rem 0 3rem 1.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.servicos.cena-ativa .servicos__trilho { padding-inline: 0 var(--gutter); will-change: transform; }
.servicos.cena-ativa .servicos__barra {
  display: block; position: absolute; bottom: 7vh;
  left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  width: 14rem; height: 5px; background: rgba(16, 16, 16, .12);
}
.servicos__barra b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--magenta), var(--magenta-luz)); }

/* ---------- 7.7 Como a gente trabalha ---------- */
.como { position: relative; background: var(--preto); color: var(--papel); padding: clamp(5rem, 9vw, 8rem) 0 clamp(5rem, 9vw, 7rem); margin-top: -1px; }
.como__passos { position: relative; }
.como__traco { position: absolute; left: var(--gutter); top: 1.2rem; width: calc(100% - var(--gutter) * 2); height: 60px; overflow: visible; pointer-events: none; }
.como__traco path { fill: none; stroke: var(--magenta-luz); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p-linha, 1)); }
.como ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.passo { position: relative; padding-top: 5.6rem; }
.passo::before {
  content: ""; position: absolute; left: 0; top: 2.25rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--magenta-luz); border: 3px solid var(--magenta-luz);
  transition: background-color .4s, scale .5s var(--ease-saida);
}
.passo__num { display: block; font: 400 4.4rem/1 var(--f-display); color: var(--magenta-luz); -webkit-text-stroke: 1.5px var(--magenta-luz); transition: color .5s; }
.passo h3 { margin: .7rem 0 .5rem; font: 400 1.6rem/1.05 var(--f-display); text-transform: uppercase; }
.passo p { margin: 0; color: rgba(245, 241, 235, .75); }
.linha-ativa .passo:not(.ativo)::before { background: var(--preto); scale: .65; }
.linha-ativa .passo:not(.ativo) .passo__num { color: transparent; }
.linha-ativa .passo { transition: opacity .5s; }
.linha-ativa .passo:not(.ativo) h3, .linha-ativa .passo:not(.ativo) p { opacity: .35; }
.passo h3, .passo p { transition: opacity .5s; }

.botao--magenta-cheio { background: var(--magenta); }
.botao--magenta-cheio .botao__seta { background: var(--papel); color: var(--preto); }

/* ---------- 7.8 Depoimentos (escondido até ter material real) ---------- */
.depoimentos { background: var(--preto); color: var(--papel); padding: clamp(5rem, 9vw, 8rem) 0; }
.depoimentos__lista { display: flex; gap: 1.6rem; overflow-x: auto; }
.polaroide--video { flex: 0 0 15rem; }
.polaroide--video video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #222; }

/* ---------- 7.9 Na prática (carrossel de celulares em perspectiva) ---------- */
.pratica { position: relative; background: var(--preto); color: var(--papel); padding: clamp(4rem, 8vw, 7rem) 0 clamp(7rem, 11vw, 10rem); overflow: hidden; margin-top: -1px; }
.pratica__palco { position: relative; height: 51rem; perspective: 1600px; }
.pratica__palco::before { content: ""; position: absolute; left: 50%; top: 40%; width: 60vmin; height: 60vmin; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(180, 3, 77, .5), transparent 65%); filter: blur(40px); }
.pratica__adesivo { position: absolute; left: calc(50% + 9rem); top: 1.5rem; z-index: 20; rotate: 8deg; }
.pratica__trilho { position: relative; height: 100%; transform-style: preserve-3d; }
.pratica__item {
  --o: 0; --abs: 0;
  position: absolute; left: 50%; top: 0; width: 16.5rem; margin-left: -8.25rem;
  cursor: pointer;
  transform: translateX(calc(var(--o) * 82%)) rotateY(calc(var(--o) * -26deg)) scale(calc(1 - var(--abs) * .16));
  opacity: calc(1 - var(--abs) * .42);
  filter: blur(calc(var(--abs) * 2.5px));
  z-index: calc(10 - var(--abs));
  transition: transform .9s var(--ease-saida), opacity .9s, filter .9s;
}
.pratica__item.ativo { cursor: default; }
.celular--post { width: 100%; }
.pratica__legenda { margin-top: 1.4rem; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s var(--ease-saida); }
.pratica__item.ativo .pratica__legenda { opacity: 1; transform: none; transition-delay: .3s; }
.pratica__legenda .tag { display: inline-block; padding: .3rem .6rem; background: var(--magenta); font: 700 .78rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .1em; }
.pratica__legenda h3 { margin: .7rem 0 .4rem; font: 400 1.45rem/1.05 var(--f-display); text-transform: uppercase; }
.pratica__legenda p { margin: 0; font-size: .98rem; color: rgba(245, 241, 235, .78); }

.post { display: flex; flex-direction: column; justify-content: flex-end; padding: 2.8rem 1.1rem 1.4rem; color: var(--papel); }
.post__formato { position: absolute; top: 2.6rem; left: 1rem; padding: .3rem .55rem; background: rgba(16, 16, 16, .55); color: var(--papel); font: 700 .72rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .1em; }
.post__titulo { position: relative; margin: 0 0 .8rem; max-width: 11ch; font: 400 2rem/1.05 var(--f-display); text-transform: uppercase; }
.post__perfil { font: 700 .8rem/1 var(--f-apoio); letter-spacing: .04em; opacity: .85; }
.post__acoes { position: absolute; right: .8rem; bottom: 4.6rem; display: flex; flex-direction: column; gap: .9rem; }
.post__acoes li { width: 1.55rem; height: 1.55rem; border: 2px solid var(--papel); border-radius: 50%; opacity: .9; }
.post__acoes li:first-child { border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--magenta-luz); border-color: var(--magenta-luz); }
.post__play { position: absolute; left: 50%; top: 42%; width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; border: 3px solid var(--papel); border-radius: 50%; animation: pulso-play 2.2s ease-in-out infinite; }
.post__play::after { content: ""; position: absolute; left: 38%; top: 28%; border-left: 16px solid var(--papel); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
@keyframes pulso-play { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.post__pontos { display: flex; justify-content: center; gap: .35rem; margin-top: .6rem; }
.post__pontos li { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .3; }
.post__pontos li:first-child { opacity: 1; background: var(--magenta-luz); }

.post--bastidor { background: radial-gradient(circle at 70% 25%, rgba(214, 36, 106, .55), transparent 45%), linear-gradient(170deg, #3a0a1f 0%, #101010 72%); }
.post--antes-depois { justify-content: flex-start; padding-top: 4.4rem; background: var(--papel); color: var(--preto); }
.post--antes-depois .post__formato { background: var(--preto); }
.post__metades { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; height: 50%; margin-bottom: 1rem; }
.post__metades span { display: flex; align-items: flex-end; padding: .5rem; font: 700 .78rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .08em; }
.post__metades span:first-child { background: linear-gradient(160deg, #cfc2b7, #9c8c80); color: var(--preto); }
.post__metades span:last-child { background: linear-gradient(160deg, #e9a7c1, var(--magenta)); color: var(--branco); }
.post--antes-depois .post__titulo { font-size: 1.7rem; }
.post--antes-depois .post__pontos { margin-top: auto; }
.post--duvida { background: radial-gradient(circle at 50% 30%, rgba(180, 3, 77, .5), transparent 50%), #101010; }
.post__balao { position: absolute; left: 50%; top: 30%; width: 6.2rem; height: 5.2rem; margin: -2.6rem 0 0 -3.1rem; display: grid; place-items: center; border-radius: 1.2rem; background: var(--papel); color: var(--magenta); font: 400 4rem/1 var(--f-display); rotate: -6deg; animation: balanca 3s ease-in-out infinite; }
.post__balao::after { content: ""; position: absolute; left: 1.2rem; bottom: -14px; border-top: 16px solid var(--papel); border-right: 16px solid transparent; }
@keyframes balanca { 0%, 100% { rotate: -6deg; } 50% { rotate: 4deg; } }
.post--valor { justify-content: center; background: var(--magenta); color: var(--branco); }
.post--valor .post__titulo { font-size: 2.5rem; }
.post--valor .post__formato { background: rgba(16, 16, 16, .3); }
.post--valor .post__pontos { position: absolute; left: 0; right: 0; bottom: 1.4rem; }

.pratica__controles { position: absolute; left: 50%; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 1.2rem; transform: translateX(-50%); }
.pratica__seta {
  width: 3.1rem; height: 3.1rem; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--papel); border: 2px solid var(--papel);
  font: 700 1.2rem/1 var(--f-texto);
  transition: background-color .3s, border-color .3s, transform .3s var(--ease-saida);
}
.pratica__seta:hover { background: var(--magenta); border-color: var(--magenta); transform: scale(1.08); }
.pratica__contagem { font: 700 1rem/1 var(--f-apoio); letter-spacing: .12em; min-width: 4.5rem; text-align: center; }
.pratica .cta-linha { justify-content: center; }

/* ---------- 7.10 Sobre ---------- */
/* Palco cinematográfico do tamanho da tela (FOTO2 no cenário da capa), com parallax leve no scroll.
   Texto do lado da parede; os 4 pilares ficam numa faixa de papel logo abaixo. */
.sobre { position: relative; background: var(--papel); padding: 0 0 clamp(5rem, 8vw, 7rem); }
.sobre .rasgo--topo { fill: var(--preto); z-index: 4; }
.sobre__palco {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(min(100vh, 66.6vw), 680px);
  display: flex; align-items: center;
  padding: clamp(6rem, 9vw, 8rem) var(--gutter) clamp(5rem, 8vw, 7rem) clamp(var(--gutter), 6vw, 8rem);
  background: #C9AC95;
}
.sobre__palco::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(201, 172, 149, .92) 0%, rgba(201, 172, 149, .82) 28%, rgba(201, 172, 149, .5) 38%, rgba(201, 172, 149, 0) 50%);
}
.sobre__palco .rasgo--base { z-index: 4; }
.sobre__fundo { position: absolute; inset: -4% 0; z-index: -2; will-change: translate; }
.sobre__fundo picture, .sobre__fundo img { width: 100%; height: 100%; }
.sobre__fundo img { object-fit: cover; object-position: 60% 30%; }
/* o texto ocupa só o primeiro terço da tela, a parte da parede antes do braço */
.sobre__texto { position: relative; width: max(20rem, calc(34vw - clamp(var(--gutter), 6vw, 8rem))); }
.sobre .titulo { font-size: clamp(2.4rem, 4.2vw, 4.4rem); }
.sobre__abertura { font-size: 1.15rem; }
.sobre__selo { position: absolute; right: 6%; bottom: 16%; width: clamp(7rem, 10vw, 9.5rem); z-index: 3; }
.sobre__pilares { padding-top: clamp(3.5rem, 6vw, 5rem); }
.sobre__pilares .pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.selo__centro { position: absolute; inset: 0; display: grid; place-items: center; font: 400 2.4rem/1 var(--f-display); color: var(--branco); }
.sobre__texto .etiqueta { margin-bottom: 1.3rem; }
.sobre__paragrafo { margin: 1.8rem 0 0; max-width: 40rem; font-size: 1.1rem; }
.sobre__abertura { margin: 2.3rem 0 1.4rem; color: var(--magenta); font-size: 1.3rem; }
.pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2.2rem; margin-bottom: 2.6rem; }
.pilar .icone { color: var(--magenta); }
.pilar h3 { margin: .55rem 0 .3rem; font: 400 1.35rem/1.05 var(--f-display); text-transform: uppercase; }
.pilar p { margin: 0; font-size: .98rem; color: #3a3533; }

/* ---------- 7.11 Dúvidas ---------- */
.duvidas { background: var(--papel); padding: clamp(3rem, 6vw, 5rem) 0 clamp(7rem, 12vw, 10rem); }
.duvidas__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.duvidas__topo { position: sticky; top: calc(var(--menu-h) + 2rem); }
.duvidas__topo .titulo { font-size: clamp(2.3rem, 4.2vw, 3.9rem); }
.duvidas__anotacao { margin: 2.2rem 0 .8rem 4rem; font-size: 1.3rem; }
.duvidas__anotacao .anotacao__seta { left: -4.2rem; top: -.6rem; width: 3.6rem; }
.js .duvidas__anotacao .anotacao__seta path, .js .rodape__seta path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s .5s var(--ease-pincel); }
.js .ativo .duvidas__anotacao .anotacao__seta path, .js .rodape__chamada.ativo .rodape__seta path { stroke-dashoffset: 0; }
.js .ativo .duvidas__anotacao .anotacao__seta path:last-child, .js .rodape__chamada.ativo .rodape__seta path:last-child { transition-delay: 1.2s; }

.acordeao { border-top: 2px solid var(--preto); }
.pergunta { border-bottom: 2px solid var(--preto); }
.pergunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.1 var(--f-display); text-transform: uppercase;
  transition: color .3s;
}
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary::after {
  content: "+"; flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 2px solid var(--preto); color: var(--magenta);
  font: 700 1.8rem/1 var(--f-texto);
  transition: rotate .45s var(--ease-saida), background-color .3s, color .3s, border-color .3s;
}
.pergunta summary:hover { color: var(--magenta); }
.pergunta[open] summary::after { rotate: 45deg; background: var(--magenta); border-color: var(--magenta); color: var(--branco); }
.pergunta__resposta p { margin: 0 0 1.7rem; max-width: 44rem; font-size: 1.08rem; }
.pergunta[open] .pergunta__resposta { animation: abre-resposta .5s var(--ease-saida); }
@keyframes abre-resposta { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* ---------- 7.12 Contato (painel magenta) ---------- */
.contato { position: relative; isolation: isolate; overflow: hidden; background: var(--magenta); color: var(--branco); padding: clamp(6rem, 11vw, 9rem) 0 clamp(7rem, 12vw, 10rem); }
.contato .rasgo--base { fill: var(--preto); }
.contato__spray {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 8% 30%, rgba(140, 2, 60, .9) 0 5%, rgba(140, 2, 60, .4) 11%, transparent 24%),
    radial-gradient(circle at 92% 78%, rgba(214, 36, 106, .75) 0 7%, transparent 28%),
    radial-gradient(circle at 70% 12%, rgba(16, 16, 16, .22) 0 2%, transparent 16%),
    radial-gradient(circle at 25% 85%, rgba(16, 16, 16, .18) 0 1.5%, transparent 12%),
    radial-gradient(circle at 18% 22%, rgba(245, 241, 235, .25) 0 .4%, transparent .9%),
    radial-gradient(circle at 81% 33%, rgba(245, 241, 235, .25) 0 .5%, transparent 1%),
    radial-gradient(circle at 55% 92%, rgba(245, 241, 235, .2) 0 .4%, transparent .8%);
  animation: spray-respira 9s ease-in-out infinite alternate;
}
@keyframes spray-respira { from { transform: scale(1); } to { transform: scale(1.08) translate(1%, -1%); } }
.contato__painel { position: relative; }
.contato__titulo { margin: 0; max-width: 15ch; font: 400 clamp(2.8rem, 7vw, 6.4rem)/1.14 var(--f-display); text-transform: uppercase; color: var(--branco); }
.contato__l1 { display: block; }
.contato__l2 { display: inline-block; margin-top: .3rem; padding: .08em .35em .18em; background: var(--papel); clip-path: var(--pincel); rotate: -2deg; }
.contato__l2 .letra { color: var(--preto); font-size: .6em; transform: none; margin: 0; }
.contato__l2 .letra::after { display: none; }
.contato__texto { max-width: 36rem; margin: 2rem 0 0; font-size: 1.15rem; color: rgba(255, 255, 255, .93); }
.contato__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-top: 2.4rem; }
.botao--papel { background: var(--papel); color: var(--preto); clip-path: none; }
.botao--papel .botao__seta { background: var(--preto); color: var(--papel); }
/* pulso (efeitos-web: botoes/botao-pulse-branco, sem o degradê prateado) */
.pulsa { animation: pulso-botao 2.2s ease-out infinite; }
@keyframes pulso-botao { 0% { box-shadow: 0 0 0 0 rgba(245, 241, 235, .6); } 70% { box-shadow: 0 0 0 24px rgba(245, 241, 235, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 241, 235, 0); } }
/* sombras deslocadas no hover (efeitos-web: botoes/botao-com-shapes-expandindo-no-hover) */
.botao-contorno {
  display: inline-flex; align-items: center; padding: 1.1rem 1.6rem 1.05rem;
  border: 2px solid var(--papel); color: var(--papel); text-decoration: none;
  font: 700 1.08rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .07em;
  transition: background-color .3s, color .3s, box-shadow .6s var(--ease-saida), translate .3s var(--ease-saida);
}
.botao-contorno:hover, .botao-contorno:focus-visible { background: var(--papel); color: var(--magenta); translate: -6px -6px; box-shadow: 6px 6px 0 rgba(16, 16, 16, .45), 12px 12px 0 rgba(16, 16, 16, .28), 18px 18px 0 rgba(16, 16, 16, .14); }
.anotacao--clara { color: var(--branco); }
.anotacao--clara .anotacao__seta path { stroke: var(--papel); }
.contato__anotacao { margin-top: 1.8rem; }
.contato__selo { position: absolute; right: var(--gutter); top: 50%; width: clamp(9rem, 15vw, 13rem); translate: 0 -50%; }
.contato__selo .selo__aro circle { fill: var(--preto); }

/* ---------- 7.13 Rodapé ---------- */
.rodape { background: var(--preto); color: var(--papel); padding: clamp(4rem, 8vw, 6rem) 0 calc(2.4rem + env(safe-area-inset-bottom, 0px)); margin-top: -1px; }
.rodape__grade { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.6rem 4rem; align-items: end; }
.rodape__chamada {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: .1em .4em;
  font: 400 clamp(3rem, 9vw, 8.4rem)/.9 var(--f-display); text-transform: uppercase; text-decoration: none; color: var(--papel);
}
.rodape__chamada .letra { color: var(--magenta-luz); font-size: .6em; }
.rodape__l1 { transition: color .35s; }
.rodape__chamada:hover .rodape__l1 { color: var(--magenta-luz); }
.rodape__seta { width: clamp(4rem, 8vw, 7rem); overflow: visible; transition: transform .45s var(--ease-saida); }
.rodape__seta path { fill: none; stroke: var(--magenta-luz); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rodape__chamada:hover .rodape__seta { transform: translateX(12px); }
.logo--claro { margin: 0; }
.logo--claro .logo__nome { color: var(--papel); }
.logo--claro .logo__assinatura { color: var(--magenta-luz); }
.rodape__assinatura { margin: .9rem 0 0; color: rgba(245, 241, 235, .65); font-size: .98rem; }
.rodape__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .8rem 1.6rem; }
.rodape__links a { font: 700 .95rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; transition: color .25s; }
.rodape__links a:hover { color: var(--magenta-luz); }
.rodape__redes { grid-column: 2; display: flex; justify-content: flex-end; gap: .8rem; }
.rodape__redes a { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border: 2px solid rgba(245, 241, 235, .35); transition: background-color .3s, border-color .3s, translate .4s var(--ease-saida); }
.rodape__redes a:hover { background: var(--magenta); border-color: var(--magenta); translate: 0 -5px; }
.rodape__redes svg { width: 1.25rem; fill: none; stroke: var(--papel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rodape__redes .cheio { fill: var(--papel); stroke: none; }
.rodape__final { grid-column: 1 / -1; margin: .6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--cinza-texto); font: 700 .85rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .08em; color: rgba(245, 241, 235, .5); }

/* ---------- 7.14 Cenas presas (só desktop com movimento) ---------- */
.rotina.cena-ativa { padding: 0 0 clamp(6rem, 10vw, 9rem); }
.rotina.cena-ativa .rotina__pista { height: 340vh; }
.rotina.cena-ativa .rotina__cena {
  position: sticky; top: 0; height: 100vh;
  grid-template-rows: 1fr auto; align-content: center; justify-items: center;
  gap: 1.5rem; padding: 6vh var(--gutter) 7vh;
}
.rotina.cena-ativa .rotina__celular { width: auto; height: min(56vh, 560px); align-self: end; }
.rotina.cena-ativa .notificacoes { position: absolute; inset: 0; display: block; width: auto; pointer-events: none; }
.rotina.cena-ativa .notificacao { position: absolute; width: 17rem; }
.rotina.cena-ativa .notificacao:not(.visivel) { opacity: 0; transform: translateY(30px) scale(.9); }
.rotina.cena-ativa .n1 { left: 9%; top: 12%; --r: -4deg; }
.rotina.cena-ativa .n2 { right: 9%; top: 10%; --r: 3deg; }
.rotina.cena-ativa .n3 { left: 5%; top: 33%; --r: 2deg; }
.rotina.cena-ativa .n4 { right: 4%; top: 31%; --r: -3deg; }
.rotina.cena-ativa .n5 { left: 13%; top: 54%; --r: -2deg; }
.rotina.cena-ativa .n6 { right: 12%; top: 52%; --r: 4deg; }

/* ---------- 8. Botão flutuante do WhatsApp ---------- */
/* efeitos-web: atualizacoes/botao-whatsapp-flutuante (adaptado: aparece depois da capa, sem selo de mensagem falsa) */
.zap {
  position: fixed; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none;
  opacity: 0; transform: translateY(24px) scale(.9); pointer-events: none;
  transition: opacity .5s var(--ease-saida), transform .5s var(--ease-saida);
}
.zap.is-visivel { opacity: 1; transform: none; pointer-events: auto; }
.zap__icone {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--preto); box-shadow: 0 10px 22px rgba(16, 16, 16, .32);
  transition: transform .3s var(--ease-saida);
}
.zap__icone svg { width: 30px; fill: var(--magenta-luz); }
.zap__icone::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--magenta-luz); animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.zap:hover .zap__icone { transform: scale(1.08) rotate(-6deg); }
.zap__balao {
  padding: .6rem .9rem .55rem;
  background: var(--papel); color: var(--preto); border: 2px solid var(--preto);
  font: 700 .88rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  opacity: 0; transform: translateX(14px); transition: opacity .45s, transform .45s var(--ease-saida);
}
.zap__balao.is-visivel { opacity: 1; transform: none; }

/* ---------- 9. Responsivo ---------- */
@media (max-width: 1240px) {
  .capa__bilhete { display: none; }
}

@media (max-width: 1200px) {
  .menu__links { display: none; }
  .menu__abrir { display: inline-block; }
  .menu .botao-pincel { margin-left: auto; }
}

@media (max-width: 1024px) {
  .blur-base { display: none; }
  .capa__conteudo > * { max-width: min(40rem, 54vw); }
}

/* Celular: texto em cima, foto vertical embaixo emendada na cor da parede */
@media (max-width: 760px) {
  :root { --faixa-h: 30px; --menu-h: 64px; }
  body { font-size: 1.05rem; }
  .menu .botao-pincel { display: none; }

  .capa {
    display: block;
    min-height: 0;
    padding: calc(var(--topo-h) + 1.4rem) var(--gutter) calc(150vw * .6);
  }
  .capa__fundo { inset: auto 0 0 0; height: 150vw; transform: none; }
  .capa__fundo img {
    object-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  }
  .capa::before { display: none; }
  .capa::after { background: radial-gradient(130% 80% at 50% 70%, transparent 60%, rgba(16, 16, 16, .25) 100%); }
  .capa__luz, .capa__marca, .capa__role { display: none; }

  .capa__conteudo > * { max-width: none; }
  .capa__etiqueta { font-size: .86rem; margin-bottom: 1.2rem; }
  .capa__l1 { font-size: clamp(1.55rem, 7.3vw, 2.5rem); }
  .capa__l2 { font-size: clamp(2.7rem, 13.8vw, 4.6rem); }
  .capa__l3 { font-size: clamp(1.95rem, 9.2vw, 3.1rem); }
  .capa__subtitulo { max-width: 30rem !important; margin-top: 1.6rem; font-size: 1.02rem; }
  .capa__botoes { margin-top: 1.7rem; gap: 1rem 1.6rem; }
  .botao { padding: 1.1rem 4.1rem 1.05rem 1.35rem; font-size: 1.02rem; }
  .capa__anotacao { margin: 1.4rem 0 0 4rem; font-size: .98rem; }
  .capa__anotacao .anotacao__seta { left: -3.8rem; top: -2rem; width: 3.4rem; }
  .capa__selo { right: 5%; bottom: calc(150vw * .07); width: 6.4rem; }
}

/* =========================================================
   8.1 PÁGINA CONTEÚDO GRÁTIS
   ========================================================= */
.conteudo-capa {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--topo-h) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
  background: var(--papel);
}
.conteudo-capa__marca {
  position: absolute; right: -2vw; bottom: -2vw; z-index: -1; margin: 0;
  font: 400 clamp(7rem, 24vw, 22rem)/.8 var(--f-display); text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 2px rgba(16, 16, 16, .12);
}
.conteudo-capa__estrela {
  position: absolute; right: 8%; top: 18%; z-index: -1; width: clamp(9rem, 22vw, 20rem);
  fill: none; stroke: var(--magenta); stroke-width: 9; stroke-linejoin: round; opacity: .85;
  filter: drop-shadow(0 0 14px rgba(180, 3, 77, .35));
  animation: girar 50s linear infinite;
}
.conteudo-capa .etiqueta { margin-bottom: 1.4rem; }
.conteudo-capa__titulo { font-size: clamp(2.8rem, 6.6vw, 6rem); max-width: 14ch; }
.conteudo-capa__subtitulo { max-width: 36rem; margin: 2rem 0 0; font-size: 1.15rem; }

.vitrine { background: var(--papel); padding: clamp(2rem, 4vw, 3rem) 0 clamp(6rem, 10vw, 9rem); }
.vitrine__titulo { margin-bottom: clamp(2rem, 4vw, 3rem); }
.vitrine__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.vitrine__grade .foco-item { transition: filter .5s, scale .5s var(--ease-saida), translate .6s var(--ease-saida), rotate .6s var(--ease-saida); }
.vitrine__grade li:nth-child(odd) { rotate: -1.2deg; }
.vitrine__grade li:nth-child(even) { rotate: 1deg; }
.post-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 1; padding: 1.6rem; text-decoration: none;
  box-shadow: 0 16px 30px rgba(16, 16, 16, .16);
}
.post-card--preto { background: radial-gradient(circle at 80% 15%, rgba(214, 36, 106, .45), transparent 45%), var(--preto); color: var(--papel); }
.post-card--magenta { background: radial-gradient(circle at 15% 85%, rgba(16, 16, 16, .3), transparent 45%), var(--magenta); color: var(--branco); }
.post-card--papel { background: var(--papel-claro); color: var(--preto); border: 1px solid var(--papel-sombra); }
.post-card__num { font: 400 1.3rem/1 var(--f-display); color: var(--magenta-luz); }
.post-card--magenta .post-card__num { color: var(--papel); }
.post-card--papel .post-card__num { color: var(--magenta); }
.post-card__titulo { font: 400 clamp(1.6rem, 2.4vw, 2.3rem)/1.14 var(--f-display); text-transform: uppercase; max-width: 12ch; }
.post-card__seta { align-self: flex-end; width: 3rem; height: 3rem; display: grid; place-items: center; border: 2px solid currentColor; font: 700 1.3rem/1 var(--f-texto); transition: background-color .3s, color .3s, translate .4s var(--ease-saida); }
.post-card:hover .post-card__seta { background: var(--magenta); border-color: var(--magenta); color: var(--branco); translate: 6px 0; }
.post-card--magenta:hover .post-card__seta { background: var(--preto); border-color: var(--preto); }

.escrevo { position: relative; background: var(--preto); color: var(--papel); padding: clamp(6rem, 10vw, 8rem) 0 clamp(5rem, 9vw, 7rem); }
.escrevo .rasgo--topo { fill: var(--papel); }
.escrevo__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.6rem); }
.escrevo__card { padding: 2.4rem 2.2rem; }
.escrevo__card h3 { margin: 0 0 .8rem; font: 400 clamp(1.9rem, 3vw, 2.6rem)/1 var(--f-display); text-transform: uppercase; }
.escrevo__card p { margin: 0 0 1.8rem; max-width: 30rem; font-size: 1.1rem; }
.escrevo__card--substack { background: var(--magenta); color: var(--branco); rotate: -1deg; }
.escrevo__card--linkedin { color: var(--preto); }

.chamada-final { position: relative; background: var(--papel); padding: clamp(5rem, 9vw, 8rem) 0 clamp(7rem, 11vw, 9rem); }
.chamada-final .rasgo--base { fill: var(--preto); }
.chamada-final__titulo { font-size: clamp(2.8rem, 6.6vw, 6rem); max-width: 14ch; }

/* =========================================================
   8.2 PÁGINA POLÍTICA DE PRIVACIDADE
   ========================================================= */
.texto-legal { position: relative; background: var(--papel); padding: calc(var(--topo-h) + clamp(3rem, 7vw, 5rem)) 0 clamp(7rem, 11vw, 9rem); }
.texto-legal .rasgo--base { fill: var(--preto); }
.texto-legal__topo { margin-bottom: clamp(2rem, 4vw, 3rem); }
.texto-legal__topo .titulo { font-size: clamp(2.8rem, 6.6vw, 6rem); }
.texto-legal__data { margin: 1.6rem 0 0; font: 700 .9rem/1 var(--f-apoio); text-transform: uppercase; letter-spacing: .1em; color: var(--cinza-texto); }
.texto-legal__corpo { max-width: 46rem; }
.texto-legal__corpo h2 { margin: 2.8rem 0 .8rem; font: 400 clamp(1.5rem, 2.4vw, 1.9rem)/1.15 var(--f-display); text-transform: uppercase; }
.texto-legal__corpo p { margin: 0 0 1rem; font-size: 1.08rem; }
.texto-legal__corpo ul { margin: 0 0 1rem; }
.texto-legal__corpo li { position: relative; padding-left: 1.4rem; margin-bottom: .6rem; font-size: 1.08rem; }
.texto-legal__corpo li::before { content: ""; position: absolute; left: 0; top: .72em; width: .7rem; height: 3px; background: var(--magenta); }
.texto-legal__corpo a { color: var(--magenta); font-weight: 700; }
.preencher { padding: .05em .35em; background: rgba(180, 3, 77, .12); color: var(--magenta); font-weight: 700; }

/* ---------- 9.1 Responsivo das seções ---------- */
@media (max-width: 1024px) {
  .numeros__lista { grid-template-columns: repeat(2, 1fr); row-gap: 2.2rem; }
  .numero:nth-child(3) { border-left: 0; }
  .duvidas__grade { grid-template-columns: 1fr; }
}

/* Sobre até 1200px: título no papel, foto vertical no meio, texto embaixo */
@media (max-width: 1200px) {
  .sobre__palco { flex-direction: column; align-items: stretch; min-height: 0; padding: clamp(4.5rem, 10vw, 6rem) 0 0; background: var(--papel); }
  .sobre__palco::before, .sobre__palco .rasgo--base { display: none; }
  .sobre__texto { display: contents; }
  .sobre__cabeca { order: 1; padding-inline: var(--gutter); margin-bottom: 1.4rem; }
  .sobre__fundo { order: 2; position: relative; inset: auto; height: min(150vw, 92vh); translate: none !important; }
  .sobre__fundo img {
    object-position: center 22%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 86%, transparent 100%);
  }
  .sobre__paragrafo, .sobre__abertura { order: 3; margin-inline: var(--gutter); }
  .sobre__paragrafo { margin-top: 1.2rem; }
  .sobre__selo { right: 5%; bottom: 12%; width: 6.8rem; }
  .sobre__texto { width: auto; }
  .sobre .titulo { font-size: clamp(2.5rem, 7vw, 4.4rem); }
  .sobre__pilares .pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .duvidas__topo { position: static; }
  .como ol { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .como__traco { display: none; }
  .passo { padding-top: 3.4rem; }
  .passo::before { top: .5rem; }
  .rodape__grade { grid-template-columns: 1fr; }
  .rodape__links, .rodape__redes { grid-column: auto; justify-content: flex-start; }
  .contato__selo { position: relative; right: auto; top: auto; translate: none; width: 8rem; margin-top: 2.6rem; }
}

@media (max-width: 760px) {
  .publico__grade { grid-template-columns: 1fr; }
  .publico__sim { order: -1; }
  .bilhete-solto, .publico__sim { padding: 2rem 1.5rem; }
  .frentes { grid-template-columns: 1fr; gap: 1.8rem; }
  .frente { padding: 1.6rem 0 0; border-left: 0; border-top: 1px solid var(--cinza-texto); }
  .frente:first-child { padding-top: 0; border-top: 0; }
  .como ol { grid-template-columns: 1fr; }
  .pilares, .sobre__pilares .pilares { grid-template-columns: 1fr; }
  .pilulas { display: none; }
  .metodo__celular { width: 46%; transform: translate(-50%, -58%) rotate(-6deg); }
  .metodo__centro { bottom: -3%; }
  .bilhete-solto, .publico__sim { rotate: 0deg; }
  .pratica__palco { height: 46rem; }
  .pratica__item { width: 14rem; margin-left: -7rem; }
  .pratica__adesivo { left: auto; right: 5%; top: .4rem; }
  .post__titulo { font-size: 1.7rem; }
  .post--valor .post__titulo { font-size: 2.1rem; }
  .rodape__chamada { font-size: clamp(2.6rem, 14vw, 4rem); }
  .zap__balao { display: none; } /* no celular fica só o ícone, para não cobrir o texto */
  /* entradas laterais viram entradas de baixo, para nada passar da largura da tela antes de aparecer */
  .js .revela--esq, .js .revela--dir { transform: translateY(50px); }
  .vitrine__grade, .escrevo__grade { grid-template-columns: 1fr; }
  .vitrine__grade li { rotate: 0deg !important; }
  .escrevo__card { padding: 2rem 1.5rem; rotate: 0deg; }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .vitrine__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 10. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .grao { display: none; }
}