/* ==========================================================================
   Caraminhola Filmes — folha única, celular primeiro.
   O desenho do celular vale até 899px; a partir de 900px entra o desktop.
   ========================================================================== */

:root{
  color-scheme: dark;
  --tinta:#0B0B0B;
  --carvao:#131211;
  --amarelo:#F2C200;
  --creme:#F4F0E6;
  --areia:#8E887A;
  --amarelo-escuro:#3D3100;
  --vazio:#37332C;
  --sans:"DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --gutter:20px;
  --ramo:2.4;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--tinta);
  color:var(--creme);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
h1,h2,h3,p{margin:0}
[hidden]{display:none !important}

.faixa{padding-inline:var(--gutter)}
.sangra{margin-inline:calc(var(--gutter) * -1)}
.so-celular{display:initial}
.so-desktop{display:none}

.seta{display:inline-block}

/* ---------- elos (links de ação em amarelo) ---------- */
.elo{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amarelo);
  transition:opacity .25s ease;
}
.elo:hover{opacity:.72}
.rotulo{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--areia)}
.rotulo--amarelo{color:var(--amarelo)}

/* ---------- topo ---------- */
.topo{
  position:relative;z-index:40;
  height:58px;
  padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topo__logo{height:19px;width:auto}

/* No celular o menu vira ícone: três traços que se abrem num painel.
   No desktop o botão desaparece e os três links voltam a ficar à mostra. */
.topo__botao{
  -webkit-appearance:none;appearance:none;
  background:none;border:0;padding:8px;margin-right:-8px;
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;cursor:pointer;color:var(--creme);
}
.topo__botao span{
  display:block;height:1.5px;width:22px;background:currentColor;border-radius:2px;
  transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .18s ease;
}
.topo__botao[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.topo__botao[aria-expanded="true"] span:nth-child(2){opacity:0}
.topo__botao[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu{
  position:absolute;top:58px;left:0;right:0;z-index:40;
  display:flex;flex-direction:column;gap:0;
  background:var(--carvao);
  border-top:1px solid rgba(244,240,230,.1);
  font-size:15px;letter-spacing:.04em;
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .34s cubic-bezier(.22,.61,.36,1),visibility .34s;
}
.menu.aberto{max-height:240px;visibility:visible}
.menu a{
  padding:17px var(--gutter);
  border-bottom:1px solid rgba(244,240,230,.07);
  transition:color .2s ease;
}
.menu a:hover{color:var(--amarelo)}
.menu a[aria-current="page"]{color:var(--amarelo)}

/* ---------- ramos de laurel ---------- */
.laurel{display:flex;align-items:center;gap:2px;color:var(--amarelo)}
.laurel svg{width:17px;height:54px;flex-shrink:0}
.laurel svg path{stroke-width:var(--ramo)}
.laurel__espelho{transform:scaleX(-1)}
.laurel__texto{
  width:210px;text-align:center;padding-inline:4px;
  font-family:var(--serif);
}
.laurel__topo{font-size:9.5px;letter-spacing:.18em}
.laurel__nome{margin-top:4px;font-size:11px;font-weight:500;letter-spacing:.05em;line-height:1.25}
.laurel__nota{margin-top:4px;font-size:9.5px;letter-spacing:.06em;color:var(--creme)}

/* ==========================================================================
   HOME — abertura
   ========================================================================== */
.abre{position:relative;height:496px;overflow:hidden}
.abre__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%}
.abre__veu{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(11,11,11,.78) 0%,rgba(11,11,11,.25) 32%,rgba(11,11,11,.55) 62%,rgba(11,11,11,.96) 100%);
}
.abre__laureis{
  position:absolute;left:var(--gutter);top:16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.abre__texto{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px}
.abre__titulo{font-size:42px;font-weight:500;letter-spacing:.5px;line-height:.98}
.abre__chamada{margin-top:12px;font-family:var(--serif);font-weight:300;font-size:19px;letter-spacing:-.01em;line-height:1.25}
.abre__ficha{margin-top:8px;font-size:11.5px;opacity:.9}
.abre__elo{margin-top:14px;display:flex}

/* ==========================================================================
   HOME — 20 anos de sonhos (parallax)
   ========================================================================== */
.vinte{
  position:relative;
  padding:64px var(--gutter) 0;
  min-height:452px;
  overflow:hidden;
}
.vinte__ceu,.vinte__lua{
  position:absolute;
  pointer-events:none;
  will-change:transform;
}
.vinte__ceu{top:-14px;right:-76px;width:300px;height:300px;object-fit:cover}
.vinte__lua{top:2px;right:26px;width:188px;height:174px}
.vinte__corpo{position:relative}
.vinte__titulo{
  font-family:var(--serif);font-weight:300;
  font-size:46px;line-height:.94;letter-spacing:.5px;
  color:var(--creme);
  will-change:transform;
}
.vinte__linha{margin-top:30px;max-width:660px;font-size:17px;line-height:1.7;opacity:.8}
.vinte__elo{margin-top:10px;display:flex}

/* ==========================================================================
   HOME — a sessão de cinema
   ========================================================================== */
.sessao__rotulo{
  padding:56px var(--gutter) 16px;
  display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--areia);
}
.sessao__rotulo img{width:15px;height:auto;opacity:.95}

.tela{
  position:relative;
  aspect-ratio:390/244;
  background:#000;
  overflow:hidden;
}
.tela__quadro{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .62s ease;
}
.tela__quadro.esta{opacity:1}
.tela__quadro img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0%;
  transform:scale(1.001);
  transition:transform 9s linear;
}
.tela__quadro.esta img{transform:scale(1.07)}
.tela__cartela{
  position:absolute;inset:0;
  background:var(--carvao);
  display:flex;align-items:center;justify-content:center;
  padding-inline:28px;text-align:center;
  font-family:var(--serif);font-weight:300;font-size:28px;letter-spacing:-.02em;
  color:var(--vazio);
}

.sessao__legenda{padding:18px var(--gutter) 0}
.sessao__nome{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.05;letter-spacing:-.02em}
.sessao__meta{margin-top:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo)}

.programa{
  padding:22px var(--gutter) 0;
  display:flex;flex-direction:column;
}
.programa a{
  display:flex;align-items:center;
  min-height:44px;
  font-size:15px;
  color:var(--areia);
  transition:color .3s ease;
}
.programa a.esta,.programa a:hover{color:var(--amarelo)}
/* a própria tela leva ao filme que está em cartaz nela */
.tela__elo{position:absolute;inset:0;z-index:2;display:block}
.sessao__saida{padding:16px var(--gutter) 0;display:flex}

/* ==========================================================================
   QUEM SOMOS — fundo do mar
   ========================================================================== */
.mar{
  position:relative;
  height:400px;
  overflow:hidden;
  touch-action:manipulation;
}
.mar__luz{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 90% at 50% -20%,rgba(255,255,255,.055) 0%,rgba(255,255,255,.016) 44%,rgba(255,255,255,0) 74%);
}
.mar__agua{position:absolute;inset:0;cursor:crosshair}
.mar__onda{position:absolute;pointer-events:none;opacity:1;transition:opacity .9s ease-out}
.mar__onda.vai{opacity:0}
.mar__peixe{
  position:absolute;left:-20px;top:240px;width:430px;height:186px;
  pointer-events:none;opacity:.95;
  transition:transform 2400ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.mar__corpo{
  position:absolute;inset:0;
  padding:38px var(--gutter) 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  pointer-events:none;
}
/* No celular cada palavra fica na sua linha: assim a palavra que troca
   (Cinema / Literatura) nunca encosta no "de". */
.mar__titulo{
  display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:2px 16px;
  font-family:var(--serif);font-weight:300;
  font-size:54px;line-height:.96;letter-spacing:.5px;
  color:var(--amarelo);
}
.mar__titulo > span{display:inline-block;transition:transform 1500ms cubic-bezier(.22,.61,.36,1);will-change:transform}
.mar__titulo > span > span{display:inline-block}
.mar__p1{transition-duration:1500ms}
.mar__p2{transition-duration:1150ms}
.mar__p3{transition-duration:1750ms}
.mar__linha{transition:transform 1700ms cubic-bezier(.22,.61,.36,1);will-change:transform}
.mar__linha p{margin-top:22px;max-width:318px;font-size:15px;line-height:1.7;opacity:.8;text-wrap:balance}

@keyframes boiar{from{transform:translateY(-7px)}to{transform:translateY(7px)}}
@keyframes nadar1{from{transform:translate(-4px,-6px) rotate(-.7deg)}to{transform:translate(4px,5px) rotate(.5deg)}}
@keyframes nadar2{from{transform:translate(5px,5px) rotate(1.1deg)}to{transform:translate(-4px,-7px) rotate(-1deg)}}
@keyframes nadar3{from{transform:translate(-4px,5px) rotate(.6deg)}to{transform:translate(5px,-6px) rotate(-.6deg)}}

.mar__titulo .nada1{animation:nadar1 9s ease-in-out infinite alternate}
.mar__titulo .nada2{animation:nadar2 7s ease-in-out -2.4s infinite alternate}
.mar__titulo .nada3{animation:nadar3 11s ease-in-out -5.5s infinite alternate}
.mar__linha{animation:boiar 11s ease-in-out -4s infinite alternate}

/* ---------- pods das biografias ---------- */
.gente{
  padding:52px var(--gutter) 0;
  display:flex;flex-direction:column;gap:26px;
}
.pod{
  background:var(--amarelo);
  /* no celular a forma precisa correr bem abaixo da última linha:
     a curva de baixo tem raio de até 190px e comia o fim do texto */
  padding:46px 26px 132px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform 900ms cubic-bezier(.2,.9,.2,1),border-radius 900ms ease;
  will-change:transform;
}
.pod--dani{border-radius:150px 175px 140px 165px / 170px 130px 190px 150px}
.pod--alan{border-radius:175px 140px 165px 135px / 135px 180px 145px 175px;order:-1}
.pod__retrato{
  width:186px;height:216px;flex-shrink:0;object-fit:cover;
}
.pod--dani .pod__retrato{border-radius:96px 112px 88px 104px / 112px 96px 108px 92px}
.pod--alan .pod__retrato{border-radius:112px 92px 108px 96px / 96px 112px 92px 108px}
.pod__nome{
  margin-top:28px;
  font-family:var(--serif);font-weight:400;font-size:34px;letter-spacing:-.02em;line-height:1.05;
  color:var(--tinta);
}
.pod__papel{margin-top:12px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo-escuro)}
.pod__bio{margin-top:24px;font-size:14.5px;line-height:1.75;color:var(--tinta);opacity:.82;text-align:left}

/* ---------- reconhecimento ---------- */
.premios{padding:72px var(--gutter) 0}
.premios__lista{
  margin-top:24px;
  display:flex;flex-direction:column;gap:18px;
  font-size:14px;line-height:1.5;
}
.premios__nota{color:var(--areia)}

/* ==========================================================================
   FILMES — a filmografia
   ========================================================================== */
.pagina__titulo{
  padding:64px var(--gutter) 0;
  font-family:var(--serif);font-weight:300;font-size:54px;line-height:1;letter-spacing:.5px;
  color:var(--creme);
}
.filmografia{padding:54px var(--gutter) 0}
.filmografia__grupo + .filmografia__grupo{margin-top:46px}
.filmografia__rotulo{font-size:11px;letter-spacing:.16em;color:var(--amarelo)}
.filmografia__lista{margin-top:14px}
.filmografia__linha{
  display:flex;flex-direction:column;justify-content:center;
  min-height:58px;padding-block:9px;
  border-bottom:1px solid rgba(244,240,230,.09);
  transition:color .2s ease;
}
a.filmografia__linha:hover{color:var(--amarelo)}
.filmografia__nome{font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.2;letter-spacing:-.01em}
.filmografia__meta{margin-top:5px;font-size:11px;letter-spacing:.1em;color:var(--areia)}

/* ==========================================================================
   PÁGINA DE FILME
   ========================================================================== */
.filme__abre{position:relative;height:430px;overflow:hidden;background:#000}
.filme__abre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.filme__veu{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(11,11,11,.72) 0%,rgba(11,11,11,.18) 34%,rgba(11,11,11,.6) 66%,rgba(11,11,11,.96) 100%);
}
.filme__laureis{
  position:absolute;right:var(--gutter);top:16px;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.filme__cabeca{position:absolute;left:var(--gutter);right:var(--gutter);bottom:26px}

/* Filme sem foto no CMS: o topo não vira um retângulo preto vazio — ele
   encolhe para a altura do próprio título, e os laureis (se houver) entram
   no fluxo, embaixo da ficha. */
.filme__abre--sem-foto{height:auto;min-height:0;padding:54px 0 0}
.filme__abre--sem-foto .filme__veu{display:none}
.filme__abre--sem-foto .filme__cabeca{position:static;padding:0 var(--gutter)}
.filme__abre--sem-foto .filme__laureis{
  position:static;align-items:flex-start;
  padding:22px var(--gutter) 0;
}
.filme__titulo{font-size:40px;font-weight:500;letter-spacing:.5px;line-height:.98}
.filme__ficha{margin-top:12px;font-size:11.5px;letter-spacing:.04em;opacity:.9}

.filme__cartaz{padding:60px var(--gutter) 0;display:flex;justify-content:center}
.filme__cartaz img{width:238px;height:344px;object-fit:cover}

.filme__sinopse{padding:54px var(--gutter) 0}
.filme__sinopse p{margin-top:22px;font-size:15px;line-height:1.75;opacity:.85}
.filme__acoes{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start}

.filme__fotos{padding-top:56px;display:flex;flex-direction:column;gap:4px}
.filme__fotos img{width:100%;height:220px;object-fit:cover}

.bloco{padding:56px var(--gutter) 0}
.bloco--largo{padding-top:70px}
.bloco__corpo{margin-top:20px;font-size:14px;line-height:1.75}
.bloco__corpo .par{padding-block:6px}
.bloco__corpo .chave{color:var(--areia)}
.bloco__corpo .dupla{padding-block:7px;font-size:14.5px;line-height:1.6}
.bloco__corpo .dupla span{color:var(--areia)}
.filme__elenco{margin-top:20px;font-size:15px;line-height:1.9}
.filme__elenco .personagem{color:var(--areia)}

.noticias{margin-top:22px;display:flex;flex-direction:column;gap:26px}
.noticias__fonte{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--areia)}
.noticias__titulo{margin-top:8px;font-family:var(--serif);font-weight:300;font-size:21px;line-height:1.3;letter-spacing:-.01em}

.outros{padding:72px var(--gutter) 0}
.outros__grade{margin-top:22px;display:flex;flex-direction:column;gap:26px}
.outros__grade img{width:100%;height:190px;object-fit:cover;filter:brightness(.86);transition:filter .3s ease}
.outros__grade a:hover img{filter:brightness(1)}
.outros__meta{margin-top:12px;font-size:10.5px;letter-spacing:.1em;color:var(--areia)}
.outros__nome{margin-top:5px;font-family:var(--serif);font-weight:300;font-size:23px;letter-spacing:-.01em}

/* ==========================================================================
   RODAPÉ — em todas as páginas
   ========================================================================== */
.respiro{height:80px}
.rodape{
  background:var(--amarelo);
  color:var(--tinta);
  padding:46px var(--gutter) 36px;
}
.rodape__alto{display:flex;flex-direction:column;gap:0}
.rodape__rotulo{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);opacity:.65}
.rodape__email{
  margin-top:14px;
  font-family:var(--serif);font-weight:300;font-size:21px;letter-spacing:-.02em;line-height:1.2;
  color:var(--tinta);word-break:break-word;
}
.rodape__insta{
  margin:6px 0 0 -11px;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;color:var(--tinta);
}
.rodape__onde{margin-top:14px;font-size:12px;line-height:1.85;color:var(--tinta);opacity:.75}
.rodape__baixo{
  margin-top:30px;padding-top:20px;
  border-top:1px solid rgba(11,11,11,.22);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.rodape__baixo img{height:17px;width:auto;filter:brightness(0)}
.rodape__assina{font-size:10px;color:var(--tinta);opacity:.8}

/* ---------- a palavra que troca em "Cinema de afeto" ---------- */
/* Cinema e literatura se revezam sozinhos, em CSS puro: as duas palavras
   ocupam a mesma célula e a caixa muda de largura junto com a troca.
   As larguras estão em em, então acompanham o tamanho da fonte. */
/* No celular a caixa não muda de largura: cada palavra tem a sua linha, então
   ela fica do tamanho da maior (Literatura) e as duas ficam centradas nela.
   A largura só se anima no desktop, onde as três palavras dividem uma linha. */
.mar__troca{
  display:inline-grid;text-align:center;justify-items:center;
}
.mar__troca > span{grid-area:1 / 1;white-space:nowrap}
.mar__troca > span:first-child{animation:trocaCinema 10.4s ease-in-out infinite}
.mar__troca > span:last-child{animation:trocaLiteratura 10.4s ease-in-out infinite}

@keyframes trocaCaixa{
  0%,44%{width:3.06em}
  56%,94%{width:3.88em}
  100%{width:3.06em}
}
@keyframes trocaCinema{
  0%,42%{opacity:1}
  50%,92%{opacity:0}
  100%{opacity:1}
}
@keyframes trocaLiteratura{
  0%,42%{opacity:0}
  50%,92%{opacity:1}
  100%{opacity:0}
}

/* ==========================================================================
   HOME — a estante de livros, logo abaixo da sessão de cinema
   ========================================================================== */
.estante__rotulo{
  padding:64px var(--gutter) 16px;
  display:flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--areia);
}
.estante__rotulo img{width:15px;height:auto;opacity:.95}
.estante__grade{
  padding:6px var(--gutter) 0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;
}
.estante__grade img,.estante__cartela{
  width:100%;height:242px;object-fit:cover;display:block;
  filter:brightness(.92);transition:filter .3s ease;
}
.estante__cartela{
  background:var(--carvao);filter:none;
  box-sizing:border-box;padding:18px 16px;
  display:flex;align-items:flex-end;
  font-family:var(--serif);font-weight:300;font-size:20px;line-height:1.15;letter-spacing:-.02em;
  color:var(--vazio);
}
.estante__grade a:hover img{filter:brightness(1)}
.estante__meta{margin-top:10px;font-size:10px;letter-spacing:.1em;color:var(--areia)}
.estante__nome{margin-top:4px;font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.15;letter-spacing:-.01em}
.estante__saida{padding:18px var(--gutter) 0;display:flex}

/* ==========================================================================
   LIVROS — o índice
   ========================================================================== */
.livraria{padding:48px var(--gutter) 0}
.livraria__capa{display:none}
.livraria__grupo + .livraria__grupo{margin-top:46px}
.livraria__rotulo{font-size:11px;letter-spacing:.16em;color:var(--amarelo)}
.livraria__grupo > div{margin-top:14px}
.livraria__linha{
  display:flex;align-items:center;gap:16px;
  min-height:58px;padding-block:12px;
  border-bottom:1px solid rgba(244,240,230,.09);
  transition:color .2s ease;
}
.livraria__linha:hover{color:var(--amarelo)}
.livraria__mini{width:54px;height:78px;flex-shrink:0;object-fit:cover;display:block}
.livraria__mini--vazia{background:var(--carvao)}
.livraria__texto{flex-grow:1}
.livraria__nome{display:block;font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.2;letter-spacing:-.01em}
.livraria__meta{display:block;margin-top:5px;font-size:11px;letter-spacing:.1em;color:var(--areia)}

/* ==========================================================================
   PÁGINA DE LIVRO
   ========================================================================== */
.livro__abre{position:relative;height:560px;overflow:hidden;background:#000}
.livro__fundo{
  position:absolute;top:-60px;left:-40px;width:calc(100% + 80px);height:calc(100% + 120px);
  object-fit:cover;filter:blur(38px) saturate(.8);opacity:.5;
}
.livro__veu{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(11,11,11,.72) 0%,rgba(11,11,11,.5) 40%,rgba(11,11,11,.96) 100%);
}
.livro__capa{position:absolute;left:0;right:0;top:34px;display:flex;justify-content:center}
.livro__capa img,.livro__capa .vazio{width:214px;height:314px;object-fit:cover;display:block;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.livro__capa .vazio{
  background:var(--carvao);box-sizing:border-box;padding:22px 20px;
  display:flex;align-items:flex-end;
  font-family:var(--serif);font-weight:300;font-size:24px;line-height:1.15;letter-spacing:-.02em;
  color:var(--vazio);
}
.livro__cabeca{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px}
.livro__titulo{font-size:34px;font-weight:500;letter-spacing:.3px;line-height:1.02}
.livro__autoria{margin-top:10px;font-family:var(--serif);font-weight:300;font-size:17px;letter-spacing:-.01em;line-height:1.25}
.livro__ficha{margin-top:8px;font-size:11.5px;letter-spacing:.04em;opacity:.9}
.livro__atalho{margin-top:10px;display:flex}

.livro__sinopse{padding:54px var(--gutter) 0}
.livro__sinopse p{margin-top:22px;font-size:15px;line-height:1.75;opacity:.85}

.lojas{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.loja{
  display:flex;align-items:center;height:48px;padding:0 22px;
  border:1px solid rgba(244,240,230,.22);
  font-size:13px;letter-spacing:.06em;
  transition:border-color .2s ease,color .2s ease;
}
.loja:hover{border-color:var(--amarelo);color:var(--amarelo)}

.irmao{padding:72px var(--gutter) 0}
.irmao__foto{width:100%;height:200px;object-fit:cover;display:block;filter:brightness(.88);margin-top:18px}
.irmao__meta{margin-top:14px;font-size:10.5px;letter-spacing:.1em;color:var(--areia)}
.irmao__nome{margin-top:6px;font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.1;letter-spacing:-.02em}
.irmao__nota{margin-top:14px;font-size:14.5px;line-height:1.7;opacity:.8}
.irmao__corpo{display:block}
.irmao__ver{margin-top:10px;display:flex}

.outros__cartela{
  width:100%;height:190px;background:var(--carvao);
  box-sizing:border-box;padding:20px 18px;
  display:flex;align-items:flex-end;
  font-family:var(--serif);font-weight:300;font-size:22px;line-height:1.15;letter-spacing:-.02em;
  color:var(--vazio);
}

/* ==========================================================================
   DESKTOP — a partir de 900px
   ========================================================================== */
@media (min-width:900px){
  :root{
    --gutter:clamp(32px,4.45vw,64px);
    --ramo:1.4;
  }
  body{font-size:16px}
  .so-celular{display:none}
  .so-desktop{display:initial}

  .elo{font-size:13px}
  .rotulo{font-size:12px}

  /* topo */
  .topo{height:76px}
  .topo__logo{height:26px}
  .topo__botao{display:none}
  .menu{
    position:static;flex-direction:row;gap:36px;
    background:none;border-top:0;
    font-size:13px;letter-spacing:.06em;
    max-height:none;overflow:visible;visibility:visible;
  }
  .menu a{padding:0;border-bottom:0}

  /* laurel */
  .laurel svg{width:38px;height:120px}
  .laurel__texto{width:auto;min-width:186px;max-width:200px;padding-inline:6px}
  .laurel__topo{font-size:11px;letter-spacing:.2em}
  .laurel__nome{margin-top:7px;font-size:14px;letter-spacing:.06em;line-height:1.3}
  .laurel__nota{margin-top:8px;font-size:11px;letter-spacing:.08em;opacity:.85}

  /* abertura */
  .abre{height:min(700px,82vh)}
  .abre__foto{object-position:50% 57%}
  .abre__veu{
    background:
      linear-gradient(to top,rgba(11,11,11,.9) 0%,rgba(11,11,11,0) 52%),
      linear-gradient(to right,rgba(11,11,11,.92) 0%,rgba(11,11,11,.70) 34%,rgba(11,11,11,.08) 72%);
  }
  .abre__laureis{top:46px;flex-direction:row;align-items:center;gap:52px}
  .abre__texto{bottom:56px;right:auto;width:min(660px,58vw)}
  .abre__titulo{font-size:clamp(48px,5vw,72px);letter-spacing:2.5px}
  .abre__chamada{margin-top:16px;font-size:26px;letter-spacing:-.01em}
  .abre__ficha{margin-top:12px;font-size:13px;opacity:.92}
  .abre__elo{margin-top:12px}

  /* 20 anos */
  .vinte{padding-top:112px;padding-bottom:0;min-height:648px;overflow:visible}
  .vinte__ceu{top:4px;right:calc(var(--gutter) - 46px);width:640px;height:610px}
  .vinte__lua{top:-62px;right:calc(var(--gutter) + 176px);width:470px;height:434px}
  .vinte__titulo{font-size:clamp(56px,6.95vw,100px);line-height:.92;letter-spacing:3.5px}
  .vinte__linha{margin-top:52px;font-size:17px}
  .vinte__elo{margin-top:20px}

  /* sessão */
  .sessao__rotulo{padding:0 var(--gutter) 14px;font-size:12px;gap:10px}
  .sessao__rotulo img{width:19px}
  .tela{aspect-ratio:1312/549;margin-inline:var(--gutter)}
  .tela__cartela{font-size:56px;padding-inline:64px}
  .sessao__legenda{
    padding-top:22px;
    display:flex;align-items:baseline;justify-content:space-between;gap:48px;
  }
  .sessao__nome{font-size:44px;line-height:1.02}
  .sessao__meta{margin-top:0;flex-shrink:0;text-align:right;font-size:12px}
  .programa{padding-top:24px;flex-direction:row;flex-wrap:wrap;gap:4px 34px}
  .programa a{min-height:0;padding-block:4px;font-size:14px;align-items:baseline}
  .sessao__saida{padding-top:30px;justify-content:flex-end}

  /* fundo do mar */
  .mar{height:438px}
  .mar__luz{background:radial-gradient(120% 90% at 50% -18%,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 42%,rgba(255,255,255,0) 72%)}
  .mar__peixe{left:min(220px,15vw);top:150px;width:min(1000px,70vw);height:auto}
  .mar__corpo{padding-top:104px}
  .mar__troca{animation:trocaCaixa 10.4s ease-in-out infinite}
  .mar__titulo{flex-direction:row;font-size:clamp(64px,6.95vw,100px);align-items:baseline;gap:0 32px;letter-spacing:1.5px;flex-wrap:nowrap}
  .mar__linha p{margin-top:26px;max-width:none;white-space:nowrap;text-wrap:normal;font-size:clamp(13px,1.2vw,17px)}
  @keyframes nadar1{from{transform:translate(-6px,-9px) rotate(-.7deg)}to{transform:translate(6px,8px) rotate(.5deg)}}
  @keyframes nadar2{from{transform:translate(7px,8px) rotate(1.1deg)}to{transform:translate(-6px,-11px) rotate(-1deg)}}
  @keyframes nadar3{from{transform:translate(-5px,7px) rotate(.6deg)}to{transform:translate(7px,-8px) rotate(-.6deg)}}

  /* pods */
  .gente{
    padding:88px var(--gutter) 0;
    flex-direction:row;gap:clamp(40px,5.5vw,80px);align-items:stretch;
  }
  .pod{
    flex:1;
    padding:104px clamp(44px,5.7vw,82px) 116px;
    transition:transform 620ms cubic-bezier(.2,.9,.2,1),border-radius 900ms ease;
  }
  .pod--dani{border-radius:240px 300px 220px 280px / 260px 200px 300px 230px;order:0}
  .pod--alan{border-radius:300px 230px 280px 220px / 210px 280px 230px 300px;order:0}
  .pod--dani.abre-se{border-radius:270px 330px 250px 300px / 290px 230px 330px 260px}
  .pod--alan.abre-se{border-radius:330px 260px 310px 250px / 240px 310px 260px 330px}
  .pod__retrato{width:250px;height:290px}
  .pod--dani .pod__retrato{border-radius:130px 150px 120px 140px / 150px 130px 145px 125px}
  .pod--alan .pod__retrato{border-radius:150px 125px 145px 130px / 130px 150px 125px 145px}
  .pod__nome{margin-top:38px;font-size:46px}
  .pod__papel{margin-top:14px;font-size:11px}
  .pod__bio{margin-top:30px;font-size:16px}

  /* reconhecimento */
  .premios{padding-top:104px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .premios .rotulo{display:flex;align-items:center;gap:10px}
  .premios__lista{
    margin:34px auto 0;width:100%;max-width:1100px;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 80px;
    font-size:15px;text-align:left;
  }
  .premios__lista br{display:none}
  .premios__nota{margin-left:.4em}
  .premios__nota::before{content:"— "}

  /* filmografia */
  .pagina__titulo{padding-top:112px;font-size:clamp(60px,5.8vw,84px);letter-spacing:1px}
  .filmografia{padding-top:84px;max-width:calc(860px + var(--gutter) * 2)}
  .filmografia__grupo + .filmografia__grupo{margin-top:62px}
  .filmografia__rotulo{font-size:12px}
  .filmografia__lista{margin-top:22px}
  .filmografia__linha{
    flex-direction:row;align-items:baseline;justify-content:space-between;gap:40px;
    min-height:0;padding-block:13px;border-bottom:0;
  }
  .filmografia__nome{font-size:30px}
  .filmografia__meta{margin-top:0;flex-shrink:0;font-size:12px}

  /* página de filme */
  .filme__abre{height:min(680px,80vh)}
  .filme__abre--sem-foto{height:auto;padding:76px 0 0}
  .filme__veu{
    background:
      linear-gradient(to top,rgba(11,11,11,.95) 0%,rgba(11,11,11,.3) 40%,rgba(11,11,11,0) 65%),
      linear-gradient(to right,rgba(11,11,11,.86) 0%,rgba(11,11,11,.55) 38%,rgba(11,11,11,.05) 76%);
  }
  .filme__laureis{top:auto;bottom:60px;gap:26px}
  .filme__laureis .laurel svg{width:31px;height:98px}
  .filme__laureis .laurel__nome{font-size:12.5px;margin-top:6px}
  .filme__laureis .laurel__nota{font-size:10.5px;margin-top:7px}
  .filme__cabeca{bottom:56px;right:auto;width:min(900px,66vw)}
  .filme__titulo{font-size:clamp(52px,5.3vw,76px);letter-spacing:1.5px;line-height:1}
  .filme__ficha{margin-top:18px;font-size:13px;letter-spacing:.06em}

  .filme__meio{
    padding:110px var(--gutter) 0;
    display:flex;gap:clamp(48px,6.25vw,90px);align-items:flex-start;
  }
  .filme__cartaz{padding:0;flex-shrink:0;display:block}
  .filme__cartaz img{width:380px;height:570px}
  .filme__sinopse{padding:4px 0 0;flex-grow:1}
  .filme__sinopse p{margin-top:30px;max-width:700px;font-size:17px;line-height:1.8}
  .filme__sinopse p + p{margin-top:22px}
  .filme__acoes{margin-top:52px;gap:22px}

  .filme__fotos{padding-top:120px;flex-direction:row;gap:6px}
  .filme__fotos img{flex:1;min-width:0;height:clamp(240px,22vw,320px)}

  .bloco{
    padding:80px var(--gutter) 0;
    display:flex;gap:80px;align-items:flex-start;
  }
  .bloco--largo{padding-top:130px}
  .bloco > .rotulo{width:300px;flex-shrink:0}
  .bloco__corpo{margin-top:0;flex-grow:1;font-size:15px;line-height:2}
  .bloco__corpo--duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 70px}
  .bloco__corpo .par{padding-block:0}
  .bloco__corpo .dupla{padding-block:0;font-size:16px;line-height:2}
  .bloco__corpo .dupla br{display:none}
  .bloco__corpo .dupla span{margin-left:.4em}
  .bloco__corpo .dupla span::before{content:"— "}
  .filme__elenco{margin-top:0;flex-grow:1;max-width:900px;font-size:17px;line-height:1.9}
  .noticias{margin-top:0;flex-grow:1;max-width:900px;gap:34px}
  .noticias__fonte{font-size:11px}
  .noticias__titulo{margin-top:10px;font-size:26px}

  .outros{padding-top:130px}
  .outros__grade{
    margin-top:30px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;
  }
  .outros__grade img{height:clamp(180px,16vw,232px)}
  .outros__meta{margin-top:16px;font-size:11px}
  .outros__nome{margin-top:6px;font-size:26px}

  /* rodapé */
  .respiro{height:150px}
  .rodape{padding:84px var(--gutter) 52px}
  .rodape__alto{
    flex-direction:row;align-items:flex-start;justify-content:space-between;gap:60px;
  }
  .rodape__rotulo{font-size:12px}
  .rodape__email{margin-top:20px;font-size:24px;line-height:1.1}
  .rodape__insta{margin-top:10px}
  .rodape__insta svg{width:24px;height:24px}
  .rodape__onde{margin-top:0;text-align:right;font-size:13px;line-height:2}
  .rodape__baixo{
    margin-top:56px;padding-top:0;border-top:0;
    align-items:flex-end;font-size:12px;
  }
  .rodape__baixo img{height:22px}
  .rodape__assina{font-size:12px;opacity:1}
}

/* ==========================================================================
   DESKTOP — livros e estante, a partir de 900px
   ========================================================================== */
@media (min-width:900px){
  /* estante na home */
  .estante__rotulo{padding:130px var(--gutter) 0;font-size:12px;gap:10px}
  .estante__rotulo img{width:19px}
  .estante__grade{
    padding-top:26px;
    grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;
  }
  .estante__grade img,.estante__cartela{height:clamp(320px,30vw,440px)}
  .estante__cartela{padding:30px 26px;font-size:28px}
  .estante__meta{margin-top:16px;font-size:11px}
  .estante__nome{margin-top:6px;font-size:24px}
  .estante__saida{padding-top:30px;justify-content:flex-end}

  /* índice de livros */
  .livraria{
    padding-top:76px;
    display:flex;gap:80px;align-items:flex-start;
  }
  .livraria__lista{width:min(760px,58%);flex-shrink:0}
  .livraria__grupo + .livraria__grupo{margin-top:62px}
  .livraria__rotulo{font-size:12px}
  .livraria__grupo > div{margin-top:22px}
  .livraria__linha{
    align-items:baseline;justify-content:space-between;gap:40px;
    min-height:0;padding-block:13px;border-bottom:0;
    color:var(--creme);
  }
  .livraria__linha.esta{color:var(--amarelo)}
  .livraria__mini{display:none}
  .livraria__texto{display:contents}
  .livraria__nome{font-size:30px}
  .livraria__meta{margin-top:0;flex-shrink:0;font-size:12px}
  .livraria__capa{
    display:block;flex-grow:1;
    position:sticky;top:40px;
    transition:transform 700ms cubic-bezier(.2,.9,.2,1);
  }
  .livraria__capa img,.livraria__vazia{width:300px;height:430px;object-fit:cover;display:block;box-shadow:0 40px 80px rgba(0,0,0,.55)}
  .livraria__vazia{
    background:var(--carvao);box-sizing:border-box;padding:34px 28px;
    display:flex;align-items:flex-end;
    font-family:var(--serif);font-weight:300;font-size:30px;line-height:1.15;letter-spacing:-.02em;
    color:var(--vazio);
  }
  .livraria__legenda{margin-top:22px;width:300px}
  .livraria__editora{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo)}
  .livraria__legenda p{margin-top:10px;font-size:15px;line-height:1.6;opacity:.8}

  /* página de livro */
  .livro__abre{height:min(660px,78vh)}
  .livro__veu{
    background:
      linear-gradient(to top,rgba(11,11,11,.96) 0%,rgba(11,11,11,0) 45%),
      linear-gradient(to right,rgba(11,11,11,.92) 0%,rgba(11,11,11,.72) 46%,rgba(11,11,11,.55) 100%);
  }
  .livro__capa{
    left:var(--gutter);right:auto;top:70px;
    justify-content:flex-start;
  }
  .livro__capa img,.livro__capa .vazio{width:340px;height:500px;box-shadow:0 50px 90px rgba(0,0,0,.6)}
  .livro__capa .vazio{padding:34px 30px;font-size:34px}
  .livro__cabeca{
    left:calc(var(--gutter) + 410px);right:var(--gutter);
    bottom:auto;top:264px;
  }
  .livro__titulo{font-size:clamp(44px,4.4vw,64px);letter-spacing:1px;line-height:1.02}
  .livro__autoria{margin-top:20px;font-size:24px}
  .livro__ficha{margin-top:16px;font-size:13px;letter-spacing:.06em}
  .livro__atalho{margin-top:26px}

  .livro__sinopse{
    padding:110px var(--gutter) 0;
    display:flex;gap:80px;align-items:flex-start;
  }
  .livro__sinopse > .rotulo{width:300px;flex-shrink:0}
  .livro__sinopse .texto{flex-grow:1}
  .livro__sinopse p{margin-top:0;max-width:760px;font-size:17px;line-height:1.8}
  .livro__sinopse p + p{margin-top:22px}

  .lojas{margin-top:0;flex-direction:row;flex-wrap:wrap;gap:14px 16px}
  .loja{height:46px;padding:0 26px}

  .irmao{padding-top:130px}
  .irmao__corpo{margin-top:30px;display:flex;gap:60px;align-items:center}
  .irmao__foto{width:560px;height:300px;flex-shrink:0;margin-top:0}
  .irmao__meta{margin-top:0;font-size:11px}
  .irmao__nome{margin-top:10px;font-size:44px;line-height:1.05}
  .irmao__nota{margin-top:22px;max-width:520px;font-size:16px}
  .irmao__ver{margin-top:22px}

  .outros__cartela{height:clamp(300px,26vw,400px);padding:28px 24px;font-size:28px}
  .outros .outros__grade img{height:clamp(300px,26vw,400px)}
}

/* Em telas bem largas a goteira cresce para que a coluna de conteúdo
   fique nos 1312px do desenho de 1440 — tudo se centraliza sozinho. */
@media (min-width:1600px){
  :root{--gutter:calc((100vw - 1312px) / 2)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .vinte__ceu,.vinte__lua,.vinte__titulo{transform:none !important}
  .mar__titulo > span > span,.mar__linha{animation:none}
  .mar__troca,.mar__troca > span{animation:none;width:auto}
  .mar__troca > span:last-child{display:none}
  .tela__quadro img{transition:none;transform:none}
  .tela__quadro.esta img{transform:none}
}