/* Júlio Santos — escritor
   Paleta extraída da capa de "Cinco Vidas, Cinco Histórias" (9 Out 2026) */
:root{
  --papel:#FBF8F5;        /* fundo quente, tirado da luz da capa */
  --areia:#D7BEAE;        /* areia quente — 17% da capa */
  --areia-clara:#EFE3D9;
  --azul-po:#98A9BC;      /* azul-pó — 20% da capa, o dominante */
  --azul:#4A6A88;         /* versão legível do azul-pó */
  --azul-fundo:#3C5670;
  --castanho:#483738;     /* castanho escuro — 15% da capa */
  --toupeira:#836F66;
  --tinta:#292A2E;
  --linha:#E4D8CE;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:"Source Serif 4",Georgia,serif; font-size:19px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.sans{font-family:"Jost",system-ui,sans-serif; font-weight:400}
h1,h2,h3{color:var(--castanho); line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6vw,3.4rem); letter-spacing:.01em}
h2{font-size:clamp(1.5rem,3.6vw,2.1rem); margin-top:0}
h3{font-size:1.15rem; letter-spacing:.04em; text-transform:uppercase; color:var(--toupeira)}
p{margin:0 0 1.1em}
a{color:var(--azul)}
a:hover{color:var(--azul-fundo)}
img{max-width:100%; height:auto; display:block}
.env{max-width:var(--max); margin:0 auto; padding:0 20px}
section{padding:clamp(48px,8vw,88px) 0}
.fundo-areia{background:var(--areia-clara)}
.fundo-azul{background:var(--azul-fundo); color:#F4F1EE}
.fundo-azul h2,.fundo-azul h3{color:#fff}
.fundo-azul a{color:#D9E4EF}

/* cabeçalho */
header{border-bottom:1px solid var(--linha); background:var(--papel); position:sticky; top:0; z-index:9}
.barra{display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--max); margin:0 auto; padding:14px 20px; flex-wrap:wrap}
.marca{font-family:"Jost",sans-serif; font-size:1.05rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--castanho); text-decoration:none; white-space:nowrap}
nav{display:flex; gap:22px; flex-wrap:wrap}
nav a{font-family:"Jost",sans-serif; font-size:.92rem; letter-spacing:.06em;
  text-decoration:none; color:var(--toupeira)}
nav a:hover,nav a[aria-current="page"]{color:var(--azul); text-decoration:underline; text-underline-offset:5px}

/* herói */
.heroi{display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,56px); align-items:center}
@media(min-width:860px){ .heroi{grid-template-columns:1.05fr .95fr} .heroi.inverso>div:first-child{order:2} }
.sobretitulo{font-family:"Jost",sans-serif; text-transform:uppercase; letter-spacing:.2em;
  font-size:.82rem; color:var(--toupeira); margin:0 0 14px}
.lema{font-size:clamp(1.15rem,2.4vw,1.5rem); font-style:italic; color:var(--castanho);
  border-left:3px solid var(--azul-po); padding-left:20px; margin:26px 0}
.capa{border-radius:3px; box-shadow:0 18px 50px -18px rgba(41,42,46,.45)}
.retrato{border-radius:50%; width:clamp(190px,30vw,280px); aspect-ratio:1; object-fit:cover;
  object-position:50% 18%; border:7px solid var(--areia-clara);
  box-shadow:0 14px 36px -16px rgba(41,42,46,.4); margin:0 auto}

/* botões */
.accoes{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px}
.btn{display:inline-block; font-family:"Jost",sans-serif; font-size:1rem; letter-spacing:.05em;
  padding:15px 30px; border-radius:2px; text-decoration:none; border:1.5px solid var(--azul);
  transition:.18s}
.btn-cheio{background:var(--azul); color:#fff}
.btn-cheio:hover{background:var(--azul-fundo); border-color:var(--azul-fundo); color:#fff}
.btn-vazio{color:var(--azul); background:transparent}
.btn-vazio:hover{background:var(--azul); color:#fff}

/* grelhas */
.grelha{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cartao{background:var(--papel); border:1px solid var(--linha); border-radius:3px; padding:26px}
.fundo-areia .cartao{background:#fff}
.cartao h3{margin-top:0}
.cartao p:last-child{margin-bottom:0}
.etiqueta{display:inline-block; font-family:"Jost",sans-serif; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.14em; padding:5px 11px; border-radius:2px;
  background:var(--areia); color:var(--castanho); margin-bottom:14px}

/* temas */
.temas{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none}
.temas li{font-family:"Jost",sans-serif; font-size:.9rem; padding:7px 15px;
  border:1px solid var(--azul-po); border-radius:999px; color:var(--castanho)}

/* onde comprar */
.lojas{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.lojas li{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:16px 20px; background:#fff; border:1px solid var(--linha); border-radius:3px; flex-wrap:wrap}
.fundo-azul .lojas li{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18)}
.lojas .nome{font-family:"Jost",sans-serif; letter-spacing:.04em}

/* perguntas */
details{border-bottom:1px solid var(--linha); padding:18px 0}
details summary{cursor:pointer; font-family:"Jost",sans-serif; font-size:1.08rem;
  color:var(--castanho); list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+ "; color:var(--azul); font-weight:600}
details[open] summary::before{content:"– "}
details .resposta{padding-top:12px}
details p:last-child{margin-bottom:0}

/* evento */
.evento{display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap}
.data-caixa{font-family:"Jost",sans-serif; text-align:center; background:var(--azul);
  color:#fff; border-radius:3px; padding:16px 20px; min-width:92px}
.data-caixa .dia{display:block; font-size:2rem; line-height:1}
.data-caixa .mes{display:block; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase}

/* rodapé */
footer{background:var(--castanho); color:#E8DFD8; padding:52px 0 36px; font-size:.95rem}
footer a{color:var(--areia)}
footer .grelha{gap:32px}
footer h3{color:var(--areia); font-size:.84rem}
.creditos{border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:20px;
  font-size:.84rem; color:#BFB1A8}
.contactos{list-style:none; padding:0; margin:0}
.contactos li{margin-bottom:9px}

/* ficha tecnica do livro — numeros em tabela, para serem extraidos */
.ficha{width:100%; border-collapse:collapse; margin:20px 0 0; font-size:.95rem}
.ficha th,.ficha td{text-align:left; vertical-align:top; padding:11px 0;
  border-bottom:1px solid var(--linha)}
.ficha th{font-family:"Jost",sans-serif; font-weight:400; color:var(--toupeira);
  letter-spacing:.03em; width:32%; padding-right:18px}
@media(max-width:560px){
  .ficha,.ficha tbody,.ficha tr,.ficha th,.ficha td{display:block; width:auto}
  .ficha th{padding-bottom:0; border:0}
  .ficha td{padding-top:3px}
}

/* trecho de um conto */
.trecho{margin:26px 0 0; padding:28px 30px; background:#fff; border:1px solid var(--linha);
  border-left:3px solid var(--azul-po); border-radius:3px}
.fundo-areia .trecho{background:#FDFBF9}
.trecho p{font-family:"Source Serif 4",Georgia,serif; margin:0 0 1em}
.trecho p:last-of-type{margin-bottom:0}
.trecho .grito{font-family:"Jost",sans-serif; letter-spacing:.08em}
.trecho-fonte{font-size:.88rem; color:var(--toupeira); margin:14px 0 0}

/* lista de titulos dentro de um cartao de obra */
.obras-lista{margin:14px 0 16px; padding-left:20px}
.obras-lista li{margin-bottom:6px}

/* credito de producao no rodape */
.producao{display:block; margin-top:10px}

/* os cinco contos, pela ordem do livro */
.contos{margin:14px 0 0; padding-left:1.25em}
.contos li{margin-bottom:8px}
.contos .nota{color:var(--toupeira); font-size:.92rem}

/* entrada por inscricao, no cartao do evento */
.inscricao{margin-top:10px; font-size:.95rem; color:var(--toupeira)}

/* formulario de inscricao na sessao */
.form-inscricao{background:var(--papel); border:1px solid var(--linha); border-radius:3px;
  padding:28px; margin-top:34px; max-width:680px}
.form-inscricao h3{margin-top:0; text-transform:none; font-size:1.2rem; color:var(--castanho)}
.form-intro{color:var(--toupeira); margin-top:.5em}
.form-campos{display:grid; gap:18px; margin-top:22px}
.form-campos label{display:block}
.form-campos label > span{display:block; font-family:"Jost",sans-serif; font-size:.82rem;
  letter-spacing:.04em; color:var(--toupeira); margin-bottom:7px}
.form-campos input,.form-campos textarea{width:100%; padding:12px 14px; font:inherit;
  color:var(--tinta); background:#fff; border:1px solid var(--linha); border-radius:3px}
.form-campos input:focus-visible,.form-campos textarea:focus-visible{outline:2px solid var(--azul);
  outline-offset:1px; border-color:var(--azul)}
.form-campos .invalido{border-color:#9B3B2F}
.form-par{display:grid; gap:18px; grid-template-columns:1fr}
@media(min-width:560px){.form-par{grid-template-columns:1fr 1fr}}
.form-rgpd{font-size:.86rem; color:var(--toupeira); margin:0}
.form-consent{display:flex; gap:11px; align-items:flex-start; font-size:.92rem}
.form-consent input{width:auto; margin-top:3px; flex:0 0 auto}
.form-campos button{justify-self:start; cursor:pointer}
.form-ok{border-left:3px solid var(--azul); padding-left:18px}
.form-ok h3{margin-bottom:.4em}
.form-erro{color:#9B3B2F; margin-top:16px}

/* pagina legal — privacidade */
.destaque{font-size:1.1rem; color:var(--castanho)}
.legal h2{margin-top:1.8em; font-size:clamp(1.25rem,2.6vw,1.6rem)}
.legal .temas{margin-bottom:1em}

/* pagina de encomenda */
.passos{margin:16px 0 0; padding-left:1.3em}
.passos li{margin-bottom:12px}
.nota-pagamento{margin-top:18px; padding:14px 18px; background:var(--areia-clara);
  border-radius:3px; font-size:.95rem}
.fundo-areia .form-inscricao{background:#fff}