/* ==========================================================================
   Camila L. Oliveira — tema
   Tokens → base → layout → componentes → efeitos da marca → movimento
   ========================================================================== */

/* Marca em fonte: coloque CentersGeorge.woff2 em assets/fonts/ e ative com a
   classe .marca--tipografica (veja assets/fonts/LEIA-ME.txt). */
@font-face {
  font-family: "Centers George";
  src: local("Centers George"), url("../fonts/CentersGeorge.woff2") format("woff2"), url("../fonts/CentersGeorge.otf") format("opentype");
  font-display: swap;
}

:root {
  --papel: #ffffff;
  --linho: #f1e7db;
  --texto: #1d1b19;
  --preto: #000000;
  --marca: #5b5348;
  --brilho: #c9a97a;
  --fio: #1d1b19;
  --campo: #fcfcfc;
  --campo-borda: #dcdcdc;

  --sans: "Outfit", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --serif: "Literata", "Iowan Old Style", Georgia, "Times New Roman", serif;

  --medida: 38rem;
  --larga: 68rem;
  --respiro: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papel); color: var(--texto);
  font: 400 1.0625rem/1.7 var(--serif);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--preto); outline-offset: 3px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: -999px; top: 0; background: var(--preto); color: #fff; padding: .6rem 1rem; z-index: 100; font-family: var(--sans); }
.pular:focus { left: 0; }
.armadilha { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Tipografia de títulos (sans geométrica, caixa-alta, negrito) ---------- */
.titulo-pagina, .vitrine__cab h2, .colecao__titulo, .newsletter h2 {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.1;
}
.titulo-pagina { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 2.5rem; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: relative; z-index: 20; display: flex; align-items: center; gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--respiro) 0;
}
.topo__marca { display: block; width: clamp(3.5rem, 7vw, 5.25rem); color: var(--marca); }
.monograma {
  display: block; aspect-ratio: 290 / 320; color: var(--marca);
  background: linear-gradient(105deg, var(--marca) 0 40%, var(--brilho) 50%, var(--marca) 60% 100%) 100% 0 / 260% 100%;
  -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat;
}
.topo__menu {
  appearance: none; background: none; border: 0; padding: .75rem; margin: 0; cursor: pointer;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
}
.topo__menu i, .topo__menu i::before, .topo__menu i::after {
  display: block; width: 1.25rem; height: 2px; background: var(--texto); content: ""; transition: transform .25s, opacity .25s;
}
.topo__menu i { position: relative; }
.topo__menu i::before { position: absolute; top: -6px; }
.topo__menu i::after  { position: absolute; top: 6px; }
.topo__menu[aria-expanded="true"] i { background: transparent; }
.topo__menu[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.topo__menu[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 10; background: var(--linho);
  display: grid; align-content: center; padding: 6rem var(--respiro) 3rem;
}
.menu[hidden] { display: none; }
.menu ul { display: grid; gap: .25rem; max-width: var(--larga); margin-inline: auto; width: 100%; }
.menu a {
  display: inline-block; font: 700 clamp(2rem, 7vw, 4rem)/1.15 var(--sans); text-transform: uppercase; text-decoration: none;
}
.menu a:hover, .menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: .12em; text-decoration-thickness: 2px; }
.topo__menu[aria-expanded="true"] { position: relative; z-index: 30; }
.topo__marca { position: relative; z-index: 30; }

/* ---------- Conteúdo ---------- */
.conteudo { padding: 0 0 clamp(4rem, 9vw, 7rem); }
.conteudo > .titulo-pagina { margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.conteudo > .titulo-pagina,
.conteudo > .introducao, .conteudo > .colecao, .conteudo > .vitrine { margin-inline: auto; width: min(var(--larga), 100% - 2 * var(--respiro)); }
.lista-linhas, .prosa, .formulario, .aviso, .paginacao, .vazio, .texto-completo__data {
  margin-left: clamp(0px, 24%, 20rem); max-width: var(--medida);
}
.conteudo > .prosa, .conteudo > .formulario, .conteudo > .aviso, .conteudo > .lista-linhas, .conteudo > .paginacao, .conteudo > .vazio {
  margin-left: max(var(--respiro), calc((100% - var(--larga)) / 2 + min(24%, 20rem))); margin-right: var(--respiro);
}
.texto-completo { width: min(var(--larga), 100% - 2 * var(--respiro)); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; }
.texto-completo .prosa, .texto-completo .texto-completo__data { margin-left: clamp(0px, 24%, 20rem); }
.texto-completo__foto { margin: 0 0 3rem; }
.texto-completo__foto img { width: 100%; }
.prosa > * + * { margin-top: 1.1em; }
.prosa a { text-underline-offset: .18em; }
.introducao { font-size: 1.125rem; max-width: 42rem; margin-bottom: 3.5rem !important; margin-left: auto; }
.vazio { color: #5d574f; }
.link-forte { font-family: var(--sans); font-weight: 700; text-transform: uppercase; }

/* ---------- Capa da home ---------- */
.capa { padding: clamp(1rem, 4vw, 3rem) .75rem 0; }
.marca { margin: 0 auto; color: var(--marca); }
.marca__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.marca__arte {
  display: block; aspect-ratio: 550 / 185; width: 100%;
  background: linear-gradient(105deg, var(--marca) 0 40%, var(--brilho) 50%, var(--marca) 60% 100%) 100% 0 / 260% 100%;
  -webkit-mask: var(--mascara) center / contain no-repeat; mask: var(--mascara) center / contain no-repeat;
}
.marca--capa { width: min(46rem, 88%); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.capa__foto { margin: 0; }
.capa__foto img { width: 100%; max-height: 80vh; object-fit: cover; object-position: center 25%; }

/* ---------- Newsletter ---------- */
.newsletter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem;
  width: min(60rem, 100% - 2 * var(--respiro)); margin: clamp(2.5rem, 6vw, 4.5rem) auto;
}
.newsletter h2 { font-size: 1.05rem; flex: 1 1 18rem; max-width: 26rem; }
.newsletter__form { display: flex; gap: .6rem; flex: 1 1 22rem; max-width: 30rem; }
.newsletter__form input[type="email"] {
  flex: 1; min-width: 0; padding: .9rem 1rem; font: 400 1rem var(--sans);
  background: var(--campo); border: 1px solid var(--campo-borda); border-radius: 0;
}
.newsletter__form button, .botao {
  appearance: none; border: 0; border-radius: 0; background: var(--preto); color: #fff; cursor: pointer;
  padding: .9rem 1.4rem; font: 400 1rem var(--serif); transition: background .2s;
}
.newsletter__form button:hover, .botao:hover { background: #3a3631; }
.newsletter__aviso, .aviso { flex-basis: 100%; font-family: var(--sans); font-size: .95rem; }
.aviso { padding: .8rem 1rem; border-left: 3px solid var(--preto); background: var(--linho); margin-bottom: 1.5rem; }
.aviso--erro { border-color: #9b2c2c; }

/* ---------- Vitrines da home e coleções ---------- */
.vitrine, .colecao { margin-top: clamp(3.5rem, 8vw, 6rem); }
.vitrine { width: min(var(--larga), 100% - 2 * var(--respiro)); margin-inline: auto; }
.vitrine__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--fio); padding-top: 1rem; margin-bottom: 2rem; }
.vitrine__cab h2, .colecao__titulo { font-size: 1.05rem; }
.colecao__titulo { margin-bottom: 1.75rem; }
.vitrine__ver { font: 500 .85rem var(--sans); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid currentColor; }
.vitrine__ver:hover { border-bottom-width: 2px; }

.livros { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 2.5rem 1.75rem; align-items: start; }
.livro__capa { display: block; aspect-ratio: 1; overflow: hidden; background: #e9e4dd; margin-bottom: 1rem; }
.livro__capa img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.livro__capa:hover img { transform: scale(1.03); }
.livro__titulo { font: 700 1rem/1.25 var(--sans); text-transform: uppercase; }
.livro__titulo a { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 2px; }
.livro__meta { font-size: .98rem; margin-top: .3rem; color: #4a453f; }
.compra { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.botao-contorno {
  display: inline-block; padding: .38rem .85rem; border: 1px solid var(--preto);
  font: 500 .78rem/1.2 var(--sans); text-transform: uppercase; letter-spacing: .05em; text-decoration: none; transition: background .2s, color .2s;
}
.botao-contorno:hover { background: var(--preto); color: #fff; }

.livro-pagina { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 3rem; width: min(var(--larga), 100% - 2 * var(--respiro)); margin: clamp(2.5rem, 6vw, 4.5rem) auto 0; }
.livro-pagina .titulo-pagina { margin-bottom: 1rem; }

/* ---------- Vídeos ---------- */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 2rem 1.5rem; }
.videos--pagina { width: min(var(--larga), 100% - 2 * var(--respiro)); margin-inline: auto; }
.video__quadro { position: relative; aspect-ratio: 16 / 9; background: #1d1b19; overflow: hidden; }
.video__quadro img, .video__quadro iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__botao {
  position: absolute; inset: 0; margin: auto; width: 4rem; height: 4rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--preto); color: #fff; display: grid; place-items: center; transition: transform .25s, background .25s;
}
.video__botao svg { transform: translateX(2px); }
.video__quadro:hover .video__botao { transform: scale(1.08); background: var(--marca); }
.video__titulo { font: 700 .95rem/1.3 var(--sans); text-transform: uppercase; margin-top: .85rem; }

/* ---------- Sons ---------- */
.sons { width: 100%; }
.sons--pagina { width: min(var(--medida) + 6rem, 100% - 2 * var(--respiro)); margin-inline: auto; }
.som { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--fio); }
.som:last-child { border-bottom: 1px solid var(--fio); }
.vitrine__cab + .sons .som:first-child { border-top: 0; }
.som__botao { appearance: none; border: 0; width: 3rem; height: 3rem; background: var(--preto); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.som__botao:hover { background: var(--marca); }
.som__botao .icone-pausa, .som.tocando .som__botao .icone-play { display: none; }
.som.tocando .som__botao .icone-pausa { display: block; }
.som__titulo { font: 700 1rem/1.25 var(--sans); text-transform: uppercase; }
.som__descricao { font-size: .95rem; color: #4a453f; margin-top: .15rem; }
.som__barra { height: 2px; background: #d8d2c9; margin-top: .8rem; overflow: hidden; }
.som__barra i { display: block; height: 100%; width: 0; background: var(--preto); }
.som__tempo { font: 500 .9rem var(--sans); font-variant-numeric: tabular-nums; }

/* ---------- Lista do blog (linhas com fio e imagem à direita) ---------- */
.linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--fio); min-height: 10.5rem; }
.linha__texto { padding: 1.4rem 1.1rem 1.1rem 0; display: flex; flex-direction: column; justify-content: flex-start; gap: .75rem; }
.linha__titulo { font: 700 1.2rem/1.2 var(--sans); text-transform: uppercase; }
.linha__titulo a { text-decoration: none; }
.linha__titulo a:hover { text-decoration: underline; text-underline-offset: .2em; }
.linha__seta { font-size: .95rem; }
.linha__imagem { display: block; overflow: hidden; background: #e9e4dd; }
.linha__imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.linha:hover .linha__imagem img { transform: scale(1.03); }
.linha__imagem--vazia { display: grid; place-items: center; background: var(--linho); }
.linha__imagem--vazia .monograma { width: 3.5rem; opacity: .55; }
.paginacao { display: flex; gap: 1rem; align-items: baseline; margin-top: 3rem; font: 700 1.1rem var(--sans); text-transform: uppercase; }
.paginacao a, .paginacao .current { text-decoration: none; }
.paginacao .current { text-decoration: underline; text-underline-offset: .25em; }
.paginacao__proxima { text-decoration: underline !important; text-underline-offset: .25em; }

/* ---------- Formulário ---------- */
.formulario { display: grid; gap: .5rem; margin-top: 2rem; }
.formulario label { font: 700 .85rem var(--sans); text-transform: uppercase; letter-spacing: .04em; margin-top: .75rem; }
.formulario input, .formulario textarea { width: 100%; padding: .85rem 1rem; font: 400 1rem var(--serif); border: 1px solid var(--campo-borda); background: var(--campo); border-radius: 0; }
.formulario .botao { justify-self: start; margin-top: 1.25rem; font: 700 .9rem var(--sans); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--linho); padding: clamp(2.5rem, 6vw, 4rem) var(--respiro) 1.5rem; text-align: center; }
.rodape__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; }
.rodape__nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; justify-content: center; }
.rodape__nav a { font: 500 .95rem var(--sans); text-transform: uppercase; text-decoration: none; }
.rodape__nav a:hover { text-decoration: underline; text-underline-offset: .25em; }
.busca { display: flex; background: #fff; border: 1px solid #8d8d8d; padding: 3px; width: min(100%, 20rem); }
.busca input { flex: 1; min-width: 0; border: 0; padding: .55rem .75rem; font: 500 1rem var(--sans); text-transform: uppercase; background: transparent; }
.busca input::placeholder { color: #767676; }
.busca button { appearance: none; border: 0; background: var(--preto); color: #fff; width: 2.9rem; cursor: pointer; display: grid; place-items: center; }
.marca--rodape { width: min(30rem, 78%); margin: clamp(3rem, 8vw, 5.5rem) auto 1.5rem; }
.rodape__copy { font-size: .95rem; }

/* ==========================================================================
   Efeitos da marca (todos em CSS: troque à vontade)
   ========================================================================== */
.marca__arte, .monograma { transition: background-position 1.6s cubic-bezier(.3, .6, .2, 1), filter .6s; }
.marca:hover .marca__arte, .topo__marca:hover .monograma, .marca__arte:focus-visible { background-position: 0 0; filter: drop-shadow(0 0 .35rem rgb(201 169 122 / .45)); }

/* Revelação única, da esquerda para a direita, só na marca grande da capa. */
@media (prefers-reduced-motion: no-preference) {
  .marca--capa .marca__arte { animation: revelar 2.2s cubic-bezier(.65, 0, .25, 1) both; }
  @keyframes revelar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }

/* Variação com a fonte: <p class="marca marca--tipografica"> mostra o texto em Centers George. */
.marca--tipografica .marca__arte { display: none; }
.marca--tipografica .marca__texto {
  position: static; width: auto; height: auto; clip: auto; white-space: normal;
  font: 400 clamp(3rem, 12vw, 9rem)/1 "Centers George", var(--serif); text-align: center;
  background: linear-gradient(105deg, var(--marca) 40%, var(--brilho) 50%, var(--marca) 60%) 100% 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.6s;
}
.marca--tipografica:hover .marca__texto { background-position: 0 0; }

/* ---------- Telas pequenas ---------- */
@media (max-width: 40rem) {
  .linha { grid-template-columns: 1fr; }
  .linha__imagem { order: -1; aspect-ratio: 16 / 9; }
  .linha__texto { padding: 1rem 0 1.4rem; }
  .lista-linhas, .prosa, .formulario, .aviso, .paginacao, .vazio,
  .texto-completo .prosa, .texto-completo .texto-completo__data { margin-left: 0 !important; }
  .conteudo > .prosa, .conteudo > .formulario, .conteudo > .aviso, .conteudo > .lista-linhas, .conteudo > .paginacao, .conteudo > .vazio { margin-inline: var(--respiro) !important; }
  .livro-pagina { grid-template-columns: 1fr; }
  .newsletter__form { flex-basis: 100%; max-width: none; width: 100%; min-width: 0; }
  .capa__foto img { aspect-ratio: 4 / 5; object-position: 50% 18%; }
  .som { grid-template-columns: auto 1fr; }
  .som__tempo { grid-column: 2; }
}