/* Maria & Turos Advogados Associados: coleção encadernada do escritório (LEITURA.md, seção 5).
   Couro preto e douração do logo; douração só sobre o couro; papel branco neutro (sem creme); magenta só nas fitas. */
:root {
  --fundo: #f5f5f3;
  --pagina: #ffffff;
  --tinta: #161513;
  --suave: #57534d;
  --linha: #dedbd5;
  --couro: #1a1816;
  --couro-2: #2b2825;
  --marca: #1a1816;
  --marca-2: #b8195f;
  --ouro: linear-gradient(180deg, #f1dc9a 0%, #d1a95a 48%, #a07a34 100%);
  --ouro-liso: #d4ae62;
  --ouro-texto: #e8cf8b;
  --fonte-titulo: "Libre Baskerville", Georgia, serif;
  --fonte-texto: "Poppins", system-ui, sans-serif;
  --raio: 4px;
}
body { background: var(--fundo); font-size: clamp(15px, 1vw, 17px); }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.01em; }
.rotulo { font: 600 12px/1.2 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }

/* botões: couro com letra dourada, como os botões dourados do site atual, invertidos */
.botao { --b-fundo: var(--couro); --b-tinta: var(--ouro-texto); border-radius: var(--raio); font-weight: 600; letter-spacing: .01em; }
.botao:hover { --b-fundo: #000; }
.link-seta { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-color: var(--marca-2); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link-seta svg { width: 1.1em; height: 1.1em; }

/* ===== cabeçalho ===== */
.topo { position: sticky; top: 0; z-index: 50; background: var(--couro); color: #eee9df; border-bottom: 1px solid #3a352f; }
.topo__linha { display: flex; align-items: center; gap: 28px; width: min(1280px, 100% - 2 * clamp(16px, 4vw, 48px)); margin-inline: auto; min-height: 76px; }
.topo__logo img { height: 84px; width: auto; margin-block: -4px; }
.topo__nav { display: flex; gap: 26px; margin-left: auto; font: 500 14px var(--fonte-texto); letter-spacing: .06em; text-transform: uppercase; }
.topo__nav a { padding: 8px 0; border-bottom: 1px solid transparent; }
.topo__nav a:hover { border-bottom-color: var(--ouro-liso); color: #fff; }
.topo__cta { --b-fundo: transparent; border-color: #6d5a33; padding: .8em 1.2em; font-size: .9rem; }
.topo__cta:hover { --b-fundo: #000; }

/* ===== abertura com a estante ===== */
.abertura { padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px); }
.abertura__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.abertura__texto { padding-bottom: 64px; }
.abertura h1 { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.12; }
.abertura__sub { margin-top: 22px; font-size: 1.08rem; color: var(--suave); max-width: 34ch; }
.abertura__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
.abertura__link { font-weight: 500; text-decoration: underline; text-decoration-color: var(--marca-2); text-decoration-thickness: 2px; text-underline-offset: 6px; padding: 10px 0; }

.estante-bloco { position: relative; }
.estante { display: flex; align-items: flex-end; gap: 5px; height: clamp(380px, 34vw, 470px); padding: 0 4px; }
.colecao { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 100%; flex: 42 1 0; min-width: 0; }
.lombada { position: relative; display: block; height: 100%; flex: calc(var(--n) + 4) 1 0; min-width: 44px; }
.estante > .lombada { flex: calc(var(--n) + 4) 1 0; }
.lombada--baixa { height: 80%; }
.lombada__corpo {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 15% 0 10px; border-radius: 3px 3px 2px 2px; overflow: hidden;
  background: linear-gradient(90deg, #0b0a09 0%, #2c2926 14%, #211f1c 46%, #2a2724 84%, #0b0a09 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .04), 0 2px 0 rgb(0 0 0 / .25);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s;
}
/* nervuras douradas em cima e embaixo */
.lombada__corpo::before, .lombada__corpo::after { content: ""; position: absolute; left: 12%; right: 12%; height: 7px; border-block: 2px solid var(--ouro-liso); opacity: .85; }
.lombada__corpo::before { top: 7%; }
.lombada__corpo::after { bottom: 21%; }
.lombada:hover .lombada__corpo, .lombada:focus-visible .lombada__corpo { transform: translateY(-12px); box-shadow: 0 16px 24px -14px rgb(0 0 0 / .6); }
.lombada:focus-visible { outline: none; }
.lombada:focus-visible .lombada__corpo { outline: 2px solid var(--marca-2); outline-offset: 2px; }
.lombada__titulo {
  position: absolute; top: 14%; left: 50%; translate: -50% 0; writing-mode: vertical-rl; max-height: 44%; overflow: visible; padding-inline: 4px; text-align: start; font: 700 clamp(12px, .95vw, 15px)/1.45 var(--fonte-titulo); letter-spacing: .06em; text-transform: uppercase;
  background: var(--ouro); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: normal;
}
.lombada--baixa .lombada__titulo { max-height: 56%; }
.lombada__mono { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; width: min(62%, 46px); height: auto; }
.cinta {
  position: absolute; z-index: 3; left: -10px; right: -10px; top: 61%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; padding: 8px 12px; background: var(--pagina); color: var(--tinta); text-align: center;
  border-block: 1px solid var(--tinta); box-shadow: 0 10px 18px -12px rgb(0 0 0 / .5); transition: transform .3s;
}
.cinta b { font: 400 clamp(17px, 1.5vw, 22px)/1.1 var(--fonte-titulo); }
.cinta span { margin-top: 4px; font-size: 13px; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }
.cinta:hover { transform: translateY(-2px); }
.prateleira { height: 14px; margin-top: -1px; background: linear-gradient(180deg, #3a342d, #221e1a); border-radius: 1px; box-shadow: 0 18px 22px -16px rgb(0 0 0 / .55); }
.estante__nota { margin-top: 16px; font-size: 13px; color: var(--suave); }

/* ===== livro aberto (base) ===== */
.livro { position: relative; padding: clamp(8px, 1vw, 12px); background: var(--couro); border-radius: 6px; box-shadow: 0 40px 60px -40px rgb(0 0 0 / .55); }
.livro__paginas {
  display: grid; grid-template-columns: 1fr 1fr; background: var(--pagina); border-radius: 2px;
  background-image: linear-gradient(90deg, transparent 0 46%, rgb(0 0 0 / .045) 48.6%, rgb(0 0 0 / .16) 50%, rgb(0 0 0 / .045) 51.4%, transparent 54% 100%);
  box-shadow: 0 2px 0 -1px #ecebe7, 0 4px 0 -2px #dcd9d3, 0 6px 0 -3px #ecebe7;
}
.pagina { padding: clamp(28px, 4vw, 64px); min-width: 0; }
.pagina--esq { padding-right: clamp(32px, 5vw, 76px); }
.pagina--dir { padding-left: clamp(32px, 5vw, 76px); }

/* folha de rosto com frontispício */
.rosto { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 104px); }
.frontispicio { margin: 0; display: grid; }
.frontispicio__foto { overflow: hidden; aspect-ratio: 4 / 5; background: #e9e6e1; }
.frontispicio__foto > div { height: 110%; }
.frontispicio__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.folha-rosto { display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; gap: 28px; padding-block: clamp(40px, 6vw, 88px); }
.folha-rosto h2 { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.folha-rosto__nome { font: 400 clamp(30px, 3.4vw, 50px)/1.05 var(--fonte-titulo); letter-spacing: .1em; text-transform: uppercase; }
.folha-rosto__sub { font: italic 400 clamp(17px, 1.5vw, 22px)/1.2 var(--fonte-titulo); color: var(--suave); }
.folha-rosto__areas { padding-block: 14px; border-block: 1px solid var(--linha); font-size: 14px; letter-spacing: .08em; }
.folha-rosto__autoras { font: 400 clamp(16px, 1.3vw, 19px)/1.7 var(--fonte-titulo); }
.folha-rosto__praca { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); line-height: 1.9; }

.apresentacao { max-width: 760px; margin: clamp(48px, 6vw, 88px) auto 0; }
.apresentacao h2 { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.15; margin-bottom: 26px; }
.apresentacao p { margin-top: 16px; font-size: 1.05rem; line-height: 1.75; }
.apresentacao b { font-family: var(--fonte-titulo); font-weight: 700; }
.apresentacao__fala { margin: 34px 0 0; padding: 0; }
.apresentacao__fala p { font: italic 400 clamp(20px, 1.8vw, 26px)/1.45 var(--fonte-titulo); }
.apresentacao__fala footer { margin-top: 10px; font-size: 13px; color: var(--suave); }
.apresentacao__fala a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== volumes por área ===== */
.areas { padding-block: clamp(56px, 7vw, 104px); background: #ecebe8; }
.sec-cab { max-width: 780px; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-cab h2 { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.12; }
.sec-cab p { margin-top: 14px; color: var(--suave); font-size: 1.05rem; }
.areas__livros { display: grid; gap: clamp(72px, 8vw, 120px); }
.livro--area .pagina--esq h3 { font-size: clamp(30px, 3vw, 46px); line-height: 1.1; }
.livro--area .pagina--esq p { margin-top: 20px; line-height: 1.75; }
.livro--area .pagina--esq .botao { margin-top: 30px; }
.livro--area .pagina--dir { padding-right: clamp(64px, 7vw, 104px); }
.servicos { list-style: none; margin: 18px 0 0; padding: 0; }
.servicos li { padding: 13px 0; border-bottom: 1px solid var(--linha); font: 400 clamp(16px, 1.2vw, 19px)/1.4 var(--fonte-titulo); }
.servicos li:first-child { border-top: 1px solid var(--linha); }
/* fita marcadora de seda */
.fita {
  position: absolute; z-index: 2; top: -8px; right: clamp(26px, 3.4vw, 46px); width: 22px; height: calc(100% + 58px); pointer-events: none;
  background: linear-gradient(90deg, #8f1249 0%, #c41f68 42%, #d8357b 52%, #a5164f 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 16px), 0 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .05);
}

/* ===== volumes finos ===== */
.finos { padding-block: clamp(56px, 7vw, 104px); }
.finos__lista { display: grid; }
.fino { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); padding-block: 30px; border-top: 1px solid var(--linha); }
.fino:last-child { border-bottom: 1px solid var(--linha); }
.capa {
  position: relative; width: 120px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px 8px 14px;
  background: linear-gradient(90deg, #0d0c0b 0 7%, #2a2724 9%, #1d1b19 60%, #24211e 100%); border-radius: 2px 4px 4px 2px;
  box-shadow: 0 14px 22px -14px rgb(0 0 0 / .6);
}
.capa::before { content: ""; position: absolute; inset: 8px 8px 8px 14px; border: 1px solid rgb(212 174 98 / .65); pointer-events: none; }
.capa__titulo { font: 700 12px/1.25 var(--fonte-titulo); letter-spacing: .01em; text-align: center; background: var(--ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.capa__mono { width: 30px; }
.fino h3 { font-size: clamp(22px, 2vw, 30px); }
.fino__texto > p { margin-top: 10px; color: var(--suave); max-width: 70ch; }
.fino__lista { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 12px; padding: 0; list-style: none; font: 400 15px/1.5 var(--fonte-titulo); }
.fino__lista li::before { content: "· "; color: var(--marca-2); }

/* ===== sócias nas orelhas da sobrecapa ===== */
.socias { padding-block: clamp(56px, 7vw, 104px); background: #ecebe8; }
.socias__fonte { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.orelhas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); max-width: 1000px; }
.orelha { position: relative; padding: clamp(22px, 2.4vw, 32px) clamp(26px, 3vw, 40px) clamp(28px, 3vw, 40px); background: var(--couro); color: #e7e2d8; border-radius: 2px; box-shadow: 0 30px 50px -36px rgb(0 0 0 / .7); }
/* vinco da dobra da orelha */
.orelha::before { content: ""; position: absolute; top: 0; bottom: 0; width: 18px; pointer-events: none; }
.orelha--a::before { left: 0; background: linear-gradient(90deg, rgb(0 0 0 / .65), rgb(255 255 255 / .07) 70%, transparent); }
.orelha--b::before { right: 0; background: linear-gradient(270deg, rgb(0 0 0 / .65), rgb(255 255 255 / .07) 70%, transparent); }
.orelha--b { margin-top: clamp(0px, 5vw, 72px); }
.orelha__foto { overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 24px; background: #2b2825; }
.orelha__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.orelha h3 { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.2; background: var(--ouro); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orelha__oab { margin: 8px 0 14px; font-weight: 600; font-size: 14px; letter-spacing: .06em; color: #fff; }
.orelha p:not(.orelha__oab) { font-size: 15px; line-height: 1.65; margin-top: 6px; color: #d8d3c9; }

/* ===== contato ===== */
.contato { padding-block: clamp(56px, 7vw, 104px) clamp(72px, 8vw, 120px); }
.contato h2 { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.18; }
.contato .pagina--esq > p { margin-top: 16px; color: var(--suave); }
.contato .pagina--esq .botao { margin-top: 26px; }
.endereco { margin: 34px 0 0; display: grid; gap: 14px; }
.endereco div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.endereco dt { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--suave); padding-top: 3px; }
.endereco dd { margin: 0; }
.endereco a { text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding-block: 4px; }
.form .campos { display: grid; gap: 22px; margin-top: 18px; }
.campo { display: grid; gap: 4px; }
.campo span { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--suave); }
.campo input { width: 100%; min-height: 48px; padding: 8px 2px; border: 0; border-bottom: 1.5px solid var(--tinta); border-radius: 0; background: transparent; font: 400 18px var(--fonte-titulo); }
.campo input:focus { outline: none; border-bottom-color: var(--marca-2); box-shadow: 0 2px 0 0 var(--marca-2); }
.form__enviar { margin-top: 30px; width: 100%; min-height: 52px; }
.form__ok p { font-size: 15px; }
.form__ok .link-seta { margin-top: 8px; }

/* ===== cólofon ===== */
.colofon { background: var(--couro); color: #d8d3c9; padding-block: clamp(48px, 6vw, 80px); }
.colofon__in { display: grid; grid-template-columns: 96px minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.colofon__marca { width: 96px; }
.colofon__titulo { font: 600 12px/1.2 var(--fonte-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--ouro-texto); margin-bottom: 12px; }
.colofon__texto p:not(.colofon__titulo) { font: italic 400 15px/1.75 var(--fonte-titulo); margin-top: 8px; }
.colofon a { text-decoration: underline; text-underline-offset: 3px; color: #f3eee4; display: inline-block; padding-block: 3px; }
.colofon__contato p { font-size: 14px; line-height: 1.7; }
.colofon__miudo { margin-top: 14px; font-size: 13px !important; color: #a9a398; }

/* ===== N4: títulos entram por palavra pelo motor; nada preso ===== */

/* ===== tablet ===== */
@media (max-width: 1000px) {
  .abertura__grade { grid-template-columns: 1fr; align-items: start; }
  .abertura__texto { padding-bottom: 0; }
  .estante { height: clamp(320px, 52vw, 420px); }
  .colofon__in { grid-template-columns: 72px 1fr; }
  .colofon__marca { width: 72px; }
  .colofon__contato { grid-column: 2; }
}
@media (max-width: 760px) {
  .topo__nav, .topo__cta { display: none; }
  .topo__linha { min-height: 64px; }
  .topo__logo img { height: 60px; margin-block: 0; }
  .livro__paginas { grid-template-columns: 1fr; background-image: none; }
  .pagina, .pagina--esq, .pagina--dir { padding: 26px 22px; }
  /* a dobra vira sombra entre as duas páginas empilhadas */
  .pagina--dir { background: linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .02) 14px, transparent 28px); }
  .livro--area .pagina--dir { padding-right: 58px; }
  .livro--area .pagina--esq { padding-right: 58px; }
  .fita { right: 16px; width: 18px; height: calc(100% + 44px); }
  .frontispicio__foto { aspect-ratio: 4 / 4.4; }
  .folha-rosto { padding-block: 34px; gap: 22px; }
  .orelhas { grid-template-columns: 1fr; }
  .orelha--b { margin-top: 0; }
  .fino { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .endereco div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .abertura { padding-top: 32px; }
  .abertura h1 { font-size: clamp(27px, 7.6vw, 34px); }
  .abertura__acoes { gap: 6px 20px; }
  .abertura__acoes .botao { width: 100%; }
  .abertura__link { min-height: 44px; display: inline-flex; align-items: center; }
  .estante { height: 310px; gap: 3px; padding: 0; }
  .colecao { gap: 3px; }
  
  .lombada__titulo { font-size: 12px; letter-spacing: .05em; }
  .lombada__mono { width: min(64%, 30px); }
  .cinta { left: -6px; right: -6px; min-height: 58px; }
  .cinta b { font-size: 16px; }
  .cinta span { font-size: 12px; }
  .estante__nota { font-size: 13px; }
  .colofon__in { grid-template-columns: 1fr; }
  .colofon__marca { width: 64px; }
  .colofon__contato { grid-column: auto; }
  .socias__fonte { display: inline-flex; min-height: 44px; align-items: center; }
  .fino .link-seta { min-height: 44px; }
  .apresentacao__fala a, .endereco a { min-height: 44px; display: inline-flex; align-items: center; }
}