/* ==========================================================================
   Fransérgio Rossetti Advocacia — estilos
   Ordem das camadas: reset → tokens → base → layout → components → utilities
   ========================================================================== */
@layer reset, tokens, base, layout, components, utilities;

/* ---------- Fontes (auto-hospedadas, sem chamadas a terceiros) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100dvh; -webkit-font-smoothing: antialiased; }
  img, svg, picture { display: block; max-inline-size: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  a { color: inherit; }
  ul, ol { padding: 0; list-style: none; }
  h1, h2, h3, h4 { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  [hidden] { display: none !important; }
}

/* ==========================================================================
   TOKENS
   Contraste: todo texto sobre --paper/--white/--deep respeita WCAG AA (≥ 4.5:1).
   O latão (--brass) é decorativo; para texto sobre claro use --brass-ink.
   ========================================================================== */
@layer tokens {
  :root {
    color-scheme: light;

    --deep:        oklch(33% 0.025 195);   /* verde-escuro da marca (#283636 → #335151) */
    --deep-2:      oklch(41% 0.04 195);
    --deep-line:   oklch(100% 0 0 / 0.16);
    --paper:       oklch(97.6% 0.008 85);
    --paper-2:     oklch(94.6% 0.014 85);
    --white:       oklch(100% 0 0);
    --ink:         oklch(25% 0.02 195);
    --ink-soft:    oklch(43% 0.02 195);
    --line:        oklch(87% 0.015 85);
    --brass:       oklch(72% 0.08 75);      /* dourado da marca, decorativo (#C49A62) */
    --brass-ink:   oklch(45% 0.075 70);     /* dourado escuro para texto sobre claro */
    --on-deep:     oklch(96% 0.01 85);
    --on-deep-soft:oklch(83% 0.015 195);
    --focus:       oklch(52% 0.17 258);
    --ok:          oklch(40% 0.10 155);
    --err:         oklch(45% 0.17 27);

    --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --step-1:  clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
    --step-2:  clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --step-3:  clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
    --step-4:  clamp(2.25rem, 1.5rem + 3.4vw, 4rem);

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

    --wrap: 72rem;
    --gutter: clamp(1.25rem, 4vw, 2rem);
    --radius: 0.375rem;
    --header-h: 4.5rem;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + 1rem);
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.65;
  }

  h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--deep);
  }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-1); line-height: 1.25; }

  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 2px;
  }
  ::selection { background: var(--brass); color: var(--deep); }

  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--deep);
    color: var(--on-deep);
    border-radius: var(--radius);
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
@layer layout {
  .wrap {
    inline-size: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto;
  }
  .section { padding-block: var(--space-5); }
  .section--alt  { background: var(--paper-2); }
  .section--dark {
    background: var(--deep);
    color: var(--on-deep);
    --focus: oklch(80% 0.12 85);
  }
  .section--dark h2, .section--dark h3 { color: var(--white); }

  .section-head { max-inline-size: 42rem; margin-block-end: var(--space-4); }
  .section-head p { margin-block-start: var(--space-2); color: var(--ink-soft); font-size: var(--step-1); }
  .section--dark .section-head p { color: var(--on-deep-soft); }

  .split {
    display: grid;
    gap: var(--space-4) clamp(2rem, 6vw, 5rem);
    align-items: start;
  }
  @media (min-width: 56em) {
    .split { grid-template-columns: 5fr 7fr; }
    .split--even { grid-template-columns: 1fr 1fr; }
  }

  /* ----- Header ----- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: oklch(97.6% 0.008 85 / 0.9);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--line);
  }
  .site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-block-size: var(--header-h);
  }

  /* ----- Hero ----- */
  .hero { padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem) var(--space-5); }
  .hero .wrap {
    display: grid;
    gap: var(--space-4) clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
  @media (min-width: 56em) {
    .hero .wrap { grid-template-columns: 1.25fr 0.75fr; }
  }

  /* ----- Footer ----- */
  .site-footer { background: var(--deep); color: var(--on-deep-soft); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

  /* ----- Marca ----- */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--deep);
  }
  .brand-mark { inline-size: 2.75rem; block-size: 2.75rem; flex: none; }
  .brand-text { display: grid; line-height: 1.2; }
  .brand-name {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  @media (max-width: 30em) {
    .brand { gap: 0.625rem; }
    .brand-name { font-size: 0.875rem; letter-spacing: 0.05em; white-space: nowrap; }
    .brand-sub { letter-spacing: 0.08em; }
  }
  .brand-sub { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }

  /* ----- Navegação (popover nativo no mobile) ----- */
  .menu-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--deep);
    cursor: pointer;
  }
  .menu-toggle svg { inline-size: 1.375rem; block-size: 1.375rem; }

  .site-nav {
    /* mobile: painel sob o header */
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    inline-size: 100%;
    max-inline-size: none;
    padding: var(--space-2) var(--gutter) var(--space-3);
    background: var(--paper);
    border: 0;
    border-block-end: 1px solid var(--line);
    color: var(--ink);
  }
  .site-nav ul { display: grid; }
  .site-nav a:not(.btn) {
    display: block;
    padding: 0.875rem 0;
    border-block-end: 1px solid var(--line);
    text-decoration: none;
    font-weight: 500;
  }
  .site-nav .btn { margin-block-start: var(--space-2); inline-size: 100%; }

  @media (min-width: 56em) {
    .menu-toggle { display: none; }
    .site-nav {
      position: static;
      display: block;
      inline-size: auto;
      padding: 0;
      background: none;
      border: 0;
      overflow: visible;
    }
    .site-nav ul { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
    .site-nav a:not(.btn) {
      padding: 0.25rem 0;
      border: 0;
      font-size: 0.9375rem;
      background: linear-gradient(var(--brass), var(--brass)) 0 100% / 0 2px no-repeat;
      transition: background-size 0.25s var(--ease);
    }
    .site-nav a:not(.btn):hover,
    .site-nav a[aria-current="true"] { background-size: 100% 2px; }
    .site-nav .btn { margin: 0; inline-size: auto; }
  }

  /* ----- Botões ----- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-block-size: 2.875rem;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
                border-color 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .btn svg { inline-size: 1.125rem; block-size: 1.125rem; fill: currentColor; flex: none; }
  .btn:active { transform: translateY(1px); }

  .btn--primary { background: var(--deep); color: var(--white); border-color: var(--deep); }
  .btn--primary:hover { background: var(--deep-2); border-color: var(--deep-2); }

  .btn--ghost { background: transparent; color: var(--deep); border-color: var(--deep); }
  .btn--ghost:hover { background: var(--deep); color: var(--white); }

  .btn--light { background: var(--white); color: var(--deep); border-color: var(--white); }
  .btn--light:hover { background: var(--paper-2); border-color: var(--paper-2); }

  .btn--sm { min-block-size: 2.5rem; padding: 0.5rem 1.125rem; font-size: 0.875rem; }
  .btn[disabled] { opacity: 0.6; cursor: progress; }

  /* ----- Textos de apoio ----- */
  .eyebrow {
    display: inline-block;
    margin-block-end: var(--space-2);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-ink);
  }
  .section--dark .eyebrow { color: var(--brass); }
  .lede {
    font-family: var(--font-serif);
    font-size: var(--step-2);
    line-height: 1.45;
    color: var(--ink-soft);
    max-inline-size: 38ch;
  }
  .section--dark .lede { color: var(--on-deep-soft); }
  .fineprint { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.55; }

  /* ----- Hero ----- */
  .hero h1 { max-inline-size: 15ch; }
  .hero .lede { margin-block-start: var(--space-3); }
  .cta-row { display: flex; flex-wrap: wrap; gap: 0.875rem; margin-block-start: var(--space-4); }
  .hero .fineprint { margin-block-start: var(--space-3); max-inline-size: 52ch; }

  /* Retrato / espaço para foto */
  .portrait { margin: 0; }
  .portrait-media { position: relative; isolation: isolate; }
  .portrait-media::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    border: 1.5px solid var(--brass);
    z-index: -1;
  }
  .portrait img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 2px;
    background: var(--deep);
  }
  .portrait figcaption {
    margin-block-start: 2rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
  }
  .section--dark .portrait figcaption { color: var(--on-deep-soft); }
  @media (max-width: 55.99em) {
    .hero .portrait { max-inline-size: 22rem; }
  }

  /* ----- Faixa de fatos ----- */
  .facts { border-block: 1px solid var(--line); background: var(--white); }
  .facts ul { display: grid; gap: var(--space-3); padding-block: var(--space-4); }
  @media (min-width: 48em) { .facts ul { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
  .facts li { padding-inline-start: 1.125rem; border-inline-start: 2px solid var(--brass); }
  .facts strong {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--step-2);
    font-weight: 500;
    line-height: 1.2;
    color: var(--deep);
  }
  .facts span { font-size: 0.9375rem; color: var(--ink-soft); }

  /* ----- Situações (cards) ----- */
  .cards {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  }
  .card {
    container-type: inline-size;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.625rem;
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .card:hover {
    border-color: var(--deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -14px oklch(25% 0.03 195 / 0.35);
  }
  .card h3 { color: var(--deep); }
  .card p { color: var(--ink-soft); font-size: 0.9375rem; }
  .card .more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brass-ink);
  }
  .card .more svg { inline-size: 1rem; block-size: 1rem; transition: transform 0.2s var(--ease); }
  .card:hover .more svg { transform: translateX(4px); }

  /* ----- Método ----- */
  .method { display: grid; gap: var(--space-3); }
  .method li {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--line);
  }
  .method li:last-child { border-block-end: 1px solid var(--line); }
  .method .n {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--step-2);
    line-height: 1.1;
    color: var(--brass-ink);
  }
  .method h3 { margin-block-end: 0.375rem; }
  .method p { color: var(--ink-soft); max-inline-size: 58ch; }

  /* ----- Sobre ----- */
  .sobre-text { display: grid; gap: var(--space-2); justify-items: start; max-inline-size: 34rem; }
  .sobre-text p:not(.fineprint) { font-family: var(--font-serif); font-size: var(--step-2); line-height: 1.45; color: var(--on-deep); }
  .sobre-text .fineprint { color: var(--on-deep-soft); }
  .sobre-text .btn { margin-block-start: var(--space-1); }

  /* ----- Áreas ----- */
  .areas-grid { display: grid; gap: var(--space-2); }
  @media (min-width: 56em) { .areas-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
  .area {
    padding: var(--space-3);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .area .tag { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-ink); }
  .area h3 { margin-block: 0.5rem 0.75rem; font-size: var(--step-2); }
  .area > p { color: var(--ink-soft); }
  .checklist { display: grid; gap: 0; margin-block-start: var(--space-2); }
  @media (min-width: 40em) { .area--main .checklist { grid-template-columns: 1fr 1fr; column-gap: var(--space-3); } }
  .checklist li {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.75rem;
    border-block-start: 1px solid var(--line);
    font-size: 0.9375rem;
  }
  .checklist li::before { content: "›"; color: var(--brass-ink); font-weight: 700; flex: none; }
  .area-side { display: grid; gap: var(--space-2); align-content: start; }

  /* ----- Atendimento: passos ----- */
  .steps { counter-reset: step; }
  .steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: var(--space-2);
    padding-block: var(--space-3);
    border-block-start: 1px solid var(--line);
  }
  .steps li:last-child { border-block-end: 1px solid var(--line); }
  .steps li::before {
    content: counter(step);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--step-2);
    line-height: 1.1;
    color: var(--brass-ink);
  }
  .steps h3 { margin-block-end: 0.375rem; }
  .steps p { color: var(--ink-soft); max-inline-size: 58ch; }

  /* ----- FAQ ----- */
  .faq { max-inline-size: 48rem; }
  .faq details { border-block-start: 1px solid var(--line); }
  .faq details:last-of-type { border-block-end: 1px solid var(--line); }
  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-block: 1.125rem;
    font-family: var(--font-serif);
    font-size: var(--step-1);
    color: var(--deep);
    cursor: pointer;
    list-style: none;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "";
    flex: none;
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-inline-end: 2px solid var(--brass-ink);
    border-block-end: 2px solid var(--brass-ink);
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
  }
  .faq details[open] summary::after { transform: rotate(-135deg); }
  .faq .answer { padding-block-end: 1.25rem; color: var(--ink-soft); max-inline-size: 62ch; }
  .faq .answer p + p { margin-block-start: 0.75rem; }
  .faq .fineprint { margin-block-start: var(--space-3); }

  /* ----- Contato ----- */
  .contato .split { align-items: start; }
  .contact-list { display: grid; margin-block-start: var(--space-3); }
  .contact-list li {
    display: grid;
    gap: 0.125rem 1rem;
    padding-block: 0.875rem;
    border-block-start: 1px solid var(--line);
  }
  .contact-list li:last-child { border-block-end: 1px solid var(--line); }
  @media (min-width: 40em) { .contact-list li { grid-template-columns: 7rem 1fr; } }
  .contact-list dt, .contact-list .k { font-size: 0.8125rem; color: var(--ink-soft); }
  .contact-list a { color: var(--deep); text-underline-offset: 3px; }
  .contact-list a:hover { color: var(--brass-ink); }

  /* Formulário */
  .form {
    display: grid;
    gap: var(--space-2);
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .form h3 { font-size: var(--step-2); }
  .field { display: grid; gap: 0.375rem; }
  .field-row { display: grid; gap: var(--space-2); }
  @media (min-width: 40em) { .field-row { grid-template-columns: 1fr 1fr; } }
  .field label { font-size: 0.875rem; font-weight: 600; color: var(--deep); }
  .field .opt { font-weight: 400; color: var(--ink-soft); }
  .field input, .field select, .field textarea {
    inline-size: 100%;
    min-block-size: 2.875rem;
    padding: 0.625rem 0.875rem;
    background: var(--paper);
    border: 1.5px solid oklch(72% 0.02 85);
    border-radius: var(--radius);
    font-size: 1rem; /* evita zoom no iOS */
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  }
  .field textarea { min-block-size: 8rem; resize: vertical; }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--deep); }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline-offset: 1px;
    border-color: var(--focus);
    background: var(--white);
  }
  .field:has([aria-invalid="true"]) input,
  .field:has([aria-invalid="true"]) select,
  .field:has([aria-invalid="true"]) textarea { border-color: var(--err); }
  .field .error { font-size: 0.8125rem; color: var(--err); min-block-size: 0; }
  .field .error:empty { display: none; }

  .consent { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.875rem; color: var(--ink-soft); }
  .consent input { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.125rem; flex: none; accent-color: var(--deep); }
  .consent a { color: var(--deep); }
  .form .hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  .notice {
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    border: 1px solid;
    font-size: 0.9375rem;
  }
  .notice--ok  { color: var(--ok);  border-color: var(--ok);  background: oklch(96% 0.03 155); }
  .notice--err { color: var(--err); border-color: var(--err); background: oklch(96% 0.025 27); }
  /* Fallback sem JS: o PHP redireciona para /#enviado ou /#erro */
  .notice-target { display: none; }
  .notice-target:target { display: block; }

  /* Mapa em fachada (só carrega o Google Maps após clique) */
  .map { margin-block-start: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
  .map-frame { aspect-ratio: 16 / 10; }
  .map iframe { inline-size: 100%; block-size: 100%; border: 0; }
  .map-facade {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    block-size: 100%;
    padding: var(--space-3);
    text-align: center;
    background:
      linear-gradient(oklch(25% 0.03 195 / 0.06) 1px, transparent 1px) 0 0 / 100% 2rem,
      linear-gradient(90deg, oklch(25% 0.03 195 / 0.06) 1px, transparent 1px) 0 0 / 2rem 100%,
      var(--paper-2);
    border: 0;
    cursor: pointer;
    text-decoration: none;
  }
  .map-facade strong { font-family: var(--font-serif); font-size: var(--step-1); font-weight: 500; color: var(--deep); }
  .map-facade span { font-size: 0.8125rem; color: var(--ink-soft); max-inline-size: 34ch; }
  .map-link { display: block; padding: 0.75rem 1rem; font-size: 0.875rem; border-block-start: 1px solid var(--line); background: var(--white); color: var(--deep); }

  /* ----- Rodapé ----- */
  .footer-main { display: grid; gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--deep-line); }
  @media (min-width: 48em) { .footer-main { grid-template-columns: 1fr 1fr; } }
  .footer-logo { inline-size: 11.25rem; block-size: auto; }
  .footer-meta { margin-block-start: 1rem; font-size: 0.875rem; }
  .social { display: flex; gap: 0.75rem; margin-block-start: var(--space-3); }
  .social a {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 1px solid var(--deep-line);
    border-radius: 50%;
    color: var(--white);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .social a:hover { background: var(--brass); color: var(--deep); }
  .social svg { inline-size: 1.125rem; block-size: 1.125rem; fill: currentColor; }
  .footer-contact { display: grid; align-content: start; }
  .footer-contact li { display: flex; gap: 0.75rem; padding-block: 0.625rem; border-block-start: 1px solid var(--deep-line); font-size: 0.9375rem; }
  .footer-contact li:first-child { border: 0; padding-block-start: 0; }
  .footer-contact a { color: var(--on-deep); text-underline-offset: 3px; }
  .footer-contact a:hover { color: var(--brass); }
  .footer-legal { display: grid; gap: var(--space-2); padding-block: var(--space-3); font-size: 0.8125rem; line-height: 1.6; }
  .footer-legal p { max-inline-size: 70ch; }
  .footer-legal a { color: var(--on-deep); text-underline-offset: 3px; }
  .footer-legal a:hover { color: var(--brass); }
  .footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

  /* ----- Botão flutuante (mobile) ----- */
  .fab {
    position: fixed;
    inset-inline: var(--gutter);
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    z-index: 40;
    box-shadow: 0 12px 30px -10px oklch(25% 0.03 195 / 0.5);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .fab[data-hidden="true"] { opacity: 0; transform: translateY(1rem); pointer-events: none; }
  @media (min-width: 56em) { .fab { display: none; } }
  @media (max-width: 55.99em) { body { padding-block-end: 4.75rem; } }

  /* ----- Página de texto (política de privacidade) ----- */
  .prose { max-inline-size: 46rem; }
  .prose h1 { font-size: var(--step-3); margin-block-end: var(--space-2); }
  .prose h2 { font-size: var(--step-2); margin-block: var(--space-4) var(--space-1); }
  .prose p, .prose li { color: var(--ink-soft); }
  .prose p + p { margin-block-start: 0.875rem; }
  .prose ul { list-style: disc; padding-inline-start: 1.25rem; margin-block-start: 0.75rem; display: grid; gap: 0.375rem; }
  .prose a { color: var(--deep); text-underline-offset: 3px; }

  /* ----- Marcador de pendência (remover antes de publicar) ----- */
  .todo { outline: 2px dashed oklch(62% 0.2 30); outline-offset: 2px; }

  /* ----- Entrada suave ao rolar (CSS puro, sem JS; ignorada se não houver suporte) ----- */
  @keyframes reveal {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      [data-reveal] {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 40%;
      }
    }
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
  .mt-3 { margin-block-start: var(--space-3); }
}

@media print {
  .site-header, .fab, .map, .form, .menu-toggle { display: none !important; }
  body { background: #fff; }
}