/* ============================================================
   Elmar Distribuidora — página "Sobre"
   Destino: Content/css/elmar-sobre.css
   Escopo: tudo dentro de .elmar-sobre (não vaza para o site)
   ============================================================ */

.elmar-sobre {
  --sb-green: #005851;
  --sb-green-dark: #0A3B36;
  --sb-green-mid: #0E7A6E;
  --sb-gold: #E8A93F;
  --sb-gold-dark: #C78A26;
  --sb-cream: #FBF5EA;
  --sb-card: #FFFFFF;
  --sb-line: #EDE2CC;
  --sb-ink: #16211E;
  --sb-ink-2: #1D2B26;
  --sb-body: #4A5C56;
  --sb-muted: #6B7C76;
  --sb-soft: #8A9A94;
  --sb-mint: #E7F0EC;
  --sb-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--sb-cream);
  color: var(--sb-ink);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  overflow-x: hidden;
}

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

.elmar-sobre img,
.elmar-sobre svg { display: block; }

.elmar-sobre a { text-decoration: none; }

.elmar-sobre__wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

/* ---------- rótulos e títulos ---------- */

.elmar-sobre__kicker {
  font-family: var(--sb-mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  color: var(--sb-soft);
  text-transform: uppercase;
}

.elmar-sobre__h2 {
  text-wrap: balance;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--sb-green-dark);
  margin: 6px 0 0;
  line-height: 1.1;
}

.elmar-sobre__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--sb-mint);
  border: 1px solid #CADFD8;
  color: #0A4A44;
  border-radius: 999px;
  padding: 7px 15px;
  font-family: var(--sb-mono);
  font-size: 11.5px;
  letter-spacing: 1.6px;
  white-space: nowrap;
}

.elmar-sobre__tag i { width: 7px; height: 7px; border-radius: 50%; background: #22A183; display: block; }

/* ---------- botões ---------- */

.elmar-sobre__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.elmar-sobre__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 15px 24px;
  font-family: var(--sb-mono);
  font-size: 12.5px;
  letter-spacing: 1.4px;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.elmar-sobre__btn--solid { background: var(--sb-green); color: #FFFFFF; box-shadow: 0 12px 26px -14px rgba(0, 88, 81, .8); }
.elmar-sobre__btn--solid:hover,
.elmar-sobre__btn--solid:focus { background: var(--sb-green-mid); color: #FFFFFF; }

.elmar-sobre__btn--ghost { background: var(--sb-card); color: #0A4A44; border: 1.5px solid #DCD1B8; }
.elmar-sobre__btn--ghost:hover,
.elmar-sobre__btn--ghost:focus { border-color: var(--sb-green-mid); color: var(--sb-green); }

.elmar-sobre__btn--gold { background: var(--sb-gold); color: var(--sb-ink); }
.elmar-sobre__btn--gold:hover,
.elmar-sobre__btn--gold:focus { background: #F5BB55; color: var(--sb-ink); }

.elmar-sobre__btn--outline { border: 1.5px solid rgba(255, 255, 255, .35); color: #FFFFFF; }
.elmar-sobre__btn--outline:hover,
.elmar-sobre__btn--outline:focus { border-color: var(--sb-gold); color: var(--sb-gold); }

/* ---------- hero ---------- */

.elmar-sobre__hero {
  padding-top: 56px;
  padding-bottom: 24px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 52px;
  align-items: center;
}

.elmar-sobre__title {
  font-size: 62px;
  line-height: 1.02;
  letter-spacing: -1.6px;
  font-weight: 900;
  margin: 20px 0 0;
  color: var(--sb-green-dark);
  text-wrap: balance;
}

.elmar-sobre__title em { font-style: normal; color: var(--sb-gold-dark); }

.elmar-sobre__lead {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--sb-body);
  max-width: 520px;
  margin: 20px 0 0;
  font-weight: 600;
  text-wrap: pretty;
}

.elmar-sobre__shot { position: relative; }

.elmar-sobre__frame {
  border-radius: 30px;
  overflow: hidden;
  border: 8px solid var(--sb-card);
  box-shadow: 0 30px 70px -34px rgba(0, 60, 54, .55);
  background: #0B5751;
}

.elmar-sobre__frame img { width: 100%; height: auto; aspect-ratio: 720 / 520; object-fit: cover; background: #EFE3CB; }

.elmar-sobre__seal {
  position: absolute;
  top: -16px;
  right: -10px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--sb-gold);
  color: var(--sb-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .5);
  transform: rotate(-8deg);
}

.elmar-sobre__seal span { font-family: var(--sb-mono); font-size: 10px; letter-spacing: 1.6px; }
.elmar-sobre__seal strong { font-size: 26px; font-weight: 900; line-height: 1; }

.elmar-sobre__duo {
  position: absolute;
  bottom: -26px;
  left: -30px;
  display: flex;
  align-items: flex-end;
}

.elmar-sobre__duo img:first-child { width: 108px; height: auto; animation: elmar-sobre-bob 4.8s ease-in-out infinite; }
.elmar-sobre__duo img:last-child { width: 92px; height: auto; margin-left: -14px; }

/* ---------- números ---------- */

.elmar-sobre__nums {
  padding-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.elmar-sobre__num {
  background: var(--sb-card);
  border: 1.5px solid var(--sb-line);
  border-radius: 20px;
  padding: 22px;
}

.elmar-sobre__num b {
  display: block;
  font-size: 38px;
  font-weight: 900;
  color: var(--sb-green-dark);
  letter-spacing: -1.2px;
  line-height: 1;
}

.elmar-sobre__num i {
  display: block;
  font-style: normal;
  font-family: var(--sb-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--sb-soft);
  margin-top: 8px;
}

.elmar-sobre__num span {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sb-muted);
  line-height: 1.5;
  margin-top: 6px;
}

/* ---------- história ---------- */

.elmar-sobre__story {
  padding-top: 64px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 48px;
  align-items: center;
}

.elmar-sobre__story-img {
  border-radius: 26px;
  overflow: hidden;
  border: 8px solid var(--sb-card);
  box-shadow: 0 26px 60px -32px rgba(0, 60, 54, .5);
}

.elmar-sobre__story-img img { width: 100%; height: auto; aspect-ratio: 720 / 520; object-fit: cover; background: #F6EEDD; }

.elmar-sobre__story p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--sb-body);
  font-weight: 600;
  margin: 14px 0 0;
  text-wrap: pretty;
}

.elmar-sobre__story p:first-of-type { margin-top: 18px; }

.elmar-sobre__quote {
  background: var(--sb-card);
  border: 1.5px solid var(--sb-line);
  border-left: 5px solid var(--sb-gold);
  border-radius: 16px;
  padding: 16px 20px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 800;
  color: var(--sb-ink-2);
  line-height: 1.5;
}

/* ---------- linha do tempo ---------- */

.elmar-sobre__time-sec { padding-top: 64px; }

.elmar-sobre__time {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  margin-top: 26px;
}

.elmar-sobre__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #DCD1B8 0 12px, transparent 12px 22px);
}

.elmar-sobre__mark { position: relative; }

.elmar-sobre__dot {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sb-green);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sb-mono);
  font-size: 12px;
  border: 5px solid var(--sb-cream);
}

.elmar-sobre__dot--2 { background: var(--sb-green-mid); }
.elmar-sobre__dot--3 { background: var(--sb-gold-dark); }
.elmar-sobre__dot--4 { background: var(--sb-ink); font-size: 11px; }

.elmar-sobre__mark strong {
  display: block;
  font-size: 19px;
  font-weight: 900;
  color: var(--sb-green-dark);
  margin-top: 14px;
}

.elmar-sobre__mark span {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--sb-muted);
  line-height: 1.55;
  margin-top: 5px;
}

/* ---------- famílias de produto ---------- */

.elmar-sobre__cats-sec { padding-top: 64px; }

.elmar-sobre__cats-head {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 26px;
}

.elmar-sobre__cats-link {
  margin-left: auto;
  font-family: var(--sb-mono);
  font-size: 11.5px;
  letter-spacing: 1.4px;
  color: var(--sb-green-mid);
  white-space: nowrap;
  padding-bottom: 8px;
}
.elmar-sobre__cats-link:hover { color: var(--sb-green); }

.elmar-sobre__cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.elmar-sobre__cat {
  display: block;
  background: var(--sb-card);
  border: 1.5px solid var(--sb-line);
  border-radius: 22px;
  padding: 16px 14px 18px;
  text-align: center;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.elmar-sobre__cat:hover,
.elmar-sobre__cat:focus {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px -20px rgba(0, 60, 54, .45);
  border-color: #CADFD8;
}

.elmar-sobre__cat img { width: 88px; height: auto; margin: 0 auto 8px; }
.elmar-sobre__cat strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--sb-ink-2); }
.elmar-sobre__cat span { display: block; font-size: 13px; font-weight: 600; color: #7A8C86; line-height: 1.45; margin-top: 4px; }

/* ---------- localização ---------- */

.elmar-sobre__place-sec { padding-top: 64px; }

.elmar-sobre__place {
  background: var(--sb-card);
  border: 1.5px solid var(--sb-line);
  border-radius: 26px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
}

.elmar-sobre__place-txt {
  padding: 38px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.elmar-sobre__place-txt h2 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.8px;
  color: var(--sb-green-dark);
  margin: 6px 0 0;
  line-height: 1.15;
}

.elmar-sobre__place-txt p {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--sb-body);
  font-weight: 600;
  margin: 16px 0 0;
  text-wrap: pretty;
}

.elmar-sobre__place-img { min-height: 340px; }
.elmar-sobre__place-img img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; background: #F6EEDD; }

/* ---------- chamada final ---------- */

.elmar-sobre__cta-sec { padding-top: 64px; padding-bottom: 72px; }

.elmar-sobre__cta {
  background: linear-gradient(120deg, var(--sb-green), var(--sb-green-dark));
  border-radius: 30px;
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.elmar-sobre__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 14px, transparent 14px 28px);
  pointer-events: none;
}

.elmar-sobre__cta > * { position: relative; }
.elmar-sobre__cta .elmar-sobre__kicker { color: #8FD3C4; }

.elmar-sobre__cta h2 {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.9px;
  color: #FFFFFF;
  margin: 8px 0 0;
  line-height: 1.12;
}

.elmar-sobre__cta p {
  font-size: 16.5px;
  font-weight: 600;
  color: #BEDDD5;
  line-height: 1.6;
  margin: 12px 0 0;
  max-width: 440px;
}

.elmar-sobre__truck { display: flex; justify-content: flex-end; align-items: center; }
.elmar-sobre__truck svg { width: 290px; height: auto; overflow: visible; }

.elmar-sobre__wheel { animation: elmar-sobre-roll 3.6s linear infinite; }
.elmar-sobre__wheel--r { transform-origin: 238px 228px; }
.elmar-sobre__wheel--l { transform-origin: 94px 228px; }

/* ---------- animações ---------- */

@keyframes elmar-sobre-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes elmar-sobre-roll {
  to { transform: rotate(360deg); }
}

/* ---------- responsivo ---------- */

@media (max-width: 1180px) {
  .elmar-sobre__title { font-size: 52px; }
  .elmar-sobre__cats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1000px) {
  .elmar-sobre__hero { grid-template-columns: 1fr; gap: 44px; }
  .elmar-sobre__lead { max-width: none; }
  .elmar-sobre__shot { max-width: 620px; margin: 0 auto; width: 100%; }
  .elmar-sobre__duo { left: -10px; bottom: -20px; }
  .elmar-sobre__nums { grid-template-columns: repeat(2, 1fr); }
  .elmar-sobre__story { grid-template-columns: 1fr; gap: 32px; }
  .elmar-sobre__time { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .elmar-sobre__rail { display: none; }
  .elmar-sobre__place { grid-template-columns: 1fr; }
  .elmar-sobre__place-img { min-height: 0; }
  .elmar-sobre__place-img img { height: auto; min-height: 0; aspect-ratio: 720 / 520; }
  .elmar-sobre__cta { grid-template-columns: 1fr; padding: 36px 32px 28px; gap: 8px; }
  .elmar-sobre__truck { justify-content: center; }
}

@media (max-width: 720px) {
  .elmar-sobre__wrap { padding-left: 18px; padding-right: 18px; }
  .elmar-sobre__title { font-size: 38px; letter-spacing: -1px; }
  .elmar-sobre__lead { font-size: 16.5px; }
  .elmar-sobre__h2 { font-size: 28px; }
  .elmar-sobre__seal { width: 78px; height: 78px; right: 0; }
  .elmar-sobre__seal strong { font-size: 21px; }
  .elmar-sobre__duo img:first-child { width: 82px; }
  .elmar-sobre__duo img:last-child { width: 70px; }
  .elmar-sobre__nums { grid-template-columns: 1fr; }
  .elmar-sobre__cats { grid-template-columns: repeat(2, 1fr); }
  .elmar-sobre__cats-link { margin-left: 0; }
  .elmar-sobre__place-txt { padding: 28px 24px; }
  .elmar-sobre__place-txt h2 { font-size: 26px; }
  .elmar-sobre__cta h2 { font-size: 28px; }
  .elmar-sobre__cta h2 br { display: none; }
  .elmar-sobre__truck svg { width: 220px; }
}

/* ---------- acessibilidade ---------- */

@media (prefers-reduced-motion: reduce) {
  .elmar-sobre__duo img,
  .elmar-sobre__wheel { animation: none !important; }
  .elmar-sobre__cat { transition: none; }
}

/* ============================================================
   TEMA ESCURO — bloco acrescentado no fim, nada acima foi tocado.
   O _Layout carimba data-theme com a PREFERENCIA ('auto' e' o padrao),
   nao com o tema efetivo. Por isso o escuro precisa dos DOIS casos:
   data-theme="dark" e data-theme="auto" + prefers-color-scheme: dark.
   Os dois blocos abaixo tem exatamente o mesmo conteudo.
   ============================================================ */

html[data-theme="dark"] .elmar-sobre {
  /* neutros: pagina, cartao, linha e textos viram a paleta escura do site */
  --sb-cream: #222222;
  --sb-card: #2A2A2A;
  --sb-line: #444444;
  --sb-body: #BBBBBB;
  --sb-muted: #AAAAAA;
  --sb-soft: #AAAAAA;
  --sb-ink-2: #F0F0F0;
  --sb-mint: #1A3A30;

  /* --sb-ink servia TEXTO (cor base da pagina, texto sobre o dourado) e
     FUNDO (dot 4 da linha do tempo). A variavel fica com o papel de texto;
     dourado e dot 4 recebem override explicito mais abaixo. */
  --sb-ink: #F0F0F0;

  /* --sb-green-dark aparecia 5x como cor de TEXTO (titulos) e 1x como
     parada do gradiente do CTA. A variavel vai pro papel de texto (verde
     claro do site) e o gradiente do CTA e' reescrito em literais abaixo. */
  --sb-green-dark: #ABDB92;

  /* --sb-green fica no papel de FUNDO (botao solido, dot 1, faixa do CTA):
     verde escuro o suficiente pra sustentar 6.1:1 com o texto branco.
     Onde ela era cor de TEXTO existe override explicito abaixo. */
  --sb-green: #0C6E63;

  /* --sb-green-mid, --sb-gold e --sb-gold-dark NAO sao remapeadas: os
     valores claros ja' funcionam como fundo no escuro (com texto branco ou
     escuro por cima). Os usos delas como TEXTO ou BORDA tem override. */
}

/* chip do hero: fundo verde sutil; texto e borda eram literais claros */
html[data-theme="dark"] .elmar-sobre__tag { border-color: #448578; color: #ABDB92; }

/* botao solido: o anel de 1px carrega a borda do componente (3.8:1 com a
   pagina), ja' que o verde de fundo sozinho fica em 2.6:1 */
html[data-theme="dark"] .elmar-sobre__btn--solid {
  box-shadow: inset 0 0 0 1px #2C8A7C, 0 12px 26px -14px rgba(0, 0, 0, .9);
}

/* ghost: usava --sb-green como cor de TEXTO (verde escuro no escuro =
   ilegivel) e literais claros na borda */
html[data-theme="dark"] .elmar-sobre__btn--ghost { color: #ABDB92; border-color: #448578; }
html[data-theme="dark"] .elmar-sobre__btn--ghost:hover,
html[data-theme="dark"] .elmar-sobre__btn--ghost:focus { color: #C9EDB2; border-color: #6BBFA8; }

/* o dourado segue sendo FUNDO claro, entao o texto por cima continua
   escuro; sem isto --sb-ink (agora claro) deixaria o botao ilegivel */
html[data-theme="dark"] .elmar-sobre__btn--gold,
html[data-theme="dark"] .elmar-sobre__btn--gold:hover,
html[data-theme="dark"] .elmar-sobre__btn--gold:focus { color: #16211E; }

/* o outline vive sobre a faixa do CTA; o dourado padrao nao alcanca 4.5:1
   ali no escuro, entao usa o dourado-como-texto do site */
html[data-theme="dark"] .elmar-sobre__btn--outline { border-color: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .elmar-sobre__btn--outline:hover,
html[data-theme="dark"] .elmar-sobre__btn--outline:focus { border-color: #FFD691; color: #FFD691; }

/* molduras, selo e fotos: sombra esverdeada clara vira preta mais forte e
   o fundo claro do <img> (placeholder antes de carregar) some */
html[data-theme="dark"] .elmar-sobre__frame { box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .elmar-sobre__frame img { background: #2F2F2F; }
html[data-theme="dark"] .elmar-sobre__seal { color: #16211E; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .75); }
html[data-theme="dark"] .elmar-sobre__story-img { box-shadow: 0 26px 60px -32px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .elmar-sobre__story-img img { background: #2F2F2F; }
html[data-theme="dark"] .elmar-sobre__place-img img { background: #2F2F2F; }

/* linha do tempo */
html[data-theme="dark"] .elmar-sobre__rail {
  background: repeating-linear-gradient(90deg, #4A4A4A 0 12px, transparent 12px 22px);
}
/* dot 1 herda o verde de FUNDO (#0C6E63) e fica em 2.60:1 contra a pagina —
   abaixo dos 3:1 de UI, enquanto os outros tres passam (3.05 / 5.37 / 3.12).
   Mesmo remedio do botao solido: anel de 1px por dentro da borda que fura o
   trilho (#2C8A7C, 3.81:1 contra a pagina). O anel nao mexe no layout porque
   e' box-shadow inset, clipado no padding-box do circulo. */
html[data-theme="dark"] .elmar-sobre__dot { box-shadow: inset 0 0 0 1px #2C8A7C; }
/* dot 3 tem fundo dourado: o branco herdado daria 2.96:1, entao texto escuro.
   Dourado e cinza ja' passam sozinhos e dispensam o anel (que seria teal). */
html[data-theme="dark"] .elmar-sobre__dot--3 { color: #16211E; box-shadow: none; }
/* dot 4 usava --sb-ink como FUNDO; com a variavel clara ficaria branco no
   branco. Cinza medio: 5.1:1 com o texto branco e 3.1:1 com a pagina */
html[data-theme="dark"] .elmar-sobre__dot--4 { background: #6E6E6E; color: #FFFFFF; box-shadow: none; }

/* familias de produto */
html[data-theme="dark"] .elmar-sobre__cats-link { color: #ABDB92; }
html[data-theme="dark"] .elmar-sobre__cats-link:hover { color: #C9EDB2; }
html[data-theme="dark"] .elmar-sobre__cat:hover,
html[data-theme="dark"] .elmar-sobre__cat:focus { box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .8); border-color: #448578; }
html[data-theme="dark"] .elmar-sobre__cat span { color: #AAAAAA; }

/* faixa final: e' o papel de FUNDO de --sb-green/--sb-green-dark, reescrita
   em literais justamente pra liberar as duas variaveis pro papel de texto */
html[data-theme="dark"] .elmar-sobre__cta { background: linear-gradient(120deg, #0B5B52, #08332E); }
html[data-theme="dark"] .elmar-sobre__cta .elmar-sobre__kicker { color: #A8E0D2; }

@media (prefers-color-scheme: dark) {

  html[data-theme="auto"] .elmar-sobre {
    /* neutros: pagina, cartao, linha e textos viram a paleta escura do site */
    --sb-cream: #222222;
    --sb-card: #2A2A2A;
    --sb-line: #444444;
    --sb-body: #BBBBBB;
    --sb-muted: #AAAAAA;
    --sb-soft: #AAAAAA;
    --sb-ink-2: #F0F0F0;
    --sb-mint: #1A3A30;

    /* --sb-ink servia TEXTO (cor base da pagina, texto sobre o dourado) e
       FUNDO (dot 4 da linha do tempo). A variavel fica com o papel de texto;
       dourado e dot 4 recebem override explicito mais abaixo. */
    --sb-ink: #F0F0F0;

    /* --sb-green-dark aparecia 5x como cor de TEXTO (titulos) e 1x como
       parada do gradiente do CTA. A variavel vai pro papel de texto (verde
       claro do site) e o gradiente do CTA e' reescrito em literais abaixo. */
    --sb-green-dark: #ABDB92;

    /* --sb-green fica no papel de FUNDO (botao solido, dot 1, faixa do CTA):
       verde escuro o suficiente pra sustentar 6.1:1 com o texto branco.
       Onde ela era cor de TEXTO existe override explicito abaixo. */
    --sb-green: #0C6E63;

    /* --sb-green-mid, --sb-gold e --sb-gold-dark NAO sao remapeadas: os
       valores claros ja' funcionam como fundo no escuro (com texto branco ou
       escuro por cima). Os usos delas como TEXTO ou BORDA tem override. */
  }

  /* chip do hero: fundo verde sutil; texto e borda eram literais claros */
  html[data-theme="auto"] .elmar-sobre__tag { border-color: #448578; color: #ABDB92; }

  /* botao solido: o anel de 1px carrega a borda do componente (3.8:1 com a
     pagina), ja' que o verde de fundo sozinho fica em 2.6:1 */
  html[data-theme="auto"] .elmar-sobre__btn--solid {
    box-shadow: inset 0 0 0 1px #2C8A7C, 0 12px 26px -14px rgba(0, 0, 0, .9);
  }

  /* ghost: usava --sb-green como cor de TEXTO (verde escuro no escuro =
     ilegivel) e literais claros na borda */
  html[data-theme="auto"] .elmar-sobre__btn--ghost { color: #ABDB92; border-color: #448578; }
  html[data-theme="auto"] .elmar-sobre__btn--ghost:hover,
  html[data-theme="auto"] .elmar-sobre__btn--ghost:focus { color: #C9EDB2; border-color: #6BBFA8; }

  /* o dourado segue sendo FUNDO claro, entao o texto por cima continua
     escuro; sem isto --sb-ink (agora claro) deixaria o botao ilegivel */
  html[data-theme="auto"] .elmar-sobre__btn--gold,
  html[data-theme="auto"] .elmar-sobre__btn--gold:hover,
  html[data-theme="auto"] .elmar-sobre__btn--gold:focus { color: #16211E; }

  /* o outline vive sobre a faixa do CTA; o dourado padrao nao alcanca 4.5:1
     ali no escuro, entao usa o dourado-como-texto do site */
  html[data-theme="auto"] .elmar-sobre__btn--outline { border-color: rgba(255, 255, 255, .5); }
  html[data-theme="auto"] .elmar-sobre__btn--outline:hover,
  html[data-theme="auto"] .elmar-sobre__btn--outline:focus { border-color: #FFD691; color: #FFD691; }

  /* molduras, selo e fotos: sombra esverdeada clara vira preta mais forte e
     o fundo claro do <img> (placeholder antes de carregar) some */
  html[data-theme="auto"] .elmar-sobre__frame { box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .8); }
  html[data-theme="auto"] .elmar-sobre__frame img { background: #2F2F2F; }
  html[data-theme="auto"] .elmar-sobre__seal { color: #16211E; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .75); }
  html[data-theme="auto"] .elmar-sobre__story-img { box-shadow: 0 26px 60px -32px rgba(0, 0, 0, .8); }
  html[data-theme="auto"] .elmar-sobre__story-img img { background: #2F2F2F; }
  html[data-theme="auto"] .elmar-sobre__place-img img { background: #2F2F2F; }

  /* linha do tempo */
  html[data-theme="auto"] .elmar-sobre__rail {
    background: repeating-linear-gradient(90deg, #4A4A4A 0 12px, transparent 12px 22px);
  }
  /* dot 1 herda o verde de FUNDO (#0C6E63) e fica em 2.60:1 contra a pagina —
     abaixo dos 3:1 de UI, enquanto os outros tres passam (3.05 / 5.37 / 3.12).
     Mesmo remedio do botao solido: anel de 1px por dentro da borda que fura o
     trilho (#2C8A7C, 3.81:1 contra a pagina). O anel nao mexe no layout porque
     e' box-shadow inset, clipado no padding-box do circulo. */
  html[data-theme="auto"] .elmar-sobre__dot { box-shadow: inset 0 0 0 1px #2C8A7C; }
  /* dot 3 tem fundo dourado: o branco herdado daria 2.96:1, entao texto escuro.
     Dourado e cinza ja' passam sozinhos e dispensam o anel (que seria teal). */
  html[data-theme="auto"] .elmar-sobre__dot--3 { color: #16211E; box-shadow: none; }
  /* dot 4 usava --sb-ink como FUNDO; com a variavel clara ficaria branco no
     branco. Cinza medio: 5.1:1 com o texto branco e 3.1:1 com a pagina */
  html[data-theme="auto"] .elmar-sobre__dot--4 { background: #6E6E6E; color: #FFFFFF; box-shadow: none; }

  /* familias de produto */
  html[data-theme="auto"] .elmar-sobre__cats-link { color: #ABDB92; }
  html[data-theme="auto"] .elmar-sobre__cats-link:hover { color: #C9EDB2; }
  html[data-theme="auto"] .elmar-sobre__cat:hover,
  html[data-theme="auto"] .elmar-sobre__cat:focus { box-shadow: 0 18px 34px -20px rgba(0, 0, 0, .8); border-color: #448578; }
  html[data-theme="auto"] .elmar-sobre__cat span { color: #AAAAAA; }

  /* faixa final: e' o papel de FUNDO de --sb-green/--sb-green-dark, reescrita
     em literais justamente pra liberar as duas variaveis pro papel de texto */
  html[data-theme="auto"] .elmar-sobre__cta { background: linear-gradient(120deg, #0B5B52, #08332E); }
  html[data-theme="auto"] .elmar-sobre__cta .elmar-sobre__kicker { color: #A8E0D2; }

}