/* Tamanhos em rem e breakpoints em em: acompanham a fonte padrão escolhida pelo usuário. */
:root {
  --black: #0A0A0A;
  --black-2: #121211;
  --line-dark: #2A2925;
  --white: #FAFAF7;
  --ink-on-dark: #F5F3EE;
  --lead-on-dark: #D6D2C8;
  --muted-dark: #BDBAB2;
  --muted-dark-2: #A8A49B;
  --caption-dark: #7E7A70;
  --text-footer: #8F8B81;
  --gold: #C6A15B;
  --gold-hover: #D9B87A;
  --gold-text: #8C6A2F;
  --body-muted: #57534A;
  --body-muted-2: #6B675E;
  --text-strong: #3B3831;
  --tick: #B9B4A8;
  --line-light: #E4E0D6;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font-display: "Jost", "Jost Fallback", sans-serif;
  --font-body: "Hanken Grotesk", "Hanken Fallback", sans-serif;
}

/* Fontes de reserva com a mesma largura média das webfonts (medido: Jost = 94,6% da Arial;
   Hanken Grotesk = 97,2% da Arial). Evita deslocamento de layout na troca de fonte. */
@font-face { font-family: "Jost Fallback"; src: local("Arial"); size-adjust: 94.6%; ascent-override: 107%; descent-override: 37.5%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Fallback"; src: local("Arial"); size-adjust: 97.2%; }

* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--white); color: var(--black); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; }
a { color: inherit; }
img, svg { display: block; }
h1, h2 { text-wrap: balance; }

.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 10; padding: .75rem 1rem; background: var(--gold); color: var(--black); font-family: var(--font-display); font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 1rem; }

.w { width: 100%; max-width: 77.5rem; margin: 0 auto; padding-inline: clamp(1rem, 4.5vw, 3.5rem); }
.j { font-family: var(--font-display); }
.cap { font-family: var(--font-display); font-size: .75rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }

/* Header */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.site-header .w { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 6rem; }
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: #FFFFFF; }
.brand span { font-size: .75rem; font-weight: 400; letter-spacing: .34em; line-height: 1.5; text-transform: uppercase; }
.navl { display: flex; gap: 2.25rem; }
.navl a { text-decoration: none; font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark); min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-display); }
.header-contact { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-size: .8125rem; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--gold); font-family: var(--font-display); }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--black); color: var(--ink-on-dark); padding: 12.5rem 0 0; }
.mono-hero { position: absolute; right: -6%; bottom: -14%; width: min(68vw, 58.75rem); height: auto; pointer-events: none; animation: rise 1.2s var(--ease-out) backwards; }
@keyframes rise { from { transform: translate(4%, 6%); opacity: 0; } }
@keyframes rise-fade { from { opacity: 0; } }
.hero .w { position: relative; }
.hero-kicker { margin: 0 0 2.5rem; color: var(--gold); }
.hero h1 { margin: 0; max-width: 61.25rem; font-size: clamp(3.25rem, 8.4vw, 7.75rem); font-weight: 300; line-height: .98; letter-spacing: -.035em; }
.hero h1 span { color: var(--gold); }
.hero-lead { margin: 2.75rem 0 0; max-width: 32.5rem; font-size: 1.1875rem; line-height: 1.6; color: var(--muted-dark); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; margin: 3rem 0 7.5rem; }
.cta-gold { display: inline-flex; align-items: center; gap: .875rem; min-height: 56px; padding: 0 1.75rem; background: var(--gold); color: var(--black); text-decoration: none; font-family: var(--font-display); font-size: .875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; transition: background .2s ease, transform 160ms var(--ease-out); border: 0; cursor: pointer; }
.cta-gold:active { transform: scale(0.97); }
.cta-line { display: inline-flex; align-items: center; min-height: 56px; color: var(--ink-on-dark); text-decoration: none; font-family: var(--font-display); font-size: .875rem; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1px solid var(--gold); }

/* Faixa de fatos: opaca, acima do monograma decorativo, para o texto nunca ficar sobre ele */
.facts-band { position: relative; z-index: 1; background: var(--black); border-top: 1px solid var(--line-dark); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.facts > div { padding: 1.75rem 1.5rem 2.25rem 0; }
.facts .cap { margin: 0 0 .5rem; color: var(--caption-dark); }
.facts .j { margin: 0; font-size: 1.375rem; font-weight: 400; }

/* Section heads */
.section { padding: clamp(6rem, 11vw, 10rem) 0; }
.section-dark { background: var(--black); color: var(--ink-on-dark); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 4rem; }
.section-head p.lede { margin: 0; max-width: 23.75rem; color: var(--body-muted); }
.section-dark .section-head p.lede { color: var(--muted-dark-2); }
.kicker { margin: 0 0 1.25rem; color: var(--gold-text); }
.section-dark .kicker { color: var(--gold); }
h2.title { margin: 0; font-family: var(--font-display); font-size: clamp(2.5rem, 5.4vw, 4.75rem); font-weight: 300; line-height: 1; letter-spacing: -.03em; }

/* Ledger */
.ticks { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); align-items: end; height: 3.5rem; border-bottom: 1px solid var(--black); }
.tick { display: flex; justify-content: center; }
.tick i { display: block; width: 1px; height: 10px; background: var(--tick); }
.tick.mark { flex-direction: column; align-items: center; gap: .375rem; }
.tick.mark b { font-family: var(--font-display); font-size: .75rem; font-weight: 500; color: var(--gold-text); }
.tick.mark i { width: 2px; height: 28px; background: var(--gold); }
.ledger-row { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 11.25rem; gap: 2rem; align-items: baseline; padding: 1.75rem 0; border-bottom: 1px solid var(--line-light); }
.ledger-day { margin: 0; font-family: var(--font-display); font-size: 2.75rem; font-weight: 300; line-height: 1; letter-spacing: -.02em; }
.ledger-title { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 600; }
.ledger-desc { margin: 0; color: var(--body-muted); }
.ledger-tag { margin: 0; color: var(--gold-text); text-align: right; }
.ledger-note { margin: 1.5rem 0 0; font-size: .875rem; color: var(--body-muted-2); }

/* Exceções */
.exc-list { border-bottom: 1px solid var(--line-dark); }
.exc-btn { width: 100%; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 3rem; gap: 1.5rem; align-items: center; min-height: 6.5rem; padding: 1.25rem 0; background: none; border: 0; border-top: 1px solid var(--line-dark); color: var(--ink-on-dark); text-align: left; cursor: pointer; font: inherit; }
.exc-n { font-family: var(--font-display); font-size: .875rem; font-weight: 500; letter-spacing: .2em; color: var(--gold); }
.exc-t { font-family: var(--font-display); font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; transition: color .2s ease; }
.exc-sign { justify-self: end; font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--gold); }
.exc-body { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 0 0 2.5rem; }
.exc-body[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .exc-body { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  @starting-style { .exc-body { opacity: 0; transform: translateY(-6px); } }
}
@media (prefers-reduced-motion: reduce) {
  .exc-body { transition: opacity 200ms ease; }
  @starting-style { .exc-body { opacity: 0; } }
}
.exc-lead { margin: 0; font-size: 1.1875rem; line-height: 1.55; color: var(--lead-on-dark); }
.exc-body ul { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.exc-body li { padding: .625rem 0; border-top: 1px solid var(--line-dark); font-size: .9375rem; color: var(--muted-dark); }

/* Serviços (índice) */
.index-head { padding-bottom: 2rem; border-bottom: 2px solid var(--black); }
.index-meta { margin: 0; font-family: var(--font-display); font-size: .9375rem; letter-spacing: .2em; text-transform: uppercase; color: var(--body-muted); }
.index { columns: 3; column-gap: 3.5rem; }
.index-group { break-inside: avoid; margin: 0 0 2.5rem; }
.index-group h3 { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .75rem; padding-bottom: .625rem; border-bottom: 1px solid var(--gold); font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; }
.index-group h3 small { font-size: .8125rem; color: var(--gold-text); }
.index-group ul { margin: 0; padding: 0; list-style: none; }
.index-group li { padding: .3125rem 0; font-size: .9375rem; line-height: 1.45; color: var(--text-strong); }

/* Como começamos */
.steps-section { padding: 0 0 clamp(6rem, 11vw, 10rem); }
.steps-wrap { padding-top: 3.5rem; border-top: 1px solid var(--line-light); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.step-n { margin: 0 0 1rem; font-family: var(--font-display); font-size: 3.5rem; font-weight: 300; line-height: 1; color: var(--gold-text); }
.step-t { margin: 0 0 .375rem; font-weight: 600; font-size: 1.1875rem; }
.step-d { margin: 0; color: var(--body-muted); font-size: .9375rem; }

/* Sobre */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: end; }
.photo-ph { display: flex; align-items: flex-end; min-height: 32.5rem; padding: 2rem; border: 1px solid var(--line-dark); background: var(--black-2); color: var(--muted-dark-2); font-size: .875rem; }
.about-lead { margin: 0 0 2.5rem; max-width: 32.5rem; color: var(--muted-dark); }
.people { border-top: 1px solid var(--gold); }
.people p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 1.125rem 0; border-bottom: 1px solid var(--line-dark); }
.people span:first-child { font-weight: 600; }
.people span:last-child { color: var(--muted-dark-2); }

/* Contato */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5rem; align-items: start; }
.contact h2.title { font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: .98; letter-spacing: -.035em; margin-bottom: 2rem; }
.contact-lead { margin: 0 0 3rem; max-width: 26.25rem; color: var(--body-muted); }
.contact-rows { border-top: 1px solid var(--black); }
.contact-rows p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 1.125rem 0; border-bottom: 1px solid var(--line-light); }
.contact-rows .cap { color: var(--body-muted-2); }
.contact-rows span:last-child { font-weight: 600; }
form { display: flex; flex-direction: column; gap: 2rem; padding-top: .5rem; }
.frow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.uf { display: flex; flex-direction: column; gap: .25rem; font-family: var(--font-display); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--body-muted-2); }
.uf input, .uf select, .uf textarea { font-family: var(--font-body); font-size: 1.1875rem; letter-spacing: 0; text-transform: none; color: var(--black); background: transparent; border: 0; border-bottom: 1px solid var(--black); padding: .625rem 0; min-height: 48px; border-radius: 0; }
.uf input:focus, .uf select:focus, .uf textarea:focus { border-bottom: 2px solid var(--black); }
.uf input[aria-invalid="true"] { border-bottom: 2px solid #A3281B; }
.field-error { display: block; min-height: 1.4em; font-family: var(--font-body); font-size: .875rem; letter-spacing: 0; text-transform: none; color: #A3281B; }
.form-foot { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.check { display: flex; gap: .75rem; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--text-strong); }
.check input { width: 20px; height: 20px; accent-color: var(--gold-text); }
.form-status { margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--gold-text); color: var(--text-strong); font-size: .9375rem; }
.form-status:empty { display: none; }
.form-note { margin: 0; font-size: .8125rem; color: var(--body-muted-2); }

/* Rodapé */
.site-footer { padding: 4.5rem 0 2.5rem; background: var(--black); color: var(--text-footer); font-size: .875rem; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.foot-brand { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; color: #FFFFFF; }
.foot-brand span { font-family: var(--font-display); font-size: .75rem; letter-spacing: .34em; line-height: 1.5; text-transform: uppercase; }
.foot p { margin: 0; }
.foot .cap { margin: 0 0 1rem; color: var(--gold); }
.foot-links { line-height: 2.2; }
.foot-links a { text-decoration: none; }
.stamp { margin: 3.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: .75rem; color: var(--text-footer); }

/* Hover só em dispositivos com ponteiro fino (evita hover preso no toque) */
@media (hover: hover) and (pointer: fine) {
  .navl a:hover { color: #FFFFFF; }
  .cta-gold:hover { background: var(--gold-hover); }
  .exc-btn:hover .exc-t { color: var(--gold); }
}

@media (max-width: 60em) {
  .navl { display: none; }
  .ledger-row { grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem 1.25rem; }
  .ledger-tag { grid-column: 2; text-align: start; }
  .exc-body { grid-template-columns: 1fr; }
  .exc-body > span:first-child { display: none; }
  .index { columns: 2; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about, .contact { grid-template-columns: 1fr; gap: 3rem; }
  .ticks { display: none; }
}
@media (max-width: 38.75em) {
  .facts, .frow, .foot, .steps { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 1fr; gap: .375rem; }
  .ledger-tag { grid-column: auto; }
  .exc-btn { grid-template-columns: 2.5rem minmax(0, 1fr) 2rem; gap: .75rem; min-height: 5.5rem; }
  .exc-t { font-weight: 400; }
  .index { columns: 1; }
  .mono-hero { width: 120vw; right: -40%; bottom: -6%; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .mono-hero { animation-name: rise-fade; } }

/* Retrato da contadora */
.portrait { margin: 0; }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 859; object-fit: cover; border: 1px solid var(--line-dark); background: #121211; }
.portrait figcaption { margin-top: .75rem; font-family: var(--font-display); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dark-2); }
.contact-rows a { color: inherit; text-decoration-color: var(--gold-text); text-underline-offset: .2em; }