/* ============================================================
   Dockplace v3.2 — dark premium baseado no logo
   Quase-preto navy em camadas + ouro contido (hairlines, labels, CTA)
   Display: Cormorant · Wordmark: Cinzel · Corpo: IBM Plex Sans · Números: IBM Plex Mono
   ============================================================ */

/* ---------- Fontes ---------- */
@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant-600-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("fonts/cinzel-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans-600-normal.woff2") format("woff2");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-500-normal.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --n950: #070c16;        /* navy mais fundo — footer, vales */
  --n900: #0a111e;        /* base do site */
  --n850: #0d1726;        /* painéis */
  --panel: #111c2e;       /* cartões/superfícies elevadas */

  --gold: #c9a063;        /* ouro do wordmark */
  --gold-b: #e6c388;      /* ouro claro — brilho do gradiente do logo */
  --bronze: #b8672a;      /* bronze do gradiente — carimbos/ênfase no papel */

  --hairline: color-mix(in srgb, var(--gold) 20%, transparent);
  --hairline-strong: color-mix(in srgb, var(--gold) 38%, transparent);

  --paper: #f5efe3;       /* papel do documento */
  --paper-ink: #232a38;

  --text: #c4cdda;        /* corpo sobre escuro */
  --text-dim: #8c97aa;
  --title: #eef1f6;       /* títulos sobre escuro */

  --brand: "Cinzel", "Times New Roman", serif;
  --display: "Cormorant", Georgia, serif;
  --corpo: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;

  --larg: 70rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ondas do logo como textura de marca */
  --ondas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='26' viewBox='0 0 86 26'%3E%3Cpath d='M0 13 Q10.75 6 21.5 13 T43 13 T64.5 13 T86 13' fill='none' stroke='%23C9A063' stroke-opacity='.13' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ---------- Reset curto ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--n900);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
a { color: inherit; }
::selection { background: var(--gold); color: var(--n900); }

/* ---------- Label (eyebrow) ---------- */
.label {
  font-family: var(--mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem var(--pad);
  background: color-mix(in srgb, var(--n900) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-brand {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--brand);
  font-weight: 700; font-size: 1.02rem; letter-spacing: .18em;
  color: var(--gold); text-decoration: none;
}
.topbar-brand img { width: 2rem; height: 2rem; }

/* ---------- Botões ---------- */
.btn {
  display: inline-block;
  font-family: var(--corpo);
  font-weight: 600; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; text-decoration: none;
  color: #0b1120;
  background: linear-gradient(135deg, var(--gold-b), var(--gold) 60%, #b68c50);
  padding: 1rem 2rem;
  border: none; border-radius: 2px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-b) 45%, transparent),
              0 12px 30px -14px color-mix(in srgb, var(--gold) 55%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-b) 60%, transparent),
              0 16px 36px -14px color-mix(in srgb, var(--gold) 70%, transparent);
}
.btn:focus-visible { outline: 2px solid var(--gold-b); outline-offset: 3px; }
.btn-small { font-size: .72rem; padding: .6rem 1.15rem; }
.btn-whats { font-size: .88rem; padding: 1.1rem 2.4rem; }

.cta-group { margin-top: 2.5rem; }
.cta-note {
  margin-top: .8rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
  color: var(--text-dim);
}

/* ---------- Hero (foto full-bleed + véu) ---------- */
.hero {
  position: relative;
  display: flex; align-items: center;
  min-height: min(92vh, 58rem);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--n900) 96%, transparent) 0%,
      color-mix(in srgb, var(--n900) 78%, transparent) 40%,
      color-mix(in srgb, var(--n900) 10%, transparent) 70%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--n900) 45%, transparent),
      transparent 30%,
      color-mix(in srgb, var(--n900) 92%, transparent) 100%),
    url("images/hero-bg.webp") center 40% / cover no-repeat var(--n900);
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7rem) var(--pad) clamp(4.5rem, 10vw, 7rem);
}
.plate {
  display: inline-block;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .26em;
  color: var(--gold);
  border: 1px solid var(--hairline-strong);
  padding: .45rem .9rem;
  margin-bottom: 2.25rem;
  border-radius: 2px;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.7rem, 6.2vw, 4.7rem);
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--title);
}
.hero h1 em {
  font-style: italic; font-weight: 600;
  background: linear-gradient(120deg, var(--gold-b), var(--gold));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero h1, .hero-sub { text-shadow: 0 2px 22px rgba(7,12,22,.85); }
.hero-sub {
  margin-top: 1.75rem;
  max-width: 33rem;
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--text);
}
.hero-visual-tag {
  position: absolute; bottom: 1.4rem; right: var(--pad); z-index: 1;
  margin: 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .3em;
  color: color-mix(in srgb, var(--gold) 45%, transparent);
}

/* ---------- Seções ---------- */
.section {
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(4rem, 10vw, 7.5rem) var(--pad);
}
.section + .section, main > .section:first-of-type { border-top: 1px solid color-mix(in srgb, var(--gold) 10%, transparent); }
.section-head { max-width: 40rem; margin-bottom: 3rem; }
.section-head h2, .cta-final h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: .005em;
  color: var(--title);
}
.section-head p { margin-top: 1rem; color: var(--text-dim); }
.section-head strong { color: var(--text); }

/* ---------- Transparência (foto full-bleed + véu) ---------- */
.transp {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--gold) 10%, transparent);
  background:
    linear-gradient(95deg,
      color-mix(in srgb, var(--n900) 96%, transparent) 0%,
      color-mix(in srgb, var(--n900) 78%, transparent) 44%,
      color-mix(in srgb, var(--n900) 8%, transparent) 72%,
      color-mix(in srgb, var(--n900) 25%, transparent) 100%),
    linear-gradient(180deg, var(--n900), transparent 28%, transparent 72%, var(--n900)),
    url("images/transparencia-wide.webp") center 58% / cover no-repeat var(--n900);
}
.transp-inner {
  max-width: var(--larg);
  margin: 0 auto;
  padding: clamp(5rem, 13vw, 9rem) var(--pad);
}
.transp-texto { max-width: 34rem; margin-bottom: 0; }
.transp-texto p + p { margin-top: .85rem; }
.transp-texto h2, .transp-texto p { text-shadow: 0 2px 22px rgba(7,12,22,.85); }
.transp-tag {
  position: absolute; bottom: 1.4rem; right: var(--pad);
  margin: 0;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .3em;
  color: color-mix(in srgb, var(--gold) 55%, transparent);
}

/* ---------- Passos ---------- */
.passo-lista {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 2.5rem 2rem;
}
@media (min-width: 64rem) {
  .passo-lista { grid-template-columns: repeat(5, 1fr); }
}
.passo {
  counter-increment: passo;
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
}
.passo::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .2em;
  color: var(--gold);
}
.passo h3 {
  font-family: var(--corpo); font-weight: 600; font-size: .92rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--title);
  line-height: 1.4;
  margin: .6rem 0 .55rem;
}
.passo p { font-size: .92rem; color: var(--text-dim); }

/* ---------- Sócios ---------- */
.socio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
  max-width: 46rem;
  margin: 0 auto;
}
.socio-foto {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  background: var(--n850);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  margin-bottom: 1.2rem;
}
.socio h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.45rem;
  color: var(--title);
}
.socio p { margin-top: .4rem; font-size: .93rem; color: var(--text-dim); }

/* ---------- FAQ ---------- */
.faq-lista { max-width: 46rem; margin: 0 auto; }
.faq details { border-top: 1px solid color-mix(in srgb, var(--gold) 14%, transparent); }
.faq details:last-child { border-bottom: 1px solid color-mix(in srgb, var(--gold) 14%, transparent); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-weight: 500; font-size: 1rem;
  color: var(--title);
  padding: 1.25rem 0;
  transition: color .18s ease;
}
.faq summary:hover { color: var(--gold-b); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--mono); font-size: 1.1rem; color: var(--gold);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "−"; }
.faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.faq details p { padding: 0 0 1.4rem; color: var(--text-dim); max-width: 42rem; }

/* ---------- CTA final ---------- */
.cta-final {
  position: relative;
  text-align: center;
  padding: clamp(6rem, 14vw, 11rem) var(--pad);
  background:
    linear-gradient(180deg,
      var(--n900) 0%,
      color-mix(in srgb, var(--n900) 45%, transparent) 38%,
      color-mix(in srgb, var(--n950) 50%, transparent) 78%,
      var(--n950) 100%),
    url("images/hero-wide.webp") center 62% / cover no-repeat;
  border-top: 1px solid color-mix(in srgb, var(--gold) 10%, transparent);
}
.cta-final h2 { text-shadow: 0 2px 24px rgba(7,12,22,.85); }
.cta-final .cta-note { color: color-mix(in srgb, var(--text) 85%, transparent); text-shadow: 0 1px 12px rgba(7,12,22,.9); }
.cta-final h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.cta-final .cta-group { display: flex; flex-direction: column; align-items: center; }

/* ---------- Footer ---------- */
.footer {
  background: var(--n950);
  color: var(--text-dim);
  border-top: 1px solid var(--hairline);
  padding: 3rem var(--pad) 3.5rem;
  font-size: .84rem;
  text-align: center;
}
.footer p + p { margin-top: .45rem; }
.footer-brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--brand); font-weight: 700; font-size: .95rem;
  letter-spacing: .2em; color: var(--gold);
  margin-bottom: .5rem;
}
.footer-brand img { width: 1.7rem; height: 1.7rem; }

/* ---------- Reveals (progressive enhancement) ---------- */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
html.js .reveal.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 46rem) {
  /* no mobile o texto cobre a foto inteira — véu mais fechado */
  .hero {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--n900) 88%, transparent),
        color-mix(in srgb, var(--n900) 72%, transparent) 55%,
        var(--n900) 100%),
      url("images/hero-mobile.webp") center 30% / cover no-repeat var(--n900);
  }
  .transp {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--n900) 90%, transparent),
        color-mix(in srgb, var(--n900) 74%, transparent) 60%,
        var(--n900) 100%),
      url("images/transparencia-mobile.webp") center / cover no-repeat var(--n900);
  }
  .plate { font-size: .62rem; letter-spacing: .18em; }
  .btn-whats { text-align: center; }
}