/* boook.ing · o site em código nosso (RAW). Medidas tiradas do modelo comprado (Tailleferre, 2024), refeitas à mão. */
@import url(/_a/fontes.css);

:root {
  --texto: #333333;
  --apagado: #999999;
  --cartao: #FAFAFA;
  --fundo: #FFFFFF;
  --linha: #EAEAEA;
  --borda: 36px;
  --largura: 1368px;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
}
@media (max-width: 1199px) { :root { --borda: 24px } }

* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100%; background: var(--fundo) }
body { background: var(--fundo); color: var(--texto); font: 400 16px/24px var(--sans); letter-spacing: .005em; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }

.miolo { width: 100%; max-width: calc(var(--largura) + 2 * var(--borda)); margin: 0 auto; padding: 0 var(--borda) }
main { flex: 1 }

/* topo */
.topo { height: 64px; display: flex; align-items: center; justify-content: space-between }
.topo .marca { font-size: 16px; line-height: 19px }
.topo nav { display: flex; gap: 26px; margin-right: 8px }
.topo nav a { font-size: 16px; line-height: 24px }
.hamburguer { display: none }
@media (max-width: 1199px) {
  .topo { height: 60px }
  .topo nav { display: none }
  .hamburguer { display: block; position: relative; width: 60px; height: 60px; margin-right: calc(10px - var(--borda)); border: 0; background: none; cursor: pointer; z-index: 30; -webkit-tap-highlight-color: transparent }
  .hamburguer i { position: absolute; left: 14px; width: 32px; height: 1px; background: var(--texto); transition: transform .35s cubic-bezier(.2,.8,.2,1), top .35s cubic-bezier(.2,.8,.2,1) }
  .hamburguer i:first-child { top: 24px }
  .hamburguer i:last-child { top: 35px }
  .menu-aberto .hamburguer i:first-child { top: 29px; transform: translateX(4px) rotate(-45deg) }
  .menu-aberto .hamburguer i:last-child { top: 29px; transform: translateX(4px) rotate(45deg) }
}
.menu { position: fixed; inset: 0; z-index: 20; background: var(--fundo); padding: 80px var(--borda) 0; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s }
.menu a { font-size: 16px; line-height: 24px }
.menu-aberto .menu { opacity: 1; visibility: visible; transition: opacity .3s ease }
.menu-aberto .topo .marca { position: relative; z-index: 30 }
@media (min-width: 1200px) { .menu { display: none } }

/* título grande */
h1.titulo { font: 400 37px/1.25 var(--serif); letter-spacing: -.01em; max-width: 666px; margin-top: 48px; clip-path: inset(-40px 0 -40px 0) }
@media (max-width: 1199px) { h1.titulo { font-size: 36px; letter-spacing: 0; margin-top: 48px } }
@media (max-width: 999px) { h1.titulo { font-size: 35px; margin-top: 24px } }
@media (max-width: 809px) { h1.titulo { font-size: 25px; margin-top: 18px } }

/* cartões e livrinhos */
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px }
@media (max-width: 1199px) { .grade { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) } }
@media (max-width: 809px) { .grade { grid-template-columns: 1fr } }
.home .grade { margin-top: 96px }
@media (max-width: 1199px) { .home .grade { margin-top: 72px } }
@media (max-width: 809px) { .home .grade { margin-top: 48px } }

.cartao { position: relative; align-self: start; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 390.5px; background: var(--cartao); border-radius: 8px; transition: background-color .6s cubic-bezier(.2,.8,.2,1) }
.cartao .livro-onde { display: flex; justify-content: center }
.cartao.baixo .livro-onde { padding-top: 48px }
.cartao.cima .livro-onde { padding-bottom: 48px }
.cartao .textos { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 12px }
.cartao.baixo { justify-content: flex-start; gap: 24px }
.cartao.baixo .textos { padding-bottom: 40px }
.cartao.cima { justify-content: flex-end; gap: 24px }
.cartao.cima .textos { padding-top: 40px }
.cartao .nome { font: 400 22px/27.5px var(--serif); letter-spacing: normal }
.cartao .tipo { font-size: 14px; line-height: 21px; letter-spacing: .005em }
@media (max-width: 809px) { .cartao, .cartao.so { height: 389.25px } .cartao .nome { font-size: 21px; line-height: 26.25px } }
.cartao.so .livro-onde { display: none }
.cartao.so { height: 389px }
/* duas colunas: todos com o livrinho em cima, como no modelo */
@media (min-width: 810px) and (max-width: 995px) {
  .cartao, .cartao.so { height: 389.25px; margin-bottom: 0 }
  .cartao .nome { font-size: 21px; line-height: 26.25px }
  .cartao.so, .cartao.cima { justify-content: flex-start; gap: 24px }
  .cartao.so .livro-onde, .cartao.cima .livro-onde { display: flex; padding: 48px 0 0 }
  .cartao.cima .livro-onde { order: -1 }
  .cartao.so .textos, .cartao.cima .textos { padding: 0 12px 40px }
}

.livro { position: relative; width: 144px; height: 226px; transition: transform .8s cubic-bezier(.2,.8,.2,1) }
.livro .capa { position: absolute; inset: 0; border-radius: 2px 8px 8px 2px; overflow: hidden; background: linear-gradient(212deg, #333333 0%, #171717 100%) }
.livro .grao { position: absolute; inset: 0; opacity: .23; mix-blend-mode: overlay; background: url(/_a/img/grao.png) 0 0 / 89.5px auto repeat }
@media (hover: hover) {
  .cartao:hover { background-color: var(--fundo) }
  .cartao:hover .livro { transform: rotate(1deg) }
}

/* rodapé */
.rodape { display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 21px; letter-spacing: .005em; padding-top: 114px; padding-bottom: 40px }
@media (min-width: 810px) and (max-width: 1199px) { .rodape { padding-left: 12px; padding-right: 12px } }
@media (min-width: 810px) and (max-width: 995px) { .rodape { padding-top: 90px } }
@media (max-width: 809px) { .rodape { padding-top: 66px; padding-bottom: 18px } }

/* voltar ao topo */
.ao-topo { position: fixed; right: max(var(--borda), calc((100vw - var(--largura)) / 2)); bottom: 18px; display: flex; align-items: center; gap: 3px; font-size: 14px; line-height: 21px; letter-spacing: .005em; z-index: 10 }
.ao-topo svg, .voltar svg { width: 12px; height: 12px; flex-shrink: 0 }
.voltar svg { margin-left: 1px; position: relative; top: .25px }
.ao-topo svg { position: relative; top: -.5px }
@media (max-width: 1199px) { .ao-topo { display: none } }

/* páginas de um trabalho e do diário */
.duas { display: grid; grid-template-columns: 315fr 432fr 549fr; column-gap: 36px; margin-top: 96px }
.duas .lado { margin-top: -1.31px }
.duas .lado { grid-column: 1 }
.duas .corpo { grid-column: 2 / 4; max-width: 549px }
@media (max-width: 809px) { .duas { grid-template-columns: 1fr; margin-top: 48.69px; row-gap: 36px }
  .duas .lado { margin-top: -2px } .duas .lado, .duas .corpo { grid-column: 1 } }
.voltar { display: inline-flex; align-items: center; gap: 3px; font-size: 14px; line-height: 21px; letter-spacing: .005em; margin-bottom: 6px }
.meta { font-size: 14px; line-height: 21px; letter-spacing: .005em; color: var(--apagado) }
.corpo > * + * { margin-top: 24px }
.corpo h3 { font: 500 16px/24px var(--sans); letter-spacing: 0; margin-top: 32px }
.corpo h3 + * { margin-top: 24px }
.corpo ol, .corpo ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 12px }
.corpo li { position: relative; padding-left: 20.1875px }
.corpo ol > li::before { content: counter(list-item) "."; position: absolute; left: 0; font-variant-numeric: tabular-nums }
.corpo ul > li::before { content: "•"; position: absolute; left: 0 }
.corpo li > p { margin: 0 }
.corpo > ol, .corpo > ul { margin-top: 30px }
.corpo > ol + *, .corpo > ul + * { margin-top: 32px }

.secao { font: 400 19px/28.5px var(--sans); letter-spacing: 0; margin: 96px 0 36px }
@media (max-width: 809px) { .secao { margin-top: 48px } .tabela .linha:last-child { padding-bottom: 18px } }

.outras { margin-top: 96px }
.outras h4 { font: 500 16px/24px var(--sans); letter-spacing: normal; margin-bottom: 18px }
.outras a { display: grid; grid-template-columns: 138.59375px 1fr; align-items: center; padding: 18px 0 }
@media (min-width: 810px) { .outras a:last-child { padding-bottom: 12px } }
@media (max-width: 809px) { .outras { margin-top: 48px } .outras h4 { margin-bottom: 12px } .outras a { grid-template-columns: 138px 1fr; font-size: 14px; line-height: 21px; letter-spacing: .005em; padding: 12px 0 } }

/* diário */
.tabela { margin-top: 96px }
.tabela .linha { display: grid; grid-template-columns: 315fr 315fr 549fr 81fr; column-gap: 36px; padding: 24px 0 23px; border-top: 1px solid var(--linha) }
.tabela .cabeca { color: var(--apagado); font-size: 14px; line-height: 21px; letter-spacing: .005em; padding: 0 0 5px; border-top: 0 }
.tabela .cabeca + .linha { border-top-color: var(--linha) }
@media (min-width: 810px) { .tabela .linha:last-child { padding-bottom: 24px } }
@media (max-width: 809px) {
  .tabela { margin-top: 30px }
  .tabela .linha { grid-template-columns: 138px 1fr; column-gap: 0; font-size: 14px; line-height: 21px; letter-spacing: .005em; padding: 18px 0 17px }
  .tabela .linha > :nth-child(3) { display: none }
  .tabela .cabeca { padding-bottom: 5px }
}
.curta { display: none }
@media (max-width: 809px) { .tabela .longa { display: none } .tabela .curta { display: inline } }

/* info */
.info { display: grid; grid-template-columns: 315fr 432fr 549fr; column-gap: 36px; margin-top: 48px }
.info .bloco { margin-top: 24px }
.info .terceira > * + * { margin-top: 24px }
.info .retrato { width: 100%; aspect-ratio: 549 / 547; object-fit: cover; margin-top: 72px }
@media (max-width: 809px) { .info { grid-template-columns: 1fr; row-gap: 36px; margin-top: 18px } .info .retrato { margin-top: 48px } }

/* celular: todos os cartões ocupam a mesma altura, como no modelo */
@media (max-width: 809px) { .cartao.so { height: 389px; margin-bottom: .25px } .duas ~ .grade .cartao.so { margin-bottom: 0 } }

/* regra 5: nunca contorno azul */
a, button, input, select, textarea, [tabindex] { outline: none; -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; box-shadow: none; }