/* Hallmark · genre: editorial · macrostructure: Letter · theme: custom-earth
 * design-system: design.md · designed-as-app
 * nav: N9 · footer: Ft6 · enrichment: none
 * pre-emit critique: P4 H4 E4 S4 R4 V4
 * audience: mães e mulheres LBT · use: WhatsApp · tone: soft
 * palette: terroso — ocre / carmim / marrom (mesmas relações L/C da soft cool)
 */

:root {
  /* papel: ocre amarelo (hue ~97) — evita cast pêssego/rosa de hues ~80–88 */
  --color-paper: oklch(93% 0.055 97);
  --color-paper-2: oklch(88% 0.065 95);
  --color-paper-3: oklch(84% 0.070 93);
  /* tinta: marrom */
  --color-ink: oklch(28% 0.040 52);
  --color-ink-2: oklch(39% 0.036 50);
  --color-muted: oklch(50% 0.032 68);
  --color-rule: oklch(83% 0.030 88);
  /* títulos: entre marrom e carmim */
  --color-heading: oklch(34% 0.085 38);
  /* acento CTA: carmim terroso (não rosa) */
  --color-accent: oklch(44% 0.115 30);
  --color-accent-deep: oklch(36% 0.105 28);
  --color-accent-ink: oklch(97% 0.018 92);
  --color-band-deep: oklch(28% 0.04 52);
  --color-focus: oklch(44% 0.115 30);

  --font-display: "Copse", "Iowan Old Style", Georgia, serif;
  --font-body: "Baskervville", "Iowan Old Style", Georgia, serif;

  --display-weight: 400;
  --tracking-display: -0.01em;

  --text-xs: 0.75rem;
  --text-sm: 0.9rem;
  --text-md: 1.125rem;
  --text-lg: 1.35rem;
  --text-xl: 1.7rem;
  --text-display: clamp(1.7rem, 2.6vw + 0.75rem, 2.45rem);
  --text-display-s: clamp(1.4rem, 1.8vw + 0.7rem, 1.85rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --measure: 42rem; /* ~672px reading column inside the shell */
  --shell-max: 48rem; /* header + content + footer share this frame */
  --page-gutter: clamp(1.25rem, 4vw, 2.25rem);
  --radius-soft: 10px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 220ms;
  --dur-reveal: 480ms;

  /* sombra de relevo das slips (quase sólida, com peso) */
  --slip-shadow: drop-shadow(-5px 5px 0 oklch(28% 0.06 48 / 0.55))
    drop-shadow(-2px 2px 0 oklch(28% 0.05 48 / 0.4));

  --papeleta-shadow:
    rgba(14, 63, 126, 0.06) 0px 0px 0px 1px,
    rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px,
    rgba(42, 51, 70, 0.04) 0px 2px 2px -1px,
    rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px,
    rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px,
    rgba(42, 51, 70, 0.03) 0px 10px 10px -5px,
    rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;

  --band-relief-up:
    0 -1px 0 rgb(0 0 0 / 0.2),
    0 -3px 5px -1px rgb(0 0 0 / 0.34);
  --band-relief-down:
    0 1px 0 rgb(0 0 0 / 0.2),
    0 3px 5px -1px rgb(0 0 0 / 0.34);
  --band-relief-sides:
    -1px 0 0 rgb(0 0 0 / 0.2),
    -3px 0 5px -1px rgb(0 0 0 / 0.34),
    1px 0 0 rgb(0 0 0 / 0.2),
    3px 0 5px -1px rgb(0 0 0 / 0.34);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  color-scheme: light;
}

body {
  margin: 0;
  background-color: var(--color-paper-2);
  background-image: url("../images/bg-large.jpg");
  background-image: image-set(
    url("../images/bg-large.webp") type("image/webp"),
    url("../images/bg-large.jpg") type("image/jpeg")
  );
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* One shared frame: header, content and footer align.
   Outside = bg-large fixo; inside = coluna ocre. */
.site-shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  min-height: 100dvh;
  background: var(--color-paper);
  border-inline: 1px solid var(--color-rule);
  display: flex;
  flex-direction: column;
}

.site-shell > main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 40rem) {
  body {
    background-image: none;
    background-color: var(--color-paper);
    background-attachment: scroll;
  }

  .site-shell {
    max-width: none;
    border-inline: none;
    min-height: auto;
  }

  .letter,
  .prose-page {
    padding-bottom: 0;
  }
}

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

a {
  color: var(--color-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-2xs) var(--space-sm);
  z-index: 100;
}

.skip-link:focus {
  left: var(--page-gutter);
}

/* ---------- N9 · Edge-aligned ---------- */

.nav-edge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--page-gutter);
  background-color: var(--color-accent);
  border-bottom: 1px solid rgb(0 0 0 / 0.12);
  color: var(--color-accent-ink);
}

.nav-edge .wordmark {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: var(--text-md);
  color: var(--color-accent-ink);
  text-decoration: none;
  letter-spacing: var(--tracking-display);
  min-width: 0;
  overflow-wrap: anywhere;
}

.nav-edge .cta-outline {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid oklch(97% 0.018 92 / 0.75);
  border-radius: var(--radius-soft);
  color: var(--color-accent-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  background: transparent;
  transition: background var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}

.nav-edge .cta-outline svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

.nav-edge .cta-outline:hover {
  background: var(--color-accent-ink);
  color: var(--color-accent);
}

/* ---------- Letter / Long Document (fill the shell) ---------- */

.letter,
.prose-page {
  max-width: none;
  margin-inline: 0;
}

.letter {
  /* h1 vive no .top-band — sem padding-top extra */
  padding: 0 var(--page-gutter) 0;
}

.prose-page {
  /* h1 vive no .top-band — sem padding-top extra */
  padding: 0 var(--page-gutter) 0;
}

/* Faixa topo: nav + h1 (textura só no mobile) */
.top-band__inner {
  padding: var(--space-lg) var(--page-gutter) 0;
}

.letter-open {
  margin-bottom: 0;
}

.letter-meta {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-muted);
  letter-spacing: 0.04em;
}

.letter h1,
.top-band h1,
.prose-page h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: var(--text-display);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  margin: 0 0 var(--space-md);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.top-band h1 {
  margin-bottom: var(--space-md);
}

/* Desktop: lede com foto flutuante dentro da papeleta */
.intro-pair {
  margin-bottom: var(--space-lg);
}

.lede-float {
  float: left;
  width: 6.5rem;
  max-width: 6.5rem;
  margin: 0 var(--space-sm) var(--space-xs) 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  background: #fff;
  line-height: 0;
}

.lede-float__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

.lede-slip::after {
  content: "";
  display: table;
  clear: both;
}

/* Desktop: foto do about oculto; h2 flui normal */
.portrait--about {
  display: none;
}

.about-head {
  display: contents;
}

.letter .lede,
.prose-page .lede {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-ink);
  margin: 0;
}

.prose-page > .lede {
  margin-bottom: var(--space-lg);
}

/* Visual de slip — semântica própria (figure / p), não é .papeleta */
.portrait-frame {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 9.5rem;
  height: fit-content;
  align-self: start;
  background: #fff;
  border: 1px solid var(--color-rule);
  clip-path: polygon(0.5% 0%, 100% 0.35%, 99.5% 100%, 0% 99.5%);
  filter: var(--slip-shadow);
  line-height: 0;
  font-size: 0;
}

.portrait-frame .portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  vertical-align: top;
}

.lede-slip {
  padding: var(--space-sm) var(--space-md);
  background: #fff;
  border: 1px solid var(--color-rule);
  box-shadow: var(--papeleta-shadow);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--color-ink);
  overflow: hidden;
}

@media (max-width: 40rem) {
  /* Mobile: esconde foto externa do lede legado */
  .portrait--lede {
    display: none;
  }

  .intro-pair {
    display: block;
    margin-bottom: var(--space-lg);
  }

  .portrait--about {
    display: block;
  }

  .about-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .about-head h2 {
    margin: 0;
    min-width: 0;
    line-height: 1.2;
    /* compensação óptica da serif (sobe um pouco no box) */
    transform: translateY(0.06em);
  }

  .about-head .portrait--about {
    flex-shrink: 0;
    width: 6.5rem;
    max-width: 6.5rem;
    border-radius: 50%;
    clip-path: none;
    overflow: hidden;
    border: 1px solid var(--color-rule);
    filter: none;
  }

  .about-head .portrait--about .portrait {
    border-radius: 50%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .letter-open {
    animation: letter-in var(--dur-reveal) var(--ease-out) both;
  }
}

@keyframes letter-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .letter-open {
    animation: none;
  }
}

/* Continuous sections — ritmo natural, sem mar de vazio */
.letter-section,
.prose-section {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-rule);
}

.letter-section:first-of-type,
.prose-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.letter-section + .letter-section,
.prose-section + .prose-section {
  margin-top: var(--space-sm);
}

.letter h2,
.prose-page h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: normal;
  font-size: var(--text-display-s);
  line-height: 1.25;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-md);
  color: var(--color-heading);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}

.prose-page h2.contato-block__title,
.letter h2.contato-block__title {
  color: var(--color-accent-ink);
}

.letter p,
.prose-page p {
  margin: 0 0 1.15em;
  color: var(--color-ink);
}

.letter p:last-child,
.prose-page p:last-child {
  margin-bottom: 0;
}

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

/* ---------- Papeleta (li) ---------- */

.topicos {
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}

.papeleta {
  color: var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  background: #fff;
  border: 1px solid var(--color-rule);
  box-shadow: var(--papeleta-shadow);
  /* bordas irregulares ≤ ~3° */
  clip-path: polygon(0.4% 0.35%, 99.6% 0%, 100% 99.5%, 0% 100%);
}

.papeleta a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklch, var(--color-accent) 45%, transparent);
}

.papeleta a:not(.btn):hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.contato-block__copy .btn {
  color: var(--color-accent-ink);
}

.faq-hint {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
}

.faq-hint a {
  color: var(--color-ink-2);
}

.faq-list {
  display: grid;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-list h2 {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2xs);
}

.faq-list p {
  margin: 0;
}

/* Variações leves de ângulo (≤3°) — reutilizadas por slips / papeletas */
.paper-map-1 { clip-path: polygon(0% 0.4%, 99.5% 0%, 100% 99.4%, 0.4% 100%); }
.paper-map-2 { clip-path: polygon(0.5% 0%, 100% 0.35%, 99.5% 100%, 0% 99.5%); }
.paper-map-3 { clip-path: polygon(0% 0.5%, 99.7% 0%, 100% 99.6%, 0.3% 100%); }
.paper-map-4 { clip-path: polygon(0.45% 0%, 100% 0.3%, 99.4% 100%, 0% 99.55%); }
.paper-map-5 { clip-path: polygon(0% 0.25%, 99.6% 0%, 100% 99.7%, 0.35% 100%); }
.paper-map-6 { clip-path: polygon(0.35% 0.4%, 100% 0%, 99.55% 100%, 0% 99.45%); }
.paper-map-7 { clip-path: polygon(0% 0%, 99.65% 0.35%, 100% 99.5%, 0.4% 100%); }
.paper-map-8 { clip-path: polygon(0.4% 0%, 100% 0.25%, 99.5% 100%, 0% 99.6%); }
.paper-map-9 { clip-path: polygon(0% 0.35%, 99.7% 0%, 100% 99.55%, 0.3% 100%); }

/* Soft primary CTA */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 44px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius-soft);
  border: none;
  transition: background var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}

.btn:hover {
  background: var(--color-accent-deep);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.btn svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

.btn-row {
  margin-top: var(--space-md);
}

/* ---------- Contato — componente isolado ---------- */

.contato-block {
  display: block;
}

.contato-block__title {
  margin: 0 0 var(--space-md);
  line-height: 1.2;
}

.contato-block__sheet {
  padding: 0;
  background: transparent;
  border: none;
  filter: none;
  clip-path: none;
}

.contato-block__copy {
  overflow: visible;
}

.contato-block__copy.papeleta {
  background: var(--color-paper);
}

.contato-block__copy::after {
  content: "";
  display: table;
  clear: both;
}

.contato-block__photo {
  float: left;
  width: 6.5rem;
  max-width: 6.5rem;
  margin: 0 var(--space-sm) var(--space-xs) 0;
  padding: 0;
  border-radius: 50%;
  clip-path: none;
  overflow: hidden;
  filter: none;
  background: #fff;
  border: 1px solid var(--color-rule);
  line-height: 0;
  font-size: 0;
}

.contato-block__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 50%;
}

.contato-block__copy p:last-child {
  margin-bottom: 0;
}

.contato-block__copy .btn-row {
  clear: both;
  padding-top: var(--space-xs);
}

@media (min-width: 40.01rem) {
  :root {
    --folha-band-texture:
      linear-gradient(
        color-mix(in oklch, var(--color-accent) 50%, transparent),
        color-mix(in oklch, var(--color-accent) 50%, transparent)
      ),
      url("../images/folha.jpg");
    --folha-band-texture: linear-gradient(
        color-mix(in oklch, var(--color-accent) 50%, transparent),
        color-mix(in oklch, var(--color-accent) 50%, transparent)
      ),
      image-set(
        url("../images/folha.webp") type("image/webp"),
        url("../images/folha.jpg") type("image/jpeg")
      );
  }

  .site-shell {
    box-shadow: var(--band-relief-sides);
  }

  .nav-edge {
    background-color: var(--color-accent);
    background-image: var(--folha-band-texture);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: var(--band-relief-down);
  }

  .letter,
  .prose-page {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  #contato {
    background-color: var(--color-accent);
    background-image: var(--folha-band-texture);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-inline: calc(var(--page-gutter) * -1);
    margin-top: auto;
    margin-bottom: 0;
    padding-inline: var(--page-gutter);
    padding-top: var(--space-lg);
    padding-bottom: 0;
    border-top: 1px solid rgb(0 0 0 / 0.12);
    box-shadow: var(--band-relief-up);
  }

  #contato > h2,
  #contato .contato-block__title {
    color: var(--color-accent-ink);
  }

  #contato .foot-letter {
    border-top-color: oklch(97% 0.02 92 / 0.28);
    padding-bottom: 0;
  }

  #contato:has(.crumb-bar) .foot-letter {
    margin-bottom: var(--space-md);
  }

  #contato:not(:has(.crumb-bar)) .foot-letter {
    padding-bottom: var(--space-md);
  }

  #contato .foot-letter__heading,
  #contato .foot-letter__links a {
    color: var(--color-accent-ink);
    border-bottom-color: oklch(97% 0.02 92 / 0.35);
  }

  #contato .foot-letter__links a:hover {
    color: #fff;
    border-bottom-color: #fff;
  }

  #contato .foot-letter__links li::marker {
    color: var(--color-accent-ink);
  }

  #contato .crumb-bar {
    margin-inline: calc(var(--page-gutter) * -1);
    margin-bottom: 0;
    width: auto;
  }
}

/* Breadcrumb — rodapé do painel, largura total (dentro de #contato) */
.crumb-bar {
  flex-shrink: 0;
  width: 100%;
  margin-top: 0;
  padding: var(--space-sm) var(--page-gutter);
  background-color: var(--color-band-deep);
  background-image: none;
  border-top: 1px solid rgb(0 0 0 / 0.28);
  box-shadow: var(--band-relief-up);
  color: var(--color-accent-ink);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.crumb-bar ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
}

.crumb-bar li + li::before {
  content: "›";
  margin-right: var(--space-3xs);
  color: oklch(97% 0.018 92 / 0.65);
}

.crumb-bar a {
  color: var(--color-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid oklch(97% 0.02 92 / 0.45);
}

.crumb-bar a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* Related links */
.related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.related a {
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--color-accent) 40%, transparent);
}

.related a:hover {
  border-bottom-color: var(--color-accent);
}

/* ---------- Footer links (dentro de #contato) ---------- */

.foot-letter {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
}

.foot-letter__heading {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-md);
  line-height: 1.3;
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  margin: 0 0 var(--space-sm);
}

.foot-letter__links {
  list-style: disc;
  margin: 0;
  padding-left: 1.25em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
}

.foot-letter__links a {
  color: var(--color-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--color-rule);
}

.foot-letter__links a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ---- Mobile-only (final cascade) — textura contínua / contato ---- */
@media (max-width: 40rem) {
  :root {
    --mobile-texture:
      linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.1)),
      url("../images/bg-mobile.jpg");
    --mobile-texture: linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.1)),
      image-set(
        url("../images/bg-mobile.webp") type("image/webp"),
        url("../images/bg-mobile.jpg") type("image/jpeg")
      );
  }

  .letter,
  .prose-page {
    padding-top: var(--space-md);
    padding-bottom: 0;
  }

  /* Faixa topo: nav + h1 com textura mobile */
  .top-band {
    background-color: var(--color-accent);
    background-image: var(--mobile-texture);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    border-bottom: 1px solid rgb(0 0 0 / 0.22);
    box-shadow: var(--band-relief-down);
  }

  .top-band .nav-edge {
    background: transparent;
    border-bottom: none;
  }

  .top-band__inner {
    padding: var(--space-sm) var(--page-gutter) var(--space-md);
  }

  .top-band h1 {
    margin: 0;
    color: var(--color-accent-ink);
  }

  #contato {
    background-color: var(--color-accent);
    background-image: var(--mobile-texture);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-inline: calc(var(--page-gutter) * -1);
    margin-bottom: 0;
    margin-top: var(--space-sm);
    padding-inline: var(--page-gutter);
    padding-top: var(--space-lg);
    padding-bottom: 0;
    border-top: 1px solid rgb(0 0 0 / 0.22);
    box-shadow: var(--band-relief-up);
    color: var(--color-accent-ink);
  }

  #contato > h2,
  #contato .contato-block__title {
    color: var(--color-accent-ink);
  }

  #contato:not(:has(.contato-block)) p,
  #contato:not(:has(.contato-block)) strong {
    color: var(--color-accent-ink);
  }

  #contato:not(:has(.contato-block)) .btn {
    background: oklch(97% 0.018 92);
    color: oklch(28% 0.04 52);
  }

  #contato:not(:has(.contato-block)) .btn:hover {
    background: oklch(93% 0.03 92);
  }

  #contato:has(.contato-block) .contato-block__copy,
  #contato:has(.contato-block) .contato-block__copy p,
  #contato:has(.contato-block) .contato-block__copy strong {
    color: var(--color-ink);
  }

  #contato:has(.crumb-bar) .foot-letter {
    margin-bottom: var(--space-md);
  }

  #contato .crumb-bar {
    margin-inline: calc(var(--page-gutter) * -1);
    width: auto;
  }

  #contato .faq-hint a {
    color: oklch(97% 0.018 92 / 0.85);
  }

  /* Footer continua o fundo do Contato; links empilhados, texto claro */
  #contato .foot-letter {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    padding-bottom: 0;
    border-top-color: oklch(97% 0.02 92 / 0.28);
    background: transparent;
  }

  #contato:not(:has(.crumb-bar)) .foot-letter {
    padding-bottom: var(--space-md);
  }

  #contato .foot-letter__heading {
    color: var(--color-accent-ink);
  }

  #contato .foot-letter__links {
    grid-template-columns: 1fr;
    row-gap: var(--space-xs);
  }

  #contato .foot-letter__links a {
    color: var(--color-accent-ink);
    border-bottom-color: oklch(97% 0.02 92 / 0.35);
  }

  #contato .foot-letter__links a:hover {
    color: #fff;
    border-bottom-color: #fff;
  }

  #contato .foot-letter__links li::marker {
    color: var(--color-accent-ink);
  }
}