/* ============================================================
   pages.css — seções específicas (hero, stats, serviços, etc.)
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-bottom: var(--sec-md); overflow: hidden;   /* base real: xl top / md bottom */
  /* fundo de segurança: .hero/.hero__bg não tinham cor própria, então uma
     costura de composição entre a camada com will-change:transform (vídeo/
     parallax) e o header fixo por cima podia vazar uma cor crua da GPU
     numa linha fina no topo — reportado como "faixa verde". Com o fundo
     escuro aqui, qualquer costura futura funde com o resto em vez de
     aparecer como uma linha estranha. */
  background: var(--c-black);
}
.hero__bg { position: absolute; inset: -10% 0; z-index: 0; will-change: transform; }
.hero__bg .ph { height: 120%; animation: kenburns 20s ease-in-out infinite alternate; }
/* vídeo de fundo fixo (cliente pluga o .mp4 em assets/video/hero.mp4; fallback = gradiente .ph) */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
/* vídeo-bg via iframe do YouTube: 16:9 escalado pra cobrir a viewport (cover) */
.hero__yt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero__yt iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 177.78vh; min-width: 100vw; height: 56.25vw; min-height: 100vh; border: 0;
}
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.16) translateY(-2%); } }
/* Overlay do hero: máscara degradê nos tons teal da marca (mesma lógica
   de cor do gradiente antigo, que existia pra substituir foto — ver
   --c-green-900/--c-black) — mas translúcida, deixando vídeo/poster
   aparecer por trás, e mais escura embaixo, onde o conteúdo fica
   ancorado (.hero usa align-items:flex-end). */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(55% 50% at 12% 12%, rgba(255,255,255,0.10), transparent 60%),
    radial-gradient(50% 55% at 88% 18%, rgba(255,255,255,0.07), transparent 65%),
    linear-gradient(180deg, rgba(18,63,69,0.28) 0%, rgba(18,63,69,0.5) 50%, rgba(12,48,56,0.88) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero h1 { font-size: var(--fs-hero); font-weight: 800; max-width: 18ch; }
.hero__sub { margin-top: 1.6rem; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.3rem); color: var(--c-mist); }
.hero__actions { margin-top: 2.4rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.scroll-hint { position: absolute; bottom: 2rem; right: var(--gutter); z-index: 2;
  writing-mode: vertical-rl; font-family: var(--f-slab); font-size: var(--fs-small);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-green-500); }

/* máscara de reveal por linha (clip) — estado controlado por .is-revealed (IntersectionObserver) */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; will-change: transform; transform: translateY(110%); transition: transform 0.9s var(--ease-out); }
.reveal-line.is-revealed > span { transform: translateY(0); }

/* ---------- Stats ---------- */
.stats { background: var(--c-green-900); overflow: hidden; }
.stats__layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.stats__content { position: relative; z-index: 5; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2.4rem; }
.stat__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--c-accent); line-height: 1; }
.stat__label { margin-top: 0.6rem; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-mist); }
@media (max-width: 760px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; } }

/* ---- Cluster de commodities (paralaxe) ---- */
.stats__rocks { position: relative; min-height: clamp(280px, 34vw, 460px); }
.stats__rock { position: absolute; width: auto; filter: drop-shadow(0 18px 26px rgba(0,0,0,0.45)); will-change: transform; }
.stats__rock--vanadio { left: 0; bottom: 4%; width: 29%; z-index: 1; }
.stats__rock--titanio { left: 4%; top: 10%; width: 41%; z-index: 2; }
.stats__rock--cobre { right: 0; top: 0; width: 45%; z-index: 3; }
.stats__rock--ouro { left: 27%; top: 20%; width: 54%; z-index: 4; }
@media (max-width: 900px) {
  .stats__layout { grid-template-columns: 1fr; }
  .stats__rocks { order: -1; min-height: clamp(220px, 60vw, 340px); }
}

/* ---------- Textura topográfica de fundo (recriada, asset próprio) ---------- */
.has-topo { position: relative; }
.has-topo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/topo.svg") center / cover no-repeat;
  opacity: 0.06;
}
.has-topo > * { position: relative; z-index: 1; }

/* ---------- Serviços (página): título em linha própria, bullets em 2 colunas ---------- */
.svc-detail {
  padding-block: clamp(2.2rem, 4vw, 3.4rem); border-top: 1px solid var(--c-line);
  scroll-margin-top: 6rem; /* header é fixed — sem isso o anchor scroll esconde o topo atrás dele */
}
.svc-detail__head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.6rem; }
.svc-detail__icon { width: 38px; height: 38px; flex: none; color: var(--c-accent); }
.svc-detail__icon svg { width: 100%; height: 100%; }
.svc-detail__head h3 { font-size: var(--fs-h3); }
.svc-detail__lead { color: var(--c-white); max-width: 65ch; margin-bottom: 1.6rem; }
.svc-detail ul { list-style: none; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); }
.svc-detail li { color: var(--c-mist); padding-left: 1.1rem; position: relative; break-inside: avoid; margin-bottom: 0.6rem; }
.svc-detail li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; background: var(--c-accent); }
@media (max-width: 760px) { .svc-detail ul { columns: 1; } }

/* ---------- Home: serviços ---------- */
.home-svc { background: var(--c-green-900); }
.home-svc__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: 3rem; }
.home-svc__top h2 { font-size: var(--fs-h2); }
.svc-list { list-style: none; columns: 2; column-gap: clamp(2rem, 6vw, 6rem); border-top: 1px solid var(--c-line); }
.svc-list li { break-inside: avoid; }
.svc-list a {
  display: flex; align-items: center; justify-content: flex-start; gap: 0.9rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--c-line);
  font-family: var(--f-display); font-size: clamp(0.9rem, 1.3vw, 1.15rem); text-transform: uppercase;
  color: var(--c-white); transition: color 0.4s var(--ease-out), padding-left 0.4s var(--ease-out);
}
.svc-list__icon { width: 22px; height: 22px; flex: none; color: var(--c-accent); }
.svc-list__icon svg { width: 100%; height: 100%; }
.svc-list a:hover { color: var(--c-accent); padding-left: 0.8rem; }
@media (max-width: 760px) { .home-svc__top { grid-template-columns: 1fr; } .svc-list { columns: 1; } }

/* ---------- Home: últimas notícias ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); align-items: start; }
.news-card { display: grid; gap: 1rem; }
.news-card .ph { aspect-ratio: 16/10; height: auto; border-radius: var(--radius); }
.news-card time { font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); }
.news-card h3 { font-size: var(--fs-h3); }
.news-card:hover h3 { color: var(--c-accent); transition: color 0.3s var(--ease-out); }
@media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Section header ---------- */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; }
.section-head h2 { font-size: var(--fs-h2); max-width: 16ch; }

/* ---------- Acordeão de serviços ---------- */
.acc { border-top: 1px solid var(--c-line); }
.acc__item { border-bottom: 1px solid var(--c-line); }
.acc__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0; text-align: left;
  font-family: var(--f-display); font-size: var(--fs-h3); text-transform: uppercase; color: var(--c-white);
  transition: color 0.4s var(--ease-out);
}
.acc__head:hover { color: var(--c-accent); }
.acc__sign { color: var(--c-accent); font-family: var(--f-body); font-size: 1.6rem; line-height: 1; transition: transform 0.4s var(--ease-out); }
.acc__item.is-open .acc__sign { transform: rotate(45deg); }
.acc__panel { overflow: hidden; max-height: 0; transition: max-height 0.55s var(--ease-io); }
/* a altura aberta é definida inline pelo JS (panel.scrollHeight) — robusto e responsivo */
.acc__panel-inner { padding: 0 0 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 2rem; }
.acc__panel-inner li { list-style: none; color: var(--c-mist); padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.acc__cta { margin-top: 1rem; }
@media (max-width: 640px) { .acc__panel-inner { grid-template-columns: 1fr; } }

/* ---------- Chips de serviços (projeto) ---------- */
.proj-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.proj-tags span {
  font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-accent); border: 1px solid var(--c-line); border-radius: 100px; padding: 0.5rem 1rem;
}

/* ---------- Blocos de texto (sobre: missão/valores/etc) ---------- */
.text-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem,6vw,6rem); padding-block: var(--sec-md); border-top: 1px solid var(--c-line); }
.text-block h2 { font-size: var(--fs-h2); }
.text-block ul { list-style: none; display: grid; gap: 0.8rem; margin-top: 1rem; }
.text-block ul li { padding-left: 1.4rem; position: relative; }
.text-block ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 8px; background: var(--c-accent); }
@media (max-width: 760px) { .text-block { grid-template-columns: 1fr; } }

/* ---------- Escritórios (contato) ---------- */
.offices { display: grid; grid-template-columns: 220px 1fr; gap: clamp(2rem,5vw,4rem); margin-top: clamp(2rem,6vw,4rem); border-top: 1px solid var(--c-line); padding-top: clamp(2rem,5vw,3rem); }
.offices__nav { display: grid; gap: 0.3rem; align-content: start; }
.offices__nav button {
  text-align: left; font-family: var(--f-display); font-size: var(--fs-h3); text-transform: uppercase;
  color: var(--c-green-500); padding: 0.5rem 0; transition: color 0.3s var(--ease-out);
}
.offices__nav button.is-active { color: var(--c-accent); }
.office__panel { display: none; }
.office__panel.is-active { display: block; }
.office__panel dt { font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.3rem; margin-top: 1.2rem; }
.office__panel dd { font-size: var(--fs-h3); font-family: var(--f-display); color: var(--c-white); }
@media (max-width: 700px) { .offices { grid-template-columns: 1fr; } }

/* ---------- Contato: escritórios com mapa (abas + mapa + card sobreposto) ---------- */
.office-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--c-line); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.office-tabs button { padding: 1.1rem 1rem; font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mist); border-right: 1px solid var(--c-line); transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out); }
.office-tabs button:last-child { border-right: 0; }
.office-tabs button.is-active { background: var(--c-green-900); color: var(--c-accent); }
.office-stage { position: relative; }
.office-map { height: 520px; border: 1px solid var(--c-line); border-top: 0; overflow: hidden; }
/* tiles claros tingidos para um mapa verde-escuro (combina com a paleta) */
.office-map .leaflet-tile-pane { filter: invert(1) sepia(1) hue-rotate(70deg) saturate(0.85) brightness(0.92) contrast(0.95); }
.office-card { position: absolute; top: 1.5rem; left: 1.5rem; z-index: 600; width: min(380px, 86%); background: var(--c-cream); color: var(--c-green-900); padding: 1.9rem; border-radius: var(--radius); box-shadow: 0 14px 44px rgba(0,0,0,.45); }
.office-card h3 { color: var(--c-green-900); font-size: var(--fs-h2); }
.office-card .addr { margin-top: 1rem; line-height: 1.55; }
.office-card .tel { margin-top: 0.8rem; font-weight: 700; color: var(--c-green-900); }
.office-card .email { display: block; margin-top: 0.3rem; color: var(--c-accent); }
@media (max-width: 640px) {
  .office-tabs { grid-template-columns: 1fr 1fr; }
  .office-map { height: 380px; }
  .office-card { position: static; width: auto; border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
}

/* ---------- Carreira: "fazer parte é" (grid de perks) ---------- */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.perk { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.8rem; }
.perk h3 { font-size: var(--fs-h3); color: var(--c-accent); margin-bottom: 0.6rem; }
.perk p { color: var(--c-mist); }
@media (max-width: 860px) { .perks { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } }

/* ---------- Carreira: vagas disponíveis ---------- */
.positions { border-top: 1px solid var(--c-line); }
.position {
  display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem; align-items: center;
  padding: 1.4rem 0; border-bottom: 1px solid var(--c-line);
  transition: padding-left 0.4s var(--ease-out);
}
.position:hover { padding-left: 0.8rem; }
.position__title { font-family: var(--f-display); font-size: var(--fs-h3); text-transform: uppercase; color: var(--c-white); }
.position__meta { font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-green-500); }
.position .arr { color: var(--c-accent); transition: transform 0.4s var(--ease-out); }
.position:hover .arr { transform: translateX(6px); }
@media (max-width: 640px) { .position { grid-template-columns: 1fr auto; } .position__meta { display: none; } }

/* ---------- Página interna (hero menor) ---------- */
.page-hero { padding-top: clamp(8rem, 16vw, 12rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.page-hero h1 { font-size: var(--fs-h1); max-width: 20ch; }
.page-hero .eyebrow { margin-bottom: 1.4rem; }

/* ---------- Projetos (listagem): mapa + lista ---------- */
.proj-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.proj-head p { max-width: 65ch; color: var(--c-mist); }

/* mapa Leaflet */
.proj-map { height: 580px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); }
.leaflet-container { background: #0b0817 !important; font-family: var(--f-body); }
.leaflet-control-zoom a { background: var(--c-green-900) !important; color: var(--c-white) !important; border-color: var(--c-line) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--c-green-900) !important; color: var(--c-white) !important; box-shadow: 0 6px 24px rgba(0,0,0,.5) !important; }
.leaflet-popup-content { margin: 0.9rem 1rem; font-family: var(--f-body); }
.leaflet-popup-content strong { font-family: var(--f-display); font-size: 1.15rem; text-transform: uppercase; color: var(--c-white); }
.leaflet-popup-content .tag { color: var(--c-accent); font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; }
.leaflet-popup-content a { color: var(--c-accent); }
.proj-marker {
  background: var(--c-accent); color: var(--c-black); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* lista de projetos (acordeão — reaproveita .acc/.acc__item/.acc__panel, ver initAccordions em main.js) */
.proj-acc__head { display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem; align-items: center; }
.proj-acc__head .pname { font-family: var(--f-display); font-size: var(--fs-h3); text-transform: uppercase; color: var(--c-white); transition: color 0.4s var(--ease-out); }
.proj-acc__head:hover .pname { color: var(--c-accent); }
.proj-acc__head .ploc { font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-green-500); }
.acc__panel-inner ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 2rem; }
.acc__panel-inner li strong { display: block; color: var(--c-white); font-weight: 600; }
.proj-acc__desc { color: var(--c-white); max-width: 65ch; margin-bottom: 1.2rem; }
.proj-acc__desc--todo { color: var(--c-mist); font-style: italic; }
.proj-acc__services-title { font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin-top: 1.2rem; margin-bottom: 0.6rem; }
.proj-acc__services { margin-top: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.proj-acc__services a {
  font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent);
  border: 1px solid var(--c-line); border-radius: 100px; padding: 0.5rem 1rem; transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.proj-acc__services a:hover { border-color: var(--c-accent); color: var(--c-white); }
.proj-acc__todo-note { color: var(--c-mist); font-style: italic; font-size: var(--fs-small); }
@media (max-width: 640px) { .proj-acc__head { grid-template-columns: 1fr auto; } .proj-acc__head .ploc { display: none; } .proj-map { height: 420px; } }

/* ---------- Sobre / timeline ---------- */
.timeline { display: grid; gap: 0; }
.tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 2rem; padding-block: 2rem; border-top: 1px solid var(--c-line); }
.tl-item .yr { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-h3); color: var(--c-accent); }
.tl-item h3 { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; align-items: start; }
.team-grid--bios { grid-template-columns: 1fr; gap: 2.5rem; }
.team-grid--bios .team-card { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; }
.team-card .ph { aspect-ratio: 3/4; height: auto; border-radius: var(--radius); margin-bottom: 0.8rem; }
.team-card .ph-img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: var(--radius); margin-bottom: 0.8rem; filter: grayscale(1); }
.team-grid--bios .team-card .ph-img, .team-grid--bios .team-card .ph { margin-bottom: 0; }
.team-card h4 { font-family: var(--f-display); font-size: var(--fs-h3); color: var(--c-white); }
.team-card p { font-size: var(--fs-small); color: var(--c-accent); letter-spacing: 0.08em; text-transform: uppercase; }
.team-card p.team-card__bio { margin-top: 0.6rem; color: var(--c-mist); letter-spacing: normal; text-transform: none; }
@media (max-width: 760px) { .team-grid { grid-template-columns: 1fr 1fr; } .tl-item { grid-template-columns: 70px 1fr; gap: 1rem; } }
@media (max-width: 640px) { .team-grid--bios .team-card { grid-template-columns: 1fr; } .team-grid--bios .team-card .ph-img, .team-grid--bios .team-card .ph { max-width: 200px; margin-bottom: 0.8rem; } }

/* ---------- Líder (foto ao lado do texto) ---------- */
.leader-card { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
.leader-card__img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center; border-radius: var(--radius); }
.leader-card__name { font-family: var(--f-display); font-size: var(--fs-h2); color: var(--c-white); }
.leader-card__role { margin-top: 0.5rem; font-family: var(--f-slab); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); }
.leader-card__bio { margin-top: 1.3rem; color: var(--c-mist); max-width: 65ch; }
@media (max-width: 640px) { .leader-card { grid-template-columns: 1fr; } .leader-card__img { max-width: 280px; } }

/* ---------- Contato ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); }
.field { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; }
.field label { font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-mist); }
.field input, .field textarea {
  background: var(--c-green-900); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 0.9rem 1rem; color: var(--c-white); font: inherit; transition: border-color 0.3s var(--ease-out);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-accent); }
.contact-info dl { display: grid; gap: 1.6rem; }
.contact-info dt { font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.3rem; }
.contact-info dd { font-size: var(--fs-h3); font-family: var(--f-display); color: var(--c-white); }
.map-ph { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; margin-top: 2rem; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Home: clientes (logos rodantes) ---------- */
.clients { background: var(--c-green-900); overflow: hidden; }
.clients__head { text-align: center; margin-bottom: 2.4rem; }
.clients__head .eyebrow { justify-content: center; margin-bottom: 1.8rem; }
.clients__head h2 { font-size: var(--fs-h2); max-width: 52ch; margin-inline: auto; }
.marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); width: max-content; animation: marquee 32s linear infinite; }
.marquee__track:hover { animation-play-state: paused; }
.marquee__logo { height: clamp(32px, 4.6vw, 50px); width: auto; opacity: 0.75; filter: grayscale(1) brightness(1.6); transition: opacity 0.3s var(--ease-out), filter 0.3s var(--ease-out); }
.marquee__logo:hover { opacity: 1; filter: none; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Decisão consciente: a faixa de logos roda mesmo com "reduzir movimento"
   ligado no SO — pedido explícito, mesmo comportamento em qualquer
   dispositivo (mobile ou desktop). base.css desliga toda animação nesse
   modo via `* { animation: none !important }`; o !important aqui
   reabilita só essa. Rotação constante e lenta, sem flash/parallax —
   risco baixo pra quem usa reduced-motion por enjoo de movimento. */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: marquee 32s linear infinite !important; }
}