/* ==========================================================================
   DJR Ferro e Aço — site rebuild
   Design source of truth: figma-export.pdf (dark + light catalog design).
   Content rule: real business facts only (contact info confirmed by DJR).
   Unconfirmed facts from the PDF (timeline dates, stats, certifications,
   delivery/pickup policies) are represented as neutral, honestly-labelled
   placeholders — never presented as real data.
   ========================================================================== */

@import url('../fonts/fonts.css');

:root {
  /* Ground — dark navy, sampled from the PDF's dark-mode render */
  --bg-950: #060911;
  --bg-900: #0a111d;
  --bg-800: #131d31;
  --bg-700: #1b2b45;
  --border: #223350;

  --text-white: #ffffff;
  --text-muted: #a2a8b3;
  --text-faint: #8a90a0;

  /* Accent — flat orange, the PDF's single CTA/highlight color (same in both modes) */
  --accent: #e8751a;
  --accent-dark: #c05f10;
  /* Darker shade for white-on-fill contexts — the base --accent fails WCAG AA
     (3.0:1) as a solid fill under white text at body-text sizes; this shade
     clears 4.5:1 in both directions, and stays fixed across both themes since
     accent-filled buttons always carry white text regardless of theme. */
  --accent-strong: #b8560c;
  --accent-soft: rgba(232, 117, 26, 0.14);
  /* Text-colored accent (eyebrows, links, stat values) — needs to be darker
     than --accent whenever it sits on a light ground, so this is the one
     token that differs per theme (see the light override below). */
  --accent-text: var(--accent);
  /* Form error text — AA on both form grounds in each theme */
  --error-text: #ff8a80;

  --header-bg: rgba(6, 9, 17, 0.92);

  /* Promo badge yellow (used once, for the "orçamento" tag) */
  --badge: #fbd34d;
  --badge-ink: #2b1c00;

  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --measure: 62ch;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container: 1280px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --theme-ease: 0.3s ease;
  --shadow-card: 0 20px 40px -24px rgba(0, 0, 0, 0.55);
  --shadow-btn: 0 12px 20px -10px rgba(0, 0, 0, 0.45);
}

/* Light mode — sampled from the PDF's light-mode render. Each token keeps
   its own light-appropriate value rather than a flat color inversion:
   grounds go white/off-white, borders go light gray, text goes dark ink,
   and --accent-text darkens so orange text keeps 4.5:1 on a light ground. */
:root[data-theme='light'] {
  --bg-950: #ffffff;
  --bg-900: #f4f4f4;
  --bg-800: #ffffff;
  --bg-700: #e5e6ea;
  --border: #e2e4e8;

  --text-white: #16161f;
  --text-muted: #52565f;
  --text-faint: #6b6f78;

  --accent-text: #ac500b;
  --error-text: #b3261e;
  --header-bg: rgba(255, 255, 255, 0.92);
  --shadow-card: 0 16px 32px -20px rgba(20, 20, 30, 0.16);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; scrollbar-color: var(--bg-700) var(--bg-950); scrollbar-width: thin; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--bg-950);
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--theme-ease), color var(--theme-ease);
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
/* Long e-mail addresses must not force narrow grids wider than the viewport */
a[href^="mailto:"] { overflow-wrap: anywhere; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent-strong); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-950); }
::-webkit-scrollbar-thumb { background: var(--bg-700); border: 3px solid var(--bg-950); border-radius: 8px; }

.skip-link {
  position: absolute; left: var(--space-sm); top: -60px; z-index: 200;
  background: var(--accent-strong); color: #fff; padding: 0.75em 1.25em;
  border-radius: var(--radius-sm); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--space-sm); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Type ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.h-section {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.5rem);
}

.h-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
}

.lede {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  color: var(--text-muted);
  max-width: var(--measure);
  line-height: 1.65;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.accent-text { color: var(--accent-text); }

/* ---------- Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--space-2xl); transition: background-color var(--theme-ease); }
.section--tight { padding-block: var(--space-xl); }

.section-head { margin-bottom: var(--space-lg); max-width: 46rem; }
.section-head .eyebrow { margin-bottom: var(--space-sm); }
.section-head .h-section { margin-top: 0.5rem; }
.section-head .lede { margin-top: var(--space-sm); }

.section--alt { background: var(--bg-900); }

/* Badge/tag reused across hero + section eyebrows for provisional content */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Accent variant — "Telhas de fabricação própria" in the hero */
.tag-pill--accent {
  border-color: var(--accent);
  background: var(--accent-strong);
  color: #fff;
}

.badge-promo {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--badge);
  color: var(--badge-ink);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Neutral "not confirmed yet" placeholder tag — used instead of inventing
   facts (stats, certifications, dates) that the PDF shows but DJR hasn't
   confirmed. Visually occupies the same slot as the PDF's claim would. */
.tbd-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  transition: transform 0.15s var(--ease), filter 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.btn--accent { background: var(--accent-strong); color: #fff; box-shadow: var(--shadow-btn); }
.btn--accent:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--accent:active { transform: translateY(1px); filter: brightness(0.96); }

.btn--outline { background: transparent; color: var(--text-white); border: 1.5px solid var(--border); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent-text); }

.btn--ghost { background: var(--bg-800); color: var(--text-white); border: 1px solid var(--border); }
.btn--ghost:hover { border-color: var(--text-muted); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.btn--block { width: 100%; white-space: normal; text-align: center; }
.btn--disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

.text-link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 700; color: var(--accent-text);
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.15s;
}
.text-link:hover { border-color: var(--accent-text); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--theme-ease), border-color var(--theme-ease);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-block: 0.9rem;
}

.brand { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
/* logo.png is a 1024×1024 square with the artwork (≈3:1) centred in empty
   padding — crop to the artwork with object-fit instead of stretching it. */
.brand img { height: 40px; width: auto; aspect-ratio: 3 / 1; object-fit: cover; }
@media (min-width: 720px) { .brand img { height: 48px; } }

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-md);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.nav-links a { transition: color 0.15s; }
.nav-links a:hover { color: var(--text-white); }
@media (min-width: 1140px) { .nav-links { display: flex; } }

.nav-cta { margin-inline-start: auto; display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--text-white);
  transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme='light'] .theme-toggle .icon-sun { display: none; }
:root[data-theme='light'] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  margin-inline-start: auto;
  display: inline-flex; width: 40px; height: 40px;
  align-items: center; justify-content: center; color: var(--text-white);
}
@media (min-width: 1140px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }

.mobile-panel {
  display: none; flex-direction: column;
  padding: var(--space-sm) 0 var(--space-md);
  border-top: 1px solid var(--border);
}
.mobile-panel.is-open { display: flex; }
.mobile-panel a { padding: 0.7rem 0; font-weight: 600; border-bottom: 1px solid var(--border); }
.mobile-panel .theme-toggle { margin-top: var(--space-xs); align-self: flex-start; gap: 0.5rem; width: auto; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600; }
@media (min-width: 1140px) { .mobile-panel { display: none !important; } }

/* ==========================================================================
   Hero — always the dark full-bleed photo treatment, in both themes
   (matches the PDF: the hero frame doesn't change between light/dark)
   ========================================================================== */
.hero {
  position: relative;
  background: #060911;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: clip;
}

.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}

.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,9,17,0.55) 0%, rgba(6,9,17,0.45) 40%, rgba(6,9,17,0.96) 100%),
    linear-gradient(90deg, rgba(6,9,17,0.65) 0%, rgba(6,9,17,0.15) 60%);
}

.hero-body { position: relative; z-index: 2; width: 100%; padding-block: var(--space-2xl) var(--space-xl); }
.hero-slogan {
  display: flex; align-items: center; gap: 0.75rem;
  margin-bottom: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.9rem + 0.9vw, 1.625rem);
  letter-spacing: 0.01em;
  color: var(--accent);
}
.hero-slogan::before { content: ''; width: clamp(1.25rem, 4vw, 2.25rem); height: 3px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
@media (max-width: 380px) { .hero-slogan::before { display: none; } }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--space-md); }

.hero-title {
  font-size: clamp(2.25rem, 1.5rem + 4.2vw, 4.25rem);
  color: #fff;
  max-width: 20ch;
}
.hero-title .accent-text { color: var(--accent); }

.hero-sub {
  margin-top: var(--space-md);
  max-width: 48ch;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.82);
}

.hero-actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero-actions .btn--outline { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.hero-actions .btn--outline:hover { border-color: #fff; color: #fff; }

/* ==========================================================================
   História + stats
   ========================================================================== */
.history-grid {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: center;
}
@media (min-width: 900px) { .history-grid { grid-template-columns: 1fr 1fr; } }

.history-figure { border-radius: var(--radius-lg); overflow: hidden; }
.history-figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.stat-row { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (min-width: 420px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: var(--bg-800);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: background-color var(--theme-ease), border-color var(--theme-ease);
}
.stat-card .value { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; color: var(--accent-text); }
.stat-card .label { margin-top: 0.25rem; font-size: 0.875rem; color: var(--text-muted); }
.stat-card.is-tbd .value { color: var(--text-faint); font-size: 1.0625rem; }

/* ==========================================================================
   Linha do tempo
   ========================================================================== */
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (min-width: 700px) { .timeline-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .timeline-grid { grid-template-columns: repeat(4, 1fr); } }

.timeline-card {
  background: var(--bg-800);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: background-color var(--theme-ease), border-color var(--theme-ease);
}
.timeline-card .mark { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent-text); }
.timeline-card .mark.is-tbd { color: var(--text-faint); font-size: 0.9rem; letter-spacing: 0.02em; }
.timeline-card h3 { margin-top: 0.6rem; font-size: 1.0625rem; font-weight: 700; }
.timeline-card p { margin-top: 0.35rem; font-size: 0.875rem; color: var(--text-muted); }

/* ==========================================================================
   Catálogo — filtros + grid
   ========================================================================== */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-lg); }
.filter-tab {
  font-size: 0.8125rem; font-weight: 700;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--bg-800);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.filter-tab:hover { border-color: var(--accent); color: var(--text-white); }
.filter-tab.is-active { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
@media (min-width: 480px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  background: var(--bg-800);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color var(--theme-ease), border-color var(--theme-ease);
}
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.product-card figure { position: relative; aspect-ratio: 4/3; background: #fff; overflow: hidden; }
.product-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.product-card .body { padding: var(--space-sm) var(--space-md) var(--space-md); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.product-card h3 { font-size: 1.0625rem; font-weight: 700; }
.product-card p { font-size: 0.875rem; color: var(--text-muted); flex: 1; }
.product-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.product-card .cat-tag { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); }

.catalog-footline { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.catalog-count { margin-top: var(--space-sm); font-size: 0.8125rem; color: var(--text-faint); }

/* ==========================================================================
   Pilares / valores
   ========================================================================== */
.pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
@media (min-width: 760px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }

.pillar-card { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.pillar-card .head { display: flex; align-items: center; gap: 0.75rem; }
.pillar-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  color: var(--accent-text);
}
.pillar-card .icon svg { width: 22px; height: 22px; }
.pillar-card h3 { font-size: 1.0625rem; font-weight: 700; }
.pillar-card p { margin-top: 0.6rem; font-size: 0.9rem; color: var(--text-muted); }

/* ==========================================================================
   Serviços
   ========================================================================== */
.service-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 760px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }

.service-card { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.service-card figure { aspect-ratio: 16/10; }
.service-card img { width: 100%; height: 100%; object-fit: cover; }
.service-card .body { padding: var(--space-md); }
.service-card h3 { font-size: 1.1875rem; font-weight: 700; }
.service-card p { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--text-muted); }

/* ==========================================================================
   Como trabalhamos — processo
   ========================================================================== */
.process-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 700px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .process-grid { grid-template-columns: repeat(4, 1fr); } }

.process-card { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); position: relative; transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.process-card .step { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; color: var(--accent-text); }
.process-card h3 { margin-top: 0.6rem; font-size: 1.0625rem; font-weight: 700; }
.process-card p { margin-top: 0.35rem; font-size: 0.875rem; color: var(--text-muted); }

/* ==========================================================================
   Calculadora de peso teórico
   ========================================================================== */
.calc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 900px) { .calc-grid { grid-template-columns: 1.3fr 1fr; } }

.calc-form { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.field-row { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); margin-top: var(--space-sm); }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.4rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.75rem 0.9rem;
  background: var(--bg-900); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-white); font-size: 0.9375rem;
  transition: background-color var(--theme-ease), border-color var(--theme-ease), color var(--theme-ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }

.calc-result { background: var(--bg-800); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-md); align-self: start; transition: background-color var(--theme-ease); }
.calc-result .eyebrow { color: var(--accent-text); }
.calc-result .total { display: flex; align-items: baseline; gap: 0.5rem; margin-top: var(--space-sm); }
.calc-result .total .num { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; }
.calc-result .breakdown { margin-top: var(--space-md); border-top: 1px solid var(--border); padding-top: var(--space-sm); display: grid; gap: 0.5rem; }
.calc-result .breakdown div { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-muted); }
.calc-result .breakdown strong { color: var(--text-white); font-weight: 600; }
.calc-note { margin-top: var(--space-md); font-size: 0.8125rem; color: var(--text-faint); }
.calc-note p + p { margin-top: 0.5rem; }

/* ==========================================================================
   Localização
   ========================================================================== */
.location-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 900px) { .location-grid { grid-template-columns: 1fr 1fr; } }

.map-frame { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); min-height: 320px; min-width: 0; }
.map-frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

.location-card { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.location-card h3 { font-size: 1.125rem; font-weight: 700; }
.location-card ul { margin-top: var(--space-sm); display: grid; gap: var(--space-sm); }
.location-card li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9375rem; }
.location-card svg { width: 20px; height: 20px; color: var(--accent-text); flex-shrink: 0; margin-top: 0.15em; }

.gallery-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-top: var(--space-lg); }
.gallery-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); }
@media (max-width: 640px) { .gallery-strip { grid-template-columns: 1fr 1fr; } .gallery-strip img:first-child { grid-column: span 2; aspect-ratio: 16/9; } }

/* ==========================================================================
   Contato
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-top: var(--space-lg); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 0.8fr; } }

.contact-form { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.contact-form .field { margin-top: var(--space-sm); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { margin-top: var(--space-md); }
.form-note { margin-top: var(--space-sm); font-size: 0.8125rem; color: var(--text-faint); }

.channels-card { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-md); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.channel-item { display: flex; gap: 0.75rem; align-items: flex-start; padding-block: var(--space-sm); border-bottom: 1px solid var(--border); }
.channel-item:last-child { border-bottom: 0; }
.channel-item svg { width: 22px; height: 22px; color: var(--accent-text); flex-shrink: 0; margin-top: 0.1em; }
.channel-item h3 { font-size: 0.95rem; font-weight: 700; }
.channel-item .value { margin-top: 0.2rem; font-weight: 700; }
.channel-item p { font-size: 0.8125rem; color: var(--text-faint); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.faq-item { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); text-align: left; font-weight: 700; font-size: 0.9375rem;
}
.faq-question svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); transition: transform 0.2s var(--ease); }
.faq-item.is-open .faq-question svg { transform: rotate(45deg); }
/* Closed state must collapse to 0px: .inner carries no vertical padding
   (padding would keep the 0fr track padding-tall and leak the first line of
   the answer); the bottom spacing is a ::after block inside the clipped
   content, so only grid-template-rows animates. visibility keeps closed answers out of
   the tab order and screen-reader flow while still letting them animate. */
.faq-answer {
  display: grid; grid-template-rows: 0fr; overflow: hidden; visibility: hidden;
  transition: grid-template-rows 0.3s var(--ease), visibility 0s linear 0.3s;
}
.faq-answer .inner {
  min-height: 0; overflow: hidden;
  padding: 0 var(--space-md); font-size: 0.9rem; color: var(--text-muted);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.faq-answer .inner::after { content: ''; display: block; height: var(--space-md); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.3s var(--ease), visibility 0s; }
.faq-item.is-open .faq-answer .inner { opacity: 1; transition: opacity 0.25s var(--ease) 0.05s; }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */
.final-cta { background: var(--accent-strong); color: #fff; text-align: center; }
.final-cta .h-section { color: #fff; }
.final-cta .lede { color: #fff; margin-inline: auto; }
.final-cta .btn--accent { background: #fff; color: var(--accent-strong); box-shadow: none; margin-top: var(--space-md); }
.final-cta .btn--accent:hover { filter: none; transform: translateY(-1px); }

.site-footer { background: var(--bg-950); border-top: 1px solid var(--border); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.footer-top { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl) var(--space-lg); }
@media (min-width: 860px) { .footer-top { grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr; } }
.footer-top > div { min-width: 0; }

.footer-map { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); min-height: 180px; min-width: 0; }
.footer-map iframe { width: 100%; height: 180px; border: 0; display: block; }

.footer-brand img { height: 44px; width: auto; aspect-ratio: 3 / 1; object-fit: cover; margin-bottom: var(--space-sm); }
.footer-brand p { max-width: 32ch; color: var(--text-muted); font-size: 0.9rem; }
.footer-social { display: flex; gap: 0.6rem; margin-top: var(--space-md); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--bg-800); border: 1px solid var(--border); transition: border-color 0.15s, background-color var(--theme-ease);
}
.footer-social a:hover { border-color: var(--accent); }
.footer-social svg { width: 18px; height: 18px; }

.footer-heading { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-sm); }
.footer-links { display: grid; gap: 0.6rem; }
.footer-links a { color: var(--text-muted); font-size: 0.9375rem; transition: color 0.15s; }
.footer-links a:hover { color: var(--text-white); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-block: var(--space-md);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  font-size: 0.8125rem; color: var(--text-faint);
}
/* Clear the fixed WhatsApp FAB so it never sits on top of the last footer row */
.site-footer .footer-bottom { padding-bottom: calc(var(--space-md) + 4.5rem); }
.footer-credit { font-size: 0.75rem; }
.footer-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { text-decoration-thickness: 2px; }

/* ==========================================================================
   Sticky WhatsApp FAB
   ========================================================================== */
.whatsapp-fab {
  position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: 90;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--accent-strong); color: #fff;
  padding: 0.8rem 1.1rem; border-radius: var(--radius-pill);
  box-shadow: 0 14px 28px -12px rgba(0,0,0,0.55);
  font-weight: 700; font-size: 0.875rem;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), filter 0.15s;
}
.whatsapp-fab.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.whatsapp-fab:hover { filter: brightness(1.08); }
.whatsapp-fab svg { width: 20px; height: 20px; }
.whatsapp-fab .label { display: none; }
@media (min-width: 560px) { .whatsapp-fab .label { display: inline; } }

/* ==========================================================================
   Interior pages — category listing / contact
   (materiais-em-aco.html, telhas-e-acabamentos.html, discos-e-abrasivos.html,
   ferramentas-e-equipamentos.html, solda-e-epi.html, contato.html)
   ========================================================================== */
.page-header { background: var(--bg-900); padding-block: var(--space-xl) var(--space-lg); transition: background-color var(--theme-ease); }
.breadcrumb { display: flex; align-items: center; gap: 0.5em; font-size: 0.8125rem; color: var(--text-faint); margin-bottom: var(--space-sm); }
.breadcrumb a:hover { color: var(--text-white); }
.page-title { max-width: 22ch; }
.page-lede { margin-top: var(--space-sm); }
.cat-code { display: inline-flex; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--accent-text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.2rem 0.55rem; }

.category-pills { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.category-pill {
  font-size: 0.8125rem; font-weight: 700;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.category-pill:hover { border-color: var(--accent); color: var(--text-white); }
.category-pill[aria-current='page'] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

.detail-grid {
  padding-block: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 480px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .detail-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } }
@media (min-width: 1024px) { .detail-grid { grid-template-columns: repeat(4, 1fr); } }

.detail-card { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s, background-color var(--theme-ease), border-color var(--theme-ease); }
.detail-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.detail-card figure { position: relative; aspect-ratio: 4/3; background: #fff; overflow: hidden; }
.detail-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.detail-card .cap { padding: 0.85rem 0.95rem 1rem; }
.detail-card .cap h3 { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em; line-height: 1.2; }
.detail-card .cap span { display: block; margin-top: 0.3rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); }

.category-cta { padding-block: var(--space-xl); background: var(--bg-900); border-top: 1px solid var(--border); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.category-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.category-cta h2 { max-width: 30ch; }
.category-cta-inner .btn { white-space: normal; text-align: center; }

.contact-page-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); padding-block: var(--space-2xl); }
@media (min-width: 900px) { .contact-page-grid { grid-template-columns: 1fr 1fr; } }

.contact-card { background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-lg); transition: background-color var(--theme-ease), border-color var(--theme-ease); }
.contact-methods { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.contact-method { display: flex; gap: var(--space-sm); align-items: flex-start; padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); }
.contact-method:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-method svg { width: 24px; height: 24px; color: var(--accent-text); flex-shrink: 0; margin-top: 0.1em; }
.contact-method h3 { font-size: 1rem; font-weight: 700; }
.contact-method p { color: var(--text-muted); font-size: 0.9375rem; margin-top: 0.15rem; }
.contact-method .value { font-weight: 700; color: var(--text-white); font-size: 1.0625rem; margin-top: 0.3rem; }

.map-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); min-height: 420px; }
.map-card iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* ==========================================================================
   Carrinho de orçamento (quote cart — no payment, no checkout)
   ========================================================================== */
.cart-trigger {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); color: var(--text-white);
  transition: border-color 0.15s, color 0.15s;
}
.cart-trigger:hover { border-color: var(--accent); }
.cart-trigger svg { width: 18px; height: 18px; }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-strong); color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
  border-radius: var(--radius-pill);
}
.cart-badge[hidden] { display: none; }

.mobile-panel .cart-trigger { margin-top: var(--space-xs); align-self: flex-start; width: auto; gap: 0.5rem; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.8125rem; font-weight: 600; }
.mobile-panel .cart-trigger .cart-badge { position: static; margin-inline-start: 0.3rem; }

.btn-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 100%; margin-top: 0.6rem; padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-white);
  font-size: 0.8125rem; font-weight: 700;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.btn-add svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-add:hover { border-color: var(--accent); color: var(--accent-text); }
.btn-add.is-added { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }

/* Overlay + drawer */
.cart-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6, 9, 17, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
  width: min(420px, 100vw);
  background: var(--bg-950); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease), background-color var(--theme-ease), border-color var(--theme-ease);
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-md); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  color: var(--text-muted); transition: color 0.15s, background-color 0.15s;
}
.cart-close:hover { color: var(--text-white); background: var(--bg-800); }
.cart-close svg { width: 18px; height: 18px; }

.cart-drawer-body { flex: 1; overflow-y: auto; padding: var(--space-md); }

.cart-empty { text-align: center; padding-block: var(--space-xl) var(--space-md); color: var(--text-muted); }
.cart-empty svg { width: 40px; height: 40px; color: var(--text-faint); margin-bottom: var(--space-sm); }
.cart-empty p { font-size: 0.9375rem; }
.cart-empty .text-link { display: inline-block; margin-top: var(--space-sm); }

.cart-list { display: grid; gap: var(--space-sm); }
.cart-item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 0.75rem; align-items: center;
  padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-item figure { width: 56px; height: 56px; border-radius: var(--radius-sm); background: #fff; overflow: hidden; border: 1px solid var(--border); }
.cart-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cart-item .info h3 { font-size: 0.9375rem; font-weight: 700; line-height: 1.25; }
.cart-item .info .cat-tag { display: block; margin-top: 0.2rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-text); }
.cart-item .side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }

.qty-stepper { display: inline-flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.2rem; }
.qty-stepper button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  color: var(--text-white); font-weight: 700; font-size: 0.875rem;
  transition: background-color 0.15s;
}
.qty-stepper button:hover { background: var(--bg-800); }
.qty-stepper span { min-width: 1.5em; text-align: center; font-size: 0.875rem; font-weight: 700; }

.cart-remove { color: var(--text-faint); font-size: 0.75rem; font-weight: 600; transition: color 0.15s; }
.cart-remove:hover { color: var(--accent); }

.cart-drawer-foot { flex-shrink: 0; padding: var(--space-md); border-top: 1px solid var(--border); }
.cart-summary { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); font-size: 0.875rem; color: var(--text-muted); }
.cart-drawer-foot .btn { width: 100%; }
.cart-drawer-foot .form-note { margin-top: var(--space-sm); text-align: center; }

/* Discreet add-to-cart toast */
.cart-toast {
  position: fixed; left: 50%; bottom: var(--space-md); z-index: 210;
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  background: var(--bg-800); color: var(--text-white);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0.65rem 1.1rem; font-size: 0.8125rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.cart-toast svg { width: 16px; height: 16px; color: var(--accent); }
.cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) { .cart-toast { left: var(--space-md); right: var(--space-md); transform: translateY(10px); white-space: normal; justify-content: center; } .cart-toast.is-visible { transform: translateY(0); } }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
.js-reveal-ready .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js-reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Telhas: selo de qualidade + fabricação própria ---------- */
.quality-seal {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.quality-seal svg { width: 1.1em; height: 1.1em; flex: none; }

.own-make {
  margin-top: var(--space-sm);
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-muted);
}
.own-make strong { color: var(--text-white); }

/* ==========================================================================
   Utilities — replace former inline style="" attributes so the Content
   Security Policy can forbid inline styles. !important mirrors the
   precedence the inline styles had.
   ========================================================================== */
.u-mt-sm { margin-top: var(--space-sm) !important; }
.u-mt-md { margin-top: var(--space-md) !important; }
.u-mt-075 { margin-top: 0.75rem !important; }
.u-mt-085 { margin-top: 0.85rem !important; }
.u-mt-2rem { margin-top: 2rem !important; }
.u-mt-2xl { margin-top: var(--space-2xl) !important; }
.u-fs-card-title { font-size: 1.5rem !important; }
.page-title--category { font-size: clamp(2rem, 1.6rem + 2.4vw, 3.5rem) !important; margin-top: 0.5rem !important; }
.footer-tagline { margin-top: 0.5rem !important; font-weight: 600 !important; }
svg.icon-24 { width: 24px; height: 24px; }
[hidden] { display: none !important; }

/* ---------- Google Maps só com consentimento ---------- */
.map-consent { position: relative; height: 100%; min-height: inherit; display: flex; }
.map-consent iframe { flex: 1; }
.map-consent-body {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm);
  padding: var(--space-md); background: var(--bg-800); color: var(--text-muted); font-size: 0.9375rem;
}
.map-consent-body strong { color: var(--text-white); }
.map-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.map-consent.is-loaded .map-consent-body { display: none; }

/* ---------- Banner + preferências de cookies ---------- */
/* Accept and reject share the same style on purpose: no option is visually
   pushed over the other. */
.btn--consent { background: var(--accent-strong); color: #fff; border: 1.5px solid var(--accent-strong); }
.btn--consent:hover { filter: brightness(1.08); }
.btn--consent-ghost { background: transparent; color: var(--text-white); border: 1.5px solid var(--border); }
.btn--consent-ghost:hover { border-color: var(--accent); }

.consent-banner {
  position: fixed; left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); z-index: 220;
  max-width: 56rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-800); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.consent-text { flex: 1 1 22rem; font-size: 0.875rem; color: var(--text-muted); }
.consent-text a, .consent-desc a { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.consent-dialog {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: var(--space-md); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-950); color: var(--text-white);
}
.consent-dialog::backdrop { background: rgba(6, 9, 17, 0.6); }
.consent-dialog .consent-text { margin-top: 0.5rem; }
.consent-option { margin-top: var(--space-sm); padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-800); }
.consent-switch { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; cursor: pointer; }
.consent-switch input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent-strong); flex: none; }
.consent-desc { margin-top: 0.4rem; font-size: 0.8125rem; color: var(--text-muted); }
.consent-dialog > .consent-desc { margin-top: var(--space-sm); }
.consent-status { margin-top: var(--space-sm); font-size: 0.8125rem; color: var(--accent-text); min-height: 1em; }
.consent-dialog .consent-actions { margin-top: var(--space-sm); }

/* ---------- Rodapé: links legais ---------- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; flex-basis: 100%; }
.footer-legal a, .footer-legal-btn { color: var(--text-muted); font-size: 0.8125rem; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover, .footer-legal-btn:hover { color: var(--text-white); }

/* ---------- Formulário: erros, dica e consentimento ---------- */
.field-error { margin-top: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--error-text); }
.field-hint { margin-top: 0.35rem; font-size: 0.8125rem; color: var(--text-faint); }
.field [aria-invalid="true"] { border-color: var(--error-text); }
.field-consent { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; }
.field-consent input[type="checkbox"] { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--accent-strong); padding: 0; }
.field-consent label { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--text-muted); }
.field-consent .field-error { grid-column: 1 / -1; }

/* ---------- Páginas legais ---------- */
.legal-body { max-width: 48rem; padding-block: var(--space-lg) var(--space-2xl); }
.legal-body h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; margin-top: var(--space-lg); }
.legal-body h3 { font-size: 1.0625rem; font-weight: 700; margin-top: var(--space-md); }
.legal-body p, .legal-body li { color: var(--text-muted); margin-top: 0.75rem; }
.legal-body ul { list-style: disc; padding-left: 1.25rem; }
.legal-body a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal-body strong { color: var(--text-white); }
.legal-updated { font-size: 0.875rem; color: var(--text-faint); }
.legal-todo { display: inline-block; padding: 0.05rem 0.45rem; border: 1px dashed var(--accent); border-radius: var(--radius-sm); color: var(--accent-text); font-weight: 700; }
.legal-table { width: 100%; border-collapse: collapse; margin-top: var(--space-sm); font-size: 0.875rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem; border: 1px solid var(--border); color: var(--text-muted); }
.legal-table th { color: var(--text-white); background: var(--bg-800); }
.legal-table-wrap { overflow-x: auto; }