@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root{
  --noite:#0f0c1b; --noite-2:#15112a; --tinta:#f1e9d6; --cinza:#bdb196; --ouro:#e0bd72;
  --papel:#f3ebd9; --tinta-escura:#2a2118; --ouro-escuro:#8a6424; --cinza-escuro:#6b5b43;
  --linha:rgba(224,189,114,.32); --linha-escura:rgba(120,88,40,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'EB Garamond',Georgia,serif;font-size:20px;line-height:1.6;color:var(--tinta);background:var(--noite);
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.miolo{max-width:1120px;margin:0 auto;padding:0 28px}

/* rótulos em versaletes (em vez de etiquetas "de app") */
.versal{font-variant:small-caps;letter-spacing:.14em;font-size:17px;text-transform:lowercase}
.ouro{color:var(--ouro)}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:500;line-height:1.05;letter-spacing:-.005em}
h1 em,h2 em,h3 em{font-style:italic;color:var(--ouro)}

/* noite e papel */
.noite{background:radial-gradient(90% 70% at 20% 0%, rgba(52,38,104,.45), transparent 60%), url('img/noise.png'), var(--noite)}
.papel{background:url('img/noise.png'), var(--papel);color:var(--tinta-escura)}
.papel h1 em,.papel h2 em,.papel h3 em,.papel .ouro{color:var(--ouro-escuro)}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;padding:26px 28px;max-width:1120px;margin:0 auto}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ouro);font-family:'Cormorant Garamond';font-weight:600;letter-spacing:.42em;font-size:21px}
.marca svg{width:30px;height:30px}
.topo nav a{text-decoration:none;margin-left:30px;color:var(--cinza)}
.topo nav a:hover{color:var(--ouro)}
.filete{height:1px;background:var(--linha);max-width:1120px;margin:0 auto}

/* abertura */
.abertura{display:grid;grid-template-columns:5fr 6fr;gap:70px;align-items:end;padding:64px 28px 90px}
.gravura{border:1px solid var(--ouro);padding:7px;background:rgba(0,0,0,.3)}
.abertura h1{font-size:clamp(46px,6.4vw,84px)}
.abertura p{font-size:22px;margin-top:28px;max-width:30em;color:var(--tinta)}
.acoes{display:flex;align-items:center;gap:30px;margin-top:38px;flex-wrap:wrap}
.botao{display:inline-block;background:var(--ouro);color:#17122b;text-decoration:none;font-family:'EB Garamond';font-weight:500;
  font-size:20px;letter-spacing:.04em;padding:15px 30px;border:0;cursor:pointer}
.botao:hover{background:#ecca82}
.papel .botao{background:var(--tinta-escura);color:var(--papel)}
.ligacao{color:var(--ouro);text-decoration:none;border-bottom:1px solid var(--linha);padding-bottom:2px}

/* excerto: uma página dupla de livro */
.excerto{padding:100px 0}
.excerto .cabeca{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:34px}
.excerto .cabeca h2{font-size:clamp(34px,4.4vw,52px)}
.livro-aberto{display:grid;grid-template-columns:1fr 1fr;background:#fbf6ea;box-shadow:0 30px 70px rgba(60,40,10,.25), inset 0 0 0 1px var(--linha-escura)}
.livro-aberto .pagina{padding:56px 60px;position:relative}
.livro-aberto .pagina+.pagina{border-left:1px solid var(--linha-escura);background:linear-gradient(90deg, rgba(120,88,40,.10), transparent 12%)}
.livro-aberto .pagina:first-child{background:linear-gradient(270deg, rgba(120,88,40,.10), transparent 12%)}
.livro-aberto .cab{display:flex;justify-content:space-between;font-variant:small-caps;letter-spacing:.14em;font-size:14px;color:var(--cinza-escuro);text-transform:lowercase}
.livro-aberto h3{font-size:40px;text-align:center;margin:30px 0 22px}
.livro-aberto p{text-align:justify;hyphens:auto;font-size:19px}
.livro-aberto p+p{text-indent:1.4em}
.livro-aberto p.capitular::first-letter{font-family:'Cormorant Garamond';font-weight:600;float:left;font-size:72px;line-height:.82;padding:6px 8px 0 0;color:var(--ouro-escuro)}
.livro-aberto .num{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:'Cormorant Garamond';color:var(--cinza-escuro)}
.livro-aberto .pagina img{border:1px solid var(--ouro-escuro);padding:5px;margin-top:22px}
.legenda{font-style:italic;color:var(--cinza-escuro);margin-top:18px;font-size:17px}

/* livro para folhear */
.versoes-folhear{display:flex;gap:8px;align-items:center}
.versoes-folhear button{font-family:'EB Garamond';font-size:17px;padding:6px 16px;background:transparent;color:var(--cinza-escuro);border:1px solid var(--linha-escura);cursor:pointer}
.versoes-folhear button.ativo{background:var(--tinta-escura);color:var(--papel);border-color:var(--tinta-escura)}
.folheador{margin-top:10px}
.livro3d{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:920px;margin:0 auto;aspect-ratio:296/210;perspective:2400px;
  filter:drop-shadow(0 30px 40px rgba(60,40,10,.28))}
.livro3d .pg{position:relative;cursor:pointer;background:transparent}
.livro3d .pg img,.folha img{width:100%;height:100%;object-fit:cover;display:block}
.livro3d .esq::after{content:'';position:absolute;inset:0 0 0 auto;width:14%;background:linear-gradient(270deg,rgba(0,0,0,.18),transparent);pointer-events:none}
.livro3d .dir::after{content:'';position:absolute;inset:0 auto 0 0;width:14%;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent);pointer-events:none}
.livro3d.escuro .esq::after{background:linear-gradient(270deg,rgba(0,0,0,.5),transparent)}
.livro3d.escuro .dir::after{background:linear-gradient(90deg,rgba(0,0,0,.5),transparent)}
.folha{display:none;position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.45,.05,.3,1);z-index:5}
.folha.para-esq{left:50%;transform-origin:left center}
.folha.para-dir{left:0;transform-origin:right center}
.folha.para-esq.virar{transform:rotateY(-180deg)}
.folha.para-dir.virar{transform:rotateY(180deg)}
.folha .frente,.folha .verso{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.folha .verso{transform:rotateY(180deg)}
.livro3d.uma{grid-template-columns:1fr;aspect-ratio:148/210;max-width:420px}
.livro3d.uma .esq{display:none}
.livro3d.uma .dir::after{display:none}
.livro3d.fade{opacity:.2;transition:opacity .18s}
.livro3d{transition:opacity .18s}
.controlos{display:flex;justify-content:center;align-items:center;gap:26px;margin-top:26px}
.controlos button{font-family:'EB Garamond';font-size:19px;background:transparent;border:0;border-bottom:1px solid var(--linha-escura);color:var(--tinta-escura);cursor:pointer;padding:4px 2px}
.controlos button:disabled{opacity:.3;cursor:default}
.controlos .versal{color:var(--cinza-escuro);min-width:70px;text-align:center}

/* testemunhos: gancho rotativo */
.testemunhos{padding:70px 0 80px;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.rodar{text-align:center;min-height:2.6em;display:flex;flex-direction:column;justify-content:center;margin-top:22px}
.rodar blockquote{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-size:clamp(40px,6vw,74px);line-height:1.12;
  color:var(--tinta);transition:opacity .35s, transform .35s}
.rodar blockquote::before{content:'«';color:var(--ouro)} .rodar blockquote::after{content:'»';color:var(--ouro)}
.rodar blockquote.sai{opacity:0;transform:translateY(8px)}
.rodar .quem{margin-top:18px;font-variant:small-caps;letter-spacing:.16em;font-size:17px;color:var(--cinza);text-transform:lowercase}
.pontos{display:flex;justify-content:center;gap:10px;margin-top:26px}
.pontos button{width:9px;height:9px;border-radius:50%;border:1px solid var(--ouro);background:transparent;padding:0;cursor:pointer}
.pontos button.ativo{background:var(--ouro)}

/* catálogo */
.catalogo{padding:100px 0}
.catalogo>.miolo>h2{font-size:clamp(40px,5vw,62px)}
.destaque{display:grid;grid-template-columns:5fr 6fr;gap:70px;margin-top:50px;align-items:center}
.capas{position:relative;height:560px}
.capas img{position:absolute;width:62%;box-shadow:-18px 24px 50px rgba(0,0,0,.55);transition:all .35s}
.capas .c1{left:0;top:30px;z-index:2}
.capas .c2{left:30%;top:0;z-index:1;opacity:.92}
.capas.claro .c1{z-index:1;opacity:.92}
.capas.claro .c2{z-index:2;opacity:1}
.destaque h3{font-size:clamp(40px,4.6vw,58px)}
.destaque .desc{margin-top:18px;font-size:21px}
.indice{margin-top:26px}
.indice div{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.indice span:nth-child(2){flex:1;border-bottom:1px dotted var(--linha);transform:translateY(-6px)}
.indice b{font-family:'Cormorant Garamond';font-weight:600;font-size:22px;color:var(--ouro)}
.versoes{display:flex;gap:10px;margin-top:28px;align-items:center;flex-wrap:wrap}
.versoes button{font-family:'EB Garamond';font-size:18px;padding:8px 18px;background:transparent;color:var(--cinza);border:1px solid var(--linha);cursor:pointer}
.versoes button.ativo{color:var(--noite);background:var(--ouro);border-color:var(--ouro)}
.preco{display:flex;align-items:baseline;gap:8px 16px;margin-top:30px;flex-wrap:wrap}
.preco s,.preco strong{white-space:nowrap}
.preco s{font-family:'Cormorant Garamond';font-size:28px;color:var(--cinza)}
.preco strong{font-family:'Cormorant Garamond';font-weight:600;font-size:54px;color:var(--ouro);line-height:1}
.preco small{font-style:italic;color:var(--cinza)}

.outros{margin-top:110px;border-top:1px solid var(--linha);padding-top:50px}
.outros .intro{display:flex;justify-content:space-between;align-items:baseline;gap:30px;flex-wrap:wrap}
.outros .intro h3{font-size:40px}
.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:40px}
.livro img{box-shadow:-12px 18px 36px rgba(0,0,0,.5);width:78%}
.livro h4{font-family:'Cormorant Garamond';font-weight:500;font-size:34px;margin-top:24px}
.livro h4 em{color:var(--ouro)}
.livro p{margin-top:8px;color:var(--tinta)}
.livro .rodape{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;border-top:1px solid var(--linha);padding-top:12px}
.livro .rodape strong{font-family:'Cormorant Garamond';font-size:32px;font-weight:600;color:var(--ouro)}

/* como fazemos */
.fazemos{padding:100px 0}
.fazemos .grelha{display:grid;grid-template-columns:4fr 7fr;gap:70px}
.fazemos h2{font-size:clamp(40px,5vw,60px)}
.nota{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:22px 0;border-top:1px solid var(--linha-escura)}
.nota:last-child{border-bottom:1px solid var(--linha-escura)}
.nota .n{font-family:'Cormorant Garamond';font-style:italic;font-size:30px;color:var(--ouro-escuro);line-height:1.1}
.nota h3{font-size:30px;margin-bottom:6px}

/* amostra */
.amostra{padding:100px 0}
.amostra .grelha{display:grid;grid-template-columns:5fr 6fr;gap:70px;align-items:start}
.amostra h2{font-size:clamp(40px,5vw,60px)}
.formulario{display:grid;gap:22px}
.campo label{display:block;font-variant:small-caps;letter-spacing:.12em;font-size:16px;color:var(--cinza);text-transform:lowercase}
.campo input,.campo select{width:100%;font-family:'EB Garamond';font-size:22px;padding:8px 0;background:transparent;border:0;
  border-bottom:1px solid var(--linha);color:var(--tinta);border-radius:0;-webkit-appearance:none}
.campo select option{color:#000}
.campo input:focus,.campo select:focus{outline:0;border-bottom-color:var(--ouro)}
.consentimento{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:var(--cinza)}
.consentimento input{width:20px;height:20px;margin-top:4px;flex:none;accent-color:var(--ouro)}
.recebido{display:none;border-top:1px solid var(--ouro);border-bottom:1px solid var(--ouro);padding:24px 0}

/* perguntas */
.perguntas{padding:100px 0}
.perguntas h2{font-size:clamp(40px,5vw,60px)}
.colunas{columns:2;column-gap:60px;margin-top:40px}
.colunas div{break-inside:avoid;margin-bottom:32px}
.colunas h3{font-size:28px;color:var(--tinta-escura)}
.colunas p{margin-top:6px}

/* rodapé */
.fim{padding:60px 0;color:var(--cinza);font-size:17px}
.fim .miolo{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.fim a{color:var(--cinza)}
.fim .aviso{grid-column:1/-1;font-style:italic;border-top:1px solid var(--linha);padding-top:24px;font-size:16px}

/* páginas legais */
.legal{max-width:760px;margin:0 auto;padding:40px 28px 90px}
.legal h1{font-size:54px;margin:8px 0 14px}
.legal h2{font-size:30px;margin:36px 0 8px}
.legal p,.legal li{margin-top:10px}
.legal ul{padding-left:22px}
.preencher{background:rgba(224,189,114,.2);padding:0 6px}

@media (max-width:860px){
  body{font-size:19px}
  .topo nav{display:none}
  .abertura,.destaque,.fazemos .grelha,.amostra .grelha{grid-template-columns:1fr;gap:40px}
  .abertura{padding:30px 22px 70px}
  .miolo{padding:0 22px}
  .abertura .gravura{max-width:340px}
  .livro-aberto{grid-template-columns:1fr}
  .livro-aberto .pagina{padding:40px 28px 60px}
  .livro-aberto .pagina+.pagina{border-left:0;border-top:1px solid var(--linha-escura)}
  .capas{height:420px}
  .tres{grid-template-columns:1fr;gap:60px}
  .colunas{columns:1}
  .fim .miolo{grid-template-columns:1fr}
  .excerto,.catalogo,.fazemos,.amostra,.perguntas{padding:70px 0}
  .excerto .cabeca{flex-direction:column;gap:6px}
}