:root {
  /* Paleta oficial Acto */
  --areia: #CFC2B1;
  --marfim: #DEDAD4;
  --taupe: #A2937A;
  --vinho: #531820;
  --vinho-escuro: #380D12;
  --ouro: #C39A5D;
  --ouro-escuro: #8D672D;
  --ouro-grad: linear-gradient(90deg, #8D672D, #C39A5D);
  --papel: #EFEAE2;

  --f-main: "Ragna", system-ui, sans-serif;
  --f-display: "Blosta", Georgia, serif;
  --f-script: "Blosta Script", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--vinho-escuro);
  color: var(--marfim);
  font-family: var(--f-main);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: 999px;
  font: 600 16px/1 var(--f-main); letter-spacing: .04em; text-decoration: none;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), background .2s, color .2s, box-shadow .2s;
}
.botao:hover { transform: translateY(-2px); }
.botao:active { transform: scale(.97); }
.botao:focus-visible, .lv-seta:focus-visible, .menu a:focus-visible, summary:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.botao-ouro { background: var(--ouro-grad); color: var(--vinho-escuro); box-shadow: 0 6px 22px rgba(0,0,0,.35); }
.botao-ouro:hover { box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.botao-contorno { border: 1px solid rgba(222,218,212,.45); color: var(--marfim); min-height: 42px; padding: 0 20px; font-size: 14px; }
.botao-contorno:hover { border-color: var(--ouro); color: var(--ouro); }

/* Topo */
.topo {
  position: absolute; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px clamp(18px, 4vw, 48px);
}
.marca { display: flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; color: var(--ouro); }
.marca-acto { font-family: var(--f-display); font-size: 30px; letter-spacing: .06em; }
.marca-hub { font-size: 9px; letter-spacing: .6em; margin-top: 4px; padding-left: .6em; }
.menu { display: flex; gap: 32px; }
.menu a { text-decoration: none; font-size: 15px; letter-spacing: .04em; opacity: .85; }
.menu a:hover { opacity: 1; color: var(--ouro); }
@media (max-width: 720px) { .menu { display: none; } }

/* ============ 1. Carrossel de livro ============ */
.livro {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: max(680px, 100svh); overflow: hidden; outline: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 80% at 50% 38%, #6A1F29 0%, var(--vinho) 45%, var(--vinho-escuro) 100%);
  padding-top: 84px;
}
.livro:focus-visible { box-shadow: inset 0 0 0 2px var(--ouro); }
.lv-head { text-align: center; padding: 0 20px; }
.lv-title { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(44px, 7vw, 96px); line-height: 1; color: var(--marfim); letter-spacing: .01em; }
.lv-meta { margin: 10px 0 0; font-size: clamp(14px, 1.4vw, 18px); color: var(--areia); }

.lv-stage { position: relative; touch-action: pan-y; cursor: grab; margin-top: 8px; }
.lv-stage[data-drag] { cursor: grabbing; }
.lv-floor {
  position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 1.4); height: calc(var(--h) * .5);
  transform: translate(-50%, calc(var(--h) * .12)); pointer-events: none;
  background: radial-gradient(closest-side, rgba(20,3,6,.7), rgba(20,3,6,0));
}
.lv-view { position: absolute; inset: 0; perspective: calc(var(--w) * 2.3); perspective-origin: 50% 46%; }
.lv-scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.lv-item { position: absolute; left: 0; top: 0; transform-style: preserve-3d; visibility: hidden; }
.lv-page {
  position: absolute; top: calc(var(--h) * -.5); width: calc(var(--w) * .5); height: var(--h); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--papel);
}
.lv-page[data-side=l] { left: calc(var(--w) * -.5); transform-origin: 100% 50%; border-radius: calc(var(--w) * .03) 0 0 calc(var(--w) * .03); }
.lv-page[data-side=r] { left: 0; transform-origin: 0 50%; border-radius: 0 calc(var(--w) * .03) calc(var(--w) * .03) 0; }
.lv-sheet { position: absolute; top: 0; width: var(--w); height: var(--h); pointer-events: none; }
.lv-page[data-side=l] > .lv-sheet { left: 0; }
.lv-page[data-side=r] > .lv-sheet { left: calc(var(--w) * -.5); }
.lv-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lv-gutter { position: absolute; inset: 0; }
.lv-page[data-side=l] .lv-gutter { background: linear-gradient(90deg, transparent 82%, rgba(56,13,18,.08) 93%, rgba(56,13,18,.28)); }
.lv-page[data-side=r] .lv-gutter { background: linear-gradient(270deg, transparent 82%, rgba(56,13,18,.08) 93%, rgba(56,13,18,.28)); }
.lv-shade { position: absolute; inset: 0; background: #1c0508; opacity: var(--s, 0); }

/* Card provisório em HTML (some quando a arte final entra em servicos.js) */
.lv-card { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; color: var(--vinho); }
.lv-l, .lv-r { display: flex; flex-direction: column; justify-content: center; padding: 0 9%; }
.lv-l { align-items: flex-start; border-right: 0; }
.lv-r { align-items: flex-start; }
.lv-cat { font-family: var(--f-script); color: var(--ouro-escuro); font-size: calc(var(--w) * .04); line-height: 1.1; }
.lv-nome { font-family: var(--f-main); font-weight: 700; font-size: calc(var(--w) * .052); line-height: 1.05; margin-top: .45em; }
.lv-det { margin-top: .6em; font-size: calc(var(--w) * .022); color: #6d4b44; }
.lv-tag { font-family: var(--f-display); font-size: calc(var(--w) * .026); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-escuro); }
.lv-preco { font-weight: 700; font-size: calc(var(--w) * .075); line-height: 1; margin-top: .25em; white-space: nowrap; }
.lv-preco small { font-size: .42em; font-weight: 600; margin-left: .1em; }
.lv-ate { margin-top: .9em; font-size: calc(var(--w) * .02); color: #6d4b44; }

@media (max-width: 639px) and (orientation: portrait) {
  .lv-l, .lv-r { padding: 0 11%; }
  .lv-cat { font-size: calc(var(--w) * .07); }
  .lv-nome { font-size: calc(var(--w) * .085); }
  .lv-det, .lv-ate { font-size: calc(var(--w) * .04); }
  .lv-tag { font-size: calc(var(--w) * .04); }
  .lv-preco { font-size: calc(var(--w) * .1); }
}

.lv-bar { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); padding: 10px 16px 0; position: relative; z-index: 2; }
.lv-seta {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--marfim); color: var(--vinho); box-shadow: 0 4px 14px rgba(0,0,0,.3);
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.lv-seta:hover { transform: translateY(-2px); }
.lv-seta:active { transform: scale(.94); }
.lv-seta svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lv-info { display: flex; flex-direction: column; align-items: center; min-width: min(320px, 52vw); text-align: center; }
.lv-nome-atual { font-weight: 600; font-size: 16px; }
.lv-count { font-size: 13px; color: var(--taupe); letter-spacing: .1em; }
.lv-cta-wrap { display: flex; justify-content: center; padding: 16px 0 clamp(24px, 4vh, 44px); }

/* ============ 2. Quem é a Acto ============ */
.titulo { font-family: var(--f-display); font-weight: 400; font-size: clamp(38px, 5vw, 64px); line-height: 1.05; margin: 0 0 28px; color: var(--marfim); }
.acto {
  background: var(--marfim); color: var(--vinho-escuro);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px);
  padding: clamp(72px, 10vw, 140px) clamp(20px, 6vw, 96px);
}
.acto .titulo { color: var(--vinho); }
.acto p { margin: 0 0 18px; max-width: 56ch; }
.acto .lead { font-size: clamp(20px, 2vw, 24px); line-height: 1.45; color: var(--vinho); }
.areas { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(83,24,32,.2); }
.areas li { padding: 18px 16px 18px 0; border-bottom: 1px solid rgba(83,24,32,.2); display: flex; flex-direction: column; }
.areas strong { color: var(--vinho); font-size: 17px; }
.areas span { font-size: 15px; color: #6d4b44; }
.time-titulo { font-family: var(--f-script); font-weight: 400; font-size: 34px; color: var(--ouro-escuro); margin: 0 0 18px; }
.time-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pessoa { margin: 0; }
.pessoa img { aspect-ratio: 4/5; object-fit: cover; width: 100%; height: auto; border-radius: 14px; }
.pessoa figcaption { display: flex; flex-direction: column; padding-top: 10px; line-height: 1.3; }
.pessoa strong { color: var(--vinho); font-size: 18px; }
.pessoa span { font-size: 14px; }
@media (max-width: 900px) {
  .acto { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .areas { grid-template-columns: 1fr; }
  .time-grade { gap: 12px; }
}

/* ============ 3. FAQ ============ */
.faq { padding: clamp(72px, 10vw, 140px) clamp(20px, 6vw, 96px); max-width: 980px; margin: 0 auto; }
.faq-lista { border-top: 1px solid rgba(222,218,212,.2); }
.faq details { border-bottom: 1px solid rgba(222,218,212,.2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 28px; font-weight: 300; color: var(--ouro); transition: transform .25s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ouro); }
.faq details p { margin: 0 0 24px; color: var(--areia); max-width: 70ch; }

/* Rodapé */
.rodape { text-align: center; padding: clamp(64px, 8vw, 110px) 20px 48px; background: var(--vinho); }
.rodape-chamada { font-family: var(--f-display); font-size: clamp(30px, 4vw, 48px); margin: 0 0 24px; line-height: 1.1; }
.rodape-contato { margin: 28px 0 0; color: var(--areia); font-size: 16px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rodape-contato a { text-decoration: none; }
.rodape-contato a:hover { color: var(--ouro); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .botao, .lv-seta { transition: none; }
}