/* ============================================================
   A Oração do Quarto ao Lado — Adriani Silva
   Identidade: vinho #340418 · pêssego #F6AD95 · off-white
   ============================================================ */

@font-face {
  font-family: "Baskerville Old Face";
  src: url("../fonts/BaskervilleOldFace.woff2") format("woff2"),
       url("../fonts/BaskervilleOldFace.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --vinho: #340418;
  --vinho-fundo: #2c0414;
  --vinho-profundo: #21020e;
  --vinho-claro: #4a0a26;
  --pessego: #f6ad95;
  --pessego-suave: #e9a58e;
  --dourado: #c78a52;
  --off: #f7f1ee;
  --texto: rgba(247, 241, 238, .80);
  --texto-fraco: rgba(247, 241, 238, .62);
  --linha: rgba(246, 173, 149, .22);
  --linha-forte: rgba(246, 173, 149, .42);

  --serif: "Baskerville Old Face", "Baskerville", "Hoefler Text", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --borda-larga: clamp(1.25rem, 6vw, 2.5rem);
  --secao-y: clamp(4.5rem, 11vw, 8.5rem);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vinho-fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--pessego); text-decoration: none; }
a:hover { color: var(--off); }

:focus-visible {
  outline: 2px solid var(--pessego);
  outline-offset: 3px;
  border-radius: 4px;
}

.pular {
  position: absolute; left: -9999px; top: 0;
  background: var(--pessego); color: var(--vinho);
  padding: .75rem 1.25rem; z-index: 200; border-radius: 0 0 8px 0;
}
.pular:focus { left: 0; }

.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--borda-larga);
}
.container--estreito { max-width: 780px; }

/* ---------- tipografia ---------- */
.olho {
  font-size: .688rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pessego-suave);
  margin: 0 0 1.25rem;
  line-height: 1.6;
}
.olho--escuro { color: rgba(52, 4, 24, .66); }

.titulo-hero {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--off);
  font-size: clamp(3rem, 12.5vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.005em;
  margin: 0 0 1.75rem;
}
.titulo-hero em { font-style: italic; color: var(--pessego); }

.titulo {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--off);
  font-size: clamp(2rem, 6.6vw, 3rem);
  line-height: 1.16;
  margin: 0 0 1.5rem;
}
.titulo em { font-style: italic; color: var(--pessego); }
.titulo--centro { text-align: center; }

p { margin: 0 0 1.25rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--off); }

.seta { display: inline-block; font-size: .9em; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  font-family: var(--sans);
  font-size: .938rem;
  line-height: 1;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  text-align: center;
}
.btn--cheio {
  background: var(--pessego);
  color: var(--vinho);
  font-weight: 500;
}
.btn--cheio:hover { background: #ffc6b0; color: var(--vinho); transform: translateY(-1px); }
.btn--linha {
  border-color: var(--linha-forte);
  color: var(--pessego);
  background: transparent;
}
.btn--linha:hover { border-color: var(--pessego); color: var(--off); background: rgba(246, 173, 149, .08); }
.btn--grande { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn--pequeno { padding: .7rem 1.15rem; font-size: .813rem; }

.link-desce {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .938rem;
  color: var(--texto);
  border-bottom: 1px solid var(--linha-forte);
  padding-bottom: .35rem;
}
.link-desce:hover { color: var(--off); border-color: var(--pessego); }

.link-secundario {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--linha);
  padding-bottom: .3rem;
}
.link-secundario:hover { color: var(--pessego); border-color: var(--linha-forte); }

/* ---------- topo ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(44, 4, 20, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246, 173, 149, .14);
}
.topo__interno {
  max-width: 1120px;
  margin-inline: auto;
  padding: .95rem var(--borda-larga);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.marca { display: block; margin-right: auto; color: var(--off); }
.marca__nome {
  display: block;
  font-family: var(--serif);
  font-size: 1.188rem;
  line-height: 1.2;
}
.marca__livro {
  display: block;
  font-size: .563rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pessego-suave);
  margin-top: .25rem;
}
.marca:hover .marca__nome { color: var(--pessego); }

.nav { display: none; }

.menu-botao {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.menu-botao span {
  display: block;
  height: 1px;
  background: var(--pessego);
  transition: transform .3s ease, opacity .3s ease;
}
.menu-botao[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-botao[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.topo__cta { display: none; }

/* menu mobile aberto */
.nav.aberto {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--vinho-profundo);
  border-bottom: 1px solid var(--linha);
  padding: .75rem var(--borda-larga) 1.5rem;
}
.nav.aberto a {
  font-family: var(--serif);
  font-size: 1.375rem;
  color: var(--off);
  padding: .65rem 0;
  border-bottom: 1px solid rgba(246, 173, 149, .12);
}
.nav.aberto a:last-child { border-bottom: 0; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(3rem, 9vw, 5.5rem) 0 clamp(3.5rem, 9vw, 6rem);
  background:
    radial-gradient(120% 70% at 78% 8%, rgba(90, 17, 48, .55) 0%, rgba(44, 4, 20, 0) 62%),
    linear-gradient(180deg, #380620 0%, var(--vinho-fundo) 68%);
}
.hero__linha {
  font-size: 1.063rem;
  color: var(--texto);
  max-width: 34ch;
  margin-bottom: 1.5rem;
}
.hero__assinatura {
  font-size: .688rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 2.25rem;
}
.hero__assinatura strong { color: var(--pessego-suave); font-weight: 500; }
.hero__acoes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem 1.75rem;
}
.hero__figura { margin: 3rem 0 0; }
.hero__figura figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--texto-fraco);
  text-align: center;
  margin-top: 1.1rem;
}

/* moldura das imagens */
.moldura {
  position: relative;
  border: 1px solid var(--linha-forte);
  border-radius: 20px;
  overflow: hidden;
  background: var(--vinho);
  margin: 0;
}
.moldura img { width: 100%; }
.moldura--larga { aspect-ratio: 3 / 2; }
.moldura--larga img { height: 100%; object-fit: cover; }
.moldura--alta { aspect-ratio: 3 / 4; }
.moldura--alta img { height: 100%; object-fit: cover; object-position: center 32%; }
.moldura--hero { aspect-ratio: 4 / 5; }
.moldura--hero img { height: 100%; object-fit: cover; object-position: center 46%; }
.moldura--aberto { aspect-ratio: 4 / 5; }
.moldura--aberto img { height: 100%; object-fit: cover; }

/* ---------- faixa pêssego ---------- */
.faixa {
  background: var(--pessego);
  color: var(--vinho);
  padding: clamp(2.25rem, 7vw, 3.5rem) var(--borda-larga);
  text-align: center;
}
.faixa__texto {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 4.4vw, 1.5rem);
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
  margin-inline: auto;
}
.faixa__texto span { display: inline; }
.faixa__quebra { display: block; }
.losango { margin: 0 .55rem; color: rgba(52, 4, 24, .5); }

.faixa--mensagem { padding-block: clamp(3.25rem, 9vw, 5.5rem); }
.mensagem {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 5.4vw, 2rem);
  line-height: 1.35;
  color: var(--vinho);
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: 1.75rem;
}
.mensagem__assinatura {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.063rem;
  color: rgba(52, 4, 24, .78);
}

/* ---------- seções ---------- */
.secao { padding-block: var(--secao-y); }
.secao--livro { background: var(--vinho-fundo); }
.secao--pilares { background: var(--vinho); }
.secao--contracapa { background: var(--vinho-profundo); }
.secao--autora { background: var(--vinho); }
.secao--compra { background: var(--vinho-fundo); }
.secao--duvidas { background: var(--vinho-profundo); }

.livro__texto p { max-width: 62ch; }
.ficha {
  font-size: .813rem;
  letter-spacing: .06em;
  color: var(--texto-fraco);
  border-top: 1px solid var(--linha);
  padding-top: 1.25rem;
  margin-top: 2rem;
}
.livro__imagens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.75rem;
}

/* ---------- pilares ---------- */
.pilares {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.pilar {
  border-top: 1px solid var(--linha);
  padding-top: 1.75rem;
  margin-top: 1.75rem;
}
.pilar:first-child { margin-top: 0; }
.pilar__icone {
  width: 26px;
  height: 26px;
  color: var(--pessego);
  margin-bottom: 1.1rem;
}
.pilar h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--off);
  margin: 0 0 .75rem;
}
.pilar p { font-size: .938rem; color: var(--texto-fraco); max-width: 42ch; }

/* ---------- contracapa ---------- */
.citacao-contracapa {
  font-family: var(--serif);
  font-size: clamp(1.625rem, 6vw, 2.375rem);
  line-height: 1.25;
  color: var(--off);
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--linha-forte);
}
.assinatura-pequena {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.contracapa__grade > .moldura { margin-bottom: 2.5rem; }

/* ---------- autora ---------- */
.arco {
  margin: 0 0 2.5rem;
  border: 1.5px solid var(--pessego);
  border-radius: 999px 999px 22px 22px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 3 / 4;
  max-width: 420px;
}
.arco img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.autora__epigrafe {
  font-size: 1.063rem;
  color: var(--off);
  margin-bottom: 1.5rem;
}
.autora__texto p { max-width: 58ch; }
.autora__firma {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--pessego);
  margin-top: 2rem;
}

/* ---------- cartão de compra ---------- */
.cartao {
  border: 1px solid var(--linha-forte);
  border-radius: 26px;
  padding: clamp(2rem, 7vw, 3.25rem) clamp(1.35rem, 5vw, 3rem);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(90, 17, 48, .35) 0%, rgba(44, 4, 20, 0) 70%);
}
.cartao .olho { margin-bottom: 1rem; }
.cartao__linha {
  max-width: 34ch;
  margin-inline: auto;
  margin-bottom: 2rem;
  color: var(--texto);
}
.cartao__nota {
  font-size: .813rem;
  color: var(--texto-fraco);
  max-width: 38ch;
  margin-inline: auto;
  margin-top: 1.25rem;
}
.cartao__divisor {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: 2.25rem 0 2rem;
}
.cartao__pergunta { font-size: .938rem; margin-bottom: 1.25rem; }

.compra-simples {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.35rem;
}
.compra-formatos {
  display: grid;
  gap: 1rem;
  text-align: left;
}
.formato {
  border: 1px solid var(--linha);
  border-radius: 18px;
  padding: 1.5rem;
}
.formato__nome {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--off);
  margin: 0 0 .4rem;
}
.formato__linha {
  font-size: .875rem;
  color: var(--texto-fraco);
  margin-bottom: 1.25rem;
}
.formato .btn { width: 100%; }

/* ---------- FAQ ---------- */
.faq { margin-top: 2.5rem; }
.faq__item { border-top: 1px solid var(--linha); }
.faq__item:last-child { border-bottom: 1px solid var(--linha); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--off);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.125rem;
  color: var(--pessego);
  flex: none;
  transition: transform .25s ease;
}
.faq__item[open] summary::after { content: "–"; }
.faq__item summary:hover { color: var(--pessego); }
.faq__resposta {
  padding: 0 0 1.5rem;
  font-size: .938rem;
  color: var(--texto-fraco);
  max-width: 62ch;
}
.faq__resposta a { border-bottom: 1px solid var(--linha-forte); }

/* ---------- rodapé ---------- */
.rodape {
  background: var(--vinho-profundo);
  border-top: 1px solid var(--linha);
  padding-block: clamp(3rem, 8vw, 4.5rem) 2.5rem;
}
.rodape__grade { display: grid; gap: 2.25rem; }
.rodape__titulo {
  font-family: var(--serif);
  font-size: 1.625rem;
  color: var(--off);
  margin: 0 0 .5rem;
}
.rodape__linha { font-size: .875rem; color: var(--texto-fraco); }
.rodape__nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.rodape__nav a { font-size: .938rem; color: var(--texto); }
.rodape__nav a:hover { color: var(--pessego); }
.rodape__social { display: flex; gap: 1rem; }
.rodape__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--pessego);
}
.rodape__social a:hover { border-color: var(--pessego); background: rgba(246, 173, 149, .08); }
.rodape__social svg { width: 19px; height: 19px; }

.rodape__base {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(246, 173, 149, .12);
  font-size: .75rem;
  color: var(--texto-fraco);
}
.rodape__base p { margin-bottom: .5rem; }
.rodape__topo { display: inline-block; margin-top: .75rem; font-size: .813rem; }

/* ---------- entrada suave ---------- */
.revelar { opacity: 0; transform: translateY(18px); }
.revelar.visivel {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s ease;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (min-width: 640px) {
  .livro__imagens { grid-template-columns: 1.35fr 1fr; gap: 1.25rem; }
  .compra-formatos { grid-template-columns: 1fr 1fr; }
  .rodape__grade { grid-template-columns: 1fr auto; align-items: start; }
  .rodape__social { grid-column: 2; justify-content: flex-end; }
  .hero__figura { max-width: 480px; margin-inline: auto; }
}

/* ============================================================
   DESKTOP
   ============================================================ */
@media (min-width: 900px) {
  html { scroll-padding-top: 104px; }

  .nav {
    display: flex;
    gap: 2.25rem;
    margin-right: 2rem;
  }
  .nav a {
    font-size: .875rem;
    color: var(--texto);
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
  }
  .nav a:hover { color: var(--pessego); border-color: var(--linha-forte); }
  .topo__cta { display: inline-flex; }
  .menu-botao { display: none; }

  .hero { padding-block: clamp(4.5rem, 7vw, 7rem) clamp(5rem, 8vw, 8rem); }
  .hero__grade {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .hero__figura { margin: 0; max-width: none; }
  .titulo-hero { font-size: clamp(3.75rem, 5.4vw, 5rem); }

  .livro__grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
  }
  .livro__imagens { margin-top: 0; grid-template-columns: 1fr; gap: 1.25rem; }
  .livro__imagens .moldura--alta { display: none; }

  .titulo--centro-desktop { text-align: left; }
  .secao--pilares .titulo { max-width: 22ch; }

  .pilares {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 3.5rem;
    border-top: 1px solid var(--linha);
  }
  .pilar {
    border-top: 0;
    border-left: 1px solid var(--linha);
    margin-top: 0;
    padding: 2.5rem 2.25rem 0;
  }
  .pilar:first-child { border-left: 0; padding-left: 0; }
  .pilar:last-child { padding-right: 0; }

  .contracapa__grade {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
  }
  .contracapa__grade > .moldura { margin-bottom: 0; }
  .citacao-contracapa { padding-left: 1.75rem; }

  .autora__grade {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: center;
  }
  .arco { margin-bottom: 0; max-width: none; }

  .faixa__texto { max-width: none; }
  .faixa__quebra { display: inline; }
  .faixa__quebra::before { content: "◇"; color: rgba(52, 4, 24, .5); margin: 0 .55rem; }
  .mensagem { max-width: 28ch; }

  .cartao { padding: 3.5rem 3.5rem 3rem; }

  .rodape__grade { grid-template-columns: 1.4fr 1fr auto; align-items: center; }
  .rodape__nav { justify-content: center; }
  .rodape__social { grid-column: auto; justify-content: flex-end; }
  .rodape__base { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
  .rodape__base p { margin-bottom: 0; }
  .rodape__topo { margin-top: 0; margin-left: auto; }
}

@media (min-width: 1180px) {
  .titulo-hero { font-size: 5.25rem; }
}

/* ---------- acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar, .revelar.visivel { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- impressão ---------- */
@media print {
  .topo, .menu-botao, .hero__acoes, .cartao, .rodape__social { display: none !important; }
  body { background: #fff; color: #000; }
}