/* ==========================================================================
   TATIVERSO — sistema de design
   Paleta "Desert Dusk": primary D9793F, secondary A8456B, accent 4B2542, neutral F6E3CE.
   Fundo sempre em tons claros.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  /* cor — paleta "Desert Dusk" enviada, respeitando os papéis indicados */
  --couro:        #4B2542;   /* accent — tinta principal / rodapé */
  --terracota:    #D9793F;   /* primary — ação principal */
  --coral:        #A8456B;   /* secondary — ação secundária / hover */
  --pele:         #E8A467;   /* tom claro derivado do primary — destaques sobre fundo escuro */
  --rosa-poeira:  #EDD3DE;   /* tom claro derivado do secondary — fundo de tags/chips */

  /* neutros — sempre claros, a partir do neutral da paleta */
  --areia:        #F6E3CE;   /* fundo principal — neutral da paleta */
  --areia-clara:  #FCF7EE;   /* cartões / seções alternadas — quase branco */
  --areia-funda:  #E8CFA9;   /* bordas, divisores */
  --papel:        #FFFFFF;   /* branco para cartões elevados */

  --tinta:        var(--couro);
  --tinta-suave:  #6B4A5C;

  /* tipografia */
  --f-display: 'aabak', sans-serif;
  --f-titulo:  'big-caslon-fb', serif;
  --f-corpo:   'apparat-semicond', sans-serif;
  --f-selo:    'Roboto', sans-serif;

  /* ritmo */
  --raio: 8px;
  --sombra: 0 10px 30px -12px rgba(89,58,30,.35);
  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--areia);
  color:var(--tinta);
  font-family:var(--f-corpo);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }

h1,h2,h3,h4{
  font-weight:600;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:-.01em;
  color:var(--couro);
}
h1{ font-family:var(--f-display); font-size:clamp(3.2rem,7.5vw,5.6rem); font-weight:600; }
h2{ font-family:var(--f-titulo); font-size:clamp(2rem,4.2vw,2.9rem); font-weight:700; }
h3{ font-family:var(--f-titulo); font-size:1.5rem; font-weight:700; }
h4{ font-family:var(--f-titulo); font-weight:700; }
p{ margin:0 0 1em; }
.lede{ font-size:1.15rem; color:var(--tinta-suave); max-width:60ch; }

/* eyebrow / selo estilo "cartaz procurado" — usado com moderação, só pra rótulos curtos */
.selo{
  font-family:var(--f-selo);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--coral);
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.selo::before{
  content:"";
  width:22px; height:1px;
  background:var(--coral);
}

/* ===== navegação ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--couro);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:112px;
}
.marca{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.5rem;
  color:var(--areia-clara);
  text-decoration:none;
  letter-spacing:-.01em;
}
.marca span{ color:var(--pele); }
.nav-links{
  display:flex; gap:2.2rem; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  color:var(--areia-clara);
  position:relative;
  padding:.3em 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:2px; background:var(--pele);
  transition:width .25s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ width:100%; }

.nav-toggle{
  display:none;
  background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:8px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--areia-clara); display:block; }

/* ===== botões ===== */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-corpo); font-weight:700; font-size:.95rem;
  padding:.85em 1.7em;
  border-radius:var(--raio);
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primario{ background:var(--terracota); color:var(--papel); box-shadow:var(--sombra); }
.btn-primario:hover{ background:var(--coral); }
.btn-fantasma{ background:transparent; border-color:var(--couro); color:var(--couro); }
.btn-fantasma:hover{ background:var(--couro); color:var(--areia-clara); }
.btn-pequeno{ padding:.55em 1.1em; font-size:.82rem; }

/* ===== elemento assinatura: cartão com moldura delicada =====
   fina linha interna + etiqueta pendurada no canto, para capas e destaques */
.cartao-couro{
  position:relative;
  background:var(--papel);
  border-radius:10px;
  box-shadow:var(--sombra);
  padding:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cartao-couro:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -14px rgba(57,20,22,.28); }
.cartao-couro::before{
  content:"";
  position:absolute; inset:7px;
  border:1px solid var(--areia-funda);
  border-radius:6px;
  pointer-events:none;
}
.cartao-couro .etiqueta{
  position:absolute; top:-10px; right:18px;
  background:var(--terracota); color:var(--papel);
  font-family:var(--f-selo); font-weight:700; font-size:.66rem; letter-spacing:.08em;
  padding:.4em .7em;
  border-radius:20px;
  transform:rotate(3deg);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  z-index:2;
}
.cartao-couro .capa{
  aspect-ratio:2/3;
  border-radius:4px;
  background:linear-gradient(155deg,var(--rosa-poeira),var(--terracota) 60%,var(--coral));
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.9);
  font-family:var(--f-selo); font-weight:700; font-size:.75rem; text-align:center;
  padding:1em;
  overflow:hidden;
}
.cartao-couro .capa img{ width:100%; height:100%; object-fit:cover; }
.cartao-couro .corpo{ padding:1rem .5rem .3rem; }
.cartao-couro .genero{
  font-family:var(--f-selo); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--coral);
}
.cartao-couro h3, .cartao-couro h2{ margin:.25em 0 .3em; font-size:1.2rem; }
.cartao-couro p{ font-size:.9rem; color:var(--tinta-suave); margin-bottom:.8em; }

/* divisor tipo laço — usado com moderação entre seções-chave */
.divisor-laco{ display:flex; justify-content:center; margin:0 auto 2.5rem; width:120px; opacity:.7; }

/* ===== seções ===== */
.secao{ padding:5.5rem 0; }
.secao-alt{ background:var(--areia-clara); }
.secao-cabecalho{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.secao-cabecalho .lede{ margin:0 auto; }

/* ===== grid genérico ===== */
.grade-livros{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:2.2rem 1.8rem;
}

/* ===== tags de gênero (filtro) ===== */
.filtros{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-bottom:3rem;
}
.filtro-tag{
  font-family:var(--f-selo); font-size:.75rem; letter-spacing:.06em;
  text-transform:uppercase;
  padding:.55em 1.1em;
  border:1.5px solid var(--couro);
  border-radius:20px;
  background:transparent;
  color:var(--couro);
  cursor:pointer;
  transition:all .2s ease;
}
.filtro-tag.ativo,
.filtro-tag:hover{ background:var(--couro); color:var(--areia-clara); }

/* ===== rodapé ===== */
footer{ background:var(--couro); color:var(--areia-clara); padding:4rem 0 2rem; }
footer .rodape-titulo{ color:var(--pele); font-size:1rem; margin-bottom:1em; font-weight:700; }
footer a{ text-decoration:none; color:var(--areia-clara); opacity:.85; }
footer a:hover{ opacity:1; text-decoration:underline; }
.rodape-grade{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(241,228,206,.15);
}
.rodape-grade ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6em; font-size:.92rem; }
.rodape-base{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:2rem; font-size:.82rem; opacity:.65; flex-wrap:wrap; gap:1rem;
}

/* ===== formulários ===== */
.campo{ margin-bottom:1.4rem; }
.campo label{
  display:block; font-weight:700; font-size:.85rem;
  margin-bottom:.4em; color:var(--couro);
}
.campo input,
.campo textarea,
.campo select{
  width:100%;
  font-family:var(--f-corpo); font-size:1rem;
  padding:.8em .9em;
  border:1.5px solid var(--areia-funda);
  border-radius:var(--raio);
  background:var(--papel);
  color:var(--tinta);
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus{
  outline:2px solid var(--terracota); outline-offset:1px; border-color:var(--terracota);
}
.campo textarea{ resize:vertical; min-height:130px; }

/* newsletter inline */
.newsletter-caixa{
  background:var(--couro);
  color:var(--areia-clara);
  border-radius:6px;
  padding:3rem;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2.5rem;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.newsletter-caixa h2{ color:var(--papel); }
.newsletter-caixa .lede{ color:rgba(248,239,223,.8); }
.form-inline{ display:flex; gap:.7rem; flex-wrap:wrap; }
.form-inline input{
  flex:1; min-width:200px;
  padding:.9em 1.1em; border-radius:var(--raio); border:none;
  font-family:var(--f-corpo);
}
.nota-form{ font-size:.78rem; opacity:.65; margin-top:.7em; }

/* placeholders de imagem — indicam onde a autora deve inserir arquivos reais */
.espaco-imagem{
  background:repeating-linear-gradient(135deg,var(--areia-funda),var(--areia-funda) 10px,var(--areia-clara) 10px,var(--areia-clara) 20px);
  border:1.5px dashed var(--coral);
  border-radius:var(--raio);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  color:var(--coral);
  font-family:var(--f-selo);
  font-size:.78rem;
  letter-spacing:.03em;
  padding:1rem;
  min-height:220px;
}

/* ===== utilidades ===== */
.centro{ text-align:center; }
.mt-0{ margin-top:0; }
.container-estreito{ max-width:760px; margin:0 auto; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:112px 0 0 0; height:calc(100vh - 112px);
    background:var(--couro); flex-direction:column; padding:2.5rem 1.8rem;
    gap:1.6rem; transform:translateX(100%); transition:transform .3s ease;
  }
  .nav-links.aberto{ transform:translateX(0); }
  .nav-toggle{ display:flex; }
  .rodape-grade{ grid-template-columns:1fr 1fr; }
  .newsletter-caixa{ grid-template-columns:1fr; padding:2rem; }
}
@media (max-width:520px){
  .rodape-grade{ grid-template-columns:1fr; }
  .secao{ padding:3.5rem 0; }
}

/* ===== correção geral de responsividade =====
   Muitas seções (hero, próximo lançamento, bio da autora, páginas de
   livro com capa fixa ao lado do texto, páginas de série) usam grid de
   duas colunas e "position:sticky" escritos direto no HTML (estilo
   inline). Como estilo inline tem prioridade sobre classes normais do
   CSS, essas seções não respondiam em telas pequenas. Esta regra usa
   !important para vencer o estilo inline e forçar empilhamento vertical
   sempre que a tela for estreita — conserta o site inteiro de uma vez,
   sem precisar editar página por página. */
@media (max-width:760px){
  [style*="grid-template-columns"]{
    display:block !important;
  }
  [style*="position:sticky"]{
    position:static !important;
    top:auto !important;
  }
  /* dá um respiro entre os blocos que viraram empilhados */
  [style*="grid-template-columns"] > * + *{
    margin-top:2rem;
  }
}

/* ===== logomarca ===== */
.marca-logo{ height:86px; width:auto; display:block; }
.marca-logo-footer{ height:64px; width:auto; display:block; opacity:.95; }