/* Cordel D' Prata · v2 — página Publicar */
.nav-link.is-current{color:var(--red)}
.nav-link.is-current::after{transform:scaleX(1)}
/* abertura */
.page-intro{
position:relative;
padding-block:calc(var(--header-h,130px) + clamp(30px,4vw,60px)) clamp(48px,6vw,84px);
background:var(--paper);
}
.page-intro-inner{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(28px,4.6vw,72px);align-items:center;
}
.page-intro-copy{max-width:47ch}
.page-intro h1{margin:16px 0 0;font-size:clamp(2.4rem,4.6vw,3.9rem)}
.page-intro .lead{margin-top:18px}
/* no hero há um só botão: uma só decisão à vista (a conversa de 15 minutos fica em #conversa) */
.page-intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.page-intro-photo{max-width:430px;margin-inline:auto;padding:12px 12px 56px}
.page-intro-photo img{aspect-ratio:4/3}
.page-intro-photo figcaption{font-size:1.3rem}
.band-photo--publicar{--band-photo:url('/img/faixas/faixa-publicar.jpg')}
/* garantias sob os botões */
.garantias{
list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;
margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
font-size:.88rem;color:var(--muted);
}
.garantias li{display:flex;align-items:center;gap:.5em}
.garantias li::before{
/* vantagens: visto verde, como no livro e no carrinho */
content:"";flex:0 0 auto;width:13px;height:13px;
background:#3F7D53;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.garantias strong{color:var(--ink);font-weight:600}
/* as seis etapas */
.etapas{list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;border-top:1px solid var(--line)}
.etapa{
display:grid;grid-template-columns:auto minmax(0,1fr) clamp(190px,20vw,280px);
gap:clamp(18px,3vw,40px);align-items:center;
padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);
transition:background .4s ease;
}
.etapa:hover{background:rgba(176,25,31,.03)}
.etapa-num{
font-family:var(--font-display);font-size:clamp(2rem,3.4vw,3rem);line-height:.9;
color:var(--red);letter-spacing:-.03em;min-width:2.6ch;
}
.etapa-corpo{display:grid;gap:8px}
.etapa h3{font-size:clamp(1.24rem,1.8vw,1.55rem)}
.etapa p{color:var(--muted);font-size:.96rem;max-width:62ch}
.etapa-consigo{
font-family:var(--font-display);font-style:italic;font-size:1.02rem;
color:var(--ink) !important;padding-left:14px;border-left:2px solid var(--red);margin-top:4px;
}
/* feiras + números */
.feiras-linha{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,5vw,72px);align-items:center;
}
.feiras-linha .why-stats{border-top:0;padding-top:0;margin-top:0;flex-direction:column;gap:22px}
.feiras-linha .link-arrow{margin-top:18px;display:inline-flex}
@media (max-width:900px){
.page-intro-inner,.feiras-linha{grid-template-columns:1fr}
.page-intro-copy{max-width:none}
.page-intro-photo{max-width:340px;margin-inline:0}
.feiras-linha .why-stats{flex-direction:row;flex-wrap:wrap;gap:24px}
}
@media (max-width:560px){
.etapa{grid-template-columns:1fr;gap:10px}
.etapa-num{font-size:1.5rem}
}
/* bastidores */
.bastidores-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.bastidores-grid figure{margin:0}
.bastidores-grid img{
width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-sm);
background:var(--paper-2);transition:transform .7s var(--ease);
}
.bastidores-grid figure:hover img{transform:scale(1.03)}
.bastidores-grid figcaption{
margin-top:10px;font-family:var(--font-hand);font-size:1.16rem;color:var(--red);
display:inline-block;transform:rotate(-1deg);
}
@media (max-width:760px){
.bastidores-grid{grid-template-columns:1fr;gap:22px}
}
/* depoimento em destaque */
.depoimento{
display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
gap:clamp(28px,5vw,72px);align-items:center;
}
.depoimento-foto{max-width:320px;padding:12px 12px 52px}
.depoimento-foto img{aspect-ratio:4/5}
.depoimento-foto figcaption{font-size:1.28rem}
.depoimento-assina{
font-family:var(--font-nav);font-size:.76rem;font-weight:600;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted);margin-top:-10px;
}
.depoimento .link-arrow{margin-top:20px;display:inline-flex}
/* enquanto não houver retrato, a citação ocupa a coluna toda */
.depoimento.sem-foto{grid-template-columns:1fr}
.depoimento.sem-foto .depoimento-foto{display:none}
.depoimento.sem-foto .quote{font-size:clamp(1.7rem,3.4vw,2.8rem)}
@media (max-width:900px){
.depoimento{grid-template-columns:1fr}
.depoimento-foto{max-width:300px}
}
/* vídeo de cada etapa */
.etapa-video{margin:0;border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow-sm)}
.etapa-video video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
/* link para o vídeo do processo */
.link-video{
display:inline-flex;align-items:center;gap:.6em;margin-top:20px;
font-family:var(--font-nav);font-size:.86rem;font-weight:600;color:var(--ink);
transition:color .3s ease;
}
.link-video:hover{color:var(--red)}
.link-video-play{
display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:var(--red);color:#fff;flex:0 0 auto;
transition:transform .4s var(--ease);
}
.link-video-play svg{width:14px;height:14px;margin-left:2px}
.link-video:hover .link-video-play{transform:scale(1.08)}
/* testemunhos em vídeo */
.videos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,3.4vw,48px)}
.video-card{display:flex;flex-direction:column;gap:12px}
.video-thumb{
position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;
background:var(--paper-2);box-shadow:var(--shadow-sm);
}
.video-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .7s var(--ease)}
.video-thumb:hover img{transform:scale(1.05)}
.video-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
background:var(--red);color:#fff;box-shadow:0 12px 26px -12px rgba(22,18,15,.8);
transition:transform .45s var(--ease),background .3s ease;
}
.video-play svg{width:22px;height:22px;margin-left:3px}
.video-thumb:hover .video-play{transform:translate(-50%,-50%) scale(1.1);background:var(--red-bright)}
.video-card p{display:grid;gap:2px;font-size:.9rem}
.video-card b{font-weight:600}
.video-card em{font-family:var(--font-display);font-style:italic;color:var(--muted);font-size:.9rem}
.videos-mais{margin-top:26px}
/* o vídeo único dos testemunhos: largo, ao centro, com o play maior */
.video-grande{margin:clamp(30px,3.4vw,48px) auto 0;max-width:960px}
.video-grande .video-thumb,.video-grande .is-a-tocar{width:100%;border-radius:var(--radius)}
.video-grande .is-a-tocar iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.video-grande .video-play{width:78px;height:78px}
.video-grande .video-play svg{width:30px;height:30px;margin-left:4px}
.video-grande figcaption{
margin-top:12px;font-family:var(--font-nav);font-size:.72rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--red);
}
.video-grande figcaption small{
display:block;margin-top:3px;font-family:var(--font-hand);font-size:1.08rem;font-weight:500;
letter-spacing:0;text-transform:none;opacity:.9;
}
@media (max-width:1000px){.videos-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
.etapa{grid-template-columns:auto minmax(0,1fr)}
.etapa-video{grid-column:1/-1;max-width:420px}
}
@media (max-width:560px){
.etapa{grid-template-columns:1fr}
.videos-grid{grid-template-columns:1fr}
}
/* depois de publicado */
.depois-linhas{display:grid;gap:clamp(34px,4vw,60px);margin-top:clamp(34px,4vw,54px)}
.depois-linha{
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(24px,4vw,60px);align-items:center;
}
.depois-linha--inversa .depois-copy{order:-1}
.depois-copy{display:grid;gap:10px;align-content:center}
.depois-num{
font-family:var(--font-nav);font-size:.72rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--red);
}
.depois-copy h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.depois-copy p{color:var(--muted);font-size:.96rem;max-width:52ch}
.depois-copy .link-arrow{margin-top:6px;justify-self:start}
.depois-logos{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);flex-wrap:wrap;margin-top:12px}
.depois-logos img{height:calc(22px * var(--escala,1));width:auto;opacity:.55;filter:grayscale(1)}
.depois-logos a{display:inline-flex;align-items:center}
#depois .why-stats{margin-top:clamp(40px,5vw,64px)}
@media (max-width:820px){
.depois-linha{grid-template-columns:1fr}
.depois-linha--inversa .depois-copy{order:0}
}
/* credenciais */
.credenciais-band{padding-block:clamp(26px,3vw,40px)}
.credenciais{
list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
gap:0;border-top:1px solid var(--line);
}
.credenciais li{
display:grid;gap:4px;padding:22px clamp(14px,2vw,28px);
border-left:1px solid var(--line);
}
.credenciais li:first-child{border-left:0;padding-left:0}
.credenciais li:last-child{padding-right:0}
.credenciais b{
font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;
font-size:clamp(1.16rem,1.8vw,1.5rem);line-height:1.1;color:var(--red);white-space:nowrap;
}
/* só a legenda por baixo — o número vivo () dentro do
herda a letra, o tamanho e a cor do "Mais de" */
.credenciais li > span{font-size:.86rem;color:var(--muted);line-height:1.35}
/* seis fotografias: três colunas fecham em duas filas certas.
Eram quatro quando havia três fotos e um espaço reservado. */
.bastidores-grid{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){
.credenciais{grid-template-columns:repeat(2,1fr)}
.credenciais li:nth-child(odd){border-left:0;padding-left:0}
.bastidores-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.credenciais{grid-template-columns:1fr}
.credenciais li{border-left:0;padding:16px 0;border-top:1px solid var(--line)}
.credenciais li:first-child{border-top:0}
.bastidores-grid{grid-template-columns:1fr}
}
/* géneros — informação simples, sem destaque */
.generos-band{padding-block:clamp(24px,3vw,38px)}
.generos{
display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);flex-wrap:wrap;
padding-block:clamp(18px,2.2vw,26px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.generos-titulo{
font-family:var(--font-nav);font-size:.72rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:var(--red);flex:0 0 auto;
}
.generos-lista{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;flex:1}
.generos-lista li{font-size:.94rem;color:var(--ink-soft);display:flex;align-items:center;gap:22px}
.generos-lista li + li::before{content:"·";color:var(--line-strong);margin-left:-14px}
.generos .link-arrow{flex:0 0 auto}
.generos-fita{display:contents}
.generos-eco{display:none}
@media (max-width:760px){
.generos{align-items:flex-start;flex-direction:column;gap:12px}
.generos-lista{gap:6px 18px}
}
/* conversa de 15 minutos */
.conversa{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,5vw,72px);align-items:center;
}
.conversa-lista{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0}
.conversa-lista li{
position:relative;padding:16px 0 16px 30px;border-top:1px solid var(--line);
color:var(--muted);font-size:.96rem;max-width:52ch;
}
.conversa-lista li:first-child{border-top:0}
.conversa-lista li::before{
/* mesmo visto verde das outras vantagens */
content:"";position:absolute;left:0;top:19px;width:14px;height:14px;
background:#3F7D53;
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.conversa-lista b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.conversa-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.conversa-foto{max-width:360px;margin-inline:auto;padding:12px 12px 54px}
.conversa-foto img{aspect-ratio:4/3}
.conversa-foto figcaption{font-size:1.3rem}
/* caminho em seis passos (compacto) */
.passos{
list-style:none;margin:clamp(28px,3.2vw,44px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--line);
}
.passo{
display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
padding:24px clamp(16px,2vw,28px);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
}
.passo:nth-child(3n+1){border-left:0;padding-left:0}
.passo:nth-child(3n){padding-right:0}
.passo-num{font-family:var(--font-display);font-size:1.5rem;line-height:1;color:var(--red);letter-spacing:-.02em}
.passo h3{font-size:1.04rem;margin-bottom:4px}
.passo p{color:var(--muted);font-size:.9rem}
@media (max-width:900px){
.conversa{grid-template-columns:1fr}
.conversa-foto{max-width:340px;margin-inline:0}
.passos{grid-template-columns:repeat(2,1fr)}
.passo:nth-child(3n+1){border-left:1px solid var(--line);padding-left:clamp(16px,2vw,28px)}
.passo:nth-child(odd){border-left:0;padding-left:0}
}
@media (max-width:560px){
.passos{grid-template-columns:1fr}
.passo{border-left:0;padding-left:0;padding-right:0}
}
/* ── blocos do "depois", cada um com ritmo próprio ── */
#depois{padding-bottom:0}
/* 1 · imersivo */
/* molduras preenchidas: a mesma geometria das vazias (.foto-slot), para
nada saltar quando uma fotografia entra no lugar do espaço reservado */
.foto-feita{
position:relative;margin:0;overflow:hidden;
aspect-ratio:var(--ratio,16/10);border-radius:var(--radius);
background:var(--paper-2);
}
.foto-feita img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.foto-feita:hover img{transform:scale(1.03)}
/* a imersiva vai de bordo a bordo e leva um escurecido em baixo,
senão o texto que fica por cima perde-se na fotografia */
/* com legenda por baixo: a proporção passa para a imagem, senão o texto
ficava dentro da moldura e era cortado pelo overflow */
.foto-feita--legenda{aspect-ratio:auto;overflow:visible;display:grid;gap:0;background:none}
.foto-feita--legenda img{
aspect-ratio:var(--ratio,1/1);border-radius:var(--radius);background:var(--paper-2);
}
.foto-feita--legenda figcaption{
margin-top:10px;font-family:var(--font-hand);font-size:1.04rem;color:var(--red);
line-height:1.2;transform:rotate(-1deg);
}
.foto-feita--imersivo{border-radius:0}
.foto-feita--imersivo::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(22,18,15,.72) 0,rgba(22,18,15,.40) 34%,transparent 62%),
linear-gradient(0deg,rgba(22,18,15,.88) 0,rgba(22,18,15,.52) 34%,transparent 72%);
}
.bloco-imersivo{position:relative;margin-top:clamp(32px,4vw,52px);isolation:isolate}
/* a legenda do espaço sobe, para não colidir com o texto que fica em baixo */
.foto-slot--imersivo{border-radius:0;border-inline:0;align-content:start;padding-top:clamp(30px,5vw,70px)}
.bloco-imersivo-copy{
position:absolute;left:50%;bottom:clamp(20px,4vw,52px);transform:translateX(-50%);
width:min(100% - 2*var(--gutter),var(--maxw));
display:grid;gap:8px;max-width:min(var(--maxw),980px);
}
.bloco-imersivo-copy h3{font-size:clamp(1.5rem,3vw,2.4rem);max-width:16ch}
.bloco-imersivo-copy p{max-width:52ch;color:var(--ink-soft);font-size:.96rem}
.bloco-imersivo-copy .link-arrow{justify-self:start;margin-top:4px}
/* com fotografia por baixo o texto tem de ser claro: este bloco foi
desenhado para a moldura vazia, que era de papel */
.bloco-imersivo--foto .bloco-imersivo-copy{color:#F7F3EE;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.bloco-imersivo--foto .bloco-imersivo-copy h3,
.bloco-imersivo--foto .bloco-imersivo-copy .depois-num{color:#fff}
.bloco-imersivo--foto .bloco-imersivo-copy p{color:rgba(247,243,238,.9)}
.bloco-imersivo--foto .bloco-imersivo-copy .link-arrow{color:#fff}
/* 2 · duo */
.bloco-duo{
display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:clamp(24px,4vw,60px);align-items:center;margin-top:clamp(40px,5vw,72px);
}
.bloco-duo-fotos{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
.bloco-duo-fotos .foto-slot:last-child{margin-top:clamp(24px,4vw,56px)}
/* 3 · trio */
.bloco-trio{margin-top:clamp(40px,5vw,72px);display:grid;gap:clamp(20px,2.6vw,34px)}
.bloco-trio-copy{max-width:60ch}
.bloco-trio-fotos{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px)}
.bloco-trio-fotos > *:nth-child(even){transform:translateY(clamp(14px,2vw,28px))}
@media (max-width:900px){.bloco-trio-fotos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){
.bloco-trio-fotos{grid-template-columns:repeat(2,1fr)}
.bloco-trio-fotos > *:nth-child(even){transform:none}
}
/* 4 · banda escura */
.bloco-escuro{
margin-top:clamp(46px,6vw,84px);background:var(--ink);color:#F5F0EA;
padding-block:clamp(40px,5vw,72px);position:relative;overflow:hidden;
}
.bloco-escuro::before{
content:"";position:absolute;width:60vw;height:60vw;right:-18vw;top:-24vw;pointer-events:none;
background:radial-gradient(circle,rgba(176,25,31,.45),transparent 62%);filter:blur(50px);
}
.bloco-escuro-inner{
position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(28px,4.4vw,64px);align-items:center;
}
.bloco-escuro .depois-num{color:#F0B3AD}
/* duas fotografias em leque, como duas cartas na mão: a prova da capa à
frente e a pilha de folhas a espreitar por cima, do lado de fora */
.leque{position:relative;margin:0;padding:clamp(8px,1.6vw,20px) 0}
.leque figure{
margin:0;overflow:hidden;background:var(--paper);
border:7px solid var(--paper);border-radius:var(--radius-sm);
box-shadow:0 20px 46px rgba(0,0,0,.45);
}
.leque img{width:100%;height:100%;object-fit:cover;display:block}
.leque-a{width:84%;transform:rotate(-2.5deg)}
.leque-a img{aspect-ratio:3/2}
.leque-b{
position:absolute;right:0;bottom:-6%;width:42%;z-index:2;transform:rotate(6deg);
}
.leque-b img{aspect-ratio:3/4}
@media (max-width:560px){
.leque-a{width:88%}
.leque-b{width:46%;bottom:-4%}
}
@media (prefers-reduced-motion:reduce){.leque-a,.leque-b{transform:none}}
.bloco-escuro h3{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.08;margin-bottom:14px}
.bloco-escuro p{color:rgba(245,240,234,.72);max-width:48ch;font-size:.98rem}
.bloco-escuro .depois-logos img{opacity:.6;filter:grayscale(1) brightness(0) invert(1)}
.bloco-escuro .foto-slot{
background:
repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 12px,transparent 12px 24px),
linear-gradient(140deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
border-color:rgba(245,240,234,.3);color:#F0B3AD;
}
/* 5 · vendas */
.bloco-vendas{
display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.5fr);
gap:clamp(26px,4vw,64px);align-items:center;
padding-block:clamp(46px,6vw,84px);
}
.bloco-vendas .foto-slot{max-width:280px}
/* dois ecrãs da área de autor, em telemóvel: à frente a feira com a sessão
marcada e o botão de partilhar, atrás as vendas. A moldura escura é o que
lhes dá bordo — sem ela o ecrã creme funde-se com o papel da página. */
.telemoveis{position:relative;margin:0;max-width:340px;padding:10px 0 20px}
.tlm{
margin:0;border-radius:30px;background:#17120F;
border:5px solid #17120F;box-shadow:0 24px 54px rgba(22,18,15,.30);
}
/* a proporção é a das capturas reais da aplicação (968x1570): assim a
moldura não recorta nada do que lá está */
.tlm img{width:100%;aspect-ratio:968/1570;object-fit:cover;display:block;border-radius:25px}
.tlm--frente{position:relative;z-index:2;width:70%;transform:rotate(-3deg)}
.tlm--tras{position:absolute;right:0;top:8%;z-index:1;width:58%;transform:rotate(7deg)}
@media (max-width:900px){.telemoveis{max-width:280px}}
.bloco-vendas-copy{display:grid;gap:10px}
.bloco-vendas-copy .why-stats{margin-top:22px}
@media (max-width:900px){
.bloco-imersivo-copy{position:static;transform:none;width:auto;margin:18px var(--gutter) 0}
/* aqui o texto já não está em cima da fotografia: volta às cores do papel */
.bloco-imersivo--foto .bloco-imersivo-copy{color:var(--ink);text-shadow:none}
.bloco-imersivo--foto .bloco-imersivo-copy h3{color:var(--ink)}
.bloco-imersivo--foto .bloco-imersivo-copy .depois-num{color:var(--red)}
.bloco-imersivo--foto .bloco-imersivo-copy p{color:var(--ink-soft)}
.bloco-imersivo--foto .bloco-imersivo-copy .link-arrow{color:var(--red)}
.foto-slot--imersivo{--ratio:4/3 !important}
.bloco-duo,.bloco-escuro-inner,.bloco-vendas{grid-template-columns:1fr}
.bloco-vendas .foto-slot{max-width:220px}
.bloco-trio-fotos .foto-slot:nth-child(2){transform:none}
}
/* as fotografias dos bastidores encostam à secção de cima */
#autor{padding-bottom:clamp(20px,2.4vw,32px)}
.bastidores--colado{padding-top:0;padding-bottom:clamp(48px,6vw,90px)}
/* ── abertura: fotografia sangrada à direita (alternativa à polaroide) ── */
.page-intro[data-hero="sangrada"]{overflow:hidden}
.page-intro[data-hero="sangrada"] .page-intro-inner{grid-template-columns:minmax(0,1fr)}
.page-intro[data-hero="sangrada"] .hero-polaroide{display:none}
.page-intro[data-hero="sangrada"] .page-intro-copy{max-width:46ch}
.page-intro[data-hero="polaroide"] .hero-sangrada{display:none}
/* a fotografia atravessa a secção toda: à direita em cheio, à esquerda
continua por baixo do texto, esbatida pelo mesmo gradiente de sempre.
Antes acabava a meio e a metade esquerda ficava vazia. */
/* duas fotografias: a reunião à direita em cheio, as estantes à esquerda
por baixo do texto. Cada uma tem o seu gradiente de papel, a puxar para
o lado onde está o texto. */
.hero-sangrada{
position:absolute;right:0;top:0;bottom:0;width:min(52vw,760px);margin:0;z-index:0;
-webkit-mask-image:linear-gradient(100deg,transparent 0,#000 30%,#000 100%);
mask-image:linear-gradient(100deg,transparent 0,#000 30%,#000 100%);
}
.hero-sangrada img{width:100%;height:100%;object-fit:cover;object-position:62% 45%}
.hero-sangrada::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,var(--paper) 0,rgba(250,247,242,.35) 26%,transparent 52%),
linear-gradient(0deg,rgba(22,18,15,.42),transparent 42%);
}
.hero-livros{
position:absolute;left:0;top:0;bottom:0;width:min(56vw,820px);margin:0;z-index:0;
}
.hero-livros img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* o texto vive todo em cima destas estantes, por isso o papel tem de
cobrir bastante — os livros lêem-se pela textura, não pelo contraste */
.hero-livros::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(250,247,242,.82) 0,rgba(250,247,242,.80) 55%,
rgba(250,247,242,.90) 88%,var(--paper) 100%);
}
/* o conteúdo sobe por cima das duas */
.page-intro--foto > .wrap{position:relative;z-index:1}
.hero-sangrada figcaption{
position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,38px);z-index:1;
display:grid;gap:4px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.hero-sangrada-nota{font-family:var(--font-hand);font-size:1.28rem;line-height:1.1}
/* no ecrã pequeno a fotografia sangrada não cabe: a reunião passa a uma
polaroide ao lado do título, e a parede de livros do fundo fica. A secção
vira grelha (o .wrap e a cópia ficam transparentes) para a polaroide,
que é irmã do .wrap, poder encostar ao título. */
@media (max-width:900px){
.page-intro[data-hero="sangrada"]{
display:grid;grid-template-columns:minmax(0,1fr) min(40%,170px);column-gap:16px;align-items:center;
padding-inline:var(--gutter);
}
.page-intro[data-hero="sangrada"] > .wrap,
.page-intro[data-hero="sangrada"] .page-intro-copy{display:contents}
.page-intro[data-hero="sangrada"] .page-intro-titulo{grid-column:1;grid-row:1;align-self:center}
.page-intro[data-hero="sangrada"] .lead,
.page-intro[data-hero="sangrada"] .page-intro-actions,
.page-intro[data-hero="sangrada"] .garantias{grid-column:1 / -1}
.page-intro[data-hero="sangrada"] .lead{margin-top:22px}
/* a parede de livros fica, esbatida, a cobrir a secção toda por trás */
.hero-livros{width:auto;left:0;right:0;z-index:0}
.hero-livros::after{background:linear-gradient(90deg,rgba(250,247,242,.82),rgba(250,247,242,.86))}
.page-intro[data-hero="sangrada"] > .wrap > *,
.page-intro[data-hero="sangrada"] .page-intro-copy > *,
.hero-sangrada{position:relative;z-index:1}
.hero-sangrada{
grid-column:2;grid-row:1;align-self:center;
position:relative;inset:auto;width:100%;height:auto;margin:0;
padding:8px 8px 44px;background:#fff;border-radius:2px;
box-shadow:0 14px 30px -16px rgba(22,18,15,.45);transform:rotate(2.2deg);
-webkit-mask-image:none;mask-image:none;
}
.hero-sangrada img{aspect-ratio:3/4;height:auto;object-position:62% 45%;background:var(--paper-2)}
.hero-sangrada::after{display:none}
.hero-sangrada figcaption{
position:absolute;left:8px;right:8px;bottom:8px;text-align:center;
color:var(--ink);text-shadow:none;display:block;
}
.hero-sangrada-nota{font-size:.92rem;line-height:1.05;display:block}
}
@media (max-width:560px){
.page-intro[data-hero="sangrada"] h1{font-size:2rem}
/* sem a quebra forçada o título parte-se onde couber ao lado da polaroide */
.page-intro[data-hero="sangrada"] h1 br{display:none}
.page-intro[data-hero="sangrada"]{grid-template-columns:minmax(0,1fr) 38%}
}
/* logótipos de distribuição, colados às credenciais */
.credenciais-logos{
display:flex;align-items:center;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
padding:18px 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.credenciais-logos-label{
font-family:var(--font-nav);font-size:.7rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);flex:0 0 auto;
}
.credenciais-logos .depois-logos{margin-top:0;gap:clamp(20px,3.2vw,44px)}
.credenciais-logos .depois-logos img{height:calc(24px * var(--escala,1));opacity:.62}
@media (max-width:640px){
.credenciais-logos{gap:12px}
.credenciais-logos .depois-logos{gap:18px}
.credenciais-logos .depois-logos img{height:calc(20px * var(--escala,1))}
}
/* no hero, as garantias são uma linha leve por baixo dos botões — sem traço
nem caixa, para não pesar ao lado do título */
.page-intro .garantias{margin-top:26px;padding-top:0;border-top:0;gap:8px 22px}
/* o texto de cada garantia corre seguido: em flex, o negrito separava-se do
resto com um espaço a mais ("Lido do princípio ao fim") */
.page-intro .garantias li{display:block;position:relative;padding-left:19px}
.page-intro .garantias li::before{position:absolute;left:0;top:.32em}
/* testemunhos em texto, ao lado dos vídeos */
.citacoes{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line);
}
.citacao{
margin:0;padding:24px clamp(16px,2.2vw,30px);border-left:1px solid var(--line);
display:grid;gap:16px;align-content:start;
}
.citacao:first-child{border-left:0;padding-left:0}
.citacao:last-child{padding-right:0}
.citacao blockquote{
margin:0;font-family:var(--font-display);font-size:1.04rem;line-height:1.38;letter-spacing:-.01em;
}
.citacao figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.citacao img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:top center;background:var(--paper-2)}
.citacao b{display:block;font-size:.88rem;font-weight:600}
.citacao em{font-family:var(--font-display);font-style:italic;font-size:.86rem;color:var(--muted)}
@media (max-width:820px){
.citacoes{grid-template-columns:1fr}
.citacao{border-left:0;padding:22px 0;border-top:1px solid var(--line)}
.citacao:first-child{border-top:0}
}
/* ═══════════════ a página com o tema do género (?genero=) ═══════════════ */
.genero-pill{
display:inline-block;margin-left:10px;padding:.25em .7em;border-radius:999px;vertical-align:middle;
background:var(--genero-fundo,var(--red-soft));color:var(--genero,var(--red));
font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
body[data-genero="fantasia"]{--genero:#4B3B8F;--genero-fundo:rgba(75,59,143,.12)}
body[data-genero="romance"]{--genero:#A3235B;--genero-fundo:rgba(163,35,91,.12)}
body[data-genero="poesia"]{--genero:#1F5F53;--genero-fundo:rgba(31,95,83,.12)}
body[data-genero="infantil"]{--genero:#B8600F;--genero-fundo:rgba(184,96,15,.13)}
body[data-genero="thriller"]{--genero:#16120F;--genero-fundo:rgba(22,18,15,.1)}
.pub-genero{padding-block:clamp(40px,5vw,72px);background:var(--paper-2);border-bottom:1px solid var(--line)}
.pub-genero-head{display:flex;align-items:flex-start;justify-content:space-between;gap:clamp(20px,3vw,48px);flex-wrap:wrap}
.pub-genero-head h2{margin:12px 0 0;font-size:clamp(1.5rem,2.6vw,2.2rem)}
.pub-genero-head p{margin:12px 0 0;max-width:52ch;color:var(--ink-soft)}
.pub-genero-head .eyebrow{color:var(--genero,var(--red))}
/* o post-it da casa é absoluto nas aberturas; aqui vive dentro do cabeçalho */
.pub-genero-postit{position:relative;inset:auto;flex:0 0 auto;transform:rotate(3deg);margin-top:6px;max-width:190px}
.pub-genero-postit strong{font-size:1.6em;color:var(--genero,var(--red))}
.pub-genero-fila{
display:flex;gap:clamp(14px,1.8vw,24px);margin-top:clamp(22px,2.6vw,34px);
overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:none;
}
.pub-genero-fila::-webkit-scrollbar{display:none}
.pub-genero-fila .book{flex:0 0 clamp(140px,17vw,172px);scroll-snap-align:start}
.pub-genero .link-arrow{margin-top:20px;display:inline-flex}
/* ══ ecrã pequeno: filas que deslizam e blocos mais compactos ══ */
@media (max-width:900px){
/* padrão das filas: primeiro cartão pela margem do texto, o seguinte a espreitar */
.bloco-trio-fotos,.citacoes,.passos{
display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 10px;
-webkit-overflow-scrolling:touch;border-top:0;
}
.bloco-trio-fotos::-webkit-scrollbar,.citacoes::-webkit-scrollbar,.passos::-webkit-scrollbar{display:none}
/* comunicação: as cinco fotografias */
.bloco-trio-fotos{gap:14px}
.bloco-trio-fotos > *{flex:0 0 min(46%,200px);scroll-snap-align:start}
.bloco-trio-fotos > *:nth-child(even){transform:none}
/* o que dizem os autores: cartões */
.citacoes{gap:12px;margin-top:26px}
.citacoes .citacao{
flex:0 0 min(80%,320px);scroll-snap-align:start;
padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
}
/* o caminho em seis passos: cartões */
.passos{gap:12px}
.passos .passo:nth-child(n){
flex:0 0 min(74%,290px);scroll-snap-align:start;
padding:20px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
}
/* bastidores: grelha de três, legendas mais pequenas */
.bastidores-grid{grid-template-columns:repeat(3,1fr);gap:10px 8px}
.bastidores-grid figcaption{font-size:.86rem;margin-top:6px;line-height:1.15}
/* quinze minutos com um editor: a polaroide ao lado do título */
.conversa{grid-template-columns:minmax(0,1fr) min(40%,170px);column-gap:16px;align-items:center}
.conversa > div.reveal{display:contents}
.conversa-titulo{grid-column:1;grid-row:1;align-self:center}
.conversa .lead,.conversa-lista,.conversa-acoes,.agenda-proxima{grid-column:1 / -1}
.conversa .lead{margin-top:22px}
.conversa-foto{
grid-column:2;grid-row:1;align-self:center;
max-width:none;margin:0;padding:8px 8px 40px;
}
.conversa-foto img{aspect-ratio:1/1}
.conversa-foto figcaption{font-size:.98rem;bottom:8px}
.conversa-foto figcaption span{font-size:.62rem}
/* depoimento: retrato mais pequeno */
.depoimento-foto{max-width:190px;padding:8px 8px 54px}
.depoimento-foto figcaption{font-size:1rem}
.depoimento-foto figcaption span{font-size:.62rem}
}
@media (max-width:560px){
.conversa{grid-template-columns:minmax(0,1fr) 38%}
.conversa h2{font-size:1.7rem}
}
/* «Publicamos»: no ecrã pequeno os géneros desfilam, como a fita da gala */
@media (max-width:760px){
.generos-fita{
display:block;width:calc(100% + 2 * var(--gutter));margin-inline:calc(-1 * var(--gutter));overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.generos-lista{flex-wrap:nowrap;width:max-content;gap:0;animation:pubDesfila 28s linear infinite}
.generos-lista li{flex:0 0 auto;white-space:nowrap;gap:0;padding-right:22px}
.generos-lista li::before{content:"·";color:var(--line-strong);margin:0 22px 0 0}
.generos-eco{display:flex}
}
@keyframes pubDesfila{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.generos-lista{animation:none}}