/* =========================================================
   site.css — M. W. Inácio
   Direção: NOIR LITERÁRIO
   Tinta quente + creme + latão. Serifa editorial.
========================================================= */

:root{
  --ink:      #14110f;   /* fundo principal (quase preto quente) */
  --ink-2:    #1c1815;   /* superfícies elevadas */
  --ink-3:    #241f1a;
  --paper:    #f3ecdf;   /* creme para painel de contraste */
  --bone:     #cdc3b2;   /* texto suave sobre tinta */
  --bone-dim: #9a9080;
  --brass:    #c79a55;   /* acento — latão, não dourado berrante */
  --brass-2:  #e3c082;
  --blood:    #7c2f2a;   /* detalhe raríssimo (regras/hover) */
  --line:     rgba(205,195,178,.14);
  --maxw:     1080px;
  --radius:   4px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Spectral', Georgia, serif;
  font-weight:300;
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* atmosfera: brilho superior + grão fino global */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(199,154,85,.10), transparent 60%),
    radial-gradient(900px 500px at 85% 10%, rgba(124,47,42,.08), transparent 55%),
    var(--ink);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tipos utilitários ---------- */
.kicker{
  display:inline-block;
  font-family:'Fraunces', serif;
  font-size:13px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--brass);
  margin-bottom:14px;
}
.section-title{
  font-family:'Fraunces', serif;
  font-weight:400;
  font-size:clamp(26px, 4vw, 40px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:#f6f1e8;
  margin:0 0 6px;
}

/* =========================================================
   NAV
========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:24px;
  padding:16px clamp(18px,5vw,48px);
  background:rgba(20,17,15,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__brand{
  font-family:'Fraunces', serif; font-weight:600;
  letter-spacing:.18em; font-size:16px; color:#f6f1e8;
}
.nav__brand span{ color:var(--brass); margin:0 1px; }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{
  font-size:14px; letter-spacing:.04em; color:var(--bone-dim);
  position:relative; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:1px; width:0;
  background:var(--brass); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ width:100%; }
.nav__lang{ display:flex; gap:4px; }
.nav__lang a{
  font-family:'Fraunces',serif; font-size:12px; font-weight:600; letter-spacing:.08em;
  padding:5px 8px; border-radius:var(--radius); color:var(--bone-dim);
  transition:color .2s, background .2s;
}
.nav__lang a:hover{ color:var(--bone); }
.nav__lang a.is-active{ color:var(--ink); background:var(--brass); }

/* =========================================================
   HERO
========================================================= */
.hero{ position:relative; overflow:hidden; padding:clamp(48px,9vw,120px) clamp(18px,5vw,48px) clamp(40px,7vw,90px); }
.hero__mark{
  position:absolute; top:-.18em; right:4%;
  font-family:'Fraunces',serif; font-weight:600;
  font-size:min(46vw,560px); line-height:.8; color:rgba(199,154,85,.06);
  pointer-events:none; user-select:none;
}
.hero__inner{
  position:relative; max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,5vw,64px); align-items:center;
}
.hero__portrait{
  position:relative; border-radius:6px; overflow:hidden;
  border:1px solid rgba(205,195,178,.18);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8);
}
.hero__portrait::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(20,17,15,.55));
}
.hero__portrait img{ aspect-ratio:4/5; object-fit:cover; width:100%; filter:grayscale(.18) contrast(1.04); }
.hero__eyebrow{
  font-family:'Fraunces',serif; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; font-size:13px;
  color:var(--brass); margin:0 0 18px;
}
.hero__title{
  font-family:'Fraunces',serif; font-weight:400; font-style:italic;
  font-size:clamp(30px,5.2vw,58px); line-height:1.08; letter-spacing:-.015em;
  color:#f7f2e9; margin:0; max-width:18ch;
  font-variation-settings:"opsz" 120;
}
.hero__rule{ width:64px; height:2px; background:var(--brass); margin:28px 0; opacity:.85; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }

/* botões */
.btn{
  display:inline-block; font-family:'Fraunces',serif; font-weight:600;
  font-size:14px; letter-spacing:.06em; padding:13px 24px; border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent; transition:all .25s var(--ease);
}
.btn--solid{ background:var(--brass); color:var(--ink); }
.btn--solid:hover{ background:var(--brass-2); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(199,154,85,.6); }
.btn--ghost{ border-color:var(--line); color:var(--bone); }
.btn--ghost:hover{ border-color:var(--brass); color:#f6f1e8; transform:translateY(-2px); }

/* =========================================================
   BOOKS
========================================================= */
.books{ max-width:var(--maxw); margin:0 auto; padding:clamp(30px,6vw,70px) clamp(18px,5vw,48px); }
.section-head{ margin-bottom:clamp(28px,5vw,56px); max-width:24ch; }

.book{
  display:grid; grid-template-columns:260px 1fr; gap:clamp(24px,4vw,56px);
  align-items:center; padding:clamp(28px,4vw,48px) 0;
  border-top:1px solid var(--line);
}
.book--alt{ grid-template-columns:1fr 260px; }
.book--alt .book__cover{ order:2; }
.book__cover{ position:relative; }
.book__cover img{
  width:100%; border-radius:3px;
  box-shadow:0 30px 60px -25px rgba(0,0,0,.85);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.book__cover img:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:0 45px 70px -25px rgba(0,0,0,.9); }
.book__title{
  font-family:'Fraunces',serif; font-weight:400; font-size:clamp(22px,3vw,32px);
  line-height:1.15; color:#f6f1e8; margin:0 0 12px; letter-spacing:-.01em;
}
.book__blurb{ color:var(--bone); margin:0 0 22px; max-width:54ch; font-size:17px; }

/* formatos / compra */
.formats{ display:flex; flex-wrap:wrap; gap:26px; }
.format__label{
  display:block; font-family:'Fraunces',serif; font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:8px;
}
.buy{ display:flex; align-items:center; gap:10px; }
.buy__main{
  font-family:'Fraunces',serif; font-weight:600; font-size:13px; letter-spacing:.04em;
  padding:9px 16px; border-radius:var(--radius);
  border:1px solid var(--brass); color:var(--brass-2); transition:all .25s var(--ease);
}
.buy__main:hover{ background:var(--brass); color:var(--ink); }
.buy__soon{ color:var(--bone-dim); font-style:italic; font-size:15px; }
.buy__more{ position:relative; }
.buy__more summary{
  list-style:none; cursor:pointer; font-size:12px; color:var(--bone-dim);
  padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius); transition:color .2s,border-color .2s;
}
.buy__more summary::-webkit-details-marker{ display:none; }
.buy__more summary:hover{ color:var(--bone); border-color:var(--brass); }
.buy__more[open] summary{ color:var(--brass); border-color:var(--brass); }
.buy__flags{
  position:absolute; z-index:20; top:calc(100% + 8px); left:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:7px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
  padding:12px; width:max-content; max-width:260px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.85);
  animation:pop .25s var(--ease);
}
@keyframes pop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.flagbtn img{ width:30px; height:21px; object-fit:cover; border-radius:3px; transition:transform .2s; }
.flagbtn:hover img{ transform:scale(1.12); }

/* encomenda BR */
.order{ margin-top:22px; }
.order__toggle{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:transparent; border:1px dashed var(--line); color:var(--bone);
  font-family:'Fraunces',serif; font-size:13px; letter-spacing:.04em;
  padding:9px 16px; border-radius:var(--radius); transition:border-color .2s,color .2s;
}
.order__toggle img{ width:22px; height:15px; border-radius:2px; }
.order__toggle:hover{ border-color:var(--brass); color:#f6f1e8; }
.order__panel{ margin-top:18px; padding:20px; background:var(--ink-2); border:1px solid var(--line); border-radius:8px; }
.order__note{ color:var(--bone-dim); font-size:14px; margin:0 0 14px; }

/* =========================================================
   FORMS
========================================================= */
.form{ display:flex; flex-direction:column; gap:14px; max-width:560px; }
.form__row{ display:flex; gap:14px; }
.form__row label{ flex:1; }
.form label{
  display:flex; flex-direction:column; gap:6px;
  font-family:'Fraunces',serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--bone-dim);
}
.form input, .form textarea{
  font-family:'Spectral',serif; font-size:16px; color:var(--bone);
  background:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  padding:11px 13px; transition:border-color .2s, box-shadow .2s;
}
.form input:focus, .form textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(199,154,85,.15);
}
.form .btn{ align-self:flex-start; margin-top:4px; }
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; }

.alert{ padding:11px 15px; border-radius:var(--radius); font-size:15px; margin-bottom:14px; }
.alert--ok{ background:rgba(120,140,90,.16); border:1px solid rgba(150,180,110,.4); color:#d7e0c2; }
.alert--err{ background:rgba(124,47,42,.18); border:1px solid rgba(160,70,60,.45); color:#e8c3bd; }

/* =========================================================
   ABOUT (painel de contraste em creme)
========================================================= */
.about{
  max-width:var(--maxw); margin:clamp(30px,6vw,60px) auto; padding:clamp(36px,5vw,64px) clamp(28px,5vw,64px);
  background:var(--paper); color:#2a221a; border-radius:8px;
  position:relative;
}
.about .kicker{ color:var(--blood); }
.about__text{
  font-family:'Fraunces',serif; font-weight:400; font-style:italic;
  font-size:clamp(19px,2.4vw,28px); line-height:1.5; color:#2a221a; margin:0; max-width:46ch;
}

/* =========================================================
   NEWS + CONTACT
========================================================= */
.news, .contact{ max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,72px) clamp(18px,5vw,48px); }
.news__text{ color:var(--bone); max-width:50ch; margin:0 0 26px; }
.news__form{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; max-width:520px; }
.news__form input[type=email]{
  flex:1; min-width:220px; font-family:'Spectral',serif; font-size:16px; color:var(--bone);
  background:var(--ink-2); border:1px solid var(--line); border-radius:var(--radius); padding:13px 15px;
  transition:border-color .2s, box-shadow .2s;
}
.news__form input[type=email]:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(199,154,85,.15); }
.news__msg{ flex-basis:100%; font-size:14px; color:var(--brass-2); margin:4px 0 0; min-height:1em; }

/* =========================================================
   FOOTER
========================================================= */
.foot{
  border-top:1px solid var(--line); margin-top:40px;
  padding:34px clamp(18px,5vw,48px); display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.foot__brand{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:.2em; color:#f6f1e8; }
.foot__copy{ color:var(--bone-dim); font-size:14px; }
.foot__top{ margin-left:auto; font-size:13px; color:var(--bone-dim); letter-spacing:.04em; }
.foot__top:hover{ color:var(--brass); }

/* =========================================================
   REVEAL (entrada suave)
========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   RESPONSIVO
========================================================= */
@media (max-width:820px){
  .nav__links{ display:none; }
  .hero__inner{ grid-template-columns:1fr; text-align:left; }
  .hero__portrait{ max-width:240px; }
  .book, .book--alt{ grid-template-columns:1fr; }
  .book--alt .book__cover{ order:0; }
  .book__cover{ max-width:220px; }
}
@media (max-width:520px){
  body{ font-size:17px; }
  .form__row{ flex-direction:column; }
  .buy__flags{ grid-template-columns:repeat(4,1fr); }
  .nav{ gap:14px; }
  .nav__brand{ font-size:14px; }
}