/* Atualizações da página da autora — preparação para a futura HOME (28/09). */

/* Nome grande do herói ("VIVIANE"/"LEITE") — animação de entrada.
   01/10 a revisão mobile (feita por outro agente, "como visitante") achou
   "VIVIANE" e "LEITE" cortados na borda da tela ao abrir a página no
   celular. Causa: author-page.css anima os dois (".author-name-first"/
   ".author-name-last") por 30s (@keyframes author-viviane-linear/
   author-leite-linear: entram de translateX(±22vw) até translateX(0), as duas
   palavras se encontrando devagar). No desktop é o efeito "cinematográfico"
   desenhado de propósito; no celular, a palavra já ocupa quase a tela toda
   em repouso (centralizada, ~12vw de folga de cada lado), então 22vw de
   deslocamento a empurra para fora e ".author-hero" (overflow:hidden) corta.
   Naquele dia eu desliguei a animação inteira (animation:none); a usuária
   pediu a animação de volta (02/10). Então: o ORIGINAL volta valendo em tudo
   que é ≥601px (nada aqui sobrescreve), e só em celular (≤600px, onde o
   layout centralizado começa) uso uma versão com deslocamento de 8vw — cabe
   na folga em qualquer largura de celular (conferido de 320 a 600px) — e
   duração curta (2.8s), porque 8vw em 30s seria um movimento invisível.
   Mantém o "author-title-focus" (fade + desfoque), que é o que faz o texto
   aparecer (a regra-base deixa opacity:0 até ele rodar). 08/10: a usuária
   pediu que a animação do herói toque em TODOS os aparelhos; quem tem
   "reduzir movimento" ligado (prefers-reduced-motion) antes via o herói parado.
   Essas regras foram retiradas de author-page.css (ver o comentário lá): a
   animação de entrada toca para todos e só ficam desligados os movimentos que
   repetem sem parar. */
@media (max-width: 600px) {
  .author-name-first {
    animation: author-viviane-celular 2.8s cubic-bezier(.16, 1, .3, 1) forwards,
               author-title-focus 1.15s ease-out forwards;
  }
  .author-name-last {
    animation: author-leite-celular 2.8s cubic-bezier(.16, 1, .3, 1) forwards,
               author-title-focus 1.15s ease-out forwards;
  }
}
@keyframes author-viviane-celular {
  from { transform: translateX(8vw) scale(.985); }
  to { transform: translateX(0) scale(1); }
}
@keyframes author-leite-celular {
  from { transform: translateX(-8vw) scale(.985); }
  to { transform: translateX(0) scale(1); }
}

/* 16/10 — nome do herói (pedido: "o 'Leite' passando pela frente dela, sem a segunda
   camada de texto sem preenchimento, e o 'Viviane' com uma transparência pequena no
   rosto dela — veja se consegue remover isso").
   Em computador e tablet (≥601px) o nome tinha DUAS camadas: o texto cheio ATRÁS da
   foto (o h1 .author-name-bg, z-index 1) e, POR CIMA da foto, uma cópia só de contorno
   (.author-name-front, z-index 5: "Leite" com traço de 2px e "Viviane" com traço fino
   a 20% de opacidade). O contorno do "Viviane" cruzava o rosto — era a "transparência".
   Agora:
   • a camada de contorno foi retirada (também do HTML);
   • o h1 deixa de ser um bloco de empilhamento único (z-index:auto, sem transform), e
     cada palavra ganha o seu próprio nível: "Viviane" continua ATRÁS da foto (z-index 1)
     e o próprio "Leite" — o mesmo texto, tamanho e animação de 30s de sempre — sobe para
     a FRENTE dela (z-index 5), cheio e opaco (#653e5e = o roxo do nome a 92% sobre o
     rosa, só que sem transparência);
   • a cabeça dela fica sempre na frente do "Leite": uma 2ª cópia da foto
     (.author-hero-person-head — mesma classe, então mesma posição, entrada e
     "respiração"), recortada só na cabeça e no pescoço (do topo até logo abaixo do
     queixo = 22,6% da altura do PNG), fica por cima dele. Em tela larga o "Leite" nem
     chega perto do rosto; em janela mais alta/estreita ele passaria sobre o queixo e,
     assim, some atrás da cabeça em vez de cobri-la.
   Celular (≤600px): o nome é centralizado ACIMA da cabeça e não toca nela — nada muda ali. */
@media (min-width: 601px) {
  .author-page .author-hero h1.author-name-bg { z-index: auto; transform: none; }
  .author-page .author-name-first { position: relative; z-index: 1; }
  .author-page .author-name-last { position: relative; z-index: 5; color: #653e5e; }
  .author-page .author-hero-person-head { z-index: 6; }
  .author-page .author-hero-person-head img {
    -webkit-clip-path: inset(0 0 77.4% 0);
    clip-path: inset(0 0 77.4% 0);
    filter: none;
    animation: author-photo-presence-head 8s 1.35s ease-in-out infinite alternate;
  }
  /* o reflexo de lente continua acima de tudo, como antes da cópia da cabeça existir */
  .author-page .author-lens-flare { z-index: 7; }
}
@media (max-width: 600px) {
  .author-page .author-hero-person-head { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .author-page .author-hero-person-head img { animation: none; }
}
@keyframes author-photo-presence-head {
  from { transform: scale(1); }
  to { transform: scale(1.006); }
}

/* 16/10 — duração do movimento do nome ("Viviane" e "Leite" deslizando até o lugar): 45 segundos (pedido da usuária;
   eram 30 s, o valor original de author-page.css). Vale em computador e tablet (≥601px). O celular (≤600px) segue com a
   versão curta de 2,8 s: lá o deslocamento é de só 8vw, e em 45 s o nome ficaria praticamente parado e torto. O reflexo
   de lente, que no original é "sincronizado" com o nome (os mesmos 30 s), acompanha: 45 s. Os 1,15 s de fade-in do
   nome, a entrada da foto/cartão (até ~2,4 s) e a "respiração" da foto (8 s) não mudam. */
@media (min-width: 601px) {
  .author-name-first {
    animation: author-viviane-linear 45s linear forwards,
               author-title-focus 1.15s ease-out forwards;
  }
  .author-name-last {
    animation: author-leite-linear 45s linear forwards,
               author-title-focus 1.15s ease-out forwards;
  }
  .author-lens-flare {
    animation: author-flare-linear 45s linear forwards,
               author-flare-fade 45s linear forwards;
  }
}

/* CORREÇÃO — bug de contraste já existente nos arquivos originais.
   author-page.css define ".author-page a { color: inherit }" (2 seletores:
   classe + elemento), que tem mais especificidade que ".home-button { color:#fff }"
   e ".home-button-outline { color:var(--plum) }" (1 classe só cada) e vence,
   herdando o cinza-escuro do body. Isso deixava os botões simples ilegíveis
   (texto escuro sobre fundo roxo escuro). Repetimos aqui, com uma classe a
   mais, só as cores que o próprio author-home.css já definia — sem inventar
   cor nova — e nessa ordem, para não atropelar ".universe-copy .home-button"
   (fundo amarelo, texto escuro), que já tinha especificidade suficiente e
   nunca teve esse bug. */
.author-page .home-button { color: #fff; }
.author-page .home-button-outline { color: var(--plum); }
.author-page .universe-copy .home-button { color: #173f42; }

/* CORREÇÃO — logo do cabeçalho "estourada". O script global troca o texto da
   marca por uma logo (classe .site-header-brand), mas dentro do grid do
   cabeçalho (.home-nav) o item esticava para preencher a coluna inteira
   (1fr), alongando o "cartão" roxo atrás da logo bem além do tamanho dela. */
.home-nav .home-brand {
  justify-self: start;
  width: fit-content;
}

/* Cabeçalho — os links de navegação tinham tamanho, espaçamento, peso e
   cor diferentes dos mesmos links no cabeçalho da página do livro. Medi o
   resultado final (getComputedStyle) na página do livro, porque o CSS de
   lá tem várias regras sobrepostas para ".site-header nav" e só a última
   é a que realmente vale: peso normal — não negrito —, cor #42354d (o
   --ink de lá; usei o valor travado em texto pelo mesmo motivo do --plum)
   e um espaçamento que cresce com a largura da tela até um teto de 25px.
   A estrutura em si (grid de 3 colunas) é própria desta página e continua.
   01/10: remedido o font-size — a página do livro está em 16px agora (não
   mais 18px; o CSS dela mudou desde a primeira medição em 28/09). */
.home-nav nav {
  gap: clamp(18px, 1.7vw, 25px);
  font-size: 16px;
  font-weight: 400;
}
.home-nav nav a {
  color: #42354d;
}
.home-nav nav a:after {
  background: #ef827c;
}
.author-home .home-nav {
  border-bottom-color: rgba(66, 53, 77, .16);
}

/* 01/10 — dois elementos do cabeçalho da página do livro, trazidos para cá
   a pedido: o selo "Clube de Cartas" (aponta para a seção correspondente
   na página do livro, já que esta página não tem o próprio bloco do
   Clube) e o botão vermelho de compra na Amazon, no lugar de onde ficava
   o botão "Autora ou Livro" (removido a pedido). Valores exatos da página
   do livro (".site-club-link", ".site-club-icon", ".site-presale-cta"),
   só com "justify-self:end" a mais no botão vermelho — lá o cabeçalho usa
   flex com justify-content:space-between; aqui é grid de 3 colunas, então
   isso é o que mantém o botão encostado à direita, igual ao que o
   ".home-switch" removido já fazia. */
.home-nav nav .site-club-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(201, 31, 77, .2);
  border-radius: 999px;
  color: #7a2549;
  background: #fde7eb;
  font-weight: 800;
}
.home-nav nav .site-club-link:after {
  display: none;
  content: none;
}
.home-nav .site-club-icon {
  font-size: 16px;
  line-height: 1;
}
.home-nav .site-presale-cta {
  justify-self: end;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 9px;
  color: #fff;
  background: #c91f4d;
  box-shadow: 4px 4px 0 #f6d368;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.home-nav .site-presale-cta:hover,
.home-nav .site-presale-cta:focus-visible {
  color: #fff;
  background: #a91740;
  outline: 2px solid rgba(201, 31, 77, .28);
  outline-offset: 3px;
  transform: translateY(-2px);
  box-shadow: 5px 6px 0 #f6d368;
}

@media (max-width: 680px) {
  .home-nav nav .site-club-link { min-height: 32px; padding: 5px 9px; }
}

/* Confete pastel — mesmo elemento, mesmas regras e o mesmo @keyframes já
   usados na página do livro (index-CIyGdv_G.css), copiados sem alteração. */
.pastel-confetti { z-index: 24; pointer-events: none; position: fixed; inset: 0; overflow: hidden; }
.pastel-confetti i {
  opacity: 0;
  border-radius: 50%;
  animation: 14s linear infinite pastelFall;
  position: absolute;
  top: -16px;
  box-shadow: 0 1px 3px #48364d14;
}
@keyframes pastelFall {
  0% { opacity: 0; transform: translateY(-4vh) rotate(0); }
  9% { opacity: .62; }
  82% { opacity: .55; }
  to { opacity: 0; transform: translate(45px, 106vh) rotate(220deg); }
}
@media (max-width: 680px) {
  .pastel-confetti i:nth-child(2n) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pastel-confetti { display: none; }
}

/* Bloco 1 — o retângulo do texto (.author-hero-copy) vem até a foto, que
   continua na posição original (não mexemos nela, para não atrapalhar a
   leitura do nome "VIVIANE LEITE" ao fundo). O retângulo já tem z-index
   maior que a foto, então a perna/pé dela some atrás dele na sobreposição. */
@media (min-width: 901px) {
  .author-hero-copy { left: 27vw; }
}

/* Bloco 1 — texto legível "Autora de O Importante É Como Você Se Vê". */
.author-hero-tag {
  margin: 0 0 20px;
  color: #422b43;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.4;
}
.author-hero-tag strong { color: #5c375d; }

/* Bloco 1 — mockup do livro na parte lisa e clara do herói, à esquerda
   (a mesma área onde ficava o retângulo antes dele se mover para perto da foto).
   Tamanho maior (a pedido, porque parecia "solto") e posição encostada ao
   lado do cartão (.author-hero-copy), sem sobrepor: a primeira versão deixava
   a ponta do livro por trás do cartão, mas ele cobria o livro (o cartão tem
   z-index:2, maior que o z-index:1 daqui) — ver a regra de ≥901px abaixo. */
.author-hero-book {
  position: absolute;
  z-index: 1;
  left: 4vw;
  top: 40%;
  width: clamp(130px, 11vw, 175px);
  transform: rotate(-6deg);
  filter: drop-shadow(0 20px 22px rgba(72, 42, 65, .25));
  pointer-events: none;
}
.author-hero-book img { width: 100%; height: auto; display: block; }

/* 02/10 — a usuária pediu o livro um pouco mais para a esquerda, para o
   cartão (.author-hero-copy) não cobrir mais a ponta dele. Em vez de só
   trocar o "left" (que dependia da largura do livro e do cartão — os dois
   mudam com a tela, e em ~900-1100px o livro tem largura mínima de 150px e
   voltava a encostar), ancorei pela direita: a borda direita do livro fica
   sempre 44px antes da borda esquerda do cartão (que é left:27vw), seja qual
   for a largura. Os 44px já descontam a inclinação (-8°, que empurra o canto
   inferior direito do livro ~17px para fora da caixa) e sobram ~25px de
   respiro visível entre o livro e o cartão. */
@media (min-width: 901px) {
  .author-hero-book {
    left: auto;
    right: calc(100% - 27vw + 44px);
    top: 41%;
    width: clamp(150px, 15.5vw, 240px);
    transform: rotate(-8deg);
  }
}
/* 08/10 — tablet (601–900px): o livro ficava no canto de cima à esquerda e
   cobria o começo do nome ("VIVIANE" aparecia como "VIANE"), encostava no
   cabeçalho e, nas telas mais estreitas, na cabeça da autora. Foi para o lado
   direito, abaixo do nome e acima da assinatura (área livre da foto), inclinado
   para o mesmo lado do celular. A largura cresce de 110px até 150px (o mesmo
   tamanho mínimo do computador). Medido de 601 a 900px: nenhum ponto da foto, do
   nome, do cabeçalho, do cartão ou da assinatura chega a tocar o livro.
   (O ≤600px é refeito no bloco do celular, mais abaixo.) */
@media (max-width: 900px) {
  .author-hero-book {
    left: auto;
    right: 5vw;
    top: 42%;
    width: clamp(110px, 16.7vw, 150px);
    transform: rotate(7deg);
  }
}
/* 09/10 — divisa creme/rosa do topo no CELULAR. Ela ficava a 31% da altura do herói
   (author-page.css) e, em celular alto (herói de ~740 a ~930px: quase todos), caía no
   meio da frase manuscrita "Escrever. Criar. Maravilhar-se." — a 1ª linha no creme e a
   2ª no rosa. Agora a divisa (e o fio fino que a acompanha, ::before) fica logo abaixo do
   nome: o nome termina em 82px + 1,44 × o tamanho da letra (clamp(69px,21vw,88px), o
   mesmo do nome) e sobram 14px de respiro. Sempre acima do topo da frase (230px), então a
   frase fica inteira no rosa, qualquer que seja a altura da tela. */
@media (max-width: 600px) {
  .author-hero {
    --hero-seam: calc(82px + 1.44 * clamp(69px, 21vw, 88px) + 14px);
    background: linear-gradient(180deg, #f8eee7 0 var(--hero-seam), #e3a0a2 var(--hero-seam) 100%);
  }
  .author-hero::before { inset: var(--hero-seam) 0 auto; }
}
/* 08/10 — herói no CELULAR (≤600px). A usuária apontou duas coisas: a autora
   ficava "sentada no ar" (o cartão branco .author-hero-copy ia até o pé da tela,
   na largura toda, ~35px abaixo do quadril dela, então ela não apoiava em nada)
   e o livro não aparecia (display:none logo aqui).
   Agora segue o desenho do computador e do tablet: o cartão fica no canto
   inferior esquerdo, mais estreito, com a borda de cima logo sob o quadril da
   autora — ela "senta" no cartão (que já tem z-index maior que o da foto e
   esconde a parte de baixo da perna) e a perna com o sapato sai pela direita
   dele. O livro volta na área livre à direita da foto, abaixo da assinatura
   "Escrever. Criar. Maravilhar-se.".
   O encaixe depende de duas medidas que mudam com a tela, então as duas saem da
   mesma conta (sem JavaScript):
   • altura da foto = a de antes (54% da altura da tela, entre 375 e 470px), mas
     nunca maior que 111% da largura: assim a foto inteira cabe na tela (antes a
     ponta do sapato era cortada) e ela é centralizada (left:50%);
   • a parte de baixo do quadril dela fica a ~76% da altura do PNG; a borda de
     cima do cartão tem que ficar um pouco acima disso (a 73,5%: o cartão
     esconde ~9px da curva do quadril e ela fica apoiada nele). Distância da
     foto até o pé do herói = 18px (pé do cartão) + altura do cartão − 26,5% da
     altura da foto.
   --hero-card-h é a altura MÍNIMA do cartão (208px): se o texto precisar de mais
   (telas estreitas, letra grande), o cartão cresce para cima e cobre só um pouco
   mais da perna, sem abrir vão. Cada conta aparece duas vezes: a primeira com vh
   para navegador sem svh. */
@media (max-width: 600px) {
  .author-hero { --hero-card-h: 208px; }
  .author-hero-person {
    left: 50%;
    height: min(clamp(375px, 54vh, 470px), 111vw);
    height: min(clamp(375px, 54svh, 470px), 111vw);
    bottom: calc(18px + var(--hero-card-h) - .265 * min(clamp(375px, 54vh, 470px), 111vw));
    bottom: calc(18px + var(--hero-card-h) - .265 * min(clamp(375px, 54svh, 470px), 111vw));
  }
  /* a "sombra do chão" acompanha o pé da foto (antes ficava 10px abaixo dele) */
  .author-stage-ground {
    left: 50%;
    bottom: calc(8px + var(--hero-card-h) - .265 * min(clamp(375px, 54vh, 470px), 111vw));
    bottom: calc(8px + var(--hero-card-h) - .265 * min(clamp(375px, 54svh, 470px), 111vw));
  }
  .author-hero-copy {
    left: 18px;
    right: auto;
    width: min(66vw, 300px);
    min-height: var(--hero-card-h);
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
  }
  .author-hero-copy .author-hero-tag { text-wrap: balance; }
  /* o botão acompanha a largura menor do cartão (o texto "Conheça o livro" tem
     que caber em uma linha até em 320px) e fica sempre colado na base dele */
  .author-hero-copy .author-button {
    margin-top: auto;
    padding: 10px 12px;
    font-size: clamp(14px, 4.3vw, 16px);
    letter-spacing: .2px;
  }
  /* livro: canto direito, logo abaixo da assinatura. Em tela baixa e estreita
     (o herói tem no mínimo 700px) a foto sobe e o joelho/coxa dela chegaria na
     quina de baixo do livro; por isso a largura também é limitada por uma
     conta (medida com a foto, de 320 a 600px de largura e de 568 a 932px de
     altura: nenhum ponto da foto chega a 4px do livro). Nas telas comuns
     (≥ ~780px de altura) vale o tamanho cheio, no máximo 138px (09/10: era
     124px; a conta não mudou, só o teto e o 31vw). */
  .author-hero-book {
    left: auto;
    right: 22px;
    top: 318px;
    width: min(31vw, 138px);
    width: min(31vw, 138px, calc(25vw + .3 * max(700px, 100svh) - 219px));
    transform: rotate(7deg);
  }
}
/* de 320 a 479px a quina de baixo do livro também chegaria no cartão branco quando a tela é
   baixa (ex.: 430x700): a altura do livro (1,57 x a largura) tem que parar 4px acima da borda
   de cima do cartão (700px - 18px - 208px = 474px, com o topo do livro em 318px). */
@media (max-width: 479px) {
  .author-hero-book {
    width: min(31vw, 138px, calc(25vw + .3 * max(700px, 100svh) - 219px), calc((max(700px, 100svh) - 548px) / 1.57));
  }
}

/* 09/10 — destaque do livro no topo (pedido: "um pouco mais de destaque, sem
   quebrar a estética atual"). Duas mudanças pequenas, as duas já existentes na
   própria página: (1) o livro cresce ~20% onde há espaço (computador: 150–240px,
   antes 150–200px; celular: até 138px, antes 124px — nas telas baixas continua
   limitado pela conta acima); (2) atrás dele entra o "sol" amarelo (#efbd5d), o
   mesmo disco chapado que fica atrás do livro na seção "O livro" (.book-sun).
   A sombra passou do contêiner para a imagem, senão o disco também ganhava sombra.
   Para voltar ao visual anterior: apagar este bloco e restaurar as larguras
   (computador clamp(150px,13vw,200px); celular min(29vw,124px,…)). */
.author-hero-book { filter: none; }
.author-hero-book img { filter: drop-shadow(0 20px 22px rgba(72, 42, 65, .25)); }
.author-hero-book::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 47%;
  top: 50%;
  width: 138%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #efbd5d;
}
@media (max-width: 900px) {
  .author-hero-book img { filter: drop-shadow(0 16px 16px rgba(72, 42, 65, .25)); }
  .author-hero-book::before { left: 46%; width: 140%; }
}

/* 19/10 — BOOKTRAILER em destaque na home (entre o bloco do livro e o do projeto). Fundo no roxo escuro do rodapé
   (#402a42), vídeo grande com a mesma "sombra deslocada" rosa dos botões do site, título na fonte manuscrita dos outros
   blocos (mesmo clamp dos h2) e o texto de apoio em duas colunas abaixo do vídeo (uma coluna no celular). O vídeo só é
   baixado quando a pessoa clica em assistir (preload="none"; antes disso aparece só o cartaz .jpg). O botão redondo de
   "play" só aparece quando o JavaScript está ativo (.is-ready); sem JavaScript, valem os controles do próprio navegador. */
.home-trailer {
  position: relative;
  padding: 110px max(5vw, 24px) 120px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(ellipse 62% 52% at 50% 40%, rgba(217, 141, 145, .24), transparent 72%),
    #402a42;
}
.home-trailer h2 {
  margin: 0 0 42px;
  color: #fff;
  font-family: 'Hello Goodbye', cursive;
  font-size: clamp(58px, 6.6vw, 104px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
}
.trailer-player {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #1c1220;
  box-shadow: 14px 14px 0 rgba(217, 141, 145, .42), 0 34px 70px rgba(0, 0, 0, .38);
}
.trailer-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1c1220;
}
.trailer-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  width: 96px;
  height: 96px;
  margin: auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #603a61;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: transform .22s ease, background-color .22s ease;
}
.trailer-player.is-ready:not(.is-playing) .trailer-play { display: grid; }
.trailer-play::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 2px solid rgba(255, 253, 248, .55);
  border-radius: 50%;
  animation: trailer-pulso 2.4s ease-out infinite;
}
.trailer-play svg {
  width: 38px;
  height: 38px;
  margin-left: 5px;
  fill: currentColor;
}
.trailer-play:hover,
.trailer-play:focus-visible {
  transform: scale(1.07);
  background: #fff;
}
.trailer-play:focus-visible {
  outline: 3px solid #efbd5d;
  outline-offset: 5px;
}
@keyframes trailer-pulso {
  from { transform: scale(.92); opacity: .9; }
  to { transform: scale(1.35); opacity: 0; }
}
.trailer-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  width: min(1080px, 100%);
  margin: 54px auto 0;
  text-align: left;
}
.trailer-text p {
  margin: 0;
  color: #f0dfe8;
  font-size: 19px;
  line-height: 1.7;
}
@media (max-width: 900px) {
  .trailer-text { grid-template-columns: 1fr; gap: 22px; margin-top: 42px; }
}
@media (max-width: 620px) {
  .home-trailer { padding: 78px 22px 86px; }
  .home-trailer h2 { margin-bottom: 30px; font-size: 51px; }
  .trailer-player { border-radius: 10px; box-shadow: 8px 8px 0 rgba(217, 141, 145, .42), 0 22px 44px rgba(0, 0, 0, .35); }
  .trailer-play { width: 72px; height: 72px; }
  .trailer-play svg { width: 28px; height: 28px; margin-left: 4px; }
  .trailer-text { margin-top: 34px; }
  .trailer-text p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .trailer-play::before { animation: none; }
}

/* Bloco 3 — Projeto cultural (mesma cadência visual dos demais blocos). */
.home-project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(480px, 1.08fr) minmax(360px, .92fr);
  align-items: center;
  gap: 5vw;
  padding: 110px max(5vw, 24px);
  overflow: hidden;
  background: #f3ece0;
}
.project-visual {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 18px 280px 18px 280px;
  box-shadow: 0 28px 60px rgba(56, 82, 82, .16);
}
.project-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.project-copy { max-width: 590px; }
.project-copy h2 {
  /* mesmo tamanho de .book-copy h2/.about-copy h2/.universe-heading h2/
     .home-final h2 (regra compartilhada em author-home.css) — não inventar
     um clamp novo só para este título. */
  margin: 0 0 24px;
  color: var(--plum);
  font-family: 'Hello Goodbye', cursive;
  font-size: clamp(58px, 6.6vw, 104px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
}
.project-copy > p:not(.section-label) { font-size: 19px; line-height: 1.65; }
.project-copy em { font-style: italic; }

@media (max-width: 980px) {
  .home-project { grid-template-columns: 1fr; gap: 45px; }
  .project-visual { width: 100%; min-height: 460px; order: -1; border-radius: 18px 140px 18px 140px; }
  .project-copy { max-width: 760px; }
}

@media (max-width: 620px) {
  .home-project { padding: 78px 22px; }
  .project-visual { min-height: 340px; border-radius: 14px 90px 14px 90px; }
  .project-copy h2 { font-size: 51px; }
  .project-copy > p:not(.section-label) { font-size: 17px; }
}

/* Bloco 2 — livro impresso + e-book (tablet). O tablet tem a MESMA altura do livro: os dois usam --pair-h.
   Ficam lado a lado, com o tablet um pouco atrás do livro (z-index menor) e a capa do livro inteira à mostra.
   O selo "uma história para se olhar com carinho" fica ABAIXO dos dois, sem encostar em nenhuma capa.
   O tablet usa a versão recortada (ebook-kindle-recortado-20261002.png: o mesmo arquivo, sem as margens
   transparentes que o original tinha), então a imagem tem o tamanho do aparelho visível e "mesma altura" é
   literal. Proporções: livro 465x711 (largura = 0,654 da altura); tablet 325x417 (largura = 0,779 da altura).
   As posições horizontais vêm dessas proporções: o par fica centralizado (largura do par = 1,313 da altura;
   o tablet entra 0,12 da altura atrás do livro).
   CORREÇÃO antiga mantida: ".book-visual>img" (regra original, da capa) define left:50%/bottom:0 para QUALQUER
   <img> filho direto; aqui left/bottom/transform são redefinidos para as duas imagens. */
.author-page .book-visual {
  --pair-h: clamp(300px, 32.5vw, 520px);
  --pair-gap: 118px; /* espaço embaixo das imagens, onde fica o selo */
  min-height: calc(var(--pair-h) + var(--pair-gap) + 24px);
}

.author-page .book-visual > img {
  position: absolute;
  top: auto;
  right: auto;
  bottom: var(--pair-gap);
  width: auto;
  max-width: none;
  height: var(--pair-h);
}

.author-page .book-visual > img:not(.book-visual-ebook) {
  z-index: 3;
  left: calc(50% - .6567 * var(--pair-h));
  transform: rotate(-2deg);
}

.author-page .book-visual .book-visual-ebook {
  z-index: 2;
  left: calc(50% - .1227 * var(--pair-h));
  bottom: calc(var(--pair-gap) + .035 * var(--pair-h));
  filter: drop-shadow(0 20px 18px rgba(73, 56, 77, .28));
  transform: rotate(5deg);
}

.author-page .book-visual .book-sun {
  top: calc(-.08 * var(--pair-h));
  left: calc(50% - .74 * var(--pair-h));
  width: calc(.95 * var(--pair-h));
}

.author-page .book-visual .book-note {
  right: auto;
  bottom: 4px;
  left: 50%;
  width: max-content; /* sem isso, perto de 50% da coluna ele quebrava em 3 linhas e subia sobre o livro */
  font-size: 25px;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-2.5deg);
}

@media (max-width: 980px) {
  .author-page .book-visual { --pair-h: clamp(280px, 50vw, 470px); }
}

@media (max-width: 620px) {
  .author-page .book-visual {
    --pair-h: min(420px, calc((100vw - 28px) / 1.36));
    --pair-gap: 100px;
  }

  .author-page .book-visual .book-note { padding: 14px 16px; font-size: 20px; }
}

/* Bloco 4 — logo menor, e fundo trocado por --paper (já usado em outras
   partes do site) para não escurecer as cores da logo: a imagem tem fundo
   bege opaco e mix-blend-mode:multiply, então um fundo bege atrás dela
   (como estava, #e8dcc2) multiplicava e deixava tudo mais escuro e sujo. */
.about-brandmark {
  width: min(230px, 55%);
  background: var(--paper);
}

/* Rodapé — mesma estrutura de 3 linhas do rodapé da página do livro:
   linha 1 = marca + navegação + redes sociais (3 colunas), linha 2 = bloco
   de patrocínio (ocupando tudo), linha 3 = link "voltar ao início". Os
   nomes das classes (.footer-brand, .footer-social, .incentive-block) são
   os mesmos já usados lá; só o nome do rodapé em si continua .home-footer,
   que é o que esta página já usava. */
@media (min-width: 981px) {
  .home-footer .footer-brand { grid-column: 1; grid-row: 1; }
  .home-footer > nav { grid-column: 2; grid-row: 1; }
  .home-footer .footer-social { grid-column: 3; grid-row: 1; }
  .home-footer .incentive-block { grid-column: 1 / -1; grid-row: 2; }
  .home-footer > a { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
}

/* Largura do rodapé — o grid original (".home-footer", em author-home.css)
   é "1fr auto 1fr": a coluna do meio (nav) fica só do tamanho do próprio
   conteúdo, e a 3ª coluna (redes sociais) é larga (1fr) mas o conteúdo dela
   é curto e começa colado à esquerda da própria coluna — sobra um vão vazio
   grande do lado direito, dando a impressão de tudo "concentrado no centro".
   Copiando as proporções exatas do rodapé da página do livro
   (".full-footer", index-CIyGdv_G.css): 3 colunas com tamanho fixo entre si
   (1.2fr marca / .8fr navegação / 1fr redes sociais) e o mesmo espaçamento
   entre colunas (6vw) — assim a 3ª coluna vai até a borda direita de
   verdade, porque a própria coluna termina lá (o conteúdo dela já ocupa a
   coluna inteira, via display:grid, regra logo acima). Padding lateral
   também igualado (7vw, era 6vw). */
@media (min-width: 981px) {
  .home-footer {
    grid-template-columns: 1.2fr .8fr 1fr;
    gap: 40px 6vw;
    padding-left: max(7vw, 28px);
    padding-right: max(7vw, 28px);
  }
}

/* .full-footer nav, .footer-social — mesmas regras da página do livro. */
.home-footer nav,
.home-footer .footer-social {
  align-content: start;
  gap: 10px;
  display: grid;
}
.home-footer nav a,
.home-footer .footer-social span,
.home-footer .footer-social a {
  color: #e8e0eb;
  font-size: 18px;
}
.home-footer nav a:hover,
.home-footer .footer-social a:hover {
  color: #f6d368;
}
/* .footer-top — mesma regra (essa era a segunda que eu tinha deixado em
   13px/10px por engano: a página do livro tem uma regra só, no fim do
   CSS, que reajusta esses textos pequenos do rodapé todos para 18px). */
.home-footer > a {
  font-size: 18px;
}
.home-footer .incentive-block {
  background: #fffaf0d1;
  border-radius: 4px;
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 2.18fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  margin-top: 6px;
}
.home-footer .incentive-block > p {
  min-height: 170px;
  margin: 0;
  padding: 30px 34px;
  border-right: 1px solid #5b315f29;
  color: #5b315f;
  font-size: 18px;
  line-height: 1.55;
  display: flex;
  align-items: center;
}
.home-footer .incentive-logos {
  display: grid;
  grid-template-columns: 1.15fr .95fr 1.3fr;
  place-items: center;
  gap: 28px;
  width: 100%;
  min-height: 170px;
  padding: 30px 36px;
  background: none;
}
.home-footer .incentive-logo-item {
  display: grid;
  grid-template-rows: 24px minmax(76px, 1fr);
  place-items: center;
  width: 100%;
  min-width: 0;
}
.home-footer .logo-caption {
  color: #5b315f;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.home-footer .incentive-logo-item img {
  width: 100%;
  max-height: 108px;
  object-fit: contain;
}
/* cada logo tem uma altura própria (mesmos valores do rodapé da página do
   livro) porque as três imagens têm proporções diferentes entre si. */
.home-footer .incentive-logo-item:nth-child(2) img { max-height: 88px; }
.home-footer .incentive-logo-item:nth-child(3) img { max-height: 116px; }

@media (max-width: 680px) {
  .home-footer .incentive-block { grid-template-columns: 1fr; }
  .home-footer .incentive-block > p {
    min-height: auto;
    padding: 25px 28px;
    border-right: 0;
    border-bottom: 1px solid #5b315f29;
    justify-content: center;
    text-align: center;
  }
  .home-footer .incentive-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-height: 136px;
    padding: 14px 10px 18px;
  }
  .home-footer .incentive-logo-item { grid-template-rows: 22px minmax(72px, 1fr); }
  .home-footer .logo-caption { letter-spacing: .06em; font-size: 10px; }
  .home-footer .incentive-logo-item img { max-height: 76px; }
}

/* ================================================================
   Identidade tipográfica da página do livro, aplicada aos padrões de
   seção que se repetem nas duas páginas (título H2, etiqueta de seção,
   subtítulo, botão). Valores medidos por getComputedStyle na página do
   livro rodando (não só lidos do CSS-fonte, pelo motivo já registrado
   acima sobre regras sobrepostas). Não mexi no herói (.author-name-bg,
   .author-kicker, .author-hero-tag): lá a página do livro também tem um
   tratamento só dela (título grande em Hello Goodbye em vez do nome
   gigante em bloco desta página) — não é um padrão repetido para copiar,
   é o próprio herói de cada página sendo diferente por design.
   ================================================================ */

/* Títulos de seção (H2): a família, peso e altura de linha já batiam;
   letter-spacing na página do livro é "normal" (0), não 1px, em todos os
   títulos de seção medidos (#why-title, #diary-title, #school-project-title,
   #testimonials-title, #newsletter-title). Aplicado também a .project-copy h2
   (que antes repetia color:var(--plum)/letter-spacing:1px por conta própria). */
.book-copy h2,
.project-copy h2,
.about-copy h2,
.universe-heading h2,
.home-final h2 {
  letter-spacing: normal;
}
/* Cor: #5b315f é o --plum exato da página do livro (o --plum desta página,
   var(--plum), é outro tom, #603a61 — por isso valor travado em texto).
   .universe-heading h2 fica de fora: tem cor branca própria (texto claro
   sobre fundo escuro), regra mais específica que continua valendo. */
.book-copy h2,
.project-copy h2,
.about-copy h2,
.home-final h2 {
  color: #5b315f;
}

/* Etiqueta de seção (.section-label / .eyebrow): a página do livro usa
   Nunito 18px/700 (não 12px/950) para o mesmo papel visual; cor #ef827c
   travada em texto (o --coral desta página, var(--coral), é outro tom). */
.section-label {
  color: #ef827c;
  font-size: 18px;
  font-weight: 700;
}

/* Subtítulo do livro ("Um diário para descobrir seu valor."): na página do
   livro (.hero-subtitle, mesmo texto) é a mesma fonte cursiva do título
   (Hello Goodbye), peso normal e tom escuro — não negrito sans-serif
   colorido como estava aqui.
   Seletor com "p" (não só duas classes): ".book-copy>p:not(.section-label)"
   em author-home.css tem especificidade maior (2 classes + 1 elemento) que
   ".book-copy .section-subtitle" (2 classes) e vencia o font-size/line-height
   (a cor/fonte/peso passavam porque são propriedades que aquela regra não
   define — cascata é por propriedade, não por regra inteira). Igualando a
   especificidade com "p.section-subtitle" para esta regra, mais recente no
   arquivo, valer de verdade. */
.book-copy p.section-subtitle {
  color: #42354d;
  font-family: 'Hello Goodbye', cursive;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
}

/* Nome do livro citado dentro de texto corrido (".book-name"): classe que
   já existe no site (definida em project-page.css, usada na página
   /projeto/ em 3 lugares — <span>, <em> e <strong> — sempre com essa
   mesma classe por cima) para destacar o título sempre que ele é citado
   no meio de uma frase, com a mesma fonte cursiva dos títulos de seção.
   Reaproveitada aqui sem alteração, exceto a cor: lá é var(--plum), que
   nesse arquivo (project-page.css) é #6a3d72 — um terceiro tom de plum,
   diferente tanto do desta página (#603a61) quanto do da página do livro
   (#5b315f). Usei o tom da página do livro (valor travado em texto),
   para ficar consistente com o resto da tipografia já ajustada aqui. */
.book-name {
  color: #5b315f;
  font-family: 'Hello Goodbye', cursive;
  font-size: 1.18em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}
/* ".author-hero-tag strong{color:#5c375d}" (regra do Bloco 1, acima) tem
   mais especificidade que ".book-name" sozinha e vencia só a cor (quase
   igual, mas não idêntica) nessa instância. Igualando aqui. */
.author-hero-tag strong.book-name {
  color: #5b315f;
}

/* Botões (.home-button): a página do livro usa peso 700 no texto do botão
   principal, não 900.
   Tamanho: esta página nunca definia um font-size base para <body> (ficava
   no padrão do navegador, 16px) — a página do livro define 18px. A maioria
   dos textos aqui já tinha tamanho explícito próprio, então não se notava,
   mas elementos sem tamanho próprio (como o texto do botão) ficavam em
   16px em vez de 18px. Corrigido na base, não só no botão. */
body {
  font-size: 18px;
}
.home-button {
  font-weight: 700;
}

/* 09/10 — COMPRA e PÁGINA DO LIVRO mais atraentes (computador e celular).
   Botão vermelho "Garanta seu exemplar" (mesmo link da Amazon do cabeçalho) no bloco
   do livro e no fecho da página, ao lado do "Conheça o livro". Cores copiadas do botão
   vermelho do cabeçalho (.site-presale-cta): fundo #c91f4d, hover #a91740 e sombra
   amarela #f6d368 — no formato dos botões do corpo da página (quadrado, sombra
   deslocada). O texto é o mesmo do cabeçalho; a seta ↗ é a dos links que saem do site. */
.author-page .home-button.home-button-buy {
  color: #fff;
  background: #c91f4d;
  box-shadow: 8px 8px 0 #f6d368;
}
.author-page .home-button.home-button-buy:hover,
.author-page .home-button.home-button-buy:focus-visible {
  color: #fff;
  background: #a91740;
  box-shadow: 11px 11px 0 #f6d368;
}
.book-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 22px;
}
@media (max-width: 620px) {
  .book-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .book-actions .home-button { width: 100%; }
}

/* 09/10 — celular: "Meu universo criativo" mais curto.
   • a faixa dos 4 temas (livros / escrita à mão / arte / experiências criativas) fica
     ESCONDIDA no celular (a usuária escolheu): a frase logo acima já cita as mesmas
     quatro palavras e a faixa é só enfeite (aria-hidden, sem link). De 621px para cima
     continua aparecendo (2×2 até 980px, 4 colunas acima). Não deixa vão: sem a faixa,
     o bloco das postagens sobe para a linha dela na grade da seção.
   • o botão do Instagram da seção "Sobre a autora" cabia em duas linhas: agora uma
     só (a letra diminui conforme a largura da tela, de 12,5px em 320px até 17px;
     o texto é o mesmo). As postagens do blog em 2×2 estão em autora-blog-recentes. */
@media (max-width: 620px) {
  .author-page .universe-grid { display: none; }
  .home-about .home-button {
    width: 100%;
    gap: 10px;
    padding: 15px 16px;
    white-space: nowrap;
    font-size: clamp(12.5px, 3.9vw, 17px);
  }
}

/* 20/10 — cabeçalho da Home no padrão pedido pela autora (WhatsApp, 20/10): "esta parte de cima está com elementos muito diferentes ... melhor deixar a
   sequência tudo com a mesma fonte, cor e tamanho" e "deixar minha logo no início assim, sem moldura ... como o fundo é claro, pode deixar em roxo".
   Menu (só tela larga, acima de 980 px): Home (ícone de casa) · Livro · Garanta seu exemplar · Book Trailer · Projeto · Clube de Cartas · Universo Criativo · Blog,
   tudo texto simples (mesma fonte, cor e tamanho), alinhado à direita da logo. O botão vermelho "Garanta seu exemplar" do canto sai só na tela larga
   (ele agora é um item do menu); no celular e no tablet, onde o menu não aparece, o botão continua no cabeçalho. */
.home-nav .home-brand {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.home-nav .home-brand img.site-header-brand-logo {
  display: block;
  width: clamp(150px, 16vw, 225px);
  height: auto;
}
@media (max-width: 680px) {
  .home-nav .home-brand img.site-header-brand-logo { width: clamp(125px, 42vw, 170px); }
}
@media (min-width: 981px) {
  .home-nav { grid-template-columns: auto 1fr; }
  .home-nav nav { justify-self: end; }
  .home-nav nav a { white-space: nowrap; }
  .home-nav .site-presale-cta { display: none; }
}
/* notebook pequeno / tablet deitado (981 a 1059 px): com 8 itens o menu não cabe ao lado da logo com a letra de 16 px; letra e espaços um pouco menores
   (medido: a logo não encolhe e sobra folga entre a logo e o menu em todas as larguras) */
@media (min-width: 981px) and (max-width: 1059px) {
  .home-nav nav { gap: 12px; font-size: 15px; }
}
/* o item Home é igual aos outros (texto + o ícone da casinha, sem pílula), com o mesmo sublinhado ao passar o mouse */
.home-nav nav a.site-home-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #42354d;
  font-weight: inherit;
}
.home-nav nav a.site-home-link::after {
  display: block !important;
  content: "" !important;
}
.home-nav nav a.site-home-link .site-home-icon {
  width: 18px;
  height: 18px;
}

/* 20/10 — herói mais "clean" (WhatsApp da autora, 20/10 08:45–08:46: "pode retirar estes círculos, para deixar mais clean" e "pode deixar apenas este abaixo do
   livro, só que deixe na cor rosa"). Saem os círculos decorativos: o anel fino à direita (.author-hero-orbit-one), o disco azulado à esquerda
   (.author-hero-orbit-two), o reflexo de lente (.author-lens-flare) e o disco pêssego do alto — esse último é um gradiente radial pintado no
   próprio fundo do herói (.author-hero), só na tela larga (acima de 900 px); no celular ele nunca existiu. Fica só o disco atrás do livro, agora no rosa da identidade
   (--rose, #d98d91, o mesmo das sombras dos botões), no lugar do amarelo. */
.author-hero-orbit,
.author-lens-flare {
  display: none !important;
}
.author-hero-book::before {
  background: #d98d91;
}
@media (min-width: 901px) {
  .author-hero {
    background: linear-gradient(90deg, #f8eee7 0 34%, #e3a0a2 34% 100%);
  }
}

/* 20/10 (tarde) — "No hero tem uma barra preta com opacidade por cima da capa do livro, não pode". É a vinheta do herói (.author-cinema-vignette):
   uma faixa de degradê escuro (ameixa translúcida) de 30–42% da altura, colada na base do herói e desenhada por cima de tudo (z-index 4),
   inclusive do pé da capa. Sai por inteiro: a capa fica sem nada por cima. */
.author-cinema-vignette {
  display: none !important;
}

/* 20/10 (tarde) — "A autora no hero está animando duplicado".
   Causa: a cabeça dela é uma 2ª cópia da foto POR CIMA da 1ª (assim o "Leite" passa na frente do corpo e atrás da cabeça — ver o bloco de 16/10).
   As duas camadas faziam a MESMA entrada (fade de 1,15 s: opacidade 0 → 1) e, na região da cabeça, elas se somavam: com a foto a 50%, a cabeça
   ficava a 75% (1 − 0,5 × 0,5) enquanto o corpo estava a 50% — a cabeça "aparecia antes" e via-se um corte reto no pescoço, como duas autoras
   animando separadas (medido: ~15 mil pixels da cabeça fora do tom certo no meio do fade).
   Agora a cabeça espera: continua se MOVENDO junto com o corpo (a mesma animação "author-person-in" — mesma subida, mesmo tempo), mas fica
   transparente até o corpo estar opaco (~0,95 s) e só então aparece (0,3 s), quando as duas camadas são idênticas e a troca não se nota.
   O fade passa a ser o de uma foto só. A cabeça segue sempre na frente do "Leite" depois da entrada. (Em janela estreita, onde o "Leite" encosta no
   cabelo, o "L" fica à frente do cabelo por ~1 s e some atrás dele nesse fade final de 0,3 s.) "Reduzir movimento": sem animação, como antes. */
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  .author-page .author-hero-person-head {
    animation: author-person-in 1.15s .22s cubic-bezier(.16, 1, .3, 1) forwards,
               author-person-head-show .3s .95s ease-out both;
  }
}
@keyframes author-person-head-show {
  from { opacity: 0; }
  to { opacity: 1; }
}